/* ============================================================
   Memorie Legends — paleta única: negro, oro y plata.
   Todo el sitio lee de acá. Si cambia un color, cambia una vez.
   ============================================================ */

/* ============================================================
   LAS TIPOGRAFÍAS, SERVIDAS DESDE EL SITIO

   Venían de Google Fonts: una hoja de fonts.googleapis.com que a su vez pedía
   los archivos a fonts.gstatic.com. Dos servidores más que visitar antes de
   la primera letra, y en 4G lenta cada visita cuesta varios viajes de ida y
   vuelta. Desde acá viajan por la conexión que ya está abierta.

   Sólo el alfabeto latino, que es el que usa el sitio (con las tildes, la ñ,
   ¿ ¡ « » y las rayas). Una letra de otro alfabeto —un nombre de jugador en
   cirílico, por ejemplo— sale con el respaldo; con Google pasaba lo mismo
   con cualquier alfabeto que no se pidiera.

   Inter es UN archivo para todos los pesos: es variable, y Google entrega el
   mismo archivo se le pida 400 o de 100 a 900. Playfair es el 700 fijo, el
   único que usa el sitio.

   La versión va en el nombre porque `firebase.json` guarda las fuentes un año
   sin volver a preguntar. Las licencias, OFL, están al lado de los archivos.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-v40-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   RESPALDOS CON LAS MEDIDAS AJUSTADAS

   Mientras las tipografías del juego bajan, el texto se dibuja con la del
   sistema. Cuando llegan, cambia — y si la del sistema ocupaba otro espacio,
   todo lo de abajo se corre. Medido en la portada: 0,104 de "cambio de
   diseño", casi todo el que tenía la página.

   Estos dos respaldos son Arial y Georgia con las medidas corregidas para que
   ocupen EXACTAMENTE lo mismo que Inter y Playfair. Así el cambio ocurre igual
   —la letra se ve distinta un instante— pero nada se mueve de lugar.

   Los números no son a ojo: se midieron con el navegador, comparando el ancho
   de una misma frase y las cajas de cada tipografía. Si algún día se cambia
   Inter o Playfair por otra, hay que volver a medirlos o esto empieza a
   mentir. La receta está en el registro de este cambio.
   ============================================================ */

