/* Race mode: the character picker on the Play screen, the lobby over the title, and the race's
   readouts. Game skin tokens only (game-theme.css); layout on the 4 px grid; no fades, things
   arrive on a stepped wipe like the rest of the game's screens. */

/* ---- Play screen: name, character, Explore or Race ---- */
#play .play-box { max-height: 100vh; overflow-y: auto; padding: var(--sp-4); box-sizing: border-box; gap: var(--sp-4); }
.play-who { display: grid; grid-template-columns: auto minmax(0, calc(280px * var(--hud-scale))); gap: var(--sp-5); align-items: center; min-height: 288px; }
#play-figure { width: 96px; height: 144px; image-rendering: pixelated; justify-self: center; }
.play-look { min-height: 256px; visibility: hidden; }
#play.has-look .play-look { visibility: visible; }
.play-look .menu-row { min-height: 32px; font-size: 24px; line-height: 32px; padding-left: var(--sp-3); gap: var(--sp-3); }
.play-look .menu-row::before { display: none; }
.play-look .menu-row:hover { background: var(--sunset-ember); color: var(--sunset-ink); }
.play-look .menu-row:hover .value { color: var(--sunset-ink); }
.chip { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--sunset-cream); vertical-align: middle; margin-right: var(--sp-1); box-sizing: border-box; }
.play-buttons { display: flex; gap: var(--sp-4); }
#play-race, #play-shuffle { font-family: var(--font-display); color: var(--sunset-cream); background: #000; border: var(--frame) solid var(--sunset-cream); border-radius: 0; cursor: pointer; }
#play-race { font-size: calc(24px * var(--hud-scale)); line-height: calc(32px * var(--hud-scale)); padding: var(--sp-3) var(--sp-6); }
#play-race:hover, #play-race:focus-visible { color: var(--sunset-ink); background: var(--sunset-ember); border-color: var(--sunset-gold); outline: none; }
#play-shuffle { font-family: var(--font-ui); font-size: 24px; line-height: 24px; padding: var(--sp-1) var(--sp-3); border-color: var(--sunset-dusk); }
#play-shuffle:hover, #play-shuffle:focus-visible { border-color: var(--sunset-cream); outline: none; }
#play-go:focus-visible { outline: none; }
@media (max-width: 700px) {
  #play .play-box { gap: var(--sp-3); }
  .play-who { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-2); }
  #play-figure { width: 64px; height: 96px; }
  .play-look { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-2); }
  .play-look .menu-row { font-size: 20px; min-height: 28px; line-height: 28px; padding: 0 var(--sp-1); }
  #play-name { width: 10em; font-size: 16px; }
  #play .play-buttons button { font-size: 16px; line-height: 24px; padding: var(--sp-2) var(--sp-4); }
}
@media (max-height: 480px) {
  #play .play-box { gap: var(--sp-2); padding: var(--sp-2); }
  .play-who { grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
  #play-figure { width: 48px; height: 72px; }
  .play-look { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-2); min-height: 0; }
  .play-look .menu-row { font-size: 16px; min-height: 24px; line-height: 24px; }
}

/* ---- in the race ---- */
#race-pos { left: var(--edge-x); top: var(--edge-y); display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
#race-pos .display { font-size: calc(32px * var(--hud-scale)); line-height: calc(40px * var(--hud-scale)); color: var(--sunset-gold); }
#race-pos small { font-size: calc(24px * var(--hud-scale)); color: var(--text-secondary); }
#race-status { right: calc(var(--edge-x) + 150px * var(--hud-scale) + var(--sp-2)); top: calc(var(--edge-y) + 112px); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3); font-size: calc(24px * var(--hud-scale)); line-height: calc(24px * var(--hud-scale)); white-space: nowrap; }
#race-split { right: var(--edge-x); top: calc(var(--edge-y) + 112px + 150px * var(--hud-scale) + var(--sp-2) + 40px * var(--hud-scale)); padding: 0 var(--sp-2); font-size: calc(20px * var(--hud-scale)); color: var(--danger-text); background: none; border: 0; box-shadow: none; }
#race-split.is-ahead { color: var(--ok-text); }
#race-pos[hidden], #race-status[hidden], #race-split[hidden], .race-count[hidden], .race-watch[hidden], .race-board[hidden] { display: none; }
.num { font-variant-numeric: tabular-nums; }
html.in-race #hint { display: none; }
.race-count { left: 50%; top: 24%; transform: translateX(-50%); font-family: var(--font-display); font-size: calc(96px * var(--hud-scale)); line-height: calc(112px * var(--hud-scale)); color: var(--sunset-cream); white-space: nowrap;
  text-shadow: 4px 4px 0 var(--sunset-ink), -4px -4px 0 var(--sunset-ink), 4px -4px 0 var(--sunset-ink), -4px 4px 0 var(--sunset-ink); }
