:root{
  --bg:#0F172A; --bg-deep:#080d16; --panel:rgba(10,16,28,.66); --panel-solid:#0d1424;
  --muted:#0F1F2B; --border:rgba(255,255,255,.09); --border-hi:rgba(255,255,255,.18);
  --fg:#F2F6FF; --fg-dim:#8fa0b8; --primary:#15803D; --primary-hi:#22c55e; --secondary:#166534;
  --accent:#D97706; --danger:#DC2626; --danger-hi:#ef4444;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:12px; --r-sm:8px; --glow:0 0 10px;
  --sA:env(safe-area-inset-top,0px); --sB:env(safe-area-inset-bottom,0px);
  --sL:env(safe-area-inset-left,0px); --sR:env(safe-area-inset-right,0px);
  --btn:clamp(46px,7.2vh,74px); --gap:clamp(6px,1.1vw,12px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg-deep);color:var(--fg);font-family:var(--mono);
  overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
body{position:fixed;inset:0;-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;overflow:hidden}
#gl,#hudc{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{touch-action:none;z-index:1}
#hudc{z-index:3;pointer-events:none}
.hidden{display:none!important}
kbd{font-family:var(--mono);font-size:.75em;border:1px solid var(--border-hi);border-radius:4px;padding:1px 4px}
/* ── HUD panels ── */
#hud{position:absolute;inset:0;z-index:4;pointer-events:none;
  padding:calc(var(--sA) + 8px) calc(var(--sR) + 12px) calc(var(--sB) + 8px) calc(var(--sL) + 12px)}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gap)}
.pnl{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:7px 11px}
.pnl.left,.pnl.right{display:flex;gap:16px}
.k{font-size:9px;letter-spacing:.16em;color:var(--fg-dim);display:block}
.pnl b{font-size:clamp(13px,2.1vh,17px);font-weight:700;letter-spacing:.02em}
b.red{color:var(--danger-hi)} b.amber{color:var(--accent)}
.hud-bottom{position:absolute;left:calc(var(--sL) + 12px);right:calc(var(--sR) + 12px);
  top:calc(var(--sA) + 52px);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gap)}
