#menuGateway .menu-gateway-button.story-mode-gateway {
  grid-column:1 / -1; box-sizing:border-box; min-width:0; min-height:43px; height:43px;
  padding:7px 15px; display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; gap:12px;
}
#menuGateway .story-mode-gateway > strong {flex:0 0 auto;font-size:18px;line-height:1;white-space:nowrap}
#menuGateway .story-mode-gateway > span {min-width:0;max-width:58%;font-size:11px;line-height:1.12;text-wrap:balance;text-align:right}
@media(max-width:760px) {
  #menuGateway .menu-gateway-button.story-mode-gateway {min-height:40px;height:40px;padding:6px 14px;gap:9px}
  #menuGateway .story-mode-gateway > strong {font-size:clamp(15px,4.5vw,18px)}
  #menuGateway .story-mode-gateway > span {font-size:9px;line-height:1.15}
}
/* Race messages float over the road; the full-viewport host never captures driving input. */
#story-race-hud{position:fixed;inset:0;z-index:90;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;pointer-events:none;color:#20313a;font:14px/1.45 "Avenir Next","Segoe UI",system-ui,sans-serif;text-align:left}
#story-race-hud *,#story-race-hud *:before,#story-race-hud *:after{box-sizing:border-box}
#story-race-hud[hidden],#story-race-hud [hidden]{display:none!important}
body.story-driving #story-race-hud,body.story-driving #story-race-hud *{cursor:auto!important}
body.story-driving #story-race-hud button{cursor:pointer!important}
#story-race-hud button{font:750 12px/1.2 "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.01em;text-transform:none;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
#story-race-hud button:focus-visible{outline:3px solid #7de5ed;outline-offset:3px}
#story-race-hud button:disabled{opacity:.5;cursor:default!important}
#story-race-hud .story-race-controls{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:7px;align-items:center;pointer-events:auto}
#story-race-hud .story-race-controls button{min-width:50px;min-height:36px;margin:0;padding:8px 12px;border:1px solid #83b6bc99;border-radius:7px;background:#102933e8;color:#e6f4ef;box-shadow:0 2px 0 #03101688,inset 0 1px #b2e7e314;backdrop-filter:blur(5px)}
#story-race-hud .story-race-controls button:hover{border-color:#bce8e9;background:#203d47}
#story-race-hud .story-race-controls button:active{transform:translateY(1px)}
#story-race-status{position:fixed;top:calc(max(14px,env(safe-area-inset-top)) + 45px);right:max(14px,env(safe-area-inset-right));max-width:min(240px,calc(100vw - 28px));margin:0;padding:7px 11px;border:1px solid #89c9c8aa;border-radius:6px;background:#0b2530e8;color:#ecf6ef;font-size:13px;line-height:1.4;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 #03101666;pointer-events:auto}
#story-race-hud.story-hud-urgent #story-race-status{color:#ffe7b3;border-color:#efb671;background:#402c20eb}

