/* =====================================================================
   extras.css — estilos nuevos de la versión 7: tiempo para pensar, insignias, repaso, dominio, botones táctiles, error
   ===================================================================== */

/* ---------- botones ---------- */
.boton.primaria{animation:pulso 1.5s ease-in-out infinite;box-shadow:0 6px 0 #a52258,0 0 22px rgba(255,77,141,.55)}
.boton.primaria:active{animation:none}
#btnJugar{animation:none;box-shadow:0 6px 0 #a52258}
#btnJugar.primaria{animation:pulso 1.5s ease-in-out infinite;box-shadow:0 6px 0 #a52258,0 0 22px rgba(255,77,141,.55)}
.boton.tenueBtn{background:rgba(255,255,255,.12);box-shadow:0 6px 0 rgba(0,0,0,.35);color:#e7dcff;border:2px solid rgba(255,255,255,.25)}
.tbtn.on{background:var(--fresa);transform:scale(.92);border-color:#fff}
.tbtn{transition:transform .05s,background .05s}
.hbtn.vacio{opacity:.45}
#btnPoderHud{position:relative}
#btnPoderHud::after{content:attr(data-n);position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--sol);color:#3a1030;font-size:11px;font-weight:bold;display:grid;place-items:center;padding:0 4px;border:2px solid #1a1040}
body.tactil #hudPoder{display:none}
body.tactil #hud{padding-right:calc(170px + env(safe-area-inset-right,0px));font-size:clamp(12px,2vw,15px)}
body.tactil.enReto #hudBotones{display:flex;z-index:25}
#gira{bottom:auto;top:60px}
.capa,.tarjeta,#retoCuerpo{touch-action:manipulation}
[inert]{pointer-events:none}
.iconBtn.chico{padding:.2em .5em;font-size:13px}

/* ---------- tiempo para pensar ---------- */
#retoPensar{display:flex;align-items:center;gap:12px;margin:2px 0 10px;padding:8px 12px;border-radius:14px;background:#fff3d6;border:2px dashed #e0b23c;color:#5a3a12;font-weight:bold;font-size:clamp(12px,2vw,16px)}
#retoPensar[hidden]{display:none}
#retoPensar{--k:0deg}
#retoPensar .anillo{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--hoja) var(--k), #e6d6b3 0);position:relative}
#retoPensar .anillo::before{content:'';position:absolute;inset:6px;border-radius:50%;background:#fff}
#retoPensar .anillo b{position:relative;font-size:20px;color:var(--tinta)}
#retoPensar.sacudir{animation:sacudir .35s ease}
@keyframes sacudir{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* mientras corre el tiempo para pensar, las respuestas se ven "dormidas" pero se tienen que poder LEER (es justo cuando se leen):
   con opacity .55 el texto quedaba en ≈3.8:1 sobre la tarjeta; así se queda en ≈8:1 y el "todavía no" lo dicen el gris, el fondo
   y el borde apagados */
#retoCuerpo.bloqueado .opcion,#retoCuerpo.bloqueado .silaba,#retoCuerpo.bloqueado input{opacity:.82;filter:grayscale(.6);background:#f7f1e6;border-color:#e6d6b3}
#reto.pensando .tarjeta{box-shadow:0 12px 0 #b58a3c,0 0 0 4px rgba(224,178,60,.45)}
#btnRetoSeguir:disabled{opacity:.7;cursor:wait}
@media (pointer:coarse){ #retoPensar{padding:6px 10px;gap:8px} #retoPensar .anillo{width:42px;height:42px} #retoPensar .anillo b{font-size:16px} }

/* ---------- pasajes de lectura y clasificar ---------- */
.pasajeTexto{background:#fff;border:3px solid #d9b978;border-radius:12px;padding:.6em .9em;font-size:clamp(14px,2.2vw,19px);line-height:1.45;color:var(--tinta)}
.pasajePregunta{font-weight:bold;margin:10px 0 6px;font-size:clamp(14px,2.3vw,20px)}
.pasajeOpciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px}
.clasCats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:8px}
.silaba.sel{border-color:var(--fresa);background:#ffe1ec;transform:translateY(-2px)}
.silaba.bien{font-size:clamp(13px,2vw,17px)}
@media (pointer:coarse){ .pasajeTexto{font-size:13px;padding:.5em .7em} .pasajePregunta{font-size:14px} }

/* ---------- resumen: insignias y repaso ---------- */
.insignias{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.insignias:empty{display:none}
.insignia{background:rgba(255,201,74,.18);border:2px solid rgba(255,201,74,.5);color:var(--sol);border-radius:999px;padding:.25em .8em;font-size:clamp(11px,1.7vw,14px);font-weight:bold}
.insignia.nueva{background:var(--sol);color:#3a1030;animation:brinco 1.2s ease-in-out infinite}
.repasoLista{width:min(640px,100%);text-align:left;background:rgba(255,255,255,.07);border-radius:14px;padding:10px 14px;font-size:clamp(11px,1.7vw,14px);line-height:1.35;display:flex;flex-direction:column;gap:6px}
.repasoLista:empty{display:none}
.repasoTit{font-weight:bold;color:var(--sol)}
.repasoFila{display:flex;gap:8px;align-items:flex-start}
.repasoFila b{color:#fff}
@media (pointer:coarse){ .repasoLista{padding:6px 10px;gap:3px;font-size:11px} .repasoFila:nth-child(n+5){display:none} }

/* ---------- mapa: dominio por tema ---------- */
.dominio{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dominio:empty{display:none}
.domChip{position:relative;overflow:hidden;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);border-radius:999px;padding:.2em .8em;font-size:clamp(10px,1.5vw,13px);font-weight:bold;color:var(--crema)}
.domChip i{position:absolute;left:0;top:0;bottom:0;background:rgba(63,191,133,.35)}
.domChip span{position:relative}

/* ---------- HUD ---------- */
.pip.late{animation:latido .8s ease-in-out infinite}

/* ---------- error ---------- */
#error{background:rgba(14,8,32,.96)}
#error p{font-family:monospace;font-size:12px;max-width:60ch;word-break:break-word}

/* ---------- movimiento reducido ---------- */
body.menosMovimiento .boton.primaria,body.menosMovimiento #btnJugar.primaria,body.menosMovimiento .insignia.nueva,body.menosMovimiento .pip.late{animation:none}

/* ---------- versión 7.1: huecos, palancas táctiles, animaciones ---------- */
.hueco{display:inline-block;min-width:4.5em;margin:0 .15em;padding:.05em .4em;border:2px dashed #b58a3c;border-radius:8px;background:#fff8e6;color:#5a3a12;font:inherit;font-weight:bold;cursor:pointer;vertical-align:baseline}
.hueco.activo{border-style:solid;border-color:var(--fresa);background:#ffe1ec;box-shadow:0 0 0 3px rgba(255,77,141,.25)}
.hueco.bien{border-style:solid;border-color:#1c7a45;background:#dff5e6;color:#1c7a45}
.hueco:disabled{cursor:default}
#retoCuerpo.bloqueado .hueco{opacity:.55}
.zona{top:12%}
#zonaIzq{width:44%}
#zonaDer{width:56%}
.tbtn{width:clamp(56px,11vw,76px);height:clamp(56px,11vw,76px);font-size:clamp(20px,4vw,28px)}
.domLinea{width:100%;font-size:clamp(11px,1.6vw,13px);color:var(--crema);opacity:.92;line-height:1.35;margin-top:2px}
#btnRetoOtra{background:#fff3d6;border-color:#e0b23c;color:#5a3a12}
.capa.abierta .tarjeta{animation:tarjetaPop .32s cubic-bezier(.2,.9,.3,1.2) both}
#resEstrellas span{display:inline-block}
#resEstrellas .estrellaCae{animation:estrellaCae .55s cubic-bezier(.2,.9,.3,1.3) both}
#resEstrellas .vacia{opacity:.5}
.confetiCapa{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.confeti{position:absolute;top:-14px;width:9px;height:13px;border-radius:2px;pointer-events:none;z-index:1;animation:confetiCae 3s linear both;opacity:.95}
#hudLlaves .llavecita.pop{animation:pop .32s ease}
#hudVidas.perdida{animation:perdida .5s ease}
#hudVidas.nueva{animation:nueva .5s ease}
@keyframes tarjetaPop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes estrellaCae{0%{transform:translateY(-60px) scale(2.2) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes confetiCae{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.7)}100%{transform:scale(1)}}
@keyframes perdida{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes nueva{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
body.menosMovimiento .capa.abierta .tarjeta,body.menosMovimiento #resEstrellas .estrellaCae,body.menosMovimiento .confeti,body.menosMovimiento #hudLlaves .llavecita.pop,body.menosMovimiento #hudVidas.perdida,body.menosMovimiento #hudVidas.nueva{animation:none}
@media (prefers-reduced-motion:reduce){ .capa.abierta .tarjeta,#resEstrellas .estrellaCae,.confeti,#hudLlaves .llavecita.pop,#hudVidas.perdida,#hudVidas.nueva{animation:none} }

/* =====================================================================
   interruptor de idioma (esquina superior derecha) — versión 7.2
   Solo añade el botón y le hace sitio: no cambia ningún estilo del juego.
   ===================================================================== */
#idiomaSel{position:absolute;top:6px;right:8px;z-index:45;display:flex;gap:2px;padding:2px;border-radius:999px;
  background:rgba(26,16,64,.75);border:2px solid rgba(255,255,255,.35)}
#idiomaSel button{font-family:inherit;font-weight:bold;font-size:12px;letter-spacing:.5px;line-height:1;
  min-width:34px;height:26px;padding:0 8px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:#cfc4f0;touch-action:manipulation}
#idiomaSel button.on{background:var(--fresa);color:#fff}
#idiomaSel button:hover:not(.on){color:#fff}
#idiomaSel button:focus-visible{outline:3px solid var(--sol);outline-offset:2px}
/* sitio para el interruptor: el nombre del nivel y los botones redondos se recorren un poco */
#hud{padding-right:calc(88px + env(safe-area-inset-right,0px))}
body.tactil #hud{padding-right:248px}
body.tactil.enJuego #hudBotones,body.tactil.enReto #hudBotones{right:96px}
@media (pointer:coarse){
  #idiomaSel button{min-width:44px;height:36px;font-size:13px}
  #hud{padding-right:calc(108px + env(safe-area-inset-right,0px))}
  body.tactil #hud{padding-right:268px}
  body.tactil.enJuego #hudBotones,body.tactil.enReto #hudBotones{right:116px}
}
/* ---------- el HUD cabe en teléfonos apaisados ----------
   La fila del HUD no se partía: en 844×390 y 667×375 (sobre todo con texto grande) los cuadritos de la palabra y los contadores
   seguían de largo por debajo de los botones redondos y del interruptor ES/EN, y en un escenario angosto con ratón el nombre del
   nivel se metía debajo del interruptor. Ahora la fila se parte en dos cuando no cabe (la zona reservada a la derecha se respeta),
   el nombre del nivel se acorta a icono + una palabra por debajo de 900 px (HUD_CORTO, 01-base.js) y se recorta con "…" antes de
   estorbar, y en teléfonos los cuadritos de la palabra son un poco más compactos para que casi siempre quepa todo en una fila. */
#hud{flex-wrap:wrap;row-gap:3px}
#hud .bloque{flex:none}
#hud .nivel{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:6px}
body.tactil #hud{gap:6px}
body.tactil .letrita{width:1.2em;height:1.4em}
body.tactil #hudPalabra{gap:2px}


/* =====================================================================
   portada renovada — versión 7.13
   Solo toca la portada (#portada): título con cinta, cuento en su tarjeta, fila de personajes con "quién es quién",
   resumen del progreso, consejo con foquito, teclas como teclas de verdad y el candado en su esquina.
   ===================================================================== */
/* el fondo deja ver un poco más la selva animada del lienzo hacia abajo (arriba sigue oscuro para leer bien) */
#portada{background:linear-gradient(180deg,rgba(14,8,32,.94) 0%,rgba(14,8,32,.91) 50%,rgba(14,8,32,.74) 100%)}
body:not(.tactil) #portada{gap:6px;padding:min(2.2%,14px) min(5%,32px)}   /* 7.13.2: un poco más apretado (tarjetas más altas): con Oreo, resumen y "Seguir" cabe sin desplazarse */
/* centrado vertical cuando cabe, con scroll desde arriba cuando no: los márgenes automáticos van en el primer y el último
   elemento VISIBLES (el de .capa cae en la nebulosa y en una estrellita, que son absolutos y no cuentan) */
#portada h1{margin-top:auto}
body:not(.tactil) #portada .teclas.soloTeclado{margin-bottom:auto}
body.tactil #portada .ajustes{margin-bottom:auto}
/* el candado del atajo (para papá y mamá): en su esquina y discreto. La regla general de la portada lo volvía
   "relative" y lo dejaba flotando en medio, encima del título */
#portada>#btnAtajo.candado{position:absolute;left:12px;top:12px;z-index:2;width:32px;height:32px;font-size:14px;opacity:.45;transition:opacity .2s,transform .2s}
#portada>#btnAtajo.candado:hover,#portada>#btnAtajo.candado:focus-visible{opacity:1;transform:scale(1.08)}
/* título: un poco más compacto, y el subtítulo como una cinta rosa */
#portada h1{font-size:clamp(26px,5.2vw,50px);letter-spacing:.3px}
#portada h1 small{display:table;margin:9px auto 0;font-size:.33em;letter-spacing:3px;padding:.24em 1.15em;border-radius:999px;color:#fff;
  background:linear-gradient(90deg,#ff4d8d,#ff7ab0);text-shadow:0 2px 0 #7d1b42;box-shadow:0 4px 0 rgba(0,0,0,.28),0 0 18px rgba(255,77,141,.35)}
/* saludo y fichas de jugador / heroína */
#portada .jugadores{gap:10px}
#portada .ajuste{border-radius:999px;padding:.42em 1em;font-weight:bold;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);transition:background .15s,border-color .15s,transform .15s}
#portada .ajuste:hover,#portada .ajuste:focus-visible{background:rgba(255,255,255,.18);border-color:var(--sol);outline:none;transform:translateY(-1px)}
#btnJugador::before{content:'🎒 '}
/* resumen del progreso (solo si ya se jugó) y tabla de puntajes de la casa */
.resumenFila{display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:center;align-items:center}
.resumenFila[hidden],#portada .puntajes:empty{display:none}
.progresoPortada{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.progresoPortada[hidden]{display:none}
.progresoPortada span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:bold;color:#e7dcff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.25em .85em;cursor:default}
.progresoPortada b{color:var(--sol)}
#portada .puntajes span{background:rgba(0,0,0,.28);border-radius:999px;padding:.22em .75em}
/* el cuento, en su tarjeta con el libro asomando en la esquina */
#portada .cuento{position:relative;max-width:min(80ch,100%);padding:9px 22px 10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.13);box-shadow:0 6px 16px rgba(0,0,0,.25)}
#portada .cuento::before{content:'📖';position:absolute;left:-13px;top:-13px;font-size:24px;transform:rotate(-10deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
#portada .cuento>p:not(.hola):not(.consejo){font-size:clamp(12px,1.5vw,14.5px);line-height:1.45;max-width:none;color:#efe8ff;margin:0}
body.tactil #portada .cuento{display:none}
/* la fila de personajes (7.13.2): tarjetas grandes y altas (104 x 128; en el teléfono 62 x 76 y 56 x 69, la misma proporción
   13:16 que el lienzo, para que el dibujo no se deforme) con cada personaje ampliado hasta llenarlas y el pasto donde pisan
   (el pasto empieza en el 93 %, donde el lienzo pone los pies), nombre y "quién es quién" debajo. Con Oreo son 8 y caben en
   un renglón: 8 x 104 + 7 x 8 = 888 de los 896 de ancho útil. */
body:not(.tactil) #portada .equipo{gap:8px}
body:not(.tactil) #portada .equipo figure{width:104px} body:not(.tactil) #portada .equipo canvas{width:104px;height:128px}
#portada .equipo canvas{border-radius:16px;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 8px 16px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;
  background:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 93%,rgba(63,191,133,.5) 93.5%,rgba(63,191,133,.5) 100%)}
#portada .equipo figure:hover canvas{background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 93%,rgba(63,191,133,.65) 93.5%,rgba(63,191,133,.65) 100%)}
@media (pointer:coarse){ #portada .equipo canvas{width:62px;height:76px} }
@media (pointer:coarse) and (max-height:430px), (pointer:coarse) and (orientation:portrait) and (max-width:430px){ #portada .equipo canvas{width:56px;height:69px} }
#portada .equipo figure.heroina canvas{box-shadow:0 0 0 2px rgba(255,201,74,.85),0 0 18px rgba(255,201,74,.35),0 8px 16px rgba(0,0,0,.4)}
#portada .equipo figcaption{font-size:12px;line-height:1.15;margin-top:5px}
#portada .equipo figure.heroina figcaption{color:#fff3a8}
#portada .equipo figcaption small{display:block;font-weight:normal;color:#c9bff0;font-size:10.5px;line-height:1.2;margin-top:1px}
/* botones grandes: un poco más redondos y con brillo al pasar el ratón */
#portada #filaJugar{gap:14px;margin-top:2px}
#portada .boton{border-radius:16px}
/* con partida guardada, "Seguir la aventura" es el botón rosa que late y "Empezar de nuevo" queda apagado (antes los dos eran celestes) */
#portada #btnContinuar.primaria{background:var(--fresa);color:#fff}
#portada #btnJugar.azul{background:rgba(255,255,255,.12);color:#e7dcff;border:2px solid rgba(255,255,255,.25);box-shadow:0 6px 0 rgba(0,0,0,.35)}
#portada #btnJugar.azul:active{box-shadow:0 2px 0 rgba(0,0,0,.35)}
@media (hover:hover){ #portada .boton:hover{filter:brightness(1.08) saturate(1.05)} }
/* el consejo que va cambiando: una píldora con foquito */
#portada .consejo{display:inline-flex;align-items:center;gap:8px;max-width:min(92ch,100%);padding:.32em 1em .32em .8em;border-radius:999px;
  background:rgba(255,226,122,.1);border:1px dashed rgba(255,226,122,.4);font-weight:600;color:#ffe27a;font-size:clamp(11px,1.6vw,13.5px);line-height:1.25;text-align:left}
#portada .consejo::before{content:'💡';font-size:1.15em;flex:none}
/* las teclas se ven como teclas */
#portada .teclas{gap:7px 14px;font-size:clamp(11px,1.5vw,12.5px);color:#d3c9f3;align-items:center}
#portada .teclas span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#portada .teclas b{display:inline-block;min-width:1.7em;padding:.1em .45em;border-radius:6px;text-align:center;color:#fff8d6;font-size:.95em;line-height:1.35;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.3);box-shadow:0 2px 0 rgba(0,0,0,.45)}
@media (pointer:coarse){
  #portada .cuento{display:none}
  #portada .equipo figcaption small{display:none}
  .progresoPortada span{font-size:11px;padding:.2em .7em}
  #portada .teclas b{min-width:1.5em;padding:.05em .35em}
  #portada h1{font-size:clamp(20px,4vw,34px);padding:0 54px}   /* con sitio a los lados: que no se meta debajo del interruptor ES/EN */
  #portada h1 small{font-size:.32em;margin-top:5px;letter-spacing:2px}
  /* los tres botones en un solo renglón (siguen siendo de 40 de alto, cómodos para el dedo) */
  #portada .boton{font-size:clamp(12px,1.8vw,15px);padding:.55em 1em;min-height:40px}
  #portada #filaJugar{gap:8px}
}
/* en el teléfono, el saludo va solo en su renglón y las dos fichas (jugador y heroína) juntas debajo: antes la segunda
   ficha se caía sola a un tercer renglón */
body.tactil #portada .jugadores{display:grid;grid-template-columns:auto auto;justify-content:center;gap:5px 8px}
body.tactil #portada .jugadores .hola{grid-column:1/-1;justify-self:center}
/* pantallas muy bajitas (teléfono de lado): el resumen se queda para el mapa, igual que las teclas; y el saludo también se
   guarda (7.13.2: las tarjetas son más altas y con Oreo, el saludo, el consejo de dos renglones y los ajustes no cabían
   por 25 px; el nombre del jugador ya está en su ficha) */
@media (pointer:coarse) and (max-height:430px){ .progresoPortada,.resumenFila.sinTabla{display:none} #portada .hola{display:none} #portada{gap:6px} }
@media (prefers-reduced-motion:reduce){ #portada .ajuste,#portada .equipo canvas,#portada>#btnAtajo.candado{transition:none} }

/* ---------- Álbum de Pepper: las fotos que se esconden en lo alto de cada nivel ---------- */
.album{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:660px}
.album figure{margin:0;width:104px;display:flex;flex-direction:column;align-items:center;gap:5px}
.album canvas{width:104px;height:104px;border-radius:14px;background:rgba(255,255,255,.06);
  box-shadow:0 0 0 2px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.35)}
.album figure.hallada canvas{background:rgba(255,255,255,.13);box-shadow:0 0 0 2px rgba(255,201,74,.55),0 6px 16px rgba(0,0,0,.4)}
.album figcaption{font-size:11.5px;line-height:1.25;color:var(--sol);font-weight:bold;text-align:center}
.album figure:not(.hallada) figcaption{color:#b9aec9;font-weight:normal}
.album figcaption small{display:block;font-weight:normal;color:#b9aec9;font-size:10.5px}
#albumTexto{font-weight:bold;color:var(--sol)}
@media (pointer:coarse){ .album figure,.album canvas{width:78px} .album canvas{height:78px} }