:root{
  --noche:#0f172a; --noche-2:#0b1120; --papel:#fbf6ec; --papel-2:#f2e9d8;
  --ambar:#f59e0b; --ambar-suave:#fbbf24; --ambar-claro:#fde68a; --ambar-oscuro:#d97706;
  --coral:#e0876f; --menta:#8ac6b6;
  --tinta:#2d2e44; --tinta-suave:#6f7089; --blanco-luna:#f8fafc;
  --texto-1:#e2e8f0; --texto-2:#cbd5e1; --texto-3:#94a3b8;
  --acento-activo:var(--ambar-suave);       /* acento sobre el fondo del tema (en temas claros, una versión oscura) */
  --btn-ambar-texto:#33230a;                /* texto sobre el botón ámbar */
  --peligro-texto:#ffb3a9; --peligro-borde:#ff7b6b88;
  --fuente-cuerpo:'Nunito Sans',sans-serif;
  --borde:color-mix(in srgb, var(--ambar-suave) 13%, transparent); --borde-fuerte:color-mix(in srgb, var(--ambar-suave) 25%, transparent); --vidrio-a:#ffffff10; --vidrio-b:#ffffff05;
  --superficie-1:#334155; --superficie-2:#1e293b;
  --halo-a:#f59e0b12; --halo-b:#33415e55; --halo-c:#3730a32e; --halo-d:#164e6333;
  --panel-velo:rgba(11,17,32,.9);
  --radius:20px; --sombra:0 24px 60px -28px rgba(4,6,22,.85);
  --transicion:.16s cubic-bezier(.3,.7,.3,1);
}
/* ---------- tema: Pastel (claro y cálido, de día) ---------- */
:root[data-tema="pastel"]{
  --noche:#fdf3ea; --noche-2:#f8e7d8;
  --ambar:#d97706; --ambar-suave:#e8930f; --ambar-claro:#f0b25a; --ambar-oscuro:#b45309;
  --coral:#c05b45; --menta:#3d8b6b;
  --blanco-luna:#2f2318;
  --texto-1:#43332a; --texto-2:#5f4d40; --texto-3:#8a7362;
  --acento-activo:#b45309;
  --btn-ambar-texto:#fff8ef;
  --peligro-texto:#a83a28; --peligro-borde:#a83a2866;
  --borde:#8a6a4a2e; --borde-fuerte:#8a6a4a52; --vidrio-a:#ffffff8c; --vidrio-b:#ffffff59;
  --superficie-1:#eddcc9; --superficie-2:#e2caae;
  --halo-a:#f9a8d42e; --halo-b:#93c5fd3d; --halo-c:#c4b5fd33; --halo-d:#86efac3d;
  --panel-velo:rgba(253,243,234,.94);
  --sombra:0 18px 40px -22px rgba(120,90,60,.4);
}
/* ---------- tema: Simple (e-reader vintage: gris verdoso apagado, nada de neón) ---------- */
:root[data-tema="simple"]{
  --noche:#c3c6b4; --noche-2:#b7bba7;
  --ambar:#494d3e; --ambar-suave:#3c4033; --ambar-claro:#5e6350; --ambar-oscuro:#31352a;
  --coral:#3a3d31; --menta:#454a3a;
  --blanco-luna:#31352a;
  --texto-1:#31352a; --texto-2:#53574a; --texto-3:#787c6c;
  --acento-activo:#31352a;
  --btn-ambar-texto:#d8dac9;
  --peligro-texto:#4a352c; --peligro-borde:#4a352c66;
  --fuente-cuerpo:'Courier New',Courier,monospace;
  --borde:#31352a35; --borde-fuerte:#31352a5a; --vidrio-a:#b7bba7; --vidrio-b:#b7bba7;
  --superficie-1:#b7bba7; --superficie-2:#aab0a2;
  --halo-a:transparent; --halo-b:transparent; --halo-c:transparent; --halo-d:transparent;
  --panel-velo:#c3c6b4;
  --radius:2px;
  --sombra:none;
}
/* sin sombras, sin desenfoques de cristal: todo plano, como una pantalla LCD retro */
:root[data-tema="simple"] *{box-shadow:none !important;backdrop-filter:none !important}
:root[data-tema="simple"] .btn,
:root[data-tema="simple"] .campo,
:root[data-tema="simple"] .chip,
:root[data-tema="simple"] .modal-caja,
:root[data-tema="simple"] .tarjeta-cuento,
:root[data-tema="simple"] .tarjeta-continuar,
:root[data-tema="simple"] .tarjeta-pj,
:root[data-tema="simple"] .tarjeta-modo,
:root[data-tema="simple"] .acceso-rapido,
:root[data-tema="simple"] .acceso-icono,
:root[data-tema="simple"] .fila-pj,
:root[data-tema="simple"] .fila-elem,
:root[data-tema="simple"] .fila-saga,
:root[data-tema="simple"] .hero-cuento,
:root[data-tema="simple"] .btn-icono,
:root[data-tema="simple"] .mini,
:root[data-tema="simple"] .tarjeta-agrupada,
:root[data-tema="simple"] .tarjeta-menu{
  border-radius:2px;
}
/* todas las fotos e ilustraciones quedan teñidas de verde, como en las pantallas LCD antiguas */
:root[data-tema="simple"] img,
:root[data-tema="simple"] .hero-fondo,
:root[data-tema="simple"] .puzzle-tile{
  filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(.35) brightness(1.05) contrast(.92);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* evita que arrastrar hacia abajo recargue la página (pull-to-refresh) o que un arrastre
   lateral se confunda con el gesto de "atrás" del sistema, algo muy molesto en los juegos */
html,body{margin:0;padding:0;overscroll-behavior:none;overscroll-behavior-x:none;overscroll-behavior-y:contain}
body{
  font-family:var(--fuente-cuerpo); color:var(--blanco-luna);
  background:
    radial-gradient(620px 420px at 50% 8%, var(--halo-a) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% -5%, var(--halo-b) 0%, transparent 60%),
    radial-gradient(700px 500px at -10% 40%, var(--halo-c) 0%, transparent 65%),
    radial-gradient(800px 700px at 110% 90%, var(--halo-d) 0%, transparent 60%),
    linear-gradient(175deg, var(--noche) 0%, var(--noche-2) 100%);
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
:root[data-tema="pastel"] body::before,:root[data-tema="simple"] body::before{display:none}
/* cielo estrellado sutil */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 10%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 42%, #fff5 50%, transparent 51%),
    radial-gradient(2px 2px at 76% 22%, #ffe9b855 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 70%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 86%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 12%, #fff7 50%, transparent 51%);
}
@media (prefers-reduced-motion: no-preference){
}
h1,h2,h3,.display{font-family:'Fraunces',serif;font-weight:600;letter-spacing:.005em}
.ico{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;flex:none}
button .ico{pointer-events:none}
.app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}

/* ---------- pantallas ---------- */
.screen{display:none;animation:aparecer .25s ease}
.screen.activa{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- barra superior ---------- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;min-height:44px}
#pantalla-lector .topbar{
  position:sticky;top:0;z-index:30;margin:0 -18px 18px;padding:10px 18px;
  background:var(--panel-velo);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde)
}
#pantalla-lector .topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar h2{margin:0;font-size:1.35rem;font-weight:600;flex:1}
.btn-icono{
  background:var(--vidrio-a);border:1px solid var(--borde);color:var(--blanco-luna);
  border-radius:13px;width:44px;height:44px;font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.btn-icono:hover{background:#ffffff1c;border-color:var(--borde-fuerte)}
#btn-favorito-cuento.activa{color:var(--coral);border-color:color-mix(in srgb, var(--coral) 45%, transparent)}
#btn-favorito-cuento.activa .ico{fill:var(--coral)}
.btn-icono:active{transform:scale(.93)}
.btn-icono .ico{width:1.25em;height:1.25em}

/* ---------- botones ---------- */
.btn{
  font-family:var(--fuente-cuerpo);font-weight:800;font-size:1.05rem;letter-spacing:.01em;
  border:none;border-radius:999px;padding:16px 24px;cursor:pointer;
  transition:transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
  width:100%;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:disabled{opacity:.4;cursor:default}
/* botón principal: relleno ámbar con "bloom" (resplandor difuso de lámpara) */
.btn-ambar{
  background:linear-gradient(170deg,var(--ambar-suave) 0%,var(--ambar) 55%,var(--ambar-oscuro) 100%);
  color:var(--btn-ambar-texto);
  box-shadow:0 0 22px -4px color-mix(in srgb, var(--ambar) 55%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--ambar) 50%, transparent), inset 0 1px 0 #ffffff55;
}
.btn-ambar:not(:disabled):hover{filter:brightness(1.05)}
.btn-fantasma{background:var(--vidrio-a);border:1px solid var(--borde-fuerte);color:var(--blanco-luna)}
.btn-peligro{background:transparent;border:1.5px solid var(--peligro-borde);color:var(--peligro-texto);font-size:1rem;padding:12px 18px}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}

/* ---------- login ---------- */
#pantalla-login{min-height:85dvh;display:none;flex-direction:column;justify-content:center;text-align:center}
#pantalla-login.activa{display:flex}
.escena-login{position:relative;width:200px;height:130px;margin:0 auto 6px}
.logo-luna{width:96px;height:96px;position:absolute;inset:0;margin:auto;color:var(--acento-activo);
  filter:drop-shadow(0 0 34px color-mix(in srgb, var(--ambar) 55%, transparent))}
.estrella-flot{position:absolute;color:var(--acento-activo);opacity:.7}
.estrella-flot.e1{width:18px;height:18px;top:6px;left:22px}
.estrella-flot.e2{width:26px;height:26px;top:18px;right:8px;opacity:.85}
.estrella-flot.e3{width:13px;height:13px;bottom:4px;left:52px;opacity:.5}
@media (prefers-reduced-motion: no-preference){
  .logo-luna{animation:flotar-luna 5s ease-in-out infinite}
  @keyframes flotar-luna{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .estrella-flot{animation:titilar 3.2s ease-in-out infinite}
  .estrella-flot.e2{animation-delay:1.1s}
  .estrella-flot.e3{animation-delay:2s}
  @keyframes titilar{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}
}
.tarjeta-login{
  background:linear-gradient(165deg,var(--vidrio-a),var(--vidrio-b));
  border:1px solid var(--borde);border-radius:22px;padding:22px 20px 20px;
  backdrop-filter:blur(10px);box-shadow:var(--sombra);
}
.saludo{background:linear-gradient(120deg,var(--ambar-claro),var(--ambar) 65%,var(--ambar-oscuro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#pantalla-login h1{font-size:2.9rem;margin:.1em 0 .05em;font-weight:700;
  background:linear-gradient(120deg,var(--ambar-claro), var(--ambar) 60%, var(--ambar-oscuro));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px color-mix(in srgb, var(--ambar) 45%, transparent))}
#pantalla-login p{color:var(--texto-2);margin-top:2px;letter-spacing:.02em}
.campo{
  width:100%;font-size:1.05rem;padding:14px 17px;border-radius:14px;
  border:1px solid var(--borde-fuerte);background:var(--vidrio-a);color:var(--blanco-luna);
  font-family:var(--fuente-cuerpo);margin-bottom:14px;
  transition:border-color var(--transicion), background var(--transicion);
}
.campo:focus{outline:none;border-color:color-mix(in srgb, var(--ambar) 53%, transparent);background:#ffffff17}
.campo::placeholder{color:var(--texto-3)}
select.campo option{background:var(--noche-2);color:var(--blanco-luna)}

/* ---------- inicio ---------- */
.saludo{font-size:1.9rem;margin:8px 0 2px}
.subsaludo{color:var(--texto-2);margin:0 0 22px}
.menu-grande{display:grid;gap:16px}
.tarjeta-menu{
  display:flex;align-items:center;gap:18px;text-align:left;
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1px solid var(--borde);border-radius:var(--radius);
  padding:22px;color:var(--blanco-luna);cursor:pointer;font-family:var(--fuente-cuerpo);
  transition:transform var(--transicion), border-color var(--transicion), background var(--transicion);
  width:100%;backdrop-filter:blur(8px);
}
.tarjeta-menu:hover{border-color:var(--borde-fuerte)}
.tarjeta-menu:active{transform:scale(.985)}
.tarjeta-menu .emoji{flex:none;width:52px;height:52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;color:var(--acento-activo);
  background:linear-gradient(160deg,color-mix(in srgb, var(--ambar) 15%, transparent),color-mix(in srgb, var(--ambar) 5%, transparent));border:1px solid color-mix(in srgb, var(--ambar) 20%, transparent)}
.tarjeta-menu .emoji .ico{width:1.55em;height:1.55em}
.tarjeta-menu .titulo{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;display:block}
.tarjeta-menu .desc{color:var(--texto-2);font-size:.92rem}

/* ---------- barra de navegación inferior ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;
  background:var(--panel-velo);backdrop-filter:blur(16px);
  border-top:1px solid var(--borde-fuerte);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
/* iconos solos, sin etiqueta de texto */
.tab-item{
  background:none;border:none;color:var(--texto-3);display:flex;
  align-items:center;justify-content:center;
  padding:12px;border-radius:16px;cursor:pointer;flex:1;max-width:110px;
  transition:color var(--transicion),background var(--transicion);
}
.tab-item .ico{width:1.65em;height:1.65em}
.tab-item.activa{color:var(--acento-activo);background:color-mix(in srgb, var(--ambar) 9%, transparent)}
.tab-item:active{transform:scale(.92)}
/* pestaña de perfil: MISMO ancho flexible que las demás (antes era fija y más estrecha, lo
   que descuadraba el centrado de toda la barra: "inicio" quedaba visiblemente descentrado).
   Solo la imagen interior tiene un tamaño propio, redonda, del mismo alto que un icono normal. */
.btn-avatar-tab img{width:1.65em;height:1.65em;object-fit:cover;border-radius:50%;display:block}
.btn-avatar-tab.activa img,.btn-avatar-tab.activa .ico{
  outline:2px solid var(--ambar-suave);border-radius:50%;outline-offset:1px;
}
.app{padding-bottom:calc(86px + env(safe-area-inset-bottom))}

/* ---------- campana de notificaciones flotante ---------- */
/* selector con #id para ganar siempre a ".btn-icono{position:relative}", tenga el orden que tenga en la cascada */
#btn-campana.notif-flotante{
  position:fixed;top:14px;top:calc(14px + env(safe-area-inset-top,0px));right:16px;left:auto;bottom:auto;
  z-index:98;box-shadow:var(--sombra);
}

/* ---------- hero: carrusel de cuentos destacados (último, más leído, viajero, saga) ---------- */
/* una sola tarjeta visible cada vez, a pantalla completa; el avance automático mueve la
   "pista" interna con transform, en bucle, cada 10s (ver iniciaCarruselHero en app.js) */
.hero-carrusel{
  position:relative;overflow:hidden;border-radius:24px;margin-bottom:28px;box-shadow:var(--sombra);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;
}
.hero-carrusel:active{cursor:grabbing}
.hero-carrusel-pista{display:flex;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.hero-carrusel .hero-cuento{flex:0 0 100%;margin-bottom:0;border-radius:24px;box-shadow:none}
.hero-cuento{
  position:relative;border-radius:24px;overflow:hidden;min-height:220px;
  display:flex;align-items:flex-end;box-shadow:var(--sombra);
  border:1px solid var(--borde);
}
.hero-fondo{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--superficie-2)}
.hero-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f172a00 15%,#0f172af0 90%)}
.hero-contenido{position:relative;padding:20px;z-index:1;width:100%}
/* siempre sobre el velo oscuro de la foto: color claro fijo, sea cual sea el tema */
.hero-etiqueta{
  display:inline-flex;align-items:center;gap:6px;color:#fbbf24;
  font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
}
.hero-contenido h2{font-size:1.45rem;margin:.2em 0;color:#fff;line-height:1.2}
.hero-resumen{color:#e2e8f0;font-size:.9rem;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-contenido .btn{width:auto;padding:12px 22px;display:inline-flex;align-items:center;gap:8px}

/* ---------- accesos rápidos ---------- */
.subtitulo-seccion{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;color:var(--texto-1);margin:0 0 12px}
.accesos-rapidos{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;margin-bottom:28px;scrollbar-width:none}
.accesos-rapidos::-webkit-scrollbar{display:none}
.acceso-rapido{
  flex:none;width:104px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1px solid var(--borde);border-radius:18px;padding:16px 10px;
  color:var(--blanco-luna);cursor:pointer;font-family:var(--fuente-cuerpo);
  transition:transform var(--transicion),border-color var(--transicion);
}
.acceso-rapido:active{transform:scale(.95)}
.acceso-rapido:hover{border-color:var(--borde-fuerte)}
.acceso-icono{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:var(--acento-activo);background:linear-gradient(160deg,color-mix(in srgb, var(--ambar) 15%, transparent),color-mix(in srgb, var(--ambar) 5%, transparent));border:1px solid color-mix(in srgb, var(--ambar) 20%, transparent);
}
.acceso-icono .ico{width:1.5em;height:1.5em}
.acceso-titulo{font-size:.82rem;font-weight:800;text-align:center;line-height:1.2}

/* ---------- continuar leyendo ---------- */
.lista-continuar{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.lista-continuar::-webkit-scrollbar{display:none}
.tarjeta-continuar{
  flex:none;width:150px;text-align:left;background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1px solid var(--borde);border-radius:16px;overflow:hidden;cursor:pointer;color:var(--blanco-luna);
  font-family:var(--fuente-cuerpo);padding:0;
}
.tarjeta-continuar .mini{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--superficie-1)}
.tarjeta-continuar .mini-emoji{display:flex;align-items:center;justify-content:center;font-size:2rem}
.tarjeta-continuar .info{padding:9px 11px 12px}
.tarjeta-continuar .titulo{font-weight:800;font-size:.86rem;line-height:1.25;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarjeta-continuar .fecha{color:var(--texto-3);font-size:.74rem}

/* ---------- selector de perfiles: fotos grandes ---------- */
#rejilla-miembros{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
#rejilla-miembros .avatar{width:112px;height:112px;border:4px solid color-mix(in srgb, var(--ambar-suave) 25%, transparent)}

/* ---------- campana de notificaciones ---------- */
.btn-icono{position:relative}
.punto-notif{
  position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;
  background:#ef4444;border:2px solid var(--noche);
}

/* ---------- selector de personajes ---------- */
.rejilla-personajes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.tarjeta-pj{
  color:var(--blanco-luna);
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1.5px solid var(--borde);border-radius:var(--radius);
  padding:14px 10px;text-align:center;cursor:pointer;position:relative;
  transition:transform var(--transicion),border-color var(--transicion),background var(--transicion);
  backdrop-filter:blur(8px);
}
.tarjeta-pj:active{transform:scale(.96)}
/* marco "mágico": aro dorado alrededor del avatar */
.tarjeta-pj .avatar{
  width:86px;height:86px;border-radius:50%;margin:0 auto 10px;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--superficie-1),var(--superficie-2));border:3px solid color-mix(in srgb, var(--ambar-suave) 25%, transparent);
}
.avatar-emoji{display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.tarjeta-pj .nombre{font-family:var(--fuente-cuerpo);font-weight:800;font-size:.98rem;line-height:1.25}
.tarjeta-pj.elegida{border-color:color-mix(in srgb, var(--ambar) 53%, transparent);background:linear-gradient(160deg,color-mix(in srgb, var(--ambar) 13%, transparent),color-mix(in srgb, var(--ambar) 4%, transparent));box-shadow:0 10px 30px -14px color-mix(in srgb, var(--ambar) 50%, transparent)}
.tarjeta-pj.elegida .avatar{border-color:var(--ambar)}
.tarjeta-pj .check{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:var(--ambar);color:var(--btn-ambar-texto);display:none;
  align-items:center;justify-content:center;
}
.tarjeta-pj .check .ico{width:.9em;height:.9em;stroke-width:2.6}
.tarjeta-pj.elegida .check{display:flex;animation:pop .2s ease}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.pie-fijo{position:sticky;bottom:0;padding-top:14px;background:linear-gradient(180deg,transparent,var(--noche-2) 55%)}
.nota{color:var(--texto-2);font-size:.95rem;margin:10px 2px 16px}

/* ---------- tarjeta agrupada (secciones dentro de un paso) ---------- */
.tarjeta-agrupada{
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1px solid var(--borde);border-radius:var(--radius);
  padding:18px 16px;margin-bottom:16px;backdrop-filter:blur(8px);
}
.tarjeta-agrupada .subtitulo-seccion{margin-bottom:14px}
.tarjeta-agrupada .grupo-elem:last-child{margin-bottom:0}

/* ---------- modos ---------- */
.lista-modos{display:grid;gap:14px}
.tarjeta-modo{
  display:flex;align-items:center;gap:16px;background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1.5px solid var(--borde);border-radius:var(--radius);padding:18px;cursor:pointer;
  color:var(--blanco-luna);text-align:left;width:100%;font-family:var(--fuente-cuerpo);
  transition:transform var(--transicion),border-color var(--transicion),box-shadow var(--transicion);
  backdrop-filter:blur(8px);
}
.tarjeta-modo:active{transform:scale(.985)}
.tarjeta-modo.elegida{border-color:color-mix(in srgb, var(--ambar) 53%, transparent);background:linear-gradient(160deg,color-mix(in srgb, var(--ambar) 13%, transparent),color-mix(in srgb, var(--ambar) 4%, transparent));box-shadow:0 10px 30px -14px color-mix(in srgb, var(--ambar) 50%, transparent)}
.tarjeta-modo .emoji{flex:none;width:48px;height:48px;border-radius:14px;color:var(--acento-activo);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,color-mix(in srgb, var(--ambar) 15%, transparent),color-mix(in srgb, var(--ambar) 5%, transparent));border:1px solid color-mix(in srgb, var(--ambar) 20%, transparent)}
.tarjeta-modo .emoji .ico{width:1.45em;height:1.45em}
.tarjeta-modo .titulo{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;display:block}
.tarjeta-modo .desc{color:var(--texto-2);font-size:.9rem}
#campo-tema{display:none;margin-top:14px}
#campo-tema.visible{display:block;animation:aparecer .2s ease}

/* ---------- PIN ---------- */
.pin-caja{text-align:center;padding-top:8px}
.pin-puntos{display:flex;gap:14px;justify-content:center;margin:22px 0 26px}
.pin-punto{width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb, var(--ambar-suave) 40%, transparent);transition:background .15s}
.pin-punto.lleno{background:var(--ambar);border-color:var(--ambar);box-shadow:0 0 12px color-mix(in srgb, var(--ambar) 60%, transparent)}
.pin-teclado{display:grid;grid-template-columns:repeat(3,minmax(72px,88px));gap:12px;justify-content:center}
/* teclas con aro dorado y resplandor suave, como constelaciones encendidas */
.pin-tecla{
  font-family:'Fraunces',serif;font-size:1.45rem;font-weight:600;color:var(--acento-activo);
  background:var(--vidrio-b);border:1px solid color-mix(in srgb, var(--ambar) 30%, transparent);border-radius:50%;aspect-ratio:1;cursor:pointer;
  box-shadow:0 0 16px -6px color-mix(in srgb, var(--ambar) 45%, transparent);
  transition:background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.pin-tecla:active{transform:scale(.92);background:color-mix(in srgb, var(--ambar) 12%, transparent);box-shadow:0 0 20px -4px color-mix(in srgb, var(--ambar) 70%, transparent)}
.pin-error{color:var(--peligro-texto);min-height:1.4em;margin-top:16px}

/* ---------- generando ---------- */
#pantalla-generando{min-height:80dvh;display:none;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding-top:6dvh}
#pantalla-generando.activa{display:flex}
#pantalla-buscar-generando{min-height:80dvh;display:none;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding-top:6dvh}
#pantalla-buscar-generando.activa{display:flex}
.loader-luna{position:relative;width:110px;height:110px;color:var(--acento-activo)}
.loader-luna .ico{width:64px;height:64px;position:absolute;inset:0;margin:auto;
  filter:drop-shadow(0 0 22px color-mix(in srgb, var(--ambar) 50%, transparent))}
.loader-orbita{position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ambar) 18%, transparent);border-top-color:color-mix(in srgb, var(--ambar) 60%, transparent)}
@media (prefers-reduced-motion: no-preference){
  .loader-orbita{animation:girar 2.6s linear infinite}
  @keyframes girar{to{transform:rotate(360deg)}}
  .loader-luna .ico{animation:latir 2.6s ease-in-out infinite}
  @keyframes latir{0%,100%{opacity:.85}50%{opacity:1}}
}
#msg-carga{font-family:'Fraunces',serif;font-size:1.05rem;margin:0 0 8px;min-height:1.5em;line-height:1.25}
.barra-progreso{width:100%;height:8px;border-radius:99px;background:#ffffff1c;overflow:hidden}
.barra-progreso>div{height:100%;width:35%;border-radius:99px;background:var(--ambar);
  box-shadow:0 0 10px color-mix(in srgb, var(--ambar-suave) 60%, transparent)}
@media (prefers-reduced-motion: no-preference){
  .barra-progreso>div{animation:vaiven 1.6s ease-in-out infinite alternate}
  @keyframes vaiven{from{margin-left:0}to{margin-left:65%}}
}
/* cabecera compacta: mini-luna + mensaje/barra + porcentaje, para dejar sitio al puzle */
.gen-top{display:flex;align-items:center;gap:14px;width:100%;max-width:380px;margin:0 auto}
.loader-luna-mini{width:48px;height:48px;flex:none}
.loader-luna-mini .ico{width:28px;height:28px}
.gen-top-textos{flex:1;min-width:0;text-align:left}
#gen-pct{flex:none;font-weight:700}

/* ---------- puzle (de espera y libre): tamaño NxN mediante --n ---------- */
#puzzle-wrap{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:6px}
.puzzle-grid{
  --n:3;
  width:min(520px,100%);aspect-ratio:1/1;display:grid;
  grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:4px;
  background:var(--vidrio-a);border:1px solid var(--borde);border-radius:var(--radius);
  padding:4px;box-shadow:var(--sombra);touch-action:none;overscroll-behavior:contain;
}
.puzzle-tile{
  border:none;border-radius:8px;cursor:grab;background-color:var(--superficie-2);
  background-repeat:no-repeat;padding:0;transition:transform .12s ease;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.puzzle-tile:active{cursor:grabbing}
.puzzle-tile.seleccionada{outline:3px solid var(--ambar);outline-offset:-3px;transform:scale(.94)}
.puzzle-grid.resuelto .puzzle-tile{cursor:default}
@media (prefers-reduced-motion: no-preference){
  .puzzle-grid.resuelto{animation:pop .3s ease}
}
#btn-ir-cuento{margin:10px 0}

/* ---------- puzles: pantalla libre con selector de tamaño ---------- */
#puzzle-libre-wrap{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:6px}

/* ---------- juego de memoria (parejas de personajes) ---------- */
#memoria-wrap,#memoria-libre-wrap{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:6px}
.memoria-grid{
  width:min(480px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  touch-action:manipulation;overscroll-behavior:contain;
}
.memoria-carta{
  background:none;border:none;padding:0;aspect-ratio:1;cursor:pointer;perspective:800px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;
}
.memoria-interior{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,.2,.2,1);
}
.memoria-carta.volteada .memoria-interior{transform:rotateY(180deg)}
.memoria-cara{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.memoria-dorso{
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));
  border:1.5px solid var(--borde);color:var(--acento-activo);
}
.memoria-dorso .ico{width:1.6em;height:1.6em;opacity:.75}
.memoria-frente{
  transform:rotateY(180deg);border:1.5px solid var(--borde-fuerte);
  background:var(--superficie-2);
}
.memoria-frente img{width:100%;height:100%;object-fit:cover;display:block}
.memoria-carta.emparejada .memoria-frente img{filter:grayscale(1) brightness(.8)}
.memoria-carta.emparejada{cursor:default}
@keyframes popPareja{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.1)}100%{transform:rotateY(180deg) scale(1)}}
@media (prefers-reduced-motion: no-preference){
  .memoria-carta:active .memoria-interior{transform:scale(.94)}
  .memoria-carta.volteada:active .memoria-interior{transform:rotateY(180deg) scale(.94)}
  .memoria-carta.emparejada .memoria-interior{animation:popPareja .3s ease}
}

/* ---------- laberinto: personaje camino a un lugar al azar ---------- */
#laberinto-wrap{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:6px}
.laberinto-grid{
  --n:8;
  /* un poco más estrecho que el ancho disponible: deja un margen extra a los lados para que
     arrastrar el personaje no empiece pegado al borde real de la pantalla, que es donde el
     sistema (Android/iOS) reconoce el gesto de "atrás" antes incluso de que la página lo vea */
  position:relative;width:min(480px, calc(100% - 28px));aspect-ratio:1/1;display:grid;
  grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);
  background:var(--vidrio-a);border:1.5px solid var(--borde-fuerte);border-radius:var(--radius);
  box-shadow:var(--sombra);padding:5px;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;overscroll-behavior:contain;cursor:grab;
}
.laberinto-grid:active{cursor:grabbing}
.laberinto-celda{
  box-sizing:border-box;border-style:solid;border-color:var(--acento-activo);border-width:0;
  background:transparent;transition:background .35s ease;
}
.laberinto-celda.visitada{background:color-mix(in srgb, var(--ambar) 20%, transparent)}
.laberinto-personaje{
  position:absolute;border-radius:50%;overflow:hidden;z-index:5;
  background:var(--superficie-2);display:flex;align-items:center;justify-content:center;color:var(--acento-activo);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.6),0 0 0 3px var(--ambar-suave);
  transition:left .2s cubic-bezier(.3,.7,.3,1),top .2s cubic-bezier(.3,.7,.3,1);
}
.laberinto-personaje img{width:100%;height:100%;object-fit:cover;display:block}
.laberinto-personaje .ico{width:60%;height:60%}
.laberinto-meta-celda{
  position:absolute;display:flex;align-items:center;justify-content:center;
  color:var(--ambar-suave);pointer-events:none;z-index:4;border-radius:50%;
}
.laberinto-meta-celda .ico{width:75%;height:75%}
@media (prefers-reduced-motion: no-preference){
  @keyframes pulsoMeta{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ambar) 55%, transparent)}
    50%{box-shadow:0 0 0 9px transparent}
  }
  .laberinto-meta-celda{animation:pulsoMeta 1.8s ease-in-out infinite}
}

