:root{--red:#e8352b;--red2:#bb0000;--green:#18a34a;--green2:#006600;--gold:#ffc83d;--ink:#f3efe6;--dim:#9a958a;--panel:rgba(12,10,9,.82);--line:rgba(255,200,61,.35);
--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--sans);user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
#game{position:fixed;inset:0;z-index:1}
#game canvas{display:block;width:100%;height:100%}
.hidden{display:none!important}
button{font-family:var(--sans);cursor:pointer}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-family:var(--mono)}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(160,0,0,.75) 100%);opacity:0;transition:opacity .15s}
#hitflash{position:absolute;inset:0;background:rgba(255,40,20,.25);opacity:0}
#flashOverlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 22vmin,rgba(0,0,0,.35) 60vmin);opacity:0;transition:opacity .2s}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair i{position:absolute;background:rgba(255,255,255,.92);box-shadow:0 0 2px #000}
#crosshair .t,#crosshair .b{width:2px;height:9px;left:-1px}
#crosshair .l,#crosshair .r{height:2px;width:9px;top:-1px}
#crosshair .dot{width:3px;height:3px;left:-1.5px;top:-1.5px;border-radius:50%}
#hitmarker{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0}
#hitmarker:before,#hitmarker:after{content:"";position:absolute;left:12px;top:-2px;width:2px;height:30px;background:#fff;transform:rotate(45deg);box-shadow:0 0 3px #000}
#hitmarker:after{transform:rotate(-45deg)}
#hitmarker.head:before,#hitmarker.head:after{background:var(--red)}
#hitmarker.pop{animation:hmpop .22s ease-out}
#hitmarker.kill{width:34px;height:34px;margin:-17px 0 0 -17px}
#hitmarker.kill:before,#hitmarker.kill:after{left:16px;height:38px;width:3px}
@keyframes hmpop{0%{transform:scale(1.7) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
#dmgdirs{position:absolute;left:50%;top:50%;width:0;height:0}
.dmgarc{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .08s}
.dmgarc:before{content:"";position:absolute;left:-90px;top:-185px;width:180px;height:48px;background:radial-gradient(ellipse at 50% 100%,rgba(255,40,25,.95),rgba(255,30,20,.35) 45%,transparent 72%);clip-path:polygon(0 100%,8% 55%,30% 22%,50% 12%,70% 22%,92% 55%,100% 100%,50% 70%);filter:drop-shadow(0 0 6px rgba(255,0,0,.6))}
#hud{transition:opacity .5s}#hud.dim{opacity:0}
/* ---------- CINEMATIC ---------- */
#introcard{position:fixed;inset:0;z-index:25;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 calc(17vh + var(--safe-b)) calc(7vw + var(--safe-l))}
#introcard .ic{opacity:0;transform:translateX(-40px);transition:all .7s cubic-bezier(.2,.8,.2,1)}
#introcard.in .ic{opacity:1;transform:none}
#introcard.in .ic:nth-child(2){transition-delay:.12s}#introcard.in .ic:nth-child(3){transition-delay:.28s}#introcard.in .ic:nth-child(4){transition-delay:.42s}#introcard.in .ic:nth-child(5){transition-delay:.6s}
#introcard.out{opacity:0;transition:opacity .5s}
#icNum{font-family:var(--mono);color:var(--gold);letter-spacing:.5em;font-size:clamp(12px,1.8vw,16px)}
#icName{font-weight:900;font-size:clamp(38px,8vw,92px);letter-spacing:.08em;line-height:.95;color:#fff;text-shadow:0 0 30px rgba(0,0,0,.6),0 3px 0 var(--red2)}
#icBar{width:clamp(120px,22vw,260px);height:4px;margin:12px 0;background:linear-gradient(90deg,var(--red2) 0 33%,#fff 33% 36%,#000 36% 64%,#fff 64% 67%,var(--green2) 67%)}
#icTod{font-family:var(--mono);color:#e8e2d4;letter-spacing:.2em;font-size:clamp(12px,1.7vw,15px)}
#icObj{font-family:var(--mono);color:var(--gold);margin-top:8px;font-size:clamp(12px,1.6vw,14px)}
#icSkip{position:fixed;right:calc(24px + var(--safe-r));bottom:calc(20px + var(--safe-b));font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55);letter-spacing:2px}
#killcam{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:25;pointer-events:none;text-align:center;opacity:0;transition:opacity .6s}
#killcam.in{opacity:1}
#killcam b{display:block;font-weight:900;font-size:clamp(26px,5vw,54px);letter-spacing:.2em;color:#fff;text-shadow:0 0 24px rgba(232,53,43,.8)}
#killcam span{font-family:var(--mono);color:var(--gold);letter-spacing:.4em;font-size:13px}
#nowplaying{position:fixed;left:calc(16px + var(--safe-l));bottom:calc(16px + var(--safe-b));z-index:32;font-family:var(--mono);font-size:12px;color:#eee;background:rgba(0,0,0,.55);border-left:3px solid var(--gold);padding:6px 12px;opacity:0;transform:translateY(10px);pointer-events:none}
#nowplaying i{color:var(--gold);font-style:normal;margin-right:4px}
#nowplaying.show{animation:np 5.5s ease forwards}
@keyframes np{0%{opacity:0;transform:translateY(10px)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
#fader{position:fixed;inset:0;background:#000;z-index:24;pointer-events:none;opacity:0}
#dmgdir{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
#dmgdir div{position:absolute;left:-40px;top:-150px;width:80px;height:30px;background:radial-gradient(ellipse at 50% 100%,rgba(255,30,20,.95),transparent 70%);clip-path:polygon(0 100%,50% 0,100% 100%,50% 70%)}
.tl{position:absolute;left:calc(14px + var(--safe-l));top:calc(12px + var(--safe-t))}
.tr{position:absolute;right:calc(14px + var(--safe-r));top:calc(12px + var(--safe-t));text-align:right}
.bl{position:absolute;left:calc(18px + var(--safe-l));bottom:calc(16px + var(--safe-b))}
.br{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(16px + var(--safe-b));text-align:right}
#mission{background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2));border-left:3px solid var(--gold);padding:8px 12px;max-width:min(360px,46vw);font-size:13px;line-height:1.45}
#mission b{color:var(--gold);letter-spacing:1px}
#objList{margin-top:4px;color:#ddd}
#objList div.done{color:#6c6;text-decoration:line-through}
#objList div.cur:before{content:"▸ ";color:var(--gold)}
#scorebox{font-size:14px;line-height:1.5;color:var(--gold);text-shadow:0 1px 2px #000}
#scorebox .big{font-size:22px;color:#fff}
#minimap{display:block;margin:8px 0 0 auto;width:150px;height:150px;border-radius:50%;border:2px solid var(--line);background:rgba(0,0,0,.55)}
#compass{position:absolute;left:50%;top:calc(10px + var(--safe-t));transform:translateX(-50%);width:min(420px,56vw);height:28px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(0,0,0,.55) 20%,rgba(0,0,0,.55) 80%,transparent)}
#compass canvas{width:100%;height:100%;display:block}
#bossbar{position:absolute;left:50%;top:calc(48px + var(--safe-t));transform:translateX(-50%);width:min(440px,70vw);text-align:center}
#bossbar .name{color:#ff6b5e;font-size:13px;letter-spacing:3px;margin-bottom:3px;text-shadow:0 0 8px #900}
#bossbar .bar{height:10px;background:rgba(0,0,0,.7);border:1px solid #ff6b5e}
#bossbar .fill{height:100%;width:100%;background:linear-gradient(90deg,#8b0000,#ff3b2f);transition:width .15s}
#wave{position:absolute;left:50%;top:calc(46px + var(--safe-t));transform:translateX(-50%);font-size:14px;color:#ff8a7a;letter-spacing:3px}
#vitals{width:min(240px,40vw)}
#vitals .row{display:flex;align-items:center;gap:8px;margin-top:5px}
#vitals .lbl{width:34px;font-size:12px;color:var(--dim)}
#vitals .bar{flex:1;height:9px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);overflow:hidden;transform:skewX(-15deg)}
#vitals .fill{height:100%;transition:width .2s}
#hpFill{background:linear-gradient(90deg,#1c9d3f,#56e07a)}
#arFill{background:linear-gradient(90deg,#2853c8,#62a0ff)}
#stFill{background:#d8d2c0;transition:none!important}
#hpNum{font-size:30px;font-weight:700;color:#7dff9b;text-shadow:0 0 12px rgba(80,255,120,.35)}
#hpNum small{font-size:13px;color:#8fb8ff;margin-left:8px}
#weaponbox .wname{color:var(--gold);font-size:13px;letter-spacing:2px}
#weaponbox .ammo{font-size:44px;font-weight:700;line-height:1;color:#fff;text-shadow:0 0 14px rgba(255,80,60,.4)}
#weaponbox .ammo small{font-size:18px;color:#bbb;font-weight:400}
#weaponbox .ammo.low{color:#ff5b4a}
#weaponbox .slots{font-size:11px;color:var(--dim);margin-top:3px}
#weaponbox .slots span.on{color:#fff}
#nadeNum{font-size:15px;color:#ffb347;margin-top:4px}
#reloadRing{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;opacity:0}
#notify{position:absolute;left:50%;top:26%;transform:translateX(-50%);text-align:center;pointer-events:none}
#notify .n{font-family:var(--sans);font-weight:800;font-size:clamp(20px,4vw,38px);letter-spacing:4px;color:var(--gold);text-shadow:0 0 18px rgba(255,180,0,.55),0 2px 2px #000;animation:pop .35s ease-out}
#notify .s{font-size:14px;color:#eee;margin-top:6px;letter-spacing:1px}
@keyframes pop{0%{transform:scale(1.6);opacity:0}100%{transform:scale(1);opacity:1}}
#killfeed{position:absolute;right:calc(14px + var(--safe-r));top:calc(215px + var(--safe-t));font-size:12px;text-align:right}
#killfeed div{background:rgba(0,0,0,.55);padding:3px 8px;margin-bottom:3px;border-right:2px solid var(--red);transition:opacity .6s}
#killfeed div.hs{border-right-color:var(--gold)}
#streak{position:absolute;left:50%;top:62%;transform:translateX(-50%);font-family:var(--sans);font-weight:800;color:#fff;font-size:18px;letter-spacing:2px;text-shadow:0 0 10px var(--red)}
.dmgnum{position:absolute;font-weight:700;font-size:15px;color:#fff;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.6);transform:translate(-50%,-50%);white-space:nowrap}
.dmgnum.hs{color:var(--gold);font-size:19px}
#objMarker{position:absolute;transform:translate(-50%,-50%);text-align:center;color:var(--gold);font-size:12px;text-shadow:0 1px 2px #000}
#objMarker .dia{width:16px;height:16px;margin:0 auto 2px;border:2px solid var(--gold);transform:rotate(45deg);background:rgba(255,200,61,.2);box-shadow:0 0 10px rgba(255,200,61,.6)}
#coverTag{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));transform:translateX(-50%);color:#7ff;font-size:13px;letter-spacing:2px;text-shadow:0 0 8px rgba(0,255,255,.5)}
#hint{position:absolute;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);font-size:13px;color:#fff;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:4px}
/* ---------- MENUS ---------- */
.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));overflow-y:auto}
.screen.dim{background:radial-gradient(ellipse at center,rgba(0,0,0,.45),rgba(0,0,0,.85))}
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);padding:22px 24px;width:min(560px,100%);max-height:100%;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card h2{font-size:22px;letter-spacing:4px;color:var(--gold);margin-bottom:12px}
.card p{color:#d8d3c7;line-height:1.55;font-size:15px;margin-bottom:10px}
#menu{flex-direction:column;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.7) 80%)}
.title{text-align:center;margin-bottom:clamp(10px,3vh,28px)}
.title h1{font-family:var(--sans);font-weight:900;font-size:clamp(56px,13vw,124px);letter-spacing:.12em;color:#fff;line-height:.9;text-shadow:none;background:linear-gradient(180deg,#fff 0%,#fff 55%,#d9d2c4 56%,#a49d90 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 var(--red2)) drop-shadow(0 0 28px rgba(232,53,43,.55));position:relative}
.title h1:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,60%{background-position:150% 0}100%{background-position:-60% 0}}
body.title .title{animation:logoIn 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes logoIn{0%{opacity:0;letter-spacing:.6em;filter:blur(8px)}100%{opacity:1;filter:none}}
.screen.enter .card{animation:cardIn .38s cubic-bezier(.2,.8,.2,1) both}
.screen.enter .btns .btn{animation:btnIn .5s cubic-bezier(.2,.8,.2,1) both}
.screen.enter .btns .btn:nth-child(2){animation-delay:.06s}.screen.enter .btns .btn:nth-child(3){animation-delay:.12s}.screen.enter .btns .btn:nth-child(4){animation-delay:.18s}.screen.enter .btns .btn:nth-child(5){animation-delay:.24s}
@keyframes cardIn{0%{opacity:0;transform:translateY(18px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes btnIn{0%{opacity:0;transform:translateX(-24px)}100%{opacity:1;transform:none}}
.screen.dim{animation:fadeIn .3s ease both}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
#menu .credit{position:absolute;left:0;right:0;bottom:calc(10px + var(--safe-b));text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.4)}
@media (max-width:760px){#menu .credit .cx{display:none} #menu .credit{bottom:calc(54px + var(--safe-b));letter-spacing:1px}}
#menu{justify-content:safe center}
.title h3{font-weight:800;font-size:clamp(22px,5vw,46px);letter-spacing:.32em;color:var(--gold);margin-top:6px;text-shadow:0 2px 0 #000}
.title .loc{color:#ddd;font-size:clamp(12px,2.5vw,15px);letter-spacing:.2em;margin-top:8px}
.flag{width:120px;height:10px;margin:12px auto 0;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.flag i{flex:1}.flag i.fblue{background:#1b2a41}.flag i.fgold{background:#ffc83d}.flag i.fteal{background:#207567}
.btns{display:flex;flex-direction:column;gap:10px;width:min(320px,86vw)}
.btn{position:relative;padding:14px 18px;font-size:16px;font-weight:800;letter-spacing:3px;color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);border-left:4px solid var(--green);transition:transform .12s,background .12s,border-color .12s;text-align:left}
.btn:hover,.btn:focus-visible{background:rgba(232,53,43,.25);border-left-color:var(--red);transform:translateX(4px);outline:none}
.btn.primary{background:linear-gradient(90deg,var(--red),#a3170f);border-color:transparent;border-left:4px solid #fff;text-align:center}
.btn.primary:hover{background:linear-gradient(90deg,#ff4a3d,var(--red))}
.btn small{float:right;font-weight:400;color:var(--gold);letter-spacing:1px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.row2 .btn{flex:1;text-align:center;min-width:130px}
#bankTag{margin-top:14px;color:var(--gold);font-family:var(--mono);font-size:14px;text-align:center}
@media (max-height:520px) and (orientation:landscape){
 .title{margin-bottom:8px} .title h1{font-size:clamp(34px,13vh,64px)} .title h3{font-size:clamp(16px,6vh,28px);margin-top:2px} .title .loc{font-size:11px;margin-top:4px} .title .flag{margin-top:4px}
 .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(560px,78vw)} .btns .btn{padding:10px 14px;font-size:14px} #btnPlay{grid-column:1/-1;text-align:center}
 #bankTag{margin-top:6px;font-size:12px} #menu .credit{bottom:calc(6px + var(--safe-b))}
}
#ver{position:fixed;right:10px;bottom:calc(8px + var(--safe-b));font-size:11px;color:#777;z-index:31}
.mlist{display:flex;flex-direction:column;gap:8px}
.mitem{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);cursor:pointer;color:#fff;text-align:left;font-size:14px}
.mitem:hover{border-color:var(--gold);background:rgba(255,200,61,.08)}
.mitem .num{font-size:26px;font-weight:900;color:var(--red);width:34px;text-align:center}
.mitem .t{flex:1}.mitem .t b{display:block;letter-spacing:2px;font-size:15px}
.mitem .t span{color:var(--dim);font-size:12px}
.mitem .best{font-family:var(--mono);font-size:12px;color:var(--gold);text-align:right}
.mitem.locked{opacity:.4;cursor:not-allowed}
.upg{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.upg .t{flex:1;font-size:14px}.upg .t b{display:block;letter-spacing:1px}.upg .t span{color:var(--dim);font-size:12px}
.pips{display:flex;gap:3px;margin-top:4px}.pips i{width:14px;height:5px;background:rgba(255,255,255,.15)}.pips i.on{background:var(--green)}
.upg button{padding:9px 12px;min-width:104px;font-weight:800;font-size:13px;color:#000;background:var(--gold);border:0}
.upg button:disabled{background:#444;color:#999;cursor:not-allowed}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.set input[type=range]{width:min(200px,45vw);accent-color:var(--red)}
.set select{background:#111;color:#fff;border:1px solid #555;padding:6px;font-size:14px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:6px 0 12px}
.keys kbd{font-family:var(--mono);background:#222;border:1px solid #555;border-bottom-width:3px;border-radius:4px;padding:1px 7px;color:var(--gold);white-space:nowrap}
.stats{display:grid;grid-template-columns:1fr auto;gap:6px 18px;font-family:var(--mono);font-size:15px;margin:10px 0 6px}
.stats span:nth-child(even){text-align:right;color:var(--gold)}
#briefing .card{border-top-color:var(--green)}
#briefing .tod{font-family:var(--mono);color:var(--dim);font-size:13px;margin-bottom:10px}
#loader{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 40%,#2a1410,#000 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--gold);font-family:var(--mono);letter-spacing:3px;transition:opacity .8s}
#loader.out{opacity:0}
#loader .lg{font-family:var(--sans);font-weight:900;font-size:clamp(44px,10vw,96px);letter-spacing:.14em;color:#fff;text-shadow:0 0 40px rgba(232,53,43,.55),0 4px 0 var(--red2);animation:breathe 2.4s ease-in-out infinite}
#loader .lg2{font-weight:800;letter-spacing:.4em;color:var(--gold);font-size:clamp(16px,3vw,26px);margin-top:-8px}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
#ldBar{width:min(420px,76vw);height:3px;background:rgba(255,255,255,.12);margin-top:16px;overflow:hidden}
#ldFill{height:100%;width:4%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .35s ease}
#ldLabel{font-size:11px;color:#aaa;letter-spacing:2px;min-height:14px}
#ldTip{max-width:min(520px,86vw);text-align:center;font-family:var(--sans);letter-spacing:.5px;color:#d8d0c0;font-size:14px;line-height:1.5;margin-top:22px;min-height:42px}
#ldTip:before{content:"TIP  ";color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:3px}
.fiction-label{font:700 10px var(--mono);letter-spacing:1px;color:var(--gold);margin-top:5px}
#errorBox{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center;padding:24px}
/* ---------- TOUCH ---------- */
#touch{position:fixed;inset:0;z-index:20;pointer-events:none}
#tLook{position:absolute;right:0;top:0;width:58%;height:100%;pointer-events:auto}
#tMove{position:absolute;left:0;top:0;width:42%;height:100%;pointer-events:auto}
#joy{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);opacity:.0;transition:opacity .15s}
#joy .k{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:0 0 10px rgba(0,0,0,.4)}
#joyHint{position:absolute;left:calc(70px + var(--safe-l));bottom:calc(70px + var(--safe-b));width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:2px dashed rgba(255,255,255,.2)}
.tb{min-width:48px;min-height:48px;position:absolute;pointer-events:auto;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-weight:800;font-size:12px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.tb.on{background:rgba(232,53,43,.55);border-color:#fff}
#bFire{width:86px;height:86px;right:calc(26px + var(--safe-r));bottom:calc(110px + var(--safe-b));background:rgba(232,53,43,.35);font-size:14px}
#bAds{width:58px;height:58px;right:calc(126px + var(--safe-r));bottom:calc(150px + var(--safe-b))}
#bJump{width:58px;height:58px;right:calc(120px + var(--safe-r));bottom:calc(76px + var(--safe-b))}
#bCrouch{width:50px;height:50px;right:calc(186px + var(--safe-r));bottom:calc(40px + var(--safe-b))}
#bReload{width:50px;height:50px;right:calc(40px + var(--safe-r));bottom:calc(215px + var(--safe-b))}
#bNade{width:50px;height:50px;right:calc(104px + var(--safe-r));bottom:calc(225px + var(--safe-b))}
#bSwap{width:50px;height:50px;right:calc(32px + var(--safe-r));bottom:calc(30px + var(--safe-b))}
#bLight{width:48px;height:48px;left:calc(14px + var(--safe-l));top:calc(50% - 21px)}
#bPause{width:48px;height:48px;left:50%;margin-left:-21px;top:calc(44px + var(--safe-t));border-radius:8px}
/* ---------- RESPONSIVE ---------- */
@media (max-width:760px),(max-height:520px){
 #mission{font-size:11px;max-width:52vw;padding:6px 8px}
 #minimap{width:96px;height:96px;margin-top:4px}
 #scorebox{font-size:11px}#scorebox .big{font-size:16px}
 #killfeed{top:calc(150px + var(--safe-t));font-size:10px}
 #weaponbox .ammo{font-size:30px}
 #hpNum{font-size:22px}
 #compass{height:22px;width:40vw}
 body.touch .br{bottom:auto;top:calc(250px + var(--safe-t))}
 body.touch .bl{bottom:calc(8px + var(--safe-b));left:calc(150px + var(--safe-l))}
 body.touch #vitals{width:30vw}
}
@media (max-height:520px){ body.touch .br{top:calc(120px + var(--safe-t))} body.touch #killfeed{display:none} #mission{max-width:34vw} }
#touchGuide{position:fixed;z-index:22;top:calc(70px + var(--safe-t));left:50%;transform:translateX(-50%);width:min(380px,calc(100vw - 32px));display:flex;gap:12px;align-items:center;padding:10px 12px;background:rgba(7,8,10,.92);border:1px solid rgba(255,200,61,.8);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.55);font:600 12px/1.35 var(--sans);pointer-events:auto}
#touchGuide[hidden]{display:none!important}#touchGuide p{flex:1}#touchGuide button{min-width:72px;min-height:44px;border:0;border-radius:8px;background:var(--gold);color:#111;font-weight:900;padding:8px}
body.touch #bFire{touch-action:none}
body.touch #bPause{left:auto;margin-left:0;right:calc(12px + var(--safe-r));top:calc(10px + var(--safe-t))}
body.touch .tr{top:calc(58px + var(--safe-t))}
body.touch #compass{display:none}
@media (orientation:portrait){
 body.touch .bl{left:calc(14px + var(--safe-l));bottom:auto;top:calc(118px + var(--safe-t))}
 body.touch #vitals{width:42vw}
 body.touch .br{top:calc(245px + var(--safe-t));bottom:auto}
 body.touch #killfeed{top:calc(330px + var(--safe-t))}
}
@media (orientation:landscape) and (max-height:520px){
 body.touch .bl{left:calc(14px + var(--safe-l));bottom:auto;top:calc(92px + var(--safe-t))}
 body.touch #vitals{width:24vw}
 body.touch .br{top:auto;bottom:calc(6px + var(--safe-b));right:auto;left:50%;transform:translateX(-50%);text-align:center}
 body.touch #weaponbox .slots{display:none}
 body.touch .tr{top:calc(12px + var(--safe-t));right:calc(66px + var(--safe-r))}
 body.touch #minimap{display:none}
}

/* KABZ V — Last Light. Game HUD x WebGL World: flat instruments over a real scene. */
:root{--gold:#d9bb78;--red:#e56343;--red2:#a64b38;--green:#9ba88b;--green2:#728575;--ink:#eee9dc;--dim:#b4b3a7;--panel:rgba(13,21,23,.96);--line:rgba(230,232,219,.25);--sans:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;--display:"Avenir Next Condensed","Arial Narrow",Impact,sans-serif}
#menu{align-items:flex-start;justify-content:center;padding:7vh 6vw 10vh;background:linear-gradient(90deg,rgba(8,15,17,.93),rgba(8,15,17,.75) 31%,rgba(8,15,17,.13) 68%,rgba(8,15,17,.1))}
.menu-kicker{position:absolute;left:6vw;right:6vw;top:5vh;display:flex;justify-content:space-between;font:11px var(--mono);letter-spacing:.18em;color:#d9e0d9}
.menu-kicker span{color:#aab5b1}
.title{text-align:left;margin:0 0 26px;max-width:570px}
.chapter-label{font:10px var(--mono);letter-spacing:.22em;color:var(--gold);margin-bottom:14px}
.title h1{font-family:var(--display);font-weight:900;font-stretch:condensed;font-size:clamp(70px,10vw,150px);letter-spacing:-.045em;line-height:.84;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;filter:none;text-shadow:none;white-space:nowrap}
.title h1 em,#loader .lg em{font-style:normal;color:var(--gold);font-weight:400}
.title h1:after{display:none}
.title h3{font:600 clamp(17px,2vw,25px) var(--sans);letter-spacing:.48em;color:var(--ink);margin:17px 0 0 3px;text-shadow:none}
.menu-story{font:400 clamp(15px,1.3vw,18px)/1.6 var(--sans);color:#c8cfca;margin:22px 0 0;max-width:36ch}
#menu .btns{width:min(340px,38vw);gap:4px}
.btn{border:1px solid transparent;border-left:0;background:rgba(10,18,20,.22);padding:13px 16px;font:600 12px var(--sans);letter-spacing:.16em;transition:background .12s,color .12s}
.btn:hover,.btn:focus-visible{transform:none;background:#e7e2d4;color:#102022;border-color:#e7e2d4;outline:2px solid #eee9dc;outline-offset:3px}
.btn:focus-visible{outline-color:var(--gold)}
.btn.primary{background:var(--gold);color:#101b1c;text-align:left;border:0;padding:17px 16px;margin-bottom:7px;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.btn.primary:hover{background:#f3d699;color:#101b1c}
.btn.primary span{float:right;font-size:17px;line-height:13px}
#menu .credit{left:6vw;right:6vw;bottom:24px;text-align:left;color:#aab5b1;font-size:10px;letter-spacing:.04em;display:flex;justify-content:space-between}
#menu .credit .cx{margin-left:24px}
.menu-controls{position:absolute;right:6vw;bottom:65px;font:9px var(--mono);letter-spacing:.05em;color:#c4cec8;display:flex;align-items:center;gap:10px}
.menu-controls span{padding:5px 7px;border:1px solid #667873;color:#f0f0df}
#bankTag{margin-top:10px;font-size:11px;text-align:left;color:#c6cdbf}
#ver{right:6vw;bottom:43px;color:#aab5b1;font:9px var(--mono);letter-spacing:.08em}
.card{border:1px solid var(--line);border-top:2px solid var(--gold);background:var(--panel);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:30px;max-width:640px}
.card h2{font-family:var(--display);font-size:32px;letter-spacing:.08em;color:var(--ink)}
.card p{font-size:15px;color:#cdd1c7;max-width:60ch}
.screen.dim{background:rgba(6,12,13,.7)}
#briefing .card{border-top-color:var(--gold)}
#mission{left:28px;top:26px;background:rgba(10,21,23,.76);border-left:2px solid var(--gold);padding:11px 14px;max-width:min(350px,28vw);font-size:11px}
#mission b{font-size:11px;letter-spacing:.12em;color:#ecddb3}
#objList{color:#d9dfd7}#objList div:not(.cur):not(.done){color:#a4afa9}
#objList div.done{display:none}
#compass{top:26px;border:0;background:rgba(10,21,23,.34);height:25px;width:300px}
.tr{right:28px;top:26px}#scorebox{font-size:10px;color:#bcc8c0}#scorebox .big{font-size:18px;color:#e6e7d8}
#minimap{width:122px;height:122px;border:1px solid rgba(236,231,210,.34);opacity:.92}
.bl{left:28px;bottom:28px}.br{right:28px;bottom:28px}
#vitals{width:210px;padding:12px 16px;background:rgba(10,21,23,.7);border-left:2px solid #8aab9d}
#hpNum{font-size:27px;color:#e8ebda;text-shadow:none}#hpNum small{color:#bfd3d3}
#vitals .lbl{font-size:10px;color:#cad3c8}#vitals .bar{height:5px;border:0;transform:none;background:#31413d}#hpFill{background:#d7dac2}#arFill{background:#8caeaa}#stFill{background:#d9bb78}
#weaponbox{background:rgba(10,21,23,.7);padding:12px 16px;border-right:2px solid var(--gold)}
#weaponbox .wname{font-size:10px;letter-spacing:.16em;color:#e4d8b5}#weaponbox .ammo{font-size:38px;text-shadow:none}#weaponbox .ammo small{font-size:16px}#nadeNum{font-size:10px;color:#c6d0c3}
#killfeed{right:28px;top:210px;font-size:10px}#killfeed div{border-right-color:#bd8970;background:rgba(10,21,23,.7)}
#notify .n{font-family:var(--display);font-size:clamp(24px,3vw,38px);text-shadow:0 2px 6px #000;color:#efe5c9;letter-spacing:.14em}
#notify .s{font-size:12px;text-shadow:0 2px 5px #000}#nowplaying{left:28px;bottom:160px;font-size:10px;color:#cdd5c9;border-left:2px solid var(--gold);background:rgba(10,21,23,.8)}
#icBar{background:var(--gold);height:2px;width:130px}#icName{font-family:var(--display);letter-spacing:.02em;text-shadow:0 2px 10px #000;color:#eee9dc}
#loader{background:#0b1618;color:#d9bb78}#loader .lg{font-family:var(--display);font-size:clamp(70px,10vw,120px);letter-spacing:-.04em;text-shadow:none;animation:none}#loader .lg2{font:500 16px var(--sans);letter-spacing:.5em}#ldFill{background:var(--gold)}
.title,.screen.enter .card,.screen.enter .btns .btn{animation:none!important}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.set input[type=range]{accent-color:var(--gold)}
@media(max-width:760px){#menu{padding-left:7vw;align-items:flex-start;background:linear-gradient(90deg,rgba(8,15,17,.92),rgba(8,15,17,.6))}.menu-kicker{left:7vw;right:7vw;font-size:8px}.menu-kicker span{display:none}.title h1{font-size:82px}.title h3{font-size:19px}.title{margin-bottom:20px}.menu-story{font-size:14px;margin-top:17px}#menu .btns{width:min(310px,85vw)}.menu-controls{display:none}#menu .credit{left:7vw;bottom:18px;right:7vw;font-size:8px}#menu .credit .cx{display:none}#ver{bottom:36px;right:7vw;font-size:8px}.card{padding:22px}#mission{left:12px;top:12px;max-width:45vw;padding:8px;font-size:10px}.tr{right:12px;top:12px}#minimap{width:90px;height:90px}#compass{width:27vw;top:12px}#vitals{width:175px}.bl{left:12px;bottom:12px}.br{right:12px;bottom:12px}#weaponbox{padding:8px}#weaponbox .ammo{font-size:30px}#nowplaying{bottom:145px;left:12px}}
@media(max-height:570px) and (min-width:700px){#menu{padding-top:11vh;padding-bottom:8vh}.menu-kicker{top:4vh}.title{margin-bottom:12px}.title h1{font-size:76px}.title h3{font-size:17px;margin-top:10px}.chapter-label{margin-bottom:8px}.menu-story{font-size:13px;margin-top:12px}#menu .btns{display:flex;width:280px;gap:0}.btn{padding:8px 12px}.btn.primary{padding:12px}.menu-controls{bottom:62px}.menu-kicker{font-size:9px}#menu .credit{bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#bInteract{width:50px;height:50px;right:calc(178px + var(--safe-r));bottom:calc(220px + var(--safe-b))}

/* Brief radio notifications leave the target silhouette unobscured. */
#notify{top:118px;left:28px;transform:none;text-align:left;max-width:370px;padding:9px 12px;border-left:2px solid #d9bb78;background:rgba(16,28,29,.78)}
#notify:empty{display:none}#notify .n{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.08em;text-shadow:none;color:#e5d9bc}#notify .s{font-size:10px;text-shadow:none;line-height:1.5;color:#c6cabe;margin-top:3px}