@font-face {
  font-family: "Inter respaldo";
  /* `local()`: no descarga nada, usa la que ya está en la máquina. */
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106.4%;
  ascent-override: 91.2%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

/* El mismo respaldo, pero para texto EN MAYÚSCULAS.

   El de arriba se midió con una frase en minúsculas y quedó en 106,4%. En
   mayúsculas la proporción es otra: Inter mide 2939 y Arial 2982, o sea 98,6%.
   Usar el de minúsculas dejaba el respaldo un 8% más ancho de la cuenta, y el
   lema de la portada se partía en TRES líneas hasta que llegaba Inter y volvía
   a dos. Ese salto de 19px era casi todo el desplazamiento que quedaba a
   390px.

   Va aparte y no reemplaza al otro porque las dos proporciones son ciertas:
   depende de qué letras se dibujen. */
@font-face {
  font-family: "Inter respaldo mayus";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 98.6%;
  ascent-override: 98.4%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Playfair respaldo";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 89%;
  ascent-override: 121.3%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}

/* ============================================================
   CINZEL, SÓLO PARA EL NOMBRE DE LA BARRA

   El archivo trae únicamente las letras de MEMORIE LEGENDS: 1,8 KB en vez de
   los ~30 del alfabeto entero. Google Fonts lo recorta así si se le pide con
   `text=`. Si algún día Cinzel se usa para otro texto, hay que bajar el
   alfabeto completo: las letras que falten saldrían con el respaldo.

   Se sirve desde el sitio y no desde Google: un servidor más que visitar en
   4G lenta cuesta más que el archivo. La versión va en el nombre porque las
   fuentes quedan un año en caché sin volver a preguntar (`firebase.json`).

   Licencia OFL, al lado del archivo: `public/fonts/OFL-cinzel.txt`.
   ============================================================ */
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-v26-700-marca.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Georgia con las medidas de Cinzel, como los respaldos de arriba. Medido en
   el navegador con «MEMORIE LEGENDS» en mayúsculas a 100 px: Cinzel ocupa
   1032 y este respaldo 995, o sea 103,7 %. Las cajas son las de Cinzel (98 y
   37) divididas por ese mismo 103,7 %, porque `size-adjust` las agranda. */
@font-face {
  font-family: "Cinzel respaldo";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 103.7%;
  ascent-override: 94.5%;
  descent-override: 35.7%;
  line-gap-override: 0%;
}

:root {
  /* --- negros --- */
  --negro: #0a0a0a;
  --negro-2: #101010;
  --negro-3: #16161a;

  /* --- oro --- */
  --oro: #d4a843;
  --oro-claro: #f0d060;
  --oro-hondo: #8a6d2a;

  /* --- plata --- */
  --plata: #c0c0c0;
  --plata-clara: #d0d0d0;
  --plata-honda: #a0a0a0;

  /* --- texto --- */
  --texto: #ffffff;
  --texto-tenue: var(--plata);
  --texto-suave: var(--plata);

  /* --- superficies --- */
  --panel: rgba(18, 18, 22, 0.86);
  --panel-alto: rgba(26, 26, 32, 0.9);
  --borde: rgba(212, 168, 67, 0.28);
  --borde-suave: rgba(255, 255, 255, 0.08);

  /* El cajón del menú (ver `js/menu.js` y el bloque de `app.css`).

     El fondo es más opaco que el de la barra a propósito: la barra se apoya
     sobre la página con `backdrop-filter` y se quiere que se transparente un
     poco. El cajón, no — abajo hay texto y cartas, y un panel translúcido
     encima de eso no se lee. */
  --cajon-fondo: #0d0d10;
  --cajon-ancho: min(320px, 86vw);
  --cajon-velo: rgba(3, 5, 9, 0.68);

  /* --- sombras --- */
  --sombra-oro: 0 8px 30px rgba(212, 168, 67, 0.25);
  --sombra-oro-fuerte: 0 6px 30px rgba(212, 168, 67, 0.4);
  --sombra-negra: 0 14px 34px rgba(0, 0, 0, 0.55);

  /* --- acentos, todos cálidos o neutros: sin rosa ni magenta --- */
  --rojo: #c0392b; /* rojo profundo, para el dorso rojo y avisos */
  --verde: #3d8b6b;
  --bronce: #b87333;
  --azul: #4a7fb5; /* azul apagado, para el dorso azul */
  --ambar: var(--oro-claro);

  /* ------------------------------------------------------------------
     CAPA "LEGENDARIA"

     Piezas reutilizables para que una tarjeta parezca una carta cara y no
     un rectángulo con borde. Viven acá y no en cada hoja porque el punto
     es que el tablero, el panel y la sala se vean de la MISMA familia:
     tres definiciones distintas de "dorado" es como se pierde una estética.

     Todo con CSS. Nada de imágenes: el sitio carga en teléfonos con datos
     móviles y una textura de 200 KB por pantalla se nota más que el brillo.
     ------------------------------------------------------------------ */

  /* El paño: un degradado radial cálido sobre negro, como fieltro con una
     luz encima. Se usa de fondo en las superficies grandes. */
  --fieltro:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212, 168, 67, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(184, 115, 51, 0.07), transparent 70%),
    var(--negro);

  /* El borde de una carta legendaria: oro que gira de apagado a claro y
     vuelve. Se pinta con `border-image` o como fondo de un pseudoelemento. */
  --filo-oro: linear-gradient(135deg, var(--oro-hondo), var(--oro-claro) 45%, var(--oro-hondo) 70%, var(--oro) 100%);
  --filo-plata: linear-gradient(135deg, #6d6d6d, var(--plata-clara) 45%, #6d6d6d 100%);

  /* Relieve: una luz arriba y una sombra abajo, DENTRO del elemento. Es lo
     que hace que un botón parezca una gema y no un rectángulo pintado. */
  --relieve-oro:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35);
  --relieve-hueco:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);

  /* Halo para el foco y el hover. Suave: un resplandor que ciega cansa. */
  --halo-oro: 0 0 0 1px rgba(212, 168, 67, 0.5), 0 8px 34px rgba(212, 168, 67, 0.22);
}

/* ------------------------------------------------------ campos de formulario

   El problema que esto resuelve: sin `color-scheme: dark`, el navegador dibuja
   el desplegable con el tema del SISTEMA. En Windows eso es un panel blanco con
   texto claro encima —ilegible— y no se arregla pintando el `select`, porque la
   lista desplegada la dibuja el sistema operativo y no la página.

   Va en el tema y con selector de elemento a propósito: cualquier `select` que
   aparezca mañana en cualquier pantalla nace bien. Un problema que reaparece en
   cada formulario nuevo no se arregla formulario por formulario. */

select,
input,
textarea {
  color-scheme: dark;
  background-color: var(--negro-2);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-family: inherit;
  /* ───────────────────────────────────────────────────────────────────
     16px EXACTOS, Y NO ES UNA CUESTIÓN DE GUSTO

     Safari en iOS hace ZOOM sobre cualquier campo cuya letra mida menos de
     16px al tocarlo. No es configurable ni se puede desactivar desde la
     página: la única salida que no rompe el pellizco para agrandar es que el
     campo mida 16 o más.

     Acá decía `0.95rem`, que con la raíz en 16px son 15,2. Ochenta centésimas
     de píxel por debajo del umbral, y alcanzaban: en un iPhone, tocar el campo
     del código de una sala privada saltaba la página entera y había que
     volver a achicarla a mano.

     Eran dieciocho campos en cuatro pantallas —tablero, lobby, sala y
     cuenta—, todos por esta línea. `login` y `register` se salvaban de
     casualidad, porque `style.css` los pisa con `1rem`.

     Si algún día hace falta letra más chica en un campo, que sea en ESE campo
     y con el motivo escrito al lado. Acá no. */
  font-size: 1rem;
  padding: 11px 13px;
  box-shadow: var(--relieve-hueco);
}

