:root{
  --void:#040504; --bone:#EDE6D6; --bone2:rgba(237,230,214,.82); --green:#7DFFB0; --deep:#2F4F3A; --blood:#C1121F;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; --disp:"Archivo Black","Arial Black",Impact,sans-serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 0 2px #000,0 1px 3px #000,0 0 18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--void);color:var(--bone);overflow:hidden;overscroll-behavior:none}
body{font:500 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;touch-action:none;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------- hud */
.hud{position:fixed;z-index:4;color:var(--bone2);pointer-events:none;opacity:0;transition:opacity 1.2s;text-shadow:var(--shadow)}
body.in .hud{opacity:1}
#hud-tl{top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left))}
#hud-tl .mk{display:block;font:18px/1 var(--disp);letter-spacing:.08em;color:var(--bone);margin-bottom:6px}
#hud-tl #sector{display:none}
#hud-bl{bottom:18px;left:22px;white-space:pre;font:500 14px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:rgba(237,230,214,.75)}
#hud-tr{position:fixed;z-index:6;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;gap:8px;opacity:0;transition:opacity 1.2s;pointer-events:none}
body.in #hud-tr,body.nogl #hud-tr{opacity:1;pointer-events:auto}
#hud-tr button{font:500 15px var(--mono);letter-spacing:.02em;color:var(--bone);background:none;border:0;padding:8px 6px;cursor:pointer;text-shadow:var(--shadow)}
#hud-tr button::before{content:'[ ';color:rgba(237,230,214,.5)}#hud-tr button::after{content:' ]';color:rgba(237,230,214,.5)}
#hud-tr button:hover,#hud-tr button:focus-visible{color:var(--green);outline:none}

/* ---------- captions */
#cap{position:fixed;z-index:4;left:max(22px,7vw);bottom:20vh;width:min(720px,calc(100vw - 44px));margin:0;padding:0;text-align:left;
  font:500 clamp(17px,1.45vw,21px)/1.45 var(--mono);letter-spacing:0;color:var(--bone);
  text-shadow:0 0 1px #0A0A0A,0 1px 2px #0A0A0A,0 0 14px rgba(0,0,0,.8);
  opacity:0;transition:opacity .8s;pointer-events:none}
#cap.on{opacity:1}
body.con-open #cap{opacity:0!important}
#hint{position:fixed;z-index:4;left:0;right:0;bottom:6vh;margin:0;text-align:center;font:600 13px var(--sans);letter-spacing:.4em;color:var(--green);text-shadow:var(--shadow);opacity:0;transition:opacity .8s;pointer-events:none;text-transform:uppercase}
#hint.on{opacity:.95;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ---------- enter */
#enter{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(4,5,4,0) 25%,rgba(4,5,4,.8) 88%);transition:opacity 1.4s ease}
#enter.gone{opacity:0;pointer-events:none}
.enter-in{text-align:center;padding:22px 26px;margin-top:40vh;background:radial-gradient(ellipse at center,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 55%,transparent 78%)}
.enter-in .mark{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);font:56px/1 var(--disp);letter-spacing:.3em}
body.nogl .enter-in .mark{position:static;width:auto;height:auto;clip:auto}
.enter-in .d{margin:0;font:500 17px var(--mono);letter-spacing:.02em;color:rgba(237,230,214,.85);text-shadow:var(--shadow)}
.enter-in .small{margin-top:4px;font:500 15px var(--mono);letter-spacing:.02em;color:rgba(237,230,214,.7);text-shadow:var(--shadow)}
.btns{display:flex;justify-content:center;margin:18px 0 6px}
.btns button{font:44px/1 var(--disp);letter-spacing:.02em;text-transform:lowercase;color:var(--bone);background:none;border:0;border-bottom:3px solid var(--bone);padding:4px 10px 8px;cursor:pointer;text-shadow:var(--shadow)}
#go-silent{margin-top:20px;font:500 16px var(--mono);color:rgba(237,230,214,.75);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-shadow:var(--shadow)}
#go-silent:hover,#go-silent:focus-visible{color:var(--green);outline:none}
.btns button:hover,.btns button:focus-visible{outline:none;color:var(--green);border-color:var(--green)}
body:not(.ready):not(.nogl) .btns,body:not(.ready):not(.nogl) #go-silent{opacity:.35;pointer-events:none}
#loading{margin:6px 0 0;font:500 13px var(--mono);letter-spacing:.3em;color:var(--green);text-transform:uppercase}
body.ready #loading,body.nogl #loading{display:none}

