/* In-raid HUD (built by hud.js buildHud), layout "R1", skin "art v1" (2026-09-27, docs/art/mockups-v1/6-raid.webp):
   the phase-1 design system (theme.css) brought into the raid: chunky glossy round buttons with thick navy outlines and
   painted icon art, Lilita One display numbers with an outline, navy slabs that read over a bright sunny 3D world.
   Layout is unchanged: top = raid gold (left) · timer + kills (centre) · compass (right). Bottom = DRIVE stick (canvas,
   hud.js drawStick) with the FRAME / FUEL rim gauges (#hRim), the health bar (#hHp) on top of a 3×2 grid of round
   buttons (#hGrid). --gs is one grid cell, --deckH the grid's height, --deckB its gap to the bottom edge;
   hud.js hudLayout puts the stick's rest spot level with the grid. */
#hud { --sb:env(safe-area-inset-bottom, 0px); --st:env(safe-area-inset-top, 0px); --gs:58px; --gg:12px; --deckH:calc(var(--gs) * 2 + var(--gg)); --deckB:calc(var(--sb) + 16px);
  --ol:#0b1a33; --fh:"Lilita One","Nunito","Arial Rounded MT Bold",system-ui,sans-serif; --fb:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gold:#ffd23f; --tx:#fff; --mut:#bcd6f5; --line:rgba(8,20,45,.9); --line2:#0b1a33; --panel:#0d2a55; --panel2:#2462ad; --acc:#ff7a1f;
  --so:0 2px 0 var(--ol),0 -1.5px 0 var(--ol),1.5px 0 0 var(--ol),-1.5px 0 0 var(--ol),1.5px 1.5px 0 var(--ol),-1.5px 1.5px 0 var(--ol),1.5px -1.5px 0 var(--ol),-1.5px -1.5px 0 var(--ol),0 3px 0 var(--ol);
  --so2:0 1.5px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol),1px 1px 0 var(--ol),-1px 1px 0 var(--ol),1px -1px 0 var(--ol),-1px -1px 0 var(--ol),0 2px 0 var(--ol);
  --slab:linear-gradient(180deg,#24508f,#12305e 70%,#0e2750); --slabSh:inset 0 2px 0 rgba(140,205,255,.35),0 3px 0 var(--ol),0 5px 12px rgba(0,0,0,.3);
  position:absolute; inset:0; pointer-events:none; display:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; font-family:var(--fb); font-weight:800; color:#fff; }
#cv { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#hud > * { pointer-events:auto; }
/* a soft scrim so the control deck reads as one unit over a bright world */
#hud::before { content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--deckB) + var(--deckH) + 70px); background:linear-gradient(0deg, rgba(8,20,45,.42), rgba(8,20,45,.16) 55%, rgba(8,20,45,0)); pointer-events:none; }
#hud.plane::before { display:none; }
#hud button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#hud .art { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
#hud img.art { object-fit:contain; }
#hud .coin { display:inline-block; width:1.05em; height:1.05em; border-radius:50%; flex:none; vertical-align:-.16em;
  background:url("../assets/ui/coin.webp") center/contain no-repeat, radial-gradient(circle at 36% 30%,#fff6c4 0 12%,#ffd84a 32%,#f0a818 70%,#b5700a 100%); }

/* ---------- top: raid gold (left) · timer + kills (centre) · compass (right) ---------- */
#hTop { position:absolute; top:calc(10px + var(--st)); left:0; right:0; height:0; pointer-events:none; }
#hTimerBox { position:absolute; left:50%; top:0; z-index:2; transform:translateX(-50%); min-width:120px; box-sizing:border-box; text-align:center; border-radius:16px; padding:4px 16px 5px; pointer-events:none;
  background:var(--slab); border:3px solid var(--ol); box-shadow:var(--slabSh); }
#hTimerBox .cap { font:400 11px/1 var(--fh); letter-spacing:.6px; color:#bfe0ff; text-shadow:0 1.5px 0 var(--ol); margin-bottom:1px; }
#hTime { font:400 32px/1 var(--fh); letter-spacing:.5px; color:#fff; font-variant-numeric:tabular-nums; text-shadow:var(--so); }
#hTimerBox.warn #hTime { color:#ffd23f !important; }
#hTimerBox.crit { background:linear-gradient(180deg,#b8321f,#7a160c); animation:lowHp .8s ease-in-out infinite alternate; }
#hTimerBox.crit .cap { color:#ffd9cf; } #hTimerBox.crit #hTime { color:#fff !important; }
/* the practice raid (tour.js) has no clock: its "PRACTICE RAID" caption replaces both the time and this cap */
body.touring #hTimerBox .cap { display:none; }
#hEx, #hHead, #hHeatTag { display:none !important; }
/* kills: a darker slab tucked under the timer (skull + count) */
#hKills { position:absolute; left:50%; top:54px; z-index:1; transform:translateX(-50%); height:30px; box-sizing:border-box; display:flex; align-items:center; gap:5px; padding:6px 12px 0 7px; border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#0c2146,#0a1a38); border:3px solid var(--ol); border-top:0; box-shadow:0 3px 0 var(--ol), 0 5px 10px rgba(0,0,0,.3); pointer-events:none; }
#hKills.off { display:none; }
#hKills .hkSk { width:22px; height:22px; font-size:15px; margin-top:-3px; filter:drop-shadow(0 1.5px 0 var(--ol)); }
#hKills b { font:400 17px/1 var(--fh); color:#ffd23f; text-shadow:var(--so2); font-variant-numeric:tabular-nums; margin-top:-3px; }
#hKills.pop b { animation:kPop .3s ease-out; }
@keyframes kPop { 40% { transform:scale(1.35); color:#fff; } }
/* compass: fixed rose (north up, like the map), needle = the way the car faces, green notch = waypoint / nearest extract */
#hCompass { position:absolute; right:8px; top:-2px; width:76px; height:76px; border-radius:50%; pointer-events:none; filter:drop-shadow(0 3px 0 var(--ol)) drop-shadow(0 5px 8px rgba(0,0,0,.3)); }
#hCompass svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#hCompass .rim { fill:url(#cRim); stroke:var(--ol); stroke-width:2.6; }
#hCompass .bg { fill:url(#cFace); stroke:var(--ol); stroke-width:2; }
#hCompass .gl { fill:none; stroke:rgba(255,255,255,.45); stroke-width:2.2; stroke-linecap:round; }
#hCompass .tk { stroke:rgba(11,26,51,.45); stroke-width:1.1; stroke-linecap:round; } #hCompass .tk.big { stroke:rgba(11,26,51,.7); stroke-width:1.6; }
#hCompass .cb circle { fill:#0e2750; stroke:var(--ol); stroke-width:1.4; }
#hCompass .cb.n circle { fill:#e8392a; }
#hCompass .cb text { font:400 7.4px var(--fh); text-anchor:middle; dominant-baseline:middle; fill:#fff; }
#hCompass .nd { fill:url(#cNd); stroke:var(--ol); stroke-width:1.3; stroke-linejoin:round; } #hCompass .nd2 { fill:#e8f1fa; stroke:var(--ol); stroke-width:1.3; stroke-linejoin:round; }
#hCompass .hub { fill:#fff; stroke:var(--ol); stroke-width:1.3; }
#hCompass .way { fill:#7ff05a; stroke:var(--ol); stroke-width:1.2; stroke-linejoin:round; }
/* raid gold */
#hGold { position:absolute; top:calc(10px + var(--st) + 14px); left:22px; height:30px; box-sizing:border-box; display:flex; align-items:center; gap:4px; padding:0 10px 0 20px; border-radius:15px;
  background:linear-gradient(180deg,#0c2448,#12325f); border:3px solid var(--ol); box-shadow:inset 0 2px 0 rgba(0,0,0,.3), 0 3px 0 var(--ol), 0 5px 10px rgba(0,0,0,.25);
  font:400 16px/1 var(--fh); letter-spacing:.3px; color:#fff; text-shadow:var(--so2); pointer-events:none; max-width:calc(50% - 94px); white-space:nowrap; }
#hGold .coin { position:absolute; left:-15px; top:50%; width:32px; height:32px; margin-top:-16px; filter:drop-shadow(0 2px 0 var(--ol)); }
#hGoldFx { font:900 11px var(--fb); text-shadow:0 1px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol); color:#bfe0ff; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#hGoldFx:empty { display:none; }
#hFeed { position:absolute; top:calc(10px + var(--st) + 90px); right:10px; text-align:right; font:900 12px/1.35 var(--fb); pointer-events:none; max-width:60%;
  text-shadow:0 1.5px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol),1px 1px 0 var(--ol),-1px 1px 0 var(--ol),1px -1px 0 var(--ol),-1px -1px 0 var(--ol),0 2px 3px rgba(0,0,0,.5); }

/* ---------- messages ---------- */
/* All notices live in the top band under the timer, small, so the middle of the screen (the car, the fight) stays clear.
   Toasts: max 2, short. Banner (big callouts): just under the kills pill. */
#hMsgs { position:absolute; top:calc(10px + var(--st) + 124px); left:20%; right:20%; display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; }
#hud .toast { background:linear-gradient(180deg,rgba(24,58,108,.9),rgba(12,34,70,.9)); border:2px solid var(--ol); padding:3px 10px 4px; border-radius:10px; font:900 11.5px/1.2 var(--fb); max-width:100%; text-align:center; animation:tin .25s cubic-bezier(.3,1.6,.6,1);
  box-shadow:inset 0 2px 0 rgba(140,205,255,.3), 0 3px 0 var(--ol), 0 6px 14px rgba(0,0,0,.3); text-shadow:0 1.5px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol); }
@keyframes tin { from { transform:translateY(8px) scale(.9); opacity:0; } }
#hBanner { position:absolute; top:calc(10px + var(--st) + 90px); left:0; right:0; text-align:center; font:400 21px/1.1 var(--fh); letter-spacing:.5px; opacity:0; pointer-events:none; padding:0 12px;
  text-shadow:0 3px 0 var(--ol),0 -2px 0 var(--ol),2px 0 0 var(--ol),-2px 0 0 var(--ol),2px 2px 0 var(--ol),-2px 2px 0 var(--ol),2px -2px 0 var(--ol),-2px -2px 0 var(--ol),0 5px 0 var(--ol),0 8px 14px rgba(0,0,0,.35); }
