:root{
  --orange:#f57a1a; --orange-d:#c25200; --red:#e1251b; --scan:#33ff66; --hud:#ff9a3d;
  --term:#2cff8a; --mono:'Share Tech Mono',ui-monospace,Menlo,monospace; --vt:'VT323',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;color:#fff;font-family:var(--mono);user-select:none}
canvas#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated;background:#000}
.hidden{display:none!important}

/* ---------- helmet visor ---------- */
#visor{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(ellipse 72% 80% at 50% 52%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.95) 100%),
    linear-gradient(115deg, rgba(255,255,255,.035) 0 18%, transparent 18.2% 100%);
  mix-blend-mode:normal}
#visor::before{content:"";position:absolute;inset:-6vh -6vw;border-radius:46% 46% 40% 40%/38% 38% 50% 50%;
  box-shadow:0 0 0 30vw #050505, inset 0 0 6vw 2vw rgba(0,0,0,.9)}
#visor::after{content:"";position:absolute;left:8vw;top:6vh;width:22vw;height:9vh;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 70%);transform:rotate(-12deg)}
body.no-visor #visor{display:none}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:3;font-family:var(--mono);text-shadow:0 0 4px rgba(0,0,0,.8)}
#hud.hidden-hud > *:not(.always){display:none!important}
/* employee status: stamina ring around the body silhouette */
.hud-status{position:absolute;left:3.5vw;top:5vh;width:132px;text-align:center}
.hud-status .ring{width:132px;height:132px;display:block;filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}
.hud-status .track{fill:rgba(0,0,0,.35);stroke:rgba(255,140,40,.18);stroke-width:7}
.hud-status .stam{fill:none;stroke:var(--orange);stroke-width:7;stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset .08s linear,stroke .3s}
.hud-status .stam.low{stroke:#8a3a12;animation:blink .6s steps(2) infinite}
.hud-status .body{fill:#f0ede6;opacity:.92;transition:fill .15s}
.hud-status .body.hit{fill:#fff}
.hud-status .body-hurt{fill:#e1251b}
.hud-weight{margin-top:4px;font:15px var(--mono);color:#ffb070;letter-spacing:.5px}
.hud-crit{display:none;margin-top:6px;font:bold 17px/18px var(--mono);color:#ff2a1a;letter-spacing:1px}
.hud-status.crit .hud-crit{display:block;animation:blink .5s steps(2) infinite}
.hud-status.crit .body{fill:#ff6a5a}
@keyframes blink{50%{opacity:.15}}
/* clock (outdoors only) */
.hud-clock{position:absolute;left:50%;top:3.5vh;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:4px 14px;border-top:2px solid #ff3b1f;border-bottom:2px solid #ff3b1f;color:#ff3b1f;font:30px var(--vt);letter-spacing:1px}
.hud-clock.night{color:#ff6a3d;border-color:#ff6a3d}
.hud-clock .ic{display:flex}
/* key hints */
.hud-tips{position:absolute;right:4.5vw;top:6vh;font:17px var(--mono);color:#fff;text-align:left;line-height:1.55}
.hud-tips .k{display:inline-block;min-width:76px}
.hud-tips .k::after{content:' : '}
.hud-tips .v{color:#ffd0a0}
.hud-tips .plain{color:#ffb070}
/* hotbar: four blue squares */
.hud-inv{position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);display:flex;gap:14px}
.slot{width:64px;height:64px;position:relative;border:2px dashed rgba(70,150,255,.75);border-radius:4px;background:rgba(10,30,60,.22);box-shadow:0 0 8px rgba(40,120,255,.25) inset;transition:border-color .12s,transform .12s}
.slot.sel{border-style:solid;border-color:#6fb4ff;background:rgba(40,110,230,.28);box-shadow:0 0 12px rgba(90,160,255,.55),0 0 10px rgba(80,150,255,.35) inset;transform:scale(1.08)}
.slot.locked{opacity:.35}
.slot canvas{position:absolute;left:3px;top:3px;width:54px;height:54px}
.slot .bat{position:absolute;left:4px;right:4px;bottom:-10px;height:5px;background:rgba(0,0,0,.6);border:1px solid rgba(120,180,255,.5);display:none}
.slot .bat i{display:block;height:100%;background:#4fa3ff;transition:width .2s}
.slot .bat.lowbat i{background:#ff3b1f;animation:blink .45s steps(2) infinite}
.hud-belt{position:absolute;left:50%;bottom:calc(4.5vh + 94px);transform:translateX(-50%);display:flex;gap:6px}
.belt-item{width:36px;height:36px;border:1px dashed rgba(70,150,255,.55);border-radius:3px;background:rgba(10,30,60,.25)}
.belt-item canvas{display:block;width:34px;height:34px;margin:1px}
/* crosshair + interaction prompt */
.hud-cross{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.hud-cross .hand{display:none;height:44px;filter:drop-shadow(0 0 4px #000)}
.hud-cross .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 3px #000}
.hud-cross.hot .dot{background:#ffb070}
.hud-cross .txt{display:none;font:18px var(--mono);color:#fff;letter-spacing:.5px}
.hud-cross .bar{display:none;width:120px;height:6px;border:1px solid #fff;background:rgba(0,0,0,.5)}
.hud-cross .bar i{display:block;height:100%;background:#fff}
/* messages */
.hud-msg{position:absolute;left:50%;top:22vh;transform:translateX(-50%);text-align:center;transition:opacity .4s;color:#ff8a2a}
.hud-msg .big{font:30px var(--vt);letter-spacing:1px}
.hud-msg .small{font:15px var(--mono);color:#ffb070;margin-top:4px}
.hud-notice{position:absolute;left:50%;top:14vh;transform:translateX(-50%);font:16px var(--mono);color:#fff;background:rgba(20,12,6,.6);border:1px solid rgba(255,138,42,.5);padding:6px 14px;white-space:nowrap}
.hud-warn{position:absolute;left:50%;top:30vh;transform:translateX(-50%);font:26px var(--mono);color:#ff3b1f;animation:blink .8s steps(2) infinite;white-space:pre;text-align:center}
/* chat */
.hud-chat{position:absolute;left:3.5vw;bottom:16vh;width:340px;font:14px var(--mono);color:#fff}
.hud-chat .ln{transition:opacity .6s;margin:2px 0;color:#f3d9c0}
.hud-chat .ln b{color:#ff8a2a}
.hud-chat .in{pointer-events:auto;width:100%;box-sizing:border-box;margin-top:6px;background:rgba(0,0,0,.6);border:1px solid #ff8a2a;color:#fff;font:14px var(--mono);padding:4px 6px;outline:none}
/* scan labels: green scrap, red threats, blue points of interest */
.hud-scanlayer{position:absolute;inset:0}
.hud-scanlbl{position:absolute;transform:translate(-50%,-100%);transition:opacity .5s;white-space:nowrap}
.hud-scanlbl .box{position:relative;display:inline-flex;flex-direction:column;align-items:center;padding:4px 10px;border:1px solid var(--scan);background:rgba(0,30,10,.55);color:var(--scan);font:15px var(--mono);box-shadow:0 0 8px rgba(51,255,102,.3)}
.hud-scanlbl .box::after{content:'';position:absolute;left:50%;bottom:-7px;width:1px;height:7px;background:currentColor}
.hud-scanlbl small{font-size:13px;opacity:.9;margin-top:2px}
.hud-scanlbl .val{border:1px solid currentColor;padding:0 6px;margin-top:3px;font-size:14px}
.hud-scanlbl.enemy .box{border-color:#ff3b1f;color:#ff3b1f;background:rgba(40,0,0,.6);box-shadow:0 0 8px rgba(255,59,31,.35)}
.hud-scanlbl.other .box{border-color:#4fa3ff;color:#4fa3ff;background:rgba(0,10,40,.6);box-shadow:0 0 8px rgba(79,163,255,.35)}
.hud-scanpulse{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;border:2px solid rgba(51,255,102,.6);opacity:0;transform:translate(-50%,-50%)}
.hud-scanpulse.go{animation:scanpulse .55s ease-out}
@keyframes scanpulse{0%{width:0;height:0;opacity:.9}100%{width:220vmax;height:220vmax;opacity:0}}
.hud-scantotal{position:absolute;right:5vw;bottom:9vh;font:22px var(--vt);color:var(--scan);border:1px solid var(--scan);padding:4px 12px;background:rgba(0,30,10,.55)}
/* misc */
.hud-spectate{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;font:18px var(--mono);color:#ddd}
.hud-dmg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(200,20,10,0) 45%,rgba(200,20,10,.75) 100%)}
.hud-pings{position:absolute;inset:0}
.hud-ping{position:absolute;transform:translate(-50%,-50%);font:13px var(--mono);color:#ffd0a0;border:1px solid #ffd0a0;padding:1px 6px;background:rgba(0,0,0,.5)}
.hud-voice{position:absolute;left:3.5vw;bottom:9vh;font:14px var(--mono);color:#9fe}
.hud-voice div{opacity:.95}
.hud-net{position:absolute;right:1vw;top:1vh;font-size:11px;color:#777}
.hud-landing{position:absolute;left:4vw;bottom:22vh;margin:0;font:22px var(--vt);color:#ff8a2a;white-space:pre;letter-spacing:.5px}

/* ---------- full screen overlays ---------- */
#overlay{position:fixed;inset:0;z-index:6;pointer-events:none}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto}
.ov-dead{background:rgba(0,0,0,.92);color:#ff2a1a;font-size:46px;letter-spacing:6px;pointer-events:none}
.ov-dead small{font-size:18px;color:#aaa;letter-spacing:2px;margin-top:18px}
.ov-report{background:rgba(0,0,0,.84);color:#ffb067;font-family:var(--vt);pointer-events:none}
.report{width:min(720px,90vw);border:3px solid var(--orange);padding:26px 34px;background:rgba(20,8,0,.6)}
.report h1{margin:0 0 10px;font-size:46px;color:var(--orange);letter-spacing:4px}
.report .row{display:flex;justify-content:space-between;font-size:30px;padding:3px 0;border-bottom:1px dashed rgba(245,122,26,.35)}
.report .grade{font-size:90px;color:#fff;text-align:right;line-height:1}
.report .dec{color:#ff5a3a}
.ov-fired{background:#000;color:#ff2a1a;font-size:60px;letter-spacing:8px;pointer-events:none;font-family:var(--vt)}
.ov-fade{background:#000;opacity:0;transition:opacity .8s;pointer-events:none}
.ov-quota{pointer-events:none}
.quota-box{border:3px solid var(--orange);background:rgba(15,5,0,.85);padding:16px 40px;text-align:center;color:var(--orange);font-family:var(--vt)}
.quota-box .t{font-size:30px;letter-spacing:3px}
.quota-box .n{font-size:64px;color:#fff}

/* ---------- terminal ---------- */
#terminal{position:fixed;left:50%;top:50%;width:min(860px,92vw);height:min(640px,86vh);transform:translate(-50%,-50%);z-index:5;
  background:#020c05;border:14px solid #1b1d1b;border-radius:10px;box-shadow:0 0 0 3px #333,0 0 60px rgba(0,255,120,.15) inset;
  color:var(--term);font-family:var(--vt);font-size:24px;line-height:1.08;display:flex;flex-direction:column;padding:16px 20px}
#terminal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);border-radius:4px}
#terminal .tcred{position:absolute;right:22px;top:10px;font-size:28px}
#terminal pre{margin:0;flex:1;overflow:hidden;white-space:pre-wrap;font:inherit;text-shadow:0 0 6px rgba(44,255,138,.5)}
#terminal .tin{display:flex;gap:6px;text-shadow:0 0 6px rgba(44,255,138,.5)}
#terminal input{flex:1;background:transparent;border:0;outline:none;color:var(--term);font:inherit;caret-color:var(--term)}
#terminal canvas{position:absolute;left:20px;top:46px;right:20px;bottom:60px;width:calc(100% - 40px);height:calc(100% - 106px);display:none}

/* ---------- menu ---------- */
#menu{position:fixed;inset:0;z-index:10;background:#000;overflow:hidden}
#menu-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 30%, rgba(80,10,0,.35), transparent 60%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.7}49%{opacity:1}}
#logo{position:absolute;left:50%;top:9vh;transform:translateX(-50%);text-align:center}
.logo-main{font-family:'Black Ops One',var(--mono);font-size:clamp(54px,9vw,120px);line-height:.88;color:#d4160e;letter-spacing:4px;
  text-shadow:0 0 22px rgba(255,30,0,.35), 3px 3px 0 #3a0300;transform:skewX(-6deg)}
.logo-sub{margin-top:14px;color:#a33;letter-spacing:5px;font-size:13px}
.menu-panel{position:absolute;left:8vw;bottom:12vh;width:min(520px,84vw);font-size:30px;color:var(--orange)}
.menu-panel .ph{font-size:20px;letter-spacing:3px;color:#a25a24;margin-bottom:10px}
.menu-panel p{font-size:16px;color:#c08050;line-height:1.4}
.menu-panel label{display:block;font-size:16px;color:#c87a3a;margin:10px 0}
.menu-panel input,.menu-panel select{display:block;width:100%;margin-top:4px;background:#110700;border:1px solid var(--orange-d);color:#ffb067;
  font:20px var(--mono);padding:6px 8px;outline:none}
.mi{cursor:pointer;padding:2px 10px;margin:2px 0;pointer-events:auto;color:var(--orange)}
.mi:hover,.mi.sel{background:var(--orange);color:#1a0800}
#menu-status{position:absolute;left:8vw;bottom:5vh;color:#e2582a;font-size:16px;max-width:80vw}
#menu-ver{position:absolute;right:2vw;bottom:2vh;color:#552;font-size:12px}
#lobby{position:fixed;right:2vw;top:2vh;z-index:4}
.lobby-box{background:rgba(10,4,0,.8);border:2px solid var(--orange);padding:10px 16px;color:var(--orange);font-size:14px;max-width:260px}
#lobby-code{font-size:38px;color:#fff;letter-spacing:6px;font-family:var(--vt);user-select:text}
.lobby-hint{color:#c08050;font-size:12px;margin:4px 0}
#lobby .mi{font-size:14px;pointer-events:auto}
#click-to-play{position:fixed;left:50%;top:60%;transform:translateX(-50%);z-index:4;color:#fff;font-size:20px;
  background:rgba(0,0,0,.6);padding:8px 18px;border:1px solid #fff;cursor:pointer}
#pause{position:fixed;inset:0;z-index:8;background:rgba(0,0,0,.6)}