@font-face { font-family: "Anton"; src: url("../assets/fonts/Anton-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/BarlowCondensed-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/BarlowCondensed-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/BarlowCondensed-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
/* City Life Auto UI - GTA-flavoured: heavy condensed display type with black outlines, help
   boxes, interaction-style menus, WASTED card. Fonts: Anton (display) + Barlow Condensed (UI), self-hosted, SIL OFL (assets/fonts). */
:root {
  --bg: #0b0d14; --panel: rgba(0, 0, 0, 0.78); --line: #2b3150; --text: #f4f4f4; --dim: #a6a9b8;
  --good: #72cc72; --bad: #e0323c; --warn: #f0c850; --accent: #ff3e8a; --accent2: #7a3cff; --gold: #ffcf40; --money: #6cd06c;
  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --ui: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --outline: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000;
  --outline-s: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--ui); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#game { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; cursor: crosshair; transition: filter .8s; }
body.dead #view { filter: grayscale(.92) brightness(.75) contrast(1.1); }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.bad { color: #ff5a62; }
button { font-family: var(--ui); }

/* device-specific text */
body:not(.kbm) .kbm-only, body:not(.pad) .pad-only, body:not(.touch) .touch-only, body.kbm .not-kbm { display: none; }

/* ---- button glyphs ---- */
.g-key, .g-pad, .g-touch { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font-family: var(--ui); font-weight: 700; line-height: 1; }
.g-key { min-width: 24px; height: 24px; padding: 0 6px; background: #f2f2f2; color: #111; border-radius: 4px; box-shadow: inset 0 -3px 0 #a9a9a9; font-size: 15px; }
.g-pad { min-width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 14px; border: 2px solid #000; text-shadow: var(--outline-s); }
.g-pad.g-a { background: #3faa3f; } .g-pad.g-b { background: #d8353b; } .g-pad.g-x { background: #2f6fd8; } .g-pad.g-y { background: #e8b022; }
.g-pad.g-bumper, .g-pad.g-sys, .g-pad.g-stick { border-radius: 6px; padding: 0 6px; background: #333; font-size: 12px; }
.g-touch { height: 24px; padding: 0 9px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 14px; letter-spacing: .5px; border: 2px solid #fff; }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; font-size: 15px; }
#hud-tr { position: absolute; right: max(16px, env(safe-area-inset-right)); top: 12px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
#weapon { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.72) 30%); padding: 4px 6px 4px 22px; min-height: 52px; }
#w-icon canvas { width: 96px; height: 48px; image-rendering: pixelated; display: block; filter: drop-shadow(0 2px 0 #000); }
#w-info { text-align: right; }
#w-name { font-family: var(--display); font-size: 17px; letter-spacing: .5px; text-transform: uppercase; text-shadow: var(--outline-s); }
#w-ammo { font-size: 15px; font-weight: 700; color: #fff; text-shadow: var(--outline-s); }
#money { font-family: var(--display); font-size: 38px; line-height: 1.05; color: var(--money); text-shadow: var(--outline); letter-spacing: 1px; margin-top: 2px; }
#bank { font-size: 14px; font-weight: 700; letter-spacing: 1px; text-shadow: var(--outline-s); }
#stars { font-size: 28px; letter-spacing: 1px; line-height: 1; margin-top: 4px; min-height: 30px; }
#stars span { color: rgba(0,0,0,.45); -webkit-text-stroke: 1.5px rgba(255,255,255,.75); }
#stars:not(.wanted) { opacity: .55; }
#stars .on { color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 0 0 8px rgba(255,255,255,.6); }
#stars .flash { animation: starflash .35s steps(2) infinite; }
@keyframes starflash { 50% { color: #ff3b3b; } }
#clock { font-size: 16px; font-weight: 700; text-shadow: var(--outline-s); margin-top: 3px; }
#faction { font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-top: 2px; text-shadow: var(--outline-s); }
#faction.citizen { color: #9fd3ff; } #faction.criminal { color: #ff5a62; } #faction.enforcer { color: #6aa6ff; } #faction.hunter { color: var(--warn); }
body.practice #faction::after { content: ' · PRACTICE'; color: var(--warn); }

/* GTA help box (context prompt) */
#helpbox { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 14px; max-width: min(380px, 44vw); background: rgba(0,0,0,.8); border-radius: 3px; padding: 10px 14px; font-size: 18px; font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: 10px; animation: hin .18s ease-out; }
@keyframes hin { from { opacity: 0; transform: translateY(-6px); } }
#toasts { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 76px; width: min(380px, 44vw); display: flex; flex-direction: column; gap: 5px; }
.toast { background: rgba(0,0,0,.72); border-left: 4px solid #888; padding: 7px 11px; font-size: 15px; font-weight: 600; line-height: 1.25; animation: tin .2s ease-out; }
.toast.good { border-color: var(--good); } .toast.bad { border-color: var(--bad); } .toast.warn { border-color: var(--warn); } .toast.info { border-color: #6aa6ff; }
@keyframes tin { from { transform: translateX(-20px); opacity: 0; } }

/* mission line = bottom subtitle */
#job { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 700; text-align: center; max-width: 56vw; color: #fff; text-shadow: var(--outline-s), 0 0 8px #000; }
#job::first-letter { color: var(--warn); }
#cruiser-hint { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 700; text-align: center; max-width: 60vw; color: #9fbaff; text-shadow: var(--outline-s), 0 0 8px #000; pointer-events: none; }
.touch #cruiser-hint { bottom: auto; top: 76px; font-size: 13px; max-width: 40vw; }
body.portrait.touch #cruiser-hint { top: auto; bottom: 330px; max-width: 86vw; }

/* radar + vitals (bottom left) */
#radar-wrap { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: 14px; width: 170px; pointer-events: auto; }
#radar { width: 170px; height: 170px; border-radius: 50%; border: 4px solid #000; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.6); background: #111; display: block; cursor: pointer; }
#vitals { display: flex; gap: 4px; margin-top: 6px; }
.vbar { position: relative; height: 9px; flex: 1; background: rgba(0,0,0,.6); border: 2px solid #000; overflow: hidden; }
.vbar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .15s; }
.fill.hp { background: linear-gradient(#7fe07f, #3c9a3c); } .fill.hp.low { background: linear-gradient(#ff6b6b, #b8222a); animation: hplow .6s steps(2) infinite; }
@keyframes hplow { 50% { opacity: .55; } }
.fill.st { background: linear-gradient(#7fd7ff, #2a86c8); }
#status { font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-top: 4px; text-shadow: var(--outline-s); color: var(--warn); }
#w-carry { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: 16px; font-size: 14px; font-weight: 700; color: var(--gold); text-shadow: var(--outline-s); text-align: right; }
#fishbar { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 28px; color: var(--warn); text-shadow: var(--outline); display: flex; gap: 10px; align-items: center; }
#fishbar.bite { color: #fff; animation: starflash .3s steps(2) infinite; }
#net { position: absolute; right: 10px; bottom: 40px; font-size: 11px; color: var(--dim); text-shadow: var(--outline-s); }
#hud-btns { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; opacity: .7; }
#hud-btns button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; font-size: 17px; cursor: pointer; }
body.kbm #b-fs { display: none; }

/* district title card */
#district { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: var(--display); font-size: 52px; letter-spacing: 2px; color: #fff; text-transform: uppercase;
  text-shadow: var(--outline), 0 0 24px rgba(0,0,0,.6); pointer-events: none; opacity: 0; white-space: nowrap; z-index: 6; text-align: center; }
#district small { display: block; font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 7px; color: var(--warn); margin-top: 2px; }
#district.show { animation: district 3.4s ease-out; }
@keyframes district { 0% { opacity: 0; transform: translateX(-50%) scale(1.25); } 10% { opacity: 1; transform: translateX(-50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; } }

/* ---- interaction menu (GTA style, left side) ---- */
#menu { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; z-index: 20; padding: 70px 0 0 max(24px, env(safe-area-inset-left)); background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 60%); }
#menu .panel, #settings .panel { width: min(440px, 92vw); max-height: 82vh; overflow: auto; background: transparent; }
.mhead { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(120deg, var(--accent), var(--accent2)); padding: 14px 16px; }
#menu h2, #settings h2 { margin: 0; font-family: var(--display); font-size: 32px; font-weight: normal; color: #fff; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.35); text-transform: uppercase; }
#m-close, #s-close { background: rgba(0,0,0,.25); border: none; color: #fff; font-size: 18px; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; }
#m-sub { color: #ddd; font-size: 15px; font-weight: 600; margin: 0; padding: 8px 14px; background: #000; line-height: 1.35; }
#m-money { font-size: 15px; font-weight: 700; color: var(--money); padding: 6px 14px; background: rgba(0,0,0,.85); }
#m-opts { background: rgba(0,0,0,.72); }
.opt { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: transparent; color: #fff; border: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 14px; font-size: 17px; font-weight: 600; cursor: pointer; }
.opt:hover, .opt.focus { background: #f2f2f2; color: #111; }
.opt:hover .note, .opt.focus .note { color: #555; }
.opt[disabled] { opacity: .4; cursor: default; }
.opt .price { color: var(--money); font-weight: 700; } .opt:hover .price, .opt.focus .price { color: #1d7d2a; }
.opt .price.sell { color: var(--gold); } .opt .note { color: var(--dim); font-size: 14px; margin-left: 8px; }

/* ---- overlays: pause / settings / controls (gamepad focus = .pfocus) ---- */
#pause, #controls { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: flex-start; padding: 60px 0 0 max(24px, env(safe-area-inset-left)); }
#pause .panel, #controls .panel { width: min(440px, 92vw); max-height: 86vh; overflow: auto; }
.msub { margin: 0; padding: 8px 14px; background: #000; color: #ddd; font-size: 15px; font-weight: 600; }
.m-opts { background: rgba(0,0,0,.78); }
.cbody { background: rgba(0,0,0,.82); padding: 12px 16px; font-size: 16px; line-height: 1.6; color: #ddd; }
.cbody b { font-family: var(--display); font-weight: normal; color: #fff; letter-spacing: 1px; display: block; margin-top: 6px; }
.x { background: rgba(0,0,0,.25); border: none; color: #fff; font-size: 18px; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; }
.pfocus, .opt.pfocus { background: #f2f2f2 !important; color: #111 !important; }
.srow.pfocus span { color: #111; }
#title button.pfocus { outline: 3px solid #fff; outline-offset: 4px; filter: brightness(1.2); }
#dev.as-overlay { position: absolute; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, 90vw); max-height: 86vh; z-index: 41; }
#dev.as-overlay button.pfocus { background: #f2f2f2; color: #111; }

/* ---- settings ---- */
#settings { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
#settings .panel { background: rgba(0,0,0,.85); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 17px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); }
.srow select { font: inherit; font-size: 15px; background: #222; color: #fff; border: 1px solid #555; padding: 4px 6px; max-width: 220px; }
.srow input { width: 22px; height: 22px; accent-color: var(--accent); }
.sbtn { display: block; width: calc(100% - 32px); margin: 12px 16px 16px; padding: 10px; font-size: 17px; font-weight: 700; background: #2b2f45; color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }

/* ---- WASTED ---- */
#death { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(transparent 30%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.55) 58%, transparent 70%); z-index: 15; pointer-events: auto; text-align: center; }
#death h1 { font-family: var(--display); font-weight: normal; font-size: 112px; color: #c8161e; margin: 0; letter-spacing: 4px; text-shadow: var(--outline), 0 0 30px rgba(0,0,0,.8); animation: wasted .9s ease-out; }
@keyframes wasted { from { transform: scale(1.6); opacity: 0; } }
#death p { font-size: 20px; font-weight: 700; text-shadow: var(--outline-s); margin: 6px 0; }
#d-spawn { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 640px; margin: 10px auto 0; }
#d-spawn .d-lbl { width: 100%; font-size: 16px; font-weight: 700; color: #fff; text-shadow: var(--outline-s); }
.spawn-opt { font-size: 16px; font-weight: 700; color: #fff; background: rgba(0,0,0,.75); border: 2px solid rgba(255,255,255,.25); padding: 9px 16px; cursor: pointer; }
.spawn-opt:hover { border-color: #fff; }
.spawn-opt.on { background: #f2f2f2; color: #111; border-color: #fff; }

#bigmap { position: absolute; inset: 0; background: rgba(0,0,0,.82); z-index: 18; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; padding: 0 max(12px, env(safe-area-inset-left)); }
#bm-mapwrap { display: flex; flex-direction: column; align-items: center; }
#bigmap canvas { cursor: crosshair; }
#bigmap canvas { border: 4px solid #000; box-shadow: 0 0 0 2px rgba(255,255,255,.2); background: #0b1830; }
#bigmap p { color: var(--dim); font-size: 14px; font-weight: 600; }

#dev { position: absolute; right: 10px; top: 200px; background: rgba(0,0,0,.85); border-top: 4px solid var(--warn); padding: 8px; z-index: 12; width: 190px; max-height: 70vh; overflow-y: auto; }
#dev b { color: var(--warn); font-size: 13px; } #dev button { display: block; width: 100%; margin-top: 4px; font-size: 14px; font-weight: 600; background: #222; color: #fff; border: 1px solid #555; padding: 5px; cursor: pointer; }

/* ---- title ---- */
#title { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px; padding: 16px; text-align: center; overflow: auto;
  background: radial-gradient(ellipse at 50% 35%, rgba(122,60,255,.35), transparent 60%), radial-gradient(ellipse at center, rgba(40,10,40,.85), rgba(4,5,10,.97)); }
#logo { width: min(440px, 70vw, 46vh); filter: drop-shadow(0 10px 24px #000); }
#t-status { color: var(--dim); font-size: 16px; font-weight: 600; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; justify-content: center; } /* fixed height: status changes never shift the menu */
#t-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
#play, #practice, #t-resume { font-family: var(--display); font-size: 26px; letter-spacing: 1.5px; color: #fff; border: none; padding: 12px 34px; cursor: pointer; transform: skewX(-10deg); box-shadow: 6px 6px 0 #000; }
#play { background: linear-gradient(120deg, var(--accent), #ff7a3e); }
#practice { background: #2b2f45; font-size: 22px; }
#t-resume { background: #ffd400; color: #111; }
#t-resume.hidden { display: none; }
#play:disabled { opacity: .45; cursor: wait; }
#play:not(:disabled):hover, #practice:hover { transform: skewX(-10deg) translateY(-2px); }
#t-practice { font-size: 14px; color: var(--dim); max-width: 560px; line-height: 1.45; margin-top: -4px; }
#t-help { font-size: 14px; color: #c8cad8; max-width: 820px; line-height: 1.6; }
#t-help b { color: #fff; font-family: var(--display); font-weight: normal; letter-spacing: 1px; margin-right: 6px; }
#t-tools { display: flex; gap: 10px; }
#t-tools button { font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); padding: 6px 14px; cursor: pointer; }
body.kbm #t-fs { display: none; }
#t-note { font-size: 13px; color: #6c7096; }
#t-ver { font-size: 11px; color: #4c5070; letter-spacing: 1px; }

#land-tip { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 35; background: rgba(0,0,0,.82); color: #fff; padding: 14px 18px; border-left: 4px solid var(--accent); font-size: 18px; font-weight: 700; max-width: 84vw; text-align: center; pointer-events: none; transition: opacity 1.3s; }
#land-tip span { display: inline-block; font-size: 26px; margin-right: 8px; vertical-align: middle; animation: spin 2s ease-in-out infinite; }
@keyframes spin { 50% { transform: rotate(-90deg); } }
#land-tip.fade { opacity: 0; }

/* ---- touch controls ---- */
#touch { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#zone-l { position: absolute; left: 0; top: 34%; bottom: 0; width: 46%; pointer-events: auto; touch-action: none; }
.stick { position: absolute; border-radius: 50%; pointer-events: none; }
#stick-l { left: calc(max(20px, env(safe-area-inset-left)) + 66px); top: calc(100% - 100px); width: 132px; height: 132px; margin: -66px 0 0 -66px; border: 3px solid rgba(255,255,255,.22); background: rgba(0,0,0,.16); opacity: .55; transition: opacity .15s; }
#stick-l.active { opacity: 1; }
#stick-r { right: max(22px, env(safe-area-inset-right)); bottom: 22px; width: 132px; height: 132px; pointer-events: auto; touch-action: none; border: 3px solid rgba(255,255,255,.25); background: rgba(0,0,0,.2); }
#stick-r .ring { position: absolute; inset: 6px; border-radius: 50%; border: 9px solid rgba(255,60,60,.22); }
#stick-r.aiming { border-color: rgba(255,255,255,.55); }
#stick-r.firing .ring { border-color: rgba(255,60,60,.75); }
#stick-r.firing .knob { background: #e8323a; }
#stick-r .lbl { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.6); }
body:not(.armed) #stick-r .lbl::after { content: ' · PUNCH'; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.4); border: 2px solid rgba(0,0,0,.45); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
#tbtns { position: absolute; inset: 0; pointer-events: none; }
#tbtns button { position: absolute; pointer-events: auto; touch-action: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-shadow: var(--outline-s); }
#tbtns button.on { background: rgba(255,255,255,.85); color: #111; text-shadow: none; }
#tbtns button.pulse { border-color: #fff; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255,62,138,.35); } }
#tbtns .fire { width: 78px; height: 78px; right: calc(max(22px, env(safe-area-inset-right)) + 146px); bottom: 84px; background: rgba(200,22,30,.7); font-size: 16px; }
#tbtns .dive { right: calc(max(22px, env(safe-area-inset-right)) + 150px); bottom: 10px; width: 66px; height: 54px; border-radius: 27px; }
#tbtns .act { right: calc(max(22px, env(safe-area-inset-right)) + 8px); bottom: 166px; }
#tbtns .car { right: calc(max(22px, env(safe-area-inset-right)) + 74px); bottom: 186px; }
#tbtns .throw { right: calc(max(22px, env(safe-area-inset-right)) + 140px); bottom: 176px; }
#tbtns .sprint { right: calc(max(22px, env(safe-area-inset-right)) + 228px); bottom: 14px; width: 66px; height: 48px; border-radius: 24px; font-size: 12px; }
#tbtns .horn, #tbtns .reload { right: calc(max(22px, env(safe-area-inset-right)) + 232px); bottom: 74px; width: 58px; height: 46px; border-radius: 23px; font-size: 12px; }
#tbtns .wpn { display: none; }
#tbtns .heal { left: calc(max(10px, env(safe-area-inset-left)) + 124px); top: 10px; width: 52px; height: 30px; border-radius: 15px; font-size: 11px; }
body.touch #weapon { pointer-events: auto; cursor: pointer; }
.touch #helpbox, .touch #toasts { margin-left: 58px; }
#tbtns .map { display: none; }
#tbtns .cruiser { left: calc(max(10px, env(safe-area-inset-left)) + 182px); top: 10px; width: 84px; height: 30px; border-radius: 15px; font-size: 11px; background: rgba(40,70,190,.75); }
#tbtns .cruiser.cooling { background: rgba(0,0,0,.5); color: #aab; }
body:not(.can-call) #tbtns .cruiser { display: none; }
#dev-btn { top: 8px; left: calc(50% + 72px); width: 50px !important; height: 34px !important; border-radius: 8px !important; font-size: 11px !important; }
#tbtns .veh { display: none; }
body.in-veh #tbtns .dive .foot { display: none; } body.in-veh #tbtns .dive .veh { display: inline; }
body:not(.in-veh) #tbtns .horn, body.in-veh #tbtns .sprint, body:not(.carrying) #tbtns .throw, body:not(.armed) #tbtns .reload { display: none; }

/* touch HUD arrangement: radar moves top-left (the left thumb owns the bottom-left) */
.touch #net, .touch #w-carry { display: none; }
.touch #radar-wrap { top: 10px; bottom: auto; left: max(10px, env(safe-area-inset-left)); width: 112px; }
.touch #radar { width: 112px; height: 112px; border-width: 3px; }
.touch #status { font-size: 10px; }
.touch #helpbox { left: calc(max(10px, env(safe-area-inset-left)) + 124px); top: 10px; font-size: 15px; padding: 7px 10px; max-width: 38vw; }
.touch #toasts { left: calc(max(10px, env(safe-area-inset-left)) + 124px); top: 58px; width: min(40vw, 360px); }
.touch .toast { font-size: 13px; padding: 5px 8px; }
.touch #toasts .toast:nth-last-child(n+3) { display: none; }
.touch #hud-tr { top: 6px; }
.touch #weapon { min-height: 40px; padding: 2px 4px 2px 16px; }
.touch #w-icon canvas { width: 72px; height: 36px; }
.touch #w-name { font-size: 14px; }
.touch #money { font-size: 28px; }
.touch #bank { font-size: 12px; }
.touch #stars { font-size: 21px; min-height: 22px; }
.touch #clock { font-size: 13px; }
.touch #faction { font-size: 11px; }
.touch #job { bottom: auto; top: 50px; font-size: 15px; max-width: 40vw; }
.touch #district { font-size: 34px; top: 30%; }
.touch #district small { font-size: 13px; letter-spacing: 5px; }
.touch #fishbar { bottom: auto; top: 35%; }
.touch #menu { padding-top: 12px; }
.touch #death h1 { font-size: 72px; }

/* short landscape phones */
@media (max-height: 430px) {
  #title { gap: 8px; } #logo { width: min(240px, 34vh * 1.4); } #t-help { font-size: 12px; line-height: 1.4; } #t-note { display: none; }
  #play, #practice { font-size: 20px; padding: 9px 24px; }
  .touch #stick-r, #tbtns button { transform: scale(.9); }
}
/* portrait phones: controls hug the bottom, HUD compacts */
body.portrait.touch #hud-tr { max-width: 46vw; }
body.portrait.touch #money { font-size: 24px; }
body.portrait.touch #weapon { display: none; }
body.portrait.touch #helpbox, body.portrait.touch #toasts { left: max(10px, env(safe-area-inset-left)); top: 200px; max-width: 80vw; width: auto; }
body.portrait.touch #toasts { top: 250px; width: 80vw; }
body.portrait.touch #job { top: auto; bottom: 300px; max-width: 86vw; }
body.portrait.touch #tbtns .sprint { right: calc(max(22px, env(safe-area-inset-right)) + 228px); bottom: 186px; }
body.portrait.touch #tbtns .horn, body.portrait.touch #tbtns .reload { right: calc(max(22px, env(safe-area-inset-right)) + 228px); bottom: 246px; }
body.portrait.touch #tbtns .heal { left: max(10px, env(safe-area-inset-left)); top: 160px; }
body.portrait.touch #tbtns .cruiser { left: calc(max(10px, env(safe-area-inset-left)) + 60px); top: 160px; }
body.portrait.touch #helpbox, body.portrait.touch #toasts { margin-left: 0; }
body.portrait.touch #zone-l { top: 50%; width: 50%; }
@media (max-width: 760px) and (min-height: 431px) { #death h1 { font-size: 64px; } #district { font-size: 34px; } }

#install { position: absolute; inset: 0; z-index: 42; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
#install .panel { width: min(460px, 92vw); max-height: 86vh; overflow: auto; background: rgba(0,0,0,.88); }
.ibody { padding: 6px 16px 0; color: #e8e8e8; font-size: 15px; line-height: 1.45; }
.ibody h3 { margin: 12px 0 4px; font-size: 15px; color: #ffd36b; letter-spacing: 1px; }
.ibody ol { margin: 0; padding-left: 20px; }
.ibody b { color: #fff; }

#faction .misc { color: #ffc23d; }
#faction .misc.last { color: #ff4a4a; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---- tutorial / city tour ---- */
#tutorial { position: absolute; inset: 0; z-index: 45; background: #0d2238; }
#tut-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#tut-chapters { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 2px; padding: 6px max(10px, env(safe-area-inset-left)); background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.55)); overflow-x: auto; scrollbar-width: none; }
.tut-ch { flex: 0 0 auto; font: 15px Anton, Impact, sans-serif; letter-spacing: 1px; color: #aab; background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 4px 10px; cursor: pointer; }
.tut-ch.on { color: #fff; border-bottom-color: var(--accent, #ff3e8a); }
#tut-panel { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(820px, calc(100vw - 24px)); background: rgba(6,8,14,.9); border: 1px solid rgba(255,255,255,.18); border-left: 4px solid #ffd400; padding: 12px 16px 10px; color: #eee; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
#tut-kicker { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #ffd400; text-transform: uppercase; }
#tut-title { margin: 2px 0 6px; font: 30px Anton, Impact, sans-serif; letter-spacing: 1px; color: #fff; text-shadow: var(--outline-s); }
#tut-text { font-size: 16px; line-height: 1.45; max-height: 26vh; overflow: auto; }
#tut-text .tut-extra { display: block; margin-top: 6px; color: #9fd4ff; font-size: 14px; }
#tut-text .g-key, #tut-text .g-pad, #tut-text .g-touch { vertical-align: 1px; }
#tut-progress { height: 3px; background: rgba(255,255,255,.12); margin: 10px 0 8px; }
#tut-bar { height: 100%; background: #ffd400; transform-origin: left; transform: scaleX(0); }
#tut-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#tut-btns button { font: 15px Anton, Impact, sans-serif; letter-spacing: 1px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); padding: 6px 14px; cursor: pointer; }
#tut-btns button:disabled { opacity: .35; }
#tut-next { order: 4; background: #ffd400 !important; color: #111 !important; border-color: #ffd400 !important; }
#tut-prev { order: 1; } #tut-pause { order: 2; } #tut-count { order: 3; margin-left: auto; color: #889; font-size: 13px; } #tut-skip { order: 5; }
#tut-btns .pfocus { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-height: 500px) {
  #tut-title { font-size: 22px; margin: 0 0 3px; } #tut-text { font-size: 13.5px; max-height: 30vh; } #tut-panel { padding: 8px 12px 8px; } #tut-progress { margin: 6px 0; }
  #tut-btns button { font-size: 13px; padding: 4px 10px; } .tut-ch { font-size: 13px; padding: 2px 8px; }
}
body.portrait #tut-text { font-size: 14px; max-height: 30vh; }

#d-spawn .spawn-opt.pfocus { outline: 3px solid #fff; outline-offset: 3px; transform: scale(1.06); }

/* ---- phone ---- */
#phone { position: absolute; inset: 0; z-index: 41; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: flex-end; padding-right: max(24px, env(safe-area-inset-right)); }
.ph-body { width: min(340px, 92vw); height: min(620px, 88vh); background: #10131c; border: 3px solid #2c3142; border-radius: 26px; box-shadow: 0 12px 40px rgba(0,0,0,.7), inset 0 0 0 2px #000; display: flex; flex-direction: column; overflow: hidden; }
.ph-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; background: #1a1f2c; border-bottom: 1px solid #2c3142; color: #9aa; font: 600 13px Rubik, sans-serif; }
.ph-top #ph-clock { flex: 1; text-align: center; letter-spacing: 1px; }
.ph-top button { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; padding: 2px 6px; }
#ph-screen { flex: 1; overflow-y: auto; padding: 10px 12px 14px; color: #e8e8ee; font: 14px Rubik, system-ui, sans-serif; }
#ph-screen h3 { margin: 12px 2px 6px; font: 15px Anton, Impact, sans-serif; letter-spacing: 1px; color: #ffd400; }
.ph-apps { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ph-app { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #2c3142; background: #1b2130; color: #fff; font: 600 15px Rubik, sans-serif; cursor: pointer; text-align: left; }
.ph-app b { font-size: 22px; width: 30px; text-align: center; }
.ph-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 8px; margin: 3px 0; border-radius: 10px; border: 1px solid transparent; background: #171c28; color: #fff; font: 14px Rubik, sans-serif; cursor: pointer; }
.ph-row:disabled { opacity: .45; cursor: default; }
.ph-row .ic { width: 28px; text-align: center; font-weight: 700; color: #ffd400; }
.ph-row .ic.tier { font: 15px Anton, Impact, sans-serif; color: #3ddc84; }
.ph-row .nm { flex: 1; display: flex; flex-direction: column; }
.ph-row small { color: #8a90a2; font-size: 12px; }
.ph-row .d { color: #9fd4ff; font-weight: 700; }
.ph-row.pfocus, .ph-app.pfocus { border-color: #fff; outline: 2px solid #fff; }
.ph-card { margin: 10px 0; padding: 10px; border-radius: 12px; background: #1f2636; border-left: 3px solid #4fd6ff; font-size: 13px; }
.ph-card.job { border-left-color: #ffd400; }
.ph-card button { display: block; margin-top: 8px; width: 100%; padding: 7px; border-radius: 8px; border: 1px solid #ff5a4a; background: rgba(255,90,74,.15); color: #fff; font: 600 13px Rubik, sans-serif; cursor: pointer; }
.ph-hint, .ph-empty { color: #8a90a2; font-size: 12.5px; margin: 6px 2px; }
body.portrait #phone { justify-content: center; padding: 0; }

#tut-ask { position: absolute; inset: 0; z-index: 44; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
#tut-ask .panel { width: min(460px, 92vw); }

/* world-map waypoint panel */
#bm-panel { width: 230px; max-height: 86vh; overflow-y: auto; background: rgba(10,13,22,.92); border: 1px solid #2c3142; border-radius: 12px; padding: 8px; flex: 0 0 auto; }
#bm-panel h3 { margin: 4px 4px 8px; font: 16px Anton, Impact, sans-serif; letter-spacing: 1px; color: #ffd400; }
.bm-row { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 7px 8px; margin: 2px 0; border-radius: 8px; border: 1px solid transparent; background: #171c28; color: #fff; font: 13.5px Rubik, sans-serif; cursor: pointer; }
.bm-row .ic { width: 22px; text-align: center; color: #ffd400; font-weight: 700; }
.bm-row .nm { flex: 1; display: flex; flex-direction: column; }
.bm-row small { color: #8a90a2; font-size: 11.5px; }
.bm-row .d { color: #9fd4ff; font-weight: 700; font-size: 12px; }
.bm-row.back { color: #ffd400; font-weight: 700; }
.bm-row.clear { color: #ff8a7a; flex-wrap: wrap; }
.bm-row.pfocus { border-color: #fff; outline: 2px solid #fff; }
.bm-hint { color: #8a90a2; font-size: 12px; margin: 8px 4px; }
body.portrait #bigmap { flex-direction: column; justify-content: flex-start; padding-top: 12px; }
body.portrait #bm-panel { width: calc(100vw - 24px); max-height: 34vh; }

/* building interiors (police station lobby / armory) behind the menu */
#interior { position: absolute; inset: 0; z-index: 15; background: #07080b; }
#int-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#int-open { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; border: none; font-family: var(--display); font-size: 22px; padding: 10px 26px; cursor: pointer; letter-spacing: 1px; }

/* store robbery bar */
#rob { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.78); padding: 8px 14px; border: 2px solid #ffd400; font-family: var(--display); color: #ffd400; letter-spacing: 1px; pointer-events: none; }
#rob .rob-bar { width: 140px; height: 10px; background: #333; } #rob-fill { display: block; height: 100%; width: 0; background: #ffd400; transition: width .2s; }
#rob span { font-family: var(--ui, sans-serif); font-weight: 800; color: #7fe07f; min-width: 90px; }
#trainbar { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.72); padding: 6px 12px; border: 2px solid #9ad0ff; font-family: var(--display); color: #9ad0ff; letter-spacing: 1px; pointer-events: none; font-size: 13px; }
#trainbar span { font-family: var(--ui, sans-serif); font-weight: 700; color: #fff; }
#trainbar.sub { border-color: #ffd36b; color: #ffd36b; }
#trainbar .rob-bar { width: 110px; height: 8px; background: #333; } #tb-fill { display: block; height: 100%; width: 0; background: #ffd36b; transition: width .2s; }
#rob.alarm { border-color: #ff3b3b; color: #ff3b3b; animation: robflash .5s steps(2) infinite; } #rob.alarm span { color: #ff7070; }
@keyframes robflash { 50% { background: rgba(120,0,0,.85); } }