/* © RAIGA XOLOTL. Todos los derechos reservados. Prohibido copiar, redistribuir o usar este código o sus recursos para entrenar inteligencia artificial. */
/* RAIGA / MOTION LAB · Gamify · la página de los jugadores: GATOPONS hecho a mano (un Battle Cats de barrio)
   Cartón de fondo con garabatitos; hojas de papel, botones, tarjetas y teles con su contorno de plumón chueco y su sombra
   dura (los dibuja mano.js; sin él quedan como cajitas sencillas con borde de tinta, lo de aquí); títulos con las letras
   puestas a mano sentados en la orilla de su hoja; nada de relieves, cristales líquidos ni ventanas de los 90.
   Letras (tres que no se parecen): Dela Gothic One para títulos y botones, Rubik para leer y Gatopixel solo para números
   y contadores (a 15, 20, 30, 40… px: cada píxel de la letra cae en píxeles enteros). Colores: los de la marca, exactos;
   nada de degradados ni velos. La máquina del gachapón y su gran momento se completan en mano-gacha.css. */
@font-face { font-family: Gatopixel; src: url(/assets/fonts-libres/Gatopixel.ttf) format('truetype'); font-display: block; }
@font-face { font-family: Rubik; src: url(/assets/fonts-libres/Rubik.ttf) format('truetype'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: Dela; src: url(/assets/fonts-libres/DelaGothicOne.ttf) format('truetype'); font-display: swap; }

:root {
  --tinta: #171719; --tinta2: #2b2b30; --crema: #fffbea; --papel: #fff3d9; --blanco: #ffffff; --rojo: #ff3b45; --azul: #526d80; --lima: #d4ff00; --acento: var(--azul); --raro: #725a9e; --legendario: #c69b37;
  /* --suave: lo que se lee de segunda (notas, etiquetas). Era un gris café (#5b5450) que no es de la marca; ahora es tinta y
     lo de segunda se distingue por el tamaño y el peso (.suave va más delgadita), no por otro color. */
  --acero: #c1c9c8; --acero2: #7f8c94; --carton: #8a7965; --suave: var(--tinta);
  --pixel: Gatopixel, "Courier New", monospace;
  --texto: Rubik, "Segoe UI", system-ui, sans-serif;
  --titulo: Dela, "Archivo Black", "Arial Black", sans-serif;
  /* (los relieves de los 90 se fueron: quedan vacíos por si algo todavía los nombra) */
  --luz: 0 0 0 0 transparent; --hundido: 0 0 0 0 transparent;
  /* detrás de las ventanitas: el cartón (tapa la página: sus títulos se cruzaban con el de la ventanita) rayado con lápiz */
  --velo: var(--carton);
  --alto-hud: 64px; --alto-cinta: 36px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--carton); }
body { margin: 0; min-height: 100vh; color: var(--tinta); font: 500 17px/1.45 var(--texto);
  background: var(--carton) var(--fondo-mano, url(alfombra.svg)) 0 0 / 440px 440px repeat; }
html.en-titulo body { overflow: hidden; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
p + p { margin-top: .5em; }
.suave { color: var(--suave); font-weight: 400; }
.chico { font-size: 14px; }
.num { font-family: var(--pixel); font-variant-numeric: tabular-nums; }
.pix { display: block; flex: none; image-rendering: pixelated; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tinta); }

