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

/* ═══ reset + variables + tipografía base ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --purple:#7C3AED;--purple-hover:#6D28D9;--purple-light:#A78BFA;--deep:#2E1065;
  --bg:#F1F0FF;--surface:#fff;--text:#1E1B4B;--text2:#6B7280;--border:#E5E3F2;
  --green:#047857;--green-bg:#E7F6EE;--amber:#B45309;--amber-bg:#FDF3DC;--red:#DC2626;
  --shadow:0 6px 24px rgba(46,16,101,.08);
}
html{scroll-behavior:smooth}
body{font-family:'Nunito','Kumbh Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
img{max-width:100%;display:block}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══ titulares, tarjetas, botones, formularios, opciones, chips, slider, palabra grande ═══ */
h1{font-size:clamp(1.35rem,5vw,1.8rem);font-weight:800;color:var(--deep);line-height:1.2;text-wrap:balance}
h2{font-size:clamp(1.2rem,4vw,1.4rem);font-weight:800;color:var(--deep)}
p.sub{color:var(--text2);margin-top:6px}
.card{background:var(--surface);border-radius:22px;padding:22px;box-shadow:var(--shadow);margin-top:16px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;min-height:54px;
  border:0;border-radius:99px;background:var(--purple);color:#fff;font-weight:700;font-size:1.05rem;
  cursor:pointer;transition:background .2s,transform .15s;margin:14px auto 0;padding:14px 32px}