/* A portrait and paper speech balloon replace the persistent tutorial panel. */
#story-race-hud #story-coach{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));display:flex;align-items:flex-start;gap:10px;width:min(350px,calc(100vw - 32px));margin:0;padding:0;border:0;background:none;box-shadow:none;pointer-events:auto;animation:story-radio-in .18s ease-out both}
#story-race-hud #story-coach-portrait{display:block;flex:none;width:60px;height:60px;margin:7px 0 0;border:2px solid #f6d476;border-radius:8px;object-fit:cover;background:#173340;box-shadow:0 3px 0 #102733,0 5px 16px #0005}
#story-race-hud #story-coach .story-coach-copy{position:relative;flex:1;min-width:0;padding:13px 15px 14px;border:2px solid #193741;border-top:3px solid #f4d273;border-radius:13px 13px 13px 3px;background:linear-gradient(135deg,#fffdf3,#f5edd6);box-shadow:3px 4px 0 #142d38b3,0 8px 20px #0003}
#story-race-hud #story-coach .story-coach-copy:before{content:"";position:absolute;left:-9px;top:21px;width:14px;height:14px;border-left:2px solid #193741;border-bottom:2px solid #193741;background:#fffcf0;transform:rotate(45deg);pointer-events:none}
#story-race-hud #story-coach-step{display:block;margin:0 20px 6px 0;color:#616349;font:800 10px/1.3 "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
#story-race-hud #story-coach-title{display:block;margin:0;color:#18333d;font-size:15px;line-height:1.3;font-weight:850;letter-spacing:0}
#story-race-hud #story-coach-text{margin:6px 0 0;color:#253943;font-size:14px;line-height:1.45;font-weight:550;letter-spacing:0;text-shadow:none}
#story-race-hud #story-coach-close{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:34px;min-width:34px;height:34px;padding:0;border:2px solid #29434b;border-radius:50%;background:#fbf4df;color:#314650;font:600 23px/1 system-ui,sans-serif;box-shadow:0 2px 0 #122b3680;z-index:2}
#story-race-hud #story-coach-close:hover{background:#ffe8aa;border-color:#19313d}
#story-race-hud #story-coach-skip{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:38px;margin:10px 0 0;padding:8px 11px;border:1px solid #56717a;border-radius:6px;background:#203e49;color:#fff7df;box-shadow:0 2px 0 #102935;font-size:12px;font-weight:800}
#story-race-hud #story-coach-skip:hover:enabled{background:#2c5260;border-color:#3b616d}
#story-race-hud #story-coach-skip-note{display:block;margin:8px 0 0;color:#586566;font-size:11px;line-height:1.35;font-weight:600;letter-spacing:0}
@keyframes story-radio-in{from{opacity:0;transform:translateX(-8px) scale(.99)}to{opacity:1;transform:none}}
@media(pointer:coarse){
 #story-race-hud .story-race-controls button,#story-race-hud #story-coach-skip{min-height:44px}
 #story-race-status{top:calc(max(14px,env(safe-area-inset-top)) + 53px)}
 #story-race-hud #story-coach-close{width:44px;height:44px;right:-9px;top:-9px;font-size:25px}
 #story-race-hud #story-coach-step{margin-right:26px}
}
@media(max-width:600px){
 #story-race-hud .story-race-controls{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));gap:6px}
 #story-race-hud .story-race-controls button{min-height:44px;padding:9px 10px;font-size:12px}
 #story-race-status{top:calc(max(8px,env(safe-area-inset-top)) + 52px);right:max(8px,env(safe-area-inset-right));max-width:245px;padding:6px 10px;font-size:12px}
 #story-race-hud #story-coach{top:calc(max(8px,env(safe-area-inset-top)) + 57px);left:max(10px,env(safe-area-inset-left));width:min(300px,calc(100vw - 24px));gap:9px}
 #story-race-hud:has(#story-race-status:not([hidden])) #story-coach{top:calc(max(8px,env(safe-area-inset-top)) + 97px)}
 #story-race-hud #story-coach-portrait{width:56px;height:56px;margin-top:6px}
 #story-race-hud #story-coach .story-coach-copy{padding:12px 13px}
 #story-race-hud #story-coach-title{font-size:14px;line-height:1.3}
 #story-race-hud #story-coach-text{font-size:13px;line-height:1.45}
 #story-race-hud #story-coach-step{font-size:9px;line-height:1.35;margin-bottom:5px}
 #story-race-hud #story-coach-skip{min-height:44px;font-size:12px;margin-top:8px}
 #story-race-hud #story-coach-skip-note{font-size:11px;margin-top:7px}
}
@media(max-height:500px) and (min-width:601px){
 #story-race-hud .story-race-controls{top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));gap:6px}
 #story-race-status{top:calc(max(8px,env(safe-area-inset-top)) + 52px);right:max(10px,env(safe-area-inset-right));padding:6px 10px;font-size:12px}
 #story-race-hud #story-coach{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:min(330px,calc(100vw - 190px));gap:9px}
 #story-race-hud #story-coach-portrait{width:52px;height:52px;margin-top:5px}
 #story-race-hud #story-coach .story-coach-copy{padding:10px 13px}
 #story-race-hud #story-coach-step{font-size:9px;margin-bottom:4px}
 #story-race-hud #story-coach-title{font-size:14px;line-height:1.25}
 #story-race-hud #story-coach-text{font-size:13px;line-height:1.4;margin-top:5px}
 #story-race-hud #story-coach-skip-note{margin-top:6px;font-size:11px;line-height:1.3}
 #story-race-hud #story-coach-skip{min-height:44px;margin-top:7px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){#story-race-hud #story-coach{animation:none}}
body.story-campaign-open:not(.story-driving) .touch {visibility:hidden!important}
body.story-driving-paused .touch {visibility:hidden!important}
/* Match the tutorial's named controls without changing their touch targets. */
body.story-driving .touch [data-touch]{opacity:.78}
body.story-driving .touch [data-touch]::after{color:#fffbed;font:800 12px/1 "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.03em;text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none}
body.story-driving .touch [data-touch="left"]::after{content:"LEFT"}
body.story-driving .touch [data-touch="right"]::after{content:"RIGHT"}
body.story-driving .touch [data-touch="brake"]::after{content:"BRAKE"}
body.story-driving .touch [data-touch="gas"]::after{content:"GAS"}
#story-pause {position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:#031019cc;cursor:auto!important;color:#e7f2ee;font:15px/1.5 system-ui,sans-serif}
#story-pause * {box-sizing:border-box;cursor:auto!important}
#story-pause>div {width:min(430px,100%);padding:28px;border:1px solid #76cbbd;border-radius:16px;background:linear-gradient(145deg,#18303d,#0b1922);box-shadow:0 20px 80px #0009}
#story-pause h2 {margin:0;color:#f6d97c;font-size:28px;letter-spacing:1px}
#story-pause p {color:#bdccd0}
#story-pause button {display:block;width:100%;min-height:44px;margin-top:12px;padding:10px;border-radius:8px;border:1px solid #8ba9aa;background:#263c48;color:#f4f9ec;font:700 15px system-ui;cursor:pointer!important}
#story-pause button:first-of-type {background:#f0d477;color:#14232a;border-color:#fce6a2}
/* Standalone Arcade mounts only the selected game and tears it down on return. */
.standalone-arcade { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:#07141b; color:#fff3cd; }
.standalone-arcade > header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:0 0 auto; padding:10px 18px; border-bottom:1px solid #69c7ce66; background:#102630; }
.standalone-arcade > header button { min-height:40px; padding:7px 16px; border:1px solid #73c6ca88; border-radius:6px; background:#193b48; color:#e9f6ed; font:inherit; cursor:pointer; }
.standalone-arcade > header button:focus-visible { outline:2px solid #ffda70; outline-offset:3px; }
.standalone-arcade-game { flex:1 1 0; min-height:0; overflow:hidden; }
/* Lock icon and copy convey availability without interrupting the menu color wheel. */
.menu-gateway-button.story-reward-locked { filter:none; }
.menu-gateway-button.story-reward-locked strong::before { content:'🔒'; font-size:.7em; margin-right:.55em; }
@media(max-width:560px) { .standalone-arcade > header { gap:8px; padding:8px; font-size:12px; } .standalone-arcade > header button { padding:7px 10px; } }