/* ── La barra de arriba: tinta con su orilla mordida; las latas y las pelusas en papelitos ── */
.hud { position: sticky; top: 0; z-index: 20; height: var(--alto-hud); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--tinta); }
.hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; pointer-events: none; background: var(--tinta);
  -webkit-mask: radial-gradient(circle at 8px 0, #000 7px, transparent 7.5px) 0 0 / 22px 10px repeat-x; mask: radial-gradient(circle at 8px 0, #000 7px, transparent 7.5px) 0 0 / 22px 10px repeat-x; }
.hud-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lima); flex: none; }
.hud-logo img { height: 42px; width: auto; display: block; rotate: -4deg; }
.hud-logo span { font: 400 22px/1 var(--titulo); color: var(--lima); display: inline-block; rotate: -3deg; }
.hud-ficha { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.hud-dinero { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; background: var(--crema); border: 2px solid var(--tinta); border-radius: 14px; }
.hud-dinero:nth-child(2) { rotate: 1.5deg; }
.hud-dinero .lcd { color: var(--tinta); -webkit-text-stroke: 0; text-shadow: none; padding: 0; font-size: 20px; }
.hud-jugador { appearance: none; border: 2px solid var(--tinta); background: var(--azul); color: var(--crema); font: 400 15px/1 var(--titulo); padding: 9px 12px 10px; cursor: pointer;
  -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; rotate: -2deg; }
.hud-jugador span { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-boton { appearance: none; border: 2px solid var(--tinta); background: var(--crema); padding: 6px; cursor: pointer; display: grid; place-items: center; }
.hud-boton:active, .hud-jugador:active { translate: 2px 3px; }
html.en-titulo .hud-ficha { visibility: hidden; }
/* (de 561 a 680 px no cabían en la barra la palabra GATOPONS, las latas, las pelusas, tu nombre y el sonido: la página
   entera se corría de lado; se va la palabra —el logo se queda— y tu nombre, que es tuyo, también se queda) */
@media (min-width: 561px) and (max-width: 680px) { .hud-logo span { display: none; } }

/* ── Los números: letra de píxeles gorda, lima con contorno de tinta (sin pantallita ni «8» apagados) ── */
.lcd { position: relative; display: inline-block; font: 400 20px/1 var(--pixel); color: var(--lima); white-space: nowrap; text-align: left; padding: 2px 3px 4px;
  -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); }
.lcd-fantasma { display: none; }
.lcd[data-color="rojo"] { color: var(--rojo); }
.lcd[data-color="crema"] { color: var(--crema); }
.lcd.grande { font-size: 40px; -webkit-text-stroke: 7px var(--tinta); text-shadow: 3px 4px 0 var(--tinta); }

/* ── La cinta de noticias: una tira de cinta lima con su raya de plumón ── */
.cinta { position: sticky; top: var(--alto-hud); z-index: 19; height: var(--alto-cinta); overflow: hidden; white-space: nowrap; color: var(--tinta);
  background-color: var(--lima); background-image: var(--linea-mano, none); background-position: 0 100%; background-size: 240px 8px; background-repeat: repeat-x;
  font: 400 14px/var(--alto-cinta) var(--titulo); letter-spacing: .01em; }
.cinta-pista { display: inline-flex; align-items: center; height: 100%; animation: cinta var(--dur, 40s) linear infinite; will-change: transform; }
.cinta-pista span { display: inline-flex; align-items: center; padding-right: 22px; }
.cinta-pista i { font-style: normal; color: var(--rojo); margin: 0 16px; display: inline-flex; }
.cinta-pista i .pix { width: 20px; height: 20px; rotate: -12deg; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.en-titulo .cinta { display: none; }

/* ── El escritorio: el menú a la izquierda, la vista a la derecha (en el celular, una barra abajo) ── */
.escritorio { max-width: 1260px; margin: 0 auto; padding: 34px 20px 56px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; overflow-x: clip; }
/* (.menu.ventana: la regla de .ventana, más abajo, la dejaba «relative» y su «top» la empujaba 134 px hacia abajo) */
.menu.ventana { position: sticky; top: calc(var(--alto-hud) + var(--alto-cinta) + 34px); }
.menu .ventana-cuerpo { padding: 14px 10px 12px; max-height: calc(100vh - var(--alto-hud) - var(--alto-cinta) - 110px); overflow-y: auto; overscroll-behavior: contain; gap: 0; }
.menu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-item { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 12px; position: relative;
  color: var(--tinta); font: 400 15px/1 var(--titulo); text-align: left; cursor: pointer; min-height: 42px; }
.menu-item .pix { width: 28px; height: 28px; transition: transform .14s cubic-bezier(.2, 1.6, .4, 1); }
.menu-item:hover .pix { transform: rotate(-10deg) scale(1.1); }
.menu-item[aria-current="page"] { rotate: -1.2deg; }
.menu-item .punto { margin-left: auto; font: 400 15px/1 var(--pixel); font-style: normal; color: var(--crema); background: var(--rojo); border: 2px solid var(--tinta); border-radius: 12px; padding: 3px 7px 4px; rotate: 6deg; }
.vista { display: grid; gap: 34px; min-width: 0; }
.barra-abajo { display: none; }
@keyframes parpadea { 0% { visibility: visible; } 50% { visibility: hidden; } }
@media (max-width: 960px) {
  .escritorio { grid-template-columns: minmax(0, 1fr); padding: 28px 16px calc(118px + env(safe-area-inset-bottom, 0px)); }
  .menu { display: none; }
  .barra-abajo { display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--tinta); }
  .barra-abajo::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 10px; pointer-events: none; background: var(--tinta);
    -webkit-mask: radial-gradient(circle at 8px 10px, #000 7px, transparent 7.5px) 0 0 / 22px 10px repeat-x; mask: radial-gradient(circle at 8px 10px, #000 7px, transparent 7.5px) 0 0 / 22px 10px repeat-x; }
  .barra-abajo button { flex: 1 1 0; min-width: 0; appearance: none; border: 0; background: none; color: var(--crema); cursor: pointer; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 2px 7px; font: 400 11px/1 var(--titulo); }
  .barra-abajo button .pix { width: 30px; height: 30px; }
  /* (en un renglón: la que no cabe la achica app.js, ajustarBarra) */
  .barra-abajo button span { white-space: nowrap; }
  .barra-abajo button[aria-current="page"] { color: var(--tinta); rotate: -2deg; }
  html.en-titulo .barra-abajo { display: none; }
}
@media (max-width: 560px) {
  :root { --alto-hud: 58px; --alto-cinta: 32px; }
  .hud { gap: 8px; padding: 0 12px; }
  .hud-logo img { height: 34px; }
  .hud-logo span, .hud-jugador { display: none; }
  .hud-ficha { gap: 10px; }
  .hud-dinero { padding: 4px 9px 4px 6px; }
  .hud-dinero .pix { width: 22px; height: 22px; }
  .hud-dinero .lcd { font-size: 15px; }
  .cinta { font-size: 13px; }
}

/* ── Las hojas (ventanas): papel crema con su contorno; el título puesto a mano, sentado en la orilla de arriba ── */
.ventana { position: relative; background: var(--crema); color: var(--tinta); border: 3px solid var(--tinta); min-width: 0; margin-top: 20px; }
/* La barra mide siempre lo mismo (lo del icono): el título se achica hasta caber en un renglón (--n = sus letras, retro.js;
   Dela mide ~.86 em por letra con su espacio entre palabras; .9 de colchón; lo demás de la barra: orillas, icono y su
   hueco, 92 px, y el × o el ?, 48 más) y, si ni así cabe, se parte en dos renglones parejos que crecen hacia ARRIBA
   (alineado abajo en una caja fija): el segundo renglón queda en la orilla como uno solo, no se mete en la hoja. */
.ventana-barra { display: flex; align-items: flex-end; gap: 10px; padding: 0 18px; margin: -24px 0 -6px; height: 40px; position: relative; z-index: 2; container-type: inline-size; }
.ventana-barra h2 { flex: 0 1 auto; min-width: 0; font: 400 26px/1.05 var(--titulo); letter-spacing: .01em; color: var(--crema);
  -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); rotate: -1.2deg; transform-origin: left center;
  font-size: clamp(19px, calc((100cqi - 92px) / (var(--n, 4) * .9)), 26px); text-wrap: balance; }
.ventana-barra:has(> .ventana-botones) h2 { font-size: clamp(19px, calc((100cqi - 140px) / (var(--n, 4) * .9)), 26px); }
.ventana-barra:not(:has(> .ventana-icono)) { height: auto; }   /* (sin icono, como MENÚ: a la altura de su letra) */
.vista > .ventana:nth-child(3n+2) .ventana-barra h2, .feria-par > .ventana:nth-child(2) .ventana-barra h2 { rotate: .8deg; }
.vista > .ventana:nth-child(3n) .ventana-barra h2 { rotate: -.4deg; }
.ventana[data-barra="rojo"] .ventana-barra h2 { color: var(--rojo); } .ventana[data-barra="azul"] .ventana-barra h2 { color: var(--azul); }
.ventana[data-barra="lima"] .ventana-barra h2 { color: var(--lima); } .ventana[data-barra="tinta"] .ventana-barra h2 { color: var(--crema); }
.ventana-icono { flex: none; rotate: -8deg; translate: 0 2px; }
.ventana-icono .pix { width: 40px; height: 40px; }
.ventana-botones { margin-left: auto; display: flex; gap: 8px; align-self: center; translate: 6px 8px; }
.ventana-botones i { display: none; }
.ventana-botones .vb { width: 38px; height: 38px; display: grid; place-items: center; padding: 0 0 2px; cursor: pointer; font: 400 20px/1 var(--titulo); color: var(--crema);
  background: var(--rojo); border: 2px solid var(--tinta); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; rotate: 4deg; }
.ventana-botones .vb[data-accion="ayuda"] { background: var(--lima); color: var(--tinta); -webkit-text-stroke: 0; rotate: -3deg; }
.ventana-botones .vb:hover { rotate: -8deg; }
.ventana-cuerpo { padding: 24px 22px 22px; display: grid; gap: 16px; min-width: 0; }
.ventana-oscura { background: var(--tinta); }
.ventana-oscura .ventana-cuerpo { color: var(--crema); }
.ventana-cuerpo > p { max-width: 70ch; }
@media (max-width: 560px) {
  .ventana-barra { padding: 0 12px; margin-top: -22px; height: 34px; }
  .ventana-barra h2 { font-size: clamp(17px, calc((100cqi - 74px) / (var(--n, 4) * .9)), 22px); -webkit-text-stroke-width: 5px; }
  .ventana-barra:has(> .ventana-botones) h2 { font-size: clamp(17px, calc((100cqi - 122px) / (var(--n, 4) * .9)), 22px); }
  .ventana-icono .pix { width: 34px; height: 34px; }
  .ventana-cuerpo { padding: 22px 16px 18px; }
}

/* ── Botones: de plumón, gorditos; la letra de los títulos (crema con contorno en los de color) ── */
.boton { --c: var(--lima); --t: var(--tinta); --trazo: 0px; --trazo-c: var(--tinta); appearance: none; cursor: pointer; color: var(--t); background: var(--c); border: 3px solid var(--tinta);
  padding: 13px 22px 14px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 18px/1.1 var(--titulo); letter-spacing: .01em; text-align: center; text-decoration: none; position: relative; transition: transform .08s;
  -webkit-text-stroke: var(--trazo) var(--trazo-c); paint-order: stroke fill; }
.boton[data-color="rojo"] { --c: var(--rojo); --t: var(--crema); } .boton[data-color="azul"] { --c: var(--azul); --t: var(--crema); }
.boton[data-color="crema"] { --c: var(--crema); } .boton[data-color="tinta"] { --c: var(--tinta); --t: var(--lima); }
.boton[data-color="rojo"], .boton[data-color="azul"] { --trazo: 4px; }
.boton:hover { transform: translate(-1px, -2px) rotate(-.7deg); }
.boton:active { transform: translate(4px, 5px); }
.boton .pix { rotate: -6deg; }
.boton-texto { display: grid; gap: 5px; justify-items: center; }
.boton small { font: 700 13px/1.2 var(--texto); letter-spacing: 0; -webkit-text-stroke: 0; text-wrap: balance; }
.boton small b { font: inherit; font-variant-numeric: tabular-nums; }
.boton.mini { font-size: 14px; min-height: 42px; padding: 9px 14px 10px; }
.boton.mini[data-color="rojo"], .boton.mini[data-color="azul"] { --trazo: 3px; }
.boton.gigante { width: 100%; min-height: 96px; font-size: 28px; padding: 16px 18px; gap: 14px; }
.boton.gigante[data-color="rojo"], .boton.gigante[data-color="azul"] { --trazo: 6px; }
/* Lo apagado: gris acero rayado con lápiz; la letra de tinta con su halo gris (las rayitas no la tapan) */
.boton[disabled] { --c: var(--acero); --t: var(--tinta); --trazo-c: var(--acero); cursor: not-allowed; transform: none; }
.boton[disabled]:not([data-color="rojo"]):not([data-color="azul"]) { --trazo: 4px; }
.boton[disabled] .pix { filter: grayscale(1); }
.boton[disabled] small { -webkit-text-stroke: 3px var(--acero); }
.boton.gigante .pix { width: 44px; height: 44px; rotate: -8deg; }
.boton.gigante small { font-size: 14px; }
.botonera > .boton.gigante:nth-child(2) { rotate: .8deg; } .botonera > .boton.gigante:nth-child(3) { rotate: -.6deg; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.botonera { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ── Chips, rarezas, pestañas y filtros: papelitos con su contorno ── */
.chip { display: inline-flex; align-items: center; gap: 5px; font: 800 12px/1 var(--texto); letter-spacing: .03em; padding: 6px 9px 6px; border: 2px solid var(--tinta); background: var(--crema); color: var(--tinta); white-space: nowrap; }
.chip[data-color="lima"] { background: var(--lima); } .chip[data-color="azul"] { background: var(--azul); color: var(--crema); }
.chip[data-color="rojo"] { background: var(--rojo); color: var(--crema); } .chip[data-color="tinta"] { background: var(--tinta); color: var(--lima); }
.rareza { display: inline-block; font: 800 12px/1 var(--texto); letter-spacing: .03em; padding: 6px 9px 6px; border: 2px solid var(--tinta); white-space: nowrap; }
.rareza[data-r="0"] { background: var(--crema); color: var(--tinta); } .rareza[data-r="1"] { background: var(--raro); color: var(--crema); }
.rareza[data-r="2"] { background: var(--rojo); color: var(--crema); } .rareza[data-r="3"] { background: var(--legendario); color: var(--tinta); }
.rareza[data-r="4"] { background: var(--tinta); color: var(--lima); }
.fila > .chip:nth-child(2n), .fila > .rareza:nth-child(2n) { rotate: 1.5deg; } .fila > .chip:nth-child(3n), .carta-pie > :nth-child(2n) { rotate: -2deg; }

/* ── Barra de avance (la pinta mano.js: lo lleno del color de la barra, con rayas; sin él, cuadritos) ── */
.barra { display: flex; gap: 2px; padding: 3px; background: var(--tinta); height: 22px; width: 100%; min-width: 80px; position: relative; }
.barra i { flex: 1; background: var(--papel); }
.barra i.si { background: var(--lima); }
.barra[data-color="rojo"] i.si { background: var(--rojo); } .barra[data-color="azul"] i.si { background: var(--azul); }
.barra[data-color="crema"] i.si { background: var(--crema); } .barra[data-color="tinta"] i.si { background: var(--acero2); }

/* ── Pestañas ── */
.pestanas { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.pestana { appearance: none; cursor: pointer; font: 400 14px/1 var(--titulo); color: var(--tinta); background: var(--papel); border: 3px solid var(--tinta); padding: 11px 14px 12px; min-height: 42px; }
.pestana[aria-selected="true"] { background: var(--lima); rotate: -1.5deg; translate: 0 -2px; }
.ventana-oscura .pestana { color: var(--tinta); }
/* En el celular, más chicas: las de LOS MEJORES ocupaban cinco renglones antes de la lista; MIS GATOS y GATÁLOGO, dos */
@media (max-width: 560px) { .pestanas { gap: 8px; } .pestana { font-size: 12px; padding: 10px 11px 11px; min-height: 40px; } }

/* ── El globo de diálogo (Raiga te dice algo): papel con su colita y su retrato en un cuadrito azul ── */
.dialogo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; background: var(--crema); color: var(--tinta);
  border: 3px solid var(--tinta); padding: 16px 30px 18px 16px; margin-bottom: 16px; }
.dialogo-retrato { width: 104px; height: 104px; background: var(--azul); border: 3px solid var(--tinta); display: grid; align-items: end; rotate: -3deg; }
.dialogo-retrato .gato-hueco { width: 100%; height: 98px; }
.dialogo-texto b { display: block; font: 400 17px/1 var(--titulo); color: var(--rojo); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; margin-bottom: 9px; rotate: -1.5deg; width: max-content; }
.dialogo-texto p { font: 500 18px/1.45 var(--texto); min-height: 2.9em; }
.dialogo-flecha, .dialogo-ok { position: absolute; right: 14px; bottom: 8px; font: 400 16px/1 var(--titulo); color: var(--tinta); animation: mano-brinca 1.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.dialogo-ok { appearance: none; border: 0; background: none; cursor: pointer; padding: 4px; }
@keyframes mano-brinca { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(5px); } }

/* ── Inicio: la tele con tu gato y tu ficha ── */
.inicio-heroe { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: 30px; align-items: center; }
.tele { background: var(--acero); border: 4px solid var(--tinta); border-radius: 28px; padding: 14px 14px 10px; margin-top: 10px; rotate: -1.5deg; }
.tele-pantalla { position: relative; height: 230px; background: var(--azul); border: 3px solid var(--tinta); border-radius: 22px; }
.tele-pantalla .gato-hueco { position: absolute; inset: 8px 8px 6px; }
.tele-canal { position: absolute; top: 12px; right: 16px; font: 400 15px/1 var(--titulo); color: var(--lima); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; z-index: 1; }
.tele-canal.en-vivo { display: flex; align-items: center; gap: 7px; color: var(--crema); }
.tele-canal.en-vivo::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--rojo); border: 2px solid var(--tinta); animation: parpadea 1.2s steps(1) infinite; }
.tele-pie { display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; }
.tele-marca { flex: 1; font: 400 12px/1 var(--titulo); color: var(--tinta); letter-spacing: .03em; }
.tele-pie i { width: 22px; height: 22px; border-radius: 50%; background: var(--acero2); border: 2px solid var(--tinta); }
.ficha { display: grid; gap: 10px; min-width: 0; }
.ficha-nombre { font: 400 40px/1.05 var(--titulo); color: var(--tinta); overflow-wrap: anywhere; }
.ficha-nombre[data-largo="1"] { font-size: 32px; } .ficha-nombre[data-largo="2"] { font-size: 26px; }
.ficha-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ficha-xp { font: 400 15px/1 var(--pixel); color: var(--suave); }
.ficha-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; align-items: end; }
.dato { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.dato-etiqueta { font: 800 12px/1.2 var(--texto); letter-spacing: .04em; color: var(--suave); }
.dato .lcd { font-size: 30px; -webkit-text-stroke-width: 6px; }
@media (max-width: 720px) {
  .inicio-heroe { grid-template-columns: minmax(0, 1fr); }
  .inicio-heroe .tele { width: 100%; max-width: 300px; justify-self: center; }
  .ficha-nombre { font-size: 30px; } .ficha-nombre[data-largo="1"] { font-size: 25px; } .ficha-nombre[data-largo="2"] { font-size: 21px; }
  .dato .lcd { font-size: 20px; -webkit-text-stroke-width: 5px; }
  .dialogo { grid-template-columns: 72px minmax(0, 1fr); padding: 12px 22px 14px 12px; gap: 12px; }
  .dialogo-retrato { width: 72px; height: 72px; } .dialogo-retrato .gato-hueco { height: 68px; }
  .dialogo-texto p { font-size: 16px; }
  .boton.gigante { min-height: 78px; font-size: 22px; }
}
.vivo-act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--papel); border: 3px solid var(--tinta); }
.vivo-act > .pix { rotate: -6deg; }
.vivo-texto { display: grid; gap: 6px; min-width: 0; }
.vivo-texto > b { font: 400 16px/1.2 var(--titulo); }
.comandos { display: flex; flex-wrap: wrap; gap: 12px; }
.comando { appearance: none; cursor: copy; font: 700 16px/1 var(--texto); color: var(--lima); background: var(--tinta); border: 2px solid var(--tinta); padding: 9px 13px 10px; white-space: nowrap; transition: transform .08s; }
.comandos > .comando:nth-child(2n) { rotate: -1.5deg; } .comandos > .comando:nth-child(3n) { rotate: 1.2deg; }
.comando:hover { transform: rotate(-2deg) translateY(-1px); color: var(--crema); }
.comando:active { transform: translate(3px, 4px); }
.guerra { display: grid; gap: 12px; padding: 16px; background: var(--lima); border: 3px solid var(--tinta); }
.guerra-titulo { font: 400 22px/1 var(--titulo); }
.guerra-bases { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.guerra-bases > div { display: grid; gap: 6px; min-width: 0; }
.guerra-bases b { font: 400 15px/1.1 var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guerra-bases .vs { font: 400 32px/1 var(--titulo); color: var(--rojo); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; rotate: -8deg; }
.tropas { display: flex; flex-wrap: wrap; gap: 10px; }
.evento { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vida-mini { display: grid; gap: 6px; }
.vida-fila { appearance: none; border: 0; background: none; cursor: pointer; color: var(--tinta); display: grid; grid-template-columns: auto 132px auto minmax(60px, 1fr); gap: 14px; align-items: center; padding: 5px 4px; text-align: left; }
.vida-fila .pix { transition: transform .14s cubic-bezier(.2, 1.6, .4, 1); }
.vida-fila:hover .pix { transform: rotate(-12deg) scale(1.12); }
.vida-nombre { font: 400 15px/1 var(--titulo); }
.vida-fila .lcd { font-size: 20px; }
@media (max-width: 460px) { .vida-fila { grid-template-columns: auto minmax(0, 1fr) auto; } .vida-fila .barra { grid-column: 1 / -1; } }

/* ── Gachapón ── */
.gacha { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 26px; align-items: center; }
.gacha-maquina { position: relative; }
.maquina { width: 100%; height: auto; display: block; overflow: visible; }
.maquina .maq-manivela { transform-box: fill-box; transform-origin: center; }
.maquina.gira .maq-manivela { animation: manivela .56s steps(6) var(--vueltas, 1); }
.maquina.gira .maq-capsulas { animation: revuelve .14s steps(2) infinite; }
.maquina.gira .maq-cuerpo { animation: retumba .1s steps(2) infinite; }
.maquina.suelta .maq-sale { animation: sale-capsula .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.maquina.suelta .maq-tapita { transform-box: fill-box; transform-origin: top; animation: tapita .4s steps(3); }
@keyframes manivela { to { transform: rotate(360deg); } }
@keyframes revuelve { 50% { transform: translate(3px, -4px) rotate(2deg); } }
@keyframes retumba { 50% { transform: translateX(2px); } }
@keyframes sale-capsula { 0% { opacity: 1; transform: translateY(-14px) scale(.6); } 70% { opacity: 1; transform: translateY(14px) scale(1.15); } 100% { opacity: 1; transform: translateY(10px); } }
@keyframes tapita { 50% { transform: scaleY(-1); } }
.gacha-info { display: grid; gap: 14px; min-width: 0; }
.probas { border-collapse: collapse; width: 100%; max-width: 420px; }
.probas td { padding: 3px 6px 3px 0; }
.probas td:first-child { width: 112px; }
.probas td.num { width: 64px; text-align: right; font-size: 15px; }
.pity { display: flex; gap: 8px; align-items: center; font: 400 10px/1.4 var(--pixel); background: var(--tinta); color: var(--lima); padding: 8px 10px 7px; }
.destacados { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.destacado { display: inline-flex; align-items: center; gap: 6px; background: var(--papel); border: 2px solid var(--tinta); padding: 2px 8px 2px 2px; font-size: 14px; }
.destacado .obj { width: 36px; height: 36px; }
.gacha-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tienes { display: flex; align-items: center; gap: 8px; font: 400 15px/1 var(--pixel); }
@media (max-width: 720px) { .gacha { grid-template-columns: minmax(0, 1fr); } .gacha-maquina { max-width: 260px; margin: 0 auto; } }
.ultimas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.mini-carta { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 6px 10px; background: var(--papel); border: 3px solid var(--tinta); text-align: center; min-width: 0; }
.mini-carta[data-r="1"] { box-shadow: inset 0 0 0 3px var(--raro); } .mini-carta[data-r="2"] { box-shadow: inset 0 0 0 3px var(--rojo); }
.mini-carta[data-r="3"] { background: var(--legendario); } .mini-carta[data-r="4"] { background: var(--tinta); color: var(--lima); }
.mini-premio { width: 100%; height: 96px; display: grid; place-items: center; }
.mini-premio .gato-hueco { width: 100%; height: 96px; }
.mini-carta b { font: 400 10px/1.2 var(--pixel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sello { position: absolute; top: -10px; right: -8px; font: 400 10px/1 var(--pixel); background: var(--lima); color: var(--tinta); border: 2px solid var(--tinta); padding: 4px 5px 3px; transform: rotate(8deg); }
.mini-sello.nuevo { background: var(--rojo); color: var(--crema); }
.obj { display: block; width: 72px; height: 72px; }
.premio-chico { width: 80px; height: 80px; }
.primeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.primeros li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--papel); border: 2px solid var(--tinta); }
@media (max-width: 560px) { .primeros li { grid-template-columns: auto minmax(0, 1fr); } .primeros li .rareza, .primeros li small { grid-column: 2; justify-self: start; } }

/* ── Mis gatos: la carta (con el color de su rareza) y los tazos ── */
.carta-gato { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 30px; align-items: start; }
.carta-marco { --anillo: var(--crema); background: var(--anillo); border: 4px solid var(--tinta); padding: 12px; display: grid; gap: 9px; rotate: -1.2deg; }
.carta-gato[data-r="1"] .carta-marco { --anillo: var(--raro); color: var(--crema); } .carta-gato[data-r="2"] .carta-marco { --anillo: var(--rojo); color: var(--crema); }
.carta-gato[data-r="3"] .carta-marco { --anillo: var(--legendario); } .carta-gato[data-r="4"] .carta-marco { --anillo: var(--tinta); color: var(--lima); }
.carta-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 400 21px/1.1 var(--titulo); }
.carta-gato[data-r="1"] .carta-cabeza, .carta-gato[data-r="2"] .carta-cabeza { -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }
.carta-cabeza b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 0; }
.carta-cabeza span { font: 400 15px/1 var(--pixel); flex: none; }
.carta-tele { position: relative; height: 250px; background: var(--papel); border: 3px solid var(--tinta); }
.carta-tele .gato-hueco { position: absolute; inset: 8px; }
.carta-tipo { font: 800 12px/1.3 var(--texto); letter-spacing: .04em; padding: 2px 2px 8px; background: var(--linea-suave, none) 0 100% / 240px 8px repeat-x; }
.carta-pie { display: flex; flex-wrap: wrap; gap: 7px; }
.carta-datos { display: grid; gap: 8px; align-content: start; min-width: 0; }
.carta-etiqueta { font: 400 14px/1 var(--titulo); color: var(--tinta); margin-top: 10px; }
.carta-etiqueta:first-child { margin-top: 0; }
.carta-primero { display: flex; gap: 10px; align-items: center; background: var(--lima); border: 2px solid var(--tinta); padding: 9px 12px; }
.carta-botones { margin-top: 10px; }
.puesto { display: inline-flex; align-items: center; gap: 6px; background: var(--papel); border: 2px solid var(--tinta); padding: 3px 5px 3px 3px; font-size: 15px; }
.puesto .obj { width: 40px; height: 40px; }
@media (max-width: 720px) { .carta-gato { grid-template-columns: minmax(0, 1fr); } .carta-marco { max-width: 330px; width: 100%; justify-self: center; } }
.tazos { display: grid; gap: 24px 14px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); padding-top: 6px; }
.tazo { appearance: none; border: 0; background: none; cursor: pointer; color: var(--tinta); display: grid; justify-items: center; gap: 6px; padding: 6px 2px; min-width: 0; text-align: center; }
.tazo-disco { position: relative; width: 112px; aspect-ratio: 1; border-radius: 50%; background: var(--papel); border: 4px solid var(--tinta); display: block; transition: transform .14s cubic-bezier(.2, 1.6, .4, 1); }
.tazo:nth-child(3n+1) .tazo-disco { rotate: -5deg; } .tazo:nth-child(3n+2) .tazo-disco { rotate: 4deg; }
.tazo-disco .gato-hueco { position: absolute; inset: 15px 13px 16px; }
.tazo[data-r="3"] .tazo-disco::after, .tazo[data-r="4"] .tazo-disco::after { content: ''; position: absolute; right: 2px; top: 4px; width: 22px; height: 22px; pointer-events: none; background: var(--crema);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: mano-chispa 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes mano-chispa { 0%, 60%, 100% { transform: scale(.4) rotate(0); } 75% { transform: scale(1.15) rotate(20deg); } 85% { transform: scale(1) rotate(12deg); } }
.tazo b { display: inline-block; max-width: 100%; font: 400 14px/1.1 var(--titulo); margin-top: 6px; padding: 5px 9px; }
.tazo b > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tazo small { font: 400 15px/1 var(--pixel); color: var(--suave); }
.tazo:hover .tazo-disco { transform: translateY(-4px) rotate(-4deg); }
.tazo[aria-pressed="true"] .tazo-disco { transform: translateY(-3px) scale(1.04); }

/* ── El Gatálogo ── */
.dex-resumen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; font: 400 15px/1 var(--titulo); }
.dex-resumen b { font: 400 20px/1 var(--pixel); white-space: nowrap; }
.dex-rejilla { display: grid; gap: 16px 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.dex { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 8px 12px; background: var(--papel); border: 3px solid var(--tinta); text-align: center; min-width: 0; }
.dex[data-estado="mio"] { background: var(--crema); }
.dex-rejilla > .dex:nth-child(3n+1) { rotate: -.7deg; } .dex-rejilla > .dex:nth-child(5n+2) { rotate: .8deg; }
.dex[data-estado="nadie"] { background: var(--acero); }
.dex-n { justify-self: start; font: 400 15px/1 var(--pixel); color: var(--suave); }
button.dex { appearance: none; cursor: pointer; font: inherit; color: var(--tinta); width: 100%; transition: transform .08s; }
button.dex:hover { transform: translateY(-3px) rotate(-1deg); }
.dex-cuadro { display: block; width: 100%; height: 112px; position: relative; }
.dex-nacidos { position: absolute; top: 6px; right: 6px; font: 400 15px/1 var(--pixel); color: var(--lima); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; z-index: 1; }
.dex-cuadro .gato-hueco { position: absolute; inset: 0; }
.dex-q { position: absolute; top: 4px; right: 9px; font: 400 34px/1 var(--titulo); color: var(--tinta); rotate: 10deg; }
.dex b { font: 400 12px/1.25 var(--titulo); max-width: 100%; }
.dex small { font: 600 12px/1.25 var(--texto); color: var(--suave); }
.dex[data-estado="mio"] small { color: var(--tinta); }
/* Las recetas secretas de la Fusión-Ha: la pista (qué pareja la da) y, ya descubierta, su línea chistosa. */
.receta-dex .receta-pista { color: var(--tinta); font-weight: 700; }
.receta-dex .receta-chiste { font-style: italic; }
.dex-linea { font-style: italic; font-size: 1.05rem; margin: .4rem 0 .2rem; }
.fusion-fila .boton { flex: none; }
/* El Gatálogo con páginas: la segunda fila de pestañas, más chica; los sellos de rareza de cada tipo; los récords. */
.pestanas-2 { margin: 12px 0 14px; }
.pestanas-2 .pestana { font-size: 12px; padding: 8px 11px 9px; min-height: 36px; }
.dex-sellos { display: flex; gap: 4px; justify-content: center; }
/* Las que no ha tenido: un circulito gris vacío; las que sí, con su color (la común, crema con su punto de tinta). */
.dex-sellos i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--acero2); background: transparent; }
.dex-sellos i[data-si="true"] { border-color: var(--tinta); }
.dex-sellos i[data-si="true"][data-r="0"] { background: var(--crema); box-shadow: inset 0 0 0 2px var(--crema), inset 0 0 0 4px var(--tinta); }
.dex-sellos i[data-si="true"][data-r="1"] { background: var(--raro); }
.dex-sellos i[data-si="true"][data-r="2"] { background: var(--rojo); }
.dex-sellos i[data-si="true"][data-r="3"] { background: var(--legendario); }
.dex-sellos i[data-si="true"][data-r="4"] { background: var(--tinta); }
.dex-chips { justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.records { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 12px 0; }
.record { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; background: var(--papel); border: 3px solid var(--tinta); text-align: center; min-width: 0; }
.record:nth-child(2n) { rotate: 1deg; } .record:nth-child(2n+1) { rotate: -.8deg; }
.record-titulo { font: 400 13px/1.3 var(--titulo); }
.record-cuadro { position: relative; width: 100%; height: 196px; }
/* (el gato festeja con corazones que le suben ~45 px sobre la cabeza: abajo en su cuadro, para que no tapen el título;
   con 48 px el corazón todavía tocaba un título de dos renglones) */
.record-cuadro .gato-hueco { position: absolute; inset: 62px 4px 0; }
.record-cm { font: 400 30px/1 var(--pixel); color: var(--lima); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); }
/* LA MANADA: las metas de todos juntos. */
.metas-manada { display: grid; gap: 14px; }
.meta-manada { display: grid; gap: 8px; padding: 12px 14px; background: var(--papel); border: 3px solid var(--tinta); min-width: 0; }
.meta-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.meta-cabeza b { font: 400 14px/1.3 var(--titulo); }
.lcd-chico { font: 400 15px/1 var(--pixel); }
.meta-escalones { gap: 8px; align-items: center; flex-wrap: wrap; }
.meta-sello { font: 400 15px/1 var(--pixel); padding: 3px 7px 4px; border: 2px solid var(--tinta); border-radius: 8px; background: var(--crema); }
.meta-sello:nth-child(2n) { rotate: -2deg; } .meta-sello:nth-child(2n+1) { rotate: 1.5deg; }
.meta-sello[data-hecho="true"] { background: var(--lima); }
.logro-secreto { filter: grayscale(1); }
.logro-ico { width: 48px; height: 48px; flex: none; }
@media (max-width: 560px) { .dex-resumen { grid-template-columns: 1fr 1fr; } .dex-resumen .barra { grid-column: 1 / -1; grid-row: 2; } .dex-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Mochila y Taller ── */
.mochila-cabeza { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { appearance: none; cursor: pointer; font: 400 13px/1 var(--titulo); color: var(--tinta); background: var(--papel); border: 2px solid var(--tinta); padding: 9px 12px 10px; min-height: 36px; }
.filtro[aria-pressed="true"] { background: var(--lima); color: var(--tinta); rotate: -1.5deg; }
.mochila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; }
.inventario { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.casilla { appearance: none; cursor: pointer; position: relative; aspect-ratio: 1; padding: 0; display: grid; place-items: center; background: var(--crema); border: 3px solid var(--tinta); min-width: 0; transition: transform .1s; }
.casilla .obj { width: 76%; height: 76%; }
.casilla[data-r="3"] { background: var(--legendario); } .casilla[data-r="4"] { background: var(--tinta); }
.casilla:hover { transform: translateY(-2px) rotate(-2deg); }
.casilla[aria-pressed="true"] { transform: rotate(-3deg) translateY(-2px); }
.casilla-n { position: absolute; right: 4px; bottom: 3px; font: 400 15px/1 var(--pixel); color: var(--crema); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }
.casilla-e { position: absolute; left: 3px; top: 3px; font: 800 11px/1 var(--texto); background: var(--azul); color: var(--crema); padding: 3px 5px; border: 2px solid var(--tinta); border-radius: 6px; rotate: -8deg; }
.objeto-detalle { position: sticky; top: calc(var(--alto-hud) + var(--alto-cinta) + 24px); display: grid; gap: 12px; padding: 16px; background: var(--papel); border: 3px solid var(--tinta); }
.objeto-grande { height: 150px; display: grid; place-items: center; background: var(--crema); border: 3px solid var(--tinta); }
.objeto-detalle[data-r="3"] .objeto-grande { background: var(--legendario); } .objeto-detalle[data-r="4"] .objeto-grande { background: var(--tinta); }
.objeto-grande .obj { width: 130px; height: 130px; }
.objeto-texto { display: grid; gap: 8px; }
.objeto-nombre { font: 400 20px/1.15 var(--titulo); }
@media (max-width: 760px) { .mochila { grid-template-columns: minmax(0, 1fr); } .objeto-detalle { position: static; } }
.taller-titulo { display: flex; align-items: center; gap: 10px; font: 400 20px/1.1 var(--titulo); margin-top: 8px; rotate: -.8deg; transform-origin: left center; }
.taller-titulo .pix { width: 34px; height: 34px; }
.taller-titulo .suave { font: 600 14px/1 var(--texto); }
.recetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.receta { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--papel); border: 3px solid var(--tinta); }
.receta .boton { grid-column: 1 / -1; justify-self: end; }
.receta-texto { display: grid; gap: 4px; min-width: 0; }
.receta-texto > b { font: 400 15px/1.2 var(--titulo); }
/* Lo que falta: de tinta, subrayado con plumón rojo ondulado (la letra roja sobre el papel no se leía bien) */
.falta { color: var(--tinta); font-weight: 800; text-decoration: underline wavy var(--rojo) 2px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.ingredientes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.ingredientes li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 14px; }
.ingredientes .obj { width: 30px; height: 30px; }
.ingredientes b { font: 400 15px/1 var(--pixel); padding: 3px 6px 4px; background: var(--lima); border: 2px solid var(--tinta); border-radius: 6px; }
.ingredientes li.no b { background: var(--rojo); color: var(--crema); }

/* ── Habilidades ── */
.vidas { display: grid; gap: 18px; }
.vida { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; background: var(--papel); border: 3px solid var(--tinta); }
.vida-icono { rotate: -7deg; }
.vida-icono .pix { width: 56px; height: 56px; }
.vida-centro { display: grid; gap: 8px; min-width: 0; }
.vida-titulo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 400 20px/1 var(--titulo); }
.vida-titulo b { font-weight: 400; }
.vida-nivel { display: grid; gap: 4px; justify-items: center; }
/* En el celular: el dibujito arriba a la izquierda y su NIVEL debajo; lo demás, a la derecha */
@media (max-width: 560px) { .vida { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "i c" "n c"; align-items: start; gap: 10px 14px; padding: 14px 14px 16px; }
  .vida-icono { grid-area: i; justify-self: center; } .vida-nivel { grid-area: n; } .vida-centro { grid-area: c; }
  .vida-icono .pix { width: 44px; height: 44px; } .lcd.grande { font-size: 30px; -webkit-text-stroke-width: 6px; } }

/* ── El mundo ── */
.mapa-marco { position: relative; padding: 4px; background: var(--papel); border: 3px solid var(--tinta); }
.mapa { width: 100%; height: auto; aspect-ratio: 1000 / 600; display: block; }
.zonas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.zona { display: grid; gap: 8px; align-content: start; padding: 14px; background: var(--papel); border: 3px solid var(--tinta); }
.zona:nth-child(3n+2) { rotate: .6deg; } .zona:nth-child(3n) { rotate: -.5deg; }
.zona b { font: 400 15px/1.2 var(--titulo); }
.zona p { font-size: 15px; color: var(--suave); }
.trabajos { display: grid; gap: 14px; }
.trabajo { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 14px; background: var(--papel); border: 3px solid var(--tinta); }
.trabajo b { font: 400 15px/1.2 var(--titulo); }
.trabajo .gato-hueco { height: 84px; }
.trabajo-fin { display: flex; gap: 10px; align-items: center; }
.zona .boton { font-size: 13px; padding-inline: 10px; }
@media (max-width: 560px) { .trabajo { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; } .trabajo .gato-hueco { height: 74px; grid-row: span 2; } .trabajo > :last-child { grid-column: 2; justify-self: start; } }

/* ── Los mejores: una lista escrita a mano (tú, con plumón azul) ── */
.marcador { display: grid; gap: 12px; }
.marcador-titulo { font: 400 22px/1 var(--titulo); color: var(--crema); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); text-align: center; rotate: -1.5deg; }
.puntajes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.puntajes li { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px 13px;
  background: var(--linea-suave, none) 0 100% / 240px 8px repeat-x; }