#hBanner.show { animation:ban 2.4s ease-out; }
/* location callout on arriving at a place (hud.js updatePoiCallout, decision 28): small, top centre, fades out by itself */
#hPoi { position:absolute; top:calc(10px + var(--st) + 128px); left:50%; transform:translateX(-50%); padding:4px 14px 5px; border-radius:999px; background:rgba(8,16,28,.5); color:#fff; font:400 16px/1.1 var(--fh); letter-spacing:1.2px; white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.5); opacity:0; pointer-events:none; }
#hPoi span { font:800 12px var(--fb); letter-spacing:.2px; color:#d8e6f2; }
#hPoi.show { animation:poiIn 3.8s ease-out forwards; }
@keyframes poiIn { 0% { opacity:0; transform:translate(-50%,-6px); } 10% { opacity:1; transform:translate(-50%,0); } 78% { opacity:1; } 100% { opacity:0; } }
#hud.ovOpen #hPoi, #hud.plane #hPoi { visibility:hidden; }
/* Radio Hill FM DJ card (hud.js hudDJ) */
#hDJ { position:absolute; top:calc(10px + var(--st) + 128px); left:50%; width:min(360px, calc(100% - 28px)); transform:translate(-50%, -12px); display:flex; gap:10px; align-items:center; padding:8px 12px 8px 8px; border-radius:16px; background:rgba(12,34,54,.92); box-shadow:0 0 0 2px #0a1c2c, 0 0 0 4px #ffc83d, 0 6px 16px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .35s, transform .35s; }
#hDJ.show { opacity:1; transform:translate(-50%, 0); }
#hDJ img { width:48px; height:48px; border-radius:50%; flex:none; background:#2aa8a0; box-shadow:0 0 0 2px #0a1c2c; }
#hDJ b { display:flex; align-items:center; gap:6px; font:400 12px/1 var(--fh); letter-spacing:1.2px; color:#ffc83d; }
#hDJ b i { width:8px; height:8px; border-radius:50%; background:#ff3b30; box-shadow:0 0 6px #ff3b30; animation:djAir 1s steps(2) infinite; }
#hDJ span { display:block; margin-top:4px; font:700 13px/1.3 var(--fb, Nunito, system-ui); color:#eef5f8; }
@keyframes djAir { 50% { opacity:.25; } }
#hud.ovOpen #hDJ, #hud.plane #hDJ { visibility:hidden; }
@keyframes ban { 0% { opacity:0; transform:scale(1.6); } 9% { opacity:1; transform:scale(.94); } 14% { transform:scale(1.04); } 20% { transform:scale(1); } 75% { opacity:1; } 100% { opacity:0; } }
/* kill combo (hud.js updateCombo): "x7 COMBO" on the left edge, pops on each kill, fades when the chain ends */
#hCombo { position:absolute; left:12px; top:calc(10px + var(--st) + 104px); display:flex; flex-direction:column; align-items:flex-start; opacity:0; pointer-events:none; transform-origin:0 50%; }
#hCombo b { font:400 28px/1 var(--fh); color:#ffd23f; letter-spacing:.5px; font-variant-numeric:tabular-nums;
  text-shadow:0 3px 0 var(--ol),0 -2px 0 var(--ol),2px 0 0 var(--ol),-2px 0 0 var(--ol),2px 2px 0 var(--ol),-2px 2px 0 var(--ol),0 5px 10px rgba(0,0,0,.35); }
#hCombo span { font:400 11px/1 var(--fh); color:#fff; letter-spacing:1.5px; margin:1px 0 0 3px; text-shadow:0 2px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol); }
#hCombo.show { opacity:1; }
#hCombo.pop { animation:cPop .28s cubic-bezier(.3,1.6,.6,1); }
#hCombo.hot b { color:#ff8a3a; }
#hCombo.out { opacity:0; transition:opacity .6s ease-out; }
/* Road Rage (hud.js updateRage): drain bar under the label, gold multiplier under that */
#hCombo i { display:block; width:86px; height:6px; margin:4px 0 0 2px; border-radius:4px; background:rgba(10,20,34,.75); box-shadow:0 0 0 2px var(--ol); overflow:hidden; }
#hCombo u { display:block; height:100%; background:linear-gradient(90deg,#ff5a1f,#ffc83d); transform-origin:0 50%; }
#hCombo em { font:400 12px/1 var(--fh); font-style:normal; color:#ffd23f; letter-spacing:1px; margin:4px 0 0 3px; text-shadow:0 2px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol); }
@keyframes cPop { 0% { transform:scale(1.45); } 100% { transform:scale(1); } }
#hud.ovOpen #hCombo, #hud.plane #hCombo { visibility:hidden; }
/* Game Master banner (hudGmBanner): purple tag + message, below the normal banner, stays a little longer */
#hGm { --gm:#c77dff; position:absolute; top:calc(10px + var(--st) + 118px); left:14px; right:14px; display:flex; flex-direction:column; align-items:center; gap:0; opacity:0; pointer-events:none; text-align:center; }
#hGm.show { animation:gmban 4.6s ease-out; }
#hGm .gmTag { position:relative; z-index:1; margin-bottom:-6px; font:400 12px/1 var(--fh); letter-spacing:2px; color:#fff; text-shadow:var(--so2); padding:5px 12px 6px 14px; border-radius:10px; border:2.5px solid var(--ol);
  background:linear-gradient(180deg,color-mix(in srgb, var(--gm) 70%, #fff),var(--gm) 60%,color-mix(in srgb, var(--gm) 70%, #000)); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--ol); }
#hGm .gmTxt { font:900 13px/1.25 var(--fb); color:#fff; background:linear-gradient(180deg,#3a1c66,#241046); border:2.5px solid var(--ol); border-radius:12px; padding:8px 12px 6px; max-width:100%; overflow-wrap:anywhere;
  text-shadow:0 1.5px 0 var(--ol),0 -1px 0 var(--ol),1px 0 0 var(--ol),-1px 0 0 var(--ol); box-shadow:inset 0 2px 0 rgba(220,180,255,.35), inset 0 0 0 2px color-mix(in srgb, var(--gm) 45%, transparent), 0 3px 0 var(--ol), 0 0 24px color-mix(in srgb, var(--gm) 45%, transparent); }
@keyframes gmban { 0% { opacity:0; transform:translateY(-10px) scale(1.15); } 8% { opacity:1; transform:none; } 82% { opacity:1; } 100% { opacity:0; } }
#hPrompt { display:none !important; }
#hGuide { position:absolute; top:calc(10px + var(--st) + 96px); left:14px; right:14px; margin:0 auto; max-width:330px; box-sizing:border-box; background:linear-gradient(180deg,#ffb43c,#ff7a1a 60%,#ec5a1c); color:#fff; border:3px solid #5a1a05; border-radius:16px;
  padding:7px 12px 8px; font:900 12.5px/1.3 var(--fb); text-align:center; display:none; pointer-events:none; box-shadow:inset 0 2px 0 rgba(255,240,200,.6), 0 3px 0 #5a1a05, 0 6px 14px rgba(0,0,0,.3);
  text-shadow:0 1.5px 0 #6a2208,0 -1px 0 #6a2208,1px 0 0 #6a2208,-1px 0 0 #6a2208; }
#hGuide b { display:inline-block; font:400 12px/1 var(--fh); color:#6a3a00; text-shadow:none; background:linear-gradient(180deg,#fff27a,#ffc21a); border:2px solid #6a3a00; border-radius:8px; padding:2px 6px 3px; margin-right:5px; vertical-align:1px; }
/* status of a running hold (loot / repair / refuel): above the controls, never over the car */
#hStatus { position:absolute; left:50%; bottom:calc(var(--deckB) + var(--deckH) + 52px); transform:translateX(-50%); background:var(--slab); border:3px solid var(--ol); color:#ffd23f; padding:6px 14px 7px; border-radius:16px;
  font:400 14px/1 var(--fh); letter-spacing:.3px; white-space:nowrap; display:none; pointer-events:none; box-shadow:var(--slabSh); text-shadow:var(--so2); }

/* ---------- centre callouts (#hXt): extraction countdown · closed extract · WRECKED ---------- */
#hud > #hXt { position:absolute; left:50%; top:25%; transform:translateX(-50%); display:none; pointer-events:none; text-align:center; z-index:1; }
#hud > #hXt.show { display:block; animation:xtIn .3s cubic-bezier(.3,1.6,.6,1); }
@keyframes xtIn { from { transform:translateX(-50%) scale(.6); opacity:0; } }
#hXt .xtC { font:400 13px/1.1 var(--fh); letter-spacing:.4px; color:#fff; text-shadow:var(--so2); white-space:nowrap; }
#hXt .xtN { font:400 44px/1 var(--fh); color:#fff; font-variant-numeric:tabular-nums; text-shadow:var(--so); margin:2px 0 5px; }
#hXt .xtB { width:170px; height:14px; margin:0 auto; border:3px solid var(--ol); border-radius:9px; background:#0b2346; overflow:hidden; box-shadow:0 2px 0 var(--ol); }
#hXt .xtB i { display:block; height:100%; width:0; background:linear-gradient(180deg,#d8ffb0,#7ff05a 45%,#35ae22); border-radius:6px; }
#hXt.go { padding:8px 18px 12px; border-radius:20px; background:linear-gradient(180deg,rgba(66,168,40,.94),rgba(24,104,22,.94)); border:3px solid var(--ol); box-shadow:inset 0 2px 0 rgba(230,255,210,.55), 0 4px 0 var(--ol), 0 0 30px rgba(127,240,90,.45); }
#hXt.go .xtC { color:#eaffdc; }
#hXt.no { padding:7px 14px 8px; border-radius:16px; background:linear-gradient(180deg,#ffe467,#ffbe1a 55%,#f39a0c); border:3px solid #6a3a00; box-shadow:inset 0 2px 0 rgba(255,255,230,.7), 0 3px 0 #6a3a00, 0 6px 14px rgba(0,0,0,.3); }
#hXt.no .xtC { color:#6a3a00; text-shadow:none; font-size:14px; }
#hXt.no .xtN { font:900 13px/1.25 var(--fb); color:#4a2600; text-shadow:none; margin:1px 0 0; max-width:260px; white-space:normal; }
#hXt.no .xtB, #hXt.dead .xtB, #hXt.dead .xtC { display:none; }
#hud > #hXt.dead { top:38%; }
#hXt.dead .xtN { font-size:52px; color:#ff5a44; letter-spacing:1px; text-shadow:0 3px 0 var(--ol),0 -2.5px 0 var(--ol),2.5px 0 0 var(--ol),-2.5px 0 0 var(--ol),2.5px 2.5px 0 var(--ol),-2.5px 2.5px 0 var(--ol),2.5px -2.5px 0 var(--ol),-2.5px -2.5px 0 var(--ol),0 6px 0 var(--ol); }

