.controls-screen{padding:22px 5%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;background:#edf4e6ec;overflow:hidden}
.controls-screen h2{margin:0;text-align:center}.controls-screen .setup-utility{width:100%}
.control-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:center;width:min(1050px,100%);margin:auto;padding:8px}
.control-choices:where(:has([data-controls="touch"])){grid-template-columns:repeat(3,minmax(0,1fr))}
.control-choices[data-scroll-enabled="true"]{align-items:start;align-content:start}
.control-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px;padding:22px 18px;border:3px solid #426857;border-radius:24px;background:#fffef4;color:#173c32;box-shadow:0 6px 0 #315544;text-align:center}
.control-choice[aria-pressed="true"]{background:#fff1a3;border-color:#173c32;box-shadow:0 6px 0 #173c32}
.control-choice:focus-visible{outline:4px solid #357ddb;outline-offset:4px}
.control-choice strong{font-size:30px}.control-choice>span:not(.control-icon){font-size:17px;line-height:1.35}.control-choice small{font-size:15px;line-height:1.4}
.control-icon{display:grid;place-items:center;width:72px;height:72px;background:#d7ebdf;border-radius:22px;font-size:42px;line-height:1}
.control-selected{margin-top:auto;padding:9px 12px;border-radius:10px;background:#e2ebde;font-weight:800;width:100%}
.control-choice[aria-pressed="true"] .control-selected{background:#173c32;color:white}
.controls-screen .screen-actions{padding-right:100px}.controls-screen .screen-actions .primary{max-width:470px}
.demo-controls.mouse-demo{flex-wrap:wrap}.demo-controls.mouse-demo>span{font-size:12px}
.demo-pointer{position:absolute;left:50%;top:44%;width:28px;height:38px;background:#fffdf2;clip-path:polygon(5% 0,100% 64%,58% 68%,39% 100%);filter:drop-shadow(2px 3px 1px #173c32);pointer-events:none}
.demo-pointer[data-pressed="true"]{background:#ffcf36}
.mouse-controls{position:absolute;left:16px;right:110px;bottom:16px;display:flex;align-items:center;gap:14px;pointer-events:none}
.mouse-controls p{margin:0;padding:8px 12px;border-radius:12px;background:#fffef0e8;font-size:14px!important;line-height:1.4;font-weight:750}
.drive-ui:has(.mouse-controls) .drive-keys{display:none!important}.drive-ui:has(.mouse-controls) .hud-bottom{bottom:106px}
.drive-ui:has(.mouse-controls) .speed-display{left:auto;right:0;bottom:0;transform:none}
.mouse-stop-guide{position:absolute;z-index:4;top:136px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;width:min(580px,calc(100% - 40px));padding:18px 22px;background:#fff7df;color:#173c32;border:4px solid #be2938;border-radius:20px;box-shadow:0 6px 0 #762537;pointer-events:none}
.mouse-stop-guide[hidden]{display:none}.mouse-stop-guide strong{display:block;font-size:clamp(22px,2.8cqw,30px);line-height:1.2;margin:5px 0 8px}.mouse-stop-guide small{display:block;font-size:14px;line-height:1.35}.mouse-stop-label{font-weight:900;font-size:14px;color:#a51e30;letter-spacing:.06em}
.mouse-hold-icon{position:relative;flex:0 0 42px;height:60px;border:3px solid #173c32;border-radius:22px;background:#fff;overflow:hidden}.mouse-hold-icon:before{content:"";position:absolute;inset:0 50% 48% 0;background:#d83242;border-right:2px solid #173c32;border-bottom:2px solid #173c32}.mouse-hold-icon:after{content:"↓";position:absolute;left:3px;top:0;color:white;font-size:24px;font-weight:900;line-height:1}
.police-status[data-controls="mouse"] .mouse-stop-instruction{display:block;font-size:clamp(22px,2.8cqw,30px);font-weight:900;line-height:1.2;max-width:490px;margin:10px auto;color:#fff8cb}
.police-status[data-controls="mouse"] .police-clock b{font-size:54px}.police-status[data-controls="mouse"] .police-clock{margin:10px 0 0}
@container cargo (max-width:600px){
 .controls-screen{padding:12px;gap:10px}.control-choices{grid-template-columns:1fr;gap:12px;padding:6px}
 .control-choice{min-height:150px;display:grid;grid-template-columns:52px 1fr;gap:6px 14px;padding:14px;text-align:left;align-items:center}
 .control-icon{width:52px;height:62px;grid-row:1/4;font-size:34px;border-radius:14px}.control-choice strong{font-size:24px}
 .control-choice>span:not(.control-icon){font-size:15px}.control-choice small{font-size:14px}.control-selected{grid-column:2;padding:6px 9px}
 .controls-screen .screen-actions .primary{font-size:17px!important;padding:10px}
 .mouse-controls{left:10px;right:105px;bottom:12px;gap:8px}.mouse-controls p{font-size:12px!important;padding:5px}
 .mouse-stop-guide{top:116px;padding:14px;gap:12px;width:calc(100% - 24px)}.mouse-stop-guide strong{font-size:22px}.mouse-stop-guide small{font-size:12px}.mouse-hold-icon{flex-basis:36px;height:52px}
}
@container cargo (max-height:500px) and (min-width:601px){
 .controls-screen{padding:10px 3%;gap:7px}.control-choice{min-height:200px;gap:8px;padding:12px}.control-icon{height:44px;width:50px;font-size:30px;border-radius:12px}
 .control-choice strong{font-size:24px}.control-choice>span:not(.control-icon){font-size:15px}.control-choice small{font-size:13px}.control-selected{padding:6px}
 .control-icon{display:none}.control-choice{min-height:174px}
 .controls-screen .screen-actions .primary{min-height:44px}
 .mouse-controls{bottom:12px}.drive-ui:has(.mouse-controls) .hud-bottom{bottom:86px}.drive-ui:has(.mouse-controls) .cargo-ledger{display:none}
 .mouse-stop-guide{top:84px;padding:10px 16px;width:min(540px,calc(100% - 32px));gap:12px}.mouse-stop-guide strong{font-size:23px;margin:3px 0 5px}.mouse-stop-guide small{font-size:12px}.mouse-stop-label{font-size:12px}.mouse-hold-icon{height:46px;flex-basis:34px}
 .police-status[data-controls="mouse"][data-state="chase"]{top:82px;padding:10px 16px;max-width:min(600px,calc(100% - 50px))}.police-status[data-controls="mouse"] .mouse-stop-instruction{font-size:23px;margin:6px 0}.police-status[data-controls="mouse"] .police-clock{margin:5px 0 0}.police-status[data-controls="mouse"] .police-clock b{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.control-choice{transition:none}}

/* Keep driving notices beside the road, including chase and warning states. */
#app .mouse-stop-guide,#app .police-status{left:16px;right:auto;top:112px;bottom:auto;transform:none;width:min(300px,32%);min-width:0;max-width:none;padding:12px;border-radius:14px;text-align:left;box-sizing:border-box}
#app .mouse-stop-guide{gap:10px;align-items:flex-start}
#app .mouse-stop-guide strong,#app .police-status strong,#app .police-status .mouse-stop-instruction{font-size:20px;line-height:1.2;letter-spacing:0;margin:4px 0}
#app .mouse-stop-guide small,#app .police-status span{font-size:13px;line-height:1.35}
#app .mouse-hold-icon{flex-basis:26px;height:38px;border-width:2px}
#app .mouse-hold-icon:after{font-size:18px}
#app .police-clock{justify-content:flex-start;gap:10px;margin:8px 0 0}
#app .police-clock b{font-size:36px}
#app .police-clock small{font-size:11px}
#app .siren-lamps{position:static;justify-content:flex-start;gap:7px;margin-bottom:7px}
#app .siren-lamps i{width:12px;height:12px;box-shadow:none}
@container cargo (max-width:600px){
 #app .mouse-stop-guide,#app .police-status{left:10px;top:116px;width:42%;padding:9px}
 #app .mouse-stop-guide strong,#app .police-status strong,#app .police-status .mouse-stop-instruction{font-size:16px!important}
 #app .mouse-stop-guide small,#app .police-status span{font-size:12px}
 #app .mouse-hold-icon{display:none}
 #app .mouse-stop-label{font-size:11px}
}
@container cargo (max-height:500px) and (min-width:601px){
 #app .mouse-stop-guide,#app .police-status{top:80px;left:12px;width:min(250px,30%);padding:9px}
 #app .mouse-stop-guide strong,#app .police-status strong,#app .police-status .mouse-stop-instruction{font-size:17px!important}
 #app .mouse-stop-guide small,#app .police-status span{font-size:12px}
 #app .police-clock b{font-size:28px}
}