/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --agua-hondo:#0b3d54; --agua:#1782a5; --agua-claro:#4cc4dc;
  --papel:#fdf3df; --papel-hondo:#f2e2bf; --papel-linea:#e0d3b4;
  --junco:#f2b544; --coral:#e4572e; --uva:#7a5ba6;
  --hoja:#2f7a45; --hoja-claro:#68bd5b; --tinta:#0f2b38;
  --display:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --texto:'Nunito','Segoe UI',system-ui,sans-serif;
  --hud:'Space Mono','SFMono-Regular',Consolas,monospace;
  --r-s:10px; --r-m:18px; --r-l:28px;
  --sombra:0 10px 0 rgba(9,42,58,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--texto);color:var(--tinta);background:var(--agua-hondo);
  min-height:100dvh;padding:14px 12px 40px;overflow-x:hidden}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--agua);text-decoration:none}
:focus-visible{outline:3px solid var(--junco);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;line-height:1.12}
h1{font-size:clamp(27px,5vw,42px);letter-spacing:-.5px}
h2{font-size:clamp(21px,3.6vw,29px)}
h3{font-size:19px}
p{line-height:1.55;margin:.6em 0}
.apunte{font-size:14px;opacity:.7}
.marco{width:min(980px,100%);margin:0 auto}
.tarjeta{background:var(--papel);border-radius:var(--r-l);box-shadow:var(--sombra);
  padding:clamp(18px,3.6vw,34px)}
.pantalla{display:none}
.pantalla.activa{display:block;animation:entrar .3s ease both}
@keyframes entrar{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--hud);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--agua);display:block;margin-bottom:7px}
.btn{font-family:var(--display);font-size:16px;font-weight:600;padding:12px 22px;border-radius:999px;
  background:var(--hoja);color:#fff;box-shadow:0 5px 0 #1d5730;transition:transform .12s,box-shadow .12s;
  display:inline-flex;align-items:center;gap:8px}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #1d5730}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 #1d5730}
.btn.sec{background:var(--papel-hondo);color:var(--tinta);box-shadow:0 5px 0 #d6c197}
.btn.sec:hover{box-shadow:0 3px 0 #d6c197}
.btn.sec:active{box-shadow:0 0 0 #d6c197}
.btn.peligro{background:var(--coral);box-shadow:0 5px 0 #a83415}
.btn.peligro:hover{box-shadow:0 3px 0 #a83415}
.btn.min{font-size:14px;padding:9px 15px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fila.centro{justify-content:center}
.fila.entre{justify-content:space-between}

/* barra superior */
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:min(980px,100%);margin:0 auto 14px;padding:0 4px}
.logo{display:flex;align-items:center;gap:10px;color:var(--papel);font-family:var(--display);
  font-size:19px;font-weight:600}
.logo svg{width:34px;height:34px}
.barra .btn.min{background:rgba(253,243,223,.14);color:var(--papel);box-shadow:none}
.barra .btn.min:hover{background:rgba(253,243,223,.26);transform:none}

/* ============================================================
   BIBLIOTECA
   ============================================================ */
.hero{text-align:center;color:var(--papel);padding:18px 0 26px}
.hero h1{color:var(--papel)}
.hero p{max-width:52ch;margin:10px auto 0;opacity:.82}
.filtros{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:20px 0 26px}
.filtro{font-family:var(--hud);font-size:12px;padding:7px 14px;border-radius:999px;
  background:rgba(253,243,223,.12);color:var(--papel)}
.filtro.on{background:var(--junco);color:var(--tinta)}
.rejilla-juegos{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.ficha{background:var(--papel);border-radius:var(--r-m);overflow:hidden;text-align:left;
  box-shadow:var(--sombra);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.ficha:hover{transform:translateY(-4px);box-shadow:0 14px 0 rgba(9,42,58,.18)}
.ficha .sello{height:112px;display:grid;place-items:center;background:var(--agua-claro)}
.ficha .sello svg{width:78px;height:78px}
.ficha .cuerpo{padding:13px 15px 16px;flex:1;display:flex;flex-direction:column;gap:5px}
.ficha .tipo{font-family:var(--hud);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--agua)}
.ficha .nombre{font-family:var(--display);font-size:18px;line-height:1.2}
.ficha .meta{font-size:13px;opacity:.65;margin-top:auto;padding-top:8px}
.vacio{background:var(--papel);border-radius:var(--r-m);padding:34px;text-align:center}

/* ============================================================
   MARCO DE JUEGO
   ============================================================ */
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--papel);border-radius:var(--r-m) var(--r-m) 0 0;padding:11px 16px}
.hud-lado{display:flex;align-items:center;gap:8px;min-width:92px}
.hud-lado.der{justify-content:flex-end}
.hud-titulo{font-family:var(--display);font-size:clamp(15px,3vw,20px);text-align:center;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vidas{display:flex;gap:4px}
.vida{width:18px;height:18px;transition:transform .3s,opacity .3s}
.vida.gastada{opacity:.22;transform:scale(.75)}
.puntos{font-family:var(--hud);font-size:17px;background:var(--papel-hondo);padding:4px 11px;border-radius:999px}
.camino{display:flex;gap:5px;background:var(--papel);padding:0 16px 11px;align-items:center}
.paso{height:7px;flex:1;border-radius:99px;background:var(--papel-hondo)}
.paso.ok{background:var(--hoja-claro)} .paso.mal{background:var(--coral)} .paso.actual{background:var(--junco)}
.cronometro{font-family:var(--hud);font-size:14px;background:var(--papel-hondo);padding:4px 10px;border-radius:999px}
.cronometro.poco{background:#fbdcd2;color:#8c2f13}
.lienzo{background:var(--papel);border-radius:0 0 var(--r-l) var(--r-l);padding:0 16px 20px;min-height:280px}
.enunciado{background:#fff;border:3px solid var(--papel-hondo);border-radius:var(--r-m);
  padding:14px 18px;margin-bottom:16px}
.enunciado .num{font-family:var(--hud);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--agua);display:block;margin-bottom:3px}
.enunciado .texto{font-family:var(--display);font-size:clamp(17px,3.2vw,24px);line-height:1.25}
.salir{position:fixed;right:14px;bottom:14px;z-index:40}