/* ============================================================
   GETAWAY! v6 — HUD / dashboard / garage / results
   Theme: chunky kid-friendly. Gold #ffd42a, hot red #d92b0f,
   cop blue #4d7bff, deep purple night #14102b.
   No external fonts, no external assets.
   ============================================================ */

:root {
  --gold: #ffd42a;
  --hot: #ff5a3c;
  --hot-deep: #d92b0f;
  --cop: #4d7bff;
  --danger-red: #ff3b3b;
  --ink: #0a081e;
  --paper: #ffffff;
  --muted: #cfc9ff;
  --dim: #8f88c2;
  --panel: rgba(12, 9, 34, 0.62);
  --panel-hi: rgba(255, 255, 255, 0.09);
  /* the whole dashboard scales off this one number */
  --dash-w: clamp(112px, 21vh, 186px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* NOT `none` — a `none` here is inherited into the touch-action intersection
     of every descendant and would stop the garage rail from scrolling on iPad.
     Gameplay surfaces below opt into `none` explicitly instead. */
  touch-action: manipulation;
  background: #14102b;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}

/* the canvas is the real target for every gameplay touch (the HUD is
   pointer-events:none), so this is where scroll/zoom must be killed */
#game, #game canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ============================================================
   OVERLAYS (garage + results)
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 14px; text-align: center;
  background: rgba(10, 8, 30, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding:
    calc(10px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* `manipulation`, not `pan-y`: a pan-y ancestor would intersect the rail's
     pan-x to nothing and the car rail would refuse to scroll sideways */
  touch-action: manipulation;
}

/* Vertical centring that does NOT clip the top when the content overflows
   (justify-content:center + overflow makes the first item unreachable). */
.overlay::before, .overlay::after { content: ''; flex: 1 0 auto; min-height: 0; }

.overlay h1 {
  font-size: clamp(34px, 7.6vh, 84px);
  font-weight: 900; letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 4px 0 #c2320a, 0 8px 24px rgba(0, 0, 0, .6);
  transform: rotate(-2deg);
  line-height: 1.05;
}

.tag { color: var(--muted); font-size: clamp(11px, 1.9vh, 16px); line-height: 1.45; font-weight: 700; }
#garage-message { min-height: 1.2em; color: var(--gold); font-weight: 900; }
.keys { color: var(--dim); font-size: clamp(9px, 1.5vh, 14px); font-weight: 700; }

.big-btn {
  font-family: inherit;
  font-size: clamp(17px, 3.2vh, 26px); font-weight: 900; letter-spacing: 1px;
  padding: clamp(10px, 1.9vh, 18px) clamp(22px, 5vw, 44px);
  border: none; border-radius: 18px;
  background: linear-gradient(var(--hot), var(--hot-deep));
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 0 #8f1a05, 0 12px 24px rgba(0, 0, 0, .5);
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #8f1a05; }
.big-btn--alt {
  background: linear-gradient(#6a8ae8, #22348f);
  box-shadow: 0 6px 0 #101a4a, 0 12px 24px rgba(0, 0, 0, .5);
}

/* "BUY THUNDER — 600" : the unmissable purchase button. Deliberately in normal
   flow (not inside the scrolling card rail) so no stacking context can hide it. */
.big-btn--buy {
  position: relative; z-index: 5;
  color: #08240a;
  background: linear-gradient(#7cf05a, #2f9d3a);
  box-shadow: 0 6px 0 #175c1f, 0 12px 24px rgba(0, 0, 0, .5);
  animation: buy-pulse 1.15s ease-in-out infinite alternate;
}
.big-btn--buy:active { box-shadow: 0 2px 0 #175c1f; }
@keyframes buy-pulse {
  from { box-shadow: 0 6px 0 #175c1f, 0 0 0 rgba(110, 232, 90, 0); }
  to   { box-shadow: 0 6px 0 #175c1f, 0 0 26px rgba(110, 232, 90, .9); }
}
.big-btn--alt:active { box-shadow: 0 2px 0 #101a4a; }

/* ---- quality override (v3) ----
   Small and calm on purpose: a 7-year-old should never feel invited to poke
   it, but dad needs it to force a tier on the iPad. Same normal-flow reason
   as the BUY button — nothing here may end up under a stacking context. */
#map-row {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(5px, 1vh, 10px);
  font-size: clamp(10px, 1.6vh, 15px); font-weight: 900; letter-spacing: 1px;
}
#map-btns { display: flex; gap: 6px; }
.m-btn {
  font-family: inherit; font-size: inherit; font-weight: 900; letter-spacing: 1px;
  padding: 7px clamp(10px, 2vw, 18px); min-height: 36px;
  border: 2px solid var(--panel-hi); border-radius: 10px;
  background: var(--panel); color: var(--muted); cursor: pointer;
}
.m-btn[aria-pressed="true"] {
  border-color: var(--cop); color: #fff;
  background: linear-gradient(#6a8ae8, #22348f);
}
.m-btn:active { transform: translateY(2px); }

#quality-row {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(5px, 1vh, 10px);
  font-size: clamp(9px, 1.4vh, 13px); font-weight: 900; letter-spacing: 1px;
}
#quality-row .q-label { color: var(--dim); }
#quality-btns { display: flex; gap: 5px; }
.q-btn {
  font-family: inherit; font-size: inherit; font-weight: 900; letter-spacing: 1px;
  padding: 5px clamp(8px, 1.6vw, 13px);
  min-height: 30px;
  border: 2px solid var(--panel-hi); border-radius: 9px;
  background: var(--panel); color: var(--dim);
  cursor: pointer;
}
.q-btn[aria-pressed="true"] {
  border-color: var(--gold); color: var(--ink);
  background: linear-gradient(var(--gold), #e0a800);
}
.q-btn:active { transform: translateY(2px); }
#quality-note { color: var(--dim); font-weight: 700; letter-spacing: 0; }

/* ============================================================
   GARAGE  (#menu)
   ============================================================ */
.garage { gap: clamp(6px, 1.4vh, 14px); }

.garage-bar {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 3vw, 26px); flex-wrap: wrap;
}
#garage-coins {
  font-size: clamp(16px, 2.8vh, 26px); font-weight: 900; color: var(--gold);
  background: var(--panel); border: 2px solid rgba(255, 212, 42, .35);
  border-radius: 14px; padding: 5px 14px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}

/* ---- car card rail (horizontally scrollable) ---- */
#cars {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  touch-action: manipulation;
  /* NO -webkit-overflow-scrolling:touch. On iOS it creates a stacking context
     on this scroller, and #swatches (a LATER sibling) then paints on top of the
     rail — which buried the BUY button under the colour circles on the iPad
     while looking perfectly fine in desktop Chrome. Momentum scrolling is the
     default on modern iOS anyway, so the property bought nothing. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  max-width: min(97vw, 1000px);
  width: 100%;
  padding: 6px 8px 10px;
  /* The rail now owns a real grid track; it no longer needs to out-paint
     neighbouring controls. */
  position: relative;
  z-index: auto;
}
/* auto-margin spacers centre the rail when it fits and collapse to 0 when it
   overflows — `justify-content:center` would clip the first card instead */
#cars::before, #cars::after { content: ''; flex: 1 0 auto; min-width: 0; }
#cars::-webkit-scrollbar { display: none; }

.car-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: clamp(122px, 21vh, 168px);
  border: 3px solid rgba(255, 255, 255, .18); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  color: #fff; cursor: pointer;
  padding: 9px 9px 10px; text-align: center;
  font-family: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.car-card.sel {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 212, 42, .22), rgba(255, 212, 42, .06));
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 212, 42, .45);
}
.car-card.locked { opacity: .45; filter: grayscale(.6); }
.car-card.locked.afford { opacity: .85; filter: none; border-color: rgba(79, 212, 42, .6); }

.cc-lock {
  position: absolute; top: 6px; right: 8px;
  font-size: clamp(14px, 2vh, 18px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}
.cc-name {
  display: block; font-size: clamp(14px, 2.2vh, 19px);
  font-weight: 900; letter-spacing: 1px; font-style: normal;
}
.cc-blurb {
  display: block; font-style: normal;
  font-size: clamp(8px, 1.35vh, 11px); color: var(--muted);
  margin-top: 2px; min-height: 2.3em; line-height: 1.15;
}
.cc-stats { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 3px; }
.cc-stat { display: flex; align-items: center; gap: 5px; }
.cc-lab {
  flex: 0 0 auto; width: 3.6em; text-align: left;
  font-size: clamp(7px, 1.15vh, 9px); font-weight: 900; color: var(--dim); letter-spacing: .5px;
}
.cc-bar {
  flex: 1 1 auto; height: 6px; border-radius: 4px;
  background: rgba(0, 0, 0, .55); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
.cc-fill { height: 100%; border-radius: 3px; }
.cc-fill.s-speed { background: linear-gradient(90deg, #ff9d00, var(--gold)); }
.cc-fill.s-grip  { background: linear-gradient(90deg, #2b6bff, #6ab6ff); }
.cc-fill.s-tough { background: linear-gradient(90deg, #2f9d3a, #6ee85a); }

.cc-price {
  margin-top: 4px;
  font-size: clamp(9px, 1.5vh, 12px); font-weight: 900; color: var(--gold);
  letter-spacing: .5px;
}
.car-card.locked .cc-price { color: #ffb0a0; }
.cc-buy {
  font-family: inherit; display: block; width: 100%;
  margin-top: 6px; padding: 9px 4px;
  min-height: 38px;                 /* thumb-sized target for a 7-year-old */
  position: relative; z-index: 4;   /* above its own card's decoration */
  border: none; border-radius: 10px; cursor: pointer;
  font-size: clamp(11px, 1.7vh, 14px); font-weight: 900; letter-spacing: .5px;
  color: #08240a;
  background: linear-gradient(#7cf05a, #2f9d3a);
  box-shadow: 0 3px 0 #175c1f;
  animation: buy-glow 1.1s ease-in-out infinite alternate;
}
.cc-buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #175c1f; }
@keyframes buy-glow {
  from { box-shadow: 0 3px 0 #175c1f, 0 0 0 rgba(110, 232, 90, 0); }
  to   { box-shadow: 0 3px 0 #175c1f, 0 0 16px rgba(110, 232, 90, .8); }
}

/* ---- colour swatches ---- */
#swatches {
  display: flex; gap: clamp(6px, 1.6vw, 12px); flex-wrap: wrap; justify-content: center;
  max-width: 440px;
  position: relative; z-index: 1;   /* must never paint over the card rail */
  margin-top: 4px;                  /* clear air under the BUY buttons */
}
.swatch {
  width: clamp(26px, 4.6vh, 44px); height: clamp(26px, 4.6vh, 44px);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25); cursor: pointer;
  transition: transform .1s;
}
.swatch.sel { border-color: var(--gold); transform: scale(1.22); box-shadow: 0 0 16px rgba(255, 212, 42, .7); }

/* ---- lifetime stats ---- */
#stats-panel {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px clamp(8px, 2vw, 18px);
  background: var(--panel); border: 2px solid var(--panel-hi);
  border-radius: 14px; padding: 8px clamp(10px, 2.5vw, 20px);
  max-width: min(94vw, 560px);
}
.stat-cell { text-align: center; }
.stat-lab { font-size: clamp(7px, 1.2vh, 10px); font-weight: 900; color: var(--dim); letter-spacing: .5px; }
.stat-val { font-size: clamp(12px, 2vh, 17px); font-weight: 900; color: #fff; }

/* ============================================================
   MOD SHOP (inside garage — toggled by hud.js)
   ============================================================ */
.mod-toggle {
  font-family: inherit;
  font-size: clamp(14px, 2.4vh, 20px); font-weight: 900;
  padding: clamp(8px, 1.5vh, 14px) clamp(16px, 3vw, 28px);
  min-height: 56px;
  border: none; border-radius: 14px;
  background: linear-gradient(#6a8ae8, #22348f);
  color: #fff; cursor: pointer;
  box-shadow: 0 5px 0 #101a4a, 0 10px 20px rgba(0, 0, 0, .4);
  letter-spacing: 1px;
}
.mod-toggle:active { transform: translateY(3px); box-shadow: 0 2px 0 #101a4a; }

.mod-view {
  width: 100%; max-width: min(97vw, 560px);
  display: flex; flex-direction: column;
  gap: clamp(6px, 1.2vh, 10px);
}
.mod-header {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 14px);
}
.mod-back {
  font-family: inherit;
  font-size: clamp(13px, 2.2vh, 18px); font-weight: 900;
  min-height: 56px; min-width: 56px;
  padding: 8px 14px;
  border: 2px solid rgba(255, 255, 255, .18); border-radius: 12px;
  background: var(--panel); color: #fff; cursor: pointer;
}
.mod-back:active { transform: scale(.95); }
.mod-car-name {
  font-size: clamp(16px, 2.8vh, 24px); font-weight: 900;
  color: var(--gold); letter-spacing: 1px;
}

.mod-slots {
  display: flex; flex-direction: column;
  gap: clamp(5px, 1vh, 8px);
  padding: 4px;
  touch-action: manipulation;
  scrollbar-width: thin;
}
.mod-slot {
  background: var(--panel);
  border: 2px solid var(--panel-hi);
  border-radius: 12px;
  padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 12px);
}
.mod-slot-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: clamp(4px, .8vh, 6px);
}
.mod-slot-icon { font-size: clamp(14px, 2.2vh, 20px); }
.mod-slot-name {
  font-size: clamp(10px, 1.6vh, 14px); font-weight: 900;
  color: var(--muted); letter-spacing: 1px;
}

.mod-tiers {
  display: flex; gap: clamp(4px, 1vw, 8px);
  overflow-x: auto;
  touch-action: manipulation;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mod-tiers::-webkit-scrollbar { display: none; }

.mod-tier {
  flex: 0 0 auto;
  min-width: clamp(68px, 13vw, 96px);
  min-height: 56px;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: clamp(4px, .8vh, 8px) clamp(6px, 1vw, 10px);
  text-align: center; cursor: pointer;
  background: rgba(255, 255, 255, .04);
  transition: transform .1s, border-color .12s;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.mod-tier:active { transform: scale(.94); }
.mod-tier.equipped {
  border-color: var(--gold);
  background: rgba(255, 212, 42, .15);
  box-shadow: 0 0 14px rgba(255, 212, 42, .45);
}
.mod-tier.owned {
  border-color: rgba(110, 232, 90, .5);
  background: rgba(110, 232, 90, .08);
}
.mod-tier.affordable { border-color: rgba(79, 212, 42, .4); }
.mod-tier.locked { opacity: .45; }

.mod-tier-icon { font-size: clamp(16px, 2.6vh, 24px); line-height: 1.1; }
.mod-tier-name {
  font-size: clamp(8px, 1.3vh, 11px); font-weight: 900;
  color: #fff; letter-spacing: .5px; line-height: 1.15;
}
.mod-tier-price {
  font-size: clamp(8px, 1.2vh, 10px); font-weight: 900;
  color: var(--gold); line-height: 1.2;
}
.mod-tier.owned .mod-tier-price { color: #6ee85a; }
.mod-tier.equipped .mod-tier-price { color: var(--gold); }
.mod-tier.locked .mod-tier-price { color: #ffb0a0; }
.mod-tier-effect {
  font-size: clamp(7px, 1.1vh, 9px); font-weight: 900;
  color: var(--muted); letter-spacing: .5px;
}

.mod-shake { animation: mod-deny .4s ease-out; }
@keyframes mod-deny {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.mod-bought { animation: mod-celebrate .45s ease-out; }
@keyframes mod-celebrate {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ============================================================
   RESULTS  (#busted)
   ============================================================ */
.results { gap: clamp(5px, 1.2vh, 12px); }

.busted-title {
  color: var(--danger-red) !important;
  text-shadow: 0 4px 0 #1e2b8f, 0 8px 24px rgba(0, 0, 0, .6) !important;
  animation: busted-flash .5s steps(2) infinite;
}
@keyframes busted-flash { 0% { color: #ff3b3b; } 50% { color: #4d7bff; } }

.busted-score { font-size: clamp(28px, 5.6vh, 48px); font-weight: 900; color: #fff; line-height: 1; }
.busted-best { font-size: clamp(12px, 2.1vh, 19px); font-weight: 800; color: var(--gold); }
.busted-best.newbest { animation: newbest-pop 1s ease-out infinite alternate; }
@keyframes newbest-pop { from { transform: scale(1); } to { transform: scale(1.12); } }

#res-lines {
  display: flex; flex-direction: column; gap: 3px;
  width: min(90vw, 400px);
  background: var(--panel); border: 2px solid var(--panel-hi);
  border-radius: 14px; padding: 8px 12px;
}
.res-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: clamp(11px, 1.9vh, 16px); font-weight: 800;
  transition: opacity .18s;
}
.res-line.pending { opacity: .22; }
.rl-label { color: var(--muted); letter-spacing: .5px; }
.rl-val { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }

#res-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: min(90vw, 400px); padding: 0 14px;
  font-size: clamp(14px, 2.5vh, 22px); font-weight: 900;
}
.rt-label { color: #fff; letter-spacing: 1px; }
#res-total-val { color: var(--gold); font-variant-numeric: tabular-nums; }
#res-total.done #res-total-val { animation: total-pop .35s ease-out; }
@keyframes total-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

#res-unlock {
  font-size: clamp(13px, 2.3vh, 21px); font-weight: 900; color: #08240a;
  background: linear-gradient(#ffe375, #ffb01a);
  border-radius: 14px; padding: 7px 16px;
  box-shadow: 0 4px 0 #a86a00, 0 0 26px rgba(255, 212, 42, .55);
  transform: rotate(-2deg);
}
#res-unlock.go { animation: unlock-in .7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes unlock-in {
  0% { opacity: 0; transform: rotate(-2deg) scale(.3); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}

.res-btns { display: flex; gap: clamp(8px, 2vw, 18px); flex-wrap: wrap; justify-content: center; }

/* ============================================================
   HUD
   ============================================================ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; touch-action: none; }
#btn-pause {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 12; min-width: 88px; min-height: 44px; pointer-events: auto;
  border: 2px solid rgba(255,255,255,.5); border-radius: 12px;
  background: rgba(10,8,30,.82); color: #fff; font-weight: 900;
}

/* ---- top-left ---- */
#hud-tl {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  max-width: min(30vw, 240px);
  color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
  text-align: left;
}
#score { font-size: clamp(22px, 4.6vh, 38px); font-weight: 900; line-height: 1; }
#best { font-size: clamp(9px, 1.5vh, 13px); font-weight: 800; color: var(--gold); }
#hearts { font-size: clamp(12px, 2vh, 18px); margin-top: 2px; letter-spacing: 1px; }
#hearts.hurt { animation: heart-thump .5s ease-in-out infinite; }
@keyframes heart-thump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---- missions ---- */
#missions { margin-top: 5px; display: flex; flex-direction: column; gap: 4px; }
.mission {
  background: var(--panel); border: 1px solid var(--panel-hi);
  border-radius: 8px; padding: 3px 6px 4px;
}
.mission.done { border-color: rgba(110, 232, 90, .7); }
.m-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-size: clamp(7px, 1.25vh, 11px); font-weight: 900; letter-spacing: .4px;
}
.m-text { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-count { color: var(--gold); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.m-bar {
  margin-top: 2px; height: 4px; border-radius: 3px;
  background: rgba(0, 0, 0, .55); overflow: hidden;
}
.m-fill { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #ff9d00, var(--gold)); }
.mission.done .m-fill { background: linear-gradient(90deg, #2f9d3a, #6ee85a); }

/* ---- top-centre: stars / cop gap / district ---- */
#hud-tc {
  position: absolute;
  top: calc(5px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  width: min(48vw, 320px); text-align: center;
}
#stars-box { font-size: clamp(17px, 3.2vh, 30px); line-height: 1; letter-spacing: 2px; }
.star {
  display: inline-block;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 180, 20, .9), 0 2px 3px #000;
}
.star.off { color: rgba(255, 255, 255, .18); text-shadow: 0 2px 3px rgba(0, 0, 0, .8); }
.star.pop { animation: star-pop .45s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes star-pop {
  0% { transform: scale(2.2) rotate(-25deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#heat-box { margin-top: 3px; }
.heat-label { font-size: clamp(8px, 1.4vh, 12px); font-weight: 900; color: #fff; text-shadow: 0 2px 4px #000; }
#heat-bar {
  margin-top: 2px; height: clamp(8px, 1.5vh, 13px); border-radius: 8px;
  background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .3); overflow: hidden;
}
#heat-fill {
  height: 100%; width: 50%; border-radius: 6px;
  background: linear-gradient(90deg, var(--danger-red), var(--cop));
  transition: width .15s linear;
}

#district {
  margin-top: 6px; opacity: 0;
  font-size: clamp(12px, 2.4vh, 22px); font-weight: 900; letter-spacing: 3px;
  color: #fff; text-shadow: 0 2px 0 var(--hot-deep), 0 4px 16px rgba(0, 0, 0, .9);
}
#district.go { animation: district-in 3.2s ease-out; }
@keyframes district-in {
  0% { opacity: 0; transform: translateY(-8px) scale(.9); }
  14% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- top-right: coins ---- */
#coins-box {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  text-align: right;
}
#coins {
  font-size: clamp(15px, 2.9vh, 27px); font-weight: 900; color: var(--gold);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
  font-variant-numeric: tabular-nums;
}
#coin-pops { position: absolute; top: 100%; right: 2px; width: 0; height: 0; }
.coin-pop {
  position: absolute; top: 0; right: 0; opacity: 0;
  white-space: nowrap;
  font-size: clamp(12px, 2.1vh, 19px); font-weight: 900; color: #6ee85a;
  text-shadow: 0 2px 4px #000;
}
.coin-pop.neg { color: #ff6a5a; }
.coin-pop.go { animation: coin-drift .95s ease-out forwards; }
@keyframes coin-drift {
  0% { opacity: 0; transform: translateY(4px) scale(.7); }
  18% { opacity: 1; transform: translateY(0) scale(1.15); }
  35% { transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-42px) scale(1); }
}

/* ---- the lap timing strip (P23a-2a, D15) ----
   ⚠ THIS BLOCK DID NOT EXIST until the venue's first browser boot, and the
   markup shipped without it: `#timing-strip` is a direct child of `#hud`,
   which is `position: fixed; inset: 0`, so with no rule of its own the strip
   laid out in normal flow at the top-left and drew LAP / LAST / BEST / the
   four region rows as raw text straight over `#hud-tl` — the distance, the
   best and the hearts all unreadable underneath it.

   PLACED TOP-LEFT, BELOW `#hud-tl`. The 92px clears `#score` (up to 38px),
   `#best` (13px) and `#hearts` (18px) plus their margins at the largest
   clamp. It does NOT clear a long `#missions` list, and does not need to:
   the strip only appears on a map whose circuit publishes a timing contract,
   and the venue declares `missions: false`. If a future map ever carries
   both, this is the number to revisit.
   The right side is the minimap's (top 52px, right 10px) and the top centre
   is the stars'; neither is touched. `.hidden` still does the hiding — no
   display rule here may override it. */
#timing-strip {
  position: absolute;
  top: calc(92px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  width: min(38vw, 168px);
  padding: 5px 7px 6px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-hi);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  pointer-events: none;
}
/* Every row is label-left / value-right, so the digits form one column. */
#timing-strip > div,
#timing-strip .timing-region {
  display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
}
#timing-strip .t-label {
  font-size: clamp(6px, 1.05vh, 9px); font-weight: 900; letter-spacing: .5px;
  color: rgba(255, 255, 255, .62); flex: 0 0 auto;
}
#timing-lap { font-size: clamp(15px, 2.9vh, 24px); font-weight: 900; }
#timing-lap.invalid, #t-lap.invalid { color: #ff6b6b; }
#timing-last, #timing-best { font-size: clamp(9px, 1.5vh, 13px); font-weight: 800; }
#timing-best #t-best { color: var(--gold); }
#timing-delta {
  justify-content: flex-end;
  font-size: clamp(9px, 1.5vh, 13px); font-weight: 900; min-height: 1em;
}
#t-delta.faster { color: #6ee85a; }
#t-delta.slower { color: #ff9d5a; }
/* The four survey REGIONS. Small, and three columns wide: name, this lap,
   the record's — they are measurement windows, not sectors, and they do not
   sum to the lap. */
/* ⚠ `#timing-strip > div` (the label/value rows, flex) also matches this
   container and outranks a bare id; a flex ROW laid the four regions side by
   side 165 px past the panel's edge (head, browser, 2026-09-03). Two ids. */
#timing-strip > #timing-regions {
  display: block;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--panel-hi);
}
#timing-strip .timing-region { font-size: clamp(6px, 1.1vh, 10px); font-weight: 800; }
#timing-strip .timing-region > span:nth-child(2) { margin-left: auto; }
#timing-strip .t-ref {
  color: var(--gold); opacity: .75; flex: 0 0 auto; min-width: 3.2em; text-align: right;
}
/* RECORD and OWN, beneath the regions, on their own rule. */
#timing-real, #timing-own {
  font-size: clamp(7px, 1.2vh, 11px); font-weight: 800;
}
#timing-real { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--panel-hi); }
#t-real, #t-own { color: var(--gold); }
#timing-own #t-own { opacity: .8; }

/* ---- minimap (canvas created + appended to #hud by minimap.js) ---- */
#minimap-canvas {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: clamp(100px, 18vw, 140px);
  height: clamp(100px, 18vw, 140px);
  border-radius: 12px;
  background: rgba(12, 9, 34, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* ---- mission toasts ---- */
#toast-layer {
  position: absolute; top: 24%; left: 50%; transform: translateX(-50%);
  width: min(84vw, 460px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.toast {
  opacity: 0;
  font-size: clamp(13px, 2.4vh, 22px); font-weight: 900; letter-spacing: .5px;
  color: #08240a;
  background: linear-gradient(#ffe375, #ffb01a);
  border-radius: 14px; padding: 6px 16px;
  box-shadow: 0 4px 0 #a86a00, 0 6px 22px rgba(0, 0, 0, .6);
}
.toast.go { animation: toast-in 2.4s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes toast-in {
  0% { opacity: 0; transform: scale(.4) rotate(-6deg); }
  12% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  22% { transform: scale(1) rotate(0deg); }
  78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.95) translateY(-16px); }
}

/* ============================================================
   DASHBOARD — bottom RIGHT corner, never under a thumb
   Bottom-centre sat the dial directly on top of the car, which is dead
   centre of frame. It stacks above the BOOST/DRIFT buttons instead
   (those are 92px tall at bottom:18, so anything above 110px is clear).
   ============================================================ */
#dash {
  position: absolute;
  left: auto; transform: none;
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(118px + env(safe-area-inset-bottom));
  width: var(--dash-w);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}

#dash-face {
  position: relative; width: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(30, 22, 62, .88) 58%, rgba(12, 9, 34, .55) 74%, rgba(12, 9, 34, 0) 82%);
}

#tacho {
  display: block; width: 100%; height: auto;
  aspect-ratio: 200 / 190;
  overflow: visible;
}

.tk-track { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 7; stroke-linecap: round; }
.tk-red   { fill: none; stroke: var(--danger-red); stroke-width: 7; stroke-linecap: round; opacity: .85; }
.tk-maj   { stroke: #e8e4ff; stroke-width: 2.6; stroke-linecap: round; }
.tk-min   { stroke: rgba(207, 201, 255, .42); stroke-width: 1.6; stroke-linecap: round; }
.tk-num   { fill: #e8e4ff; font-size: 15px; font-weight: 900; text-anchor: middle;
            font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
.tk-num-red { fill: #ff8a7a; }

#tacho-needle {
  fill: var(--gold);
  stroke: #40200a; stroke-width: .8; stroke-linejoin: round;
  /* the pivot (100,95) is the exact centre of the "0 0 200 190" viewBox,
     so 50% 50% resolves to it — belt and braces with transform-box */
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 60ms linear;
}
#tacho-hub { fill: #241a44; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
#tacho-hub-in { fill: var(--gold); }

#dash.redline #tacho-needle { fill: #ff5030; }
#dash.redline .tk-red { opacity: 1; }
#dash.redline #gear { color: #ff7a52; }
#dash.drifting #dash-face { box-shadow: 0 0 22px rgba(109, 138, 232, .55); }

#gear {
  position: absolute; left: 0; right: 0; top: 36%;
  text-align: center; pointer-events: none;
  font-size: calc(var(--dash-w) * .255); line-height: 1;
  font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(0, 0, 0, .95);
}
#gear.shift { animation: gear-shift .28s ease-out; }
@keyframes gear-shift {
  0% { transform: scale(1.55); color: var(--gold); text-shadow: 0 0 22px var(--gold); }
  100% { transform: scale(1); }
}

#speed {
  position: absolute; left: 0; right: 0; top: 71%;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  pointer-events: none;
}
#speed-num {
  font-size: calc(var(--dash-w) * .20); line-height: 1;
  font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .95);
}
#speed-unit {
  font-size: calc(var(--dash-w) * .075); font-weight: 800; color: var(--muted);
  text-shadow: 0 1px 3px #000;
}

#air-badge {
  /* floats clear ABOVE the dial so it never sits on the arc */
  position: absolute; left: 0; right: 0; top: -13%;
  text-align: center; opacity: 0;
  font-size: calc(var(--dash-w) * .085); font-weight: 900; letter-spacing: 1px;
  color: #fff; text-shadow: 0 2px 0 var(--hot-deep), 0 0 12px rgba(0, 0, 0, .9);
  transition: opacity .12s;
}
#air-badge.on { opacity: 1; }

#dash-strip { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#boost-bar {
  width: 94%; height: clamp(7px, 1.3vh, 12px); border-radius: 8px;
  background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .3); overflow: hidden;
}
#boost-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff9d00, var(--gold)); border-radius: 6px; }

#wheels-box { font-size: clamp(11px, 1.9vh, 17px); letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0, 0, 0, .85); line-height: 1; }
.wheel-dot.gone { opacity: .18; filter: grayscale(1); }

/* ============================================================
   TOUCH CONTROLS (unchanged geometry — the kid knows where they are)
   ============================================================ */
.ctl-btn {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 92px; height: 92px; border-radius: 50%;
  border: none; pointer-events: auto; cursor: pointer; touch-action: none;
  font-size: 34px; font-weight: 900; color: #fff;
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  z-index: 2;
}
.ctl-btn span { font-size: 13px; letter-spacing: 1px; }
#btn-boost {
  right: calc(18px + env(safe-area-inset-right));
  background: radial-gradient(circle at 35% 30%, #ff7a52, var(--hot-deep) 70%);
  box-shadow: 0 5px 0 #8f1a05, 0 10px 20px rgba(0, 0, 0, .5);
}
#btn-pop {
  left: calc(18px + env(safe-area-inset-left));
  background: radial-gradient(circle at 35% 30%, #6a6a7a, #23232e 70%);
  box-shadow: 0 5px 0 #0c0c12, 0 10px 20px rgba(0, 0, 0, .5);
}
.ctl-btn:active, .ctl-btn.pressed { transform: translateY(4px); }

#btn-drift {
  right: calc(122px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 72px; height: 72px; font-size: 26px;
  background: radial-gradient(circle at 35% 30%, #6a8ae8, #22348f 70%);
  box-shadow: 0 5px 0 #101a4a, 0 10px 20px rgba(0, 0, 0, .5);
}
#btn-drift span { font-size: 11px; }

/* ============================================================
   SPLIT CONTROLS: the right thumb needs the bottom-right corner
   (P23a-2c D1)
   ============================================================ */
/* In SPLIT mode the right half of the screen is the throttle/brake slider, and
   the two arcade buttons sat exactly where that thumb rests. A touch starting
   ON a button never becomes a slider, so this is not a correctness fix — the
   controls work either way. It is a reachability one: with the buttons in the
   corner the thumb has to hunt around them to find clear glass, and on the
   maps that keep boost and drift the driver is a seven-year-old.

   They move UP the right edge rather than to the left half, because the left
   half is the steering thumb's and crowding that is the bug we just fixed. */
body.controls-split #btn-boost {
  bottom: calc(196px + env(safe-area-inset-bottom));
}
body.controls-split #btn-drift {
  bottom: calc(206px + env(safe-area-inset-bottom));
  right: calc(112px + env(safe-area-inset-right));
}

/* ============================================================
   WANTED FLASH + DANGER STROBE
   ============================================================ */
#wanted-flash {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(38px, 9vw, 80px); font-weight: 900;
  color: var(--danger-red); text-shadow: 0 0 30px #ff0000, 0 4px 0 #1e0808;
  background: rgba(180, 0, 0, 0.15);
  pointer-events: none;
  animation: wanted-pop 1.2s ease-out forwards;
}
#wanted-flash.hidden { display: none !important; }
@keyframes wanted-pop {
  0% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 1; transform: scale(1.15); }
  40% { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.0); }
}

#hud::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--danger, 0);
  background:
    linear-gradient(90deg, rgba(255, 40, 40, .35), transparent 30%, transparent 70%, rgba(60, 90, 255, .35));
  animation: danger-strobe .4s steps(2) infinite;
}
@keyframes danger-strobe { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(180deg); } }

/* ============================================================
   SHORT-LANDSCAPE TRIM (phones held sideways, e.g. 844x390)
   ============================================================ */
@media (max-height: 460px) and (orientation: landscape) {
  .overlay { gap: 6px; }
  .cc-blurb { display: none; }
  #stats-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #toast-layer { top: 18%; }
  .mod-slots { max-height: min(36vh, 280px); }
  .mod-tier-effect { display: none; }
}

/* Narrow viewports (phone portrait): three top clusters do not fit across
   the width, so the mission tracker steps aside and the centre column
   narrows. Distance / stars / coins all stay. */
@media (max-width: 540px) {
  #missions { display: none; }
  #hud-tc { width: min(52vw, 200px); }
  #stats-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-tier { min-width: clamp(60px, 18vw, 88px); }
  #minimap-canvas { width: clamp(80px, 22vw, 110px); height: clamp(80px, 22vw, 110px); }
}

/* Very short viewports: the dashboard yields before the controls do. */
@media (max-height: 360px) {
  :root { --dash-w: 104px; }
  #dash-strip { display: none; }
  #minimap-canvas { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .busted-title, .cc-buy, #hud::after, .busted-best.newbest { animation: none; }
}

/* ===========================================================================
   MENU LAYOUT — the fix for "the buttons to choose the cars disappear on the
   smaller screens, it gets covered by other divs" (BK, 2026-08-30)

   IT WAS NEVER A STACKING BUG. Measured on the live build at 375x812:
   #cars wanted 144px of content and was being rendered 16px tall, with
   elementFromPoint over a card returning #menu instead of the card — the cards
   were present, collapsed, and genuinely unhittable. v1 and v2 had the same
   defect, milder (98/142 and 127/141), because they have fewer rows pushing on
   the column.

   THE MECHANISM. .overlay is a flex column. When its children total more than
   the viewport, flexbox shrinks them rather than overflowing. `min-height:auto`
   normally stops a flex item shrinking below its own content — but that
   protection applies ONLY to items whose overflow is `visible`. #cars sets
   `overflow-y: hidden` to keep the rail on one line, which sets its automatic
   minimum size to ZERO. So of all the children, the car rail was the single one
   flexbox was allowed to crush, and it absorbed the entire overflow.
   Worse: because the children shrank to fit, the column never overflowed, so
   .overlay's own `overflow-y: auto` never had anything to scroll and the rest
   of the menu could not be reached either.

   THE FIX is one rule — nothing in the menu may shrink. The column then
   overflows honestly, .overlay scrolls, and every control keeps its real size.
   Do NOT "optimise" this away by letting something shrink to make the menu fit;
   that is precisely the bug. If the menu is too tall, fold a section instead.
   =========================================================================== */
.overlay > * { flex-shrink: 0; }
.garage.pause-mode {
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-right: calc(12px + env(safe-area-inset-right));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  padding-left: calc(12px + env(safe-area-inset-left));
}
.garage.pause-mode .opt-grid,
.garage.pause-mode .ver-switch,
.garage.pause-mode #btn-buy-next { display: none; }

/* Belt and braces on the rail specifically, since it is the item whose
   automatic minimum is zero and therefore the one that gets crushed first. */
#cars {
  flex: 0 0 auto;
  min-height: 148px;
}

