/* ============ TOKENS: paleta completamente distinta al resto del sitio a propósito.
   El libro es "papel y tinta"; esto es "estás dentro de otro sistema".
   El contraste es la idea: sistema frío por fuera, amor por dentro. ============ */
:root{
  --wd-bg:#05070a;
  --wd-bg-2:#0a1018;
  --wd-panel:#0a1520;
  --wd-cyan:#00f6ff;
  --wd-magenta:#ff2fd6;
  --wd-lime:#c6ff2b;
  --wd-amber:#ffce4a;
  --wd-fg:#d8fff2;
  --wd-danger:#ff3b57;
  --wd-dim:#3a6b6f;
  --wd-border:#1f5c6f;

  --font-mono:'Space Mono', monospace;
  --font-pixel:'Press Start 2P', monospace;
  --font-hand:'Caveat', cursive;

  --taskbar-h:46px;
  --win-ease:cubic-bezier(.34,1.4,.64,1);
}

/* si "Invertir colores inteligente" (Accesibilidad de iOS) está activado, Safari
   invierte el tono conservando el matiz: esta pantalla es oscura a propósito
   (contraste con el resto del libro) y con el invertido del sistema se vería
   clara. Se re-invierte para que se vea igual sin importar ese ajuste. */
@media (inverted-colors: inverted){
  html{ filter:invert(1) hue-rotate(180deg); }
}

*{ box-sizing:border-box; }
/* varios componentes definen display propio (flex/grid): sin esto, el atributo
   hidden quedaría pisado y p. ej. el premio o el BSOD se verían desde el arranque */
[hidden]{ display:none !important; }

html, body{ height:100%; }
body{
  margin:0; overflow:hidden;
  background:var(--wd-bg); color:var(--wd-fg);
  font-family:var(--font-mono);
}

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px dashed var(--wd-cyan); outline-offset:3px; }

/* ============ CRT global: vignette + scanlines sutiles sobre toda la página ============ */
.crt-vignette{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, #000b 100%);
}
.crt-scanlines{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 2px, #00120a33 2px 3px);
  mix-blend-mode:multiply;
}
@keyframes crt-flicker{ 0%,100%{ opacity:1; } 50%{ opacity:.97; } }
body{ animation:crt-flicker 6s ease-in-out infinite; }
body{ transition:opacity .4s ease; }
body.hack-leaving{ opacity:0; }

/* ============ BOOT: BIOS de NIKOL_OS ============ */
.boot-overlay{
  position:fixed; inset:0; z-index:9000; background:#000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:1; transition:opacity .5s ease; cursor:pointer;
}
.boot-overlay.boot-gone{ opacity:0; pointer-events:none; }
.boot-scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 2px, #00120a55 2px 3px);
}
.boot-inner{ position:relative; width:min(520px, 100%); }
.boot-logo{
  margin:0 0 14px; font-family:var(--font-mono); font-size:11px; line-height:1.25;
  color:var(--wd-cyan); text-shadow:0 0 10px #00f6ff88; white-space:pre;
}
.boot-log{
  margin:0; font-family:var(--font-mono); font-size:13px; line-height:1.5;
  color:var(--wd-lime); text-shadow:0 0 8px #c6ff2b77; white-space:pre-wrap;
  min-height:150px;
}
.boot-log .boot-ok{ color:var(--wd-cyan); }
.boot-log .boot-warn{ color:var(--wd-amber); }
.boot-progress{
  margin-top:14px; height:8px; border:1px solid var(--wd-border); border-radius:3px;
  overflow:hidden; background:#03080c;
}
.boot-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--wd-lime), var(--wd-cyan));
  box-shadow:0 0 12px #00f6ff88; transition:width .18s ease;
}
.boot-skip{
  margin:18px 0 0; font-size:11px; color:var(--wd-dim); letter-spacing:.05em;
  animation:boot-skip-pulse 1.6s ease-in-out infinite;
}
@keyframes boot-skip-pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* ============ ESCRITORIO ============ */
.os-desktop{
  position:fixed; inset:0; z-index:2;
  opacity:0; transition:opacity .6s ease;
}
.os-desktop.os-ready{ opacity:1; }

