/* Hoja de estilos única de la landing (todo el CSS va aquí para poder usar una CSP sin 'unsafe-inline'). */
/* Tipografía VT323 (SIL Open Font License 1.1, ver assets/fonts/OFL.txt) servida desde esta misma web: no se envía nada a terceros. */
@font-face { font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/vt323-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/vt323-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'TiasmileLogo'; font-style:normal; font-weight:400; font-display:block; src:url(fonts/tiasmile-logo.woff) format('woff'); }

/* ZX Spectrum (mismo tema que la web): texto blanco sobre negro + las franjas arcoíris de Sinclair */
:root {
  --fg:#e8e8e8; --dim:#8c8c8c; --amber:#ffff55; --danger:#ff5555;
  --bg:#050507; --bg-glow:#17171f; --panel:#101016; --on-fg-dim:#444;
  --fg-rgb:232 232 232; --amber-rgb:255 255 85; --danger-rgb:255 85 85;
  font-size:20px;
}
:root::before { /* banda arriba del todo: arcoíris */
  content:''; position:fixed; top:0; left:0; right:0; height:4px; z-index:1000; pointer-events:none;
  background:linear-gradient(90deg,#d70000 0 25%,#d7d700 25% 50%,#00d700 50% 75%,#00d7d7 75% 100%);
}
body::before { /* logotipo de franjas inclinadas */
  content:''; position:fixed; left:12px; bottom:10px; width:66px; height:24px; z-index:60; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16' shape-rendering='crispEdges'%3E%3Cpolygon points='12,0 20,0 8,16 0,16' fill='%23d70000'/%3E%3Cpolygon points='20,0 28,0 16,16 8,16' fill='%23d7d700'/%3E%3Cpolygon points='28,0 36,0 24,16 16,16' fill='%2300d700'/%3E%3Cpolygon points='36,0 44,0 32,16 24,16' fill='%2300d7d7'/%3E%3C/svg%3E") no-repeat;
  background-size:contain;
}

* { box-sizing:border-box; }
html, body { margin:0; background:#000; height:100%; }
body { color:var(--fg); font-family:'VT323','Courier New',ui-monospace,monospace; line-height:1.25; }
.crt {
  min-height:100vh; padding:24px 28px 60px;
  background:radial-gradient(ellipse at center, var(--bg-glow) 0%, var(--bg) 75%);
  text-shadow:0 0 6px rgb(var(--fg-rgb) / .55);
  position:relative; overflow-x:hidden;
}
.crt::after { /* scanlines + viñeta */
  content:''; position:fixed; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
  animation:flicker 6s infinite;
}
@keyframes flicker { 0%,100% {opacity:1} 50% {opacity:.93} 52% {opacity:1} }

.term { margin:0; font:inherit; white-space:pre-wrap; word-break:break-word; max-width:90ch; }
.logo-wrap { container-type:inline-size; max-width:640px; margin:6px 0 4px; }
.logo { font-family:'TiasmileLogo',monospace; font-size:min(18px, calc(100cqw / 35.6)); line-height:1.1; white-space:pre; letter-spacing:0; font-kerning:none; font-variant-ligatures:none;
  color:var(--fg); user-select:text; -webkit-user-select:text;
  text-shadow:.09em 0 rgb(255 60 90 / .42), -.09em 0 rgb(60 200 255 / .42), 0 0 .22em rgb(var(--fg-rgb) / .5); }
.lg-row { display:block; position:relative; }
.logo .e { opacity:.62; }
.dim { color:var(--dim); }
.amber { color:var(--amber); text-shadow:0 0 6px rgb(var(--amber-rgb) / .5); }
.cursor { display:inline-block; width:.6em; height:1em; background:var(--fg); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.parp { animation:blink 1s steps(1) infinite; }
a { color:var(--amber); text-decoration:none; cursor:pointer; display:inline-block; padding:2px 6px; margin:0 -6px; }
a:hover, a:focus-visible { background:var(--fg); color:#000; text-shadow:none; outline:none; }

/* Consola (como la del inicio de la web) */
.prompt { display:flex; gap:8px; margin-top:8px; scroll-margin-bottom:70px; }
.prompt input { flex:1; background:transparent; border:0; outline:0; color:var(--fg); font:inherit; caret-color:var(--fg); text-shadow:inherit; min-width:0; }
.links { display:flex; flex-wrap:wrap; gap:2px 16px; }
.links a { margin:0; }
#dock { position:fixed; top:10px; right:10px; z-index:90; display:flex; align-items:center; gap:8px; }

/* Personaje del lore, abajo a la derecha, y su bocadillo */
#pj { position:fixed; right:16px; bottom:16px; width:72px; height:72px; z-index:70; padding:0; margin:0; border:0; background:none; cursor:pointer; opacity:0; }
#pj canvas { width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }
#pj:hover canvas, #pj:focus-visible canvas { filter:brightness(1.25); }
#pj:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
#pj.on { opacity:1; animation:salto .5s ease-out; }
@keyframes salto { 0% { transform:translateY(24px); opacity:0; } 60% { transform:translateY(-8px); opacity:1; } 100% { transform:none; } }
#bocadillo { position:fixed; right:20px; bottom:100px; z-index:71; max-width:min(300px, calc(100vw - 40px)); padding:6px 10px; background:#000e; border:2px solid var(--fg); color:var(--fg); text-shadow:none; line-height:1.15; }
#bocadillo[hidden] { display:none; }
#bocadillo b { display:block; color:var(--amber); font-weight:400; font-size:.85em; }
#bocadillo::after { content:''; position:absolute; right:26px; bottom:-10px; width:0; height:0; border:8px solid transparent; border-top-color:var(--fg); border-bottom:0; }
#bocadillo.on { animation:pop .18s ease-out; }
@keyframes pop { from { transform:scale(.85); opacity:0; } to { transform:none; opacity:1; } }

@media (max-width:600px) {
  :root { font-size:17px; }
  .crt { padding:16px 14px 50px; }
  #pj { width:56px; height:56px; right:10px; bottom:10px; }
  #dock { top:auto; bottom:12px; left:90px; }
  #bocadillo { right:10px; bottom:76px; }
  #bocadillo::after { right:22px; }
}
@media (prefers-reduced-motion: reduce) { .crt::after, .cursor, .parp, #pj.on, #bocadillo.on { animation:none; } }

/* Ventana de los minijuegos */
#jw{ position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:12px;font-size:1rem}
.jw-box{ background:var(--bg,#050507);border:2px solid var(--fg,#e8e8e8);box-shadow:0 0 24px rgba(0,0,0,.8);width:min(820px,100%,calc((100vh - 190px) * var(--r,2)));min-width:min(100%,300px);max-height:100%;overflow:auto;text-shadow:none}
.jw-bar{ display:flex;justify-content:space-between;align-items:center;background:var(--fg,#e8e8e8);color:#000;padding:0 8px}
.jw-x,#jw button{ font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:2px 6px}
.jw-x{ color:#000}
.jw-x:hover{ background:#000;color:var(--fg,#e8e8e8)}
.jw-hud{ padding:2px 10px;color:var(--amber,#ff5)}
.jw-cv{ position:relative;line-height:0}
.jw-cv canvas{ width:100%;height:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;touch-action:none}
.jw-ov{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.62);text-align:center;line-height:1.2;padding:8px}
.jw-ov[hidden]{ display:none}
.jw-ov h3{ margin:0;font-weight:400;font-size:1.5rem;color:var(--amber,#ff5)}
.jw-ov p{ margin:0}
.jw-top{ margin:2px 0;font:inherit;font-size:.9rem;line-height:1.1;text-align:left;white-space:pre}
#jw .jw-ov button,.jw-pad button{ border:1px solid var(--fg,#e8e8e8);color:var(--fg,#e8e8e8);margin-top:4px}
#jw .jw-ov button:hover,#jw .jw-ov button:focus-visible,.jw-pad button:hover{ background:var(--fg,#e8e8e8);color:#000;outline:none}
.jw-n{ font:inherit;color:var(--amber,#ff5);background:#000;border:1px solid var(--fg,#e8e8e8);width:4ch;text-transform:uppercase;text-align:center;outline:none}
.jw-pad{ display:flex;justify-content:center}
.jw-pad:empty{ display:none}
.jw-pad button{ font-size:1.1rem;padding:6px 14px;user-select:none;-webkit-user-select:none;touch-action:none}
.jw-help{ padding:2px 10px 4px;font-size:.8rem}
.jw-pad{ gap:6px;padding:4px 0}
#jw .jw-pad button{ border:2px solid var(--fg,#e8e8e8);color:var(--fg,#e8e8e8);background:#0008;margin:0}
#jw .jw-pad button.on,#jw .jw-pad button:hover{ background:var(--fg,#e8e8e8);color:#000}
.jw-pad button{ -webkit-touch-callout:none}
.jw-pad-par,.jw-pad-columna{ display:grid;padding:4px 10px}
.jw-pad-par{ grid-template-columns:1fr 1fr}
.jw-pad-columna{ grid-template-columns:1fr}
.jw-pad-cruz{ display:grid;grid-template-columns:repeat(3,var(--bt,44px));grid-template-rows:repeat(3,var(--bt,44px));justify-content:center}
.jw-pad-cruz button{ margin:0;padding:0}
.jw-pad-cruz [data-k=u]{ grid-area:1/2}
.jw-pad-cruz [data-k=l]{ grid-area:2/1}
.jw-pad-cruz [data-k=r]{ grid-area:2/3}
.jw-pad-cruz [data-k=d]{ grid-area:3/2}
@media (pointer:coarse),(max-width:600px){
#jw{ --bt:clamp(56px,17vw,80px)}
.jw-pad button{ min-height:var(--bt);font-size:1.7rem;margin:0}
#jw .jw-pad button:hover{ background:#0008;color:var(--fg,#e8e8e8)}
#jw .jw-pad button.on{ background:var(--fg,#e8e8e8);color:#000}
.jw-pad-par button{ min-height:calc(var(--bt) * 1.15);font-size:2.2rem}
.jw-pad-columna button{ min-height:calc(var(--bt) * .8)}
.jw-con-par .jw-box{ width:min(820px,100%,calc((100vh - 190px - var(--bt) * 1.15) * var(--r,2)));width:min(820px,100%,calc((100dvh - 190px - var(--bt) * 1.15) * var(--r,2)))}
.jw-con-columna .jw-box{ width:min(820px,100%,calc((100vh - 190px - var(--bt) * 2.4) * var(--r,2)));width:min(820px,100%,calc((100dvh - 190px - var(--bt) * 2.4) * var(--r,2)))}
.jw-con-cruz .jw-box{ width:min(820px,100%,calc((100vh - 190px - var(--bt) * 3) * var(--r,2)));width:min(820px,100%,calc((100dvh - 190px - var(--bt) * 3) * var(--r,2)))}
}
@media (max-width:600px){ #jw{ padding:6px}
.jw-top{ font-size:.75rem}
.jw-ov h3{ font-size:1.2rem}
.jw-help{ font-size:.7rem}
}

/* Botón de sonido (de sfx.js) */
#sfx-toggle{position:fixed;right:10px;bottom:8px;z-index:90;font:inherit;font-size:.85rem;color:var(--dim);background:#000c;border:1px solid var(--dim);padding:0 6px;cursor:pointer;text-shadow:none;opacity:.75}
#sfx-toggle:hover{opacity:1;background:var(--fg);color:#000}
#dock #sfx-toggle{position:static}
#vol-slider{width:72px;height:14px;margin:0;accent-color:var(--amber);background:transparent;cursor:pointer;opacity:.8}
#vol-slider:hover{opacity:1}
body > #vol-slider{position:fixed;right:110px;bottom:8px;z-index:90}

/* Aviso de logro */
#logro-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:64px; z-index:2000; background:#000; color:var(--amber); border:1px solid var(--amber); padding:6px 14px; text-align:center; max-width:90vw; pointer-events:none; text-shadow:none; }
/* Apagado de la consola (comando shutdown) */
.apagado { position:fixed; inset:0; z-index:9999; background:#000; color:#ffa31a; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; font:inherit; cursor:pointer; }

/* Página 404 */
#tomew { width:96px; height:96px; image-rendering:pixelated; image-rendering:crisp-edges; display:block; margin:8px 0; }