/* ANIMATIONS OFF (standing rule, 2026-10-25): MENU-chrome animation is OFF by
   default — no logo pulse, no pause-button slide-in, no phone slide-up, no
   flowing card underlines, no dot morph. Gameplay feedback is UNTOUCHED
   (alarm/carprompt blink, heat pulse, pursuit blink, immortal pulse, banner
   pop, reloading blink, health/capture bar transitions, job marker): those
   are in-game signals, not site chrome. There is no Animations toggle on
   this site; menu motion was disabled outright. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05070c;
  font-family: "Segoe UI", system-ui, sans-serif; color: #cfe3ff;
  -webkit-user-select: none; user-select: none; }
#game { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,5,0.55) 100%); }
#damage { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,30,40,0.5) 100%);
  transition: opacity 0.15s; }

/* ---- HUD typography: Barlow Condensed + crisp text outline everywhere ---- */
#hud, #ammo, #carprompt, #speedo, #ctxprompt, #cheatbar, #wheel, #banner, #captureui,
#lockhint, #pursuit, #alarm, #msg, #cammode, #weaponlabel {
  font-family: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif; }
#hud *, #ammo, #carprompt, #speedo, #clock, #cammode, #weaponlabel, #banner, #captureui,
#ctxprompt, #pursuit, #msg, #lockhint {
  text-shadow: 0 2px 2px rgba(0,0,0,0.9), 1px 0 0 rgba(0,0,0,0.85), -1px 0 0 rgba(0,0,0,0.85),
    0 -1px 0 rgba(0,0,0,0.85); }
/* keep the glow accents on top of the outline */
#cash { color: #34d399; font-size: 24px; font-weight: 800;
  text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 12px rgba(52,211,153,0.6); }
#turf { color: var(--acc); font-size: 17px; align-self: center;
  text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 12px rgba(var(--acc-rgb),0.6); }
#heat { text-shadow: 0 2px 2px rgba(0,0,0,0.9); }
#heat.hot { color: #ff4757; text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 12px rgba(255,71,87,0.8); animation: heatpulse 0.8s infinite; }
#brand { font-size: 26px; font-weight: 800; letter-spacing: 5px; }
#objective { font-size: 15px; font-weight: 600; letter-spacing: 3px; }
#ammo span { font-size: 32px; font-weight: 800; letter-spacing: 1px; }
#clock { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 18px; }
/* health bar: real framed bar, not a flat strip */
#healthbar { margin-top: 10px; width: 230px; height: 14px; background: rgba(0,0,0,0.62);
  border: 2px solid rgba(255,255,255,0.65); border-radius: 7px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.7), inset 0 2px 5px rgba(0,0,0,0.8); }
#healthfill { height: 100%; width: 100%;
  background: linear-gradient(180deg, #a7f3d0 0%, #34d399 45%, #059669 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); transition: width 0.25s; }

/* v3.3.1: top 78 (was 18) — the #ammo chip is a separate fixed box at
   top:14/left:14 ABOVE this cluster (z 12); at top:18 it sat on the brand
   line and ate the first letters of M4STER + the tagline. The corner is now
   reserved for the chip; the brand/cash/bar stack starts clear below it. */
#hud { position: fixed; top: 78px; left: 20px; z-index: 10; pointer-events: none; }
#brand span { color: var(--acc2); }
#objective b { color: var(--acc2); }
#alarm { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: #ff4757; animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }


#carprompt { position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-size: 14px; letter-spacing: 3px; color: #fff; pointer-events: none;
  text-shadow: 0 0 12px rgba(var(--acc2-rgb),0.8); animation: blink 1.2s steps(2) infinite; }
#carprompt b { color: var(--acc2); border: 1px solid var(--acc2); border-radius: 4px; padding: 1px 7px; }
#speedo { position: fixed; bottom: 26px; right: 28px; z-index: 10; pointer-events: none;
  font-size: 30px; font-weight: 800; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 16px rgba(var(--acc-rgb),0.9); font-variant-numeric: tabular-nums; }


/* ---------- menu screens: Figma purple-night UI ---------- */
#menubg { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.menuscreen { position: fixed; inset: 0; z-index: 20; display: flex;
  align-items: center; justify-content: center; }
#pause.menuscreen { z-index: 30; }
#fullmap.menuscreen { z-index: 35; }
#settings.menuscreen { z-index: 40; }
.panel { text-align: center; width: min(92vw, 560px); padding: 34px 36px;
  max-height: 94vh; max-height: 94dvh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(var(--panel-hi-rgb),0.88), rgba(var(--panel-lo-rgb),0.94));
  border: 1px solid rgba(var(--acc-rgb),0.45); border-radius: 18px;
  box-shadow: 0 0 44px rgba(var(--acc-rgb),0.28), inset 0 0 60px rgba(var(--acc-rgb),0.12);
  backdrop-filter: blur(6px); }
/* compact menu layout for short viewports (itch.io embed etc.) */
@media (max-height: 720px) {
  .panel { padding: 20px 24px; }
  .gamelogo { font-size: 38px; letter-spacing: 5px; margin-bottom: 8px; }
  .gamelogo.small { font-size: 26px; }
  .sub { font-size: 13px; margin-bottom: 12px; }
  .controls { font-size: 11px; gap: 5px 14px; margin-bottom: 14px; }
  .btn-primary { font-size: 14px; padding: 11px 30px; }
  .btn-ghost { font-size: 11px; padding: 10px 20px; }
  .note { margin-top: 10px; font-size: 11px; }
  .setrow { margin: 8px 0; padding: 8px 12px; }
  #endstats { margin-bottom: 12px; font-size: 13px; }
}
#pausebtn { position: fixed; top: 18px; right: 20px; z-index: 12;
  width: 44px; height: 44px; border-radius: 10px; font-size: 15px;
  background: rgba(10,16,24,0.6); border: 1px solid rgba(var(--acc2-rgb),0.5);
  color: var(--acc2); cursor: pointer; backdrop-filter: blur(4px); }
#pausebtn:hover { background: rgba(var(--acc2-rgb),0.2); }
.volrow { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.volrow span { font-size: 13px; letter-spacing: 3px; color: var(--acc-soft); }
#vol { flex: 1; accent-color: var(--acc); cursor: pointer; }
.gamelogo { font-size: 56px; letter-spacing: 8px; margin-bottom: 14px;
  background: linear-gradient(180deg, var(--acc-soft) 5%, var(--acc) 55%, var(--acc2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(var(--acc-rgb),0.55)); }
.gamelogo.small { font-size: 34px; }
.gamelogo { /* ANIMATIONS OFF: was logoPulse 3.2s infinite (menu headings) */ }
.btnrow.stacked { flex-direction: column; align-items: stretch; }
.btnrow.stacked .btn-primary, .btnrow.stacked .btn-ghost { width: 100%; }
#endtitle.lose { background: linear-gradient(180deg, #ffc2cd, #ff4757 60%, #b31e35);
  -webkit-background-clip: text; background-clip: text; }
.sub { color: var(--dim2); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px;
  text-align: left; font-size: 13px; color: var(--dim2); margin-bottom: 26px; }
.controls b { color: #efe6ff; }
.btnrow { display: flex; gap: 12px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
/* v3.5.3: brutalist poster CTA — flat amber, hard offset shadow, square corners.
   No gradient, no pill, no glow. Every menu CTA in the game uses this now. */
.btn-primary { font-family: 'Black Ops One', 'Oswald', sans-serif; font-size: 22px;
  font-weight: 400; letter-spacing: 2px; color: #111;
  background: #ffb020; border: 3px solid #0a0618; border-radius: 0;
  padding: 14px 28px; cursor: pointer;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.65); transition: transform 0.1s, box-shadow 0.1s; }
.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(0,0,0,0.65); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,0,0,0.65); }
.btn-ghost { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--acc-soft);
  background: rgba(var(--acc-rgb),0.18); border: 1px solid rgba(var(--acc-rgb),0.5);
  border-radius: 10px; padding: 12px 26px; cursor: pointer; transition: all 0.12s; }