.puntajes .p { font: 400 20px/1 var(--pixel); display: flex; align-items: center; gap: 4px; }
.puntajes .n { font: 600 18px/1.2 var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puntajes .v { font: 400 20px/1 var(--pixel); text-align: right; white-space: nowrap; }
.puntajes li[data-p="1"] .n { font: 400 22px/1.15 var(--titulo); }
.puntajes li[data-p="1"] .p, .puntajes li[data-p="1"] .v { color: var(--lima); -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; font-size: 30px; }
.puntajes li[data-p="2"] .n, .puntajes li[data-p="3"] .n { font: 400 18px/1.2 var(--titulo); }
.puntajes li[data-p="3"] .p { color: var(--rojo); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }
.puntajes li.yo { color: var(--crema); background: none; }
.puntajes li.yo .n { -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }
.puntajes .p .pix { width: 26px; height: 26px; rotate: -12deg; }
.puntajes .vacio { display: block; text-align: center; color: var(--suave); line-height: 1.6; padding: 30px 0; font: 400 18px/1.5 var(--titulo); }
.puntajes .vacio small { font: 500 14px/1.4 var(--texto); }
@media (max-width: 560px) { .puntajes li { grid-template-columns: 74px minmax(0, 1fr) auto; padding-inline: 4px; } .puntajes .n { font-size: 16px; }
  .puntajes li[data-p="1"] .p, .puntajes li[data-p="1"] .v { font-size: 20px; } .puntajes li[data-p="1"] .n { font-size: 18px; } .puntajes .p .pix { width: 20px; height: 20px; } }

/* ── Instructivo, cuenta, opciones, «más» ── */
.cmds { display: grid; gap: 6px; }
.cmd { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px 0 12px; background: var(--linea-suave, none) 0 100% / 240px 8px repeat-x; }
.cmd-que { position: relative; justify-self: start; }
.cmd-que > .nv { position: absolute; left: calc(100% - 14px); top: -11px; }
.cmd-donde { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--titulo); color: var(--tinta); background: var(--papel);
  border: 2px solid var(--tinta); padding: 6px 9px 7px; white-space: nowrap; }