.race-count.is-in { animation: race-wipe-right 0.4s steps(8, end) backwards; }
@keyframes race-sweep-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.race-title { left: 0; right: 0; top: 22%; padding: 0; background: none; text-shadow: 3px 3px 0 var(--sunset-ink), -3px -3px 0 var(--sunset-ink), 3px -3px 0 var(--sunset-ink), -3px 3px 0 var(--sunset-ink); border: 0; box-shadow: none; text-align: center; font-family: var(--font-display); font-size: calc(64px * var(--hud-scale)); line-height: calc(80px * var(--hud-scale)); color: var(--sunset-gold); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; }
.race-title.is-in { animation: race-wipe-right 0.5s steps(10, end) backwards; }
.race-title.is-out { animation: race-sweep-out 0.4s steps(8, end) forwards; }
.race-title[hidden] { display: none; }
@keyframes race-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes race-wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.race-watch { left: 50%; bottom: calc(var(--edge-y) + var(--sp-7)); transform: translateX(-50%); padding: var(--sp-2) var(--sp-4); display: flex; gap: var(--sp-4); align-items: center; white-space: nowrap; pointer-events: auto; }
.race-watch-name { color: var(--sunset-gold); }
.race-watch small { color: var(--text-secondary); font-size: inherit; }
.race-watch button, .race-proceed { font: inherit; color: var(--text-primary); background: var(--surface-1); border: var(--frame) solid var(--sunset-dusk); padding: 0 var(--sp-3); cursor: pointer; }
.race-board .panel { width: min(calc(760px * var(--hud-scale)), 100%); overflow: auto; }
.race-board.is-in .panel { animation: race-wipe-down 0.5s steps(8, end) backwards; }
.race-board.is-corner { background: none; place-items: center start; pointer-events: none; }
.race-board.is-corner .panel { width: min(calc(560px * var(--hud-scale)), 100%); max-height: 50vh; padding: var(--sp-3) var(--sp-4); }
.race-board.is-corner h2 { margin-bottom: var(--sp-2); font-size: calc(16px * var(--hud-scale)); line-height: calc(24px * var(--hud-scale)); }
.race-board.is-corner .race-board-foot { display: none; }
.race-table { display: grid; gap: 0; min-height: 0; overflow: auto; }
.race-tr { display: grid; grid-template-columns: calc(48px * var(--hud-scale)) minmax(0, 1fr) repeat(var(--laps, 2), calc(72px * var(--hud-scale))) calc(96px * var(--hud-scale)); align-items: center; gap: var(--sp-2); min-height: calc(32px * var(--hud-scale)); font-size: calc(24px * var(--hud-scale)); line-height: calc(32px * var(--hud-scale)); padding: 0 var(--sp-2); }
.race-th { color: var(--sunset-ember); }
.race-tr .c-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-tr .c-lap, .race-tr .c-total { text-align: right; }
.race-tr .c-lap.is-best { background: var(--sunset-ember); color: var(--sunset-ink); }
.race-tr.is-me { color: var(--sunset-gold); }
.race-board-foot { min-height: 24px; }
@media (pointer: coarse) {
  #race-pos { left: var(--safe-l); top: var(--safe-t); padding: var(--sp-1) var(--sp-2); }
  #race-pos .display { font-size: 24px; line-height: 32px; }
  #race-pos small { font-size: 16px; }
  #race-status { font-size: 16px; line-height: 20px; gap: var(--sp-2); padding: 0; color: var(--text-primary); text-shadow: 2px 2px 0 #000; }
}
@media (pointer: coarse) and (max-height: 480px) {
  #race-pos { padding: 0 var(--sp-2); }
  #race-pos .display { font-size: 16px; line-height: 24px; }
  #race-pos small { font-size: 14px; }
}
@media (pointer: coarse), (max-width: 700px) {
  .race-count { font-size: 64px; line-height: 80px; }
  .race-title { font-size: 36px; line-height: 48px; }
  .race-watch { bottom: var(--sp-4); }
  .race-watch small { display: none; }
  .race-tr { grid-template-columns: 32px minmax(0, 1fr) repeat(var(--laps, 2), 52px) 64px; font-size: 16px; gap: var(--sp-1); padding: 0; }
}