/* Options paired side by side: MAP and GRAPHICS cost one row on a phone
   instead of two, which is 40-ish px back on the height budget. */
.opt-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-start; gap: clamp(6px, 2vw, 22px);
  width: 100%; max-width: min(96vw, 720px);
}
.opt-grid > * { flex: 1 1 240px; }

/* Career stats, folded. 134px of a phone's 812 that nobody needs open while
   they are choosing a car. */
.fold { width: 100%; max-width: min(94vw, 560px); }
.garage-tool { max-width: min(96vw, 760px); }
.tyre-shop { display: flex; gap: 8px; overflow-x: auto; padding: 6px; }
.tyre-card { flex: 1 0 190px; display: grid; gap: 6px; padding: 10px; border: 2px solid var(--panel-hi); border-radius: 12px; background: var(--panel); text-align: left; }
.tyre-card button.selected { border-color: var(--gold); color: var(--gold); }
.tyre-condition { color: var(--gold); font-weight: 900; }
.setup-controls { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 6px 14px; padding: 8px; }
.setup-row { display: grid; grid-template-columns: 1fr; gap: 3px; text-align: left; font-size: 11px; font-weight: 900; }
.setup-label { display: flex; justify-content: space-between; gap: 8px; }
.setup-value { color: var(--gold); }
.setup-range, .assist-row input[type="range"] { width: 100%; min-height: 32px; }
.setup-actions, .preset-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 6px; }
#preset-name { min-height: 44px; font-size: 16px; scroll-margin-bottom: 40vh; }
.assist-controls { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 8px 16px; padding: 10px; text-align: left; }
.assist-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-weight: 900; }
.assist-row input { grid-column: 1 / -1; }
.assist-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 900; }
.assist-check input { width: 24px; height: 24px; }
@media (max-width: 540px) {
  .setup-controls, .assist-controls { grid-template-columns: 1fr; }
}
.fold-sum {
  cursor: pointer; list-style: none;
  font-size: clamp(10px, 1.5vh, 13px); font-weight: 900; letter-spacing: 1px;
  color: var(--dim); padding: 6px 10px; border-radius: 10px;
  border: 2px solid var(--panel-hi); background: var(--panel);
}
.fold-sum::-webkit-details-marker { display: none; }
.fold-sum::after { content: ' ▸'; }
.fold[open] .fold-sum::after { content: ' ▾'; }
.fold[open] .fold-sum { margin-bottom: 8px; }
.fold #stats-panel { max-width: none; width: 100%; }

