/* ════════════════════════════════════════════════════════════════════
   BREACH UI: flat, legible, game-native (BO4 / CS:GO / Rivals references)
   One accent (safety amber), money green, damage red. No glows, emoji or scanlines.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0b0c0d; --panel:rgba(14,15,16,.9); --panel2:rgba(22,23,25,.92);
  --line:rgba(236,232,223,.12); --line2:rgba(236,232,223,.22);
  --text:#ece8df; --dim:#9b978d; --mute:#66635c;
  --accent:#f0a23b; --accent-ink:#1a1206; --money:#9ad16c; --danger:#e5483b; --armor:#86bfe0;
  --disp:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Barlow','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--body);color:var(--text);
  user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
canvas{display:block}
kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--line2);border-radius:3px;
  font:500 11px/1.5 var(--mono);color:var(--text);background:rgba(255,255,255,.06);text-align:center}
.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--mute);vertical-align:middle;margin:0 10px}

/* ── buttons ── */
button{font:700 15px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;padding:13px 30px;
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:2px;cursor:pointer;transition:background .12s,color .12s}
button:hover{background:#ffb75a}
button:active{transform:translateY(1px)}
button.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
button.ghost:hover{background:rgba(255,255,255,.06)}
button.buy{background:var(--money);color:#0d1a06}
button.buy:hover{background:#b2e48a}
button[disabled],button[disabled]:hover{background:rgba(255,255,255,.06);color:var(--mute);box-shadow:none;cursor:not-allowed}
.btn-row{display:flex;gap:10px;justify-content:center}

/* ════════════════ HUD ════════════════ */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
#hud.on{opacity:1}
#cross{position:absolute;left:50%;top:50%;width:0;height:0}
.ch{position:absolute;background:var(--chc,#f4f1ea);box-shadow:0 0 0 1px rgba(0,0,0,.55)}
.ch-t,.ch-b{width:2px;height:var(--chl,7px);left:-1px}
.ch-t{top:calc(-1 * var(--chl,7px))}.ch-b{top:0}
.ch-l,.ch-r{height:2px;width:var(--chl,7px);top:-1px}
.ch-l{left:calc(-1 * var(--chl,7px))}.ch-r{left:0}
.ch-dot{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;background:var(--chc,#f4f1ea);box-shadow:0 0 0 1px rgba(0,0,0,.55);display:none}
#cross.dot .ch-dot{display:block}
#hm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;opacity:0}
#hm span{position:absolute;width:8px;height:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
#hm span:nth-child(1){left:0;top:4px;transform:rotate(45deg)}
#hm span:nth-child(2){right:0;top:4px;transform:rotate(-45deg)}
#hm span:nth-child(3){left:0;bottom:4px;transform:rotate(-45deg)}
#hm span:nth-child(4){right:0;bottom:4px;transform:rotate(45deg)}
#hm.show{animation:hmA .2s ease-out}
#hm.crit span{background:var(--accent)}
#hm.kill span{background:var(--danger);width:11px;height:3px}
@keyframes hmA{0%{opacity:1;transform:translate(-50%,-50%) scale(.75)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}

/* top centre: wave */
#tc{position:absolute;left:50%;top:10px;transform:translateX(-50%);text-align:center;line-height:1;padding:6px 28px 8px;
  background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0));text-shadow:0 1px 3px rgba(0,0,0,.9)}
.tc-k,.tr-k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#wl{font:800 40px/1 var(--disp);margin-top:2px}
#eLeft{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--dim);margin-top:4px;text-transform:uppercase}
#eLeft b{color:var(--text);font-weight:500}
/* top right: score + kill feed */
#tr{position:absolute;right:24px;top:18px;text-align:right;line-height:1}
#sl{font:700 26px/1 var(--disp);margin-top:3px;font-variant-numeric:tabular-nums}
#kf{position:absolute;right:24px;top:72px;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.kfi{display:flex;align-items:center;gap:8px;padding:5px 10px;background:rgba(10,11,12,.72);font:600 13px/1 var(--body);
  animation:kfA .18s ease-out;text-shadow:none}
.kfi img{height:13px;width:auto;opacity:.95}
.kfi .kf-you{color:var(--accent)}
.kfi .kf-hs{font:500 10px/1 var(--mono);color:var(--dim);letter-spacing:.08em}
@keyframes kfA{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
/* boss bar */
#bbar{position:absolute;left:50%;top:86px;transform:translateX(-50%);width:min(560px,60vw);display:none}
#bbar.show{display:block}
.bb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
#bname{font:700 18px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
#bphase{font:500 11px/1 var(--mono);color:var(--danger);letter-spacing:.1em;text-transform:uppercase}
#bhpbg{height:6px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#bhp{height:100%;background:var(--danger);transition:width .15s}

/* bottom left: money, health, armour, lives */
#bl{position:absolute;left:24px;bottom:22px}
#money{font:700 22px/1 var(--disp);color:var(--money);margin-bottom:8px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.vit-row{display:flex;align-items:flex-end;gap:12px}
#hpNum{font:800 52px/.82 var(--disp);font-variant-numeric:tabular-nums;min-width:74px}
#hpNum.mid{color:var(--accent)}#hpNum.low{color:var(--danger)}
.vit-bars{width:190px;display:flex;flex-direction:column;gap:4px;padding-bottom:2px}
.hp-bar{height:8px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hp-bar i{display:block;height:100%;width:100%;background:var(--text);transition:width .12s}
.hp-bar.mid i{background:var(--accent)}.hp-bar.low i{background:var(--danger)}
/* protection rows (helmet, vest): icon + pips, bone → red as they wear, Minecraft-style */
#prot{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.pr{display:flex;align-items:center;gap:7px;height:18px;--pc:#ece8df}
.pr .pi{width:18px;height:18px;flex:none;overflow:visible}
.pr .pf{fill:var(--pc);fill-opacity:.22;stroke:var(--pc);stroke-width:1.5;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.pr .pl2{fill:none;stroke:var(--pc);stroke-width:1.2;stroke-linecap:round;opacity:.7}
.pr .ck{display:none;fill:none;stroke:#120808;stroke-width:1.6;stroke-linecap:round}
.pr .pips{display:flex;gap:2px}
.pr .pips i{width:13px;height:8px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);position:relative;overflow:hidden;transform:skewX(-14deg)}
.pr .pips i::after{content:'';position:absolute;inset:0;width:var(--f,0%);background:var(--pc)}
.pr .pl{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#e5483b}
.pr.none .pf{fill-opacity:0;stroke:rgba(236,232,223,.28)}.pr.none .pl2{stroke:rgba(236,232,223,.18)}
.pr.broken .pf{fill:#7a2a24;fill-opacity:.9;stroke:#a8362c}.pr.broken .pl2{opacity:0}.pr.broken .ck{display:block}
.pr.crit .pi,.pr.crit .pips{animation:prPulse .5s ease-in-out infinite alternate}
@keyframes prPulse{from{opacity:1}to{opacity:.35}}
.pr.hit .pi{animation:prHit .2s ease-out}.pr.hit .pf{animation:prHitC .2s ease-out}
@keyframes prHit{0%{transform:scale(1.3)}100%{transform:none}}
@keyframes prHitC{0%{fill:#fff;fill-opacity:.95;stroke:#fff}100%{}}
.gear.prot{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gcard.pc .pc-img{width:100%;height:84px;object-fit:contain;margin:-4px 0 6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.g-p s{color:var(--dim);font-weight:400;margin-left:4px}
#lives{display:flex;gap:4px;margin-top:9px}
.life{width:16px;height:4px;background:var(--text)}
.life.used{background:rgba(255,255,255,.18)}

/* bottom right: weapon, ammo, loadout strip */
#br{position:absolute;right:24px;bottom:22px;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
#ws{display:flex;gap:6px;margin-bottom:12px}
.wslot{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 6px;background:rgba(10,11,12,.5);opacity:.55;transition:opacity .12s}
.wslot img{height:14px;width:auto}
.wslot b{font:500 10px/1 var(--mono);color:var(--dim)}
.wslot.act{opacity:1;box-shadow:inset 0 -2px 0 var(--accent)}
.wpn{display:flex;align-items:center;gap:12px}
#wIcon{height:30px;width:auto;opacity:.95}
.wpn-tx{text-align:right;line-height:1}
#wn{font:700 20px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
#wmode{font:500 10px/1 var(--mono);color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
#al{display:flex;gap:6px;align-items:baseline;margin-top:4px}
#ac{font:800 56px/.9 var(--disp);font-variant-numeric:tabular-nums}
#ac.low{color:var(--danger)}
#ar{font:600 20px/1 var(--disp);color:var(--dim);font-variant-numeric:tabular-nums}
#reloadBar{width:150px;height:3px;background:rgba(255,255,255,.12);margin-top:6px;opacity:0;transition:opacity .15s}
#reloadBar.on{opacity:1}
#reloadFill{height:100%;background:var(--accent);width:0%}

/* centre messages */
#notice{position:absolute;left:50%;top:63%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.nt{font:600 15px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--text);padding:6px 13px;background:rgba(10,11,12,.66);white-space:nowrap;
  animation:ntIn .18s ease-out;transition:opacity .3s}
.nt.out{opacity:0}
@keyframes ntIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#immune{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--armor);opacity:0;transition:opacity .3s}
#inter{position:absolute;left:50%;top:84px;transform:translateX(-50%);text-align:center;display:none;padding:10px 26px 12px;
  background:rgba(10,11,12,.62);text-shadow:none}
#inter.show{display:block}
#inter .it-k{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--money);text-transform:uppercase}
#inter .it-t{font:700 26px/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;margin:4px 0 8px}
#inter .it-t b{color:var(--money);font-variant-numeric:tabular-nums;font-weight:700}
#inter .it-h{font:500 12px/1 var(--body);color:var(--dim)}
#prompt{position:absolute;left:50%;top:60%;transform:translateX(-50%);font:600 16px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;background:rgba(10,11,12,.7);color:var(--text);display:none;text-shadow:none}
#prompt.show{display:block}
#prompt.locked{color:var(--danger)}
#wp{position:absolute;transform:translate(-50%,-100%);text-align:center;display:none;color:var(--money);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
#wp.show{display:block}
#wp .wp-ic{width:10px;height:10px;margin:0 auto 5px;border:2px solid var(--money);transform:rotate(45deg)}

#dv{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:12;
  background:radial-gradient(ellipse at center,rgba(150,0,0,0) 45%,rgba(110,8,4,.55) 100%);transition:opacity .08s}
#slowv{position:fixed;inset:0;pointer-events:none;z-index:11;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
#slowv.on{opacity:1}
#banner{position:fixed;left:50%;top:24%;transform:translate(-50%,-50%);font:800 54px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);opacity:0;z-index:13;text-shadow:0 2px 10px rgba(0,0,0,.7);pointer-events:none;white-space:nowrap}
#banner.show{animation:bnr 2.3s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bnr{0%{opacity:0;transform:translate(-50%,-46%)}12%{opacity:1;transform:translate(-50%,-50%)}78%{opacity:1}100%{opacity:0}}
#bossTitle{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;opacity:0;z-index:20;pointer-events:none}
#bossTitle .bkt{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--danger);text-transform:uppercase;margin-bottom:10px}
#bossTitle .bnm{font:800 68px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.8)}
#bossTitle.show{animation:bossA 2.4s ease-out forwards}
@keyframes bossA{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* ── damage direction + threat warnings (ring of wedges around the crosshair) ── */
#dmgDir,#threats{position:absolute;left:50%;top:50%;width:0;height:0}
.dd,.tw{position:absolute;left:0;top:0;width:0;height:0}
.dd i{position:absolute;left:calc(var(--w) / -2);top:calc(-1 * var(--r));width:var(--w);height:34px;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(229,72,59,0) 46%,rgba(229,72,59,.95) 50%,rgba(229,72,59,.85) 62%,rgba(229,72,59,0) 76%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.dd{animation:ddA 1.7s ease-out forwards}
.dd.boom i{background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(240,162,59,0) 46%,rgba(240,162,59,.95) 50%,rgba(240,162,59,.85) 62%,rgba(240,162,59,0) 76%)}
@keyframes ddA{0%{opacity:1}55%{opacity:.9}100%{opacity:0}}
.tw i{position:absolute;left:-16px;top:calc(-1 * var(--r));width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;
  border-bottom:20px solid var(--c,#f0a23b);opacity:.95;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.tw.aim i{animation:twP .5s ease-in-out infinite alternate}
.tw.near i{border-bottom-color:rgba(236,232,223,.85);transform:scale(.8)}
.tw .tl{position:absolute;left:-60px;width:120px;top:calc(-1 * var(--r) + 24px);text-align:center;font:500 10px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c,#f0a23b)}
@keyframes twP{from{opacity:.45}to{opacity:1}}

/* sniper scope */
#scope{position:fixed;inset:0;pointer-events:none;z-index:9;display:none;
  background:radial-gradient(circle at center,rgba(0,0,0,0) 0,rgba(0,0,0,0) 37vh,rgba(0,0,0,.55) 37.6vh,#000 38.5vh)}
#scope.on{display:block}
#scope i{position:absolute;background:#0a0a0a}
#scope .h{left:calc(50% - 38vh);width:76vh;top:50%;height:1px;margin-top:-.5px}
#scope .v{top:12vh;height:76vh;left:50%;width:1px;margin-left:-.5px}
#scope .hl,#scope .hr{top:50%;height:3px;margin-top:-1.5px;width:24vh}
#scope .hl{left:calc(50% - 38vh)}#scope .hr{right:calc(50% - 38vh)}
#scope .vb{left:50%;width:3px;margin-left:-1.5px;top:calc(50% + 14vh);height:24vh}
#scope b{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#d0281a}

/* ════════════════ OVERLAYS / CARDS ════════════════ */
.overlay{position:fixed;inset:0;display:none;place-items:center;z-index:30;background:rgba(6,7,8,.78)}
.overlay.show{display:grid}
.card{text-align:left;padding:30px 34px;min-width:min(440px,92vw);max-width:820px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.card.wide{max-width:900px}
.card-k{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.card-k.red{color:var(--danger)}
.card h2{font:800 34px/1.05 var(--disp);letter-spacing:.02em;text-transform:uppercase;margin-bottom:22px}
.card .btn-row{justify-content:flex-start}
.card-p{font:400 14px/1.6 var(--body);color:var(--dim);margin-bottom:16px;max-width:560px}
.card-list{font:400 14px/1.7 var(--body);color:var(--text);margin:0 0 20px 20px}
.stats{display:flex;gap:34px;margin-bottom:24px}
.stats .s{display:flex;flex-direction:column;gap:4px}
.stats .s span{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.stats .s b{font:800 34px/1 var(--disp);font-variant-numeric:tabular-nums}
.mod-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mod-card{padding:18px 16px 20px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .12s,background .12s}
.mod-card:hover{box-shadow:inset 0 0 0 1px var(--accent);background:rgba(240,162,59,.06)}
.mod-card .mk{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--mute);margin-bottom:12px}
.mod-card .mn{font:700 22px/1.05 var(--disp);text-transform:uppercase;margin-bottom:8px}
.mod-card .mdesc{font:400 13px/1.45 var(--body);color:var(--dim)}

/* settings */
.set-card{min-width:min(560px,92vw)}
.set-grid{display:grid;grid-template-columns:1fr 200px 56px;gap:14px 16px;align-items:center;margin-bottom:24px}
.set-grid label{font:500 14px/1 var(--body);color:var(--text)}
.set-grid output{font:500 12px/1 var(--mono);color:var(--accent);text-align:right}
.set-grid input[type=range]{width:100%;accent-color:var(--accent)}
.set-grid input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);justify-self:start}
.set-grid select{grid-column:span 2;background:#17181a;color:var(--text);border:1px solid var(--line2);padding:7px 8px;font:500 13px var(--body)}

/* ════════════════ MAIN MENU (live 3D scene behind) ════════════════ */
#menu{background:none;place-items:stretch;display:none}
#menu.show{display:block}
.mn-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.55) 26%,rgba(5,6,7,0) 52%,rgba(5,6,7,.5) 100%),
             linear-gradient(180deg,rgba(5,6,7,.85) 0,rgba(5,6,7,0) 16%,rgba(5,6,7,0) 78%,rgba(5,6,7,.9) 100%)}
.mn-grain{display:none}
.mn-top{position:absolute;left:clamp(28px,5vw,80px);right:clamp(28px,5vw,80px);top:30px;display:flex;justify-content:space-between;align-items:flex-start}
.mn-logo b{display:block;font:800 44px/.9 var(--disp);letter-spacing:.2em;margin-right:-.2em}
.mn-logo span{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line2);font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.mn-status{display:flex;align-items:center;gap:10px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding-top:6px}
.mn-dot{width:6px;height:6px;border-radius:50%;background:var(--money)}
.mn-sep{width:1px;height:10px;background:var(--line2)}
.mn-nav{position:absolute;left:clamp(28px,5vw,80px);bottom:78px;display:flex;flex-direction:column;align-items:flex-start;width:min(360px,80vw)}
.mn-i{position:relative;display:flex;align-items:baseline;gap:16px;width:100%;background:none;color:var(--dim);text-align:left;padding:9px 0 9px 18px;border-radius:0;
  font:700 30px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;transition:color .12s,padding .12s}
.mn-i i{font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--mute);font-style:normal;width:16px}
.mn-i em{font:500 9px/1 var(--mono);letter-spacing:.14em;color:var(--mute);font-style:normal;text-transform:uppercase}
.mn-i::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--accent);transform:translateY(-50%);transition:height .12s}
.mn-i:hover{background:none;color:var(--text)}
.mn-i.sel{color:var(--text);padding-left:26px}.mn-i.sel::before{height:26px}
.mn-pane{position:absolute;right:clamp(28px,5vw,80px);bottom:78px;width:min(430px,44vw);padding:24px 26px 22px;display:none;
  background:rgba(8,9,10,.86);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 0 var(--accent)}
.mn-pane.show{display:block}
.mp-k{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 9px}
.mp-maps{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px}
.map-card{padding:11px 12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background .12s}
.map-card b{display:block;font:700 19px/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.map-card span{display:block;margin-top:6px;font:500 10px/1.2 var(--mono);color:var(--dim)}
.map-card:hover{background:rgba(255,255,255,.08)}
.map-card.sel{background:rgba(240,162,59,.1);box-shadow:inset 0 0 0 1px var(--accent)}
.mp-t{font:800 36px/1 var(--disp);text-transform:uppercase;margin-bottom:8px}
.mp-d{font:400 13px/1.55 var(--body);color:var(--dim);margin-bottom:18px}
.mp-note{font:400 12px/1.45 var(--body);color:var(--dim);margin-top:8px}
.mp-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mp-row .mp-k{margin-bottom:0}
.tog{flex:none;width:44px;height:24px;padding:0;border-radius:12px;background:rgba(255,255,255,.12);position:relative}
.tog i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:left .12s,background .12s}
.tog:hover{background:rgba(255,255,255,.18)}
.tog.on{background:var(--accent)}.tog.on i{left:23px;background:var(--accent-ink)}
.mp-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.mp-best span{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:6px}
.mp-best b{font:700 24px/1 var(--disp);font-variant-numeric:tabular-nums}
.mn-play{font-size:22px;padding:15px 34px;letter-spacing:.08em}
.mn-play[disabled]{background:rgba(255,255,255,.08);color:var(--dim)}
.mp-list div{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font:600 15px/1 var(--body);color:var(--dim)}
.mp-list span{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mn-foot{position:absolute;left:clamp(28px,5vw,80px);right:clamp(28px,5vw,80px);bottom:28px;display:flex;justify-content:space-between;
  font:500 11px/1 var(--mono);color:var(--mute);letter-spacing:.06em;padding-top:14px;border-top:1px solid var(--line)}
.mn-controls{position:absolute;right:clamp(28px,5vw,80px);bottom:78px;width:min(520px,50vw);padding:22px 24px;z-index:2;
  background:rgba(8,9,10,.94);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 0 var(--accent);display:none}
.mn-controls.show{display:block}
.mc-t{font:800 24px/1 var(--disp);text-transform:uppercase;margin-bottom:14px}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.keys div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font:400 13px/1 var(--body);color:var(--dim)}
.keys b{font:500 12px/1 var(--mono);color:var(--text);white-space:nowrap}
@media (max-width:860px){.mn-pane,.mn-controls{position:static;width:auto;margin:120px 20px 0}.mn-nav{position:static;margin:16px 20px}.mn-i{font-size:22px}.mn-foot{display:none}#menu{overflow:auto}}
/* ════════════════ STAGE 3 HUD ADDITIONS ════════════════ */
#money{font:700 26px/1 var(--disp);color:var(--money);margin:3px 0 10px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#sl{font-size:20px}
#kf{top:112px}
#stance{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:9px;min-height:10px}
#stance.prot{color:var(--armor)}
#nades{display:flex;gap:6px;margin-bottom:8px}
.nd{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 5px;background:rgba(10,11,12,.5);font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nd b{font:700 15px/1 var(--disp);color:var(--text)}.nd.out{opacity:.4}
.nd kbd{min-width:16px;padding:2px 4px;font-size:10px}
#eLeft .mut{display:block;margin-top:5px;color:var(--accent)}
#flashv{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:14}
#clickResume{position:fixed;left:50%;top:62%;transform:translateX(-50%);z-index:20;display:none;pointer-events:none;
  padding:9px 16px;background:rgba(10,11,12,.8);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
#clickResume.show{display:block}
#hunt{position:absolute;inset:0;pointer-events:none}
.hm-mark{position:absolute;transform:translate(-50%,-50%);display:none;text-align:center}
.hm-mark i{display:block;width:9px;height:9px;margin:0 auto 4px;border:1.5px solid var(--danger);transform:rotate(45deg)}
.hm-mark span{font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--danger);text-shadow:0 1px 2px #000}
.kfi .kf-how{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.btn-col{display:flex;flex-direction:column;gap:8px;min-width:260px}.btn-col button{text-align:left}
.att{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.att-k{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.att-row{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:start;margin-bottom:6px}
.att-s{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:9px}
.att-o{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.att-b{display:block;text-align:left;padding:7px 9px;background:rgba(255,255,255,.04);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);border-radius:0;letter-spacing:0;text-transform:none}
.att-b b{display:block;font:600 12px/1.1 var(--body)}
.att-b i{display:block;font:400 10px/1.3 var(--body);color:var(--dim);font-style:normal;margin:3px 0 4px}
.att-b em{font:500 10px/1 var(--mono);color:var(--money);font-style:normal}
.att-b.own em{color:var(--dim)}
.att-b.on{box-shadow:inset 0 0 0 1px var(--accent);background:rgba(240,162,59,.09)}.att-b.on em{color:var(--accent)}
.att-b:hover{background:rgba(255,255,255,.09);color:var(--text)}
.att-b[disabled]{opacity:.45;cursor:default}.att-b[disabled] em{color:var(--danger)}
.att-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:400 12px/1.4 var(--body);color:var(--dim)}
.arm-side{overflow-y:auto}

/* ════════════════ ARMORY ════════════════ */
#armory{background:rgba(6,7,8,.82)}
.arm{width:min(1240px,96vw);height:min(780px,94vh);display:flex;flex-direction:column;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.arm-top{display:flex;align-items:center;gap:30px;padding:0 24px;border-bottom:1px solid var(--line);min-height:64px}
.arm-title{font:800 32px/1 var(--disp);text-transform:uppercase}
.arm-tabs{display:flex;gap:2px;align-self:stretch}
.arm-tab{background:none;color:var(--dim);padding:0 18px;font-size:16px;border-radius:0;box-shadow:inset 0 -2px 0 transparent}
.arm-tab:hover{background:rgba(255,255,255,.04);color:var(--text)}
.arm-tab.sel{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.arm-meta{display:flex;gap:26px;margin-left:auto}
.arm-meta div{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.arm-meta span{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.arm-meta b{font:700 22px/1 var(--disp);font-variant-numeric:tabular-nums}
.arm-meta .cash b{color:var(--money);font-size:28px}
.arm-body{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0}
.arm-main{padding:18px 20px;overflow:auto}
.arm-side{border-left:1px solid var(--line);overflow:auto;background:rgba(0,0,0,.18)}
.arm-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-top:1px solid var(--line)}
.arm-hint{font:400 12px/1 var(--body);color:var(--dim)}
.arm-foot button{padding:11px 22px;font-size:14px}
/* weapon columns (CS layout) with Valorant-style tiles */
.wcols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.wcol-k{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.wt{position:relative;height:clamp(150px,25vh,230px);margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .1s,background .1s;overflow:hidden}
.wt:hover{box-shadow:inset 0 0 0 1px var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.wt.sel{box-shadow:inset 0 0 0 2px var(--text)}
.wt.eq{box-shadow:inset 0 0 0 1px var(--accent)}
.wt.sel.eq{box-shadow:inset 0 0 0 2px var(--accent)}
.wt .wt-key{position:absolute;left:8px;top:8px;font:500 11px/1 var(--mono);color:var(--dim)}
.wt .wt-state{position:absolute;right:8px;top:8px;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.wt.eq .wt-state{color:var(--accent)}
.wt img{position:absolute;left:8%;right:8%;top:24px;width:84%;height:calc(100% - 66px);object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.wt .wt-n{position:absolute;left:10px;bottom:9px;font:700 19px/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.wt .wt-p{position:absolute;right:10px;bottom:10px;font:600 15px/1 var(--disp);color:var(--money);font-variant-numeric:tabular-nums}
.wt .wt-p.poor{color:var(--danger)}
.wt .wt-p.own{color:var(--dim);font:500 11px/1 var(--mono)}
.wt.locked img{opacity:.5}
/* detail panel */
.wd{padding:18px 20px}
.wd-img{height:120px;display:grid;place-items:center;margin:-4px -6px 8px}
.wd-img img{max-width:100%;max-height:120px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.wd-k{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.wd-n{font:800 34px/1 var(--disp);text-transform:uppercase;margin:4px 0 6px}
.wd-b{font:400 13px/1.45 var(--body);color:var(--dim);margin-bottom:14px}
.wd-t{width:100%;border-collapse:collapse;margin-bottom:16px}
.wd-t td{padding:6px 0;border-bottom:1px solid var(--line);font:400 13px/1.2 var(--body);color:var(--dim)}
.wd-t td:last-child{text-align:right;font:500 13px/1.2 var(--mono);color:var(--text)}
.wd-t td small{color:var(--mute);font-size:11px}
.wd-acts{display:flex;gap:8px}
.wd-acts button{flex:1;padding:12px 8px;font-size:14px}
/* gear & augments */
.sec-k{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin:2px 0 10px}
.gear{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gcard{display:flex;flex-direction:column;gap:10px;padding:16px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line)}
.gcard .g-top{display:flex;justify-content:space-between;align-items:baseline}
.gcard .g-n{font:700 22px/1 var(--disp);text-transform:uppercase}
.gcard .g-p{font:600 18px/1 var(--disp);color:var(--money)}
.gcard .g-d{font:400 13px/1.45 var(--body);color:var(--dim);flex:1}
.gcard .g-m{height:4px;background:rgba(255,255,255,.08)}
.gcard .g-m i{display:block;height:100%;background:var(--c,var(--text))}
.gcard button{align-self:flex-start;padding:10px 18px;font-size:14px}
.aug-hero{display:flex;gap:22px;align-items:center;padding:22px;background:rgba(240,162,59,.06);box-shadow:inset 0 0 0 1px rgba(240,162,59,.35);margin-bottom:22px}
.aug-hero .a-n{font:800 30px/1 var(--disp);text-transform:uppercase}
.aug-hero .a-d{font:400 14px/1.45 var(--body);color:var(--dim);margin-top:6px}
.aug-hero button{margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 14px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;padding:7px 10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
/* side panel when not showing a weapon */
.sp{padding:18px 20px}
.sp-k{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin:18px 0 8px}
.sp-k:first-child{margin-top:0}
.lw{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font:600 16px/1 var(--disp);text-transform:uppercase}
.lw small{font:500 12px/1 var(--mono);color:var(--dim)}
.lw.eq span{color:var(--accent)}
@media (max-width:900px){.arm-body{grid-template-columns:1fr}.arm-side{display:none}.wcols{grid-template-columns:repeat(2,1fr)}.arm-meta{gap:14px}}

.seg{display:flex;gap:2px}
.seg>div{flex:1;text-align:center;padding:10px 6px;font:700 16px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--dim);transition:background .12s,color .12s}
.seg>div:hover{background:rgba(255,255,255,.1);color:var(--text)}
.seg>div.sel{background:var(--text);color:var(--ink)}
.seg{margin-bottom:0}

/* ════════════════ STAGE 4 ════════════════ */
#tc{background:rgba(10,11,12,.62);padding:7px 26px 9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#minimap{position:absolute;left:18px;top:18px;width:176px;height:176px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.45);background:#141618}
#fps{position:absolute;left:18px;top:200px;font:500 11px/1 var(--mono);color:var(--dim);display:none}
#ammoHint{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);font:600 13px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);padding:5px 10px;background:rgba(10,11,12,.55);opacity:0;transition:opacity .15s;white-space:nowrap}
#ammoHint.show{opacity:1}#ammoHint.warn{color:var(--danger)}
#ammoHint kbd{margin-right:6px}
#tip{position:absolute;left:50%;bottom:180px;transform:translateX(-50%);max-width:min(620px,80vw);padding:10px 16px;background:rgba(10,11,12,.8);
  box-shadow:inset 3px 0 0 var(--accent);font:400 14px/1.45 var(--body);color:var(--text);opacity:0;transition:opacity .3s;text-align:left}
#tip.show{opacity:1}
#tip kbd{margin:0 2px}
.wt:hover{background:rgba(255,255,255,.07)}
.wd-att{width:100%;margin-top:6px}
.wd-acts{flex-wrap:wrap}
.at-guns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.at-g{display:flex;flex-direction:column;align-items:center;gap:4px;width:118px;padding:8px 6px;background:rgba(255,255,255,.04);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);border-radius:0;text-transform:none;letter-spacing:0}
.at-g img{width:100%;height:38px;object-fit:contain}
.at-g span{font:700 15px/1 var(--disp);text-transform:uppercase}.at-g small{font:500 10px/1 var(--mono);color:var(--dim)}
.at-g:hover{background:rgba(255,255,255,.09);color:var(--text)}
.at-g.sel{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(240,162,59,.08)}
.at-body{display:grid;grid-template-columns:1fr 290px;gap:18px;align-items:start}
.at-row{display:grid;grid-template-columns:86px 1fr;gap:10px;margin-bottom:10px}
.at-s{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:12px}
.at-o{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.at-b{display:block;text-align:left;padding:10px 12px;background:rgba(255,255,255,.04);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);border-radius:0;letter-spacing:0;text-transform:none;min-height:74px}
.at-b b{display:block;font:700 17px/1.05 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.at-b i{display:block;font:400 12px/1.35 var(--body);color:var(--dim);font-style:normal;margin:4px 0 6px}
.at-b em{font:500 11px/1 var(--mono);color:var(--money);font-style:normal}
.at-b.own em{color:var(--dim)}
.at-b.on{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(240,162,59,.09)}.at-b.on em{color:var(--accent)}
.at-b:hover{background:rgba(255,255,255,.09);color:var(--text)}
.at-b[disabled]{opacity:.45;cursor:default}.at-b[disabled] em{color:var(--danger)}
.at-stats{padding:14px 16px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--line)}
.at-k{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.at-stats tr.up td:last-child span{color:var(--money)}.at-stats tr.down td:last-child span{color:var(--danger)}
.at-note2{font:400 12px/1.4 var(--body);color:var(--dim);margin-top:10px}
@media (max-width:1100px){.at-body{grid-template-columns:1fr}}
.set-card{max-height:88vh;overflow-y:auto}
.set-gpu{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font:400 13px/1.4 var(--body);color:var(--dim)}
.set-gpu b{font:500 12px/1.4 var(--mono);color:var(--text);text-align:right}.set-gpu b.bad{color:var(--danger)}
.set-sub{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.set-help{font:400 12px/1.4 var(--body);color:var(--dim)}
.binds{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;margin:12px 0 14px}
.bind{display:grid;grid-template-columns:1fr 84px 84px;gap:6px;align-items:center;font:400 13px/1.2 var(--body);color:var(--dim)}
.kb{padding:6px 4px;font:500 12px/1 var(--mono);background:rgba(255,255,255,.06);color:var(--text);border-radius:0;letter-spacing:0;text-transform:none}
.kb:hover{background:rgba(255,255,255,.12);color:var(--text)}.kb.wait{background:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){.binds{grid-template-columns:1fr}}
.stats2{flex-wrap:wrap;gap:16px 30px;padding-top:16px;border-top:1px solid var(--line)}
.stats2 .s b{font-size:22px}
.mn-warn{display:none;position:absolute;left:clamp(28px,5vw,80px);top:112px;max-width:520px;padding:10px 14px;background:rgba(229,72,59,.14);
  box-shadow:inset 3px 0 0 var(--danger);font:400 13px/1.45 var(--body);color:var(--text)}
.mp-list.cred div{display:block;padding:10px 0}.mp-list.cred b{display:block;color:var(--text);margin-bottom:5px}.mp-list.cred span{display:block;text-transform:none;letter-spacing:.02em;line-height:1.5;color:var(--dim)}

/* ════════════════ CO-OP (Build 0.9) ════════════════ */
/* menu pane */
.mp-name,.mp-join{display:flex;gap:6px;margin-bottom:12px}
.mp-name input,.mp-join input,#lbChatIn{flex:1;min-width:0;font:600 16px/1 var(--body);color:var(--text);background:rgba(255,255,255,.05);border:0;
  box-shadow:inset 0 0 0 1px var(--line2);padding:11px 12px;outline:none;user-select:text;-webkit-user-select:text}
.mp-name input:focus,.mp-join input:focus,#lbChatIn:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.mp-join input{font:700 22px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;width:150px;flex:none}
.mp-join .mn-play{flex:1;padding:12px 18px;font-size:19px}
.mp-name .ghost{padding:10px 16px}
.mp-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.mp-split .mn-play{width:100%;margin-top:12px;font-size:19px;padding:13px 16px}
.mp-split .mp-join{margin-top:12px}
.mp-err{display:none;font:500 12px/1.4 var(--body);color:var(--danger);margin:-4px 0 12px}
.mp-err.show{display:block}
.mn-i em{font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--money);font-style:normal;margin-left:10px}
/* lobby */
#lobby{background:rgba(6,7,8,.72);z-index:31}
.lb{width:min(1100px,94vw);max-height:92vh;display:flex;flex-direction:column;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 0 var(--accent)}
.lb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:22px 28px 18px;border-bottom:1px solid var(--line)}
.lb-code span{display:block;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:8px 0 6px}
.lb-code b{font:700 48px/1 var(--mono);letter-spacing:.24em;color:var(--accent)}
.lb-share{display:flex;gap:8px}.lb-share button{padding:11px 16px}
.lb-body{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;flex:1;min-height:0}
.lb-col{padding:20px 24px;border-right:1px solid var(--line);overflow:auto}.lb-col:last-child{border-right:0}
.lb-list{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.lb-p{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);min-height:46px}
.lb-p i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--mute)}
.lb-p b{font:700 18px/1 var(--disp);letter-spacing:.02em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-p em{font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:3px 6px;font-style:normal}
.lb-p em.you{background:rgba(255,255,255,.12);color:var(--text)}
.lb-p span{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lb-p span.rdy{color:var(--money)}
.lb-p .kick{padding:6px 10px;font-size:11px}
.lb-p.off{opacity:.55}.lb-p.empty{opacity:.4}.lb-p.empty b{font-weight:500;color:var(--mute)}
.lseg{display:flex;gap:4px;margin-bottom:16px}
.lseg button{flex:1;padding:10px 6px;font-size:14px;background:rgba(255,255,255,.04);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.lseg button:hover{background:rgba(255,255,255,.08);color:var(--text)}
.lseg button.sel{background:rgba(240,162,59,.12);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.lseg button[disabled]{cursor:default}.lseg button[disabled]:not(.sel){background:rgba(255,255,255,.02);color:var(--mute)}
.lseg button.sel[disabled]{background:rgba(240,162,59,.12);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.lb-chat{display:flex;flex-direction:column}
.lb-msgs{flex:1;min-height:180px;max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding-right:4px}
.lb-msgs .cl{font:400 14px/1.4 var(--body);color:var(--text)}
.lb-msgs .cl b{margin-right:7px;font-weight:700}
.lb-msgs .cl.q span{color:var(--accent)}
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;border-top:1px solid var(--line)}
#lbStatus{font:500 12px/1.3 var(--body);color:var(--dim)}
@media (max-width:900px){.lb-body{grid-template-columns:1fr}.lb-col{border-right:0;border-bottom:1px solid var(--line)}.lb-top{flex-direction:column;align-items:flex-start}}
/* teammates in the world */
#nameplates,#pings{position:absolute;inset:0;pointer-events:none}
.np{position:absolute;transform:translate(-50%,-100%);text-align:center;display:none;--pc:#ece8df;white-space:nowrap}
.np b{display:block;font:700 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--pc);text-shadow:0 1px 3px rgba(0,0,0,.95)}
.np i{display:block;width:54px;height:4px;margin:4px auto 0;background:rgba(0,0,0,.6);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.np i s{display:block;height:100%;background:var(--pc);text-decoration:none}
.np em{display:block;margin-top:5px;font:600 11px/1 var(--mono);letter-spacing:.06em;color:#fff;font-style:normal;text-shadow:0 1px 3px #000}
.np.down b{color:#ff6b5e}.np.down i s{background:#e5483b}
.np.down em{padding:4px 7px;background:rgba(229,72,59,.85);display:inline-block;text-shadow:none}
.pg{position:absolute;transform:translate(-50%,-100%);text-align:center;--pc:#f0a23b;white-space:nowrap}
.pg i{display:block;width:14px;height:14px;margin:0 auto 5px;border:2px solid var(--pc);transform:rotate(45deg);background:rgba(0,0,0,.35);animation:pgPulse .9s ease-out infinite}
.pg.enemy i{border-color:#e5483b;box-shadow:0 0 0 2px var(--pc)}
.pg b{display:block;font:700 13px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--pc);text-shadow:0 1px 3px #000}
.pg.enemy b{color:#ff6b5e}
.pg span{display:block;margin-top:3px;font:500 10px/1 var(--mono);color:#fff;text-shadow:0 1px 3px #000}
@keyframes pgPulse{0%{transform:rotate(45deg) scale(1.5);opacity:.4}100%{transform:rotate(45deg) scale(1);opacity:1}}
/* squad panel, team feed, chat */
#teamList{position:absolute;left:18px;top:206px;display:flex;flex-direction:column;gap:5px;width:176px}
.tm{--pc:#ece8df;padding:6px 9px 7px;background:rgba(10,11,12,.58);box-shadow:inset 3px 0 0 var(--pc);display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center}
.tm b{font:700 14px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm span{font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tm i{grid-column:1 / -1;height:4px;background:rgba(0,0,0,.55)}.tm i s{display:block;height:100%;background:var(--pc);text-decoration:none;transition:width .2s}
.tm.down span{color:#ff6b5e}.tm.down i s{background:#e5483b}.tm.out{opacity:.5}
#teamFeed{position:absolute;left:18px;top:440px;display:flex;flex-direction:column;gap:4px;max-width:340px}
.tf{--pc:#ece8df;font:600 14px/1.25 var(--body);padding:5px 10px;background:rgba(10,11,12,.66);box-shadow:inset 3px 0 0 var(--pc);color:var(--text);
  animation:ntIn .18s ease-out;transition:opacity .45s}
.tf.bad{box-shadow:inset 3px 0 0 #e5483b}.tf.good{box-shadow:inset 3px 0 0 var(--money)}
.tf.out{opacity:0}
#chatLog{position:absolute;left:24px;bottom:150px;display:flex;flex-direction:column;gap:3px;max-width:min(520px,44vw)}
#chatLog .cl{font:500 15px/1.3 var(--body);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95);transition:opacity .6s}
#chatLog .cl b{margin-right:7px;font-weight:700}
#chatLog .cl.q span{color:var(--accent)}
#chatLog .cl.out{opacity:0}
#chatIn{position:absolute;left:24px;bottom:118px;width:min(520px,44vw);display:none;align-items:center;gap:8px;padding:6px 8px;background:rgba(10,11,12,.82);box-shadow:inset 0 0 0 1px var(--accent);pointer-events:auto}
#chatIn.show{display:flex}
#chatIn span{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#chatIn input{flex:1;background:none;border:0;outline:none;color:#fff;font:500 15px/1.3 var(--body);user-select:text;-webkit-user-select:text}
/* ready-up, wave stats, revive, downed */
#readyBox{position:absolute;left:50%;top:206px;transform:translateX(-50%);display:none;text-align:center;padding:8px 18px 9px;background:rgba(10,11,12,.62);text-shadow:none}
#readyBox.show{display:block}
.rb-n{font:700 24px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}.rb-n b{color:var(--money)}
.rb-h{margin-top:6px;font:500 12px/1 var(--body);color:var(--dim)}
.rb-cd{margin-left:8px;color:var(--accent);font-weight:600}
#waveStats{position:absolute;right:24px;top:300px;width:300px;display:none;padding:12px 14px;background:rgba(10,11,12,.74);box-shadow:inset 0 2px 0 var(--money);text-shadow:none}
#waveStats.show{display:block;animation:ntIn .25s ease-out}
.ws-k{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--money);margin-bottom:9px}
.ws-r{display:grid;grid-template-columns:10px 1fr auto;gap:2px 9px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.ws-r i{width:8px;height:8px;border-radius:50%}
.ws-r b{font:700 16px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-r span{font:700 22px/1 var(--disp);font-variant-numeric:tabular-nums}
.ws-r em{grid-column:2 / -1;font:500 10px/1 var(--mono);letter-spacing:.06em;color:var(--dim);font-style:normal}
.ws-r.top span{color:var(--accent)}
#reviveBar{position:absolute;left:50%;top:58%;transform:translateX(-50%);width:260px;text-align:center;display:none}
#reviveBar.show{display:block}
#reviveBar span{display:block;font:600 15px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
#reviveBar i{display:block;height:6px;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#reviveBar s{display:block;height:100%;width:0;background:var(--money);text-decoration:none}
#downV,#outV{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at center,rgba(120,10,6,0) 30%,rgba(120,10,6,.55) 100%);text-shadow:0 2px 6px rgba(0,0,0,.9)}
#outV{background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 30%,rgba(0,0,0,.7) 100%)}
#downV.show,#outV.show{display:flex}
.dv-k{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#ff8a7f}
.dv-t{font:800 92px/1 var(--disp);margin:8px 0 4px;color:#fff}.dv-t span{font-size:32px;color:var(--dim);margin-left:4px}
.dv-h{font:500 15px/1.4 var(--body);color:var(--text);max-width:440px;margin-top:8px}
#outV .dv-k{font-size:16px;color:var(--text)}
/* quick-chat wheel */
#wheel{position:absolute;left:50%;top:50%;width:380px;height:380px;transform:translate(-50%,-50%);display:none;border-radius:50%;
  background:radial-gradient(circle,rgba(10,11,12,.15) 0 22%,rgba(10,11,12,.72) 23% 70%,rgba(10,11,12,0) 71%)}
#wheel.show{display:block}
.wh-o{position:absolute;transform:translate(-50%,-50%);font:700 15px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  padding:7px 10px;text-align:center;white-space:nowrap}
.wh-o.sel{color:var(--accent-ink);background:var(--accent)}
.wh-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* armory squad cards */
.gear.team{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tmc{--pc:#ece8df;box-shadow:inset 3px 0 0 var(--pc),inset 0 0 0 1px var(--line)}
.tmc .g-n i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pc);margin-right:8px;vertical-align:middle}
.tm-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tm-b button{padding:9px 12px;font-size:13px}
/* end of run */
.re{max-width:980px}
#reMvp i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.re-table{margin:4px 0 22px}
.rt-h,.rt-r{display:grid;grid-template-columns:2fr repeat(7,1fr);gap:8px;padding:9px 6px;align-items:center}
.rt-h{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line2)}
.rt-r{font:600 16px/1 var(--body);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rt-r span:first-child{font:700 18px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.rt-r i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.rt-r em{font:600 9px/1 var(--mono);letter-spacing:.14em;color:var(--accent-ink);background:var(--accent);padding:3px 5px;font-style:normal;margin-left:6px;vertical-align:middle}
.rt-r.mvp{background:rgba(240,162,59,.08)}
.re-wait{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--dim);align-self:center}