/* ============================================================
   MISJA POLSKA — Estilo del juego (claro + oscuro)
   ============================================================ */

:root{
  --rojo:#E2384F;
  --rojo-osc:#B92640;
  --rojo-suave:#F9DEE2;
  --oro:#DE9A00;
  --oro-suave:#FBEED0;
  --menta:#1FA97C;
  --menta-osc:#158563;
  --menta-suave:#DCF2E9;
  --cielo:#3D6FE0;
  --cielo-suave:#E1E9FB;
  --tinta:#2A2230;
  --tinta-2:#6B6172;
  --papel:#FDFBF9;
  --papel-2:#F1EBE6;
  --linea:#E6DEDA;
  --tarjeta:#FFFFFF;
  --sombra:0 1px 2px rgba(42,34,48,.06),0 6px 18px rgba(42,34,48,.08);
  --sombra-btn:0 3px 0 rgba(42,34,48,.14);
}
@media (prefers-color-scheme: dark){
  :root{
    --rojo:#F0556B; --rojo-osc:#D2374F; --rojo-suave:#43222B;
    --oro:#F5B301; --oro-suave:#453A1E;
    --menta:#35CB96; --menta-osc:#23A377; --menta-suave:#1E3A30;
    --cielo:#7FA3F5; --cielo-suave:#232E4A;
    --tinta:#F2EDEA; --tinta-2:#A99FA8;
    --papel:#1D1823; --papel-2:#151119;
    --linea:#3A3242; --tarjeta:#272132;
    --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
    --sombra-btn:0 3px 0 rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --rojo:#F0556B; --rojo-osc:#D2374F; --rojo-suave:#43222B;
  --oro:#F5B301; --oro-suave:#453A1E;
  --menta:#35CB96; --menta-osc:#23A377; --menta-suave:#1E3A30;
  --cielo:#7FA3F5; --cielo-suave:#232E4A;
  --tinta:#F2EDEA; --tinta-2:#A99FA8;
  --papel:#1D1823; --papel-2:#151119;
  --linea:#3A3242; --tarjeta:#272132;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
  --sombra-btn:0 3px 0 rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --rojo:#E2384F; --rojo-osc:#B92640; --rojo-suave:#F9DEE2;
  --oro:#DE9A00; --oro-suave:#FBEED0;
  --menta:#1FA97C; --menta-osc:#158563; --menta-suave:#DCF2E9;
  --cielo:#3D6FE0; --cielo-suave:#E1E9FB;
  --tinta:#2A2230; --tinta-2:#6B6172;
  --papel:#FDFBF9; --papel-2:#F1EBE6;
  --linea:#E6DEDA; --tarjeta:#FFFFFF;
  --sombra:0 1px 2px rgba(42,34,48,.06),0 6px 18px rgba(42,34,48,.08);
  --sombra-btn:0 3px 0 rgba(42,34,48,.14);
}

html{font-size:16px}
html[data-texto="2"]{font-size:18px}
html[data-texto="3"]{font-size:20px}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--papel-2);
  color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.45;
  overscroll-behavior-y:none;
}
button{font-family:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--cielo);outline-offset:2px}

#app{
  max-width:520px;margin:0 auto;min-height:100dvh;
  background:var(--papel);
  display:flex;flex-direction:column;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.08);
}

/* ===== Barra superior ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.logo{font-weight:900;letter-spacing:-.02em;font-size:1.05rem}
.logo span{color:var(--rojo)}
.topbar .contadores{margin-left:auto;display:flex;gap:8px}
.contador{
  display:flex;align-items:center;gap:4px;
  font-weight:800;font-size:.92rem;
  background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:999px;padding:4px 10px;
  font-variant-numeric:tabular-nums;
}

/* ===== Vistas ===== */
.vista{display:none;flex:1;padding:16px 16px 90px}
.vista.activa{display:block}