/* STICKY FOOTER. START is the one control a 7-year-old must never have to hunt
   for. Pinned to the bottom of the scroller with the menu scrolling under it,
   so it is reachable at ANY viewport height without scrolling at all. The
   negative bottom offset cancels .overlay's own bottom padding so the footer
   sits flush on the safe-area edge rather than floating above it. */
.menu-foot {
  position: sticky;
  bottom: calc(-10px - env(safe-area-inset-bottom));
  z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; width: 100%;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  margin-top: auto;
  /* SOLID, not a fade. The first attempt used a gradient that was transparent
     at its own top edge, and the keys line scrolling underneath showed straight
     through it either side of the START button — which looked like text
     printed across the button. Content scrolls under a sticky footer by
     definition, so the footer has to be opaque; the shadow softens the edge
     without letting anything read through it. */
  background: rgba(10, 8, 30, .985);
  /* Two shadows on purpose. The first is a SOLID 16px extension upward — a
     soft shadow alone is semi-transparent by definition, and the keys line
     scrolling beneath it stayed faintly legible, which reads as a rendering
     fault rather than as content passing behind a bar. The second is the
     actual soften, beyond where anything can still be made out. */
  box-shadow: 0 -16px 0 0 rgba(10, 8, 30, .985),
              0 -30px 20px 0 rgba(10, 8, 30, .8);
}

