/* Loaded after the generated-art theme; desktop layout stays in its original sheets. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.racing { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.race-screen { height: 100vh; height: 100dvh; overflow: hidden; }
#race-canvas { width: 100%; height: 100%; touch-action: none; }
.menu-backdrop {
  position: fixed; inset: 0; z-index: 29; padding: 0; margin: 0;
  border: 0; background: #020c1dcc; backdrop-filter: blur(3px);
  cursor: default; transform: none !important; filter: none !important;
}
.menu-backdrop[hidden], .race-pause-overlay[hidden] { display: none !important; }
body.nav-open { overflow: hidden; }
/* A single floating gear action leaves the water available for drag steering. */
.touch-controls {
  display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 15;
  align-items: end; justify-content: flex-end; gap: 0;
  padding: 10px max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.touch-controls .touch-gear-large {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 88px; gap: 5px; width: 88px; height: 88px; min-width: 84px; min-height: 84px; max-width: none;
  margin: 0; padding: 7px 4px; border: 9px solid transparent;
  border-image: url('/public/assets/ui/button-frame.png') 240 240 240 240 fill stretch;
  border-radius: 0; background: transparent; color: #fff0c3;
  font-size: 28px; line-height: 1; font-weight: 800;
  touch-action: none; pointer-events: auto; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; transform: none;
  box-shadow: 0 5px 17px #0009; backdrop-filter: none;
}
.touch-gear-large > span { display: grid; place-items: center; line-height: 1; }
.touch-gear-large .game-icon, .touch-gear-large .icon { width: 31px; height: 31px; }
.touch-gear-large > small { font: 800 9px var(--body); line-height: 1.25; letter-spacing: .4px; text-align: center; }
.touch-gear-large > b { position: absolute; top: -11px; right: -10px; min-width: 26px; min-height: 26px; display: grid; place-items: center; padding: 3px; border: 1px solid #ecc680; border-radius: 50%; background: #082539; color: #ffe4a6; font: 800 13px var(--body); }
.touch-gear-large > b:empty { display: none; }
.touch-controls .touch-gear-large:active, .touch-controls .touch-gear-large[aria-pressed="true"] { filter: brightness(1.3); box-shadow: 0 0 20px #f6d18877; transform: none; }
.touch-controls .touch-gear-large:disabled { opacity: .5; filter: saturate(.4); box-shadow: none; }
.touch-hint {
  position: absolute; left: 50%; bottom: max(28px, var(--safe-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 208px - var(--safe-left) - var(--safe-right)); margin: 0;
  text-align: center; color: #f5e3ba; font: 800 9px var(--body); line-height: 1.6;
  letter-spacing: .5px; text-shadow: 0 2px 4px #001b2b;
}
.touch-hint > span { font-size: 8px; font-weight: 500; letter-spacing: .1px; color: #d3e3dd; }
.drag-helm {
  --helm-radius: 104px; --helm-x: 0px; --helm-y: 0px; --helm-angle: 0rad; --helm-distance: 0px;
  --helm-color: #b8e8df; position: fixed; z-index: 10; width: 0; height: 0;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.drag-helm[hidden] { display: none !important; }
.helm-ring {
  position: absolute; left: 0; top: 0; width: calc(var(--helm-radius) + var(--helm-radius));
  height: calc(var(--helm-radius) + var(--helm-radius)); transform: translate(-50%, -50%);
  border: 2px solid var(--helm-color); border-radius: 50%; opacity: .62;
  background: radial-gradient(circle, #07304a05 35%, #07304a30 72%, #aadcc929);
  box-shadow: 0 0 0 5px #062e4329, inset 0 0 25px #93e6db1a;
}
.helm-ring::before, .helm-ring::after { content: ''; position: absolute; background: var(--helm-color); opacity: .4; }
.helm-ring::before { width: 1px; height: 16px; left: 50%; top: calc(50% - 8px); }
.helm-ring::after { height: 1px; width: 16px; top: 50%; left: calc(50% - 8px); }
.helm-guide { position: absolute; left: 0; top: -1px; width: var(--helm-distance); height: 2px; background: linear-gradient(90deg, #b8e8df33, var(--helm-color)); transform: rotate(var(--helm-angle)); transform-origin: 0 50%; }
.helm-stick {
  position: absolute; left: var(--helm-x); top: var(--helm-y); width: 44px; height: 44px;
  transform: translate(-50%, -50%); border: 2px solid var(--helm-color); border-radius: 50%;
  background: #0c3e55b3; box-shadow: inset 0 0 0 5px #b8e8df29, 0 2px 12px #001c3299;
}
.helm-status {
  position: absolute; left: 0; top: calc(0px - var(--helm-radius) - 27px); transform: translateX(-50%);
  width: max-content; padding: 5px 8px; border: 1px solid #b8e8df66; border-radius: 3px;
  color: #e7fff7; background: #06304ac9; font: 800 9px var(--body); line-height: 1.2; letter-spacing: .5px;
}
.drag-helm.boosting { --helm-color: #ffe096; }
.drag-helm.boosting .helm-ring { opacity: .85; box-shadow: 0 0 17px #ffe09644, inset 0 0 28px #ffe09620; }
.drag-helm.boosting .helm-stick { background: #766029c7; }
.drag-helm.boosting .helm-status { border-color: #ffe09699; color: #ffe9b2; }
.touch-help { display: none; padding: 16px; margin: 18px 0; background: #071c2ed9; border: 1px solid #b49a6266; border-radius: 4px; }
.touch-help > strong { color: #f2d08b; font-size: 10px; letter-spacing: 1px; }
.touch-help p { font-size: 12px; line-height: 1.7; color: #d3e0df; margin-top: 9px; }
.race-wind .race-wind-readout { display: grid; gap: 2px; text-align: center; line-height: 1; }
.race-wind-readout > b { font: inherit; font-weight: 800; }
.race-wind-readout > small { font-size: 6px; letter-spacing: .3px; color: #d6ded8; }
.race-wind.is-gusting { filter: brightness(1.17); }
.race-wind.is-gusting .race-wind-readout > small { color: #ffe09a; }
.race-pause-overlay {
  position: absolute; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) max(14px, var(--safe-bottom)) max(14px, var(--safe-left));
  background: #021020c9; backdrop-filter: blur(5px); overflow: auto; overscroll-behavior: contain;
}
.race-pause-card {
  width: min(400px, 100%); max-height: calc(100dvh - 28px - var(--safe-top) - var(--safe-bottom));
  overflow: auto; overscroll-behavior: contain; padding: 25px 20px; text-align: center; color: #fff0c3;
  border: 20px solid transparent;
  border-image: url('/public/assets/ui/panel-frame.png') 190 170 220 170 fill stretch;
  background: transparent; box-shadow: 0 12px 50px #000b;
}
.race-pause-card .eyebrow { color: #edcc88; font-size: 10px; }
.race-pause-card h2 { font: 800 clamp(27px, 5vw, 38px) var(--condensed); line-height: 1; margin: 13px 0; }
.race-pause-card p { font-size: 12px; line-height: 1.6; color: #cbdcd9; margin-bottom: 20px; }
.race-pause-card button { width: 100%; min-height: 50px; margin-top: 10px; font-size: 11px; white-space: normal; }
:where(.touch-device) .race-screen { --touch-bottom: max(12px, var(--safe-bottom)); --touch-gear-size: 88px; --touch-hud-height: 88px; }
:where(.touch-device) .race-top-hud { display: grid; grid-template-columns: minmax(0, 1fr) 68px 44px 44px; grid-template-rows: auto auto; gap: 6px; top: max(8px, var(--safe-top)); left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right)); align-items: center; z-index: 12; }
:where(.touch-device) .race-brand, :where(.touch-device) .race-key-hint { display: none; }
:where(.touch-device) .race-track-name { grid-column: 1; grid-row: 1; width: auto; min-width: 0; border: 0; padding: 0; font-size: 23px; line-height: 1.05; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:where(.touch-device) .race-track-name > span { font-size: 9px; line-height: 1.3; letter-spacing: .25px; overflow: hidden; text-overflow: ellipsis; }
:where(.touch-device) .race-track-name > span:last-child { display: none; }
:where(.touch-device) .race-wind { position: static; grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 4px; width: 68px; min-width: 0; min-height: 44px; margin: 0; border-width: 6px; padding: 3px; font-size: 10px; white-space: nowrap; }
:where(.touch-device) .race-wind > :first-child { display: none; }
:where(.touch-device) .race-wind > i { display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0; flex: 0 0 15px; }
:where(.touch-device) .race-wind > i .game-icon, :where(.touch-device) .race-wind > i .icon { width: 15px; height: 15px; }
:where(.touch-device) .race-progress { grid-column: 1 / -1; grid-row: 2; order: 0; margin: 0; width: auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 12px; justify-content: stretch; border-width: 7px; padding: 5px 10px; }
:where(.touch-device) .race-progress > span { min-width: 0; font-size: 8px; letter-spacing: .6px; line-height: 1.2; }
:where(.touch-device) .race-progress strong { margin-top: 3px; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
:where(.touch-device) .race-progress strong > small { font-size: 13px; }
:where(.touch-device) .race-icon-button { grid-row: 1; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 2px; border-width: 7px; touch-action: manipulation; }
:where(.touch-device) .race-icon-button + .race-icon-button { margin-left: 0; }
:where(.touch-device) #race-pause { grid-column: 3; }
:where(.touch-device) #race-quit { grid-column: 4; }
:where(.touch-device) .race-bottom-hud { display: grid; grid-template-columns: 56px minmax(64px, .85fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 5px; left: max(12px, var(--safe-left)); right: calc(max(12px, var(--safe-right)) + var(--touch-gear-size) + 6px); width: auto; height: var(--touch-hud-height); bottom: var(--touch-bottom); transform: none; z-index: 11; }
:where(.touch-device) .race-speed { position: static; grid-row: auto; grid-column: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 5px 4px; border-width: 6px; }
:where(.touch-device) .race-speed > strong { font-size: 32px; line-height: .95; }
:where(.touch-device) .race-speed > span { margin: 0; font-size: 8px; letter-spacing: .6px; }
:where(.touch-device) .race-speed > small { width: 100%; margin: 1px 0 0; font-size: 7px; line-height: 1.3; text-align: center; white-space: normal; letter-spacing: .1px; }
:where(.touch-device) .race-meter-group { grid-row: auto; grid-column: auto; min-width: 0; width: auto; max-width: none; justify-content: center; gap: 6px; border-width: 6px; padding: 5px; }
:where(.touch-device) .race-meter-group > div > span { font-size: 8px; letter-spacing: .2px; gap: 4px; }
:where(.touch-device) .race-meter-group .game-icon, :where(.touch-device) .race-meter-group .icon { width: 13px; height: 13px; }
:where(.touch-device) .race-meter-group small, :where(.touch-device) .race-gear kbd { display: none; }
:where(.touch-device) .race-meter { height: 6px; margin-top: 5px; }
:where(.touch-device) .race-gear { position: static; grid-row: auto; grid-column: auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; width: auto; padding: 4px 5px; border-width: 6px; background: transparent; overflow: hidden; }
:where(.touch-device) .race-gear > span { display: none; }
:where(.touch-device) .race-gear > strong { margin: 0; font-size: 14px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
:where(.touch-device) .race-gear > small { margin: 0; max-width: none; font-size: 8px; line-height: 1.3; letter-spacing: .1px; overflow-wrap: anywhere; }
:where(.touch-device) .race-gear > #hud-sail { font-size: 8px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
:where(.touch-device) .race-gear > #hud-sail:empty { display: none; }
:where(.touch-device) .race-gear > #hud-gate { text-align: left; font-size: 9px; letter-spacing: .4px; }
:where(.touch-device) .race-gear > #hud-pickup { display: none; }

:where(.touch-device) .touch-controls { display: flex; left: 0; right: 0; bottom: 0; padding: 0 max(12px, var(--safe-right)) var(--touch-bottom) max(12px, var(--safe-left)); }
:where(.touch-device) .touch-hint { display: none; }
:where(.touch-device) .touch-help { display: block; }
:where(.touch-device) .keyboard-controls, :where(.touch-device) .stage-control-hint { display: none; }


@media (pointer: coarse), (any-pointer: coarse), (max-width: 900px), (max-width: 1000px) and (max-height: 500px) {

.race-screen { --touch-bottom: max(12px, var(--safe-bottom)); --touch-gear-size: 88px; --touch-hud-height: 88px; }
.race-top-hud { display: grid; grid-template-columns: minmax(0, 1fr) 68px 44px 44px; grid-template-rows: auto auto; gap: 6px; top: max(8px, var(--safe-top)); left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right)); align-items: center; z-index: 12; }
.race-brand, .race-key-hint { display: none; }
.race-track-name { grid-column: 1; grid-row: 1; width: auto; min-width: 0; border: 0; padding: 0; font-size: 23px; line-height: 1.05; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.race-track-name > span { font-size: 9px; line-height: 1.3; letter-spacing: .25px; overflow: hidden; text-overflow: ellipsis; }
.race-track-name > span:last-child { display: none; }
.race-wind { position: static; grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 4px; width: 68px; min-width: 0; min-height: 44px; margin: 0; border-width: 6px; padding: 3px; font-size: 10px; white-space: nowrap; }
.race-wind > :first-child { display: none; }
.race-wind > i { display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0; flex: 0 0 15px; }
.race-wind > i .game-icon, .race-wind > i .icon { width: 15px; height: 15px; }
.race-progress { grid-column: 1 / -1; grid-row: 2; order: 0; margin: 0; width: auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 12px; justify-content: stretch; border-width: 7px; padding: 5px 10px; }
.race-progress > span { min-width: 0; font-size: 8px; letter-spacing: .6px; line-height: 1.2; }
.race-progress strong { margin-top: 3px; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.race-progress strong > small { font-size: 13px; }
.race-icon-button { grid-row: 1; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 2px; border-width: 7px; touch-action: manipulation; }
.race-icon-button + .race-icon-button { margin-left: 0; }
#race-pause { grid-column: 3; }
#race-quit { grid-column: 4; }
.race-bottom-hud { display: grid; grid-template-columns: 56px minmax(64px, .85fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 5px; left: max(12px, var(--safe-left)); right: calc(max(12px, var(--safe-right)) + var(--touch-gear-size) + 6px); width: auto; height: var(--touch-hud-height); bottom: var(--touch-bottom); transform: none; z-index: 11; }
.race-speed { position: static; grid-row: auto; grid-column: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 5px 4px; border-width: 6px; }
.race-speed > strong { font-size: 32px; line-height: .95; }
.race-speed > span { margin: 0; font-size: 8px; letter-spacing: .6px; }
.race-speed > small { width: 100%; margin: 1px 0 0; font-size: 7px; line-height: 1.3; text-align: center; white-space: normal; letter-spacing: .1px; }
.race-meter-group { grid-row: auto; grid-column: auto; min-width: 0; width: auto; max-width: none; justify-content: center; gap: 6px; border-width: 6px; padding: 5px; }
.race-meter-group > div > span { font-size: 8px; letter-spacing: .2px; gap: 4px; }
.race-meter-group .game-icon, .race-meter-group .icon { width: 13px; height: 13px; }
.race-meter-group small, .race-gear kbd { display: none; }
.race-meter { height: 6px; margin-top: 5px; }
.race-gear { position: static; grid-row: auto; grid-column: auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; width: auto; padding: 4px 5px; border-width: 6px; background: transparent; overflow: hidden; }
.race-gear > span { display: none; }
.race-gear > strong { margin: 0; font-size: 14px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.race-gear > small { margin: 0; max-width: none; font-size: 8px; line-height: 1.3; letter-spacing: .1px; overflow-wrap: anywhere; }
.race-gear > #hud-sail { font-size: 8px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
.race-gear > #hud-sail:empty { display: none; }
.race-gear > #hud-gate { text-align: left; font-size: 9px; letter-spacing: .4px; }
.race-gear > #hud-pickup { display: none; }

.touch-controls { display: flex; left: 0; right: 0; bottom: 0; padding: 0 max(12px, var(--safe-right)) var(--touch-bottom) max(12px, var(--safe-left)); }
.touch-hint { display: none; }
.touch-help { display: block; }
.keyboard-controls, .stage-control-hint { display: none; }

  button:hover:not(:disabled) { transform: none; }
  .primary-button, .dark-button, .outline-button, .equipped-button, .shop-buy, .trial-refits, .stage-tabs button, .fleet-filters button, .text-link, .icon-button, .modal-close { min-height: 44px; }
  .icon-button, .modal-close { min-width: 44px; width: 44px; height: 44px; }
}
@media (max-width: 900px), (max-width: 1000px) and (max-height: 500px) {
  body { overflow-x: hidden; background-attachment: scroll; }
  .workspace { margin-left: 0; min-height: 100dvh; }
  .sidebar {
    top: max(8px, var(--safe-top)); bottom: max(8px, var(--safe-bottom)); left: max(8px, var(--safe-left));
    width: min(288px, calc(100vw - 64px)); border-width: 18px; padding: 0 5px 12px;
    z-index: 30; transform: translateX(calc(-100% - 32px - var(--safe-left)));
    visibility: hidden; pointer-events: none; overflow-y: auto; overscroll-behavior: contain;
    transition: transform .2s ease, visibility .2s;
  }
  .sidebar.mobile-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .sidebar .brand { height: 98px; justify-content: center; padding: 0; }
  .sidebar .game-logo { width: 175px; max-height: 110px; }
  .sidebar .side-label { display: block; font-size: 9px; margin: 0 8px 10px; }
  .sidebar nav { gap: 5px; }
  .sidebar .nav-item { min-height: 48px; margin-bottom: 0; padding: 7px 9px; border-width: 7px; gap: 8px; font-size: 12px; justify-content: flex-start; }
  .sidebar .nav-item > span, .sidebar .nav-item > small { display: inline-block; }
  .sidebar .nav-item .game-icon, .sidebar .nav-item .icon { width: 23px; height: 23px; }
  .sidebar .sidebar-bottom { margin-top: 24px; padding-top: 0; }
  .sidebar .league-card { display: flex; padding: 12px; }
  .sidebar .side-status { font-size: 8px; }
  .mobile-menu { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; margin: 0; }
  .topbar { min-height: 70px; height: auto; margin: max(8px, var(--safe-top)) max(8px, var(--safe-right)) 0 max(8px, var(--safe-left)); border-width: 11px; padding: 3px 5px; gap: 4px; }
  .topbar .breadcrumb, .topbar-separator, .driver-avatar { display: none; }
  .topbar-actions { min-width: 0; width: auto; margin-left: auto; gap: 4px; }
  .topbar-actions > .icon-button[data-action] { display: flex; padding: 9px; align-items: center; justify-content: center; min-width: 44px; width: 44px; height: 44px; }
  .topbar-actions .icon-button .game-icon, .topbar-actions .icon-button .icon { width: 21px; height: 21px; }
  .cheat-toggle { min-height: 44px; padding: 3px 5px; border-width: 6px; gap: 4px; font-size: 8px; letter-spacing: 0; }
  .cheat-toggle b { font-size: 10px; }
  .credit-balance { min-width: 0; gap: 4px; }
  .credit-balance > strong { font-size: 21px; white-space: nowrap; }
  .credit-balance > span { display: none; }
  main { padding: 19px max(14px, var(--safe-right)) 28px max(14px, var(--safe-left)); max-width: 100%; }
  .page-heading { flex-wrap: wrap; gap: 12px; align-items: start; }
  .page-heading h1 { font-size: clamp(32px, 5vw, 40px); }
  .page-heading p { font-size: 12px; line-height: 1.6; }
  .season-badge { white-space: normal; margin-top: 0; font-size: 9px; }
  .sandbox-banner { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 12px; font-size: 11px; line-height: 1.5; }
  .sandbox-banner > span { font-size: 9px; }
  .sandbox-banner > button { min-height: 44px; padding: 8px; margin-left: auto; font-size: 10px; }
  .deck-hero-grid, .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .tracks-grid, .all-tracks, .pod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .track-card, .garage-card { min-width: 0; }
  .track-body p { font-size: 11px; line-height: 1.5; }
  .garage-card > p, .boat-characteristics > p { font-size: 11px; line-height: 1.6; }
  .boat-characteristics { min-height: 0; }
  .garage-card > button { min-height: 48px; font-size: 10px; white-space: normal; }
  .fleet-filters { display: flex; min-width: 0; flex: 1 1 100%; gap: 7px; overflow-x: auto; padding: 3px 0 5px; scroll-padding: 8px; }
  .fleet-filters { flex-wrap: nowrap; }
  .fleet-filters > button { min-height: 44px; flex: 0 0 auto; font-size: 10px; padding: 5px 9px; }
  .garage-toolbar { flex-wrap: wrap; gap: 10px; padding: 11px 0; }
  .trial-refits { margin-left: auto; min-height: 44px; font-size: 10px; }
  .circuit-toolbar { gap: 12px; flex-wrap: wrap; }
  .circuit-toolbar > span { font-size: 10px; }
  .circuit-toolbar .primary-button { min-height: 48px; font-size: 10px; }
  .modal-backdrop { padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)); overflow-y: auto; overscroll-behavior: contain; }
  .stage-modal, .help-modal, .result-modal { max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); border-width: 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .modal-close { top: 10px; right: 10px; min-width: 44px; width: 44px; height: 44px; border-width: 7px; z-index: 5; }
  .stage-banner { height: 160px; min-height: 160px; }
  .stage-banner-copy { padding: 22px 16px; max-width: calc(100% - 52px); }
  .stage-banner-copy h2 { font-size: 38px; }
  .stage-prize { bottom: 12px; right: 15px; width: 95px; }
  .stage-body { padding: 15px 14px; }
  .stage-conditions { flex-wrap: wrap; font-size: 10px; gap: 8px 13px; }
  .course-brief { padding: 12px; }
  .course-brief strong { font-size: 14px; line-height: 1.4; }
  .course-brief p { font-size: 12px; line-height: 1.6; }
  .course-brief > span { font-size: 9px; line-height: 1.6; display: block; }
  .stage-tabs { gap: 8px; }
  .stage-tabs > button { min-height: 46px; flex: 1; padding: 5px 7px; font-size: 10px; gap: 5px; }
  .stage-footer { position: sticky; bottom: -15px; z-index: 4; background: #09233beb; padding: 12px 0 7px; gap: 12px; }
  .stage-footer > .primary-button { min-height: 50px; font-size: 10px; white-space: normal; gap: 8px; }
  .help-modal > p { font-size: 12px; line-height: 1.7; }
  .help-modal h2 { max-width: calc(100% - 35px); }
  .help-modal > .primary-button, .result-modal > .primary-button { min-height: 50px; font-size: 11px; }
  #toast { left: 50%; bottom: max(16px, var(--safe-bottom)); max-width: calc(100vw - 28px); width: max-content; font-size: 12px; white-space: normal; line-height: 1.5; }
  footer { padding: 0 max(14px, var(--safe-right)) max(18px, var(--safe-bottom)) max(14px, var(--safe-left)); flex-wrap: wrap; gap: 8px; font-size: 9px; }
  footer > span:nth-child(2) { display: none; }
  footer button { min-height: 44px; font-size: 10px; }
}
@media (max-width: 600px) {
  .topbar .credit-balance > .game-icon, .topbar .credit-balance > .icon { display: none; }
  .featured-pod { display: flex; flex-direction: column; border-width: 16px; padding: 16px; }
  .featured-pod > .featured-pod-art { min-height: 190px; width: 100%; margin: 5px 0; }
  .featured-pod .pod-title h2 { font-size: 30px; }
  .featured-pod .pod-title > span { font-size: 9px; }
  .featured-pod .stat-row > span { width: 70px; font-size: 9px; }
  .featured-pod .stat-row > strong { min-width: 40px; font-size: 17px; }
  .featured-pod .featured-boat-trait { max-width: none; font-size: 12px; }
  .featured-pod > .outline-button { width: 100%; max-width: none; min-height: 48px; font-size: 11px; }
  .hero-card { min-height: 365px; border-width: 16px; }
  .hero-topline { font-size: 8px; padding: 14px 12px 0; }
  .hero-mode { display: none; }
  .hero-content { padding: 24px 12px 20px; }
  .hero-content h2 { font-size: 54px; }
  .hero-content p { font-size: 12px; }
  .hero-cta { min-height: 52px; font-size: 11px; margin-top: 24px; }
  .hero-bottom { padding: 14px 12px; }
  .hero-track { font-size: 10px; }
  .hero-track small { font-size: 8px; }
  .section-heading { gap: 10px; flex-wrap: wrap; }
  .section-heading > div { min-width: 0; flex-wrap: wrap; gap: 7px; }
  .section-heading h2 { font-size: 11px; letter-spacing: .8px; }
  .section-heading .text-link { font-size: 10px; }
  .shop-card, .small-shop-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px 12px; padding: 13px 11px; border-width: 13px; }
  .shop-card .shop-icon, .small-shop-card .shop-icon { width: 40px; height: 40px; }
  .shop-icon .game-icon { width: 28px; height: 28px; }
  .shop-card-details { min-width: 0; }
  .shop-item-title { gap: 7px; align-items: start; flex-wrap: wrap; }
  .shop-item-title h3, .small-shop-card .shop-item-title h3 { font-size: 23px; line-height: 1.05; }
  .shop-item-title > span, .small-shop-card .shop-item-title > span { font-size: 10px; }
  .shop-card-details p, .small-shop-card .shop-card-details p { font-size: 12px; line-height: 1.5; }
  .shop-card > .shop-buy, .shop-card > .equipped-button { grid-column: 2; width: 100%; min-width: 0; max-width: none; min-height: 46px; border-width: 8px; padding: 5px 8px; font-size: 11px; margin: 0; }
  .shop-side-card { border-width: 16px; padding: 16px; }
  .shop-side-card > .primary-button { min-height: 50px; font-size: 11px; }
  .loadout-list > div { font-size: 12px; }
  .pit-strip { display: grid; grid-template-columns: 36px minmax(0, 1fr); }
  .pit-strip > p { display: none; }
  .pit-strip > .dark-button { grid-column: 1 / -1; width: 100%; min-height: 48px; font-size: 10px; }
  .stage-footer { display: grid; grid-template-columns: minmax(0, 1fr); }
  .stage-current-pod { justify-content: center; }
  .stage-current-pod strong { font-size: 22px; }
  .stage-intro { gap: 10px; }
  .stage-intro h3 { font-size: 26px; }
  .stage-intro .credit-balance { font-size: 22px; }
  .stage-banner-copy > span:last-child { font-size: 10px; line-height: 1.5; }
  .stage-prize { display: none; }
  .help-modal, .result-modal { padding: 22px 15px; }
  .record-stats { grid-template-columns: 1fr; }
  .record-stats article { display: flex; padding: 16px; gap: 12px; align-items: center; }
  .record-stats article > span { font-size: 11px; width: auto; margin: 0; }
  .records-table-head, .records-table > button { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
  .records-table-head > :last-child, .records-table > button > .ready-status { display: none; }
}
@media (max-width: 480px) {
  .tracks-grid, .all-tracks, .pod-grid { grid-template-columns: minmax(0, 1fr); }
  .garage-card { border-width: 16px; padding: 17px 14px; }
  .garage-art { height: 190px; }
  .garage-art > .boat-sprite { width: 195px; height: 195px; }
  .garage-card h2 { font-size: 29px; }
  .garage-card .eyebrow, .garage-card .mini-tag, .boat-characteristics > span { font-size: 9px; }
  .garage-card .stat-row > span { width: 70px; font-size: 9px; }
  .garage-card .stat-row > strong { min-width: 40px; font-size: 17px; }
  .garage-card .stat-row small { font-size: 9px; }
  .track-art { height: 228px; }
  .track-meta > span { font-size: 9px; letter-spacing: .1px; }
  .track-meta { gap: 5px; }
}
@media (max-width: 380px) {
  .cheat-toggle { font-size: 0; min-width: 56px; }
  .cheat-toggle b { font-size: 10px; }
  .topbar-actions { gap: 2px; }
  .race-screen { --touch-gear-size: 76px; }
  .race-speed > strong { font-size: 28px; }
  .race-top-hud { grid-template-columns: minmax(0, 1fr) 62px 44px 44px; gap: 5px; }
  .race-wind { width: 62px; font-size: 9px; }
  .race-track-name { font-size: 20px; }
  .race-track-name > span { font-size: 8px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  .race-top-hud { grid-template-columns: minmax(0, 1fr) 66px minmax(208px, 240px) 44px 44px; grid-template-rows: auto; gap: 7px; }
  .race-track-name { grid-column: 1; grid-row: 1; font-size: 22px; }
  .race-track-name > span { font-size: 9px; }
  .race-wind { grid-column: 2; grid-row: 1; width: 66px; }
  .race-progress { grid-column: 3; grid-row: 1; width: auto; gap: 10px; padding: 4px 7px; border-width: 6px; }
  .race-progress > span { font-size: 7px; letter-spacing: .2px; }
  .race-progress strong { font-size: 24px; margin-top: 2px; }
  #race-pause { grid-column: 4; }
  #race-quit { grid-column: 5; }
  .race-speed > strong { font-size: 33px; }
  .race-gear > #hud-pickup { display: none; }
  .race-gear > #hud-sail { font-size: 7px; line-height: 1.2; }
  .race-gear > #hud-gate { font-size: 8px; }
  .race-meter-group { gap: 7px; }
  .touch-drag-controls .touch-hint { display: none; }
  .sidebar .brand { height: 54px; }
  .sidebar .game-logo { width: 126px; max-height: 60px; }
  .sidebar-divider { margin: 3px 4px 8px; }
  .sidebar .side-label, .sidebar .sidebar-bottom { display: none; }
  .sidebar .nav-item { min-height: 44px; padding: 4px 8px; border-width: 6px; }
  .sidebar nav { gap: 3px; }
  .page-heading { margin-bottom: 17px; }
  .deck-hero-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .featured-pod { display: flex; flex-direction: column; }
  .featured-pod-art { min-height: 160px; }
  .hero-card { min-height: 355px; }
  .pod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-banner { height: 110px; min-height: 110px; }
  .stage-banner-copy { padding: 14px 17px; }
  .stage-banner-copy h2 { font-size: 32px; margin: 5px 0 8px; }
  .stage-body { padding: 13px 16px; }
  .stage-intro { margin-bottom: 12px; }
  .stage-footer { bottom: -13px; }
  .race-pause-card { padding: 16px 20px; border-width: 16px; }
  .race-pause-card h2 { font-size: 30px; margin: 8px 0; }
  .race-pause-card p { margin-bottom: 9px; }
  .race-pause-card button { min-height: 46px; margin-top: 8px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .race-top-hud { grid-template-columns: minmax(0, 1fr) minmax(168px, 195px) 44px 44px; gap: 5px; }
  .race-wind { position: absolute; top: 53px; left: 0; width: 62px; min-height: 36px; }
  .race-progress { grid-column: 2; }
  #race-pause { grid-column: 3; }
  #race-quit { grid-column: 4; }
  .race-gear > strong { font-size: 14px; }
  .race-gear > #hud-gate { font-size: 8px; white-space: nowrap; }
  .deck-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stats and the gear action share one 88px strip above the safe area. */
:where(.touch-device) .touch-controls .touch-gear-large {
  flex-basis: var(--touch-gear-size); width: var(--touch-gear-size);
  height: var(--touch-hud-height); min-width: 0; min-height: 0;
}
:where(.touch-device) .race-gear.has-hud-notice > strong { -webkit-line-clamp: 1; }
:where(.touch-device) .race-gear.has-hud-notice > #hud-pickup {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (pointer: coarse), (any-pointer: coarse), (max-width: 900px), (max-width: 1000px) and (max-height: 500px) {
  .touch-controls .touch-gear-large {
    flex-basis: var(--touch-gear-size); width: var(--touch-gear-size);
    height: var(--touch-hud-height); min-width: 0; min-height: 0;
  }
  .race-gear.has-hud-notice > strong { -webkit-line-clamp: 1; }
  .race-gear.has-hud-notice > #hud-pickup {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .touch-controls button { transition: none; }
}