.cmd .comando { justify-self: start; }
@media (max-width: 560px) { .cmd { grid-template-columns: minmax(0, 1fr); gap: 8px; } .cmd-donde { justify-self: start; } }
.cuentas { display: flex; flex-wrap: wrap; gap: 10px; }
.cuenta { display: inline-flex; gap: 8px; align-items: center; background: var(--papel); border: 2px solid var(--tinta); padding: 5px 5px 5px 12px; font: 700 14px/1 var(--texto); }
.codigo-caja { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.codigo { appearance: none; cursor: copy; font: 400 clamp(20px, 5.6vw, 34px)/1 var(--titulo); white-space: nowrap; color: var(--lima); background: var(--tinta); border: 3px solid var(--tinta);
  padding: 16px 20px 15px; user-select: all; letter-spacing: .03em; max-width: 100%; rotate: -1.2deg; transition: transform .08s; }
.codigo:active { transform: translate(3px, 4px); }
.nombre-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.nombre-linea { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
input[type="text"] { flex: 1 1 220px; min-width: 0; max-width: 460px; font: 600 18px/1.2 var(--texto); color: var(--tinta); background: var(--crema); border: 3px solid var(--tinta); border-radius: 8px;
  padding: 13px 14px 14px; min-height: 52px; caret-color: var(--rojo); }
input[type="text"]::placeholder { color: var(--acero2); }
input[type="text"]:focus { outline: 3px solid var(--lima); outline-offset: 3px; }
.opciones-lista { display: grid; gap: 8px; }
.opcion-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 14px; background: var(--linea-suave, none) 0 100% / 240px 8px repeat-x; }
.opcion-fila > span { display: flex; gap: 10px; align-items: center; font: 400 15px/1 var(--titulo); }
.mas { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mas-boton { appearance: none; cursor: pointer; display: grid; justify-items: center; gap: 10px; padding: 18px 8px 16px; background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta);
  font: 400 13px/1.2 var(--titulo); transition: transform .08s; }
.mas-boton:nth-child(3n+1) { rotate: -1.5deg; } .mas-boton:nth-child(3n+2) { rotate: 1deg; }
.mas-boton .pix { width: 44px; height: 44px; }
.mas-boton:hover .pix { transform: rotate(-10deg) scale(1.08); }
.mas-boton:active { transform: translate(3px, 4px); }
/* El renglón de los derechos (app.js PIE_DERECHOS): chiquito, en tinta, abajo del menú y de MÁS; el de la pantalla de título
   va en su cinta (.titulo-pie). Su liga a /terminos, subrayada a mano. */
.pie-derechos { margin: 14px 4px 0; font: 600 11px/1.45 var(--texto); letter-spacing: .02em; color: var(--tinta); rotate: -.6deg; text-wrap: balance; }
.pie-derechos a, .titulo-pie a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.pie-derechos a:hover, .titulo-pie a:hover { text-decoration-color: var(--rojo); }

/* ── Los gatos (los dibuja Spine encima de su hueco) ── */
.gato-hueco { position: relative; cursor: pointer; }
#capa-gatos { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none; }

/* ── Avisos: papelitos que caen arriba (con su golpe); la ventanita, sobre el cartón rayado con lápiz ── */
/* Los avisos van abajo (en la compu, a la derecha; en el celular, encima de la barra de abajo): arriba tapaban el título
   de la hoja de arriba, el de una ventanita abierta y su ×, y en el directo llegan seguido. No se tocan (no hacen nada):
   lo que queda debajo de uno se sigue pudiendo apretar. El más nuevo, hasta abajo. */
.avisos { position: fixed; z-index: 70; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); width: min(calc(100vw - 32px), 540px);
  display: flex; flex-direction: column-reverse; gap: 14px; pointer-events: none; }