.pnl.vitals{min-width:clamp(120px,17vw,180px)}
.vrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.vrow.small{margin-top:7px}
.bar{height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.bar i{display:block;height:100%;width:100%;border-radius:4px;transition:width .18s linear}
.bar.hp i{background:linear-gradient(90deg,#166534,#22c55e)}
.bar.hp i.low{background:linear-gradient(90deg,#7f1d1d,#ef4444)}
.bar.br{height:5px} .bar.br i{background:linear-gradient(90deg,#92400e,#fbbf24);transition:width .1s linear}
.pnl.weapon{text-align:right;min-width:clamp(110px,15vw,160px)}
.wname{font-size:10px;letter-spacing:.16em;color:var(--fg-dim)}
.ammo{font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:flex-end;gap:3px}
.ammo b{font-size:clamp(20px,3.4vh,30px);line-height:1;color:#fff}
.ammo .slash{color:var(--fg-dim);font-size:.8em}
.ammo span:last-child{font-size:clamp(11px,1.7vh,15px);color:var(--fg-dim)}
#ammoMag.empty{color:var(--danger-hi);animation:pulseWarn .7s infinite}
.wtag{font-size:9px;letter-spacing:.12em;color:var(--accent)}
.iconbtn{pointer-events:auto;width:38px;height:38px;border-radius:var(--r-sm);background:var(--panel);
  border:1px solid var(--border);color:var(--fg);font-size:12px;backdrop-filter:blur(10px)}
.iconbtn:active{transform:scale(.94)}
@keyframes pulseWarn{50%{opacity:.35}}
/* ── Crosshair ── */
#crosshair{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);
  z-index:5;pointer-events:none;opacity:.9;transition:opacity .15s}
#crosshair i{position:absolute;background:#e9fbe9;box-shadow:0 0 4px rgba(0,0,0,.9);border-radius:1px}
#crosshair .cd{width:2.5px;height:2.5px;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent)}
#crosshair .ct,#crosshair .cb{width:2px;height:11px;left:50%;transform:translateX(-50%)}
#crosshair .cl,#crosshair .cr{height:2px;width:11px;top:50%;transform:translateY(-50%)}
#crosshair .ct{top:0} #crosshair .cb{bottom:0} #crosshair .cl{left:0} #crosshair .cr{right:0}
#crosshair.off{opacity:0}
/* ── Hitmarker ── */
#hitmark{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%) scale(.7);
  z-index:6;pointer-events:none;opacity:0}
#hitmark svg{width:100%;height:100%}
#hitmark svg path{stroke:#fff;stroke-width:2.6;stroke-linecap:round;fill:none}
#hitmark.show{animation:hm .34s ease-out}
#hitmark.head svg path{stroke:var(--danger-hi);stroke-width:3.4}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) scale(.65)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28)}}
/* ── Damage / flash fx ── */
#dmgvignette,#flashfx{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .3s}
#dmgvignette{background:radial-gradient(ellipse at center,transparent 42%,rgba(220,38,38,.62) 100%)}
#flashfx{background:radial-gradient(ellipse at center,rgba(255,236,190,.5),transparent 72%)}
/* ── Scope overlay ── */
#scope{position:absolute;inset:0;z-index:8;pointer-events:none;--sr:min(46vh,42vw)}
#scope .scrim{position:absolute;inset:0;background:#04070c;
  mask:radial-gradient(circle at 50% 50%,transparent 0 calc(var(--sr) - 1px),#000 var(--sr));
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 calc(var(--sr) - 1px),#000 var(--sr))}
#scope .lens{position:absolute;left:50%;top:50%;width:calc(var(--sr) * 2);height:calc(var(--sr) * 2);
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;opacity:.94}
#scope .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(20,25,20,.9);
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.75),inset 0 0 90px 40px rgba(0,0,0,.45)}
#scope .reticle{position:absolute;inset:8%;opacity:.92}
#scope .reticle svg{width:100%;height:100%}
#scope .rl{stroke:#0b1a10;stroke-width:.35}
#scope .rl.thin{stroke-width:.28}
#scope .mildots line{stroke:#0b1a10;stroke-width:.5}
#scope .lens-glare{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 22%,rgba(180,255,210,.10),transparent 42%)}
#scope .breath-ring{position:absolute;inset:3%;opacity:.5}
#scope .breath-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
#scope .breath-ring circle{fill:none;stroke:var(--accent);stroke-width:.6;opacity:.55;
  stroke-dasharray:289;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}
#scopeInfo{position:absolute;left:50%;bottom:clamp(50px,11vh,110px);transform:translateX(-50%);
  display:flex;gap:10px;font-size:clamp(10px,1.5vh,13px);letter-spacing:.1em;white-space:nowrap;
  color:#0b1a10;background:rgba(233,251,233,.82);padding:4px 12px;border-radius:999px}
#scopeInfo .sep{opacity:.4}
#scope.zooming .lens{transition:transform .16s ease-out}
/* ── Touch controls ── */
#controls{position:absolute;inset:0;z-index:6;pointer-events:none;
  padding:0 calc(var(--sR) + 10px) calc(var(--sB) + 10px) calc(var(--sL) + 10px)}
#stickZone{position:absolute;left:0;bottom:0;width:44%;height:56%;max-width:340px;max-height:340px;
  pointer-events:auto}
#stickBase{position:absolute;left:clamp(12px,4vw,42px);bottom:clamp(12px,4vw,42px);
  width:clamp(92px,16vh,142px);height:clamp(92px,16vh,142px);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1.5px solid var(--border-hi);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .2s}
#stickZone.active #stickBase{opacity:.95;border-color:rgba(34,197,94,.55)}
#stickKnob{width:44%;height:44%;border-radius:50%;background:rgba(34,197,94,.24);
  border:1.5px solid rgba(34,197,94,.75);box-shadow:0 0 14px rgba(34,197,94,.28);
  transition:transform .05s linear}
#stickZone .hintlabel{position:absolute;left:clamp(12px,4vw,42px);bottom:clamp(4px,1.2vw,12px);
  font-size:9px;letter-spacing:.2em;color:var(--fg-dim)}
#btnCol{position:absolute;right:calc(var(--sR) + 10px);bottom:calc(var(--sB) + 10px);
  display:flex;flex-direction:column;gap:var(--gap);align-items:flex-end;pointer-events:auto}
