/* ============================================================
   ERES TÚ · Tokens
   iBisne S.A.S. de C.V. · Dirección: C · Índice gigante
   ------------------------------------------------------------
   Regla del sistema: dos ejes que nunca se cruzan.
   · CATEGORÍA vive en la carta (fondo + tinta + ícono).
   · ESTADO vive en el cromo (botones, sellos, contadores).
   Un mazo nunca pinta un botón. Un estado nunca pinta una carta.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. ESCALA PÚRPURA
     Un solo tono, doce valores. Todo el producto sale de aquí.
     Los mazos son pares de esta escala, no colores aparte.
     ---------------------------------------------------------- */
  --p-950: #12082A;   /* fondo de la app */
  --p-900: #1C0F3F;   /* superficie elevada, hojas */
  --p-800: #2A1260;
  --p-700: #3D2080;
  --p-600: #4A2A96;
  --p-500: #5B3AA6;
  --p-400: #7A57C4;   /* texto secundario sobre fondo oscuro */
  --p-300: #AE93E8;
  --p-200: #CDB8F2;
  --p-100: #E2D5F8;
  --p-050: #F1EAFC;   /* texto principal sobre fondo oscuro */
  --p-000: #FAF7FE;

  /* ----------------------------------------------------------
     2. MAZOS
     La carta se oscurece conforme sube la intensidad del
     contenido. La escala de valor ES la escala de intensidad.
     A partir de Cachonda la tinta se invierte a lila claro:
     ese salto marca visualmente dónde empieza el +18.
     Contraste medido de cada par al final de cada línea.
     ---------------------------------------------------------- */
  --mazo-familia-bg:   var(--p-050);  --mazo-familia-ink:   var(--p-500);  /* 6.6:1 */
  --mazo-base-bg:      var(--p-100);  --mazo-base-ink:      var(--p-600);  /* 7.3:1 */
  --mazo-meme-bg:      var(--p-200);  --mazo-meme-ink:      var(--p-700);  /* 6.8:1 */
  --mazo-vicios-bg:    var(--p-300);  --mazo-vicios-ink:    var(--p-800);  /* 6.0:1 */
  --mazo-cachonda-bg:  var(--p-500);  --mazo-cachonda-ink:  var(--p-050);  /* 6.6:1 */
  --mazo-viaje-bg:     var(--p-700);  --mazo-viaje-ink:     var(--p-100);  /* 8.1:1 */

  /* El índice gigante del elemento firma: mismo tono que la carta,
     un paso de distancia. Decorativo, nunca carga información. */
  --indice-opacidad: .16;

  /* Mosaico de íconos del dorso de la carta. Mismo criterio que el
     índice: decorativo, no compite con el contenido. En el frente
     (la pregunta ya vive ahí) va todavía más discreto. */
  --opacidad-marca-agua: .14;
  --opacidad-marca-agua-frente: .06;

  /* ----------------------------------------------------------
     3. ESTADO
     Un solo acento no púrpura en todo el sistema. Significa
     "esto está pasando ahora". Si se usa para más de una cosa,
     deja de significar algo.
     ---------------------------------------------------------- */
  --acento:      #FFD447;   /* el señalado, la cuenta, el momento · 11.6:1 sobre --p-950 */
  --acento-ink:  #2A1260;   /* texto sobre el acento */
  --riesgo:      #E8547C;   /* solo destructivo: terminar partida, borrar grupo */

  --opacidad-inactivo: .4;  /* elementos deshabilitados */

  /* Superficies y texto sobre fondo oscuro */
  --fondo:       var(--p-950);
  --superficie:  var(--p-900);
  --texto:       var(--p-050);
  --texto-2:     var(--p-400);
  --linea:       #2E1A57;

  /* ----------------------------------------------------------
     4. TIPOGRAFÍA
     Una sola familia. Es el movimiento más minimal que hay y es
     lo que hacen las tres referencias del cliente.
     Base 16px = 1rem.
     ---------------------------------------------------------- */
  --fuente: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* La pregunta se ajusta al largo del texto, no al revés.
     La carta ocupa casi toda la pantalla: hay espacio de sobra.
     Escala de cinco tramos por rango de caracteres de la pregunta,
     calculada contra la caja real de texto (ancho carta-72, alto
     1.4×carta-139), en mayúsculas peso 800, avance medio 0.70em,
     con 25% de margen por desperdicio de renglón. Equivalencia a
     carta de 350px (la aprobada):
       hasta 30 caracteres  -> --xl  16cqi    (56px)
       31 a 45 caracteres   -> --l   13cqi    (45px)
       46 a 60 caracteres   -> --m   11.5cqi  (40px)
       61 a 75 caracteres   -> --s   10cqi    (35px)
       76 a 90 caracteres   -> --xs  9cqi     (31px)
     Tope editorial: 90 caracteres. Arriba de eso se reescribe la
     pregunta, no se sigue achicando la letra.

     Unidades en cqi, no en px ni rem: la letra se mide contra el
     ancho de la carta (container query inline), no de la pantalla,
     para no desbordar cuando la carta es más chica que el celular.

     Van envueltos en clamp() a propósito, no por adorno. Sin el
     tope, un token usado fuera de un elemento con container-type
     resuelve cqi contra el viewport: 16cqi en una ventana de
     1990px son 209px de letra. Eso ya rompió el ui-kit dos veces,
     en dos secciones distintas, y perseguir cada uso suelto es
     perseguir síntomas. Con clamp el token no puede explotar viva
     donde viva: dentro de la carta manda cqi, fuera cae al máximo.

       clamp(piso, 16cqi, techo)
       · piso  = no baja de legible en contenedores diminutos
       · techo = el valor a 350px de carta, el ancho aprobado */
  --t-pregunta-xl:  clamp(1.5rem,   16cqi,   3.5rem);    /* techo 56px · hasta 30 caracteres */
  --t-pregunta-l:   clamp(1.375rem, 13cqi,   2.875rem);  /* techo 46px · 31 a 45 caracteres */
  --t-pregunta-m:   clamp(1.25rem,  11.5cqi, 2.5rem);    /* techo 40px · 46 a 60 caracteres */
  --t-pregunta-s:   clamp(1.125rem, 10cqi,   2.1875rem); /* techo 35px · 61 a 75 caracteres */
  --t-pregunta-xs:  clamp(1rem,     9cqi,    1.9375rem); /* techo 31px · 76 a 90 caracteres */

  --t-cuenta:       9rem;      /* 144px · el 3, el 2, el 1 -- un solo carácter, cabe a 144px hasta en 320px de ancho (medido: 43px de trazo real). */
  /* "¡SEÑALEN!" comparte .cuenta__numero con los dígitos pero no puede
     compartir su talla: un carácter cabe a 144px, nueve no. La talla
     vieja (30cqi, techo 6rem) medía la palabra contra el CONTENEDOR
     -- a 320px de ancho eso ya daba 96px, techo tocado desde el piso
     de cualquier celular, y "¡SEÑALEN!" a 96px mide 528px real: se
     corta en los cinco tamaños de referencia, con o sin signos de
     admiración según el ancho. El error es de raíz: un solo dígito
     puede ser enorme, nueve caracteres no, y --t-cuenta-texto trataba
     los dos casos con el mismo techo.
     --t-cuenta-palabra mide contra el VIEWPORT (vw, no cqi) porque la
     palabra ocupa la pantalla completa -- .cuenta es position:fixed;
     inset:0, su ancho de layout ya es el del viewport, cqi solo
     hubiera sido vw con un paso extra. Calculado contra el peso 900
     real de "Archivo" (medido en navegador, no estimado): nueve
     caracteres en mayúsculas dan ~5.32px de ancho por cada px de
     talla. A 13vw:
       320px de ancho -> 41.6px de letra -> 221px de texto  (99px de margen libre)
       412px de ancho -> 53.6px de letra -> 285px de texto  (127px de margen libre)
     Techo en 3.5rem (56px): arriba de 431px de ancho la palabra deja
     de crecer con la pantalla -- a 56px mide 298px, cabe con margen
     de sobra hasta en tablet. Piso en 1.75rem (28px) para que no se
     achique más allá de eso en un viewport absurdamente angosto (no
     se activa en ningún celular real: 13vw llega a 28px recién a
     215px de ancho). Menor que --t-cuenta a propósito: los dígitos
     son el protagonista, el aviso es secundario. */
  --t-cuenta-palabra: clamp(1.75rem, 13vw, 3.5rem);
  --t-nombre:       3rem;      /* 48px · el señalado, el coronado */
  --t-titulo:       1.5rem;    /* 24px */
  --t-cuerpo-l:     1.125rem;  /* 18px */
  --t-cuerpo:       1rem;      /* 16px */
  --t-etiqueta:     0.8125rem; /* 13px */
  --t-micro:        0.6875rem; /* 11px · categoría, índice */

  --peso-negro:  900;
  --peso-fuerte: 800;
  --peso-medio:  700;
  --peso-base:   600;   /* el mínimo del sistema: aquí nada va en regular */

  --alto-apretado: 1.02;  /* cuenta regresiva y nombres */
  --alto-display:  1.08;  /* preguntas */
  --alto-cuerpo:   1.5;

  --track-display: -.025em;
  --track-micro:    .16em;

  /* ----------------------------------------------------------
     5. ESPACIADO · escala de 4px
     ---------------------------------------------------------- */
  --s-1:  0.25rem;   /* 4  */
  --s-2:  0.5rem;    /* 8  */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 · margen estándar de pantalla */
  --s-5:  1.25rem;   /* 20 */
  --s-6:  1.5rem;    /* 24 */
  --s-8:  2rem;      /* 32 */
  --s-10: 2.5rem;    /* 40 */
  --s-12: 3rem;      /* 48 */
  --s-16: 4rem;      /* 64 */

  --margen-pantalla: var(--s-4);
  --gap-cuadricula:  var(--s-2);

  /* El marco de la carta (.carta__cara, .carta__filete) no puede vivir
     de un padding fijo en rem: mismo error que ya se corrigió con la
     tipografía de la pregunta, aplicado al espaciado. A carta chica
     (111px de ancho, el caso medido en 320x568 con la barra alta) un
     padding fijo de --s-4 + --s-5 (16px + 20px, 36px por lado) se come
     72px de una carta de 111 -- casi no queda caja para el texto.
     clamp() contra cqi (el ancho de la carta, container-type ya
     declarado en .carta) hace que el marco encoja junto con la carta
     en vez de comérsela. Piso en --s-2 (8px): por debajo de eso el
     filete se pega al borde y se ve roto. Techo en el valor fijo de
     antes (--s-4 / --s-5): a la carta de 350px aprobada, el resultado
     queda a un pelo de lo que había (14px y 17.5px contra 16px y 20px),
     imperceptible a simple vista. */
  --s-carta-cara:   clamp(var(--s-2), 4cqi, var(--s-4));
  --s-carta-filete: clamp(var(--s-2), 5cqi, var(--s-5));

  /* ----------------------------------------------------------
     6. FORMA
     ---------------------------------------------------------- */
  --r-carta:  1.25rem;   /* 20px · proporción de carta real 5:7 */
  --r-filete: 0.875rem;  /* 14px · marco interior. Regla del sistema:
                             el radio interior nunca baja del 60% del
                             exterior (antes se restaba el padding y
                             quedaba en ~8px contra 20px, se veía cuadrado) */
  --r-boton: 0.75rem;   /* 12px */
  --r-campo: 0.625rem;  /* 10px */
  --r-hoja:  1.5rem;    /* 24px, solo esquinas superiores */
  --r-chip:  999px;

  --borde-carta: 1.5px;  /* el filete interior de la carta */
  --carta-ratio: 5 / 7;

  /* ----------------------------------------------------------
     7. ALTURAS Y ÁREA TÁCTIL
     El contexto es una fiesta: dedos mojados, poca luz.
     Nada por debajo de 44px de área tocable.
     ---------------------------------------------------------- */
  --tap-min:     2.75rem;  /* 44px · mínimo absoluto */
  --h-boton:     3.5rem;   /* 56px · botón principal */
  --h-boton-sm:  2.75rem;  /* 44px */
  --h-chip:      3.25rem;  /* 52px · chip de jugador en la votación */
  --h-barra:     3.5rem;   /* 56px · barra superior */
  --h-campo:     3.25rem;  /* 52px */
  --separacion-tap: var(--s-3);  /* 12px mínimo entre objetivos tocables */
  --hoja-alto-max: 85vh;  /* tope de altura de la hoja inferior */

  /* Alto de cada pantalla del juego. svh, no dvh: dvh cambia de valor
     cuando la barra del navegador se oculta o aparece (al hacer scroll,
     al abrir el teclado), y eso mueve el borde inferior de la pantalla
     a media partida. svh usa el viewport más chico posible y no se
     mueve después de la primera pintada: estable, aunque sacrifique
     unos pixeles de aire cuando la barra sí se oculta. */
  --alto-pantalla: 100svh;

  /* ----------------------------------------------------------
     8. PROFUNDIDAD
     Sombra dura, nunca difusa. El sistema es plano y de imprenta:
     una sombra suave lo delata como interfaz genérica.
     ---------------------------------------------------------- */
  --sombra-carta: 0 1.5rem 3rem rgba(0,0,0,.45);
  --sombra-hoja:  0 -0.75rem 2rem rgba(0,0,0,.5);
  --sombra-dura:  0.375rem 0.375rem 0 var(--p-950);
  --sombra-dura-activa: 0.1875rem 0.1875rem 0 var(--p-950);  /* estado presionado */

  --z-base: 0;
  --z-carta: 10;
  --z-barra: 20;
  --z-hoja: 30;
  --z-cuenta: 40;   /* la cuenta 3·2·1 tapa todo */
  --z-aviso: 50;

  /* ----------------------------------------------------------
     9. MOVIMIENTO
     Cuatro duraciones y tres curvas. Nada más.
     ---------------------------------------------------------- */
  --e-salida:  cubic-bezier(.2, 0, 0, 1);        /* entra algo */
  --e-entrada: cubic-bezier(.4, 0, 1, 1);        /* sale algo */
  --e-golpe:   cubic-bezier(.34, 1.56, .64, 1);  /* el sello, el rebote */

  --d-rapida: 120ms;   /* respuesta al toque */
  --d-base:   220ms;   /* transición estándar */
  --d-lenta:  380ms;   /* entrada de pantalla */
  /* Volteo de la carta: un solo giro, sin rebotes. 350ms alcanza para
     leerse como un giro real sin sentirse lento -- se dispara una vez
     por carta, no hace falta que sea tan corto como --d-base. */
  --d-volteo: 350ms;
  /* Mismo valor que PASO_CUENTA_NUMERO_MS en juego.js: la animación de
     entrada de cada número dura lo mismo que su turno en pantalla, así
     el rebote termina justo cuando el número siguiente lo reemplaza. */
  --d-cuenta: 700ms;
  /* Mismo valor que PASO_CUENTA_SENALEN_MS en juego.js: la barra que
     se agota bajo "¡SEÑALEN!" tarda exactamente lo que dura ese paso. */
  --d-senalen: 3000ms;

  /* Vibración, en ms. La cuenta se comunica primero por tacto:
     en una fiesta el sonido no se oye. */
  --vibra-corta: 40;
  --vibra-larga: 180;
}

