:root{
    --bg:#0a0c0e; --panel:#14181c; --line:#2a3138; --amber:#e8a33d; --amber-d:#8a6526;
    --go:#57c06b; --bad:#d8453e; --blue:#6fa8dc; --purp:#c06fd8;
    --text:#d6dce2; --dim:#7c8794; --mono:"DejaVu Sans Mono","Consolas",monospace; --cond:"Arial Narrow","Roboto Condensed",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;}
  html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--cond);overscroll-behavior:none;}
  #app{position:fixed;inset:0;}
  body.playing #app{cursor:none;}
  canvas{display:block;touch-action:none;}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10;}
  .hc{position:absolute;font-family:var(--mono);}
  #crosshair{position:absolute;left:50%;top:50%;width:2px;height:2px;transform:translate(-50%,-50%);--g:6px;}
  #crosshair i{position:absolute;background:var(--amber);opacity:.9;box-shadow:0 0 2px rgba(0,0,0,.6);}
  #crosshair .t{left:-1px;width:2px;height:6px;bottom:var(--g);}
  #crosshair .b{left:-1px;width:2px;height:6px;top:var(--g);}
  #crosshair .l{top:-1px;height:2px;width:6px;right:var(--g);}
  #crosshair .r{top:-1px;height:2px;width:6px;left:var(--g);}
  #crosshair .dot{left:-1px;top:-1px;width:2px;height:2px;opacity:.6;}
  #dmgdir{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%) rotate(0deg);opacity:0;pointer-events:none;transition:opacity .5s ease-out;}
  #dmgdir::before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:26px solid rgba(216,69,62,.92);}
  #hit{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%) rotate(45deg);opacity:0;}
  #hit::before,#hit::after{content:"";position:absolute;background:#fff;}
  #hit::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);}
  #hit::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%);}
  #vig{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 160px 40px var(--bad);transition:opacity .25s;}

  #obj{left:24px;top:20px;max-width:320px;}
  #objT{font-size:12px;letter-spacing:3px;color:var(--amber);text-transform:uppercase;}
  #objX{font-size:15px;margin-top:2px;}
  #zone{font-size:11px;color:var(--dim);letter-spacing:2px;margin-top:4px;}

  /* hostiles counter sits just BELOW the compass band (compass = y14–36) so the
     two never overlap in the top-centre; compact single-line readout. */
  #threats{left:50%;top:44px;transform:translateX(-50%);text-align:center;display:none;
    background:rgba(8,10,12,.45);border:1px solid var(--line);border-radius:6px;padding:3px 12px;line-height:1;}
  #thN{font-size:18px;color:var(--bad);font-weight:bold;}
  #thL{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-top:1px;}

  #wallet{right:28px;top:20px;text-align:right;}
  #cr{font-size:24px;color:var(--go);font-weight:bold;}
  #crL{font-size:11px;letter-spacing:2px;color:var(--dim);}
  #lvl{font-size:12px;color:var(--amber);margin-top:4px;}

  #vit{left:24px;bottom:22px;}
  .lab{font-size:11px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
  .bw{width:220px;height:13px;background:#000;border:1px solid var(--line);margin-top:3px;position:relative;}
  #hpF{height:100%;width:100%;background:linear-gradient(90deg,#7a1f1c,var(--bad));transition:width .12s;}
  #hpT{position:absolute;right:5px;top:0;line-height:13px;font-size:11px;color:#fff;}
  .bw.sm{width:140px;height:8px;margin-top:5px;}
  #stmF{height:100%;width:100%;background:linear-gradient(90deg,#2a6035,var(--go));transition:width .1s;}

  #ammo{right:28px;bottom:22px;text-align:right;}
  #amN{font-size:42px;line-height:.9;color:var(--amber);font-weight:bold;}
  #amN .rs{font-size:18px;color:var(--dim);}
  #wpn{font-size:12px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
  #rld{font-size:12px;color:var(--bad);height:14px;letter-spacing:1px;}
  #slots{margin-top:6px;display:flex;gap:6px;justify-content:flex-end;}
  .wslot{font-size:11px;border:1px solid var(--line);padding:2px 7px;color:var(--dim);}
  .wslot.on{border-color:var(--amber);color:var(--amber);}
  #nade{font-size:11px;color:var(--dim);margin-top:4px;}
  #fmode{font-size:11px;letter-spacing:2px;color:var(--go);margin-top:2px;font-family:var(--mono);}
  #amN.low{color:var(--bad);}
  #amN .rs.out{color:var(--bad);}
  /* loaded ammo type chip (FMJ / AP / HP / TR) — sits under fire-mode in raid */
  #atype{font-size:11px;letter-spacing:2px;color:var(--blue);margin-top:2px;font-family:var(--mono);}
  #atype:empty{display:none;}
  #stance{font-family:var(--mono);font-size:10px;color:var(--amber);border:1px solid var(--amber-d);padding:0 4px;margin-left:6px;}
  /* kill/hit marker */
  #hit.kill{width:30px;height:30px;}
  #hit.kill::before,#hit.kill::after{background:var(--bad);}
  /* minimap */
  #mapwrap{right:26px;top:74px;width:180px;height:180px;border:1px solid var(--line);background:rgba(8,10,12,.6);}
  #minimap{display:block;width:180px;height:180px;}
  body.touch #mapwrap{width:120px;height:120px;} body.touch #minimap{width:120px;height:120px;}
  /* compass */
  #compass{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(340px,70vw);height:22px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,10,12,.45);}
  #compassStrip{position:absolute;top:0;left:0;height:22px;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--text);line-height:22px;}
  #compassStrip .cd{display:inline-block;width:60px;text-align:center;color:var(--dim);}
  #compassStrip .cd.card{color:var(--amber);font-weight:bold;}
  #compassMk{position:absolute;left:50%;top:0;width:1px;height:22px;background:var(--amber);}
  /* tooltip */
  #tip{position:fixed;z-index:205;background:var(--panel);border:1px solid var(--line);padding:8px 10px;max-width:200px;pointer-events:none;display:none;box-shadow:0 6px 20px rgba(0,0,0,.6);}
  #tip .tn{font-family:var(--cond);font-size:14px;color:var(--text);}
  #tip .tt{font-family:var(--mono);font-size:10px;color:var(--amber);text-transform:uppercase;letter-spacing:1px;margin:2px 0 5px;}
  #tip .ts{font-family:var(--mono);font-size:11px;color:var(--dim);display:flex;justify-content:space-between;gap:14px;}
  #tip .ts b{color:var(--text);}
  /* comparison tooltip (hovering UNEQUIPPED gear → vs the currently-equipped piece).
     Header band names what we're comparing against; each row shows the delta. */
  #tip .tcmp{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin:1px 0 5px;border-top:1px solid #1c2228;padding-top:5px;}
  #tip .ts .d{font-family:var(--mono);font-size:10px;margin-left:8px;flex:none;}
  #tip .ts .d.up{color:var(--go);} #tip .ts .d.dn{color:var(--bad);} #tip .ts .d.eq{color:var(--dim);}
  /* weapon mod screen */
  .modwrap{display:flex;gap:22px;flex-wrap:wrap;}
  .mtiles{display:flex;flex-wrap:wrap;gap:8px;}
  .mtile{position:relative;width:74px;height:74px;border:1px solid var(--line);border-radius:6px;background:#0d1216;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border-color .1s,transform .05s;}
  .mtile:hover{border-color:var(--amber);transform:translateY(-1px);}
  .mtile .ei{font-size:28px;line-height:1;}
  .mtile .sn{position:absolute;left:0;right:0;bottom:4px;text-align:center;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-size:8px;font-family:var(--mono);}
  .mtile:not(.full) .ei{opacity:.3;} .mtile:not(.full){border-style:dashed;}
  .mtile .x{position:absolute;right:4px;top:3px;color:var(--bad);font-size:11px;}
  .mtile.r-2{box-shadow:inset 0 -3px 0 var(--go);}.mtile.r-3{box-shadow:inset 0 -3px 0 var(--blue);}
  .mtile.r-4{box-shadow:inset 0 -3px 0 var(--purp);}.mtile.r-5{box-shadow:inset 0 -3px 0 var(--amber);}
  .mtile.drop-ok{border-color:var(--go);box-shadow:0 0 12px rgba(87,192,107,.4);}
  .mtile.drop-bad{border-color:var(--bad);}
  /* blueprint gunsmith */
  .bpstage{position:relative;width:100%;max-width:600px;margin:10px auto 0;aspect-ratio:100/60;border:1px solid var(--line);border-radius:8px;
    background:linear-gradient(rgba(111,168,220,.05) 1px,transparent 1px) 0 0/100% 8.333%,
               linear-gradient(90deg,rgba(111,168,220,.05) 1px,transparent 1px) 0 0/5% 100%,
               radial-gradient(ellipse at 50% 42%,#0e1a22,#070b0f);}
  .bpsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
  /* live 3D weapon render — fills the schematic's old space inside .bpstage */
  .gunsmith-3d{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:8px;
    background:radial-gradient(ellipse at 50% 42%,#0e1a22,#070b0f);z-index:1;}
  .bpgun{fill:rgba(232,163,61,.08);stroke:var(--amber);stroke-width:.5;stroke-linejoin:round;}
  .bpline{stroke:rgba(111,168,220,.5);stroke-width:.4;stroke-dasharray:1.4 1.2;}
  .bpline.on{stroke:rgba(232,163,61,.7);}
  .bpdot{fill:var(--blue);} .bpdot.on{fill:var(--amber);}
  .bpdotr{fill:none;stroke:var(--blue);stroke-width:.4;opacity:.5;} .bpdotr.on{stroke:var(--amber);}
  .bpcard{position:absolute;transform:translate(-50%,-50%);width:148px;max-width:42vw;z-index:4;}
  .bphd{display:flex;align-items:center;gap:7px;background:rgba(8,13,17,.96);border:1px solid var(--line);border-radius:6px;padding:6px 8px;cursor:pointer;transition:border-color .1s,box-shadow .1s;}
  .bphd:hover{border-color:var(--amber);}
  .bpcard.filled .bphd{border-color:var(--amber-d);box-shadow:inset 0 -2px 0 var(--amber-d);}
  .bpcard.open .bphd{border-color:var(--amber);}
  /* drag-attach feedback on the gunsmith slot cards (a mod dragged over its slot) */
  .bpcard.drop-ok .bphd{border-color:var(--go);box-shadow:0 0 14px rgba(87,192,107,.5);}
  .bpcard.drop-bad .bphd{border-color:var(--bad);box-shadow:0 0 10px rgba(216,69,62,.35);}
  /* gunsmith drag/detach hint line under the header */
  .bphint{font-family:var(--mono);font-size:10px;letter-spacing:.4px;color:var(--dim);margin:2px 0 0;}
  .bpic{font-size:19px;line-height:1;flex:none;}
  .bptxt{display:flex;flex-direction:column;line-height:1.05;flex:1;min-width:0;}
  .bpsl{font-family:var(--mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);}
  .bpnm{font-family:var(--cond);font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bpcar{color:var(--dim);font-size:9px;flex:none;}
  .bpdrop{margin-top:4px;background:rgba(8,13,17,.99);border:1px solid var(--amber-d);border-radius:6px;max-height:168px;overflow:auto;box-shadow:0 10px 28px rgba(0,0,0,.7);}
  .bpopt{display:flex;align-items:center;gap:7px;padding:7px 9px;font-family:var(--cond);font-size:13px;cursor:pointer;border-bottom:1px solid #151b21;color:var(--text);}
  .bpopt:last-child{border-bottom:none;}
  .bpopt:hover{background:#11181f;color:var(--amber);}
  .bpopt.rem{color:var(--bad);} .bpopt.rem:hover{background:rgba(216,69,62,.12);color:var(--bad);}
  .bpopt.sel{color:var(--amber);} .bpopt.none{color:var(--dim);cursor:default;}
  .bpopt .bpic{font-size:16px;}
  /* gunsmith build-flow: full-catalog dropdown rows carry a name + a price/owned tag */
  .bpopt .bpnm2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bpprice{font-family:var(--mono);font-size:11px;color:var(--amber);margin-left:auto;flex:none;}
  .bpprice.owned{color:var(--go);}
  /* BUILD GUN bar pinned under the stat readout */
  .bpbuildbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
    max-width:600px;margin:14px auto 0;padding-top:12px;border-top:1px solid var(--line);}
  .bpbill{font-family:var(--mono);font-size:12px;color:var(--dim);}
  .bpbill b{color:var(--amber);} .bpbill b.no{color:var(--bad);}
  .btn.build{background:rgba(87,192,107,.10);border-color:var(--go);color:var(--go);font-weight:600;}
  .btn.build:hover{background:rgba(87,192,107,.2);}
  .btn.build.disabled{background:none;border-color:var(--line);color:var(--dim);}
  .bpstats{display:flex;flex-wrap:wrap;gap:6px;max-width:600px;margin:12px auto 0;}
  .bpstat{flex:1 1 80px;border:1px solid #1c2228;border-radius:6px;background:#0c1014;padding:6px 8px;text-align:center;}
  .bpstat .sl{display:block;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;}
  .bpstat .sv{display:block;font-family:var(--cond);font-size:16px;color:var(--text);margin-top:2px;}
  .bpstat .sv.up{color:var(--go);} .bpstat .sv.dn{color:var(--bad);}
  /* vendor shop */
  .shophead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px;}
  .creditpill{font-family:var(--mono);font-size:15px;color:var(--amber);border:1px solid var(--amber-d);border-radius:20px;padding:5px 14px;background:rgba(232,163,61,.08);}
  .tabs{display:flex;gap:6px;margin:12px 0 14px;border-bottom:1px solid var(--line);}
  .tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--dim);font-family:var(--mono);font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:8px 16px;cursor:pointer;}
  .tab.on{color:var(--amber);border-bottom-color:var(--amber);}
  /* VENDOR WINDOW: a stable fixed-height shell. Header + tabs + Close stay PINNED at
     the top; only the item list scrolls inside .shopscroll. So a long Buy/Sell list
     never grows the window or pushes the Close button off-screen. */
  .shopwin{display:flex;flex-direction:column;height:78vh;max-height:78vh;min-height:0;}
  .shopwin .shophead, .shopwin .tabs, .shopwin #vendorClose, .shopwin .repwrap{flex:0 0 auto;}
  .shopscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-top:8px;}
  .shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;}
  .shopcard{position:relative;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,#11171c,#0b0e12);padding:14px 10px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .07s,border-color .1s,box-shadow .1s;}
  .shopcard:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:0 6px 18px rgba(0,0,0,.5);}
  .shopcard.r-2{box-shadow:inset 0 3px 0 var(--go);}.shopcard.r-3{box-shadow:inset 0 3px 0 var(--blue);}
  .shopcard.r-4{box-shadow:inset 0 3px 0 var(--purp);}.shopcard.r-5{box-shadow:inset 0 3px 0 var(--amber);}
  .shopic{font-size:38px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
  .shopnm{font-family:var(--cond);font-size:14px;color:var(--text);line-height:1.1;}
  .shopmeta{font-family:var(--mono);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin:3px 0 9px;}
  .shopbuy{margin-top:auto;width:100%;border:1px solid var(--amber-d);background:rgba(232,163,61,.1);color:var(--amber);font-family:var(--mono);font-size:13px;font-weight:bold;padding:7px 0;border-radius:5px;cursor:pointer;transition:background .1s;}
  .shopbuy:hover{background:rgba(232,163,61,.24);}
  .shopbuy.sell{border-color:var(--go);color:var(--go);background:rgba(87,192,107,.1);}
  .shopbuy.sell:hover{background:rgba(87,192,107,.24);}
  .shopbuy.no{opacity:.35;border-color:var(--line);color:var(--dim);background:none;cursor:not-allowed;}
  .modslot{border:1px solid var(--line);padding:10px 12px;margin-bottom:8px;font-family:var(--mono);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .modslot .sn{color:var(--dim);text-transform:uppercase;letter-spacing:1px;}
  .modslot .sv{color:var(--text);}
  .modslot.empty .sv{color:var(--dim);}
  .modstat{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;padding:4px 0;border-bottom:1px solid #1c2228;}
  .modstat .up{color:var(--go);} .modstat .dn{color:var(--bad);}

  #prompt{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(20,24,28,.92);border:1px solid var(--line);padding:7px 15px;font-size:14px;opacity:0;transition:opacity .1s;font-family:var(--cond);}
  #banner{position:absolute;left:50%;top:24%;transform:translateX(-50%) translateY(-8px);text-align:center;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;}
  #banner.show{opacity:1;transform:translateX(-50%) translateY(0);}
  #banner .bt{font-family:var(--cond);font-weight:800;font-size:40px;letter-spacing:6px;text-transform:uppercase;color:var(--amber);text-shadow:0 2px 18px rgba(0,0,0,.8);}
  #banner .bs{font-family:var(--mono);font-size:13px;letter-spacing:3px;color:var(--text);margin-top:4px;text-transform:uppercase;}
  #banner::before,#banner::after{content:"";position:absolute;top:50%;width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--amber));}
  #banner::before{right:calc(100% + 16px);} #banner::after{left:calc(100% + 16px);transform:scaleX(-1);}
  body.touch #banner .bt{font-size:30px;letter-spacing:4px;}
  #prompt b{color:var(--amber);font-family:var(--mono);}
  /* consumables hotbar (desktop quick-use): bottom-center row of slots, above the
     interact prompt. Hidden by default (display set by UI.refreshConbar). */
  #conbar{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);display:none;gap:8px;pointer-events:auto;z-index:60;}
  .conslot{position:relative;width:52px;height:52px;border:1px solid var(--line);border-radius:7px;background:rgba(8,10,12,.66);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .1s,transform .05s;}
  .conslot:hover{border-color:var(--amber);transform:translateY(-1px);}
  .conslot:active{transform:translateY(0);}
  .conslot .conic{font-size:24px;line-height:1;}
  .conslot .conic img.itemicon{width:30px;height:30px;display:block;}
  .conslot .conkey{position:absolute;top:2px;left:4px;font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:1px;}
  .conslot .conq{position:absolute;bottom:2px;right:4px;font-family:var(--mono);font-size:11px;color:var(--text);font-weight:bold;}
  body.touch #conbar{display:none !important;}
  #feed{position:absolute;left:24px;bottom:70px;width:300px;}
  .toast{font-family:var(--mono);font-size:12px;margin-top:3px;opacity:0;animation:tin .2s forwards;}
  .toast.f{animation:tout .4s forwards;}
  .toast .pos{color:var(--go);}.toast .neg{color:var(--bad);}.toast .neu{color:var(--amber);}.toast .rare{color:var(--purp);}
  @keyframes tin{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
  @keyframes tout{to{opacity:0;}}

  /* ---------- Overlays / menus ---------- */
  .ov{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(12,14,16,.85),rgba(6,7,8,.97));overflow:auto;}
  .ov.show{display:flex;}
  .card{width:560px;max-width:94vw;max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);padding:30px 34px;box-shadow:0 0 0 1px #000,0 30px 80px rgba(0,0,0,.7);}
  .card.wide{width:980px;}
  .eb{font-family:var(--mono);font-size:12px;letter-spacing:4px;color:var(--amber);text-transform:uppercase;}
  .card h1{font-size:42px;font-weight:800;letter-spacing:1px;margin:6px 0 4px;text-transform:uppercase;}
  .card h1.bad{color:var(--bad);} .card h1.good{color:var(--go);}
  .sub{color:var(--dim);font-size:15px;margin-bottom:20px;line-height:1.4;}
  .btn{display:block;width:100%;text-align:left;cursor:pointer;background:#0c0f12;border:1px solid var(--line);color:var(--text);padding:13px 16px;margin-top:9px;font-family:var(--cond);font-size:16px;transition:.1s;position:relative;}
  .btn:hover{border-color:var(--amber);background:#11161a;}
  .btn.disabled{opacity:.4;cursor:not-allowed;}.btn.disabled:hover{border-color:var(--line);background:#0c0f12;}
  .btn .k{font-family:var(--mono);color:var(--amber);margin-right:9px;}
  .btn .cost{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--go);font-size:14px;}
  .btn .cost.cant{color:var(--bad);}
  .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--dim);padding:6px 0;border-bottom:1px solid #1c2228;}
  .row b{color:var(--text);}
  .hint{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:18px;line-height:1.7;}
  .hint b{color:var(--amber);}
  /* account block links (sign out / toggle sign-in↔create) on the start card */
  .acctLink:hover{color:var(--amber)!important;text-decoration:underline;}
  .tabs{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap;}
  .tab{font-family:var(--mono);font-size:12px;letter-spacing:1px;padding:6px 12px;border:1px solid var(--line);color:var(--dim);cursor:pointer;text-transform:uppercase;}
  .tab.on{border-color:var(--amber);color:var(--amber);}

  /* inventory grid (Tarkov-style spatial) */
  .invwrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;}
  .col{min-width:0;}
  .gridscroll{max-height:58vh;overflow:auto;border:1px solid var(--line);}
  .gridscroll::-webkit-scrollbar{width:8px;height:8px;} .gridscroll::-webkit-scrollbar-thumb{background:#2a3138;}
  .colT{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--amber);text-transform:uppercase;margin-bottom:8px;display:flex;justify-content:space-between;}
  .colT .cap{color:var(--dim);}
  .grid{position:relative;background:#0a0c0e;border:1px solid var(--line);}
  .grid.drop-ok{outline:1px solid var(--go);} .grid.drop-bad{outline:1px solid var(--bad);}
  .cell{position:absolute;border:1px solid #181d22;pointer-events:none;}
  .gi{position:absolute;border:1px solid var(--line);background:linear-gradient(155deg,#272d33,#191e23);color:var(--text);overflow:hidden;cursor:grab;display:block;touch-action:none;z-index:2;}
  .gi .ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;filter:saturate(.9);}
  .gi .nm{position:absolute;left:2px;bottom:1px;right:2px;font-family:var(--cond);font-size:9px;line-height:1;color:#aeb6bf;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gi.small .nm{display:none;}
  .gi.small .ic{font-size:24px;}
  .gi .q{position:absolute;right:2px;top:1px;font-family:var(--mono);font-size:10px;color:var(--amber);font-weight:bold;text-shadow:0 0 3px #000;}
  .gi:hover{border-color:var(--amber);}
  .gi.dragging{opacity:.35;}
  .gi.r-1{box-shadow:inset 3px 0 0 var(--dim);}.gi.r-2{box-shadow:inset 3px 0 0 var(--go);}
  .gi.r-3{box-shadow:inset 3px 0 0 var(--blue);}.gi.r-4{box-shadow:inset 3px 0 0 var(--purp);}.gi.r-5{box-shadow:inset 3px 0 0 var(--amber);}
  #dragGhost{position:fixed;z-index:200;pointer-events:none;border:1px solid var(--amber);background:linear-gradient(155deg,rgba(60,68,76,.95),rgba(30,36,42,.95));opacity:.92;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 24px rgba(0,0,0,.6);}
  /* procedural item icons (icons.js) — sized to fill whatever tile/slot hosts them.
     The host elements (.ic/.ei/.shopic/.bpic/#dragGhost) keep their layout; the img
     just fits inside. Always non-draggable so it never starts a native image drag. */
  .itemicon{display:block;width:88%;height:88%;object-fit:contain;image-rendering:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;}
  .gi .ic .itemicon{width:84%;height:84%;}
  .gi.small .ic .itemicon{width:90%;height:90%;}
  .shopic .itemicon{width:54px;height:54px;margin:0 auto;}
  .bpic .itemicon{width:22px;height:22px;}
  .bpopt .bpic .itemicon{width:20px;height:20px;}
  #dragGhost .itemicon{width:100%;height:100%;object-fit:contain;}
  .eslot.wpn .ei .itemicon{width:34px;height:34px;}
  .gearcol{flex:0 0 auto;}
  /* crate staggered-reveal progress strip (loot screen) */
  .lootcolwrap{display:flex;flex-direction:column;}
  .reveal-strip{margin:0 0 6px;}
  .reveal-lab{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--amber);margin-bottom:4px;}
  .reveal-track{height:5px;border-radius:4px;background:#0c0f12;border:1px solid var(--line);overflow:hidden;}
  .reveal-fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber-d,#7a5a18),var(--amber));transition:width .05s linear;}
  @keyframes giPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}
  .grid[data-gk="ext"] .gi{animation:giPop .18s ease-out;}
  .doll{display:grid;grid-template-columns:78px 84px 132px;grid-template-rows:repeat(5,52px);gap:8px;
    grid-template-areas:"helmet fig primary" "armor fig primary" "clothing fig secondary" "rig fig secondary" "backpack fig secondary";}
  .dollfig{grid-area:fig;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #1c2228;border-radius:8px;background:radial-gradient(ellipse at 50% 30%,#161c22,#0c1014);overflow:hidden;}
  /* live 3D mannequin canvas — fills the paper-doll figure cell */
  .doll-3d{position:absolute;inset:0;width:100%;height:100%;display:block;}
  .eslot{position:relative;border:1px solid var(--line);border-radius:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0d1216;transition:border-color .1s,transform .05s,box-shadow .1s;overflow:hidden;}
  .eslot .ei{font-size:28px;line-height:1;filter:saturate(.95);}
  .eslot.wpn{flex-direction:row;gap:8px;justify-content:flex-start;padding:0 10px;}
  .eslot.wpn .ei{font-size:30px;}
  .eslot .sn{position:absolute;left:0;right:0;bottom:3px;text-align:center;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-size:8px;font-family:var(--mono);}
  .eslot.wpn .sn{position:static;text-align:left;font-size:10px;color:#aeb6bf;text-transform:none;letter-spacing:0;}
  .eslot:not(.full) .ei{opacity:.22;} .eslot:not(.full){border-style:dashed;}
  .eslot .q{position:absolute;right:4px;top:3px;font-family:var(--mono);font-size:10px;color:var(--amber);font-weight:bold;text-shadow:0 0 3px #000;}
  .eslot:hover,.eslot.drop-ok{border-color:var(--amber);box-shadow:0 0 10px rgba(232,163,61,.25);}
  .eslot.drop-ok{box-shadow:inset 0 0 0 1px var(--amber);}
  .eslot.full{background:linear-gradient(155deg,#11171c,#0c1014);}
  .eslot.r-2{box-shadow:inset 0 -3px 0 var(--go);}.eslot.r-3{box-shadow:inset 0 -3px 0 var(--blue);}
  .eslot.r-4{box-shadow:inset 0 -3px 0 var(--purp);}.eslot.r-5{box-shadow:inset 0 -3px 0 var(--amber);}
  .gearstats{display:flex;gap:6px;margin-top:10px;}
  .gearstats>div{flex:1;border:1px solid #1c2228;border-radius:6px;padding:6px 4px;text-align:center;background:#0c1014;}
  .gearstats .gl{display:block;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--dim);}
  .gearstats .gv{display:block;font-family:var(--cond);font-size:18px;color:var(--text);margin-top:2px;}
  /* structured corpse loot — two mirrored halves: corpse (left) | you (right) */
  .lootcols{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;}
  .lootside{flex:1 1 360px;min-width:0;}
  .lootside+.lootside{border-left:1px solid var(--line);padding-left:22px;}
  .lootsideT{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin:0 0 10px;}
  .lootside .invwrap{gap:14px;}
  /* a corpse paper-doll is drag-source only: tinted + non-equip cursor on slots */
  .corpsecol .eslot{cursor:grab;}
  .corpsecol .eslot:not(.full){border-color:#241c1c;}
  .corpsecol .dollfig{background:radial-gradient(ellipse at 50% 30%,#1d1518,#100c0d);}
  .actions{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;}
  .actbtns{display:flex;gap:8px;flex-wrap:wrap;}
  .actbtns .btn{width:auto;margin-top:0;padding:8px 12px;font-size:14px;}
  .li{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:13px;padding:9px 4px;border-bottom:1px solid #1c2228;}
  .li .nm{color:var(--text);}.li .meta{color:var(--dim);font-size:11px;}
  .li .pr{color:var(--go);}
  .mini{font-size:11px;color:var(--dim);}
  /* context menu */
  #ctx{position:fixed;z-index:210;background:var(--panel);border:1px solid var(--line);min-width:150px;box-shadow:0 8px 28px rgba(0,0,0,.7);display:none;}
  #ctx .ci{padding:9px 14px;font-family:var(--cond);font-size:14px;cursor:pointer;border-bottom:1px solid #1c2228;}
  #ctx .ci:hover{background:#11161a;color:var(--amber);}
  #ctx .ci.t{color:var(--amber);font-family:var(--mono);font-size:11px;letter-spacing:1px;cursor:default;text-transform:uppercase;}
  /* opened-container (case/bag) contents panel — amber-accented to read as a
     separate "module" sitting beside the player's grids */
  .contpanel{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--amber-d);
    border-radius:6px;background:linear-gradient(160deg,rgba(232,163,61,.06),rgba(10,12,14,.2));box-shadow:0 0 14px rgba(232,163,61,.10);}
  .contpanel .colT span:first-child{color:var(--amber);}
  .contpanel .grid[data-gk="open"] .gi{animation:giPop .16s ease-out;}
  .contpanel .grid.drop-ok{outline:1px solid var(--amber);}
  .closecont{color:var(--dim);cursor:pointer;border-bottom:1px dashed var(--line);}
  .closecont:hover{color:var(--bad);border-color:var(--bad);}
  /* ---- opened-container FLOATING WINDOW (a held case/bag/rig opened from the
     inventory pops as its own draggable, closeable panel — close pinned at the TOP,
     cross-project convention). Multiple may be open at once. Lives above the inv
     overlay but below the drag ghost/ctx/tip so dragging items in/out still reads. */
  .contwin{position:fixed;z-index:150;min-width:160px;background:var(--panel);
    border:1px solid var(--amber-d);border-radius:7px;
    box-shadow:0 14px 40px rgba(0,0,0,.7),0 0 18px rgba(232,163,61,.12);
    display:flex;flex-direction:column;overflow:hidden;}
  .contwin .cwhd{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 10px;background:linear-gradient(160deg,rgba(232,163,61,.10),rgba(10,12,14,.3));
    border-bottom:1px solid var(--amber-d);cursor:grab;touch-action:none;user-select:none;}
  .contwin .cwhd.grabbing{cursor:grabbing;}
  .contwin .cwttl{font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;
    color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;}
  .contwin .cwx{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:5px;color:var(--dim);cursor:pointer;font-size:13px;line-height:1;}
  .contwin .cwx:hover{color:var(--bad);border-color:var(--bad);}
  .contwin .cwbody{padding:10px;overflow:auto;max-height:62vh;}
  .contwin .cwbody .col{min-width:0;} .contwin .cwbody .colT{display:none;}
  .contwin .cwbody .gridscroll{max-height:none;border:none;}
  .contwin .grid.drop-ok{outline:1px solid var(--amber);}
  .contwin .grid[data-gk^="cw:"] .gi{animation:giPop .16s ease-out;}
  .contwin .cwhint{font-size:10px;color:var(--dim);margin-top:6px;}
  /* drop-OUTSIDE-the-window affordance: while a drag is active, dim a thin frame so
     the player can see that releasing out here will DROP the item to the ground. */
  body.inv-dragging #ovInv.show::after{content:"";position:fixed;inset:0;pointer-events:none;
    z-index:1;box-shadow:inset 0 0 0 2px rgba(216,69,62,.0);transition:box-shadow .1s;}
  body.inv-dragging.drop-out #ovInv.show::after{box-shadow:inset 0 0 0 2px rgba(216,69,62,.45);}
  #dropHint{position:fixed;z-index:209;pointer-events:none;display:none;
    padding:5px 11px;border:1px solid var(--bad);border-radius:5px;background:rgba(20,10,10,.92);
    font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--bad);
    box-shadow:0 6px 20px rgba(0,0,0,.6);transform:translate(-50%,-150%);white-space:nowrap;}
  #dropHint.show{display:block;}
  /* settings */
  .set{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #1c2228;font-family:var(--mono);font-size:13px;}
  .set .sl{color:var(--text);} .set .sv{color:var(--dim);}
  .set input[type=range]{width:180px;accent-color:var(--amber);}
  .kbind{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #1c2228;font-family:var(--mono);font-size:13px;}
  .kbind .key{min-width:96px;text-align:center;border:1px solid var(--line);padding:5px 10px;cursor:pointer;color:var(--amber);}
  .kbind .key:hover{border-color:var(--amber);} .kbind .key.bind{border-color:var(--bad);color:var(--bad);}

  /* ============================================================= *
   *  TOUCH HUD — PUBG Mobile-style layout                          *
   *  Safe-area aware, landscape-first, scales 390–900px cleanly.   *
   *  Tokens keep every cluster aligned to the same insets/sizes.   *
   * ============================================================= */
  /* Touch HUD tokens live on :root so BOTH #touch controls and the repositioned
     #hud furniture (credits/objective/compass/ammo/vitals) can read them.
     --combat is the right-thumb cluster's footprint (fire + its action ring),
     used to anchor the centred quick-bar and ammo so nothing ever overlaps. */
  :root{
    --sat:max(10px,env(safe-area-inset-top));
    --sar:max(12px,env(safe-area-inset-right));
    --sab:max(12px,env(safe-area-inset-bottom));
    --sal:max(12px,env(safe-area-inset-left));
    --fire:clamp(80px,15.5vw,110px);  /* fire button diameter      */
    --act:clamp(48px,9vw,62px);       /* action-ring button        */
    --joy:clamp(120px,30vw,170px);    /* joystick base diameter     */
    --combat:calc(var(--fire) + var(--act)*1.6 + 24px); /* cluster reach */
    --tone:rgba(232,163,61,.5);       /* default amber edge         */
    --glass:rgba(14,18,22,.40);       /* control glass fill         */
  }
  #touch{position:fixed;inset:0;z-index:20;pointer-events:none;display:none;font-family:var(--mono);}
  body.touch.playing #touch{display:block;}

  /* ---- shared button base ---- */
  .tb{
    position:absolute;pointer-events:auto;touch-action:none;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:2px solid var(--tone);background:var(--glass);
    color:var(--amber);font-family:var(--mono);font-size:12px;font-weight:bold;
    -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
    backdrop-filter:blur(3px);box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:transform .06s ease,background .08s ease,border-color .08s ease,opacity .12s;
  }
  .tb.active{background:rgba(232,163,61,.30);border-color:var(--amber);transform:scale(.9);}

  /* ---- LEFT THUMB: floating movement joystick ---- */
  #joyZone{position:absolute;left:0;bottom:0;width:42vw;max-width:420px;height:62vh;pointer-events:auto;touch-action:none;z-index:21;}
  #joy{
    position:absolute;left:calc(var(--sal) + 10px);bottom:calc(var(--sab) + 10px);
    width:var(--joy);height:var(--joy);border-radius:50%;
    border:2px solid rgba(232,163,61,.30);background:rgba(20,24,28,.20);
    transition:left .04s linear,bottom .04s linear,opacity .12s;
  }
  #joyR{position:absolute;inset:13%;border-radius:50%;border:1px dashed rgba(232,163,61,.20);}
  /* sprint ring: lights amber when the knob is pushed to the rim (auto-sprint) */
  #joyRun{position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;
    box-shadow:0 0 0 transparent;transition:border-color .1s,box-shadow .12s;pointer-events:none;}
  #joy.run #joyRun{border-color:var(--amber);box-shadow:0 0 16px rgba(232,163,61,.5);}
  #joyK{
    position:absolute;left:50%;top:50%;width:38%;height:38%;
    transform:translate(-50%,-50%);border-radius:50%;
    background:radial-gradient(circle at 38% 34%,rgba(255,214,150,.85),rgba(232,163,61,.55));
    border:2px solid rgba(255,224,170,.9);box-shadow:0 0 14px rgba(232,163,61,.45);
  }

  /* ---- RIGHT THUMB: combat cluster (FIRE + ADS + action ring) ---- */
  /* The cluster is one positioned box; FIRE is its anchor, the four action
     buttons orbit it and ADS tucks above-left, all within a thumb's sweep. */
  #combat{
    position:absolute;right:calc(var(--sar) + 6px);bottom:calc(var(--sab) + 6px);
    width:var(--combat);height:var(--combat);pointer-events:none;z-index:22;
  }
  #bFire{
    right:0;bottom:0;width:var(--fire);height:var(--fire);font-size:0;
    border-color:rgba(216,69,62,.85);background:rgba(46,16,16,.44);
    box-shadow:0 0 18px rgba(216,69,62,.30),0 2px 10px rgba(0,0,0,.4);
  }
  #bFire::before{content:"";width:46%;height:46%;border-radius:50%;border:2px solid rgba(255,154,147,.9);background:rgba(216,69,62,.28);}
  #bFire.active{background:rgba(216,69,62,.5);border-color:#ff9a93;}
  /* ADS sits just above-left of FIRE (right-thumb flick up) */
  #bAds{
    right:calc(var(--fire) + 8px);bottom:calc(var(--fire)*0.62);
    width:var(--act);height:var(--act);font-size:22px;line-height:1;
    color:#cfe6ff;border-color:rgba(111,168,220,.7);background:rgba(16,28,40,.44);
  }
  #bAds.active{background:rgba(111,168,220,.32);border-color:var(--blue);color:#fff;}
  /* action ring: RELOAD (up), JUMP (up-left), CROUCH (left), USE (down-left) —
     a quarter-arc around FIRE so the thumb reaches each with a short pivot. */
  #combat .act{width:var(--act);height:var(--act);font-size:0;}
  #combat .act i{font-style:normal;font-size:clamp(7px,1.5vw,10px);letter-spacing:.4px;}
  #bRld   {right:calc(var(--fire)*0.16);bottom:calc(var(--fire) + 12px);border-color:rgba(232,163,61,.75);}
  #bJump  {right:calc(var(--fire) + var(--act)*0.5 + 12px);bottom:calc(var(--fire) + var(--act)*0.5 + 4px);}
  #bCrouch{right:calc(var(--fire) + var(--act) + 18px);bottom:calc(var(--act)*0.3);}
  #bUse   {right:calc(var(--fire) + var(--act)*0.4 + 10px);bottom:calc(-1*var(--act)*0.05);border-color:rgba(87,192,107,.6);color:var(--go);}
  #bCrouch.active{background:rgba(232,163,61,.30);border-color:var(--amber);}

  /* ---- weapon / throwable quick-bar ---- */
  /* Anchored in the safe band between the joystick (left) and combat cluster
     (right) and CENTRED within it, so it tracks the gap and never drifts into a
     control as the screen narrows. --qbL/--qbR are the band edges. */
  :root{
    --qbL:calc(var(--sal) + var(--joy) + 18px);
    --qbR:calc(100vw - var(--sar) - var(--combat) - 14px);
  }
  #quickbar{
    position:absolute;left:calc((var(--qbL) + var(--qbR))/2);
    bottom:calc(var(--sab) + 6px);transform:translateX(-50%);
    display:flex;gap:8px;pointer-events:none;z-index:21;
  }
  .qslot{
    pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;
    width:clamp(56px,11.5vw,78px);min-height:46px;padding:5px 4px 4px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    border:1px solid var(--line);border-radius:10px;background:rgba(12,15,19,.55);
    backdrop-filter:blur(3px);transition:border-color .08s,background .08s,transform .06s,opacity .12s;
  }
  .qslot.on{border-color:var(--amber);background:rgba(232,163,61,.14);box-shadow:inset 0 -2px 0 var(--amber-d);}
  .qslot.active{transform:scale(.94);}
  .qslot .qi{font-size:18px;line-height:1;color:var(--amber);}
  .qslot .ql{font-size:8px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;}
  .qslot .qa{font-size:12px;font-weight:bold;color:var(--text);}
  #qbNade .qi{color:var(--purp);} #qbMed .qi{color:var(--go);}
  .qslot.empty{opacity:.4;} .qslot.empty .qa{color:var(--dim);}

  /* ---- top-right utility (fire-mode + bag) ---- */
  #utilpad{position:absolute;right:var(--sar);top:var(--sat);display:flex;gap:7px;pointer-events:none;z-index:22;}
  #utilpad .tb{position:relative;pointer-events:auto;width:clamp(48px,9vw,60px);height:38px;border-radius:10px;font-size:11px;}

  /* ---- top-left kills / alive ---- */
  #killbar{
    position:absolute;left:calc(var(--sal) + 108px);top:var(--sat);
    display:flex;align-items:center;gap:10px;pointer-events:none;z-index:22;
    border:1px solid var(--line);border-radius:9px;background:rgba(12,15,19,.5);
    padding:5px 11px;backdrop-filter:blur(3px);
  }
  #killbar .kb{display:flex;flex-direction:column;align-items:center;line-height:1;}
  #killbar .kb span{font-size:17px;font-weight:bold;color:var(--amber);}
  #killbar .kb:nth-child(3) span{color:var(--bad);}
  #killbar .kb i{font-style:normal;font-size:8px;letter-spacing:1.5px;color:var(--dim);margin-top:2px;}
  #killbar .kbsep{width:1px;height:22px;background:var(--line);}

  #rot{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;text-align:center;background:#06070a;color:var(--amber);font-family:var(--mono);font-size:18px;letter-spacing:2px;padding:40px;}
  @media(orientation:portrait){body.touch #rot{display:flex;}}

  /* ---- mobile HUD repositioning (around the touch furniture) ---- */
  body.touch #mapwrap{left:var(--sal,max(10px,env(safe-area-inset-left)));right:auto;top:max(10px,env(safe-area-inset-top));width:92px;height:92px;}
  body.touch #minimap{width:92px;height:92px;}
  /* top-centre stack (no overlaps): compass → objective, vertically spaced */
  body.touch #threats{display:none;}                 /* superseded by #killbar */
  body.touch #compass{display:block;top:var(--sat,8px);width:min(54vw,300px);}
  body.touch #obj{left:50%;right:auto;transform:translateX(-50%);top:calc(var(--sat,8px) + 30px);max-width:min(48vw,260px);text-align:center;}
  body.touch #objT{font-size:10px;letter-spacing:2px;}
  body.touch #objX{font-size:12px;} body.touch #zone{font-size:9px;}
  /* credits: a compact single-line pill, tucked top-right just left of #utilpad */
  body.touch #wallet{left:auto;right:calc(var(--sar) + 2*clamp(48px,9vw,60px) + 7px + 12px);top:calc(var(--sat) + 5px);transform:none;text-align:right;display:flex;align-items:baseline;gap:7px;}
  body.touch #cr{font-size:15px;} body.touch #crL{display:none;} body.touch #lvl{margin-top:0;font-size:11px;}
  /* vitals: bottom-left, above the joystick */
  body.touch #vit{left:max(12px,env(safe-area-inset-left));right:auto;transform:none;bottom:calc(var(--joy) + var(--sab) + 22px);}
  body.touch .bw{width:min(38vw,180px);} body.touch .bw.sm{width:min(26vw,120px);}
  /* ammo readout: bottom-centre, just above the quick-bar (current weapon) */
  body.touch #ammo{right:auto;left:calc((var(--qbL) + var(--qbR))/2);transform:translateX(-50%);top:auto;bottom:calc(var(--sab) + 60px);text-align:center;display:flex;flex-direction:column;align-items:center;}
  body.touch #ammo #amN{font-size:clamp(22px,5.2vw,34px);line-height:.9;}
  body.touch #ammo #wpn{font-size:10px;} body.touch #ammo #fmode{font-size:10px;}
  body.touch #ammo #slots{display:none;}              /* superseded by quick-bar */
  body.touch #ammo #nade{display:none;}
  body.touch #feed{left:var(--sal,12px);right:auto;transform:none;bottom:auto;top:calc(var(--sat) + 96px);width:44vw;text-align:left;}
  body.touch #prompt{bottom:calc(var(--joy) + var(--sab) + 76px);}
  @media(max-width:860px){
    #amN{font-size:30px;}.bw{width:150px;}#cr{font-size:18px;}#objX{font-size:13px;}#obj{max-width:200px;}
    .card{width:min(94vw,460px);padding:20px 22px;}.card.wide{width:96vw;}.card h1{font-size:30px;}
  }
  /* tight phones in landscape: trim the quick-bar so it never collides */
  @media(max-height:420px){
    body.touch #ammo{bottom:calc(var(--sab) + 54px);}
    #quickbar .ql{display:none;} .qslot{min-height:42px;}
  }
  /* narrow landscape (≤720px): shrink control metrics so the centred quick-bar
     can never overlap the right-hand combat cluster. */
  @media(max-width:720px){
    :root{--fire:clamp(72px,13.5vw,98px);--act:clamp(44px,8vw,58px);--joy:clamp(110px,26vw,150px);}
    .qslot{width:clamp(52px,10vw,66px);} #quickbar{gap:6px;}
  }
  /* mobile inventory: fill screen, stack columns, comfortable scrolling */
  @media(max-width:760px){
    .card.wide{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:14px 12px calc(14px + env(safe-area-inset-bottom));overflow:auto;}
    .invwrap{gap:12px;}
    .col{flex:1 1 100%;}
    .gridscroll{max-height:none;}
    .eslots{justify-content:flex-start;}
    /* stack the corpse | you halves vertically on narrow screens */
    .lootcols{gap:14px;}
    .lootside{flex:1 1 100%;}
    .lootside+.lootside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;}
    /* floating container windows: keep them on-screen + scrollable on phones */
    .contwin{max-width:94vw;} .contwin .cwbody{max-height:52vh;}
  }

  /* ============================================================= *
   *  POLISH PASS — accessibility, states, motion, cohesion        *
   *  (additive: lives at the end so it overlays the rules above)   *
   * ============================================================= */

  /* ---- keyboard focus rings (none existed) — amber halo, never on mouse ---- */
  .btn:focus-visible,.tab:focus-visible,.shopbuy:focus-visible,.set input:focus-visible,
  .key:focus-visible,.eslot:focus-visible,.mtile:focus-visible,.qslot:focus-visible,
  .ci:focus-visible,.bphd:focus-visible,.bpopt:focus-visible{
    outline:2px solid var(--amber);outline-offset:2px;border-radius:4px;
  }
  /* don't double up the default focus on overlay scroll containers */
  .ov:focus,.card:focus,.gridscroll:focus{outline:none;}

  /* ---- consistent disabled affordance across every actionable control ---- */
  .btn.disabled,.shopbuy.no,.shopbuy:disabled,.tab:disabled,.bpopt.none{
    cursor:not-allowed;
  }
  button:disabled{cursor:not-allowed;}
  .btn:not(.disabled),.tab,.shopbuy:not(.no),.key,.eslot,.mtile,.qslot,.ci,.bphd,.bpopt:not(.none){cursor:pointer;}

  /* ---- press / active feedback on the menu buttons (was hover-only) ---- */
  .btn:not(.disabled):active{transform:translateY(1px);background:#0e1419;}
  .tab:active{opacity:.85;}
  .shopbuy:not(.no):active{transform:translateY(1px);}
  .key:active{transform:translateY(1px);}

  /* ---- richer hover on the credit pill + reputation header ---- */
  .creditpill{transition:border-color .12s,background .12s;}

  /* ---- card entrance: a quick rise+fade so overlays don't pop in hard ---- */
  .ov.show .card{animation:cardIn .18s ease-out both;}
  @keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.992);}to{opacity:1;transform:none;}}

  /* ---- unify scrollbars across every overlay (only .gridscroll had them) ---- */
  .ov,.card,.bpdrop{scrollbar-width:thin;scrollbar-color:#2a3138 transparent;}
  .ov::-webkit-scrollbar,.card::-webkit-scrollbar,.bpdrop::-webkit-scrollbar{width:9px;height:9px;}
  .ov::-webkit-scrollbar-thumb,.card::-webkit-scrollbar-thumb,.bpdrop::-webkit-scrollbar-thumb{background:#2a3138;border-radius:5px;}
  .ov::-webkit-scrollbar-thumb:hover,.card::-webkit-scrollbar-thumb:hover{background:#3a434c;}
  .ov::-webkit-scrollbar-track,.card::-webkit-scrollbar-track{background:transparent;}

  /* ---- low-ammo readout gently pulses so it reads in peripheral vision ---- */
  #amN.low .mg{animation:lowAmmo 1s ease-in-out infinite;}
  @keyframes lowAmmo{50%{opacity:.45;}}

  /* ---- empty-state helper (used by inventory/vendor/loot empty messages) ---- */
  .emptyState{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center;
    padding:26px 14px;border:1px dashed var(--line);border-radius:8px;background:rgba(10,12,14,.4);line-height:1.6;}
  .emptyState .ic{display:block;font-size:30px;opacity:.5;margin-bottom:8px;}

  /* ---- "coming soon" placeholder chip — clean, clearly-labeled, never a dead end ---- */
  .soon{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
    letter-spacing:1px;text-transform:uppercase;color:var(--dim);border:1px dashed var(--line);
    border-radius:20px;padding:3px 10px;background:rgba(10,12,14,.4);}
  .soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.7;}

  /* ============================================================= *
   *  prefers-reduced-motion — honor the OS setting (was unhandled) *
   *  kill transitions/animations; keep instant state changes.     *
   * ============================================================= */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important;scroll-behavior:auto !important;
    }
    .ov.show .card{animation:none;}
    #amN.low .mg{animation:none;}
    #banner{transition:opacity .001ms;}
  }