/* Gotham AI — noir deco game UI */
@font-face { font-family: DSEG7; font-weight: bold; font-display: swap; src: url("assets/fonts/DSEG7Classic-Bold.woff2") format("woff2"); }
:root { --neon: #d9b46a; --amber: #ff9a2e; --ink: #e8e2d0; --bg: #0b0d12; --glass: rgba(11, 13, 18, .72);
  --line: rgba(217, 180, 106, .3); --cash: #7dde6a; --pad: max(14px, env(safe-area-inset-left));
  --display: Cinzel, Georgia, serif; --deco: Limelight, Cinzel, serif; --mono: "Share Tech Mono", ui-monospace, monospace; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 14px/1.4 var(--mono);
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
kbd { font: inherit; padding: 0 .4em; border: 1px solid var(--line); border-radius: 4px; }
svg { fill: currentColor; }

#road { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.fx { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 45%, rgba(0, 0, 0, .72)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0 0 auto; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(16px, env(safe-area-inset-top)) var(--pad) 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.brand { font: 26px var(--deco); color: #fff; text-decoration: none; text-shadow: 0 0 10px var(--neon), 0 0 30px var(--neon); }
.brand span, .title h1 span { color: var(--neon); }
.hud-r { text-align: right; display: grid; gap: 6px; justify-items: end; }
.county { font: 13px var(--display); letter-spacing: .06em; display: flex; gap: .5em; align-items: center;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); backdrop-filter: blur(6px); }
.county svg { width: 1.2em; color: var(--neon); }
.county b { color: var(--cash); font: bold 13px var(--mono); text-shadow: 0 0 10px rgba(125, 222, 106, .5); }
.stamp { font-size: 10px; letter-spacing: .25em; opacity: .65; }

.toast { position: fixed; right: var(--pad); bottom: 30%; z-index: 4; text-align: right; pointer-events: none; opacity: 0;
  font: italic clamp(30px, 5.5vw, 64px)/1 var(--display); color: #ffd35a; -webkit-text-stroke: 2px #120e06;
  text-shadow: 0 4px 0 #120e06, 0 0 30px rgba(255, 180, 60, .45); }
.toast small { display: block; font: 13px var(--mono); letter-spacing: .4em; color: var(--ink); -webkit-text-stroke: 0; text-shadow: 0 1px 2px #000; }
.toast.show { animation: toast 3s ease both; }
@keyframes toast { 0% { opacity: 0; transform: translateY(16px) } 12%, 80% { opacity: 1; transform: none } 100% { opacity: 0 } }

.prompt { position: fixed; left: 50%; bottom: 150px; z-index: 4; translate: -50% 12px; opacity: 0; pointer-events: none;
  font: 15px var(--display); letter-spacing: .05em; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--glass); border: 1.5px solid var(--neon); box-shadow: 0 0 24px var(--neon); backdrop-filter: blur(6px);
  transition: opacity .25s, translate .25s; }
.prompt.show { opacity: 1; translate: -50% 0; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 6px var(--neon) } }