/* ============================================================
   Preferencia de movimiento reducido.
   No se apaga todo: se conserva la opacidad para que el usuario
   siga entendiendo que algo cambió.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-rapida: 1ms;
    --d-base:   1ms;
    --d-lenta:  1ms;
    --d-volteo: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Es un videojuego de cartas, no un documento: el scroll de la ventana
   delata que estás viendo una página web y rompe la ilusión de objeto
   físico sobre la mesa. height:100% + overflow:hidden le cierra la
   puerta al scroll a nivel de ventana en html y body. overscroll-behavior
   ya evitaba el rebote de goma, pero por sí solo no bloqueaba el
   desplazamiento -- son dos problemas distintos, hacía falta lo otro. */
html {
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: var(--peso-base);
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Foco visible siempre. Se juega pasando el celular de mano:
   quien navega con teclado o lector de pantalla también existe. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}

/* ============================================================
   Base adicional del MVP (no viene de tokens.css)
   ------------------------------------------------------------
   Reset mínimo de <button> (appearance nativo de iOS/Android
   pelea con el cromo del sistema) y la corrección de [hidden]:
   el origen "autor" siempre le gana al UA-stylesheet aunque la
   especificidad sea menor, así que un simple [hidden] no basta
   cuando .pantalla/.cuenta/.aviso-completo/.marcador ya declaran
   su propio display.
   ============================================================ */
