/* Imagilang 2.0 · juegos.css — extraído del index monolítico (Fase 1 refactor) */

/* ═══ lectura kana (japonés): bajo el kanji, en pequeño y MORADO ═══ */
.rd{display:block;font-size:.6em;font-weight:700;color:#7C3AED;line-height:1.15;margin-top:1px;
  text-transform:none;letter-spacing:.02em}
/* palabra sin kanji (ya es kana): se muestra sola, en morado, a tamaño normal */
.rd-solo{color:#7C3AED;text-transform:none}

/* ═══ bienvenida visual dentro de Minijuegos ═══ */
/* bienvenida visual dentro de Minijuegos */
.games-welcome{position:relative;min-height:150px;margin:16px 0 18px;padding:20px clamp(130px,38vw,168px) 20px 20px;border-radius:24px;
  overflow:hidden;background:linear-gradient(135deg,#fff 0%,#F4F2FF 58%,#E6F8FF 100%);box-shadow:var(--shadow);text-align:left;display:flex;align-items:center}
.games-welcome::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-35px;top:-50px;background:rgba(91,202,239,.18)}
.games-welcome-copy{position:relative;z-index:1;max-width:30ch}.games-welcome h2{font-size:clamp(1.18rem,1rem + 1vw,1.5rem)}
.games-welcome p{color:var(--text2);font-size:.9rem;font-weight:650;margin-top:5px;line-height:1.4}
.games-prepy{position:absolute;z-index:2;right:8px;bottom:-6px;width:clamp(124px,36vw,164px);height:auto;filter:drop-shadow(0 12px 16px rgba(46,16,101,.12))}
@media (min-width:768px){
  .games-welcome{min-height:180px;padding:26px 230px 26px 30px}.games-prepy{width:210px;right:18px;bottom:-18px}
}

/* ═══ SALA DE JUEGOS: caja de cambio (gemas→fichas) + partida gratis + precio ═══ */
/* dorado de las fichas (familia de la moneda glossy) */
:root{--jg-gold:#F2A81C;--jg-gold-deep:#C97D12;--jg-gold-bg:#FFF7E4;--jg-gold-line:#F1C877}

/* ── caja de cambio: tarjeta clara, como el resto de paneles de la Sala (games-welcome,
   alb-panel) — el morado/dorado quedan solo de acento (título, chip, iconos), no como
   fondo sólido. Antes era un bloque morado a toda pantalla; sobrecargaba al lado de
   tarjetas blancas de alrededor. ── */
.jg-caja{position:relative;max-width:440px;margin:0 auto 12px;border-radius:20px;padding:14px 20px;
  background:linear-gradient(135deg,#fff 0%,#F6F4FF 58%,#EFF6FF 100%);
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.jgc-wallet{text-align:center;padding-right:16px;border-right:1px solid var(--border)}
.jgc-tag{display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-weight:900;font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px}
.jgc-dot{width:7px;height:7px;border-radius:50%;background:var(--jg-gold);box-shadow:0 0 9px rgba(242,168,28,.6)}
.jgc-coins{display:flex;flex-direction:column;align-items:center;gap:0}
.jgc-coins img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(46,16,101,.15))}
.jgc-coins b{font-size:1.5rem;font-weight:900;line-height:1.15;margin-top:2px;color:var(--deep)}
.jgc-coins small{color:var(--text2);font-weight:800;font-size:.66rem}
.jgc-right{min-width:0}
.jgc-title{margin:0 0 1px;font-size:1rem;font-weight:900;color:var(--deep)}
.jgc-sub{margin:0 0 8px;color:var(--text2);font-weight:700;font-size:.76rem}
.jgc-chips{display:flex;gap:10px}
.jgc-chip{flex:0 0 auto;min-width:170px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:5px;
  background:#F8F7FE;border:1.5px solid var(--border);border-radius:14px;
  padding:6px 14px;cursor:pointer;transition:background .18s,border-color .18s}
.jgc-chip:hover:not(:disabled){background:#EDE9FE;border-color:var(--purple-light)}
.jgc-chip:disabled{opacity:.4;cursor:not-allowed}
.jgc-give,.jgc-get{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:.9rem}
.jgc-give img,.jgc-get img{width:17px;height:17px;object-fit:contain}
.jgc-give{color:var(--purple)}
.jgc-get{color:var(--jg-gold-deep)}
.jgc-arrow{width:15px;height:15px;color:var(--text2);flex:none}
.jgc-foot{display:flex;align-items:center;gap:7px;margin:8px 0 0;color:var(--text2);font-weight:800;font-size:.7rem}
.jgc-foot svg{width:14px;height:14px;flex:none;color:var(--green)}

/* ── partida gratis del día: franja dentro de .jg-caja (grid-column:1/-1 = fila propia
   bajo wallet+chip), separada por un filete sutil. Verde = "regalo", integrado en la
   misma tarjeta para que el niño vea UN solo sitio con las dos formas de jugar. ── */
.jgc-free{grid-column:1/-1;display:flex;align-items:center;gap:10px;
  padding-top:10px;border-top:1px solid var(--border)}
.jgcf-emo{font-size:1.25rem;line-height:1;flex:none}
.jgcf-copy{flex:1;min-width:0}
.jgcf-copy b{display:block;color:var(--deep);font-weight:900;font-size:.82rem}
.jgcf-copy small{color:var(--text2);font-weight:700;font-size:.7rem}
.jgcf-cta{flex:none;background:#22C55E;color:#fff;border:0;border-radius:99px;font-weight:900;
  font-size:.8rem;padding:8px 16px;min-height:44px;cursor:pointer;transition:background .18s,transform .15s}
.jgcf-cta:hover:not(:disabled){background:#16A34A;transform:scale(1.03)}
.jgcf-cta:disabled{cursor:default;background:#F3F1FB;color:var(--text2)}
.jgc-free.usada{opacity:.55}
/* armada: pulsó "Usar" y le toca elegir máquina — el regalo late para llevar la mirada
   a la rejilla de juegos, que es lo siguiente que tiene que hacer */
.jgc-free.armada .jgcf-copy b{color:var(--green)}
.jgc-free.armada .jgcf-emo{animation:jgf-late 1.1s ease-in-out infinite}
@keyframes jgf-late{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* ── precio en fichas de cada máquina (siempre al fondo: margin-top:auto lo ancla abajo,
      así todos los botones quedan alineados aunque la descripción mida distinto) ── */
.jg-price{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:100%;
  font-weight:900;font-size:.86rem;color:var(--jg-gold-deep);background:var(--jg-gold-bg);
  border:1.5px solid var(--jg-gold-line);border-radius:99px;padding:6px 12px;min-height:36px}
/* un respiro fijo entre la descripción y el botón, se mantenga corto o largo el texto */
.jg-card small{margin-bottom:8px}
.jg-price img{width:17px;height:17px;object-fit:contain;display:block}

/* ── destacado por nivel: premium (TOP) y rápidos ── */
.jg-card.premium{box-shadow:0 10px 30px rgba(210,133,26,.16),inset 0 0 0 1.6px var(--jg-gold-line)}
.jg-card.premium .jg-lvl{color:var(--jg-gold-deep);background:#FFF1D4}
.jg-card.cheap .jg-lvl{color:#0E7C86;background:#E1F6FA}
.tier-flag{position:absolute;top:12px;right:-28px;transform:rotate(45deg);background:linear-gradient(180deg,#F7BE3D,#E39514);
  color:#fff;font-size:.56rem;font-weight:900;letter-spacing:.09em;padding:3px 30px;box-shadow:0 2px 6px rgba(210,133,26,.4)}

/* ── HUD: gema, racha y fichas (pills numéricas) ──
   Son "stadium" (border-radius:99px): con poco padding el número se mete en la curva del
   extremo redondeado y queda pegado. Damos 20px a la derecha (> el radio de la curva) para
   que el número quede holgado en las tres por igual. */
.hud-pill.hud-extra{padding-left:12px;padding-right:22px}
.hud-ficha{background:linear-gradient(180deg,#FFFDF6,#FFF1D0)}
.hud-ficha b{color:var(--jg-gold-deep)}

/* ═══ modal INSERTAR FICHA (estilo recreativa) ═══ */
#fichaOv{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:152;
  background:rgba(46,16,101,.5);backdrop-filter:blur(4px);padding:20px}
#fichaOv.on{display:flex;animation:appear .25s ease}
.ficha-card{max-width:min(380px,92vw)}
/* la moneda gira en 3D sobre su eje, como cayendo por la ranura */
.ficha-slot{width:104px;height:104px;margin:0 auto 4px;display:grid;place-items:center;perspective:560px}
.ficha-coin3d{width:76px;height:76px;transform-style:preserve-3d;animation:coinSpin 2.2s linear infinite}
.ficha-coin3d img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(210,133,26,.4))}
@keyframes coinSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
/* botón principal: INSERTAR (morado, grande, con la ficha oficial) */
.btn.ficha-insert{background:var(--purple);display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn.ficha-insert:hover{background:var(--purple-hover)}
.btn.ficha-insert .ficha-btn-coin{width:23px;height:23px;object-fit:contain}
@media (prefers-reduced-motion:reduce){.ficha-coin3d{animation:none}}

@media (max-width:760px){
  .jg-caja{grid-template-columns:1fr;gap:14px}
  .jgc-wallet{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 13px}
}

/* ═══ rejilla de juegos + carta escondida + trío + ninja + parejas + esquiva el bloque ═══ */
/* ── minijuegos: rejilla de tarjetas ── */
main>.screen:has(.jgrid){max-width:920px}
.jgrid{width:100%;margin:12px 0 24px}
.jg-card{position:relative;overflow:hidden;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:14px 10px;text-align:center;
  cursor:pointer;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .15s,box-shadow .18s}
.jg-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(46,16,101,.16)}
.jg-emoji{font-size:1.7rem;line-height:1}
.jg-lvl{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--purple);
  background:#F5F3FF;padding:3px 9px;border-radius:99px;margin:1px 0}
.jg-card b{color:var(--deep);font-size:.95rem}
.jg-card small{color:var(--text2);font-size:.76rem;line-height:1.25}
.fade{animation:fade .35s ease}
.question{font-weight:800;color:var(--deep);font-size:1.05rem;margin-top:6px}
.jg-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.jg-pill{padding:7px 12px;border-radius:99px;font-weight:800;font-size:.9rem}
.jg-pill.si{background:var(--green-bg);color:var(--green)}
.jg-pill.no{background:#FDECEC;color:var(--red)}
.jg-pill small{opacity:.8;font-weight:700}
#jgZone{display:flex;flex-direction:column;align-items:center;gap:10px}
#jgZone .btn{margin:0}

/* carta escondida */
.carta-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
/* significado revelado en el juego de la carta escondida: grande, en el hueco de la pregunta */
.carta-es{display:inline-block;font-size:clamp(1.3rem,4.5vw,1.7rem);font-weight:800;animation:appear .25s ease}
.carta-es.si{color:var(--green)}
.carta-es.no{color:var(--red)}
.carta-op{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;border:3px solid var(--border);background:#F5F3FF;cursor:pointer;padding:0}
.carta-op img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.carta-op img.ready{opacity:1}
.carta-op.okk{border-color:var(--green)}
.carta-op.bad{border-color:var(--red)}
.carta-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:.85rem;font-weight:800;text-align:center;padding:5px}

/* ── ⚡ relámpago: lienzo de tormenta ── */
main>#s-trio{max-width:1040px}
#trioStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(circle at 50% 44%,#FDFCFF 0%,#F8F7FF 42%,#EFEAFC 100%);
  height:clamp(430px,124vw,560px)}
@media (min-width:768px){#trioStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#trioStage{height:430px}}
.trio-game{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:64px 14px 58px}
/* en pantallas anchas la palabra y las opciones se acercan: menos viaje ocular = más velocidad */
@media (min-width:768px){.trio-game{justify-content:center;gap:clamp(24px,7vh,60px)}}
/* nubes suaves del cielo de la web */
.tr-nube{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;background:#EDE8FC;opacity:.9}
.tr-nube.n1{width:46%;height:70px;left:-8%;top:5%;box-shadow:60px 14px 0 18px #EDE8FC,140px -6px 0 6px #E6DFFA}
.tr-nube.n2{width:40%;height:60px;right:-6%;top:11%;background:#E9E3FB;box-shadow:-70px 12px 0 12px #E9E3FB}
/* viento supersónico: trazos que cruzan el cielo de vez en cuando */
.tr-viento{position:absolute;height:2px;width:26%;border-radius:99px;pointer-events:none;
  background:linear-gradient(90deg,rgba(124,58,237,0),rgba(124,58,237,.28),rgba(124,58,237,0));
  animation:trViento 7s linear infinite}
.tr-viento.v1{top:32%}
.tr-viento.v2{top:66%;animation-delay:3.4s;width:20%}
@keyframes trViento{from{left:110%}to{left:-30%}}
/* HUD: mecha de tiempo + puntos */
.tr-hud{position:absolute;inset:14px 14px auto;display:flex;gap:12px;align-items:center;z-index:6}
.tr-mecha{flex:1;height:12px;border-radius:99px;background:rgba(46,16,101,.12);overflow:hidden}
.tr-mecha i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#FFE45C,#FFB13D);transition:width .1s linear}
.tr-mecha i.agonia{background:linear-gradient(90deg,#FB7185,#DC2626);animation:trLate .5s ease-in-out infinite}
@keyframes trLate{50%{opacity:.6}}
.tr-score{background:var(--surface);padding:9px 16px;border-radius:99px;font-weight:800;font-size:.92rem;color:var(--deep);box-shadow:var(--shadow);white-space:nowrap}
/* centro: la palabra */
.tr-centro{text-align:center;z-index:3;margin-top:clamp(2px,3vh,26px);max-width:min(92%,560px)}
.tr-word{font-weight:900;color:var(--deep);font-size:clamp(1.9rem,8vw,3rem);line-height:1.05;text-transform:capitalize;overflow-wrap:anywhere;
  text-shadow:0 3px 18px rgba(167,139,250,.35)}
.tr-word.entra{animation:trEntra .3s cubic-bezier(.2,.9,.3,1.4)}
@keyframes trEntra{from{transform:scale(.7);opacity:0}}
/* supercarga: con racha ×2 la palabra queda electrificada */
.tr-word.volt{animation:trVolt 1.1s ease-in-out infinite}
@keyframes trVolt{0%,100%{text-shadow:0 0 14px rgba(255,196,60,.85),0 0 34px rgba(245,158,11,.45)}
  50%{text-shadow:0 0 22px rgba(255,196,60,1),0 0 52px rgba(245,158,11,.65)}}
.tr-ipa{color:var(--purple);font-weight:700;margin-top:2px;min-height:1.4em}
.tr-tools{margin-top:6px;display:flex;justify-content:center}
.tr-pista .pistabox{margin-top:8px}
.trio-game .ibx-kw{font-size:clamp(1.05rem,4vw,1.35rem)}
.trio-game #jgPista{margin:6px auto 0;min-height:48px;max-width:220px;padding:8px 18px;font-size:.92rem}
/* opciones: cartas claras (72px+ táctiles), en columna en móvil y en fila en desktop */
.tr-ops{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;z-index:4}
.tr-op{position:relative;flex:1;min-height:64px;border:0;border-radius:18px;padding:12px 16px 12px 50px;cursor:pointer;
  font-weight:900;color:var(--deep);font-size:clamp(1rem,4vw,1.15rem);text-align:left;line-height:1.15;overflow-wrap:anywhere;
  box-shadow:0 8px 18px rgba(46,16,101,.16),inset 0 -6px 10px rgba(46,16,101,.10),inset 0 4px 8px rgba(255,255,255,.9);
  transition:transform .12s ease,filter .2s ease}
@media (min-width:768px){
  .tr-ops{max-width:820px;flex-direction:row}
  .tr-op{min-height:80px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px 12px 44px}
}
.tr-op:active{transform:scale(.97)}
.tr-op:disabled{cursor:default}
.tr-num{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:rgba(46,16,101,.14);color:var(--deep);font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.tr-c-mint{background:linear-gradient(180deg,#E2FAEF,#BDEFD6)}
.tr-c-lila{background:linear-gradient(180deg,#EDE6FF,#CFBAF7)}
.tr-c-sol{background:linear-gradient(180deg,#FFF3CD,#FFDF92)}
.tr-op.okk{background:linear-gradient(180deg,#DDF6D0,#9FE28C);box-shadow:0 0 0 3px rgba(52,211,153,.85),0 8px 18px rgba(46,16,101,.16)}
.tr-op.bad{opacity:.45;filter:saturate(.4);animation:orbTiembla .3s ease}
/* racha */
.tr-racha{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;background:var(--surface);
  padding:9px 18px;border-radius:99px;font-weight:800;font-size:.92rem;color:var(--purple);box-shadow:var(--shadow);white-space:nowrap}
.tr-racha.hot{color:var(--amber);box-shadow:0 0 0 3px rgba(255,215,102,.55),var(--shadow)}
/* aviso de arranque: el Relámpago no se gana acertando todas, sino cuantas más mejor —
   se dice una vez, se aparta sola (2,4 s) y no come clics mientras está */
.tr-intro{position:absolute;left:50%;top:56px;transform:translateX(-50%);   /* bajo la mecha del HUD */z-index:7;pointer-events:none;
  background:var(--surface);padding:10px 20px;border-radius:99px;white-space:nowrap;box-shadow:var(--shadow);
  font-weight:800;font-size:.95rem;color:var(--purple);animation:trIntro 2.4s ease forwards}
@keyframes trIntro{0%{opacity:0;transform:translate(-50%,-10px) scale(.9)}
  12%,72%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.tr-intro{animation:trIntro 2.4s steps(1,end) forwards}}
/* rayo: se dibuja de arriba abajo (~160 ms) y se apaga; flash radial suave desde su origen */
.tr-rayo{position:absolute;top:0;z-index:2;pointer-events:none;transform:translateX(-50%)}
.tr-rayo svg{display:block;overflow:visible}
.tr-rayo path{stroke-dasharray:1;stroke-dashoffset:1;animation:trTrazo .16s linear forwards,trApaga .5s ease .22s forwards}
.tr-rayo .glow{filter:drop-shadow(0 0 6px rgba(255,196,60,.85)) drop-shadow(0 0 16px rgba(245,158,11,.45))}
@keyframes trTrazo{to{stroke-dashoffset:0}}
@keyframes trApaga{to{opacity:0}}
.tr-flash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at var(--fx,30%) var(--fy,10%),rgba(255,196,90,.5) 0%,rgba(255,196,90,.14) 34%,transparent 62%);
  animation:trFlash .55s ease-out forwards}
@keyframes trFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.tr-chispa{position:absolute;width:7px;height:7px;border-radius:50%;background:#F59E0B;z-index:5;pointer-events:none;
  animation:orbChispa .55s ease-out forwards}
@media (prefers-reduced-motion:reduce){
  .tr-viento,.tr-rayo,.tr-flash,.tr-chispa{display:none}
  .tr-word.entra,.tr-word.volt,.tr-mecha i.agonia,.tr-op.bad{animation:none}
}

/* ninja escriba */
.fuse{height:12px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:16px}
.fuse div{height:100%;width:100%;background:linear-gradient(90deg,#F97316,#DC2626);border-radius:99px}
.mic-msg{min-height:1.3em;font-weight:800;color:var(--text2)}
.mic-msg.ok{color:var(--green)}

/* parejas */
.mem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.mem-card{position:relative;aspect-ratio:1;border-radius:14px;border:0;cursor:pointer;background:var(--purple);
  display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden}
.mem-card .q{color:#fff;font-size:1.8rem;font-weight:900}
.mem-card .v{display:none;flex-direction:column;align-items:center;gap:2px;color:var(--deep);font-weight:800;font-size:.92rem;text-align:center;line-height:1.15}
.mem-card .v small{color:var(--text2);font-weight:700;font-size:.72rem}
.mem-card.up,.mem-card.match{background:#fff;box-shadow:inset 0 0 0 2px var(--border)}
.mem-card.up .q,.mem-card.match .q{display:none}
.mem-card.up .v,.mem-card.match .v{display:flex}
.mem-card.match{box-shadow:inset 0 0 0 3px var(--green);background:var(--green-bg)}

/* secciones de la lista de juegos + ruta completa */
.jg-section{width:100%}
/* cierra la lista, con aire por encima: es la opción "de todo", no la primera que se ofrece */
.ruta-completa{margin:30px auto 0;max-width:420px;width:100%}
.jg-caption{color:var(--text2);font-weight:700;font-size:.85rem;text-align:center;margin:16px 0 8px}
.jgrid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

/* ── la vista de juegos, por bloques ──
   Antes iban todos en un montón. Cada bloque dice para qué sirve lo que hay dentro: la ruta
   (con orden), los sueltos, los retos… y, solo para el admin, el cajón de los que están sin
   terminar. Cabecera alineada a la izquierda: la lista se lee, no se contempla. */
.jg-bloque{margin-top:26px}
.jg-head{margin-bottom:10px;padding-left:2px}
.jg-head h3{font-size:1.05rem;font-weight:900;color:var(--deep)}
.jg-head p{margin-top:2px;color:var(--text2);font-weight:600;font-size:.84rem}

/* cajón "Más · En desarrollo": una píldora pequeña y apagada, no una barra a todo lo ancho.
   Esto no es contenido, es una herramienta del admin: tiene que estar, pero sin hacer ruido. */
.jg-dev{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start}
.jg-dev-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:0;border-radius:999px;background:none;cursor:pointer;
  color:var(--text2);opacity:.45;transition:opacity .2s,background .2s}
.jg-dev-btn:hover{opacity:.9;background:rgba(124,58,237,.07)}
.jg-dev-btn b{font-weight:800;font-size:.85rem;color:var(--text2)}
.jg-dev-btn small{font-size:.7rem;font-weight:700;letter-spacing:.02em}   /* 'en desarrollo', tal cual */
.jg-dev-arr{font-size:1rem;font-weight:900;line-height:1;transition:transform .25s}
.jg-dev-btn.on{opacity:.9}
.jg-dev-btn.on .jg-dev-arr{transform:rotate(90deg)}
/* el [hidden] del navegador lo pisa .jgrid-inner{display:grid} (una regla de autor gana
   siempre a la del navegador), así que el ocultado hay que declararlo aquí */
.jg-dev-grid{width:100%;margin-top:12px}
.jg-dev-grid[hidden]{display:none}
/* las tarjetas de dentro también van apagadas: recuerdan que esto no está terminado */
.jg-dev-grid .jg-card{opacity:.72;box-shadow:none;border:1px dashed var(--border)}
.jg-dev-grid .jg-card:hover{opacity:1}

/* lluvia de meteoros */
.meteor-sky{position:relative;height:330px;background:linear-gradient(180deg,#E9E5FF,#F5F3FF);border-radius:18px;overflow:hidden}
.meteor{position:absolute;top:-46px;transform:translateX(-50%);min-width:86px;padding:8px 6px;border-radius:14px;border:0;
  background:linear-gradient(180deg,var(--purple-light),var(--purple));color:#fff;font-weight:900;font-size:1.02rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;line-height:1.1;box-shadow:0 6px 16px rgba(124,58,237,.35)}
.meteor small{font-weight:700;font-size:.6rem;opacity:.85}
.meteor.okk{background:var(--green)}
.meteor.dud{opacity:.45}
.meteor.boom{background:none;box-shadow:none;font-size:2rem;padding:0}
.nave{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:46px;transition:left .35s cubic-bezier(.4,0,.2,1)}
.nave img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 8px rgba(46,16,101,.3))}
.nave-fuego{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:11px solid #F59E0B}
.nave.shoot .nave-fuego{animation:naveFuego .3s}
@keyframes naveFuego{50%{border-top-color:#DC2626}}
.laser{position:absolute;bottom:40px;width:4px;height:290px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(124,58,237,0),var(--purple));border-radius:4px;transform-origin:bottom;animation:laserUp .4s ease-out}
@keyframes laserUp{from{opacity:0;transform:translateX(-50%) scaleY(0)}to{opacity:1;transform:translateX(-50%) scaleY(1)}}
.meteor-base{margin-top:14px;text-align:center}

/* ═══ órbitas ═══ */
/* ── 🪐 Órbitas ── */
main>#s-orbitas{max-width:1040px}
#orbitasStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(circle at 50% 44%,#FDFCFF 0%,#F8F7FF 42%,#EFEAFC 100%);
  height:clamp(430px,124vw,560px)}
@media (min-width:768px){#orbitasStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#orbitasStage{height:430px}}
.orb-game{position:absolute;inset:0}
.orb-hud{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;align-items:center;z-index:6;pointer-events:none}
.orb-progress{background:var(--surface);padding:9px 16px;border-radius:99px;font-weight:800;font-size:.92rem;color:var(--deep);box-shadow:var(--shadow)}
.orb-audio{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;
  background:var(--surface);color:var(--purple);box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.orb-audio:active{transform:scale(.92)}
.orb-audio svg{width:20px;height:20px}
.orb-streak{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;background:var(--surface);
  padding:9px 18px;border-radius:99px;font-weight:800;font-size:.92rem;color:var(--purple);box-shadow:var(--shadow);white-space:nowrap}
.orb-ring{position:absolute;left:50%;top:50%;aspect-ratio:1;border:2px dashed rgba(124,58,237,.15);border-radius:50%;pointer-events:none;
  animation:orbGira 90s linear infinite}
.orb-ring-one{width:min(64%,400px)}
.orb-ring-two{width:min(92%,620px);animation-duration:140s;animation-direction:reverse}
@keyframes orbGira{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.orb-dust{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;opacity:.75;animation:orbFlota 4.2s ease-in-out infinite}
.orb-dust.d1{left:12%;top:20%;background:var(--purple-light)}
.orb-dust.d2{right:10%;top:28%;background:#7FE0AE;width:8px;height:8px;animation-delay:1.1s}
.orb-dust.d3{left:20%;bottom:18%;background:#FFD766;width:7px;height:7px;animation-delay:2s}
.orb-dust.d4{right:16%;bottom:24%;background:var(--purple-light);width:6px;height:6px;animation-delay:.6s}
.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;justify-content:center;
  width:clamp(124px,36vw,170px);aspect-ratio:1;border-radius:50%;padding:16px;text-align:center;
  background:radial-gradient(circle at 50% 36%,#fff 52%,#F4EFFF 80%,#E9E0FD 100%);
  box-shadow:0 0 0 8px rgba(255,255,255,.6),0 0 44px rgba(167,139,250,.45),0 12px 30px rgba(46,16,101,.10)}
@media (min-width:768px){.orb-core{width:clamp(168px,19vw,200px)}}
.orb-core span{position:relative;z-index:1;font-weight:900;color:var(--deep);font-size:clamp(1.25rem,6vw,1.9rem);line-height:1.08;overflow-wrap:anywhere}
.orb-core.long span{font-size:clamp(.98rem,4.6vw,1.4rem)}
/* calor solar: el núcleo se carga de dorado con la racha (--calor 0→.85) y respira sutilmente */
.orb-core::after{content:'';position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,rgba(255,227,150,.95) 38%,rgba(255,196,90,.55) 76%,rgba(255,196,90,.18) 100%);
  box-shadow:0 0 56px 10px rgba(255,190,80,.6);
  opacity:var(--calor,0);transition:opacity .7s ease}
.orb-core{animation:orbRespira 4.6s ease-in-out infinite}
@keyframes orbRespira{50%{scale:1.02}}
.orb-core.pulse{animation:orbPulso .5s ease,orbRespira 4.6s ease-in-out infinite}
@keyframes orbPulso{45%{box-shadow:0 0 0 16px rgba(255,255,255,.8),0 0 90px rgba(167,139,250,.9),0 12px 30px rgba(46,16,101,.10);transform:translate(-50%,-50%) scale(1.05)}}
.orb-options{position:absolute;inset:0;pointer-events:none}
.orb-sat{min-width:72px;min-height:72px;position:absolute;transform:translate(-50%,-50%);pointer-events:auto;z-index:4;
  width:clamp(78px,24vw,104px);aspect-ratio:1;border:0;border-radius:50%;padding:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:900;color:var(--deep);font-size:clamp(.8rem,3.4vw,1rem);line-height:1.12;overflow-wrap:anywhere;
  box-shadow:0 8px 18px rgba(46,16,101,.16),inset 0 -7px 12px rgba(46,16,101,.10),inset 0 5px 9px rgba(255,255,255,.9);
  animation:orbDeriva 16s linear infinite;transition:opacity .2s ease,filter .2s ease}
.orb-sat.long{font-size:clamp(.7rem,3vw,.88rem)}
@media (min-width:768px){.orb-sat{width:clamp(96px,11vw,116px);font-size:1.02rem}.orb-sat.long{font-size:.86rem}}
@keyframes orbFlota{50%{translate:0 -4px}}
/* deriva orbital: cada satélite recorre un círculo lento de ~10px alrededor de su ancla */
@keyframes orbDeriva{
  0%,100%{translate:0 -10px}
  12.5%{translate:7px -7px}
  25%{translate:10px 0}
  37.5%{translate:7px 7px}
  50%{translate:0 10px}
  62.5%{translate:-7px 7px}
  75%{translate:-10px 0}
  87.5%{translate:-7px -7px}
}
.orb-c-mint{background:linear-gradient(180deg,#E2FAEF,#BDEFD6)}
.orb-c-lila{background:linear-gradient(180deg,#EDE6FF,#CFBAF7)}
.orb-c-sol{background:linear-gradient(180deg,#FFF3CD,#FFDF92)}
.orb-c-verde{background:linear-gradient(180deg,#DDF6D0,#B4E7A4)}
.orb-s0{left:50%;top:17%}
.orb-s1{left:16%;top:40%;animation-delay:-4s;animation-direction:reverse}
.orb-s2{left:84%;top:58%;animation-delay:-8s}
.orb-s3{left:29%;top:76%;animation-delay:-12s;animation-direction:reverse}
@media (min-width:768px){
  .orb-s0{left:38%;top:16%}
  .orb-s1{left:13%;top:55%}
  .orb-s2{left:87%;top:38%}
  .orb-s3{left:67%;top:82%}
}
.orb-sat.bad{opacity:.4;filter:saturate(.5);cursor:default;animation:orbTiembla .3s ease}
@keyframes orbTiembla{25%{translate:-5px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.orb-sat.absorb{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.2);opacity:0;
  transition:transform .22s cubic-bezier(.5,0,.85,.55),opacity .18s ease .08s;animation:none;z-index:5}
/* nave exploradora: viaja en ~300 ms hasta el planeta que aciertas y se queda aparcada a su lado */
.orb-nave{position:absolute;left:0;top:0;width:44px;z-index:5;pointer-events:none;
  transform:translate(calc(var(--nx,0px) - 50%),calc(var(--ny,0px) - 50%)) rotate(var(--nr,0deg));
  transition:transform .16s ease}
.orb-nave.warp{transition:transform .3s cubic-bezier(.45,0,.2,1)}
@media (min-width:768px){.orb-nave{width:54px}}
.orb-nave svg{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 10px rgba(46,16,101,.28));
  animation:orbFlota 3.4s ease-in-out infinite;transition:transform .14s ease}
.orb-nave .orb-llama{opacity:.45;transition:opacity .12s}
.orb-nave.warp svg{animation:none;transform:scaleY(1.4) scaleX(.84)}   /* estiramiento = motion blur */
.orb-nave.warp .orb-llama{opacity:1}
.orb-nave.no svg{animation:orbTiembla .32s ease}
/* haz de luz: se dibuja siguiendo la trayectoria de la nave y se desvanece */
.orb-haz{position:absolute;height:6px;border-radius:99px;pointer-events:none;z-index:4;transform-origin:left center;
  background:linear-gradient(90deg,rgba(167,139,250,0) 0%,rgba(167,139,250,.6) 55%,rgba(255,255,255,.95) 100%);
  animation:orbHaz .64s ease-out forwards}
@keyframes orbHaz{
  0%{transform:rotate(var(--ha,0deg)) scaleX(0);opacity:1}
  46%{transform:rotate(var(--ha,0deg)) scaleX(1);opacity:.9}
  100%{transform:rotate(var(--ha,0deg)) scaleX(1);opacity:0}
}
.orb-particles{position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none}
.orb-p{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;animation:orbChispa .6s ease-out forwards}
@keyframes orbChispa{from{transform:translate(-50%,-50%);opacity:1}to{transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.orb-ring,.orb-dust,.orb-sat,.orb-core,.orb-core.pulse,.orb-nave svg{animation:none}.orb-p,.orb-haz{display:none}}

/* ── 🏎️ gran premio: circuito pseudo-3D ── */
main>#s-kart{max-width:1040px}
#kartStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#7FBFF7,#EAF7FF 58%,#7ECB5F 58%);
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
@media (min-width:768px){#kartStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#kartStage{height:430px}}
#kartStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.kt-hud{position:absolute;inset:12px 12px auto;display:flex;gap:10px;align-items:flex-start;justify-content:space-between;z-index:6;pointer-events:none}
.kt-prompt{background:var(--surface);border-radius:16px;padding:8px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;line-height:1.25;min-width:0}
.kt-prompt small{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text2)}
.kt-prompt b{font-size:clamp(1.45rem,5.5vw,2.1rem);font-weight:900;color:var(--deep);overflow-wrap:anywhere}
.kt-prompt.aro small{color:#B45309}
.kt-datos{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.kt-chip{background:var(--surface);padding:7px 14px;border-radius:99px;font-weight:800;font-size:.85rem;color:var(--deep);box-shadow:var(--shadow);white-space:nowrap}
.kt-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:7px;z-index:6;pointer-events:none}
.kt-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(46,16,101,.25)}
.kt-dots i.on{background:#F59E0B}
/* etiquetas flotantes del resultado (+100 / ¡TURBO! / la corrección) */
.kt-float{position:absolute;bottom:34%;transform:translateX(-50%);z-index:7;pointer-events:none;
  font-weight:900;font-size:clamp(1rem,3.6vw,1.4rem);white-space:nowrap;
  background:var(--surface);padding:7px 16px;border-radius:99px;box-shadow:var(--shadow);
  animation:ktFlota 1.25s ease-out forwards}
.kt-float.ok{color:#0E7A4E}
.kt-float.turbo{color:#B45309;background:#FFF7DF}
.kt-float.bad{color:var(--red)}
@keyframes ktFlota{from{opacity:0;translate:0 18px}18%{opacity:1;translate:0 0}75%{opacity:1}to{opacity:0;translate:0 -34px}}
/* semáforo de salida: 3 · 2 · 1 · ¡YA! */
.kt-cuenta{position:absolute;inset:0;display:grid;place-items:center;z-index:8;pointer-events:none;
  font-weight:900;font-size:clamp(3.4rem,16vw,6rem);color:#fff;
  -webkit-text-stroke:3px var(--deep);paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(46,16,101,.4),0 10px 30px rgba(46,16,101,.5)}
.kt-cuenta.pop{animation:ktPop .5s ease}
.kt-cuenta.go{color:#FFE45C;animation:ktPop .5s ease}
@keyframes ktPop{from{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.kt-float{animation:ktFlotaQuieta 1.25s ease-out forwards}.kt-cuenta.pop,.kt-cuenta.go{animation:none}}
@keyframes ktFlotaQuieta{from{opacity:0}15%{opacity:1}80%{opacity:1}to{opacity:0}}

/* ── 🀄 mahjong: mesa de papel de arroz + fichas marfil 3D ── */
main>#s-juego:has(.mj-board){max-width:1040px}
.mj-board{position:relative;margin:14px auto 4px;user-select:none;border-radius:22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='110' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23C23B4A' stroke-opacity='.09' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M22 34a12 12 0 1 1 24 0 8 8 0 1 1 16 0h26'/%3E%3Cpath d='M96 82a10 10 0 1 1 20 0 7 7 0 1 1 14 0h14'/%3E%3C/g%3E%3Ccircle cx='140' cy='18' r='1.6' fill='%23C23B4A' fill-opacity='.14'/%3E%3Ccircle cx='16' cy='90' r='1.6' fill='%23C23B4A' fill-opacity='.14'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 20%,#FFFBF3 0%,#FDF3E9 55%,#F8E7DA 100%);
  box-shadow:var(--shadow), inset 0 0 0 2px rgba(194,59,74,.14), inset 0 2px 16px rgba(194,59,74,.06)}
.mj-tile{position:absolute;border:0;padding:4% 2% 6%;cursor:pointer;border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(155deg,#FFFDF6 0%,#F5EEDC 100%);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(194,59,74,.14),
    0 3px 0 #E2D3B4, 0 5px 0 #C7B183, 0 8px 16px rgba(120,20,30,.22);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .3s ease}
.mj-tile:focus-visible{outline:3px solid #FFD54F;outline-offset:2px}
/* pisos altos: canto más grueso y sombra más larga = "está encima" */
.mj-z1{box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(194,59,74,.14),
  3px 5px 0 #E2D3B4, 5px 9px 0 #C7B183, 9px 16px 18px rgba(120,20,30,.32)}
.mj-z2{box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(194,59,74,.14),
  4px 7px 0 #E2D3B4, 7px 12px 0 #C7B183, 13px 24px 22px rgba(120,20,30,.36)}
/* tapada por otra ficha: le cae la sombra encima (pero se sigue leyendo) */
.mj-under{filter:brightness(.76) saturate(.82)}
/* solo con los costados ocupados: atenuado suave */
.mj-locked{filter:brightness(.88) saturate(.9)}
.mj-tile.sel{transform:translateY(-7px);
  box-shadow:0 0 0 3px #FFD54F, 0 0 16px rgba(255,213,79,.55), inset 0 1px 0 #fff,
  0 9px 0 #E2D3B4, 0 11px 0 #C7B183, 0 16px 18px rgba(10,5,30,.5)}
.mj-tile.hint{animation:mjHint .65s ease-in-out 3}
.mj-tile.bad{animation:mjShake .38s ease}
.mj-tile.out{transform:scale(1.28) rotate(4deg);opacity:0;pointer-events:none}
.mj-img{width:54%;aspect-ratio:1;object-fit:contain;border-radius:5px;background:#fff;
  opacity:0;transition:opacity .3s}
.mj-img.ready{opacity:1}
.mj-txt{font-weight:800;line-height:1.1;text-align:center;max-width:100%;white-space:nowrap;pointer-events:none}
.mj-es{color:#6D28D9}
@keyframes mjHint{50%{box-shadow:0 0 0 4px #FFD54F, 0 0 22px rgba(255,213,79,.8), inset 0 1px 0 #fff,
  0 3px 0 #E2D3B4, 0 5px 0 #C7B183, 0 9px 12px rgba(10,5,30,.5)}}
@keyframes mjShake{20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-4px 0}80%{translate:3px 0}}
@media (prefers-reduced-motion:reduce){.mj-tile.hint{animation:none;box-shadow:0 0 0 4px #FFD54F, 0 0 22px rgba(255,213,79,.8)}}

/* ── 🍜 sopa de letras: cocina calentita ── */
main>#s-sopa{max-width:1040px}
#sopaStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  /* mesa de madera cálida con vetas y luz de lámpara en el centro */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,196,110,.28), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(93deg, rgba(0,0,0,.09) 0 3px, rgba(0,0,0,0) 3px 54px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,0) 2px 9px),
    linear-gradient(180deg,#6B4226,#54301B 70%,#46271511);
  background-color:#5A3720;
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (min-width:768px){#sopaStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#sopaStage{height:430px}}
/* resplandor de chimenea: parpadea suave desde una esquina */
.sp-fuego{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 0% 100%, rgba(255,138,42,.34), rgba(255,138,42,0) 52%);
  animation:spFuego 3.2s ease-in-out infinite}
@keyframes spFuego{0%,100%{opacity:.55}18%{opacity:.9}37%{opacity:.62}58%{opacity:1}82%{opacity:.7}}
.sp-escena{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px}
@media (min-width:768px){.sp-escena{flex-direction:row;justify-content:center;gap:clamp(14px,3vw,38px);padding:16px}}
/* el cuenco */
.sp-ladobol{position:relative;flex:0 0 auto;height:min(100%,72vw);aspect-ratio:1;display:grid;place-items:center;min-height:0}
@media (min-width:768px){.sp-ladobol{height:min(92%, 56vw)}}
.sp-bol{position:relative;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#FFF3DC,#F2DDB4 58%,#D9BC8A 82%,#B99560);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 -10px 24px rgba(120,80,30,.35)}
.sp-caldo{position:absolute;inset:7.5%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 42% 34%,#F5A623,#E8890C 62%,#C96F06 88%,#B25F04);
  box-shadow:inset 0 10px 26px rgba(140,70,0,.5), inset 0 -6px 18px rgba(255,220,140,.25)}
/* letras de pasta */
.sp-grid{position:absolute;inset:13.5%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  touch-action:none;cursor:pointer}
.sp-grid>span{display:grid;place-items:center;font-weight:900;color:#FFE9B8;pointer-events:none;
  font-size:clamp(.72rem,3.1vw,1.35rem);text-shadow:0 2px 0 rgba(150,80,0,.55), 0 0 10px rgba(255,200,90,.25);
  animation:spFlota 4s ease-in-out infinite alternate}
@media (min-width:768px){.sp-grid>span{font-size:clamp(.9rem,2vw,1.4rem)}}
@keyframes spFlota{from{transform:translateY(-1.5px) rotate(-2.5deg)}to{transform:translateY(1.5px) rotate(2.5deg)}}
.sp-grid>span.pescada{color:#FFFDF6;text-shadow:0 2px 0 rgba(120,60,0,.6), 0 0 12px rgba(255,255,255,.5)}
/* marcador de arrastre (la "cucharada") */
.sp-capa{position:absolute;inset:0;pointer-events:none}
.sp-marca{position:absolute;border-radius:999px;border:3px solid rgba(255,255,255,.85);background:rgba(255,255,255,.22);
  box-shadow:0 2px 10px rgba(120,60,0,.3)}
.sp-marca.mal{border-color:rgba(220,38,38,.8);background:rgba(220,38,38,.2);animation:spMal .5s ease forwards}
@keyframes spMal{to{opacity:0}}
.sp-marca.bien{animation:spBien .35s ease}
@keyframes spBien{50%{transform:scale(1.07)}}
.sp-marca.c-mint{border-color:#34D399;background:rgba(52,211,153,.3)}
.sp-marca.c-lila{border-color:#A78BFA;background:rgba(167,139,250,.32)}
.sp-marca.c-sol{border-color:#FBBF24;background:rgba(251,191,36,.32)}
.sp-marca.c-rosa{border-color:#F472B6;background:rgba(244,114,182,.3)}
.sp-marca.c-cielo{border-color:#38BDF8;background:rgba(56,189,248,.3)}
.sp-marca.c-melon{border-color:#FB923C;background:rgba(251,146,60,.32)}
/* vapor: volutas que suben del cuenco */
.sp-vapor{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:60%;height:30%;pointer-events:none;z-index:3}
.sp-vapor i{position:absolute;bottom:0;width:26%;aspect-ratio:1/2.6;border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);filter:blur(6px);
  animation:spVapor 4.6s ease-in-out infinite}
.sp-vapor i:nth-child(1){left:8%}
.sp-vapor i:nth-child(2){left:38%;animation-delay:1.6s;animation-duration:5.4s}
.sp-vapor i:nth-child(3){left:66%;animation-delay:3s;animation-duration:4.2s}
@keyframes spVapor{
  0%{transform:translateY(34%) scaleX(.8);opacity:0}
  30%{opacity:.75}
  100%{transform:translateY(-78%) scaleX(1.25) translateX(14%);opacity:0}
}
/* burbuja del caldo */
.sp-burbuja{position:absolute;width:5.5%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%, rgba(255,235,180,.95), rgba(240,150,30,.55) 65%, rgba(200,110,10,.3));
  box-shadow:inset 0 -2px 4px rgba(160,80,0,.4);animation:spBurbuja .9s ease-out forwards}
@keyframes spBurbuja{0%{transform:scale(.2);opacity:0}45%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(1.25);opacity:0}}
/* cuchara de madera apoyada junto al cuenco */
.sp-cuchara{position:absolute;right:-7%;bottom:2%;width:34%;aspect-ratio:3.4/1;transform:rotate(-32deg);pointer-events:none;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}
.sp-cuchara::before{content:"";position:absolute;right:0;top:38%;width:72%;height:24%;border-radius:999px;
  background:linear-gradient(180deg,#8A8A97,#6E6E7C)}
.sp-cuchara i{position:absolute;left:0;top:0;width:34%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #9C9CAA, #71717F 70%, #5E5E6B);
  box-shadow:inset 0 4px 8px rgba(255,255,255,.25), inset 0 -5px 9px rgba(0,0,0,.35)}
/* recetario de pistas */
.sp-receta{flex:1 1 auto;min-width:0;max-width:340px;width:100%;background:#FFF8EC;border-radius:16px;padding:12px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px #EADFC8;overflow-y:auto;max-height:100%}
@media (min-width:768px){.sp-receta{max-width:300px;align-self:center;max-height:92%}}
.sp-receta h3{font-size:.8rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#8A5A00;margin:2px 0 8px}
.sp-clue{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;
  background:#FFFFFF;border:2px solid #EADFC8;border-radius:12px;padding:8px 12px;margin-bottom:6px;cursor:pointer;
  font-weight:800;font-size:.95rem;color:var(--deep);text-align:left}
.sp-clue:hover{border-color:#F5A623}
.sp-clue svg{width:18px;height:18px;flex:0 0 auto;color:#B45309}
/* pescada: sin tachar (la palabra en inglés es justo lo que hay que leer) — check verde y a otra cosa */
.sp-clue.done{background:#E7F6EE;border-color:#BFE5D0;color:#0E7A4E}
.sp-clue.done .sp-clue-es b{color:#047857}
.sp-restan{font-size:.8rem;font-weight:700;color:#8A5A00;text-align:center;margin-top:4px}
/* cartel final */
.sp-final{position:absolute;inset:0;display:grid;place-items:center;z-index:9;pointer-events:none;
  font-weight:900;font-size:clamp(1.8rem,7vw,3.2rem);color:#fff;
  text-shadow:0 4px 0 rgba(70,30,0,.5),0 10px 30px rgba(0,0,0,.6);animation:ktPop .5s ease}
@media (prefers-reduced-motion:reduce){
  .sp-fuego,.sp-vapor i,.sp-grid>span{animation:none}
  .sp-fuego{opacity:.7}
  .sp-burbuja{display:none}
}

/* ── 🏀 canasta ganadora: pabellón en perspectiva ── */
main>#s-basket{max-width:1040px}
#basketStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#2E1065,#4C1D95 34%,#E8C088 34%,#C68A4E);
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (min-width:768px){#basketStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#basketStage{height:430px}}
#basketStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* tablero de la canasta: el texto vive en DOM (nítido y con la keyword resaltada) */
.bk-tablero{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:2px;padding:5% 6% 4%;text-align:center;pointer-events:none;overflow:hidden}
.bk-tablero b{font-weight:900;color:var(--purple);font-size:clamp(1.2rem,5.2vw,2.2rem);line-height:1.05;
  overflow-wrap:anywhere;text-transform:capitalize}
.bk-tablero b.bien{color:#047857}
.bk-tablero b.mal{color:var(--red)}
/* la historia SOLO tras el lanzamiento: entra en fundido, nunca antes (sería pista) */
.bk-story{display:none;font-size:clamp(.62rem,2vw,.85rem);font-weight:700;color:var(--text);line-height:1.25}
.bk-story.on{display:block;animation:appear .4s ease}
/* keyword / significado: formato único .st-kw/.st-sig en base.css (aquí solo el peso del tablero) */
.bk-story .st-kw,.bk-story .st-sig{font-weight:900}
/* marcador arriba a la derecha */
.bk-hud{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:6;pointer-events:none}
/* balones con palabra: columna abajo a la derecha, como el boceto */
.bk-ops{position:absolute;right:10px;bottom:34px;display:flex;flex-direction:column;gap:8px;z-index:6;max-width:min(52%,300px)}
.bk-op{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;border:0;cursor:pointer;
  background:var(--surface);border-radius:999px;padding:6px 18px 6px 8px;box-shadow:0 8px 18px rgba(20,10,40,.35);
  font-weight:900;color:var(--deep);font-size:clamp(1rem,3.6vw,1.25rem);transition:transform .12s ease}
.bk-op:hover{transform:translateX(-4px)}
.bk-op:active{transform:scale(.96)}
.bk-op:disabled{cursor:default;opacity:.85}
.bk-op.sel{outline:3px solid var(--purple);outline-offset:2px}
.bk-op.okk{outline:3px solid #34D399;outline-offset:2px;opacity:1}
.bk-op.bad{outline:3px solid var(--red);outline-offset:2px}
.bk-word{overflow-wrap:anywhere;text-align:left}
.bk-num{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.68rem;font-weight:800;color:var(--text2);opacity:.5}
/* el balón del botón: naranja con costuras */
.bk-bola{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FB923C,#EA6A12 68%,#C2410C);box-shadow:inset 0 -3px 6px rgba(120,40,0,.4)}
.bk-bola::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#7C2D12;border-radius:2px}
.bk-bola::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#7C2D12;border-radius:2px}
.bk-bola i{position:absolute;inset:4px;border-radius:50%;border:2px solid #7C2D12;border-top-color:transparent;border-bottom-color:transparent;transform:rotate(24deg)}
@media (prefers-reduced-motion:reduce){.bk-story.on{animation:none}}

/* ── 🐸 la rana ninja: estanque en perspectiva ── */
main>#s-estanque{max-width:1040px}
#estanqueStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#9BD4F5,#D6EFFB 30%,#4FB3D9 30%,#2E8FBF);
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
@media (min-width:768px){#estanqueStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#estanqueStage{height:430px}}
#estanqueStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.eq-zonas{position:absolute;inset:0;display:flex;z-index:5}
.eq-zona{flex:1;background:none;border:0;cursor:pointer;border-radius:0}
.eq-zona:focus-visible{outline:3px solid var(--purple);outline-offset:-6px;border-radius:18px}

/* ── ⚽ penalti de oro: estadio en perspectiva ── */
main>#s-futbol{max-width:1040px}
#futbolStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#312E81,#4C1D95 30%,#3F9C46 30%,#2F7A36);
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (min-width:768px){#futbolStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#futbolStage{height:430px}}
#futbolStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* marcador electrónico arriba: significado en español + historia (solo tras el chut) */
.fb-panel{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  width:min(74%,480px);padding:8px 14px;border-radius:14px;
  background:rgba(17,10,40,.82);border:2px solid rgba(167,139,250,.5);box-shadow:0 8px 18px rgba(10,5,30,.4)}
.fb-panel b{font-weight:900;color:#FDE68A;font-size:clamp(1.15rem,5vw,2rem);line-height:1.05;
  overflow-wrap:anywhere;text-transform:capitalize}
.fb-panel b.bien{color:#6EE7B7}
.fb-panel b.mal{color:#FCA5A5}
.fb-panel .bk-story{color:#EDE9FE}
/* panel oscuro: mismos tonos, aclarados para que se lean (#7437E8 sobre fondo casi negro no llega a contraste) */
.fb-panel .bk-story .st-kw{color:#4ADE80}
.fb-panel .bk-story .st-sig{color:#C4B5FD}
/* carteles colgados en la portería: son los botones de chut */
.fb-card{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:linear-gradient(#FFFBEB,#FDE68A);border:3px solid #B45309;border-radius:12px;
  box-shadow:0 6px 14px rgba(10,5,30,.35);font-weight:900;color:#78350F;
  font-size:clamp(.9rem,3.4vw,1.3rem);transition:transform .12s ease;overflow:hidden}
.fb-card:hover{transform:translateY(-3px)}
.fb-card:active{transform:scale(.95)}
.fb-card:disabled{cursor:default;opacity:.92}
.fb-card.sel{outline:3px solid var(--purple);outline-offset:2px}
.fb-card.okk{outline:3px solid #34D399;outline-offset:2px;background:linear-gradient(#ECFDF5,#A7F3D0)}
.fb-card.bad{outline:3px solid var(--red);outline-offset:2px;background:linear-gradient(#FEF2F2,#FECACA)}
.fb-card .fb-word{overflow-wrap:anywhere;padding:0 6px;text-transform:capitalize}
.fb-card .fb-num{position:absolute;right:5px;bottom:3px;font-size:.6rem;font-weight:800;color:#B45309;opacity:.55}
/* en móvil el panel centrado ocupa casi todo el ancho: los chips bajan al césped */
@media (max-width:767px){#futbolStage .bk-hud{top:auto;bottom:34px}}

/* ── 🗝️ fuga de la mazmorra: pasillo medieval en perspectiva ── */
main>#s-fuga{max-width:1040px}
#fugaStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#151226,#241E3D 44%,#2B2440 44%,#463A5E);
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (min-width:768px){#fugaStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#fugaStage{height:430px}}
#fugaStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* placa de piedra arriba: significado en español + historia (solo tras responder) */
.fg-panel{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  width:min(74%,480px);padding:8px 14px;border-radius:14px;
  background:linear-gradient(#4A3F68,#332B4E);border:2px solid rgba(212,167,60,.55);box-shadow:0 8px 18px rgba(5,2,20,.5)}
.fg-panel b{font-weight:900;color:#FDE68A;font-size:clamp(1.15rem,5vw,2rem);line-height:1.05;
  overflow-wrap:anywhere;text-transform:capitalize}
.fg-panel b.bien{color:#6EE7B7}
.fg-panel b.mal{color:#FCA5A5}
.fg-panel .bk-story{color:#EDE9FE}
.fg-panel .bk-story .st-kw{color:#4ADE80}
.fg-panel .bk-story .st-sig{color:#C4B5FD}
/* tablillas rúnicas: columna abajo a la derecha, como los balones del basket */
.fg-ops{position:absolute;right:10px;bottom:34px;display:flex;flex-direction:column;gap:8px;z-index:6;max-width:min(52%,300px)}
.fg-op{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;border:0;cursor:pointer;
  background:linear-gradient(#5A4C7E,#3E3560);border:2px solid rgba(212,167,60,.5);border-radius:14px;
  padding:6px 18px 6px 10px;box-shadow:0 8px 18px rgba(5,2,20,.5);
  font-weight:900;color:#FDE68A;font-size:clamp(1rem,3.6vw,1.25rem);transition:transform .12s ease}
.fg-op:hover{transform:translateX(-4px)}
.fg-op:active{transform:scale(.96)}
.fg-op:disabled{cursor:default;opacity:.88}
.fg-op.sel{outline:3px solid var(--purple);outline-offset:2px}
.fg-op.okk{outline:3px solid #34D399;outline-offset:2px;opacity:1}
.fg-op.bad{outline:3px solid var(--red);outline-offset:2px}
.fg-op .fg-runa{flex:0 0 auto;font-size:1.3rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.fg-op .fg-word{overflow-wrap:anywhere;text-align:left;text-transform:capitalize}
.fg-op .fg-num{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.66rem;font-weight:800;color:#D4A73C;opacity:.6}
/* en móvil el panel centrado ocupa casi todo el ancho: los chips bajan a la izquierda */
@media (max-width:767px){#fugaStage .bk-hud{top:auto;bottom:34px;right:auto;left:10px;align-items:flex-start}}

/* ── 🔦 la mansión encantada: pasillo con fantasmas en perspectiva ──
   Reutiliza componentes existentes: placa .fg-panel, zonas .eq-zonas, chips .kt-chip,
   historia .bk-story y puntitos .kt-dots — aquí solo vive el lienzo del escenario. */
main>#s-mansion{max-width:1040px}
#mansionStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(#171226,#2A2140 44%,#3A2B33 44%,#5C4350);
  height:clamp(430px,124vw,560px);touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
@media (min-width:768px){#mansionStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#mansionStage{height:430px}}
#mansionStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* en móvil el panel centrado ocupa casi todo el ancho: los chips bajan a la izquierda */
@media (max-width:767px){#mansionStage .bk-hud{top:auto;bottom:34px;right:auto;left:10px;align-items:flex-start}}

/* ═══ 🫧 Burbujas de letras (port del BubbleGame de Unity) ═══
   Cartel arriba (imagen + enunciado + guiones) y las burbujas flotando debajo. Las burbujas
   son botones de verdad (teclado y lector de pantalla), no divs con onclick. */
.bb-stage{position:relative;width:100%;aspect-ratio:16/9;margin-top:14px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#CFF0FB 0%,#8FD3F0 45%,#5EB6E2 100%);box-shadow:var(--shadow)}
/* el cartel es una franja arriba; las burbujas viven POR DEBAJO (.bb-zona), nunca detrás de
   él: si flotan bajo el cartel, las letras se leen a medias y el juego se vuelve injusto */
.bb-cartel{position:relative;z-index:3;display:flex;align-items:center;gap:18px;
  margin:16px auto 0;padding:12px 24px;width:min(94%,660px);border-radius:20px;
  background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(14,30,78,.18)}
.bb-img{flex:0 0 auto;width:86px;height:86px;object-fit:contain;border-radius:14px;background:#F5F3FF;
  opacity:0;transition:opacity .3s ease}
.bb-img.on{opacity:1}
.bb-cartel .bb-pregunta{flex:1 1 auto}
.bb-pregunta{font-weight:800;font-size:1.05rem;color:var(--deep);text-align:center;line-height:1.35}
.bb-pregunta b{color:#43A047}                      /* el significado, en verde (como en Unity) */
/* el deletreo vive ABAJO, en blanco sobre el agua (como en Unity): el cartel pregunta,
   el fondo del mar es donde la palabra se va formando */
.bb-guiones{position:absolute;left:0;right:0;bottom:20px;z-index:4;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;pointer-events:none}
.bb-hueco{display:grid;place-items:center;width:38px;height:48px;border-bottom:4px solid rgba(255,255,255,.75);
  font-weight:900;font-size:1.75rem;color:#fff;text-transform:uppercase;
  text-shadow:0 3px 10px rgba(14,58,84,.45)}
.bb-hueco.pista{color:rgba(255,255,255,.72)}       /* las letras regaladas, más apagadas */
.bb-hueco.puesta{color:#fff;border-bottom-color:#fff;animation:bb-puesta .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bb-puesta{from{transform:translateY(-8px) scale(.7);opacity:0}to{transform:none;opacity:1}}

/* la zona de juego empieza donde acaba el cartel */
/* la zona de burbujas: entre el cartel y el deletreo */
.bb-zona{position:absolute;inset:auto 0 88px 0;top:140px;z-index:2}
.bb-burbuja{position:absolute;transform:translate(-50%,-50%);
  width:clamp(60px,8vw,86px);height:clamp(60px,8vw,86px);border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-weight:900;font-size:clamp(1.5rem,2.4vw,2rem);color:#0E3A54;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95),rgba(255,255,255,.45) 45%,rgba(140,215,245,.55));
  box-shadow:inset 0 -6px 14px rgba(14,58,84,.12),inset 0 6px 12px rgba(255,255,255,.7),0 6px 16px rgba(14,58,84,.18);
  animation:bb-flota var(--dur,1.8s) ease-in-out var(--fase,0s) infinite alternate}
@keyframes bb-flota{to{transform:translate(-50%,calc(-50% - var(--sube,20px)))}}
.bb-burbuja:hover{filter:brightness(1.08)}
.bb-burbuja:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
/* ── reventón ──
   La burbuja cede: se estira un pelín, se rompe de golpe (no se desvanece: revienta) y de
   su sitio salen un anillo de agua y una corona de gotitas. */
.bb-burbuja.pop{animation:bb-pop .26s cubic-bezier(.3,0,.7,1) forwards;pointer-events:none}
@keyframes bb-pop{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  35%{transform:translate(-50%,-50%) scale(1.18) scaleY(1.08);opacity:1}
  60%{transform:translate(-50%,-50%) scale(1.3);opacity:.55;filter:brightness(1.3)}
  100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}

.bb-fx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  width:0;height:0}
/* el anillo: la película de la burbuja al romperse */
.bb-anillo{position:absolute;left:0;top:0;width:calc(var(--r)*2);height:calc(var(--r)*2);
  margin:calc(var(--r)*-1) 0 0 calc(var(--r)*-1);border-radius:50%;
  border:3px solid rgba(255,255,255,.9);animation:bb-anillo .45s ease-out forwards}
@keyframes bb-anillo{0%{transform:scale(.85);opacity:.95;border-width:3px}
  100%{transform:scale(1.9);opacity:0;border-width:1px}}
/* las gotitas: salen en corona, cada una con su ángulo, tamaño y retardo */
.bb-gota{position:absolute;left:0;top:0;width:var(--tam);height:var(--tam);
  margin:calc(var(--tam)/-2) 0 0 calc(var(--tam)/-2);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(190,235,255,.9));
  box-shadow:0 1px 4px rgba(14,58,84,.25);
  transform:rotate(var(--ang)) translateX(0);
  animation:bb-gota .5s cubic-bezier(.2,.7,.3,1) var(--t) forwards}
@keyframes bb-gota{
  0%{transform:rotate(var(--ang)) translateX(0) scale(.6);opacity:0}
  20%{opacity:1;transform:rotate(var(--ang)) translateX(calc(var(--dist)*.4)) scale(1)}
  100%{transform:rotate(var(--ang)) translateX(var(--dist)) scale(.35);opacity:0}}
/* FlashRed: tres parpadeos, igual que en Unity */
.bb-burbuja.mal{animation:bb-mal .6s linear}
@keyframes bb-mal{0%,33%,66%{background:radial-gradient(circle at 32% 30%,#FFF,rgba(255,120,120,.85))}
  16%,50%,83%,100%{background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95),rgba(255,255,255,.45) 45%,rgba(140,215,245,.55))}}

.bb-congrat{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;
  font-family:inherit;font-weight:900;font-size:clamp(2rem,6vw,3rem);color:#fff;opacity:0;transform:scale(.2);
  text-shadow:0 6px 18px rgba(14,58,84,.45)}
.bb-congrat.on{animation:bb-congrat 1.5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes bb-congrat{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1)}
  75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.bb-burbuja{animation:none}.bb-gota,.bb-anillo{display:none}
  .bb-congrat.on{animation:none;opacity:1;transform:none}}

/* ── 📝 Gramática: completa la frase (POC) ───────────────────────────────── */
.gr-instr{text-align:center;color:var(--text2);font-weight:700;margin:2px 0 12px}
.gr-frase{text-align:center;font-size:clamp(1.5rem,6vw,2.2rem);font-weight:800;line-height:1.4;
  color:var(--text);word-break:break-word}
.gr-hueco{display:inline-block;min-width:2.2em;padding:0 .12em;border-bottom:4px solid var(--border);
  color:var(--text2);vertical-align:baseline}
.gr-hueco.si{color:var(--green);border-bottom-color:var(--green)}
.gr-hueco.no{color:var(--red);border-bottom-color:var(--red)}
.gr-es{text-align:center;font-size:clamp(.95rem,3.5vw,1.15rem);color:var(--text2);margin:10px 0 20px}
.gr-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:360px){.gr-ops{grid-template-columns:1fr}}
.gr-op{min-height:56px;border-radius:16px;border:3px solid var(--border);background:var(--bg);
  font-family:inherit;font-size:clamp(1.1rem,4.5vw,1.4rem);font-weight:800;color:var(--text);
  cursor:pointer;padding:10px 8px;transition:transform .08s,border-color .15s,background .15s}
.gr-op:active{transform:scale(.96)}
.gr-op:disabled{cursor:default}
.gr-op.okk{border-color:var(--green);background:var(--green-bg)}
.gr-op.bad{border-color:var(--red);background:#FDECEC}
.gr-status{text-align:center;min-height:1.4em;margin-top:14px;font-weight:700;color:var(--text2)}
.gr-fin{text-align:center;padding:16px 8px}
.gr-fin-emoji{font-size:3.4rem;line-height:1}
.gr-fin-score{font-size:2rem;margin:8px 0 2px;color:var(--text)}
.gr-fin-score b{color:var(--green)}
.gr-fin-msg{color:var(--text2);font-weight:700;margin-bottom:20px}
.gr-fin-btns{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto}

/* ── 🐍 la serpiente: integrada al sistema (tema CLARO blanco-verde, tamaño estándar, paneles kt-*) ── */
main>#s-snake{max-width:1040px}
/* mismo tamaño exacto que el resto de escenarios; a la derecha vive el D-pad */
#snakeStage{position:relative;width:100%;margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:10px;
  color:var(--text);font-family:'Nunito','Kumbh Sans',system-ui,sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle at 50% -12%, #FFFFFF, transparent 55%),linear-gradient(180deg,#F4FCF6 0%,#E6F6EA 100%);
  height:clamp(430px,124vw,560px)}
@media (min-width:768px){#snakeStage{height:auto;aspect-ratio:16/9;min-height:430px}}
@media (max-height:480px){#snakeStage{height:430px}}
/* tablero claro: el canvas + todos los paneles flotan dentro (patrón de los demás juegos) */
.sk-board{position:relative;flex:0 0 auto;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #FFFFFF, #F1FBF3 46%, #DFF3E4 100%);
  border:1px solid #CDEBD5;box-shadow:0 4px 18px rgba(6,78,59,.10)}
.sk-board.shake{animation:skShake .36s cubic-bezier(.36,.07,.19,.97)}
@keyframes skShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,1px)}40%{transform:translate(7px,-2px)}60%{transform:translate(-5px,2px)}80%{transform:translate(4px,-1px)}}
#skGame{display:block;border-radius:18px}
#skFx{position:absolute;left:0;top:0;pointer-events:none;border-radius:18px}
/* barra superior de paneles: vidas a la izquierda; combo · objetivo · voz a la derecha */
.sk-top{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:flex-start;gap:8px;z-index:5;pointer-events:none}
.sk-hearts{color:var(--red);letter-spacing:1px;font-size:.95rem}
.sk-hearts span.lost{color:#D8DCE6}
/* dots de progreso (una por frase) — reusa .kt-dots, pero en claro los tiñe de verde */
#skBoard .kt-dots i{background:rgba(6,95,70,.22)}
#skBoard .kt-dots i.on{background:#16A34A}
/* frase que se forma (letras de colores) sobre una tira clara translúcida */
.sk-phrase{position:absolute;left:12px;right:12px;bottom:34px;z-index:5;pointer-events:none;text-align:center;
  font-weight:900;letter-spacing:.1em;line-height:1.2;word-break:break-word;min-height:0;
  background:rgba(255,255,255,.72);border:1px solid #DCEFE1;border-radius:14px;padding:5px 10px;backdrop-filter:blur(3px)}
.sk-phrase:empty,.sk-phrase:has(>.sk-caret:only-child){background:transparent;border-color:transparent}
.sk-phrase .sk-caret{display:inline-block;width:2px;height:1em;background:#16A34A;vertical-align:middle;margin-left:2px;animation:skBlink .9s steps(1) infinite}
@keyframes skBlink{50%{opacity:0}}
/* aviso «muévela para empezar» — tarjeta bonita con flechas */
.sk-go{position:absolute;inset:0;display:none;align-items:flex-start;justify-content:center;text-align:center;padding:0 16px;z-index:6;pointer-events:none}
.sk-go.show{display:flex;animation:skGoFloat 1.6s ease-in-out infinite}
/* arriba, para no tapar la serpiente (que arranca en el centro); translúcida por si acaso */
.sk-go-card{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:260px;margin-top:clamp(44px,13%,68px);
  background:rgba(255,255,255,.86);border:1px solid #C7E9D1;border-radius:20px;padding:13px 18px;backdrop-filter:blur(2px);
  box-shadow:0 12px 30px rgba(6,78,59,.22)}
.sk-go-arrows{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.sk-go-arrows i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-style:normal;font-weight:900;
  font-size:1.05rem;color:#15803D;background:#EAF8EE;border:1px solid #C7E9D1}
.sk-go-txt{font-weight:900;font-size:clamp(.95rem,3.6vw,1.15rem);color:var(--deep);line-height:1.25}
@keyframes skGoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sk-flash{position:absolute;inset:0;background:#EF4444;opacity:0;pointer-events:none;border-radius:18px;transition:opacity .12s ease-out;z-index:4}
.sk-flash.on{opacity:.28}
.sk-veil{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.6);backdrop-filter:blur(4px);
  border-radius:18px;font-weight:900;letter-spacing:.4em;font-size:1.5rem;color:var(--deep);z-index:6}
.sk-veil.visible{display:flex}
.sk-swipe{position:absolute;pointer-events:none;font-size:2.2rem;color:#16A34A;
  text-shadow:0 0 14px rgba(22,163,74,.5);opacity:0;transform:translate(-50%,-50%) scale(.6);z-index:6;font-weight:800}
.sk-swipe.show{animation:skSwipe .55s cubic-bezier(.2,.8,.3,1)}
@keyframes skSwipe{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:.95;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
/* cartel del español antes de cada frase (overlay claro) */
.sk-study{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
  background:rgba(247,255,249,.94);backdrop-filter:blur(8px);border-radius:18px;padding:22px 18px;z-index:7}
.sk-study.visible{display:flex}
.sk-study-card{max-width:460px}
.sk-study-card h2{font-weight:900;font-size:.95rem;margin:0 0 12px;color:#16A34A;text-transform:uppercase;letter-spacing:.12em}
.sk-intro-es{font-weight:900;font-size:clamp(1.6rem,7vw,2.4rem);color:var(--deep);line-height:1.15}
.sk-hint{margin-top:14px;font-size:.62rem;color:var(--text2);letter-spacing:.12em;text-transform:uppercase}
/* panel de flechas (siempre visible, a la derecha del tablero) */
.sk-pad{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,clamp(40px,10.5vw,56px));grid-template-rows:repeat(3,clamp(40px,10.5vw,56px));gap:6px}
.sk-key{border:1px solid #C7E9D1;background:#FFFFFF;border-radius:16px;color:#15803D;
  font-size:1.3rem;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;
  display:grid;place-items:center;box-shadow:var(--shadow)}
.sk-key:hover{background:#F0FBF3}
.sk-key:active{background:#DCF5E3;transform:scale(.94)}
.sk-up{grid-column:2;grid-row:1}.sk-left{grid-column:1;grid-row:2}.sk-right{grid-column:3;grid-row:2}.sk-down{grid-column:2;grid-row:3}
@media (prefers-reduced-motion:reduce){.sk-board.shake{animation:none}.sk-swipe.show{animation:none}.sk-go.show{animation:none}}

/* ── 🤖 Tutor IA (POC) ─────────────────────────────────────────────────────────
   Prepy con una boca animada encima que se abre y cierra mientras habla (Web Speech).
   La boca va posicionada en % sobre la carita del PNG, así escala con la imagen. */
/* el Tutor va ancho (dos columnas): amplía la screen, que por defecto se limita a 560px */
main>#s-juego:has(.tutor){max-width:1000px}
.tutor{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 4px}

/* fila de desplegables (IA · Idioma · Voz) */
.tutor-sels{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tutor-ia{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text2);font-weight:700}
.tutor-ia select{font:inherit;font-weight:700;color:var(--deep);background:var(--surface);
  border:1.5px solid var(--border);border-radius:10px;padding:6px 10px;cursor:pointer}

/* ── TARJETA DE CONVERSACIÓN a DOS COLUMNAS: Prepy grande + botones a la IZQUIERDA,
   chat a la DERECHA. La altura es estable: solo el chat scrollea por dentro. ── */
.tutor-card{width:min(920px,96vw);display:flex;align-items:stretch;gap:22px;padding:22px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:24px;
  box-shadow:0 14px 40px rgba(46,16,101,.12)}

/* columna izquierda: Prepy PROTAGONISTA (más ancha que el chat) + estado + botones.
   Centrada verticalmente respecto al chat: bloque compacto, sin huecos muertos. */
.tutor-left{flex:0 0 clamp(300px,44%,440px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-align:center}
.tutor-ava{position:relative;width:min(270px,90%);animation:tutorBob 3.2s ease-in-out infinite}
.tutor-ava.talking{animation:tutorBob 1.1s ease-in-out infinite}
@keyframes tutorBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tutor-ava img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* boca de Prepy sobre el hueco bajo los ojos (~50% x, ~61% y); escala con la imagen */
.tutor-boca{position:absolute;left:50%;top:61%;width:15%;height:9%;
  transform:translate(-50%,-50%) scaleY(.28);transform-origin:center center;
  background:#0B0B1E;border-radius:0 0 999px 999px / 0 0 999px 999px;
  border-top-left-radius:999px;border-top-right-radius:999px;transition:transform .12s ease}
.tutor-boca.talking{animation:tutorBoca .34s ease-in-out infinite}
@keyframes tutorBoca{0%,100%{transform:translate(-50%,-50%) scaleY(.22)}50%{transform:translate(-50%,-50%) scaleY(1)}}
.tutor-title{font-size:1.25rem;color:var(--deep);line-height:1.1}

/* chip de ESTADO con color: se entiende sin leer (verde te escucho · morado hablo yo · gris parado) */
.tutor-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;
  background:#F4F2FC;border:1.5px solid var(--border);font-size:.88rem;font-weight:700;color:var(--text2);
  transition:background .2s,border-color .2s}
.tutor-chip i{width:10px;height:10px;border-radius:50%;background:#C4BFE0;flex:0 0 auto;transition:background .2s}
.tutor-chip[data-st="conecta"]{border-color:#FBBF24;background:#FEF8E7}
.tutor-chip[data-st="conecta"] i{background:#F59E0B;animation:chipBlink 1s ease-in-out infinite}
.tutor-chip[data-st="escucha"]{border-color:#6EE7B7;background:#ECFDF5;color:#047857}
.tutor-chip[data-st="escucha"] i{background:#10B981;animation:chipBlink 1.6s ease-in-out infinite}
.tutor-chip[data-st="habla"]{border-color:#C4B5FD;background:#F3EFFF;color:var(--purple)}
.tutor-chip[data-st="habla"] i{background:var(--purple);animation:chipBlink .7s ease-in-out infinite}
@keyframes chipBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* columna derecha: cabecera (título + ⚙️ ajustes) + ventana de chat que llena la altura */
.tutor-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.tutor-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tutor-chat-tit{font-size:.9rem;font-weight:800;color:var(--purple);letter-spacing:.01em}
.tutor-cfg-btn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);cursor:pointer;transition:transform .3s ease,color .15s,border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center}
.tutor-cfg-btn svg{width:20px;height:20px}
.tutor-cfg-btn:hover{border-color:var(--purple);background:#F3EFFF;color:var(--purple);transform:rotate(90deg)}

/* diálogo de ajustes (IA · Idioma · Voz) */
.tutor-cfg-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(20,8,50,.5);backdrop-filter:blur(2px)}
.tutor-cfg-ov[hidden]{display:none}
.tutor-cfg-card{width:min(380px,92vw);display:flex;flex-direction:column;gap:14px;padding:20px;
  background:var(--surface);border-radius:20px;box-shadow:0 24px 60px rgba(20,8,50,.4);animation:ttPop .18s ease-out}
.tutor-cfg-headr{display:flex;align-items:center;justify-content:space-between}
.tutor-cfg-headr b{font-size:1.15rem;color:var(--deep)}
.tutor-cfg-x{width:38px;height:38px;border:0;border-radius:50%;background:#F1EEFC;color:var(--purple);
  font-size:1rem;font-weight:800;cursor:pointer;transition:.15s}
.tutor-cfg-x:hover{background:#E4DDFB}
.tutor-cfg-card .tutor-ia{width:100%;justify-content:space-between}
.tutor-cfg-card .tutor-ia select{flex:1;margin-left:12px;max-width:70%}

/* ── ventana de chat: ÚNICO elemento con scroll (ALTURA FIJA, sin flex-grow: no debe
   crecer con el contenido — si crece, empuja los botones; el scroll va SOLO por dentro) ── */
.tutor-chat{flex:0 0 auto;height:clamp(280px,48vh,460px);min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:18px 16px;background:radial-gradient(120% 60% at 50% 0%,#F7F4FF 0%,#FCFBFF 60%);
  border:1.5px solid var(--border);border-radius:18px;
  scroll-behavior:smooth;text-align:left;-webkit-overflow-scrolling:touch}
.tutor-chat:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.tutor-chat::-webkit-scrollbar{width:8px}
.tutor-chat::-webkit-scrollbar-thumb{background:#DDD6FE;border-radius:99px}
.tutor-chat-vacio{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--text2);font-weight:600;font-size:.94rem;text-align:center;line-height:1.45;max-width:280px}
.tutor-chat-vacio .tt-emoji{font-size:2.2rem;line-height:1}

/* ── burbujas: nombre en su propia línea (bien separado del texto) + color por hablante ── */
.tt-msg{max-width:82%;flex:0 0 auto;display:flex;flex-direction:column;padding:10px 14px 12px;border-radius:18px;
  box-shadow:0 2px 8px rgba(46,16,101,.07);animation:ttPop .18s ease-out}
.tt-msg .tt-name{font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.tt-msg .tt-txt{font-size:1rem;font-weight:600;line-height:1.4;color:var(--text)}
/* Prepy: burbuja lila a la IZQUIERDA, nombre morado */
.tt-msg.prepy{align-self:flex-start;background:#EDE9FE;border-bottom-left-radius:6px}
.tt-msg.prepy .tt-name{color:var(--purple)}
/* el niño (Dave): burbuja turquesa a la DERECHA, nombre teal */
.tt-msg.tu{align-self:flex-end;background:#CFF4EC;border-bottom-right-radius:6px}
.tt-msg.tu .tt-name{color:#0C8577;text-align:right}
.tt-msg.tu .tt-txt{color:#0B3D38}
@keyframes ttPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* botones: bajo Prepy, en la columna izquierda. "Hablar" es LA acción → grande y con latido */
.tutor-btns{display:flex;flex-direction:column;gap:10px;width:min(300px,100%);margin-top:6px}
.tutor-btns .btn{width:100%}
.tutor-btns .tutor-mic{font-size:1.08rem;padding:16px 20px;border-radius:99px}
.tutor-btns .tutor-mic.pulse{animation:micPulse 2.2s ease-in-out infinite}
@keyframes micPulse{
  0%,100%{transform:scale(1);box-shadow:0 6px 18px rgba(124,58,237,.35)}
  50%    {transform:scale(1.035);box-shadow:0 8px 26px rgba(124,58,237,.5)}
}
.tutor-btns .btn.danger{background:#E6484D;color:#fff;animation:none}
.tutor-btns .btn.danger:hover{background:#d63b40}

/* "Prepy está escribiendo…": tres puntitos que laten mientras piensa la respuesta */
.tt-typing .tt-dots{display:inline-flex;gap:5px;padding:4px 0 2px}
.tt-typing .tt-dots i{width:8px;height:8px;border-radius:50%;background:var(--purple);opacity:.35;
  animation:ttDot 1.2s ease-in-out infinite}
.tt-typing .tt-dots i:nth-child(2){animation-delay:.18s}
.tt-typing .tt-dots i:nth-child(3){animation-delay:.36s}
@keyframes ttDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* pill de rótulo vacío (el Tutor no usa "TUTOR IA": Prepy ya es el título) → fuera */
.prog-pill:empty{display:none}

/* móvil: las dos columnas se apilan (Prepy arriba, chat debajo) */
@media (max-width:720px){
  .tutor-card{flex-direction:column;gap:16px;padding:18px}
  .tutor-left{flex:none;width:100%}
  .tutor-ava{width:min(160px,44%)}
  .tutor-btns{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  .tutor-boca.talking{animation:none;transform:translate(-50%,-50%) scaleY(.7)}
  .tutor-chat{scroll-behavior:auto}.tt-msg{animation:none}
  .tutor-ava,.tutor-ava.talking{animation:none}
  .tutor-btns .tutor-mic.pulse{animation:none}
  .tutor-chip i{animation:none!important}
  .tt-typing .tt-dots i{animation:none;opacity:.7}
}