.btn-ghost:hover { background: rgba(var(--acc-rgb),0.4); color: #fff;
  box-shadow: 0 0 18px rgba(var(--acc-rgb),0.4); }
.note { margin-top: 16px; font-size: 12px; color: var(--dim2); letter-spacing: 1px; }
#endstats { color: var(--dim2); margin-bottom: 18px; font-size: 15px; letter-spacing: 1px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 12px 0; padding: 10px 14px; background: rgba(var(--panel-mid-rgb),0.5);
  border: 1px solid rgba(var(--acc-rgb),0.25); border-radius: 10px; }
.setrow span { font-size: 13px; letter-spacing: 3px; color: var(--acc-soft); text-align: left; }
.setrow input[type=range] { flex: 1; max-width: 200px; accent-color: var(--acc); cursor: pointer; }
.toggle { min-width: 78px; font-size: 13px; font-weight: 800; letter-spacing: 2px;
  border-radius: 20px; padding: 8px 16px; cursor: pointer; border: 1px solid;
  transition: all 0.15s; }
.toggle.off { color: #8f9bb0; background: rgba(40,44,60,0.6); border-color: rgba(143,155,176,0.4); }
.toggle.on { color: #06281a; background: linear-gradient(180deg, #4ade80, #22c55e);
  border-color: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,0.5); }

/* ---------- BLACKOUT v2.0: difficulty, pursuit HUD, crosshair ---------- */
/* v3.5.3: difficulty is a ticket strip — one bordered strip, dashed
   perforations between segments, selected segment is solid amber. */
.diffrow { display: flex; align-items: stretch; justify-content: center;
  margin-bottom: 18px; border: 2px solid rgba(245,240,255,0.8);
  background: rgba(var(--bg-rgb),0.55); }
.diffrow > span { display: flex; align-items: center; padding: 0 14px;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 3px; color: #111; background: #ffb020; white-space: nowrap; }
.diffbtn { flex: 1; font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 3px; padding: 11px 10px; border-radius: 0; cursor: pointer;
  color: #f5f0ff; background: transparent; border: 0;
  border-left: 1px dashed rgba(245,240,255,0.45); transition: background 0.12s, color 0.12s; }
.diffbtn:first-of-type { border-left: 0; }
.diffbtn:hover { color: #ffb020; }
.diffbtn.sel { color: #111; background: #ffb020; }
.pursuit { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 12;
  font-size: 15px; font-weight: 800; letter-spacing: 3px; padding: 10px 22px; border-radius: 24px;
  pointer-events: none; white-space: nowrap; }
.pursuit.hot { color: #ffd7db; background: rgba(120,10,25,0.72); border: 1px solid #ff4757;
  box-shadow: 0 0 22px rgba(255,71,87,0.55); animation: pursuitBlink 0.7s ease-in-out infinite; }
.pursuit.cool { color: #c9f5dd; background: rgba(8,80,45,0.72); border: 1px solid #34d399;
  box-shadow: 0 0 18px rgba(52,211,153,0.45); }
@keyframes pursuitBlink { 50% { box-shadow: 0 0 34px rgba(255,71,87,0.9); } }
body.playing, body.playing canvas { cursor: none; }
body.playing.paused, body.playing.paused canvas { cursor: default; } /* menus get the cursor back */
body.playing.wheel, body.playing.wheel canvas,
body.playing.cheat, body.playing.cheat canvas,
body.playing.phone, body.playing.phone canvas { cursor: default; } /* wheel / cheat / phone get the cursor back */
#lockhint { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 14;
  font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--acc-soft);
  background: rgba(var(--panel-mid-rgb),0.72); border: 1px solid rgba(var(--acc-rgb),0.55); border-radius: 12px;
  padding: 8px 18px; pointer-events: none; }
/* cheat console */
#cheatbar { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 2px;
  background: rgba(10,8,24,0.92); border: 1px solid rgba(var(--acc-rgb),0.6); border-radius: 10px;
  padding: 8px 14px; box-shadow: 0 0 18px rgba(var(--acc-rgb),0.35); }
#cheatbar .cheatprefix { color: var(--acc); font-weight: 900; font-size: 15px; }
#cheatinput { background: transparent; border: none; outline: none; color: #eaffea;
  font-size: 15px; font-weight: 700; letter-spacing: 1px; width: 220px; font-family: inherit; }
#cheatinput::placeholder { color: rgba(160,150,190,0.45); }
/* contextual prompt (near crosshair) */
#ctxprompt { position: fixed; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); z-index: 9;
  font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #ffd166; white-space: nowrap;
  background: rgba(20,14,8,0.68); border: 1px solid rgba(255,209,102,0.45); border-radius: 8px;
  padding: 5px 12px; pointer-events: none; }
#ctxprompt b { color: #0a0618; background: var(--acc-soft); border-radius: 4px; padding: 0 6px;
  box-shadow: 0 0 8px rgba(var(--acc-rgb),0.6); }
/* key-cap badges on HUD buttons */
.keycap { position: absolute; top: -8px; right: -6px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #0a0618; background: var(--acc-soft);
  border-radius: 5px; padding: 0 4px; box-shadow: 0 0 8px rgba(var(--acc-rgb),0.6); pointer-events: none; }
#xhair { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 9; pointer-events: none; --sp: 8; }
#xhair .xh-l { position: absolute; background: #eaffea; box-shadow: 0 0 6px #22ff88; border-radius: 1px; }
#xhair .xh-l.t { left: -1px; top: 0; width: 2px; height: 9px; transform: translateY(calc(-100% - var(--sp) * 1px)); }
#xhair .xh-l.b { left: -1px; top: 0; width: 2px; height: 9px; transform: translateY(calc(var(--sp) * 1px)); }
#xhair .xh-l.l { left: 0; top: -1px; width: 9px; height: 2px; transform: translateX(calc(-100% - var(--sp) * 1px)); }
#xhair .xh-l.r { left: 0; top: -1px; width: 9px; height: 2px; transform: translateX(calc(var(--sp) * 1px)); }
#xhair .xh-dot { position: absolute; left: 0; top: 0; border-radius: 50%; background: #eaffea;
  box-shadow: 0 0 6px #22ff88; width: calc(var(--sp) * 1.1px); height: calc(var(--sp) * 1.1px);
  transform: translate(-50%, -50%); display: none; }
