/* ============================================================
   LOTERÍA MEXICANA — hoja de estilo única · edición «Feria de Noche»
   Mobile-first · sin filtros caros · sin animaciones en bucle
   (salvo dos latidos cortos ya validados: carta cantada y botón listo)
   ============================================================ */

:root{
  --rojo:#b0143a;
  --rojo-claro:#d0264a;
  --rojo-hondo:#8b0e2c;
  --vino:#4d0b22;
  --crema:#fdf8ec;
  --crema-2:#f6ecd6;
  --crema-3:#efe2c4;
  --borde:#e2d2a8;
  --tinta:#3a2419;
  --tinta-suave:#7d6754;
  --oro:#f5c542;
  --oro-brillo:#ffe08a;
  --oro-hondo:#d99a15;
  --oro-sombra:#9c6a08;
  --verde:#1f9d6b;
  --verde-hondo:#137a52;
  --morado:#7b3fc4;
  --morado-hondo:#57219a;
  --naranja:#f08a1e;
  --naranja-hondo:#d0631a;
  --teal:#2fa08a;
  --navy:#1f3a63;
  --noche:#12202b;
  --sombra:0 8px 22px rgba(0,0,0,.32);
  --sombra-alta:0 18px 44px rgba(0,0,0,.5);
  --radio:20px;
  /* textura de papel: dos degradados repetidos, coste nulo */
  --papel:
    repeating-linear-gradient(0deg,rgba(120,80,30,.035) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(120,80,30,.025) 0 1px,transparent 1px 5px);
  --f-display:'Fredoka',system-ui,sans-serif;
  --f-texto:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-texto);color:var(--tinta);
  background:#1a1017;min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}

/* ---------- fondo de feria ---------- */
.fondo{
  position:fixed;inset:0;z-index:-2;
  background:#1a1017 url('../images/feria-pixar-ligera.png') center/cover no-repeat;
}
/* velo de noche + viñeta + luces cálidas arriba: tres degradados estáticos */
.fondo::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,170,60,.22),transparent 55%),
    radial-gradient(ellipse at 50% 60%,transparent 40%,rgba(10,3,8,.55) 100%),
    linear-gradient(180deg,rgba(24,8,18,.38),rgba(20,8,16,.72));
}

/* ---------- papel picado ---------- */
.picado{
  position:relative;height:38px;display:flex;overflow:hidden;flex:none;gap:2px;padding:0 4px;
}
.picado i{
  flex:1;height:30px;position:relative;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);
}
/* calados del papel: agujeritos con un radial repetido */
.picado i::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.7) 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.45) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 75% 20%,rgba(255,255,255,.45) 0 1.5px,transparent 2.5px);
}
/* el cordel */
.picado::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#c9a45c,#fff2c4,#c9a45c);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ---------- contenedor ---------- */
.app{
  max-width:560px;margin:0 auto;padding:0 12px 26px;
  position:relative;
}

/* ---------- barra superior ---------- */
.barra-top{
  display:flex;align-items:center;gap:8px;padding:10px 2px 4px;
}
.btn-redondo{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,var(--rojo-claro),var(--rojo-hondo));
  color:#fff;font-size:1.05rem;display:grid;place-items:center;
  border:2px solid rgba(255,220,160,.55);
  box-shadow:0 4px 0 var(--vino),0 6px 12px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.28);
  transition:transform .12s,box-shadow .12s;
}
.btn-redondo:active{transform:translateY(3px);box-shadow:0 1px 0 var(--vino),inset 0 2px 0 rgba(255,255,255,.28)}
/* el cantor tiene pregones grabados: punto dorado en el botón de voz */
.btn-redondo.con-voz-real::after{
  content:'';position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6d0,var(--oro) 60%,var(--oro-hondo));
  border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.btn-redondo.con-voz-real{position:relative}
.btn-redondo[aria-pressed="false"].con-voz-real::after{opacity:.35}
.btn-redondo[aria-pressed="false"]{
  opacity:.9;background:linear-gradient(180deg,#5e4f52,#3b2f33);border-color:rgba(255,255,255,.2);
  box-shadow:0 4px 0 #22181c;color:rgba(255,255,255,.55);
}
.barra-top .espacio{flex:1}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font:700 .84rem/1 var(--f-display);white-space:nowrap;
}
.pill-oro{
  background:linear-gradient(180deg,var(--oro-brillo),var(--oro) 45%,var(--oro-hondo));
  color:#5b3a05;border:1.5px solid #fff1bf;
  box-shadow:0 3px 0 var(--oro-sombra),0 5px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.pill-nivel{
  background:linear-gradient(180deg,#2c4a63,var(--noche));
  color:#ffe9a8;border:1.5px solid rgba(255,220,150,.45);
  box-shadow:0 3px 0 #060c12,0 5px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- logo ---------- */
.logo-zona{text-align:center;padding:8px 0 0}
/* El h1 pinta la extrusión 3D (rojo vino con sombras escalonadas) y su
   ::after, encima y con el mismo texto, pinta la cara de oro en degradado. */
.logo{
  position:relative;display:inline-block;
  font:700 clamp(2.7rem,13.5vw,4rem)/1 var(--f-display);
  letter-spacing:.03em;color:#8d2c12;
  text-shadow:
    0 2px 0 #7a2b12,0 4px 0 #62200d,0 6px 0 #4a1608,
    0 8px 0 #34100a,0 14px 26px rgba(0,0,0,.65);
}
.logo::after{
  content:attr(data-t);position:absolute;inset:0;
  background:linear-gradient(180deg,#fff7d6 0%,#ffe08a 38%,#f2b830 62%,#ffd86a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.6px rgba(120,60,10,.45);
  text-shadow:none;
}
.logo-badge{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;
  font:600 .74rem/1 var(--f-display);letter-spacing:.44em;text-indent:.44em;
  color:#ffe9b5;
}
.logo-badge span{
  display:inline-block;padding:6px 18px;border-radius:999px;
  border:2px solid rgba(255,222,150,.8);
  background:linear-gradient(180deg,rgba(90,20,40,.75),rgba(30,8,20,.75));
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);
}
/* líneas ornamentales a los lados del sello */
.logo-badge::before,.logo-badge::after{
  content:'';height:2px;width:54px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#f2c65a 40%,#f2c65a 60%,transparent);
}

/* ---------- abanico de cartas ---------- */
.abanico{
  display:flex;justify-content:center;align-items:flex-end;
  gap:0;padding:18px 0 22px;min-height:190px;position:relative;
}
/* halo dorado tras el abanico */
.abanico::before{
  content:'';position:absolute;left:50%;bottom:6px;width:230px;height:70px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,200,90,.35),transparent 70%);
}
.abanico .carta{width:100px;box-shadow:0 10px 22px rgba(0,0,0,.55),0 0 0 1px var(--oro-hondo)}
.abanico .carta:nth-child(1){transform:rotate(-14deg) translate(18px,8px)}
.abanico .carta:nth-child(2){width:118px;z-index:2;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 1px var(--oro-hondo),0 0 24px rgba(255,205,90,.35)}
.abanico .carta:nth-child(3){transform:rotate(14deg) translate(-18px,8px)}

/* ---------- panel crema (boleto de feria) ---------- */
.panel{
  background:var(--papel),linear-gradient(180deg,var(--crema),var(--crema-2));
  border:2px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra),inset 0 1px 0 #fff;
  padding:13px;margin-bottom:12px;
  /* filete dorado interior, sigue el radio del borde */
  outline:1px solid rgba(217,154,21,.4);outline-offset:-6px;
}

