/* ============================================================
   Memorie Legends — pantallas de la aplicación:
   dashboard, ranking y tienda.
   Comparte el lenguaje visual de la mesa: oscuro, oro y fieltro.
   ============================================================ */

:root {
  --noche-1: #0a0a0a;
  --noche-2: #101010;
  --panel: rgba(18, 18, 22, 0.86);
  --panel-alto: rgba(26, 26, 32, 0.9);
  --borde: rgba(212, 168, 67, 0.18);
  --borde-suave: rgba(255, 255, 255, 0.08);

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

  --rojo: #c0392b;
  --verde: #3d8b6b;
  --ambar: #f0d060;
  --azul: #4a7fb5;

  --texto: #ffffff;
  --texto-tenue: #c0c0c0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Inter respaldo", "Segoe UI", Tahoma, sans-serif;
  color: var(--texto);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(212, 168, 67, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 60%, rgba(26, 71, 42, 0.14), transparent 72%),
    linear-gradient(165deg, var(--noche-2) 0%, var(--noche-1) 65%, #050505 100%);
  background-attachment: fixed;
}

/* La barra de arriba y su cajón viven en `css/barra.css`: la misma barra la
   llevan las páginas legales, que no pueden cargar esta hoja sin que les
   cambie el cuerpo. */

/* La insignia equipada, al lado del nombre.

   Va en una ficha con filo de oro y no suelta sobre el fondo: el saludo es
   un título con degradado dorado en el texto, y un emoji pegado ahí se lee
   como parte del nombre. Con marco se entiende que es otra cosa. */
.insignia-equipada {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.35em;
  border-radius: 50%;
  font-size: 0.62em;
  line-height: 1;
  border: 1px solid rgba(212, 168, 67, 0.5);
  background: radial-gradient(circle at 50% 40%, rgba(212, 168, 67, 0.2), var(--panel-alto));
  /* El título tiene el color recortado sobre el texto; sin esto la insignia
     heredaría el `-webkit-text-fill-color: transparent` y no se vería. */
  -webkit-text-fill-color: initial;
}

.insignia-equipada img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* ======================================================= contenido */

main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.titulo-pagina {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-size: 2rem;
  margin-bottom: 6px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitulo {
  color: var(--texto-tenue);
  margin-bottom: 26px;
  font-size: 0.95rem;
}

/* ------------------------------------------------ tarjetas de acceso */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

/* Los paneles de abajo son dos: media pantalla cada uno, sin hueco al lado.
   Con auto-fit el navegador armaba tres columnas y dejaba una vacía. */
.rejilla.dos-columnas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .rejilla.dos-columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tarjeta-accion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(165deg, var(--panel-alto), rgba(12, 12, 14, 0.92));
  border: 1px solid var(--borde-suave);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.tarjeta-accion:hover {
  transform: translateY(-5px);
  border-color: var(--acento-tarjeta, var(--oro));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55),
    0 0 30px -12px var(--acento-tarjeta, var(--oro));
}

/* Franja de color que identifica cada sección */
.tarjeta-accion::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--acento-tarjeta, var(--oro));
}

.tarjeta-accion .icono {
  font-size: 2.2rem;
  line-height: 1;
}

.tarjeta-accion h2 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.tarjeta-accion p {
  color: var(--texto-tenue);
  font-size: 0.9rem;
  line-height: 1.55;
}

.tarjeta-accion .pie-tarjeta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acento-tarjeta, var(--oro));
}

.tarjeta-accion.mesa { --acento-tarjeta: var(--verde); }
.tarjeta-accion.ranking { --acento-tarjeta: var(--oro); }
.tarjeta-accion.tienda { --acento-tarjeta: var(--azul); }
.tarjeta-accion.corte { --acento-tarjeta: var(--rojo); }
.tarjeta-accion.amigos { --acento-tarjeta: #b87333; }

/* --------------------------------------------- tarjeta ilustrada del Rey */

.tarjeta-accion.tarjeta-rey {
  --acento-tarjeta: var(--oro);
  flex-direction: row;
  align-items: center;
  gap: 18px;
  cursor: default;
  overflow: hidden;
}

/* No se levanta al pasar: no es un acceso, es decoración informativa. */
.tarjeta-accion.tarjeta-rey:hover {
  transform: none;
  border-color: var(--borde);
  box-shadow: var(--sombra-negra);
}

.figura-rey {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(212, 168, 67, 0.22), transparent 68%);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
  animation: reyRespira 6s ease-in-out infinite;
}