#btnCol .row{display:flex;gap:var(--gap);justify-content:flex-end}
.abtn{width:var(--btn);height:var(--btn);border-radius:var(--r);background:var(--panel);
  border:1px solid var(--border-hi);color:var(--fg);font-family:var(--mono);font-weight:700;
  font-size:clamp(8px,1.35vh,11px);letter-spacing:.07em;line-height:1.15;backdrop-filter:blur(10px);
  transition:transform .08s ease,background .15s ease,border-color .15s ease;text-align:center;padding:0}
.abtn small{display:block;font-size:.78em;color:var(--fg-dim);font-weight:500;letter-spacing:.1em}
.abtn:active,.abtn.on{transform:scale(.93);background:rgba(21,128,61,.35);border-color:rgba(34,197,94,.7)}
.abtn.small{width:calc(var(--btn) * .86);height:calc(var(--btn) * .72)}
.abtn.scope.on{background:rgba(217,119,6,.3);border-color:rgba(217,119,6,.75)}
.abtn.fire{width:calc(var(--btn) * 1.24);height:calc(var(--btn) * 1.24);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(220,38,38,.45),rgba(120,20,20,.28));
  border:1.5px solid rgba(239,68,68,.6);font-size:clamp(10px,1.7vh,14px);letter-spacing:.12em}
.abtn.fire:active,.abtn.fire.on{background:radial-gradient(circle at 50% 40%,rgba(239,68,68,.75),rgba(90,10,10,.5));
  border-color:#fca5a5;transform:scale(.9)}
.abtn:disabled{opacity:.35}
#btnCol .cd{position:relative}
.abtn .cdring{position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(251,191,36,.85);
  clip-path:inset(0 0 var(--cd,0%) 0);pointer-events:none;opacity:0;transition:opacity .2s}
.abtn.cooling .cdring{opacity:.9}
body.lefthand #stickZone{left:auto;right:0}
body.lefthand #stickBase,body.lefthand #stickZone .hintlabel{left:auto;right:clamp(12px,4vw,42px)}
body.lefthand #btnCol{right:auto;left:calc(var(--sL) + 10px);align-items:flex-start}
body.lefthand #btnCol .row{justify-content:flex-start}
body.lefthand .pnl.vitals{order:2} body.lefthand .pnl.weapon{order:1;text-align:left}
/* ── Overlay screens ── */
#overlayRoot{position:absolute;inset:0;z-index:20;pointer-events:none}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.2vh,22px);padding:calc(var(--sA) + 16px) calc(var(--sR) + 16px) calc(var(--sB) + 16px) calc(var(--sL) + 16px);
  background:radial-gradient(ellipse at 50% 0%,rgba(21,128,61,.18),transparent 58%),rgba(6,10,18,.9);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);overflow-y:auto;touch-action:pan-y;
  pointer-events:auto;text-align:center}
.screen.show{display:flex;animation:fadeUp .34s ease both}
.screen h2{font-size:clamp(17px,3.4vh,26px);letter-spacing:.22em;font-weight:700}
.screen h2.red{color:var(--danger-hi);text-shadow:var(--glow) rgba(220,38,38,.6)}
.screen h3{font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:8px;text-align:left}
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;animation:fadeUp .5s ease both}
.logo{width:clamp(34px,6vh,54px);height:clamp(34px,6vh,54px);opacity:.95}
.logo svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(21,128,61,.5))}
.brand h1{font-size:clamp(34px,8.4vh,68px);letter-spacing:.14em;font-weight:800;line-height:1;
  background:linear-gradient(180deg,#fff 20%,#8fa0b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand h1 span{color:var(--primary-hi);-webkit-text-fill-color:var(--primary-hi)}
.brand .tag{font-size:clamp(9px,1.5vh,12px);letter-spacing:.42em;color:var(--accent);margin-left:.42em}
.brand .blurb{max-width:min(560px,88vw);font-family:var(--sans);font-size:clamp(11px,1.6vh,14px);line-height:1.6;
  color:var(--fg-dim);margin-top:10px}
.loadout{width:min(760px,94vw);animation:fadeUp .5s .06s ease both}
.loadout h2{font-size:10px;letter-spacing:.24em;color:var(--fg-dim);margin-bottom:8px;text-align:left}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.2vw,12px)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:clamp(7px,1.5vh,14px);
  cursor:pointer;text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s;position:relative;overflow:hidden}