#xhair.dot .xh-dot { display: block; }
#xhair.dot .xh-l { display: none; }
/* weapon wheel (middle mouse) */
#wheel { position: fixed; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%);
  z-index: 55; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle, rgba(var(--panel-mid-rgb),0.88) 0%, rgba(var(--panel-mid-rgb),0.55) 62%, transparent 70%); }
#wheelsegs { position: absolute; inset: 0; }
.wseg { position: absolute; inset: 0; background: rgba(var(--acc-rgb),0.18); border: 2px solid rgba(var(--acc-rgb),0.25);
  cursor: pointer; transition: background 0.12s; }
.wseg.hov { background: rgba(var(--acc-rgb),0.55); box-shadow: inset 0 0 30px rgba(var(--acc-rgb),0.5); }
.wseg.sel { outline: 2px solid #ffd166; outline-offset: -6px; }
.wseglab { position: absolute; transform: translate(-50%, -50%); font-size: 12px; letter-spacing: 0.5px; font-weight: 900;
  letter-spacing: 3px; color: var(--acc-soft); text-shadow: 0 0 8px var(--acc-deep); pointer-events: none; }
.wheel-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 11px; font-weight: 900; letter-spacing: 4px; color: #ffd166; pointer-events: none; }
.wheel-hint { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; letter-spacing: 1px; color: rgba(233,213,255,0.6); pointer-events: none; }

#cammode { position: fixed; top: 134px; right: 16px; z-index: 12; font-size: 10px;
  font-weight: 800; letter-spacing: 2px; color: #aef3ff; background: rgba(20,30,50,0.6);
  border: 1px solid rgba(var(--acc2-rgb),0.4); border-radius: 10px; padding: 4px 10px;
  pointer-events: none; }
#touchshoot { position: fixed; right: 22px; bottom: 118px; z-index: 13; width: 76px; height: 76px;
  border-radius: 50%; background: rgba(120,20,40,0.55); border: 2px solid rgba(255,71,87,0.7);
  color: #ffd7db; font-weight: 800; font-size: 12px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center; }
@media (max-height: 720px) {
  .diffrow { margin-bottom: 10px; }
  .diffbtn { font-size: 11px; padding: 7px 14px; }
  .pursuit { top: 54px; font-size: 12px; padding: 8px 16px; }
}

#minimap { position: fixed; left: 14px; bottom: 14px; width: 168px; height: 168px;
  border-radius: 50%; z-index: 12; pointer-events: none;
  border: 2px solid rgba(var(--acc-rgb),0.55);
  box-shadow: 0 0 18px rgba(var(--acc-rgb),0.35), inset 0 0 30px rgba(0,0,0,0.5); }
@media (max-height: 720px) { #minimap { width: 120px; height: 120px; bottom: 10px; } }
#ammo { position: fixed; top: 14px; left: 14px; z-index: 12; text-align: center;
  background: rgba(8,10,16,.62); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 6px 14px; backdrop-filter: blur(4px); }
#ammo span { font: 800 26px/1 ui-monospace, monospace; color: #fff; text-shadow: 0 0 8px rgba(34,255,136,.7); }
#ammo label { display: block; font: 700 9px/1.4 sans-serif; letter-spacing: 2px; color: #8a8f96; }
#ammo.reloading span { color: #ffd166; animation: blink .4s infinite alternate; }
@keyframes blink { to { opacity: .35; } }
#weapon { position: fixed; top: 64px; right: 16px; z-index: 12;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,10,16,.62); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  box-shadow: 0 0 14px rgba(0,0,0,.5); padding: 8px 10px 6px; cursor: pointer; }
#weapon.fists svg path { fill: #ffd166; stroke: #ffd166; }
#weaponlabel { font-size: 10px; font-weight: 900; letter-spacing: 2px; color: var(--acc-soft); margin-top: 4px; }
#actionbtn { position: fixed; right: 22px; bottom: 22px; z-index: 12; width: 84px; height: 84px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(60,64,78,.9), rgba(16,18,26,.92));
  box-shadow: 0 0 18px rgba(0,0,0,.6), inset 0 0 18px rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; }
#actionbtn:active { transform: scale(.93); }

/* ============ STREET-TURF v2: empire HUD, phone, job, capture ============ */
#brand span { color: var(--acc); }
#cashbar { display: flex; gap: 14px; margin-top: 8px; font-weight: 800; letter-spacing: 1px; }
#cash { color: #34d399; font-size: 20px; text-shadow: 0 0 12px rgba(52,211,153,0.6); }
#turf { color: var(--acc); font-size: 15px; align-self: center; text-shadow: 0 0 12px rgba(var(--acc-rgb),0.6); }
#heat { color: #ffd166; font-size: 17px; align-self: center; letter-spacing: 2px; }
#heat.hot { color: #ff4757; text-shadow: 0 0 12px rgba(255,71,87,0.8); animation: heatpulse 0.8s infinite; }
@keyframes heatpulse { 50% { opacity: 0.55; } }

#captureui { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 12;
  text-align: center; pointer-events: none; }
#capturelabel { font-size: 13px; font-weight: 800; letter-spacing: 3px; color: var(--acc-soft);
  text-shadow: 0 0 14px rgba(var(--acc-rgb),0.8); margin-bottom: 6px; }
#capturebar { width: 320px; height: 10px; border-radius: 6px; background: rgba(var(--panel-mid-rgb),0.7);
  border: 1px solid rgba(var(--acc-rgb),0.5); overflow: hidden; }
#capturefill { height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, var(--acc-deep), var(--acc), var(--acc-soft));
  box-shadow: 0 0 14px rgba(var(--acc-rgb),0.9); transition: width 0.15s linear; }

#banner { position: fixed; top: 34%; left: 50%; transform: translate(-50%, -50%); z-index: 30;
  font-size: 34px; font-weight: 900; letter-spacing: 4px; color: #fff; text-align: center;
  text-shadow: 0 0 24px rgba(var(--acc-rgb),0.9), 0 2px 8px rgba(0,0,0,0.8); pointer-events: none;
  animation: bannerpop 0.35s ease-out; white-space: nowrap; }
#banner small { display: block; font-size: 15px; letter-spacing: 2px; color: var(--acc-soft); margin-top: 6px; }
@keyframes bannerpop { from { transform: translate(-50%,-50%) scale(0.7); opacity: 0; } }
#immortal { position: fixed; top: 12%; left: 50%; transform: translateX(-50%); z-index: 30;
  padding: 8px 24px; font-size: 16px; font-weight: 700; letter-spacing: 3px; color: #ffe9a8;
  background: rgba(20,14,4,0.78); border: 1px solid rgba(255,200,60,0.8); border-radius: 999px;
  text-shadow: 0 0 14px rgba(255,190,40,0.95); box-shadow: 0 0 18px rgba(255,190,40,0.35);
  pointer-events: none; animation: immPulse 1s ease-in-out infinite; }