/* The AUTO->MED note is the widest thing in the row; let it take its own line
   rather than squeezing the buttons. */
#quality-note { flex-basis: 100%; text-align: center; }

/* Version switcher. Present on v1, v2 and v3 so the three builds link to each
   other; the current one is a <span>, not an <a>, so it cannot be clicked. */
.ver-switch {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; font-size: clamp(9px, 1.3vh, 12px); font-weight: 900;
  letter-spacing: .5px;
}
.ver {
  padding: 5px 11px; border-radius: 999px;
  border: 2px solid var(--panel-hi); background: var(--panel);
  color: var(--muted); text-decoration: none;
  transition: border-color .12s, color .12s;
}
a.ver:hover, a.ver:focus-visible { color: #fff; border-color: var(--gold); }
.ver.here { color: var(--gold); border-color: var(--gold); background: rgba(255, 212, 42, .12); }

/* The keys line lists KEYBOARD controls — "HOLD arrows steer, SPACE boost,
   C drift, X pop a wheel". On a touch device it is telling a 7-year-old about
   keys he does not have, while costing 33px of height and being the thing that
   scrolls behind the START button. Hidden wherever the pointer is coarse. */
@media (pointer: coarse) { .keys { display: none; } }

/* SHORT SCREENS — a phone in landscape is ~375px tall. Everything still
   scrolls and START is still pinned; this just buys height back so less
   scrolling is needed to reach the cars. */
@media (max-height: 560px) {
  .tag { display: none; }
  .keys { display: none; }
  .garage-title { font-size: clamp(20px, 5vh, 30px); }
  #cars { min-height: 132px; }
}
@media (max-height: 420px) {
  #stats-panel, .fold { display: none; }
  #swatches { max-width: 300px; }
}

/* Build tag. Lives in the garage bar, NOT in the keys line — the keys line is
   display:none on coarse pointers, so the first version of this was invisible
   on the exact devices BK plays on, which is the only place it was needed. */
.build-tag {
  font-size: clamp(9px, 1.3vh, 12px); font-weight: 900; letter-spacing: 1px;
  color: var(--dim); border: 2px solid var(--panel-hi); background: var(--panel);
  border-radius: 999px; padding: 4px 10px;
}

/* ===========================================================================
   P22 LANDSCAPE GARAGE

   #menu is a viewport grid: two bounded panes and a dedicated footer row.
   START is ordinary flow content in that row, never sticky or layered over a
   scroller. #swatches remains a direct #menu child and occupies the reserved
   bottom band of the car pane. The historic .overlay > * shrink guard above is
   intentionally retained even though this overlay now uses grid.
   =========================================================================== */

#menu.garage {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: stretch;
  justify-items: stretch;
  gap: 10px;
  padding:
    calc(10px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
  overflow: hidden;
  text-align: left;
}

#menu.garage::before,
#menu.garage::after { display: none; }

.garage-pane {
  min-width: 0;
  min-height: 0;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)),
    rgba(20, 16, 43, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 32px rgba(0, 0, 0, .28);
}