button {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

[hidden] { display: none !important; }

/* Oculto visual estándar: el texto sigue en el árbol de accesibilidad,
   solo desaparece de la pantalla. Usado en etiquetas de campos cuyo
   placeholder ya hace de guía visual. */
.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   01. CARTA
   La pieza central del juego. Índice gigante desbordando la
   esquina, tinta tono sobre tono del mismo púrpura del mazo.
   Dos caras reales -- dorso (mazo, sin pregunta) y frente (la
   pregunta) -- unidas por un solo giro en Y. Un jugador nuevo
   siempre ve primero el dorso: la carta llega boca abajo y hay
   que tocarla para leerla.
   ============================================================ */
.carta {
  position: relative;
  z-index: var(--z-carta);
  /* Se dimensiona por ALTO, no por ancho: con width:100% + aspect-ratio,
     en una pantalla corta el alto que sale del ancho completo es más
     alto que el espacio disponible. Invertido: el alto toma lo que el
     flex de .pantalla__contenido le ceda, el ancho SALE del alto. */
  flex: 1 1 auto;
  block-size: 100%;
  min-height: 0;
  inline-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;
  aspect-ratio: var(--carta-ratio);
  /* La pregunta se mide en cqi contra ESTE ancho, no el de la pantalla. */
  container-type: inline-size;
  perspective: 75rem;
  border-radius: var(--r-carta);
  cursor: pointer;
}

.carta__giro {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Un solo giro, sin fases ni rebote: gira lo que dure --d-volteo
     y se detiene. Nada más se anima en el volteo. */
  transition: transform var(--d-volteo) var(--e-salida);
}

.carta.is-volteada .carta__giro {
  transform: rotateY(180deg);
}

.carta__cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: var(--s-carta-cara);
  border-radius: var(--r-carta);
  background: var(--carta-bg);
  box-shadow: var(--sombra-carta);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* El dorso empieza de frente (0deg): es lo primero que se ve. El
   frente arranca ya girado 180deg, boca abajo hasta que .is-volteada
   invierte los dos -- así los dos comparten un solo eje de giro. */
.carta__cara--frente {
  transform: rotateY(180deg);
}

.carta__cara--dorso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}