/* ---------- plane phase caption (#hPlaneCap): covers render.js's canvas caption band (H-150 … H-74) ---------- */
#hud > #hPlaneCap { position:absolute; left:0; right:0; bottom:66px; height:90px; box-sizing:border-box; display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0 14px; pointer-events:none; text-align:center;
  background:linear-gradient(180deg,#1d4c8c,#12305e 60%,#0d2750); border-top:3px solid var(--ol); border-bottom:3px solid var(--ol); box-shadow:inset 0 2px 0 rgba(140,205,255,.35), 0 3px 0 rgba(0,0,0,.25); }
#hud > #hPlaneCap.show { display:flex; }
#hPlaneCap .pcH { font:400 19px/1.05 var(--fh); letter-spacing:.3px; color:#ffd23f; text-shadow:var(--so); }
#hPlaneCap.ok .pcH { color:#7ff05a; } #hPlaneCap.short .pcH { color:#ffab4a; }
#hPlaneCap .pcS { font:800 12.5px/1.3 var(--fb); color:#dbe9fa; text-shadow:0 1.5px 0 var(--ol); max-width:360px; }

/* ---------- life + fuel (above the button grid): one slim joined bar, life on top, fuel under it, a car badge on the left.
   (The rings round the stick are gone: #hRim stays in the DOM for the stick layout but is never shown.) ---------- */
#hud > #hRim { display:none !important; }
#hud > #hHp { position:absolute; right:12px; bottom:calc(var(--deckB) + var(--deckH) + 14px); width:calc(var(--gs) * 3 + var(--gg) * 2 - 12px); height:18px; display:flex; align-items:center; gap:5px; pointer-events:none; }
#hud.stickR > #hHp { right:auto; left:24px; }
#hHp .hh { position:absolute; left:-15px; top:50%; width:26px; height:26px; margin-top:-13px; z-index:2; color:#7ff05a; filter:drop-shadow(0 1.5px 0 var(--ol)); transition:color .3s; }
#hHp .hh svg { width:100%; height:100%; display:block; }
#hHp .hb { position:relative; flex:1; height:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:2px; padding:2px 2px 2px 12px; border:2.5px solid var(--ol); border-radius:9px; background:#0b2346; box-shadow:0 2px 0 var(--ol), 0 4px 8px rgba(0,0,0,.25); }
#hHp .hr, #hHp .fr { position:relative; min-height:0; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.08); }
#hHp .hr { flex:1.4; } #hHp .fr { flex:1; }
#hHp .hb i { position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; }
#fuFill { background:linear-gradient(180deg,#ffe08a,#ffb23a 50%,#e0820a); transition:width .3s linear; }
#hVit .fu.low { animation:fuBlink .9s steps(2,jump-none) infinite; }
@keyframes fuBlink { 0%{opacity:1} 50%{opacity:.25} 100%{opacity:1} }
#hHp.fuLow #fuFill { background:linear-gradient(180deg,#ffb4a0,#ff5a44); animation:rimPulse .8s ease-in-out infinite; }
#hpTx { flex:none; min-width:24px; font:400 13px/1 var(--fh); color:#fff; text-shadow:var(--so2); text-align:right; font-variant-numeric:tabular-nums; }
#hpLag { background:linear-gradient(180deg,#ffb4a0,#ff5a44); opacity:.85; transition:width .1s; }
#hpFill { background:linear-gradient(180deg,#c8ff9a,#7ff05a 38%,#35ae22); box-shadow:inset 0 -3px 0 rgba(0,60,0,.2), inset 0 2px 0 rgba(255,255,255,.45); transition:width .15s linear; }
#hHp.mid #hpFill { background:linear-gradient(180deg,#fff2a0,#ffd23f 38%,#e89a0a); }
#hHp.low #hpFill { background:linear-gradient(180deg,#ffb4a0,#ff5a44 38%,#c8200e); }
#hHp.low .hb { animation:lowHp .7s ease-in-out infinite alternate; }
#hHp.mid .hh { color:#ffd23f; } #hHp.low .hh { color:#ff5a44; }

/* ---------- button grid (3×2 round glossy buttons): MAP · BAG · REPAIR / ROCKET · MG · NOS ---------- */
#hGrid { position:absolute; right:12px; bottom:var(--deckB); display:grid; grid-template-columns:repeat(3, var(--gs)); gap:var(--gg); pointer-events:auto; }
#hud.stickR #hGrid { right:auto; left:12px; }
.gb { --c1:#6fc8ff; --c2:#1e5fc8; --c3:#12408a; position:relative; width:var(--gs); height:var(--gs); box-sizing:border-box; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 0 4px; touch-action:none; color:#fff;
  border:3px solid var(--ol); background:radial-gradient(circle at 50% 30%, var(--c1), var(--c2) 62%, var(--c3));
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 6px 10px rgba(0,0,0,.3); transition:transform .07s, filter .15s, opacity .2s; }
.gb::before { content:""; position:absolute; left:16%; right:16%; top:6%; height:30%; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)); pointer-events:none; z-index:1; }
.gb .gi { position:relative; z-index:2; width:calc(var(--gs) * .62); height:calc(var(--gs) * .62); flex:none; display:flex; align-items:center; justify-content:center; margin-top:-2px; filter:drop-shadow(0 2px 0 rgba(11,26,51,.75)); }
.gb .gi .art, .gb .gi img { width:100%; height:100%; }
.gb .gi svg { width:62%; height:62%; }
.gb .lb { position:absolute; z-index:3; left:50%; bottom:-9px; transform:translateX(-50%); padding:2px 7px 3px; border-radius:9px; background:var(--ol); box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
  font:400 10.5px/1 var(--fh); letter-spacing:.3px; color:#fff; white-space:nowrap; }
.gb .bd { position:absolute; z-index:3; right:-6px; top:-5px; min-width:22px; height:22px; box-sizing:border-box; padding:0 5px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 30%,#ff8a70,#e8261c 70%); border:2.5px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.35); font:400 12px/1 var(--fh); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); font-variant-numeric:tabular-nums; }
.gb .bd:empty { display:none; }
.gb .gm { display:none; } /* the old strips: heat / nitro show as rings now (--heat / --nit) */
.gb:active, .gb.on { transform:translateY(2px) scale(.94); filter:brightness(1.08); }
.gb.open { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 0 4px #fff, 0 6px 10px rgba(0,0,0,.3); }
/* the ring around MAP (heat) and NOS (nitro): a conic arc just outside the button */
.gb .rg { position:absolute; inset:-8px; border-radius:50%; pointer-events:none; z-index:0;
  background:conic-gradient(var(--rc, #ffc24a) calc(var(--rv, 0) * 360deg), rgba(11,26,51,.6) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); }
/* colours per button */
#bMap { --c1:#7ff0f0; --c2:#1ea5c0; --c3:#127090; }
#bCargo { --c1:#ffd06a; --c2:#ff8a1f; --c3:#d0550c; }
#bFix { --c1:#a8ff7a; --c2:#3cb52a; --c3:#1f7a14; }
#bW1 { --c1:#d9a8ff; --c2:#8a45ea; --c3:#5a22b0; }
#bGun { --c1:#ffe467; --c2:#ffb21a; --c3:#e07a0a; }
#bBoost { --c1:#8fd8ff; --c2:#2a7ef0; --c3:#1848b8; }
/* MAP: heat ring, and a glow that pulses harder as heat rises and flickers at max */
.mapB { --hc:#ffc24a; } #bMap .rg { --rc:var(--hc); --rv:var(--heat, 0); }
.mapB.h1 { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 14px color-mix(in srgb, var(--hc) 55%, transparent); }
.mapB.h2 { animation:heatPulse 1.5s ease-in-out infinite; }
.mapB.h3 { animation:heatPulse .7s ease-in-out infinite; }
.mapB.hmax { animation:heatPulse .45s ease-in-out infinite, heatFlicker .9s steps(1) infinite; }
@keyframes heatPulse { 0%,100% { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 6px color-mix(in srgb, var(--hc) 40%, transparent); } 50% { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 26px 5px var(--hc); } }
@keyframes heatFlicker { 0% { opacity:1; } 12% { opacity:.55; } 16% { opacity:1; } 48% { opacity:.7; } 52% { opacity:1; } 80% { opacity:.5; } 84% { opacity:1; } }
#bCargo.full .lb { background:#e8261c; }
/* REPAIR: kit count badge; glows when worth using; a green sweep fills while repairing */
#bFix.dim { filter:grayscale(.85) brightness(.85); opacity:.75; }
#bFix.ready { animation:fixGlow 1.1s ease-in-out infinite alternate; }
@keyframes fixGlow { to { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 20px 4px rgba(127,240,90,.8); } }
#bFix .pr { position:absolute; inset:-8px; border-radius:50%; z-index:0; pointer-events:none; background:conic-gradient(#d8ffb0 calc(var(--p, 0) * 360deg), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); }
#bFix.act .pr { background:conic-gradient(#7ff05a calc(var(--p, 0) * 360deg), rgba(11,26,51,.6) 0); }
/* ROCKET (manual weapon 1): greyed until mounted; the reload sweeps round like a clock */
#bW1.none { filter:grayscale(1) brightness(.8); opacity:.55; } #bW1.empty { filter:grayscale(.7); opacity:.75; }
#bW1::after { content:""; position:absolute; inset:0; z-index:2; border-radius:50%; background:conic-gradient(rgba(11,26,51,.6) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events:none; }
#bW2 { display:none !important; }
/* MG: auto-gun mode colours */
#bGun.m0 { --c1:#d4dbe3; --c2:#8593a3; --c3:#5a6776; } #bGun.m0 .gi { filter:grayscale(1) drop-shadow(0 2px 0 rgba(11,26,51,.75)); opacity:.75; }
#bGun.m1 { --c1:#c8ff7a; --c2:#62c42a; --c3:#35891a; }
#bGun.m2 { --c1:#ffae8f; --c2:#f04a2a; --c3:#b82410; }
#bGun.m3 { --c1:#ffe467; --c2:#ffb21a; --c3:#e07a0a; }
#bGun.none { filter:grayscale(.8); opacity:.6; }
/* NOS: nitrous bottle, nitro left as a blue ring */
#bBoost .rg { --rc:#6ff0ff; --rv:var(--nit, 1); }
#bBoost.boosting { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 22px 6px rgba(90,190,255,.9); }
#bBoost.dry { filter:grayscale(.7) brightness(.85); }

/* ---------- the stick's rim: FRAME (left half) + FUEL (right half); colour set per frame by hud.js rimGauge ---------- */
#hud > #hRim { position:absolute; left:-999px; top:0; pointer-events:none; overflow:visible; }
#hRim circle { fill:none; }
#hRim .bgc { stroke:rgba(11,26,51,.72); stroke-width:13; }
#hRim .trk, #hRim .fr, #hRim .fu { stroke-dashoffset:-2; }
#hRim .trk { stroke:rgba(255,255,255,.16); stroke-width:7; stroke-dasharray:46 100; }
#hRim .fr, #hRim .fu { stroke-width:7.5; stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray .25s linear, stroke .4s; }
#hRim .warn { animation:rimPulse 1.3s ease-in-out infinite; }
#hRim .crit { animation:rimPulse .5s ease-in-out infinite; filter:drop-shadow(0 0 5px #ff3a2a); }
#hRim .fr.hit { animation:rimHit .35s; }
@keyframes rimPulse { 50% { opacity:.35; } }
@keyframes rimHit { 0% { stroke:#fff; stroke-width:11; } 100% { stroke-width:7.5; } }
@keyframes lowHp { to { box-shadow:inset 0 3px 0 rgba(0,0,0,.3), 0 3px 0 var(--ol), 0 0 16px 3px rgba(255,90,68,.85); } }

/* ---------- loot marker: a small round icon over the thing to loot (lock / box / wrench / fuel), no text. Park next to it and
   its ring fills by itself (hud.js parkLoot). Dim while you're still moving; red when your cargo is full. ---------- */
#hud > #bUse { position:absolute; left:0; top:0; transform:translate(-50%, -100%); display:none; width:34px; height:34px; box-sizing:border-box; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#24508f,#0e2750); border:2.5px solid var(--ol); color:#ffd23f; pointer-events:none;
  box-shadow:0 2px 0 var(--ol), 0 4px 10px rgba(0,0,0,.35); z-index:2; transition:opacity .2s; }
#hud > #bUse.show { display:block; }
#bUse .lr { position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); }
#bUse .lr circle { fill:none; stroke-width:2.6; } #bUse .lr .trk { stroke:rgba(11,26,51,.55); }
#bUse #useRing { stroke:#7ee07a; stroke-linecap:round; stroke-dasharray:0 100; filter:drop-shadow(0 0 3px rgba(126,224,122,.8)); }
#bUse .gy { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#bUse.stop { opacity:.55; }
#bUse.ready { animation:usePulse .9s ease-in-out infinite alternate; }
#bUse.active { color:#b8ffa8; }
#bUse.full { color:#fff; background:radial-gradient(circle at 50% 35%,#ff6a52,#b8200e); }
@keyframes usePulse { to { transform:translate(-50%, -100%) scale(1.1); box-shadow:0 2px 0 var(--ol), 0 0 14px 3px rgba(255,210,63,.7); } }

/* ---------- plane phase: only map, timer, compass and the caption ---------- */
#hud.plane #hGold, #hud.plane #hRim, #hud.plane #bUse, #hud.plane #hStatus, #hud.plane #hHp, #hud.plane #hXt { display:none !important; }
#hud.plane #hGrid { grid-template-columns:var(--gs); bottom:calc(var(--sb) + 6px); right:14px; left:auto; }
#hud.plane #hGrid .gb:not(#bMap) { display:none; }

/* ---------- overlays (map / inventory): the game keeps running underneath ---------- */
#hud .ov { position:absolute; left:8px; right:8px; top:calc(8px + var(--st) + 92px); bottom:calc(var(--deckB) + var(--deckH) + 14px); z-index:3; display:none; flex-direction:column; overflow:hidden; pointer-events:auto;
  background:linear-gradient(180deg,#2a6fc0,#1c4f95 45%,#153d77); border:3px solid var(--ol); border-radius:20px; box-shadow:inset 0 2px 0 rgba(140,205,255,.35), inset 0 0 0 2px rgba(110,180,255,.2), 0 4px 0 var(--ol), 0 12px 40px rgba(0,0,0,.45); }
#hud .ov.open { display:flex; animation:ovIn .2s cubic-bezier(.3,1.4,.6,1); }
@keyframes ovIn { from { transform:scale(.94); opacity:0; } }
/* while the map or inventory is open nothing shows through it: the guide, kill feed and banners hide (the canvas float text is
   under the opaque panel), and toasts (e.g. "Glovebox is full") sit on top of the panel, just under its header */
#hud.ovOpen #hGuide, #hud.ovOpen #hFeed, #hud.ovOpen #hBanner, #hud.ovOpen #hGm, #hud.ovOpen #hStatus, #hud.ovOpen #hXt, #hud.ovOpen #bUse { visibility:hidden; }
#hud.ovOpen #hMsgs { z-index:4; top:calc(8px + var(--st) + 92px + 52px); }
#hud .ovh { flex:none; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 10px 9px 12px; font:400 19px/1 var(--fh); letter-spacing:.4px; color:#fff; text-shadow:var(--so);
  background:linear-gradient(180deg,#123a73,#0f3166); border-bottom:3px solid var(--ol); box-shadow:0 3px 0 rgba(0,0,0,.18); }
#hud .ovh > b { display:flex; align-items:center; gap:6px; font-weight:400; }
#hud .ovh .ovI { width:30px; height:30px; font-size:20px; margin:-4px 0; filter:drop-shadow(0 2px 0 var(--ol)); }
#hud .ovh button { position:relative; min-height:34px; padding:5px 12px 7px; border:2.5px solid #5a0a05; border-radius:11px; background:linear-gradient(180deg,#ff7a5a,#e0302a); color:#fff; font:400 14px/1 var(--fh); letter-spacing:.3px; text-shadow:var(--so2);
  box-shadow:inset 0 2px 0 rgba(255,220,210,.55), inset 0 -3px 0 rgba(100,0,0,.25), 0 3px 0 #5a0a05; }
#hud .ovh button:active { transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,220,210,.55), 0 1px 0 #5a0a05; }
#mapCv { width:100%; aspect-ratio:1; display:block; flex:none; min-height:0; }
#mapList, #cargoList { overflow:auto; padding:8px; flex:1; min-height:0; }
#hud .exRow { display:flex; justify-content:space-between; gap:8px; padding:7px 8px; border-radius:10px; background:#0d2a55; border:2px solid var(--ol); margin-bottom:5px; font-size:12px; } #hud .exRow.sel { outline:3px solid #ffd23f; } #hud .exRow span { color:var(--mut); text-align:right; }
#hud .exRow .rnd { font:400 10px var(--fh); letter-spacing:.5px; color:#9fd4ff; border:1.5px solid #9fd4ff; border-radius:5px; padding:0 4px; font-style:normal; margin-left:4px; }
#hud .mapNote { font-size:11px; color:var(--mut); padding:4px; }
#hud .ico { width:32px; height:32px; border-radius:9px; border:2.5px solid; display:inline-flex; align-items:center; justify-content:center; font-size:17px; background:#0d2a55; flex:none; }

/* ---------- inventory grid ---------- */
#hud #ovCargo { bottom:auto; max-height:calc(100% - var(--st) - 114px - var(--deckB) - var(--deckH)); }
#ivVal { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:right; font:800 12px var(--fb); letter-spacing:0; color:var(--mut); text-shadow:0 1px 0 var(--ol); white-space:nowrap; } #ivVal b { font:400 15px var(--fh); color:#ffd23f; text-shadow:var(--so2); }
#cargoList { padding:10px; display:flex; flex-direction:column; gap:10px; }
.ivSec { border-radius:16px; padding:8px 8px 9px; transition:box-shadow .15s, border-color .15s; }
.ivSec.cargo { background:#0d2a55; border:3px solid var(--ol); box-shadow:inset 0 3px 0 rgba(0,0,0,.3), 0 2px 0 rgba(120,190,255,.15); }
.ivSec.glove { background:linear-gradient(180deg,#5a4212,#3d2c0a); border:3px solid var(--ol); box-shadow:inset 0 3px 0 rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,210,63,.35), 0 2px 0 rgba(255,210,63,.18); }
.ivSec.target { border-style:dashed; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.15), 0 0 20px rgba(255,210,63,.5); }
.ivHead { display:flex; align-items:baseline; gap:8px; margin:0 2px 8px; }
.ivHead b { font:400 16px/1 var(--fh); letter-spacing:.4px; color:#fff; text-shadow:var(--so2); }
.ivSec.glove .ivHead b { color:#ffd23f; }
.ivHead .cap { font:400 14px/1 var(--fh); color:var(--mut); text-shadow:0 1.5px 0 var(--ol); } .ivHead .cap.full { color:#ffab4a; }
.ivHead em { margin-left:auto; font-style:normal; font:800 11px var(--fb); color:var(--mut); }
.ivSec.cargo .ivHead em { color:#ffab96; } .ivSec.glove .ivHead em { color:#d8f5b8; }
#hud .igrid { display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; }
.hslot { position:relative; aspect-ratio:1; border-radius:12px; background:rgba(4,14,34,.55); border:2px dashed rgba(140,200,255,.18); box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.ivSec.glove .hslot { border-color:rgba(255,210,63,.3); background:rgba(30,18,0,.45); }
.hslot.over { border-color:rgba(255,90,68,.55); }
.hslot.item { border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1, var(--rc)),var(--r2, #333)); box-shadow:inset 0 0 0 2px var(--r3, rgba(255,255,255,.5)), inset 0 4px 0 rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.35);
  cursor:pointer; touch-action:none; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hslot.item.glow { box-shadow:inset 0 0 0 2px var(--r3, rgba(255,255,255,.5)), inset 0 4px 0 rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.35), 0 0 12px var(--rg); }
.hslot.item.sel { outline:3px solid #fff; outline-offset:1px; transform:scale(1.04); }
.hslot.item.lift { opacity:.3; }
.hslot .si { width:80%; height:80%; font-size:25px; line-height:1; display:flex; align-items:center; justify-content:center; }
.hslot .si:not(:has(> img.art)) { filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.hslot .si .art, .hslot .si img, .ivGhost .si .art, .ivGhost .si img { width:100%; height:100%; }
.hslot .sq { position:absolute; right:4px; bottom:1px; font:400 13px/1.1 var(--fh); color:#fff; text-shadow:var(--so2); font-variant-numeric:tabular-nums; }
.hslot .su { position:absolute; left:3px; top:3px; font:400 8.5px/1 var(--fh); letter-spacing:.3px; color:#fff; background:linear-gradient(180deg,#8def58,#35ae22); border:1.5px solid #0f4a08; border-radius:5px; padding:1px 3px 2px; text-shadow:0 1px 0 #0f4a08; }
.ivGold { display:flex; justify-content:space-between; gap:8px; margin:9px 2px 0; font:800 12px var(--fb); color:#f0dfae; } .ivGold b { font:400 14px var(--fh); color:#ffd23f; text-shadow:var(--so2); }
.ivGold .coin, #ivVal .coin, #ivDetail .coin { width:1.05em; height:1.05em; vertical-align:-.18em; }
.ivGhost { position:fixed; z-index:99; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:12px; border:2.5px solid #0b1a33; background:linear-gradient(180deg,var(--r1, var(--rc)),var(--r2, #333)); display:flex; align-items:center; justify-content:center; pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--r3, rgba(255,255,255,.5)), 0 10px 24px rgba(0,0,0,.55); transform:scale(1.12) rotate(-4deg); }
.ivGhost .si { width:80%; height:80%; font-size:27px; display:flex; align-items:center; justify-content:center; } .ivGhost .sq { position:absolute; right:4px; bottom:1px; font:400 13px "Lilita One",system-ui; color:#fff; text-shadow:0 1.5px 0 #0b1a33,0 -1px 0 #0b1a33,1px 0 0 #0b1a33,-1px 0 0 #0b1a33; } .ivGhost .su { display:none; }
#ivDetail { flex:none; border-top:3px solid var(--ol); background:linear-gradient(180deg,#123a73,#0e2c5a); padding:10px 12px 12px; }
#ivDetail.hint { font:800 12.5px/1.35 var(--fb); color:var(--mut); text-align:center; padding:12px; } #ivDetail.hint b { color:#fff; }
#ivDetail .dTop { display:flex; gap:10px; align-items:flex-start; }
#ivDetail .dIc { flex:none; width:54px; height:54px; border-radius:13px; border:2.5px solid var(--ol); background:linear-gradient(180deg,var(--r1, var(--rc)),var(--r2, #333)); box-shadow:inset 0 0 0 2px var(--r3, rgba(255,255,255,.5)), inset 0 4px 0 rgba(255,255,255,.3), 0 3px 0 rgba(0,0,0,.35), 0 0 12px var(--rg);
  display:flex; align-items:center; justify-content:center; font-size:28px; }
#ivDetail .dIc .art, #ivDetail .dIc img { width:82%; height:82%; }
#ivDetail .dIc .art:not(img) { filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
#ivDetail .dTx { min-width:0; } #ivDetail .dTx b { font:400 17px/1.1 var(--fh); letter-spacing:.2px; text-shadow:var(--so2); } #ivDetail .dTx b i { font-style:normal; color:#fff; }
#ivDetail .dTx small { display:block; color:var(--mut); font:800 11.5px var(--fb); margin-top:2px; } #ivDetail .dTx p { margin:4px 0 0; font:700 12.5px/1.35 var(--fb); color:#dbe9fa; }
#ivDetail .dActs { display:flex; gap:7px; margin-top:10px; }
#ivDetail .dActs button { position:relative; flex:1; min-height:40px; border:2.5px solid var(--ol); border-radius:12px; padding:7px 4px 9px; background:linear-gradient(180deg,#57b8ff,#1e6fdc); color:#fff; font:400 13.5px/1 var(--fh); letter-spacing:.3px; text-shadow:var(--so2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol); }
#ivDetail .dActs button:active { transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 var(--ol); }
#ivDetail .dActs button.pri { background:linear-gradient(180deg,#8def58,#35ae22); border-color:#0f4a08; box-shadow:inset 0 2px 0 rgba(230,255,210,.6), inset 0 -3px 0 rgba(0,60,0,.25), 0 3px 0 #0f4a08; }
#ivDetail .dActs button.arm { background:linear-gradient(180deg,#ff7a5a,#e0302a); border-color:#5a0a05; box-shadow:inset 0 2px 0 rgba(255,220,210,.55), inset 0 -3px 0 rgba(100,0,0,.25), 0 3px 0 #5a0a05; animation:armPulse .5s ease-in-out infinite alternate; }
@keyframes armPulse { to { filter:brightness(1.15); } }
#ivDetail .dActs button:disabled { filter:grayscale(.85) brightness(.85); opacity:.7; }

/* short phones (browser bars eat the height): tighter vertical spacing */
@media (max-width:379px) { #hud { --gs:54px; --gg:10px; } }
@media (max-height:700px) {
  #hud { --gs:52px; --gg:10px; --deckB:calc(var(--sb) + 12px); }
  #hCompass { width:64px; height:64px; }
  #hTimerBox { padding:3px 14px 4px; min-width:108px; }
  #hTime { font-size:27px; }
  #hTimerBox .cap { font-size:10px; }
  #hKills { top:47px; height:27px; } #hKills b { font-size:15px; } #hKills .hkSk { width:19px; height:19px; }
  #hGold { top:calc(10px + var(--st) + 10px); }
  #hFeed { top:calc(10px + var(--st) + 78px); }
  #hGuide { top:calc(10px + var(--st) + 82px); }
  #hud > #hHp { height:17px; bottom:calc(var(--deckB) + var(--deckH) + 12px); }
  #hud .ov { top:calc(8px + var(--st) + 80px); } #hud.ovOpen #hMsgs { top:calc(8px + var(--st) + 80px + 52px); }
  #hud #ovCargo { max-height:calc(100% - var(--st) - 102px - var(--deckB) - var(--deckH)); }
  /* short phones: a compact countdown card tucked right under the timer, clear of the road ahead of the car */
  #hud > #hXt { top:calc(10px + var(--st) + 84px); }
  #hXt.go { padding:5px 14px 8px; border-radius:16px; }
  #hXt .xtC { font-size:12px; }
  #hXt .xtN { font-size:30px; margin:1px 0 4px; }
  #hXt .xtB { width:140px; height:12px; border-width:2.5px; }
}


/* ---------- in-raid map: place intel card (lore.js) ---------- */
#hud .poiCard { background:#0d2a55; border:2.5px solid var(--ol); border-radius:14px; padding:9px 10px; margin-bottom:7px; font:700 12.5px/1.4 var(--fb); box-shadow:inset 0 2px 0 rgba(120,190,255,.18); }
#hud .poiCard .pcH { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
#hud .poiCard .pcH b { font:400 16px var(--fh); letter-spacing:.3px; color:#fff; text-shadow:var(--so2); }
#hud .poiCard .dg { font:400 10.5px var(--fh); letter-spacing:.5px; padding:2px 7px; border-radius:6px; border:2px solid; }
#hud .poiCard .dg.d1 { color:#7ff05a; } #hud .poiCard .dg.d2 { color:#ffd23f; } #hud .poiCard .dg.d3 { color:#ff5a44; }
#hud .poiCard p { margin:0 0 6px; color:#dbe9fa; }
#hud .poiCard .pcL { display:flex; gap:8px; margin-bottom:4px; } #hud .poiCard .pcL i { flex:none; width:58px; font:400 10.5px var(--fh); letter-spacing:.5px; color:var(--mut); font-style:normal; padding-top:2px; }
#hud .poiCard ul { margin:0; padding-left:14px; color:var(--mut); } #hud .poiCard li { margin:0; }
#hud .poiCard .pcT { color:#ffab4a; font-style:italic; margin-top:4px; }

/* loot feel: pickups fly into the INVENTORY button, which bumps */
#hud .fly { position:absolute; left:0; top:0; z-index:40; width:34px; height:34px; margin:-17px 0 0 -17px; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle, var(--rc) 0%, transparent 70%); filter:drop-shadow(0 2px 0 rgba(11,26,51,.7)); transition:transform .42s cubic-bezier(.5,-0.35,.8,.6), opacity .42s ease-in; will-change:transform; }
#hud .fly .art, #hud .fly img, #hud .fly .coin { width:100%; height:100%; }
#hud .fly.big { width:44px; height:44px; margin:-22px 0 0 -22px; font-size:30px; }
#bCargo.bump { animation:cargoBump .22s ease-out; }
@keyframes cargoBump { 0% { transform:scale(1); } 40% { transform:scale(1.16); filter:brightness(1.2); } 100% { transform:scale(1); } }

/* the first-raid guide strip pushes the big banner below it (never on top of each other) */
#hud:has(#hGuide[style*="block"]) #hBanner { top:calc(10px + var(--st) + 150px); }
#hud:has(#hGuide[style*="block"]) #hMsgs { top:calc(10px + var(--st) + 180px); }
/* ...and the place callout sits between the guide and the messages. On computers (zoomed top lanes: the guide, banner, storm
   line and messages all land on y 118-210 at 1440x900) it gets its own lane at the bottom centre instead (verify-raid
   2026-10-06: GREYFIELD was printed over the guide text, DUNMORE CITY under the DANGER ZONE banner) */
html:not(.lay-mouse) #hud:has(#hGuide[style*="block"]) #hPoi { top:calc(10px + var(--st) + 146px); }
html.lay-mouse #hPoi { top:auto; bottom:calc(150px * var(--hk, 1) * var(--hudU, 1)); }
/* the storm's "Get out" line (unzoomed, y 118) sat on the guide text and the banner on computers: it gets the lane above the callout */
html.lay-mouse #zMsg { top:auto; bottom:calc(190px * var(--hk, 1) * var(--hudU, 1)); }
@media (max-height:700px) { #hud:has(#hGuide[style*="block"]) #hBanner { top:calc(10px + var(--st) + 134px); } }
/* the kill feed steps aside while the extraction countdown or WRECKED owns the centre */
#hud:has(#hXt.go) #hFeed, #hud:has(#hXt.dead) #hFeed, #hud:has(#hXt.show) #hGuide { opacity:0; transition:opacity .2s; }

/* ---------- very narrow raid column (#hud.narrow, set by hud.js hudLayout when the canvas is < 300 px wide: a phone
   turned sideways or a short desktop window, where #app is half the height wide). Compact deck: a 2×3 button grid on
   one side, a smaller stick beside it (JOY.R 36), the health bar across the column, and a top row that fits 195 px. ---------- */
#hud.narrow { --gs:38px; --gg:14px; --deckH:calc(var(--gs) * 3 + var(--gg) * 2); --deckB:calc(var(--sb) + 10px); }
#hud.narrow #hGrid { grid-template-columns:repeat(2, var(--gs)); column-gap:6px; right:4px; }
#hud.narrow.stickR #hGrid { right:auto; left:4px; }
#hud.narrow .gb { border-width:2.5px; }
#hud.narrow .gb .lb { font-size:8.5px; padding:2px 4px 2px; bottom:-8px; }
#hud.narrow .gb .bd { min-width:17px; height:17px; font-size:10px; right:-5px; top:-4px; border-width:2px; }
#hud.narrow .gb .rg, #hud.narrow #bFix .pr { inset:-6px; }
#hud.narrow > #hHp { left:26px; right:8px; width:auto; height:16px; bottom:calc(var(--deckB) + var(--deckH) + 14px); }
#hud.narrow #hHp .hh { width:24px; height:24px; margin-top:-12px; left:-13px; }
#hud.narrow #hpTx { font-size:11px; }
#hud.narrow #hTimerBox { left:6px; transform:none; min-width:0; padding:2px 10px 3px; border-radius:12px; border-width:2.5px; }
#hud.narrow #hTime { font-size:21px; }
#hud.narrow #hTimerBox .cap { font-size:8px; letter-spacing:.3px; }
#hud.narrow #hKills { left:14px; transform:none; top:36px; height:24px; padding:4px 9px 0 5px; border-width:2.5px; }
#hud.narrow #hKills b { font-size:13px; } #hud.narrow #hKills .hkSk { width:16px; height:16px; }
#hud.narrow #hCompass { width:50px; height:50px; right:5px; top:-4px; }
#hud.narrow #hGold { left:auto; right:6px; top:calc(10px + var(--st) + 52px); height:24px; padding:0 8px 0 15px; font-size:13px; max-width:none; border-width:2.5px; }
#hud.narrow #hGold .coin { width:25px; height:25px; margin-top:-12.5px; left:-11px; }
#hud.narrow #hFeed { top:calc(10px + var(--st) + 84px); font-size:10.5px; max-width:80%; }
#hud.narrow #hGuide { top:calc(10px + var(--st) + 66px); left:6px; right:6px; font-size:11px; }
#hud.narrow > #hXt { top:calc(10px + var(--st) + 70px); }
#hud.narrow #hXt.go { padding:4px 10px 7px; border-radius:14px; }
#hud.narrow #hXt .xtC { font-size:10.5px; white-space:normal; max-width:160px; }
#hud.narrow #hXt .xtN { font-size:26px; margin:0 0 3px; }
#hud.narrow #hXt .xtB { width:120px; height:10px; border-width:2px; }

/* a phone held sideways: the game is portrait-only (menus and raid), so ask for the phone to be turned upright (touch screens
   only). Without full screen the browser can't lock the rotation, so this covers every screen. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  /* M3 (review 2026-10-07, Andre: keep the lock, explain why): a second line says why it's portrait-only */
  body::before { content:"Undead Island is built for an upright phone: the driving stick, the guns and the map all sit where your thumbs reach. Turn the phone and you're straight back in."; position:fixed; left:50%; bottom:calc(50vh - 150px); z-index:201; width:min(78vw, 520px); transform:translateX(-50%); text-align:center; font:700 15px/1.35 "Nunito",system-ui,sans-serif; color:#cfe2ff; pointer-events:none; }
  body::after { content:"TURN YOUR PHONE UPRIGHT"; position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; box-sizing:border-box; padding-bottom:calc(50vh - 72px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='38' y='14' width='44' height='76' rx='9' fill='%2324508f' stroke='%230b1a33' stroke-width='5'/%3E%3Crect x='44' y='24' width='32' height='52' rx='3' fill='%236fc8ff'/%3E%3Cpath d='M96 60a36 36 0 0 1-36 36' fill='none' stroke='%23ffd23f' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M52 88l10 8-10 9' fill='none' stroke='%23ffd23f' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center calc(50% - 26px)/112px 112px no-repeat,
      radial-gradient(circle at 50% 40%, #1c4a86, #0b1a33 75%);
    font:400 24px/1.1 "Lilita One","Nunito","Arial Rounded MT Bold",system-ui,sans-serif; letter-spacing:.5px; color:#fff; text-shadow:0 2px 0 #0b1a33,0 -1.5px 0 #0b1a33,1.5px 0 0 #0b1a33,-1.5px 0 0 #0b1a33,0 3px 0 #0b1a33; text-align:center; pointer-events:auto; }
}

/* BOOST: the screen edges blur slightly and streaks of wind rush past the car (hud.js boostWind positions .wind on the car
   and turns it so the streaks flow backward along the car's heading). */
#hBoostFx { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease-out; z-index:0; }
/* the edge blur only while boosting and only on High graphics (fx.js sets html[data-gfx]): blurring the live 3D canvas is costly */
#hBoostFx::before { content:""; position:absolute; inset:0;
  -webkit-mask:radial-gradient(ellipse 62% 56% at 50% 50%, transparent 52%, #000 100%); mask:radial-gradient(ellipse 62% 56% at 50% 50%, transparent 52%, #000 100%); }
#hBoostFx.on { opacity:1; transition:opacity .12s; }
html[data-gfx="high"] #hBoostFx.on::before { -webkit-backdrop-filter:blur(2.2px); backdrop-filter:blur(2.2px); }
#hBoostFx .wind { position:absolute; left:0; top:0; width:0; height:0; }
#hBoostFx .wind i { position:absolute; top:0; width:2px; height:44px; margin-left:-1px; border-radius:1px; opacity:0;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.8) 45%, rgba(210,235,255,0)); animation:windPass .42s linear infinite; }
#hBoostFx .wind i:nth-child(1) { left:-40px; animation-delay:0s; }    #hBoostFx .wind i:nth-child(2) { left:34px; animation-delay:.1s; height:56px; }
#hBoostFx .wind i:nth-child(3) { left:-24px; animation-delay:.22s; height:34px; } #hBoostFx .wind i:nth-child(4) { left:22px; animation-delay:.3s; }
#hBoostFx .wind i:nth-child(5) { left:-52px; animation-delay:.16s; height:62px; animation-duration:.5s; } #hBoostFx .wind i:nth-child(6) { left:48px; animation-delay:.05s; animation-duration:.5s; }
#hBoostFx .wind i:nth-child(7) { left:-32px; animation-delay:.35s; height:28px; } #hBoostFx .wind i:nth-child(8) { left:40px; animation-delay:.27s; height:30px; }
@keyframes windPass { 0% { transform:translateY(-70px); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(110px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { #hBoostFx .wind { display:none; } }

/* gun heat (auto guns have unlimited ammo and overheat): bar across the MG button; red pulse while locked out */
#bGun .ghb { position:absolute; z-index:3; left:16%; right:16%; bottom:16%; height:7px; border-radius:4px; background:rgba(11,26,51,.7); box-shadow:0 0 0 1.5px rgba(255,255,255,.75); overflow:hidden; pointer-events:none; }
#bGun.warm .ghb::after, #bGun.hot .ghb::after { background:#ff2a1a; } /* HOT / COOL: guns lock after 6-8 s of nonstop fire (decision 24) */
#bGun .ghb::after { content:""; position:absolute; inset:0; transform-origin:left center; transform:scaleX(var(--gh,0)); background:linear-gradient(90deg,#ffd23f,#ff7a1a 60%,#ff2a1a); }
#bGun.warm { box-shadow:0 0 0 3px rgba(255,120,40,.55), 0 0 14px rgba(255,90,30,.6); }
#bGun.hot { animation:gunHot .35s ease-in-out infinite alternate; }
@keyframes gunHot { from { box-shadow:0 0 0 3px rgba(255,50,20,.9), 0 0 10px rgba(255,40,10,.8); } to { box-shadow:0 0 0 5px rgba(255,90,30,.95), 0 0 22px rgba(255,60,20,.95); } }

/* ================= layout R6 (2026-09-28): map top-left · timer + vitals card centred · gear top-right; fixed stick beside a
   3×2 grid CARGO · REPAIR · BOOST / ITEM · ROCKET · FIRE (BOOST + FIRE bigger). Overrides the older rules above. ========= */
#hud { --gs:60px; --big:90px; --gg:10px; --deckH:calc(var(--big) * 2 + 10px); }
#hud > #hKills, #hud > #hGold, #hTop > #hKills, #hud > #hHp { display:none !important; }
/* the card: timer + a vitals panel, same height, one slab with a faint divider */
#hCard { position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; align-items:stretch; z-index:2; pointer-events:none; }
#hCard > #hTimerBox { position:relative; left:auto; top:auto; transform:none; border-radius:16px 0 0 16px; border-right:0; }
#hVit { position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 10px 0 11px; box-sizing:border-box;
  background:var(--slab); border:3px solid var(--ol); border-left:0; border-radius:0 16px 16px 0; box-shadow:var(--slabSh); }
#hVit::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:1px; background:rgba(255,255,255,.18); }
#hVit .vr { display:flex; align-items:center; gap:2px; }
#hVit .vi { width:13px; height:13px; flex:none; display:flex; margin-right:4px; filter:drop-shadow(0 1px 0 var(--ol)); }
#hVit .vi img, #hVit .vi .art { width:100%; height:100%; }
#hVit .vr i { width:8px; height:6px; border-radius:2px; background:rgba(255,255,255,.14); transition:background .25s; }
#hVit .vr.crit { animation:vitPulse .55s ease-in-out infinite; }
#hVit .vr.ht.pulse { animation-name:vitPulse; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
#hVit .vr.ht.max { filter:drop-shadow(0 0 4px #ff2a1a); }
#hVit.hit { animation:vitHit .3s; }
/* hit flicker (hud.js hudHurt): red-white flashes on both health bars, no movement */
#hVit.hurt, #hud > #hHp.hurt { animation:hpHurt .45s linear; }
@keyframes hpHurt { 0%, 44%, 88% { filter:brightness(2.1) saturate(1.8) drop-shadow(0 0 6px #ff2a1a); } 22%, 66% { filter:brightness(.75) sepia(1) hue-rotate(-50deg) saturate(4); } 100% { filter:none; } }
@media (prefers-reduced-motion: reduce) { #hVit.hurt, #hud > #hHp.hurt { animation-duration:.2s; } }
@keyframes vitPulse { 50% { opacity:.38; } }
@keyframes vitHit { 0% { filter:brightness(1.8); } 100% { filter:none; } }
#hFx { position:absolute; left:50%; top:calc(10px + var(--st) + 64px); transform:translateX(-50%); font:400 12px/1 var(--fh); color:#fff; text-shadow:0 1.5px 0 var(--ol); white-space:nowrap; pointer-events:none; }
#hFx:empty { display:none; }
/* MAP top-left, the compass a small gold-rim badge on its corner (dark face so the moving needle stands out) */
#hud > #bMap { position:absolute; left:12px; top:calc(10px + var(--st)); width:56px; height:56px; z-index:3; }
#hud > #bMap .gi { width:38px; height:38px; }
#hud #hCompass { left:44px; right:auto; top:-8px; width:40px; height:40px; z-index:4; }
#hud #hCompass .bg { fill:#0b1a36; } #hud #hCompass .rim { fill:#ffcc33; }
#hud #hCompass .tk, #hud #hCompass .cb:not(.n), #hud #hCompass .gl { display:none; }
#hud #hCompass .nd { stroke-width:1.6; }
/* gear top-right */
#hud #bMenu, #hud.plane #bMenu { left:auto; right:12px; top:calc(18px + var(--st)); }
/* the grid */
#hud:not(.narrow) #hGrid { grid-template-columns:var(--gs) var(--gs) var(--big); grid-auto-rows:var(--big); gap:10px 10px; align-items:center; justify-items:center; }
#hud:not(.narrow) #hGrid > .gb.big { width:var(--big); height:var(--big); }
#hud:not(.narrow) #hGrid > .gb.big .gi { width:58px; height:58px; }
#hud:not(.narrow) #hGrid > .gb.big .lb { font-size:12px; }
#bGun { --c1:#ffe467; --c2:#ffb21a; --c3:#e07a0a; }
#bGun.on { filter:brightness(1.12); box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol), 0 0 20px 5px rgba(255,200,60,.8); }
#bCargo .bd.cnt { background:radial-gradient(circle at 40% 30%,#3d78c8,#153a78 70%); font-size:11px; min-width:34px; right:-12px; }
#bItem { --c1:#a9f5cf; --c2:#22b27c; --c3:#137452; }
#bItem.none { filter:grayscale(.85) brightness(.85); opacity:.6; }
#bItem.rar:not(.menu) { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), 0 3px 0 var(--ol), 0 0 0 3px var(--irc); } /* the ITEM pick wears its rarity (boosts, deployables) */
#bItem.menu { box-shadow:inset 0 3px 0 rgba(255,255,255,.45), 0 3px 0 var(--ol), 0 0 0 4px #fff; }
/* ITEM's hold-to-choose list: rises above the button */
#itemMenu { display:none; position:absolute; flex-direction:column-reverse; gap:6px; padding:8px; border-radius:18px; background:rgba(8,20,44,.94); border:3px solid var(--ol); box-shadow:0 4px 0 var(--ol), 0 8px 18px rgba(0,0,0,.45); z-index:8; pointer-events:auto; min-width:190px; }
#itemMenu.open { display:flex; }
#itemMenu .im { display:flex; align-items:center; gap:8px; height:46px; padding:0 12px 0 5px; border-radius:23px; background:rgba(255,255,255,.06); border:2px solid transparent; cursor:pointer; }
#itemMenu .im .ico { width:36px; height:36px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; background:radial-gradient(circle at 50% 30%,#a9f5cf,#22b27c 62%,#137452); border:2.5px solid var(--ol); }
#itemMenu .im .ico img, #itemMenu .im .ico .art { width:26px; height:26px; }
#itemMenu .im b { flex:1; font:400 14px/1 var(--fh); color:#fff; white-space:nowrap; }
#itemMenu .im em { font:400 14px/1 var(--fh); font-style:normal; color:#ffd23f; }
#itemMenu .im.sel { border-color:#7ff05a; background:rgba(127,240,90,.14); }
#itemMenu .im.hov { border-color:#fff; background:rgba(255,255,255,.18); }
#itemMenu .imHint, #itemMenu .imEmpty { text-align:center; font:400 11px/1.3 var(--fh); color:#bfe0ff; padding:2px 4px 0; }
#itemMenu .imEmpty { font-size:13px; color:#fff; padding:8px; }
#hud.plane #hGrid .gb, #hud.plane #hVit, #hud.plane #hFx { visibility:hidden; }
/* narrow raid column (sideways phone): smaller card + map */
#hud.narrow #hCard { left:50%; } #hud.narrow #hCard > #hTimerBox { left:auto; }
#hud.narrow #hVit { padding:0 6px 0 7px; } #hud.narrow #hVit .vr i { width:5px; height:5px; } #hud.narrow #hVit .vi { width:10px; height:10px; margin-right:2px; }
#hud.narrow > #bMap { width:40px; height:40px; left:6px; } #hud.narrow > #bMap .gi { width:28px; height:28px; }
#hud.narrow #hCompass { left:30px; width:30px; height:30px; top:-6px; }
#hud.narrow #hGrid { grid-template-columns:repeat(2, var(--gs)); }
#hud > #bMap .rg { display:none !important; } /* heat lives in the vitals card now */

/* dragging an item off the inventory panel = drop it: the ghost turns red with a DROP tag */
.ivGhost.out { border-color:#ff5a44 !important; box-shadow:0 0 0 3px rgba(255,90,68,.45), 0 8px 24px rgba(0,0,0,.7); }
.ivGhost.out::after { content:"DROP"; position:absolute; left:50%; top:-20px; transform:translateX(-50%); padding:1px 7px; border-radius:8px; background:#e8261c; color:#fff; font:400 11px/1.4 var(--fh); }
/* no image dragging / long-press callout on game art */
#game img, #hud img { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* ================= feedback pass 2026-09-28 (overnight): one notice lane, corner combo, icon-only repair ================= */
/* notices: ONE small lane hugging the timer card (hud.js hudNotice sets its top from the card's real bottom) */
#hud > #hMsgs { top:calc(10px + var(--st) + 66px); left:14%; right:14%; gap:3px; z-index:3; }
#hud .toast { padding:2px 9px 3px; border-radius:9px; font:900 11px/1.2 var(--fb); border-width:2px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  box-shadow:0 2px 0 var(--ol), 0 4px 10px rgba(0,0,0,.25); transition:opacity .3s, transform .3s; }
#hud .toast.big { font:400 13px/1.15 var(--fh); letter-spacing:.3px; padding:3px 11px 4px; text-shadow:var(--so2); white-space:normal; }
#hud .toast.gm { background:linear-gradient(180deg,#3a1c66,#241046); white-space:normal; }
/* big notices (events, DANGER ZONE, EXTRACTED...): readable over any ground — solid navy pill, white text with a dark
   outline, the notice colour as a ring and a thin top band (UI test 2026-09-29) */
#hud .toast.big, #hud .toast.gm { color:#fff; font:400 15px/1.15 var(--fh); letter-spacing:.3px; padding:5px 13px 6px; border:2.5px solid var(--ol); opacity:1;
  background:linear-gradient(180deg,#153f7c,#0a2350); box-shadow:inset 0 0 0 2px var(--nc, #ffd166), 0 3px 0 var(--ol), 0 6px 14px rgba(0,0,0,.45);
  text-shadow:-1px -1px 0 #0b1a33, 1px -1px 0 #0b1a33, -1px 1px 0 #0b1a33, 1px 2px 0 #0b1a33; }
#hud .toast.gm { background:linear-gradient(180deg,#3a1c66,#241046); }
#hud .toast.out { opacity:0; transform:translateY(-4px); }
#hud.ovOpen > #hMsgs { top:calc(8px + var(--st) + 92px + 52px) !important; }
@media (max-height:700px) { #hud.ovOpen > #hMsgs { top:calc(8px + var(--st) + 80px + 52px) !important; } }
#hud > #hBanner, #hud > #hDJ, #hud > #hGm, #hud > #hFeed, #hud > #hStatus { display:none !important; }
/* Road Rage / kill combo: top-right corner under the gear, right-aligned, so it never collides with the notice lane */
#hud > #hCombo { left:auto; right:12px; top:calc(10px + var(--st) + 66px); align-items:flex-end; transform-origin:100% 0; text-align:right; }
#hCombo span, #hCombo em { margin-right:2px; margin-left:0; }
#hCombo i { margin:4px 2px 0 0; width:70px; }
#hCombo strong { display:block; margin-top:3px; font:400 16px/1 var(--fh); letter-spacing:.4px; opacity:0; transform:scale(.6); transform-origin:100% 0; transition:opacity .25s, transform .25s cubic-bezier(.3,1.6,.6,1);
  text-shadow:0 2px 0 var(--ol),0 -1.5px 0 var(--ol),1.5px 0 0 var(--ol),-1.5px 0 0 var(--ol),0 4px 8px rgba(0,0,0,.35); }
#hCombo strong.on { opacity:1; transform:none; }
#hud.narrow > #hCombo { top:calc(10px + var(--st) + 50px); right:6px; }
/* repair: a wrench with a filling ring above the car (hud.js updateRepair), same look as the loot marker */
#hud > #bRep { position:absolute; left:0; top:0; transform:translate(-50%, -100%); display:none; width:30px; height:30px; box-sizing:border-box; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#3cb52a,#1f7a14); border:2.5px solid var(--ol); color:#eaffdc; pointer-events:none; box-shadow:0 2px 0 var(--ol), 0 4px 10px rgba(0,0,0,.35); z-index:2; }
#hud > #bRep.show { display:block; }
#bRep .lr { position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); }
#bRep .lr circle { fill:none; stroke-width:2.6; } #bRep .lr .trk { stroke:rgba(11,26,51,.55); }
#bRep #repRing { stroke:#d8ffb0; stroke-linecap:round; stroke-dasharray:0 100; filter:drop-shadow(0 0 3px rgba(216,255,176,.8)); }
#bRep .gy { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#bRep .gy path { animation:repTurn 1.2s ease-in-out infinite; transform-origin:12px 12px; }
@keyframes repTurn { 50% { transform:rotate(-18deg); } }
#hud.plane > #bRep, #hud.ovOpen > #bRep { display:none !important; }
/* heat lives ONLY in the vitals card's heat row: no glow, pulse or flicker on the MAP button any more */
#hud > #bMap.h1, #hud > #bMap.h2, #hud > #bMap.h3, #hud > #bMap.hmax { animation:none !important; box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.2), 0 3px 0 var(--ol); opacity:1; }
#hud > #bMap .gm { display:none !important; }
/* ...and the heat row warms up and flickers when maxed */
#hVit .vr.ht.max { filter:drop-shadow(0 0 5px #ff3a1a); animation:heatRow .9s steps(1) infinite !important; }
@keyframes heatRow { 0% { opacity:1; } 10% { opacity:.45; } 14% { opacity:1; } 46% { opacity:.65; } 50% { opacity:1; } 78% { opacity:.4; } 82% { opacity:1; } }
/* the drop (plane) screen: the map alone fills the screen; only the gear stays (self-destruct = forfeit lives there) */
#hud.plane > #hPlaneCap, #hud.plane #hCard, #hud.plane > #bMap, #hud.plane #hCompass, #hud.plane > #hMsgs { display:none !important; }
#hud.plane::before { display:none; }

/* ---------- drop map chrome (#hDrop): title + one line on top, the JUMP button at the bottom ---------- */
#hud > #hDrop { position:absolute; inset:0; display:none; pointer-events:none; }
#hud > #hDrop.show { display:block; }
#hDrop .dTop { position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top) + 16px); display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:0 70px; }
#hDrop .dTop b { font:400 28px/1 var(--fh); letter-spacing:.6px; color:#ffd23f; text-shadow:var(--so); }
#hDrop .dTop span { font:800 14px/1.25 var(--fb); color:#e8f2ff; text-shadow:0 1.5px 0 var(--ol), 0 0 6px rgba(0,0,0,.5); }
#hDrop.pick.short .dTop span { color:#ffb35a; }
#hud #bJump { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 34px); transform:translateX(-50%); width:min(78vw,330px); height:72px; border-radius:22px; border:4px solid var(--ol); pointer-events:auto;
  background:linear-gradient(180deg,#8a93a3,#5b6475); color:#dfe5ee; font:400 34px/1 var(--fh); letter-spacing:1px; text-shadow:0 2px 0 var(--ol); box-shadow:inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 rgba(0,0,0,.35); cursor:pointer; }
#hud #bJump:not(:disabled) { background:linear-gradient(180deg,#8cf05a,#2fa336); color:#fff; animation:jumpPulse 1s ease-in-out infinite; }
#hud #hDrop.pick.short #bJump:not(:disabled) { background:linear-gradient(180deg,#ffc15a,#e07a18); }
#hud #hDrop.locked #bJump { background:linear-gradient(180deg,#5fb0ff,#2466c0); color:#fff; font-size:26px; }
#hud #bJump:active:not(:disabled) { transform:translateX(-50%) translateY(3px); box-shadow:inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.35); }
@keyframes jumpPulse { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.05); } }

/* in-raid inventory: MOUNTED (weapon positions + attachment slots), tap to take off / mount / swap */
.ivSec.mounted { background:linear-gradient(180deg,rgba(40,70,120,.55),rgba(20,40,80,.55)); }
.mgrid { grid-template-columns:repeat(4,1fr) !important; }
.hslot.mslot { position:relative; }
.hslot.mslot .ml { position:absolute; left:0; right:0; bottom:2px; font:400 10px/1 var(--fh); color:#dfeaff; text-shadow:0 1px 0 var(--ol); text-align:center; pointer-events:none; }
.hslot.mslot.item .si { transform:translateY(-5px); }
.hslot.mslot.locked { opacity:.45; } .hslot.mslot .lk { position:absolute; inset:0; display:grid; place-items:center; font-size:18px; }
@media (max-width:380px) { #ivVal .ivL { display:none; } }
/* supply bay in the raid inventory (2026-09-30) */
.ivSec.bay { background:linear-gradient(180deg,#1f4a5c,#14313d); border:3px solid var(--ol); box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.ivSec.bay .ivHead b { color:#8fe0ff; } .ivSec.bay .ivHead em { color:#cdeef8; }
.ivSec.bay .bayc { cursor:pointer; }
.ivEmpty { grid-column:1/-1; font-size:12px; font-weight:700; opacity:.75; padding:6px 2px; }
/* opened wreck pick menu (2026-09-30) */
#wreckMenu { position:absolute; left:50%; bottom:calc(36% + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px) scale(.96); width:min(92%,360px); padding:9px 10px 10px; border-radius:16px; background:linear-gradient(180deg,#3a2a12,#241a0b); border:3px solid var(--ol); box-shadow:0 6px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,209,102,.35); opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:30; }
#wreckMenu.open { opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1); }
#wreckMenu .wmHead { display:flex; align-items:baseline; gap:8px; margin:0 2px 8px; }
#wreckMenu .wmHead b { font:400 15px/1 var(--fh); color:#ffd166; text-shadow:var(--so2); }
#wreckMenu .wmHead em { margin-left:auto; font:800 11px var(--fb); font-style:normal; color:#f3dcb0; }
#wreckMenu .wmGrid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
#wreckMenu .wmIt { cursor:pointer; padding:0; }
/* the closing storm (2026-09-30): edge haze, one line, an arrow to safe ground */
#zHaze { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s; background:radial-gradient(ellipse at 50% 50%, rgba(120,70,200,0) 45%, rgba(120,70,200,.28) 75%, rgba(70,30,140,.55) 100%); z-index:4; }
#zHaze.on { opacity:1; animation:zPulse 3.2s ease-in-out infinite; }
@keyframes zPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.25); } }
#zMsg { position:absolute; left:50%; top:calc(118px + env(safe-area-inset-top,0px)); transform:translateX(-50%); padding:5px 12px; border-radius:999px; background:rgba(40,16,80,.82); border:2px solid #b48cff; color:#f1e6ff; font:800 13px var(--fb); white-space:nowrap; text-shadow:0 1px 0 #000; pointer-events:none; opacity:0; transition:opacity .25s; z-index:6; }
#zMsg.on { opacity:1; }
#zArr { position:absolute; left:0; top:0; width:52px; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .25s; z-index:6; }
#zArr.on { opacity:1; }
#zArr svg { width:30px; height:30px; fill:#c9a6ff; stroke:#2a1150; stroke-width:3; filter:drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
#zArr b { font:400 13px/1 var(--fh); color:#f1e6ff; text-shadow:0 1.5px 0 #000; margin-top:1px; }

/* value at risk (Phase 4): a small number under the timer; orange from 5k, red from 20k; a Cell icon while carrying one */
#hRisk { display:flex; align-items:center; justify-content:center; gap:3px; margin-top:1px; font:800 11px/13px var(--fh, system-ui); color:#e8eef8; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.55); transition:color .25s; }
#hRisk.off { visibility:hidden; }
#hRisk .coin { width:10px; height:10px; }
#hRisk.hi { color:#ffb347; }
#hRisk.crit { color:#ff5a4a; animation:riskPulse 1.1s ease-in-out infinite; }
#hRisk .rkCell { font-style:normal; color:#59e0ff; text-shadow:0 0 6px rgba(89,224,255,.8); }
@keyframes riskPulse { 50% { transform:scale(1.08); } }
#hMsgs .toast.ncell { --nc:#59e0ff; }

/* the ITEM 3-choice wheel (Phase 4): bubbles on an arc above the button (hud.js openItemMenu sets --x/--y per bubble) */
#itemMenu.wheel { display:none; padding:0; border:0; background:none; box-shadow:none; min-width:0; width:0; height:0; overflow:visible; }
#itemMenu.wheel.open { display:block; }
#itemMenu.wheel::before { content:""; position:absolute; left:-118px; top:-118px; width:236px; height:236px; border-radius:50%; background:radial-gradient(circle, rgba(8,20,44,.55) 0 40%, rgba(8,20,44,0) 70%); pointer-events:none; }
#itemMenu.wheel .im, #itemMenu.wheel .imEmpty { position:absolute; left:0; top:0; width:68px; height:68px; margin:-34px 0 0 -34px; padding:0; border-radius:50%; flex-direction:column; justify-content:center; gap:0;
  background:rgba(8,20,44,.92); border:3px solid var(--ol); box-shadow:0 3px 0 var(--ol), 0 6px 14px rgba(0,0,0,.45); transform:translate(var(--x), var(--y)) scale(1); animation:imPop .18s ease-out both; animation-delay:var(--d, 0ms); }
#itemMenu.wheel .im .ico { width:38px; height:38px; }
#itemMenu.wheel .im b { position:absolute; top:100%; margin-top:3px; font:800 10px/12px var(--fh, system-ui); color:#fff; text-shadow:0 1px 0 #000; white-space:nowrap; }
#itemMenu.wheel .im em { position:absolute; right:-4px; top:-4px; min-width:20px; height:20px; padding:0 4px; border-radius:10px; background:#ffd166; color:#1a1300; font:800 11px/20px var(--fh, system-ui); font-style:normal; text-align:center; border:2px solid var(--ol); }
#itemMenu.wheel .im.sel { border-color:#9ff0c8; }
#itemMenu.wheel .im.hov { transform:translate(var(--x), var(--y)) scale(1.18); border-color:#ffd166; }
#itemMenu.wheel .imEmpty { width:120px; margin-left:-60px; border-radius:20px; font:800 12px/1 var(--fh, system-ui); color:#c9d3e4; display:flex; align-items:center; justify-content:center; }
@keyframes imPop { from { transform:translate(0, 0) scale(.3); opacity:0; } }

/* the cargo panel is a half-screen sheet (Phase 4): the top half of the view, see-through, so you keep driving under it */
#hud #ovCargo { bottom:auto; height:auto; max-height:min(46%, calc(100% - var(--st) - 114px - var(--deckB) - var(--deckH))); background:rgba(8,20,44,.92); } /* no backdrop blur (perf 2026-10-01) */

/* icon-only weapon buttons (Track B 2026-10-03): the mounted gun's icon in its rarity ring (RAR colour); Common and Uncommon
   get the frame only, the glow starts at Rare, Legendary pulses. hud.js paintWpnArt sets --wr and the classes. */
.gb.wico .lb { display:none; }
.gb.wico .wring { position:absolute; inset:-6px; border-radius:50%; pointer-events:none; z-index:0; box-sizing:border-box; border:4px solid var(--wr, transparent); }
.gb.wico.wglow .wring { box-shadow:0 0 10px 2px var(--wr), inset 0 0 6px var(--wr); }
.gb.wico.wleg .wring { animation:wLeg 1.4s ease-in-out infinite alternate; }
@keyframes wLeg { from { box-shadow:0 0 10px 2px var(--wr), inset 0 0 6px var(--wr); } to { box-shadow:0 0 22px 7px var(--wr), inset 0 0 10px var(--wr); } }
.gb.wico.wr .gi { width:calc(var(--gs) * .8); height:calc(var(--gs) * .8); margin-top:0; }
#hud:not(.narrow) #hGrid > .gb.big.wico.wr .gi { width:74px; height:74px; }
#zMsg.warn { background:rgba(110,50,0,.86); border-color:#ffb35a; color:#ffe2b8; } /* D2 (review 2026-10-07): storm ahead */
/* camera readout (2026-10-08 angle tuning): which tilt / zoom a player likes, visible in screenshots */
#camRO { position:absolute; left:50%; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:30; pointer-events:none; padding:4px 12px; border-radius:999px; background:rgba(8,18,40,.78); border:2px solid rgba(255,255,255,.22); color:#ffe9a8; font:800 13px/1.3 var(--fb, system-ui); letter-spacing:.3px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#camPre { position:absolute; left:50%; bottom:calc(40px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:30; display:flex; gap:6px; }
#camPre button { display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 10px 5px; border-radius:10px; border:2px solid rgba(255,255,255,.25); background:rgba(8,18,40,.78); color:#fff; cursor:pointer; font:800 12px/1.1 var(--fb, system-ui); }
#camPre button small { font:700 10.5px/1.1 var(--fb, system-ui); color:#ffe9a8; font-variant-numeric:tabular-nums; }
#camPre button.on { border-color:#ffb43c; background:rgba(120,60,0,.85); }
#camPre button:hover { border-color:#ffd27a; }
#camMod { position:absolute; left:50%; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:30; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 420px); }
#camMod button { padding:5px 10px; border-radius:10px; border:2px solid rgba(255,255,255,.25); background:rgba(40,12,60,.8); color:#fff; cursor:pointer; font:800 12px/1.1 var(--fb, system-ui); white-space:nowrap; }
#camMod button.on { border-color:#c99bff; background:rgba(110,50,170,.9); }
#camMod button:hover { border-color:#e2c8ff; }
#camPre { flex-direction:column; align-items:center; gap:5px; }
#camPre .cpRow { display:flex; gap:5px; align-items:center; }
#camPre .cpRow > span { font:800 11px/1 var(--fb, system-ui); color:#ffe9a8; text-shadow:0 1px 2px #000; width:42px; text-align:right; }
#camPre button { padding:4px 9px; }
#camMod { bottom:calc(112px + env(safe-area-inset-bottom, 0px)); }
#camMod button { background:rgba(70,30,0,.82); }
#camMod button.on { border-color:#ffb43c; background:rgba(170,80,0,.92); }

/* tester accounts only (hud.js testerExtract): bottom centre, clear of the stick (left) and the button grid (right) */
#hud > #bTxExtract { position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:none; z-index:2; pointer-events:auto;
  font:400 16px/1 var(--fh); letter-spacing:.5px; color:#fff; padding:9px 18px 7px; border-radius:14px; border:3px solid var(--ol); cursor:pointer;
  background:linear-gradient(180deg,#8ff06a,#3fb52a 60%,#278a1c); box-shadow:inset 0 2px 0 rgba(230,255,210,.55), 0 3px 0 var(--ol); text-shadow:0 2px 0 rgba(0,0,0,.35); }
#hud > #bTxExtract.on { display:block; }
#hud > #bTxExtract small { display:block; font:700 9px/1 var(--fb, sans-serif); letter-spacing:1px; text-transform:uppercase; opacity:.85; margin-top:3px; }
#hud.ovOpen > #bTxExtract { visibility:hidden; }
@media (max-width:760px) { #hud > #bTxExtract { left:14px; transform:none; bottom:calc(196px + env(safe-area-inset-bottom)); } } /* phones: above the drive stick, clear of the right-hand buttons */