/* Estilos comunes. Cada historia redefine los colores en historias/<id>/estilo.css. */
:root{
  --fondo:#17171a; --fondo2:#222228; --borde:#3a3a44; --linea:#77737f;
  --texto:#ecebe7; --gris:#9d9aa3; --acento:#d6b36a; --acento2:#ecd9a6;
  --alerta:#c0503f; --tinta:#1b1a17; --hondo:#101013; --aviso:#26262d;
  --camino:rgba(16,16,19,.94); --velo:rgba(6,6,8,.7);
  --letra:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--letra);font-size:17px;line-height:1.5}
body{background:radial-gradient(ellipse at 50% -20%,#26262e 0%,var(--fondo) 65%) fixed}
#app{max-width:480px;margin:0 auto;padding:0 16px calc(90px + env(safe-area-inset-bottom))}
h1{font-weight:normal;font-size:34px;line-height:1.1;margin:0;color:var(--acento2)}
h2{font-weight:normal;font-size:26px;line-height:1.2;margin:16px 0 4px;color:var(--acento2)}
h3{font-weight:normal;font-style:italic;font-size:17px;color:var(--gris);margin:22px 0 6px}
p{margin:6px 0}
b{color:var(--acento2);font-weight:normal}
.gris{color:var(--gris)}
.peq{font-size:14px}
button{font:inherit;color:inherit;background:transparent;border:1px solid var(--acento);border-radius:8px;padding:10px 14px;min-height:46px;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acento2);outline-offset:2px}
button.pri{background:var(--acento);color:var(--tinta);border-color:var(--acento)}
button.suave{border-color:var(--borde)}
button:disabled{opacity:.35;cursor:default}
.ancho{display:block;width:100%;margin:8px 0}
.fila{display:flex;gap:10px;align-items:center}
.fila>*{flex:1}
input,textarea{font:inherit;color:var(--texto);background:var(--hondo);border:1px solid var(--borde);border-radius:8px;padding:10px 12px;width:100%}
input.codigo{font-size:26px;letter-spacing:.25em;text-transform:uppercase;text-align:center}
textarea{min-height:110px;resize:vertical}
.error{color:var(--alerta)}

/* Portada */
.portada{text-align:center;padding:36px 0 10px}
.portada svg{display:block;margin:0 auto 14px}
.portada p{max-width:34em;margin-left:auto;margin-right:auto}
.intro{margin:18px 0 22px;text-align:left}

/* Lista de historias */
.tarjeta{display:flex;gap:14px;align-items:center;width:100%;text-align:left;margin:10px 0;padding:14px;border:1px solid var(--borde);border-radius:12px;background:var(--fondo2);color:var(--texto);font-family:var(--letra)}
.tarjeta svg{flex:none}
.tarjeta .tt{display:block;font-size:21px;color:var(--acento2)}
.tarjeta .st{display:block;font-size:14px;color:var(--gris)}

/* Cabecera con reloj */
.hud{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 0;background:linear-gradient(var(--fondo) 80%,transparent)}
.hud .donde{flex:1;min-width:0}
.hud .sala{font-size:21px;color:var(--acento2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .quien{font-size:14px;color:var(--gris)}
#esfera{display:flex;flex:none}
.esfera{width:64px;height:64px;flex:none}
.resta{text-align:right;flex:none}
.resta .t{font-size:24px;font-variant-numeric:tabular-nums;color:var(--texto)}
.resta .t.poco{color:var(--alerta)}
.resta .l{font-size:13px;color:var(--gris)}

.pruebas{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
.pruebas button{min-height:36px;padding:4px 10px;font-size:15px;border-color:var(--borde)}
.pruebas button.act{border-color:var(--acento);color:var(--acento2)}

/* Objetos de la sala */
.cosa{border-bottom:1px solid var(--borde)}
.cosa>button{width:100%;text-align:left;border:0;border-radius:0;padding:12px 2px;display:flex;justify-content:space-between;gap:10px}
.cosa>button::after{content:"+";color:var(--acento)}
.cosa.abierta>button::after{content:"–"}
.cosa .txt{padding:0 2px 14px}
.cosa .txt button{margin-top:10px}
.leyenda{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.leyenda span{border:1px solid var(--borde);border-radius:6px;padding:6px 4px;text-align:center;font-size:19px}
.tallado{font-size:26px;letter-spacing:.15em}

.salida{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--borde)}
.salida .q{flex:1}
.salida .e{font-size:14px;color:var(--gris)}
.salida .e.cerr{color:var(--alerta)}
.salida button{flex:none}

.aviso{border-left:3px solid var(--acento);background:var(--aviso);padding:10px 12px;margin:10px 0;border-radius:0 8px 8px 0}
.aviso .di{margin-top:8px}
.aviso .cod{font-size:28px;letter-spacing:.2em;color:var(--acento2)}
.aviso button{min-height:36px;padding:4px 12px;margin-top:8px}

/* Mapa */
.mapa svg{width:100%;height:auto;display:block}
.mapa text{font-family:var(--letra);font-size:14px;fill:var(--gris)}
.mapa .arista{stroke:var(--borde);stroke-width:2;stroke-dasharray:4 4}
.mapa .arista.abierta{stroke:var(--linea);stroke-dasharray:none}
.mapa .nodo rect{fill:var(--fondo2);stroke:var(--borde);stroke-width:1;stroke-dasharray:3 3}
.mapa .nodo.conocida rect{stroke:var(--linea);stroke-dasharray:none}
.mapa .nodo.conocida text{fill:var(--texto)}
.mapa .nodo.cerca{cursor:pointer}
.mapa .nodo.cerca rect{stroke-width:2}
.mapa .nodo.aqui rect{fill:var(--acento);stroke:var(--acento2)}
.mapa .nodo.aqui text{fill:var(--tinta)}

/* Informe */
.rumores{padding-left:0;list-style:none}
.rumores li{padding:10px 0 10px 18px;border-bottom:1px solid var(--borde);position:relative}
.rumores li::before{content:"“";position:absolute;left:0;top:4px;font-size:26px;color:var(--acento)}

/* Barra inferior */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--hondo);border-top:1px solid var(--borde);padding-bottom:env(safe-area-inset-bottom)}
.nav div{max-width:480px;margin:0 auto;display:flex}
.nav button{flex:1;border:0;border-radius:0;padding:8px 2px 10px;font-size:13px;color:var(--gris);min-height:60px;display:flex;flex-direction:column;align-items:center;gap:2px}
.nav button .i{font-size:20px;line-height:1.1}
.nav button.act{color:var(--acento2);box-shadow:inset 0 2px 0 var(--acento)}

/* Hoja inferior (candados, soluciones) */
.velo{position:fixed;inset:0;z-index:10;background:var(--velo);display:flex;align-items:flex-end;justify-content:center}
.hoja{width:100%;max-width:480px;background:var(--fondo2);border:1px solid var(--borde);border-bottom:0;border-radius:14px 14px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));animation:sube .18s ease-out;max-height:92vh;overflow:auto}
@keyframes sube{from{transform:translateY(24px);opacity:.6}}
@media (prefers-reduced-motion:reduce){.hoja{animation:none}}
.huecos{display:flex;justify-content:center;gap:8px;margin:14px 0}
.huecos span{width:48px;height:56px;border:1px solid var(--acento);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--hondo)}
.teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.teclas button{font-size:22px;min-height:54px;border-color:var(--borde)}
.teclas button.pri{border-color:var(--acento)}
.bloq{text-align:center;color:var(--alerta);margin:8px 0}

/* Caminando */
.camino{position:fixed;inset:0;z-index:12;background:var(--camino);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.camino .n{font-size:54px;font-variant-numeric:tabular-nums;color:var(--acento2)}

/* Espera y final */
.grande{font-size:40px;letter-spacing:.18em;color:var(--acento2);text-align:center;margin:8px 0}
.centro{text-align:center}
.estrellas{font-size:40px;color:var(--acento);letter-spacing:.2em;text-align:center}
.chuleta{font-size:15px}
.chuleta li{margin:4px 0}
.paso{display:flex;gap:10px;align-items:center;justify-content:center;margin:10px 0}
.paso button{width:52px;flex:none;font-size:22px}
.paso .v{font-size:30px;min-width:48px;text-align:center}

.card{background:var(--fondo2);border:1px solid var(--borde);border-radius:10px;padding:12px 14px}
label.chk{display:flex;gap:10px;align-items:center;margin:12px 0}
label.chk input{width:auto}