.garage-car-pane {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto auto auto minmax(72px, .55fr) minmax(150px, 1fr);
  gap: 5px;
  padding: 10px;
  overflow: hidden;
}

.garage-workshop-pane {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
}

.garage .garage-bar {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
}

.garage .garage-title {
  margin: 0 auto 0 0;
  font-size: clamp(24px, 3.8vw, 48px);
  line-height: .95;
}

.garage #garage-coins {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  font-size: clamp(14px, 1.8vw, 20px);
}

.garage .build-tag {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 9px;
}

.garage .tag {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.garage #garage-message {
  min-height: 18px;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-car-preview {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2px 8px;
  padding: 7px 10px;
  border: 2px solid rgba(77, 123, 255, .28);
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(77, 123, 255, .18), transparent 54%),
    linear-gradient(180deg, rgba(8, 7, 24, .82), rgba(22, 17, 48, .78));
  overflow: hidden;
}

.preview-kicker,
.preview-reserve {
  align-self: center;
  color: var(--dim);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.preview-reserve { text-align: right; }

.preview-stage {
  grid-column: 1 / -1;
  position: relative;
  min-height: 44px;
}

.preview-stage::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 8%;
  height: 18%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
}

.preview-stage span {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 20%;
  height: 48%;
  border: 2px solid rgba(255, 212, 42, .52);
  border-radius: 55% 46% 24% 24% / 68% 68% 28% 28%;
  background: linear-gradient(135deg, rgba(255, 212, 42, .28), rgba(217, 43, 15, .28));
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .28), 0 0 20px rgba(255, 212, 42, .12);
}

