#touchControls,#rotateHint{display:none}button{touch-action:manipulation}body{overscroll-behavior:none}input,select{font-size:16px}.screen{height:100%;overflow-y:auto;padding-bottom:max(30px,env(safe-area-inset-bottom))}.titlefooter{pointer-events:none}.mainbuttons{flex-wrap:wrap}.formrow{gap:12px}
@media(pointer:coarse){body.riding #touchControls{display:flex;position:fixed;inset:auto max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));justify-content:space-between;align-items:end;z-index:8;pointer-events:none}#touchControls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;min-height:48px;min-width:58px;padding:10px 8px;background:#172735df;border:1px solid #e5e3d078;color:white;font-size:11px;font-weight:bold;border-radius:12px}#touchControls button.pressed{background:#df6934}#touchControls .gas{background:#a84929;min-width:100px}.touch-steer{display:grid;grid-template-columns:repeat(2,64px);gap:7px}.touch-steer button:last-child{grid-column:span 2}.touch-actions{display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:6px;max-width:380px}#hud{padding:10px max(14px,env(safe-area-inset-right))}#hudpause{min-width:60px;min-height:42px}.hudbottom{bottom:140px;left:15px;right:15px}.speedbox strong{font-size:38px}.gauges{width:165px;margin-top:8px}.gauge{margin-top:5px}.hudmap{display:none}.heatbox{width:130px}.positionbox strong{font-size:35px}.hudrace{font-size:10px}.hudtime{font-size:12px}#turnwarning{top:70px;font-size:10px;padding:6px}#centerMessage{top:40%}#centerMessage strong{font-size:55px!important}#centerMessage small{font-size:9px}#tutorialToast{bottom:160px;font-size:10px;padding:7px}.titlefooter{display:none}.titlebody{margin-top:10px}h1{font-size:65px!important}.titlecopy,.livecaption{display:none}.mainbuttons button{min-height:44px}.screen{padding:14px max(18px,env(safe-area-inset-left))}.heading{font-size:34px}.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.topline{margin-bottom:12px}.panel{padding:16px}.keys{grid-template-columns:1fr 1fr}}
@media(pointer:coarse) and (orientation:portrait){body.riding #rotateHint{display:flex;position:fixed;inset:0;z-index:15;background:#142331f5;color:#ffd4a0;align-items:center;justify-content:center;text-align:center;padding:40px;font-size:24px;pointer-events:none}.cards,.upgrades{grid-template-columns:1fr}.formrow{grid-template-columns:1fr}.titlebody h1{font-size:60px!important}}
@media(pointer:coarse) and (max-height:420px){.hudbottom{bottom:125px}.gauges{width:140px}.heatbox{display:none}.touch-actions{max-width:340px}#touchControls button{min-height:44px}h1{font-size:46px!important}.tagline{display:none}}

#raceStandings{position:fixed;right:28px;top:115px;z-index:4;width:205px;background:#10202be0;border-left:2px solid #ed9e62;padding:7px;pointer-events:none;font:11px Arial}#raceStandings[hidden],#connectionBadge[hidden]{display:none}#raceStandings div{display:grid;grid-template-columns:18px 1fr 40px;gap:5px;padding:5px}#raceStandings b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#raceStandings .self{color:#ffd891;background:#ec713220}#raceStandings small{text-align:right;color:#bed0d5}#connectionBadge{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:6;font:9px Arial;letter-spacing:.08em;background:#123632d9;color:#a0e5c8;padding:5px 9px;pointer-events:none}#connectionBadge.warning{background:#743a21;color:#fff0ca}@media(pointer:coarse){#raceStandings{top:75px;right:12px;width:142px;font-size:9px;padding:3px}#raceStandings div{padding:3px;grid-template-columns:12px 1fr 31px}#connectionBadge{top:auto;bottom:120px;font-size:8px}}

/* v4.1: thumb zones, safe areas, compact landscape HUD and readable menus. */
@media (pointer:coarse), (max-width:900px) {
 .screen{box-sizing:border-box;overflow-x:hidden;scroll-padding:20px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .screen button,.panel button,.mainbuttons button{min-height:48px;white-space:normal;line-height:1.25}
 .panel{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
 .formrow input,.formrow select{width:100%;box-sizing:border-box;min-height:44px}
 .formrow input[type=checkbox]{width:26px;height:26px;min-height:26px;justify-self:end}
 .mainbuttons{gap:10px}.resultstats{grid-template-columns:repeat(2,minmax(0,1fr))}
 table{font-size:11px}th,td{padding:8px 5px}.topline{flex-wrap:wrap;gap:10px}
}
@media (pointer:coarse) {
 body.riding #touchControls{display:grid;grid-template-columns:144px minmax(0,1fr) 252px;gap:12px;align-items:end;bottom:max(12px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
 #touchControls button{box-sizing:border-box;min-width:0;min-height:52px;padding:8px 5px;border-radius:16px;font-family:Arial,sans-serif;font-size:13px;letter-spacing:.02em;border:1px solid #9ab4c27a;box-shadow:0 4px 12px #0006;background:#152c3bea;-webkit-tap-highlight-color:transparent}
 #touchControls button small{display:block;font-size:8px;letter-spacing:.06em;margin-top:4px;opacity:.8}
 #touchControls button.pressed{background:#f8b36b;color:#101d27;transform:scale(.96)}
 #touchControls .touch-steer{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #touchControls .touch-steer button{height:66px;font-size:23px}
 #touchControls .touch-steer .brake{height:52px;font-size:13px;background:#642f36ed}
 .touch-tools{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;max-width:240px;justify-self:center}
 #touchControls .touch-tools button{min-height:44px;padding:6px 9px;font-size:10px;border-radius:11px}
 #touchCruise[aria-pressed=true]{background:#176354!important;border-color:#8ae8c3!important}
 #touchControls .touch-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;max-width:none}
 #touchControls .attack{grid-column:span 3;height:72px;font-size:19px;background:#b94d2beF;border-color:#ffb178}
 #touchControls .kick,#touchControls .boost,#touchControls .gas{grid-column:span 2;height:56px;min-width:0}
 #touchControls .kick{background:#795022ed}#touchControls .gas{background:#206155ed}
 .hudbottom{bottom:166px;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
 .speedbox strong{font-size:32px}.speedbox{gap:8px}.gear{font-size:12px;padding:4px 7px}
 .gauges{width:154px;margin-top:6px}.gauge{grid-template-columns:48px 1fr 24px;gap:5px;font-size:8px}
 .heatbox{display:none}#raceStandings{width:130px;top:72px}#connectionBadge{bottom:166px;max-width:35vw;text-align:center}
 #tutorialToast{bottom:170px;max-width:34vw;font-size:10px;line-height:1.35}#notice{bottom:auto;top:65px;padding:9px 13px;max-width:70vw}
 #hudpause{min-height:46px;min-width:52px;margin-left:10px;font-size:12px}
 .hudtime{font-size:13px}.hudrace{margin-left:10px;padding-left:10px}.hudrace b{font-size:11px}
 .progresswrap{margin-top:8px}.positionbox strong{font-size:32px}#turnwarning{top:63px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:450px){
 .titlebody{margin-top:0}h1{font-size:46px!important;margin:8px 0!important}.mainbuttons{margin-top:10px}.eyebrow{font-size:10px}
 .hudbottom{bottom:158px}.hudrace .hudlabel{display:none}.hudtime .hudlabel{display:none}
 #raceStandings div:not(.self){display:none}#raceStandings{top:60px}#centerMessage strong{font-size:42px!important}#centerMessage small{padding:6px;max-width:240px}
 #tutorialToast{display:none}
}
@media (pointer:coarse) and (max-width:700px){
 body.riding #touchControls{grid-template-columns:124px minmax(0,1fr) 220px;gap:8px}
 #touchControls .touch-steer button{height:60px}#touchControls .attack{height:66px;font-size:17px}
 .touch-tools{gap:4px}#touchControls .touch-tools button{font-size:9px;padding:5px;min-height:40px}
}
@media (max-width:480px) and (orientation:portrait){
 .cards,.upgrades,.keys{grid-template-columns:1fr}.formrow{grid-template-columns:1fr;gap:7px}.mainbuttons{display:grid;grid-template-columns:1fr}.mainbuttons button{width:100%}
 h1{font-size:clamp(42px,14vw,62px)!important}.heading,h2{font-size:32px!important}.screen{padding-top:18px}.overlay{padding:12px;align-items:flex-start}
}

#highwayStatus{position:fixed;top:88px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;background:#10252deb;color:#f0f7e9;padding:7px 12px;border-radius:7px;font:12px Arial;text-align:center;max-width:55vw}#highwayStatus[hidden]{display:none}#vignette{opacity:.35}@media(pointer:coarse){#highwayStatus{top:48px;font-size:9px;padding:4px 7px;max-width:48vw}body.riding #turnwarning{top:83px}}