.card:hover,.card:active{transform:translateY(-3px)}
.card.sel{border-color:var(--primary-hi);box-shadow:0 0 0 1px var(--primary-hi),0 10px 30px rgba(21,128,61,.25)}
.card.locked{opacity:.42;filter:grayscale(.7)}
.card .cname{font-size:clamp(10px,1.7vh,13px);font-weight:700;letter-spacing:.06em}
.card .ctype{font-size:9px;letter-spacing:.16em;color:var(--accent);margin:2px 0 6px}
.card .cstat{display:flex;justify-content:space-between;font-size:9px;color:var(--fg-dim);letter-spacing:.08em}
.card .cbar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin:2px 0 5px;overflow:hidden}
.card .cbar i{display:block;height:100%;background:linear-gradient(90deg,var(--secondary),var(--primary-hi))}
.card .cdesc{font-family:var(--sans);font-size:10px;line-height:1.45;color:var(--fg-dim);margin-top:5px}
.card .lockmsg{position:absolute;right:8px;top:8px;font-size:8.5px;letter-spacing:.1em;color:var(--accent)}
.unlockhint{font-size:9px;letter-spacing:.1em;color:var(--fg-dim);margin-top:8px;text-align:left}
.menu-actions{display:flex;flex-direction:column;gap:var(--gap);align-items:center;animation:fadeUp .5s .12s ease both}
.btnrow{display:flex;gap:var(--gap)}
.btn{font-family:var(--mono);font-weight:700;letter-spacing:.16em;font-size:clamp(10px,1.6vh,13px);
  padding:clamp(11px,1.9vh,16px) clamp(18px,4vw,36px);border-radius:var(--r);border:1px solid var(--border-hi);
  background:var(--panel);color:var(--fg);cursor:pointer;backdrop-filter:blur(8px);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-hi));color:#04140a;border:none;
  box-shadow:0 8px 30px rgba(21,128,61,.4);font-size:clamp(12px,2vh,16px)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(21,128,61,.55)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.14);color:var(--fg-dim)}
.btn.small{padding:9px 16px;font-size:10px}
.btn:disabled{opacity:.4}
.bestline{font-size:9.5px;letter-spacing:.14em;color:var(--fg-dim);display:flex;gap:8px;align-items:center}
.bestline b{color:var(--fg)}
.bestline span{opacity:.4}
/* ── Manual ── */
.manual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,34px);width:min(880px,94vw);text-align:left}
.manual ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.manual li{font-family:var(--sans);font-size:clamp(10.5px,1.55vh,13px);line-height:1.5;color:#c3cfe2;
  padding-left:13px;position:relative}
.manual li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--primary-hi);border-radius:1px}
.manual b{color:#fff}
/* ── Settings ── */
.settings{width:min(700px,94vw);display:flex;flex-direction:column;gap:11px;text-align:left}
.srow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  font-size:10px;letter-spacing:.13em;color:var(--fg-dim);text-transform:uppercase}
.srow input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;
  background:rgba(255,255,255,.12);outline:none;width:100%}
.srow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--primary-hi);border:2px solid #04140a;box-shadow:0 0 10px rgba(34,197,94,.5)}
.srow .sv{color:var(--fg);font-size:11px;min-width:44px;text-align:right}
.toggles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.tgl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:11px 6px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--border);color:var(--fg-dim);cursor:pointer;transition:all .18s}
.tgl.on{background:rgba(21,128,61,.28);border-color:var(--primary-hi);color:#fff}
.fineprint{font-family:var(--sans);font-size:10px;line-height:1.5;color:var(--fg-dim);opacity:.8}
/* ── Field kit + stats ── */
.kitsub{font-family:var(--sans);font-size:clamp(11px,1.6vh,14px);color:var(--fg-dim)}
.cards.kit{grid-template-columns:repeat(3,1fr);width:min(880px,94vw)}
.cards.kit .card{cursor:pointer}
.cards.kit .card .cname{color:var(--primary-hi)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.4vw,14px);width:min(680px,94vw)}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:clamp(8px,1.6vh,14px)}
.stat .k{font-size:8.5px}
.stat b{font-size:clamp(15px,2.8vh,26px);letter-spacing:.02em}
/* ── Toasts ── */
#toasts{position:absolute;left:50%;top:calc(var(--sA) + 62px);transform:translateX(-50%);z-index:15;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:max-content;max-width:92vw}
.toast{font-size:clamp(9.5px,1.5vh,12px);letter-spacing:.14em;padding:7px 15px;border-radius:999px;
  background:rgba(8,13,22,.82);border:1px solid var(--border-hi);border-left:3px solid var(--primary-hi);
  backdrop-filter:blur(8px);animation:tin .28s ease both;text-align:center}
