:root{
  --fg:#d7e6ef; --dim:#7f94a2; --acc:#6fe3ff; --warn:#ffb454; --bad:#ff5a53; --ok:#8ef2b0;
  --panel:rgba(6,12,17,.82); --line:rgba(111,227,255,.28);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05080b;color:var(--fg);font-family:var(--mono);}
canvas#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:none;}
.hidden{display:none !important;}
b{font-weight:700}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;user-select:none;
  text-shadow:0 0 8px rgba(0,0,0,.9);font-size:13px;letter-spacing:.06em;}

#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;}
#crosshair .ch{position:absolute;background:var(--fg);opacity:.9;
  box-shadow:0 0 4px rgba(0,0,0,.9);border-radius:1px;transform-origin:center;}
#crosshair .t,#crosshair .b{width:2px;height:9px;left:-1px;}
#crosshair .l,#crosshair .r{height:2px;width:9px;top:-1px;}
#chdot{position:absolute;width:2px;height:2px;left:-1px;top:-1px;background:var(--fg);opacity:.55;border-radius:50%;}
#hitmarker{position:absolute;left:-20px;top:-20px;width:40px;height:40px;opacity:0;}
#hitmarker path{stroke:#fff;stroke-width:2.4;stroke-linecap:round;fill:none;}
#hitmarker.kill path{stroke:var(--bad);}

#compass{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:340px;height:26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
#compassStrip{position:absolute;top:0;left:0;height:100%;white-space:nowrap;will-change:transform;}
#compassStrip .tick{position:absolute;top:12px;width:1px;height:6px;background:var(--dim);}
#compassStrip .tick.maj{top:8px;height:10px;background:var(--fg);}
#compassStrip .lbl{position:absolute;top:-3px;transform:translateX(-50%);font-size:11px;color:var(--acc);}
#compassNeedle{position:absolute;left:50%;top:0;width:1px;height:14px;background:var(--acc);
  box-shadow:0 0 8px var(--acc);transform:translateX(-50%);}

#objectiveBox{position:absolute;top:52px;left:50%;transform:translateX(-50%);text-align:center;min-width:280px;}
#chapterTag{font-size:11px;color:var(--acc);letter-spacing:.3em;opacity:.85}
#objectiveText{font-size:14px;margin-top:3px;color:var(--fg)}
#objectiveMeter{margin:6px auto 0;width:180px;height:2px;background:rgba(255,255,255,.14)}
#objectiveMeter i{display:block;height:100%;width:0;background:var(--acc);box-shadow:0 0 8px var(--acc);transition:width .18s}

#killfeed{position:absolute;top:96px;right:22px;text-align:right;font-size:12px;}
#killfeed div{opacity:0;margin-bottom:4px;color:var(--dim);}
#killfeed div.show{opacity:1;transition:opacity .2s}
#killfeed em{font-style:normal;color:var(--bad)}
#killfeed s{text-decoration:none;color:var(--fg)}

#bottomLeft{position:absolute;left:26px;bottom:26px;width:210px;}
#healthWrap{display:flex;align-items:center;gap:9px}
#healthBar,#armorBar{flex:1;height:6px;background:rgba(255,255,255,.12);border-left:2px solid var(--fg)}
#healthBar i,#armorBar i{display:block;height:100%;width:100%;background:var(--fg);box-shadow:0 0 10px rgba(215,230,239,.5)}
#healthBar.low i{background:var(--bad);box-shadow:0 0 10px var(--bad)}
#healthNum{font-size:18px;width:36px;text-align:right}
#armorWrap{margin-top:5px;padding-right:45px}
#armorBar{height:3px;border-left-color:var(--acc)}
#armorBar i{background:var(--acc);box-shadow:0 0 8px var(--acc)}

#bottomRight{position:absolute;right:26px;bottom:22px;text-align:right}
#weaponName{font-size:12px;color:var(--dim);letter-spacing:.24em}
#ammoLine{font-size:34px;line-height:1.05;font-weight:700}
#ammoSep,#ammoRes{font-size:16px;color:var(--dim);font-weight:400}
#ammoMag.low{color:var(--warn)}
#ammoMag.empty{color:var(--bad)}
#reloadWrap{height:3px;width:150px;margin:5px 0 0 auto;background:rgba(255,255,255,.1);opacity:0}
#reloadWrap.on{opacity:1}
#reloadBar{height:100%}
#reloadBar i{display:block;height:100%;width:0;background:var(--warn);box-shadow:0 0 8px var(--warn)}
#weaponSlots{margin-top:8px;display:flex;gap:6px;justify-content:flex-end}
#weaponSlots b{width:20px;height:20px;line-height:19px;text-align:center;font-size:11px;
  border:1px solid rgba(255,255,255,.2);color:var(--dim)}
