/* Keep phone refinements separate from the authored desktop presentation. */
.touch-copy{display:none}
.keyboard-settings{margin:12px 0}
.keyboard-settings summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:11px;font-weight:800;color:#514059}
.keyboard-settings:not([open])>:not(summary){display:none}
.touch-controls button[data-held=true]{background:#ffcf79;color:#21162f;border-color:#fff0cf;box-shadow:inset 0 0 0 2px #21162f}

@media(pointer:coarse){
 .overlay,#intro-panel,.result-panel{
  top:calc(12px + var(--safe-top));bottom:auto;
  left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));
  width:auto;min-width:0;max-width:480px;margin-inline:auto;transform:none;
  max-height:calc(100vh - 24px - var(--safe-top) - var(--safe-bottom));
  max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
  padding:16px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;
 }
 .overlay select{font-size:16px;letter-spacing:.015em;min-height:48px;max-width:100%}
 .overlay button{min-height:48px}
 .overlay .menu-actions button{font-size:11px;padding:10px 5px}
 #intro-panel::after{content:none}
 #intro-panel h1{font-size:32px;margin:6px 0 10px}
 #intro-panel .subtitle{margin:6px 0 12px}
 #intro-panel #start-button{margin:10px 0 14px;font-size:13px}
 #control-copy{display:none}
 .touch-copy{display:block;font-size:12px;line-height:1.5;margin:12px 0}
 .keyboard-settings{border-top:1px solid #ac937c}
 .keyboard-settings summary{min-height:48px;font-size:12px}
 .keyboard-settings summary::after{content:'+';margin-left:auto;font-size:18px}
 .keyboard-settings[open] summary::after{content:'−'}
 .assist-option{min-height:48px;grid-template-columns:24px 1fr;font-size:12px;margin:6px 0;padding:4px 0}
 .assist-option input{width:20px;height:20px}
 .assist-option small{font-size:11px;line-height:1.4}
 .audio-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:8px 10px;margin:12px 0}
 .audio-settings label{min-height:44px;font-size:12px;line-height:1.3}
 .touch-controls{
  --thumb-size:clamp(56px,16vw,64px);--go-size:clamp(64px,18vw,72px);
  left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));
  gap:12px;align-items:flex-end;
 }
 .touch-controls:not([hidden]){display:flex}
 .steering{display:flex;gap:6px}
 .pedals{display:grid;grid-template-columns:var(--thumb-size) var(--go-size);grid-template-rows:var(--thumb-size) var(--go-size);gap:6px;align-items:end}
 .touch-controls button{width:var(--thumb-size);min-width:var(--thumb-size);height:var(--thumb-size);border-width:2px;font-size:22px;touch-action:none;-webkit-touch-callout:none}
 .pedals button{font-size:12px;font-weight:800;letter-spacing:.04em;padding:0}
 .pedals [data-control=brake]{grid-column:1;grid-row:2}
 .pedals [data-control=throttle]{grid-column:2;grid-row:2;width:var(--go-size);min-width:var(--go-size);height:var(--go-size);font-size:17px}
 .pedals [data-control=boost]{grid-column:2;grid-row:1;width:var(--go-size);min-width:var(--go-size)}
 .telemetry b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .status-line:is([data-state=racing],[data-state=recovery],[data-state=paused],[data-state=cinematic]){display:none}
 .cinema-top{padding-left:calc(14px + var(--safe-left));padding-right:calc(14px + var(--safe-right));padding-top:calc(8px + var(--safe-top))}
 .cinema-copy{left:calc(18px + var(--safe-left));right:calc(18px + var(--safe-right));bottom:calc(18px + var(--safe-bottom))}
 .route-briefing{padding:calc(14px + var(--safe-top)) calc(14px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left))}
}
@media(pointer:coarse) and (orientation:portrait){
 #intro-panel,.result-panel{top:auto;bottom:calc(12px + var(--safe-bottom));max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));max-height:min(54dvh,calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)))}
 .status-line{bottom:calc(160px + var(--safe-bottom));max-width:calc(100vw - 24px);font-size:8px}
}
@media(pointer:coarse) and (orientation:landscape){
 #intro-panel,.result-panel{right:auto;margin-inline:0;width:clamp(220px,calc(40vw - var(--safe-left)),380px);max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));padding:12px 16px}
 #intro-panel .subtitle{display:none}
 #intro-panel h1{font-size:clamp(20px,4.2vw,28px);margin:4px 0 8px}
 #intro-panel .machine-pick{margin-bottom:8px}
 #intro-panel #start-button{margin:8px 0 12px;font-size:12px;letter-spacing:.08em;padding:10px 8px}
 #race-hud{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'telemetry pause effects' 'power speed boost';gap:4px 10px;align-items:center;padding:calc(6px + var(--safe-top)) calc(12px + var(--safe-right)) 6px calc(12px + var(--safe-left));min-height:0}
 #race-hud .brand{display:none}
 #live-pause{grid-area:pause;width:44px;height:44px}
 #effects-toggle-live{grid-area:effects;font-size:9px;padding:6px 8px}
 #race-hud .telemetry{grid-area:telemetry;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px 12px;margin:0;font-size:8px;min-width:0;max-width:390px}
 #race-hud .telemetry span{min-width:0}
 #race-hud .telemetry b{font-size:12px;display:block}
 #race-hud .power-meter{grid-area:power;position:static;width:min(100%,220px);margin:0;font-size:8px}
 #race-hud .power-meter label{margin-bottom:3px}
 #race-hud .speed{grid-area:speed;position:static;margin:0;justify-self:end;white-space:nowrap}
 #race-hud .speed b{font-size:23px}
 #race-hud .speed small{font-size:8px}
 #race-hud .boost-meter{grid-area:boost;position:static;margin:0;font-size:10px;justify-self:end;white-space:nowrap}
 #race-hud .boost-meter b{font-size:14px}
 .status-line{left:160px;right:160px;max-width:none;transform:none;font-size:8px;white-space:normal;text-align:center;line-height:1.25}
}