@keyframes immPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } }

/* m4sterOS phone */
#phone { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--bg-rgb),0.45); backdrop-filter: blur(2px); }
#phone-screen { width: 340px; max-height: 78vh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgb(var(--panel-lo-rgb)), rgb(var(--bg-rgb))); border: 1px solid rgba(var(--acc-rgb),0.45);
  border-radius: 26px; box-shadow: 0 0 40px rgba(var(--acc-rgb),0.35), inset 0 0 60px rgba(0,0,0,0.5);
  overflow: hidden; /* ANIMATIONS OFF: was phoneup 0.25s ease-out */ }
#phone-status { display: flex; justify-content: space-between; padding: 12px 20px 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--acc); }
#phone-tabs { display: flex; border-top: 1px solid rgba(var(--acc-rgb),0.2); border-bottom: 1px solid rgba(var(--acc-rgb),0.2); }
.ptab { flex: 1; background: none; border: none; color: var(--dim2); font-weight: 800; font-size: 12px;
  letter-spacing: 2px; padding: 12px 0; cursor: pointer; }
.ptab.sel { color: var(--acc-soft); background: rgba(var(--acc-rgb),0.25); box-shadow: inset 0 -2px 0 var(--acc); }
#phone-body { padding: 16px 18px; overflow-y: auto; color: #d9d2f2; font-size: 13px; line-height: 1.5; }
#phone-body h3 { margin: 0 0 8px; color: #fff; letter-spacing: 1px; font-size: 14px; }
#phone-body .prow { display: flex; justify-content: space-between; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid rgba(var(--acc-rgb),0.12); }
#phone-body .pbtn { background: linear-gradient(135deg, var(--acc-deep), var(--acc)); color: #fff; border: none;
  border-radius: 10px; padding: 9px 14px; font-weight: 800; letter-spacing: 1px; cursor: pointer; font-size: 12px; }
#phone-body .pbtn:disabled { opacity: 0.35; cursor: default; }
#phone-body .pbtn.ghost { background: rgba(var(--acc-rgb),0.12); border: 1px solid rgba(var(--acc-rgb),0.4); }
#phone-body .pdesc { color: var(--dim2); font-size: 12px; margin: 2px 0 10px; }
#phone-body .pstat { color: #34d399; font-weight: 800; }
#phone-hint { text-align: center; padding: 10px; font-size: 11px; color: var(--dim2); letter-spacing: 1px;
  border-top: 1px solid rgba(var(--acc-rgb),0.2); }

/* job minigame */
#job { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--bg-rgb),0.55); }
#job-inner { width: min(480px, 92vw); text-align: center; }
#job-track { position: relative; height: 34px; margin: 22px 8px 14px; border-radius: 17px;
  background: rgba(var(--panel-mid-rgb),0.9); border: 1px solid rgba(var(--acc-rgb),0.4); overflow: hidden; }
#job-zone { position: absolute; top: 0; bottom: 0; left: 62%; width: 16%;
  background: rgba(52,211,153,0.35); border-left: 1px solid #34d399; border-right: 1px solid #34d399; }
#job-marker { position: absolute; top: -2px; bottom: -2px; width: 5px; left: 0%;
  background: var(--acc-soft); box-shadow: 0 0 12px var(--acc); border-radius: 3px; }
#job-stats { display: flex; justify-content: space-between; margin: 6px 10px 16px;
  color: #d9d2f2; font-size: 14px; letter-spacing: 1px; }
#job-stats b { color: #34d399; }

#clock { position: fixed; top: 14px; right: 210px; z-index: 9; font: 700 15px/1.2 ui-monospace, monospace; color: #ffd76a; text-shadow: 0 0 8px rgba(255,215,106,.6); letter-spacing: 1px; }
/* FPS counter (F3): minimal, top-right under the clock, never blocks input */
#fpsmeter { position: fixed; top: 38px; right: 210px; z-index: 12; pointer-events: none;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 2px rgba(0,0,0,0.9), 1px 0 0 rgba(0,0,0,0.85), -1px 0 0 rgba(0,0,0,0.85); }
#fpsmeter.good { color: #34d399; text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 8px rgba(52,211,153,0.6); }
#fpsmeter.warn { color: #ffd166; text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 8px rgba(255,209,102,0.6); }
#fpsmeter.bad { color: #ff4757; text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 8px rgba(255,71,87,0.6); }
body.playing #game { cursor: none; }

/* ================= v3.2: console menus, touch controls, minimal minimap ================= */

/* v3.5.3: stencil display face (Black Ops One) for menu headings — Anton is
   retired everywhere; the HUD keeps Barlow Condensed (untouched). */
.gamelogo, .sabtn span, .menuscreen h1.gamelogo {
  font-family: 'Black Ops One', 'Oswald', sans-serif;
  font-weight: 400; letter-spacing: 3px; }
.gamelogo { text-shadow: 3px 3px 0 rgba(0,0,0,0.85), 0 0 26px rgba(var(--acc-rgb),0.45); }

/* ---- title screen: Dre art full-bleed, angled content panel (SA layout) ---- */
#titleart { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; z-index: 0;
  pointer-events: none; /* decoration — never eat a tap (v3.3.3 fix) */ }
#title::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),0.42) 0%, rgba(var(--bg-rgb),0.08) 30%,
    rgba(var(--bg-rgb),0.10) 55%, rgba(var(--bg-rgb),0.86) 100%); }
/* v3.5.3: STREET POSTER — no glass card, no panel, no pills. The title is a
   bare poster column over the full-bleed gameplay still: SVG wordmark,
   amber tape tagline, field-manual ledger, ticket-strip difficulty,
   brutalist CTA. Desktop-only extras (detail polaroid, vertical stamp)
   live in the v3.5.3 block at the end of the file. */
#title-inner { position: relative; z-index: 1; width: min(94vw, 660px);
  margin: auto auto auto 4vw; text-align: left; }
#title-inner .diffrow, #title-inner .btnrow { text-align: left; }
#title-inner .btnrow.stacked { flex-direction: column; align-items: stretch; }
#title-inner .btnrow.stacked .btn-primary, #title-inner .btnrow.stacked .btn-ghost { width: 100%; }
#title-brand { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 6px; color: #ffb020; margin-bottom: 6px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.9); }
#title .controls { margin: 0; }
.controls.touchonly { display: none; }
body.touch .controls.touchonly { display: block; }
body.touch .controls.kb { display: none; }
@media (max-width: 760px) {
  #title-inner { margin: auto; width: min(94vw, 480px); }
}

/* ---- pause menu: SA angled buttons, slide-in staggered ---- */
.sapanel { width: min(94vw, 430px); }
.sabtns { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 20px; }
.sabtn { display: flex; align-items: center; gap: 14px; padding: 11px 20px;
  font-size: 19px; color: #f5f0ff; text-align: left; cursor: pointer;
  background: linear-gradient(100deg, rgba(var(--panel-hi-rgb),0.94), rgba(var(--acc-rgb),0.30));
  border: 1px solid rgba(var(--acc-rgb),0.5);
  clip-path: polygon(0 0, 100% 0, 96.5% 100%, 0 100%);
  transition: transform 0.12s, background 0.12s, box-shadow 0.12s; }
