html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: radial-gradient(circle at 50% 35%, #3b2766 0%, #1b1440 55%, #0b0a1c 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none;
}
#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
/* Canvas is sized by JS (display.js) to the largest fit of the logical game area */
#c { display: block; touch-action: none; outline: none; image-rendering: auto; }
/* #ui overlays exactly the canvas box (positioned by display.js) */
#ui { position: absolute; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box; }
/* HUD layers (vignette, cards, toasts...) never take touches; only the real buttons do */
#ui > * { pointer-events: none; }
#ui > button { pointer-events: auto; z-index: 6; }
#loading, #rotate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 700; background: #1b1b2f; text-align: center;
}
#rotate { display: none; z-index: 10; }
/* Game is portrait-first; only nag on phones held sideways (short landscape screens) */
@media (orientation: landscape) and (max-height: 450px) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* ---------- menus (main, pause, garage, help, game over) ----------
   Overlays scroll when the content is taller than the screen: children use margin:auto (not flex centring, which clips the top). */
:root { --ink:#fff; --card:#1a1d44; --line:#3a3f80; --accent:#ff7b3a; --gold:#ffd23f; --good:#2fd97a; }
#loading, #pause, #shop, #help, #over { position: absolute; inset: 0; display: flex; z-index: 20; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); box-sizing: border-box; }
#loading > .ld-box, .panel, .sh-wrap { margin: auto; }
#loading { background: radial-gradient(circle at 50% 30%, #4a2f7a 0%, #1d1440 45%, #0c0a1e 100%); }
#pause { background: #070514e6; backdrop-filter: blur(3px); z-index: 22; }
#help { background: #070514f2; z-index: 23; }
#shop { background: #0a0818f2; z-index: 21; }
#over { background: #0a0818d0; z-index: 21; }
#pause[hidden], #shop[hidden], #over[hidden], #help[hidden] { display: none; }
.bg-fx { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bg-fx i { position: absolute; font-style: normal; font-size: min(9vmin, 46px); opacity: .13; animation: ld-drift 14s linear infinite; }
.bg-fx i:nth-child(1) { left: 6%;  animation-delay: -2s; } .bg-fx i:nth-child(2) { left: 24%; animation-delay: -7s; }
.bg-fx i:nth-child(3) { left: 46%; animation-delay: -11s; } .bg-fx i:nth-child(4) { left: 64%; animation-delay: -4s; }
.bg-fx i:nth-child(5) { left: 80%; animation-delay: -9s; } .bg-fx i:nth-child(6) { left: 92%; animation-delay: -13s; }
.ld-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: max(10px, 1.9vmin); width: min(88vw, 420px); padding: 14px 0; }
.ld-logo { width: min(24vmin, 110px); height: auto; border-radius: 22%; line-height: 1; filter: drop-shadow(0 .4em .5em #0008); animation: ld-bob 1.3s ease-in-out infinite alternate; }
.ld-title { font: 900 min(11.5vmin, 52px)/1 system-ui, sans-serif; letter-spacing: .05em; color: var(--gold); text-shadow: 0 .06em 0 #b3361b, 0 .12em 0 #6b1d0c, 0 0 .5em #ff7b3a88; text-align: center; }
.ld-title.sm { font-size: min(8vmin, 38px); }
.ld-sub { font: 800 max(11px, min(3.2vmin, 14px)) system-ui, sans-serif; letter-spacing: .3em; color: #bfc6ff; margin-top: -.6vmin; text-align: center; }
.ld-load { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; }
#loading.ready .ld-load { display: none; }
.ld-bar { width: 100%; height: max(10px, min(2.8vmin, 14px)); background: #ffffff1f; border-radius: 99px; overflow: hidden; border: 2px solid #ffffff3d; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff7b3a, #ffd23a); border-radius: 99px; transition: width .15s; }
.ld-pct { font: 700 max(13px, min(3.8vmin, 16px)) ui-monospace, Menlo, Consolas, monospace; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .4em .9em; border-radius: 99px; background: #ffffff14; border: 1.5px solid #ffffff2a; font: 800 max(12px, min(3.5vmin, 15px)) system-ui, sans-serif; white-space: nowrap; }
.chip b { color: var(--gold); font-family: ui-monospace, Menlo, monospace; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; width: 100%; min-height: 52px; padding: .8em 1.1em; border: 0; border-radius: 16px; cursor: pointer; color: #fff; touch-action: manipulation;
  font: 900 max(15px, min(4.3vmin, 18px)) system-ui, sans-serif; letter-spacing: .06em;
  background: linear-gradient(#5b61b8, #3a3f86); box-shadow: 0 .3em 0 #1b1e4f, 0 .55em 1em #0007, inset 0 .12em 0 #ffffff33;
  transition: transform .08s, filter .12s; }
.btn .ic { font-size: 1.25em; line-height: 1; }
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-.06em); }
.btn:active:not(:disabled) { transform: translateY(.22em); box-shadow: 0 .08em 0 #1b1e4f, 0 .2em .5em #0007, inset 0 .12em 0 #ffffff33; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { font-size: max(19px, min(5.6vmin, 24px)); min-height: 64px; padding: .9em 1.2em; background: linear-gradient(#ff9548, #e8421c); box-shadow: 0 .3em 0 #8a2410, 0 .55em 1.2em #0008, inset 0 .12em 0 #ffffff55; animation: ld-pulse 1.6s ease-in-out infinite; }
.btn.primary:disabled { animation: none; }
.btn.danger { background: linear-gradient(#d6475a, #9c1f31); box-shadow: 0 .3em 0 #4e0c18, 0 .55em 1em #0007, inset 0 .12em 0 #ffffff33; }
.btn.good { background: linear-gradient(#34e083, #129a52); box-shadow: 0 .3em 0 #07562d, 0 .55em 1em #0007, inset 0 .12em 0 #ffffff44; }
.btn.small { width: auto; padding: .6em 1.4em; border-radius: 12px; }
.btn-row { display: flex; gap: 10px; width: 100%; } .btn-row .btn { flex: 1; font-size: max(13px, min(3.6vmin, 15px)); padding: .8em .5em; letter-spacing: .03em; }
.credit { font: 500 max(10px, min(2.5vmin, 11px))/1.4 system-ui; opacity: .55; text-align: center; margin-top: 4px; }
.stack { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
.panel { width: min(92vw, 440px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 16px; margin: auto; background: linear-gradient(#1c1f4a, #121437); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 1em 2.5em #000a; animation: ld-pop .22s ease-out; }
.panel h2 { margin: 0; font: 900 max(22px, min(7.2vmin, 32px)) system-ui; letter-spacing: .08em; color: var(--gold); text-shadow: 0 .08em 0 #6b1d0c; text-align: center; }

/* garage: pick a ride from the tiles, see its stats, then one big BUY / EQUIP button */
.sh-wrap { width: min(94vw, 460px); display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-top h2 { margin: 0; font: 900 max(20px, min(6vmin, 26px)) system-ui; letter-spacing: .08em; color: var(--gold); text-shadow: 0 .08em 0 #6b1d0c; }
.sh-back { width: auto; min-height: 44px; padding: .5em 1em; font-size: 15px; }
.sh-bank { color: var(--gold); font: 900 max(16px, min(4.6vmin, 20px)) ui-monospace, monospace; background: #ffffff12; padding: .3em .8em; border-radius: 99px; border: 1.5px solid #ffffff2a; }
.sh-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.sh-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 70px; padding: 8px 0 6px; color: #fff; cursor: pointer; touch-action: manipulation;
  background: #1a1d44; border: 2px solid var(--line); border-radius: 14px; font: 800 11.5px system-ui; }
.sh-tile .ti { font-size: max(26px, min(8vmin, 36px)); line-height: 1.1; }
.sh-tile .tp { font-family: ui-monospace, monospace; font-size: 11px; opacity: .85; }
.sh-tile.lock .ti { filter: grayscale(.8) brightness(.65); }
.sh-tile.afford .tp { color: #4dff9a; opacity: 1; }
.sh-tile.sel { border-color: var(--gold); background: #2d2a66; box-shadow: 0 0 0 3px #ffd23f44; transform: translateY(-2px); }
.sh-tile.cur::after { content: "✔"; position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: #2dffa0; color: #052; font-size: 12px; }
.sh-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 14px 16px; background: linear-gradient(#232766, #161843); border: 2px solid var(--line); border-radius: 20px; text-align: center; }
.sh-hero.cur { border-color: #2dffa0; box-shadow: 0 0 1.2em #2dffa044; }
.sh-pic { font-size: max(64px, min(22vmin, 96px)); line-height: 1; filter: drop-shadow(0 .12em .2em #000a); animation: ld-bob 1.6s ease-in-out infinite alternate; }
.sh-pic.lock { filter: grayscale(.6) brightness(.7) drop-shadow(0 .12em .2em #000a); animation: none; }
.sh-name { font: 900 max(19px, min(5.4vmin, 24px)) system-ui; }
.sh-desc { font: 500 max(13px, min(3.5vmin, 15px))/1.35 system-ui; opacity: .85; max-width: 32em; }
.sh-bars { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sh-bar { display: flex; align-items: center; gap: 10px; font: 800 max(12px, min(3.2vmin, 14px)) system-ui; text-align: left; }
.sh-bar span { width: 5.6em; opacity: .8; flex: none; }
.sh-bar div { flex: 1; height: 9px; background: #ffffff22; border-radius: 6px; overflow: hidden; }
.sh-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7b3a, #ffd23a); border-radius: 6px; }
.sh-bar b { width: 3.2em; text-align: right; font-family: ui-monospace, monospace; opacity: .9; flex: none; }
.sh-need { font: 700 14px system-ui; color: #ffd9a0; }
.sh-act { width: 100%; }
.sh-act .btn { font-size: max(17px, min(5vmin, 21px)); min-height: 60px; }

/* help */
.help-grid { width: 100%; display: grid; grid-template-columns: minmax(5em, auto) 1fr; gap: 10px 12px; font: 600 max(13px, min(3.5vmin, 15px))/1.35 system-ui; align-items: center; }
.help-grid .k { justify-self: end; display: inline-flex; gap: .3em; flex-wrap: wrap; justify-content: flex-end; font-size: 1.15em; }
.help-grid kbd { background: #ffffff1f; border: 1.5px solid #ffffff44; border-bottom-width: 3px; border-radius: 7px; padding: .1em .5em; font: 800 .95em ui-monospace, monospace; }
.help-note { font: 600 max(13px, min(3.3vmin, 14px))/1.45 system-ui; color: #cfd3ff; text-align: center; }
.help-touch { display: none; } .touch .help-touch { display: contents; } .touch .help-desk { display: none; }

/* game over */
.ov-title { font: 900 max(22px, min(6.6vmin, 30px)) system-ui; text-align: center; color: #ff6b4a; text-shadow: 0 2px 0 #000a; }
.ov-best { text-align: center; color: var(--gold); font: 800 max(15px, min(3.8vmin, 17px)) system-ui; animation: ld-pulse 1s infinite; }
.ov-rows { width: 100%; }
.ov-row { display: flex; justify-content: space-between; font: 600 max(14px, min(3.7vmin, 16px)) system-ui; padding: .28em 0; border-bottom: 1px solid #ffffff18; }
.ov-row.pos b { color: #4dff9a; } .ov-row.neg b { color: #ff7a7a; } .ov-row.tot { font-size: max(18px, min(4.8vmin, 21px)); border: 0; } .ov-row.tot b { color: var(--gold); }
.ov-bank { text-align: center; font: 600 max(14px, min(3.4vmin, 15px)) system-ui; color: #cfd3ff; }

/* ---------- in-game: corner buttons, touch controls, steering stick, tutorial ---------- */
#pp-pause, #pp-mute { position: absolute; top: 12.5%; font: 900 1.05em system-ui, sans-serif; color: #fff; border: 0; border-radius: 99px; cursor: pointer; padding: .3em .7em; background: #0d1230cc; box-shadow: 0 0 0 .12em #ffffff55; touch-action: none; }
#pp-pause { right: 3%; } #pp-mute { right: 17%; }
#pp-brake, #pp-boost { position: absolute; bottom: 3.5%; display: none; width: 6.4em; height: 6.4em; border-radius: 50%; border: 0; color: #fff; touch-action: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font: 900 1em system-ui, sans-serif; letter-spacing: .04em; }
#pp-brake { left: 4%; background: radial-gradient(circle at 35% 30%, #ff7a5a, #c8321a 70%); box-shadow: 0 .3em 0 #5a1608, 0 .5em 1em #000a, inset 0 0 0 .22em #ffffff55; }
#pp-brake small, #pp-boost small { font-size: .62em; font-weight: 800; opacity: .9; }
#pp-boost { right: 4%; background: radial-gradient(circle at 35% 30%, #7a8a9a, #3c4658 70%); box-shadow: 0 .3em 0 #1a2030, 0 .5em 1em #000a, inset 0 0 0 .22em #ffffff40; font-size: 1.15em; opacity: .85; }
#pp-boost em { font: 900 .8em ui-monospace, monospace; font-style: normal; color: #ffd23f; }
#pp-boost.ready { opacity: 1; background: radial-gradient(circle at 35% 30%, #c98bff, #6b2cd9 70%); animation: ld-pulse 1s ease-in-out infinite; }
#pp-boost.on { opacity: 1; background: radial-gradient(circle at 35% 30%, #fff39a, #ffb000 70%); color: #3a2300; }
#pp-boost b { font-size: 1.1em; }
#pp-brake.on { transform: scale(.93); filter: brightness(1.3); }
.touch #pp-brake, .touch #pp-boost { display: flex; }
.touch .pp-map { bottom: 21%; width: 6.8em; height: 8.5em; }

#pp-stick { position: absolute; display: none; width: 0; height: 0; z-index: 2; }
#pp-stick::before { content: ""; position: absolute; left: -2.9em; top: -2.9em; width: 5.8em; height: 5.8em; border-radius: 50%; border: .18em solid #ffffff70; background: #ffffff18; box-sizing: border-box; }
#pp-stick i { position: absolute; left: -1.25em; top: -1.25em; width: 2.5em; height: 2.5em; border-radius: 50%; background: #ffffffcc; box-shadow: 0 .15em .5em #0008; transition: transform .05s; }

.pp-coach { position: absolute; inset: 0; pointer-events: none; color: #fff; font-family: system-ui, sans-serif; text-shadow: 0 2px 0 #000a, 0 0 .5em #000a; animation: ld-pop .3s ease-out; transition: opacity .8s; z-index: 5; }
.pp-coach.out { opacity: 0; }
.co-main { position: absolute; left: 6%; right: 6%; top: 44%; text-align: center; background: #0a0d28d9; border: .12em solid #ffffff55; border-radius: 1.1em; padding: .8em .6em; text-shadow: none; }
.co-hand { font-size: 3em; line-height: 1; display: inline-block; animation: co-swipe 1.6s ease-in-out infinite; }
.co-track { display: flex; justify-content: space-between; margin: -.2em 22% .2em; color: #ffd23f; font-size: 1.3em; }
.co-big { font: 900 1.25em system-ui; letter-spacing: .03em; color: #ffd23f; }
.co-sm { font: 600 .85em/1.4 system-ui; opacity: .9; margin-top: .25em; }
.co-keys { font-size: 1.6em; display: flex; gap: .4em; justify-content: center; margin-bottom: .3em; }
.pp-coach kbd { background: #ffffff22; border: .1em solid #ffffff66; border-bottom-width: .2em; border-radius: .35em; padding: .05em .45em; font: 800 1em ui-monospace, monospace; }
.co-goal { position: absolute; left: 6%; right: 6%; top: 30%; text-align: center; font: 800 .88em/1.45 system-ui; background: #0a3a24dd; border: .12em solid #2dffa0; border-radius: .9em; padding: .5em .6em; text-shadow: none; }
.co-tip { position: absolute; bottom: 16.5%; width: 12em; text-align: center; font: 700 .8em/1.35 system-ui; background: #0a0d28e6; border: .12em solid #ffffff66; border-radius: .9em; padding: .45em .4em .3em; text-shadow: none; }
.co-tip span { display: block; font-size: 1.5em; line-height: .8; color: #ffd23f; animation: co-bounce .8s ease-in-out infinite alternate; }
.co-l { left: 2%; } .co-r { right: 2%; }

@keyframes co-swipe { 0%, 100% { transform: translateX(-3.2em); } 50% { transform: translateX(3.2em); } }
@keyframes co-bounce { to { transform: translateY(.3em); } }
@keyframes ld-bob { to { transform: translateY(-1.4vmin) rotate(8deg); } }
@keyframes ld-pulse { 50% { transform: scale(1.035); } }
@keyframes ld-pop { from { transform: scale(.92); opacity: 0; } }
@keyframes ld-drift { from { transform: translateY(105vh) rotate(0); } to { transform: translateY(-15vh) rotate(360deg); } }

body.clean #ui > * { display: none !important; }