/* AsterAventura · estilos de la interfaz */
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('fuentes/nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('fuentes/nunito-800.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('fuentes/nunito-900.woff2') format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fuentes/baloo2-800.woff2') format('woff2'); }

:root {
  --tinta: #1d1f45;
  --tinta-suave: #4a4e7a;
  --papel: #ffffff;
  --papel-2: #f3f1ff;
  --violeta: #5b3fd6;
  --violeta-osc: #3f2aa3;
  --amarillo: #ffd43b;
  --amarillo-osc: #d9a400;
  --verde: #1f8a4c;
  --verde-osc: #156b39;
  --rojo: #d13438;
  --azul: #1d5fd1;
  --ambar: #f5b700;
  --borde: #d9d4f5;
  --sombra: 0 10px 30px rgba(20, 12, 70, .28);
  --radio: 20px;
  --fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2b2370; }
body {
  font-family: var(--fuente); font-weight: 600; color: var(--tinta);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none; touch-action: manipulation;
}
input { -webkit-user-select: text; user-select: text; }
#lienzo { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font-family: inherit; }
:focus-visible { outline: 4px solid #ffd43b; outline-offset: 3px; }

/* ── Pantallas ── */
#pantallas { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.pantalla:focus, .desafio:focus { outline: none; }
.pantalla {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  pointer-events: auto; overflow-y: auto;
}
.pantalla.velo { background: rgba(24, 16, 70, .55); }
.efectos .pantalla.velo { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tarjeta {
  background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 24px; width: min(560px, 100%); max-height: 100%; overflow-y: auto; margin: auto;
}
.tarjeta.ancha { width: min(920px, 100%); }
.tarjeta h2 { font-family: var(--titulo); font-weight: 800; font-size: 1.9rem; margin: 0 0 6px; line-height: 1.1; color: var(--violeta-osc); }
.tarjeta p { margin: 6px 0 12px; line-height: 1.45; color: var(--tinta-suave); }
.pila { display: grid; gap: 12px; margin-top: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 16px; padding: 14px 22px; min-height: 54px;
  font-size: 1.15rem; font-weight: 900; cursor: pointer; color: var(--tinta);
  background: var(--papel-2); box-shadow: 0 5px 0 var(--borde); transition: transform .08s, box-shadow .08s;
  text-decoration: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--borde); }
.btn.primario { background: var(--amarillo); box-shadow: 0 5px 0 var(--amarillo-osc); font-size: 1.4rem; min-height: 64px; }
.btn.primario:active { box-shadow: 0 1px 0 var(--amarillo-osc); }
.btn.violeta { background: var(--violeta); color: #fff; box-shadow: 0 5px 0 var(--violeta-osc); }
.btn.violeta:active { box-shadow: 0 1px 0 var(--violeta-osc); }
.btn.verde { background: var(--verde); color: #fff; box-shadow: 0 5px 0 var(--verde-osc); }
.btn.peligro { background: #ffe3e3; color: #a51d23; box-shadow: 0 5px 0 #f5b5b8; }
.btn.chico { min-height: 44px; padding: 10px 16px; font-size: 1rem; }
.fila-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.fila-btn .btn { flex: 1 1 180px; }

/* ── Inicio ── */
.inicio { flex-direction: column; justify-content: space-between; text-align: center; }
.logo { margin-top: 4vh; color: #fff; text-shadow: 0 4px 0 rgba(30, 20, 90, .55), 0 10px 28px rgba(30, 20, 90, .5); }
.logo .marca { font-family: var(--titulo); font-weight: 800; font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: .95; letter-spacing: .5px; }
.logo .marca b { color: var(--amarillo); }
.logo .bajada { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 1.9rem); margin-top: 6px; color: #fff4c2; }
.panel-inicio { background: rgba(255,255,255,.96); border-radius: 24px; box-shadow: var(--sombra); padding: 18px; width: min(460px, 100%); display: grid; gap: 12px; margin-bottom: 2vh; }
.jugador { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; color: var(--tinta-suave); flex-wrap: wrap; }
.jugador button { border: 0; background: none; color: var(--violeta); font-weight: 900; font-size: 1rem; cursor: pointer; text-decoration: underline; padding: 6px; }
.nota-guardado { font-size: .86rem; color: var(--tinta-suave); margin: 0; }
.aviso-banco { background: #fff3bf; color: #7a5200; border-radius: 12px; padding: 10px 12px; font-size: .9rem; text-align: left; }

/* ── Selección de mundo ── */
.mundos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.mundo {
  border: 0; text-align: left; background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; padding: 0;
  box-shadow: 0 6px 0 var(--borde), 0 2px 10px rgba(0,0,0,.06); display: flex; flex-direction: column; font: inherit; color: var(--tinta);
  transition: transform .1s;
}
.mundo:hover { transform: translateY(-2px); }
.mundo:active { transform: translateY(3px); }
.mundo .franja { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; }
.mundo .franja span { font-family: var(--titulo); font-weight: 800; font-size: 2.1rem; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.mundo .franja em { font-style: normal; font-weight: 900; background: rgba(255,255,255,.25); padding: 4px 10px; border-radius: 99px; font-size: .85rem; }
.mundo .cuerpo { padding: 12px 16px 16px; display: grid; gap: 4px; }
.mundo .nombre { font-weight: 900; font-size: 1.12rem; }
.mundo .desc { color: var(--tinta-suave); font-size: .92rem; line-height: 1.35; }
.mundo .estado { margin-top: 6px; font-weight: 800; font-size: .9rem; color: var(--verde); }
.mundo .estado.en-curso { color: var(--violeta); }
.mundo.tutorial .franja { height: 54px; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── Ajustes ── */
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 2px solid var(--papel-2); }
.ajuste label, .ajuste .et { font-weight: 800; }
.ajuste small { display: block; color: var(--tinta-suave); font-weight: 600; }
.interruptor { position: relative; width: 64px; height: 36px; flex: none; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span { position: absolute; inset: 0; background: #cfcbe8; border-radius: 99px; transition: background .15s; }
.interruptor span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: var(--verde); }
.interruptor input:checked + span::after { transform: translateX(28px); }
.interruptor input:focus-visible + span { outline: 4px solid #ffd43b; outline-offset: 3px; }
.ajuste input[type=range] { width: 160px; accent-color: var(--violeta); }
.segmentos { display: inline-flex; background: var(--papel-2); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.segmentos button { border: 0; background: none; padding: 8px 12px; border-radius: 9px; font-weight: 800; cursor: pointer; color: var(--tinta-suave); font-size: .95rem; }
.segmentos button[aria-pressed=true] { background: var(--violeta); color: #fff; }

/* ── Campo de texto ── */
.campo { width: 100%; font: inherit; font-size: 1.3rem; font-weight: 800; padding: 14px 16px; border-radius: 14px; border: 3px solid var(--borde); color: var(--tinta); }
.campo:focus { outline: none; border-color: var(--violeta); }

/* ── HUD ── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.hud-izq { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); display: flex; gap: 8px; flex-wrap: wrap; max-width: 70vw; }
.hud-der { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 8px; }
.hud-chip { display: flex; align-items: center; gap: 6px; background: rgba(20, 14, 64, .62); color: #fff; padding: 6px 12px; border-radius: 99px; font-weight: 900; font-size: 1.05rem; }
.hud-chip svg { width: 20px; height: 20px; }
.ico-cristal { fill: #6fe3ff; }
.ico-estrella { fill: #ffd43b; }
.hud-portales { gap: 5px; }
.hud-portales i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #d0c8ff; display: inline-block; }
.hud-portales i.ok { background: #38d9a9; border-color: #38d9a9; }
.hud-btn { pointer-events: auto; width: 50px; height: 50px; border-radius: 16px; border: 0; background: rgba(20, 14, 64, .62); color: #fff; font-size: 1.15rem; font-weight: 900; cursor: pointer; }
.hud-btn:active { transform: scale(.94); }
@media (max-width: 640px) { .hud-mundo { display: none; } }
.hud-mundo { position: absolute; top: max(64px, calc(env(safe-area-inset-top) + 54px)); left: max(12px, env(safe-area-inset-left)); color: #fff; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,.4); font-size: .95rem; opacity: .9; }

/* ── Avisos ── */
#avisos { position: fixed; top: max(70px, calc(env(safe-area-inset-top) + 60px)); left: 50%; transform: translateX(-50%); z-index: 30; display: grid; gap: 8px; pointer-events: none; width: max-content; max-width: 90vw; }
.aviso { background: #fff; color: var(--tinta); font-weight: 900; padding: 10px 18px; border-radius: 99px; box-shadow: var(--sombra); text-align: center; animation: aparecer .25s ease-out; font-size: 1.05rem; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.sin-animacion .aviso { animation: none; }

/* ── Táctil ── */
#tactil { position: fixed; inset: auto 0 0 0; height: 0; z-index: 12; }
.t-cruz, .t-salto { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.t-cruz { left: max(14px, env(safe-area-inset-left)); width: 210px; height: 96px; display: flex; gap: 10px; }
.t-flecha { flex: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.28); border: 3px solid rgba(255,255,255,.7); border-radius: 24px; color: #fff; font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.t-flecha.activa { background: rgba(255,212,59,.6); }
.t-salto { right: max(14px, env(safe-area-inset-right)); width: 112px; height: 112px; border-radius: 50%; background: rgba(255,212,59,.45); border: 3px solid rgba(255,255,255,.8); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.t-salto span { font-size: 2.2rem; line-height: 1; }
.t-salto small { font-weight: 900; font-size: .78rem; letter-spacing: 1px; }
.t-salto.activa { background: rgba(255,212,59,.85); transform: scale(.95); }
@media (max-height: 420px) {
  .t-cruz { width: 180px; height: 80px; }
  .t-salto { width: 96px; height: 96px; }
}

.girar { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); background: rgba(20,14,64,.85); color: #fff; border-radius: 14px; padding: 10px 12px 10px 16px; z-index: 14; display: flex; gap: 10px; align-items: center; font-weight: 800; max-width: 92vw; }
.girar button { border: 0; background: rgba(255,255,255,.2); color: #fff; width: 34px; height: 34px; border-radius: 10px; font-weight: 900; cursor: pointer; }

/* ── Desafío ── */
.desafio { width: min(860px, 100%); background: var(--papel); border-radius: 24px; box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; max-height: 100%; margin: auto; }
.desafio-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--violeta); color: #fff; flex-wrap: wrap; }
.desafio-cab .materia { font-family: var(--titulo); font-weight: 800; font-size: 1.25rem; }
.desafio-cab .meta-p { font-weight: 800; font-size: .95rem; opacity: .95; display: flex; gap: 10px; align-items: center; }
.dificultad { letter-spacing: 2px; color: var(--amarillo); }
.desafio-cuerpo { padding: 18px 20px 20px; overflow-y: auto; }
.texto-lectura { background: #fff8e1; border-left: 6px solid var(--amarillo); border-radius: 12px; padding: 12px 14px; font-size: 1.12rem; line-height: 1.5; margin: 0 0 14px; color: var(--tinta); font-weight: 700; -webkit-user-select: text; user-select: text; }
.consigna { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 900; line-height: 1.3; margin: 0 0 16px; color: var(--tinta); }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .opciones { grid-template-columns: 1fr; } }
.opcion {
  position: relative; border: 0; border-radius: 16px; padding: 14px 14px 14px 12px; min-height: 76px; cursor: pointer;
  display: flex; align-items: center; gap: 12px; text-align: left; color: #fff; font-size: 1.12rem; font-weight: 900; line-height: 1.25;
  box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .08s, opacity .2s, box-shadow .08s;
}
.opcion:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.opcion .forma { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1; }
.opcion .forma b { font-size: 1.05rem; color: var(--tinta); }
.opcion .forma i { font-style: normal; font-size: .85rem; }
.opcion.o0 { background: var(--rojo); } .opcion.o0 .forma i { color: var(--rojo); }
.opcion.o1 { background: var(--azul); } .opcion.o1 .forma i { color: var(--azul); }
.opcion.o2 { background: var(--ambar); color: #1d1f45; } .opcion.o2 .forma i { color: #a87b00; }
.opcion.o3 { background: var(--verde); } .opcion.o3 .forma i { color: var(--verde); }
.opcion[disabled] { cursor: default; }
.opcion.descartada { opacity: .35; filter: grayscale(.6); }
.opcion.correcta { outline: 5px solid #38d9a9; outline-offset: 2px; }
.opcion .marca { margin-left: auto; font-size: 1.5rem; flex: none; }
.opcion.temblor { animation: temblor .35s; }
@keyframes temblor { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.sin-animacion .opcion.temblor { animation: none; }
.retro { margin-top: 16px; border-radius: 16px; padding: 14px 16px; font-size: 1.08rem; line-height: 1.45; font-weight: 700; }
.retro strong { display: block; font-size: 1.25rem; font-weight: 900; margin-bottom: 4px; }
.retro.pista { background: #fff3bf; color: #5c3d00; }
.retro.bien { background: #d3f9d8; color: #0b5d2a; }
.retro.resuelta { background: #e7f0ff; color: #133b7a; }
.retro .fuente-p { display: block; margin-top: 8px; font-size: .85rem; opacity: .8; font-weight: 600; }
.reloj { height: 8px; background: rgba(255,255,255,.3); border-radius: 99px; overflow: hidden; width: 120px; }
.reloj i { display: block; height: 100%; background: var(--amarillo); transition: width 1s linear; }
.ayuda-teclas { font-size: .85rem; color: var(--tinta-suave); margin-top: 12px; text-align: center; }

/* ── Resultados ── */
.resultados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 620px) { .resultados-grid { grid-template-columns: 1fr; } }
.bloque-res { background: var(--papel-2); border-radius: 16px; padding: 14px 16px; }
.bloque-res h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 900; color: var(--violeta-osc); }
.cifra { font-family: var(--titulo); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--tinta); }
.cifra small { font-family: var(--fuente); font-size: 1rem; color: var(--tinta-suave); }
.lista-res { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-res li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; line-height: 1.3; }
.lista-res .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .9rem; }
.ic.p1 { background: #d3f9d8; color: #0b5d2a; }
.ic.p2 { background: #fff3bf; color: #7a5200; }
.ic.p3 { background: #e7f0ff; color: #133b7a; }
.leyenda { font-size: .82rem; color: var(--tinta-suave); margin-top: 8px; }
.tabla-hist { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .95rem; }
.tabla-hist th, .tabla-hist td { text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--papel-2); vertical-align: top; }
.tabla-hist th { color: var(--tinta-suave); font-size: .85rem; }

.sin-js { color: #fff; text-align: center; padding: 40px; position: relative; z-index: 5; }

/* ── Impresión ── */
#impresion { display: none; }
@media print {
  @page { margin: 14mm; }
  html, body { overflow: visible !important; height: auto !important; background: #fff !important; }
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block !important; color: #000; font-family: var(--fuente); font-size: 11pt; }
  #impresion h1 { font-family: var(--titulo); font-size: 20pt; margin: 0 0 4pt; }
  #impresion h2 { font-size: 14pt; margin: 14pt 0 4pt; border-bottom: 2px solid #000; padding-bottom: 2pt; }
  #impresion table { width: 100%; border-collapse: collapse; margin-top: 6pt; }
  #impresion th, #impresion td { border: 1px solid #999; padding: 4pt 5pt; text-align: left; vertical-align: top; font-size: 9.5pt; }
  #impresion th { background: #eee; }
  #impresion .meta-imp { font-size: 10pt; color: #333; }
  #impresion .seccion { break-inside: avoid; }
  #impresion tr { break-inside: avoid; }
}