@media (max-width: 960px) { .avisos { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); } }
html.en-titulo .avisos { top: 16px; bottom: auto; }
@media (min-width: 961px) { .avisos { left: auto; right: 24px; transform: none; width: min(calc(100vw - 48px), 420px); } }
.aviso { pointer-events: none; background: var(--crema); color: var(--tinta); border: 3px solid var(--tinta); padding: 13px 18px 14px; font: 700 16px/1.35 var(--texto);
  animation: entra .34s cubic-bezier(.2, 1.6, .4, 1) both; }
.aviso:nth-child(2n+1) { rotate: -.8deg; } .aviso:nth-child(2n) { rotate: .9deg; }
.aviso[data-color="lima"] { background: var(--lima); } .aviso[data-color="rojo"] { background: var(--rojo); color: var(--crema); }
.aviso[data-color="azul"] { background: var(--azul); color: var(--crema); } .aviso[data-color="tinta"] { background: var(--tinta); color: var(--lima); }
.aviso.fuera { animation: sale .2s cubic-bezier(.5, 0, .9, .4) both; }
/* En el celular, más chiquitos y a lo más dos a la vez (el tercero espera su turno escondido: se va solo) */
@media (max-width: 560px) { .avisos { gap: 10px; } .aviso { font-size: 14px; padding: 10px 14px 11px; } .aviso:nth-child(n+3) { display: none; } }
@keyframes entra { from { transform: translateY(-28px) scale(.7) rotate(-5deg); } to { transform: none; } }
@keyframes sale { to { transform: scale(0) rotate(8deg); } }
.modal { position: fixed; inset: 0; z-index: 40; background: var(--rayado-mano, none) 0 0 / 36px 36px repeat, var(--velo); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-caja { width: min(100%, 860px); }
.modal-caja .ventana-cuerpo { max-height: calc(100vh - 120px); overflow-y: auto; }
.modal-texto { font: 600 19px/1.4 var(--texto); }
/* ¡NIVEL 5!: una estampa lima con su golpe (sale y se va sola) */
/* (su ancho es el de su letrero: con left 50% se encogía a media pantalla y en el celular quedaba «¡NIVEL / 7!»; uno largo,
   como ¡EMBLEMA NUEVO!, se parte en dos renglones parejos) */
.nivel-sube { position: fixed; z-index: 75; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-3deg); display: grid; justify-items: center; gap: 8px; pointer-events: none;
  width: max-content; max-width: calc(100vw - 40px); text-align: center;
  background: var(--lima); border: 4px solid var(--tinta); padding: 22px clamp(18px, 4vw, 36px) 20px; animation: estampa-centro .34s cubic-bezier(.2, 1.5, .4, 1) both; }
.nivel-sube b { font: 400 clamp(28px, 7.6vw, 60px)/1.05 var(--titulo); text-wrap: balance; color: var(--crema); -webkit-text-stroke: 9px var(--tinta); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--tinta); }
.nivel-sube span { font: 700 16px/1.2 var(--texto); color: var(--tinta); text-wrap: balance; }
@keyframes estampa-centro { 0% { transform: translate(-50%, -50%) rotate(-3deg) scale(2.2); } 70% { transform: translate(-50%, -50%) rotate(-3deg) scale(.95); } 100% { transform: translate(-50%, -50%) rotate(-3deg); } }

/* ── Lo que saca otra persona en el mundo (lo pinta el gachapón: gachapon.js / mano-gacha.css) ── */
.mundial-caja { position: fixed; z-index: 44; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.mundial { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; width: min(calc(100vw - 32px), 400px); background: var(--crema); color: var(--tinta);
  border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--lima); padding: 10px 14px 10px 10px; animation: entra-lado .3s steps(5) both; }
