:root {
  --bg: #0a0c11;
  --panel: #141821;
  --line: #2a3341;
  --ink: #f6f7fa;
  --muted: #aeb8c8;
  --acid: #d6fa50;
  --cyan: #71e4f4;
}

body { background: radial-gradient(ellipse at 50% 0, #192332, var(--bg) 36rem); }
header { background: #0d1018; }
.mode::before, .dot { border-radius: 50%; }
.heading { align-items: center; }
.heading h1 { color: var(--ink); }
.race-actions { max-width: none; flex-wrap: nowrap; }
.reset {
  border-radius: 8px;
  background: #171e2a;
  color: var(--ink);
  font-weight: 650;
}
.reset:disabled { opacity: .52; cursor: default; }

.stats {
  border: 0;
  border-radius: 13px 13px 0 0;
  background: #141b26;
  box-shadow: inset 0 0 0 1px var(--line);
}
.stat { padding-block: 10px; border-color: #283244; }
.label { font-size: 10px; font-weight: 650; }
#speed { color: var(--cyan); }
.stage {
  border-color: var(--line);
  border-radius: 0 0 13px 13px;
  background: #0a0c12;
}
.overlay { background: linear-gradient(180deg,#0b101743,#090c16c9); }
.card {
  width: min(370px, calc(100% - 24px));
  padding: clamp(12px, 2.5vw, 24px);
  border: 1px solid #3c4d63;
  border-radius: 15px;
  background: linear-gradient(145deg,#1b2433,#10151ff7 70%);
  box-shadow: 0 14px 34px #05070a9c;
}
.card h2 { font-size: clamp(23px, 4vw, 36px); }
.card p { margin: 5px 0 12px; }
.race-options { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.garage {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}
select, input:not([type="checkbox"]) {
  border: 1px solid #3a475b;
  border-radius: 8px;
  background: #0e1420;
  color: var(--ink);
}
.start {
  border-radius: 8px;
  min-height: 44px;
  background: linear-gradient(135deg,#e4ff71,#bfeb37);
}
.start:hover { background: #ecff9d; }
.count { text-shadow: 0 3px 28px #111, 0 0 16px #d6fa505c; }

.side {
  border-radius: 13px;
  background: #121923;
  overflow: hidden;
}
.side h2 { padding-inline-start: 14px; color: #e8f1ff; }
.row.me { background: #26321b; }
.row:last-child { border-bottom: 0; }

.touch { align-items: stretch; gap: 12px; padding-block-start: 10px; }
.touch div { gap: 8px; }
.touch .pedals { justify-content: flex-end; }
.touch button {
  display: grid;
  place-items: center;
  min-width: 50px;
  min-height: 56px;
  padding: 0 10px;
  border: 1px solid #415470;
  border-radius: 11px;
  background: linear-gradient(160deg,#29374a,#131c29);
  box-shadow: inset 0 -3px #0a0e175c;
}
.touch button[data-key="down"] {
  background: linear-gradient(155deg,#542b40,#2d1828);
  border-color: #985675;
  color: #ffe6ef;
}
.touch button[data-key="up"] {
  padding-inline: 10px;
  background: linear-gradient(145deg,#e7ff7b,#a7d62e);
  border-color: #dbff72;
  color: #121805;
}
.touch button.pressed {
  background: #f5fbff;
  color: #0b111a;
  border-color: #fff;
  box-shadow: inset 0 3px 6px #131b344a;
}
.steer-arrow {
  display: block;
  width: 11px;
  height: 11px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateX(2px) rotate(135deg);
}
[data-key="right"] .steer-arrow { transform: translateX(-2px) rotate(-45deg); }
.tilt-controls button[aria-pressed="true"] { border-color: var(--cyan); }

#builder, #multiplayer {
  border: 1px solid #3b4b63;
  border-radius: 15px;
  background: linear-gradient(150deg,#1b2433,#10151f 70%);
  box-shadow: 0 18px 72px #05080eaa;
}
#blueprint { border-radius: 8px; }

@media (max-width: 520px) {
  .heading { display: grid; gap: 8px; }
  .race-actions { justify-content: flex-start; }
  .race-actions button { min-height: 36px; padding-inline: 10px; }
  .stat { padding-block: 7px; }
}
@media (orientation: landscape) and (max-width: 1050px) and (max-height: 540px) {
  .stat { padding-block: 3px; }
  .card { padding: 8px 12px; }
  .card h2 { font-size: 20px; }
  .card p { margin: 3px 0 5px; }
  .card .garage { margin-bottom: 5px; gap: 2px; }
  .card select { min-height: 26px; padding-block: 2px; }
  .card .start { min-height: 32px; }
  .touch { padding-block-start: 6px; }
  .touch button { min-height: 46px; }
  .bar { min-height: 28px; }
  .brand img { width: 94px; }
  .stage canvas { max-height: max(110px, calc(100dvh - 218px)); }
  .tilt-controls button { min-height: 36px; }
}

/* A wider driving view with thumb controls outside the picture. */
@media (orientation: landscape) and (min-width: 570px) and (max-width: 1050px) and (max-height: 540px) {
  .arena-landscape .layout {
    width: min(100%, calc((100dvh - 150px) * 16 / 9 + 350px));
    grid-template-columns: minmax(0, 1fr) 142px;
  }
  .arena-landscape .race {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) 96px;
    column-gap: 8px;
  }
  .arena-landscape .wrap {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .arena-landscape .side h2 { font-size: 15px; }
  .arena-landscape .stats { grid-area: 1 / 2; }
  .arena-landscape .stage { grid-area: 2 / 2; }
  .arena-landscape .stage canvas {
    max-height: max(110px, calc(100dvh - 150px));
  }
  .arena-landscape .touch { display: contents; }
  .arena-landscape .steering,
  .arena-landscape .pedals {
    align-self: end;
    display: grid;
    gap: 6px;
  }
  .arena-landscape .steering {
    grid-area: 2 / 1;
    grid-template-columns: 1fr 1fr;
  }
  .arena-landscape .pedals {
    grid-area: 2 / 3;
    grid-template-columns: 1fr;
  }
  .arena-landscape .touch button {
    min-width: 0;
    min-height: 48px;
    padding-inline: 5px;
  }
  .arena-landscape .tilt-controls { grid-column: 2; }
}
@media (orientation: landscape) and (min-width: 570px) and (max-width: 759px) and (max-height: 540px) {
  .arena-landscape .layout {
    width: min(100%, calc((100dvh - 150px) * 16 / 9 + 206px));
    grid-template-columns: minmax(0, 1fr);
  }
  .arena-landscape .board { display: grid; }
}