.btn:hover{background:var(--purple-hover)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.35;cursor:default}
.btn:disabled:hover{background:var(--purple)}
.btn:disabled:active{transform:none}
.btn.ghost{background:var(--surface);color:var(--purple);box-shadow:var(--shadow)}
.btn.ghost:hover{background:#FBFAFF}
.btn.white{background:var(--surface);color:var(--deep);box-shadow:var(--shadow)}
.btn.white:hover{background:#FBFAFF}

.field{margin-top:14px;text-align:left}
.field label{font-weight:700;font-size:.9rem;color:var(--deep);display:block;margin-bottom:6px}
.field input{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--border);border-radius:12px;font-size:16px;background:#fff}
.field input:focus{border-color:var(--purple);outline:none}
/* ── caja de respuesta reutilizable (escribir en inglés): test de vocabulario + minijuegos.
   Anillo de foco con box-shadow y outline:none para evitar el doble recuadro. ── */
.inp-respuesta{width:min(340px,100%);min-height:52px;margin:12px auto 0;padding:10px 16px;
  border:2px solid var(--border);border-radius:14px;font-size:1.05rem;text-align:center;background:#fff;
  display:block;outline:none;transition:border-color .18s,box-shadow .18s}
.inp-respuesta:hover{border-color:#CFC7F5}
.inp-respuesta:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(124,58,237,.13)}
.msg{display:none;margin-top:12px;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:600}
.msg.err{display:block;background:#FDECEC;color:var(--red)}
.msg.ok{display:block;background:var(--green-bg);color:var(--green)}

.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:10px;padding:12px 16px;
  border:2px solid var(--border);border-radius:16px;background:#fff;cursor:pointer;font-weight:600;text-align:left;transition:border-color .15s,transform .15s,box-shadow .2s}
.opt:hover{border-color:var(--purple-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(46,16,101,.13)}
.opt:active{transform:scale(.97)}
.opt.sel{border-color:var(--purple);background:#F5F3FF}
.opt .big{font-size:1.4rem}
.avgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.avgrid .opt{flex-direction:column;min-height:auto;padding:14px}
.avgrid img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.chip{min-height:48px;padding:12px 20px;border-radius:99px;border:2px solid var(--border);background:#fff;font-weight:700;color:var(--deep);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .2s}
.chip:hover{border-color:var(--purple-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(46,16,101,.13)}
.chip:active{transform:scale(.96)}
.chip.sel{border-color:var(--purple);background:var(--purple);color:#fff}
.chip.locked{display:flex;flex-direction:column;align-items:center;gap:2px;background:#EEECF9;color:#BCB6DD;border-color:#EEECF9;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.chip.locked span{font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#BCB6DD}
.chip.locked:hover{transform:none;box-shadow:none;border-color:#EEECF9}
.slider-wrap{margin-top:18px;text-align:center}
.slider-wrap .num{font-size:2.4rem;font-weight:800;color:var(--purple-hover)}
input[type=range]{width:100%;accent-color:var(--purple);height:44px}

.prog-pill{display:inline-block;background:var(--surface);color:var(--purple);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 16px;border-radius:99px;margin-bottom:10px;box-shadow:var(--shadow)}
.bigword{font-size:clamp(2rem,9vw,2.9rem);font-weight:800;color:var(--deep);line-height:1.1;text-align:center}
.ipa{color:var(--purple);font-weight:700;text-align:center;margin-top:4px}
.ipa .pron{color:var(--green)}
.ipa .dash{color:#1a1a1a}
.speak{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  border:0;background:var(--surface);color:var(--purple);box-shadow:var(--shadow);cursor:pointer;margin:12px auto 0;transition:transform .15s}
.speak:active{transform:scale(.92)}
.speak svg{width:22px;height:22px}
.center{text-align:center}

/* ═══ toast, loading, spinner ═══ */
#toast.ok{background:var(--green)}
/* z-index 200: POR ENCIMA de todo, overlays incluidos (el paywall va a 150). Estaba en 99 y
   quedaba dibujado DEBAJO del paywall: los avisos existían, pero eran invisibles — pulsabas
   y "no pasaba nada". Un aviso que no se ve es peor que no tenerlo. */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--deep);color:#fff;
  padding:12px 20px;border-radius:12px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s;z-index:200;max-width:90vw;text-align:center}
#toast.show{opacity:1}
/* botones flotantes admin: atajos rápidos de estudio/test (ver comentario en index.html).
   Fixed + esquina inferior-derecha → no participan del layout, no descolocan nada.
   Solo visibles con modo admin ON, controlado por JS (vocab.js). Apilados en columna
   para no solaparse cuando ambos están visibles a la vez (pantalla de estudio). */
#adminReveal,#adminSkip{position:fixed;right:calc(16px + env(safe-area-inset-right));
  width:48px;height:48px;border:0;border-radius:50%;background:var(--purple);color:#fff;
  font-size:1.4rem;font-weight:800;line-height:1;cursor:pointer;z-index:55;
  box-shadow:var(--shadow);opacity:.55;transition:opacity .15s,transform .15s}
#adminReveal:hover,#adminSkip:hover{background:var(--purple-hover);opacity:1;transform:scale(1.05)}
#adminReveal[hidden],#adminSkip[hidden]{display:none}
#adminSkip{bottom:calc(16px + env(safe-area-inset-bottom))}
#adminReveal{bottom:calc(72px + env(safe-area-inset-bottom))}

/* ── previsualización responsive (solo admin) ── los botones que la activan viven en
   la sección Admin del perfil (.admin-shortcut, ver shell.css); esto es solo el visor
   a pantalla completa: marco de dispositivo + iframe (core/preview.js). */
#pvOverlay{position:fixed;inset:0;z-index:80;background:rgba(30,20,60,.74);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#pvOverlay[hidden]{display:none}
.pv-bar{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:.85rem}
.pv-bar button{border:0;background:rgba(255,255,255,.16);color:#fff;width:34px;height:34px;
  border-radius:50%;cursor:pointer;font-size:1rem;line-height:1}
.pv-bar button:hover{background:rgba(255,255,255,.3)}
/* el marco se escala con transform para caber en pantalla; el slot reserva el tamaño ya
   escalado para que el flex del overlay lo centre de verdad */
#pvSlot{position:relative}
#pvMarco{position:absolute;left:0;top:0;transform-origin:top left;background:#101014;
  border-radius:40px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
#pvMarco iframe{border:0;display:block;background:#fff;border-radius:26px}

/* ── apertura del álbum de cromos: portada verde en 3D antes de la rejilla (recompensas.js) ──
   El grid real ya está pintado detrás; el overlay solo hace de telón hasta que la tapa gira. */
#albCoverOv{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 120% at 50% 38%,rgba(6,95,70,.4),rgba(12,10,26,.88));
  opacity:0;transition:opacity .5s ease}
#albCoverOv[hidden]{display:none}
#albCoverOv.open{opacity:1}
/* El libro cerrado se centra solo. Al abrirse, la tapa gira hacia la IZQUIERDA sobre su
   lomo y deja a la vista la página de dentro, que está justo DEBAJO (mismo rectángulo,
   ver #albCoverPagD) — como un álbum de verdad. Como el libro abierto ocupa el doble de
   ancho hacia la izquierda, se desplaza medio ancho a la derecha para que el conjunto
   abierto quede centrado en pantalla. Topes de ancho: 38vw (abierto son 2×38vw = 76vw,
   cabe hasta en un móvil de 320px) y 39vh (con el alto 4/3 del ancho, evita que el libro
   se salga por arriba/abajo en pantallas bajas). */
#albCoverBook{position:relative;perspective:1700px;width:min(300px,38vw,39vh);aspect-ratio:3/4;
  transform:scale(.82);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
#albCoverOv.open #albCoverBook{transform:scale(1);opacity:1}
/* al abrir, acompaña el giro con el mismo tiempo/curva que la tapa (ver #albCoverTapa) */
#albCoverOv.abriendo #albCoverBook{transform:scale(1) translateX(50%);
  transition:transform 1.05s cubic-bezier(.6,.02,.3,1) .25s}
/* la tapa gira ENTERA (transform-style:preserve-3d); dentro, dos caras superpuestas con
   backface-visibility:hidden — cada una solo se ve por su lado correcto, nunca espejada.
   .albc-dorso viene pre-rotada 180° para que, cuando la tapa gire, quede de frente al
   llegar (no al revés). Termina en -170°: casi plana, se lee bien, sin llegar a 180°
   exactos (evita que la cara de fuera "se asome" por el otro lado en algunos navegadores). */
#albCoverTapa{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;transform-origin:left center;
  transition:transform 1.05s cubic-bezier(.6,.02,.3,1) .25s}
#albCoverOv.abriendo #albCoverTapa{transform:rotateY(-170deg)}
/* esquinas: cuadradas del lado del lomo, redondeadas por fuera (la cara de dentro está
   girada 180°, así que su lomo cae al otro lado y lleva el radio invertido) */
.albc-cara{position:absolute;inset:0;border-radius:6px 18px 18px 6px;backface-visibility:hidden;padding:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  border:3px solid rgba(255,255,255,.22)}
.albc-frente{background:linear-gradient(155deg,#12B981 0%,#0D9467 55%,#087355 100%);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -12px 30px rgba(0,0,0,.25)}
#albCoverLogo{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.albc-frente h2{margin:0;color:#fff;font-size:1.05rem;font-weight:900;text-align:center;line-height:1.25;
  text-shadow:0 2px 6px rgba(0,0,0,.25)}
/* interior: página crema, lo primero que se ve al abrir el álbum */
.albc-dorso{transform:rotateY(180deg);border-radius:18px 6px 6px 18px;
  background:radial-gradient(circle at 30% 20%,#FFFDF6 0%,#FBF3DE 55%,#F3E4C4 100%);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.45),inset 0 0 0 9px rgba(255,255,255,.55)}
.albc-dorso-ico{font-size:2.1rem;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.albc-dorso p{margin:0;color:var(--deep);font-size:.88rem;font-weight:900;text-align:center;line-height:1.3}
/* página de DENTRO: ocupa el MISMO rectángulo que la tapa y vive DEBAJO de ella (z-index
   menor). No se anima: la tapa se aparta girando y la va destapando, igual que al abrir un
   álbum de verdad. Muestra los huecos de cartas con el mismo lenguaje visual que la rejilla
   real (.alb-card.vacia en recompensas.css: borde discontinuo + candado). */
#albCoverPagD{position:absolute;inset:0;z-index:1;border-radius:6px 18px 18px 6px;
  background:linear-gradient(160deg,#FBFAFF 0%,#F1EEFB 100%);border:3px solid rgba(255,255,255,.6);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.4);padding:11px}
.albc-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;height:100%}
.albc-slot{display:flex;align-items:center;justify-content:center;border:2px dashed #DDD6FE;
  border-radius:8px;background:#F8F7FE}
.albc-slot svg{width:17px;height:17px;color:#B9B4D8}
#albCoverChk{display:flex;align-items:center;gap:8px;color:#EAF7F0;font-weight:700;font-size:.82rem;
  cursor:pointer;user-select:none;opacity:0;transition:opacity .3s ease}
#albCoverOv.conCheck #albCoverChk{opacity:1}
#albCoverChk input{width:18px;height:18px;accent-color:#22C55E;cursor:pointer}
.loading{text-align:center;padding:30px;color:var(--text2)}
.spin{display:inline-block;width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:sp 1s linear infinite;margin-bottom:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.gbtn-ico{width:20px;height:20px}

/* ═══ modal de confirmación ═══ */
/* ── modal de confirmación ── */
#confirmOv{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:150;
  background:rgba(46,16,101,.5);backdrop-filter:blur(4px);padding:20px}
#confirmOv.on{display:flex;animation:appear .25s ease}
.confirm-card{background:var(--surface);border-radius:24px;padding:30px 26px 24px;text-align:center;max-width:min(400px,92vw);
  box-shadow:0 26px 70px rgba(0,0,0,.35);animation:lvlIn .4s cubic-bezier(.22,1.4,.36,1)}
.confirm-emoji{font-size:2.4rem}
/* icono del portal: la flecha sale y vuelve, el halo respira */
.confirm-ico{width:92px;margin:0 auto}
.confirm-ico svg{width:100%;height:auto;display:block;overflow:visible}
.confirm-ico .cf-flecha{animation:cf-sale 2.2s ease-in-out infinite}
.confirm-ico .cf-halo{transform-origin:50% 50%;animation:cf-halo 2.6s ease-in-out infinite}
@keyframes cf-sale{0%,55%,100%{transform:translateX(0);opacity:1}
  25%{transform:translateX(6px);opacity:1}
  40%{transform:translateX(3px)}}
@keyframes cf-halo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:.45}}
.confirm-card h2{margin-top:14px;font-size:1.3rem;font-weight:800;color:var(--deep);line-height:1.25}
.confirm-card p{margin-top:8px;font-weight:600;color:var(--text2);font-size:1rem;line-height:1.5}
.confirm-btns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.confirm-btns .btn{margin:0;max-width:none}
/* la salida es la acción destructiva: se ofrece, pero no se invita a ella */
.btn.danger-ghost{background:none;box-shadow:none;color:var(--red);min-height:46px;font-weight:800}
.btn.danger-ghost:hover{background:#FDECEC}
.btn.danger{background:var(--red)}.btn.danger:hover{background:#B91C1C}
@media (prefers-reduced-motion:reduce){.confirm-ico .cf-flecha,.confirm-ico .cf-halo{animation:none}}

/* ═══ selector de idioma (banderita del HUD) ═══ */
#langOv{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:151;
  background:rgba(46,16,101,.5);backdrop-filter:blur(4px);padding:20px}
#langOv.on{display:flex;animation:appear .25s ease}
.lang-opts{display:flex;gap:12px;margin-top:18px}
.lang-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  background:var(--bg,#F5F3FF);border:2px solid transparent;border-radius:18px;padding:16px 12px;
  transition:border-color .15s,transform .12s}
.lang-opt:hover{transform:translateY(-2px)}
.lang-opt.on{border-color:var(--purple,#7C3AED)}
.lang-opt .lo-flag{width:52px;height:52px;object-fit:contain}
.lang-opt b{font-weight:800;color:var(--deep);margin-top:4px}
.lang-opt small{color:var(--text2,#6B7280);font-size:.8rem}
/* japonés «muy pronto» para no admin: tarjeta de interés dentro del selector */
.lang-pronto{margin-top:16px;padding:14px;border-radius:16px;background:#F5F3FF;text-align:center}
/* al elegir japonés (no admin) el selector se oculta y queda solo el aviso: un único mensaje */
.lang-card.modo-pronto > :not(.lang-pronto){display:none}
.lang-card.modo-pronto .lang-pronto{margin-top:0;background:none;padding:4px 0 0}
.lang-pronto .lo-flag{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 10px}
.lang-pronto p{margin:0;font-size:.95rem;line-height:1.4;color:var(--deep)}
.lang-pronto-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.lang-pronto-btns .btn{min-height:48px}
button.hud-pill{border:none;cursor:pointer;font:inherit}

/* ═══ overlay de subida de nivel ═══ */
/* ── overlay de subida de nivel ── */
#lvlOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:140;
  background:radial-gradient(circle at 50% 38%,rgba(109,40,217,.55),rgba(46,16,101,.9));backdrop-filter:blur(7px)}
#lvlOverlay.on{display:flex;animation:appear .35s ease}
.lvl-card{position:relative;overflow:hidden;background:var(--surface);border-radius:28px;padding:38px 46px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);max-width:min(420px,88vw);animation:lvlIn .5s cubic-bezier(.22,1.4,.36,1)}
@keyframes lvlIn{from{opacity:0;transform:scale(.7) translateY(24px)}to{opacity:1;transform:none}}
.lvl-eyebrow{color:var(--purple);font-weight:800;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.lvl-ring{width:150px;height:150px;margin:22px auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--purple) 0turn,var(--purple-light) .6turn,var(--purple) 1turn);
  box-shadow:0 0 0 8px #F5F3FF,0 10px 34px rgba(124,58,237,.35);animation:ringSpin 5s linear infinite}
.lvl-ring span{display:flex;align-items:center;justify-content:center;width:122px;height:122px;border-radius:50%;
  background:var(--surface);font-size:3.4rem;font-weight:900;color:var(--deep);animation:none}
@keyframes ringSpin{to{filter:hue-rotate(14deg)}}
.lvl-ring span.bump{animation:lvlBump .5s cubic-bezier(.22,1.6,.36,1)}
@keyframes lvlBump{0%{transform:scale(1)}35%{transform:scale(1.45);color:var(--purple)}100%{transform:scale(1)}}
.lvl-xp{color:var(--text2);font-weight:700;margin-top:4px;min-height:1.4em;opacity:0;transition:opacity .5s}
.lvl-xp.on{opacity:1}
#lvlOk{opacity:0;pointer-events:none;transition:opacity .5s}
#lvlOk.on{opacity:1;pointer-events:auto}

/* ═══ confeti del overlay de nivel ═══ */
.lvl-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lvl-confetti i{position:absolute;top:-12px;width:9px;height:9px;border-radius:2px;opacity:0;animation:confFall 1.7s ease-in forwards}
@keyframes confFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(320px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.lvl-ring{animation:none}.lvl-confetti i{display:none}}

/* ═══ "+X xp" flotante ═══ */
/* ── "+X xp" flotante ── */
.xpfloat{position:fixed;z-index:120;pointer-events:none;font-weight:900;font-size:1.05rem;color:var(--purple);
  text-shadow:0 1px 6px rgba(255,255,255,.9);animation:xpUp 1.15s ease-out forwards}
.xpfloat.dim{color:var(--text2);font-size:.92rem}
/* +XP como chip centrado bajo la tarjeta (zona del feedback) */
.xpfloat.below{transform:translateX(-50%);background:var(--surface);box-shadow:var(--shadow);
  border-radius:99px;padding:9px 20px;font-size:1.12rem;letter-spacing:.01em;text-shadow:none;
  animation:xpChip 1.25s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes xpChip{0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.7)}
  20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.12)}
  32%{transform:translateX(-50%) translateY(0) scale(1)}
  72%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.96)}}
@keyframes xpUp{0%{opacity:0;transform:translateY(6px) scale(.8)}18%{opacity:1;transform:translateY(-6px) scale(1.12)}
  70%{opacity:1;transform:translateY(-40px) scale(1)}100%{opacity:0;transform:translateY(-62px) scale(.95)}}

/* ═══ banner de combo ═══ */
/* ── banner de combo (¡5 seguidas!) ── */
#comboBanner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:130;pointer-events:none}
#comboBanner.on{display:flex}
.combo-chip{background:linear-gradient(135deg,var(--purple),var(--purple-hover));color:#fff;border-radius:22px;
  padding:20px 34px;text-align:center;box-shadow:0 18px 50px rgba(46,16,101,.45);animation:comboPop 1.8s cubic-bezier(.22,1.4,.36,1) forwards}
.combo-chip .c1{font-size:clamp(1.4rem,5vw,1.9rem);font-weight:900}
.combo-chip .c2{font-size:1.05rem;font-weight:800;opacity:.92;margin-top:4px}
@keyframes comboPop{0%{opacity:0;transform:scale(.4) rotate(-5deg)}14%{opacity:1;transform:scale(1.08) rotate(1.5deg)}
  22%{transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92) translateY(-14px)}}

/* ═══ MINITUTORIAL (core/tutorial.js) ═══
   Overlay de una vez: Prepy explica una sección la 1.ª vez. Reutilizable en todas.
   Mismo lenguaje visual que la intro de Prepy y los demás overlays (álbum, ajustes). */
.tut-ov{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(46,16,101,.5); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:22px;
}
.tut-ov.on{ display:flex; animation:tutFade .2s ease; }
@keyframes tutFade{ from{ opacity:0; } to{ opacity:1; } }
.tut-card{
  width:100%; max-width:360px; background:var(--surface); border-radius:26px;
  box-shadow:0 16px 48px rgba(46,16,101,.4); padding:8px 24px 22px; text-align:center;
  animation:tutPop .28s cubic-bezier(.22,1.2,.36,1);
}
@keyframes tutPop{ from{ opacity:0; transform:translateY(10px) scale(.94); } to{ opacity:1; transform:none; } }
.tut-prepy{ width:112px; height:112px; object-fit:contain; margin:-6px auto 2px; display:block;
  filter:drop-shadow(0 8px 20px rgba(124,58,237,.24)); }
.tut-msg{ margin:2px 0 4px; }
.tut-msg p{ font-family:'Nunito',sans-serif; color:var(--deep); font-size:1.05rem; font-weight:700;
  line-height:1.4; margin:0 0 10px; }
.tut-msg p:last-child{ margin-bottom:0; }
.tut-msg b{ color:var(--purple); font-weight:900; }
.tut-ok{ width:100%; margin-top:18px; }

/* ── HISTORIA de las cartas: formato ÚNICO en todo el juego (data/catalogo.js storyHtml/kwHtml/storyTokens) ──
   Mismo estilo que las apps (TextFormatUtils iOS/Android) y la landing (.st-kw/.st-sig de landing.css),
   con el morado de marca #7437E8. %keyword% → verde subrayado · #SIGNIFICADO# → morado en MAYÚSCULAS. */
.st-kw{color:#08A256;font-weight:800;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.16em}
.st-sig{color:#7437E8;font-weight:800;text-transform:uppercase}