@keyframes reyRespira {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}

.rey-texto {
  min-width: 0;
}

.rey-texto h2 {
  color: var(--oro);
  margin-bottom: 6px;
}

.rey-dato {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .tarjeta-accion.tarjeta-rey {
    flex-direction: column;
    text-align: center;
  }
  .figura-rey { width: 96px; height: 96px; }
  .rey-dato { align-items: center; }
}

/* Etiqueta de estado dentro de una tarjeta */
.etiqueta {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.etiqueta.lista {
  background: rgba(76, 175, 80, 0.16);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #8fd4b4;
}

.etiqueta.espera {
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.45);
  color: var(--ambar);
}

/* ------------------------------------------------------- paneles */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.panel h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--oro);
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(212, 168, 67, 0.18);
}

.fila-dato {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.fila-dato:last-child { border-bottom: none; }
.fila-dato span { color: var(--texto-tenue); }
.fila-dato b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- botones */

button.accion,
a.accion {
  display: inline-block;
  /* Cuarenta y cuatro es el alto mínimo que pide Apple para algo que se toca
     con el dedo. Con este relleno el botón ya da 44 justos, así que esto no
     cambia nada hoy: lo que hace es que siga dando 44 el día que alguien
     toque el relleno o la letra sin pensar en el teléfono. */
  min-height: 44px;
  padding: 13px 24px;
  border: none;
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #1a1206;
  background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 46%, var(--oro-hondo) 100%);
  /* Cuatro sombras y cada una hace una cosa distinta:
       1. el canto de abajo, que es lo que da el volumen de ficha;
       2. la sombra que apoya la pieza sobre el fondo;
       3. un filo hondo por dentro, para que el borde no sea un corte plano;
       4. la luz de arriba, como el brillo de un metal pulido.
     Sin la tercera, el dorado se ve impreso; con ella, acuñado. */
  box-shadow: 0 5px 0 #6b530f, 0 12px 22px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(107, 83, 15, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* La letra hundida en el metal. Es lo que separa un botón de un rectángulo
     dorado con texto encima. */
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

button.accion:hover:not(:disabled),
a.accion:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #6b530f, 0 18px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

button.accion:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #6b530f, 0 6px 12px rgba(0, 0, 0, 0.4);
}

