/* campla.dev — aventura grafica point-and-click */

/* fuentes SELF-HOSTED (subset latin de Google Fonts, copiadas 1:1 con su
   unicode-range): sin CSS de terceros que bloquee el render — PSI ahorraba
   ~1.5 s. Los woff2 se precargan desde index.html. */
@font-face{
  font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/press-start-2p-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:'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;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#05060c}
body{font-family:'VT323',monospace;touch-action:none;-webkit-user-select:none;user-select:none}
.hidden{display:none!important}

#game{
  position:fixed;inset:0;width:100vw;height:100vh;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#05060c;
}

/* ---------- HUD ---------- */
#hud{
  position:fixed;top:0;left:0;right:0;height:44px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,14,.85),rgba(5,5,14,0));
  font-family:'Press Start 2P',monospace;
}
#hud .hud-left{display:flex;align-items:baseline;gap:14px}
#hud-logo{font-size:11px;color:#ff5fd0;text-shadow:0 0 6px rgba(255,95,208,.7)}
#hud-logo b{color:#4ff0ff;text-shadow:0 0 6px rgba(79,240,255,.7)}
#hud-clock{font-family:'VT323',monospace;font-size:20px;color:#8b93c9;letter-spacing:1px}
#hud-nav{display:flex;gap:6px}
#hud button{
  pointer-events:auto;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:8px;
  color:#9aa0d0;background:#14122b;border:0;padding:8px 10px;
  box-shadow:0 0 0 2px #060613,inset 0 -3px 0 rgba(0,0,0,.45);
}
#hud button:hover{color:#fff;background:#221e46}
#hud .nav-btn.near{color:#ffe08a;background:#2a2350;box-shadow:0 0 0 2px #060613,0 0 10px rgba(255,224,138,.25),inset 0 -3px 0 rgba(0,0,0,.45)}
#hud .hud-right{display:flex;gap:6px}
#btn-inv{color:#7fe6a8!important;display:inline-flex;align-items:center;gap:6px}
#btn-inv:hover{color:#c9ffdf!important}
img.bp{width:18px;height:18px;image-rendering:pixelated;display:inline-block}
#inv-title{display:flex;align-items:center;gap:7px}
#inv-title img.bp{width:20px;height:20px}

/* ---------- etiqueta hover ---------- */
#label{
  position:fixed;z-index:30;pointer-events:none;
  font-size:21px;line-height:1;color:#f4ecc8;
  background:rgba(10,8,24,.9);padding:3px 8px 5px;
  box-shadow:0 0 0 2px #060613;white-space:nowrap;
}

/* ---------- inventario ---------- */
#inv{
  position:fixed;left:10px;bottom:10px;z-index:25;width:236px;
  background:#161129;box-shadow:0 0 0 3px #060613,0 0 0 5px #3a2f5c,6px 8px 0 rgba(0,0,0,.5);
  padding:8px;
}
#inv-title{font-family:'Press Start 2P',monospace;font-size:9px;color:#c9b9ff;margin:2px 0 8px 2px;letter-spacing:1px}
#inv-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.inv-slot{
  position:relative;width:51px;height:51px;cursor:pointer;
  background:#0c0a1c;box-shadow:inset 2px 2px 0 #05040f,inset -2px -2px 0 #2a2347;
  display:flex;align-items:center;justify-content:center;
}
.inv-slot canvas{width:44px;height:44px;image-rendering:pixelated}
.inv-slot.sel{box-shadow:inset 2px 2px 0 #05040f,inset -2px -2px 0 #2a2347,0 0 0 2px #ffe08a}
.inv-slot:hover{background:#171331}
#inv-hint{font-size:16px;color:#6f76a8;margin:8px 2px 0}

/* ---------- dialogo ---------- */
#dialog{
  position:fixed;left:50%;bottom:22px;z-index:26;transform:translateX(-50%);
  max-width:min(820px,86vw);cursor:pointer;
  background:rgba(8,6,20,.94);
  box-shadow:0 0 0 3px #060613,0 0 0 5px #6a5acd,6px 8px 0 rgba(0,0,0,.55);
  padding:12px 20px;
  animation:pop .12s steps(2,end);
  display:flex;align-items:center;gap:14px;
}
#dialog img.face{
  /* tamano NATIVO del retrato 78x90: pixel-perfect, sin filas comidas
     por el reescalado nearest-neighbor (antes 52x60) */
  width:78px;height:90px;flex:0 0 auto;
  image-rendering:pixelated;object-fit:cover;
  background:#12102a;
  box-shadow:0 0 0 2px #060613,0 0 0 3px #4a3d7a;
}
@keyframes pop{from{transform:translateX(-50%) translateY(10px)}to{transform:translateX(-50%) translateY(0)}}
#dialog-text{font-size:25px;line-height:1.15;color:#dfe8ff;text-shadow:2px 2px 0 rgba(0,0,0,.6)}