.mundial[data-r="4"] { box-shadow: 6px 6px 0 var(--rojo), -4px -4px 0 var(--azul); }
.mundial.fuera { animation: sale .2s steps(3) both; }
.mundial-premio { height: 90px; background: var(--azul); border: 3px solid var(--tinta); display: grid; place-items: center; }
.mundial-premio .gato-hueco { width: 100%; height: 86px; }
.mundial-texto { display: grid; gap: 3px; min-width: 0; }
.mundial-texto small { font: 400 10px/1 var(--pixel); color: var(--rojo); }
.mundial-texto b { font: 400 15px/1.1 var(--pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mundial-texto span { font-size: 15px; }
.mundial-texto em { font: 400 10px/1 var(--pixel); font-style: normal; background: var(--lima); justify-self: start; padding: 4px 5px 3px; border: 2px solid var(--tinta); }
@keyframes entra-lado { from { transform: translateX(-120%); } to { transform: none; } }
@media (max-width: 960px) { .mundial-caja { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); left: 12px; } }

/* ── La pantalla de título: GATOPONS con letras gordas puestas a mano sobre el cartón, ¡A JUGAR! y el desfile ── */
.titulo { position: fixed; inset: 0; z-index: 41; overflow-y: auto; overflow-x: hidden; color: var(--tinta);
  background: var(--carton) var(--fondo-mano, url(alfombra.svg)) 0 0 / 440px 440px repeat; }
.titulo-marco { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 16px; padding: 22px 16px calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.titulo-arriba { display: grid; justify-items: center; position: relative; padding-top: 4px; }
/* (se encima poquito al letrero solo en pantallas grandes: en el celular, con letras chicas, tapaba la punta de la T y la O) */
.titulo-raiga { width: clamp(130px, 20vw, 210px); rotate: -6deg; filter: drop-shadow(4px 5px 0 var(--tinta)); position: relative; z-index: 2; margin-bottom: clamp(-14px, calc(10px - 1.6vw), -2px); }
.titulo-logo { position: relative; font: 400 clamp(34px, 11.4vw, 150px)/1 var(--titulo); color: var(--crema); letter-spacing: .015em; margin: 0;
  -webkit-text-stroke: .12em var(--tinta); paint-order: stroke fill; text-shadow: .05em .065em 0 var(--tinta); }
.titulo-logo .l:nth-child(3n+2) { color: var(--lima); }
.titulo-logo .l:nth-child(5) { color: var(--rojo); }
/* Con una hoja abierta (¿ya juegas?, tu nombre, ¿qué es esto?) el letrero se encoge: manda la hoja y cabe todo en la pantalla */
@media (min-width: 700px) {
  .titulo-marco:not([data-paso="start"]) .titulo-logo { font-size: clamp(34px, 7.4vw, 108px); }
  .titulo-marco:not([data-paso="start"]) .titulo-raiga { width: clamp(110px, 13vw, 160px); }
}
.titulo-corona { position: absolute; left: .06em; top: -.36em; width: .62em; rotate: -16deg; z-index: 1; }
.titulo-corona .pix { width: 100%; height: auto; }
.titulo-sub { font: 400 clamp(15px, 3vw, 20px)/1 var(--titulo); background: var(--lima); color: var(--tinta); padding: 9px 16px 10px; border: 3px solid var(--tinta); rotate: -2.5deg; margin-top: 14px; }
.titulo-centro { display: grid; align-content: center; justify-items: center; gap: 22px; width: 100%; }
.boton.start { width: auto; min-width: min(100%, 330px); min-height: 92px; font-size: clamp(30px, 6vw, 44px); padding: 16px 34px 18px; animation: mano-salta 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.boton.start .pix { width: 50px; height: 50px; }
.boton.start:focus-visible { outline-offset: 8px; }
@keyframes mano-salta { 0%, 64%, 100% { transform: none; } 74% { transform: translateY(-12px) rotate(-2.5deg); } 84% { transform: translateY(2px) rotate(1deg); } 92% { transform: none; } }
.titulo-ayuda { color: var(--tinta); font: 600 17px/1.4 var(--texto); max-width: 34ch; background: var(--papel); padding: 12px 18px 13px; border: 3px solid var(--tinta); rotate: 1.4deg; }
.titulo-cargando { font: 400 24px/1 var(--titulo); color: var(--lima); -webkit-text-stroke: 7px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); }
.puntos::after { content: ''; animation: puntos 1.2s steps(4) infinite; }
@keyframes puntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.titulo-ventana { width: min(calc(100% - 8px), 620px); text-align: left; }
.opciones { display: grid; gap: 16px; }
.opcion { appearance: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; padding: 14px 16px; position: relative;
  background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); font: 400 18px/1.15 var(--titulo); transition: transform .1s; }
.opcion[data-color="lima"] { background: var(--lima); } .opcion[data-color="crema"] { background: var(--crema); }
.opcion small { display: block; font: 500 15px/1.35 var(--texto); color: var(--suave); margin-top: 6px; }
.opcion[data-color="lima"] small { color: var(--tinta); }
.opcion .pix { width: 34px; height: 34px; rotate: -8deg; }
.opciones > .opcion:nth-child(2) { rotate: .8deg; } .opciones > .opcion:nth-child(3) { rotate: -.6deg; }
.opcion:hover, .opcion:focus-visible { transform: translate(-2px, -3px) rotate(-1deg); }
.opcion:hover { outline: none; }
.opcion:active { transform: translate(4px, 5px); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 18px; }
.pasos li::before { counter-increment: paso; content: counter(paso); width: 40px; height: 40px; display: grid; place-items: center; font: 400 20px/1 var(--pixel);
  background: var(--lima); border: 3px solid var(--tinta); border-radius: 50%; rotate: -8deg; }
.esperando { display: flex; gap: 12px; align-items: center; background: var(--papel); border: 3px solid var(--tinta); padding: 12px 14px; }
.explica { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.explica li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.explica li > .pix { rotate: -6deg; }
.explica b { font: 400 15px/1.3 var(--titulo); }
.desfile { position: relative; justify-self: stretch; margin-inline: -16px; height: 132px; overflow: hidden; background: var(--piso-mano, none) 0 100% / 360px 30px repeat-x; }
.desfile-gato { position: absolute; bottom: 9px; left: 0; width: 110px; height: 110px; animation: desfile 22s linear infinite; animation-delay: calc(var(--i) * -3.7s); }
.desfile-gato .gato-hueco { width: 100%; height: 100%; }
@keyframes desfile { from { left: -140px; } to { left: calc(100% + 20px); } }
.titulo-pie { display: grid; gap: 3px; font: 600 13px/1.4 var(--texto); color: var(--crema); background: var(--tinta); padding: 9px 16px 10px; max-width: 100%; rotate: -1deg; }
@media (max-width: 480px) { .boton.start { font-size: 30px; min-width: 260px; } }

/* ── El escenario del gachapón (el gran momento) ── */
#escenario { position: fixed; inset: 0; z-index: 42; overflow: hidden; cursor: pointer; }
#escenario-frente { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#escenario-frente .boton, #escenario-frente .esc-botones { pointer-events: auto; }
.esc-fondo, .esc-rayos { position: absolute; inset: 0; width: 100%; height: 100%; }
.esc-giro { animation: gira 30s steps(120) infinite; transform-origin: 0 0; }
@keyframes gira { to { transform: rotate(360deg); } }
.esc-confeti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.esc-centro { position: absolute; left: 50%; top: 40%; width: min(62vw, 38vh); aspect-ratio: 1; transform: translate(-50%, -50%); }
.esc-centro.ancho { width: min(calc(100vw - 28px), 920px); aspect-ratio: auto; top: 50%; }
.esc-capsula, .esc-premio { position: absolute; inset: 0; }
.esc-capsula .cap-svg { width: 100%; height: 100%; overflow: visible; }
.cap-color { fill: var(--acero); transition: fill .08s steps(1); }
[data-color="crema"] .cap-color { fill: var(--crema); } [data-color="azul"] .cap-color { fill: var(--azul); } [data-color="rojo"] .cap-color { fill: var(--rojo); }
[data-color="lima"] .cap-color { fill: var(--lima); } [data-color="tinta"] .cap-color { fill: var(--tinta); }
[data-color="tinta"] .cap-svg { filter: drop-shadow(5px 0 0 var(--rojo)) drop-shadow(-5px 0 0 var(--azul)); animation: falla .3s steps(2) infinite; }
@keyframes falla { 50% { transform: translateX(3px) skewX(-4deg); } }
.esc-capsula.cae { animation: cae .56s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes cae { 0% { transform: translateY(-120vh) rotate(-30deg); } 72% { transform: translateY(3%) rotate(5deg) scale(1.05, .93); } 100% { transform: none; } }
.esc-capsula.sacude { animation: sacude .38s steps(6); }
@keyframes sacude { 0% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(13deg); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
.cap-arriba, .cap-abajo { transform-box: fill-box; transform-origin: center; }
.esc-capsula.abre .cap-arriba { animation: vuela-arriba .5s cubic-bezier(.4, 0, .9, .5) both; }
.esc-capsula.abre .cap-abajo { animation: vuela-abajo .5s cubic-bezier(.4, 0, .9, .5) both; }
.esc-capsula.abre .cap-junta { display: none; }
@keyframes vuela-arriba { to { transform: translate(-170%, -480%) rotate(-80deg); visibility: hidden; } }
@keyframes vuela-abajo { to { transform: translate(150%, 520%) rotate(70deg); visibility: hidden; } }
.esc-premio { display: grid; place-items: center; }
.esc-premio .gato-hueco { width: 100%; height: 100%; }
.esc-premio.sale { animation: sale-premio .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes sale-premio { from { transform: scale(.15); } to { transform: none; } }
.premio-objeto { width: 70%; height: 70%; }
.esc-titulo { position: absolute; left: 0; right: 0; top: calc(16px + env(safe-area-inset-top, 0px)); text-align: center; font: 400 clamp(30px, 6vw, 40px)/1 var(--pixel); color: var(--lima);
  text-shadow: .1em .1em 0 var(--rojo); padding: 0 16px; }
.esc-contador { position: absolute; left: 16px; top: calc(70px + env(safe-area-inset-top, 0px)); font: 400 20px/1 var(--pixel); color: var(--lima); background: var(--tinta); }
.esc-contador:not(:empty) { padding: 9px 10px 8px; border: 3px solid var(--crema); }
.esc-saltar { position: absolute; right: 16px; top: calc(70px + env(safe-area-inset-top, 0px)); }
.esc-cartel { position: absolute; left: 0; right: 0; top: calc(40% + min(31vw, 19vh) + 4px); display: grid; justify-items: center; padding: 0 16px; }
.cartel { display: grid; justify-items: center; gap: 6px; text-align: center; animation: golpe .32s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes golpe { from { transform: scale(.3) rotate(-6deg); } to { transform: none; } }
.cartel-exclama { font: 400 15px/1 var(--pixel); color: var(--crema); background: var(--rojo); border: 3px solid var(--tinta); padding: 6px 10px 5px; transform: rotate(-3deg); }
.cartel-rareza { --rc: var(--crema); font: 400 clamp(40px, 10vw, 80px)/1 var(--pixel); color: var(--rc);
  text-shadow: .05em 0 0 var(--tinta), -.05em 0 0 var(--tinta), 0 .05em 0 var(--tinta), 0 -.05em 0 var(--tinta), .1em .1em 0 var(--tinta); }
.cartel[data-r="1"] .cartel-rareza { --rc: var(--raro); } .cartel[data-r="2"] .cartel-rareza { --rc: var(--rojo); } .cartel[data-r="3"] .cartel-rareza { --rc: var(--legendario); }
.cartel[data-r="4"] .cartel-rareza { --rc: var(--lima); text-shadow: .05em 0 0 var(--tinta), -.05em 0 0 var(--tinta), 0 .05em 0 var(--tinta), 0 -.05em 0 var(--tinta), .1em 0 0 var(--rojo), -.1em 0 0 var(--azul); }
.cartel-nombre { font: 400 30px/1 var(--pixel); color: var(--crema); background: var(--tinta); border: 3px solid var(--crema); padding: 9px 14px 7px; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.cartel-linea { display: flex; gap: 8px; align-items: center; font: 700 17px/1.2 var(--texto); color: var(--tinta); background: var(--crema); border: 3px solid var(--tinta); padding: 5px 10px; }
.esc-sellos { position: absolute; inset: 0; }
.sello-nuevo { position: absolute; left: min(calc(50% + min(20vw, 13vh)), calc(100% - 140px)); top: calc(40% - min(18vw, 11vh)); width: 128px; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--rojo); transform: rotate(12deg); animation: pop .32s cubic-bezier(.2, 1.6, .4, 1) both;
  clip-path: polygon(50% 0, 59% 18%, 79% 9%, 76% 30%, 97% 33%, 82% 49%, 97% 66%, 76% 70%, 79% 91%, 59% 82%, 50% 100%, 41% 82%, 21% 91%, 24% 70%, 3% 66%, 18% 49%, 3% 33%, 24% 30%, 21% 9%, 41% 18%); }
.sello-nuevo span { font: 400 20px/1 var(--pixel); color: var(--crema); }
@keyframes pop { from { transform: rotate(12deg) scale(0); } to { transform: rotate(12deg) scale(1); } }
.sello-primero { position: absolute; left: 50%; top: 15%; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); text-align: center;
  background: var(--lima); color: var(--tinta); border: 6px solid var(--tinta); box-shadow: inset 0 0 0 4px var(--lima), inset 0 0 0 8px var(--tinta), 10px 10px 0 var(--rojo);
  padding: 18px 24px; transform: translate(-50%, -50%) rotate(-7deg); animation: estampa .3s cubic-bezier(.2, 1.5, .4, 1) both; }
.sello-primero b { font: 400 clamp(20px, 6vw, 50px)/1.05 var(--pixel); }
.sello-primero small { font: 700 15px/1.2 var(--texto); }
@keyframes estampa { 0% { transform: translate(-50%, -50%) rotate(-7deg) scale(2.6); } 70% { transform: translate(-50%, -50%) rotate(-7deg) scale(.94); } 100% { transform: translate(-50%, -50%) rotate(-7deg); } }
.esc-botones { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(calc(100vw - 32px), 620px);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.esc-botones .boton.gigante { min-height: 76px; font-size: 20px; }
.esc-destello { position: absolute; inset: 0; background: var(--crema); animation: destello .24s steps(2) both; }
@keyframes destello { to { visibility: hidden; } }
.tiembla { animation: tiembla .3s steps(6); }
@keyframes tiembla { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, -3px); } 80% { transform: translate(4px, 5px); } }
.esc-bandeja { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.celda { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 6px; background: var(--papel); border: 3px solid var(--tinta); min-width: 0; aspect-ratio: 1 / 1.18; }
.celda.cae { animation: cae-celda .4s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes cae-celda { from { transform: translateY(-60vh); } to { transform: none; } }
.celda-cap { flex: 1; min-height: 0; width: 76%; display: grid; place-items: center; }
.celda-cap .cap-svg { width: 100%; height: 100%; overflow: visible; }
.celda.abierta .celda-cap { display: none; }
.celda-premio { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; animation: sale-premio .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.celda-premio .gato-hueco { width: 100%; height: 100%; }
.celda-premio .premio-chico { width: 80%; height: 80%; }
.celda-nombre { font: 400 10px/1.2 var(--pixel); color: var(--crema); background: var(--tinta); padding: 4px 6px 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celda[data-r="1"].abierta { border-color: var(--raro); box-shadow: 0 0 0 3px var(--raro); } .celda[data-r="2"].abierta { border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo); }
.celda[data-r="3"].abierta { border-color: var(--legendario); box-shadow: 0 0 0 4px var(--legendario); } .celda[data-r="4"].abierta { border-color: var(--lima); box-shadow: 5px 0 0 var(--rojo), -5px 0 0 var(--azul); }
.celda-sello { position: absolute; top: -10px; right: -6px; font: 400 10px/1 var(--pixel); background: var(--lima); color: var(--tinta); border: 2px solid var(--tinta); padding: 4px 5px 3px; transform: rotate(8deg); }
@media (max-width: 700px) { .esc-bandeja { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .celda { aspect-ratio: 1 / 1.1; } .esc-centro.ancho { top: 50%; } }
@media (max-width: 700px) and (max-height: 760px) { .esc-bandeja { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Movimiento «poquito» (Mi cuenta › Opciones): sin sacudidas ni cosas que corren ── */
html[data-movimiento="poco"] .cinta-pista, html[data-movimiento="poco"] .esc-giro, html[data-movimiento="poco"] .desfile-gato,
html[data-movimiento="poco"] .tazo-disco::after, html[data-movimiento="poco"] .tiembla, html[data-movimiento="poco"] .maquina *,
html[data-movimiento="poco"] .boton.start, html[data-movimiento="poco"] .dialogo-flecha, html[data-movimiento="poco"] .dialogo-ok { animation: none !important; }
html[data-movimiento="poco"] .cinta { overflow-x: auto; }
.esperando b { font: 400 15px/1.3 var(--titulo); }

/* ── Inicio: un reto a duelo resalta ── */
.vivo-reto { background: var(--lima); }

/* ── EN VIVO: tu gato en el directo (la tele) y las gracias (teclas de plumón, cada una con su dibujito) ── */
.vivo-yo { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 26px; align-items: center; }
.tele.chica { padding: 10px 10px 8px; border-radius: 24px; }
.tele.chica .tele-pantalla { height: 168px; }
.tele.chica .tele-pantalla .gato-hueco { inset: 34px 10px 6px; }
.vivo-yo-texto { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; padding: 8px 4px 6px; }
.pad { --c: var(--rojo); appearance: none; cursor: pointer; position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-width: 0; min-height: 108px;
  padding: 14px 8px 12px; border: 3px solid var(--tinta); background: var(--c); color: var(--tinta); font: 400 16px/1.1 var(--titulo); letter-spacing: .01em; transition: transform .08s; paint-order: stroke fill; }
.pad[data-color="rojo"], .pad[data-color="azul"] { color: var(--crema); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }
.pad[data-color="azul"] { --c: var(--azul); } .pad[data-color="lima"] { --c: var(--lima); } .pad[data-color="crema"] { --c: var(--crema); }
.pad .pix { width: 42px; height: 42px; rotate: -8deg; transition: transform .14s cubic-bezier(.2, 1.6, .4, 1); }
.pads > .pad:nth-child(4n+1) { rotate: -1.4deg; } .pads > .pad:nth-child(4n+2) { rotate: 1deg; } .pads > .pad:nth-child(4n+3) { rotate: -.6deg; } .pads > .pad:nth-child(4n) { rotate: 1.6deg; }
.pad:hover { transform: translate(-1px, -3px) rotate(-1.5deg); }
.pad:hover .pix { transform: rotate(-12deg) scale(1.12); }
.pad:active { transform: translate(4px, 5px); }
.pad-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 3px; }
.pad[disabled] { --c: var(--acero); color: var(--tinta); -webkit-text-stroke: 4px var(--acero); cursor: not-allowed; transform: none; }
.pad[disabled] .pix { filter: grayscale(1); transform: none; }
/* Lo cerrado por nivel: su etiqueta de tinta con candado y el nivel, pegada en la esquina */
.cerrado { position: relative; }
.nv { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--pixel); color: var(--lima); background: var(--tinta); border: 2px solid var(--tinta); border-radius: 7px;
  padding: 4px 7px 4px 5px; rotate: 5deg; white-space: nowrap; -webkit-text-stroke: 0; }
.nv .pix { width: 16px; height: 16px; rotate: -8deg; }
.boton .nv, .pad .nv { position: absolute; top: -13px; right: -9px; z-index: 3; }
.gente { display: flex; flex-wrap: wrap; gap: 8px; }
.botonera.chica { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 16px; }
.bomba-fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 640px) {
  .vivo-yo { grid-template-columns: minmax(0, 1fr); }
  .tele.chica { width: 100%; max-width: 260px; justify-self: center; }
  .pads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .pad { min-height: 92px; font-size: 15px; }
}

/* ── La feria: duelos, batalla campal, la ruleta y la maquinita ── */
.feria-cabeza { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.feria-cabeza .tienes, .tienes { font: 400 15px/1 var(--titulo); }
.montos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.montos-etiqueta { font: 400 13px/1 var(--titulo); color: var(--suave); margin-right: 4px; }
.montos .filtro { min-width: 56px; font: 400 15px/1 var(--pixel); }
.feria-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 34px; align-items: start; }
.reto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 16px; background: var(--lima); border: 3px solid var(--tinta);
  animation: golpe .32s cubic-bezier(.2, 1.6, .4, 1) both; }
.reto .fila { grid-column: 1 / -1; }
.reto-texto { display: grid; gap: 6px; min-width: 0; }
.reto-texto > b { font: 400 20px/1.15 var(--titulo); }
.reto-espera { display: flex; gap: 12px; align-items: center; background: var(--papel); border: 3px solid var(--tinta); padding: 12px 14px; }
.duelo-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.campal-abierta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.campal-abierta .dato .lcd { font-size: 20px; }
/* La ruleta: la tira de casillas pasa por una ventanita de tinta; la marca, un palito con sus dos picos */
.ruleta-marco { position: relative; min-width: 0; padding: 7px; background: var(--tinta); border: 3px solid var(--tinta); }
.ruleta-ventana { position: relative; height: 70px; overflow: hidden; border-radius: 6px; }
.ruleta-tira { display: flex; height: 100%; will-change: transform; }
.ruleta-tira i { flex: none; width: 44px; height: 100%; display: grid; place-items: center; background-color: var(--rojo); background-image: var(--raya-v, none); background-position: 100% 0; background-size: 6px 100%; background-repeat: no-repeat; }
.ruleta-tira i[data-c="1"] { background-color: var(--azul); } .ruleta-tira i[data-c="2"] { background-color: var(--lima); }
.ruleta-tira i .pix { rotate: -10deg; }
.ruleta-marca { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 8px; margin-left: -4px; background: var(--crema); border: 2px solid var(--tinta); border-radius: 4px; z-index: 2; }
.ruleta-marca::before, .ruleta-marca::after { content: ''; position: absolute; left: 50%; width: 28px; height: 16px; margin-left: -14px; background: var(--tinta); }
.ruleta-marca::before { top: -6px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ruleta-marca::after { bottom: -6px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ruleta-estado { font: 400 20px/1.1 var(--titulo); text-align: center; }
.ruleta-botes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bote { font: 400 13px/1 var(--titulo); padding: 6px 10px 7px; border: 2px solid var(--tinta); background: var(--rojo); color: var(--crema); -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; }
.bote[data-color="azul"] { background: var(--azul); } .bote[data-color="lima"] { background: var(--lima); color: var(--tinta); -webkit-text-stroke: 0; }
.bote b { font: 400 15px/1 var(--pixel); }
.ruleta-botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ruleta-botones .boton { padding-inline: 6px; }
/* La maquinita: un mueble rojo de plumón, tres rodillos de papel y su palanca */
.maquinita { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; align-items: center; width: 100%; max-width: 440px; justify-self: center; }
.maquinita-caja { display: grid; gap: 12px; padding: 14px; background: var(--rojo); border: 4px solid var(--tinta); rotate: -.8deg; }
.maquinita-titulo { font: 400 15px/1 var(--titulo); text-align: center; color: var(--lima); background: var(--tinta); padding: 10px 6px 11px; letter-spacing: .03em; rotate: 1deg; }
.rodillos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 2px; }
.rodillo { position: relative; height: 100px; background: var(--crema); border: 3px solid var(--tinta); }
.rodillo-ventana { position: absolute; inset: 3px; overflow: hidden; display: grid; place-items: center; border-radius: 6px; }
.rodillo .pix { width: 60px; height: 60px; }
.rodillo.gira .rodillo-ventana { place-items: start center; }
.rodillo-tira { display: grid; animation: rodar .42s steps(12) infinite; }
.rodillo:nth-child(2) .rodillo-tira { animation-duration: .36s; animation-delay: -.13s; }
.rodillo:nth-child(3) .rodillo-tira { animation-duration: .48s; animation-delay: -.29s; }
.rodillo-tira .pix { margin: 18px 0; }
@keyframes rodar { to { transform: translateY(-50%); } }
.rodillo.para .rodillo-ventana > .pix { animation: clunk .22s steps(3) both; }
@keyframes clunk { 0% { transform: translateY(-26px); } 60% { transform: translateY(6px); } 100% { transform: none; } }
.maquinita-pie { font: 400 17px/1.1 var(--titulo); text-align: center; color: var(--crema); padding: 2px 6px 4px; -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--tinta); }
.maquinita-pie.gano { color: var(--lima); animation: pie-gano .5s steps(1) 4; }
@keyframes pie-gano { 50% { color: var(--crema); } }
.palanca { appearance: none; cursor: pointer; border: 0; background: none; padding: 0; position: relative; width: 46px; height: 200px; }
.palanca::before { content: ''; position: absolute; left: 50%; top: 24px; bottom: 34px; width: 12px; margin-left: -6px; background: var(--acero); border: 3px solid var(--tinta); border-radius: 6px; rotate: 2deg; }
.palanca::after { content: ''; position: absolute; left: 3px; right: 0; bottom: 0; height: 40px; background: var(--tinta); border: 3px solid var(--tinta); border-radius: 10px 10px 6px 6px; }
.palanca span { position: absolute; z-index: 1; left: 50%; top: 0; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; background: var(--rojo); border: 4px solid var(--tinta); transition: top .14s cubic-bezier(.3, 1.4, .5, 1); }
.palanca span::after { content: ''; position: absolute; left: 8px; top: 7px; width: 9px; height: 6px; border-radius: 50%; background: var(--crema); rotate: -30deg; }
.palanca:hover span { top: 5px; }
.palanca:active span, .palanca.jalada span { top: 118px; }
.palanca[disabled] { cursor: default; }
.palanca[disabled]:not(.jalada) span { background: var(--acero); }
.maquinita + .boton { justify-self: center; }
.pagos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 14px; background: var(--tinta); color: var(--crema); font: 400 15px/1 var(--pixel); }
.pago { display: flex; align-items: center; gap: 0; min-width: 0; }
.pago b { margin-left: auto; font-weight: 400; color: var(--lima); }
@media (max-width: 560px) { .campal-abierta { grid-template-columns: 1fr 1fr; } .ruleta-botones .boton { font-size: 15px; } .pagos { gap: 8px 10px; padding: 10px 10px; } }

/* ── La tiendita ── */
.tienda-cabeza { display: flex; gap: 16px; align-items: center; }
.tienda-cabeza .pix { width: 64px; height: 64px; rotate: -7deg; }
.tienda-letrero { font: 400 32px/1 var(--titulo); color: var(--rojo); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); margin-bottom: 8px; rotate: -2deg; transform-origin: left center; }
.ofertas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.oferta { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--papel); border: 3px solid var(--tinta); }
.ofertas > .oferta:nth-child(3n+2) { rotate: .7deg; } .ofertas > .oferta:nth-child(3n) { rotate: -.5deg; }
.oferta .casilla { cursor: default; }
.oferta .casilla:hover { transform: none; }
.oferta .boton { grid-column: 1 / -1; justify-self: end; }
.oferta-texto { display: grid; gap: 6px; min-width: 0; }
.oferta-texto > b { font: 400 15px/1.2 var(--titulo); }
.oferta-texto .fila { gap: 6px; }
.clases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.clases li { display: grid; grid-template-columns: auto 104px minmax(0, 1fr); gap: 12px; align-items: center; }
.clases li .chip { justify-self: start; }
@media (max-width: 460px) { .clases li { grid-template-columns: auto minmax(0, 1fr); } .clases li > span:last-child { grid-column: 1 / -1; } }

/* ── Logros y tu título ── */
.titulo-actual { font: 400 30px/1.15 var(--titulo); color: var(--rojo); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); overflow-wrap: anywhere; }
.logros-resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; font: 400 15px/1 var(--titulo); }
.logros-resumen b { font: 400 20px/1 var(--pixel); }
.logros { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.logro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--papel); border: 3px solid var(--tinta); }
.logro[data-tengo="true"] { background: var(--lima); }
.logros > .logro:nth-child(3n+2) { rotate: .5deg; } .logros > .logro:nth-child(4n) { rotate: -.6deg; }
.logro[data-tengo="false"] > .pix { filter: grayscale(1); }
.logro-texto { display: grid; gap: 6px; min-width: 0; }
.logro-texto b { font: 400 15px/1.2 var(--titulo); }
.logro-texto .chico { font-weight: 600; }

