:root{
  --ink:#0a0c09; --ink2:#141811; --olive:#97a56a; --olive2:#5b6a3e; --olive3:#323b24; --bone:#e9ecdf; --amber:#e0a14a; --red:#c9462f; --star:#e6c15a;
  --font:"Bahnschrift","Arial Narrow","Franklin Gothic Medium",Impact,sans-serif;
}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;background:#0a0c09;overflow:hidden;font-family:var(--font);color:var(--bone)}
#app{position:fixed;inset:0}
#app canvas{display:block;width:100%;height:100%}
.ov{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:50;text-align:center}
.ov.on{display:flex}
#loading{background:#0a0c09;z-index:90}
#loading .lg{font-size:54px;letter-spacing:.3em;font-weight:700;color:var(--olive);text-indent:.3em}
.bar{width:280px;height:4px;background:#1c2217}
.bar i{display:block;height:100%;width:0;background:var(--olive);transition:width .15s}
.tag{letter-spacing:.22em;font-size:13px;opacity:.75;text-transform:uppercase}
.big{font:700 22px var(--font);letter-spacing:.3em;text-indent:.3em;color:var(--ink);background:var(--olive);border:0;padding:15px 64px;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:.12s}
.big:hover{background:var(--bone);transform:translateY(-1px)}
.keys{margin-top:10px;font-size:12px;letter-spacing:.12em;line-height:2;opacity:.82;text-transform:uppercase}
.keys b{color:var(--olive)}
.ptitle{font-size:44px;font-weight:700;letter-spacing:.35em;text-indent:.35em;color:var(--bone)}
#pause{background:rgba(8,10,7,.72);z-index:70}

/* ---------------- HUD */
#hud{position:fixed;inset:0;pointer-events:none;display:none;z-index:20}
#hud.on{display:block}
.box{background:rgba(10,12,9,.62);border:1px solid rgba(233,236,223,.22);backdrop-filter:blur(2px)}
#mapWrap{position:absolute;left:24px;bottom:26px;width:210px}
#mapBox{position:relative;width:210px;height:210px;border:2px solid rgba(233,236,223,.8);border-radius:6px;overflow:hidden;box-shadow:0 0 0 3px rgba(10,12,9,.7),0 8px 24px rgba(0,0,0,.5)}
#map{width:100%;height:100%;display:block}
.bars{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.bars .b{position:relative;height:13px;background:rgba(10,12,9,.7);border:1px solid rgba(233,236,223,.5)}
.bars .b i{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .15s}
.bars .hp i{background:linear-gradient(#b5c97f,#6f8a3d)}
.bars .ar i{background:linear-gradient(#cfd4c4,#8b9484)}
.bars .b span{position:absolute;right:5px;top:-1px;font-size:10px;letter-spacing:.1em;color:var(--ink);font-weight:700;mix-blend-mode:normal}
#topR{position:absolute;right:26px;top:22px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#credits{font-size:30px;font-weight:700;letter-spacing:.08em;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.6);color:var(--bone)}
#credits small{font-size:12px;letter-spacing:.3em;opacity:.7;margin-right:8px}
#stars{display:flex;gap:4px}
#stars i{width:30px;height:30px;display:block;background:rgba(10,12,9,.55);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.45}
#stars i.on{background:var(--star);opacity:1;filter:drop-shadow(0 0 6px rgba(230,193,90,.7))}
#stars.flash i.on{animation:fl .5s steps(2) infinite}
@keyframes fl{50%{opacity:.25}}
#zone{font-size:13px;letter-spacing:.3em;padding:5px 12px;text-transform:uppercase}
#zone.safe{color:var(--ink);background:var(--olive);border-color:var(--olive)}
#weapon{position:absolute;right:26px;bottom:26px;min-width:230px;padding:12px 18px;text-align:right}
#weapon .wn{font-size:13px;letter-spacing:.3em;text-transform:uppercase;opacity:.75}
#weapon .am{font-size:44px;font-weight:700;line-height:1.05;letter-spacing:.04em;text-shadow:0 2px 0 #000}
#weapon .am small{font-size:20px;opacity:.65;font-weight:600}
#weapon .am.low{color:var(--amber)} #weapon .am.zero{color:var(--red)}
#weapon .rl{font-size:12px;letter-spacing:.25em;color:var(--amber);height:14px}
#speed{position:absolute;right:26px;bottom:128px;font-size:26px;font-weight:700;letter-spacing:.06em;text-shadow:0 2px 0 #000;display:none}
#speed small{font-size:12px;opacity:.7;letter-spacing:.25em;margin-left:6px}
#cross{position:absolute;left:50%;top:50%;width:0;height:0;display:none}
#cross i{position:absolute;background:var(--bone);box-shadow:0 0 0 1px rgba(0,0,0,.65)}
#cross .l{width:8px;height:2px;top:-1px}#cross .r{width:8px;height:2px;top:-1px}
#cross .t{width:2px;height:8px;left:-1px}#cross .b2{width:2px;height:8px;left:-1px}
#cross .d{width:3px;height:3px;left:-1.5px;top:-1.5px;border-radius:50%}
#hit{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .2s}
#hit::before,#hit::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:3px;margin:-1.5px 0 0 -13px;background:var(--bone);box-shadow:0 0 0 1px #000;transform:rotate(45deg)}
#hit::after{transform:rotate(-45deg)}
#hit.kill::before,#hit.kill::after{background:var(--red)}
#prompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);font-size:18px;letter-spacing:.2em;padding:8px 18px;text-transform:uppercase;display:none}
#prompt b{background:var(--olive);color:var(--ink);padding:1px 8px;margin-right:8px}
#feed{position:absolute;left:50%;top:70px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
#feed div{font-size:16px;letter-spacing:.24em;text-transform:uppercase;padding:6px 16px;animation:fin .2s,fout .5s 3.2s forwards}
@keyframes fin{from{opacity:0;transform:translateY(-8px)}}
@keyframes fout{to{opacity:0}}
#street{position:absolute;left:24px;bottom:260px;font-size:13px;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 1px 0 #000;opacity:.85}
#dead{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:radial-gradient(ellipse at 50% 50%,rgba(40,8,6,.2),rgba(20,4,3,.82));z-index:30;pointer-events:none}
#dead.on{display:flex}
#dead .t{font-size:84px;font-weight:700;letter-spacing:.2em;text-indent:.2em;color:#d6574a;text-shadow:0 4px 0 #000}
#dead .s{letter-spacing:.3em;font-size:14px;opacity:.8}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:25;transition:opacity .35s}
#debug{position:fixed;left:8px;top:6px;font:11px/1.35 monospace;color:#cfd8b0;background:rgba(0,0,0,.55);padding:4px 8px;z-index:60;display:none;white-space:pre}
#bigmap{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,10,7,.82);z-index:40;pointer-events:none}
#bigmap.on{display:flex}
#bigmap canvas{width:min(86vh,86vw);height:min(86vh,86vw);border:2px solid var(--bone);background:#0a0c09}

/* ---------------- main menu (left column over the live fly-over) */
#menu{background:linear-gradient(90deg,rgba(7,9,6,.94) 0,rgba(7,9,6,.78) 22%,rgba(7,9,6,0) 48%);z-index:70;align-items:flex-start;justify-content:flex-start;text-align:left;gap:0}
.mside{width:420px;height:100%;padding:0 0 0 64px;display:flex;flex-direction:column;justify-content:center}
#menuMain{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mlogo{width:104px;mix-blend-mode:screen;margin-bottom:2px;filter:drop-shadow(0 6px 18px #000)}
.mtitle{font-size:56px;font-weight:700;letter-spacing:.22em;color:var(--bone);line-height:1;text-shadow:0 4px 0 #000}
.msub{font-size:12px;letter-spacing:.34em;color:var(--olive);margin:2px 0 22px}
.mbtn{font:700 19px var(--font);letter-spacing:.3em;color:var(--bone);background:rgba(10,12,9,.55);border:0;border-left:4px solid var(--olive2);padding:13px 30px 13px 22px;min-width:270px;text-align:left;cursor:pointer;transition:.12s;backdrop-filter:blur(2px)}
.mbtn:hover{background:var(--olive);color:var(--ink);border-left-color:var(--bone);padding-left:30px}
.mbtn.small{min-width:0;font-size:14px;padding:10px 22px}
.mbtn.ghost{background:transparent}
.mkeys{margin-top:34px;font-size:11px;letter-spacing:.14em;line-height:2;opacity:.8;text-transform:uppercase}
.mkeys b{color:var(--olive)}
.panel{display:none;flex-direction:column;gap:14px;background:rgba(10,12,9,.82);border-left:4px solid var(--olive);padding:26px 30px;min-width:330px;backdrop-filter:blur(3px)}
.panel.on{display:flex}
.panel.wide{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:95;min-width:480px}
.ptitle2{font-size:26px;font-weight:700;letter-spacing:.28em;margin-bottom:6px}
.srow,.crow{display:flex;flex-direction:column;gap:6px}
.srow label,.crow label{font-size:11px;letter-spacing:.28em;opacity:.7}
.srow input[type=range]{width:300px;accent-color:#97a56a}
.srow b{font-size:13px;letter-spacing:.1em;margin-left:10px;color:var(--olive)}
.srow{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
.seg{display:flex;gap:2px}
.seg button{font:700 12px var(--font);letter-spacing:.18em;color:var(--bone);background:rgba(233,236,223,.1);border:0;padding:8px 14px;cursor:pointer}
.seg button.on{background:var(--olive);color:var(--ink)}
.sws{display:flex;gap:6px;flex-wrap:wrap;max-width:300px}
.sw{width:30px;height:30px;border:2px solid rgba(233,236,223,.25);cursor:pointer;padding:0}
.sw.on{border-color:var(--bone);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--olive)}
.brow{display:flex;gap:10px;margin-top:8px}
#pause .ptitle{font-size:34px;margin-bottom:10px}
#pause .panel{align-items:flex-start}
#fpsBadge{position:fixed;right:10px;top:6px;font:12px monospace;color:#cfd8b0;z-index:80;display:none}
/* ---------------- inventory + hotbar */
#inv{background:rgba(6,8,5,.72);z-index:80}
.invbox{background:rgba(12,15,11,.94);border:1px solid rgba(233,236,223,.25);border-top:4px solid var(--olive);padding:22px 28px 16px;min-width:880px}
.invhead{display:flex;justify-content:space-between;align-items:baseline;font-size:26px;font-weight:700;letter-spacing:.28em;margin-bottom:16px}
#invStats{display:flex;gap:26px;font-size:13px;letter-spacing:.2em;opacity:.9}
#invStats b{color:var(--olive);margin-left:6px}
.invcols{display:flex;gap:40px}
.invlab{font-size:11px;letter-spacing:.3em;opacity:.65;margin-bottom:8px}
.slots{display:flex;flex-direction:column;gap:6px}
.pack{display:grid;grid-template-columns:repeat(5,92px);gap:6px}
.cell{position:relative;background:rgba(233,236,223,.06);border:1px solid rgba(233,236,223,.16);min-height:62px;width:92px;cursor:pointer}
.cell:hover{border-color:var(--olive)}
.slots .cell{width:210px;min-height:56px}
.cell.cur{border-color:var(--olive);background:rgba(151,165,106,.14)}
.cell em{position:absolute;left:6px;top:3px;font-style:normal;font-size:12px;font-weight:700;color:var(--olive)}
.it{display:flex;flex-direction:column;justify-content:center;height:100%;padding:6px 8px 6px 24px;gap:1px}
.pack .it{padding-left:8px}
.it i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--olive)}
.it b{font-size:13px;letter-spacing:.1em}
.it span{font-size:10px;letter-spacing:.14em;opacity:.7}
.it.armor i{color:var(--amber)}
#invHeld{position:fixed;pointer-events:none;background:rgba(10,12,9,.95);border:1px solid var(--olive);min-width:120px;z-index:99;display:none}
#chat{position:fixed;left:24px;bottom:292px;width:380px;z-index:22;pointer-events:none;font-size:13px;letter-spacing:.04em;display:none}
#chat.off #chatLog,#chat.off #voice,#chat.off #chatIn{display:none}
#chatLog{max-height:150px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;opacity:.0;transition:opacity .3s;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}
#chat.recent #chatLog,#chat.typing #chatLog{opacity:1}
.cl{padding:2px 8px;background:rgba(10,12,9,.45);margin-top:2px}
.cl b{color:var(--olive);font-weight:700}.cl.ally b{color:#cfd2c4}.cl.sys{opacity:.75;font-style:italic}.cl.me b{color:var(--amber)}
#chatIn{display:none;width:100%;margin-top:4px;background:rgba(10,12,9,.85);border:1px solid var(--olive);color:var(--bone);font:700 14px var(--font);padding:7px 10px;outline:none;pointer-events:auto}
#chat.typing #chatIn{display:block}
#voice{display:flex;align-items:center;gap:8px;margin-top:6px;padding:5px 9px;background:rgba(10,12,9,.55);width:max-content;font-size:11px;letter-spacing:.18em}
#voice i{width:9px;height:9px;border-radius:50%;background:#555}#voice i.on{background:var(--olive)}#voice i.speak{background:#e0e8b0;box-shadow:0 0 8px #cfe08a}
#voice u{width:70px;height:5px;background:rgba(233,236,223,.15);text-decoration:none;display:block}#voice u b{display:block;height:100%;width:0;background:var(--olive)}
#chatHide{position:absolute;right:0;top:-18px;font:700 10px var(--font);letter-spacing:.2em;color:var(--bone);background:rgba(10,12,9,.6);border:1px solid rgba(233,236,223,.3);padding:2px 8px;cursor:pointer;pointer-events:auto;opacity:.7}
#chat.off #chatHide{opacity:.45}
#gangSel{position:fixed;inset:0;z-index:92;display:none;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(8,10,7,.82) 0,rgba(8,10,7,.96) 100%)}
#gangSel.on{display:flex}
#gangSel .gt{font-size:46px;font-weight:700;letter-spacing:.3em;text-indent:.3em}
#gangSel .gs{font-size:13px;letter-spacing:.3em;color:var(--olive);margin:6px 0 34px}
.gcards{display:flex;gap:26px}
.gcard{--gc:#97a56a;width:260px;padding:30px 26px 26px;background:rgba(14,17,12,.9);border:0;border-top:6px solid var(--gc);color:var(--bone);font-family:var(--font);text-align:left;cursor:pointer;transition:.14s;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.gcard:hover{background:var(--gc);color:#0a0c09;transform:translateY(-6px)}
.gcard .gn{font-size:27px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.gcard .gm{font-size:11px;letter-spacing:.28em;margin:4px 0 22px;opacity:.8}
.gcard .gsw{display:flex;gap:8px;margin-bottom:20px}.gcard .gsw i{width:46px;height:30px;background:var(--gc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.gcard:hover .gsw i{box-shadow:inset 0 0 0 2px rgba(0,0,0,.6)}
.gcard .gb{font-size:12px;letter-spacing:.24em;font-weight:700}
.shopbox{min-width:620px}
.shoplist{display:flex;flex-direction:column;gap:6px}
.shoprow{display:flex;justify-content:space-between;align-items:center;background:rgba(233,236,223,.06);border:1px solid rgba(233,236,223,.16);padding:12px 16px;cursor:pointer}
.shoprow:hover{border-color:var(--olive);background:rgba(151,165,106,.12)}
.shoprow b{display:block;font-size:15px;letter-spacing:.12em}.shoprow span{font-size:10px;letter-spacing:.2em;opacity:.65}
.shoprow em{font-style:normal;font-size:22px;font-weight:700;color:var(--olive)}
.shoprow.poor em{color:var(--red)}.shoprow.lock{opacity:.4;cursor:default}
.invhelp{margin-top:16px;font-size:10px;letter-spacing:.2em;opacity:.65}
.invhelp b{color:var(--olive)}
#hotbar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:6px}
#hotbar div{position:relative;width:96px;height:54px;background:rgba(10,12,9,.62);border:1px solid rgba(233,236,223,.22);padding:6px 8px;overflow:hidden}
#hotbar div.cur{border-color:var(--olive);background:rgba(151,165,106,.2)}
#hotbar em{position:absolute;right:6px;top:2px;font-style:normal;font-size:11px;font-weight:700;color:var(--olive)}
#hotbar b{display:block;font-size:12px;letter-spacing:.1em;margin-top:14px}
#hotbar span{font-size:9px;letter-spacing:.12em;opacity:.7}

#topbar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:120;display:flex;gap:26px;font:700 12px var(--font);letter-spacing:.28em;color:var(--bone);pointer-events:none;text-shadow:0 1px 3px #000}
#topbar span{background:rgba(10,12,9,.6);padding:5px 14px;border-bottom:2px solid var(--olive)}
#topbar b{color:var(--olive)}
#topbar a.xl{pointer-events:auto;color:var(--bone);text-decoration:none;background:rgba(10,12,9,.6);padding:5px 14px;border-bottom:2px solid var(--olive);cursor:pointer}
#topbar a.xl:hover{background:var(--olive);color:var(--ink)}#topbar a.xl:hover b{color:var(--ink)}