.sabtn i { font-style: normal; width: 30px; text-align: center; color: #ffd166;
  text-shadow: 0 0 10px rgba(255,209,102,0.7); }
.sabtn span { letter-spacing: 4px; }
.sabtn:hover, .sabtn:active { transform: translateX(8px);
  background: linear-gradient(100deg, rgba(var(--acc-rgb),0.40), rgba(var(--acc-rgb),0.62));
  box-shadow: 0 0 18px rgba(var(--acc-rgb),0.45); }
/* ANIMATIONS OFF: pause buttons appear instantly (was saSlide 0.38s staggered) */
@media (prefers-reduced-motion: reduce) { #pause:not(.hidden) .sabtn { animation: none; } .mcard::after { animation: none; } }
/* v3.7.8 Hallmark floor: keyboard focus is always visible; reduced-motion
   users get the native cursor back instead of the follower. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html.fx-on, html.fx-on * { cursor: auto !important; }
  #cursorfx { display: none !important; }
}

/* ---- full city map ---- */
#fullmap-inner { width: min(96vw, 700px); max-height: 94vh; overflow-y: auto; }
#fullmapcanvas { width: 100%; max-width: 620px; height: auto; display: block; margin: 8px auto;
  border-radius: 10px; border: 1px solid rgba(52,211,153,0.45);
  box-shadow: 0 0 24px rgba(52,211,153,0.18); background: #0d2417; }
#fullmap-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  margin: 10px 0 14px; font-size: 12px; letter-spacing: 2px; color: #cfe3d0; }
#fullmap-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px; }
.lg.turf { background: var(--acc); } .lg.store { background: #34d399; }
.lg.orb { background: #ffd76a; } .lg.bus { background: #4aa3ff; }
.lg.scrub { background: #8a7a4a; } .lg.rocco { background: #d9a45b; }
.lg.you { background: var(--acc2); }

/* ---- minimap: minimal rectangular ---- */
#minimap { border-radius: 14px; border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 0 24px rgba(0,0,0,0.35); }

/* ---- touch controls (console-mobile layout, alive-design) ---- */
#touchui { position: fixed; inset: 0; z-index: 14; pointer-events: none; }
#game, #touchui { touch-action: none; }
#joybase { position: fixed; left: 78px; bottom: 100px; width: 124px; height: 124px; border-radius: 50%; z-index: 14;
  border: 2px solid rgba(255,255,255,0.35); background: rgba(var(--panel-mid-rgb),0.35);
  box-shadow: 0 0 20px rgba(var(--acc-rgb),0.25), inset 0 0 24px rgba(0,0,0,0.4);
  pointer-events: none; transform: translate(-50%, -50%); }
#joyknob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--acc-soft), var(--acc-deep) 70%);
  box-shadow: 0 0 16px rgba(var(--acc-rgb),0.7); }
.tbtn { pointer-events: auto; position: fixed; z-index: 14; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 1px;
  color: #fff; cursor: pointer; border: 2px solid rgba(255,255,255,0.4);
  background: rgba(30,24,52,0.55); backdrop-filter: blur(2px);
  text-shadow: 0 2px 3px rgba(0,0,0,0.9); width: 66px; height: 66px; font-size: 13px;
  box-shadow: 0 0 14px rgba(0,0,0,0.5); -webkit-tap-highlight-color: transparent; }
.tbtn:active, .tbtn.on { transform: scale(0.92); }
.tbtn.big { width: 96px; height: 96px; font-size: 16px; }
.tbtn.mini { width: 46px; height: 46px; font-size: 15px; border-radius: 12px; position: static; }
.tbtn.on { box-shadow: 0 0 18px rgba(var(--acc2-rgb),0.8); border-color: var(--acc2); }
#t-shoot { right: 22px; bottom: 92px; border-color: rgba(255,71,87,0.8);
  background: rgba(120,20,40,0.55); box-shadow: 0 0 18px rgba(255,71,87,0.35); }
#t-brake { right: 22px; bottom: 92px; border-color: rgba(255,209,102,0.8);
  background: rgba(120,80,10,0.55); box-shadow: 0 0 18px rgba(255,209,102,0.35); }
#t-aim { right: 134px; bottom: 168px; }
#t-jump { right: 30px; bottom: 214px; }
#t-sprint { right: 142px; bottom: 56px; }
#t-interact { right: 138px; bottom: 258px; width: 88px; height: 88px; font-size: 15px;
  border-color: rgba(52,211,153,0.85); background: rgba(10,80,50,0.55);
  box-shadow: 0 0 20px rgba(52,211,153,0.45); }
#t-cover { right: 244px; bottom: 120px; border-color: rgba(255,209,102,0.85);
  background: rgba(90,70,10,0.55); }
#t-utils { position: fixed; right: 14px; top: 128px; z-index: 14; display: flex;
  flex-direction: column; gap: 10px; pointer-events: none; }
#t-utils .tbtn { pointer-events: auto; }

/* ---- touch scheme HUD rearrangement (map top-left, weapon top-right) ---- */
body.touch .keycap { display: none !important; }
body.touch #actionbtn { display: none !important; }
body.touch #ctxprompt { display: none !important; }
body.touch #lockhint { display: none !important; }
body.touch #touchshoot { display: none !important; }
body.touch #carprompt { display: none !important; }
body.touch #minimap { top: 60px; bottom: auto; left: auto; right: 12px; width: 134px; height: 134px; }
body.touch #brand, body.touch #objective { display: none; }
body.touch #hud { left: 50%; transform: translateX(-50%); top: 10px; text-align: center; }
body.touch #cashbar { justify-content: center; }
body.touch #healthbar { margin-left: auto; margin-right: auto; width: 200px; }
body.touch #ammo { left: auto; right: 12px; top: 272px; padding: 4px 10px; }
body.touch #weapon { top: 202px; right: 12px; }
body.touch #clock { left: 14px; right: auto; top: 12px; }
body.touch #fpsmeter { left: 14px; right: auto; top: 36px; }
body.touch #cammode { display: none; }
body.touch #speedo { bottom: 200px; right: 24px; font-size: 24px; }

/* ================= v3.2: edge-to-edge (notch-aware, zero letterboxing) ================= */
/* viewport-fit=cover lets the layout extend under status/nav bars; fixed HUD
   elements are pushed clear of notches via safe-area-inset env() variables.
   The game canvas, title art, and menu screens already fill inset:0. */