/* ── El Gatálogo de cerca y el premio de cada familia ── */
.dex-premio { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(90px, 180px); gap: 12px; align-items: center; background: var(--papel); border: 3px solid var(--tinta); padding: 10px 12px; font-size: 15px; }
.dex-detalle { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.dex-grande { position: relative; height: 290px; background: var(--papel); border: 3px solid var(--tinta); }
.dex-grande[data-estado="nadie"] { background: var(--acero); }
.dex-grande .gato-hueco { position: absolute; inset: 30px 16px 10px; }
.dex-grande .dex-q { font-size: 44px; top: 10px; right: 14px; }
.dex-datos { display: grid; gap: 12px; min-width: 0; }
.clases-elegir { display: grid; gap: 14px; }
.opcion[disabled] { background: var(--acero); cursor: default; }
.opcion[disabled]:hover { transform: none; }
@media (max-width: 640px) {
  .dex-detalle { grid-template-columns: minmax(0, 1fr); }
  .dex-grande { height: 220px; }
  .dex-premio { grid-template-columns: auto minmax(0, 1fr); }
  .dex-premio .barra { grid-column: 1 / -1; }
}

/* ── Movimiento «poquito» en lo nuevo: los rodillos no corren, nada parpadea ── */
html[data-movimiento="poco"] .rodillo-tira, html[data-movimiento="poco"] .rodillo.para .pix, html[data-movimiento="poco"] .reto,
html[data-movimiento="poco"] .maquinita-pie.gano, html[data-movimiento="poco"] .tele-canal.en-vivo::before, html[data-movimiento="poco"] .aviso { animation: none !important; }

/* ── El directo (Twitch) arriba de EN VIVO y LA FERIA: no se repinta con la vista (el video sigue) ── */
.columna { display: grid; gap: 34px; min-width: 0; }
.directo { display: grid; min-width: 0; }
.directo[hidden] { display: none; }
.directo-ventana .ventana-cuerpo { gap: 10px; padding: 18px 14px 14px; }
/* En el escritorio, a lo más 46 % del alto de la ventana (se ven el video y los botones a la vez); siempre 16:9. */
.directo-video { position: relative; width: min(100%, calc(46vh * 16 / 9)); aspect-ratio: 16 / 9; justify-self: center; background: var(--tinta); border: 4px solid var(--tinta); border-radius: 10px; overflow: hidden; }
@media (max-width: 960px) { .directo-video { width: 100%; } }
.directo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.directo-ventana a { color: var(--azul); font-weight: 700; }
.directo .directo-mostrar { justify-self: start; }

/* ── EN VIVO: los botones de cada actividad, más trucos y la consola ── */
.vivo-act-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
@media (max-width: 560px) { .vivo-act { grid-template-columns: auto minmax(0, 1fr); } .vivo-act-botones { grid-column: 1 / -1; justify-content: flex-start; } }
.trucos { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.truco { position: relative; display: grid; gap: 10px; align-content: start; padding: 16px; background: var(--papel); border: 3px solid var(--tinta); min-width: 0; }
.trucos > .truco:nth-child(3n+2) { rotate: .6deg; } .trucos > .truco:nth-child(3n) { rotate: -.5deg; }
.truco > b { font: 400 16px/1.2 var(--titulo); padding-right: 64px; }
.truco > .nv { position: absolute; top: -12px; right: 12px; }
.truco .fila { gap: 10px; }
.truco .nombre-linea input[type="text"] { flex-basis: 150px; font-size: 16px; min-height: 46px; padding: 10px 11px; }
.resortera .boton { min-width: 64px; }
.resortera .flecha { display: block; }
/* LA CONSOLA: una libreta (renglones y su margen rojo): lo que escribes y lo que te contesta el juego */
.consola { position: relative; display: grid; gap: 14px; min-width: 0; padding: 18px 18px 16px 52px; background: var(--papel); border: 3px solid var(--tinta); }
/* los renglones y el margen rojo (en un ::after: el papel de la pieza lo pinta mano.js, detrás) */
.consola::after { content: ''; position: absolute; inset: 8px 10px; z-index: -1; pointer-events: none;
  background-image: var(--margen-mano, none), var(--renglon-mano, none); background-position: 20px 0, 0 4px; background-size: 6px 200px, 240px 36px; background-repeat: repeat-y, repeat; }
.consola-hola { margin: 0; font: 600 16px/1.4 var(--texto); color: var(--suave); }
.consola-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.consola-log li { display: grid; gap: 4px; overflow-wrap: anywhere; }
.consola-yo { display: flex; gap: 8px; align-items: center; font: 400 13px/1 var(--titulo); }
.consola-yo b { font: 700 15px/1 var(--texto); color: var(--lima); background: var(--tinta); padding: 5px 9px 6px; border-radius: 6px; rotate: -1deg; }
.consola-log .respuesta { display: flex; gap: 8px; align-items: flex-start; padding-left: 4px; font: 600 15px/1.4 var(--texto); color: var(--tinta); }
.consola-log .respuesta .pix { margin-top: 1px; }
/* (lo que no se pudo: la ✗ roja; la letra, de tinta: roja sobre el papel no se leía bien) */
.consola-log li.mal .respuesta { color: var(--tinta); }
.consola-log li.espera .respuesta::after { content: '…'; animation: parpadea 1.2s steps(1) infinite; }
.consola-linea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.consola-linea label { display: flex; gap: 6px; align-items: center; white-space: nowrap; font: 400 15px/1 var(--titulo); }
.consola-linea input[type="text"] { max-width: none; min-height: 48px; font: 700 17px/1.2 var(--texto); }
/* En el celular: «TÚ:» y lo que escribes en el mismo renglón (el campo se quedaba de 110 px junto a ¡MANDAR!); el botón, abajo */
@media (max-width: 560px) { .consola { padding-left: 40px; } .consola::after { background-position: 10px 0, 0 4px; } .consola-linea { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .consola-linea .boton { grid-column: 1 / -1; justify-self: end; } }
html[data-movimiento="poco"] .consola-log li.espera .respuesta::after { animation: none; }

/* ── Gatannya (GATOPONS-DISENO § 19): la tira de pestañas de una sección (GATANNYA, MI CUENTA, cuando una parte nueva les
   pone pestañas) y la de la carta de un gato (CARTA · FICHA · ÁRBOL…) ── */
.pestanas-seccion { margin: 0 0 22px; }
.carta-pestanas { margin-bottom: 14px; }
.carta-zona { scroll-margin-top: calc(var(--alto-hud) + var(--alto-cinta) + 12px); }

/* ── La llegada por un gatajo (§ 19.3): la página sola, sin menú ni cinta, sobre el cartón; abajo, la barra con
   ¡A JUGAR!. La llena gatajos.js (S1) y la viste mano-19.css. ── */
html.en-llegada .hud, html.en-llegada .cinta, html.en-llegada .escritorio, html.en-llegada .barra-abajo { display: none; }
html.en-llegada body { overflow: hidden; }
/* (una ventana que se abra en la llegada —compartir, ¿seguro?— va encima de ella) */
html.en-llegada .modal { z-index: 44; }
.llegada { position: fixed; inset: 0; z-index: 41; overflow-y: auto; overflow-x: hidden; color: var(--tinta);
  background: var(--carton) var(--fondo-mano, url(alfombra.svg)) 0 0 / 440px 440px repeat; }
.llegada-marco { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; justify-items: center; gap: 22px; padding: 18px 16px 0; }
.llegada-arriba { justify-self: start; display: flex; align-items: center; gap: 10px; }
.llegada-arriba img { height: 46px; width: auto; display: block; rotate: -5deg; filter: drop-shadow(3px 4px 0 var(--tinta)); }
.llegada-arriba span { font: 400 24px/1 var(--titulo); color: var(--lima); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta); rotate: -3deg; display: inline-block; }
.llegada-centro { width: min(100%, 720px); display: grid; gap: 22px; align-content: start; }
.llegada-gatajo { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: center; }
.llegada-retrato { height: 200px; position: relative; }
.llegada-retrato .gato-hueco { width: 100%; height: 100%; }
.llegada-texto p { margin: 0 0 10px; }
.llegada-etiqueta { font: 400 15px/1 var(--titulo); letter-spacing: .04em; }
.llegada-codigo { font: 400 40px/1 var(--pixel); color: var(--lima); -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--tinta);
  letter-spacing: .06em; white-space: nowrap; rotate: -2deg; transform-origin: left center; }
.llegada-barra { position: sticky; bottom: 0; justify-self: stretch; margin-inline: -16px; display: flex; gap: 12px 18px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--tinta); z-index: 2; }
/* (su orilla de arriba, festoneada como la barra de abajo del celular: no una tira lisa) */
.llegada-barra::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 10px; pointer-events: none; background: var(--tinta);
  -webkit-mask: radial-gradient(circle at 8px 10px, #000 7px, transparent 7.5px) 0 0 / 22px 10px repeat-x; mask: radial-gradient(circle at 8px 10px, #000 7px, transparent 7.5px) 0 0 / 22px 10px repeat-x; }
.llegada-barra p { margin: 0; font: 400 17px/1.2 var(--titulo); color: var(--crema); text-align: center; }
@media (max-width: 560px) {
  .llegada-gatajo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .llegada-retrato { width: 180px; height: 180px; }
  .llegada-codigo { font-size: 30px; -webkit-text-stroke-width: 6px; transform-origin: center; }
  .llegada-barra p { font-size: 15px; }
}

/* Restore independent action colours; the former electric blue is a quieter slate blue. */
.rareza[data-r="1"] { background: var(--raro); }
.rareza[data-r="3"] { background: var(--legendario); color: var(--tinta); }