/* Main menu: garage, circular paint selection and explicit run actions. */
#garage-vehicle { width: 75.9%; }
.turntable {
  background: radial-gradient(circle at 50% 42%, #293437 0, #172023 55%, #101719 69%, transparent 70%);
  box-shadow: none;
}
.turntable::after { inset: 8%; border: 1px solid #ffffff18; box-shadow: 0 20px 35px #0005; }
.turntable .car-lock {
  position: absolute; z-index: 4; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18%; border-radius: 50%; text-align: center;
  background: radial-gradient(circle, #081014e8 0, #081014a6 42%, transparent 70%);
  color: #f5deaa; font: 700 clamp(11px, 1.4vw, 16px)/1.5 DM, sans-serif;
  text-shadow: 0 2px 6px #000; pointer-events: none;
}
.turntable .car-lock[hidden] { display: none; }
#garage-vehicle.locked { filter: grayscale(1) brightness(.3) blur(1px); }
.paint-picker .swatches { overflow: hidden; touch-action: pan-y; scroll-snap-type: none; }
.mode-card { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); --mode-accent: #a7e967; }
.mode-card[data-mode="standard"] { --mode-accent: #75baff; }
.mode-card[data-mode="home"] { --mode-accent: #c7a1ff; }
.mode-card[data-mode="pursuit"] { --mode-accent: #ff8c8c; }
.mode-card[data-mode="live"] { --mode-accent: #ffc23d; }
.mode-card.has-continue { grid-template-columns: minmax(0, 1fr) 90px; gap: 6px; }
.mode-card .menu-item.menu-mode {
  min-width: 0; width: 100%; margin: 0; padding: 10px 16px;
  transform: none; clip-path: none; border-left: 3px solid var(--mode-accent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--mode-accent) 17%, #10171b), #10171bc9);
  box-shadow: none; color: #f1f5f6; align-items: flex-start; text-align: left;
}
.mode-card .menu-item.menu-mode span { color: var(--mode-accent); font-size: 28px; }
.mode-card .menu-item.menu-mode small { color: #c4ced1; font-size: 11px; line-height: 1.4; white-space: normal; }
.mode-card .menu-item.menu-mode span::after, .mode-card .menu-item.menu-mode::after { content: none; }
.mode-card .mi-action { display: block; color: var(--mode-accent); font: 800 9px/1.2 DM,sans-serif; letter-spacing: 1.6px; margin-bottom: 5px; }
.mode-card .menu-item.menu-main { background: linear-gradient(100deg, color-mix(in srgb, var(--mode-accent) 29%, #10171b), #162126ee); }
.mode-card .mi-new {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px; border: 1px solid color-mix(in srgb, var(--mode-accent) 48%, transparent);
  border-radius: 4px; color: var(--mode-accent); background: #10171be6;
  font: 800 11px/1.4 DM,sans-serif; letter-spacing: .6px; text-align: center;
  cursor: pointer;
}
.mode-card .mi-new[hidden] { display: none; }
.mode-card .menu-item.menu-mode:hover:not(:disabled), .mode-card .mi-new:hover:not(:disabled) { background: color-mix(in srgb, var(--mode-accent) 25%, #10171b); }
.mode-card .menu-item.menu-mode:focus-visible, .mode-card .mi-new:focus-visible { outline: 2px solid var(--mode-accent); outline-offset: 2px; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 550px) {
  .mode-card .menu-item.menu-mode { padding: 7px 12px; }
  .mode-card .menu-item.menu-mode span { font-size: 22px; }
  .mode-card .menu-item.menu-mode small { font-size: 10px; }
  .mode-card.has-continue { grid-template-columns: minmax(0, 1fr) 76px; }
  .mode-card .mi-new { padding: 8px; font-size: 10px; }
  .mode-card .mi-action { font-size: 8px; margin-bottom: 3px; }
}