:root{--fg:#d8dcd0;--dim:#8a9084;--panel:rgba(14,17,15,.82);--edge:rgba(160,170,150,.28);--accent:#d9a441;--blue:#4f86c6;--red:#c65a4f;--green:#6fae5c;--warn:#e0803a}
*{box-sizing:border-box;margin:0;padding:0;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0d0c;color:var(--fg);font-family:"Rajdhani","Barlow Condensed","Bahnschrift","Arial Narrow","Segoe UI",Roboto,sans-serif;letter-spacing:.03em}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hud{position:fixed;inset:0;pointer-events:none;font-weight:600}
.hidden{display:none!important}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair i{position:absolute;background:rgba(235,240,225,.85);box-shadow:0 0 2px #000}
#crosshair .dot{width:2px;height:2px;left:-1px;top:-1px}
#crosshair .l{width:7px;height:1.5px;top:-.75px}#crosshair .r{width:7px;height:1.5px;top:-.75px}#crosshair .t{width:1.5px;height:7px;left:-.75px}#crosshair .b{width:1.5px;height:7px;left:-.75px}
#hitm{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .25s}
#hitm::before,#hitm::after{content:"";position:absolute;left:12px;top:-2px;width:2px;height:30px;background:#fff;transform:rotate(45deg);box-shadow:0 0 3px #000}
#hitm::after{transform:rotate(-45deg)}#hitm.head::before,#hitm.head::after{background:#ff4b3a}#hitm.kill::before,#hitm.kill::after{background:#ff4b3a;height:38px;top:-6px}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.85) 120%);opacity:0;transition:opacity .2s}
#lowhp{position:absolute;inset:0;box-shadow:inset 0 0 160px 40px rgba(170,0,0,.7);opacity:0}
#flash{position:absolute;inset:0;background:#fff;opacity:0}
#scope{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent 33vh,#000 33.3vh);}
#scope::before,#scope::after{content:"";position:absolute;background:#000}
#scope::before{left:50%;top:calc(50% - 33vh);width:1.5px;height:66vh;margin-left:-.75px}
#scope::after{top:50%;left:calc(50% - 33vh);height:1.5px;width:66vh;margin-top:-.75px}
#dmgring{position:absolute;left:50%;top:50%;width:0;height:0}
#dmgring i{position:absolute;width:140px;height:18px;margin:-9px 0 0 -70px;background:linear-gradient(90deg,transparent,rgba(220,30,20,.85),transparent);border-radius:50%;opacity:0}
.topbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);text-align:center;min-width:420px}
.scores{display:flex;gap:2px;justify-content:center;align-items:stretch}
.sc{padding:4px 18px;background:var(--panel);border-bottom:3px solid;min-width:104px;font-size:26px;line-height:1;position:relative}
.sc small{display:block;font-size:11px;color:var(--dim);letter-spacing:.2em;margin-bottom:2px}
.sc.blue{border-color:var(--blue)}.sc.red{border-color:var(--red)}.sc.green{border-color:var(--green)}.sc.lead{background:rgba(40,46,36,.92)}
.sc .bar{position:absolute;left:0;bottom:-3px;height:3px;background:#fff;opacity:.9}
.zline{margin-top:4px;background:var(--panel);padding:4px 10px;font-size:15px;display:inline-block}
.zline b{color:var(--accent)}
.hot{color:#ffb060;margin-top:2px;font-size:15px;text-shadow:0 0 6px #000}
.hot em{font-style:normal;background:#b3541a;color:#fff;padding:0 6px;margin-left:6px;font-size:13px}
#compass{position:absolute;top:118px;left:50%;transform:translateX(-50%);width:420px;height:20px;overflow:hidden;font-size:13px;color:var(--dim);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
#compass div{position:absolute;white-space:nowrap}
#compass::after{content:"";position:absolute;left:50%;top:0;width:1px;height:6px;background:var(--accent)}
.vitals{position:absolute;left:18px;bottom:18px;width:290px;text-shadow:0 0 4px #000}
.bar2{height:9px;background:rgba(0,0,0,.55);margin:4px 0;position:relative;border:1px solid rgba(255,255,255,.15)}
.bar2>i{display:block;height:100%;background:#cfd6c4;transition:width .15s}
.bar2.hp>i{background:#c9ccb8}.bar2.hp.low>i{background:#d24a3a}.bar2.st>i{background:#8fb3c6}.bar2.ar>i{background:#9a9a9a}
.vrow{display:flex;justify-content:space-between;font-size:15px;color:var(--dim)}
.vrow b{color:var(--fg)}
#wt.heavy{color:#e0803a}#wt.mid{color:#d9c25a}
.wpn{position:absolute;right:22px;bottom:18px;text-align:right;text-shadow:0 0 4px #000}
.wpn .name{font-size:18px;color:var(--dim)}.wpn .ammo{font-size:48px;line-height:1}.wpn .ammo small{font-size:22px;color:var(--dim)}
.wpn .meta{font-size:14px;color:var(--dim)}
.cash{position:absolute;right:22px;bottom:128px;font-size:24px;color:#cfe3a8;text-shadow:0 0 4px #000}
#popups{position:absolute;right:22px;bottom:160px;text-align:right;font-size:16px}
#popups div{animation:rise 2.2s forwards;color:#cfe3a8}#popups div.hot2{color:#ffb060}
@keyframes rise{0%{opacity:0;transform:translateY(8px)}10%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
.squad{position:absolute;left:18px;top:220px;font-size:14px;width:170px;text-shadow:0 0 4px #000}
.squad div{display:flex;align-items:center;gap:6px;margin:2px 0;color:#c9d0c0}
.squad i{display:block;width:44px;height:4px;background:rgba(255,255,255,.2)}.squad i b{display:block;height:100%;background:#cfd6c4}
.squad .down{color:#e0803a}.squad .dead{color:#666}
.mm{position:absolute;left:18px;top:14px;width:190px;height:190px;border:2px solid var(--edge);border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 10px #000}
.feed{position:absolute;right:16px;top:14px;width:360px;text-align:right;font-size:14px;text-shadow:0 0 3px #000}
.feed div{padding:2px 8px;margin:2px 0;background:rgba(0,0,0,.4);animation:fade 7s forwards}
@keyframes fade{0%{opacity:0}5%{opacity:1}85%{opacity:1}100%{opacity:0}}
#toasts{position:absolute;left:50%;top:26%;transform:translateX(-50%);text-align:center}
#toasts div{font-size:26px;letter-spacing:.18em;padding:6px 20px;margin:4px;background:rgba(0,0,0,.55);animation:fade 4s forwards;text-shadow:0 0 6px #000}
#toasts div.warn{color:#e0803a}#toasts div.info{color:#ffd9a0}#toasts div.big{font-size:44px;color:#ffb060;border-top:2px solid #ffb060;border-bottom:2px solid #ffb060;padding:10px 40px;animation-duration:6s}#toasts div.big small{display:block;font-size:20px;color:#fff;letter-spacing:.3em}
#prompt{position:absolute;left:50%;top:60%;transform:translateX(-50%);text-align:center;text-shadow:0 0 6px #000}
#prompt .t{font-size:22px}#prompt .t b{background:#fff;color:#000;padding:0 7px;margin-right:8px}#prompt .s{font-size:14px;color:var(--dim)}#prompt .l{font-size:14px;color:#cdd3c0;margin-top:2px}
.prog{width:160px;height:6px;background:rgba(0,0,0,.6);margin:6px auto;border:1px solid #fff4}.prog i{display:block;height:100%;background:#fff}
#vehhud{position:absolute;left:50%;bottom:34px;font-size:15px;transform:translateX(-50%);text-align:center;font-size:16px;text-shadow:0 0 4px #000}
#vehhud{background:rgba(0,0,0,.35);padding:6px 14px}#vehhud .vb{width:220px;height:8px;margin:4px auto;background:#0008;border:1px solid #fff3}#vehhud .vb i{display:block;height:100%;background:#cfd6c4}
#help{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:12px;color:#8a9084a0}
/* modal screens */
.screen{position:fixed;inset:0;display:none;background:rgba(6,8,7,.84);z-index:20;pointer-events:auto}
.screen.show{display:block}
.card{position:absolute;background:var(--panel);border:1px solid var(--edge);padding:14px;pointer-events:auto}
h1{font-size:64px;letter-spacing:.35em;font-weight:700;color:#e8e6d8}h2{font-size:22px;letter-spacing:.2em;color:var(--accent);margin-bottom:8px;font-weight:700}h3{font-size:15px;letter-spacing:.15em;color:var(--dim);margin:8px 0 4px;font-weight:600}
button,.btn{font-family:inherit;font-size:16px;letter-spacing:.12em;padding:7px 16px;background:#2a2f27;color:var(--fg);border:1px solid var(--edge);cursor:pointer;font-weight:600}
button:hover{background:#3b4234;border-color:var(--accent)}button.pri{background:#8c6a1f;border-color:#d9a441;color:#fff}button.pri:hover{background:#a88023}button:disabled{opacity:.4;cursor:default}
button.f-blue{border-color:var(--blue)}button.f-red{border-color:var(--red)}button.f-green{border-color:var(--green)}button.sel{outline:2px solid var(--accent);background:#3b4234}
#start .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(900px,92vw)}
#start p{color:var(--dim);margin:10px 0;font-size:17px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 24px;text-align:left;font-size:14px;color:#aab0a2;margin:16px auto;max-width:760px}.keys b{color:#fff;display:inline-block;min-width:70px}
.row{display:flex;gap:8px;align-items:center;justify-content:center;margin:10px 0}
input[type=range]{width:220px}
/* inventory */
#inv .panel{top:5vh;height:90vh;width:44vw;display:flex;flex-direction:column;overflow:hidden}
#inv .L{left:2vw}#inv .R{right:2vw}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.slot{min-height:62px;border:1px dashed var(--edge);padding:4px 6px;background:rgba(255,255,255,.03);font-size:13px;position:relative}
.slot>label{display:block;color:var(--dim);font-size:10px;letter-spacing:.15em}
.slot.over{outline:2px solid var(--accent)}
.list{border:1px solid var(--edge);padding:6px;min-height:84px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;background:rgba(0,0,0,.2)}
.list.over{outline:2px solid var(--accent)}
.item{padding:4px 8px;background:#2c3228;border:1px solid #556;border-left:4px solid #8a9a70;font-size:13px;cursor:grab;max-width:100%}
.item small{display:block;color:var(--dim);font-size:11px}
.item.sel{outline:2px solid var(--accent)}.item.w{border-left-color:#d9a441}.item.a{border-left-color:#5ab0c9}.item.m{border-left-color:#b0a070}.item.g{border-left-color:#7aa070}
.scroll{overflow:auto;flex:1}
.detail{border-top:1px solid var(--edge);padding-top:8px;min-height:140px;font-size:14px}
.detail .btns{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.detail button{padding:4px 10px;font-size:13px}
.attrow{display:flex;gap:6px;align-items:center;margin:2px 0;font-size:13px}.attrow span{width:70px;color:var(--dim)}
select{background:#222820;color:var(--fg);border:1px solid var(--edge);padding:2px 4px;font-family:inherit}
.wbar{height:8px;background:#0008;border:1px solid #fff3;margin:4px 0}.wbar i{display:block;height:100%;background:#9fb47a}
/* shop/deploy */
#deploy .top{position:absolute;left:2vw;right:2vw;top:2vh;display:flex;justify-content:space-between;align-items:center}
#deploy .mapcard{left:2vw;top:9vh;width:46vw;height:84vh}#deploy .shopcard{right:2vw;top:9vh;width:50vw;height:84vh;display:flex;flex-direction:column}
.tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}.tabs button{padding:4px 12px;font-size:14px}
.shoplist{overflow:auto;flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:start}
.shopitem{border:1px solid var(--edge);padding:6px 8px;background:rgba(255,255,255,.04);cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.shopitem:hover{border-color:var(--accent);background:rgba(217,164,65,.1)}.shopitem.off{opacity:.4}.shopitem b{color:#cfe3a8;white-space:nowrap}
.shopitem small{color:var(--dim);display:block}
#mapc{width:100%;height:calc(100% - 80px);background:#000;cursor:crosshair;display:block}
#bigmap .center{position:absolute;inset:4vh 6vw}
#bigmap canvas{width:100%;height:100%;background:#000;border:1px solid var(--edge)}
#build .card{left:50%;top:50%;transform:translate(-50%,-50%);min-width:420px}
#end .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.legend{font-size:12px;color:var(--dim)}
.tag{display:inline-block;padding:1px 6px;font-size:11px;background:#333;margin-left:4px;color:#ccc}
#start .center{max-height:96vh;overflow:auto}
@media (max-height:760px){h1{font-size:44px}#start p{font-size:14px;margin:6px 0}.keys{font-size:12px;margin:8px auto}.row{margin:6px 0}}
@media (max-height:520px){h1{font-size:30px}.keys{display:none}}
@media (max-width:900px){#inv .panel{width:48vw}.keys{grid-template-columns:repeat(2,1fr)}}

#settings .card,#setcard{left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:92vh;overflow:auto}
.sethead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.07);font-size:16px}
.setrow select{min-width:210px;font-size:15px;padding:4px}.setrow input[type=checkbox]{width:22px;height:22px;accent-color:#d9a441}
.rng{display:flex;align-items:center;gap:10px}.rng b{min-width:70px;text-align:right;color:#cfe3a8}
#crosshair[data-style=dot] i:not(.dot){display:none}#crosshair[data-style=off]{display:none!important}
#help[data-off="1"]{display:none!important}
#deploy .top{z-index:5}
#deploy .mapcard,#deploy .shopcard{top:70px;height:calc(100vh - 82px)}
@media (max-height:520px){#deploy .top h2{font-size:16px}#dcash{font-size:18px!important}}

#marks .tm{position:absolute;width:0;height:0;margin:-12px 0 0 -6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #7dff9a;filter:drop-shadow(0 0 2px #000);pointer-events:none}
#marks .mk{position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 0 4px #000;font-size:12px;letter-spacing:.08em;color:#fff}
#marks .mk i{display:block;width:16px;height:16px;margin:0 auto 2px;transform:rotate(45deg);border:2px solid #ff4b3a;background:rgba(255,75,58,.25);box-shadow:0 0 6px #000}
#marks .mk.pos i{border-color:#ffd24a;background:rgba(255,210,74,.25)}#marks .mk.veh i{border-radius:3px;border-color:#ff9a3a}
#marks .mk.off i{width:12px;height:12px}

#start{background:radial-gradient(ellipse at 20% 30%,rgba(60,50,25,.55),rgba(6,8,7,.93) 60%)}
.menu{position:absolute;inset:0;display:flex;gap:4vw;padding:6vh 5vw;align-items:stretch;overflow:auto}
.mleft{width:min(430px,92vw);display:flex;flex-direction:column;gap:8px}.mright{flex:1;display:flex;align-items:center;justify-content:center}.mcard{position:static;max-width:640px;width:100%}
.mlogo{display:flex;align-items:center;gap:12px}.mlogo h1{font-size:44px;letter-spacing:.14em}.mlogo h1 span{color:#d9a441}
.mprof{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--edge);padding:10px 12px;margin:6px 0}.mprof b{font-size:22px}
.lvl{width:46px;height:46px;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--accent)}
.xpbar{height:5px;background:#0008;margin-top:5px;width:220px}.xpbar i{display:block;height:100%;background:var(--accent);width:0}
button.mini{font-size:11px;padding:2px 8px}
.mb{display:block;text-align:left;width:100%;padding:11px 16px}.mb b{display:block;font-size:19px;letter-spacing:.14em}.mb small{display:block;font-size:12px;color:var(--dim);letter-spacing:.06em;font-weight:500}
#sub .card,#subcard{left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:92vh;overflow:auto}
.rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:10px 0}.rec div{border:1px solid var(--edge);padding:8px 10px;background:rgba(255,255,255,.03)}.rec small{display:block;color:var(--dim);font-size:11px;letter-spacing:.12em}.rec b{font-size:21px;color:#fff}
.kits{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.cred p{margin:8px 0;font-size:15px;color:#c9d0c0}
@media (max-width:900px){.menu{flex-direction:column}.mright{display:none}}