/* Las opciones también: en algunos navegadores heredan del sistema aunque el
   select esté pintado. */
select option {
  background-color: var(--negro-2);
  color: var(--texto);
}

select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 1px;
}

input::placeholder {
  color: rgba(192, 192, 192, 0.45);
}

/* ------------------------------------------------- botones de la paleta */

.btn-oro {
  background: linear-gradient(145deg, var(--oro), var(--oro-claro));
  color: var(--negro);
  border: none;
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(212, 168, 67, 0.25);
}

.btn-oro:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: var(--sombra-oro-fuerte);
}

/* El compañero del botón de oro.

   Era plata plana y quedaba como una pieza de otra caja: al lado del dorado
   del logo, un bloque gris claro sobre fondo negro se lleva la mirada que
   tendría que llevarse el botón principal. Ahora es cuero oscuro con filo
   dorado — misma familia, distinto rango. */
.btn-plata {
  background: linear-gradient(180deg, #2a2119 0%, #17120c 100%);
  color: var(--oro-claro);
  border: 1px solid rgba(212, 168, 67, 0.45);
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 24px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-plata:hover:not(:disabled) {
  background: linear-gradient(180deg, #3a2e21 0%, #201810 100%);
  border-color: rgba(212, 168, 67, 0.8);
  box-shadow: 0 0 18px rgba(212, 168, 67, 0.18);
}

.btn-oro:disabled,
.btn-plata:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------ la marca de la barra */

/* La moneda. Va con `alt=""` en el HTML porque el nombre está escrito al
   lado: con el nombre también en el `alt`, un lector de pantalla lo lee dos
   veces seguidas. */
.marca-moneda {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .marca-moneda {
    width: 50px;
    height: 50px;
  }
}

/* El nombre, en texto y no en imagen: pesa cero, escala sin perder nitidez,
   lo lee un lector de pantalla y se corrige en una línea.

   En el HTML dice «Memorie Legends»; las mayúsculas las pone
   `text-transform`. Escrito en mayúsculas, algunos lectores de pantalla lo
   deletrean letra por letra.

   Cada palabra va en su propio <span> para que, cuando no entra en un
   renglón, se apilen una arriba de la otra (ver `app.css`) y cada una tenga su
   degradado entero. */
.marca-texto {
  display: inline-block;
  font-family: "Cinzel", "Cinzel respaldo", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  /* El volumen. `text-shadow` no sirve acá: con el degradado recortado a las
     letras, se pinta ENCIMA y ensucia el dorado. `drop-shadow` se aplica a
     las letras ya pintadas: dos capas de un píxel hacen el canto, como una
     letra en relieve, y la tercera la despega del fondo. */
  filter:
    drop-shadow(0 1px 0 #4a3510)
    drop-shadow(0 1px 0 #261c00)
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

/* El dorado es el de la moneda de al lado, como se ve a su tamaño.

   Muestreado de `moneda-80.webp` y no del PNG grande: achicada, la moneda es
   un oro viejo, apagado —sus píxeles más claros son #dbbd6a, el medio
   #bda05a, el hondo #9d7a3a—. Tomado del PNG grande el texto salía amarillo
   brillante, y al lado de la moneda parecía otro metal. El primer tono es un
   poco más claro que la moneda para que las letras se lean a 16 px. */
.marca-texto > span {
  background: linear-gradient(
    180deg,
    #f6e3a1 0%,
    #dbbd6a 30%,
    #bda05a 52%,
    #9d7a3a 76%,
    #7c5a1e 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------ utilidades */

.acento {
  color: var(--oro);
}

.borde-oro {
  border: 2px solid var(--oro);
  border-radius: 16px;
}

.sombra-oro {
  box-shadow: 0 8px 30px rgba(212, 168, 67, 0.2);
}

/* ══════════════════════════════════════ el soporte por WhatsApp

   El único enlace del menú que sale del sitio, y el único que no es dorado:
   en verde se lee como lo que es —un atajo a la conversación— y no como una
   página más de la lista.

   Vive en esta hoja, y no en `app.css`, porque lo llevan las dos cabeceras
   del sitio: la de la app y la de las páginas legales, que cargan `legal.css`
   y no la otra.

   El glifo es el del kit de marca, sin tocar, chico y con la palabra al lado:
   sus normas no dejan usarlo EN LUGAR de la palabra «WhatsApp». `sitio.mjs`
   §13 lo vigila en todas las páginas. */

.enlace-soporte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #25d366;
}

.enlace-soporte img {
  width: 20px;
  height: 20px;
  flex: none;
}