/* Índice gigante: el elemento firma. Detrás del contenido (va antes
   que .carta__filete en el marcado). Nunca carga información:
   aria-hidden. Solo vive en el frente -- el dorso no identifica la
   carta, apenas el mazo. */
.carta__indice {
  position: absolute;
  /* Más adentro de la esquina que --s-8 pelón: a --s-8 la masa del
     número invadía la caja de la pregunta cuando el texto se ancla
     abajo. */
  right: calc(var(--s-12) * -1);
  bottom: calc(var(--s-12) * -1);
  z-index: var(--z-base);
  font-size: var(--t-cuenta);
  font-weight: var(--peso-negro);
  line-height: 1;
  color: var(--carta-ink);
  opacity: var(--indice-opacidad);
  pointer-events: none;
  user-select: none;
}

.carta__filete {
  position: relative;
  height: 100%;
  min-height: 0; /* si no, el flex ignora el desbordamiento del hijo */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-carta-filete);
  overflow: hidden;
  border: var(--borde-carta) solid currentColor;
  border-radius: var(--r-filete);
  color: var(--carta-ink);
}

/* ----------------------------------------------------------
   Filigrana: mosaico tenue de los seis íconos de mazo, detrás
   de todo. Los giros por posición rompen la retícula del grid
   para que no se lea como un patrón repetido y rígido.
   ---------------------------------------------------------- */
.carta__filigrana {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--s-10), 1fr));
  align-content: space-evenly;
  justify-items: center;
  gap: var(--s-5);
  padding: var(--s-6);
  overflow: hidden;
  opacity: var(--opacidad-marca-agua);
  color: var(--carta-ink);
  pointer-events: none;
  user-select: none;
}

.carta__filigrana--sutil {
  opacity: var(--opacidad-marca-agua-frente);
}

.carta__filigrana-icono {
  width: var(--s-8);
  height: var(--s-8);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75; /* mismo grosor que iconos.svg */
}

.carta__filigrana-icono:nth-child(4n+1) { transform: rotate(-11deg); }
.carta__filigrana-icono:nth-child(4n+2) { transform: rotate(6deg); }
.carta__filigrana-icono:nth-child(4n+3) { transform: rotate(-16deg); }
.carta__filigrana-icono:nth-child(4n)   { transform: rotate(9deg); }

/* Insignia del dorso: mazo + nombre, encima de la filigrana. Es lo
   único que se sabe de la carta antes de voltearla. */
.carta__marca-mazo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border: var(--borde-carta) solid currentColor;
  border-radius: var(--r-boton);
  color: var(--carta-ink);
  font-size: var(--t-titulo);
  font-weight: var(--peso-negro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.carta__marca-mazo-icono {
  width: var(--s-6);
  height: var(--s-6);
  flex-shrink: 0;
  fill: currentColor;
}

.carta__pista-volteo {
  position: relative;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--carta-ink);
  opacity: var(--indice-opacidad);
}

/* La etiqueta y el pie no ceden: a su tamaño natural siempre. Sin esto
   NINGÚN hijo de .carta__filete cede espacio de verdad -- ante una
   carta chica, la suma de los tres desborda el filete y overflow:hidden
   recorta a ciegas. Con la etiqueta y el pie fijos y la pregunta -- la
   única con largo variable -- en flex:1 1 auto, el pie se queda
   siempre visible, pegado al borde inferior del filete. */
.carta__filete > .etiqueta-mazo,
.carta__filete > .carta__pie {
  flex: 0 0 auto;
}