/* ===== Mapa ===== */
.mundo-cab{
  border-radius:18px;padding:16px 18px;margin:14px 0 6px;
  color:#fff;box-shadow:var(--sombra);
  position:relative;overflow:hidden;
}
.mundo-cab.m1{background:linear-gradient(135deg,#3D6FE0,#2A4FA8)}
.mundo-cab.m2{background:linear-gradient(135deg,#E2384F,#B92640)}
.mundo-cab.m3{background:linear-gradient(135deg,#DE9A00,#A87200)}
.mundo-cab.m4{background:linear-gradient(135deg,#7B4FD8,#5A35A8)}
.mundo-cab.m5{background:linear-gradient(135deg,#1FA97C,#137A58)}
.mundo-cab.m6{background:linear-gradient(135deg,#E2568F,#B93A6E)}
.mundo-cab.m7{background:linear-gradient(135deg,#F4763A,#C24A15)}
.mundo-cab .emoji{font-size:1.7rem}
.mundo-cab h2{margin:.15em 0 0;font-size:1.2rem;font-weight:900;letter-spacing:-.01em}
.mundo-cab p{margin:.2em 0 0;font-size:.85rem;opacity:.92}
.mundo-cab .prog{
  margin-top:10px;height:8px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;
}
.mundo-cab .prog i{display:block;height:100%;background:#fff;border-radius:99px}
.mundo-cab.bloqueado{filter:grayscale(.9);opacity:.75}

.camino{display:flex;flex-direction:column;padding:8px 0 4px}
.nodo{
  border:none;background:none;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:110px;margin:7px 0;
}
.nodo .burbuja{
  width:70px;height:70px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;
  background:var(--tarjeta);
  border:4px solid var(--linea);
  box-shadow:var(--sombra),var(--sombra-btn);
  transition:transform .12s;
  position:relative;
}
.nodo:active .burbuja{transform:scale(.94)}
.nodo b{font-size:.78rem;font-weight:700;text-align:center;line-height:1.2}
.nodo .estrellitas{font-size:.72rem;letter-spacing:1px;min-height:1em}
.nodo.hecho .burbuja{border-color:var(--menta)}
.nodo.actual .burbuja{border-color:var(--rojo);animation:pulso 1.6s infinite}
.nodo.bloq{opacity:.45;filter:grayscale(1)}
.nodo.bloq .burbuja::after{
  content:"🔒";position:absolute;right:-4px;bottom:-4px;font-size:1rem;
}
.nodo.pos-0{align-self:center}
.nodo.pos-1{align-self:flex-end;margin-right:12%}
.nodo.pos-2{align-self:center}
.nodo.pos-3{align-self:flex-start;margin-left:12%}
@keyframes pulso{
  0%,100%{box-shadow:var(--sombra),0 0 0 0 var(--rojo-suave)}
  50%{box-shadow:var(--sombra),0 0 0 10px var(--rojo-suave)}
}
@media (prefers-reduced-motion:reduce){
  .nodo.actual .burbuja{animation:none}
}

/* ===== Nivel (pantalla de juego) ===== */
#vista-nivel{padding:0 0 20px}
.nivel-cab{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;position:sticky;top:0;z-index:15;
  background:var(--papel);border-bottom:1px solid var(--linea);
}
.btn-salir{
  border:none;background:var(--papel-2);border-radius:12px;
  width:38px;height:38px;font-size:1.05rem;flex:none;
}
.barra-prog{flex:1;height:14px;border-radius:99px;background:var(--papel-2);overflow:hidden}
.barra-prog i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--menta),var(--menta-osc));
  border-radius:99px;transition:width .3s;
}
.nivel-vidas{font-weight:800;font-size:.95rem;flex:none;font-variant-numeric:tabular-nums}

.escena{padding:20px 18px 10px;min-height:60vh;display:flex;flex-direction:column}
.consigna{font-size:.85rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 12px}

.tarjeta-frase{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;
  padding:18px;box-shadow:var(--sombra);margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
}
.tarjeta-frase .grande{font-size:1.45rem;font-weight:900;letter-spacing:-.01em}
.tarjeta-frase .pron{color:var(--tinta-2);font-style:italic;font-size:.95rem}
.btn-audio{
  border:none;flex:none;width:52px;height:52px;border-radius:16px;
  background:var(--cielo-suave);color:var(--cielo);font-size:1.4rem;
  box-shadow:var(--sombra-btn);
}
.btn-audio:active{transform:translateY(2px);box-shadow:none}

.opciones{display:grid;gap:10px;margin-top:auto}
.opcion{
  border:2px solid var(--linea);background:var(--tarjeta);
  border-radius:16px;padding:14px 16px;
  font-size:1.05rem;font-weight:700;text-align:left;
  box-shadow:var(--sombra-btn);
  transition:transform .1s;
}
.opcion .sub{display:block;font-weight:500;font-size:.82rem;color:var(--tinta-2)}
.opcion:active{transform:translateY(2px);box-shadow:none}
.opcion.ok{border-color:var(--menta);background:var(--menta-suave)}
.opcion.mal{border-color:var(--rojo);background:var(--rojo-suave);animation:sacudida .3s}
.opcion.revelada{border-color:var(--menta)}
.opcion:disabled{cursor:default}
@keyframes sacudida{
  0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}
}
@media (prefers-reduced-motion:reduce){
  .opcion.mal{animation:none}
}

.opciones-2col{grid-template-columns:1fr 1fr}
.opcion-grande{padding:20px 12px;text-align:center;font-size:1.15rem}
.opcion-grande .ic{display:block;font-size:1.8rem;margin-bottom:4px}

/* Parejas */
.parejas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.carta-par{
  border:2px solid var(--linea);background:var(--tarjeta);border-radius:14px;
  padding:14px 10px;font-weight:700;font-size:.98rem;min-height:58px;
  box-shadow:var(--sombra-btn);
}
.carta-par.sel{border-color:var(--cielo);background:var(--cielo-suave)}
.carta-par.lograda{border-color:var(--menta);background:var(--menta-suave);opacity:.6;pointer-events:none}
.carta-par.error{border-color:var(--rojo);animation:sacudida .3s}

/* Ordena */
.zona-armado{
  min-height:58px;border:2px dashed var(--linea);border-radius:14px;
  padding:10px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;
  background:var(--papel-2);
}
.fichas{display:flex;flex-wrap:wrap;gap:8px}
.ficha{
  border:2px solid var(--linea);background:var(--tarjeta);border-radius:12px;
  padding:9px 14px;font-weight:800;font-size:1.02rem;
  box-shadow:var(--sombra-btn);
}
.ficha:active{transform:translateY(2px);box-shadow:none}

/* Píldora / Edik */
.pildora{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding-top:10px;
}
.pildora .edik{width:130px}
.globo{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:20px;
  padding:16px 18px;box-shadow:var(--sombra);
  font-size:1.02rem;position:relative;max-width:40em;
}
.globo::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:16px;height:16px;background:var(--tarjeta);
  border-left:1px solid var(--linea);border-top:1px solid var(--linea);
}
.pildora .ejemplo{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--oro-suave);border-radius:14px;padding:10px 18px;
  font-weight:800;border:none;font-size:1rem;
}
.pildora .ejemplo .ej-fila{display:flex;align-items:center;gap:8px}
.pildora .ejemplo .pron{font-weight:500;font-style:italic;color:var(--tinta-2)}
.pildora .ejemplo .ej-es{font-size:.88rem;font-weight:700;color:var(--menta)}

/* Práctica de pronunciación (micrófono) */
.btn-mic{
  margin-top:10px;border:2px solid var(--cielo);background:var(--cielo-suave);
  color:var(--cielo);border-radius:12px;padding:9px 14px;
  font-weight:800;font-size:.9rem;
}
.btn-mic:disabled{opacity:.7}
.mic-resultado{font-size:.85rem;min-height:1.2em;margin-top:6px;font-weight:700}
.mic-resultado.bien{color:var(--menta)}
.mic-resultado.casi{color:var(--tinta-2)}

/* Feedback inferior */
.feedback{
  position:sticky;bottom:0;margin-top:16px;
  border-radius:18px 18px 0 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:12px;
}
.feedback.ok{display:flex;background:var(--menta-suave);color:var(--menta-osc)}
.feedback.mal{display:flex;background:var(--rojo-suave);color:var(--rojo-osc)}
.feedback .txt{flex:1}
.feedback .txt b{display:block;font-size:1.05rem}
.feedback .txt span{font-size:.9rem}
.btn-continuar{
  border:none;border-radius:14px;padding:12px 20px;
  font-weight:900;font-size:1rem;color:#fff;flex:none;
  box-shadow:var(--sombra-btn);
}
.feedback.ok .btn-continuar{background:var(--menta)}
.feedback.mal .btn-continuar{background:var(--rojo)}

.btn-comprobar{
  margin-top:14px;border:none;border-radius:16px;padding:15px;
  width:100%;font-weight:900;font-size:1.05rem;color:#fff;
  background:var(--menta);box-shadow:var(--sombra-btn);
}
.btn-comprobar:disabled{background:var(--linea);color:var(--tinta-2);box-shadow:none}

/* Temporizador ráfaga */
.temporizador{height:8px;border-radius:99px;background:var(--papel-2);overflow:hidden;margin-bottom:14px}
.temporizador i{display:block;height:100%;background:var(--oro);border-radius:99px;width:100%}
.chip-rafaga{
  display:inline-block;background:var(--oro-suave);color:var(--oro);
  font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:8px;padding:3px 10px;margin-bottom:10px;
}

/* Diálogo */
.burbuja-npc{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px 18px 18px 4px;
  padding:14px 16px;box-shadow:var(--sombra);margin-bottom:6px;
  display:flex;gap:12px;align-items:center;
}
.burbuja-npc .cara{font-size:2rem;flex:none}
.burbuja-npc .grande{font-weight:900;font-size:1.15rem}
.burbuja-npc .trad{font-size:.88rem;color:var(--tinta-2)}

/* ===== Celebración ===== */
.celebracion{
  position:fixed;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--papel) 92%, transparent);
}
.celebracion.abierta{display:flex}
.cele-caja{
  text-align:center;padding:30px 26px;max-width:340px;width:88%;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:24px;
  box-shadow:var(--sombra);position:relative;z-index:2;
}
.cele-caja h2{margin:.2em 0;font-size:1.5rem;font-weight:900}
.cele-estrellas{font-size:2.4rem;letter-spacing:6px;margin:6px 0}
.cele-detalle{display:flex;justify-content:center;gap:14px;margin:12px 0 18px;font-weight:800}
.cele-detalle span{background:var(--papel-2);border-radius:12px;padding:8px 14px}
#confeti{position:fixed;inset:0;pointer-events:none;z-index:41}

/* ===== Perfil ===== */
.perfil-cab{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0 6px;text-align:center}
.perfil-cab .edik{width:150px}
.perfil-cab h2{margin:0;font-size:1.35rem;font-weight:900}
.titulo-jugador{
  background:var(--oro-suave);color:var(--oro);
  font-weight:800;border-radius:999px;padding:4px 14px;font-size:.9rem;
}
.xp-caja{margin:14px 0}
.xp-caja .fila{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;color:var(--tinta-2)}
.xp-barra{height:12px;border-radius:99px;background:var(--papel-2);overflow:hidden;margin-top:4px}
.xp-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--oro),#F5C544);border-radius:99px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.stat-caja{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:16px;
  padding:12px;text-align:center;box-shadow:var(--sombra);
}
.stat-caja b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.stat-caja span{font-size:.8rem;color:var(--tinta-2)}
.insignias{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.insignia{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:16px;
  padding:12px 8px;text-align:center;box-shadow:var(--sombra);
}
.insignia .ic{font-size:1.6rem}
.insignia span{display:block;font-size:.72rem;font-weight:700;margin-top:4px}
.insignia.bloq{opacity:.35;filter:grayscale(1)}

/* ===== Ajustes ===== */
.ajuste{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:16px;
  padding:14px 16px;margin-bottom:12px;box-shadow:var(--sombra);
}
.ajuste b{display:block;margin-bottom:8px}
.segmentos{display:flex;gap:8px}
.segmento{
  flex:1;border:2px solid var(--linea);background:var(--papel-2);
  border-radius:12px;padding:9px 6px;font-weight:700;font-size:.9rem;
}
.segmento.sel{border-color:var(--rojo);background:var(--rojo-suave);color:var(--rojo)}
.btn-peligro{
  width:100%;border:2px solid var(--rojo);color:var(--rojo);background:none;
  border-radius:14px;padding:12px;font-weight:800;margin-top:8px;
}

/* ===== Modal vidas ===== */
.modal{
  position:fixed;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);
}
.modal.abierta{display:flex}
.modal-caja{
  background:var(--tarjeta);border-radius:22px;padding:26px 22px;
  max-width:320px;width:88%;text-align:center;box-shadow:var(--sombra);
}
.modal-caja h3{margin:.2em 0;font-size:1.25rem}
.modal-caja p{color:var(--tinta-2);font-size:.95rem}
.modal-caja .btn-comprobar{margin-top:10px}
.btn-secundario{
  width:100%;margin-top:10px;border:none;background:none;
  color:var(--tinta-2);font-weight:700;padding:8px;
}

/* ===== Barra inferior ===== */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:520px;z-index:30;
  display:flex;background:var(--papel);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;border:none;background:none;padding:9px 0 7px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.72rem;font-weight:700;color:var(--tinta-2);
}
.tab .ic{font-size:1.35rem}
.tab.activa{color:var(--rojo)}

.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  background:var(--tinta);color:var(--papel);
  border-radius:999px;padding:10px 20px;font-weight:700;font-size:.9rem;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;
  max-width:88%;text-align:center;
}
.toast.ver{opacity:1}

/* ===== Acceso de compradores (acceso.js) ===== */
.acc-franja{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--oro-suave);border-bottom:1px solid var(--oro);
  padding:8px 14px;font-size:.85rem;
}
.acc-franja span{flex:1;min-width:180px}
.acc-franja button,.acc-franja a{
  border:none;border-radius:999px;padding:6px 12px;font-weight:800;font-size:.8rem;
  background:var(--tinta);color:var(--papel);text-decoration:none;
}
.acc-franja .acc-x{background:none;color:var(--tinta-2);padding:4px 6px}
.acc-franja .acc-btn-comprar{background:var(--menta);color:#fff}
#acc-franja{flex-wrap:nowrap}
#acc-franja span{min-width:0;font-weight:700}
.acc-nueva{background:var(--cielo-suave);border-color:var(--cielo)}
.acc-caja{position:relative;text-align:left;max-width:380px}
.acc-caja h3{margin-right:40px}
.acc-cerrar{position:absolute;top:10px;right:10px}
.acc-caja .campo-texto{margin-bottom:8px}
.acc-comprar{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.acc-ayuda{font-size:.85rem;color:var(--tinta-2)}
.acc-error{color:var(--rojo);font-size:.88rem}
.acc-ok{color:var(--menta-osc);font-weight:800}

/* ===== Tarjeta "palabra nueva" (enseñar antes de preguntar) ===== */
.chip-nueva{
  display:inline-block;background:var(--oro-suave);color:var(--oro);
  font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:4px 14px;
}
.tarjeta-aprender{
  background:var(--tarjeta);border:2px solid var(--oro);border-radius:22px;
  padding:24px 20px;box-shadow:var(--sombra);text-align:center;
  width:100%;max-width:340px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.tarjeta-aprender .ap-pl{font-size:1.7rem;font-weight:900;letter-spacing:-.01em}
.tarjeta-aprender .ap-pron{color:var(--tinta-2);font-size:.95rem}
.tarjeta-aprender .ap-es{
  font-size:1.15rem;font-weight:800;color:var(--menta);
  background:var(--menta-suave);border-radius:12px;padding:6px 16px;margin-top:4px;
}
.tarjeta-aprender .ap-nota{font-size:.85rem;color:var(--tinta-2);margin-top:6px}

/* ===== Dictado ===== */
.campo-texto{
  width:100%;border:2px solid var(--linea);border-radius:14px;
  background:var(--tarjeta);color:var(--tinta);
  padding:14px 16px;font-size:1.1rem;font-weight:700;font-family:inherit;
}
.campo-texto:focus{outline:none;border-color:var(--cielo)}

/* ===== Tren de Repaso ===== */
.tren-intro{font-size:.92rem;color:var(--tinta-2);max-width:34em;margin:.3em 0 0}
.tren-alerta{
  background:var(--oro-suave);border:1px solid var(--oro);
  border-radius:14px;padding:12px 16px;font-size:.95rem;margin:12px 0;
}
.tren-alerta.calma{background:var(--papel-2);border-color:var(--linea);color:var(--tinta-2)}
.vagones{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.vagon{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
  padding:10px 4px;text-align:center;box-shadow:var(--sombra);
}
.vagon-num{font-size:1.4rem;font-weight:900;font-variant-numeric:tabular-nums}
.vagon-nombre{font-size:.68rem;font-weight:700;color:var(--tinta-2);line-height:1.25}
.vagon-nombre small{font-weight:500}

/* ===== Álbum ===== */
.album-cab h2{margin:8px 0 2px;font-size:1.3rem;font-weight:900}
.muted-txt{color:var(--tinta-2);font-size:.9rem;margin:.2em 0}
.album-mundo{font-size:1rem;font-weight:800;margin:20px 0 8px}
.album-cuenta{color:var(--tinta-2);font-weight:700;font-size:.85rem}
.cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.carta{
  border:2px solid var(--linea);border-radius:12px;background:var(--tarjeta);
  padding:10px 6px;text-align:center;box-shadow:var(--sombra-btn);
  display:flex;flex-direction:column;gap:2px;min-height:64px;justify-content:center;
}
.carta:active{transform:translateY(2px);box-shadow:none}
.carta-pl{font-weight:900;font-size:.88rem;line-height:1.15;word-break:break-word}
.carta-es{font-size:.7rem;color:var(--tinta-2);line-height:1.2}
.carta.bronce{border-color:#C08A50}
.carta.plata{border-color:#9BA8B5}
.carta.oro{border-color:var(--oro);background:var(--oro-suave)}
.carta.bloq{opacity:.45;filter:grayscale(1);pointer-events:none}

/* ===== Misiones diarias ===== */
.misiones-caja{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;
  padding:14px 16px;box-shadow:var(--sombra);margin-bottom:4px;
}
.misiones-tit{font-weight:900;font-size:.95rem;margin-bottom:10px}
.mision{display:flex;align-items:center;gap:10px;padding:6px 0}
.mision-ic{font-size:1.25rem;flex:none;width:28px;text-align:center}
.mision-cuerpo{flex:1}
.mision-txt{font-size:.85rem;font-weight:700}
.mision-barra{height:7px;border-radius:99px;background:var(--papel-2);overflow:hidden;margin-top:3px}
.mision-barra i{display:block;height:100%;background:var(--cielo);border-radius:99px}
.mision.hecha .mision-txt{color:var(--tinta-2);text-decoration:line-through}
.mision.hecha .mision-barra i{background:var(--menta)}
.mision-premio{font-size:.78rem;font-weight:800;color:var(--tinta-2);flex:none;font-variant-numeric:tabular-nums}
.mision.semanal{border-top:1px dashed var(--linea);margin-top:6px;padding-top:10px}
.mision.semanal .mision-barra i{background:var(--oro)}

/* ===== Edik te guía (banner del mapa) ===== */
.edik-banner-btn{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--tarjeta);border:2px solid var(--oro);border-radius:16px;
  padding:8px 14px 8px 8px;margin-bottom:12px;box-shadow:var(--sombra);
}
.edik-banner-btn:active{transform:translateY(1px)}
.edik-mini{flex:none;display:flex}
.edik-msg{font-size:.88rem;font-weight:700;line-height:1.3}

/* ===== Tienda de Edik ===== */
.tienda{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tienda-item{
  background:var(--tarjeta);border:2px solid var(--linea);border-radius:16px;
  padding:12px;text-align:center;box-shadow:var(--sombra);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.tienda-item.puesto{border-color:var(--menta)}
.tienda-item .ic{font-size:1.8rem}
.tienda-item b{font-size:.88rem}
.tienda-item small{font-size:.72rem;color:var(--tinta-2);line-height:1.3}
.btn-tienda{
  border:none;border-radius:10px;padding:8px 14px;width:100%;
  background:var(--cielo-suave);color:var(--cielo);
  font-weight:800;font-size:.85rem;box-shadow:var(--sombra-btn);
}
.btn-tienda:active{transform:translateY(2px);box-shadow:none}

/* ===== Aviso de instalación (PWA) ===== */
.instalar-banner{
  display:flex;align-items:center;gap:10px;
  background:var(--rojo);color:#fff;
  padding:10px 12px;font-size:.85rem;font-weight:700;line-height:1.35;
}
.instalar-banner[hidden]{display:none}
.inst-texto{flex:1}
.inst-btn{
  border:none;background:#fff;color:var(--rojo);
  border-radius:10px;padding:7px 14px;font-weight:900;font-size:.85rem;flex:none;
}
.inst-cerrar{
  border:none;background:none;color:#fff;font-size:1rem;padding:4px 6px;flex:none;opacity:.85;
}

/* ===== Chat con Edik (tutor IA) ===== */
.btn-chat-edik{
  border:2px solid var(--rojo);background:var(--rojo-suave);color:var(--rojo);
  border-radius:14px;padding:9px 18px;font-weight:800;font-size:.95rem;
  display:flex;flex-direction:column;align-items:center;line-height:1.2;
}
.btn-chat-edik small{font-weight:600;font-size:.68rem;opacity:.8}
.btn-chat-edik:active{transform:translateY(1px)}
.chat-edik{
  position:fixed;inset:0;z-index:65;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.45);
}
.chat-edik.abierta{display:flex}
.chat-caja{
  width:100%;max-width:520px;height:min(80dvh,640px);
  background:var(--papel);border-radius:22px 22px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
}
.chat-cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--linea);background:var(--tarjeta);
}
.chat-titulo{font-weight:900;font-size:1rem}
.chat-mensajes{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:8px;
}
.chat-burbuja{
  max-width:85%;padding:10px 14px;border-radius:16px;
  font-size:.95rem;line-height:1.4;white-space:pre-wrap;word-break:break-word;
}
.chat-burbuja.edik{
  align-self:flex-start;background:var(--tarjeta);
  border:1px solid var(--linea);border-bottom-left-radius:4px;
}
.chat-burbuja.mia{
  align-self:flex-end;background:var(--rojo);color:#fff;
  border-bottom-right-radius:4px;
}
.chat-burbuja.aviso{
  align-self:center;background:var(--oro-suave);color:var(--tinta);
  font-size:.85rem;text-align:center;
}
.chat-burbuja.pensando{color:var(--tinta-2);font-style:italic}
.chat-input-fila{
  display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);background:var(--tarjeta);
}
.chat-input-fila .campo-texto{flex:1;margin:0}

/* ===== Bienvenida (onboarding) ===== */
.onboarding{
  position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;
  background:var(--papel);
}
.onboarding.abierta{display:flex}
.onb-caja{
  max-width:360px;width:90%;text-align:center;
  display:flex;flex-direction:column;gap:14px;
}
.onb-tit{font-size:1.4rem;font-weight:900;margin:.2em 0;text-wrap:balance}
.onb-txt{font-size:1rem;color:var(--tinta-2);line-height:1.5;margin:0}
.onb-puntos{display:flex;justify-content:center;gap:8px}
.punto{width:9px;height:9px;border-radius:50%;background:var(--linea)}
.punto.sel{background:var(--rojo)}
