/* Gaia's magical racer — shared surfaces and typography.
   Layout-only legacy rules live in menu-layout; these semantic colors win even
   when a results screen injects its CSS later. Never assign label text inline. */
:root {
  --ui-ink: #202c50; --ui-muted: #52617a; --ui-paper: #fffefa;
  --ui-night: #243454; --ui-line: #c6cde0; --ui-purple: #6244a4;
  --ui-gold: #ffdc70; --ui-green: #176150;
  --ui-backdrop: radial-gradient(ellipse at 80% 20%, #e4d9fb 0, transparent 58%), linear-gradient(145deg, #edf7ff, #e9edfc 55%, #f9edda);
}
#menu, #loading { color: var(--ui-ink); background: var(--ui-backdrop); }
#menu > .vista, #loading > .vista { background: none; }
#menu > .vista > *, #loading > .vista > * { display: none; }
#menu > .vista::after, #loading > .vista::after {
  content: ''; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background: radial-gradient(circle, #899bc1 1px, transparent 1.5px) 0 0 / 28px 28px;
  mask-image: linear-gradient(transparent 35%, #000);
}
#menu .lbl, #loading .lbl { color: var(--ui-ink); -webkit-text-stroke: 0; text-shadow: none; }
#menu .ck .lt, #loading .ck .lt, #gp-podium .ck .lt { color: var(--ui-ink); text-shadow: none; animation: none; }
#menu .ck .lt::before, #menu .ck .lt::after, #loading .ck .lt::before, #loading .ck .lt::after, #gp-podium .ck .lt::before, #gp-podium .ck .lt::after { display: none; }
#menu h1 { font-size: clamp(22px, 4.4vh, 42px); letter-spacing: -.035em; }
#menu h1 .flag { display: none; }
#menu .paper, #loading .tip, #gp-podium .paper {
  background: var(--ui-paper); color: var(--ui-ink); border: 2px solid var(--ui-line); border-radius: 18px;
  box-shadow: 0 5px 0 #c7cfe1, 0 12px 24px #283a6712;
}
#menu .pick { transition: border-color .15s, background-color .15s, transform .15s; }
#menu .pick.sel { background: #fff2bb; border-color: #805d13; box-shadow: 0 4px 0 #b3903e, 0 0 0 3px #ffdc70; transform: translateY(-2px); animation: none; }
#menu .pick.sel .thumb, #menu .pick.sel canvas, #menu .class.sel .ccnum { animation: none; }
#menu .menu-path { color: var(--ui-muted); font-size: clamp(10px, 1.6vh, 14px); letter-spacing: .08em; }
#menu .menu-path b { color: var(--ui-purple); }
#menu .chosen { color: var(--ui-ink); background: #fffefa; border: 1px solid var(--ui-line); border-radius: 99px; padding: 6px 12px; }
#menu .hint { color: var(--ui-muted); font-size: clamp(11px, 1.8vh, 16px); }
#menu .hint .k, #gp-podium .hint .k { background: var(--ui-night); color: #fff; border: 0; box-shadow: none; text-shadow: none; min-width: 1.6em; }
#menu .back-button, #menu .menu-secondary { background: var(--ui-paper); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 12px; }
#menu .menu-primary { background: var(--ui-purple); color: #fff; border-color: var(--ui-purple); box-shadow: 0 4px 0 #3c286b; min-height: 40px; }
#menu :is(button, select, .pick, .tab):focus-visible { outline: 3px solid #2155ab; outline-offset: 3px; }
#menu .back-button { min-height: 36px; padding: 6px 12px; }
/* Face tiles remain one fixed viewport; the large preview is the selected state. */
#menu.racer-select h1 { font-size: clamp(19px, 3.5vh, 34px); }
#menu.racer-select .racer-card { border: 2px solid #c3cde0; background: #fffefa; border-radius: 15px; box-shadow: 0 3px 0 #c3cde0; }
#menu.racer-select .racer-card.sel { border-color: #805d13; background: #ffdf83; box-shadow: inset 0 0 0 2px #fff5cf, 0 3px 0 #805d13; }
#menu .racer-hero { border-radius: 28px; background: radial-gradient(ellipse, #fffefa 0 40%, #ffffff00 70%); }
#menu .racer-info h2 { color: var(--ui-ink); letter-spacing: -.035em; }
#menu .racer-info p { color: var(--ui-muted); }
#menu.start-screen { background: var(--ui-backdrop); }
#menu.start-screen::before { content: '✦'; position: absolute; top: 23%; left: 15%; font-size: clamp(36px, 9vw, 110px); color: #af7b16; transform: rotate(-12deg); }
#menu.start-screen::after { content: '✦'; position: absolute; top: 49%; right: 17%; font-size: clamp(22px, 5vw, 64px); color: var(--ui-purple); pointer-events: none; }
#menu.start-screen .start-badge { color: var(--ui-muted); }
#menu.start-screen .game-title { color: var(--ui-purple); font-size: clamp(36px, 8.5vh, 86px); letter-spacing: -.055em; text-shadow: 0 3px 0 #fff; }
#menu.start-screen .game-title span { color: var(--ui-ink); letter-spacing: -.035em; }
#menu.start-screen .start-button { min-width: 200px; font-size: clamp(16px, 2.6vh, 22px); }
/* Mode cards: icon + title + short purpose, with a distinct accent per activity. */
#menu .modes.four { width: min(90vw, 1120px); gap: 20px; }
#menu .modes.four .mode { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; text-align: left; padding: clamp(14px, 3vh, 28px); gap: 8px 20px; border-top: 6px solid var(--mode-accent); }
#menu .mode:nth-child(1) { --mode-accent: #b66b28; --mode-tint: #ffebca; }
#menu .mode:nth-child(2) { --mode-accent: #386cb4; --mode-tint: #e0edff; }
#menu .mode:nth-child(3) { --mode-accent: #287960; --mode-tint: #ddf2e7; }
#menu .mode:nth-child(4) { --mode-accent: #8251ae; --mode-tint: #eee0fa; }
#menu .modes.four .mode .icon { grid-row: 1 / 3; width: clamp(64px, 13vh, 104px); height: clamp(64px, 13vh, 104px); background: var(--mode-tint); border: 0; border-radius: 22px; box-shadow: none; }
#menu .modes.four .mode .icon canvas { width: 76%; height: 76%; filter: none; }
#menu .modes.four .mode .title { color: var(--ui-ink); font-size: clamp(17px, 3vh, 29px); align-self: end; }
#menu .modes.four .mode .blurb { color: var(--ui-muted); font-size: clamp(12px, 1.9vh, 17px); text-align: left; align-self: start; line-height: 1.45; font-weight: 600; }
#menu .class { padding: 4vh 2vh; gap: 2vh; border-top: 5px solid var(--ui-purple); }
#menu .class .ccnum { color: var(--ui-purple); -webkit-text-stroke: 0; text-shadow: none; }
#menu .class .tag, #menu .class .ccblurb { color: var(--ui-muted); }
#menu .class .ccblurb { font-size: clamp(12px, 1.9vh, 18px); font-weight: 600; }
#menu .cups { width: min(94vw, 1200px); gap: 20px; }
#menu .cup .head { color: var(--ui-ink); font-size: clamp(17px, 3vh, 29px); justify-content: flex-start; }
#menu .cup .race { color: var(--ui-ink); line-height: 1.25; font-size: clamp(12px, 2vh, 19px); padding: .5vh 0; }
#menu .cup .pts { color: var(--ui-muted); border-top: 1px solid var(--ui-line); line-height: 1.4; }
#menu .thumb, #loading .thumb { border: 0; border-radius: 10px; box-shadow: none; }
#menu .coin, #loading .coin { color: #593e0c; background: var(--ui-gold); border: 0; box-shadow: none; -webkit-text-stroke: 0; }
#menu .courses { width: min(94vw, 1250px); gap: clamp(10px, 2vh, 20px); }
#menu .course .title { color: var(--ui-ink); white-space: normal; line-height: 1.2; min-height: 1.2em; font-size: clamp(12px, 2vh, 20px); }
#menu .course .blurb { color: var(--ui-muted); font-weight: 600; font-size: clamp(11px, 1.7vh, 16px); }
#menu .course .extra, #menu .course .extra b { color: var(--ui-muted); }
#menu .records { width: min(94vw, 1000px); }
#menu .records h2, #menu.gp .panel h2 { color: #fff; background: var(--ui-night); border: 0; border-radius: 9px; box-shadow: none; -webkit-text-stroke: 0; padding: 9px 12px; font-size: clamp(13px, 2.3vh, 23px); }
#menu .records select { align-self: flex-end; padding: 6px 10px; background: #fff; color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 8px; font: 700 13px var(--sans); }
#menu .tab { background: #fffefa; color: var(--ui-ink); border: 2px solid var(--ui-line); box-shadow: none; padding: 8px 16px; font-size: clamp(12px, 2vh, 18px); }
#menu .tab.on { background: var(--ui-night); color: #fff; border-color: var(--ui-night); }
#menu .rec.none { opacity: 1; }
#menu .rec:nth-child(even) { background: #edf1f8; }
#menu .rec .nm, #menu .rec .tname, #menu .rec .lap b { color: var(--ui-ink); }
#menu .rec .lap, #menu .rec .race, #menu .rec .tdate, #menu .rec .tclass, #menu .trophynote, #menu .unlocks { color: var(--ui-muted); }
#menu .rec .ghost, #menu .unlocks b { color: var(--ui-green); }
#menu .rec .place { color: #73510d; -webkit-text-stroke: 0; text-shadow: none; }
#menu .medal { border: 1px solid #8e96a7; box-shadow: none; text-shadow: none; }
#menu .medal.none { color: #39455b; background: #e1e6ee; }
/* Loading and results use the same readable surfaces as selection. */
#loading .badge, #menu.gp .sub, #menu.tt .sub { color: #fff; background: var(--ui-night); border: 0; border-radius: 99px; box-shadow: none; -webkit-text-stroke: 0; padding: 8px 18px; text-align: center; }
#loading .blurb { color: var(--ui-muted); text-shadow: none; font-weight: 600; }
#loading .frame .thumb { border: 5px solid #fff; box-shadow: 0 8px 24px #24345426; transform: none; animation: none; }
#loading .tip { border-radius: 14px; font-size: clamp(12px, 2vh, 20px); }
#loading .tip b { color: var(--ui-purple); }
#loading .busy .ck { font-size: clamp(12px, 2.4vh, 24px); }
#menu.gp .row { font-family: var(--sans); }
#menu.gp .row:nth-child(odd) { background: #edf1f8; }
#menu.gp .row.you { background: #ffe59a; outline: 2px solid #916d20; animation: none; }
#menu.gp .row .pl, #menu.gp .row .nm, #menu.gp .row .tot { color: var(--ui-ink); -webkit-text-stroke: 0; text-shadow: none; }
#menu.gp .row .add { color: var(--ui-green); -webkit-text-stroke: 0; }
#menu.gp .sub, #menu.tt .sub { font-size: clamp(11px, 2vh, 19px); }
#menu.tt .bigtime { color: var(--ui-purple); -webkit-text-stroke: 0; text-shadow: none; font-variant-numeric: tabular-nums; }
#menu.tt .bigtime small, #menu.tt .ttrow, #menu.tt .ghostline, #menu.tt .nextmedal { color: var(--ui-muted); -webkit-text-stroke: 0; }
#menu.tt .newrec { color: #fff; background: var(--ui-green); border: 0; box-shadow: none; -webkit-text-stroke: 0; border-radius: 8px; padding: 6px 12px; }
#gp-podium h1 .ck .lt { color: #fff; text-shadow: 0 2px 8px #202c50; }
#gp-podium .tag { color: var(--ui-ink); background: var(--ui-paper); border: 2px solid var(--ui-line); border-radius: 12px; box-shadow: 0 4px 12px #202c5033; }
#gp-podium .tag b { color: var(--ui-purple); -webkit-text-stroke: 0; text-shadow: none; }
#gp-podium .tag.you { background: #ffe59a; }
#gp-podium > .hint { background: var(--ui-night); color: #fff; border: 0; border-radius: 12px; box-shadow: none; padding: 12px 20px; }
#gp-podium .trophy { background: #202c50c9; }
#gp-podium .trophy .info { color: var(--ui-muted); }
/* Race overlays keep their compact geometry, with opaque contrast behind text. */
:root { --hud-panel: #243454f2; --hud-line: #c6cde066; }
#item-name:not(:empty), #laptime:not(:empty), #targets:not(:empty), #replay { background: var(--hud-panel); border-radius: 7px; padding: 3px 7px; color: #fff; }
#toast:not(:empty) { text-shadow: 0 2px 3px #101a34, 0 0 8px #101a34; }
body #pause { background: #202c50bb; }
body #pause .box { background: var(--ui-paper); border: 2px solid var(--ui-line); box-shadow: 0 8px 0 #202c5033; border-radius: 22px; }
body #pause h1 { color: var(--ui-purple); }
body #pause .opt { color: var(--ui-ink); border-radius: 10px; padding: 9px 16px; font-size: clamp(13px, 2.5vh, 20px); }
body #pause .opt.sel { background: #ffe59a; border-color: #916d20; color: var(--ui-ink); }
body #pause small { color: var(--ui-muted); }
body #photo-ui .bar { background: var(--ui-night); border: 1px solid #ffffff55; border-radius: 14px; box-shadow: none; flex-wrap: wrap; }
body #photo-ui button { background: var(--ui-gold); color: var(--ui-ink); border: 0; box-shadow: none; text-shadow: none; }
body #photo-ui button.alt { background: #fff; color: var(--ui-ink); }
body #help { background: var(--ui-night); border: 1px solid #ffffff55; border-radius: 14px; }
body #help h1, body #replay b { color: var(--ui-gold); text-shadow: none; }
#circuit-intro { background: linear-gradient(transparent 35%, #172541ee); }
@media (max-height: 440px) and (orientation: landscape) {
  #menu { padding-top: 46px; padding-bottom: 32px; gap: 9px; }
  #menu h1 { font-size: 22px; }
  #menu .modes.four { gap: 10px; }
  #menu .modes.four .mode { padding: 10px; gap: 4px 10px; }
  #menu .modes.four .mode .icon { width: 54px; height: 54px; border-radius: 12px; }
  #menu .modes.four .mode .title { font-size: 16px; }
  #menu .modes.four .mode .blurb { font-size: 11px; line-height: 1.25; }
  #menu .class { padding: 18px 10px; }
  #menu .courses { gap: 8px; }
  #menu .course .blurb, #menu .course .extra { display: none; }
  #menu .course .title { font-size: 11px; }
  #menu .back-button { bottom: 4px; min-height: 28px; }
  #menu .chosen { top: 7px; font-size: 10px; }
  #menu .records { padding: 7px 12px; }
  #menu .records h2 { padding: 4px; margin: 0; }
  #menu .records .rec { font-size: 11px; padding: 2px 6px; }
  #menu .records select { padding: 2px 6px; }
  #menu .tabs { position: absolute; left: 3vw; top: 40px; flex-direction: column; }
  #menu:has(.records) .records { width: 72vw; margin-left: 18vw; }
  #menu .tab { padding: 6px; font-size: 10px; }
  #menu.gp, #menu.tt { padding: 10px 2vw; gap: 7px; }
  #menu.gp .panel h2 { padding: 4px; }
  #menu.gp .sub, #menu.tt .sub { padding: 4px 12px; }
  body #pause .box { padding: 12px; }
  body #pause .opt { padding: 6px 12px; }
}
@media (orientation: portrait) {
  #menu .modes.four { gap: 12px; width: 92vw; grid-template-columns: 1fr; }
  #menu .modes.four .mode { padding: 14px; gap: 6px 14px; }
  #menu .modes.four .mode .icon { width: 64px; height: 64px; }
  #menu .modes.four .mode .title { font-size: 19px; }
  #menu .modes.four .mode .blurb { font-size: 13px; }
  #menu .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #menu .cups { grid-template-columns: 1fr; gap: 18px; }
  #menu .cup .head { font-size: 22px; }
  #menu .cup .head canvas { width: 44px; height: 44px; }
  #menu .cup .race { font-size: 14px; }
  #menu .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #menu .course .title { font-size: 13px; }
  #menu .course .blurb { font-size: 12px; }
  #menu .records .rec { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 8px; font-size: 13px; padding: 8px; }
  #menu .rec .lap, #menu .rec .race { min-width: 0; text-align: left; grid-column: 2; }
  #menu .rec .ghost { grid-column: 2 / -1; text-align: left; }
  #menu .rec .tname { grid-column: 2 / -1; }
  #menu .rec .tdate { min-width: 0; }
  #menu.gp .panels { flex-direction: column; }
  #menu.gp .rows { height: calc(8 * 6.2vh); }
  #menu.tt .ttbox { box-sizing: border-box; width: 94vw; padding: 20px 16px; }
  #menu.tt .ttrow { font-size: 12px; }
  #menu.tt .ghostline { font-size: 12px; text-align: center; }
  #loading { padding: 5vh 5vw; gap: 12px; }
  #loading .tip { max-width: 90vw; }
  #loading .spin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #menu *, #loading *, #gp-podium * { animation: none !important; transition: none !important; }
}
/* Offline pack is available on the title; keep selection actions unobstructed. */
body:has(#menu:not(.start-screen)) #offline-pack, body:has(#loading) #offline-pack { display: none; }
@media (min-width: 1000px) and (min-height: 600px) and (pointer: fine) {
  /* A tablet can expose both a mouse and touch controls. Scale their offsets too. */
  body.touchui #coins { top: calc(var(--hud-top) + 92 * var(--hud-u)); }
  body.touchui #cc { top: calc(var(--hud-top) + 137 * var(--hud-u)); }
}
#menu.gp .row { height: 12.5%; }
#menu.gp .row .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gp-podium > .vista { background: var(--ui-backdrop); }
#gp-podium > .vista > * { display: none; }
#gp-podium h1 { width: fit-content; max-width: 85%; margin: 0 auto; padding: 8px 20px; background: var(--ui-paper); border-radius: 18px; }
#gp-podium h1 .flag { display: none; }
#gp-podium h1 .ck .lt { color: var(--ui-purple); text-shadow: none; }
#gp-podium .trophy .hint { background: var(--ui-night); color: #fff; border: 0; border-radius: 12px; box-shadow: none; padding: 8px 16px; }
@media (orientation: portrait) {
 #menu.gp { gap: 10px; padding: max(20px, env(safe-area-inset-top)) 3vw; overflow: auto; }
 #menu.gp h1 { font-size: 25px; }
 #menu.gp .panels { gap: 12px; flex-shrink: 0; }
 #menu.gp .rows { height: min(28vh, 240px); }
 #menu.gp .row { font-size: clamp(12px, 1.8vh, 16px); }
 #menu.gp .row canvas { height: 90%; }
 #menu.gp .panel h2 { font-size: 14px; padding: 6px; }
}