:root{font-family:Inter,Arial,sans-serif;color:#eefbff;background:#102e3c;--teal:#64e5d4;--amber:#ffce80;--panel:#12313eea}*{box-sizing:border-box}body{margin:0;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff33;border-radius:12px;background:#173d4ce6;touch-action:none;min-width:44px;min-height:44px}button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}canvas#game{display:block;width:100vw;height:100dvh;outline:0}#hud{position:fixed;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 12px calc(18px + env(safe-area-inset-left));display:flex;gap:22px;align-items:center;background:linear-gradient(#092531f2,#10333dbd);border-bottom:1px solid #a5ffff33}.brand{display:flex;gap:10px;align-items:center;letter-spacing:1px;font-weight:900;font-size:16px;white-space:nowrap}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:1.6px;color:#a5c7cd;margin-top:5px}.badge{border:2px solid var(--teal);border-radius:7px;padding:8px 5px;color:var(--teal);font-weight:900}.vitals{display:flex;gap:20px;flex:1;align-items:center;max-width:680px}.vitals label{font-size:10px;color:#b7d5dc;letter-spacing:1px;flex:1}.vitals strong{float:right;font-size:15px;color:white;letter-spacing:0;margin-left:10px}.vitals label.time{flex:0 0 88px}.time strong{float:none;display:block;font-size:25px;line-height:1.3;margin-left:0;font-variant-numeric:tabular-nums}.actions{display:flex;gap:8px;margin-left:auto}progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:6px;border:0;border-radius:6px;overflow:hidden;background:#061e2b;margin-top:7px}progress::-webkit-progress-bar{background:#061e2b}progress::-webkit-progress-value{background:var(--teal)}progress::-moz-progress-bar{background:var(--teal)}#route::-webkit-progress-value{background:var(--amber)}#mission{position:fixed;top:86px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:10px 15px;background:var(--panel);border:1px solid #ffffff22;border-radius:20px;white-space:nowrap;font-size:11px}#mission strong{font-size:13px}.divider{height:16px;border-left:1px solid #ffffff44;margin:0 5px}#convoyState{color:var(--teal);font-weight:bold}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#09212d88,#09212d22);padding:16px;overflow-y:auto}.panel{width:min(490px,96vw);padding:30px;border:1px solid #9bebe345;border-radius:24px;background:linear-gradient(145deg,#163744f2,#0c222fed);box-shadow:0 18px 90px #061c3290;backdrop-filter:blur(8px)}.eyebrow{font-size:11px;color:var(--teal);letter-spacing:3px;font-weight:800}h1{font-size:clamp(36px,6vw,62px);line-height:.97;letter-spacing:-2px;margin:18px 0 16px;font-weight:900}h1 em{font-style:normal;color:var(--teal)}h2{font-size:32px;margin:18px 0 12px;line-height:1.05}.tagline{font-size:18px;margin:10px 0 22px;color:#dbedf1}.brief{display:flex;gap:14px;align-items:center;padding:16px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff15}.brief strong{font-size:12px;letter-spacing:1px}.brief p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#b6d0d8}.medical{font-size:42px;font-weight:bold;color:var(--teal)}.steps{display:flex;gap:8px;justify-content:space-between;margin:20px 0;font-size:10px;letter-spacing:.4px}.steps b{display:block;font-size:18px;color:var(--amber);margin-bottom:6px}.primary,.secondary{width:100%;padding:15px;text-align:left;font-weight:800;letter-spacing:.8px}.primary{background:var(--teal);color:#0b2934;border:0;font-size:15px}.primary span{float:right}.secondary{margin-top:10px;background:#ffffff08;text-align:center;font-size:12px}.hint,.fine{font-size:11px;line-height:1.5;color:#a8c7d0;margin:15px 0 0}.fine{font-size:10px;color:#96b8c3}.compact{width:min(430px,96vw)}.compact>p{color:#bad4dc;line-height:1.5;font-size:13px}.resultGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.resultGrid label{font-size:10px;letter-spacing:1px;color:#adcad2}.resultGrid strong{display:block;font-size:25px;margin-top:5px;color:white}#stars{font-size:26px;color:var(--amber);letter-spacing:7px}#radarPanel{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:110px;background:#0e2a36d9;border:1px solid #ffffff28;border-radius:15px;padding:8px}#radar{width:126px;height:175px;display:block}#radarPanel div{font-size:7px;letter-spacing:.3px;text-align:center;color:#bfd8dd}#controls{position:fixed;left:0;right:0;bottom:0;padding:10px calc(18px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;background:linear-gradient(transparent,#0c29375e)}#controls button{pointer-events:auto;min-height:58px;font-weight:bold;font-size:12px;background:#103743e8}#controls small{display:block;font-size:9px;margin-top:6px;color:#a8c6ce;font-weight:400}.steering,.tools{display:flex;gap:8px}.steering button{width:62px;font-size:24px!important}.tools button{padding:9px 15px;min-width:83px}#controls #signal{min-width:135px;border-color:var(--teal);color:var(--teal)}#controls button[data-active="true"]{background:#2d6b71;transform:translateY(1px)}#tip{position:fixed;bottom:102px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;max-width:65vw;padding:8px 10px 8px 15px;border-radius:14px;background:#11333fe8;border:1px solid #64e5d440;color:#ddfffa;font-size:12px;line-height:1.4}#tip button{border:0;min-width:32px;min-height:32px;background:transparent}#toast{position:fixed;left:50%;top:142px;transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:#123746ed;color:var(--amber);font-size:12px;max-width:90vw;text-align:center}
@media(max-width:1050px){#hud{padding:10px 12px;gap:12px}.brand{font-size:12px}.brand small{font-size:8px;letter-spacing:.6px}.badge{padding:6px 4px}.vitals{gap:12px}.vitals strong{font-size:13px}.vitals label{font-size:9px}.vitals label.time{flex-basis:74px}.time strong{font-size:22px}.actions{gap:5px}#mission{top:72px}#radar{width:86px;height:120px}#radarPanel{bottom:96px;left:12px}#tip{bottom:90px;max-width:58vw;font-size:11px}#controls{padding:8px 12px 10px}#controls button{min-height:52px}.steering button{width:56px}.tools button{min-width:75px;padding:8px 10px}#controls #signal{min-width:115px}#toast{top:120px}}
@media(max-height:540px){.panel{padding:18px 24px;border-radius:18px;width:min(440px,96vw)}h1{font-size:39px;margin:12px 0}.tagline{font-size:14px;margin:10px 0}.brief{padding:9px}.steps{margin:11px 0;font-size:9px}.steps b{font-size:14px;margin-bottom:3px}.primary{padding:12px}.hint,.fine{margin-top:8px;font-size:10px}.compact h2{font-size:26px;margin:12px 0}.compact p{font-size:12px;margin:8px 0}.resultGrid{margin:12px 0;gap:8px}.resultGrid strong{font-size:20px}#stars{font-size:20px}#radar{width:72px;height:100px}#radarPanel{padding:4px;bottom:84px}#radarPanel div{display:none}#tip{bottom:80px;padding:4px 6px 4px 10px;max-width:65vw}#controls button{min-height:48px}.tools small{margin-top:4px!important}#controls{padding-bottom:max(8px,env(safe-area-inset-bottom))}}
@media(max-width:650px){#hud{gap:8px;align-items:flex-start;flex-wrap:wrap;padding:8px 10px}.brand{font-size:11px;flex:1}.brand small{font-size:8px}.badge{padding:4px}.vitals{order:3;flex-basis:100%;max-width:none;gap:12px}.vitals label.time{flex-basis:65px}.time strong{font-size:18px}.vitals strong{font-size:12px}.actions{margin-left:0}.actions button{min-height:36px;min-width:36px}#mission{top:106px;font-size:9px;gap:5px;padding:8px 10px}#mission strong{font-size:11px}.divider{margin:0 2px}#radarPanel{bottom:170px}#controls{gap:7px;flex-wrap:wrap}#controls .tools{margin-left:auto;gap:5px}#controls .tools button{min-width:60px;padding:8px;font-size:10px}.steering button{width:44px}#controls #signal{min-width:85px}#controls small{font-size:8px}#tip{bottom:88px;max-width:90vw;width:max-content;font-size:10px}#toast{top:144px}}
@media(prefers-reduced-motion:reduce){button{transform:none!important}}
/* Phase 2: situation coaching and a clear centre driving area. */
#hud{height:70px;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));gap:20px}.vitals{min-width:0}.vitals label{min-width:0}.vitals strong{margin-left:5px}.brand small{letter-spacing:1px}#mission{top:80px;font-size:11px;padding:8px 12px}#convoyMeter{display:inline-block;width:56px;height:5px;margin:0}#convoyMeter::-webkit-progress-value{background:var(--amber)}#convoyMeter::-moz-progress-bar{background:var(--amber)}
#tip{left:max(18px,env(safe-area-inset-left));top:130px;bottom:auto;transform:none;max-width:none;width:min(310px,27vw);padding:12px 12px 10px;align-items:flex-start;border-left:3px solid var(--teal);border-radius:12px;font-size:12px}#tip small{display:block;font-size:8px;letter-spacing:1.2px;color:#a9ccd1;margin-bottom:7px}#tip strong{display:block;font-size:12px;color:white;line-height:1.35}#tip p{font-size:11px;line-height:1.4;margin:5px 0 0;color:#c1dce0}#tip button{flex:0 0 28px;min-width:28px;min-height:28px;padding:0;margin:-3px -3px 0 0}#tip[data-kind="danger"],#tip[data-kind="regroup"],#tip[data-kind="blocked"]{border-left-color:var(--amber)}#tip[data-kind="danger"] strong{color:var(--amber)}
#controls{padding:10px max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));gap:18px}.steering{gap:10px}.steering button{width:72px!important;min-height:64px!important}.tools{gap:10px}.tools button{min-width:92px;padding:10px 16px;min-height:64px!important}#controls #signal{min-width:140px}#controls button[data-hint="true"]{border:2px solid var(--amber);box-shadow:0 0 0 3px #ffc4672b}#controls button[data-active="true"]{background:#2d6b71;box-shadow:inset 0 0 0 2px #a3fff0}#radarPanel{bottom:106px}#toast{top:auto;bottom:100px;max-width:50vw;font-size:11px}#debrief{padding:10px 12px;border:1px solid #ffc46728;border-radius:10px;background:#ffffff06;margin-top:12px}#debrief strong{font-size:9px;letter-spacing:1px;color:var(--amber)}#debrief p{font-size:11px;line-height:1.4;margin:5px 0 0;color:#c1d7dd}
#vehicleTags{position:fixed;inset:0;pointer-events:none;z-index:2}.vehicleTag{position:absolute;transform:translate(-50%,-155%);padding:3px 6px;border:1px solid #54c7ff88;border-radius:5px;background:#0b2939dc;color:#b4eeff;font-size:9px;font-weight:bold;letter-spacing:.5px;white-space:nowrap;box-shadow:0 2px 7px #0003}#ambulanceTag{border-color:#d6fff388;color:#e7fff4}#trafficTag{border-color:#ffc46788;color:var(--amber);font-size:8px}.vehicleTag[data-offscreen="true"]::before{content:attr(data-direction) ' ';color:var(--amber)}#impact{position:fixed;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 35px 8px #ff9e5866}#hud,#mission,#tip,#controls,#radarPanel,#toast{z-index:4}.overlay{z-index:5}#orientationScreen{z-index:7;background:#0b2938ed}#graphicsScreen{z-index:8}
@media(max-width:1050px){#hud{height:60px;padding:8px 12px;gap:12px}.brand{font-size:10px;letter-spacing:.3px}.brand small{font-size:7px;letter-spacing:.3px}.vitals{gap:12px}.vitals label{font-size:9px}.vitals strong{font-size:12px}.vitals label.time{flex-basis:75px}.time strong{font-size:20px}.actions button{min-width:40px;min-height:40px}#mission{top:68px;padding:7px 10px;font-size:10px}#mission strong{font-size:11px}#tip{top:108px;left:12px;width:min(250px,27vw);padding:9px}#tip strong{font-size:10px}#tip p{font-size:10px}#tip small{font-size:7px;margin-bottom:5px}#controls{padding:8px 12px max(10px,env(safe-area-inset-bottom));gap:10px}.steering button{width:60px!important;min-height:56px!important}.tools button{min-width:78px;padding:8px 12px;min-height:56px!important}#controls #signal{min-width:124px}.tools,.steering{gap:8px}#radarPanel{bottom:92px}#toast{bottom:84px}}
@media(max-height:540px){#hud{height:54px;padding-top:6px;padding-bottom:6px}#mission{top:62px;padding:6px 10px;font-size:9px}#mission strong{font-size:10px}#convoyMeter{width:40px}#tip{top:96px;width:min(250px,28vw);padding:8px 9px}#tip small{font-size:7px;margin-bottom:4px}#tip strong{font-size:10px}#tip p{font-size:10px}#controls{padding-bottom:max(8px,env(safe-area-inset-bottom))}.steering button{min-height:54px!important}.tools button{min-height:54px!important}.panel.compact{padding:16px 22px;max-height:calc(100dvh - 24px);overflow:auto}.resultGrid{margin:10px 0}.compact>p{margin:8px 0}.compact .primary{padding:11px}#debrief{padding:7px 9px;margin-top:8px}#debrief p{font-size:10px}#radarPanel{bottom:82px}#toast{bottom:78px}#controls small{margin-top:4px}}
@media(max-width:700px) and (orientation:landscape){#hud{flex-wrap:nowrap;gap:8px}.brand{font-size:9px;flex:0 0 112px}.brand small{display:none}.badge{padding:4px;font-size:11px}.vitals{order:0;flex-basis:auto;gap:8px}.vitals label{font-size:8px}.vitals strong{font-size:10px}.vitals label.time{flex-basis:55px}.time strong{font-size:17px}.actions{gap:4px}.actions button{min-width:36px;min-height:36px}#controls{flex-wrap:nowrap;gap:8px}.steering button{width:54px!important}.tools{gap:6px;margin-left:auto}.tools button{min-width:68px;padding:8px;font-size:10px!important}#controls #signal{min-width:100px}#tip{width:190px;max-width:30vw}#radarPanel{bottom:82px}#mission{top:62px;font-size:8px;white-space:nowrap}#mission strong{font-size:9px}}
@media(max-height:400px) and (orientation:landscape){#radarPanel{display:none}#tip{padding:7px;font-size:9px}#tip p{font-size:9px}#tip small{display:none}.vehicleTag{font-size:8px}.brand small{display:none}#toast{padding:6px 10px;bottom:76px;font-size:10px}#controls button{font-size:10px}.tools button{min-width:72px}}
@media(prefers-reduced-motion:reduce){button{transition:none}#impact{box-shadow:inset 0 0 0 5px #ffad7180}}
#hud,#controls{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}#tip,#radarPanel{left:max(12px,calc(env(safe-area-inset-left) + 6px))}

/* Phase 3 mission cards and incident guidance. */
#missionPicker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 8px}#missionPicker button{padding:11px 8px;text-align:left;min-height:60px}#missionPicker b{display:block;font-size:10px;letter-spacing:.3px}#missionPicker small{display:block;font-size:8px;color:#a9c9cc;margin-top:7px}#missionPicker button[aria-pressed="true"]{border-color:var(--teal);background:#255359}#missionPicker button[aria-pressed="true"] b{color:var(--teal)}#careerCount{font-size:8px;letter-spacing:1.1px;color:#a8cad0;margin:7px 0 12px}#briefMeta{display:block;font-size:9px;color:var(--amber);margin-top:7px;letter-spacing:.4px}#nextMission{margin-top:10px}#resultScreen #retry{margin-top:10px;background:#25515a;color:#e4ffff;font-size:12px}#tip[data-kind="roadworks"],#tip[data-kind="bus"]{border-left-color:var(--amber)}#tip[data-kind="roadworks"] strong{color:var(--amber)}#startScreen .panel{max-height:calc(100dvh - 28px);overflow-y:auto}
@media(max-height:540px){#startScreen h1{font-size:34px;line-height:.94;margin:9px 0}#startScreen .tagline{font-size:12px;margin:8px 0}#startScreen .brief{padding:8px}#startScreen .brief p{font-size:11px;line-height:1.3}#briefMeta{font-size:8px;margin-top:5px}#missionPicker{margin:10px 0 6px;gap:6px}#missionPicker button{min-height:48px;padding:8px 6px}#missionPicker b{font-size:9px}#missionPicker small{font-size:7px;margin-top:5px}#careerCount{margin:5px 0 8px;font-size:7px}#startScreen .hint,#startScreen .fine{font-size:9px;margin-top:7px}#nextMission{padding:10px}#resultScreen #retry{padding:9px;margin-top:7px}}

@media(max-height:540px){#startScreen h1 br{display:none}#startScreen h1 em{margin-left:.2em}#startScreen .tagline,#startScreen .fine{display:none}#startScreen #start{position:sticky;bottom:0;z-index:1;box-shadow:0 0 0 6px #143441}#startScreen .panel{padding:15px 20px}#careerCount{margin-bottom:6px}}
@media(max-height:400px){#startScreen h1{font-size:29px}#startScreen .hint,#startScreen #careerCount{display:none}#startScreen .eyebrow{font-size:9px}#missionPicker{margin-top:8px}#missionPicker button{min-height:44px}#startScreen .panel{padding:12px 18px}}

/* Phase 4: route anticipation and adjustable presentation. */
.presentationSettings{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 16px;padding:10px 12px;border:1px solid #ffffff20;border-radius:10px;background:#ffffff05}.presentationSettings label{font-size:9px;letter-spacing:.7px;color:#b7d5dc}.presentationSettings select{display:block;background:#173d4c;color:#eefbff;border:1px solid #81c8ca60;border-radius:7px;font:inherit;font-size:12px;margin-top:4px;padding:7px;min-height:36px;min-width:125px;touch-action:manipulation}.effectsSetting{display:flex;align-items:center;font-size:11px!important;letter-spacing:0!important;min-height:44px;cursor:pointer}.effectsSetting input{width:18px;height:18px;margin:0 8px 0 0;accent-color:var(--teal)}select:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.overlay,.panel{touch-action:pan-y}#routeNotice{position:fixed;right:max(12px,calc(env(safe-area-inset-right) + 6px));top:130px;width:min(220px,23vw);padding:10px 12px;background:#11333fe8;border:1px solid #ffc46740;border-right:3px solid var(--amber);border-radius:12px;z-index:4;pointer-events:none}#routeNotice small{display:block;color:#adccd1;font-size:7px;letter-spacing:1.3px;margin-bottom:5px}#routeNotice strong{display:block;font-size:10px;color:var(--amber);line-height:1.4}#routeNotice b{display:block;font-size:15px;color:white;margin-top:4px;font-variant-numeric:tabular-nums}#routeNotice p{font-size:10px;line-height:1.4;margin:5px 0 0;color:#c1dce0}#routeNotice[data-kind="hospital"]{border-color:#64e5d440;border-right-color:var(--teal)}#routeNotice[data-kind="hospital"] strong{color:var(--teal)}
@media(max-width:1050px){#routeNotice{top:108px;padding:8px;width:min(200px,23vw)}#routeNotice strong{font-size:9px}#routeNotice p{font-size:9px}#routeNotice b{font-size:13px}}
@media(max-height:540px){#routeNotice{top:96px;padding:7px 8px}.presentationSettings{padding:6px 9px;margin:7px 0 10px}.presentationSettings select{min-height:32px;margin-top:2px;padding:5px;font-size:11px}.effectsSetting{min-height:36px}}
@media(max-height:400px){#routeNotice{width:23vw}#routeNotice p,#routeNotice small{display:none}#routeNotice b{font-size:12px;margin-top:2px}.presentationSettings{padding:5px 8px;margin:6px 0 8px}}

#routeNotice{height:124px;overflow:hidden}#routeNotice strong,#routeNotice p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#routeNotice strong{min-height:28px}
@media(max-width:1050px){#routeNotice{height:112px}#routeNotice strong{min-height:25px}}
@media(max-height:540px){#routeNotice{height:108px}}
@media(max-height:400px){#routeNotice{height:60px}#routeNotice p{display:none}}

/* Phase 5: dispatch targets and result feedback. */
.dispatchGoals{margin:12px 0;padding:10px 12px;border:1px solid #64e5d425;border-radius:10px;background:#ffffff04}.dispatchGoals>strong{display:block;font-size:8px;letter-spacing:1px;color:#aacbd0;margin-bottom:7px}.goalRow{position:relative;padding:6px 100px 6px 0;border-top:1px solid #ffffff0c;min-height:40px}.goalRow b{display:block;font-size:10px;font-weight:600;color:#e1f4f3;line-height:1.3}.goalRow small{display:block;color:#a7c7cf;font-size:9px;line-height:1.4;margin-top:3px}.goalRow span{position:absolute;right:0;top:8px;color:#aac5cc;font-size:7px;letter-spacing:.4px}.goalRow[data-status="complete"] span,.goalRow[data-status="earned"] span{color:var(--teal)}.goalRow[data-status="missed"] span{color:var(--amber)}.goalRow[data-status="ready"] span{color:#d7fff1}#badgeCount{font-size:8px;letter-spacing:1px;color:var(--amber);margin:0 0 12px}#dispatchLive{font-size:8px!important;color:var(--teal)!important;letter-spacing:.5px!important;padding:3px 0 6px}.runTiming{display:flex;gap:10px;margin:8px 0;font-size:7px;letter-spacing:.5px;color:#a7c7cf}.runTiming span{flex:1}.runTiming b{display:block;font-size:13px;color:white;margin-top:3px}.panel{max-height:calc(100dvh - 28px);overflow-y:auto}
@media(max-height:540px){.dispatchGoals{padding:7px 9px;margin:8px 0}.dispatchGoals>strong{font-size:7px;margin-bottom:4px}.goalRow{padding-top:5px;padding-bottom:5px;min-height:35px}.goalRow b{font-size:9px}.goalRow small{font-size:8px}.goalRow span{font-size:7px;top:6px}#badgeCount{font-size:7px;margin:0 0 7px}#dispatchLive{display:block!important;padding-bottom:4px;font-size:7px!important}.runTiming{margin:6px 0}.runTiming b{font-size:11px}}

/* Phase 6: optional guided practice and a direct return to the brief. */
.trainingLaunch{margin:0 0 10px;padding:10px;font-size:10px;letter-spacing:.7px;border-color:#64e5d440;background:#163f4a}#briefPause{font-size:10px;color:#aecfd3}#tip[data-kind="practice"]{border-left-color:#79cfff}#tip[data-kind="practice"] strong{color:#b5edff}
@media(max-height:540px){.trainingLaunch{margin-bottom:8px;padding:8px;font-size:9px}}

/* Phase 7: reuse brake for a bounded patient-care action. */
#care{height:4px;margin-top:5px}#care::-webkit-progress-value{background:#b5edff}#care::-moz-progress-bar{background:#b5edff}#controls #brake{min-width:135px}#brakeHelp{font-size:8px!important;white-space:nowrap}.careInstructions{font-size:10px;line-height:1.5;color:#b5dce0;padding:8px 10px;border-left:2px solid #79cfff;background:#ffffff04}.careSummary{font-size:10px!important;color:#b5edff!important}#tip[data-kind="care"]{border-left-color:#79cfff}#tip[data-kind="care"] strong{color:#b5edff}
@media(max-width:1050px){#controls #brake{min-width:122px}}
@media(max-width:700px) and (orientation:landscape){#controls #brake{min-width:108px;padding-left:5px;padding-right:5px}#brakeHelp{font-size:7px!important}}
@media(max-height:540px){.careInstructions{font-size:9px;line-height:1.4;padding:6px 8px}.careSummary{font-size:9px!important}}

/* Phase 8: one native selector changes the replay arrangement before dispatch. */
.trafficPlanSettings{display:flex;gap:12px;align-items:center;margin:10px 0;padding:9px 11px;border:1px solid #79cfff30;border-radius:10px;background:#ffffff04}.trafficPlanSettings label{font-size:8px;letter-spacing:.8px;color:#b5dce0;flex:0 0 125px}.trafficPlanSettings select{display:block;width:100%;min-height:36px;margin-top:4px;padding:6px;background:#173d4c;color:#eefbff;border:1px solid #81c8ca60;border-radius:7px;font:inherit;font-size:11px;touch-action:manipulation}.trafficPlanSettings p{font-size:10px;line-height:1.4;color:#aacbd3;margin:0}
@media(max-height:540px){.trafficPlanSettings{padding:6px 8px;margin:7px 0;gap:9px}.trafficPlanSettings p{font-size:9px}.trafficPlanSettings select{min-height:32px;font-size:10px}}

/* Phase 9: useful static preview, without a new overlay or touch button. */
#controls #signal[data-preview="ready"]{border-color:#8edbff;color:#b6e9ff}#controls #signal[data-preview="blocked"],#controls #signal[data-preview="fixed"]{border-color:var(--amber);color:var(--amber)}#controls #signal[data-preview="no-target"]{color:#b8d1d7}#signalText{font-size:11px;white-space:nowrap}#signalHelp{font-size:8px!important;white-space:nowrap}
@media(max-width:700px) and (orientation:landscape){#signalText{font-size:9px}#signalHelp{font-size:7px!important}}

/* Phase 10: native, collapsed result review; no driving HUD additions. */
.runReview{margin:12px 0;border:1px solid #79cfff35;border-radius:12px;background:#ffffff04;font-size:11px}.runReview summary{min-height:44px;padding:12px;cursor:pointer;color:#b5edff;font-weight:700;font-size:10px;letter-spacing:.5px;touch-action:manipulation}.runReview summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:10px}.runReview summary small{display:block;font-size:9px;color:#bed5dc;margin:6px 0 0 15px;letter-spacing:0}.runReview>p,.runReview>strong,.runReview>ol{margin:10px 12px;line-height:1.5}.runReview>strong{display:block;color:#b5dce0;font-size:9px;letter-spacing:.5px}#reviewBalance,#reviewSiren{font-size:10px;color:#b5dce0}.lossGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 12px}.lossGrid div{border-top:1px solid #ffffff15;padding-top:7px}.lossGrid dt{font-size:8px;color:#a8c7d0}.lossGrid dd{margin:4px 0 0;font-size:16px;color:var(--amber);font-variant-numeric:tabular-nums}.reviewEvents{padding-left:18px;font-size:10px;color:#d3e9ec}.reviewEvents li{padding:4px 0;border-top:1px solid #ffffff0c}.runReview .fine{font-size:9px;letter-spacing:0}
@media(max-height:540px){.runReview{margin:8px 0}.runReview summary{padding:9px 10px}.lossGrid dd{font-size:14px}.runReview>p,.runReview>strong,.runReview>ol{margin:8px 10px}}

/* Phase 11: fourth dispatch card and reuse of the existing brake/route guidance. */
#missionPicker{grid-template-columns:repeat(2,minmax(0,1fr))}#controls #brake[data-mode="pickup"]{border-color:#b5edff;color:#b5edff}#tip[data-kind="pickup"]{border-left-color:#b5edff}#tip[data-kind="pickup"] strong,#pickupTag{color:#b5edff}#rescuePauseInstructions{border-left-color:#b5edff}
#routeNotice[data-kind="pickup"]{border-color:#b5edff40;border-right-color:#b5edff}#routeNotice[data-kind="pickup"] strong{color:#b5edff}#brake[data-mode="pickup"] progress::-webkit-progress-value{background:#b5edff}#brake[data-mode="pickup"] progress::-moz-progress-bar{background:#b5edff}

/* Phase 15: an optional brief-only career board, with a scrollable records body. */
.recordsLaunch{margin:0 0 10px;padding:10px;font-size:10px;color:#b5edff;border-color:#b5edff40}
.recordsPanel{width:min(900px,96vw);height:min(680px,calc(100dvh - 28px));display:flex;flex-direction:column;overflow:hidden;gap:10px;padding:22px}
.recordsPanel h2{font-size:28px;margin:0;letter-spacing:-.6px}.recordsPanel #recordsHelp{font-size:11px;color:#b8d2d8;line-height:1.4;margin:0}
.recordsTotals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:9px 12px;border:1px solid #64e5d430;border-radius:10px;background:#ffffff04}
.recordsTotals strong{display:block;color:var(--teal);font-size:19px;font-variant-numeric:tabular-nums}.recordsTotals small{display:block;font-size:8px;color:#b8d2d8;margin-top:3px}
.recordsTraining{display:flex;gap:12px;flex-wrap:wrap;margin:0;color:#b8d2d8;font-size:9px}.recordsTraining span[data-passed="true"]{color:var(--teal)}
.recordsBody{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:4px 4px 8px;-webkit-overflow-scrolling:touch}
.recordsPanel,.recordsBody,.recordsRow{touch-action:pan-y}.recordsBody:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.recordsPlan{min-width:0}.recordsPlan h3{font-size:10px;color:#b5edff;letter-spacing:.7px;margin:5px 0 10px}.recordsCards{display:grid;gap:9px}
.recordsRow{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;min-height:98px;padding:11px;text-align:left;border-color:#ffffff25;background:#ffffff04}
.recordsRow strong{font-size:11px;line-height:1.3}.recordsRow>span{font-size:11px;color:var(--amber);font-variant-numeric:tabular-nums}.recordsRow small{font-size:8px;color:#b5ced6;line-height:1.4}
.recordsRow[aria-current="true"]{border-color:#b5edff;background:#1e4554}.recordsRow[data-status="mastered"]{border-color:#64e5d480}.recordsRow[data-status="mastered"] small{color:var(--teal)}
.recordsFooter{flex:none}.recordsFooter p{margin:0 0 7px;font-size:9px;color:#a8c7d0;line-height:1.4}.recordsFooter .secondary{margin:0;min-height:44px;padding:10px}
@media(max-width:700px){.recordsBody{grid-template-columns:1fr}.recordsCards{grid-template-columns:repeat(2,minmax(0,1fr))}.recordsPlan h3{margin-top:3px}.recordsRow{padding:9px}}
@media(max-height:540px){.recordsPanel{padding:14px 18px;gap:7px}.recordsPanel h2{font-size:23px}.recordsPanel .eyebrow{font-size:9px}.recordsTotals{padding:6px 9px}.recordsTotals strong{font-size:16px}.recordsTotals small{font-size:7px}.recordsFooter p{font-size:8px;margin-bottom:5px}.recordsRow{min-height:90px;gap:5px}.recordsRow strong,.recordsRow>span{font-size:10px}.recordsTraining{font-size:8px}}
@media(max-height:400px){.recordsPanel{gap:6px;padding:12px 16px}.recordsPanel .eyebrow,.recordsFooter p{display:none}.recordsPanel h2{font-size:20px}.recordsPanel #recordsHelp{font-size:10px}.recordsTotals{padding:4px 8px}.recordsTotals strong{font-size:14px}.recordsTotals small{font-size:6px}.recordsRow{min-height:84px;padding:8px;gap:4px}}

/* Phase 16: current-run comparison against the prior same-transfer record. */
.runComparison{margin:12px 0;padding:11px 12px;border:1px solid #b5edff40;border-radius:11px;background:#ffffff04}
.runComparison>small{display:block;font-size:8px;line-height:1.4;color:#b8d2d8}.runComparison>strong{display:block;margin:5px 0;color:#b5edff;font-size:11px;letter-spacing:.6px}
.runComparison>p{margin:5px 0 8px;font-size:10px;line-height:1.4;color:#d5e9ee}
.runComparison[data-kind="first"],.runComparison[data-kind="improved"]{border-color:#64e5d460}.runComparison[data-kind="first"]>strong,.runComparison[data-kind="improved"]>strong{color:var(--teal)}
.comparisonMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 0}.comparisonMetrics small{display:block;font-size:7px;color:#aac8d0}.comparisonMetrics b{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:#d8edf2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.comparisonMetrics b[data-change="better"]{color:var(--teal)}.comparisonMetrics b[data-change="worse"]{color:var(--amber)}#comparisonNote{margin-top:7px;font-size:7px}
@media(max-height:540px){.runComparison{padding:8px 10px;margin:8px 0}.runComparison>strong{font-size:10px}.runComparison>p{font-size:9px}.comparisonMetrics b{font-size:10px}}

/* Result-only suggestion; uses the existing scrolling panel. */
.dispatchChallenge{margin:14px 0;padding:12px;border:1px solid #4b7185;border-radius:12px;background:#153947;text-align:left;overflow-wrap:anywhere}
.dispatchChallenge>small{color:#a8cfdd;font-size:10px;letter-spacing:1px}
.dispatchChallenge>strong{display:block;font-size:14px;color:#b5edff}
.dispatchChallenge>p{margin:6px 0;font-size:12px;line-height:1.4}
.dispatchChallenge .secondary{margin:10px 0 0;width:100%}
.dispatchChallenge[data-kind="mastered"]{border-color:#64e5d4}

/* Phase 18: static foreground resume countdown, on the existing paused scene. */
.resumePanel{width:min(330px,94vw);text-align:center}
.resumePanel h2{font-size:22px;letter-spacing:1px}
#resumeNumber{display:block;font-size:64px;line-height:1.1;color:var(--teal);font-variant-numeric:tabular-nums;margin:8px 0}
.resumePanel .secondary{min-height:44px}
@media(max-height:400px){.resumePanel{padding:12px 20px}.resumePanel h2{font-size:18px;margin:7px 0}#resumeNumber{font-size:48px;margin:4px 0}.resumePanel .secondary{padding:10px}.resumePanel p{font-size:11px;margin:6px 0}}

/* Phase 19: swiping over a menu button can scroll its containing panel. */
.overlay button{touch-action:pan-y;scroll-margin-block:12px}
.panel{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}

/* Compact landscape: reserve side pockets for advice, keep the convoy unobscured. */
@media (orientation:landscape) and (max-height:540px){
 #hud{height:44px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:10px;flex-wrap:nowrap;align-items:center}
 .brand{flex:0 0 auto;gap:0}.brand>div{display:none}.badge{font-size:12px;padding:5px 4px}
 .vitals{order:0;flex:1;flex-basis:auto;gap:12px;max-width:none;align-items:center}
 .vitals label{font-size:9px}.vitals strong{font-size:12px}.vitals label.time{flex:0 0 64px}
 .time strong{font-size:17px;line-height:1.05}.vitals progress{height:3px;margin-top:3px}
 .actions{gap:4px;margin-left:0}.actions button{min-width:44px;min-height:44px;border-radius:8px}
 #mission{top:52px;left:max(10px,env(safe-area-inset-left));transform:none;width:min(180px,calc(25vw - max(10px,env(safe-area-inset-left)) - 10px));height:72px;padding:7px;font-size:9px;gap:3px 6px;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;white-space:normal}
 #convoyState,#speed{grid-column:1/-1}#convoyState{font-size:9px;line-height:1.2}#speed{font-size:10px}#mission strong{font-size:10px}#mission .divider{display:none}#convoyMeter{width:100%;height:3px}
 #controls{flex-wrap:nowrap;padding:4px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:8px}
 #controls .steering,#controls .tools{gap:6px}#controls .tools{margin-left:auto}
 #controls .steering button{width:52px!important;min-height:48px!important}
 #controls .tools button{min-width:68px;min-height:48px!important;padding:5px 8px;font-size:10px}
 #controls #brake{min-width:108px}#controls #signal{min-width:112px}
 #controls small{font-size:8px;margin-top:2px}#signalText{font-size:10px}#signalHelp,#brakeHelp{font-size:8px!important}
 #care,#charge{height:3px;margin-top:3px}
 #radarPanel{display:none}
 #tip{top:132px;bottom:auto;left:max(10px,env(safe-area-inset-left));width:min(180px,calc(25vw - max(10px,env(safe-area-inset-left)) - 10px));max-width:none;padding:7px;gap:3px;border-radius:8px;max-height:calc(100dvh - 196px - max(8px,env(safe-area-inset-bottom)));overflow-y:auto;touch-action:pan-y}
 #tip>div{min-width:0;flex:1}#tip small{display:none}#tip strong{font-size:10px;line-height:1.3}#tip p{font-size:10px;line-height:1.3;margin-top:4px}
 #tip button{flex-basis:28px;margin:0;min-height:28px}#tip[data-kind="steady"]{display:none}
 #routeNotice{top:52px;right:max(10px,env(safe-area-inset-right));width:min(160px,calc(25vw - max(10px,env(safe-area-inset-right)) - 10px));height:auto;max-height:calc(100dvh - 116px - max(8px,env(safe-area-inset-bottom)));padding:7px;border-radius:8px}
 #routeNotice[data-kind="hospital"]{display:none}#routeNotice small,#routeNotice p{display:none}
 #routeNotice strong{min-height:0;font-size:10px;line-height:1.3}#routeNotice b{font-size:12px;margin-top:4px}
 #toast{top:52px;bottom:auto;left:auto;right:max(10px,env(safe-area-inset-right));transform:none;width:min(160px,calc(25vw - max(10px,env(safe-area-inset-right)) - 10px));max-width:none;padding:7px;border-radius:8px;font-size:10px;line-height:1.4;max-height:calc(100dvh - 116px - max(8px,env(safe-area-inset-bottom)));overflow:hidden}
 #escortTag[data-offscreen="false"],#ambulanceTag[data-offscreen="false"],#trafficTag[data-offscreen="false"]{display:none}
 .vehicleTag{font-size:9px;letter-spacing:0}
}
@media (orientation:landscape) and (max-height:300px){
 #mission{height:68px;padding:5px;gap:2px 6px}#mission strong,#speed{font-size:9px}#convoyState{font-size:8px}
 #tip{top:128px;max-height:calc(100dvh - 192px - max(8px,env(safe-area-inset-bottom)))}#tip button{display:none}
}