/* ---- time trials: the modal on the lobby, and the finish screen ---- */
.trial-ask .lobby-acts { margin: var(--sp-2) 0; }
.trial-head { margin: var(--sp-2) 0 var(--sp-1); font-family: var(--font-display); font-weight: 400; font-size: 12px; line-height: 24px; color: var(--sunset-ember); }
.trial-table .race-tr { min-height: 24px; font-size: 20px; line-height: 24px; }
.trial-table .race-tr.is-empty { color: var(--sunset-dusk); }
.trial-table .c-name small { margin-left: var(--sp-2); color: var(--text-secondary); font-size: 16px; }
.trial-table .race-tr.is-me .c-name small { color: inherit; }
.trial-fin .panel { display: grid; gap: var(--sp-1); max-height: 100%; overflow: auto; }
.trial-fin h2 { margin-bottom: var(--sp-2); }
.trial-time { font-family: var(--font-display); font-size: calc(32px * var(--hud-scale)); line-height: calc(40px * var(--hud-scale)); color: var(--sunset-gold); }
.trial-laps { display: flex; gap: var(--sp-4); min-height: 24px; font-size: 24px; line-height: 24px; color: var(--text-secondary); }
.trial-rank { margin: 0; min-height: 32px; font-size: 24px; line-height: 32px; }
.trial-note { margin: var(--sp-1) 0 0; min-height: 24px; font-size: 20px; line-height: 24px; color: var(--sunset-gold); }
.trial-acts { margin-top: var(--sp-2); }
.trial-extra { margin-top: var(--sp-2); }
.race-extra[hidden] { display: none; }
@media (pointer: coarse), (max-width: 700px) {
  .trial-table .race-tr { font-size: 16px; }
  .trial-table .c-name small { display: none; }
  .trial-laps { font-size: 16px; gap: var(--sp-2); }
  .trial-rank { font-size: 20px; }
}


/* Full-screen menus reserve their own footer, including browser and notch safe areas. */
#play .play-box { width: 100%; height: 100dvh; max-height: 100dvh; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
#play .play-who { align-self: center; grid-template-columns: auto minmax(0, 320px) 44px; gap: 24px; min-height: 0; max-height: 100%; overflow-y: auto; }
#play .play-look { min-height: 0; }
#play-shuffle { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; }
.play-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; width: 100%; }
#play .play-footer #play-name { box-sizing: border-box; max-width: 100%; font-size: 16px; min-height: 48px; }
#title.is-lobby > .art, #title.is-lobby > .title-card { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  #play .play-who { grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; width: 100%; max-width: 400px; }
  #play #play-figure { grid-column: 1 / -1; width: 64px; height: 96px; }
  #play .play-look { grid-template-columns: 1fr; }
  #play .play-look .menu-row { min-height: 36px; font-size: 20px; line-height: 28px; }
  #play .play-footer { gap: 12px; }
  #play .play-buttons { width: 100%; justify-content: center; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #play .play-box { gap: 8px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #play .play-who { grid-template-columns: 64px minmax(0, 400px) 44px; gap: 16px; }
  #play #play-figure { width: 64px; height: 96px; }
  #play .play-look { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  #play .play-look .menu-row { min-height: 36px; font-size: 20px; line-height: 28px; padding: 0; }
  #play .play-footer { gap: 16px; }
  #play .play-footer #play-name { width: 12em; }
  #play .play-buttons button { font-size: 16px; line-height: 24px; padding: 8px 16px; min-height: 48px; }
}


/* Desktop menus sit together in one readable panel, with space around the screen edges. */
@media (min-width: 1000px) and (min-height: 600px) {
  #play .play-box { width: min(960px, calc(100% - 64px)); height: auto; max-height: calc(100dvh - 64px); padding: var(--sp-6); gap: var(--sp-6); }
  #play .play-who { grid-template-columns: 224px minmax(0, 320px) 44px; gap: var(--sp-6); }
  #play #play-figure { width: 224px; height: 320px; }
  #play .play-footer { padding-top: var(--sp-4); border-top: 1px solid var(--border); }
}
#play-figure { image-rendering: auto; }


