:root{--bg: #0b0d0e;--panel: #14181a;--panel2: #1c2124;--border: #2d3539;--accent: #c7a96b;--accent2: #8fb3a0;--text: #d8d4c8;--muted: #8a8f88;--danger: #c4413a;--ok: #6fb36a;--font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: "JetBrains Mono", Consolas, "Courier New", monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}#app{position:relative;width:100vw;height:100vh}canvas{display:block}button{font-family:inherit}.screen{position:absolute;inset:0;display:flex;flex-direction:column}.btn{background:linear-gradient(180deg,#2a3236,#1a2023);color:var(--text);border:1px solid var(--border);padding:10px 18px;cursor:pointer;text-transform:uppercase;letter-spacing:.12em;font-size:12px;transition:all .12s}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.primary{background:linear-gradient(180deg,#8f7a45,#5f4f2a);color:#fff;border-color:#c7a96b}.btn.primary:hover{filter:brightness(1.15);color:#fff}.btn.danger{border-color:var(--danger);color:var(--danger)}.btn:disabled{opacity:.4;cursor:default}.btn.small{padding:5px 10px;font-size:10px}.menu{justify-content:center;align-items:center;background:radial-gradient(ellipse at center,#1b2226,#07090a 80%)}.menu h1{font-size:64px;letter-spacing:.3em;margin:0;color:var(--accent);text-shadow:0 0 30px rgba(199,169,107,.3);font-weight:300}.menu h1 span{color:var(--text);font-weight:700}.menu .sub{color:var(--muted);letter-spacing:.4em;font-size:12px;margin-bottom:40px;text-transform:uppercase}.menu .stack{display:flex;flex-direction:column;gap:10px;width:300px}.menu .stats{margin-top:30px;color:var(--muted);font-size:12px;font-family:var(--mono);text-align:center;line-height:1.6}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar h2{margin:0;font-size:16px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-weight:500}.topbar .tabs{display:flex;gap:6px}.topbar .tabs .btn.active{border-color:var(--accent);color:var(--accent);background:#2a2a22}.body{flex:1;display:flex;min-height:0}.panel{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:12px}.panel h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#333}.grid{display:grid;gap:1px;background:#0a0c0d;border:1px solid var(--border);padding:1px;position:relative}.grid .cell{background:#1a1f22;border:1px solid #22292c}.grid-wrap{position:relative;display:inline-block}.gitem{position:absolute;background:linear-gradient(135deg,#2b3338,#1e2427);border:1px solid #4a5559;color:var(--text);font-size:10px;padding:3px;overflow:hidden;cursor:pointer;user-select:none;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .1s}.gitem:hover{border-color:var(--accent);z-index:2}.gitem.selected{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2) inset}.gitem .nm{font-weight:600;line-height:1.1}.gitem .ct{font-family:var(--mono);font-size:9px;color:var(--accent);align-self:flex-end}.gitem.weapon{background:linear-gradient(135deg,#33302a,#211f1a)}.gitem.ammo{background:linear-gradient(135deg,#2e3a2c,#1d251b)}.gitem.med{background:linear-gradient(135deg,#3b2a2a,#241a1a)}.gitem.armor{background:linear-gradient(135deg,#2a3038,#1a1e24)}.gitem.attachment{background:linear-gradient(135deg,#30303a,#1e1e24)}.gitem.loot{background:linear-gradient(135deg,#3a3625,#242216)}.gitem.rare{border-color:#8f6bc7}.gitem.drag{opacity:.6;pointer-events:none}.itemcard{background:var(--panel2);border:1px solid var(--border);padding:8px;margin:4px 0;cursor:pointer;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}.itemcard:hover{border-color:var(--accent)}.itemcard.equipped{border-color:var(--accent2)}.itemcard.incompatible{opacity:.35;cursor:not-allowed}.itemcard .meta{color:var(--muted);font-family:var(--mono);font-size:10px}.itemcard .tag{font-size:9px;text-transform:uppercase;padding:1px 5px;border:1px solid var(--border);color:var(--muted)}.gs-slots{display:flex;flex-direction:column;gap:4px}.gs-slot{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--border);padding:7px 10px;cursor:pointer;font-size:12px}.gs-slot:hover{border-color:var(--accent)}.gs-slot.active{border-color:var(--accent);background:#2a2a22}.gs-slot .sl{text-transform:uppercase;color:var(--muted);font-size:10px;letter-spacing:.1em}.gs-slot .val{color:var(--text)}.gs-slot .val.empty{color:#555;font-style:italic}.gs-slot.locked{opacity:.4}.preview{flex:1;position:relative;background:radial-gradient(ellipse at center,#1e2427,#0b0d0e)}.preview canvas{position:absolute;inset:0}.statbars{position:absolute;left:16px;bottom:16px;width:300px;background:#0c0e10d9;border:1px solid var(--border);padding:12px;font-size:11px}.statrow{display:grid;grid-template-columns:90px 1fr 60px;gap:8px;align-items:center;margin:4px 0}.statrow .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.bar{height:6px;background:#222;position:relative}.bar>div{height:100%;background:var(--accent);transition:width .2s}.bar.inv>div{background:var(--danger)}.statrow .num{font-family:var(--mono);text-align:right;color:var(--text)}.statrow .num .d{font-size:9px;margin-left:3px}.statrow .num .d.good{color:var(--ok)}.statrow .num .d.bad{color:var(--danger)}.gunname{position:absolute;top:16px;left:16px;font-size:22px;letter-spacing:.1em;color:var(--text);text-shadow:0 2px 6px #000}.gunname small{display:block;font-size:11px;color:var(--muted);letter-spacing:.3em}.hint{position:absolute;right:16px;bottom:16px;color:var(--muted);font-size:11px;text-align:right;line-height:1.6}.vest{position:relative;width:340px;height:440px;margin:20px auto;background:#1b2024;border:1px solid var(--border)}.vest .torso{position:absolute;left:60px;top:30px;width:220px;height:380px;background:linear-gradient(180deg,#3a4238,#262c25);border-radius:60px 60px 20px 20px;border:2px solid #4b5548}.vest .torso.light{background:linear-gradient(180deg,#4f5a3f,#333b2a)}.vest .torso.medium{background:linear-gradient(180deg,#3a4238,#262c25)}.vest .torso.heavy{background:linear-gradient(180deg,#2e3330,#1c2020)}.vslot{position:absolute;border:1px dashed #6a7466;background:#00000040;display:flex;align-items:center;justify-content:center;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:pointer;transition:all .12s;text-align:center}.vslot:hover{border-color:var(--accent);color:var(--accent)}.vslot.filled{border-style:solid;background:#2a3230;color:var(--text)}.vslot.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.vslot.plate{background:#141e2899}.vslot.plate.filled{background:linear-gradient(180deg,#2b3844,#1a222a);border-color:#5d7a94}.vslot.disabled{opacity:.3;cursor:not-allowed;border-style:dotted}.vslot small{display:block;font-size:9px;color:var(--accent);text-transform:none;letter-spacing:0}.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono)}.hud .crosshair{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#fffc;border-radius:50%}.hud .crosshair.ads{opacity:0}.hud .hit{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px;opacity:0}.hud .hit:before,.hud .hit:after{content:"";position:absolute;left:50%;top:50%;width:24px;height:2px;background:#fff;margin:-1px -12px}.hud .hit:before{transform:rotate(45deg)}.hud .hit:after{transform:rotate(-45deg)}.hud .hit.show{opacity:1;transition:none}.hud .hit.kill:before,.hud .hit.kill:after{background:var(--danger)}.hud .vitals{position:absolute;left:20px;bottom:20px;width:260px}.hud .vitals .row{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:11px}.hud .vitals .lbl{width:30px;color:var(--muted)}.hud .vitals .bar{flex:1;height:8px;background:#0009;border:1px solid #333}.hud .vitals .bar>div{height:100%}.hud .hp>div{background:linear-gradient(90deg,#b03b3b,#d8654e)}.hud .st>div{background:linear-gradient(90deg,#5a8f5a,#8fcf7a)}.hud .vitals .num{width:60px;text-align:right}.hud .weapon{position:absolute;right:20px;bottom:20px;text-align:right}.hud .weapon .ammo{font-size:36px;color:#fff;text-shadow:0 0 10px #000;line-height:1}.hud .weapon .ammo span{font-size:14px;color:var(--muted)}.hud .weapon .nm{font-size:12px;color:var(--accent);letter-spacing:.15em;text-transform:uppercase}.hud .weapon .mode{font-size:10px;color:var(--muted)}.hud .hotbar{position:absolute;left:50%;bottom:20px;transform:translate(-50%);display:flex;gap:6px}.hud .hotbar .hb{width:64px;height:44px;background:#0000008c;border:1px solid #3a4145;font-size:9px;padding:3px;position:relative;color:var(--text);overflow:hidden}.hud .hotbar .hb .k{position:absolute;top:2px;left:4px;color:var(--muted)}.hud .hotbar .hb .c{position:absolute;bottom:2px;right:4px;color:var(--accent)}.hud .hotbar .hb .n{position:absolute;bottom:12px;left:4px;right:4px;text-align:center;font-size:9px}.hud .hotbar .hb.active{border-color:var(--accent);background:#3c321eb3}.hud .top{position:absolute;top:14px;left:20px;font-size:11px;color:var(--muted);line-height:1.7}.hud .top b{color:var(--text)}.hud .top .warn{color:var(--danger)}.hud .compass{position:absolute;top:14px;left:50%;transform:translate(-50%);width:400px;height:26px;overflow:hidden;border-bottom:1px solid #444;background:linear-gradient(90deg,transparent,rgba(0,0,0,.5),transparent)}.hud .compass .strip{position:absolute;top:0;white-space:nowrap;height:26px}.hud .compass .tick{position:absolute;top:0;font-size:10px;color:#bbb;transform:translate(-50%)}.hud .compass .tick.major{color:#fff;font-weight:700;font-size:12px}.hud .compass .mk{position:absolute;top:12px;font-size:9px;padding:0 3px;background:#0009;transform:translate(-50%)}.hud .compass .mk.ex{color:#6fd39a}.hud .compass .mk.ex.closed{color:#d38f6f}.hud .center{position:absolute;left:50%;top:58%;transform:translate(-50%);text-align:center;font-size:12px;color:#fff;text-shadow:0 0 6px #000}.hud .center .prompt{background:#0009;padding:4px 12px;border:1px solid #444}.hud .center .prompt b{color:var(--accent)}.hud .channel{width:260px;height:8px;background:#000000b3;border:1px solid #555;margin:8px auto 0}.hud .channel>div{height:100%;background:var(--accent2)}.hud .dmg{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(180,20,20,.5) 100%);opacity:0;transition:opacity .3s}.hud .lowhp{position:absolute;inset:0;box-shadow:inset 0 0 120px #a0000080;opacity:0}.hud .msgs{position:absolute;right:20px;top:60px;text-align:right;font-size:11px}.hud .msgs div{margin:2px 0;background:#00000080;padding:2px 8px;animation:fadeout 6s forwards}@keyframes fadeout{0%{opacity:1}80%{opacity:1}to{opacity:0}}.hud .status{position:absolute;left:20px;bottom:110px;font-size:10px;color:var(--muted)}.hud .status span{display:inline-block;margin-right:8px}.hud .status .bleed{color:var(--danger)}.hud .status .heavy{color:#e0a04a}.hud .extract-marker{position:absolute;transform:translate(-50%,-100%);font-size:10px;color:#6fd39a;text-shadow:0 0 4px #000;text-align:center;white-space:nowrap}.hud .extract-marker.closed{color:#d38f6f}.hud .extract-marker:before{content:"▼";display:block;font-size:12px}.overlay{position:absolute;inset:0;background:#060809e6;display:flex;flex-direction:column;align-items:center;justify-content:center}.overlay h2{letter-spacing:.4em;font-weight:300;text-transform:uppercase;color:var(--accent);font-size:32px;margin:0 0 6px}.overlay .sub{color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:30px}.overlay .row{display:flex;gap:12px}.lootscreen{position:absolute;inset:0;background:#080a0bf0;display:flex;padding:30px;gap:30px}.lootscreen .col{flex:1;display:flex;flex-direction:column;min-width:0}.lootscreen h3{margin:0 0 8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.lootscreen .list{overflow-y:auto;flex:1}.lootscreen .list::-webkit-scrollbar{width:8px}.lootscreen .list::-webkit-scrollbar-thumb{background:#333}.lootscreen .foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}.results{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1b2226,#07090a 80%);display:flex;flex-direction:column;align-items:center;justify-content:center}.results h1{font-size:48px;letter-spacing:.4em;font-weight:300;margin:0}.results h1.win{color:var(--ok)}.results h1.lose{color:var(--danger)}.results .box{background:var(--panel);border:1px solid var(--border);padding:20px 30px;margin:20px 0;min-width:480px;font-family:var(--mono);font-size:12px}.results .box .r{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid #222}.results .box .r:last-child{border:none}.results .loot{max-height:200px;overflow-y:auto;margin-top:10px}.results .loot div{color:var(--accent2)}.results .loot div.lost{color:var(--danger);text-decoration:line-through}.kv{font-family:var(--mono);font-size:11px;color:var(--muted)}.kv b{color:var(--text)}.notice{background:#2a2418;border:1px solid #5a4d2a;color:var(--accent);padding:8px;font-size:11px;margin:6px 0}.tooltip{position:fixed;pointer-events:none;background:#0a0c0df5;border:1px solid var(--border);padding:8px 10px;font-size:11px;z-index:100;max-width:260px;font-family:var(--mono);color:var(--text)}.tooltip b{color:var(--accent)}.tooltip .d{color:var(--muted)}.loadout-summary{padding:12px}.loadout-summary .slotrow{display:flex;justify-content:space-between;background:var(--panel2);border:1px solid var(--border);padding:8px 10px;margin:4px 0;font-size:12px;cursor:pointer}.loadout-summary .slotrow:hover{border-color:var(--accent)}.loadout-summary .slotrow .k{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.weightmeter{margin:10px 0;font-size:11px}.weightmeter .bar{height:8px;background:#222;margin-top:4px}.weightmeter .bar>div{height:100%;background:var(--accent2)}.weightmeter .bar>div.over{background:var(--danger)}.pause{position:absolute;inset:0;background:#050708cc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.pause h2{letter-spacing:.4em;color:var(--accent);font-weight:300}.controls-list{font-family:var(--mono);font-size:11px;color:var(--muted);columns:2;column-gap:30px;margin-top:20px;line-height:1.8}.controls-list b{color:var(--text)}