/* Same two-thumb driving layout in both games; the 3D road stays unobscured. */
.touch-controls{display:flex!important;position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;gap:16px;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-steering,.touch-pedals{display:flex;gap:10px;pointer-events:auto}
.touch-controls button{position:relative;width:clamp(56px,8cqw,82px);height:clamp(60px,10cqh,82px);padding:6px;border:2px solid #fff9;border-radius:19px;background:#163c49ed;color:#fff;box-shadow:0 5px 0 #0c283bcc;touch-action:none;-webkit-touch-callout:none;font-size:29px!important;line-height:1.1}
.touch-controls [data-control="back"]{background:#b14d59ed;width:clamp(82px,10cqw,108px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px!important;gap:4px}
.touch-controls [data-control="back"] small{font-size:10px;font-weight:700}.touch-controls [data-control="throttle"]{background:#16856eef;font-size:23px!important}
.touch-controls button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #0c283b;filter:brightness(1.25);border-color:#fff}
.drive-ui:has(.touch-controls) .drive-keys{display:none}.drive-ui:has(.touch-controls) .hud-bottom{bottom:112px;pointer-events:none}
.drive-ui:has(.touch-controls) .speed-display{left:auto;right:0;transform:none}.drive-ui:has(.touch-controls) .cargo-ledger{max-width:72%;padding:8px 10px}.drive-ui:has(.touch-controls) .cargo-slots{max-height:57px;overflow:auto;pointer-events:auto;touch-action:pan-x}
.assignment-result{padding:10px;text-align:center;background:#e9e9f8;border-radius:14px}.assignment-result p{font-size:16px!important;margin:6px}.assignment-result button{min-height:44px}.assignment-loading{display:grid;place-content:center;text-align:center}
.demo-controls.touch-demo{left:10px;right:10px;transform:none;display:grid;grid-template-columns:1fr 1fr 1.6fr 1.2fr;gap:8px;bottom:10px}
.demo-controls.touch-demo>span{display:block!important;min-width:0;text-align:center;white-space:normal;font-size:13px!important;padding:9px 4px}.demo-controls.touch-demo>span.active{background:#ffe174;box-shadow:0 0 0 4px #fff9;transform:translateY(2px)}
@container cargo (max-width:600px){
 .hud-top--simple{flex-wrap:nowrap;gap:6px;top:10px}.hud-top--simple .hud-trip{padding:8px;min-width:100px;flex:0 1 42%}.hud-trip .round-dots{gap:5px}.hud-top--simple .hud-lives{min-width:0;width:auto;flex:1;padding:8px 50px 8px 8px;min-height:88px}.hud-top--simple .heart{font-size:27px;width:22px}.hud-top--simple #hearts{display:flex;gap:0;flex-wrap:nowrap}.hud-top--simple .hud-lives>span{font-size:11px}.hud-top--simple .pause-button{top:3px}.hud-top--simple .hud-lives #drive-help{bottom:1px}
 .drive-ui:has(.touch-controls) .hud-bottom{bottom:100px}.drive-ui:has(.touch-controls) .cargo-ledger{max-width:73%}.drive-ui:has(.touch-controls) .cargo-slot{width:40px;height:38px}.drive-ui:has(.touch-controls) .cargo-slot small{font-size:8px}.drive-ui:has(.touch-controls) .cargo-slots{gap:5px;max-height:46px}.drive-ui:has(.touch-controls) .speed-display strong{font-size:36px}.speed-display span{font-size:10px}
 .touch-steering,.touch-pedals{gap:6px}.touch-controls{gap:8px;left:10px;right:10px}.touch-controls button{width:54px;height:66px;border-radius:16px}.touch-controls [data-control="back"]{width:84px}.touch-controls [data-control="throttle"]{width:62px}
 .police-status{top:116px;max-width:calc(100% - 24px);font-size:17px!important}.game-utilities{right:10px;bottom:10px}.drive-ui .game-utilities{display:none}
 .modal[data-game-screen="correct"] .panel-header h2{font-size:30px!important}.modal[data-game-screen="correct"] .success-equation{font-size:22px!important}.modal[data-game-screen="correct"] .delivery-count{font-size:13px!important}
}
@container cargo (max-height:470px) and (min-width:601px){
 .hud-top--simple .hud-trip{padding:6px 10px;min-width:130px}.hud-trip .round-dots{display:none}.hud-top--simple .hud-trip>strong{margin:0}.hud-top--simple .hud-lives{min-height:55px;padding:6px 103px 6px 10px;min-width:265px}.hud-top--simple .hud-lives #drive-help{right:53px;bottom:6px}.hud-top--simple .pause-button{top:6px}.hud-top--simple #hearts{margin-top:2px}.hud-top--simple .heart{font-size:24px;width:22px}.hud-top--simple .hud-lives>span{font-size:10px}
 .touch-controls button{height:56px;width:62px}.touch-controls [data-control="back"]{width:91px}.drive-ui:has(.touch-controls) .hud-bottom{bottom:14px;left:180px;right:200px;justify-content:center}.drive-ui:has(.touch-controls) .cargo-ledger{display:none}.drive-ui:has(.touch-controls) .speed-display{position:static;transform:none;background:#fffde9da;padding:5px 12px;border-radius:15px}.drive-ui:has(.touch-controls) .speed-display strong{font-size:28px}.police-status{top:80px;max-width:60%;padding:6px 12px}.police-status strong{font-size:18px!important}
 .tutorial-tips{display:none}.tutorial-body{grid-template-rows:auto minmax(0,1fr)!important}.demo-instruction{font-size:14px!important;padding:6px}.demo-controls.touch-demo>span{font-size:12px!important;padding:6px 4px}
 .modal[data-game-screen="correct"] .success-body{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:6px 16px;align-items:center}.modal[data-game-screen="correct"] .celebration-media{grid-column:2;grid-row:1/4;height:100%;min-height:100px}.modal[data-game-screen="correct"] .success-equation,.modal[data-game-screen="correct"] .cargo-confirm,.modal[data-game-screen="correct"] .delivery-count{margin:0;font-size:15px!important}.modal[data-game-screen="correct"] .panel-header h2{font-size:28px!important}
}
@media(prefers-reduced-motion:reduce){.touch-controls button{transition:none}}
/* The setup Back row precedes the demo; it must not consume the flexible canvas row. */
.tutorial-body{grid-template-rows:minmax(0,1fr) auto!important}.tutorial-body:has(.setup-utility){grid-template-rows:auto minmax(0,1fr) auto!important}
@container cargo (max-height:470px) and (min-width:601px){.tutorial-body{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}.tutorial-body:has(.setup-utility){grid-template-rows:auto minmax(0,1fr)!important}}

body[data-scene="drive"]:has(.touch-controls) .game-utilities{left:14px;right:auto;top:auto;bottom:94px}
@container cargo (max-height:470px) and (min-width:601px){body[data-scene="drive"]:has(.touch-controls) .game-utilities{bottom:84px}}