.toast.warn{border-left-color:var(--accent);color:#fde8c8}
.toast.danger{border-left-color:var(--danger-hi);color:#ffd9d9}
.toast.gold{border-left-color:#fbbf24;color:#fde9b8;font-weight:700}
.toast.out{animation:tout .32s ease both}
@keyframes tin{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(-8px) scale(.98)}}
#vitalsfx{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(8,12,20,.55) 100%),linear-gradient(180deg,rgba(8,12,20,.35),transparent 22%,transparent 78%,rgba(8,12,20,.35))}
/* ── Rotate hint / loading ── */
#rotate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:rgba(6,10,18,.94);text-align:center;padding:24px}
#rotate svg{width:58px;height:58px;animation:tilt 2.4s ease-in-out infinite}
#rotate p{font-size:11px;letter-spacing:.16em;color:var(--fg-dim);max-width:260px;line-height:1.6}
@keyframes tilt{0%,100%{transform:rotate(0)}45%{transform:rotate(90deg)}70%{transform:rotate(90deg)}}
#loading{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:var(--bg-deep);transition:opacity .4s}
#loading p{font-size:10px;letter-spacing:.24em;color:var(--fg-dim)}
#loading.gone{opacity:0;pointer-events:none}
.spin{width:36px;height:36px;border:2px solid rgba(255,255,255,.14);border-top-color:var(--primary-hi);
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ── Responsive ── */
@media (max-width:820px){
  .cards{grid-template-columns:repeat(3,1fr)} .manual{grid-template-columns:1fr}
  .toggles{grid-template-columns:repeat(2,1fr)}
}
@media (max-height:460px){
  .screen{gap:8px} .brand .blurb{display:none} .menu-actions{gap:6px}
  .logo{width:30px;height:30px} .card .cdesc{display:none} .stats{gap:6px}
}
@media (orientation:portrait){
  #stickZone{width:52%;height:44%} .cards{grid-template-columns:repeat(3,1fr)}
  #scope{--sr:min(40vh,44vw)} .hud-bottom{top:calc(var(--sA) + 56px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
/* ── state chrome: HUD only while deployed ── */
#hud,#controls,#crosshair,#hitmark{transition:opacity .28s ease}
body:not(.playing) #hud,body:not(.playing) #controls,body:not(.playing) #crosshair{opacity:0;pointer-events:none!important}
body:not(.playing) #scope{display:none}
/* ── focus time (bullet time) ── */
body.focusmode #vitalsfx{background:radial-gradient(ellipse at center,rgba(10,26,40,.18) 42%,rgba(6,14,26,.72) 100%),
  linear-gradient(180deg,rgba(20,60,90,.3),transparent 30%,transparent 70%,rgba(20,60,90,.3))}
body.focusmode #gl{filter:saturate(.78) contrast(1.06)}
body.focusmode #scope .reticle svg .rl{stroke:#0d2033}
body.focusmode #stickKnob{background:rgba(56,189,248,.28);border-color:rgba(56,189,248,.8)}
body.focusmode #toasts .toast{border-left-color:#38bdf8}
/* ── cooldown ring on focus ── */
#btnFocus{position:relative}
#btnFocus .cdring{position:absolute;inset:-4px;border-radius:var(--r);border:2px solid rgba(56,189,248,.85);
  clip-path:inset(0 0 var(--cd,0%) 0);opacity:0;transition:opacity .2s;pointer-events:none}
#btnFocus.cooling .cdring{opacity:.95}
#btnReload.cooling{color:var(--accent)}
body.playing #loading{display:none}
#app,#gl,#hudc,#controls,#stickZone,#btnCol{touch-action:none;-webkit-touch-callout:none}

/* ── HUD visibility while overlay screens are open ── */
#hud,#controls,#crosshair,#vitalsfx{transition:opacity .25s ease}
body.menus #hud,body.menus #controls,body.menus #crosshair,body.menus #vitalsfx{opacity:0;pointer-events:none}
#rotate.hidden{display:none!important}