/* Title screen: a racing poster over the live game world. */
.fullscreen-label { display: none; }
.start-screen {
  --poster-ink: #193b35;
  --poster-paper: #fff0c5;
  --poster-orange: #ed633a;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: max(25px, env(safe-area-inset-top)) max(36px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(36px, env(safe-area-inset-left));
  overflow: hidden;
  background: linear-gradient(#ffe9ba18, transparent 45%, #133a3333 63%, #102e29eb 87%, #102e29fa);
}
.start-masthead { display: flex; justify-content: flex-end; align-items: center; gap: 15px; z-index: 1; }
.start-record { color: var(--poster-ink); background: var(--poster-paper); border: 1.5px solid var(--poster-ink); box-shadow: 2px 3px 0 var(--poster-ink); font: bold 13px var(--font-ui); letter-spacing: 0; }
.start-record { display: flex; align-items: center; gap: 14px; padding: 7px 11px; letter-spacing: 0; }
.start-record strong { font: 900 23px Impact, 'Arial Black', sans-serif; }
.title-scene { position: relative; min-height: 0; pointer-events: none; }
.title-lockup { position: absolute; top: 4%; left: 50%; width: max-content; max-width: 100%; transform: translateX(-50%) rotate(-4deg); text-align: center; }
.title-lockup h1 { margin: 0; font-family: Impact, 'Arial Black', sans-serif; font-weight: 900; font-style: italic; line-height: .84; letter-spacing: -2px; color: var(--poster-paper); filter: drop-shadow(0 4px 0 #fff0c54d); }
.title-roadster, .title-rush { display: block; -webkit-text-stroke: 1.8px var(--poster-ink); paint-order: stroke fill; text-shadow: 1px 2px 0 var(--poster-ink), 2px 4px 0 var(--poster-ink), 3px 6px 0 var(--poster-ink); }
.title-roadster { font-size: clamp(58px, 9.5vw, 140px); }
.title-rush { position: relative; width: max-content; margin: 5px auto 0; font-size: clamp(94px, 14.5vw, 205px); letter-spacing: -5px; color: var(--poster-orange); }
.title-speed { position: absolute; left: calc(100% + 13px); top: 22%; width: 34px; height: 12px; background: var(--poster-paper); box-shadow: -8px 20px 0 var(--poster-paper), -16px 40px 0 var(--poster-paper); transform: skew(-20deg); }
.start-tagline { margin: 17px 0 0; color: var(--poster-ink); font: bold 15px var(--font-ui); background: var(--poster-paper); padding: 5px 14px; display: inline-block; transform: rotate(2deg); box-shadow: 2px 3px 0 var(--poster-ink); }
.start-console { position: relative; text-align: center; justify-self: center; z-index: 1; width: min(440px, 100%); }
.destination-picker { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.destination-picker legend { width: 100%; margin-bottom: 5px; padding: 0; color: #ddd7ba; font: bold 13px var(--font-ui); letter-spacing: 0; }
.destination-options { display: flex; justify-content: center; align-items: center; gap: 17px; }
.destination-options label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.destination-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.destination-options label > span { display: flex; align-items: center; min-height: 44px; padding: 0 2px; color: #e6e4d2a6; font: 900 22px Impact, 'Arial Black', sans-serif; letter-spacing: .5px; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.destination-options input:checked + span { color: #ffd76b; border-bottom-color: #ffd76b; }
.destination-options input:focus-visible + span { outline: 2px solid var(--poster-paper); outline-offset: 4px; }
.route-divider { color: #e6e4d24d; font: italic 27px Georgia, serif; }
.start-button { display: flex; align-items: center; justify-content: center; gap: 19px; width: 100%; min-height: 67px; border: 2px solid #172e29; border-radius: 2px; background: #ffd15e; color: #193a31; box-shadow: 5px 6px 0 #0a201c, 5px 7px 0 #fff0c54d; transform: rotate(-1deg); padding: 9px 22px; font: italic 900 39px Impact, 'Arial Black', sans-serif; letter-spacing: .6px; transition: transform .12s, background .12s, box-shadow .12s; }
.start-button:hover { background: #ffe4a0; transform: rotate(0) translateY(-2px); }
.start-button:active { transform: rotate(0) translate(4px, 4px); box-shadow: 1px 2px 0 #0a201c; }
.mode-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin-top: 14px; padding: 10px 16px; border: 2px solid var(--poster-ink); border-radius: 2px; background: var(--poster-paper); color: var(--poster-ink); box-shadow: 3px 3px 0 #0a201c; font: bold 14px var(--font-ui); }
.mode-button:hover { background: #ffe4a0; }
.mode-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a201c; }
.mode-button:focus-visible { outline-color: var(--poster-paper); }
#mode-summary { font-size: 12px; font-weight: normal; }
.start-triangle { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor; }
.start-button kbd { margin-left: auto; border: 1px solid #193a3166; padding: 7px 9px; box-shadow: 0 2px 0 #193a3166; font: bold 13px var(--font-ui); letter-spacing: 0; }
.start-instruction { margin: 13px 0 0; color: #e8e3c7c9; font: 13px var(--font-ui); letter-spacing: 0; }
.start-footer { display: flex; align-items: center; justify-content: center; gap: 28px; padding-top: 10px; }
.start-footer button { min-height: 44px; border: 0; padding: 8px 0; color: #fff0c5; background: none; font: bold 13px var(--font-ui); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #fff0c566; }
.start-footer button:hover { color: #ffd15e; text-decoration-color: currentColor; }
.arcade[data-screen="menu"] .fullscreen { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); right: max(36px, env(safe-area-inset-right)); width: auto; min-height: 44px; height: auto; padding: 8px 0; border: 0; border-radius: 0; background: none; font: bold 13px var(--font-ui); letter-spacing: 0; text-transform: none; color: #fff0c5a6; }
.arcade[data-screen="menu"] .fullscreen svg { display: none; }
.arcade[data-screen="menu"] .fullscreen-label { display: inline; }
.arcade[data-theme="mars"] .start-screen { --poster-ink: #252d43; --poster-orange: #f1794f; background: linear-gradient(#eabfbd16, transparent 45%, #20263d33 63%, #202538eb 87%, #202538fa); }
.setup-panel { width: min(570px, 100%); border-radius: 3px; }
.setup-options { display: grid; gap: 25px; margin: 25px 0; text-align: left; }
.setup-options .starting-mode { margin: 0; }
.setup-options .mode-options label > span { border-radius: 2px; min-height: 48px; }
.setup-panel > button { justify-content: center; width: 100%; border-radius: 2px; }

@media (orientation: portrait) {
  .start-screen { padding: max(22px, env(safe-area-inset-top)) 22px max(12px, env(safe-area-inset-bottom)); }
  .start-record { font-size: 12px; gap: 8px; padding: 4px 7px; }
  .start-record strong { font-size: 20px; }
  .title-lockup { top: 7%; }
  .title-roadster { font-size: clamp(54px, 15.8vw, 91px); }
  .title-rush { font-size: clamp(94px, 25vw, 145px); }
  .title-speed { width: 20px; height: 8px; left: calc(100% + 8px); box-shadow: -5px 14px 0 var(--poster-paper), -10px 28px 0 var(--poster-paper); }
  .start-tagline { font-size: 13px; padding: 5px 9px; margin-top: 13px; }
  .destination-options label > span { font-size: 20px; }
  .start-button { font-size: 34px; gap: 15px; min-height: 62px; padding: 9px 17px; }
  .start-button kbd { display: none; }
  .start-footer { justify-content: flex-start; gap: 20px; padding-top: 8px; }
  .start-footer button { font-size: 13px; }
  .arcade[data-screen="menu"] .fullscreen { right: 22px; bottom: max(12px, env(safe-area-inset-bottom)); font-size: 12px; }
  .start-instruction { font-size: 12px; letter-spacing: 0; }
}
@media (max-height: 650px) and (orientation: portrait) {
  .start-screen { padding-top: 16px; }
  .title-lockup { top: 6%; }
  .title-roadster { font-size: 15.8vw; }
  .title-rush { font-size: 24vw; }
  .start-tagline { font-size: 12px; margin-top: 10px; }
  .destination-picker { margin-bottom: 10px; }
  .destination-picker legend { font-size: 12px; }
  .start-button { min-height: 54px; font-size: 30px; }
  .start-instruction { margin-top: 9px; }
  .start-footer { padding-top: 3px; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .destination-options { gap: 12px; }
  .destination-options label > span { font-size: 18px; }
}
@media (max-height: 800px) and (orientation: landscape) {
  .start-screen { padding: 14px 25px; grid-template-rows: auto 1fr auto; }
  .start-masthead { grid-column: 1 / -1; }
  .start-record { margin-right: 100px; font-size: 12px; padding: 5px 8px; gap: 8px; }
  .start-record strong { font-size: 20px; }
  .title-lockup { left: 26%; top: 5%; }
  .title-roadster { font-size: clamp(48px, 7.1vw, 75px); }
  .title-rush { font-size: clamp(70px, 10.5vw, 113px); }
  .title-speed { width: 20px; height: 7px; box-shadow: -5px 13px 0 var(--poster-paper), -10px 26px 0 var(--poster-paper); }
  .start-tagline { font-size: 12px; padding: 4px 9px; margin-top: 12px; }
  .start-console { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: center; justify-self: start; width: calc(100% - 145px); }
  .destination-picker { grid-column: 1; grid-row: 1 / 4; align-self: end; margin: 0; }
  .destination-picker legend { font-size: 12px; margin-bottom: 2px; letter-spacing: 0; }
  .destination-options { gap: 12px; }
  .destination-options label > span { font-size: 18px; }
  .start-button { grid-column: 2; min-height: 52px; font-size: 29px; gap: 12px; padding: 6px 12px; }
  .mode-button { grid-column: 2; min-height: 44px; margin-top: 10px; padding: 8px 12px; font-size: 13px; }
  .start-button kbd { display: none; }
  .start-instruction { grid-column: 2; margin-top: 9px; font-size: 12px; letter-spacing: 0; }
  .start-footer { position: absolute; right: 25px; bottom: 10px; display: grid; gap: 0; padding: 0; justify-items: end; }
  .start-footer button { min-height: 36px; font-size: 12px; }
  .arcade[data-screen="menu"] .fullscreen { top: 12px; bottom: auto; right: 25px; font-size: 12px; font-weight: bold; min-height: 30px; padding: 6px 8px; color: #193b35; background: #fff0c5; border: 1px solid #193b35; box-shadow: 2px 3px 0 #193b35; }
  .setup-options { grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
  .setup-panel { width: min(600px, 100%); }
}
@media (min-height: 551px) and (max-height: 800px) and (orientation: landscape) {
  .title-lockup { top: 19%; }
  .title-roadster { font-size: clamp(72px, 8vw, 110px); }
  .title-rush { font-size: clamp(110px, 12vw, 170px); }
  .start-tagline { font-size: 12px; }
  .destination-options label > span { font-size: 22px; }
  .start-button { min-height: 64px; font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .start-button, .destination-options label > span { transition: none; }
}