#hud { top: calc(78px + env(safe-area-inset-top)); left: calc(20px + env(safe-area-inset-left)); }
#pausebtn { top: calc(18px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); }
#minimap { left: calc(14px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); }
#weapon { top: calc(64px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
#ammo { top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
#clock { top: calc(14px + env(safe-area-inset-top)); }
#fpsmeter { top: calc(38px + env(safe-area-inset-top)); }
#cammode { top: calc(134px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
#actionbtn { right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
#speedo { bottom: calc(26px + env(safe-area-inset-bottom)); right: calc(28px + env(safe-area-inset-right)); }
#carprompt { bottom: calc(150px + env(safe-area-inset-bottom)); }
#xhair { /* centered: unaffected by insets */ }
/* touch scheme: same notch treatment — map TOP-RIGHT (design decision), buttons bottom */
body.touch #minimap { top: calc(60px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); left: auto; }
/* touch HUD: cash/turf/health top-left under the clock */
body.touch #hud { left: calc(12px + env(safe-area-inset-left)); transform: none; text-align: left; top: calc(46px + env(safe-area-inset-top)); }
body.touch #cashbar { justify-content: flex-start; }
body.touch #healthbar { margin-left: 0; margin-right: auto; width: 180px; }
body.touch #ammo { right: calc(12px + env(safe-area-inset-right)); top: calc(272px + env(safe-area-inset-top)); }
body.touch #weapon { top: calc(64px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); }
/* clock/fps sit left of the pause button (never under it) */
body.touch #clock { right: calc(70px + env(safe-area-inset-right)); top: calc(24px + env(safe-area-inset-top)); }
body.touch #fpsmeter { right: calc(70px + env(safe-area-inset-right)); top: calc(46px + env(safe-area-inset-top)); }
#t-shoot, #t-brake { right: calc(22px + env(safe-area-inset-right)); bottom: calc(92px + env(safe-area-inset-bottom)); }
#t-aim { right: calc(134px + env(safe-area-inset-right)); bottom: calc(168px + env(safe-area-inset-bottom)); }
#t-jump { right: calc(30px + env(safe-area-inset-right)); bottom: calc(214px + env(safe-area-inset-bottom)); }
#t-sprint { right: calc(142px + env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom)); }
#t-interact { right: calc(138px + env(safe-area-inset-right)); bottom: calc(258px + env(safe-area-inset-bottom)); }
#t-cover { right: calc(244px + env(safe-area-inset-right)); bottom: calc(120px + env(safe-area-inset-bottom)); }
#t-utils { right: calc(14px + env(safe-area-inset-right)); top: calc(128px + env(safe-area-inset-top)); }
body.touch #speedo { bottom: calc(200px + env(safe-area-inset-bottom)); right: calc(24px + env(safe-area-inset-right)); }
/* menus fill the screen edge-to-edge; inner panels keep breathing room */
.menuscreen { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#phone { bottom: calc(18px + env(safe-area-inset-bottom)); }

/* ================= v3.3.3: TOUCH GRID — four clean zones, zero overlap =====
   Playtest photos showed the old scattered rules colliding: weapon chip ON
   the minimap, JUMP inside the map's footprint, the utils column running
   through the ammo slot, SHOOT clipped at the screen edge, joystick floated
   up into the HUD. This block is the single source of truth for touch
   placement (it comes last, so it wins over every earlier touch rule):
     TL: clock / fps / cash-turf-health stack     TR: minimap, pause beside it
     TR under-map stack: weapon chip, ammo        mid-right: utils 2x2 grid
     BL: joystick (low, anchored)                 BR: action cluster
   Action cluster offsets are in right/bottom space and were pair-checked:
   every pair clears on both axes by >= 8px. SHOOT and BRAKE share one slot
   by design (context swap, never visible together). */
/* -- TL zone -- */
body.touch #clock { left: calc(12px + env(safe-area-inset-left)); right: auto; top: calc(10px + env(safe-area-inset-top)); }
body.touch #fpsmeter { left: calc(12px + env(safe-area-inset-left)); right: auto; top: calc(33px + env(safe-area-inset-top)); }
body.touch #hud { left: calc(12px + env(safe-area-inset-left)); transform: none; text-align: left; top: calc(58px + env(safe-area-inset-top)); }
body.touch #healthbar { width: 180px; margin-left: 0; }
/* -- BL zone: joystick sits LOW (was bottom:100 — floated into mid-screen).
   NOTE: #joybase carries translate(-50%,-50%) in its base rule, which shifts
   the VISUAL box left/up by half its size (62px): layout left:86 renders at
   x=24, and the layout bottom must be -40 for the visual bottom edge to sit
   22px off the screen bottom (verified by rect in the geometry test). -- */
body.touch #joybase { left: calc(86px + env(safe-area-inset-left)); bottom: calc(env(safe-area-inset-bottom) - 40px); }
/* -- TR zone: minimap owns the corner; pause parks to its LEFT -- */
body.touch #minimap { top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); left: auto; bottom: auto; width: 118px; height: 118px; }
body.touch #pausebtn { top: calc(10px + env(safe-area-inset-top)); right: calc(248px + env(safe-area-inset-right)); }
/* utils: 2x2 grid beside the map (was a tall column through the ammo slot) */
body.touch #t-utils { right: calc(140px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); left: auto; flex-direction: row; flex-wrap: wrap; width: 100px; gap: 8px; }
/* under-map ROW: weapon chip + ammo side by side (weapon was ON the map at
   top:64; a vertical stack — map 118 + chip 65 + ammo 49 — overruns the
   BR cluster's top line on short screens, so they share one row) */
body.touch #weapon { top: calc(136px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
body.touch #ammo { top: calc(144px + env(safe-area-inset-top)); right: calc(108px + env(safe-area-inset-right)); left: auto; padding: 4px 10px; }
/* speedo (driving only): bottom-centre, right of the joystick, clear of BR */
body.touch #speedo { left: calc(170px + env(safe-area-inset-left)); right: auto; bottom: calc(24px + env(safe-area-inset-bottom)); }
/* -- BR action cluster -- */
body.touch #t-shoot, body.touch #t-brake { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
body.touch #t-jump { right: calc(124px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
body.touch #t-sprint { right: calc(120px + env(safe-area-inset-right)); bottom: calc(92px + env(safe-area-inset-bottom)); }
body.touch #t-aim { right: calc(20px + env(safe-area-inset-right)); bottom: calc(124px + env(safe-area-inset-bottom)); }
body.touch #t-interact { right: calc(212px + env(safe-area-inset-right)); bottom: calc(100px + env(safe-area-inset-bottom)); }
body.touch #t-cover { right: calc(216px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
/* short landscape screens (<=380px tall): compress the TR stack + map so
   the BR cluster still clears it */
@media (max-height: 380px) {
  body.touch #minimap { width: 96px; height: 96px; top: calc(8px + env(safe-area-inset-top)); }
  body.touch #weapon { top: calc(110px + env(safe-area-inset-top)); }
  body.touch #ammo { top: calc(118px + env(safe-area-inset-top)); }
  body.touch #t-aim { bottom: calc(112px + env(safe-area-inset-bottom)); }
}
/* narrow screens (portrait phones): the utils grid would graze the TL HUD
   (it starts at x~172 there) and the speedo lands on JUMP — both move to
   their own clear spots lower on the left wall */
@media (max-width: 500px) {
  body.touch #t-utils { top: calc(212px + env(safe-area-inset-top)); }
  body.touch #speedo { left: calc(12px + env(safe-area-inset-left)); top: calc(322px + env(safe-area-inset-top)); bottom: auto; }
}

/* ================= v3.3.3: SA-style swipeable card menu (touch title) =====
   On touch, the title's button stack is replaced by a horizontal snap rail
   of big cards (swipe left/right, tap to select) — console-mobile style.
   Desktop keeps the stack; these rules only bite under body.touch. */
#cardrail, #carddots { display: none; }
body.touch #cardrail {
  /* fixed bottom sheet (v3.3.3 fix): as a flow child of the 480px
     #title-inner panel the viewport-centred cards were clipped by the
     panel and the title art ate their taps. Fixed + full-width = the
     cards render whole, above the art, tappable everywhere. */
  position: fixed; left: 0; right: 0; bottom: 30px; z-index: 6;
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 6px calc(50vw - 118px) 10px;
  margin: 0; touch-action: pan-x;
}
body.touch #cardrail::-webkit-scrollbar { display: none; }
body.touch #title .btnrow.stacked { display: none; }
/* short screens: the title stack (678px on a 412px-tall landscape) must
   SCROLL — overflow visible + a fixed shell left everything below the
   fold unreachable (v3.3.3 fix). Top-align so nothing clips away. */