#weaponSlots b.on{border-color:var(--acc);color:var(--acc);box-shadow:0 0 10px rgba(111,227,255,.35)}

#prompt{position:absolute;left:50%;top:56%;transform:translateX(-50%);font-size:13px;color:var(--acc);letter-spacing:.2em}
#promptMeter{position:absolute;left:50%;top:calc(56% + 22px);transform:translateX(-50%);width:120px;height:3px;background:rgba(255,255,255,.15)}
#promptMeter i{display:block;height:100%;width:0;background:var(--acc);box-shadow:0 0 8px var(--acc)}

#dialogue{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);max-width:640px;text-align:center;}
#dialogueWho{font-size:11px;color:var(--acc);letter-spacing:.3em}
#dialogue p{margin:5px 0 0;font-size:15px;line-height:1.5;color:#eaf4fa}
#journalToast{position:absolute;left:26px;top:120px;border-left:2px solid var(--acc);padding:6px 12px;background:var(--panel)}
#journalToast span{font-size:10px;color:var(--acc);letter-spacing:.28em}
#journalToast p{margin:3px 0 0;font-size:13px}
#banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center}
#banner h1{margin:0;font-size:44px;letter-spacing:.34em;font-weight:700}
#banner p{margin:8px 0 0;font-size:13px;color:var(--dim);letter-spacing:.3em}
#lowAmmo{position:absolute;left:50%;top:58%;transform:translateX(-50%);color:var(--warn);font-size:13px;letter-spacing:.3em;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.fade{transition:opacity .35s}

/* ---------- Profiler ---------- */
#stats{position:fixed;left:8px;top:8px;font:11px/1.45 var(--mono);color:#9fe9c9;
  background:rgba(0,0,0,.62);padding:8px 11px;white-space:pre;pointer-events:none;
  border-left:2px solid #9fe9c9;letter-spacing:.03em}

/* ---------- Overlay / menus ---------- */
#overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(6,14,20,.72),rgba(2,4,6,.95));backdrop-filter:blur(3px)}
#overlay.hidden{display:none}
.panel{width:min(760px,92vw);max-height:88vh;overflow:auto;padding:30px 34px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 0 60px rgba(0,0,0,.7),inset 0 0 90px rgba(111,227,255,.04)}
.panel h1{margin:0 0 4px;font-size:46px;letter-spacing:.16em;font-weight:700}
.panel h1 span{color:var(--acc);text-shadow:0 0 26px rgba(111,227,255,.5)}
.panel h2{margin:0 0 16px;font-size:20px;letter-spacing:.3em;color:var(--acc)}
.panel .tag{margin:0 0 22px;color:var(--dim);font-size:13px;letter-spacing:.1em}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
button{font-family:var(--mono);font-size:12px;letter-spacing:.18em;padding:10px 18px;color:var(--fg);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:.15s}
button:hover{background:rgba(111,227,255,.12);border-color:var(--acc);color:#fff}
button.primary{border-color:var(--acc);color:var(--acc)}
.keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;font-size:11px;color:var(--dim)}
.keys b{color:var(--fg)}
#chapterPick{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin:4px 0 8px}
#chapterPick button{padding:9px 6px;text-align:left;font-size:11px;line-height:1.5}
#chapterPick button .n{display:block;color:var(--acc);letter-spacing:.24em}
#chapterPick button[disabled]{opacity:.35;cursor:not-allowed}

#optionList{display:grid;gap:2px}
.opt{display:grid;grid-template-columns:190px 1fr 66px;align-items:center;gap:14px;
  padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}
.opt:hover{background:rgba(111,227,255,.05)}
.opt .val{text-align:right;color:var(--acc)}
.opt input[type=range]{width:100%;accent-color:#6fe3ff;background:transparent}
.opt .toggle{justify-self:start;padding:5px 14px}
#journalList{display:grid;gap:10px;margin-bottom:14px}
.jent{border-left:2px solid var(--acc);padding:8px 14px;background:rgba(255,255,255,.03)}
.jent h3{margin:0 0 4px;font-size:13px;letter-spacing:.16em;color:var(--acc)}
.jent p{margin:0;font-size:12px;line-height:1.6;color:var(--dim)}
.jent.locked{border-left-color:rgba(255,255,255,.14);opacity:.5}
#endBody{font-size:13px;line-height:1.7;color:var(--dim);margin:0 0 18px}

#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#05080b;color:var(--acc);font:12px var(--mono);letter-spacing:.4em;z-index:50}
#loading.hidden{display:none}