/* UPDATED: 30/10/2026 */

/* fonts */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-v16-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-v20-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-v20-latin-600.woff2") format("woff2");
}



/* Paleta de colores */
:root {
  --background: #0d0d0d;
  --background-drawer: #141414;
  --amber: #e8a317;
  --amber-soft: #fff4d2;
  --text: #f3e6c4;
  --line: rgba(232, 163, 23, 0.35);
}



html, body {
  height: 100%;
  margin: 0;
  /* esconde lo que no rebosa y quita la barra de scroll */
  /* overflow: hidden; */
}


html {
  scrollbar-gutter: stable;
  /* 
  Reserva el hueco de la barra de scroll aunque la página no rebase.
  Así el ancho no cambia al ir de una página corta a una larga, y el menú centrado del wide-nav no se corre/mueve.
  */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--background);
  color: var(--amber);
  font-family: "Press Start 2P", monospace;
}

.bar {
  /* Clavar la barra a la ventana, no en el documento */
  position: fixed;

  /* Distancia en px de la barra al borde de arriba, al izq y al dcho */
  top: 0;
  left: 0;
  right: 0;

  z-index: 2;
  display: flex;

  /* centrar los items en vertical */
  align-items: center;
  /* junta los hijos al principio de la fila, a la izquierda. No reparte el hueco. */
  justify-content: flex-start;
  gap: 1rem;
  /* rem es relativo a la letra base del navegador, casi siempre 16px, asi que 1.25rem son unos 20px */
  padding: 0.9rem 1.25rem;
  
  /* background: var(--background); */
  background: var(--background);

  /* border-bottom: 1px solid var(--line); */
  border-bottom: 1px solid var(--amber);

  /* border: 2px solid red; */
}


.hamburger {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  font-size: 1.2rem;
  cursor: pointer;
}


.brand {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--amber);
}

.wide-nav {
  position: absolute;
  /* absolute: Element is positioned relative to the nearest positioned ancestor */

  /* Mueve el borde izquierdo del menu hasta la mitad de la barra.  */
  /* Ahi todavia no esta centrado: esta empezando en el centro, y el resto crece hacia la derecha. */
  left: 50%;

  /*
  transform: Lo corre hacia la izquierda la mitad de su propio ancho.
  El - es esa direccion.
  El 50% de un translate es la mitad del propio menu, no de la pagina.
  Las dos lineas juntas, left y translate son el truco: borde al centro, y luego medio menu para atras.
  Asi el centro de Ranking, Wishing Well y Philosophy coincide con el centro de la barra. */
  transform: translateX(-50%);

  display: flex;
  /* flex es una caja de bloque: en una linea normal ocupa todo el ancho del padre y empuja lo de debajo.  */
  /* inline-flex es una caja en linea: mide solo lo que miden sus hijos, como una palabra, y se sienta al lado de lo que tenga cerca. */
  gap: 3.3rem;

  /* border: 2px solid red; */
}


.wide-nav a {
  /* border: 1px solid var(--amber); */
  min-width: 13rem;
  text-align: center;
}


.wide-nav a:hover {
  color: var(--amber-soft);
  /* color: var(--background); */
  /* border-color: var(--amber-soft); */
  /* background-color: var(--amber); */
}


.wide-nav a,
.drawer a {
  color: var(--amber);
  text-decoration: none;
  font-size: 0.62rem;
  letter-spacing: 0.04em;

  /* para que no colapse en 2 lineas al achatarlo */
  white-space: nowrap;

  /* border: 1px solid var(--amber); */
  padding: 2px;

  width: 14.2rem;
  text-align: center;
  box-sizing: border-box;
}


/* overlay: cortina/"cajon" a la derecha cuando se abre la hamburguesita */
.overlay {
  /* ocultarla */
  display: none;

  /* la despega del texto y la sujeta a la ventana */
  position: fixed;

  /* Set the distance to the parent element from the positioned <div> element */
  inset: 0;

  background: rgba(0, 0, 0, 0.45);
  z-index: 3;
  /* border: 2px solid red; */
}

/* drawer: cajon del menu que aparece a la izq cuando se abre la hamburguesita */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;

  /* se queda con el menor de los 2: */
  width: min(18rem, 86vw);

  height: 100%;
  margin: 0;
  padding: 4.5rem 1.5rem;

  /*
  The box-sizing border-box property allows us to include the padding and border
  in an element's total width and height. */
  /* https://www.w3schools.com/css/css3_box-sizing.asp */
  box-sizing: border-box;

  background: var(--background-drawer);
  border-right: 1px solid var(--line);

  /* lo oculta moviendolo su 100% a la izquierda */
  transform: translateX(-100%);

  /* transición delicada: si lo comentas, es inmediata, de un fotograma a otro */
  transition: transform 0.2s ease;
  /* border: 2px solid red; */

  /* para que no se salga en dispositivos móviles por fuera del cajon los <a> del drawer a sub <330px*/
  overflow: hidden;
}