button.accion:disabled {
  filter: grayscale(0.85) brightness(0.6);
  cursor: not-allowed;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

/* El secundario: cuero y bronce, no plata.

   Era un degradado gris claro, y ese era el problema: un botón de aplicación
   moderna en una pantalla que quiere parecer una mesa de taberna. Al lado del
   dorado del logo se leía como algo de otro sitio.

   Ahora es oscuro con filo dorado. Sigue siendo claramente la opción de menor
   peso —el primario brilla, éste no— pero pertenece al mismo mundo. Y sobre
   fondo oscuro el filo se ve mejor que un bloque claro, que en un panel negro
   pega un salto de contraste que atrae más la vista que el botón principal. */
button.accion.sobria,
a.accion.sobria {
  color: var(--oro-claro);
  background: linear-gradient(180deg, #2a2119 0%, #17120c 100%);
  box-shadow: 0 5px 0 #0b0906, 0 12px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(212, 168, 67, 0.45),
    inset 0 1px 0 rgba(240, 208, 96, 0.16);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

button.accion.sobria:hover:not(:disabled),
a.accion.sobria:hover {
  background: linear-gradient(180deg, #3a2e21 0%, #201810 100%);
  box-shadow: 0 8px 0 #0b0906, 0 18px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(212, 168, 67, 0.75),
    inset 0 1px 0 rgba(240, 208, 96, 0.25);
}

button.accion.sobria:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0b0906, 0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(212, 168, 67, 0.6);
}

/* ------------------------------------------------------- mensajes */

.aviso {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 20px;
  background: rgba(255, 176, 32, 0.08);
  border: 1px solid rgba(255, 176, 32, 0.3);
  color: #ffd79a;
}

.aviso b { color: #fff; }

.vacio {
  text-align: center;
  padding: 46px 20px;
  color: var(--texto-tenue);
  font-size: 0.95rem;
}

.vacio .icono {
  font-size: 2.6rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.6;
}

/* ------------------------------------------------------------ pie */

footer {
  border-top: 1px solid var(--borde-suave);
  margin-top: auto;
}

/* --------------------------------------------------- responsive */

@media (max-width: 700px) {
  .barra-contenido {
    padding: 10px 14px;
    gap: 10px;
  }

  .barra .marca-texto { font-size: 1rem; }

  .barra nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 14px;
    justify-content: center;
  }

  .barra .derecha { margin-left: auto; }

  main { padding: 20px 14px 30px; }

  .titulo-pagina { font-size: 1.5rem; }

  .rejilla { grid-template-columns: 1fr; }

  .tarjeta-accion { padding: 18px; }
}

/* --- marca con logo propio --- */

/* El logo de la cabecera. La misma regla está en style.css, que cargan las
   pantallas de acceso: si se cambia una hay que cambiar las dos, o la mitad
   del sitio queda con el logo de otro tamaño.

   `contain` y no `cover`: el logo es transparente y tiene la corona pegada al
   borde de arriba; `cover` recorta lo que sobre para llenar la caja, y lo que
   sobra en un logo así son las puntas. Sin `border-radius` por lo mismo. */
.logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

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

.logo-img.grande {
  width: 84px;
  height: 84px;
  border-radius: 18px;
}

.logo-text {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.marca-titulo {
  display: flex;
  justify-content: center;
}

.marca-titulo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* ------------------------------------------------------- el paño del sitio

   Un degradado cálido sobre negro, como fieltro con una luz encima. Con CSS y
   no con una imagen: el sitio se abre desde teléfonos con datos móviles, y una
   textura de 200 KB por pantalla se nota más que el brillo que agrega.

   `fixed` para que la luz no se desplace al hacer scroll: si se moviera, en
   una página larga se vería que es un degradado y no una superficie. */

body {
  background: var(--fieltro);
  background-attachment: fixed;
}


/* ------------------------------------------- los dos bolsillos de Leyendas

   Van uno al lado del otro y NO como una lista, porque no son dos datos
   sueltos: son una comparación. Lo que el jugador necesita leer de un vistazo
   es cuánto de su saldo sirve para torneos, y eso sólo se ve poniendo los dos
   números a la misma altura.

   En el teléfono se apilan, que es lo único que entra, y ahí el orden importa:
   las ganadas van primero porque son las que habilitan todo. */
.bolsillos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}

@media (max-width: 560px) {
  .bolsillos { grid-template-columns: 1fr; }
}

.bolsillo {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borde-suave);
}

.bolsillo b {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

.bolsillo span {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--texto);
}

.bolsillo small {
  display: block;
  margin-top: 8px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

/* ------------------------------------------- el círculo con la cara o la inicial

   Vivía en `sala.css` y lo usaban dos pantallas; ahora son tres —la sala de
   espera, la cuenta y el ranking— y `ranking.html` no carga `sala.css`.

   Eso no se vio como «falta un estilo»: se vio como una fila del ranking que
   medía 1,5 px más que las otras, y sólo porque una prueba comparaba dos
   filas. El avatar estaba ahí, sin círculo y sin tamaño, y nadie lo miró.

   El tamaño va por variable porque no es el mismo en las tres: la sala usa
   38 px y la tabla del ranking 30, donde las filas van una pegada a la otra. */
.avatar-inicial {
  --lado-avatar: 38px;
  width: var(--lado-avatar);
  height: var(--lado-avatar);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  color: var(--negro);
  background: linear-gradient(145deg, var(--oro-claro), var(--oro));
}

/* La cara comprada llena el círculo y lo recorta; sin `overflow` una imagen
   cuadrada dejaría las esquinas afuera del redondeo. */
.avatar-inicial.con-cara {
  overflow: hidden;
  background: none;
  padding: 0;
}

.avatar-inicial.con-cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════════════ la página 404

   Vive acá y no en una hoja propia porque la 404 carga sólo `tema.css` y
   `app.css`: una hoja más sería un pedido más para la página que menos se
   ve. */

.panel-404 {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
}

.numero-404 {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
  /* `aria-hidden` en el HTML: para quien escucha la página, el número no dice
     nada que el título no diga mejor. */
  background: linear-gradient(180deg, var(--oro-claro), var(--oro-hondo));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
}

.panel-404 .subtitulo {
  margin: 10px 0 24px;
}

.salidas-404 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 480px) {
  .salidas-404 > .accion {
    flex: 1 1 100%;
  }
}