/* Local arcade menu skin. Intentionally isolated from the driving HUD. */
#overlay {
  --pop: #ff8cad;
  --mint: #73f4dc;
  --cream: #fff3d5;
  display: block;
  padding: calc(76px + var(--safe-t)) max(24px, calc((100vw - 1250px) / 2)) calc(42px + var(--safe-b));
  background: radial-gradient(ellipse at 12% 20%, #ff5cbe3d, transparent 52%), linear-gradient(110deg, #04222bed, #06202ac9 55%, #031419de);
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-color: #3f8f95 #06202a;
}
#overlay.hidden { display: none; }
.arcade-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: 100%; }
#overlay .menu { min-width: 0; max-width: none; padding: 8px 0; background: none; border: 0; backdrop-filter: none; }
#overlay .tag { color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .15em; margin-bottom: 22px; }
#overlay .tag b { background: var(--mint); box-shadow: 0 0 15px #73f4dc55; animation: none; }
#overlay h1 {
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  font-size: clamp(66px, 8.4vw, 124px); font-weight: 950; font-style: italic;
  line-height: .85; letter-spacing: -.07em; color: var(--cream);
  margin: 0 0 26px; transform: rotate(-4deg); transform-origin: left center;
  text-shadow: 3px 4px 0 #b0307f, 7px 9px 0 #031419;
}
#overlay h1 em { background: none; color: var(--pop); }
#overlay .arcade-tagline { font-size: clamp(19px, 2vw, 26px); font-weight: 750; letter-spacing: -.03em; color: var(--cream); margin: 0 0 8px; }
.arcade-tagline em { color: var(--mint); font-style: normal; }
.menu-art { position: relative; height: 238px; margin: 12px -10px 20px; isolation: isolate; }
.arcade-sun { position: absolute; width: 104px; height: 104px; left: 1%; top: -16px; border-radius: 50%; background: linear-gradient(#ffc2e2, #ff5cbe 55%, #ff5cbe00); opacity: .9; mask-image: linear-gradient(#000 0 52%, transparent 52% 55%, #000 55% 63%, transparent 63% 67%, #000 67% 74%, transparent 74% 79%, #000 79%); }
.menu-art::before { content: ''; position: absolute; left: 22%; right: 22%; top: 8%; bottom: 14%; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, #78f0ff40, #1f7f8c26 45%, transparent 72%); }
.arcade-grid { position: absolute; height: 110px; bottom: 20px; left: 0; right: 0; background: repeating-linear-gradient(0deg, transparent 0 20px, #78f0ff38 21px 22px), repeating-linear-gradient(90deg, transparent 0 48px, #78f0ff38 49px 50px); transform: perspective(150px) rotateX(35deg); mask-image: radial-gradient(ellipse, #000, transparent 70%); }
#menuCar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 20px #ff5cbe2a); }
.menu-art figcaption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #b9d8d4; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.air-sticker { position: absolute; right: 4%; top: 16px; padding: 14px 12px; background: var(--mint); border: 3px solid #062028; color: #142c38; box-shadow: 3px 4px 0 #031419; transform: rotate(12deg); border-radius: 16px; font-size: 17px; font-weight: 900; line-height: 1; }
#overlay .instructions { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 18px 0 0; gap: 12px 16px; }
#overlay .instructions div { color: #d6ece8; text-transform: none; letter-spacing: .015em; font-size: 12px; }
#overlay kbd { border: 1px solid #4fa3a866; border-bottom: 3px solid #4fa3a866; border-radius: 6px; background: #0b3440; min-width: 50px; height: 30px; color: var(--cream); font-weight: 700; font-size: 11px; }
#overlay .touch-note { display: none; }
.route-picker { min-width: 0; padding: 25px; border: 1px solid #5fc7c946; border-radius: 24px; background: linear-gradient(145deg, #0b3440ed, #061c24ed); box-shadow: 0 20px 60px #01090c66, inset 0 1px 0 #ffffff0f; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.arcade-stamp { border: 1px solid #5fc7c955; border-radius: 20px; padding: 6px 9px; color: #aef6f0; font-size: 9px; letter-spacing: .1em; }
#selectedRoute { margin: 15px 0 7px; font-family: 'Helvetica Neue', sans-serif; font-size: clamp(21px,2.2vw,30px); line-height: 1.15; letter-spacing: -.035em; font-weight: 850; color: var(--cream); text-wrap: balance; }
#menuCopy { margin: 0 0 18px; min-height: 42px; color: #c2dcd8; font-size: 12px; line-height: 1.65; letter-spacing: .01em; }
#menuCopy .run-stats { color: #a7c7c3; font-size: 11px; }
#overlay .courses { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; max-height: min(52vh,480px); margin: 0 0 20px; padding: 3px; scrollbar-color: #3f8f95 #06202a; scrollbar-width: thin; scroll-padding: 4px; }
#overlay .course { --tile: #73f4dc; position: relative; grid-template-columns: 29px minmax(0,1fr); gap: 9px; align-content: start; align-items: start; min-height: 83px; padding: 12px 10px; border: 1px solid #5fc7c938; border-radius: 12px; background: linear-gradient(125deg,#ffffff09,transparent), #082831; letter-spacing: 0; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease; }
#overlay .course:nth-child(3n+2) { --tile: #ff9ad4; }
#overlay .course:nth-child(3n) { --tile: #8ff3ff; }
#overlay .course .no { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--tile); color: #062028; font-size: 11px; font-weight: 900; }
#overlay .course strong { color: #effbf8; font-size: 11px; font-weight: 800; letter-spacing: .035em; line-height: 1.3; }
#overlay .course small { font-size: 10px; line-height: 1.45; color: #abcac6; letter-spacing: .01em; margin-top: 4px; }
#overlay .course .pips { grid-column: 2; color: #ffd97c; font-size: 11px; line-height: 1; letter-spacing: .12em; }
#overlay .course[aria-pressed="true"] { border-color: var(--mint); background: linear-gradient(125deg,#73f4dc20,#73f4dc06),#0c3a44; box-shadow: 0 0 0 1px #73f4dc44; }
#overlay .course:not(:disabled):hover { transform: translateY(-2px); border-color: var(--tile); background-color: #0f3f49; }
#overlay .course:disabled { opacity: 1; background: #062028; border-style: dashed; border-color: #4f8f933d; }
#overlay .course:disabled .no { color: #9dbdb9; background: #123a42; }
#overlay .course:disabled strong { color: #9dbdb9; }
#overlay .course:disabled small { color: #8fb0ac; }
#overlay .course:disabled .pips { color: #8fb0ac; font-size: 9px; letter-spacing: .035em; }
#overlay .launch-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin: 0 0 15px; }
#overlay .primary { justify-content: space-between; border: 1px solid #ffc9e6; border-radius: 12px; height: 57px; padding: 0 20px; font-size: 16px; font-weight: 900; letter-spacing: .02em; color: #2a0a22; background: linear-gradient(115deg,#ffb3dd,#ff5cbe); box-shadow: 0 5px 0 #9a2f76, 0 8px 24px #ff5cbe24; transition: transform 120ms, box-shadow 120ms; }
#overlay .primary span { color: #2a0a22; font-size: 27px; }
#overlay .primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
#overlay .primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #9a2f76; }
#overlay #modeToggle { height: 57px; padding: 0 12px; border: 1px solid #5fc7c955; border-radius: 12px; background: #082831; color: #d6ece8; font-size: 10px; letter-spacing: .07em; }
#overlay #modeToggle:disabled { opacity: .7; }
#overlay #modeToggle[aria-pressed="true"] { border-color: #ffd97c; color: #ffd97c; }
#overlay .race-note { margin: 0; color: #a7c7c3; font-size: 10px; line-height: 1.65; letter-spacing: .035em; text-transform: none; }
#overlay button:focus-visible { outline: 3px solid #fff3d5; outline-offset: 3px; }
#overlay [hidden] { display: none !important; }
#overlay[data-screen="paused"] .route-picker { align-self: center; }
#overlay[data-screen="paused"] .menu-art { opacity: .7; }
/* Driving controls must not sit on top of the menu on touch screens. */
.touch:not(.playing) { display: none; }
#game:has(#overlay:not(.hidden)) :is(#hud, #dashboard, #coach, #message) { visibility: hidden; }
#overlay:not([data-screen="title"]) .touch-note { visibility: hidden; }
@media (max-width: 1050px) {
  .arcade-layout { gap: 28px; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
  #overlay h1 { font-size: 82px; }
  .route-picker { padding: 20px; }
  #overlay .instructions { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #overlay { padding: calc(82px + var(--safe-t)) 18px calc(44px + var(--safe-b)); }
  .arcade-layout { display: block; }
  #overlay .menu { padding: 0 9px 22px; }
  #overlay .tag { margin-bottom: 12px; font-size: 9px; }
  #overlay h1, #overlay:not([data-screen="title"]) h1 { font-size: clamp(42px,10vw,70px); line-height: 1; margin: 0 0 12px; transform: rotate(-3deg); }
  #overlay h1 br { display: none; }
  #overlay h1 em::before { content: ' '; }
  #overlay .arcade-tagline { font-size: 18px; margin-bottom: 0; }
  .menu-art, #overlay .instructions { display: none; }
  .route-picker { padding: 18px; border-radius: 20px; }
  #overlay .courses { max-height: clamp(140px, calc(100dvh - 570px), 300px); }
  #overlay .course { min-height: 92px; padding: 10px 8px; gap: 7px; grid-template-columns: 24px minmax(0,1fr); }
  #overlay .course .no { width: 24px; height: 25px; font-size: 10px; }
  #overlay .course strong { font-size: 10px; }
  #overlay .primary { padding: 0 14px; font-size: 14px; }
  #overlay .launch-row { grid-template-columns: minmax(0,1fr) 95px; }
  #overlay #modeToggle { padding: 0 8px; font-size: 9px; }
  #selectedRoute { font-size: 24px; }
  #menuCopy { font-size: 11px; }
  #overlay .touch-note { display: block; font-size: 10px; margin: 8px 0 0; color: #a7c7c3; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .brand { font-size: 10px; letter-spacing: .12em; }
  .actions button { font-size: 9px; letter-spacing: .02em; }
  footer { font-size: 7px; letter-spacing: .06em; }
}
@media (max-width: 400px) {
  .topbar { justify-content: center; }
  .brand { width: 100%; text-align: center; }
  #overlay { padding-top: calc(102px + var(--safe-t)); }
  #overlay .courses { gap: 7px; }
  .route-picker { padding: 14px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  #overlay { padding-top: 65px; }
  #overlay h1 { font-size: 74px; }
  .menu-art { height: 170px; }
  .arcade-sun { width: 140px; height: 140px; }
  #overlay .courses { max-height: 33vh; }
}
@media (prefers-reduced-motion: reduce) {
  #overlay *, #overlay *::before, #overlay *::after { animation: none !important; transition: none !important; }
}

/* Leaderboard, under the level list. Same card language as the route picker. */
.board { margin: 14px 0 0; border-top: 1px solid #5fc7c933; padding: 14px 0 0; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
#boardList { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
#boardList li { display: grid; grid-template-columns: 22px 42px 1fr auto; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 12px; color: #c2dcd8; }
#boardList li:nth-child(odd) { background: #ffffff08; }
#boardList li.mine { background: #7ee8ff1f; color: var(--cream); }
#boardList .pos { color: #86aaa6; font-size: 10px; }
#boardList .who { font-weight: 800; letter-spacing: .08em; color: var(--cream); }
#boardList .val { font-variant-numeric: tabular-nums; font-weight: 700; }
#boardList .alt { color: #86aaa6; font-size: 10px; font-variant-numeric: tabular-nums; }
#boardList .board-empty { display: block; color: #86aaa6; font-size: 11px; background: none; }
.submit-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.submit-run label { color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.submit-run input { width: 84px; height: 40px; padding: 0 12px; border: 1px solid #5fc7c966; border-radius: 10px; background: #062028; color: var(--cream); font: inherit; font-size: 18px; font-weight: 800; letter-spacing: .28em; text-align: center; text-transform: uppercase; }
.submit-run input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.submit-run button { height: 40px; padding: 0 16px; border: 1px solid #7ee8ff88; border-radius: 10px; background: #7ee8ff24; color: var(--cream); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .12em; cursor: pointer; }
.submit-run button:disabled { opacity: .5; cursor: progress; }
.board-note { margin: 10px 0 0; min-height: 15px; color: #a7c7c3; font-size: 11px; line-height: 1.5; }

/* First-visit splash: the road plays behind, one button in front. Sits under the top bar (z 5) so music/sound stay usable. */
.quick { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 20px; background: radial-gradient(60% 60% at 50% 55%, rgba(4, 18, 24, .25), rgba(4, 18, 24, .7)); }
.quick[hidden] { display: none; }
.quick-card { text-align: center; }
.quick-tag { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--mint, #73f4dc); }
.quick h1 { margin: 0; font-size: clamp(64px, 14vw, 150px); line-height: .85; letter-spacing: -.06em; color: #fff3d5; text-shadow: 3px 4px 0 #b0307f, 7px 9px 0 #031419; }
.quick h1 em { font-style: normal; color: #ff8cad; }
.quick-sub { margin: 14px 0 26px; font-size: clamp(16px, 2vw, 22px); font-weight: 700; color: #fff3d5; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#quickGo { font: inherit; font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; letter-spacing: .04em; padding: 20px 38px; border-radius: 16px; border: 1px solid #ffc9e6; color: #2a0a22; cursor: pointer;
  background: linear-gradient(115deg, #ffb3dd, #ff5cbe); box-shadow: 0 6px 0 #9a2f76, 0 12px 40px rgba(255, 92, 190, .35); animation: quickPulse 1.6s ease-in-out infinite; }
#quickGo:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a2f76; }
@keyframes quickPulse { 50% { transform: scale(1.04); } }
#quickMenu { display: block; margin-top: 18px; color: #d6ece8; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #quickGo { animation: none; } }
#overlay #ghostToggle { height: 57px; padding: 0 12px; border: 1px solid #5fc7c955; border-radius: 12px; background: #082831; color: #d6ece8; font-size: 10px; letter-spacing: .07em; }
#overlay #ghostToggle[aria-pressed="true"] { border-color: #73f4dc; color: #73f4dc; }
/* Phones: the legal line sat under the touch pad mid-race; it stays on the menu and pause screens. */
body.pad #game:has(.touch.playing) footer { display: none; }