body.touch #title { overflow-y: auto; align-items: flex-start; }
body.touch #title-inner { margin-top: max(14px, env(safe-area-inset-top)); }
body.touch #title .controls.touchonly { display: none; }
body.touch #title.showhow .controls.touchonly { display: block; }
.mcard {
  scroll-snap-align: center; flex: 0 0 auto; width: 236px; height: 148px;
  border-radius: 18px; border: 1px solid rgba(var(--acc-rgb),0.45);
  background: linear-gradient(160deg, rgba(var(--acc-rgb),0.35), rgba(var(--panel-lo-rgb),0.92));
  color: #fff; text-align: left; padding: 16px 18px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14);
  font-family: inherit; position: relative; overflow: hidden;
}
.mcard::after { /* separator standard: the glow follows the active THEME (v3.7.7) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc));
  background-size: 200% 100%; /* ANIMATIONS OFF: underline gradient is static (was rgbflow 6s) */
}
.mcard.play {
  background: linear-gradient(165deg, rgba(var(--panel-lo-rgb),0.25), rgba(10,6,22,0.88)),
    url('assets/gameplay-hero.png') center 22% / cover no-repeat;
  border-color: rgba(var(--acc2-rgb),0.6);
}
.mcard:active { transform: scale(0.97); }
.mcard-kicker { font-size: 10px; letter-spacing: 3px; color: var(--acc2); font-weight: 700; }
.mcard-icon { font-size: 30px; line-height: 1; margin-bottom: auto; }
.mcard-title { font-size: 21px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,0.65); }
.mcard-sub { font-size: 11.5px; color: rgba(230,235,245,0.85); }
body.touch #carddots { position: fixed; left: 0; right: 0; bottom: 12px; z-index: 6; display: flex; gap: 7px; justify-content: center; margin-top: 0; }
#carddots .cdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.3); /* ANIMATIONS OFF: was transition all .25s */ }
#carddots .cdot.on { background: var(--acc2); width: 20px; border-radius: 4px; }


/* ================= v3.5.0: TOUCH SHRINK — smaller joystick + buttons =====
   Phone playtest feedback: the stick and the big cluster ate the screen.
   Everything shrinks ~25%; cluster offsets keep their right/bottom edges,
   so every pair gap only grows. Joystick anchor math re-derived for the
   96px base (translate(-50%,-50%)): visual left edge 24px, visual bottom
   edge 22px off the screen — same resting spot as the 124px stick. */
body.touch #joybase { left: calc(72px + env(safe-area-inset-left)); bottom: calc(env(safe-area-inset-bottom) - 26px); width: 96px; height: 96px; }
body.touch #joyknob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
body.touch .tbtn { width: 54px; height: 54px; font-size: 12px; }
body.touch .tbtn.big { width: 76px; height: 76px; font-size: 14px; }
body.touch .tbtn.mini { width: 42px; height: 42px; font-size: 14px; }
body.touch #t-utils { width: 92px; }
/* slimmer map + the under-map row rides up with it */
body.touch #minimap { width: 104px; height: 104px; }
body.touch #weapon { top: calc(122px + env(safe-area-inset-top)); }
body.touch #ammo { top: calc(130px + env(safe-area-inset-top)); }
@media (max-height: 380px) {
  body.touch #minimap { width: 88px; height: 88px; }
  body.touch #weapon { top: calc(104px + env(safe-area-inset-top)); }
  body.touch #ammo { top: calc(112px + env(safe-area-inset-top)); }
}
/* the wheel is a modal — it stays BIG and tappable on touch (5 slots now) */
body.touch #wheel { width: min(86vmin, 330px); height: min(86vmin, 330px); }

/* ================= v3.5.3: STREET POSTER =================
   v3.5.2's two-column card was rejected as a generic template. The title
   is now a poster, at EVERY width: bare
   column over full-bleed real gameplay, stencil SVG wordmark, tape
   tagline, field-manual ledger, ticket difficulty, flat amber CTA.
   Desktop (1024px+, non-touch) adds the detail polaroid + vertical
   stamp. Touch/mobile keep the same ids/handlers/card rail; the manual
   hides on touch unless HOW TO PLAY is open. Animations stay OFF. */
.wm { display: block; width: min(88vw, 560px); height: auto;
  filter: drop-shadow(5px 5px 0 rgba(0,0,0,0.55)); }