.preview-stage span::before,
.preview-stage span::after {
  content: '';
  position: absolute;
  bottom: -9px;
  width: 20%;
  height: 14px;
  border-radius: 999px;
  background: #090812;
  border: 2px solid rgba(255, 255, 255, .18);
}
.preview-stage span::before { left: 7%; }
.preview-stage span::after { right: 7%; }

#garage-car-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(224px, 1fr) auto;
  min-height: 274px;
  gap: 6px;
}

#garage-car-main:has(.garage-career[open]) {
  grid-template-rows: 224px auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.garage #cars {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 224px;
  width: 100%;
  max-width: none;
  padding: 5px 4px 8px;
  gap: 8px;
  align-items: stretch;
}

.garage .car-card {
  width: clamp(116px, 13vw, 150px);
  min-width: 116px;
  min-height: 132px;
  padding: 7px 7px 8px;
  border-radius: 14px;
}

.garage .cc-blurb { min-height: 0; }
.garage .cc-stats { margin: 4px 0 2px; gap: 2px; }
.garage .cc-buy { min-height: 44px; padding: 7px 4px; }

#garage-left-actions {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

#garage-left-actions > *,
#garage-mod-anchor > * { min-width: 0; width: 100%; }

#garage-mod-anchor:empty { display: none; }

.garage .mod-toggle,
.garage .big-btn--buy,
.garage .fold-sum {
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 11px;
  font-size: clamp(10px, 1.3vw, 14px);
  box-shadow: none;
  animation: none;
}

.garage-career { min-width: 0; }
.garage-career[open] {
  grid-column: 1 / -1;
  padding: 8px;
  border: 2px solid var(--panel-hi);
  border-radius: 14px;
  background: rgba(10, 8, 30, .98);
}

.garage-career[open] .fold-sum { margin-bottom: 6px; }

.garage #stats-panel {
  max-width: none;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#menu.garage > #swatches {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  z-index: auto;
  width: auto;
  max-width: calc(100% - 24px);
  min-height: 52px;
  margin: 0;
  padding: 4px 8px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(10, 8, 30, .94);
  scrollbar-width: none;
}

#menu.garage > #swatches::-webkit-scrollbar { display: none; }

.garage .swatch {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-width: 4px;
  border-radius: 12px;
}

.garage .swatch.sel {
  transform: none;
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.workshop-head {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workshop-kicker {
  display: block;
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.workshop-head h2 {
  margin: 1px 0 0;
  color: #fff;
  font-size: clamp(15px, 2vw, 23px);
  line-height: 1;
  letter-spacing: .5px;
}

.engineer-toggle {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 2px solid var(--panel-hi);
  border-radius: 12px;
  color: var(--muted);
  background: var(--panel);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.engineer-toggle input,
.garage .assist-check input[type="checkbox"] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  accent-color: var(--gold);
}

.garage.engineer-mode .engineer-toggle {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 212, 42, .10);
}

.workshop-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.workshop-tab {
  min-width: 44px;
  min-height: 44px;
  padding: 5px 8px;
  border: 2px solid var(--panel-hi);
  border-radius: 11px;
  background: rgba(8, 7, 24, .74);
  color: var(--muted);
  font-family: inherit;
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 900;
  letter-spacing: .7px;
  cursor: pointer;
}

.workshop-tab.is-active {
  border-color: var(--gold);
  color: #201705;
  background: linear-gradient(var(--gold), #e0a800);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52);
}

.workshop-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: manipulation;
  scrollbar-width: thin;
  padding: 2px;
}

.workshop-panel[hidden] { display: none !important; }

.panel-intro {
  min-height: 30px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--dim);
  font-size: 10px;
}

.panel-intro strong {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .8px;
}

.garage .tyre-shop {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(154px, 1fr));
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 5px;
}

.garage .tyre-card {
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(28px, auto) auto auto;
  align-content: start;
  gap: 5px;
  padding: 8px;
  font-size: 10px;
}

.garage .tyre-card button,
.garage .preset-rail button,
.garage .setup-actions button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 9px;
  border: 2px solid var(--panel-hi);
  border-radius: 10px;
  background: rgba(8, 7, 24, .8);
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.garage .setup-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 9px;
  padding: 4px 1px;
}

.garage .setup-row {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(92px, .72fr) minmax(88px, 1fr);
  align-items: center;
  gap: 6px;
  font-size: 9px;
}

.garage .setup-label {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.garage .setup-value { font-size: 9px; }

.garage .setup-range,
.garage .assist-row input[type="range"] {
  width: 100%;
  min-width: 88px;
  min-height: 44px;
  margin: 0;
  accent-color: var(--gold);
}

.garage .setup-actions,
.garage .preset-rail {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  padding: 2px 1px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.garage #preset-name {
  flex: 1 0 130px;
  min-width: 130px;
  min-height: 44px;
  padding: 5px 9px;
  border: 2px solid var(--panel-hi);
  border-radius: 10px;
  background: rgba(8, 7, 24, .84);
  color: #fff;
}

.garage .preset-delete { flex: 0 0 44px; padding: 0; color: #ff9f91; }

.corner-authoring {
  min-width: 0;
  padding: 5px 7px;
  border: 2px dashed rgba(77, 123, 255, .38);
  border-radius: 11px;
  color: var(--dim);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .6px;
}

.corner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 3px;
}

.corner-grid span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gold);
}

.corner-grid small {
  min-width: 0;
  overflow: hidden;
  color: var(--dim);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage .assist-controls {
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 4px 1px;
}

.garage .assist-row {
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 1fr auto;
  align-items: center;
  font-size: 10px;
}

.garage .assist-check {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  font-size: 10px;
}

.workshop-reserve {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.workshop-reserve-card {
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 9px;
  border: 2px dashed rgba(255, 212, 42, .32);
  border-radius: 11px;
  color: var(--dim);
  background: rgba(8, 7, 24, .55);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;
}

.workshop-reserve-card strong { color: var(--gold); font-size: 10px; }

.garage .engineer-only { display: none !important; }
.garage.engineer-mode .setup-controls { display: grid !important; }
.garage.engineer-mode #preset-name { display: block !important; }
.garage.engineer-mode #btn-save-preset { display: inline-block !important; }
.garage.engineer-mode .preset-delete { display: inline-block !important; }
.garage.engineer-mode .corner-authoring { display: block !important; }
.garage.engineer-mode .workshop-reserve { display: grid !important; }

.garage .mod-view {
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: auto;
}

.garage .mod-slots { min-height: 0; }
.garage .mod-tier {
  appearance: none;
  color: #fff;
  font-family: inherit;
}
.mod-slot--reserved { border-style: dashed; opacity: .72; }
.mod-reserve-copy { color: var(--dim); font-size: 9px; font-weight: 900; letter-spacing: .7px; }

.garage .menu-foot {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  bottom: auto;
  z-index: auto;
  min-width: 0;
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(440px, 1.6fr) minmax(190px, .6fr) minmax(190px, .7fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 9px;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 17px;
  background: rgba(10, 8, 30, .98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.garage .opt-grid {
  min-width: 0;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr);
  gap: 8px;
  align-items: center;
}

.garage #map-row,
.garage #quality-row {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 5px;
  font-size: 9px;
}

.garage #map-btns,
.garage #quality-btns { min-width: 0; gap: 4px; }

.garage .m-btn,
.garage .q-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 5px 8px;
  font-size: 9px;
}

.garage #quality-note {
  display: none;
  flex-basis: auto;
}

.start-region {
  min-width: 0;
  display: grid;
  place-items: center;
}

.garage #btn-start {
  width: 100%;
  min-width: 160px;
  min-height: 50px;
  padding: 7px 14px;
  font-size: clamp(16px, 2vw, 22px);
}

.garage .keys { display: none; }

.garage .ver-switch {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 5px;
  font-size: 8px;
}

.garage .ver {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  text-align: center;
}

.garage.pause-mode .menu-foot { grid-template-columns: minmax(190px, 320px); justify-content: center; }
.garage.pause-mode .start-region { grid-column: 1; }

@media (max-width: 1100px) {
  #menu.garage { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .garage .menu-foot {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr) minmax(170px, .45fr);
  }
  .garage .opt-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .garage #map-row .q-label,
  .garage #quality-row .q-label { display: none; }
  .garage #map-btns,
  .garage #quality-btns { width: 100%; }
  .garage .m-btn,
  .garage .q-btn { flex: 1 1 44px; padding-inline: 4px; }
  #menu.garage > #swatches { max-width: calc(100% - 22px); }
}

@media (max-width: 900px) {
  #menu.garage {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: 8px;
  }
  .garage-car-pane { padding: 8px; overflow-y: auto; }
  .garage-workshop-pane { padding: 8px; }
  .garage .tag { display: none; }
  .garage .garage-title { font-size: 24px; }
  .garage #garage-coins { font-size: 13px; }
  .garage .build-tag { font-size: 8px; }
  .preview-reserve { display: none; }
  .garage .setup-controls,
  .garage .assist-controls { grid-template-columns: 1fr; }
  .garage .menu-foot {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .52fr);
    gap: 8px;
  }
  .garage .opt-grid { grid-template-columns: 1fr; gap: 4px; }
  .garage .ver-switch { display: none; }
  #menu.garage > #swatches { max-width: calc(100% - 18px); margin-bottom: 7px; }
  .panel-intro span { display: none; }
}

@media (max-height: 650px) {
  .garage-car-pane {
    grid-template-rows: auto auto minmax(58px, .42fr) minmax(142px, 1fr);
  }
  .garage-car-pane > .tag { display: none; }
  .garage-car-preview { min-height: 58px; padding-block: 4px; }
  .preview-stage { min-height: 36px; }
  .garage #cars { min-height: 132px; }
  .garage .cc-blurb { display: none; }
  .workshop-head h2 { display: none; }
  .workshop-reserve-card { min-height: 44px; }
}

/* ===========================================================================
   P22 ROUND 2 — READABLE, WARM, PHONE-FIRST

   The floor is 14px throughout this overlay. Decision values (prices, tyre
   condition, setup and assist outputs) deliberately step up to 16px. The
   short-landscape layout is a real mode: the car owns the screen until the
   player opens a full-width workshop over it. Nothing here is touched by the
   run loop; the only state change is the discrete open/close class in hud.js.
   =========================================================================== */

#menu.garage {
  color: #fff;
  font-size: 14px;
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 162, 72, .16), transparent 34%),
    radial-gradient(circle at 76% 8%, rgba(255, 212, 42, .08), transparent 30%),
    linear-gradient(135deg, #201332 0%, #0a081e 58%, #160d24 100%);
}

.garage-pane {
  border-color: rgba(255, 255, 255, .20);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025)),
    #17122d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 18px 38px rgba(0, 0, 0, .38);
}

.garage-car-pane {
  position: relative;
  grid-template-rows: auto auto auto minmax(118px, .55fr) minmax(274px, 1.45fr);
  border-color: rgba(255, 212, 42, .30);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 183, 88, .13), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    #1a122b;
}

.garage-workshop-pane {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    #120f27;
}

.garage .tag,
.garage #garage-message,
.preview-kicker,
.preview-reserve,
.workshop-kicker,
.engineer-toggle,
.workshop-tab,
.panel-intro,
.corner-authoring,
.corner-grid small,
.garage .assist-row,
.garage .assist-check,
.workshop-reserve-card,
.workshop-reserve-card strong,
.mod-reserve-copy,
.garage #map-row,
.garage #quality-row,
.garage .m-btn,
.garage .q-btn,
.garage .ver-switch,
.garage .ver,
.garage .build-tag {
  font-size: 14px;
}

.garage #garage-coins,
.garage .cc-price,
.garage .tyre-condition,
.garage .tyre-card button,
.garage .setup-value,
.garage .assist-row output,
.garage .mod-tier-price {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.garage #garage-message {
  min-height: 20px;
  line-height: 20px;
}
.garage #garage-message:empty { display: block; }

.garage .garage-title {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 1px;
}

.garage .build-tag {
  color: #cfc9ff;
  border-color: rgba(255, 255, 255, .22);
  background: #211a3c;
}

.garage-car-preview {
  min-height: 118px;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 10px 13px;
  border-color: rgba(255, 212, 42, .34);
  background:
    radial-gradient(ellipse at 50% 86%, rgba(255, 170, 66, .22), transparent 48%),
    linear-gradient(180deg, #0c0a20, #241630);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .30);
}

.preview-kicker,
.preview-reserve {
  color: #bdb6ee;
  letter-spacing: 1.1px;
}

.preview-car-name {
  align-self: center;
  color: var(--gold);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: 1.4px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.preview-stage::before {
  left: 10%;
  right: 10%;
  height: 20%;
  background: rgba(0, 0, 0, .72);
  filter: blur(3px);
}

.preview-stage span {
  left: 50%;
  right: auto;
  width: min(68%, 360px);
  height: min(42%, 110px);
  transform: translateX(-50%);
  border-radius: 48% 42% 12% 10% / 58% 58% 20% 20%;
  border-color: rgba(255, 212, 42, .68);
  background:
    linear-gradient(160deg, rgba(255, 244, 195, .34), transparent 32%),
    linear-gradient(135deg, rgba(255, 212, 42, .64), rgba(217, 43, 15, .54));
  box-shadow:
    inset 0 -10px 0 rgba(0, 0, 0, .32),
    0 0 28px rgba(255, 174, 54, .23);
}

.garage .car-card {
  border-color: rgba(255, 255, 255, .24);
  background: linear-gradient(180deg, #29223f, #17132c);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .24);
}

.garage .car-card.sel {
  background: linear-gradient(180deg, #3b322c, #201827);
  box-shadow: 0 0 0 2px rgba(255, 212, 42, .18), 0 12px 24px rgba(0, 0, 0, .34);
}

.garage .car-card.locked {
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, #211d32, #141126);
}
.garage .car-card.locked.afford { opacity: 1; filter: none; }

.garage .cc-name { font-size: 16px; }
.garage .cc-blurb { color: #d6d0ff; font-size: 14px; line-height: 1.25; }
.garage .cc-lab { width: 4.2em; color: #bdb6ee; font-size: 14px; }
.garage .cc-price { min-height: 20px; color: var(--gold); }
.garage .car-card.locked .cc-price { color: #ffc0b4; }
.garage .cc-buy { font-size: 16px; }

#garage-left-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.workshop-open,
.workshop-back {
  display: none;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid rgba(255, 212, 42, .62);
  border-radius: 12px;
  background: #2a2138;
  color: var(--gold);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .6px;
  cursor: pointer;
}

.garage .mod-toggle,
.garage .big-btn--buy,
.garage .fold-sum {
  font-size: 14px;
}

.garage .stat-lab { color: #bdb6ee; font-size: 14px; }
.garage .stat-val { font-size: 16px; }

#menu.garage > #swatches {
  border-color: rgba(255, 212, 42, .25);
  background: #110d29;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

.workshop-kicker { color: var(--gold); }
.workshop-head h2 { font-size: clamp(18px, 2vw, 24px); }

.engineer-toggle {
  color: #d1cbff;
  background: #211a3c;
  border-color: rgba(255, 255, 255, .22);
}

.workshop-tab {
  color: #d1cbff;
  background: #17132f;
  border-color: rgba(255, 255, 255, .22);
}

.panel-intro {
  min-height: 32px;
  color: #c7c1f2;
  line-height: 1.3;
}
.panel-intro strong { font-size: 16px; }

.garage .tyre-card {
  grid-template-rows: auto minmax(36px, auto) auto auto;
  gap: 8px;
  padding: 11px;
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, #27203c, #17132d);
  font-size: 14px;
  line-height: 1.25;
}

.garage .tyre-card button,
.garage .preset-rail button,
.garage .setup-actions button {
  border-color: rgba(255, 255, 255, .24);
  background: #17132f;
  font-size: 14px;
}
.garage .tyre-card button { font-size: 16px; }

.garage .cc-buy,
.garage .big-btn--buy { background-color: #57c84d; }
.garage .mod-back,
.garage .m-btn[aria-pressed="true"] { background-color: #22348f; }
.garage .mod-toggle {
  border: 2px solid rgba(255, 255, 255, .24);
  background: linear-gradient(#39304f, #211a3c);
  background-color: #211a3c;
}
.garage .workshop-tab.is-active,
.garage .q-btn[aria-pressed="true"] { background-color: var(--gold); }

.garage .setup-controls { gap: 5px 12px; }
.garage .setup-row {
  min-height: 44px;
  grid-template-columns: minmax(126px, .8fr) minmax(100px, 1fr);
  gap: 10px;
  font-size: 14px;
}
.garage .setup-label { gap: 2px; line-height: 1.15; }
.garage .setup-value {
  color: var(--gold);
  font-weight: 900;
  line-height: 1.15;
}

.garage #preset-name {
  height: 44px;
  max-height: 44px;
  align-self: center;
}

.corner-authoring {
  padding: 8px 10px;
  border-color: rgba(255, 212, 42, .34);
  color: #c7c1f2;
  line-height: 1.3;
}
.corner-grid { gap: 7px; margin-top: 6px; }
.corner-grid small { color: #bbb4e9; }

.garage .assist-row,
.garage .assist-check { min-height: 56px; }
.garage .assist-row output { color: var(--gold); font-weight: 900; }

.workshop-reserve-card {
  min-height: 56px;
  padding: 7px 10px;
  color: #bbb4e9;
  border-color: rgba(255, 212, 42, .30);
  background: #151129;
}
.workshop-reserve-card strong { color: var(--gold); }

.garage .mod-slot-name,
.garage .mod-tier-name,
.garage .mod-tier-effect,
.garage .mod-reserve-copy,
.garage .mod-back { font-size: 14px; }
.garage .mod-tier-price { line-height: 1.2; }
.garage .mod-reserve-copy { color: #d6d0ff; }
.garage .mod-tier.locked { opacity: 1; background: #151226; }
.garage .mod-tier.locked .mod-tier-price { color: #ffc0b4; }
.garage .mod-view {
  position: relative;
  z-index: 3;
  background: #1a142f;
}
.garage .mod-header {
  position: relative;
  z-index: 4;
}

.garage .menu-foot {
  border-color: rgba(255, 212, 42, .20);
  background: #0f0c24;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}

.garage .m-btn,
.garage .q-btn,
.garage .ver {
  color: #d1cbff;
  border-color: rgba(255, 255, 255, .24);
  background: #211a3c;
}

.garage .ver.here {
  color: var(--gold);
  border-color: rgba(255, 212, 42, .50);
}

@media (max-width: 900px) {
  .garage #garage-coins { font-size: 16px; }
  .garage .build-tag { display: none; }
  .garage .setup-row { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 1100px) {
  /* These are future instrument placeholders, not working tools. Folding them
     at iPad width protects the complete current tool without shrinking it. */
  .garage.engineer-mode .workshop-reserve { display: none !important; }
}

/* A short landscape phone is one hero pane plus an explicit workshop overlay.
   This is deliberately keyed to BOTH dimensions so iPad portrait keeps the
   two-pane tool while 667x375 and 844x390 do not pretend they are tablets. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #menu.garage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto 60px;
    gap: 6px;
    padding:
      calc(6px + env(safe-area-inset-top))
      calc(6px + env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom))
      calc(6px + env(safe-area-inset-left));
  }

  .garage-car-pane,
  .garage-workshop-pane {
    grid-column: 1;
    grid-row: 1;
    border-radius: 16px;
  }

  .garage-car-pane {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    overflow-y: auto;
  }

  .garage .garage-bar {
    flex: 0 0 auto;
    min-height: 44px;
    padding-right: 126px;
  }
  .garage .garage-title { font-size: 28px; }
  .garage .build-tag { display: none; }
  .garage #garage-coins { margin-left: auto; padding-inline: 8px; }
  .garage-car-pane > .tag { display: none; }

  .workshop-open {
    position: absolute;
    z-index: 3;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 116px !important;
  }

  .garage-car-preview {
    flex: 1 0 82px;
    min-height: 82px;
    padding: 6px 10px;
  }
  .preview-reserve { display: none; }
  .preview-stage { min-height: 42px; }

  #garage-car-main {
    flex: 1 0 166px;
    min-height: 166px;
    grid-template-rows: minmax(112px, 1fr) auto;
  }
  .garage #cars { min-height: 112px; padding-block: 3px 5px; }
  .garage .car-card {
    width: 132px;
    min-width: 132px;
    min-height: 108px;
    padding: 6px;
  }
  .garage .cc-blurb,
  .garage .cc-stats { display: none; }
  .garage .cc-price { margin-top: 2px; }
  .garage .cc-buy { margin-top: 3px; }

  #garage-left-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  #menu.garage > #swatches {
    grid-column: 1;
    grid-row: 2;
    max-width: calc(100% - 16px);
    margin: 0;
  }

  .garage-workshop-pane {
    grid-row: 1 / 3;
    z-index: 5;
    display: none;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 7px;
    border-color: rgba(255, 212, 42, .40);
    background:
      radial-gradient(circle at 85% 0%, rgba(255, 212, 42, .08), transparent 30%),
      #120f27;
  }
  .garage.phone-workshop-open .garage-workshop-pane { display: grid; }
  .garage.phone-workshop-open .garage-car-pane,
  .garage.phone-workshop-open > #swatches { visibility: hidden; pointer-events: none; }

  .workshop-head { gap: 7px; }
  .workshop-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 82px;
  }
  .workshop-head h2 { display: none; }
  .engineer-toggle { margin-left: auto; padding-right: 8px; }
  .engineer-toggle input { width: 44px; height: 44px; }

  .workshop-tabs { gap: 5px; }
  .workshop-panel { padding: 3px 2px; }
  .panel-intro { min-height: 26px; margin-bottom: 4px; }
  .panel-intro span { display: none; }

  .garage .tyre-shop {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 8px;
  }
  .garage .tyre-card { min-height: 164px; }

  .garage .setup-controls,
  .garage .assist-controls { grid-template-columns: 1fr; }
  .garage .setup-row { min-height: 52px; }
  .corner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-reserve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-reserve-card { min-height: 48px; }

  .garage .menu-foot {
    grid-column: 1;
    grid-row: 3;
    min-height: 60px;
    grid-template-columns: minmax(0, 1fr) minmax(176px, 204px);
    gap: 6px;
    padding: 5px 7px;
    border-radius: 14px;
  }
  .garage .opt-grid {
    grid-template-columns: minmax(188px, auto) minmax(180px, 1fr);
    gap: 6px;
  }
  .garage #map-btns,
  .garage #quality-btns { width: 100%; }
  .garage .m-btn,
  .garage .q-btn { flex: 1 1 44px; padding-inline: 5px; }
  .garage .ver-switch { display: none; }
  .garage #btn-start { min-width: 176px; min-height: 48px; }

  .garage.pause-mode .menu-foot { grid-template-columns: minmax(190px, 320px); }
}