.os-rain{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.os-watermark{
  position:absolute; right:14px; bottom:calc(var(--taskbar-h) + 10px); z-index:0;
  margin:0; text-align:right; font-size:10px; line-height:1.6;
  color:#1d3d44; letter-spacing:.04em; pointer-events:none; user-select:none;
}

/* ---- iconos del escritorio: cascada de entrada ---- */
.os-icons{
  position:absolute; top:18px; left:14px; z-index:1;
  display:flex; flex-direction:column; flex-wrap:wrap; gap:6px;
  max-height:calc(100% - var(--taskbar-h) - 40px);
  align-items:flex-start;
}
.os-icon{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:86px; padding:10px 4px; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:var(--wd-fg); font-family:var(--font-mono);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.os-icon:hover{ background:#00f6ff11; border-color:#00f6ff33; transform:translateY(-2px); }
.os-icon:active{ transform:scale(.95); }
.os-icon-svg{ width:34px; height:34px; filter:drop-shadow(0 0 6px currentColor); }
.os-icon-lime{ color:var(--wd-lime); }
.os-icon-cyan{ color:var(--wd-cyan); }
.os-icon-magenta{ color:var(--wd-magenta); }
.os-icon-dim{ color:#5a8a90; }
.os-icon-label{
  font-size:10.5px; line-height:1.3; text-align:center; word-break:break-word;
  text-shadow:0 1px 3px #000;
}
.os-desktop.os-ready .os-icon{ animation:os-icon-in .45s var(--win-ease) backwards; }
.os-desktop.os-ready .os-icon:nth-child(1){ animation-delay:.05s; }
.os-desktop.os-ready .os-icon:nth-child(2){ animation-delay:.13s; }
.os-desktop.os-ready .os-icon:nth-child(3){ animation-delay:.21s; }
.os-desktop.os-ready .os-icon:nth-child(4){ animation-delay:.29s; }
.os-desktop.os-ready .os-icon:nth-child(5){ animation-delay:.37s; }
.os-desktop.os-ready .os-icon:nth-child(6){ animation-delay:.45s; }
.os-desktop.os-ready .os-icon:nth-child(7){ animation-delay:.53s; }
@keyframes os-icon-in{
  from{ opacity:0; transform:translateY(14px) scale(.85); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.os-icon-premio .os-icon-svg{ animation:os-premio-glow 1.8s ease-in-out infinite; }
@keyframes os-premio-glow{
  0%,100%{ filter:drop-shadow(0 0 6px currentColor); }
  50%{ filter:drop-shadow(0 0 16px currentColor); }
}

/* ============ VENTANAS ============ */
.os-window{
  position:absolute; z-index:10;
  width:min(560px, calc(100vw - 28px));
  max-height:calc(100vh - var(--taskbar-h) - 24px);
  background:linear-gradient(180deg, var(--wd-bg-2), var(--wd-bg));
  border:1px solid var(--wd-border); border-radius:8px;
  box-shadow:0 0 0 1px #000, 0 0 40px #00f6ff18, 0 24px 50px rgba(0,0,0,.65);
  display:flex; flex-direction:column; overflow:hidden;
}
.os-window[hidden]{ display:none; }
.os-window.os-win-front{ box-shadow:0 0 0 1px #000, 0 0 55px #00f6ff30, 0 24px 50px rgba(0,0,0,.7); }
.os-window.os-win-opening{ animation:os-win-open .32s var(--win-ease); }
.os-window.os-win-closing{ animation:os-win-close .2s ease-in forwards; }
@keyframes os-win-open{
  from{ opacity:0; transform:scale(.9) translateY(12px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes os-win-close{
  from{ opacity:1; transform:scale(1); }
  to{ opacity:0; transform:scale(.92) translateY(10px); }
}

.os-window-bar{
  display:flex; align-items:center; gap:8px; padding:8px 10px; flex-shrink:0;
  background:#08131f88; border-bottom:1px solid var(--wd-border);
  cursor:grab; user-select:none; touch-action:none;
}
.os-window-bar:active{ cursor:grabbing; }
.os-window-dots{ display:flex; gap:6px; }
.os-window-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; display:block; }
/* el rojo y el amarillo son botones reales (cerrar / minimizar); el verde es solo decorativo */
button.os-window-dot{ cursor:pointer; transition:filter .15s ease, transform .15s ease; }
button.os-window-dot:hover{ filter:brightness(1.35); transform:scale(1.15); }
button.os-window-dot:active{ transform:scale(.9); }
.dot-r{ background:var(--wd-danger); } .dot-y{ background:var(--wd-amber); } .dot-g{ background:var(--wd-lime); }
.os-window-title{
  flex:1; min-width:0; font-size:11px; letter-spacing:.04em; color:var(--wd-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.os-window-body{ position:relative; flex:1; min-height:0; overflow-y:auto; }

/* posiciones iniciales, escalonadas (JS las congela en px al abrir/arrastrar).
   Selector por [data-win] a propósito y NO por #id: un id tiene más especificidad
   que .os-window.os-win-placed de abajo y le ganaría siempre al transform de
   centrado, por más que JS marcara la clase — la ventana quedaría corrida para
   siempre la mitad de su propio ancho (justo el bug de "ventana ladeada"). */
.os-window[data-win="hackeo"]{ top:6%; left:50%; transform:translateX(-50%); }
.os-window[data-win="reader"]{ top:10%; left:12%; }
.os-window[data-win="docs"]{ top:16%; left:32%; }
.os-window[data-win="fotos"]{ top:8%; left:38%; }
.os-window[data-win="papelera"]{ top:22%; left:26%; }
.os-window[data-win="terminal"]{ top:14%; left:20%; }
/* el transform de centrado rompe el drag; JS lo neutraliza al primer foco */
.os-window.os-win-placed{ transform:none; }

/* ============ TASKBAR ============ */
.os-taskbar{
  position:absolute; left:0; right:0; bottom:0; height:var(--taskbar-h); z-index:500;
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:#060c12ee; border-top:1px solid var(--wd-border);
  backdrop-filter:blur(4px);
}
.os-start-btn{
  display:flex; align-items:center; gap:7px; padding:7px 12px; cursor:pointer;
  background:transparent; border:1px solid var(--wd-border); border-radius:6px;
  color:var(--wd-magenta); font-family:var(--font-mono); font-size:12px; font-weight:700;
  transition:background .15s ease, box-shadow .15s ease;
}
.os-start-btn:hover, .os-start-btn.os-start-open{ background:#ff2fd614; box-shadow:0 0 12px #ff2fd633; }
.os-start-heart{ width:14px; height:14px; color:var(--wd-magenta); filter:drop-shadow(0 0 5px currentColor); }

.os-taskbar-wins{ flex:1; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.os-taskbar-wins::-webkit-scrollbar{ display:none; }
.os-task-btn{
  padding:6px 10px; cursor:pointer; white-space:nowrap;
  background:transparent; border:1px solid var(--wd-border); border-radius:5px;
  color:var(--wd-dim); font-family:var(--font-mono); font-size:11px;
  transition:color .15s ease, border-color .15s ease;
}
.os-task-btn.os-task-active{ color:var(--wd-cyan); border-color:var(--wd-cyan); box-shadow:0 0 10px #00f6ff33; }
.os-task-btn:hover{ color:var(--wd-fg); }

.os-clock{
  padding:7px 10px; cursor:pointer; background:transparent; border:1px solid transparent;
  border-radius:6px; color:var(--wd-cyan); font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; text-shadow:0 0 8px #00f6ff66;
}
.os-clock:hover{ border-color:var(--wd-border); }

/* ---- menú inicio ---- */
.os-startmenu{
  position:absolute; left:10px; bottom:calc(var(--taskbar-h) + 8px); z-index:600;
  width:230px; padding:8px;
  background:#081019f5; border:1px solid var(--wd-border); border-radius:8px;
  box-shadow:0 0 30px #00f6ff22, 0 18px 40px rgba(0,0,0,.6);
  animation:os-menu-in .22s var(--win-ease);
}
@keyframes os-menu-in{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.os-startmenu-head{
  margin:4px 6px 8px; font-family:var(--font-pixel); font-size:10px; color:var(--wd-magenta);
  text-shadow:0 0 8px #ff2fd677;
}
.os-startmenu-head span{ color:var(--wd-dim); font-family:var(--font-mono); font-size:10px; }
.os-startmenu-item{
  display:block; width:100%; text-align:left; padding:8px 10px; cursor:pointer;
  background:transparent; border:none; border-radius:5px;
  color:var(--wd-fg); font-family:var(--font-mono); font-size:12.5px;
}
.os-startmenu-item:hover{ background:#00f6ff14; color:var(--wd-cyan); }
.os-startmenu-eggs{
  margin:8px 6px; padding-top:8px; border-top:1px dashed var(--wd-border);
  font-size:11px; color:var(--wd-amber); text-shadow:0 0 6px #ffce4a55;
}
.os-startmenu-off{ color:var(--wd-danger); }
.os-startmenu-off:hover{ background:#ff3b5714; color:var(--wd-danger); }

/* ---- panel del reloj ---- */
.os-clockpanel{
  position:absolute; right:10px; bottom:calc(var(--taskbar-h) + 8px); z-index:600;
  width:min(280px, calc(100vw - 20px)); padding:14px;
  background:#081019f5; border:1px solid var(--wd-border); border-radius:8px;
  box-shadow:0 0 30px #ff2fd622, 0 18px 40px rgba(0,0,0,.6);
  animation:os-menu-in .22s var(--win-ease);
}
.os-clockpanel-title{ margin:0 0 8px; font-size:11px; color:var(--wd-dim); letter-spacing:.08em; text-transform:uppercase; }
.os-clockpanel-line{ margin:0; font-size:13.5px; line-height:1.6; color:var(--wd-magenta); text-shadow:0 0 8px #ff2fd655; }
.os-clockpanel-sub{ margin:8px 0 0; font-size:10.5px; color:var(--wd-dim); }

/* ============ APPS ============ */

/* ---- lector de texto ---- */
.os-window-reader{ width:min(500px, calc(100vw - 28px)); }
.os-reader-body{ padding:20px 22px; font-size:13.5px; line-height:1.7; }
.os-reader-body h3{
  margin:0 0 12px; font-family:var(--font-pixel); font-size:11px; color:var(--wd-lime);
  text-shadow:0 0 8px #c6ff2b66;
}
.os-reader-body p{ margin:0 0 12px; }
.os-reader-body ul{ margin:0 0 12px; padding-left:18px; }
.os-reader-body li{ margin-bottom:6px; }
.os-reader-body .os-doc-hand{
  font-family:var(--font-hand); font-size:24px; line-height:1.5; color:#ffd9f2;
  text-shadow:0 0 12px #ff2fd633;
}
.os-reader-body .os-doc-dim{ color:var(--wd-dim); font-size:11.5px; }
.os-reader-body .os-doc-check{ list-style:none; padding-left:4px; }
.os-reader-body .os-doc-check li{ margin-bottom:8px; }
.os-reader-body .os-doc-check .ok{ color:var(--wd-lime); }
.os-reader-body .os-doc-check .pend{ color:var(--wd-amber); }
.os-reader-body pre{
  margin:0 0 12px; padding:12px; background:#03080c; border:1px solid var(--wd-border);
  border-radius:6px; font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-x:auto;
}
.os-reader-body .os-doc-heartart{ color:var(--wd-magenta); text-shadow:0 0 10px #ff2fd666; text-align:center; }

/* ---- listas de archivos (documentos y papelera) ---- */
.os-filelist{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.os-file-row{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  background:#00f6ff08; border:1px solid transparent; border-radius:6px; cursor:pointer;
  color:var(--wd-fg); font-family:var(--font-mono); font-size:12.5px; text-align:left;
}
.os-file-row:hover{ border-color:var(--wd-border); background:#00f6ff12; }
.os-file-row svg{ width:18px; height:18px; flex-shrink:0; color:var(--wd-cyan); }
.os-file-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-file-meta{ font-size:10.5px; color:var(--wd-dim); flex-shrink:0; }
.os-file-restore{
  flex-shrink:0; padding:4px 9px; cursor:pointer; border-radius:4px;
  background:transparent; border:1px solid var(--wd-border); color:var(--wd-dim);
  font-family:var(--font-mono); font-size:10.5px;
}
.os-file-restore:hover{ border-color:var(--wd-amber); color:var(--wd-amber); }
.os-trash-msg{
  margin:4px 2px 0; padding:10px 12px; font-size:11.5px; line-height:1.6;
  color:var(--wd-amber); background:#ffce4a0d; border:1px dashed #ffce4a44; border-radius:6px;
}

/* ---- visor de fotos ---- */
.os-window-fotos{ width:min(460px, calc(100vw - 28px)); }
.os-fotos-body{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px; }
.os-foto-frame{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--wd-border); border-radius:6px; background:#03080c;
}
.os-foto-frame img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:saturate(1.1) contrast(1.05);
  animation:os-foto-in .35s ease;
}
@keyframes os-foto-in{ from{ opacity:0; transform:scale(1.03); } to{ opacity:1; transform:none; } }
.os-foto-glitch{
  position:absolute; right:8px; bottom:8px; width:26px; height:26px; padding:4px;
  cursor:pointer; background:#000a; border:1px solid var(--wd-magenta); border-radius:5px;
  color:var(--wd-magenta); animation:os-glitch-blink 1.1s steps(2) infinite;
}
.os-foto-glitch svg{ width:100%; height:100%; }
@keyframes os-glitch-blink{ 0%{ opacity:.25; } 50%{ opacity:1; } 100%{ opacity:.25; } }
.os-foto-caption{
  margin:0; min-height:2.6em; font-size:12px; line-height:1.5; text-align:center; color:var(--wd-fg);
}
.os-foto-nav{ display:flex; align-items:center; gap:14px; }
.os-foto-count{ font-size:11.5px; color:var(--wd-dim); letter-spacing:.06em; }

/* ---- terminal ---- */
.os-window-terminal{ width:min(540px, calc(100vw - 28px)); }
.os-term-body{
  display:flex; flex-direction:column; padding:12px; height:340px; max-height:100%;
  background:#03080c; cursor:text;
}
.os-term-out{
  flex:1; min-height:0; overflow-y:auto; font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; color:var(--wd-fg);
}
.os-term-out .t-lime{ color:var(--wd-lime); }
.os-term-out .t-cyan{ color:var(--wd-cyan); }
.os-term-out .t-magenta{ color:var(--wd-magenta); }
.os-term-out .t-dim{ color:var(--wd-dim); }
.os-term-out .t-err{ color:var(--wd-danger); }
.os-term-line{ display:flex; align-items:center; gap:8px; padding-top:8px; }
.os-term-prompt{ font-size:12.5px; color:var(--wd-lime); text-shadow:0 0 6px #c6ff2b55; flex-shrink:0; }
.os-term-input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--wd-fg); font-family:var(--font-mono); font-size:12.5px; caret-color:var(--wd-lime);
}

/* ============ TOASTS: notificaciones de secretos ============ */
.os-toasts{
  position:fixed; right:12px; top:12px; z-index:8000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
  max-width:min(320px, calc(100vw - 24px));
}
.os-toast{
  display:flex; gap:10px; align-items:center; padding:12px 14px;
  background:#081019f8; border:1px solid var(--wd-amber); border-radius:8px;
  box-shadow:0 0 25px #ffce4a33; animation:os-toast-in .35s var(--win-ease);
}
.os-toast.os-toast-out{ animation:os-toast-out .3s ease-in forwards; }
@keyframes os-toast-in{ from{ opacity:0; transform:translateX(30px); } to{ opacity:1; transform:none; } }
@keyframes os-toast-out{ to{ opacity:0; transform:translateX(30px); } }
.os-toast img{ width:38px; height:38px; object-fit:contain; flex-shrink:0; }
.os-toast-txt{ min-width:0; }
.os-toast-title{ margin:0; font-size:11px; color:var(--wd-amber); letter-spacing:.05em; text-transform:uppercase; }
.os-toast-msg{ margin:2px 0 0; font-size:12px; line-height:1.45; color:var(--wd-fg); }

/* ============ BSOD rosa ============ */
.os-bsod{
  position:fixed; inset:0; z-index:9500; cursor:pointer;
  background:#c2185b; display:flex; align-items:center; justify-content:center; padding:24px;
  animation:os-bsod-in .15s steps(2);
}
@keyframes os-bsod-in{ from{ opacity:0; } to{ opacity:1; } }
.os-bsod-inner{ max-width:520px; color:#fff; }
.os-bsod-face{ margin:0 0 18px; font-size:64px; font-weight:700; }
.os-bsod-title{ margin:0 0 14px; font-family:var(--font-pixel); font-size:13px; line-height:1.7; }
.os-bsod-code{
  margin:0 0 18px; font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
  white-space:pre-wrap; color:#ffd9ec;
}
.os-bsod-hint{ margin:0; font-size:12px; opacity:.85; animation:boot-skip-pulse 1.6s ease-in-out infinite; }

/* ============ VENTANA DEL JUEGO: etapas apiladas ============ */
.os-window-game{ width:min(680px, calc(100vw - 28px)); height:min(640px, calc(100vh - var(--taskbar-h) - 24px)); }
.os-window-game .os-window-body{ overflow:hidden; }

.hack-stage{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:24px 28px; text-align:center;
  overflow-y:auto; animation:hack-stage-in .35s ease;
}
.hack-stage[hidden]{ display:none; }
@keyframes hack-stage-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* la intro trae el manual completo: alineada arriba para que el scroll
   siempre alcance el inicio (center + overflow corta el tope) */
.hack-stage-intro{ justify-content:flex-start; }

.hack-mascots{ display:flex; gap:14px; justify-content:center; flex-shrink:0; }
.hack-mascot-img{ width:70px; height:70px; object-fit:contain; }
.hack-mascot-crt{
  filter:saturate(1.4) sepia(.2) hue-rotate(140deg) contrast(1.15) drop-shadow(0 0 10px var(--wd-cyan));
}

.hack-kicker{
  margin:0; font-size:11px; letter-spacing:.06em; color:var(--wd-magenta);
  text-shadow:0 0 8px #ff2fd677;
}
.hack-briefing{
  margin:0; max-width:460px; font-size:13.5px; line-height:1.6; color:var(--wd-fg);
}

/* ---- manual de instrucciones dentro de la intro ---- */
.hack-manual{
  width:100%; max-width:440px; padding:14px 16px; text-align:left;
  background:#00f6ff08; border:1px solid var(--wd-border); border-radius:8px;
}
.hack-manual-title{ margin:0 0 10px; font-size:11px; letter-spacing:.06em; color:var(--wd-cyan); }
.hack-manual-list{ margin:0 0 12px; padding:0; list-style:none; }
.hack-manual-list li{
  display:flex; align-items:center; gap:9px; margin-bottom:7px;
  font-size:12px; line-height:1.45; color:var(--wd-fg);
}
.hack-manual-list b{ color:var(--wd-lime); font-weight:700; }
.hack-manual-icon{ width:15px; height:15px; flex-shrink:0; color:var(--wd-magenta); filter:drop-shadow(0 0 4px currentColor); }
.hack-manual-note{ margin:0 0 4px; font-size:11.5px; line-height:1.5; color:var(--wd-amber); }
.hack-manual-note-dim{ color:var(--wd-dim); }

.hack-btn{
  font-family:var(--font-mono); font-size:13px; padding:10px 18px; cursor:pointer;
  background:transparent; border:2px solid var(--wd-cyan); color:var(--wd-cyan);
  box-shadow:0 0 14px #00f6ff33; transition:background .15s ease, color .15s ease, transform .15s ease;
  border-radius:4px;
}
.hack-btn:hover{ background:var(--wd-cyan); color:#00181c; transform:translateY(-1px); }
.hack-btn-primary{ border-color:var(--wd-lime); color:var(--wd-lime); box-shadow:0 0 14px #c6ff2b33; }
.hack-btn-primary:hover{ background:var(--wd-lime); color:#0a1200; }

/* ---- runner ---- */
.hack-hud{
  position:absolute; top:12px; left:0; right:0; display:flex; align-items:center;
  justify-content:center; gap:10px; font-size:11px; color:var(--wd-dim);
}
.hack-hud-label{ text-transform:uppercase; letter-spacing:.08em; }
.hack-hud-count{ color:var(--wd-cyan); font-weight:700; }
.hack-hud-profile{ color:var(--wd-magenta); text-transform:uppercase; letter-spacing:.06em; }

.hack-narration{
  margin:34px 0 0; max-width:460px; font-size:14px; line-height:1.55; color:var(--wd-fg);
  position:relative; flex-shrink:0;
}
.hack-mount{
  width:100%; max-width:480px; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
}

/* ---- outro ---- */
.hack-success-title{
  margin:0; font-family:var(--font-pixel); font-size:15px; color:var(--wd-lime);
  text-shadow:0 0 14px #c6ff2bcc;
}
.hack-success-sub{ margin:0; max-width:420px; font-size:13px; color:var(--wd-fg); line-height:1.6; }
.hack-outro-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---- glitch de texto reutilizable ---- */
.glitch-text{ position:relative; }
.glitch-text::before, .glitch-text::after{
  content:attr(data-text); position:absolute; inset:0; overflow:hidden; mix-blend-mode:screen;
  pointer-events:none;
}
.glitch-text::before{ color:var(--wd-magenta); animation:hk-glitch-a 3.2s infinite linear; }
.glitch-text::after{ color:var(--wd-cyan); animation:hk-glitch-b 3.2s infinite linear; }
@keyframes hk-glitch-a{
  0%, 94%, 100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
  95%{ transform:translate(-2px,1px); clip-path:inset(10% 0 60% 0); }
  97%{ transform:translate(2px,-1px); clip-path:inset(60% 0 5% 0); }
}
@keyframes hk-glitch-b{
  0%, 92%, 100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
  93%{ transform:translate(2px,-1px); clip-path:inset(70% 0 5% 0); }
  96%{ transform:translate(-2px,1px); clip-path:inset(5% 0 70% 0); }
}

/* ============ RETOS: helpers compartidos ============ */
@keyframes hk-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.hk-shake{ animation:hk-shake .26s linear; }

.hk-timerbar{
  width:100%; max-width:280px; height:5px; margin-top:14px;
  background:#0d2530; border-radius:3px; overflow:hidden;
}
.hk-timerbar-fill{
  height:100%; width:100%; background:linear-gradient(90deg, var(--wd-lime), var(--wd-cyan));
  transition:width .1s linear;
}

/* ---- nodeConnect ---- */
.hk-node-wrap{ position:relative; width:100%; height:100%; min-height:200px; }
.hk-node{
  position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; border:2px solid var(--node-color, var(--wd-cyan));
  background:var(--wd-panel); color:var(--node-color, var(--wd-cyan));
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  box-shadow:0 0 12px 1px var(--node-color, var(--wd-cyan));
  cursor:pointer;
}
.hk-node:disabled{ opacity:.25; cursor:default; }
.hk-node-hit{ animation:hk-node-pop .3s ease; }
@keyframes hk-node-pop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.4); } 100%{ transform:scale(1); } }

/* ---- typeCode ---- */
.hk-typecode-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.hk-typecode-target{
  font-family:var(--font-pixel); font-size:20px; letter-spacing:.2em; color:var(--wd-lime);
  text-shadow:0 0 12px #c6ff2bcc;
}
.hk-typecode-input{
  width:100%; max-width:220px; text-align:center; font-family:var(--font-mono); font-size:18px;
  letter-spacing:.3em; background:var(--wd-panel); border:2px solid var(--wd-cyan); color:var(--wd-fg);
  padding:8px; border-radius:4px;
}
.hk-keypad{
  display:grid; grid-template-columns:repeat(3, 52px); gap:8px; margin-top:6px;
}
.hk-keypad-btn{
  font-family:var(--font-mono); font-size:15px; padding:10px 0; cursor:pointer; border-radius:4px;
  background:var(--wd-panel); border:1px solid var(--wd-border); color:var(--wd-fg);
}
.hk-keypad-btn:hover{ border-color:var(--wd-cyan); color:var(--wd-cyan); }

/* ---- dialFrequency ---- */
.hk-dial-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:300px; }
.hk-dial-label{ margin:0; font-size:13px; color:var(--wd-dim); }
.hk-dial-range{ width:100%; accent-color:var(--wd-cyan); }
.hk-dial-readout{
  font-family:var(--font-pixel); font-size:22px; color:var(--wd-magenta);
  text-shadow:0 0 10px #ff2fd699; transition:color .15s ease;
}
.hk-dial-readout.hk-dial-readout-close{ color:var(--wd-lime); text-shadow:0 0 12px #c6ff2bcc; }

/* ---- findGlitch ---- */
.hk-glitchgrid-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.hk-glitchgrid{
  display:grid; grid-template-columns:repeat(4, 48px); gap:10px; justify-content:center;
}
.hk-glitch-tile{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--wd-panel); border:1px solid var(--wd-border); border-radius:6px; cursor:pointer;
  color:var(--wd-cyan); animation:hk-glitch-flicker 2.6s ease-in-out infinite;
}
.hk-glitch-icon{ width:22px; height:22px; }
.hk-glitch-tile-wrong{ border-color:var(--wd-danger); }
@keyframes hk-glitch-flicker{ 0%,80%,100%{ opacity:1; } 84%{ opacity:.35; } 88%{ opacity:1; } }

/* ---- memorySequence ---- */
.hk-memory-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.hk-memory-grid{ display:grid; grid-template-columns:repeat(2, 64px); gap:12px; }
.hk-memory-tile{
  width:64px; height:64px; border-radius:8px; cursor:pointer;
  background:var(--tile-color); opacity:.35; border:none; transition:opacity .12s ease;
}
.hk-memory-tile-lit{ opacity:1; box-shadow:0 0 20px 4px var(--tile-color); }
.hk-memory-status{ margin:0; font-size:12px; color:var(--wd-dim); }

/* ============ MÓVIL ============ */
@media (max-width:640px){
  /* el ancho NO se congela en px (el JS solo fija left/top) así que tiene que
     quedar forzado siempre, colocada o no — si no, en cuanto se congela la
     posición la ventana vuelve a su ancho de escritorio y queda descentrada */
  .os-window{
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - var(--taskbar-h) - 16px);
  }
  /* la posición inicial sí se libera apenas el JS la congela en px al abrirse
     o arrastrarse (.os-win-placed), dejando el control totalmente al drag */
  .os-window:not(.os-win-placed){
    left:50% !important; right:auto !important;
    top:calc((100dvh - var(--taskbar-h)) / 2) !important;
    transform:translate(-50%, -50%) !important;
  }
  .os-window-game{ height:calc(100dvh - var(--taskbar-h) - 16px); }
  .os-icons{ flex-direction:row; flex-wrap:wrap; max-height:none; max-width:calc(100vw - 20px); }
  .os-icon{ width:76px; }
  .os-watermark{ display:none; }
  .hack-mascot-img{ width:56px; height:56px; }
  .hack-briefing, .hack-narration{ font-size:12.5px; }
  .hack-stage{ padding:18px 14px; justify-content:flex-start; }
  .hack-manual{ padding:12px; }
  .hack-manual-list li{ font-size:11.5px; }
  .os-term-body{ height:300px; }
  /* con menos de 16px, iOS Safari hace zoom automático al enfocar el input */
  .os-term-input{ font-size:16px; }
  .hk-node-wrap{ min-height:170px; }
  .hk-glitchgrid{ grid-template-columns:repeat(3, 44px); }
  .hk-glitch-tile{ width:44px; height:44px; }
  .hk-memory-grid{ grid-template-columns:repeat(2, 56px); }
  .hk-memory-tile{ width:56px; height:56px; }
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .glitch-text::before, .glitch-text::after{ display:none; }
  body{ animation:none; }
  .os-rain{ display:none; }
}