/* cada uno de los hipervinculos del cajon */
.drawer a {
  
  /* para que no se salga en dispositivos móviles por fuera del cajon los el texto de los drawer <a> a sub <230px*/
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  display: block;
  text-align: left;
  margin: 0 0 1.4rem;
  border: 1px solid var(--amber);
  /* border: 2px solid red; */
}

.drawer a:hover {
  color: var(--amber-soft);
  border-color: var(--amber-soft);
  background-color: var(--amber);
}


/* overlay: cortina/"cajon" a la derecha cuando se abre la hamburguesita */
body.open .overlay {
  display: block;
  /* border: 2px solid red; */
}

/*
.drawer {transform: translateX(-100%);}: dice 'córrete todo tu ancho a la izquierda'
body.open .drawer dice 'si el body tiene la clase open, pon el transform: translateX(0)'.
Esa 2a regla es mas concreta, asi que gana.
El cajon pasa de estar fuera a estar pegado al borde izquierdo.
Al quitar open, vuelve a mandar el -100% y se esconde otra vez. */
body.open .drawer {
  transform: translateX(0);
}


/*
Cuando abra el drawer en la hamburguesita, ocúltame el wide-nav
*/
body.open .wide-nav {
  display: none;
}

.stage {
  flex: 1;
  /*
  Mide lo que queda. 
  La ventana, menos la barra, menos el footer. 
  El título y el círculo siguen centrados dentro de ese hueco, porque justify-content: center y align-items: center no cambian.
  */

  display: flex;
  /*
  Convierte .stage en una fila de cajas.
  Sin mas, los hijos se sentarian en horizontal: el titulo al lado del 'COMING SOON',
  y el circulo al lado de los 2. */

  flex-direction: column;
  /*
  gira esa fila. Los hijos bajan en vertical, en el orden del HTML.
  1º el título, luego la línea, luego el círculo.
  El eje principal pasa a ser el de arriba a abajo. */


  align-items: center;
  /*
  centra en el otro eje, el de lado a lado.
  Cada línea queda en el medio del ancho.*/

  justify-content: center;
  /*
  https://www.w3schools.com/css/css3_flexbox_container_justify.asp
  The center value aligns the flex items in the center of the container
  Como ahora es vertical, centra en el eje vertical */

  /*
  Espacio vertical entre cada elemento <p> */
  gap: 1.5rem;

  /* como el centrar del MS Word */
  text-align: center;

  padding: 1.5rem;
  box-sizing: border-box;

  /* si pones el .bar con display: none; se ve 100% cual es el stage */
  /* border: 10px solid red; */

  /* Centrado exacto en la ventana */
  /* compensa la altura aproximada de la barra fija */
  margin-top: +4.5rem; 
}

.title {
  font-size: clamp(0.85rem, 2.4vw, 1.35rem);
  /*
  clamp elige un tamaño entre un mínimo y un máximo.
  La del medio es la que prefiere, y las otras 2 son los topes.
   */

  line-height: 1.6;
  margin: 0;
  max-width: 18ch;
  /* border: 2px solid red; */
}

.line {
  position: relative;

  font-size: clamp(0.55rem, 1.4vw, 0.75rem);
  /*
  clamp: elige un tamaño entre un mínimo y un máximo. La de en medio es la que prefiere, y las otras 2 son los topes.
  VW (viewport width): En una ventana (viewport) de 1000 px de ancho, 2.4vw son 24 px. En una de 500 px, son 12 px.
  VH (viewport height): En una ventana (viewport) de 1000 px de alto, 2.4vh son 24 px. En una de 500 px, son 12 px.
  Y rem es relativo a la letra base del navegador, casi siempre 16px, asi que 1.25rem son unos 20px */

  line-height: 1.7;
  /* separacion entre elementos */

  margin: 0;
}

#dots {
  position: static;
  display: inline-block;
  width: 1.6em;
  text-align: left;
}

.light {
  font-size: 1.66rem;
  margin: 0;
  font-family: ui-sans-serif, sans-serif;
  opacity: 0;
}

.light.on {
  opacity: 1;
  transition: opacity 3s linear;
}

/*
Esta regla solo se aplica si la ventanta mide 720px de ancho o menos:
- Oculta el wide-nav
- Muestra la hamburguesita */
@media (max-width: 1100px) {
  .wide-nav { display: none; }
}

.emoji{
  font-size: 1.2rem;
}



/* coming soon */
.coming-soon:hover {
  font-size: 0;
}

.coming-soon:hover .emoji {
  font-size: 1.2rem;
}

.coming-soon:hover::after {
  content: " Coming soon";
  font-size: 0.62rem;
}



/* Footer: copyright */

.site-footer {
  margin-top: 3rem;
  padding: 1.6rem 1.25rem 1.6rem; /*arriba, izda-dcha, abajo*/
  border-top: 1px solid var(--amber);
  /* border-top: 1px solid var(--line); */
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 0.55rem;
  line-height: 1.6;
  color: var(--amber);
  /* color: var(--line); */
}