.carta__pregunta {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* auto arriba: el bloque de texto se ancla abajo. */
  margin: auto 0 0;
  /* Sin hyphens: auto. En mayúsculas y en español parte palabras como
     "ME-JOR" -- se lee como error de imprenta. overflow-wrap sigue de
     red de seguridad, solo entra si una palabra suelta no cabe. */
  overflow-wrap: break-word;
  text-wrap: balance;
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.carta__pregunta--xl { font-size: var(--t-pregunta-xl); }
.carta__pregunta--l  { font-size: var(--t-pregunta-l); }
.carta__pregunta--m  { font-size: var(--t-pregunta-m); }
.carta__pregunta--s  { font-size: var(--t-pregunta-s); }
.carta__pregunta--xs { font-size: var(--t-pregunta-xs); }

.carta__pie {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--peso-base);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  opacity: var(--indice-opacidad);
}

/* Seis variantes de mazo. Solo estas dos propiedades por línea. */
.carta--familia  { --carta-bg: var(--mazo-familia-bg);  --carta-ink: var(--mazo-familia-ink); }
.carta--base     { --carta-bg: var(--mazo-base-bg);     --carta-ink: var(--mazo-base-ink); }
.carta--meme     { --carta-bg: var(--mazo-meme-bg);     --carta-ink: var(--mazo-meme-ink); }
.carta--vicios   { --carta-bg: var(--mazo-vicios-bg);   --carta-ink: var(--mazo-vicios-ink); }
.carta--cachonda { --carta-bg: var(--mazo-cachonda-bg); --carta-ink: var(--mazo-cachonda-ink); }
.carta--viaje    { --carta-bg: var(--mazo-viaje-bg);    --carta-ink: var(--mazo-viaje-ink); }


/* ============================================================
   02. BOTÓN
   Cromo de estado, nunca de mazo. Sombra dura, sin difuminar.
   ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--h-boton);
  padding-inline: var(--s-6);
  border: var(--borde-carta) solid currentColor;
  border-radius: var(--r-boton);
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo-l);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--d-rapida) var(--e-salida),
              background var(--d-base) var(--e-salida);
}

.boton--sm {
  min-block-size: var(--h-boton-sm);
  padding-inline: var(--s-5);
  font-size: var(--t-cuerpo);
}

.boton--primario {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-ink);
  box-shadow: var(--sombra-dura);
}

.boton--secundario {
  border-color: var(--texto);
  color: var(--texto);
}

.boton--fantasma {
  border-color: transparent;
  color: var(--texto-2);
}

/* El desplazamiento imita el golpe físico de un botón de imprenta:
   la sombra dura se "aplana" al presionar. */
.boton:active {
  transform: translate(calc(var(--s-1) * .75), calc(var(--s-1) * .75));
}

.boton--primario:active {
  box-shadow: var(--sombra-dura-activa);
}

.boton:disabled,
.boton.is-deshabilitado {
  opacity: var(--opacidad-inactivo);
  box-shadow: none;
  cursor: not-allowed;
}


/* ============================================================
   03. CHIP-JUGADOR
   Selector de jugador en la votación: inicial arriba, nombre
   abajo -- apilado, no en fila, para que el nombre reciba el
   ancho completo de la columna.
   ============================================================ */
.chip-jugador {
  container-type: inline-size;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-1);
  min-block-size: var(--tap-min);
  padding: var(--s-2) var(--s-1);
  border: var(--borde-carta) solid var(--linea);
  border-radius: var(--r-campo);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente);
  cursor: pointer;
  transition: border-color var(--d-base) var(--e-salida),
              background var(--d-base) var(--e-salida);
}

.chip-jugador__inicial {
  display: flex;
  align-self: center;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(var(--s-6), 26cqi, var(--s-10));
  height: clamp(var(--s-6), 26cqi, var(--s-10));
  border-radius: var(--r-chip);
  background: var(--p-700);
  color: var(--texto);
  font-size: clamp(var(--t-cuerpo), 20cqi, var(--t-titulo));
  font-weight: var(--peso-negro);
}

.chip-jugador__nombre {
  overflow: hidden;
  text-align: center;
  font-size: clamp(var(--t-etiqueta), 20cqi, var(--t-cuerpo-l));
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chip-jugador.is-seleccionado {
  border-color: var(--acento);
  background: var(--p-800);
}

.chip-jugador.is-seleccionado .chip-jugador__inicial {
  background: var(--acento);
  color: var(--acento-ink);
}

/* Modo compacto (arriba de UMBRAL_MODO_COMPACTO, juego.js): el chip
   pierde el nombre -- no hay ancho para 21 a la vez -- y se vuelve
   solo la inicial, grande y centrada. El nombre completo sigue
   accesible por aria-label. */
.chip-jugador--solo-inicial {
  justify-content: center;
  gap: 0;
  padding: var(--s-1);
}

.chip-jugador--solo-inicial .chip-jugador__inicial {
  width: clamp(var(--s-8), 40cqi, var(--s-12));
  height: clamp(var(--s-8), 40cqi, var(--s-12));
  font-size: clamp(var(--t-cuerpo-l), 34cqi, var(--t-titulo));
}

/* Tope de MAX_JUGADORES_SENALADOS alcanzado: tocar un chip de más no
   lo selecciona. Este pulso es la única señal. */
.chip-jugador.is-rechazado {
  animation: chip-jugador-rechazo var(--d-base) var(--e-salida);
}

@keyframes chip-jugador-rechazo {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--s-1)); }
}


/* ============================================================
   04. CUADRÍCULA-VOTACIÓN
   Grid de chips para señalar. De 2 a 6 columnas según el
   espacio: auto-fit hace el trabajo, sin breakpoints.
   ============================================================ */
