:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #f7fbff;
  --muted: #93a9bf;
  --cyan: #5ef4ff;
  --orange: #ff8a42;
  --red: #ff5d70;
  --panel: rgba(5, 16, 29, 0.83);
  --panel-strong: rgba(5, 14, 25, 0.94);
  --line: rgba(151, 222, 255, 0.18);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html, body, #game-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #07111e; color: var(--ink); user-select: none; }
button, input, select, kbd { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

#game-shell {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 50% 5%, rgba(48, 122, 157, 0.22), transparent 38%), #07111e;
}

#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.loading-screen {
  position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(49, 220, 232, 0.12), transparent 30%), #07111e;
  transition: opacity .45s ease, visibility .45s ease;
}
.loading-screen.is-hidden { opacity: 0; visibility: hidden; }
.loading-screen h1, .menu-brand h1 { margin: 9px 0 10px; font-size: clamp(2.3rem, 6vw, 5.4rem); line-height: .88; letter-spacing: -.07em; }
.loading-screen h1 em, .menu-brand h1 em { color: var(--orange); font-style: normal; }
.loading-screen > p:last-child { color: var(--muted); }
.loading-mark { display: flex; gap: 8px; }
.loading-mark span { width: 9px; height: 38px; border-radius: 5px; background: var(--cyan); transform: skewX(-20deg); animation: pulse 1.1s ease-in-out infinite; }
.loading-mark span:nth-child(2) { background: var(--orange); animation-delay: .12s; }
.loading-mark span:nth-child(3) { animation-delay: .24s; }
@keyframes pulse { 50% { transform: skewX(-20deg) translateY(-9px); filter: brightness(1.5); } }