/* ---------- letras: ordena/completa el nombre de un personaje, lugar u objeto ---------- */
#ordena-wrap,#completa-wrap{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:6px}
.letras-imagen-wrap{
  width:220px;height:220px;margin:0 auto 18px;border-radius:26px;overflow:hidden;
  background:linear-gradient(135deg,var(--superficie-1),var(--superficie-2));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra);flex:none;
}
.letras-imagen-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.letras-imagen-wrap .ico{width:5em;height:5em;color:var(--acento-activo);opacity:.7}
.letras-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:480px;touch-action:none}
.letra-slot{
  width:36px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.15rem;text-transform:uppercase;color:var(--blanco-luna);
  background:var(--vidrio-a);border:1.5px solid var(--borde-fuerte);cursor:pointer;flex:none;
  transition:transform .15s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.letra-slot-espacio{width:14px;border:none;background:none;cursor:default}
.letra-slot.fija{background:none;border-color:transparent;color:var(--texto-2);cursor:default}
.letra-slot.llena{background:color-mix(in srgb, var(--ambar) 18%, transparent);border-color:var(--ambar-suave)}
.letra-slot.correcta{background:color-mix(in srgb, var(--menta) 30%, transparent);border-color:var(--menta);color:var(--menta);cursor:default}
/* "imán" mientras se arrastra una ficha por encima: avisa de que aquí es donde va a caer */
.letra-slot.magnetico{background:color-mix(in srgb, var(--ambar) 32%, transparent);border-color:var(--ambar);border-width:2.5px;transform:scale(1.12)}
.letra-slot:active{transform:scale(.92)}
.letras-bandeja{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:480px;touch-action:none;overscroll-behavior:contain}
.letra-ficha{
  width:40px;height:48px;border-radius:12px;border:1.5px solid var(--borde-fuerte);
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));color:var(--blanco-luna);
  font-weight:800;font-size:1.2rem;text-transform:uppercase;cursor:grab;flex:none;
  transition:transform .15s ease,background .2s ease,color .2s ease;box-shadow:var(--sombra);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.letra-ficha.seleccionada{background:var(--ambar);color:var(--btn-ambar-texto);transform:translateY(-4px) scale(1.06)}
