/* Keep the original artwork and presentation; make the existing flow usable on touch screens. */
[hidden]{display:none!important}
html,body{touch-action:auto}
#game,#touch,#steerPad{touch-action:none}
.panel{overscroll-behavior:contain;touch-action:pan-y}
.panel:not(.open){visibility:hidden}
.roster,.stages{touch-action:pan-x pan-y}
button{min-height:44px;cursor:pointer}
button:disabled{cursor:wait}
button:focus-visible{outline:3px solid #fff0bf;outline-offset:3px}
#shell:not([data-state="race"]) #touch{display:none!important}
#shell:not([data-state="race"]):not([data-state="paused"]) #hud,
#shell:not([data-state="race"]):not([data-state="paused"]) #bossHud,
#shell:not([data-state="race"]) #phaseBanner{display:none}
#gameTools{position:absolute;z-index:12;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:8px}
#gameTools button,.pause button{border:1px solid var(--gold);background:#17130fed;color:var(--ink);padding:10px 14px;box-shadow:2px 2px 0 #000;font-size:12px}
#shell[data-state="race"] #gameTools{top:auto;right:auto;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%)}
#start.panel{max-height:calc(100dvh - 70px);top:calc(50% + 23px);scroll-padding-block:12px}
#start #loadStatus,#start #saveStatus{font:12px/1.4 Arial,sans-serif;max-width:70ch;margin:8px 0}
#start #loadStatus{color:var(--gold)}
#start #saveStatus{color:#cfbfa5}
#retryLoad{font-size:13px}
.pause{z-index:20;padding:20px;text-align:center;font-size:inherit}
.pause>div{width:min(600px,100%);max-width:100%;min-width:0;padding:24px 18px;background:#17130ff5;border:2px solid #9b7228;border-left:7px solid var(--red)}
.pause h2{font-size:clamp(24px,5vw,48px);line-height:1.05;margin:0 0 20px}
.pause button{margin:5px}
.pause #resumeGame{background:var(--red)}
.identity strong,.identity span{overflow:hidden;text-overflow:ellipsis}
.touchHint{line-height:1.4!important}
@media(pointer:coarse),(max-width:900px){
 #shell[data-state="race"] #gameTools{flex-direction:column;gap:6px;width:86px}
 #shell[data-state="race"] #gameTools button{font-size:9px;padding:6px 2px;min-height:40px;width:86px}
 #result.panel{max-height:92dvh;overflow:auto}
}
@media(max-width:360px){
 #steerPad{width:96px;height:96px}
 .actions{gap:5px}
 .actions button{width:48px;height:48px;font-size:8px}
 .actions .fire{width:60px;height:60px}
 #shell[data-state="race"] #gameTools{left:46%;width:72px}
 #shell[data-state="race"] #gameTools button{width:72px;font-size:8px}
}

/* Portable backup controls are confined to a native modal in the menu. */
#backupDialog{width:min(660px,calc(100vw - 24px));max-width:100%;max-height:calc(100dvh - 24px);min-width:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:20px;color:var(--ink);background:#17130f;border:2px solid #9b7228;border-left:7px solid var(--red);font:16px/1.45 Arial,sans-serif;overflow-wrap:anywhere}
#backupDialog::backdrop{background:#000c}
#backupDialog h2{font:24px/1.1 Impact,"Arial Narrow",sans-serif;letter-spacing:0;margin:0}
.backupHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#backupDialog p{margin:12px 0}
#backupDialog label{display:block;margin:12px 0 6px}
#backupDialog textarea,#backupDialog input,#backupDialog select{display:block;width:100%;max-width:100%;min-width:0;font:16px/1.4 Arial,sans-serif;color:var(--ink);background:#0d0b09;border:1px solid #9b7228;padding:8px}
#backupDialog textarea{resize:vertical;min-height:90px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
#backupDialog button{max-width:100%;min-height:44px;white-space:normal;overflow-wrap:anywhere;border:1px solid var(--gold);padding:10px 14px;background:#302017;font:14px/1.3 Impact,"Arial Narrow",sans-serif;color:var(--ink)}
#backupDialog button:disabled{opacity:.55;cursor:not-allowed}
#backupDialog :is(textarea,input,select):focus-visible{outline:3px solid #fff0bf;outline-offset:2px}
#backupDialog hr{border:0;border-top:1px solid #70562d;margin:20px 0}
#backupReview{margin-top:16px;padding:12px;border:2px solid var(--gold)}
#backupConfirm{background:#9d2d1f!important}
.backupActions{display:flex;gap:8px;flex-wrap:wrap}
#backupStatus{min-height:1.5em;color:#f6d58c}
#backupStatus[data-error="true"]{color:#ffb5a5}
#start #openBackup{font-size:13px;background:#302017;box-shadow:none;border:1px solid var(--gold);margin-right:8px}
@media(max-width:360px){#backupDialog{padding:12px}#backupDialog h2{font-size:21px}.backupActions button{width:100%}}