.cuadricula-votacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tap-min), 1fr));
  gap: var(--separacion-tap);
  min-height: 0;
}


/* ============================================================
   05. CUENTA
   La cuenta 3·2·1 tapa todo. Se comunica primero por tacto:
   en una fiesta el sonido no se oye.
   ============================================================ */
.cuenta {
  position: fixed;
  inset: 0;
  z-index: var(--z-cuenta);
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
}

.cuenta__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.cuenta__numero {
  font-size: var(--t-cuenta);
  font-weight: var(--peso-negro);
  line-height: var(--alto-apretado);
  color: var(--acento);
  animation: cuenta-entrada var(--d-cuenta) var(--e-golpe);
}

/* "¡SEÑALEN!" no es un dígito: --t-cuenta lo desborda por completo. */
.cuenta__numero--texto {
  font-size: var(--t-cuenta-palabra);
}

@keyframes cuenta-entrada {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* Barra que se agota durante los tres segundos de "¡SEÑALEN!": la
   única señal visual de cuánto falta para que se acabe la ventana de
   apuntar. Ancho fijo, no cqi -- vive fuera de la carta, contra el
   viewport igual que --t-cuenta-palabra. */
.cuenta__barra {
  width: min(60vw, 16rem);
  height: var(--s-1);
  border-radius: var(--r-chip);
  background: var(--linea);
  overflow: hidden;
}

.cuenta__barra::before {
  content: '';
  display: block;
  height: 100%;
  background: var(--acento);
  animation: cuenta-barra-agota var(--d-senalen) linear forwards;
}

@keyframes cuenta-barra-agota {
  from { width: 100%; }
  to   { width: 0%; }
}


/* ============================================================
   06. TÍTULO Y ACCIÓN DE BARRA
   Recorte de .barra (components.css original): aquí no hace
   falta el contenedor completo, .pantalla__barra ya lo resuelve
   -- solo el título de pantalla y el botón de salir sueltos.
   ============================================================ */
.barra__titulo {
  margin: 0;
  font-size: var(--t-titulo);
  font-weight: var(--peso-negro);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.barra__accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font-size: var(--t-titulo);
  font-weight: var(--peso-negro);
  line-height: 1;
  cursor: pointer;
}


/* ============================================================
   07. MARCADOR-CONTEO
   Contador grande + etiqueta. Se reutiliza para "cuántas cartas
   en esta partida" (Configuración) y "jugadores en la mesa"
   (Jugadores) -- mismo patrón visual, dos contextos. Nombre
   distinto de .marcador (el overlay del marcador completo, sección
   21) para que no se crucen dos componentes que no se parecen.
   ============================================================ */
.marcador-conteo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--texto);
}

.marcador-conteo__valor {
  font-size: var(--t-nombre);
  font-weight: var(--peso-negro);
  line-height: var(--alto-apretado);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.marcador-conteo__etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--texto-2);
}


/* ============================================================
   08. SELLO
   Marca el castigo de la ronda: "+1 carta", "Tómate un shot".
   Golpea y rebota, como un timbre de hule sobre papel.
   ============================================================ */
.sello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-4);
  border: calc(var(--borde-carta) * 2) solid var(--acento);
  border-radius: var(--r-chip);
  color: var(--acento);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: sello-golpe var(--d-base) var(--e-golpe);
}

@keyframes sello-golpe {
  from { opacity: 0; transform: scale(1.8) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(-4deg); }
}

.resultado__sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}


/* ============================================================
   09. CAMPO
   Entrada de texto: nombre de jugador, lista pegada.
   ============================================================ */
.campo {
  display: block;
  width: 100%;
  min-block-size: var(--h-campo);
  padding-inline: var(--s-4);
  border: var(--borde-carta) solid var(--linea);
  border-radius: var(--r-campo);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo-l);
  font-weight: var(--peso-fuerte);
  transition: border-color var(--d-base) var(--e-salida);
}

.campo::placeholder {
  color: var(--texto-2);
  font-weight: var(--peso-base);
}

.campo:focus {
  border-color: var(--acento);
}

.campo:disabled {
  opacity: var(--opacidad-inactivo);
  cursor: not-allowed;
}

/* Adaptación: la lista pegada (varios nombres, uno por línea) usa un
   textarea en vez de un input de una línea. */
.campo--area {
  min-block-size: 6rem;
  padding-block: var(--s-3);
  font-weight: var(--peso-base);
  resize: none;
}

/* Fila compacta: campo + botón lado a lado en vez de apilados. */
.captura-nombres__fila {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.captura-nombres__fila > div {
  flex: 1 1 auto;
  min-width: 0;
}

.captura-nombres__fila .campo {
  min-block-size: var(--h-boton-sm);
}


/* ============================================================
   10. INTERRUPTOR
   Toggle on/off: Drinks, Intensidad +18. El input real va oculto
   visualmente (patrón estándar) pero sigue enfocable.
   ============================================================ */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--tap-min);
  cursor: pointer;
}