.letra-ficha:active{cursor:grabbing;transform:scale(.9)}

/* ---------- Encuéntralos (buscar personajes en una escena) ---------- */
.buscar-imagen-wrap{
  position:relative;width:100%;border-radius:var(--radius);overflow:hidden;
  background:var(--superficie-1);line-height:0;box-shadow:var(--sombra);
}
.buscar-imagen-wrap img{width:100%;display:block;cursor:crosshair}
.buscar-marcador{
  position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  border:3px solid var(--ambar);background:color-mix(in srgb, var(--ambar) 30%, transparent);
  display:flex;align-items:center;justify-content:center;color:var(--ambar);pointer-events:none;
  animation:pop .25s ease;
}
.buscar-marcador .ico{width:1.4em;height:1.4em}
.buscar-lista-nombres{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.buscar-nombre-chip{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-weight:700;font-size:.92rem;
  background:var(--vidrio-a);border:1px solid var(--borde);color:var(--texto-2);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.buscar-nombre-chip .ico{width:1em;height:1em;opacity:0;transition:opacity .2s ease}
.buscar-nombre-chip.encontrado{
  background:color-mix(in srgb, var(--menta) 22%, transparent);border-color:var(--menta);
  color:var(--blanco-luna);text-decoration:line-through;
}
.buscar-nombre-chip.encontrado .ico{opacity:1;color:var(--menta)}

/* ---------- confeti (al resolver un puzle) ---------- */
.confeti-capa{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confeti-pieza{
  position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.9;
  animation:caeConfeti linear forwards;
}
@keyframes caeConfeti{to{transform:translate(var(--drift),108vh) rotate(var(--rot));opacity:.35}}

/* ---------- lector: la página de papel bajo la lámpara ---------- */
.portada{width:100%;border-radius:var(--radius);box-shadow:var(--sombra);display:block;
  background:linear-gradient(160deg,var(--superficie-1),var(--superficie-2));aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--borde)}
.pagina{
  background:linear-gradient(178deg,var(--papel) 0%,var(--papel-2) 100%);color:var(--tinta);
  border-radius:var(--radius);padding:30px 26px 34px;margin-top:-26px;position:relative;
  box-shadow:var(--sombra);
}
.pagina::before{content:"";position:absolute;inset:10px;border:1px solid #2d2e4414;
  border-radius:calc(var(--radius) - 8px);pointer-events:none}
.pagina h1{font-size:1.75rem;margin:0 0 4px;color:#26243a;font-weight:700}
.pagina .meta{color:var(--tinta-suave);font-size:.88rem;margin-bottom:20px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.texto-cuento{font-size:1.18rem;line-height:1.9}
.texto-cuento p{margin:0 0 1.15em}
.texto-cuento > p:first-child::first-letter{
  font-family:'Fraunces',serif;font-weight:700;font-size:3.4em;line-height:.82;
  float:left;padding:4px 10px 0 0;color:#b45309;
}
.sent{border-radius:4px;padding:1px 2px;cursor:pointer;
  transition:background .3s ease, color .3s ease;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* la frase que se está leyendo: trazo de rotulador dorado */
.sent.leyendo{
  background:linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--ambar) 55%, transparent) 52%, color-mix(in srgb, var(--ambar) 40%, transparent) 96%, transparent 96%);
  color:#1e1c30;
}
/* ---------- controles de lectura ---------- */
[hidden]{display:none !important}
.controles{
  /* la barra inferior de navegación es fixed y tapa la parte de abajo: este "sticky" tiene
     que quedar por encima de ella, no pegado al borde real del viewport */
  position:sticky;bottom:calc(86px + env(safe-area-inset-bottom) + 2px);margin-top:20px;display:flex;align-items:center;gap:9px;
  background:var(--panel-velo);border:1px solid var(--borde-fuerte);border-radius:24px;padding:10px 13px;
  backdrop-filter:blur(14px);box-shadow:var(--sombra);
}
/* recogido: solo la flecha + play, pegado a la derecha, una pastilla pequeña que estorba lo
   menos posible; la flecha tira hacia la izquierda para desplegar el resto a su lado */
#controles-lector{width:fit-content;max-width:100%;margin-left:auto;margin-right:0}
#controles-lector.expandida{width:100%}
.flecha-controles{
  background:none;border:none;color:var(--texto-2);cursor:pointer;flex:none;padding:0;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,color var(--transicion);
}
.flecha-controles:hover{color:var(--blanco-luna)}
.flecha-controles .ico{width:1.1em;height:1.1em}
#controles-lector.expandida .flecha-controles{transform:rotate(180deg)}
.controles-extra{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.btn-play{
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,var(--ambar-suave),var(--ambar) 60%,var(--ambar-oscuro));color:var(--btn-ambar-texto);
  box-shadow:0 12px 30px -10px color-mix(in srgb, var(--ambar) 70%, transparent), inset 0 1px 0 #ffffff66;
  transition:transform var(--transicion), filter var(--transicion);
}
.btn-play:hover{filter:brightness(1.05)}
.btn-play:active{transform:scale(.93)}
.btn-play .ico{width:1.5em;height:1.5em}
.btn-ctrl{background:var(--vidrio-a);border:1px solid var(--borde);color:var(--blanco-luna);
  border-radius:50%;width:44px;height:44px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transicion), border-color var(--transicion)}
.btn-ctrl:hover{background:#ffffff1c}
.vel{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.vel input[type=range]{flex:1;accent-color:var(--ambar);min-width:0}
.vel .etiqueta{font-size:.8rem;color:var(--texto-2);white-space:nowrap}

/* ---------- biblioteca ---------- */
.rejilla-biblio{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tarjeta-cuento{
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));border:1px solid var(--borde);backdrop-filter:blur(8px);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;text-align:left;padding:0;
  color:var(--blanco-luna);font-family:var(--fuente-cuerpo);transition:transform .12s ease;
}
.tarjeta-cuento:active{transform:scale(.97)}
.tarjeta-cuento .mini{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--superficie-1)}
.mini-emoji{display:flex;align-items:center;justify-content:center;font-size:2.6rem;background:linear-gradient(135deg,var(--superficie-1),var(--superficie-2))}
.tarjeta-cuento .info{padding:10px 12px 14px}
.tarjeta-cuento .titulo{font-family:var(--fuente-cuerpo);font-weight:800;font-size:.98rem;line-height:1.3;display:block}
.tarjeta-cuento .fecha{color:var(--texto-2);font-size:.8rem}
.vacio{text-align:center;color:var(--texto-2);padding:40px 20px}
.vacio .emoji{font-size:3rem;display:block;margin-bottom:10px}

/* ---------- gestor de personajes ---------- */
.fila-pj{display:flex;align-items:center;gap:14px;background:var(--vidrio-a);border:1px solid var(--borde);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.fila-pj .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--superficie-1),var(--superficie-2))}
/* insignia sobre el avatar para regenerarlo, en vez de un botón suelto entre las acciones */
.avatar-wrap{position:relative;flex:none}
.avatar-badge{
  position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--ambar);color:var(--btn-ambar-texto);border:2px solid var(--noche-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.avatar-badge .ico{width:.75em;height:.75em;stroke-width:2.4}
.fila-pj .datos{flex:1;min-width:0}
.fila-pj .nombre{font-family:var(--fuente-cuerpo);font-weight:800}
.fila-pj .estado{font-size:.8rem;color:var(--texto-2)}
.fila-pj.inactiva{opacity:.5}
.acciones-pj{display:flex;gap:8px;flex:none}
.mini-btn{background:var(--vidrio-a);border:1px solid var(--borde);color:var(--blanco-luna);border-radius:11px;width:40px;height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--transicion)}
.mini-btn:hover{background:#ffffff1c}
.mini-btn .ico{width:1.1em;height:1.1em}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;background:#0a0c20aa;display:none;align-items:flex-end;justify-content:center;z-index:50;backdrop-filter:blur(3px)}
.modal.abierto{display:flex}
.modal-caja{
  background:linear-gradient(170deg,var(--superficie-2),var(--noche-2));border:1px solid var(--borde-fuerte);border-radius:24px 24px 0 0;
  width:min(760px,100%);max-height:88dvh;overflow:auto;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  animation:subir .25s ease;
}
@keyframes subir{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal-caja h3{margin:0 0 16px;font-size:1.25rem}
.modal-caja label{display:block;font-weight:700;font-size:.95rem;margin:14px 0 6px;color:var(--texto-1)}
textarea.campo{resize:vertical;min-height:80px}
.fila-botones{display:flex;gap:10px;margin-top:20px}
.opcion-voz{display:flex;align-items:center;gap:10px;padding:12px 8px;border-radius:14px;cursor:pointer}
.opcion-voz:active{background:#ffffff10}
.opcion-voz input{accent-color:var(--ambar);width:20px;height:20px;flex:none}

/* ---------- insignias, lightbox, uso y admin ---------- */
.badge-pj{position:absolute;top:9px;left:9px;color:var(--ambar);filter:drop-shadow(0 1px 3px #0009)}
.badge-pj .ico{width:1.05em;height:1.05em}
/* borrar una escena de "Encuéntralos" (solo visible para quien tiene el PIN) */
.tarjeta-pj-borrar{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  background:#0009;color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;transition:background .2s ease;
}
.tarjeta-pj-borrar:hover{background:#c0392bcc}
.tarjeta-pj-borrar .ico{width:.9em;height:.9em}
.avatar-emoji .ico,.cubierta-emoji .ico{width:1.5em;height:1.5em;opacity:.55}
.mini-emoji .ico{width:2.1em;height:2.1em;opacity:.5}
.vacio .ico{width:2.4em;height:2.4em;opacity:.6;display:block;margin:0 auto 12px}
.btn-desplegar{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;color:var(--texto-2);font-family:var(--fuente-cuerpo);
  font-weight:700;font-size:.92rem;padding:4px 2px 10px;cursor:pointer;
}
.btn-desplegar .ico{transition:transform .2s ease}
.btn-desplegar.abierto .ico{transform:rotate(180deg)}
#saga-portada{margin-bottom:14px;aspect-ratio:21/9}
.token{color:var(--acento-activo)}
.token .ico{width:.85em;height:.85em}
#uso-info{font-size:.85rem;color:var(--texto-3);margin-top:14px}
#modal-img{align-items:center;justify-content:center}
#modal-img img{max-width:96vw;max-height:88dvh;border-radius:18px;box-shadow:var(--sombra)}
.portada{cursor:zoom-in}
.fila-usuario{display:flex;align-items:center;gap:12px;background:var(--vidrio-a);border:1px solid var(--borde);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.fila-usuario .datos{flex:1;min-width:0}
.fila-usuario .nombre{font-family:var(--fuente-cuerpo);font-weight:800}
.fila-usuario .consumo{font-size:.82rem;color:var(--texto-2)}
.fila-usuario.inactiva{opacity:.5}
.subtitulo-gestor{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.subtitulo-gestor h3{margin:0;font-size:1.15rem;flex:1}
.fila-elem{display:flex;align-items:center;gap:12px;background:var(--vidrio-a);border:1px solid var(--borde);border-radius:18px;padding:10px 14px;margin-bottom:10px}
.fila-elem .emoji{font-size:1.4rem;flex:none}
.fila-elem .avatar{width:48px;height:48px;border-radius:14px;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--superficie-1),var(--superficie-2))}
.fila-elem .avatar-emoji .ico{width:1.4em;height:1.4em;opacity:.6}
.fila-elem .datos{flex:1;min-width:0}
.fila-elem .nombre{font-weight:700}
.fila-elem .desc{font-size:.82rem;color:var(--texto-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-elem-clic{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background var(--transicion)}
.fila-elem-clic:hover{background:#ffffff1c}
.grupo-elem{margin-top:16px}
.grupo-elem label{display:block;font-weight:700;margin-bottom:4px;color:var(--texto-1)}

/* ---------- chips de rasgos y personajes ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.chip{
  font-family:var(--fuente-cuerpo);font-weight:700;font-size:.88rem;
  background:var(--vidrio-a);border:1px solid var(--borde-fuerte);color:var(--blanco-luna);
  border-radius:99px;padding:8px 14px;cursor:pointer;
  transition:background var(--transicion),border-color var(--transicion),color var(--transicion);
  display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{border-color:#ffffff45}
.chip.activa{background:color-mix(in srgb, var(--ambar) 14%, transparent);border-color:color-mix(in srgb, var(--ambar) 53%, transparent);color:var(--acento-activo)}
.chip .ico{width:1em;height:1em}
.chip:disabled{cursor:default;opacity:.75}
/* muestra de color en el selector de tema */
.bolita-tema{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid #ffffff40}

/* ---------- sagas ---------- */
.fila-saga{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:linear-gradient(160deg,var(--vidrio-a),var(--vidrio-b));border:1px solid var(--borde);backdrop-filter:blur(8px);
  border-radius:var(--radius);padding:14px;margin-bottom:12px;cursor:pointer;
  color:var(--blanco-luna);font-family:var(--fuente-cuerpo);transition:transform .12s ease;
}
.fila-saga:active{transform:scale(.98)}
.fila-saga.elegida{border-color:color-mix(in srgb, var(--ambar) 53%, transparent);background:linear-gradient(160deg,color-mix(in srgb, var(--ambar) 13%, transparent),color-mix(in srgb, var(--ambar) 4%, transparent))}
.fila-saga .cubierta{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--superficie-1),var(--superficie-2))}
.cubierta-emoji{display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.fila-saga .titulo{font-family:var(--fuente-cuerpo);font-weight:800;display:block}
.fila-saga .detalle{color:var(--texto-2);font-size:.88rem}
.contexto-saga{
  background:var(--vidrio-b);border:1px solid var(--borde);border-radius:var(--radius);
  padding:14px 16px;color:var(--texto-1);font-size:.95rem;margin-bottom:18px;
}
.fila-cap{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--vidrio-a);border:1px solid var(--borde);border-radius:18px;
  padding:10px 14px;margin-bottom:10px;cursor:pointer;color:var(--blanco-luna);
  font-family:var(--fuente-cuerpo);
}
.fila-cap:active{transform:scale(.98)}
.fila-cap .num{
  font-family:'Fraunces',serif;font-weight:600;flex:none;width:38px;height:38px;
  border-radius:50%;background:color-mix(in srgb, var(--ambar) 12%, transparent);border:1px solid color-mix(in srgb, var(--ambar) 20%, transparent);color:var(--acento-activo);
  display:flex;align-items:center;justify-content:center;
}
.fila-cap .tit{flex:1;min-width:0;font-weight:700}
.fila-cap .iconos{flex:none;color:var(--texto-2);font-size:.9rem}

/* ---------- voz narrada y música ---------- */
.btn-ctrl.activa{background:var(--ambar);border-color:var(--ambar);color:#4a3200}
.fila-ajuste{display:flex;align-items:center;gap:12px;margin:6px 0 4px}
.fila-ajuste input[type=range]{flex:1;accent-color:var(--ambar)}

/* ---------- barra de grabación ---------- */
.barra-rec{border-color:#e0876f66;background:#2a1820ee}
.punto-rec{width:12px;height:12px;border-radius:50%;background:#e0876f;flex:none}
@media (prefers-reduced-motion: no-preference){
  .punto-rec{animation:pulso-rec 1.2s ease-in-out infinite}
  @keyframes pulso-rec{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
}
.grabando .sent{cursor:pointer}
.grabando .sent.leyendo{background:linear-gradient(180deg, transparent 52%, rgba(224,135,111,.5) 52%, rgba(224,135,111,.35) 96%, transparent 96%)}

/* ---------- elige tu aventura ---------- */
.inter-pregunta{font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem;margin:1.3em 0 .4em;color:#26243a}
.btn-opcion{
  display:block;width:100%;text-align:left;background:#2d2e440a;
  border:1.5px solid #2d2e442e;color:var(--tinta);border-radius:14px;
  padding:14px 16px;margin-top:10px;font-family:var(--fuente-cuerpo);
  font-weight:700;font-size:1.02rem;cursor:pointer;line-height:1.4;
  transition:border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.btn-opcion:hover{border-color:#b4530999;background:color-mix(in srgb, var(--ambar) 8%, transparent)}
.btn-opcion:active{transform:scale(.99)}
.btn-opcion:disabled{opacity:.5;cursor:default}
.eleccion-hecha{
  font-style:italic;color:#a16207;margin:1em 0;padding-left:14px;
  border-left:3px solid color-mix(in srgb, var(--ambar) 53%, transparent);
}
.inter-cargando{display:flex;align-items:center;gap:10px;color:var(--tinta-suave);
  font-style:italic;margin-top:1.2em}
.puntitos i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b45309;
  margin-right:4px;opacity:.4}
@media (prefers-reduced-motion: no-preference){
  .puntitos i{animation:puntito 1.2s ease-in-out infinite}
  .puntitos i:nth-child(2){animation-delay:.2s}
  .puntitos i:nth-child(3){animation-delay:.4s}
  @keyframes puntito{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
}

/* ---------- perfil ---------- */
.fila-token{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem;margin-bottom:6px}
.barra-token{height:10px;border-radius:99px;background:#ffffff14;border:1px solid var(--borde);overflow:hidden}
.barra-token>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ambar-suave),var(--ambar));
  width:0;transition:width .6s cubic-bezier(.3,.7,.3,1)}
.barra-token>div.llena{background:linear-gradient(90deg,#e0876f,#c4664e)}

/* ---------- modal de confirmación ---------- */
#modal-confirm{align-items:center;padding:20px}
.caja-confirm{
  background:linear-gradient(170deg,var(--superficie-2),var(--noche-2));border:1px solid var(--borde-fuerte);
  border-radius:22px;width:min(420px,100%);padding:24px 22px;
  box-shadow:var(--sombra);animation:subir .22s ease;text-align:left;
}
.caja-confirm h3{margin:0 0 8px;font-size:1.3rem}
.caja-confirm p{color:var(--texto-2);margin:0 0 20px;line-height:1.55}
.btn-peligro-lleno{background:linear-gradient(170deg,#e0876f,#c4664e);color:#33130a;
  box-shadow:0 12px 30px -12px rgba(224,135,111,.55), inset 0 1px 0 #ffffff44}

/* ---------- toast ---------- */
/* avisos: arriba a la derecha, entrando desde el borde superior */
#toast{
  position:fixed;right:16px;top:16px;top:calc(16px + env(safe-area-inset-top,0px));
  transform:translateY(calc(-100% - 40px));
  background:var(--panel-velo);border:1.5px solid var(--borde-fuerte);color:var(--blanco-luna);
  padding:13px 20px;border-radius:16px;box-shadow:var(--sombra);z-index:99;
  transition:transform .3s ease;max-width:min(420px,90vw);text-align:left;
}
#toast.visible{transform:translateY(0)}

@media (min-width:600px){
  .modal{align-items:center}
  .modal-caja{border-radius:26px}
}