*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#05070a;font-family:"IBM Plex Mono",monospace;color:#bfe9c9}
canvas{position:fixed;inset:0;display:block}
.hidden{display:none!important}
/* ---------- INTRO ---------- */
#intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
 background:radial-gradient(1200px 700px at 50% 20%,#14243255 0%,transparent 60%),
 radial-gradient(900px 600px at 80% 90%,#3a2c0f44 0%,transparent 60%),#05070a;cursor:pointer}
#introFrame{width:min(760px,92vw);border:1px solid #ffc85744;background:#0a0f12e8;padding:38px 44px;position:relative;
 box-shadow:0 0 80px #000, inset 0 0 60px #00000088}
#introFrame::before,#introFrame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid #ffc857}
#introFrame::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
#introFrame::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.gear{font-size:34px;color:#ffc857;text-align:center;animation:spin 14s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
#introTitle{font-family:"Russo One";font-size:clamp(34px,6vw,58px);color:#ffc857;text-align:center;letter-spacing:4px;
 text-shadow:0 0 24px #ffc85755;margin:6px 0 2px}
#introSub{text-align:center;color:#7cff9b;letter-spacing:6px;font-size:12px;margin-bottom:22px}
#introLore{font-size:13.5px;line-height:1.75;color:#a8c8b2;margin-bottom:20px}
#introLore b{color:#ffc857;font-weight:600}
#ctrls{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;font-size:12.5px;color:#7cff9b;margin-bottom:26px}
#ctrls span{color:#e8e2c8}
#startBtn{display:block;margin:0 auto;font-family:"Russo One";font-size:19px;letter-spacing:3px;color:#0a0f12;
 background:#ffc857;border:none;padding:14px 46px;cursor:pointer;transition:.2s;box-shadow:0 0 22px #ffc85733}
#startBtn:hover{background:#ffe08a;box-shadow:0 0 40px #ffc857aa;transform:translateY(-1px)}
#lifeSupport{text-align:center;margin-top:18px;font-size:11px;color:#4d7a5c;letter-spacing:2px}
#lifeSupport i{animation:blink 1.4s steps(2) infinite;color:#7cff9b;font-style:normal}
@keyframes blink{50%{opacity:.15}}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:40;pointer-events:none}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,#000000b8 100%)}
#scan{position:absolute;inset:0;opacity:.10;background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}
#cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:.15s}
#cross .d{width:4px;height:4px;background:#7cff9b;border-radius:50%;box-shadow:0 0 6px #7cff9b}
#cross.on .d{background:#ffc857;box-shadow:0 0 10px #ffc857;transform:scale(1.8)}
.panel{position:absolute;background:#0a120cd9;border:1px solid #7cff9b44;padding:12px 16px;font-size:12.5px;line-height:1.7}
.panel h4{font-family:"Russo One";font-size:11px;letter-spacing:3px;color:#ffc857;margin-bottom:6px;font-weight:400}
#objectives{top:18px;left:18px;max-width:330px}
#objectives li{list-style:none;color:#a8c8b2}
#objectives li::before{content:"☐ ";color:#7cff9b}
#objectives li.done{color:#5d7a66;text-decoration:line-through}
#objectives li.done::before{content:"☑ ";color:#ffc857}
#stats{bottom:18px;left:18px;min-width:250px}
.bar{height:9px;background:#10201a;border:1px solid #7cff9b33;margin:3px 0 8px;position:relative}
.bar i{position:absolute;inset:0;transform-origin:left;background:#7cff9b;transition:width .2s}
.bar.rad i{background:#c8ff4d}
.lab{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px}
#compass{top:16px;left:50%;transform:translateX(-50%);padding:6px 22px;font-family:"Russo One";letter-spacing:3px;color:#7cff9b;font-size:13px}
#clock{top:56px;left:50%;transform:translateX(-50%);padding:3px 14px;font-size:11px;color:#7a9c86;letter-spacing:2px}
#prompt{position:absolute;left:50%;top:57%;transform:translateX(-50%);background:#0a120ce8;border:1px solid #ffc85788;
 color:#ffc857;padding:8px 18px;font-size:13.5px;letter-spacing:1px;box-shadow:0 0 20px #00000090}
#loc{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);font-family:"Russo One";font-size:clamp(20px,3.4vw,34px);
 letter-spacing:10px;color:#ffc857;text-shadow:0 0 30px #ffc85766;opacity:0;transition:opacity .8s,letter-spacing .8s;white-space:nowrap}
#loc.show{opacity:1;letter-spacing:14px}
#dlg{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(700px,92vw);background:#081009ee;
 border:1px solid #7cff9b66;box-shadow:0 0 40px #000;padding:16px 22px 12px}
#dName{font-family:"Russo One";color:#ffc857;font-size:14px;letter-spacing:2px;margin-bottom:8px}
#dName small{color:#5d8a6c;font-size:10px;letter-spacing:3px;margin-left:10px}
#dText{min-height:66px;font-size:14.5px;line-height:1.65;color:#c8f0d2}
#dText.you{color:#ffd98a;font-style:italic}
#dHint{text-align:right;font-size:11px;color:#4d7a5c;letter-spacing:2px;margin-top:6px}
#toast{position:absolute;top:96px;left:50%;transform:translateX(-50%);background:#1c1607ee;border:1px solid #ffc857;
 color:#ffc857;padding:8px 26px;font-size:13px;letter-spacing:3px;opacity:0;transition:opacity .4s}
#hint{bottom:18px;right:18px;font-size:11px;color:#5d8a6c;text-align:right;letter-spacing:1px}
#pause{position:fixed;inset:0;z-index:50;background:#05070acc;display:flex;align-items:center;justify-content:center;
 font-family:"Russo One";letter-spacing:4px;color:#ffc857;font-size:20px;cursor:pointer}