/* ---------- console */
#console{font-family:var(--mono);position:fixed;z-index:8;right:18px;bottom:18px;width:min(620px,calc(100vw - 36px));height:auto;max-height:min(72vh,620px);display:flex;flex-direction:column;background:rgba(4,5,4,.9);border:1px solid rgba(125,255,176,.4);box-shadow:0 0 60px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:conin .35s ease}
#console[hidden]{display:none}
@keyframes conin{from{opacity:0;transform:translateY(8px)}}
#con-x{position:absolute;top:8px;right:10px;z-index:2;font:500 26px/1 var(--mono);color:var(--bone);background:none;border:0;cursor:pointer;padding:4px 8px}
#con-x:hover,#con-x:focus-visible{color:var(--green);outline:none}
#term{flex:1;overflow-y:auto;padding:20px 22px 10px;scrollbar-width:none;touch-action:pan-y}
#term::-webkit-scrollbar{display:none}
#out .l{white-space:pre-wrap;word-break:break-word;margin:0;font-size:16px;line-height:1.6}
#out .g{color:var(--green);text-shadow:0 0 8px rgba(125,255,176,.3)}
#out .d{color:rgba(237,230,214,.7)}
#out .r{color:#ff4a55}
#out .big{font:600 26px/1.1 var(--mono);letter-spacing:.12em;color:var(--bone);margin:0 0 10px}
#out a{color:var(--green);font-weight:600;text-underline-offset:4px;font-size:19px}
#out img{display:block;max-width:min(320px,70vw);margin:10px 0;border:1px solid var(--deep)}
#line{display:flex;gap:10px;align-items:center;margin-top:8px}
.prompt{color:var(--green);white-space:nowrap;font:600 15px var(--mono)}
#cmd{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--bone);font:500 16px var(--mono);caret-color:var(--green)}
#chips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid rgba(125,255,176,.25)}
#chips button{font:600 14px var(--mono);letter-spacing:.08em;color:var(--green);background:rgba(125,255,176,.06);border:1px solid rgba(125,255,176,.4);padding:10px 14px;cursor:pointer}
#chips button:hover,#chips button:focus-visible{border-color:var(--green);background:rgba(125,255,176,.14);outline:none}

.skip{position:fixed;right:18px;bottom:14px;z-index:5;font:500 13px var(--mono);color:rgba(237,230,214,.8);text-decoration:none;letter-spacing:.1em;text-shadow:var(--shadow)}
.skip:hover,.skip:focus{color:var(--green)}
body.con-open .skip{display:none}
.nos{position:fixed;inset:auto 0 40% 0;text-align:center;font-size:16px}
.nos a{color:var(--green)}

body.nogl #gl,body.nogl .hud,body.nogl #cap{display:none}
body.nogl #console{inset:72px 16px 16px;width:auto;height:auto}

@media (max-width:760px){
  #hud-tl{top:14px;left:14px}
  #hud-tl .mk{font-size:16px}
  #hud-tl #sector{font-size:11px}
  #hud-bl{display:none}
  #hud-tr{top:12px;right:12px;gap:6px}
  #hud-tr button{font-size:11px;padding:9px 10px;letter-spacing:.08em}
  #cap{bottom:22vh;font-size:16px;left:18px}
  .enter-in{margin-top:44vh;padding:14px 12px}
  .enter-in .d{font-size:14px;letter-spacing:.16em}
  .enter-in .small{font-size:12px;letter-spacing:.18em}
  .btns button{font-size:40px}
  #console{right:8px;left:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;height:auto;max-height:70svh}
  #term{padding:18px 16px 8px}
  #out .l{font-size:15px}
  #out .big{font-size:26px}
  #chips button{font-size:13px;padding:10px 12px}
  .skip{bottom:10px;right:12px}
}
@media (prefers-reduced-motion:reduce){
  #hint.on{animation:none}
  #console{animation:none}
}

/* film edge print */
#edge{position:fixed;z-index:3;left:6px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font:500 10px var(--mono);letter-spacing:.3em;color:rgba(237,230,214,.28);pointer-events:none;opacity:0;transition:opacity 1.2s;white-space:nowrap}
body.in #edge{opacity:1}
@media (max-width:760px){#edge{display:none}}