.eyebrow { margin: 0; color: var(--cyan); font-size: .62rem; font-weight: 850; letter-spacing: .22em; text-transform: uppercase; }
.menu-screen { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; overflow: auto; }
.menu-backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 10, 18, .92), rgba(3, 10, 18, .58) 52%, rgba(3, 10, 18, .82)), radial-gradient(circle at 70% 25%, rgba(94, 244, 255, .12), transparent 30%); backdrop-filter: blur(7px); }
.menu-card { position: relative; width: min(820px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(17, 36, 55, .95), rgba(4, 13, 24, .96)); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 48px); }
.hero-card { width: min(940px, calc(100vw - 32px)); }
.menu-brand { display: flex; align-items: center; gap: 18px; }
.menu-brand h1 { font-size: clamp(2.7rem, 6vw, 5.1rem); margin: 4px 0; }
.brand-mark { width: 56px; height: 56px; flex: 0 0 auto; display: block; border-radius: 17px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, transparent 30%, var(--cyan) 31% 48%, transparent 49%), linear-gradient(315deg, transparent 30%, var(--orange) 31% 48%, transparent 49%), rgba(255,255,255,.04); box-shadow: 0 0 30px rgba(94,244,255,.16); }
.hero-copy, .section-copy { max-width: 680px; margin: 12px 0 25px; color: #b0c3d5; font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.65; }
.field-label { display: block; margin: 0 0 8px; color: #9fb4c8; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.text-field, .select-field { width: 100%; border: 1px solid rgba(151,222,255,.18); border-radius: 12px; background: rgba(3,13,24,.72); color: var(--ink); padding: 13px 14px; transition: border-color .2s, background .2s; }
.text-field:hover, .select-field:hover { border-color: rgba(94,244,255,.42); }
#player-name { max-width: 320px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 20px 0 25px; }
.mode-card { min-height: 98px; display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid rgba(151,222,255,.16); border-radius: 17px; background: rgba(6,18,31,.75); cursor: pointer; text-align: left; transition: transform .18s, border-color .18s, background .18s; }
.mode-card:hover { transform: translateY(-2px); border-color: rgba(94,244,255,.52); background: rgba(11,29,45,.92); }
.primary-mode { background: linear-gradient(135deg, rgba(31,111,128,.48), rgba(7,28,44,.88)); }
.mode-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: rgba(94,244,255,.1); color: var(--cyan); font-size: 1.7rem; }
.mode-card strong, .mode-card small { display: block; }
.mode-card strong { font-size: .86rem; letter-spacing: .08em; }
.mode-card small { margin-top: 5px; color: var(--muted); font-size: .7rem; }
.setup-grid { display: grid; grid-template-columns: 1fr 190px; gap: 18px; }
.track-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.track-choice { position: relative; min-height: 84px; padding: 14px; border: 1px solid rgba(151,222,255,.14); border-radius: 14px; background: rgba(4,15,27,.72); cursor: pointer; text-align: left; transition: border-color .18s, transform .18s; }
.track-choice:hover { transform: translateY(-1px); }
.track-choice.is-selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(94,244,255,.18), 0 0 24px rgba(94,244,255,.08); }
.track-choice strong, .track-choice small { display: block; }
.track-choice strong { font-size: .77rem; letter-spacing: .05em; }
.track-choice small { margin-top: 5px; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.track-choice i { position: absolute; right: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #52677b; }
.track-choice.is-selected i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.compact-options { display: grid; gap: 10px; align-content: end; }
.compact-options label { color: #9fb4c8; font-size: .68rem; font-weight: 750; }
.compact-options select { margin-top: 7px; }
.menu-status { min-height: 20px; margin: 14px 0 0; color: #a9bdd0; font-size: .74rem; }
.menu-status.is-error { color: #ff9aa8; }

.online-card { width: min(660px, calc(100vw - 32px)); }
.online-card h2, .lobby-card h2, .results-card h2 { margin: 7px 0 0; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.05em; }
.back-button { margin-bottom: 30px; }
.text-button { border: 0; background: none; color: #b3c7d9; padding: 4px; cursor: pointer; font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.text-button:hover { color: var(--cyan); }
.online-actions { display: grid; gap: 14px; margin-top: 24px; }
.action-button { min-height: 50px; border: 1px solid rgba(151,222,255,.18); border-radius: 13px; background: rgba(9,26,41,.88); color: var(--ink); padding: 12px 18px; cursor: pointer; font-size: .73rem; font-weight: 850; letter-spacing: .11em; transition: transform .18s, border-color .18s, background .18s; }
.action-button:hover { transform: translateY(-1px); border-color: rgba(94,244,255,.55); }
.action-button small { display: block; margin-top: 4px; color: #95aabd; font-size: .61rem; font-weight: 600; letter-spacing: 0; }
.primary-action { background: linear-gradient(135deg, rgba(29,129,145,.8), rgba(17,69,85,.9)); border-color: rgba(94,244,255,.38); }
.danger-action { border-color: rgba(255,93,112,.3); color: #ffbdc6; }
.join-panel { border: 1px solid rgba(151,222,255,.12); border-radius: 15px; padding: 15px; background: rgba(3,13,24,.5); }
.join-row { display: grid; grid-template-columns: 1fr 110px; gap: 9px; }
.code-field { text-transform: uppercase; letter-spacing: .28em; font-weight: 900; }

.lobby-card { width: min(680px, calc(100vw - 32px)); }
.lobby-header, .lobby-footer, .lobby-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobby-header h2 { color: var(--cyan); letter-spacing: .18em; }
.lobby-meta { margin: 18px 0 10px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.lobby-players { display: grid; gap: 7px; max-height: 350px; overflow: auto; }
.lobby-player { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 49px; padding: 9px 12px; border: 1px solid rgba(151,222,255,.1); border-radius: 12px; background: rgba(4,15,27,.68); }
.lobby-color { width: 16px; height: 16px; border-radius: 5px; background: var(--pilot-color, var(--cyan)); box-shadow: 0 0 12px color-mix(in srgb, var(--pilot-color, var(--cyan)) 45%, transparent); }
.lobby-player strong { font-size: .76rem; }
.lobby-player small { color: var(--muted); font-size: .62rem; }
.ready-state { color: #879bae; font-size: .63rem; font-weight: 850; letter-spacing: .08em; }
.ready-state.is-ready { color: var(--cyan); }
.lobby-footer { margin-top: 18px; }
.lobby-footer .action-button { min-width: 140px; }

.results-card { width: min(680px, calc(100vw - 32px)); }
.results-list { display: grid; gap: 7px; margin: 22px 0; }
.result-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 8px 13px; border: 1px solid rgba(151,222,255,.1); border-radius: 12px; background: rgba(4,15,27,.68); }
.result-row.is-local { border-color: rgba(94,244,255,.42); background: rgba(20,73,86,.36); }
.result-position { font-size: 1.1rem; font-weight: 900; }
.result-row strong, .result-row small { display: block; }
.result-row small { color: var(--muted); font-size: .62rem; margin-top: 2px; }
.result-time { font-variant-numeric: tabular-nums; color: #d4e7f6; font-size: .74rem; font-weight: 800; }
.results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.glass-panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,37,57,.87), rgba(5,14,26,.82)), var(--panel); box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(12px); }
.hud { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hud-top { position: absolute; inset: clamp(14px,2vw,28px) clamp(14px,2.4vw,36px) auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.brand-panel, .race-panel { min-height: 64px; border-radius: 16px; }
.brand-panel { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 11px; }
.mini-mark { width: 40px; height: 40px; border-radius: 12px; }
.brand-panel p, .brand-panel small { margin: 0; display: block; }
.brand-panel p { font-size: .82rem; font-weight: 900; letter-spacing: .16em; }
.brand-panel small { color: var(--muted); font-size: .56rem; font-weight: 750; letter-spacing: .13em; }
.race-panel { display: flex; align-items: stretch; padding: 9px 14px; }
.race-panel > div { min-width: 72px; display: grid; place-content: center; justify-items: center; }
.race-panel small { color: var(--muted); font-size: .53rem; font-weight: 850; letter-spacing: .17em; }
.race-panel strong { font-size: 1.2rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.race-panel strong i { padding: 0 3px; color: #60758e; font-size: .75em; font-style: normal; }
.panel-divider { width: 1px; margin: 4px 8px; background: linear-gradient(transparent, rgba(144,213,244,.25), transparent); }

.announcement { position: absolute; left: 50%; top: 17%; transform: translate(-50%, -8px); min-width: 210px; max-width: min(520px, calc(100vw - 40px)); padding: 11px 20px; border: 1px solid rgba(94,244,255,.22); border-radius: 99px; background: rgba(4,16,29,.9); box-shadow: 0 14px 40px rgba(0,0,0,.25); opacity: 0; text-align: center; color: #dffbff; font-size: .68rem; font-weight: 900; letter-spacing: .12em; transition: opacity .18s, transform .18s; }
.announcement.is-visible { opacity: 1; transform: translate(-50%, 0); }
.countdown { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) scale(.8); color: white; font-size: clamp(5rem, 14vw, 10rem); font-weight: 950; letter-spacing: -.08em; text-shadow: 0 0 45px rgba(94,244,255,.4), 0 10px 40px rgba(0,0,0,.55); opacity: 0; transition: opacity .12s, transform .18s; }
.countdown.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.countdown.is-go { color: var(--cyan); font-size: clamp(4rem, 10vw, 8rem); }

.standings-panel { position: absolute; left: clamp(14px,2.4vw,36px); top: 110px; width: min(235px, 30vw); padding: 14px; border-radius: 15px; }
.standings-panel ol { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.standing-row { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; min-height: 29px; padding: 4px 7px; border-radius: 8px; color: #aabed0; font-size: .64rem; }
.standing-row.is-local { background: rgba(94,244,255,.1); color: #effeff; }
.standing-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing-row span:first-child { color: var(--pilot-color, var(--cyan)); font-weight: 950; }
.standing-row small { color: #768da3; font-size: .55rem; }
.minimap-panel { position: absolute; right: clamp(14px,2.4vw,36px); top: 100px; width: 218px; height: 168px; padding: 8px; border-radius: 16px; }
#minimap { width: 100%; height: 100%; display: block; }

.drift-panel { position: absolute; left: 50%; bottom: clamp(127px,17vh,165px); width: min(330px, calc(100vw - 34px)); padding: 11px 13px 12px; border: 1px solid rgba(151,222,255,.14); border-radius: 13px; background: linear-gradient(145deg, rgba(8,24,40,.82), rgba(4,12,22,.86)); transform: translateX(-50%); }
.drift-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.drift-copy small, .drift-copy strong { font-size: .57rem; font-weight: 850; letter-spacing: .09em; }
.drift-copy small { color: var(--orange); }
.drift-copy strong { color: var(--cyan); }
.drift-meter { position: relative; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(149,181,204,.14); }
.drift-meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ffd0a8 44%, var(--cyan)); box-shadow: 0 0 18px rgba(94,244,255,.38); transition: width .06s linear; }
.drift-threshold { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.55); }
.drift-threshold.one { left: 38%; }.drift-threshold.two { left: 86%; }
.speed-panel { position: absolute; left: 50%; bottom: clamp(25px,4vh,45px); width: 190px; transform: translateX(-50%); text-align: center; }
.speed-panel p { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 5px; }
.speed-panel strong { font-size: clamp(2.7rem,6vw,4.5rem); line-height: .85; letter-spacing: -.09em; font-variant-numeric: tabular-nums; text-shadow: 0 8px 24px rgba(0,0,0,.45); }
.speed-panel p span { color: var(--cyan); font-size: .58rem; font-weight: 900; letter-spacing: .14em; }
.speed-bar { height: 5px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: rgba(174,207,231,.16); }
.speed-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), #e7ffff 58%, var(--orange)); transition: width .06s linear; }
.speed-panel > small { display: block; margin-top: 6px; color: #8097ac; font-size: .52rem; font-weight: 850; letter-spacing: .15em; }

.item-panel { position: absolute; left: clamp(14px,2.4vw,36px); bottom: clamp(18px,3vw,38px); min-width: 220px; min-height: 68px; display: grid; grid-template-columns: 46px 1fr 28px; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 15px; cursor: pointer; pointer-events: auto; text-align: left; }
.item-panel:hover { border-color: rgba(94,244,255,.48); }
.item-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: rgba(94,244,255,.09); color: var(--cyan); font-size: 1.5rem; }
.item-panel small, .item-panel strong { display: block; }
.item-panel small { color: #7f96aa; font-size: .51rem; font-weight: 850; letter-spacing: .15em; }
.item-panel strong { margin-top: 2px; font-size: .7rem; letter-spacing: .08em; }
kbd { min-width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid rgba(168,222,249,.24); border-bottom-color: rgba(168,222,249,.09); border-radius: 7px; background: rgba(188,229,255,.08); color: #eaf8ff; font-size: .65rem; font-weight: 850; }
.reset-button { position: absolute; right: clamp(14px,2.4vw,36px); bottom: clamp(18px,3vw,38px); min-width: 166px; min-height: 60px; display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(255,138,66,.25); border-radius: 15px; background: rgba(32,21,18,.86); cursor: pointer; pointer-events: auto; text-align: left; }
.reset-button:hover { border-color: rgba(255,138,66,.58); }
.reset-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,138,66,.1); color: var(--orange); font-size: 1.25rem; }
.reset-button strong, .reset-button small { display: block; }.reset-button strong { font-size: .65rem; letter-spacing: .1em; }.reset-button small { color: #9b887f; font-size: .55rem; margin-top: 2px; }
.network-indicator { position: absolute; right: clamp(14px,2.4vw,36px); bottom: 100px; display: grid; grid-template-columns: 8px auto; column-gap: 8px; align-items: center; padding: 8px 11px; border-radius: 11px; }
.network-indicator span { width: 7px; height: 7px; border-radius: 50%; background: #64f7b0; box-shadow: 0 0 10px #64f7b0; }
.network-indicator strong { font-size: .6rem; }.network-indicator small { grid-column: 2; color: var(--muted); font-size: .5rem; }
.debug-panel { position: absolute; right: 18px; top: 290px; width: 285px; padding: 12px; border: 1px solid rgba(94,244,255,.2); border-radius: 12px; background: rgba(2,9,16,.9); color: #b8ecf0; }
.debug-panel p { margin: 0 0 8px; color: var(--cyan); font-size: .55rem; font-weight: 850; letter-spacing: .15em; }
.debug-panel pre { margin: 0; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }

@media (max-width: 900px) {
  .setup-grid { grid-template-columns: 1fr; }.compact-options { grid-template-columns: 1fr 1fr; }
  .standings-panel { width: 200px; }.minimap-panel { width: 180px; height: 140px; }
  .brand-panel { display: none; }
}
@media (max-width: 680px) {
  .menu-screen { align-items: start; padding: 10px; }.menu-card { margin: 10px 0; padding: 22px; border-radius: 20px; }
  .menu-brand { align-items: flex-start; }.brand-mark { width: 44px; height: 44px; border-radius: 13px; }.menu-brand h1 { font-size: 2.5rem; }
  .mode-grid, .track-selector, .results-actions { grid-template-columns: 1fr; }
  .race-panel > div { min-width: 58px; }.race-panel { padding-inline: 8px; }.race-panel strong { font-size: 1rem; }
  .standings-panel { top: 91px; width: 170px; padding: 10px; }.standings-panel li:nth-child(n+5) { display: none; }
  .minimap-panel { right: 10px; top: 90px; width: 135px; height: 108px; }
  .item-panel { min-width: 165px; grid-template-columns: 40px 1fr; }.item-panel kbd { display: none; }
  .reset-button { min-width: 58px; grid-template-columns: 36px; }.reset-button > span:nth-child(2), .reset-button kbd { display: none; }
  .drift-panel { bottom: 118px; }.speed-panel { bottom: 34px; }
}
@media (max-height: 700px) and (min-width: 681px) {
  .standings-panel { top: 92px; }.minimap-panel { top: 92px; height: 135px; }.drift-panel { bottom: 105px; }.speed-panel { bottom: 20px; }
}

/* Circuit Rift 1.1: garage, route atlas and compact audio controls. */
.kart-selector { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px; }
.kart-choice { border:1px solid #344754;border-radius:10px;background:#101d2b;min-height:77px;padding:12px 8px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s; }
.kart-choice span { display:block;color:var(--kart-color);font-size:9px;letter-spacing:.16em;font-weight:800; }
.kart-choice strong { display:block;font-size:12px;margin:5px 0 3px;letter-spacing:.02em; }
.kart-choice small { display:block;font-size:9px;color:#9aafc2; }
.kart-choice.is-selected { border-color:var(--kart-color);background:color-mix(in srgb,var(--kart-color) 10%,#101d2b);box-shadow:inset 0 3px var(--kart-color); }
.garage-choice-header { display:flex;justify-content:space-between;gap:10px;align-items:baseline; }
.garage-choice-header small {color:#829bb1;font-size:10px;}
.audio-settings {margin-top:16px;border-top:1px solid #2d4353;padding-top:12px;font-size:10px;color:#d8e6ee;}
.audio-settings summary {cursor:pointer;font-weight:750;letter-spacing:.12em;}
.audio-settings summary span {margin-left:12px;color:#8fa7bd;font-weight:400;letter-spacing:0;}
.audio-sliders {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px;}
.audio-sliders label {display:grid;gap:7px;color:#9cb2c6;}
.audio-sliders input {width:100%;accent-color:#5ef4ff;}
.sound-toggle {position:absolute;z-index:30;right:26px;bottom:18px;background:#081625dc;border:1px solid #557185;border-radius:8px;padding:9px 12px;font-size:10px;letter-spacing:.09em;cursor:pointer;}
.controls-guide {color:#92a9bd;font-size:10px;line-height:1.8;margin:15px 0 0;}
.garage-showcase {position:absolute;z-index:5;right:4vw;bottom:12vh;width:34vw;pointer-events:none;text-align:right;text-shadow:0 2px 14px #07111f;}
.garage-showcase h2 {font-size:clamp(32px,4.5vw,78px);font-style:italic;letter-spacing:-.055em;margin:8px 0;color:#f3f7fb;}
.garage-showcase p {font-size:12px;color:#d4e8ef;}
.garage-showcase>small {display:block;font-size:9px;color:#9cb8c6;letter-spacing:.06em;margin-top:28px;}
.track-choice svg {height:44px;width:78px;float:left;margin:0 12px 0 -2px;overflow:visible;}
.track-choice .track-distance {font-size:9px;letter-spacing:.1em;color:var(--cyan);margin-bottom:4px;}
.track-choice {min-height:82px;}
.track-choice small {font-size:10px;}
#main-menu .menu-status:empty {display:none;}
@media(min-width:1050px) {
 #main-menu {justify-content:flex-start;padding-left:3vw;}
 #main-menu .hero-card {width:610px;padding:25px 27px;max-height:calc(100vh - 42px);overflow-y:auto;}
 #main-menu .menu-backdrop {background:linear-gradient(90deg,#040d19c9 0%,#040d19a3 37%,#040d1920 65%,transparent);backdrop-filter:none;}
 #main-menu h1 {font-size:42px;}
 #main-menu .hero-copy {font-size:12px;margin:14px 0;}
 #main-menu .mode-grid {margin:14px 0;gap:10px;}
 #main-menu .mode-card {padding:13px;}
 #main-menu .setup-grid {grid-template-columns:1fr 94px;gap:12px;}
 #main-menu .track-choice {padding:10px;}
 #main-menu .track-choice small:not(.track-distance) {display:none;}
 .track-selector {gap:8px;}
}
@media(max-width:1049px) {.garage-showcase{display:none;} .kart-selector{gap:6px;} .kart-choice{padding:10px 6px;} }
@media(max-width:620px) {.kart-selector{grid-template-columns:repeat(2,1fr);} .sound-toggle{right:12px;bottom:8px;} .audio-sliders{gap:8px;} .garage-choice-header small{display:none;}}

.item-panel {width:290px;min-height:90px;}
.item-panel .item-description {font-size:10px;line-height:1.4;letter-spacing:0;font-weight:400;max-width:175px;color:#a4bccc;margin-top:5px;}
@media(max-width:650px){.item-panel{width:215px;}.item-panel .item-description{display:none;}}

/* 1.2: responsive cockpit and safe-area-aware landscape touch layout. */
html,body,#game-shell{height:100dvh;overscroll-behavior:none}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#game-canvas{touch-action:none}
.menu-screen{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));overscroll-behavior:contain}
.menu-card{max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin;scrollbar-color:#416779 transparent}
.preferences{display:flex;gap:14px;align-items:center;margin-top:15px;font-size:11px;color:#b4cbd7}
.preferences>label:first-child{display:flex;align-items:center;gap:12px;flex:1}
.preferences select{padding:9px;font-size:11px;max-width:210px}
.check-option{display:flex;align-items:center;gap:6px}
.powerup-guide{font-size:10px;border-top:1px solid #284354;margin-top:14px;padding-top:14px}
.powerup-guide summary{cursor:pointer;font-weight:800;letter-spacing:.12em}
.powerup-guide summary>span{font-weight:400;letter-spacing:0;color:#91aabd;margin-left:8px}
#powerup-legend{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:18px}
.powerup-entry{display:flex;gap:9px;align-items:flex-start}
.powerup-entry svg{width:33px;height:33px;flex:0 0 33px}
.powerup-entry strong{font-size:11px;color:#e7f1fa}
.powerup-entry p{font-size:10px;line-height:1.5;color:#91aabd;margin:4px 0}
.app-actions{display:flex;gap:17px;align-items:center;margin-top:18px}
.app-actions button{font-size:10px;min-height:32px}
#offline-status{font-size:10px;color:#9bcaba;margin-left:auto}
.pwa-status{font-size:11px;line-height:1.5;color:#a9bfd3;margin:4px 0 0}
.pwa-status:empty{display:none}
.item-icon svg,#touch-item-icon svg{width:32px;height:32px}
#pickup-hint{position:absolute;z-index:7;left:50%;top:107px;transform:translateX(-50%);padding:5px 11px;background:#071422bd;border:1px solid #49657966;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:10px;pointer-events:none}
#pickup-hint svg{width:26px;height:26px}
#speed-vignette{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 42%,transparent 48%,#061e3590 100%);opacity:var(--rush,0);transition:opacity .2s}
#race-actions{position:absolute;z-index:13;right:max(14px,env(safe-area-inset-right));top:110px;display:flex;gap:6px}
#race-actions button{width:40px;height:40px;border:1px solid #65809180;border-radius:10px;background:#071827d9;font-size:21px;cursor:pointer}
#mobile-reset{display:none}
.pause-screen,.rotate-screen{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:#04101eed;backdrop-filter:blur(9px);padding:24px;text-align:center}
.pause-card{width:min(360px,92vw);padding:28px;border:1px solid #3e5d71;border-radius:22px;background:#102333}
.pause-card h2{font-size:25px;margin:12px 0}.pause-card p{font-size:13px;color:#abc5d5;line-height:1.6}
.pause-card button{width:100%;margin-top:12px;min-height:48px}
.rotate-screen h2{font-size:30px;margin:16px 0 10px}.rotate-screen p{color:#a0b5c8;line-height:1.6;font-size:14px}
.rotate-symbol{display:block;font-size:70px;color:#60e7ef}.rotate-screen button{margin-top:26px;min-height:44px}
#touch-controls{position:absolute;inset:0;z-index:12;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}
#touch-steer{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(23px,env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;border:1px solid #9ae8f35e;background:radial-gradient(circle,#16354782,#09192491);box-shadow:inset 0 0 0 10px #7debf308;pointer-events:auto;touch-action:none}
#touch-steer>span{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.18em;color:#c2e4ed}
#touch-steer>small{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:10px;color:#accad4}
#touch-knob{position:absolute;width:54px;height:54px;left:36px;top:36px;border-radius:50%;border:1px solid #bbf4fa9c;background:radial-gradient(circle at 35% 30%,#416a7cc9,#15354ae6);box-shadow:0 6px 16px #0006;pointer-events:none}
#touch-steer.is-held{border-color:#a0f5f6b3;box-shadow:inset 0 0 0 10px #7debf310,0 0 16px #61e1e51c}
#touch-steer.is-held #touch-knob{border-color:#d2ffff;background:radial-gradient(circle at 35% 30%,#568a9ce6,#204b60f2)}
.touch-pedals{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:178px;height:148px}
.touch-key{position:absolute;pointer-events:auto;touch-action:none;border:1px solid #a9e7f065;border-radius:17px;background:#102a3bd9;color:#e0f2f8;font-weight:800;font-size:11px;letter-spacing:.08em;box-shadow:0 5px 18px #0003}
.touch-key.is-held{background:#61e1e5c9;color:#09202a;border-color:#c6ffff;transform:scale(.97)}
.touch-brake{right:0;top:0;width:78px;height:58px;background:#3e2633d9;border-color:#d28e9d7a}
.touch-drift{right:0;bottom:0;width:84px;height:66px;border-color:#efa86291;background:#4b3522de}
.touch-item{left:0;top:32px;width:78px;height:78px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}
.touch-item small{font-size:7px;line-height:1.1;letter-spacing:.01em;max-width:64px;text-align:center}
body.touch-race #hud .item-panel,body.touch-race #reset-button{display:none}
body.touch-race #mobile-reset{display:block}
body.touch-race .standings-panel{display:none}
body.touch-race .controls-guide{display:none}
body.touch-race .hud-top{top:max(9px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:auto}
body.touch-race .race-panel{padding:7px 9px;gap:6px;border-radius:12px}
body.touch-race .race-panel>div{min-width:48px}
body.touch-race .race-panel strong{font-size:16px}body.touch-race .race-panel small{font-size:8px}
body.touch-race .race-panel .panel-divider{height:25px}
body.touch-race .brand-panel{display:none}
body.touch-race #race-actions{top:max(10px,env(safe-area-inset-top))}
body.touch-race .minimap-panel{top:59px;right:max(14px,env(safe-area-inset-right));width:102px;height:78px;padding:3px;background:#04142373;border:0}
body.touch-race .speed-panel{bottom:19px;width:140px}
body.touch-race .speed-panel strong{font-size:42px}
body.touch-race .speed-panel>small{display:none}
body.touch-race .drift-panel{bottom:85px;width:170px;padding:7px 9px;background:#061725b0;border:0}
body.touch-race .drift-copy{gap:5px}.touch-race .drift-copy small,.touch-race .drift-copy strong{font-size:7px;letter-spacing:.02em}
body.touch-race .sound-toggle{display:none}
body.touch-race .announcement{top:72px;font-size:10px;max-width:55vw;padding:8px 10px}
body.touch-race #pickup-hint{top:49px;font-size:9px;padding:4px 8px}
body.touch-race #pickup-hint svg{width:20px;height:20px}
body.touch-race .network-indicator{top:140px;bottom:auto;right:16px;padding:5px;background:#04142391}
body.touch-race .countdown{font-size:90px}
@media (pointer:coarse) and (orientation:landscape){
 .menu-screen{display:flex;align-items:flex-start;justify-content:center;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
 .menu-card,#main-menu .hero-card{width:min(980px,100%);max-height:calc(100dvh - 24px);margin:0;padding:18px 22px;border-radius:18px}
 .menu-backdrop{backdrop-filter:blur(2px)}
 #main-menu .hero-card{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start}
 .menu-brand,.hero-copy,.garage-choice-header,.kart-selector,.setup-grid,.audio-settings,.powerup-guide,.preferences,.app-actions,.controls-guide,#menu-status,#pwa-status{grid-column:1/-1}
 .menu-brand h1,#main-menu h1{font-size:30px}.menu-brand .brand-mark{width:40px;height:40px;border-radius:11px}
 .menu-brand{gap:12px}.menu-brand .eyebrow{font-size:8px}
 .hero-copy{font-size:11px;margin:8px 0 12px;line-height:1.5}
 #player-name{height:40px;grid-row:auto;max-width:none;font-size:16px}
 .field-label[for=player-name]{grid-column:1;align-self:end;font-size:10px;margin:0 0 6px}
 .mode-grid{grid-column:2;grid-row:3/5;margin:0;gap:8px;grid-template-columns:1fr 1fr}
 .mode-card{padding:9px;min-height:62px;gap:8px}.mode-icon{display:none}.mode-card strong{font-size:10px}.mode-card small{font-size:9px}
 .garage-choice-header{margin-top:16px}.kart-selector{grid-template-columns:repeat(4,1fr);margin-bottom:12px}.kart-choice{min-height:56px;padding:8px}.kart-choice small{display:none}
 .setup-grid{grid-template-columns:1fr 120px;gap:12px}.track-selector{grid-template-columns:repeat(2,1fr);gap:8px}.track-choice{min-height:64px;padding:8px}.track-choice svg{width:45px;height:31px;margin-right:8px}.track-choice strong{font-size:10px}.track-choice small:not(.track-distance){display:none}
 .compact-options{grid-template-columns:1fr;gap:6px}.compact-options select{padding:7px;margin-top:4px;font-size:12px}
 .sound-toggle{display:none}.garage-showcase{display:none}
 .online-card,.lobby-card,.results-card{max-width:640px}
}
@media (pointer:coarse) and (orientation:portrait){
 .menu-card{padding:19px;max-height:calc(100dvh - 24px);margin:0;width:100%}
 .menu-screen{align-items:start;padding:12px}.menu-brand h1{font-size:34px}
 .hero-copy{font-size:12px;line-height:1.6}.mode-grid{grid-template-columns:1fr 1fr;gap:8px}.mode-card{padding:11px;min-height:75px}.mode-icon{display:none}.mode-card strong{font-size:10px}.mode-card small{font-size:10px}
 .track-selector{grid-template-columns:1fr 1fr}.track-choice{padding:9px;min-height:75px}.track-choice svg{float:none;width:48px;height:26px;margin:0}.track-choice strong{font-size:10px}.track-choice small:not(.track-distance){display:none}
 .kart-selector{grid-template-columns:repeat(2,1fr)}.preferences{flex-wrap:wrap}.preferences>label:first-child{flex-basis:100%}.sound-toggle{display:none}
 #player-name{font-size:16px}.app-actions{gap:12px}.powerup-guide summary>span{display:block;margin:6px 0 0}
}
@media(max-height:360px) and (orientation:landscape){
 #touch-steer{width:108px;height:108px;bottom:13px;left:18px}#touch-knob{left:26px;top:26px}
 .touch-pedals{bottom:12px;right:18px}.touch-race .speed-panel{bottom:15px}.touch-race .drift-panel{bottom:73px}
}
@media(prefers-reduced-motion:reduce){#speed-vignette{display:none}.loading-mark span{animation:none}*{scroll-behavior:auto!important}}

/* Hobby friends mode: invitations must remain readable and selectable on touch screens. */
.peer-panel { margin: 16px 0; padding: 16px; background: rgba(10,31,45,.9); border: 1px solid rgba(121,208,234,.3); border-radius: 12px; text-align: left; }
.peer-panel h3, .peer-panel summary { font-size: 14px; letter-spacing: .05em; margin: 0 0 10px; }
.peer-panel summary { cursor: pointer; }
.peer-panel p, .peer-note { font-size: 12px; line-height: 1.6; color: #b8cddd; overflow-wrap: anywhere; }
.peer-panel label { margin: 10px 0 6px; }
.peer-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.peer-code, body.supabase-mode #room-code { display: block; width: 100%; min-height: 54px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; touch-action: auto; }
body.supabase-mode .lobby-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
body.supabase-mode .online-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
.peer-paused-banner { position: fixed; top: 82px; left: 50%; transform: translateX(-50%); width: min(90vw,600px); padding: 12px 18px; border: 1px solid #eebd6a; border-radius: 8px; background: #21201a; color: #ffe4ad; text-align: center; z-index: 70; font-size: 13px; }
@media (max-height: 500px) { body.supabase-mode .lobby-card, body.supabase-mode .online-card { max-height: calc(100dvh - 12px); } .peer-panel { padding: 10px; } .peer-paused-banner { top: 48px; font-size: 11px; padding: 6px; } }

body.supabase-mode .lobby-player strong, body.supabase-mode .lobby-player small { display: block; line-height: 1.5; }

/* Circuit Rift cockpit polish: a light, typography-led HUD that lets the track breathe. */
:root {
  --hud-white: #f6f7f4;
  --hud-cyan: #14e7ef;
  --hud-cyan-soft: rgba(20, 231, 239, .68);
  --hud-shadow: 0 3px 18px rgba(0, 0, 0, .5);
}

#main-menu .menu-backdrop {
  background: linear-gradient(90deg, rgba(3, 10, 18, .93), rgba(3, 10, 18, .68) 40%, rgba(3, 10, 18, .1) 76%, transparent), radial-gradient(circle at 80% 32%, rgba(94, 244, 255, .1), transparent 31%);
  backdrop-filter: blur(3px);
}

#main-menu .hero-card {
  border-color: rgba(163, 226, 239, .2);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(9, 25, 40, .91), rgba(3, 12, 22, .78));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(14px);
}

#main-menu .hero-card::before {
  position: absolute;
  inset: 0 14% auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 231, 239, .7), transparent);
  content: "";
  opacity: .7;
}

#main-menu .garage-choice-header {
  border-top: 1px solid rgba(151, 222, 255, .11);
  padding-top: 17px;
}

.garage-showcase {
  z-index: 21;
  right: clamp(28px, 5vw, 92px);
  bottom: clamp(46px, 11vh, 120px);
  width: min(35vw, 520px);
  text-shadow: 0 3px 20px rgba(0, 0, 0, .8);
}

.garage-showcase .eyebrow { color: var(--hud-cyan); }
.garage-showcase h2 { font-size: clamp(34px, 4.8vw, 78px); letter-spacing: -.07em; }
.garage-showcase p { margin: 0; color: rgba(232, 246, 250, .82); font-size: 13px; }
.garage-showcase > small { color: rgba(185, 219, 226, .72); letter-spacing: .13em; }
body:not(.garage-inspecting) .garage-showcase { padding:14px 18px; background:linear-gradient(90deg,transparent,rgba(7,17,31,.78)); border-radius:4px; }
body:not(.garage-inspecting) .garage-showcase p,body:not(.garage-inspecting) .garage-showcase > small { color:#e8f6fa; }

@media (min-width: 901px) {
  #main-menu .menu-backdrop { backdrop-filter: none; }

  /* Main race telemetry is intentionally frameless, like a broadcast overlay. */
  #hud .hud-top {
    top: clamp(22px, 3vw, 44px);
    right: clamp(28px, 3.8vw, 66px);
    left: clamp(28px, 3.8vw, 66px);
    height: 116px;
    display: block;
  }

  #hud .brand-panel { display: none; }

  #hud .race-panel {
    position: relative;
    display: block;
    width: 100%;
    height: 116px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  #hud .race-panel > div {
    position: absolute;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 0;
  }

  #hud .race-panel > div:nth-of-type(1) { top: 0; left: 0; }
  #hud .race-panel > div:nth-of-type(2) { top: 55px; left: 0; gap: 9px; }
  #hud .race-panel > div:nth-of-type(3) { top: -2px; right: 0; justify-content: flex-end; }
  #hud .race-panel small { color: rgba(246, 247, 244, .82); font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
  #hud .race-panel strong { color: var(--hud-white); font-size: clamp(1.8rem, 3.2vw, 3.35rem); font-weight: 950; letter-spacing: -.055em; line-height: .86; text-shadow: var(--hud-shadow); }
  #hud .race-panel > div:nth-of-type(1) strong,
  #hud #lap-current { color: var(--hud-cyan); }
  #hud .race-panel > div:nth-of-type(2) strong { font-size: clamp(1.3rem, 2.1vw, 2.35rem); }
  #hud .race-panel > div:nth-of-type(3) small { display: none; }
  #hud .race-panel > div:nth-of-type(3) strong { font-size: clamp(2.15rem, 4.4vw, 4.55rem); letter-spacing: -.075em; }
  #hud .race-panel strong i { padding: 0 4px; color: rgba(246, 247, 244, .82); font-size: .75em; }
  #hud .panel-divider { display: none; }

  #hud .standings-panel {
    top: 148px;
    left: clamp(28px, 3.8vw, 66px);
    width: 194px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: .62;
  }
  #hud .standings-panel .eyebrow { display: none; }
  #hud .standings-panel ol { gap: 1px; margin: 0; }
  #hud .standing-row { min-height: 22px; padding: 2px 0; border-radius: 0; font-size: .6rem; text-shadow: var(--hud-shadow); }
  #hud .standing-row.is-local { background: transparent; color: var(--hud-white); }

  #hud .minimap-panel {
    top: auto;
    right: auto;
    left: clamp(28px, 3.8vw, 66px);
    bottom: clamp(106px, 13vh, 136px);
    width: 224px;
    height: 176px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 55%, rgba(3, 12, 19, .3), transparent 72%);
    box-shadow: none;
    backdrop-filter: none;
    opacity: .9;
  }

  #hud .drift-panel {
    bottom: clamp(28px, 4.2vh, 48px);
    width: min(290px, 27vw);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #hud .drift-copy { margin-bottom: 6px; text-shadow: var(--hud-shadow); }
  #hud .drift-meter { height: 5px; background: rgba(174, 207, 231, .22); box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }

  #hud .speed-panel {
    left: auto;
    right: clamp(28px, 3.8vw, 66px);
    bottom: clamp(27px, 4.2vh, 48px);
    width: min(258px, 25vw);
    transform: none;
    text-align: right;
  }
  #hud .speed-panel p { position: relative; justify-content: flex-end; padding-bottom: 18px; }
  #hud .speed-panel strong { color: var(--hud-white); font-size: clamp(3.8rem, 7vw, 7.4rem); font-weight: 950; letter-spacing: -.1em; text-shadow: var(--hud-shadow); }
  #hud .speed-panel p span { position: absolute; right: 2px; bottom: 0; color: var(--hud-cyan); font-size: .66rem; letter-spacing: .16em; }
  #hud .speed-bar { height: 8px; margin-top: 8px; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(237, 242, 240, .4) 0 12px, transparent 12px 16px); }
  #hud .speed-bar i { background: repeating-linear-gradient(90deg, var(--hud-cyan) 0 12px, transparent 12px 16px); box-shadow: none; }
  #hud .speed-panel > small { margin-top: 7px; color: rgba(246, 247, 244, .68); font-size: .55rem; letter-spacing: .15em; text-shadow: var(--hud-shadow); }

  #hud .item-panel {
    left: clamp(28px, 3.8vw, 66px);
    bottom: clamp(24px, 3.6vh, 42px);
    width: 220px;
    min-width: 0;
    min-height: 64px;
    grid-template-columns: 38px 1fr 26px;
    gap: 9px;
    padding: 7px 10px;
    border-color: rgba(151, 222, 255, .18);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(5, 17, 28, .66), rgba(3, 11, 19, .36));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(7px);
  }
  #hud .item-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 1.2rem; }
  #hud .item-panel small { font-size: .49rem; }
  #hud .item-panel strong { font-size: .65rem; }
  #hud .item-panel .item-description { margin-top: 3px; font-size: 9px; }

  #hud .reset-button {
    right: calc(clamp(28px, 3.8vw, 66px) + 52px);
    top: 110px;
    bottom: auto;
    min-width: 136px;
    min-height: 48px;
    grid-template-columns: 30px 1fr 25px;
    gap: 7px;
    padding: 7px 9px;
    border-color: rgba(255, 138, 66, .26);
    border-radius: 10px;
    background: rgba(22, 16, 15, .62);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(7px);
  }
  #hud .reset-icon { width: 29px; height: 29px; border-radius: 8px; font-size: 1.05rem; }
  #hud .reset-button strong { font-size: .6rem; }
  #hud .reset-button small { font-size: .51rem; }
  #hud .network-indicator { right: clamp(28px, 3.8vw, 66px); bottom: 106px; opacity: .78; }
}

/* Racing typography follows the compact italic instrument layout of the art target. */
#racer-total { color: #f5f6ed; font-size: .8rem; font-style: italic; font-weight: 800; }
@media (min-width: 901px) {
  #hud .race-panel strong, #hud .speed-panel strong, #racer-total {
    font-family: Impact, "Arial Narrow", sans-serif;
    font-synthesis: style;
    font-weight: 400;
    font-style: italic;
    letter-spacing: .005em;
    text-shadow: 0 2px 14px #06181966;
  }
  #hud .race-panel > div:nth-of-type(1) small { display: none; }
  #hud .race-panel > div:nth-of-type(1) strong { font-size: 56px; }
  #racer-total { font-size: 29px; }
  #hud .race-panel > div:nth-of-type(2) { top: 67px; border-top: 1px solid #eef4eb80; padding-top: 9px; gap: 12px; }
  #hud .race-panel > div:nth-of-type(2) small { font-size: 21px; font-style: italic; }
  #hud .race-panel > div:nth-of-type(2) strong { font-size: 29px; }
  #hud .race-panel > div:nth-of-type(3) strong { font-size: 48px; letter-spacing: .015em; }
  #hud .speed-panel strong { font-size: 86px; letter-spacing: .02em; }
  #hud .speed-panel p span { font-size: 13px; font-style: italic; }
  #hud .speed-panel { bottom: 35px; }
  #hud .standings-panel { top: 166px; opacity: .8; }
  #hud .drift-panel { bottom: 27px; width: 230px; }
  #hud .minimap-panel { bottom: 119px; width: 207px; }
  #race-actions { opacity: .55; transition: opacity .15s; }
  #race-actions:hover, #race-actions:focus-within { opacity: 1; }
}

/* Compact instruments also apply to short windows and touch landscape. */
@media (max-width: 900px) and (orientation: landscape), (max-height: 600px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  #hud .hud-top { display:block; top:max(16px,env(safe-area-inset-top)); left:max(22px,env(safe-area-inset-left)); right:max(22px,env(safe-area-inset-right)); height:72px; }
  #hud .brand-panel, #hud .standings-panel, #hud .panel-divider { display:none; }
  #hud .race-panel { display:block; position:relative; width:100%; height:72px; min-height:0; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }
  #hud .race-panel > div { position:absolute; display:flex; gap:7px; min-width:0; padding:0; align-items:baseline; }
  #hud .race-panel strong, #hud #racer-total, #hud .speed-panel strong { font-family:Impact,"Arial Narrow",sans-serif; font-synthesis:style; font-style:italic; font-weight:400; letter-spacing:.01em; text-shadow:0 2px 10px #071721a0; }
  #hud .race-panel > div:nth-of-type(1) { top:0; left:0; }
  #hud .race-panel > div:nth-of-type(1) small { display:none; }
  #hud .race-panel > div:nth-of-type(1) strong { font-size:34px; color:var(--cyan); }
  #hud #racer-total { font-size:19px; }
  #hud .race-panel > div:nth-of-type(2) { top:36px; left:0; gap:7px; border-top:1px solid #ecf4ee70; padding-top:6px; }
  #hud .race-panel > div:nth-of-type(2) strong { font-size:19px; }
  #hud .race-panel > div:nth-of-type(2) small { font-size:12px; font-style:italic; }
  #hud .race-panel > div:nth-of-type(3) { top:0; right:48px; }
  #hud .race-panel > div:nth-of-type(3) strong { font-size:29px; }
  #hud .race-panel > div:nth-of-type(3) small { display:none; }
  #hud .minimap-panel { top:auto; left:22px; right:auto; bottom:79px; width:112px; height:88px; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }
  #hud .speed-panel { bottom:20px; left:auto; right:22px; width:128px; transform:none; text-align:right; }
  #hud .speed-panel p { justify-content:flex-end; }
  #hud .speed-panel strong { font-size:48px; }
  #hud .speed-panel p span { font-size:9px; }
  #hud .speed-panel > small { display:none; }
  #hud .speed-bar { height:5px; }
  #hud .item-panel { bottom:16px; left:22px; width:177px; min-width:0; min-height:48px; padding:6px 8px; gap:7px; grid-template-columns:29px 1fr 20px; }
  #hud .item-icon { width:28px; height:28px; font-size:18px; }
  #hud .item-panel strong { font-size:9px; }
  #hud .item-panel small { font-size:7px; }
  #hud .item-description { display:none; }
  #hud .reset-button { top:68px; bottom:auto; right:22px; min-width:36px; min-height:36px; display:block; padding:4px; background:#08172490; }
  #hud .reset-button > span:not(.reset-icon), #hud .reset-button kbd { display:none; }
  #hud .reset-icon { width:28px; height:28px; font-size:18px; }
  #hud .drift-panel { bottom:20px; width:155px; padding:0; border:0; background:none; box-shadow:none; }
  #hud .drift-copy small, #hud .drift-copy strong { font-size:7px; }
  #hud .drift-meter { height:4px; }
  #hud .announcement { top:58px; max-width:48vw; padding:6px 12px; font-size:9px; }
  #pickup-hint { top:17px; padding:4px 8px; font-size:8px; }
  #pickup-hint svg { width:22px; height:22px; }
  #race-actions { top:13px; right:18px; }
  #race-actions button { width:32px; height:32px; font-size:17px; }
  .sound-toggle { bottom:4px; right:22px; padding:3px 7px; font-size:7px; }
  body.touch-race #hud .item-panel, body.touch-race #hud .reset-button { display:none; }
  body.touch-race #hud .speed-panel { top:90px; left:auto; right:22px; bottom:auto; transform:none; text-align:right; width:105px; }
  body.touch-race #hud .speed-panel p { justify-content:flex-end; }
  body.touch-race #hud .minimap-panel { top:92px; bottom:auto; height:65px; width:90px; }
  body.touch-race #hud .drift-panel { top:166px; right:22px; left:auto; bottom:auto; transform:none; width:105px; }
  body.touch-race #hud .race-panel > div:nth-of-type(3) { right:88px; }
}

/* Image Gen interface-v3: vehicle-led studio menu, with all setup controls retained. */
@media (min-width:1050px) and (min-height:650px) {
  #main-menu { padding-left:4vw; }
  #main-menu .menu-backdrop { background:linear-gradient(90deg,#04070cec 0%,#04070cbe 29%,#04070c22 51%,transparent 66%); backdrop-filter:none; }
  #main-menu .hero-card { width:min(420px,35vw); padding:10px 0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; max-height:calc(100dvh - 50px); scrollbar-width:thin; }
  #main-menu .hero-card::before { display:none; }
  #main-menu .menu-brand { margin-bottom:24px; gap:14px; }
  #main-menu h1 { font-size:42px; font-style:italic; line-height:.98; }
  #main-menu .brand-mark { width:44px; height:50px; flex:0 0 44px; border-radius:3px; transform:skew(-10deg); }
  #main-menu .eyebrow { font-size:8px; letter-spacing:.22em; }
  #main-menu .hero-copy { display:none; }
  #main-menu .field-label { font-size:9px; letter-spacing:.16em; }
  #main-menu #player-name { height:39px; padding:8px 12px; border-radius:3px; background:#ffffff08; }
  #main-menu .mode-grid { grid-template-columns:1fr; gap:9px; margin:20px 0; }
  #main-menu .mode-card { min-height:48px; padding:12px 18px; border-radius:3px; border-color:#d6e7ec40; background:linear-gradient(100deg,#ffffff0a,#ffffff02); transform:skew(-7deg); }
  #main-menu .mode-card > span { transform:skew(7deg); }
  #main-menu .mode-card strong { font-family:Impact,'Arial Narrow',sans-serif; font-size:25px; font-style:italic; letter-spacing:.035em; font-weight:400; }
  #main-menu .mode-card small, #main-menu .mode-icon { display:none; }
  #main-menu .primary-mode { background:linear-gradient(100deg,#064955,#02adb8); border-color:#48e2e3; box-shadow:0 0 25px #08cbd51c; }
  #main-menu .garage-choice-header { border:0; padding-top:0; margin-top:18px; }
  #main-menu .garage-choice-header small { font-size:8px; }
  #main-menu .kart-selector { gap:8px; margin-bottom:18px; }
  #main-menu .kart-choice { min-height:40px; padding:8px 2px; border:0; border-bottom:1px solid #adbcc847; border-radius:0; background:none; text-align:center; }
  #main-menu .kart-choice span, #main-menu .kart-choice small { display:none; }
  #main-menu .kart-choice strong { margin:0; font-size:11px; font-style:italic; }
  #main-menu .kart-choice.is-selected { color:#2ce2e8; border-bottom:2px solid #2ce2e8; box-shadow:0 8px 13px -10px #12e5e5; background:none; }
  #main-menu .setup-grid { grid-template-columns:1fr; gap:12px; }
  #main-menu .track-choice { min-height:49px; padding:8px; border-radius:3px; background:#090e1490; }
  #main-menu .track-choice svg { width:42px; height:29px; margin:0 8px 0 0; }
  #main-menu .track-choice strong { font-size:10px; }
  #main-menu .track-choice .track-distance { font-size:7px; margin:1px 0 4px; }
  #main-menu .track-choice i { top:8px; right:8px; width:4px; height:4px; }
  #main-menu .compact-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  #main-menu .compact-options label { display:flex; align-items:center; gap:10px; font-size:9px; }
  #main-menu .select-field { min-height:32px; padding:6px 9px; border-radius:3px; font-size:10px; }
  #main-menu .audio-settings { margin-top:16px; padding-top:12px; }
  #main-menu .preferences { font-size:9px; gap:10px; }
  .garage-showcase { right:5vw; bottom:9vh; width:40vw; }
  .garage-showcase h2 { font-family:Impact,'Arial Narrow',sans-serif; font-weight:400; font-size:62px; letter-spacing:.02em; }
  .garage-showcase > small { margin-top:15px; font-size:8px; }
}

/* Keep telemetry legible against bright clouds without a dashboard-sized panel. */
#hud .race-panel strong, #hud .race-panel small, #hud #racer-total { text-shadow:0 2px 3px #03101ed9,0 0 14px #03101e80; }
@media (min-width:901px) and (min-height:601px) {
  #hud .standings-panel { opacity:1; width:194px; }
  #hud .standing-row { min-height:24px; padding:3px 7px; color:#eaf1f2; font-size:11px; background:linear-gradient(90deg,#071722ad,transparent); text-shadow:0 1px 3px #000; border-left:2px solid transparent; }
  #hud .standing-row.is-local { background:linear-gradient(90deg,#07545bc9,#07212932); border-left-color:#26ebed; }
  #hud .standing-row small { color:#c4d7df; font-size:9px; }
}

/* Desktop edge controls share the telemetry inset; touch retains its own layout. */
@media (min-width:901px) and (min-height:601px) and (pointer:fine) {
  body:not(.touch-race) #hud .race-panel > div:nth-of-type(2) { gap:10px; padding-top:8px; }
  body:not(.touch-race) #hud .drift-copy { letter-spacing:.08em; }
  body:not(.touch-race) #hud .item-panel {
    width:214px;
    min-height:52px;
    grid-template-columns:46px minmax(0,1fr) 22px;
    gap:10px;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    text-shadow:0 1px 4px #03101e;
  }
  body:not(.touch-race) #hud .item-icon {
    width:46px;
    height:46px;
    border:1px solid #a4dae35c;
    border-radius:5px;
    background:#071722ad;
    box-shadow:inset 0 1px #ffffff12,0 2px 10px #03101e38;
  }
  body:not(.touch-race) #hud .item-icon:has(svg) { border-color:var(--hud-cyan-soft); background:#063139c9; }
  body:not(.touch-race) #hud .item-panel small { color:#c4d7df; font-size:8px; letter-spacing:.13em; }
  body:not(.touch-race) #hud .item-panel strong { margin-top:4px; color:var(--hud-white); font-size:11px; letter-spacing:.05em; line-height:1.25; }
  body:not(.touch-race) #hud .item-panel .item-description,
  body:not(.touch-race) #hud .reset-button small {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  body:not(.touch-race) #hud .item-panel kbd,
  body:not(.touch-race) #hud .reset-button kbd {
    width:22px;
    min-width:22px;
    height:22px;
    padding:0;
    border:1px solid #d9edf14d;
    border-radius:3px;
    background:#07172280;
    color:#eaf1f2;
    font-size:9px;
  }
  body:not(.touch-race) #hud .item-panel:hover .item-icon,
  body:not(.touch-race) #hud .item-panel:focus-visible .item-icon { border-color:var(--hud-cyan); background:#063139e6; }
  body:not(.touch-race) #hud .reset-button {
    top:calc(clamp(22px,3vw,44px) + 65px);
    right:calc(clamp(28px,3.8vw,66px) + 46px);
    min-width:100px;
    min-height:36px;
    grid-template-columns:20px 1fr 22px;
    gap:6px;
    padding:5px 7px;
    border:1px solid #c4d7df26;
    border-radius:4px;
    background:#07172270;
    box-shadow:none;
    backdrop-filter:none;
  }
  body:not(.touch-race) #hud .reset-icon { width:20px; height:24px; border-radius:0; background:none; color:#eaf1f2; font-size:19px; }
  body:not(.touch-race) #hud .reset-button strong { font-size:9px; letter-spacing:.08em; }
  body:not(.touch-race) #race-actions { top:calc(clamp(22px,3vw,44px) + 65px); right:clamp(28px,3.8vw,66px); opacity:1; }
  body:not(.touch-race) #race-actions button { width:36px; height:36px; border:1px solid #c4d7df26; border-radius:4px; background:#07172270; font-size:18px; }
  body:not(.touch-race) #hud .reset-button:hover,
  body:not(.touch-race) #race-actions button:hover { border-color:#b5eaf48c; background:#071722c9; }
}

/* Reference gameplay keeps instruments on the edges and feedback contextual. */
#hud:not(.has-drift-feedback) .drift-panel { visibility:hidden; }
#hud:not(.has-surface-feedback) .speed-panel > small { visibility:hidden; }
#hud:not(.show-race-order) .standings-panel { display:none; }
@media (min-width:901px) and (min-height:601px) and (pointer:fine) {
  body:not(.touch-race) #hud .race-panel strong,
  body:not(.touch-race) #hud #racer-total,
  body:not(.touch-race) #hud .speed-panel strong {
    font-family:Arial,Helvetica,sans-serif;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.055em;
    text-shadow:0 2px 5px #03101e70;
  }
  body:not(.touch-race) #hud .race-panel > div:nth-of-type(3) strong { font-size:44px; letter-spacing:-.025em; }
  body:not(.touch-race) #hud .race-panel > div:nth-of-type(2) small { font-family:Arial,Helvetica,sans-serif; font-size:23px; letter-spacing:0; }
  body:not(.touch-race) #hud .minimap-panel { bottom:28px; width:190px; height:165px; opacity:1; background:none; }
  body:not(.touch-race) #hud .item-panel {
    left:calc(clamp(28px,3.8vw,66px) + 205px);
    bottom:40px;
    width:80px;
    min-height:80px;
    grid-template-columns:80px;
    gap:0;
    text-align:center;
  }
  body:not(.touch-race) #hud .item-panel .item-icon {
    position:relative;
    isolation:isolate;
    width:80px;
    height:80px;
    border:0;
    border-radius:0;
    clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);
    --item-bezel:linear-gradient(135deg,#e1e6e3 0%,#718185 19%,#c9d0cc 22%,#3d4d53 47%,#17272d 53%,#849395 79%,#d5dcd6 82%,#4f6267 100%);
    background:var(--item-bezel);
    box-shadow:none;
  }
  body:not(.touch-race) #hud .item-panel:hover .item-icon,
  body:not(.touch-race) #hud .item-panel:focus-visible .item-icon { background:var(--item-bezel); }
  body:not(.touch-race) #hud .item-panel .item-icon::before {
    content:'';
    position:absolute;
    inset:6px;
    z-index:-1;
    clip-path:inherit;
    background:radial-gradient(circle at 45% 34%,#29434a,#0a1b23 65%,#030c12);
    box-shadow:inset 0 0 0 2px #07141c,inset 0 0 0 3px #b8d2d33b;
  }
  body:not(.touch-race) #hud.has-held-item .item-panel .item-icon::before {
    background:linear-gradient(90deg,#0ab8c0 0 3%,transparent 3% 97%,#0ab8c0 97%),radial-gradient(circle at 45% 34%,#245159,#0a1b23 65%,#030c12);
  }
  body:not(.touch-race) #hud .item-panel .item-icon svg { width:46px; height:46px; filter:drop-shadow(0 2px 3px #0009); }
  body:not(.touch-race) #hud .item-panel > span:nth-child(2) { position:absolute; left:50%; top:100%; width:150px; transform:translateX(-50%); }
  body:not(.touch-race) #hud .item-panel small { display:none; }
  body:not(.touch-race) #hud .item-panel strong { margin-top:7px; font-size:10px; text-shadow:0 1px 3px #000,0 0 8px #03101e; }
  body:not(.touch-race) #hud .item-panel kbd { position:absolute; right:-5px; bottom:-5px; background:#10212bf2; }
  body:not(.touch-race) #hud:not(.has-held-item) .item-panel { opacity:.65; }
  body:not(.touch-race) #hud:not(.has-held-item) .item-panel > span:nth-child(2) { visibility:hidden; }
  body:not(.touch-race) #hud .item-panel:hover,
  body:not(.touch-race) #hud .item-panel:focus-visible { opacity:1; }
  body:not(.touch-race) #hud .reset-button { opacity:.65; background:#07172238; }
  body:not(.touch-race) #race-actions button { background:#07172238; }
  body:not(.touch-race) #hud .reset-button:hover,
  body:not(.touch-race) #hud .reset-button:focus-visible { opacity:1; }
  body:not(.touch-race) #pickup-hint { top:auto; bottom:140px; left:calc(clamp(28px,3.8vw,66px) + 205px); transform:none; padding:6px 9px; border:1px solid #91b0b35c; border-left:2px solid #14e7ef; border-radius:2px; background:linear-gradient(100deg,#0a2028e8,#071722b8); color:#eaf4f4; font-size:9px; letter-spacing:.035em; text-shadow:0 1px 3px #000; }
}

/* Full-screen vehicle inspection also gives compact/touch menus a clear car view. */
.inspect-car {width:100%;display:flex;justify-content:space-between;align-items:center;min-height:38px;padding:8px 12px;margin:-8px 0 16px;border:1px solid #3e626b;border-radius:3px;background:#0b1b2299;color:#b8f3f4;font-size:10px;letter-spacing:.1em;}
#garage-inspector {position:absolute;inset:0;z-index:12;pointer-events:none;}
#garage-orbit {position:absolute;inset:70px 0 145px;pointer-events:auto;touch-action:none;cursor:grab;outline:none;}
#garage-orbit:focus-visible {outline:1px solid #4ce8e960;outline-offset:-12px;}
#garage-orbit.is-dragging {cursor:grabbing;}
#garage-inspector button {pointer-events:auto;min-width:44px;min-height:44px;border:1px solid #6599a3;border-radius:4px;background:#071720db;color:#e5fbfc;font-size:11px;font-weight:700;letter-spacing:.07em;padding:10px 16px;}
#garage-inspector button:hover {border-color:#4ef1e7;background:#0d4854;}
#inspect-back {position:absolute;left:24px;top:24px;}
.inspect-hint {position:absolute;right:24px;top:25px;font-size:10px;letter-spacing:.10em;color:#b8d6dd;}
.inspect-toolbar {position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;}
body.garage-inspecting #main-menu .hero-card {visibility:hidden;pointer-events:none;}
body.garage-inspecting #main-menu {pointer-events:none;}
body.garage-inspecting #main-menu .menu-backdrop {opacity:0;pointer-events:none;}
body.garage-inspecting .garage-showcase {display:block;right:5%;bottom:85px;width:90%;text-align:center;}
body.garage-inspecting .garage-showcase h2 {font-size:30px;margin:3px 0;}
body.garage-inspecting .garage-showcase > small,body.garage-inspecting .garage-showcase .eyebrow {display:none;}
body.garage-inspecting .sound-toggle {display:none;}
@media(max-width:700px),(max-height:550px){
 #inspect-back {top:12px;left:12px;}
 .inspect-hint {top:57px;left:16px;right:auto;font-size:8px;}
 #garage-orbit {inset:82px 0 120px;}
 .inspect-toolbar {bottom:12px;gap:5px;}
 #garage-inspector button {padding:9px 10px;font-size:10px;}
 body.garage-inspecting .garage-showcase {bottom:65px;}
 body.garage-inspecting .garage-showcase h2 {font-size:23px;}
 body.garage-inspecting .garage-showcase p {font-size:10px;}
}

@media(max-height:550px){
 body.garage-inspecting .garage-showcase {top:15px;right:18px;bottom:auto;width:auto;text-align:right;}
 body.garage-inspecting .garage-showcase p {display:none;}
}

.paint-header {display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;gap:8px;}
.paint-header .field-label {margin:0;}
#paint-name {font-size:10px;color:#c1d9de;}
.paint-selector {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin-bottom:18px;}
.paint-choice {position:relative;min-width:0;min-height:36px;padding:5px;border:1px solid #38505a;border-radius:3px;background:#09121a;}
.paint-choice::before {content:'';display:block;height:20px;border-radius:2px;background:linear-gradient(145deg,#ffffff69,transparent 55%,#00000046),var(--paint);}
.paint-choice[aria-pressed=true] {border-color:#78f3ef;box-shadow:0 0 0 1px #78f3ef;}
.paint-choice[aria-pressed=true]::after {content:'✓';position:absolute;inset:5px;color:#fff;text-shadow:0 1px 3px #000;font-size:16px;font-weight:800;}
@media(pointer:coarse){.paint-choice{min-height:44px;}.paint-choice::before{height:26px;}}

/* Compact garage: a clear live-render viewport beside a separately scrollable setup. */
#garage-preview { display:none; }
@media (max-width:1049px), (max-height:649px), (pointer:coarse) {
  #main-menu { --preview-height:clamp(190px,32dvh,300px); display:block; padding:0; overflow:hidden; }
  #main-menu .menu-backdrop { background:none; backdrop-filter:none; pointer-events:none; }
  #garage-preview { display:block; position:absolute; left:12px; right:12px; top:env(safe-area-inset-top,0px); height:calc(var(--preview-height) - env(safe-area-inset-top,0px)); pointer-events:none; }
  #garage-preview > .eyebrow { position:absolute; top:12px; left:6px; font-size:9px; text-shadow:0 1px 6px #000; }
  #inspect-preview { position:absolute; bottom:10px; right:0; min-height:44px; padding:10px 14px; border:1px solid #88d5df70; border-radius:8px; background:#071720c9; color:#d8fbfa; font-size:10px; letter-spacing:.08em; pointer-events:auto; }
  #main-menu .hero-card { position:absolute; inset:var(--preview-height) 0 0; display:block; width:100%; max-height:none; margin:0; padding:20px max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; border-radius:22px 22px 0 0; border:1px solid #6cafbd40; background:linear-gradient(150deg,#10232df5,#060e17fa); backdrop-filter:none; scrollbar-width:thin; }
  #main-menu .menu-brand { gap:10px; margin-bottom:18px; }
  #main-menu .menu-brand h1 { font-size:32px; }
  #main-menu .brand-mark { width:36px; height:40px; flex:0 0 36px; border-radius:8px; }
  #main-menu .hero-copy { display:none; }
  #main-menu .eyebrow { font-size:8px; }
  #main-menu #player-name { max-width:none; height:44px; font-size:16px; }
  #main-menu .mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 20px; }
  #main-menu .mode-card { min-height:66px; padding:12px 10px; border-radius:10px; transform:none; }
  #main-menu .mode-icon { display:none; }
  #main-menu .mode-card strong { font-size:11px; }
  #main-menu .mode-card small { font-size:10px; line-height:1.4; }
  #main-menu .garage-choice-header { margin-top:12px; }
  #main-menu .kart-selector { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
  #main-menu .kart-choice { min-height:58px; padding:10px; border-radius:8px; }
  #main-menu .kart-choice strong { font-size:12px; }
  #main-menu .kart-choice small { display:none; }
  #main-menu .paint-selector { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  #main-menu .paint-choice { min-height:44px; }
  #main-menu .paint-choice::before { height:28px; }
  #main-menu .inspect-car { min-height:44px; margin:0 0 20px; border-radius:8px; }
  #main-menu .setup-grid { grid-template-columns:1fr; gap:16px; }
  #main-menu .track-choice { min-height:78px; padding:10px; border-radius:8px; }
  #main-menu .track-choice strong { font-size:11px; }
  #main-menu .track-choice svg { float:none; width:48px; height:26px; margin:0; }
  #main-menu .compact-options { grid-template-columns:1fr 1fr; }
  #main-menu .preferences { flex-wrap:wrap; }
  #main-menu .preferences > label:first-child { flex-basis:100%; }
  #main-menu .select-field { min-height:44px; font-size:16px; }
  #main-menu .check-option { min-height:44px; }
  #main-menu .audio-settings summary, #main-menu .powerup-guide summary { min-height:44px; padding:12px 0; }
  #main-menu .audio-sliders input { min-height:44px; }
  #main-menu .app-actions { flex-wrap:wrap; gap:10px; }
  .menu-screen .text-button { min-height:44px; min-width:44px; }
  #main-menu .controls-guide { display:none; }
  body:not(.garage-inspecting) .garage-showcase { display:none; }
  body:not(.touch-race) .sound-toggle { display:none; }
  body.garage-inspecting #garage-preview { visibility:hidden; }
}
@media (orientation:landscape) and (max-width:1049px), (orientation:landscape) and (max-height:649px), (orientation:landscape) and (pointer:coarse) {
  #main-menu { --setup-width:46%; }
  #main-menu .hero-card { inset:0 auto 0 0; width:var(--setup-width); border-radius:0 20px 20px 0; padding-top:max(16px,env(safe-area-inset-top)); }
  #garage-preview { left:calc(var(--setup-width) + 12px); right:max(12px,env(safe-area-inset-right)); top:max(12px,env(safe-area-inset-top)); bottom:max(12px,env(safe-area-inset-bottom)); height:auto; }
  #main-menu .menu-brand h1 { font-size:28px; }
  #main-menu .mode-card small { display:none; }
  #main-menu .mode-card { min-height:48px; }
  #main-menu .garage-choice-header small { display:none; }
}
/* The optional race fullscreen action shares the compact pause/reset control rail. */
#race-actions #race-fullscreen { width:auto; min-width:44px; min-height:44px; padding:6px 9px; font-size:9px; letter-spacing:.04em; }
body.touch-race #race-actions { align-items:center; }
body.touch-race #race-actions button { min-width:44px; min-height:44px; }
body.touch-race #race-actions:has(#race-fullscreen:not([hidden])) { top:10px; right:max(12px,env(safe-area-inset-right)); flex-wrap:nowrap; justify-content:flex-end; max-width:none; }
body.touch-race #race-actions #race-fullscreen { order:3; width:92px; }
/* Keep the timer clear of both pause/reset and the optional fullscreen retry. */
body.touch-race #hud .race-panel > div:nth-of-type(3) { right:110px; }
body.touch-race:has(#race-fullscreen:not([hidden])) #hud .race-panel > div:nth-of-type(3) { right:210px; }

/* Mobile route awareness: above the left thumb, clear of lap and action controls. */
body.touch-race #hud .minimap-panel { display:block; top:88px; left:max(16px,env(safe-area-inset-left)); right:auto; bottom:auto; width:106px; height:82px; padding:4px; border:1px solid #b7e6ec25; border-radius:10px; background:#06141b48; opacity:.88; pointer-events:none; backdrop-filter:none; }
@media (max-height:360px) and (orientation:landscape) {
 body.touch-race #hud .minimap-panel { top:84px; width:88px; height:68px; padding:3px; }
}