/* Lobby: racers, an unframed turntable with stats, then settings and actions. */
#title.is-ready.is-lobby .press, #title.is-lobby > .art, #title.is-lobby > .title-card { display: none; }
#title .lobby { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); box-sizing: border-box; background: var(--menu-bg); }
#title .lobby[hidden] { display: none; }
#title .lobby .lobby-panel { width: min(1120px, 100%); max-height: 100%; min-height: 0; box-sizing: border-box; padding: 24px; background: var(--menu-bg); background-image: none; border: 0; box-shadow: none; overflow: auto; }
#title .lobby .lobby-panel::after { display: none; }
#title .lobby:not(.trial-ask) .lobby-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
.lobby-panel h2 { margin: 0; font: 20px/28px var(--font-display); color: var(--sunset-gold); }
.lobby-sub { margin: 0; min-height: 20px; font-size: 20px; line-height: 24px; color: var(--text-secondary); }
.lobby-cols { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, 1.2fr); gap: 32px; align-items: start; min-height: 0; margin-top: 16px; }
.lobby-who, .lobby-car, .lobby-controls, .lobby-rows, .lobby-acts { min-width: 0; min-height: 0; }
.lobby-who h3 { margin: 0 0 8px; font: 12px/20px var(--font-display); color: var(--sunset-ember); }
.lobby-list { list-style: none; padding: 0; margin: 0; }
.lobby-list li { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 24px; line-height: 28px; white-space: nowrap; }
.lobby-list li.is-empty { display: none; }
.lobby-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lobby-list li.is-me .nm { color: var(--sunset-gold); }
.lobby-list small { display: none; }
.race-dot { width: 8px; height: 8px; flex: none; border: 1px solid var(--text-secondary); box-sizing: border-box; }
.lobby-note { display: block; margin-top: 8px; font-size: 16px; line-height: 20px; color: var(--text-secondary); overflow-wrap: anywhere; }
.lobby-note:empty { display: none; }
.lobby-car canvas { display: block; width: 100%; height: clamp(112px, 28dvh, 240px); max-width: none; background: transparent; border: 0; image-rendering: pixelated; }
.lobby-car-name { margin: 4px 0 0; font: 12px/24px var(--font-display); color: var(--sunset-gold); }
.lobby-car-sub, .lobby-car-model { font-size: 16px; line-height: 20px; color: var(--text-secondary); }
.lobby-car-model { margin-bottom: 8px; }
.lobby-stats { display: grid; }
.lobby-stats .stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 24px; font-size: 20px; line-height: 24px; }
.pips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; width: 44%; }
.pips i { height: 8px; border: 1px solid var(--border); background: var(--surface); box-sizing: border-box; }
.pips i.is-on { background: var(--sunset-gold); border-color: var(--sunset-gold); }
.lobby-swatches { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.swatch { height: 28px; padding: 0; border: 2px solid transparent; cursor: pointer; }
.swatch.is-on { border-color: var(--text-primary); }
.lobby-swatches.is-off .swatch { opacity: .5; cursor: default; }
.lobby-controls { display: grid; align-content: start; gap: 16px; }
.lobby-panel .menu-list .menu-row { display: flex; min-width: 0; min-height: 44px; padding: 0 8px; gap: 8px; font-size: 24px; line-height: 28px; touch-action: manipulation; }
.lobby-panel .menu-row::before { display: none; }
.lobby-panel .menu-row .value { min-width: 0; gap: 4px; }
.lobby-panel .menu-row .value .v { min-width: 0; text-align: right; }
.lobby-panel .menu-row .arrow { padding: 0 4px; }
.lobby-panel .menu-row.is-off { color: var(--text-secondary); cursor: default; }
.lobby-acts { display: grid; gap: 4px; }
.lobby-panel .lobby-acts .menu-row { justify-content: center; padding: 4px 8px; }
.lobby-panel .lobby-acts .lobby-play { min-height: 48px; border: var(--frame) solid var(--sunset-cream); font: 16px/24px var(--font-display); }
.lobby-panel .lobby-acts .menu-row:not(.lobby-play) { font-size: 20px; }

@media (max-height: 600px), (max-width: 999px) {
  #title .lobby { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  #title .lobby .lobby-panel { padding: 0; }
  .lobby-panel h2 { font-size: 16px; line-height: 24px; }
  .lobby-sub { font-size: 16px; line-height: 20px; }
  .lobby-cols { grid-template-columns: minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1.5fr); gap: 12px; margin-top: 4px; }
  .lobby-who h3 { font-size: 8px; line-height: 16px; margin-bottom: 4px; }
  .lobby-list li { font-size: 20px; height: 20px; line-height: 20px; gap: 4px; }
  .lobby-car-name { font-size: 8px; line-height: 16px; }
  .lobby-car-sub, .lobby-car-model { font-size: 14px; line-height: 16px; }
  .lobby-car-model { margin-bottom: 4px; }
  .lobby-stats .stat { height: 20px; font-size: 16px; line-height: 20px; gap: 4px; }
  .lobby-car canvas { height: clamp(72px, 24dvh, 160px); }
  .lobby-swatches { display: none; } /* Paint remains selectable in the settings column. */
  .lobby-controls { gap: 8px; }
  .lobby-panel .menu-list .menu-row { min-height: 32px; font-size: 20px; line-height: 24px; padding: 0 4px; gap: 4px; }
  .lobby-panel .lobby-acts .lobby-play { min-height: 40px; font-size: 12px; line-height: 20px; }
  .lobby-panel .lobby-acts .menu-row:not(.lobby-play) { min-height: 28px; font-size: 16px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  #title .lobby:not(.trial-ask) .lobby-panel { gap: 4px; }
  .lobby-panel .menu-list .menu-row { min-height: 28px; line-height: 24px; }
  .lobby-controls { gap: 4px; }
  .lobby-stats .stat { height: 16px; line-height: 16px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #title .lobby { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .lobby-cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
  .lobby-controls { grid-column: 1 / -1; gap: 8px; }
  .lobby-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
  .lobby-panel .lobby-rows .menu-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 44px; font-size: 18px; line-height: 20px; }
  .lobby-panel .lobby-rows .menu-row > span:first-child { font-size: 14px; }
  .lobby-panel .lobby-rows .value .v { font-size: 16px; line-height: 16px; }
  .lobby-panel .lobby-rows .value .arrow { padding: 0; }
  .lobby-panel .lobby-rows .value { width: 100%; justify-content: space-between; margin: 0; }
  .lobby-acts { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
  .lobby-panel .lobby-acts .menu-row { font-size: 16px; }
  .lobby-car canvas { height: clamp(80px, 16dvh, 128px); }
}
/* Browser bars can leave less than 300px on short landscape phones. */
@media (max-height: 300px) and (orientation: landscape) {
  #title .lobby { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #title .lobby:not(.trial-ask) .lobby-panel { gap: 0; }
  .lobby-panel h2 { font-size: 12px; line-height: 20px; }
  .lobby-sub { font-size: 14px; line-height: 20px; }
  .lobby-list li { height: 20px; line-height: 20px; font-size: 18px; }
  .lobby-panel .menu-list .menu-row { min-height: 24px; line-height: 20px; font-size: 18px; }
  .lobby-car canvas { height: 64px; }
  .lobby-panel .lobby-acts .menu-row:not(.lobby-play) { min-height: 24px; font-size: 16px; }
}

#race-recover { position: absolute; z-index: 12; left: var(--safe-l); top: calc(var(--safe-t) + 64px); min-height: 44px; pointer-events: auto; padding: 8px 16px; background: var(--sunset-ink); color: var(--sunset-cream); border: var(--frame) solid var(--sunset-cream); box-shadow: 4px 4px 0 var(--sunset-dusk); font: 20px/24px var(--font-ui); touch-action: manipulation; cursor: pointer; }
#race-recover:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--sunset-dusk); }
#race-recovery-hint { position: absolute; left: var(--edge-x); top: calc(var(--edge-y) + 72px); font: 20px/24px var(--font-ui); color: var(--sunset-cream); pointer-events: none; }
#race-recovery-hint[hidden] { display: none; }
@media (pointer: fine) { #race-recover { display: none; } }
@media (pointer: coarse) { #race-recovery-hint { display: none; } }
.race-cinematic #crosshair, .race-cinematic [data-touch="fire"] { display: none !important; }

#race-help { position: absolute; z-index: 12; left: 50%; top: 18%; transform: translateX(-50%); width: min(440px, 80%); padding: 8px 12px; background: var(--surface); color: var(--text-primary); font: 20px/24px var(--font-ui); text-align: center; pointer-events: none; }
#race-recover[hidden], #race-help[hidden] { display: none; }
/* Keep radio and both actions visible on short landscape screens. */
@media (max-height: 480px) and (orientation: landscape) {
  .lobby-acts { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 4px; }
  .lobby-panel .lobby-acts .menu-row:not(.lobby-play) { font-size: 14px; line-height: 16px; text-align: center; }
}
@media (min-height: 301px) and (max-height: 360px) and (orientation: landscape) {
  .lobby-panel .lobby-rows .menu-row { min-height: 26px; line-height: 22px; }
}
@media (max-height: 650px) and (max-width: 600px) and (orientation: portrait) {
  .lobby-car canvas { height: 64px; }
  .lobby-stats .stat { height: 16px; line-height: 16px; }
  .lobby-panel .lobby-rows .menu-row { min-height: 40px; }
}

/* Keep the entire recorded composition on narrow phones; never crop the Metro. */
#race-intro-film { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0e1230; z-index: 11; pointer-events: none; }
#race-intro-film[hidden] { display: none; }

.race-proceed { margin-top: var(--sp-3); min-height: 48px; }
.race-proceed[hidden] { display: none; }