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

/* ============================================================
   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%;
}

: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;
  font-size: 0.95rem;
  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;
}

/* ------------------------------------------------------ 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);
}