/* Classic preparation only. Race HUD and the casual interface keep their CSS. */
body:has(.classic-maps[open], .classic-hangar[open]) { overflow: hidden; }
.classic-menu { min-height: 100svh; min-height: 100dvh; height: auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); overflow: visible; font-size: 1rem; }
.classic-menu .hero-art { background-position: 37% 45%; animation: none; }
.classic-menu .hero-shade { background: linear-gradient(90deg, #06192380, #071b2420 42%, #071b24dc 75%), linear-gradient(0deg, #0b222c 0%, transparent 60%); }
.classic-menu .menu-header { height: auto; min-height: 80px; gap: 12px; padding-top: env(safe-area-inset-top); flex-wrap: wrap; }
.classic-menu .menu-header nav { margin: 0 0 0 auto; height: auto; }
.classic-menu button, .classic-menu a { min-height: 48px; }
.classic-menu .icon-button, .classic-maps .icon-button, .classic-hangar .icon-button { min-width: 48px; width: 48px; height: 48px; }
.classic-menu #progress-open { background: none; border: 0; color: var(--text); margin: 0; padding: 8px; font-size: .875rem; }
.classic-menu .wordmark { min-width: 48px; }
.classic-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 40px; align-items: center; width: 100%; max-width: 1360px; margin: auto; padding: 28px 0; }
.classic-cover { align-self: stretch; padding: 32px 0; }
.classic-cover .eyebrow { font-size: .875rem; letter-spacing: .04em; }
.classic-cover h1 { max-width: 510px; font-size: clamp(64px, 7vw, 100px); margin: 24px 0; }
.classic-cover p { color: #d1ddd4; font-size: 1rem; }
.classic-menu .start-panel { display: flex; flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; border: 1px solid #63796b; background: #0c222bf5; padding: 24px; border-radius: 18px; box-shadow: 0 18px 60px #00141b55; }
.classic-menu .mode-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.classic-menu .mode-picker button { flex: 1 1 auto; }
.classic-menu .mode-picker button[data-mode=practice] { flex-grow: 1.65; }
.classic-menu .mode-picker button { padding: 8px 5px; min-height: 48px; justify-content: center; border-radius: 8px; color: #c1d1ca; }
.classic-menu .mode-picker button > span { font-size: .875rem; }
.classic-menu .mode-picker button.selected { color: #172f26; border-color: var(--accent); background: var(--accent); }
.classic-menu .menu-hint, .classic-maps .menu-hint { font: .875rem/1.45 Manrope, Arial, sans-serif; color: #b7c9c2; margin: 8px 0 0; }
.classic-menu .track-card { min-width: 0; width: 100%; gap: 12px; margin: 0; padding: 14px 10px; border: 1px solid #63796b; border-radius: 10px; background: #17343b; }
.classic-menu .track-card > svg { width: 76px; height: 72px; }
.classic-menu .track-card-copy { flex: 1; }
.classic-menu .track-card .micro, .classic-menu .track-difficulty, .classic-menu .track-facts { font: .875rem/1.4 Manrope, Arial, sans-serif; letter-spacing: 0; white-space: normal; color: #bed0c8; }
.classic-menu .track-title { font-size: 1.375rem; line-height: 1.25; margin: 4px 0; letter-spacing: -.025em; }
.classic-menu .track-title > span { min-width: 0; overflow-wrap: anywhere; }
.classic-menu .track-difficulty { margin: 0; }
.classic-menu .track-facts { display: none; }
.classic-menu .track-change { font-size: 1.25rem; }
.race-parameters { display: flex; flex-direction: column; gap: 12px; }
.classic-menu .drone-choice { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: #17343b; border: 1px solid #63796b; border-radius: 8px; text-align: left; font-size: 1rem; }
.drone-choice > span:last-child { margin-left: auto; color: var(--accent); }
.classic-menu .progress-controls { display: block; padding: 0; border: 0; }
.classic-menu .progress-controls label { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: .875rem; color: #d3dfd8; }
.classic-menu .progress-controls select { font-size: 1rem; min-height: 48px; width: 8.875rem; border: 1px solid #63796b; }
.classic-menu #difficulty-hint { margin: 4px 0 0; }
.classic-menu .start-actions > .primary { height: auto; min-height: 56px; font-size: 1rem; border-radius: 8px; gap: 8px; text-align: left; }
.classic-menu .start-actions > span { font: .875rem/1.4 Manrope, Arial, sans-serif; color: #b7c9c2; margin-top: 8px; }
.classic-menu #launch:disabled { opacity: 1; background: #35453a; color: #dae4d2; border-color: #63796b; cursor: wait; }
.classic-menu .menu-footer { position: static; flex-wrap: wrap; height: auto; min-height: 64px; padding: 0 0 env(safe-area-inset-bottom); gap: 4px 20px; }
.classic-menu .menu-footer > * { font-size: .875rem; color: #c0d1c7; white-space: normal; }
.classic-menu .footer-help { display: block; margin-left: auto; }
.classic-menu .sound-toggle { margin-left: 0; gap: 8px; }
.classic-menu .sound-toggle span { font: inherit; }
.classic-menu .save-notice { border-radius: 8px; }
.classic-menu .save-notice p { margin: 0; }
.classic-menu .save-notice button { font-size: .875rem; }
.classic-menu #menu-save-notice:has(.hidden) { display: none; }
.classic-menu #track-notice { margin: 0 0 12px; color: #ffdda6; }
.menu-cup { padding: 12px; border: 1px solid #63796b; border-radius: 10px; }
.menu-cup .micro { font: .875rem/1.4 Manrope, Arial, sans-serif; color: var(--accent); letter-spacing: 0; }
.menu-cup > strong { display: block; font-size: 1.375rem; margin-top: 4px; }
.classic-menu .menu-cup button { font-size: .875rem; text-align: left; margin: 8px 0 0; padding: 8px 0; color: var(--accent); }
.classic-menu :focus-visible, .classic-maps :focus-visible, .classic-hangar :focus-visible { outline: 3px solid #efffae; outline-offset: 2px; }

.classic-maps { padding: 0; width: 860px; max-width: calc(100vw - 32px); height: min(820px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; background: #102a32; border: 1px solid #63796b; border-radius: 14px; }
.classic-maps[open] { display: flex; flex-direction: column; }
.maps-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #102a32; border-bottom: 1px solid #63796b; }
.classic-maps .maps-header h2, .classic-hangar .maps-header h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.03em; }
.maps-header p { font: .875rem/1.4 Manrope, Arial, sans-serif; color: #bfd1c8; margin: 4px 0 0; }
.maps-header .close-dialog { position: static; flex: none; }
.maps-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 0 20px 24px; scrollbar-gutter: stable; }
.classic-maps #maps-context { margin: 12px 0; }
.classic-maps .map-level-group + .map-level-group { margin-top: 20px; }
.classic-maps .map-level-group > h3 { font: 600 1rem/1.4 Manrope, Arial, sans-serif; margin: 0 0 10px; color: #e5efda; }
.classic-maps .maps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.classic-maps .map-choice { display: grid; grid-template-columns: 86px minmax(0, 1fr); min-height: 120px; border: 2px solid #526a60; border-radius: 10px; background: #0d2730; overflow: visible; }
.classic-maps .map-choice.selected { border-color: var(--accent); background: #1b3439; }
.classic-maps .map-art { height: 100%; min-height: 112px; border-radius: 8px 0 0 8px; }
.classic-maps .track-locked .map-art { filter: grayscale(1) brightness(.45); }
.classic-maps .map-card-body { padding: 10px; width: auto; min-width: 0; overflow-wrap: anywhere; }
.classic-maps .map-card-body > strong { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.02em; min-height: 0; margin: 0 0 4px; overflow-wrap: anywhere; }
.classic-maps .map-description, .classic-maps .map-record, .classic-maps .map-medal, .classic-maps .map-access { font: .875rem/1.4 Manrope, Arial, sans-serif; color: #c0d1c8; min-height: 0; margin: 0; padding: 0; border: 0; }
.classic-maps .map-medal { color: #e1eead; margin-top: 6px; }
.classic-maps .map-access { display: block; color: #ffdda6; margin-top: 6px; }
.classic-maps .map-access:empty { display: none; }
.classic-maps .map-selected { position: static; font: .875rem/1.4 Manrope, Arial, sans-serif; color: var(--accent); background: none; padding: 0; margin-top: 4px; }
.classic-maps #map-explanation { font: 1rem/1.5 Manrope, Arial, sans-serif; }
.classic-maps #map-explanation h3 { font-size: 1.5rem; margin: 12px 0; }
.classic-maps #map-explanation p { font-size: 1rem; line-height: 1.5; color: #d0dcd5; }
.classic-maps #map-requirements { list-style: none; padding: 0; display: grid; gap: 10px; }
.classic-maps button.primary, .classic-maps button.secondary { min-height: 56px; height: auto; font-size: 1rem; padding: 14px; }
.classic-maps .text-button { font-size: .875rem; min-height: 48px; color: var(--accent); text-align: left; margin: 8px 0 0; padding: 8px 0; }
.classic-hangar { width: 500px; padding: 0 16px 16px; max-height: calc(100dvh - 24px); overflow: auto; border-radius: 14px; }
.classic-hangar .maps-header { position: sticky; top: 0; z-index: 1; padding: 12px 0; }
.classic-hangar .profiles { margin: 12px 0 0; }
.classic-hangar .profiles button { min-height: 80px; padding: 12px; gap: 12px; }
.classic-hangar .profiles button strong { font-size: 1rem; }
.classic-hangar .profiles button small { font: .875rem/1.45 Manrope, Arial, sans-serif; color: #c2d2c9; }
.classic-hangar .profiles button b { font: .875rem/1.4 Manrope, Arial, sans-serif; color: var(--accent); white-space: normal; }

@media (max-width: 1023px) {
  .classic-layout { display: flex; flex-direction: column; gap: 18px; max-width: 560px; padding: 20px 0; }
  .classic-cover { width: 100%; min-height: 150px; padding: 16px; border-radius: 14px; background: linear-gradient(90deg, #102a32db, #102a3222), url('../../assets/racing-key-art.png') 72% 50% / cover; }
  .classic-cover h1 { max-width: 220px; font-size: 2.5rem; line-height: 1; margin: 8px 0; }
  .classic-cover .eyebrow, .classic-cover p { display: none; }
  .classic-menu .hero-art, .classic-menu .hero-shade, .classic-menu .grain { display: none; }
  .classic-menu .start-panel { width: 100%; }
}
@media (max-width: 767px) {
  .classic-menu { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .classic-menu .menu-header { min-height: 64px; gap: 8px; }
  .classic-menu .wordmark { gap: 8px; }
  .classic-menu .wordmark > svg { width: 28px; height: 28px; }
  .classic-menu .wordmark > span { font-size: 1rem; }
  .classic-menu .wordmark > span > span { font-size: .875rem; letter-spacing: .07em; margin-top: 4px; }
  .classic-layout { padding: 12px 0; gap: 12px; }
  .classic-cover { min-height: 116px; }
  .classic-cover h1 { font-size: 2rem; max-width: 170px; margin: 0; }
  .classic-menu .start-panel { gap: 12px; padding: 14px; border-radius: 12px; }
  .classic-menu .track-card { padding: 10px 8px; }
  .classic-menu .menu-footer { min-height: 48px; gap: 0 8px; }
  .classic-menu .sound-toggle span { display: none; }
  .classic-menu .sound-toggle { min-width: 48px; justify-content: center; }
  .classic-maps { width: 100%; max-width: 100%; height: 100svh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .classic-maps .maps-header { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  .classic-maps .maps-scroll { padding: 0 max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); scrollbar-gutter: auto; }
}
@media (max-width: 599px) {
  .classic-maps .maps-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 640px) and (max-width: 1023px) {
  .classic-cover { min-height: 0; background: none; padding: 0 2px; }
  .classic-cover h1 { max-width: none; font-size: 1.375rem; line-height: 1.2; margin: 0; }
  .classic-layout { gap: 8px; padding: 8px 0; }
  .classic-menu .start-panel { gap: 10px; padding: 12px; }
  .race-parameters { gap: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .classic-menu .menu-header { min-height: 56px; }
  .classic-layout { display: block; max-width: 940px; padding: 8px 0; }
  .classic-cover { display: none; }
  .classic-menu .start-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 12px; }
  .mode-section { grid-area: 1 / 1; }
  .course-section { grid-area: 2 / 1; }
  .race-parameters { grid-area: 1 / 2; }
  .classic-menu .start-actions { grid-area: 2 / 2; align-self: end; }
  .classic-menu #menu-save-notice { grid-column: 1 / -1; }
  .classic-menu:has(.save-notice:not(.hidden)) .start-actions { grid-row: 4; grid-column: 1 / -1; }
  .classic-menu .track-card { height: 100%; }
  .classic-menu .menu-footer { min-height: 48px; }
  .classic-menu .wordmark > svg { width: 28px; height: 28px; }
}
/* Real mobile Chrome can leave only 256 CSS px below its landscape toolbar. */
@media (max-height: 320px) and (orientation: landscape) {
  .classic-menu .menu-header { min-height: 48px; }
  .classic-menu .wordmark > span { font-size: 1rem; }
  .classic-menu .wordmark > span > span { font-size: .875rem; margin-top: 4px; }
  .classic-layout { padding: 4px 0; }
  .classic-menu .start-panel { gap: 2px 12px; padding: 4px 8px; }
  .classic-menu .race-parameters { gap: 4px; }
  .classic-menu #difficulty-hint { margin: 0; line-height: 1.2; }
  .classic-menu .course-section, .classic-menu .start-actions { align-self: start; }
  .classic-menu .track-card { height: auto; padding: 4px 8px; }
  .classic-menu .track-card > svg { width: 48px; height: 48px; }
  .classic-menu .track-title { font-size: 1rem; }
}