.interruptor__entrada {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.interruptor__pista {
  position: relative;
  flex-shrink: 0;
  width: var(--s-12);
  height: var(--s-6);
  border-radius: var(--r-chip);
  background: var(--linea);
  transition: background var(--d-base) var(--e-salida);
}

.interruptor__perilla {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  width: var(--s-4);
  height: var(--s-4);
  border-radius: var(--r-chip);
  background: var(--texto);
  transition: transform var(--d-base) var(--e-salida);
}

.interruptor__entrada:checked ~ .interruptor__pista {
  background: var(--acento);
}

.interruptor__entrada:checked ~ .interruptor__pista .interruptor__perilla {
  transform: translateX(var(--s-6));
  background: var(--acento-ink);
}

.interruptor__entrada:focus-visible ~ .interruptor__pista {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}

.interruptor__texto {
  font-size: var(--t-cuerpo-l);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}


/* ============================================================
   11. ETIQUETA-MAZO
   Categoría del mazo: vive dentro de la carta. El color lo
   hereda del contexto (currentColor).
   ============================================================ */
.etiqueta-mazo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: currentColor;
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.etiqueta-mazo__icono {
  width: var(--s-5);
  height: var(--s-5);
  flex-shrink: 0;
  fill: currentColor;
}


/* ============================================================
   12. PANTALLA
   Contenedor raíz de cada vista. Respeta el notch y la barra de
   gestos. Rejilla de tres franjas: auto (barra) / 1fr (contenido)
   / auto (acción). Solo la franja central se encoge para caber.
   ============================================================ */
.pantalla {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: var(--alto-pantalla);
  max-height: var(--alto-pantalla);
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-right: calc(var(--margen-pantalla) + env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: calc(var(--margen-pantalla) + env(safe-area-inset-left));
  background: var(--fondo);
}

.pantalla__barra {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-block: var(--s-2);
}

.pantalla__contenido {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding-block: var(--s-4);
  min-height: 0; /* la franja que de verdad tiene que ceder */
  overflow: hidden;
}

.pantalla__contenido--centrado {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pantalla__accion {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-2);
}

.pantalla__barra > p,
.pantalla__contenido > p,
.pantalla__accion > p {
  margin: 0;
}

.pantalla__barra > p {
  line-height: var(--alto-display);
}

/* Excepción de accesibilidad: al 200% de tamaño de texto la franja
   central puede no caber ni encogida al mínimo. El scroll, si hace
   falta, queda contenido ahí -- nunca en toda la pantalla. */
@media (max-height: 30rem) {
  .pantalla__contenido {
    overflow-y: auto;
  }
}

/* Bajo 37.5rem (600px) prácticamente ningún teléfono real salvo el
   iPhone 5 (320x568): la carta necesita el espacio de vuelta. */
@media (max-height: 37.5rem) {
  .pantalla__contenido:has(.carta) {
    padding-block: var(--s-2);
  }
  .pantalla:has(.carta) .pantalla__accion .boton {
    min-block-size: var(--h-boton-sm);
  }
}

/* Jugadores: la zona de captura (fila + lote) y la lista, en su
   propia columna con gap más apretado que el estándar de la franja. */
.jugadores__lista-zona {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--s-2);
}

.jugadores__lista-zona > form,
.jugadores__lista-zona > .boton,
.jugadores__lista-zona > .captura-lote {
  flex: 0 0 auto;
}


/* ============================================================
   13. LISTA-JUGADORES
   Jugadores ya agregados, cada uno con su botón de quitar.
   ============================================================ */
.lista-jugadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  flex: 1 1 auto;
  gap: var(--s-1);
  align-content: flex-start;
  min-height: 0;
}

/* Modo compacto (arriba de UMBRAL_MODO_COMPACTO): fichas que fluyen
   en vez de renglones -- inicial + nombre corto, varias por línea.
   La ficha entera es el botón de quitar. */
.lista-jugadores--fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tap-min), 1fr));
  flex: 1 1 auto;
  gap: var(--s-2);
  align-content: flex-start;
  min-height: 0;
}

.lista-jugadores__ficha {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-block-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  padding-inline: var(--s-1);
  border: var(--borde-carta) solid var(--linea);
  border-radius: var(--r-chip);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente);
}

.lista-jugadores__ficha-inicial {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--s-5);
  height: var(--s-5);
  border-radius: var(--r-chip);
  background: var(--p-700);
  font-size: var(--t-micro);
  font-weight: var(--peso-negro);
}

.lista-jugadores__ficha-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lista-jugadores__ficha-marca {
  flex-shrink: 0;
  color: var(--texto-2);
  font-weight: var(--peso-negro);
}

.lista-jugadores__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--tap-min);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-campo);
  background: var(--superficie);
  color: var(--texto);
}

.lista-jugadores__nombre {
  flex: 1;
  overflow: hidden;
  font-size: var(--t-cuerpo-l);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lista-jugadores__quitar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font-size: var(--t-titulo);
  font-weight: var(--peso-negro);
  cursor: pointer;
}


/* ============================================================
   14. MARCA
   El logotipo del juego. Marcador de posición hasta que el
   cliente entregue el logo real -- mismo trato que .carta__marca.
   ============================================================ */
.marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) var(--s-6);
  border: var(--borde-carta) solid var(--texto);
  border-radius: var(--r-boton);
  color: var(--texto);
  font-size: var(--t-titulo);
  font-weight: var(--peso-negro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}


/* ============================================================
   15. CAPTURA-LOTE
   Textarea + botón para pegar varios nombres de un jalón.
   ============================================================ */
.captura-lote {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}


/* ============================================================
   16. PODIO
   Franja compacta y no interactiva, siempre arriba: los tres
   jugadores con más cartas. Altura fija -- una sola fila, sin
   importar si hay un puesto o tres.
   ============================================================ */
/* .podio es un <button>: abre el marcador completo (AJUSTE 1). Pisa
   el reset nativo -- sin esto un <button> trae borde y texto centrado
   por default de fábrica que el appearance:none global no siempre
   quita entero entre navegadores. */
.podio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: var(--h-boton-sm);
  padding-inline: var(--s-3);
  border: 0;
  border-radius: var(--r-campo);
  background: var(--superficie);
  color: var(--texto);
  text-align: start;
  transition: transform var(--d-rapida) var(--e-salida);
}