.wm-street { font-family: 'Black Ops One', sans-serif; font-size: 116px; fill: #f5f0ff; }
.wm-turf { font-family: 'Black Ops One', sans-serif; font-size: 116px; fill: none;
  stroke: #ffb020; stroke-width: 3px; }
.wm-star { font-family: 'Black Ops One', sans-serif; font-size: 44px; fill: #ffb020; }
.wm-swoosh { stroke: #ffb020; stroke-width: 5; fill: none; stroke-linecap: round; opacity: 0.9; }
.tape { display: inline-block; max-width: 100%; background: #ffb020; color: #111;
  font-family: 'Black Ops One', sans-serif; font-size: 17px; letter-spacing: 1px;
  padding: 8px 14px; margin: 16px 0 10px; transform: rotate(-1deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.65); }
.deck { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 500;
  line-height: 1.5; color: #e8e0f5; margin-bottom: 4px;
  text-shadow: 0 2px 2px rgba(0,0,0,0.9); }
.manual { border-top: 2px solid rgba(245,240,255,0.7);
  border-bottom: 2px solid rgba(245,240,255,0.7); padding: 10px 12px; margin: 16px 0;
  background: rgba(var(--bg-rgb),0.55); /* ink band: the ledger must read over the bright ZOO sign */ }
.manual-h { display: flex; justify-content: space-between; margin-bottom: 8px;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 4px; color: var(--dim2); }
.manual .controls { margin-bottom: 0; font-family: 'Oswald', sans-serif;
  font-size: 14px; font-weight: 500; color: #d8d0e8; }
.manual .controls b { display: inline-block; color: #fff; font-weight: 600;
  border: 1px solid rgba(245,240,255,0.65); background: rgba(0,0,0,0.55);
  padding: 1px 7px; margin-right: 4px; }
#title-inner .btn-ghost { background: transparent; border: 0; border-radius: 0;
  padding: 8px 0; text-align: left; font-family: 'Oswald', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #e8e0ff;
  text-decoration: underline; text-underline-offset: 4px; box-shadow: none; }
#title-inner .btn-ghost:hover { color: #ffb020; background: transparent; box-shadow: none; }
#startbtn { display: flex; justify-content: space-between; align-items: center; }
#title-inner .note { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 3px; color: var(--dim2); margin-top: 14px; }
#title-inner .note::before { content: ''; display: inline-block; width: 9px; height: 9px;
  background: #ffb020; margin-right: 8px; vertical-align: -1px; }
/* touch: the manual only opens via HOW TO PLAY (same showhow switch as before) */
body.touch #title .manual { display: none; }
body.touch #title.showhow .manual { display: block; }
#titlecap { display: none; }
#titledetail { display: none; }
@media (min-width: 1024px) {
  body:not(.touch) #title-inner { width: min(94vw, 620px); }
  body:not(.touch) #title .wm { width: min(88vw, 580px); }
  /* detail polaroid: a zoomed crop of the SAME hero file, no new binary */
  body:not(.touch) #titledetail {
    display: block; position: absolute; right: 4vw; bottom: 6vh; z-index: 1;
    width: 230px; aspect-ratio: 4 / 3; pointer-events: none;
    background-image: url('assets/gameplay-hero.png');
    background-size: 230% auto; background-position: 8% 82%;
    border: 3px solid #f5f0ff; box-shadow: 10px 10px 0 rgba(0,0,0,0.55);
    transform: rotate(2deg); }
  body:not(.touch) #titledetail::after {
    content: 'DETAIL — LEO ON WATCH'; position: absolute; left: 0; bottom: -26px;
    font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 3px; color: #d8d0e8; white-space: nowrap; }
  body:not(.touch) #titlecap {
    display: block; position: absolute; right: 16px; top: 50%; z-index: 1;
    transform: translateY(-50%); writing-mode: vertical-rl;
    font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 4px; color: rgba(245,240,255,0.75); pointer-events: none; }
}

/* ================= v3.7.7: THEMES + CURSORS (fleet campaign) =================
   THEME (Settings): five palettes, one var set. Every chrome colour above
   reads these vars — panels, HUD accents, toggles, phone, cards — so a
   theme swap recolours the whole shell. The 3D world and the amber poster
   brand stay untouched. Type never changes (Black Ops One / Oswald /
   Barlow Condensed). Separators follow the theme via --acc/--acc2. */
:root{ /* v3.7.8: base = HEAT CRIMSON, the default identity (Hallmark pass — violet is one option among five now, not the face) */
  --bg:#160509; --bg-rgb:22,5,9;
  --panel-hi-rgb:46,14,22; --panel-lo-rgb:24,7,12; --panel-mid-rgb:34,12,18;
  --acc:#ff3b57; --acc-rgb:255,59,87; --acc2:#ffb02e; --acc2-rgb:255,176,46;
  --acc-deep:#c21833; --acc-soft:#ffb3c0; --dim2:#c49aa2;
}
:root[data-theme='violet']{ --bg:#0a0618; --bg-rgb:10,6,24; --panel-hi-rgb:30,18,54; --panel-lo-rgb:16,9,32; --panel-mid-rgb:20,12,42; --acc:#b366ff; --acc-rgb:179,102,255; --acc2:#22d3ee; --acc2-rgb:34,211,238; --acc-deep:#7c3aed; --acc-soft:#cdb4ff; --dim2:#a794c4; }
:root[data-theme='crimson']{ --bg:#160509; --bg-rgb:22,5,9; --panel-hi-rgb:46,14,22; --panel-lo-rgb:24,7,12; --panel-mid-rgb:34,12,18; --acc:#ff3b57; --acc-rgb:255,59,87; --acc2:#ffb02e; --acc2-rgb:255,176,46; --acc-deep:#c21833; --acc-soft:#ffb3c0; --dim2:#c49aa2; }
:root[data-theme='toxic']{ --bg:#04140b; --bg-rgb:4,20,11; --panel-hi-rgb:14,40,22; --panel-lo-rgb:7,22,12; --panel-mid-rgb:12,32,18; --acc:#3dff7a; --acc-rgb:61,255,122; --acc2:#d9ff3d; --acc2-rgb:217,255,61; --acc-deep:#17b954; --acc-soft:#b8ffce; --dim2:#9ac4a6; }
:root[data-theme='arctic']{ --bg:#050d17; --bg-rgb:5,13,23; --panel-hi-rgb:16,36,58; --panel-lo-rgb:8,20,34; --panel-mid-rgb:14,30,48; --acc:#4dc3ff; --acc-rgb:77,195,255; --acc2:#8ef6ff; --acc2-rgb:142,246,255; --acc-deep:#1f7fc4; --acc-soft:#bde6ff; --dim2:#9ab4c4; }
:root[data-theme='sunset']{ --bg:#180a05; --bg-rgb:24,10,5; --panel-hi-rgb:48,22,12; --panel-lo-rgb:26,12,6; --panel-mid-rgb:38,18,10; --acc:#ff8c3b; --acc-rgb:255,140,59; --acc2:#ff3d7e; --acc2-rgb:255,61,126; --acc-deep:#d1600f; --acc-soft:#ffd2ab; --dim2:#c4ab9a; }

/* CURSOR (Settings): a transform/opacity follower — dot / ring / orb —
   or NATIVE (no follower, system cursor). The native cursor hides only
   while the follower is live (html.fx-on is set by the follower script
   once the element exists); text inputs keep the I-beam. During
   pointer-lock play the follower fades out (opacity); the game hides
   the native cursor there already. */
#cursorfx{ position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:0;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%); transition:scale .12s ease-out; }
#cursorfx.fx-hover{ scale:1.35; }
#cursorfx.fx-press{ scale:.8; }
:root[data-cursor='dot'] #cursorfx{ width:13px; height:13px; border-radius:50%;
  background:var(--acc); border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.55); }
:root[data-cursor='ring'] #cursorfx{ width:30px; height:30px; border-radius:50%;
  border:2px solid var(--acc); box-shadow:0 0 0 1.5px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(255,255,255,.25);
  background:radial-gradient(circle, var(--acc) 0 2.5px, transparent 3.5px); }
:root[data-cursor='orb'] #cursorfx{ width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0 2px, rgba(var(--acc-rgb),.85) 4px, rgba(var(--acc-rgb),.22) 55%, transparent 72%); }
html.fx-on body, html.fx-on a, html.fx-on button, html.fx-on select, html.fx-on label,
html.fx-on canvas, html.fx-on input, html.fx-on .toggle{ cursor:none; }
html.fx-on body.playing.paused, html.fx-on body.playing.wheel,
html.fx-on body.playing.cheat, html.fx-on body.playing.phone{ cursor:none; }
html.fx-on input[type='text'], html.fx-on textarea{ cursor:text; }