/* Compact logical-pixel interface: 4K/100% receives a 204% UI, independent of canvas resolution. */
:root { --ui-scale:1; --ui-width:100vw; --ui-height:100vh; }
/* Focus/scrollIntoView must scroll the garage, never shift the game viewport. */
html,body,#game { overflow:clip; }
#game { position:fixed; inset:0; }
#ui-layer { position:absolute; left:0; top:0; width:var(--ui-width); height:var(--ui-height); transform:scale(var(--ui-scale)); transform-origin:top left; z-index:10; pointer-events:none; }
.menu-header,.sheet-layer,.loading,.fatal { pointer-events:auto; }
.menu-copy { left:5.5%; width:min(640px,51%); }
.title-top { font-size:clamp(76px,calc(var(--ui-width) * .09),144px); }
.title-bottom { font-size:clamp(105px,calc(var(--ui-width) * .125),200px); }
.garage-card { width:min(550px,46%); padding:26px; scrollbar-color:#71809c #11192a; }
.circuit-card { width:min(1180px,95%); max-height:92%; padding:28px; }
.results-card { max-height:92%; overflow:auto; }
.garage-help,.garage-card p { font-size:12px; }
.machine-list button,.upgrade-list button { font-size:12px; }
.garage-stats span,.driver-custom label { font-size:11px; }
.upgrade-list small,.garage-roster { font-size:10px; }
.power-card { font-size:14px; }
.driver-custom input,.driver-custom select { min-height:40px; font-size:13px; }
.profile-machine > span,.profile-machine small { font-size:10px; }
.profile-machine small { max-width:300px; }
.profile-stat { font-size:15px; }
.garage-button { font-size:12px; min-height:40px; }
.header-button,.controls-strip small,.hud-kicker { font-size:11px; }
.circuit-option p { font-size:11px; line-height:1.6; }
.circuit-option-top,.circuit-option-stats { font-size:10px; }
.ability-widget { min-width:185px; padding:14px; }
.ability-widget strong { font-size:13px; }
.ability-widget small,.ability-widget em { font-size:10px; }
.ability-widget kbd { min-width:30px; height:30px; font-size:13px; }
.item-slot { min-width:185px; }
.item-name { font-size:13px; }
.customization-title { margin:20px 0 10px; font-size:12px; letter-spacing:.12em; color:var(--mint); }
.workshop-tabs { display:flex; gap:6px; margin-top:16px; }
.workshop-tabs button { flex:1; padding:12px 5px; border:1px solid var(--line); border-radius:7px; font-size:11px; }
.workshop-tabs .is-active { color:var(--amber); border-color:var(--amber); background:#ffd16615; }
.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.shop-tile { padding:14px; border:1px solid var(--line); border-radius:10px; background:#ffffff05; }
.shop-tile h4 { margin:5px 0; font-size:14px; }.shop-tile p { min-height:55px; }
.shop-tile small { font-size:10px; color:var(--amber); text-transform:uppercase; letter-spacing:.1em; }
.shop-tile button { display:block; width:100%; margin-top:8px; padding:10px 4px; border:1px solid var(--line); border-radius:5px; font-size:11px; }
.shop-tile .buy-cosmetic { color:var(--mint); border-color:#63f0c54d; }
.pilot-progress { margin-top:20px; padding:18px; border:1px solid #ffd16666; border-radius:10px; color:var(--amber); }
.pilot-progress strong { font-family:var(--display); font-size:28px; }.pilot-progress progress { width:100%; accent-color:var(--mint); }
.auto-next { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--mint); }.auto-next input { width:20px; height:20px; accent-color:var(--mint); }
.tour-next { font-size:13px; color:var(--cream-dim); }.result-actions { flex-wrap:wrap; }
.results-layer,.results-card { overflow:hidden; }.results-card { width:min(980px,94%); }
.result-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.result-actions .primary-action,.result-actions .secondary-action { min-width:0; padding:0 12px; font-size:11px; }
.pickup-legend { position:absolute; top:240px; right:30px; display:flex; flex-wrap:wrap; gap:10px; max-width:250px; padding:12px; background:#0a1022c9; border:1px solid var(--line); border-radius:8px; font-size:11px; font-weight:700; }
.pickup-legend small { width:100%; font-size:9px; color:var(--cream-dim); }.pickup-turbo { color:#ffd166; }.pickup-shield { color:#65c8ff; }.pickup-repair { color:#63f0c5; }
.item-slot.shield .item-icon { color:#65c8ff; background:#65c8ff1f; }
.item-slot.repair .item-icon { color:#63f0c5; background:#63f0c51f; }
@media(max-width:720px) {
  .results-card { padding:14px; }.results-head { padding-bottom:8px; gap:12px; }.results-head h2 { font-size:46px; }.result-badge { width:50px; height:50px; }
  .result-grid { gap:8px; padding:8px 0; }.result-row { min-height:28px; padding:0 5px; gap:7px; }
  .result-summary { padding:8px; gap:6px; }
  .result-summary .result-rewards { grid-column:1/-1; margin-top:4px; padding-top:9px; }
  .reward-totals { gap:10px; }.reward-totals dd { margin-top:3px; font-size:17px; }
  .reward-pilot { margin:6px 0; }.reward-challenge { padding:7px 0; gap:3px 8px; }
  .reward-challenge > div { gap:1px; }.reward-stars { margin-top:3px; }.reward-stars button { padding-block:5px; }
  .result-actions { grid-template-columns:1fr 1fr; padding-top:12px; gap:7px; }.result-actions button { min-height:40px; font-size:10px !important; padding:0 5px !important; }
  .tour-next { font-size:11px; margin:10px 0; }.auto-next { font-size:10px; gap:8px; }
  .workshop-tabs { position:sticky; top:-18px; background:#10172c; padding:8px 0; z-index:2; }.workshop-tabs button { font-size:10px; }
  .shop-grid { grid-template-columns:1fr; }.shop-tile p { min-height:0; }.pickup-legend { top:180px; right:12px; max-width:145px; font-size:9px; gap:5px; padding:7px; }.pickup-legend small { font-size:7px; }
  .header-actions { gap:8px; }.header-divider { display:none; }
  .menu-copy { left:20px; right:20px; width:auto; }
  .garage-card { width:auto; padding:18px; }
  .circuit-card { width:96%; padding:18px; }
  .garage-help,.garage-card p { font-size:12px; }.machine-list button { font-size:11px; }
  .profile-machine small { display:none; }.profile-machine > span { font-size:8px; }
  .profile-stat { font-size:12px; }
  .controls-strip small { font-size:8px; }.garage-button { font-size:10px; }
  .ability-widget { min-width:150px; padding:9px; }.ability-widget strong { font-size:11px; }
}
/* Every selection screen is paged. No nested scrollbars or horizontal tab strips. */
.circuit-card { display:flex; flex-direction:column; width:min(1250px,96%); max-height:94%; overflow:hidden; padding:24px; }
.circuit-head h2 { font-size:44px; }.circuit-head p { font-size:12px; margin:8px 0; }
.cup-tabs { display:grid; grid-template-columns:repeat(6,1fr); overflow:visible; padding:12px 0; gap:6px; flex-shrink:0; }
.cup-tabs button { padding:8px 4px; font-size:10px; }
.circuit-options { gap:10px; margin:4px 0; min-height:0; }
.circuit-option { min-height:0; padding:12px; display:flex; flex-direction:column; align-items:stretch; }
.circuit-option-top span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.circuit-option:disabled { opacity:1; background:#111729; color:#8d98af; }
.circuit-option:disabled .inner { stroke:#65728e; opacity:.65; }
.circuit-option:disabled h3 { color:#8994ab; }
.circuit-option.is-active .circuit-option-top { padding-right:45px; }
.circuit-option h3 { font-size:22px; margin:8px 0; }.circuit-option p { display:none; }
.circuit-option-map { height:95px; margin:4px 0; }
.circuit-option-stats { gap:5px; flex-wrap:wrap; }.circuit-option-stats span { font-size:8px; }.circuit-option-stats strong { font-size:10px; }
.circuit-footer { margin-top:14px; gap:12px; font-size:11px; }.circuit-footer button { padding:10px; border:1px solid var(--line); border-radius:6px; }.circuit-footer button:disabled { opacity:.3; }
.garage-card { display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.garage-card > .garage-help { display:none; }.garage-card h2 { font-size:42px; }
.garage-card .circuit-head { flex-shrink:0; }.garage-card .eyebrow { font-size:10px; }
.garage-card .machine-list { display:none; }
.garage-card select { width:100%; background:#0b1122; color:var(--cream); border:1px solid var(--line); border-radius:6px; padding:10px; font:inherit; font-size:12px; }
.garage-card > select { flex-shrink:0; }
.garage-panel { flex:1; min-height:0; }
.workshop-tabs { margin:0; flex-shrink:0; }
.garage-card h3 { margin:14px 0 6px; font-size:26px; }
.garage-card p { margin:9px 0; }.garage-comparison { font-size:11px !important; }
.garage-stats { margin:14px 0; }.power-card { padding:10px; font-size:13px; }
.garage-card .driver-custom { margin-top:14px; gap:10px; }
.garage-message { flex-shrink:0; min-height:18px; margin:0 !important; font-size:11px !important; }
.shop-grid { margin-top:12px; }.shop-tile { padding:12px; }.shop-tile p { min-height:56px; }
.pilot-progress { margin-top:12px; padding:12px; }.pilot-progress p { font-size:11px; }.pilot-progress strong { font-size:24px; }
.garage-roster { margin:8px 0; }.garage-roster summary { display:none; }
.garage-card .upgrade-list { margin:14px 0; }.garage-card .upgrade-list button { padding:12px; }
@media(max-width:720px) {
  .circuit-card { padding:14px; }.circuit-head h2 { font-size:30px; }.circuit-head p { font-size:10px; }
  .cup-tabs { grid-template-columns:repeat(4,1fr); }.cup-tabs button { font-size:8px; padding:7px 2px; }
  .circuit-option { padding:9px; }.circuit-option h3 { font-size:19px; }.circuit-option-map { height:76px; }
  .circuit-option-top { font-size:7px; }.circuit-option-top strong { display:none; }.circuit-option-stats span:nth-child(2) { display:none; }
  .circuit-footer { font-size:9px; gap:5px; }.circuit-footer button { padding:8px 5px; }
  .garage-card { top:25%; padding:15px; gap:8px; }.garage-card h2 { font-size:32px; }
  .garage-card .workshop-tabs { position:static; padding:0; }.workshop-tabs button { font-size:9px; padding:10px 2px; }
  .garage-card h3 { font-size:23px; margin:10px 0 4px; }.garage-card p { font-size:11px; line-height:1.4; }
  .garage-card select { padding:8px; font-size:11px; }.garage-stats { margin:10px 0; gap:8px; }
  .garage-card .driver-custom { margin-top:10px; }.garage-card .driver-custom input,.garage-card .driver-custom select { min-height:34px; }
  .shop-grid { grid-template-columns:1fr 1fr; gap:8px; }.shop-tile { padding:10px; }.shop-tile h4 { font-size:13px; }.shop-tile p { min-height:60px; font-size:10px; }
  .shop-tile button { padding:9px 3px; font-size:10px; }.shop-tile small { font-size:9px; }
  .pilot-progress { padding:10px; }.pilot-progress p { margin:6px 0; font-size:10px; }
  .garage-card .upgrade-list { margin:10px 0; gap:6px; }.garage-card .upgrade-list button { padding:10px; font-size:11px; }
  .customization-title { margin:12px 0 8px; font-size:10px; }
}
@media(max-height:650px) {
  .garage-card { top:8px; bottom:8px; left:12px; right:12px; width:auto; padding:12px; gap:6px; }
  .garage-card .circuit-head { position:absolute; right:12px; top:10px; }.garage-card .circuit-head > div { display:none; }
  .garage-card .workshop-tabs { margin-right:50px; }.garage-card > select { width:45%; }
  .garage-panel > select { position:absolute; top:58px; left:49%; width:43%; }
  .garage-card [data-tune-page="machine"] { display:grid; grid-template-columns:1fr 1fr; gap:5px 20px; align-items:center; }
  .garage-card [data-tune-page="machine"] p { margin:3px 0; }.garage-card h3 { margin:8px 0; }
  .garage-card .upgrade-list { grid-template-columns:repeat(3,1fr); }.garage-card .driver-custom { grid-template-columns:repeat(3,1fr); }
  .pilot-progress { float:left; width:38%; margin-right:15px; }.garage-card #perk-list { grid-template-columns:1fr; }
  .shop-tile p { min-height:0; }.shop-tile { padding:8px; }.shop-tile button { display:inline-block; width:47%; margin-right:2%; }
  .circuit-card { padding:12px; }.circuit-head h2 { font-size:28px; }.circuit-head p { display:none; }.cup-tabs { grid-template-columns:repeat(11,1fr); gap:4px; }
  .circuit-option-map { height:60px; }.circuit-option h3 { font-size:19px; }.circuit-footer { margin-top:5px; }
}
/* Short landscape screens keep race information beside the start controls. */
@media(max-height:520px) and (min-width:721px) {
  .inspect-hint { display:none; }
  .menu-copy { left:24px; right:24px; top:78px; bottom:14px; width:auto; transform:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-content:center; }
  .menu-copy > .eyebrow { grid-column:1; grid-row:1; }
  .menu-copy .menu-title { grid-column:1; grid-row:2; margin:10px 0 18px; }
  .menu-copy .title-top { font-size:52px; }.menu-copy .title-bottom { font-size:74px; }
  .menu-copy .start-row { grid-column:1; grid-row:3; gap:10px; }
  .menu-copy .start-button { min-width:180px; height:54px; padding-left:14px; gap:10px; }
  .menu-copy .start-label { font-size:11px; }.menu-copy .circuit-button { min-width:140px; flex:1; }
  .menu-copy .start-hint { display:none; }
  .menu-copy .menu-stats { grid-column:1; grid-row:4; margin-top:14px; }
  .menu-copy .profile-strip { grid-column:2; grid-row:1 / 3; align-self:end; margin-top:0; padding:12px; gap:8px; }
  .menu-copy .race-brief { grid-column:2; grid-row:3 / 5; align-self:start; padding:12px; }
  .menu-copy .race-challenge { grid-template-columns:1fr; gap:8px; }
  .menu-copy .race-challenge-reward { flex-direction:row; flex-wrap:wrap; align-items:baseline; text-align:left; gap:5px 10px; }
}