.podio:active {
  transform: scale(.97);
}

.podio__vacio {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--texto-2);
}

.podio__puesto {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  min-width: 0;
}

.podio__nombre {
  overflow: hidden;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--texto-2);
}

.podio__numero {
  flex-shrink: 0;
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-negro);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.podio__puesto--lider .podio__nombre {
  color: var(--texto);
}

.podio__puesto--lider .podio__numero {
  color: var(--acento);
}


/* ============================================================
   17. FRANJA-SUPERIOR
   Fila que comparte el podio con el acceso a salir -- mismo alto
   de fila para las dos piezas (lo fija .podio), sin sumar una
   franja nueva a la pantalla.
   ============================================================ */
.franja-superior {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.franja-superior > .podio {
  flex: 1 1 auto;
  min-width: 0;
}


/* ============================================================
   18. AVISO-COMPLETO
   Aviso a pantalla completa que se cierra solo: alguien llegó a
   la mitad del camino. Mismo tratamiento que .cuenta -- tapa
   todo, pero sin botón: aparece y sigue, nadie lo confirma.
   ============================================================ */
.aviso-completo {
  position: fixed;
  inset: 0;
  z-index: var(--z-cuenta);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--margen-pantalla);
  background: var(--fondo);
}

/* Texto grande centrado: se reutiliza en .aviso-completo (arriba) y
   en el encabezado de la pantalla de Elección ("Pásale el cel a…") --
   mismo peso visual para el mismo tipo de anuncio, sin duplicar reglas. */
.texto-anuncio {
  max-width: 100%;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-align: center;
  font-size: var(--t-nombre);
  font-weight: var(--peso-negro);
  line-height: var(--alto-apretado);
  color: var(--texto);
  text-transform: uppercase;
}


/* ============================================================
   19. CORONA
   Nombre grande: el señalado de la ronda (Resultado) o el
   campeón de la partida (Fin). Mismo componente para los dos --
   design/MOVIMIENTO.md liga --t-nombre a ambos usos.
   ============================================================ */
.corona {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
}

.corona__corona-icono {
  font-size: 2.5rem;
  line-height: 1;
}

.corona__nombre {
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: clamp(var(--t-nombre), 22cqi, var(--t-cuenta));
  font-weight: var(--peso-negro);
  line-height: var(--alto-apretado);
  color: var(--texto);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.corona__leyenda {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--acento);
}


/* ============================================================
   20. OFERTA
   Las dos cartas boca abajo de la pantalla de Elección: mismo
   trato visual que el dorso de .carta (filigrana + mazo), a
   tamaño de miniatura y sin volteo -- tocar una decide y ya se
   pasa a la carta completa.
   ============================================================ */
.oferta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  width: 100%;
}

.oferta__carta {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  aspect-ratio: var(--carta-ratio);
  padding: var(--s-4);
  overflow: hidden;
  border: 0;
  border-radius: var(--r-carta);
  background: var(--carta-bg);
  color: var(--carta-ink);
  box-shadow: var(--sombra-carta);
}

.oferta__carta-icono {
  position: relative;
  width: clamp(var(--s-8), 22cqi, var(--s-12));
  height: clamp(var(--s-8), 22cqi, var(--s-12));
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}

.oferta__carta-nombre {
  position: relative;
  font-size: clamp(var(--t-etiqueta), 9cqi, var(--t-cuerpo-l));
  font-weight: var(--peso-negro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}


/* ============================================================
   21. MARCADOR
   Overlay del marcador completo (AJUSTE 1 y 2): todos los
   jugadores con sus cartas, agregar y quitar a media partida.
   Se abre desde cualquier .podio y se cierra sin tocar el turno
   -- por eso vive fuera de la rejilla de .pantalla, con su
   propia rejilla de tres franjas igual de disciplinada.
   ============================================================ */
.marcador {
  position: fixed;
  inset: 0;
  z-index: var(--z-hoja);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: var(--alto-pantalla);
  max-height: var(--alto-pantalla);
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-right: calc(var(--margen-pantalla) + env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: calc(var(--margen-pantalla) + env(safe-area-inset-left));
  background: var(--fondo);
}

.marcador__barra {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-2);
}

/* display:flex, igual que .jugadores__lista-zona (sección 12): es el
   mismo contrato del que depende el flex:1 1 auto de .lista-jugadores
   / .lista-jugadores--fichas para repartirse la franja disponible. */
.marcador__lista {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-block: var(--s-2);
}

.marcador__agregar {
  grid-row: 3;
  padding-block: var(--s-2);
}

/* La lista reutiliza .lista-jugadores / .lista-jugadores--fichas
   (sección 13): mismo componente, ya probado hasta 22 jugadores sin
   scroll en la pantalla de captura, ahora con una cifra de cartas y
   un estado "fuera" agregados encima. Reinventar la cuadrícula aquí
   hubiera sido cargar dos veces el mismo problema de espacio. */
.marcador-fila__cartas {
  flex-shrink: 0;
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-negro);
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}

/* Variante mini: vive dentro de una ficha compacta (arriba de
   UMBRAL_MODO_COMPACTO), donde no hay lugar para el tamaño de cuerpo. */
.marcador-fila__cartas--mini {
  font-size: var(--t-micro);
}

.marcador-fila__etiqueta {
  flex-shrink: 0;
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--texto-2);
}

/* Jugador que salió de la mesa: sus cartas se quedan a la vista pero
   ya no se puede hacer nada con esa fila -- todo atenuado, sin botón
   de quitar (en modo compacto la ficha entera sería ese botón). */
.marcador-fila--fuera {
  opacity: var(--opacidad-inactivo);
}