.radar { position: fixed; left: var(--pad); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; padding: 0; border: 3px solid rgba(255, 255, 255, .8);
  width: clamp(104px, 13vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #15202b, #070b10); box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }
.radar canvas { width: 100%; height: 100%; display: block; }
.speedo { position: fixed; right: var(--pad); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 3; text-align: right;
  font-family: var(--display); text-shadow: 0 3px 0 #000; line-height: .9; }
.speedo b { display: block; font-size: clamp(40px, 6vw, 64px); font-weight: 400; font-variant-numeric: tabular-nums; }
.speedo small { font-size: 11px; letter-spacing: .3em; opacity: .7; }
.snd { position: fixed; right: var(--pad); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 84px); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); }
.snd::before { content: "🔊"; } .snd[aria-pressed="true"]::before { content: "🔇"; }

.pad { position: fixed; left: 50%; translate: -50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 10px; }
.pad button { width: 64px; height: 56px; border-radius: 12px; font: 14px var(--display); touch-action: none;
  background: var(--glass); border: 1.5px solid var(--line); backdrop-filter: blur(6px); transition: transform .08s, background .1s; }
.pad .gas { width: 96px; border-color: var(--neon); background: color-mix(in srgb, var(--neon) 30%, transparent); }
.pad .hit { transform: scale(.92); background: rgba(255, 255, 255, .25); }
.pad .act { display: none; width: auto; padding: 0 16px; color: #04130e; background: var(--neon); border-color: var(--neon); box-shadow: 0 0 20px var(--neon); }
.pad .act.show { display: block; }
.keys { position: fixed; left: 50%; translate: -50%; top: max(22px, env(safe-area-inset-top)); z-index: 3; font-size: 11px;
  letter-spacing: .12em; opacity: .6; white-space: nowrap; display: none; }
@media (pointer: fine) {
  .pad { bottom: 52px; } .pad :is(button:not(.act), .steer) { display: none; } .keys { display: block; }
}
body:has(.title:not(.gone)) :is(.pad, .keys, .prompt, .speedo, .snd, .toast),
body:has(.station.open) :is(.pad, .keys, .prompt, .speedo, .radar, .snd, .toast, .hud-r) { visibility: hidden; }

/* ---------- title card ---------- */
.title { position: fixed; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px;
  text-align: center; background: radial-gradient(70% 60% at 50% 45%, rgba(12, 10, 20, .3), rgba(12, 10, 20, .85));
  transition: opacity .6s, visibility .6s; }
.title.gone { opacity: 0; visibility: hidden; }
.title h1 { font: clamp(52px, 12vw, 128px)/1 var(--deco); color: #fff; text-shadow: 0 0 18px var(--neon), 0 0 60px var(--neon); }
.title > p { font-size: clamp(14px, 2vw, 18px); letter-spacing: .08em; opacity: .85; }
.title .or { font-size: 11px; letter-spacing: .3em; opacity: .55; margin-top: 10px; text-transform: uppercase; }
.go { font: 15px var(--display); letter-spacing: .06em; padding: 14px 26px; border-radius: 12px; border: 0; color: #04130e;
  background: var(--neon); box-shadow: 0 0 26px var(--neon); animation: pulse 1.6s ease-in-out infinite; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font: 12px var(--display);
  letter-spacing: .05em; background: var(--glass); border: 1.5px solid var(--c); backdrop-filter: blur(6px); transition: background .15s; }
.chips button:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.chips svg { width: 16px; color: var(--c); }

/* ---------- station cutscene ---------- */
.station { position: fixed; inset: 0; z-index: 2; opacity: 0; visibility: hidden; overflow: hidden; background: #000; transition: opacity .5s, visibility .5s; }
.station.open { opacity: 1; visibility: visible; }
.station img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-ui { position: absolute; left: var(--pad); bottom: max(20px, env(safe-area-inset-bottom)); max-width: min(560px, 90vw);
  display: grid; gap: 12px; justify-items: start; text-shadow: 0 2px 8px #000; }
.st-ui h2 { display: flex; align-items: center; gap: .3em; font: italic clamp(34px, 6vw, 72px)/1 var(--display); color: #ffd35a;
  -webkit-text-stroke: 2px #120e06; text-shadow: 0 4px 0 #120e06, 0 0 30px rgba(255, 180, 60, .4); }
.st-logo { width: .8em; color: var(--neon); filter: drop-shadow(0 0 8px var(--neon)); -webkit-text-stroke: 0; }
.st-ui p { letter-spacing: .35em; font-size: 12px; }
.st-ui .chips { justify-content: start; }
.st-go { display: flex; gap: 10px; flex-wrap: wrap; }
.st-go button:not(.go) { font: 13px var(--display); padding: 13px 18px; border-radius: 12px; background: var(--glass); border: 1.5px solid var(--line); backdrop-filter: blur(6px); }
@media (max-aspect-ratio: 4/5) { .st-ui { right: var(--pad); max-width: none; justify-items: center; text-align: center; } .st-ui .chips { justify-content: center; } }

/* ---------- LED price board (mapped onto the photo's billboard glass) ---------- */
.board { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; justify-content: space-evenly;
  padding: .7em .8em; background: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15)); }
.board::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(116deg, transparent 42%, rgba(190, 235, 255, .06) 50%, transparent 58%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.b-head { display: flex; align-items: center; justify-content: center; gap: .3em; font: 1.15em/1 var(--deco); color: var(--neon);
  text-shadow: 0 0 .3em var(--neon), 0 0 .9em var(--neon); white-space: nowrap; }
.b-logo { width: 1.1em; filter: drop-shadow(0 0 .2em var(--neon)); }
.b-sub { display: flex; justify-content: space-between; font-size: .4em; letter-spacing: .22em; color: #ffcf8f; opacity: .8;
  padding-bottom: .4em; border-bottom: 1px solid rgba(255, 180, 60, .25); }
.b-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4em; }
.b-row + .b-row { border-top: 1px solid rgba(255, 180, 60, .09); padding-top: .25em; }
.b-lab { min-width: 0; line-height: 1.1; }
.b-lab b { display: block; font: .6em var(--display); white-space: nowrap; }
.b-lab b::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .4em; border-radius: 2px;
  background: var(--chip); box-shadow: 0 0 .4em var(--chip); }
.b-lab i { display: block; font: normal .4em var(--mono); color: #c4a676; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-px { display: grid; justify-items: end; }
.b-out { display: flex; align-items: baseline; gap: .3em; }
.b-out em { font: normal .3em var(--mono); letter-spacing: .15em; color: #8fe0cb; }
.led { display: inline-flex; align-items: flex-start; color: var(--amber); }
.led i { font: normal .38em var(--mono); margin: .45em .12em 0 0; font-style: normal; }
.led .seg, .led sup { position: relative; font: bold 1em/1 DSEG7, var(--mono); }
.led sup { font-size: .45em; margin-left: .08em; }
.led s { text-decoration: none; opacity: .12; }
.led b { position: absolute; right: 0; top: 0; font-weight: inherit; text-shadow: 0 0 .1em currentColor, 0 0 .35em currentColor; }
.led.in { font-size: 1em; }
.led.out { font-size: .42em; color: var(--neon); }
.board.boot .b-row { animation: boot .6s steps(4) both; animation-delay: calc(.35s + var(--i) * .14s); }
.board.boot .b-head { animation: boot .5s steps(3) .15s both; }
@keyframes boot { 0% { opacity: 0 } 30% { opacity: .9 } 55% { opacity: .15 } 100% { opacity: 1 } }

.fade { position: fixed; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; }
.fade.on { opacity: 1; }

/* calibrate mode */
.cal i { position: fixed; z-index: 8; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; cursor: grab;
  border: 2px solid #fff; background: color-mix(in srgb, var(--neon) 60%, transparent); box-shadow: 0 0 0 3px #000; }
.cal-out { position: fixed; z-index: 8; left: 50%; top: 12px; translate: -50%; padding: 8px 12px; background: #000c; border-radius: 8px; user-select: text; }

@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }