/* ============ Base / mobile hardening ============ */
* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: #1b1f3a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* #vp-probe measures the large viewport (100lvh) for the viewport diagnostic (sendViewport in main.js) */
#vp-probe { position: fixed; top: 0; left: 0; width: 100lvw; height: 100lvh; visibility: hidden; pointer-events: none; }

button { font: inherit; color: inherit; border: none; outline: none; padding: 0; }
input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* or iOS won't let you type */

/* ============ Landscape container ============
 * main.js sets width/height (always landscape) and adds .rotated in portrait,
 * which turns the whole game 90deg so it plays sideways. */
#app {
  --app-h: 400px;          /* updated from JS: logical (landscape) height */
  --edge-l: max(14px, env(safe-area-inset-left));
  --edge-r: max(14px, env(safe-area-inset-right));
  --ctl: clamp(64px, calc(var(--app-h) * 0.24), 112px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#app.rotated {
  left: 100%;
  transform-origin: 0 0;
  transform: rotate(90deg);
  /* rotated 90deg clockwise: game-left is the phone's top, game-right its bottom */
  --edge-l: max(14px, env(safe-area-inset-top));
  --edge-r: max(14px, env(safe-area-inset-bottom));
}
/* Settings -> SCREEN Flipped: turned the other way (90deg counter-clockwise), for holding the phone the other
 * way round under portrait lock: game-left is the phone's bottom, game-right its top */
#app.rotated.flipped {
  left: 0;
  top: 100%;
  transform: rotate(-90deg);
  --edge-l: max(14px, env(safe-area-inset-bottom));
  --edge-r: max(14px, env(safe-area-inset-top));
}

#game {
  position: absolute;
  inset: 0;
  display: block;
}

/* ============ HUD ============ */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

#hud-top {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(20, 24, 60, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.25);
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.pill .label {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.75;
}

#minimap {
  --map: clamp(80px, calc(var(--app-h) * 0.26), 120px);
  position: absolute;
  top: 10px;
  left: var(--edge-l);
  width: var(--map);
  height: var(--map);
  border-radius: 16px;
  background: rgba(20, 24, 60, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.25);
}

/* Lap counter sits right under the minimap, same width */
#lapbox {
  --map: clamp(80px, calc(var(--app-h) * 0.26), 120px);
  position: absolute;
  top: calc(10px + var(--map) + 6px);
  left: var(--edge-l);
  width: var(--map);
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(20, 24, 60, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.25);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(18px, calc(var(--app-h) * 0.06), 24px);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
#lapbox .label { font-size: 11px; font-style: normal; letter-spacing: 2px; opacity: 0.75; }
#lapbox.final { color: #ffe14a; border-color: rgba(255, 225, 74, 0.6); }

#speedo {
  /* build 34: just right of the kart (the higher chase camera puts the kart where the readout was, mid-bottom) */
  position: absolute;
  bottom: 12px;
  left: calc(50% + var(--app-h) * 0.17);
  text-align: center;
  font-weight: 900;
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
#speedo small {
  font-size: 13px;
  margin-left: 4px;
  opacity: 0.8;
}
#drift-bar {
  width: 110px;
  height: 7px;
  margin: 6px auto 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#drift-fill {
  width: 0%;
  height: 100%;
  background: #5cc8ff;
  transition: background 0.15s;
}
#drift-fill.charged { background: #ffa21f; }

#countdown, #message {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-style: italic;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 5px 0 #c2185b, 0 8px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
}
#countdown { top: 42%; font-size: clamp(70px, calc(var(--app-h) * 0.28), 120px); color: #ffe14a; }
#message   { top: 30%; font-size: clamp(26px, calc(var(--app-h) * 0.09), 40px); color: #fff; }

.pop { animation: pop 0.9s ease-out forwards; }
@keyframes pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ============ Touch controls ============ */
#controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#steer, #pedals {
  position: absolute;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  pointer-events: auto;
}
#steer  { left: var(--edge-l); }
#pedals { right: var(--edge-r); }
/* the pedal row's box is taller than BRAKE and overlaps the ITEM button above it, and sat on top of it: taps on ITEM's lower part hit the empty box. Only the buttons take touches. */
#pedals { pointer-events: none; }
#pedals .ctl { pointer-events: auto; }

.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  letter-spacing: 1px;
  touch-action: none;
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), inset 0 -6px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.06s, filter 0.06s;
}
.ctl.pressed {
  transform: translateY(4px) scale(0.93);
  filter: brightness(1.25);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.steer-btn {
  width: var(--ctl);
  height: var(--ctl);
  font-size: calc(var(--ctl) * 0.36);
  background: radial-gradient(circle at 35% 30%, #c9d3ff, #5868d8);
}

#btn-gas {
  width: var(--ctl);
  height: var(--ctl);
  font-size: calc(var(--ctl) * 0.2);
  background: radial-gradient(circle at 35% 30%, #7dff9b, #22b14c);
  margin-bottom: calc(var(--ctl) * 0.3);
}
#btn-brake {
  width: calc(var(--ctl) * 0.78);
  height: calc(var(--ctl) * 0.78);
  font-size: calc(var(--ctl) * 0.13);
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #d62f3c);
}
#btn-brake small { font-size: 0.75em; opacity: 0.85; }

#btn-reset, #btn-pause {
  position: absolute;
  top: 10px;
  right: var(--edge-r);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 900;
  background: rgba(20, 24, 60, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.35);
  pointer-events: auto;
}
#btn-reset:active, #btn-pause:active { filter: brightness(1.4); }

/* ============ Item slot (tap to fire) ============ */
#btn-item {
  position: absolute;
  right: calc(var(--edge-r) + var(--ctl) + 14px);
  bottom: calc(16px + var(--ctl) * 0.78 + 16px);
  width: calc(var(--ctl) * 0.72);
  height: calc(var(--ctl) * 0.72);
  font-size: calc(var(--ctl) * 0.38);
  line-height: 1;
  background: rgba(20, 24, 60, 0.55);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.45);
  pointer-events: auto;
}
#btn-item.ready {
  border-style: solid;
  border-color: #ffe14a;
  background: radial-gradient(circle at 35% 30%, #fff6c2, #ffb800);
  animation: item-ready 0.8s ease-in-out infinite alternate;
}
@keyframes item-ready { to { box-shadow: 0 0 18px 4px rgba(255, 225, 74, 0.8), 0 6px 0 rgba(0, 0, 0, 0.35); } }
/* mushroom / banana / shield / star / triple: inline SVG set by updateItemVisuals (ui-icons.js) */
#btn-item .ico { width: 1.3em; height: 1.3em; pointer-events: none; filter: drop-shadow(0 0.04em 0.05em rgba(0, 0, 0, 0.55)); }
#btn-item[data-item="green"]::before,
#btn-item[data-item="red"]::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 0.1em solid #fff;
  background: radial-gradient(circle, #fff 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #9dffb0, #1d8f35); /* pucks: a light in the middle */
}
#btn-item[data-item="red"]::before { background: radial-gradient(circle, #fff 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #ffb0a8, #c41f1c); }
#btn-item[data-item="blue"]::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 0.1em solid #fff;
  background: radial-gradient(circle, #fff 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #b8d0ff, #1747c9);
}
#btn-item[data-item="bullet"]::before {
  content: "";
  width: 0.95em;
  height: 0.55em;
  border-radius: 0.1em 0.35em 0.35em 0.1em;
  background: linear-gradient(90deg, #2a2b33 0 12%, #eef0f4 12% 40%, #2a6bff 40% 48%, #eef0f4 48% 68%, #e8322f 68%); /* the jet */
  border: 0.06em solid #fff;
}
#btn-item[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #e8322f;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

/* Red shell incoming */
#warn {
  position: absolute;
  top: var(--warn-y, 72px);
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  background: #e8322f;
  border: 3px solid #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 40px;
  text-align: center;
  animation: warn-blink 0.4s steps(2) infinite;
}
#warn[hidden] { display: none; }
@keyframes warn-blink { 50% { opacity: 0.25; } }

/* ============ Race position (under the reset button) ============ */
#place {
  position: absolute;
  top: 64px;
  right: var(--edge-r);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 0 #2f3a8f, 0 6px 14px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
#place[hidden] { display: none; }
#place-num { font-size: clamp(40px, calc(var(--app-h) * 0.15), 64px); }
#place-suffix { font-size: clamp(16px, calc(var(--app-h) * 0.055), 24px); vertical-align: top; }
#place-of { display: block; text-align: right; font-size: 14px; opacity: 0.8; margin-top: 2px; }
#place.first { color: #ffe14a; text-shadow: 0 4px 0 #c2185b, 0 6px 14px rgba(0, 0, 0, 0.45); }


/* ============ Menu / results overlay ============
 * Two columns: title or result on the left, a card on the right.
 * While it's open, #app gets .overlay-on and the HUD and buttons fade out. */
#overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px calc(var(--edge-r) + 8px) 12px calc(var(--edge-l) + 8px);
  background: linear-gradient(100deg, rgba(14, 12, 40, 0.94) 0%, rgba(30, 24, 80, 0.8) 55%, rgba(14, 12, 40, 0.9) 100%);
  transition: opacity 0.3s;
}
#overlay.hidden { opacity: 0; pointer-events: none; }
/* Before main.js is done the lobby has no view class or sizes yet (an old-looking, clipped landscape layout): only the splash shows */
#boot { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#boot p { margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: 1px; opacity: 0.7; }
#app:not(.booted) #boot { display: flex; }
#app:not(.booted) #overlay > .screen, #app:not(.booted) #hud, #app:not(.booted) #controls { visibility: hidden; }

#hud, #controls > * { transition: opacity 0.3s; }
#app.overlay-on #hud,
#app.overlay-on #controls > * { opacity: 0; pointer-events: none; }

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 5vw, 48px);
  width: 100%;
  max-width: 820px;
  max-height: 100%;
}
.screen[hidden] { display: none; }
.screen .side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.screen .card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
  padding: clamp(10px, calc(var(--app-h) * 0.04), 18px) 18px;
  border-radius: 20px;
  background: rgba(10, 12, 36, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.35);
}

#overlay h1 {
  margin: 0;
  font-size: clamp(40px, calc(var(--app-h) * 0.17), 76px);
  line-height: 0.95;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  color: #ffe14a;
  text-shadow: 0 5px 0 #c2185b, 0 10px 24px rgba(0, 0, 0, 0.45);
}
#overlay h1 span { display: block; color: #5cc8ff; }
.tagline { margin: 12px 0 clamp(12px, calc(var(--app-h) * 0.05), 22px); font-size: 14px; font-weight: 700; opacity: 0.75; letter-spacing: 0.5px; }
.track-pick { display: flex; gap: 8px; margin: calc(clamp(12px, calc(var(--app-h) * 0.05), 22px) * -0.4) 0 clamp(10px, calc(var(--app-h) * 0.045), 20px); }
.trk {
  padding: 7px 13px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0.7;
  cursor: pointer;
}
.trk i { font-style: normal; margin-right: 6px; }
.trk.on { opacity: 1; border-color: #ffe14a; background: rgba(255, 225, 74, 0.18); color: #ffe14a; }
.record { margin: 10px 0 0; font-size: 13px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.record[hidden] { display: none; }
.record .new { color: #ffe14a; font-weight: 900; }

.btn-primary, .btn-secondary {
  padding: 13px 30px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(#ffe14a, #ffaa00);
  color: #3a1d00;
  box-shadow: 0 6px 0 #b35c00;
}
.btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #b35c00; }
.btn-secondary {
  padding: 13px 20px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
.btn-secondary:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.btn-row { display: flex; gap: 12px; margin-top: clamp(12px, calc(var(--app-h) * 0.05), 22px); }

/* Result */
.big-place {
  font-size: clamp(56px, calc(var(--app-h) * 0.26), 110px);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  text-shadow: 0 5px 0 #2f3a8f, 0 10px 24px rgba(0, 0, 0, 0.45);
  animation: place-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.big-place sup { font-size: 0.36em; vertical-align: 1.2em; margin-left: 2px; }
.big-place.p1 { color: #ffe14a; text-shadow: 0 5px 0 #c2185b, 0 10px 24px rgba(0, 0, 0, 0.45); }
.big-place.p2 { color: #e3ebf5; }
.big-place.p3 { color: #f0a868; }
@keyframes place-in { from { opacity: 0; transform: scale(2.2); } }

.stats { display: flex; gap: 10px; margin-top: 12px; }
.stats div {
  display: flex;
  flex-direction: column;
  min-width: 98px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(10, 12, 36, 0.72);
  font-variant-numeric: tabular-nums;
}
.stats span { font-size: 10px; letter-spacing: 2px; opacity: 0.6; font-weight: 800; }
.stats b { font-size: 18px; }

/* Standings */
.standings { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.standings td { padding: clamp(3px, calc(var(--app-h) * 0.012), 6px) 6px; white-space: nowrap; }
.standings tr { animation: row-in 0.35s ease-out both; }
.standings tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.standings .pos { width: 34px; }
.standings .pos i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.1);
}
.standings .g i { background: #ffd23a; color: #3a1d00; }
.standings .s i { background: #cfd8e3; color: #222; }
.standings .b i { background: #d98a4e; color: #2a1200; }
.standings .name { width: 100%; font-weight: 700; }
.standings .gap { text-align: right; opacity: 0.85; }
.standings .gap.wait { opacity: 0.5; font-style: italic; }
.standings tr.me td { background: rgba(255, 225, 74, 0.16); color: #ffe14a; font-weight: 900; }
.standings tr.me td:first-child { border-radius: 10px 0 0 10px; }
.standings tr.me td:last-child { border-radius: 0 10px 10px 0; }
@keyframes row-in { from { opacity: 0; transform: translateX(24px); } }
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Confetti for a win (CSS only; pieces are created in showResults) */
#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall { to { transform: translateY(calc(var(--app-h) + 30px)) rotate(720deg); } }

/* Build stamp: shows which copy the phone is running (build + host) */
#build { position: absolute; left: calc(var(--edge-l) + 4px); bottom: 6px; margin: 0; font-size: 10px; opacity: 0.4; }
#build { pointer-events: auto; padding: 6px 6px 0 0; }

/* Frame meter (tap the build label on the title screen to toggle) */
#perf {
  position: absolute;
  top: calc(10px + clamp(80px, calc(var(--app-h) * 0.26), 120px) + 6px);
  left: var(--edge-l);
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  font: 11px/1.3 ui-monospace, monospace;
  white-space: pre;
}
#perf[hidden] { display: none; }

/* ============ Pause, lap split, wrong way ============ */
#btn-pause { right: calc(var(--edge-r) + 56px); font-size: 16px; }
#btn-pause::before { content: ""; width: 5px; height: 17px; margin-left: -9px; background: #fff; border-radius: 1px; box-shadow: 9px 0 #fff; }
#btn-pause { display: flex; align-items: center; justify-content: center; }
.paused {
  margin-bottom: 18px;
  font-size: clamp(40px, calc(var(--app-h) * 0.15), 64px);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  text-shadow: 0 5px 0 #2f3a8f, 0 10px 24px rgba(0, 0, 0, 0.45);
}

#split {
  position: absolute;
  left: 50%;
  top: calc(30% + clamp(26px, calc(var(--app-h) * 0.09), 40px) * 0.8);
  transform: translate(-50%, -50%);
  font-size: clamp(16px, calc(var(--app-h) * 0.05), 22px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
}
#split b { margin-left: 8px; padding: 1px 8px; border-radius: 8px; }
#split .faster { background: #1f9d48; }
#split .slower { background: #c62f3a; }
.pop-long { animation: pop 1.8s ease-out forwards; }

#wrongway {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 18px;
  border-radius: 12px;
  background: #e8322f;
  border: 3px solid #fff;
  font-size: clamp(22px, calc(var(--app-h) * 0.08), 34px);
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  animation: warn-blink 0.5s steps(2) infinite;
}
#wrongway[hidden] { display: none; }

/* Countdown tip (rocket start), under the countdown number */
#tip {
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 12px;
  background: rgba(10, 12, 36, 0.7);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
}
.pop-tip { animation: tip 3s ease-out forwards; }
@keyframes tip { 0%, 100% { opacity: 0; } 8%, 85% { opacity: 1; } }

/* ============ Settings ============ */
.btn-small {
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}
.btn-small:active { transform: translateY(2px); }
.setting { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.setting-label { font-size: 11px; letter-spacing: 3px; opacity: 0.6; font-weight: 800; }
.setting .track-pick { margin: 0 0 12px; }
.setting-row { display: flex; gap: 44px; }
.vol-pick { gap: 5px; }
.vol-pick .trk { padding: 7px 10px; }

/* ============ Joystick steering (Settings -> Joystick) ============ */
#joystick {
  position: absolute;
  left: var(--edge-l);
  bottom: 0;
  width: calc(var(--ctl) * 2.6);
  height: calc(var(--ctl) * 2.2);
  display: none;            /* #app.steer-joystick shows it and hides the arrows */
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
}
#app.steer-joystick #joystick { display: flex; }
#app.steer-joystick #steer { display: none; }
#stick-base {
  position: relative;
  width: calc(var(--ctl) * 1.7);
  height: calc(var(--ctl) * 1.7);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 24, 60, 0.25), rgba(20, 24, 60, 0.55));
  border: 3px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.3);
}
#stick-base::before, #stick-base::after { /* left / right hints at the edges */
  content: "\25C0";
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  font-size: calc(var(--ctl) * 0.18);
  opacity: 0.5;
}
#stick-base::after { content: "\25B6"; left: auto; right: 8%; }
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ctl) * 0.8);
  height: calc(var(--ctl) * 0.8);
  margin: calc(var(--ctl) * -0.4) 0 0 calc(var(--ctl) * -0.4);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9d3ff, #5868d8);
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease-out;
}
#stick-knob.held { transition: none; filter: brightness(1.2); }

/* ============ Lobby (title screen) ============
 * Header chips on top, logo + START on the left, the middle left open for the 3D kart (lobby camera),
 * RACE SETUP on the right. */
#overlay.lobby-on {
  background:
    linear-gradient(90deg, rgba(14, 12, 40, 0.88) 0%, rgba(20, 16, 60, 0.45) 30%, rgba(20, 16, 60, 0.05) 45%,
      rgba(20, 16, 60, 0.05) 55%, rgba(14, 12, 40, 0.55) 66%, rgba(14, 12, 40, 0.8) 100%);
}
.screen.lobby {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: none;
  height: 100%;
}
.lobby-top { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 16px;
  background: rgba(10, 12, 36, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.chip[hidden] { display: none; }
.chip:active { transform: translateY(2px); }
.chip .ico { width: 15px; height: 15px; }
#hello-edit .ico { color: #ffe14a; }
.lobby-top .btn-help { margin: 0 0 0 auto; padding: 6px 14px; font-size: 15px; }
.lobby-top .btn-settings { margin: 0 0 0 8px; }

.lobby-main { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 12px; }
.lobby-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lobby-stage { flex: 1 1 auto; align-self: stretch; min-width: 60px; }
.race-pill {
  margin: clamp(8px, calc(var(--app-h) * 0.03), 14px) 0 clamp(12px, calc(var(--app-h) * 0.05), 22px);
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.btn-start { font-size: clamp(20px, calc(var(--app-h) * 0.065), 26px); padding: 14px 34px; }
#overlay .lobby h1 { font-size: clamp(38px, calc(var(--app-h) * 0.15), 68px); }

.setup button { cursor: pointer; text-align: left; }
.driver-tag { font-size: 11px; font-weight: 700; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.swatches { display: flex; gap: 4px; }
.swatches i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.7); }

/* shared bits of the track row and the picker cards */
.pick-art {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.pick-art svg { width: 100%; height: 100%; }
.pick-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pick-text small { font-size: 9px; letter-spacing: 2px; opacity: 0.55; font-weight: 800; }
.pick-text b { display: flex; align-items: center; gap: 5px; font-size: clamp(14px, calc(var(--app-h) * 0.042), 16px); font-weight: 900; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-text b .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.pick-text em { font-size: 12px; font-style: normal; opacity: 0.7; white-space: nowrap; }
.chev { font-size: 24px; line-height: 1; opacity: 0.5; font-weight: 300; margin-left: -4px; }
#build { left: 0; bottom: -6px; }

/* Theme tint behind the track drawings */
[data-theme="meadow"] .track-art { background: linear-gradient(160deg, #5fae4a, #2f7a35); }
[data-theme="desert"] .track-art { background: linear-gradient(160deg, #e8a95e, #b5652f); }
[data-theme="snow"] .track-art { background: linear-gradient(160deg, #d6e6f5, #8fb0cf); }
[data-theme="harbour"] .track-art { background: linear-gradient(160deg, #6cc4e0, #2f7fa8); }
[data-theme="volcano"] .track-art { background: linear-gradient(160deg, #e0763a, #7a3a2a); }
[data-theme="jungle"] .track-art { background: linear-gradient(160deg, #6fb551, #2f6e3a); }
[data-theme="mine"] .track-art { background: linear-gradient(160deg, #6e5a48, #241c16); }
[data-theme="moon"] .track-art { background: linear-gradient(160deg, #2a2f4a, #05060e); }
.track-art { border-radius: 10px; }
.track-art .road-edge { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 6; stroke-linejoin: round; }
.track-art .road { fill: none; stroke: #f4f4f4; stroke-width: 3; stroke-linejoin: round; }
.track-art .dir { fill: none; stroke: #ffe14a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.screen-col { flex-direction: column; min-width: 0; gap: clamp(8px, calc(var(--app-h) * 0.035), 16px); }
.pick-title {
  font-size: clamp(22px, calc(var(--app-h) * 0.075), 32px);
  font-weight: 900;
  font-style: italic;
  color: #ffe14a;
  text-shadow: 0 4px 0 #c2185b, 0 8px 18px rgba(0, 0, 0, 0.45);
}
.pick-list {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 4px 8px;   /* room for the cards' drop shadow */
}
.pick-list::-webkit-scrollbar { display: none; }
/* more cards than fit: fade the edges as a hint that it swipes */
.pick-list.scrolls { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.pick-grid {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(6px, calc(var(--app-h) * 0.022), 12px);
  width: max-content;
  margin: 0 auto;           /* centred while it fits, starts at the left once it scrolls */
  padding: 0 4px;
}
.pick-grid > * { scroll-snap-align: center; }
.pick-track .pick-grid { grid-template-rows: auto; grid-auto-columns: clamp(150px, 24vw, 210px); }
.pick-driver .pick-grid { grid-template-rows: repeat(2, auto); grid-auto-columns: 230px; }
.pick-kart .pick-grid { grid-template-rows: repeat(2, auto); grid-auto-columns: 130px; }
.pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(10, 12, 36, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  min-width: 0;
}
.pick-card:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.pick-card.on { border-color: #ffe14a; background: rgba(60, 50, 20, 0.8); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 225, 74, 0.35); }
.pick-card b { font-size: 15px; font-weight: 900; font-style: italic; white-space: nowrap; }
.pick-card b { display: inline-flex; align-items: center; gap: 5px; }
.pick-card b .ico { width: 17px; height: 17px; }
.pick-card small { font-size: 11px; opacity: 0.7; white-space: nowrap; }
.pick-card.on b { color: #ffe14a; }
.pick-track .track-art { width: 100%; height: auto; aspect-ratio: 100 / 64; max-height: calc(var(--app-h) * 0.32); }
.pick-driver .pick-card { flex-direction: row; gap: 10px; padding: 6px 12px 6px 8px; text-align: left; }
.pick-driver .driver-art { flex: 0 0 auto; width: clamp(44px, calc(var(--app-h) * 0.14), 58px); height: auto; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03) 70%); }
.pick-driver span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pick-driver small { white-space: normal; }
.pick-kart .kart-art { width: clamp(64px, calc(var(--app-h) * 0.2), 92px); height: auto; }

/* ============ Hello screen (name + age) ============ */
.hello-form { display: flex; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.field input {
  width: 220px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 12, 36, 0.72);
  color: #fff;
  font: 900 italic 20px system-ui, -apple-system, sans-serif;  /* >= 16px: iOS zooms into smaller fields */
  text-align: center;
  outline: none;
}
.field input:focus { border-color: #ffe14a; }
.field input::placeholder { color: rgba(255, 255, 255, 0.3); }
.hello-error { min-height: 1.2em; margin: 0; font-size: 13px; font-weight: 800; color: #ff8a8a; }
#hello-screen { gap: clamp(4px, calc(var(--app-h) * 0.02), 10px); }
#hello-screen .pick-title { font-size: clamp(18px, calc(var(--app-h) * 0.06), 28px); }
.field input { caret-color: transparent; cursor: pointer; }
.field input.active { border-color: #ffe14a; }
.field input:focus { border-color: rgba(255, 255, 255, 0.2); }
.field input.active:focus { border-color: #ffe14a; }
.field input { padding: clamp(5px, calc(var(--app-h) * 0.018), 10px) 14px; }
/* In-game keyboard (hello screen): letters for the name, a 3x3 number pad for the age */
.kbd { display: flex; flex-direction: column; gap: 5px; width: min(620px, 94%); }
.kbd-row { display: flex; gap: 5px; justify-content: center; }
.kbd-row[hidden] { display: none; }
.kbd-key {
  flex: 1 1 0;
  max-width: 54px;
  height: clamp(30px, calc(var(--app-h) * 0.1), 44px);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  font: 900 clamp(14px, calc(var(--app-h) * 0.045), 19px) system-ui, -apple-system, sans-serif;
  color: #fff;
}
.kbd-key.down { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); background: rgba(255, 255, 255, 0.3); }
.kbd-key.wide { max-width: none; flex: 4 1 0; }
.kbd-key.mid { max-width: 90px; flex: 1.6 1 0; }
.kbd-key .ico { width: 1.1em; height: 1.1em; }
/* LET'S RACE: a round arrow right of the fields */
.btn-go { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; align-self: flex-end; }
.btn-go .ico { width: 26px; height: 26px; }
.greeting {
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.greeting[hidden] { display: none; }
.greeting:active { transform: translateY(2px); }
.greeting + .tagline { margin-top: 8px; }

/* Driver + paint pickers: split stage. Left ~42% left open for the live 3D kart (the lobby camera frames it
 * there: lobbyCamera / stage), cards in a vertical grid on the right. Backdrop light on the left, dark on the right. */
#overlay.stage-on { background: linear-gradient(to right, rgba(10, 14, 26, 0.15) 0%, rgba(10, 14, 26, 0.85) 50%, rgba(10, 14, 26, 0.92) 100%); }
.pick-stage { display: none; }
.pick-panel { display: contents; } /* track picker: the panel's children lay out as before */
#pick-screen.staged { flex-direction: row; align-items: stretch; gap: 0; max-width: none; height: 100%; }
#pick-screen.staged .pick-stage {
  display: flex;
  flex: 0 0 42%;
  flex-direction: column;
  justify-content: flex-start;  /* the name sits above the kart, never over it */
  align-items: center;
  padding-top: clamp(2px, calc(var(--app-h) * 0.02), 10px);
  touch-action: none;
  cursor: grab;
}
.stage-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 18px 6px;
  border-radius: 16px;
  background: rgba(10, 14, 26, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transition: transform 0.15s ease-out;
}
.stage-label.pop { transform: scale(1.08); }
.stage-label b { font-size: clamp(18px, calc(var(--app-h) * 0.06), 26px); font-weight: 900; font-style: italic; color: #ffe14a; line-height: 1.1; }
.stage-label small { font-size: 12px; font-weight: 700; opacity: 0.8; }
#pick-screen.staged .pick-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, calc(var(--app-h) * 0.025), 12px);
}
#pick-screen.staged .pick-title { font-size: clamp(20px, calc(var(--app-h) * 0.065), 28px); }
#pick-screen.staged .pick-list {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
}
#pick-screen.staged .pick-grid { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; width: 100%; box-sizing: border-box; }
/* driver cards: art + name; paint and body cards: art only (the rest of the text goes with the 3D view); 3 per row */
#pick-screen.staged .pick-driver .pick-grid,
#pick-screen.staged .pick-kart .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pick-screen.staged .pick-driver .pick-card { flex-direction: column; justify-content: center; gap: 2px; padding: 6px; text-align: center; }
#pick-screen.staged .pick-driver .driver-art { width: clamp(52px, calc(var(--app-h) * 0.18), 76px); }
#pick-screen.staged .pick-kart .kart-art { width: clamp(70px, calc(var(--app-h) * 0.22), 100px); }
#pick-screen.staged .pick-card b { font-size: 14px; }
#pick-screen.staged .pick-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Track picker: the selected track big (left; on top in the vertical view) + compact cards in a column */
.track-preview { display: none; }
#pick-screen.tracks { flex-direction: row; align-items: stretch; gap: 12px; max-width: none; height: 100%; }
#pick-screen.tracks .track-preview { display: flex; flex: 0 0 46%; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-width: 0; }
.tp-view { width: 100%; display: grid; place-items: center; }
.tp-view .track-art { width: 100%; height: auto; aspect-ratio: 100 / 64; max-height: 100%; border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.tp-info { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; }
.tp-info b { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 900; font-style: italic; color: #ffe14a; }
.tp-info b .ico { width: 22px; height: 22px; }
.tp-info small { font-size: 12px; opacity: 0.75; }
.tp-info em { font-style: normal; font-size: 12px; font-weight: 800; color: #ffe14a; }
#pick-screen.tracks .pick-panel { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, calc(var(--app-h) * 0.025), 12px); }
#pick-screen.tracks .pick-title { font-size: clamp(20px, calc(var(--app-h) * 0.065), 28px); }
#pick-screen.tracks .pick-list { flex: 1 1 auto; min-height: 0; width: 100%; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
#pick-screen.tracks .pick-grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; grid-auto-columns: auto; width: 100%; box-sizing: border-box; }
#pick-screen.tracks .pick-card { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; justify-items: start; padding: 6px 10px 6px 6px; text-align: left; }
#pick-screen.tracks .pick-card .track-art { grid-row: 1 / 3; width: 66px; max-height: none; border-radius: 8px; }
#pick-screen.tracks .pick-card small { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Paint picker: a soft spotlight + floor under each kart so dark paints (Midnight, Coal) stand out */
.pick-kart .pick-card { background: radial-gradient(ellipse at 50% 42%, rgba(160, 180, 255, 0.22), rgba(10, 12, 36, 0.78) 68%); }
.pick-kart .pick-card.on { background: radial-gradient(ellipse at 50% 42%, rgba(255, 225, 74, 0.28), rgba(60, 50, 20, 0.85) 68%); }

/* ============ Settings: card + icons + master mute ============ */
.trk .ico { width: 15px; height: 15px; vertical-align: -3px; }
.btn-small .ico { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }

/* Narrow phones (iPhone SE landscape ~667 px): sized by the lobby's own width, so it also holds when #app is
 * rotated (portrait), where the viewport width says nothing about the landscape layout */
.lobby-main { container-type: inline-size; }
@container (max-width: 700px) {
  .lobby-stage { min-width: 0; flex-basis: 20px; }
  .setup-record span { letter-spacing: 0.5px; margin: 0 2px 0 4px; }
  #overlay .lobby h1 { font-size: 46px; }
}

/* ============ How to play ============ */
/* A tile grid: big icon + name + a few words, everything on one screen (no scrolling) */
#help-screen { max-width: none; gap: clamp(4px, calc(var(--app-h) * 0.02), 10px); }
.help-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
#help-screen .pick-title { font-size: clamp(18px, calc(var(--app-h) * 0.06), 26px); }
.screen .help-card { flex: 0 0 auto; width: 100%; max-width: 100%; display: flex; gap: 14px; text-align: center;
  max-height: calc(var(--app-h) * 0.84); overflow-y: auto; padding: 8px 12px !important;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; background: none; box-shadow: none; }
.help-col { min-width: 0; }
.help-controls { flex: 3 1 0; }
.help-items { flex: 4 1 0; }
.help-col h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: 3px; opacity: 0.6; }
.help-grid { display: grid; gap: 6px 4px; }
.help-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.help-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.tile b { font-size: 11px; letter-spacing: 1px; color: #ffe14a; }
.tile small { font-size: 10px; line-height: 1.2; opacity: 0.85; }
.hi { --s: 34px; flex: 0 0 var(--s); width: var(--s); height: var(--s); display: grid; place-items: center; }
.hi .ico { width: var(--s); height: var(--s); }
.hb { border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); font-size: 9px; font-weight: 900; color: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.hb .ico { width: 20px; height: 20px; }
.hb-gas { background: radial-gradient(circle at 35% 30%, #7dff9b, #22b14c); }
.hb-brake { background: radial-gradient(circle at 35% 30%, #ff8a8a, #d62f3c); }
.hb-steer { background: radial-gradient(circle at 35% 30%, #c9d3ff, #5868d8); }
.hb-item { background: radial-gradient(circle at 35% 30%, #fff6c2, #ffb800); border-color: #ffe14a; color: #5a3a00; font-size: 18px; }
.hb-reset { background: rgba(20, 24, 60, 0.8); border-color: rgba(255, 255, 255, 0.35); font-size: 20px; }
.hb-one { background: rgba(20, 24, 60, 0.8); font-size: 20px; color: #ffe14a; }
.hbar { height: 12px !important; align-self: center; border-radius: 6px; background: rgba(255, 255, 255, 0.18); overflow: hidden; width: 30px; margin: 11px 2px; }
.hbar i { display: block; width: 65%; height: 100%; background: linear-gradient(90deg, #ffe14a, #ff7a1a); }
.hpad { background: linear-gradient(#3a3f7a, #262a58); border-radius: 5px; font-size: 12px; color: #ffe14a; height: 24px !important; width: 32px; margin: 5px 0; letter-spacing: -2px; }
.hbox { width: 26px; height: 26px; margin: 4px 0; border-radius: 5px;
  background: conic-gradient(#ff5959, #ffe14a, #66ff80, #66ccff, #cc80ff, #ff5959); border: 2px solid #fff; }
.hs { width: 26px; height: 26px; margin: 4px 0; border-radius: 50%; border: 2px solid #fff; }
.hs-green { background: radial-gradient(circle, #fff 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #9dffb0, #1d8f35); } /* pucks: a light in the middle */
.hs-red { background: radial-gradient(circle, #fff 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #ffb0a8, #c41f1c); }
.hs-blue { background: radial-gradient(circle, #fff 0 22%, transparent 26%), radial-gradient(circle at 35% 30%, #b8d0ff, #1747c9); }
.hs-bullet { width: 32px; height: 18px; margin: 8px 0; border-radius: 4px 14px 14px 4px; border-width: 1.5px;
  background: linear-gradient(90deg, #2a2b33 0 12%, #eef0f4 12% 40%, #2a6bff 40% 48%, #eef0f4 48% 68%, #e8322f 68%); }
.help-badge { grid-column: 1 / -1; text-align: center; margin: 14px 0 4px; }
.help-badge img { max-width: 100%; height: auto; }
#app:not(.vertical) .help-badge { margin: 6px 0 0; }
#app:not(.vertical) .help-badge img { width: 150px; } /* sideways: under the tabs, small */
.help-card, .help-card .tile { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6); }


/* Debug panel: wrapping button rows, smaller type */
.dbg .track-pick { flex-wrap: wrap; justify-content: flex-start; }
.dbg .trk { padding: 6px 10px; font-size: 12px; }
.dbg .setting-label { min-width: 74px; }
.btn-debug[hidden] { display: none; }
#debug-card { max-height: calc(var(--app-h) - 118px); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
#debug-screen .pick-title { margin-bottom: 4px; }
#debug-card .setting-row { margin-bottom: 4px; }
#btn-debug-start[hidden] { display: none; }

#mirror-frame { position: absolute; display: none; box-sizing: border-box; border: 2px solid rgba(255,255,255,0.75); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.45); pointer-events: none; }
#btn-item[data-item="bomb"]::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 0.08em solid #fff;
  background: radial-gradient(circle at 35% 30%, #7a7a88, #1c1c24);
  box-shadow: 0.25em -0.45em 0 -0.22em #ff8a1f; /* the fuse spark */
}

/* ============ Vertical view (Settings -> VIEW): upright, no turn; auto-gas, so no GAS button; drag to steer ============ */
#vsteer { display: none; position: absolute; left: 0; right: 0; top: 32%; bottom: 0; pointer-events: auto; touch-action: none; }
#vbase {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); display: none; pointer-events: none;
}
#vsteer.held #vbase { display: block; }
#vknob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
/* build 64.24: arrow buttons across the bottom (left under the left thumb, right under the right), item in the middle, no brake and no gas */
#app.vertical #joystick, #app.vertical #btn-gas, #app.vertical #pedals, #app.vertical #vsteer { display: none !important; }
#app.vertical #steer { display: flex !important; left: var(--edge-l); right: var(--edge-r); bottom: 24px; justify-content: space-between; }
#app.vertical .steer-btn { width: calc(var(--ctl) * 1.15); height: calc(var(--ctl) * 1.15); }
#app.vertical #pedals { left: calc(50% - var(--ctl) * 0.95 - 8px); right: auto; bottom: 24px; } /* brake + item share the middle strip: the halves are the sides */
#app.vertical #btn-brake { width: calc(var(--ctl) * 0.95); height: calc(var(--ctl) * 0.95); font-size: calc(var(--ctl) * 0.16); }
#app.vertical #btn-item { left: calc(50% - var(--ctl) * 0.475); right: auto; bottom: 24px; width: calc(var(--ctl) * 0.95); height: calc(var(--ctl) * 0.95); }
#app.vertical #minimap, #app.vertical #lapbox { --map: 84px; }
#vl, #vr { position: absolute; top: 0; bottom: 0; width: 50%; opacity: 0; pointer-events: none; }
#vl { left: 0; background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); }
#vr { right: 0; background: linear-gradient(270deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); }
/* build 64.25: squared buttons; pause + reset moved down beside the right thumb, above the right arrow */
#app.vertical .steer-btn { border-radius: 22%; }
#app.vertical #btn-pause, #app.vertical #btn-reset { top: auto; right: var(--edge-r); bottom: calc(24px + var(--ctl) * 1.15 + 16px); }
#app.vertical #btn-reset { bottom: calc(24px + var(--ctl) * 1.15 + 16px + 56px); }
/* build 64.27: tall steering buttons, the three buttons a bit higher; pause + reset big, mid-screen on the right */
#app.vertical .steer-btn { width: calc(var(--ctl) * 0.95); height: calc(var(--ctl) * 1.55); border-radius: 22%; }
#app.vertical #steer { bottom: 64px; }
#app.vertical #btn-item { bottom: 64px; }
#app.vertical #btn-pause, #app.vertical #btn-reset { width: 66px; height: 66px; font-size: 32px; top: 50%; bottom: auto; right: var(--edge-r); }
#app.vertical #btn-pause { top: calc(50% - 78px); } /* build 64.31: pause above, reset below */
#app.vertical #btn-reset { top: 50%; }
/* build 64.28: wide (horizontal) steering buttons, the item between them */
#app.vertical .steer-btn { width: calc(var(--ctl) * 1.15); height: calc(var(--ctl) * 0.85); }
#app.vertical #btn-item { left: calc(50% - var(--ctl) * 0.425); width: calc(var(--ctl) * 0.85); height: calc(var(--ctl) * 0.85); }

/* ============ build 64.30: portrait HUD ============ */
#app.vertical { --safe-b: max(0px, env(safe-area-inset-bottom)); }
/* 1. one top bar for LAP | TIME | BEST (JS moves #lapbox inside #hud-top) */
#app.vertical #hud-top {
  left: var(--edge-l); right: var(--edge-r); top: var(--row-y, 118px); transform: none;
  gap: 0 !important; align-items: stretch; padding: 4px 4px;
  border-radius: 16px; background: rgba(20, 24, 60, 0.6); border: 2px solid rgba(255, 255, 255, 0.25);
}
#app.vertical #hud-top > .pill, #app.vertical #hud-top > #lapbox {
  position: static; flex: 1; width: auto; min-width: 0; margin: 0; padding: 2px 6px;
  flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: none; border: none; border-radius: 0;
  font-size: 17px; font-style: normal; font-weight: 800;
}
#app.vertical #hud-top > * + * { border-left: 1px solid rgba(255, 255, 255, 0.2); }
#app.vertical #lapbox .label { font-size: 10px; letter-spacing: 2px; }
#app.vertical #lapbox.final { color: #ffe14a; }
/* 2. position + field size read as one badge: "5th /6" */
#app.vertical #place {
  top: calc(var(--row-y, 118px) + 70px); right: var(--edge-r);
  display: flex; align-items: baseline; gap: 4px; padding: 4px 12px 7px;
  border-radius: 14px; background: rgba(20, 24, 60, 0.6); border: 2px solid rgba(255, 255, 255, 0.25);
}
#app.vertical #place[hidden] { display: none; }
#app.vertical #place-num { font-size: 44px; }
#app.vertical #place-suffix { font-size: 20px; vertical-align: baseline; }
#app.vertical #place-of { display: inline; margin: 0 0 0 4px; font-size: 18px; text-align: left; }
/* 3. safe zones: the speed readout sat on the right edge and was cut off; now inside the side + bottom insets, above the buttons */
#app.vertical #speedo {
  left: auto; right: calc(var(--edge-r) + 6px); text-align: right;
  bottom: calc(var(--safe-b) + 56px + var(--ctl) * 0.85 + 14px);
}
#app.vertical #drift-bar { margin-right: 0; margin-left: auto; }
#app.vertical #steer, #app.vertical #btn-item { bottom: calc(var(--safe-b) + 56px); }
#app.vertical #minimap { top: var(--mirror-y, 160px); } /* top edge level with the mirror */
/* build 64.32: smaller position badge, same spot (it touched the mirror) */
#app.vertical #place { padding: 3px 9px 5px; gap: 3px; border-radius: 12px; }
#app.vertical #place-num { font-size: 34px; }
#app.vertical #place-suffix { font-size: 15px; }
#app.vertical #place-of { font-size: 14px; margin-left: 3px; }
/* build 64.33: reset lower by the right thumb, pause on the left at the same height */
#app.vertical #btn-reset { top: 54%; }
#app.vertical #btn-pause { top: 54%; left: var(--edge-l); right: auto; }

/* ============ build 64.36: chunky 3D buttons (vertical view): thick dark bottom edge; pressing sinks the button by the edge's height ============ */
#app.vertical .steer-btn, #app.vertical #btn-item, #app.vertical #btn-pause, #app.vertical #btn-reset {
  box-shadow: 0 8px 0 #1a1a2e, inset 0 -6px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out; /* the snap-back on release */
}
/* pressed: .pressed is set by the touch code (a held finger), :active covers the buttons that have no hold state. Instant, no transition. */
#app.vertical .steer-btn.pressed, #app.vertical #btn-item.pressed, #app.vertical #btn-pause:active, #app.vertical #btn-reset:active,
#app.vertical .steer-btn:active, #app.vertical #btn-item:active {
  transform: translateY(8px);
  box-shadow: 0 0 0 #1a1a2e, inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  filter: brightness(1.1);
  transition: none;
  animation: none; /* the item's ready-glow animation would otherwise keep a shadow on while pressed */
}

/* build 64.37: steering buttons in the HUD bar's deep navy, crisp white arrows (vertical view) */
#app.vertical .steer-btn { background: rgb(20, 24, 60); color: #fff; text-shadow: none; }

/* ============ build 64.39: the vertical view's button style in landscape too (style only: shapes and positions stay) ============ */
.steer-btn, #btn-gas, #btn-brake, #btn-item, #btn-pause, #btn-reset {
  box-shadow: 0 8px 0 #1a1a2e, inset 0 -6px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}
.steer-btn.pressed, #btn-gas.pressed, #btn-brake.pressed, #btn-item.pressed, .steer-btn:active, #btn-gas:active, #btn-brake:active,
#btn-item:active, #btn-pause:active, #btn-reset:active {
  transform: translateY(8px);
  box-shadow: 0 0 0 #1a1a2e, inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  filter: brightness(1.1);
  transition: none;
  animation: none;
}
.steer-btn { background: rgb(20, 24, 60); color: #fff; text-shadow: none; }

/* ============ build 64.40: menus in the vertical view (the overlay is ~390 px wide and tall: stack what landscape puts side by side) ============ */
#app.vertical { --edge-l: max(14px, env(safe-area-inset-left)); --edge-r: max(14px, env(safe-area-inset-right)); }
#app.vertical #overlay { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
#app.vertical .screen { gap: 14px; }
#app.vertical .pick-title { font-size: 28px; }
#app.vertical .btn-row { margin-top: 16px; }

/* Lobby: logo + START on top, the kart in the open middle, RACE SETUP at the bottom */
#app.vertical #overlay.lobby-on {
  background: linear-gradient(180deg, rgba(14, 12, 40, 0.88) 0%, rgba(20, 16, 60, 0.45) 22%, rgba(20, 16, 60, 0.05) 36%,
    rgba(20, 16, 60, 0.05) 52%, rgba(14, 12, 40, 0.6) 64%, rgba(14, 12, 40, 0.85) 100%);
}
#app.vertical .lobby-main { flex-direction: column; align-items: stretch; gap: 8px; }
#app.vertical #overlay .lobby h1 { font-size: 56px; }
#app.vertical #build { margin-top: 6px; }

/* Driver / paint picker: the 3D stage on top, the cards below (scrolling) */
#app.vertical #overlay.stage-on { background: linear-gradient(to bottom, rgba(10, 14, 26, 0.15) 0%, rgba(10, 14, 26, 0.15) 30%, rgba(10, 14, 26, 0.9) 46%, rgba(10, 14, 26, 0.94) 100%); }
#app.vertical #pick-screen.staged { flex-direction: column; }
#app.vertical #pick-screen.staged .pick-stage { flex: 0 0 38%; padding-top: 4px; }
#app.vertical #pick-screen.staged .pick-panel { flex: 1 1 0; width: 100%; }
#app.vertical #pick-screen.staged .pick-driver .driver-art { width: 70px; }
#app.vertical #pick-screen.staged .pick-kart .kart-art { width: 84px; }
/* Track picker: preview on top, compact cards below (see the shared .tracks rules above) */
#app.vertical #pick-screen.tracks { flex-direction: column; }
#app.vertical #pick-screen.tracks .track-preview { display: none; }
#app.vertical #pick-screen.tracks .pick-panel { width: 100%; flex: 1 1 0; }

/* Results: place + stats on top, the standings in the middle, the buttons under them */
#app.vertical #results-screen { flex-direction: column; justify-content: flex-start; padding-top: 6px; overflow-y: auto; gap: 12px; }
#app.vertical #results-screen .side { width: 100%; }
#app.vertical #results-screen .card { flex: 0 0 auto; width: 100%; max-width: 380px; box-sizing: border-box; padding: 8px 10px; }
#app.vertical #results-screen .standings { font-size: 14px; }
#app.vertical #results-screen .btn-row { width: 100%; max-width: 380px; }
#app.vertical #results-screen .btn-row > * { flex: 1 1 0; }
#app.vertical .stats div { min-width: 110px; }

/* Pause */
#app.vertical #pause-screen .btn-primary, #app.vertical #pause-screen .btn-row { width: 100%; max-width: 300px; }
#app.vertical #pause-screen .btn-row > * { flex: 1 1 0; }

/* How to play: columns stacked, no GAS / BRAKE / ROCKET (auto-gas in this view) */
#app.vertical #help-screen { justify-content: flex-start; padding-top: 4px; }
#app.vertical .screen .help-card { flex-direction: column; gap: 12px; max-height: calc(100% - 60px); }
#app.vertical .help-grid.g4 { grid-template-columns: repeat(3, 1fr); }
#app.vertical .tile.ls { display: none; }
#app.vertical .tile small { font-size: 11px; }

#app.vertical #debug-screen { overflow-y: auto; }

/* Hello / keyboard */
#app.vertical #hello-screen { justify-content: flex-start; padding-top: 24px; }


/* build 64.44: hello screen (vertical view): name, then age, stacked; the keyboard; the go button under it */
#app.vertical .hello-form { display: contents; }
#app.vertical #hello-screen { gap: 10px; }
#app.vertical #hello-screen .field { order: 1; width: 100%; max-width: 320px; }
#app.vertical #hello-screen .field input { width: 100%; box-sizing: border-box; text-align: center; }
#app.vertical #hello-error { order: 2; }
#app.vertical #kbd { order: 3; width: 100%; max-width: 380px; }
#app.vertical #kbd .kbd-key { height: 50px; }
#app.vertical #btn-hello { order: 4; align-self: center; width: 100%; max-width: 320px; height: 56px; border-radius: 28px; }


/* build 66.1: second throw button (green shell / banana / bomb): the opposite direction; arrows show which way each throws */
#btn-item-b { position: absolute; pointer-events: auto; font-size: calc(var(--ctl) * 0.34); line-height: 1; color: #3a2a00;
  right: calc(var(--edge-r) + var(--ctl) + 14px); bottom: calc(16px + var(--ctl) * 0.78 + 16px + var(--ctl) * 0.72 + 12px);
  width: calc(var(--ctl) * 0.72); height: calc(var(--ctl) * 0.72); }
#btn-item-b[hidden] { display: none; }
#btn-item[data-dir]:not([data-dir=""])::after { content: attr(data-dir); position: absolute; right: -4px; bottom: -4px; padding: 1px 5px; border-radius: 8px;
  background: #1c2a6b; color: #fff; font-size: 13px; font-weight: 900; }
#app.vertical #btn-item-b { left: calc(50% - var(--ctl) * 0.425); right: auto; bottom: calc(64px + var(--ctl) * 0.85 + 12px); width: calc(var(--ctl) * 0.85); height: calc(var(--ctl) * 0.85); }
#btn-item-b.ready { border-style: solid; border-color: #ffe14a; background: radial-gradient(circle at 35% 30%, #fff6c2, #ffb800); }
#btn-item-b.pressed { transform: scale(0.94); }
/* build 66.2: with two throw buttons both shrink. Portrait: stacked, smaller. Landscape: side by side just above GAS. */
#app.vertical.twothrow #btn-item, #app.vertical.twothrow #btn-item-b { width: calc(var(--ctl) * 0.6); height: calc(var(--ctl) * 0.6); left: calc(50% - var(--ctl) * 0.3); }
#app.vertical.twothrow #btn-item-b { bottom: calc(64px + var(--ctl) * 0.6 + 26px); }
#app:not(.vertical).twothrow #btn-item, #app:not(.vertical).twothrow #btn-item-b { width: calc(var(--ctl) * 0.56); height: calc(var(--ctl) * 0.56);
  bottom: calc(16px + var(--ctl) * 1.3 + 10px); right: calc(var(--edge-r) + var(--ctl) * 1.01 + 8px); } /* 66.4: shifted toward BRAKE */
#app:not(.vertical).twothrow #btn-item-b { right: calc(var(--edge-r) + var(--ctl) * 0.45); font-size: calc(var(--ctl) * 0.26); }
#gore-vig, #gore-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
#gore-vig { background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 40%, rgba(150, 0, 0, 0.75) 100%); }
#gore-flash { background: #fff; }

/* The opening shots and the podium (72.8): no HUD, the name across the bottom */
#cine-title { display: none; position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-weight: 900; font-style: italic; letter-spacing: 1px;
  color: #fff; font-size: clamp(26px, calc(var(--app-h) * 0.09), 44px); text-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 14px rgba(0,0,0,0.35); pointer-events: none; z-index: 5; }
.cine #cine-title { display: block; }
.cine #hud, .cine #controls { opacity: 0; pointer-events: none; }

/* Grand Prix (72.9) */

/* ============ Settings (74.1): big buttons in full rows, grouped. Upright = one column, label over its buttons; sideways = two columns, label beside them, and everything fits without scrolling. Sized by the screen's own width (works rotated). ============ */
#settings-screen { container-type: inline-size; width: 100%; max-width: none; max-height: 100%; justify-content: flex-start; gap: clamp(6px, calc(var(--app-h) * 0.02), 12px); }
.settings-head { position: relative; flex: 0 0 auto; width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.btn-close { position: absolute; right: 0; top: 0; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(20, 24, 60, 0.85); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-close:active { transform: scale(0.94); }
.screen .settings-card { flex: 0 1 auto; min-height: 0; width: 100%; max-width: 900px; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 12px 16px !important; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.set-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.set-group { display: flex; flex-direction: column; gap: 10px; }
.set-group h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 3px; color: #ffe14a; }
.set-row { display: flex; flex-direction: column; gap: 5px; }
.set-row[hidden] { display: none; }
.set-row .setting-label { font-size: 12px; letter-spacing: 1.2px; opacity: 0.8; white-space: nowrap; }
.set-row .track-pick { margin: 0; gap: 6px; }
.set-row .trk { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 4px; border-radius: 12px; font-size: 15px; opacity: 0.85; display: flex; align-items: center; justify-content: center; }
.set-row .trk.on { opacity: 1; }
.set-row .trk .ico { flex: 0 0 auto; }
.set-note { margin: -4px 0 0; font-size: 13px; line-height: 1.3; opacity: 0.8; }
#app.vertical .sideways-only { display: none; }
#app:not(.vertical) .upright-only { display: none; }
@container (min-width: 560px) {
  .screen .settings-card { flex-direction: row; gap: 22px; padding: 10px 18px !important; }
  .set-col { flex: 1 1 0; gap: 10px; }
  .set-group { gap: 6px; }
  .set-row { flex-direction: row; align-items: center; gap: 10px; }
  .set-row .setting-label { flex: 0 0 clamp(72px, 13cqw, 100px); font-size: 11px; letter-spacing: 0.6px; }
  .set-row .track-pick { flex: 1 1 0; min-width: 0; }
  .set-row .trk { min-height: 44px; font-size: clamp(12.5px, 1.9cqw, 14px); padding: 0 2px; }
  .set-row .trk i { margin-right: 3px; }
}

/* ============ Before the race (74.2): Single Race / Grand Prix switch, START by the thumb when upright, RACE! in the pickers, bigger tap targets; checked upright and sideways ============ */
.lobby-top { gap: 8px; }
.lobby-top .chip { min-height: 44px; box-sizing: border-box; }
.lobby-top .btn-help { min-width: 44px; justify-content: center; }
#hello-edit { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pick-actions { display: flex; gap: 10px; justify-content: center; flex: 0 0 auto; }
.pick-actions button { min-height: 48px; padding-top: 0; padding-bottom: 0; font-size: 18px; }
#results-screen .btn-row { flex-wrap: nowrap; gap: 8px; }
#results-screen .btn-row button { padding: 12px 12px; font-size: 15px; }
#results-screen .btn-row button[hidden] { display: none; }
#confetti { z-index: -1; }
#results-screen { position: relative; z-index: 1; }
.pause-tools { display: flex; gap: 10px; margin-top: 12px; }
.pause-tools .btn-small { margin: 0; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 24px; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.pause-tools .btn-small .ico { width: 22px; height: 22px; margin: 0; vertical-align: 0; }
.pause-tools .btn-debug { font-size: 13px; }
.pause-tools .btn-small[hidden] { display: none; }
/* How to play: X in the corner like Settings; sideways, controls and items take turns on the card and the text is bigger */
.help-head { position: relative; min-height: 48px; justify-content: center; padding: 0; flex: 0 0 auto; }
.help-tabs { flex: 0 0 auto; margin: 0; }
.help-tabs .trk { min-height: 44px; min-width: 110px; padding: 0 14px; font-size: 14px; }
#app.vertical .help-tabs { display: none; }
#app:not(.vertical) .help-card.show-controls .help-items, #app:not(.vertical) .help-card.show-items .help-controls { display: none; }
#app:not(.vertical) .help-col h3 { display: none; }
#app:not(.vertical) .help-col { flex: 1 1 0; }
#app:not(.vertical) .help-grid { grid-template-columns: repeat(5, 1fr); gap: 8px 6px; }
#app:not(.vertical) .tile b { font-size: 13px; }
#app:not(.vertical) .tile small { font-size: 12px; }
.tile small.up { display: none; }
#app.vertical .tile small.ls { display: none; }
#app.vertical .tile small.up { display: inline; }
.hi-triple { position: relative; }
.hi-triple em { position: absolute; right: -6px; bottom: -3px; font-style: normal; font-size: 12px; font-weight: 900; color: #ffe14a; text-shadow: 0 1px 2px #000; }
.hs-bomb { background: radial-gradient(circle at 35% 30%, #6a6a78, #16161e); box-shadow: 6px -11px 0 -5px #ff9a2a; }
/* Sideways: everything in the pickers fits without scrolling */
#app:not(.vertical) #pick-screen.tracks .pick-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
#app:not(.vertical) #pick-screen.tracks .pick-card { padding: 4px 6px 4px 4px; column-gap: 6px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
#app:not(.vertical) #pick-screen.tracks .pick-card .track-art { width: 48px; }
#app:not(.vertical) #pick-screen.tracks .pick-card b { font-size: 13px; }
#app:not(.vertical) #pick-screen.tracks .pick-card b .ico { width: 14px; height: 14px; }
#app:not(.vertical) #pick-screen.tracks .pick-card small { font-size: 10px; }
#app:not(.vertical) #pick-screen.tracks .track-preview { flex-basis: 38%; }
#app:not(.vertical) #pick-screen.staged .pick-driver .pick-grid,
#app:not(.vertical) #pick-screen.staged .pick-kart .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#app:not(.vertical) #pick-screen.staged .pick-driver .driver-art { width: clamp(46px, calc(var(--app-h) * 0.17), 72px); }
#app:not(.vertical) #pick-screen.staged .pick-kart .kart-art { width: clamp(56px, calc(var(--app-h) * 0.18), 84px); }
#app.vertical .lobby-top .btn-settings { font-size: 0; min-width: 44px; justify-content: center; padding: 0 10px; }
#app.vertical .lobby-top .btn-settings .ico { width: 20px; height: 20px; margin: 0; }
#results-screen .btn-row button { min-height: 46px; padding-top: 0; padding-bottom: 0; }
.pause-tools i { display: flex; }

/* ============ Home (74.6): logo, the kart, then the switch, one line of info, three equal tiles and START. Every box has a fixed size, so nothing moves between Single Race and Grand Prix. ============ */
.cta-go { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.mode-pick { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(10, 12, 36, 0.78); box-sizing: border-box; }
.mode-btn { flex: 1 1 0; min-height: 44px; padding: 0 6px; border-radius: 12px; border: 0; background: transparent; color: #fff; opacity: 0.8; font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.mode-btn.on { opacity: 1; background: #ffe14a; color: #3a1d00; }
.pick-tabs { flex: 0 0 auto; width: min(100%, 280px); }
.pick-tabs[hidden] { display: none; }
.mode-info { margin: 0; height: 20px; line-height: 20px; text-align: center; white-space: nowrap; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.mode-info b { color: #ffe14a; }
.btn-start { width: 100%; box-sizing: border-box; padding: 0 6px; min-height: 62px; font-size: 25px; }
.screen .setup { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.setup-tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; height: 124px; padding: 7px 5px 8px; min-width: 0; border-radius: 16px; background: rgba(14, 16, 44, 0.86); border: 2px solid rgba(255, 255, 255, 0.14); color: #fff; text-align: center !important; }
.setup-tile[hidden] { display: none; }
button.setup-tile:active { transform: translateY(2px); background: rgba(40, 44, 90, 0.9); }
.setup-tile small { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; opacity: 0.65; }
.setup-tile .pick-art { flex: 0 0 auto; width: 100%; height: 58px; display: flex; align-items: center; justify-content: center; }
.setup-tile .pick-art svg { width: auto; height: 100%; max-width: 100%; }
.setup-tile b { font-size: 14px; font-weight: 900; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cup-maps { flex-wrap: wrap; gap: 3px; align-content: center; }
.cup-map { display: block; width: 26px; } /* 3 x 3 fits the art's fixed height */
.cup-map .track-art { display: block; width: 100%; height: auto; border-radius: 4px; }
/* Upright: the kart in the open middle, everything you touch at the bottom, START last */
#app.vertical #overlay .lobby h1 { font-size: 50px; }
#app.vertical .lobby-cta, #app.vertical .cta-go { display: contents; }
#app.vertical .lobby-main { gap: 8px; }
#app.vertical .lobby-main h1 { order: 0; text-align: center; margin: 0; }
#app.vertical .lobby-stage { order: 1; flex: 1 1 0; min-height: 0; }
#app.vertical .mode-pick { order: 2; }
#app.vertical .pick-tabs { order: 0; }
#app.vertical .mode-info { order: 3; }
#app.vertical .screen .setup { order: 4; }
#app.vertical .btn-start { order: 5; margin-top: 4px; }
/* Sideways: logo and START under the left thumb, the tiles under the right, the kart between */
#app:not(.vertical) .lobby-cta { flex: 0 0 auto; width: 232px; }
#app:not(.vertical) #overlay .lobby h1 { font-size: clamp(34px, calc(var(--app-h) * 0.115), 56px); margin-bottom: 6px; }
#app:not(.vertical) .cta-go { gap: 6px; }
#app:not(.vertical) .mode-btn { font-size: 14px; }
#app:not(.vertical) .mode-info { font-size: 12px; }
#app:not(.vertical) .btn-start { font-size: 18px; min-height: 54px; }
/* ...the tiles in a slim column at the right edge (74.8, user: a better spotlight for the racer): picture left, label and name right */
#app:not(.vertical) .screen .setup { width: 184px; grid-template-columns: minmax(0, 1fr); gap: 7px; align-self: center; }
#app:not(.vertical) .setup-tile:not([hidden]) { display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; justify-items: start; height: clamp(72px, calc((var(--app-h) - 104px) / 3), 92px); padding: 5px 8px 5px 5px; text-align: left !important; }
#app:not(.vertical) .setup-tile .pick-art { grid-row: 1 / 3; grid-column: 1; width: 68px; height: 100%; min-height: 0; }
#app:not(.vertical) .setup-tile small { grid-column: 2; align-self: end; }
#app:not(.vertical) .setup-tile b { grid-column: 2; align-self: start; font-size: 13px; }
#app.vertical .lobby-main { padding-bottom: 14px; box-sizing: border-box; }