/* ---------- estaciones ---------- */
#station{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(3,3,10,.55)}
#station-box{
  --sc:#4ff0ff;
  min-width:min(560px,88vw);max-width:88vw;background:#0d0a1e;padding:26px 30px 22px;
  box-shadow:0 0 0 3px #060613,0 0 0 6px var(--sc),10px 12px 0 rgba(0,0,0,.55),0 0 42px color-mix(in srgb,var(--sc) 35%,transparent);
  animation:pop2 .14s steps(3,end);
}
@keyframes pop2{from{transform:translateY(14px)}to{transform:translateY(0)}}
#station-title{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--sc);margin-bottom:16px;text-shadow:0 0 8px color-mix(in srgb,var(--sc) 70%,transparent)}
#station-body{font-size:26px;line-height:1.3;color:#e6ecff;white-space:pre-line}
#station-body .dim{color:#8b93c9}
#station-body a,.c-alt a{color:var(--sc);text-underline-offset:3px}
#station-body a:hover,.c-alt a:hover{text-shadow:0 0 8px color-mix(in srgb,var(--sc) 70%,transparent)}
#station-body b{color:#e6ecff}
/* ---------- el DEPURADOR (bug fantasma de 1990) ---------- */
.dbg-hint{font-size:22px;color:#c9b9ff;margin-bottom:14px}
.dbg-code{font-family:'VT323',monospace;font-size:22px;line-height:1.35;background:#080614;padding:10px 14px;box-shadow:0 0 0 2px #060613}
.dbg-line{cursor:pointer;color:#b8c2ea;white-space:pre}
.dbg-line:hover{background:#1c1836;color:#fff}
.dbg-line.dbg-no{background:#4a1420;color:#ff9a9a}
.dbg-line.dbg-caught{background:#123a24;color:#7fe6a8}
.dbg-msg{font-size:22px;color:#e6ecff;margin-top:12px;min-height:28px}

/* servicios en dos columnas */
#station-box.twocol{min-width:min(720px,92vw)}
#station-box.twocol #station-body{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;white-space:normal;
}
#station-body .svc{padding:2px 0}
#station-body .svc b{display:block;font-size:20px;color:#dfe8ff}
#station-body .svc i{display:block;font-size:16px;font-style:normal;color:#8b93c9;line-height:1.05}
/* formulario de contacto */
.c-intro{font-size:22px;color:#e6ecff;margin-bottom:12px}
#c-form label{display:block;font-size:17px;color:#9aa0d0;margin-bottom:9px}
#c-form input,#c-form textarea{
  display:block;width:100%;margin-top:3px;box-sizing:border-box;
  font-family:'VT323',monospace;font-size:20px;color:#e6ecff;
  background:#070512;border:0;padding:6px 9px;resize:none;
  box-shadow:inset 2px 2px 0 #04030c,inset -2px -2px 0 #2a2347;
}
#c-form input:focus,#c-form textarea:focus{outline:0;box-shadow:inset 2px 2px 0 #04030c,inset -2px -2px 0 #2a2347,0 0 0 2px var(--sc)}
.c-captcha{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:19px;color:#cdd3f0;margin:4px 0 6px}
.c-captcha b{color:var(--sc)}
.c-captcha input{width:56px!important;display:inline-block!important}
.c-cap-note{font-size:15px;color:#6f76a8}
.c-err{min-height:18px;font-size:17px;color:#ff8a8a;margin:2px 0}
#c-send{
  cursor:pointer;font-family:'Press Start 2P',monospace;font-size:10px;
  color:#0d0a1e;background:var(--sc);border:0;padding:10px 16px;
  box-shadow:0 0 0 2px #060613,inset 0 -3px 0 rgba(0,0,0,.3);
}
.c-alt{margin-top:12px;font-size:18px;color:#8b93c9}
.c-done{text-align:center;padding:18px 6px;font-size:24px;color:#e6ecff}
.c-done .c-check{font-size:40px;color:var(--sc);margin-bottom:6px}
.c-done .dim{color:#8b93c9;font-size:18px}
#station-close{
  margin-top:18px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:9px;
  color:#0d0a1e;background:var(--sc);border:0;padding:9px 14px;
  box-shadow:0 0 0 2px #060613,inset 0 -3px 0 rgba(0,0,0,.3);
}

/* ---------- toast ---------- */
#toast{
  position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:35;
  font-size:22px;color:#0e2a16;background:#7fe6a8;padding:6px 16px 8px;
  box-shadow:0 0 0 3px #060613,4px 5px 0 rgba(0,0,0,.5);
}

/* ---------- tutorial / portrait ---------- */
#tutorial{
  position:fixed;right:14px;bottom:14px;z-index:24;pointer-events:none;
  font-size:20px;color:#8b93c9;background:rgba(8,6,20,.8);padding:5px 10px;
  box-shadow:0 0 0 2px #060613;
}
#portrait-note{
  position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:35;pointer-events:none;
  font-size:20px;color:#ffe08a;background:rgba(20,14,6,.9);padding:4px 12px;
  box-shadow:0 0 0 2px #060613;
}

/* ---------- menu ---------- */
#menu{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(3,3,10,.6)}
#menu-box{
  background:#0d0a1e;padding:24px 28px;display:flex;flex-direction:column;gap:10px;min-width:280px;
  box-shadow:0 0 0 3px #060613,0 0 0 6px #6a5acd,10px 12px 0 rgba(0,0,0,.55);
}
#menu-box .menu-title{font-family:'Press Start 2P',monospace;font-size:13px;color:#c9b9ff;margin-bottom:8px;text-align:center}
#menu-box button{
  cursor:pointer;font-family:'Press Start 2P',monospace;font-size:9px;color:#9aa0d0;
  background:#14122b;border:0;padding:11px 12px;text-align:left;
  box-shadow:0 0 0 2px #060613,inset 0 -3px 0 rgba(0,0,0,.45);
}
#menu-box button:hover{color:#fff;background:#2a2350}

/* ---------- pantalla de inicio ---------- */
#start{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 42%,#141130 0%,#0b0a18 55%,#050510 100%);
}
#start-sprite{
  /* dimensiones FIJAS (el canvas del sprite es 184x328, perfil 46x82 a 4x):
     el src llega por JS tras buildPlayer y sin caja reservada empujaba todo
     el arranque (CLS) */
  width:184px;height:328px;image-rendering:pixelated;
  animation:float 3.4s ease-in-out infinite;
  filter:drop-shadow(0 14px 10px rgba(0,0,0,.55));
}
/* sin src todavia = invisible (la caja queda reservada): un <img> vacio con
   dimensiones pinta un marco fantasma mientras carga el modulo */
#start-sprite:not([src]){visibility:hidden}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
#start-logo{font-family:'Press Start 2P',monospace;font-size:clamp(22px,5vw,42px);letter-spacing:2px}
#start-logo .pink{color:#ff5fd0;animation:neonp 4.2s steps(1,end) infinite}
#start-logo .cyan{color:#4ff0ff;animation:neonc 5.1s steps(1,end) infinite}
@keyframes neonp{
  0%,100%{text-shadow:0 0 7px #ff5fd0,0 0 22px #ff5fd0,0 0 48px #b3128f}
  7%{text-shadow:0 0 3px #ff5fd0}
  8.5%{text-shadow:0 0 7px #ff5fd0,0 0 22px #ff5fd0,0 0 48px #b3128f}
  46%{text-shadow:0 0 7px #ff5fd0,0 0 22px #ff5fd0,0 0 48px #b3128f}
  47%{text-shadow:0 0 2px #ff5fd0}
  47.8%{text-shadow:0 0 7px #ff5fd0,0 0 26px #ff5fd0,0 0 52px #b3128f}
  81%{text-shadow:0 0 7px #ff5fd0,0 0 22px #ff5fd0,0 0 48px #b3128f}
  82%{text-shadow:0 0 4px #ff5fd0}
  83%{text-shadow:0 0 7px #ff5fd0,0 0 22px #ff5fd0,0 0 48px #b3128f}
}
@keyframes neonc{
  0%,100%{text-shadow:0 0 7px #4ff0ff,0 0 22px #4ff0ff,0 0 46px #0e7f96}
  23%{text-shadow:0 0 7px #4ff0ff,0 0 22px #4ff0ff,0 0 46px #0e7f96}
  24%{text-shadow:0 0 2px #4ff0ff}
  25.5%{text-shadow:0 0 7px #4ff0ff,0 0 24px #4ff0ff,0 0 46px #0e7f96}
  64%{text-shadow:0 0 7px #4ff0ff,0 0 22px #4ff0ff,0 0 46px #0e7f96}
  65%{text-shadow:0 0 3px #4ff0ff}
  66%{text-shadow:0 0 7px #4ff0ff,0 0 22px #4ff0ff,0 0 46px #0e7f96}
}
#start-sub{font-family:'Press Start 2P',monospace;font-size:10px;color:#6f76a8;letter-spacing:2px}
#start-ver{font-size:17px;color:#565c8c;margin-top:-6px}
/* campo de estrellas del arranque (titilan por turnos) */
#start::before,#start::after{
  content:'';position:absolute;top:0;left:0;width:2px;height:2px;
  background:transparent;pointer-events:none;
  box-shadow:8vw 12vh #6a7098,22vw 28vh #9ba0c4,15vw 70vh #565c8c,31vw 8vh #eef1fb,
    44vw 82vh #6a7098,58vw 15vh #9ba0c4,66vw 74vh #565c8c,78vw 22vh #eef1fb,
    88vw 60vh #6a7098,93vw 34vh #9ba0c4,50vw 90vh #565c8c,5vw 45vh #9ba0c4;
  animation:twk 3.4s steps(2,end) infinite;
}
#start::after{
  box-shadow:12vw 85vh #9ba0c4,18vw 40vh #eef1fb,28vw 60vh #6a7098,38vw 18vh #565c8c,
    48vw 35vh #9ba0c4,62vw 48vh #eef1fb,72vw 88vh #6a7098,82vw 42vh #565c8c,
    90vw 78vh #9ba0c4,96vw 12vh #6a7098,35vw 92vh #565c8c,55vw 5vh #9ba0c4;
  animation:twk 4.1s steps(2,end) infinite reverse;
}
@keyframes twk{0%,100%{opacity:.85}50%{opacity:.4}}
#btn-enter{
  margin-top:8px;cursor:pointer;display:flex;align-items:center;gap:12px;
  font-family:'Press Start 2P',monospace;font-size:13px;color:#ffe08a;
  background:#1c1636;border:0;padding:16px 26px;
  box-shadow:0 0 0 3px #060613,0 0 0 5px #4a3d7a,6px 8px 0 rgba(0,0,0,.5);
}
#btn-enter:disabled{color:#6f76a8;cursor:wait}
#btn-enter:not(:disabled):hover{background:#2c2354;color:#fff}
#btn-enter i{
  width:0;height:0;display:block;
  border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor;
}
#start-help{font-size:20px;color:#565c8c;margin-top:6px;text-align:center;padding:0 20px}
/* preloader chico de la banda sonora (pantalla de inicio) */
#music-load{font-family:'VT323',monospace;font-size:16px;color:#6b6886;margin-top:10px;letter-spacing:1px;min-height:19px;text-align:center}

/* ---------- pulido visual / UX / a11y ---------- */
/* contenido solo para lectores de pantalla y crawlers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:#ff5fd0;color:#0d0a1e}
/* foco visible para navegacion por teclado */
button:focus-visible,#c-form input:focus-visible,#c-form textarea:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
/* golpe fisico al presionar */
#hud button:active,#menu-box button:active,#station-close:active,#c-send:active,#btn-enter:not(:disabled):active{transform:translateY(2px)}
/* trama CRT sutil en los paneles DOM (cohesion con el postproceso del canvas) */
#station-box,#menu-box,#inv,#dialog{
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
}
/* ENTRAR respira cuando esta listo */
#btn-enter:not(:disabled){animation:ready 2.2s ease-in-out infinite}
@keyframes ready{
  0%,100%{box-shadow:0 0 0 3px #060613,0 0 0 5px #4a3d7a,6px 8px 0 rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 3px #060613,0 0 0 5px #7a68c8,6px 8px 0 rgba(0,0,0,.5),0 0 26px rgba(255,224,138,.28)}
}
/* atajo "solo la info" del arranque */
#btn-info{cursor:pointer;border:0;background:none;font-family:'VT323',monospace;font-size:19px;color:#6f76a8;text-decoration:underline dotted;padding:2px 6px}
#btn-info:hover,#btn-info:focus-visible{color:#ffe08a}
/* horizonte synthwave al pie del arranque */
#start{background:radial-gradient(ellipse at 50% 120%,rgba(255,95,208,.16),transparent 55%),radial-gradient(ellipse at 50% 42%,#141130 0%,#0b0a18 55%,#050510 100%)}
/* el toast entra deslizando */
#toast{animation:toastin .18s steps(3,end)}
@keyframes toastin{from{transform:translateX(-50%) translateY(-14px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
/* la etiqueta de hover aparece con fade corto */
#label{animation:lblin .09s steps(2,end)}
@keyframes lblin{from{opacity:0}to{opacity:1}}
/* modales scrolleables en pantallas bajas, con scrollbar retro */
#station-box{max-height:90vh;overflow:auto;scrollbar-width:thin;scrollbar-color:#4a3d7a #0d0a1e}
#station-box::-webkit-scrollbar{width:10px}
#station-box::-webkit-scrollbar-track{background:#0d0a1e}
#station-box::-webkit-scrollbar-thumb{background:#4a3d7a;box-shadow:inset 0 0 0 2px #0d0a1e}
/* respetar prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  #start-sprite,#start-logo .pink,#start-logo .cyan,#start::before,#start::after,#btn-enter:not(:disabled){animation:none}
  #dialog,#station-box,#toast,#label{animation:none}
}