/* ---------- perfil ---------- */
.perfil{display:flex;align-items:center;gap:12px}
.perfil-aro{
  width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--rojo-claro),var(--rojo-hondo));
  color:#fff;font:700 1.35rem/1 var(--f-display);
  border:3px solid var(--oro);
  box-shadow:0 3px 0 var(--oro-sombra),0 4px 10px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.perfil-cuerpo{flex:1;min-width:0}
.perfil-fila{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.perfil-rango{font:600 1.02rem/1.1 var(--f-display);color:var(--tinta);letter-spacing:.02em}
.perfil-xp{font:800 .66rem/1 var(--f-texto);color:var(--tinta-suave);letter-spacing:.04em}
.xp-barra{
  height:11px;border-radius:999px;background:#e2d6bd;margin-top:6px;overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 #fff;border:1px solid #d3c39d;
}
.xp-barra i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(180deg,#6fe0a6,#1f9d6b 55%,#168a5b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:width .5s ease;
}
.perfil-nums{display:flex;gap:6px;text-align:center;flex:none}
.perfil-nums div{
  line-height:1.05;padding:7px 8px 6px;border-radius:12px;min-width:54px;display:grid;gap:3px;
  background:#fffdf6;border:1.5px solid var(--borde);box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.perfil-nums b{display:block;font:700 1.1rem/1 var(--f-display);color:var(--rojo)}
.perfil-nums span{font:800 .5rem/1 var(--f-texto);letter-spacing:.09em;color:var(--tinta-suave);text-transform:uppercase}

/* ---------- tarjetas de colores (fichas de juguete) ---------- */
.tarjeta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;padding:13px;
  border-radius:var(--radio);color:#fff;
  margin-bottom:12px;text-align:left;width:100%;
  border:2px solid rgba(255,255,255,.3);
  transition:transform .12s,box-shadow .12s;
}
/* brillo superior de plástico, estático */
.tarjeta::before{
  content:'';position:absolute;left:0;right:0;top:0;height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  pointer-events:none;
}
.tarjeta:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)!important}
.t-reto{background:linear-gradient(140deg,#2fc487,var(--verde-hondo));box-shadow:0 5px 0 #0c5a3b,var(--sombra)}
.t-ruleta{background:linear-gradient(140deg,#9a5ee6,var(--morado-hondo));box-shadow:0 5px 0 #3e1573,var(--sombra)}
.t-copa{background:linear-gradient(140deg,#ffb04a,var(--naranja-hondo));box-shadow:0 5px 0 #9a4410,var(--sombra)}
.tarjeta .tt{font:600 1rem/1.15 var(--f-display);letter-spacing:.04em;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.tarjeta .ts{font:700 .7rem/1.3 var(--f-texto);opacity:.94;margin-top:2px}
.tarjeta .cuerpo{flex:1;min-width:0;position:relative}
.reto-fecha{
  width:50px;height:50px;border-radius:14px;flex:none;display:grid;place-content:center;
  background:linear-gradient(180deg,#fff,#f2f7ee);color:var(--verde-hondo);text-align:center;line-height:1;
  box-shadow:0 3px 0 rgba(0,0,0,.2);position:relative;
}
/* la anilla del calendario */
.reto-fecha::before{
  content:'';position:absolute;top:-3px;left:12px;right:12px;height:6px;border-radius:3px;
  background:var(--verde-hondo);
}
.reto-fecha b{font:700 1.15rem/1 var(--f-display)}
.reto-fecha span{font:800 .5rem/1 var(--f-texto);text-transform:uppercase;letter-spacing:.06em}
.reto-premio{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:999px;
  background:linear-gradient(180deg,var(--oro-brillo),var(--oro-hondo));
  color:#5b3a05;font:700 .78rem/1 var(--f-display);
  box-shadow:0 2px 0 var(--oro-sombra);border:1px solid #fff1bf;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duo .tarjeta{margin-bottom:12px}
.duo .icono{
  position:relative;font-size:1.45rem;flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}

/* ---------- configuración de partida: acordeones ----------
   Cada grupo es un <details>. La cabecera muestra el valor elegido,
   así que el jugador ve toda su configuración sin abrir nada.
   Cada grupo tiene su acento de color (--ac / --ac-2 / --ac-hondo). */
.config{padding:10px 10px 6px}
.config-tit{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:2px 0 10px;font:600 .8rem/1 var(--f-display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-suave);
}
.config-tit::before,.config-tit::after{
  content:'';flex:1;height:1px;max-width:90px;
  background:linear-gradient(90deg,transparent,rgba(120,80,30,.35));
}
.config-tit::after{background:linear-gradient(90deg,rgba(120,80,30,.35),transparent)}

.grupo{
  --ac:var(--rojo);--ac-2:var(--rojo-claro);--ac-hondo:var(--vino);--ac-tinta:#fff;
  margin-bottom:8px;border-radius:16px;
  border:1.5px solid var(--borde);background:#fffdf6;
  box-shadow:0 2px 0 rgba(120,80,30,.12);
  transition:box-shadow .15s,border-color .15s;
}
.grupo[open]{border-color:var(--ac);box-shadow:0 3px 0 var(--ac-hondo),0 6px 14px rgba(0,0,0,.08)}
.grupo[data-acento="navy"]{--ac:var(--navy);--ac-2:#2f5386;--ac-hondo:#0e1e36}
.grupo[data-acento="teal"]{--ac:var(--teal);--ac-2:#3fb99f;--ac-hondo:#12503f}
.grupo[data-acento="oro"]{--ac:#c99a3f;--ac-2:#f2c65a;--ac-hondo:#7a5716;--ac-tinta:#3a2409}
.grupo[data-acento="rojo"]{--ac:var(--rojo-hondo);--ac-2:#d0264a;--ac-hondo:#5a0819}
.grupo[data-acento="morado"]{--ac:var(--morado);--ac-2:#9a5ee6;--ac-hondo:#3e1573}
.grupo[data-acento="verde"]{--ac:var(--verde);--ac-2:#2fc487;--ac-hondo:#0c5a3b}

.grupo-tit{
  display:flex;align-items:center;gap:10px;padding:10px 12px 10px 10px;
  list-style:none;cursor:pointer;user-select:none;border-radius:16px;
}
.grupo-tit::-webkit-details-marker{display:none}
.grupo-tit .ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,var(--ac-2),var(--ac));color:var(--ac-tinta);font-size:1rem;
  box-shadow:0 2px 0 var(--ac-hondo),inset 0 1px 0 rgba(255,255,255,.3);
}
.gt-cuerpo{flex:1;min-width:0;display:grid;gap:2px}
.gt-nombre{
  font:600 .68rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);
}
.gt-valor{
  font:600 1rem/1.15 var(--f-display);color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.grupo[open] .gt-valor{color:var(--ac)}
.gt-flecha{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--crema-3);color:var(--tinta-suave);font:700 1.2rem/1 var(--f-display);
  transform:rotate(90deg);transition:transform .2s,background-color .2s,color .2s;
}
.grupo[open] .gt-flecha{transform:rotate(-90deg);background:var(--ac);color:var(--ac-tinta)}

.opciones{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  padding:2px 10px 12px;
  animation:despliega .22s ease-out;
}
@keyframes despliega{from{opacity:0;transform:translateY(-6px)}}

/* opción «tarjeta»: icono o mini-tabla + nombre + descripción */
.op{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:10px 11px;border-radius:13px;min-height:54px;
  border:1.5px solid var(--borde);background:linear-gradient(180deg,#fffdf6,#f8f0dc);
  color:var(--tinta);box-shadow:0 2px 0 rgba(120,80,30,.14);
  transition:transform .1s,background-color .15s,color .15s,border-color .15s,box-shadow .15s;
}
.op:active{transform:scale(.96)}
.op-ic{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;line-height:1;background:#fff;box-shadow:inset 0 0 0 1.5px var(--borde);
}
.op-cuerpo{flex:1;min-width:0;display:grid;gap:2px}
.op-nombre{font:600 .9rem/1.15 var(--f-display);letter-spacing:.01em}
.op-desc{font:700 .68rem/1.3 var(--f-texto);color:#6b5442}
.op[aria-pressed="true"]{
  background:linear-gradient(160deg,var(--ac-2),var(--ac) 70%,var(--ac-hondo));border-color:var(--oro);color:var(--ac-tinta);
  box-shadow:0 3px 0 var(--ac-hondo),0 6px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.18);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}
.grupo[data-acento="oro"] .op[aria-pressed="true"]{text-shadow:0 1px 0 rgba(255,255,255,.4);border-color:#fff1bf}
.op[aria-pressed="true"] .op-desc{color:inherit;opacity:.85}
.op[aria-pressed="true"] .op-ic{background:rgba(255,255,255,.92);box-shadow:none}
.op[aria-pressed="true"]::after{
  content:'✓';flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--ac);font:800 .72rem/1 var(--f-texto);
}

/* mini-tabla 4×4 con el patrón de la jugada */
.mini-tabla{
  flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  width:38px;height:38px;padding:3px;border-radius:7px;
  background:#e6d9b8;box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}
.mini-tabla i{display:block;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 1px rgba(120,80,30,.18)}
.mini-tabla i.on{background:var(--ac)}
.op[aria-pressed="true"] .mini-tabla{background:rgba(0,0,0,.25)}
.op[aria-pressed="true"] .mini-tabla i{background:rgba(255,255,255,.35)}
.op[aria-pressed="true"] .mini-tabla i.on{background:#fff}

/* el estudio de voces reutiliza .op como casilla simple */
.estilos .op{display:inline-flex;min-height:0;padding:9px 13px;font:600 .8rem/1 var(--f-display);gap:6px}

/* ---------- botón grande ---------- */
.btn-jugar{
  position:relative;overflow:hidden;
  display:block;width:100%;padding:18px;border-radius:18px;
  background:linear-gradient(180deg,#e0334f 0%,var(--rojo) 55%,var(--rojo-hondo) 100%);
  border:2px solid var(--oro);
  color:#fff;font:600 1.3rem/1 var(--f-display);letter-spacing:.08em;
  text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.35);
  box-shadow:0 6px 0 var(--vino),0 10px 24px rgba(176,20,58,.45),inset 0 2px 0 rgba(255,255,255,.3);
  transition:transform .12s,box-shadow .12s;
}
.btn-jugar::before{
  content:'';position:absolute;left:0;right:0;top:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none;
}
.btn-jugar:active{transform:translateY(5px);box-shadow:0 1px 0 var(--vino),inset 0 2px 0 rgba(255,255,255,.3)}

/* ---------- navegación inferior ---------- */
.nav-inferior{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;
}
.nav-item{
  background:var(--papel),linear-gradient(180deg,var(--crema),var(--crema-2));
  border:2px solid var(--borde);border-radius:15px;
  padding:9px 3px 8px;text-align:center;position:relative;
  box-shadow:0 4px 0 #c9b58a,0 6px 12px rgba(0,0,0,.28);
  transition:transform .12s,box-shadow .12s;
}
.nav-item:active{transform:translateY(3px);box-shadow:0 1px 0 #c9b58a}
.nav-item .ni{
  display:grid;place-items:center;margin:0 auto;width:34px;height:34px;border-radius:50%;
  font-size:1.15rem;line-height:1;
  background:linear-gradient(180deg,#fff,#f4e9cf);box-shadow:inset 0 0 0 1.5px var(--borde);
}
.nav-item .nt{
  display:block;margin-top:5px;font:600 .56rem/1 var(--f-display);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);
}
.nav-item .globo{
  position:absolute;top:-6px;right:-5px;min-width:19px;height:19px;padding:0 4px;
  border-radius:999px;background:linear-gradient(180deg,var(--rojo-claro),var(--rojo-hondo));color:#fff;
  border:1.5px solid #fff;font:700 .6rem/16px var(--f-texto);box-shadow:0 2px 4px rgba(0,0,0,.35);
}

/* ============================================================
   LA CARTA
   ============================================================ */
.carta{
  position:relative;aspect-ratio:3/4;border-radius:11px;overflow:hidden;
  background:#fffdf5;border:2px solid #fff6dc;
  box-shadow:0 0 0 1px rgba(217,154,21,.55),0 4px 10px rgba(0,0,0,.38);
  display:flex;flex-direction:column;
  transition:transform .12s;
}
.carta .arte{
  flex:1;position:relative;display:grid;place-items:center;
  background-color:var(--c2,#a63);
  background-image:linear-gradient(160deg,var(--c1,#ffd) 0%,var(--c2,#a63) 100%);
  font-size:2.1rem;line-height:1;
}
/* Ilustración estilo Pixar recortada de su lámina de 3×3.
   El degradado del tinte queda debajo y se ve mientras la lámina carga. */
.carta .arte.pintada{
  background-repeat:no-repeat;
  background-size:300% 300%;
  image-rendering:auto;
}
.carta .arte::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 22%,rgba(255,255,255,.32),transparent 62%);
}
/* sobre una foto el velo blanco lava el color: se atenúa */
.carta .arte.pintada::after{
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 45%,rgba(0,0,0,.16));
}
.carta .num{
  position:absolute;top:4px;left:4px;z-index:2;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#fffdf5,#f6e9c8);border:1.5px solid var(--rojo);
  color:var(--rojo);font:800 .58rem/17px var(--f-texto);text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.carta .nom{
  flex:none;padding:4px 3px;
  background:linear-gradient(180deg,#fffdf5,#f7eed7);
  border-top:1px solid rgba(217,154,21,.4);
  font:600 .5rem/1.1 var(--f-display);letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.carta.grande .arte{font-size:3rem}
.carta.grande .nom{font-size:.58rem}

/* Volteo de la carta que acaba de cantar el cantor. Animación corta y
   sólo con transform, para que no cueste nada al navegador. */
.carta.volteando{animation:voltear .42s ease-out}
@keyframes voltear{
  0%{transform:rotateY(90deg) scale(.86);opacity:.25}
  60%{transform:rotateY(-8deg) scale(1.04);opacity:1}
  100%{transform:rotateY(0) scale(1)}
}

/* ============================================================
   PANTALLA DE JUEGO
   ============================================================ */
/* La partida ocupa exactamente la pantalla: cabecera y barra fijas,
   y sólo la tabla se desplaza. Así nada se solapa ni se corta. */
#juego{display:none;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body.jugando #juego{display:flex}
body.jugando #inicio{display:none}
body.jugando{overflow:hidden}

.juego-top{
  flex:none;display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(60,8,28,.96),rgba(22,6,14,.86));
  border-bottom:1px solid rgba(255,214,140,.35);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  z-index:20;
}
.btn-cerrar{
  width:36px;height:36px;border-radius:11px;flex:none;color:#ffe3ad;
  font-size:1.1rem;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid rgba(255,220,160,.25);box-shadow:0 2px 0 rgba(0,0,0,.4);
  transition:transform .12s;
}
.btn-cerrar:active{transform:translateY(2px)}
.chip-modo{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,220,160,.4);
  color:#ffe9c2;font:600 .74rem/1 var(--f-display);letter-spacing:.03em;
}
.chip-modo::before{
  content:'';width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff9db0,var(--rojo-claro) 60%);
  box-shadow:0 0 6px rgba(255,120,150,.7);
}
.juego-top .espacio{flex:1}

/* --- escenario del cantor --- */
.cantor{
  position:relative;margin:10px 12px 0;padding:11px 11px 10px;display:flex;gap:11px;align-items:flex-start;
  background:var(--papel),linear-gradient(180deg,var(--crema),var(--crema-2));
  border:2px solid var(--borde);border-radius:var(--radio);
  border-top:5px solid var(--oro);
  box-shadow:var(--sombra),inset 0 1px 0 #fff;
}
/* cortinas del escenario: dos franjas de vino en las esquinas superiores */
.cantor::before,.cantor::after{
  content:'';position:absolute;top:-5px;width:26px;height:9px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,var(--rojo-hondo),var(--vino));pointer-events:none;
}
.cantor::before{left:16px}
.cantor::after{right:16px}
.cantor .carta{
  width:62px;flex:none;
  box-shadow:0 0 0 1px rgba(217,154,21,.7),0 6px 14px rgba(0,0,0,.4);
}
.cantor-cuerpo{flex:1;min-width:0}
.cantor-fila{display:flex;align-items:baseline;gap:8px}
.cantor-nom{
  flex:1;min-width:0;font:600 1.05rem/1.2 var(--f-display);color:var(--rojo);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cantor-cuenta{
  font:800 .68rem/1 var(--f-texto);color:var(--tinta-suave);flex:none;
  padding:4px 8px;border-radius:999px;background:#efe3c8;
}
.cantor-verso{
  margin-top:4px;font:italic 400 .78rem/1.4 var(--f-texto);color:var(--tinta-suave);
  min-height:2.1em;
}
.tiempo{
  height:7px;border-radius:999px;background:#e3d7be;margin-top:8px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.tiempo i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--oro-brillo),var(--oro),var(--oro-hondo));
  transform-origin:left center;
}
/* --- Ojo del Cantor: adelanta la siguiente carta (artículo de tienda) --- */
.ojo-pista{
  margin-top:7px;padding:6px 10px;border-radius:10px;
  background:#eee6d0;border:1px dashed #c9b98f;
  font:700 .68rem/1.25 var(--f-texto);color:var(--tinta-suave);
}
.ojo-pista.tuya{
  background:linear-gradient(180deg,#fff2c9,#ffe49b);
  border:1px solid var(--oro-hondo);color:#6b4a08;
}
.ojo-pista.oculto{display:none}

.cantor-pie{display:flex;justify-content:flex-end;margin-top:6px}
.chip-mazo{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:#efe3c8;color:var(--tinta-suave);font:800 .62rem/1 var(--f-texto);
  border:1px solid #dccba3;
}

/* --- rivales: fichas con medallón --- */
.rivales{
  display:flex;gap:7px;margin:9px 12px 0;padding:7px 8px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,32,48,.86),rgba(10,18,30,.86));
  border:1px solid rgba(255,220,160,.22);
  box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);
}
.rival{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  padding:4px 8px 4px 4px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.06);
}
.rival > span:first-child{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:1.05rem;line-height:1;background:linear-gradient(180deg,#fff2d0,#e9cf95);
  box-shadow:0 0 0 2px var(--oro-hondo),0 2px 4px rgba(0,0,0,.4);
}
.rival .rn{
  flex:1;min-width:0;font:800 .72rem/1 var(--f-texto);color:#ffe9c2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rival .rp{
  font:800 .64rem/1 var(--f-texto);color:#ffd27a;flex:none;
  padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.35);
}
.rival.canta .rn{color:#ff8fa6}
.rival.canta{background:rgba(255,80,110,.16)}
/* Late cuando el rival acaba de marcar: avisa sin robar la atención. */
.rival.late .rp{animation:latir-rival .45s ease-out}
@keyframes latir-rival{0%{transform:scale(1.6);color:#fff}100%{transform:scale(1)}}

/* --- tabla --- */
/* La tabla se estira para caber SIEMPRE en la pantalla: en una partida
   contra reloj no se debe desplazar para ver el último renglón.
   Si la pantalla es muy baja, el mínimo de 72px activa el desplazamiento. */
.tabla-zona{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;padding:10px 12px;
}
.tabla{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,minmax(72px,1fr));gap:7px;
  max-width:520px;margin:0 auto;
}
.tabla .carta{aspect-ratio:auto;min-height:0}
.tabla .carta .arte{font-size:1.9rem}
.tabla .carta{cursor:pointer}
.tabla .carta:active{transform:scale(.95)}
.tabla .carta.marcada{border-color:#ffd27a}
.tabla .carta.marcada .arte::before{
  content:'';position:absolute;inset:0;z-index:3;
  background:rgba(176,20,58,.45);
}
/* El frijolito se dibuja con CSS (no depende de que el sistema tenga el
   emoji 🫘): óvalo café con brillo y hendidura, girado como cae en la mesa. */
.tabla .carta.marcada::after{
  content:'';position:absolute;top:50%;left:50%;z-index:4;
  width:46%;max-width:44px;aspect-ratio:1.45/1;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:
    radial-gradient(ellipse at 35% 30%,rgba(255,235,200,.55),transparent 42%),
    radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.35),transparent 55%),
    linear-gradient(160deg,#a35a33,#6b3418 55%,#3f1d0d);
  box-shadow:0 3px 4px rgba(0,0,0,.55),inset 0 -2px 3px rgba(0,0,0,.35);
  transform:translate(-50%,-58%) rotate(-22deg);
  animation:sello .28s ease-out;
}
@keyframes sello{from{transform:translate(-50%,-58%) rotate(-22deg) scale(2.2);opacity:0}to{transform:translate(-50%,-58%) rotate(-22deg) scale(1);opacity:1}}
.tabla .carta.error{animation:tembleque .3s}
@keyframes tembleque{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tabla .carta.gana{box-shadow:0 0 0 3px var(--oro),0 3px 14px rgba(245,197,66,.75)}

/* La carta que está cantando ahora mismo y sí está en tu tabla:
   márcala rápido y ganas puntos de reflejo. */
.tabla .carta.cantada{
  box-shadow:0 0 0 3px var(--oro),0 0 16px rgba(245,197,66,.8);
  animation:pide-marca .7s ease-in-out infinite alternate;
}
@keyframes pide-marca{to{transform:scale(1.05)}}

/* Casillas que te cierran la jugada (pista suave, siempre visible). */
.tabla .carta.clave::before{
  content:'';position:absolute;inset:0;z-index:5;border-radius:8px;
  border:2px dashed rgba(58,181,142,.95);
  box-shadow:inset 0 0 10px rgba(58,181,142,.35);
  pointer-events:none;
}
.tabla .carta.marcada.clave::before{display:none}

/* ---- Pausa ---- */
body.en-pausa .tabla-zona,
body.en-pausa .cantor,
body.en-pausa .rivales{filter:blur(6px);opacity:.5}
body.en-pausa #juego::after{
  content:'⏸ PAUSA';position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  background:rgba(10,4,8,.55);
  color:#ffe9c2;font:600 1.6rem/1 var(--f-display);letter-spacing:.12em;
  text-shadow:0 3px 0 rgba(0,0,0,.5);
  pointer-events:none;
}

/* --- barra inferior de juego --- */
.barra-abajo{
  flex:none;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(40,6,20,.97),rgba(22,6,14,.7));
  border-top:1px solid rgba(255,214,140,.3);
}
.contador{
  font:700 .95rem/1 var(--f-display);color:#ffe9c2;flex:none;min-width:52px;text-align:center;
  padding:9px 8px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,220,160,.25);
}
.btn-loteria{
  flex:1;padding:16px;border-radius:16px;
  background:linear-gradient(180deg,#7a5a3a,#553a22);color:#ffe3ad;
  font:600 1.05rem/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  border:2px solid rgba(255,214,140,.3);text-shadow:0 1px 0 rgba(0,0,0,.4);
  box-shadow:0 5px 0 #2f1e10,0 6px 12px rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s;
}
.btn-loteria.lista{
  background:linear-gradient(180deg,#e0334f,var(--rojo) 55%,var(--rojo-hondo));
  color:#fff;border:2px solid var(--oro);text-shadow:0 2px 0 rgba(0,0,0,.35);
  box-shadow:0 5px 0 var(--vino),0 8px 22px rgba(245,197,66,.45),inset 0 2px 0 rgba(255,255,255,.3);
  animation:latido 1.1s ease-in-out infinite;
}
@keyframes latido{50%{transform:scale(1.03)}}
.btn-loteria:active{transform:translateY(4px);box-shadow:0 1px 0 #2a2119}

/* ============================================================
   MODALES
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at 50% 30%,rgba(80,12,36,.55),rgba(10,4,8,.86));
}
.modal.abierta{display:flex}
.modal-caja{
  width:100%;max-width:420px;max-height:86vh;overflow-y:auto;
  background:
    linear-gradient(180deg,var(--rojo-hondo),var(--rojo)) top/100% 8px no-repeat,
    var(--papel),
    linear-gradient(180deg,#fffdf4,var(--crema-2));
  border:3px solid var(--oro);border-radius:24px;
  box-shadow:var(--sombra-alta),0 0 0 1px rgba(255,255,255,.35) inset;
  padding:24px 18px 20px;text-align:center;
  animation:entra .24s ease-out;
}
@keyframes entra{from{transform:translateY(22px) scale(.96);opacity:0}}
.modal-caja h2{
  font:600 1.2rem/1.2 var(--f-display);color:var(--rojo);margin-bottom:8px;letter-spacing:.01em;
}
.modal-caja p{font:400 .84rem/1.5 var(--f-texto);color:var(--tinta-suave)}
.modal-icono{
  font-size:2.6rem;line-height:1;margin:0 auto 8px;width:74px;height:74px;display:grid;place-items:center;
  border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff7dd,#f4e3b4);
  box-shadow:0 0 0 3px var(--oro),0 4px 0 3px var(--oro-sombra),0 8px 16px rgba(0,0,0,.2);
}
.modal-oro{
  display:inline-flex;align-items:center;gap:8px;margin:10px 0;
  font:700 1.9rem/1 var(--f-display);color:var(--tinta);
}
.modal-oro .moneda{font-size:1.5rem}
.chip-racha{
  display:inline-block;margin:4px 0 2px;padding:8px 16px;border-radius:999px;
  background:linear-gradient(180deg,var(--rojo-claro),var(--rojo-hondo));
  color:#fff;font:700 .76rem/1 var(--f-display);box-shadow:0 2px 0 var(--vino);
}
.modal-nota{font:400 .68rem/1.4 var(--f-texto);color:var(--tinta-suave);margin-top:6px}
.btn-modal{
  display:block;width:100%;margin-top:16px;padding:15px;border-radius:15px;
  background:linear-gradient(180deg,#e0334f,var(--rojo) 55%,var(--rojo-hondo));
  color:#fff;font:600 1rem/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  border:2px solid rgba(255,220,160,.55);text-shadow:0 1px 0 rgba(0,0,0,.3);
  box-shadow:0 5px 0 var(--vino),0 8px 16px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.28);
  transition:transform .12s,box-shadow .12s;
}
.btn-modal:active{transform:translateY(4px);box-shadow:0 1px 0 var(--vino)}
.btn-modal.suave{
  background:linear-gradient(180deg,#f8efd9,#eadcb9);color:var(--tinta);
  border-color:var(--borde);text-shadow:none;
  box-shadow:0 5px 0 #c9b58a,0 6px 12px rgba(0,0,0,.15);
}
.btn-modal.suave:active{box-shadow:0 1px 0 #c9b58a}
.modal-cerrar{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(180deg,#5a3d2f,#3a2419);color:#ffe9c2;font-size:.95rem;display:grid;place-items:center;z-index:2;
  box-shadow:0 2px 0 #1e110a;border:1.5px solid rgba(255,220,160,.35);
}

/* contenido de modales de lista */
.lista-baraja{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px;margin-top:12px;
}
.lista-baraja .carta{cursor:pointer}
.lista-baraja .carta.oculta-col{filter:grayscale(1) brightness(.62)}
/* la carta elegida en el álbum se destaca sin mover la rejilla */
.lista-baraja .carta.elegida{
  box-shadow:0 0 0 3px var(--oro),0 3px 12px rgba(245,197,66,.6);
}
/* ficha con la copla de la carta tocada en el álbum */
.carta-ficha{
  margin-top:10px;padding:10px 12px;border-radius:14px;text-align:left;
  background:linear-gradient(180deg,#fff6da,#ffeeba);
  border:1.5px solid var(--oro-hondo);box-shadow:0 2px 0 var(--oro-sombra);
}
.carta-ficha.oculto{display:none}
.ficha-nom{
  display:block;font:600 .92rem/1.2 var(--f-display);color:var(--rojo);
}
.ficha-verso{
  display:block;margin-top:3px;font:italic 400 .8rem/1.45 var(--f-texto);color:var(--tinta-suave);
}
.lista-logros{display:grid;gap:8px;margin-top:12px;text-align:left}
.logro{
  display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:14px;
  border:1.5px solid var(--borde);background:#fffdf6;box-shadow:0 2px 0 rgba(120,80,30,.12);
}
.logro.hecho{border-color:var(--verde);background:linear-gradient(180deg,#f2fbf5,#e4f6ea);box-shadow:0 2px 0 rgba(19,122,82,.35)}
.logro .li{
  font-size:1.25rem;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#f4ead2;box-shadow:inset 0 0 0 1.5px var(--borde);
}
.logro.hecho .li{background:linear-gradient(180deg,#fff7dd,#f4e3b4);box-shadow:inset 0 0 0 2px var(--oro)}
.logro .lc{flex:1;min-width:0}
.logro .ln{display:block;font:600 .8rem/1.2 var(--f-display);color:var(--tinta)}
.logro .ld{display:block;font:400 .68rem/1.35 var(--f-texto);color:var(--tinta-suave)}
.logro .lo{
  font:700 .72rem/1 var(--f-display);color:#7a5716;flex:none;
  padding:5px 9px;border-radius:999px;background:linear-gradient(180deg,#ffe9a8,#f5d67a);
}
.stats-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.stat{
  padding:12px 11px 10px;border-radius:14px;border:1.5px solid var(--borde);background:#fffdf6;
  border-top:4px solid var(--rojo);box-shadow:0 2px 0 rgba(120,80,30,.12);
}
.stat:nth-child(3n+2){border-top-color:var(--oro-hondo)}
.stat:nth-child(3n+3){border-top-color:var(--verde)}
.stat b{display:block;font:700 1.35rem/1 var(--f-display);color:var(--rojo)}
.stat span{font:800 .56rem/1.2 var(--f-texto);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-suave)}
.tienda-lista{display:grid;gap:9px;margin-top:12px;text-align:left}
.articulo{
  display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:14px;
  border:1.5px solid var(--borde);background:#fffdf6;box-shadow:0 2px 0 rgba(120,80,30,.12);
}
.articulo .ai{
  font-size:1.4rem;flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff7dd,#f4e3b4);box-shadow:inset 0 0 0 1.5px var(--oro-hondo);
}
.articulo .ac{flex:1;min-width:0}
.articulo .an{display:block;font:600 .84rem/1.2 var(--f-display)}
.articulo .ad{display:block;font:400 .68rem/1.35 var(--f-texto);color:var(--tinta-suave)}
.btn-comprar{
  padding:9px 14px;border-radius:999px;flex:none;
  background:linear-gradient(180deg,var(--oro-brillo),var(--oro-hondo));
  color:#5b3a05;font:700 .74rem/1 var(--f-display);border:1px solid #fff1bf;
  box-shadow:0 3px 0 var(--oro-sombra);transition:transform .12s,box-shadow .12s;
}
.btn-comprar:active{transform:translateY(2px);box-shadow:0 1px 0 var(--oro-sombra)}
.btn-comprar[disabled]{opacity:.45;box-shadow:none}
.ayuda-texto{text-align:left;margin-top:10px}
.ayuda-texto h3{
  font:600 .88rem/1.3 var(--f-display);color:var(--rojo);margin:14px 0 4px;
  padding-left:10px;border-left:3px solid var(--oro);
}
.ayuda-texto p,.ayuda-texto li{font:400 .78rem/1.55 var(--f-texto);color:var(--tinta-suave)}
.ayuda-texto ul{margin-left:16px;list-style:disc}

/* ruleta */
.ruleta-premios{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.premio{
  padding:13px 6px;border-radius:14px;border:2px solid var(--borde);background:#fffdf6;
  font:700 .74rem/1.25 var(--f-display);color:var(--tinta);
  box-shadow:0 3px 0 rgba(120,80,30,.14);
  transition:transform .15s,background-color .15s;
}
.premio.activo{
  background:linear-gradient(180deg,var(--oro-brillo),var(--oro-hondo));color:#5b3a05;
  border-color:#fff1bf;box-shadow:0 3px 0 var(--oro-sombra),0 0 18px rgba(245,197,66,.6);
  transform:scale(1.07);
}

/* ============================================================
   MEMORAMA DE LA FERIA
   Reutiliza las láminas ya cacheadas: 0 bytes extra de red.
   Sin animaciones en bucle; sólo transiciones cortas.
   ============================================================ */
.memo-caja{max-width:460px}
.memo-intro{font:400 .78rem/1.5 var(--f-texto);color:var(--tinta-suave);margin-top:4px}

/* marcadores: parejas, intentos, tiempo y oro */
.memo-barra{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 8px;
}
.memo-dato{
  padding:8px 4px;border-radius:12px;border:1.5px solid var(--borde);background:#fffdf6;
  display:block;text-align:center;box-shadow:0 2px 0 rgba(120,80,30,.12);
}
.memo-dato b{display:block;font:700 1.05rem/1 var(--f-display);color:var(--rojo)}
.memo-dato span{
  font:800 .5rem/1.2 var(--f-texto);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);
}

/* reloj: una sola transición de ancho, sin bucles */
.memo-reloj{
  height:9px;border-radius:999px;overflow:hidden;background:rgba(58,36,25,.16);
  border:1px solid var(--borde);box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}
.memo-reloj i{
  display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--verde),#6fd8a4);
  transition:width .95s linear,background-color .3s;
}
.memo-reloj i.poco{background:linear-gradient(90deg,var(--rojo),#ff7a5c)}

/* tablero: 4 columnas de base (mesa Feria, 12 cartas = 4×3).
   Las mesas grandes reparten en 5 columnas para no crecer a lo
   alto: Plaza 16 cartas = 4×4, Palenque 20 cartas = 5×4. */
.memo-rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0;
  padding:8px;border-radius:16px;
  background:linear-gradient(180deg,#3d0a1e,#2a0714);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 0 0 2px var(--oro-hondo);
}
.memo-rejilla[data-cols="5"]{grid-template-columns:repeat(5,1fr);gap:5px}
.memo-rejilla[data-cols="5"] .memo-dorso{font-size:1.15rem}
.memo-carta{
  position:relative;aspect-ratio:3/4;border-radius:12px;cursor:pointer;
  border:2px solid var(--oro-hondo);overflow:hidden;
  background:linear-gradient(160deg,#a5143a,#5c0a1d);
  box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s ease-out,box-shadow .18s;
}
.memo-carta:active{transform:scale(.95)}

/* dorso y cara: se cruzan con opacidad, no con rotación 3D
   (más barato de pintar y sin parpadeos en móviles modestos) */
.memo-dorso,.memo-cara{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .2s ease-out;
}
/* dorso: rombo dorado interior y trama de talavera */
.memo-dorso{
  font-size:1.5rem;opacity:1;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,214,140,.3),transparent 55%),
    linear-gradient(45deg,transparent 46%,rgba(255,214,140,.35) 46% 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,rgba(255,214,140,.35) 46% 54%,transparent 54%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 5px,transparent 5px 10px);
  box-shadow:inset 0 0 0 3px rgba(255,214,140,.25);
}
.memo-cara{
  opacity:0;
  background-color:var(--c2,#a63);
  background-repeat:no-repeat;background-size:300% 300%;
}
.memo-carta.abierta .memo-dorso{opacity:0}
.memo-carta.abierta .memo-cara{opacity:1}
.memo-carta.abierta{border-color:#fff6dc}

/* pareja acertada: se queda con aro verde y se apaga un poco */
.memo-carta.hecha{
  border-color:var(--verde);opacity:.72;cursor:default;
  box-shadow:0 0 0 2px rgba(31,157,107,.45);
}
/* fallo: tiembla una sola vez */
.memo-carta.falla{border-color:#ff6a4d;animation:memo-tiembla .3s ease-out}
@keyframes memo-tiembla{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.memo-fin{
  margin:6px 0 10px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(180deg,#fff6da,#ffeeba);
  border:1.5px solid var(--oro-hondo);box-shadow:0 2px 0 var(--oro-sombra);
  font:600 .82rem/1.4 var(--f-display);color:var(--rojo);
}

@media(min-width:400px){
  .memo-dorso{font-size:1.9rem}
}

/* fin de partida */
.fin-titulo{
  font:600 1.75rem/1.1 var(--f-display);color:var(--rojo);
  text-shadow:0 2px 0 #fff,0 3px 0 rgba(139,14,44,.25);
}
.fin-rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
@media(min-width:380px){.fin-rejilla{grid-template-columns:repeat(4,1fr)}}

/* ---------- aviso flotante ---------- */
.aviso{
  position:fixed;left:50%;top:78px;z-index:200;transform:translate(-50%,-14px);
  padding:11px 20px;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,10,30,.96),rgba(18,8,14,.96));color:#ffe9c2;
  border:1.5px solid rgba(255,214,140,.6);box-shadow:0 8px 20px rgba(0,0,0,.45);
  font:600 .82rem/1 var(--f-display);
  opacity:0;transition:opacity .2s,transform .2s;
}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- utilidades ---------- */
.oculto{display:none!important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{
  position:absolute;left:-9999px;top:0;z-index:300;padding:10px 16px;
  background:var(--rojo);color:#fff;border-radius:0 0 10px 0;
}
.saltar:focus{left:0}
:focus-visible{outline:3px solid #ffd964;outline-offset:2px}

/* ---------- pantallas grandes ---------- */
@media(min-width:760px){
  .app{max-width:640px;padding-bottom:40px}
  .picado{height:44px}
  .picado i{height:36px}
  .abanico{min-height:210px;padding:22px 0 18px}
  .abanico .carta{width:112px}
  .abanico .carta:nth-child(2){width:132px}
  .panel,.tarjeta{border-radius:22px}
  .btn-jugar{font-size:1.4rem;padding:20px}
  .nav-item .nt{font-size:.62rem}
  .tabla{gap:10px;max-width:560px}
  .cantor{margin:12px auto 0;max-width:616px}
  .rivales{margin:10px auto 0;max-width:616px}
  .cantor .carta{width:72px}
  .cantor-nom{font-size:1.15rem}
  .cantor-verso{font-size:.84rem}
  /* en escritorio los botones responden también al pasar el ratón */
  .op:hover{border-color:var(--oro-hondo)}
  .nav-item:hover,.tarjeta:hover,.btn-jugar:hover{transform:translateY(-2px)}
  .tabla .carta:hover{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}