:root{--ink:#102f3b;--teal:#078675;--teal-dark:#046355;--paper:#f6f7f1;--yellow:#ffd358;--red:#dd5548;--muted:#4f6767;--line:rgba(16,47,59,.14);--sans:'Noto Sans TC','Microsoft JhengHei',sans-serif;--display:'Noto Sans TC',sans-serif;--mono:'Barlow Condensed',ui-monospace,monospace}
*{box-sizing:border-box}html{min-height:100%;background:#d6e7e5}body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;overflow-x:hidden;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:5px}button:disabled{cursor:wait;opacity:.6}button,dialog{touch-action:manipulation}button svg{display:block}button{transition:background .18s,transform .18s,box-shadow .18s}button:active{transform:translateY(2px)}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}.world-shade{position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(237,244,235,.97) 0%,rgba(237,244,235,.86) 24%,rgba(237,244,235,.25) 49%,transparent 70%),linear-gradient(0deg,rgba(230,238,225,.5),transparent 28%)}.topbar{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;max-width:1660px;margin:auto;padding:25px 5.3vw}.brand{display:flex;align-items:center;gap:12px;background:none;padding:0;text-align:left}.brand-symbol{display:flex;align-items:flex-start;justify-content:center;width:48px;height:48px;padding:1px 0 0 4px;border-radius:13px;background:var(--teal);color:var(--yellow);font:800 48px/.9 var(--mono);transform:rotate(-6deg)}.brand-symbol span{font:700 25px/1.2 var(--mono);margin-left:-2px}.brand-name{font-size:21px;font-weight:900;letter-spacing:.12em;line-height:1.25}.brand-name small{font:600 11px/2 var(--sans);display:block;letter-spacing:.2em}.top-actions{display:flex;align-items:center;gap:10px}.open-label{display:flex;align-items:center;gap:7px;margin-right:15px;font-size:11px;font-weight:600;letter-spacing:.08em}.open-label i,.live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px #07867514;display:inline-block}.icon-button{width:41px;height:41px;border-radius:50%;background:#f6f7f1dc;display:grid;place-items:center;border:1px solid #ffffff80;backdrop-filter:blur(10px)}.icon-button:hover{background:white}.icon-button svg{width:20px;height:20px}.help-icon{font:600 22px var(--mono);width:20px;height:20px;line-height:18px;border:1.5px solid currentColor;border-radius:50%}.sound-wave{display:none}#sound[aria-pressed=true] .sound-wave{display:block}#sound[aria-pressed=true] .sound-off{display:none}
.home{position:relative;z-index:2;max-width:1660px;margin:auto;padding:0 5.3vw 18px;min-height:calc(100svh - 98px);display:flex;flex-direction:column}.hero-copy{margin-top:clamp(20px,4.2vh,65px);position:relative;width:53%;padding-bottom:55px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;font-weight:700}.tiny-scooter{background:var(--ink);color:var(--paper);width:21px;height:21px;text-align:center;line-height:21px;border-radius:5px;font-size:16px}.hero-copy h1{font:900 clamp(66px,7.1vw,112px)/1.1 var(--display);letter-spacing:-.06em;margin:24px 0 22px}.outlined{color:var(--teal-dark)}.hero-description{font-size:15px;line-height:1.9;font-weight:500;letter-spacing:.035em;margin:0 0 26px;color:#476361}.hero-cta{display:flex;align-items:center;gap:25px}.primary{background:var(--yellow);color:var(--ink);font-weight:800;min-height:51px;padding:13px 24px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 3px 0 #c5a039}.primary:hover{background:#ffdd7a;transform:translateY(-2px);box-shadow:0 5px 0 #c5a039}.primary.large{font-size:18px;min-width:202px;min-height:63px;border-radius:12px}.primary.large span{font-size:30px;font-weight:400;line-height:1}.text-button{background:none;padding:9px 0;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px}.text-button:hover{color:var(--teal-dark)}.play-icon{width:28px;height:28px;border:1px solid #102f3b40;border-radius:50%;display:grid;place-items:center;font-size:18px;padding-left:2px}.hero-footnote{display:flex;align-items:center;gap:9px;font-size:11px;color:#4f6767;margin-top:25px;letter-spacing:.03em}.hero-footnote i{height:3px;width:3px;border-radius:50%;background:#8ca097}.challenge-note{margin-top:18px;background:#fff7d8;border:1px solid #e4ca79;padding:10px 14px;max-width:360px;font-size:12px;line-height:1.7}.scene-caption{position:absolute;top:clamp(380px,49vh,600px);right:6vw;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.08em;background:#ffffffbb;border:1px solid #fff;padding:10px 13px;border-radius:7px;backdrop-filter:blur(10px)}.scene-caption #shot-label{padding-left:10px;margin-left:3px;border-left:1px solid #102f3b30;font-family:var(--mono);letter-spacing:.03em}.mission-board{margin-top:auto;background:#f6f7f1f2;border:1px solid #ffffff;box-shadow:0 12px 50px #102f3b0c;border-radius:15px;padding:22px 25px 14px;backdrop-filter:blur(14px)}.board-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.kicker{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--teal-dark)}.board-heading h2{font-size:17px;margin:5px 0 0;letter-spacing:.03em}.board-note{font-size:11px;color:var(--muted)}.board-note span{font-size:22px;margin-left:14px;color:var(--teal-dark)}.mission-list{display:grid;grid-template-columns:1fr 1fr 1fr}.mission{background:none;display:flex;align-items:center;text-align:left;gap:14px;padding:17px 16px;border-top:1px solid var(--line);position:relative;border-radius:0}.mission+.mission{border-left:1px solid var(--line)}.mission.selected{background:#e7efdf;border-radius:8px;border-top-color:transparent}.mission.selected+.mission{border-left-color:transparent}.mission-number{font:600 32px var(--mono);color:#607568}.mission.selected .mission-number{color:var(--teal-dark)}.mission-info strong{display:block;font-size:16px;letter-spacing:.03em}.mission-info small{display:block;font-size:11px;color:#4f6767;margin-top:6px}.mission-record{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}.mission-arrow{font-size:22px;margin-left:2px;color:var(--teal-dark)}.mission:not(.selected):hover{background:#edf1e8;border-radius:8px}.home-footer{display:flex;justify-content:space-between;font-size:11px;color:#4f6767;padding:13px 3px 0;letter-spacing:.08em}
body[data-screen=game]{overflow:hidden;height:100svh}body[data-screen=game] .world-shade{background:linear-gradient(0deg,rgba(16,47,59,.35),transparent 32%),linear-gradient(180deg,rgba(234,243,237,.2),transparent 25%)}body[data-screen=game] .topbar{padding-top:16px}body[data-screen=game] .brand-name{font-size:17px}body[data-screen=game] .brand-symbol{width:38px;height:38px;font-size:38px;border-radius:10px}body[data-screen=game] .brand-symbol span{font-size:20px}body[data-screen=game] .brand-name small{font-size:11px}body[data-screen=game] .open-label{display:none}.game{position:fixed;inset:0;z-index:5;pointer-events:none}.game button{pointer-events:auto}.game-toolbar{position:absolute;top:96px;left:5.3vw;display:flex;align-items:center;gap:13px}.round-button{width:38px;height:38px;border-radius:50%;background:#f6f7f1e6;display:grid;place-items:center;font-size:20px;box-shadow:0 3px 12px #102f3b0a}.game-title{margin-right:12px}.game-title small{font:600 11px var(--mono);letter-spacing:.16em;color:var(--teal-dark)}.game-title h2{margin:3px 0 0;font-size:18px;letter-spacing:.04em}.instrument{position:absolute;left:50%;top:29px;transform:translateX(-50%);display:flex;align-items:center;gap:25px;background:#f6f7f1f2;backdrop-filter:blur(12px);border-radius:13px;padding:13px 28px 16px;box-shadow:0 6px 22px #102f3b12;min-width:247px}.time-readout>span{font-size:11px;font-weight:600;color:var(--muted);display:block}.time-readout>strong{font:600 43px/1 var(--mono);font-variant-numeric:tabular-nums;display:block;margin-top:3px}.time-readout small{font-size:17px;color:#4f6767;margin-left:4px}.instrument-rule{width:1px;height:39px;background:var(--line)}.speed-readout{display:flex;align-items:baseline;gap:5px;min-width:60px}.speed-readout strong{font:600 34px var(--mono);font-variant-numeric:tabular-nums}.speed-readout>span{font-size:11px;color:var(--muted)}.timer-track{position:absolute;left:18px;right:18px;bottom:6px;height:3px;background:#dce4dd;border-radius:2px;overflow:hidden}.timer-track i{transform-origin:left;display:block;background:var(--teal);width:0;height:100%;transition:transform .1s}.task-hint{position:absolute;top:137px;left:50%;transform:translateX(-50%);font-size:11px;line-height:1.6;color:var(--ink);background:#f6f7f1d9;border:1px solid #ffffffaa;border-radius:20px;padding:8px 18px;text-align:center;white-space:nowrap;backdrop-filter:blur(8px)}.stop-checks{position:absolute;top:180px;left:50%;transform:translateX(-50%);display:flex;gap:7px;white-space:nowrap}.stop-checks span{font-size:11px;padding:5px 10px;border-radius:15px;background:#f6f7f1df;color:#4f6767}.stop-checks span.done{background:var(--teal);color:white}.comment{position:absolute;left:5.3vw;bottom:228px;display:flex;align-items:center;gap:10px;background:#f6f7f1ee;padding:10px 17px 10px 10px;border-radius:10px;box-shadow:0 3px 18px #102f3b0b;max-width:350px;transition:opacity .3s,transform .3s}.examiner-avatar{width:38px;height:38px;border-radius:50%;background:#e5e5d2;display:grid;place-items:center;font-size:23px;color:#677a6a;flex-shrink:0}.comment small{font-size:11px;color:var(--teal-dark);letter-spacing:.1em;font-weight:600}.comment p{font-size:12px;margin:3px 0 0;line-height:1.6;font-weight:500}.driving-controls{position:absolute;bottom:50px;left:5.3vw;right:5.3vw;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;max-width:1300px;margin:auto;user-select:none;-webkit-user-select:none;touch-action:none}.control-label{font-size:11px;font-weight:700;color:white;text-shadow:0 1px 5px #102f3b66;margin:0 0 10px 5px}.control-label span{font-size:11px;opacity:.7;margin-left:8px}.steering-buttons{display:flex;align-items:center;gap:9px}.drive{touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 5px 0 #102f3b30;border:1px solid #ffffff60}.drive.held,.utility.held{transform:translateY(4px);box-shadow:0 1px 0 #102f3b30;filter:brightness(.9)}.steer{background:#f6f7f1f2;width:81px;height:91px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.steer svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.steer span{font-size:11px;font-weight:600}.steer-dial{width:56px;height:56px;padding:2px;color:white}.steer-dial svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;transition:transform .08s;filter:drop-shadow(0 1px 4px #102f3b50)}.utility-controls{display:flex;align-items:center;gap:7px;margin-bottom:5px}.utility{background:#f6f7f1dc;width:57px;height:63px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;touch-action:none}.utility>span{font-size:24px;line-height:1}.utility small{font-size:11px;font-weight:600;white-space:nowrap}.utility svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5}.utility[aria-pressed=true]{background:var(--yellow);color:var(--ink)}.pedal-group{display:flex;align-items:flex-end;gap:12px}.pedal-group .drive{width:95px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:13px;gap:5px}.brake{height:104px;background:#f6f7f1f2}.throttle{height:130px;background:var(--yellow)}.pedal-lines{font:500 33px/.8 var(--mono);margin-bottom:7px}.pedal-group strong{font-size:14px;letter-spacing:.1em}.pedal-group small{font-size:11px;opacity:.65}.control-tip{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:11px;letter-spacing:.08em;text-shadow:0 1px 4px #102f3b55;white-space:nowrap}.photo-thumb{position:absolute;right:5.3vw;bottom:220px;transform:rotate(5deg);padding:5px;background:var(--paper);box-shadow:0 7px 20px #102f3b33;width:140px;animation:photo-in .5s ease-out}.photo-thumb img{width:100%;height:100px;object-fit:cover;display:block}.photo-thumb span{font-size:11px;display:block;text-align:center;padding:6px 2px 3px}@keyframes photo-in{from{transform:scale(1.4) rotate(0deg);opacity:0}to{transform:scale(1) rotate(5deg);opacity:1}}
.countdown{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#102f3b16;pointer-events:none}.countdown>span{font:800 clamp(100px,20vw,200px)/1 var(--mono);color:var(--paper);text-shadow:0 5px 0 var(--teal),0 12px 50px #102f3b33}.countdown p{background:var(--paper);padding:9px 18px;border-radius:20px;font-size:11px}.flash{position:fixed;inset:0;background:white;opacity:0;pointer-events:none;z-index:70}.flash.fire{animation:flash .4s ease-out}@keyframes flash{0%{opacity:.85}100%{opacity:0}}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:100;background:var(--ink);color:white;padding:12px 22px;border-radius:10px;box-shadow:0 5px 22px #102f3b33;font-size:12px;max-width:90vw;white-space:nowrap}
dialog.sheet{border:0;border-radius:20px;background:var(--paper);color:var(--ink);width:min(480px,calc(100vw - 28px));max-height:calc(100svh - 36px);padding:34px;box-shadow:0 24px 100px #102f3b40;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#102f3b70;backdrop-filter:blur(7px)}.sheet h2{font-weight:900;font-size:30px;letter-spacing:-.04em;line-height:1.3;margin:12px 0}.sheet-intro{color:var(--muted);line-height:1.9;font-size:12px}.close-dialog{position:absolute;right:13px;top:13px;width:30px;height:30px;background:#ffffffd9;border-radius:50%;font:400 25px/1 var(--sans);display:grid;place-items:center;z-index:2;box-shadow:0 2px 8px #102f3b0b}.help-steps{margin:26px 0}.help-steps>div{display:flex;gap:14px;border-top:1px solid var(--line);padding:13px 0}.help-steps>div>span{font:600 25px var(--mono);color:var(--teal-dark);margin-top:3px}.help-steps p{font-size:11px;line-height:1.8;margin:0;color:var(--muted)}.help-steps strong{display:block;font-size:13px;color:var(--ink);margin-bottom:3px}.keyboard-guide{font-size:11px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.keyboard-guide kbd{font:500 11px var(--mono);padding:4px;background:#e4eadd;border:1px solid #ccd8cb;border-radius:4px}.easter-hint{font-size:11px;color:var(--teal-dark);margin:21px 0;line-height:1.8}.full{width:100%}.secondary{background:transparent;border:1px solid #a9bbb1;border-radius:10px;min-height:51px;padding:12px 16px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px}.secondary:hover{background:#e6edde}.pause-sheet .secondary{margin-top:12px}.centered{display:flex;margin:10px auto 0}.result-sheet{padding:0!important;overflow:hidden!important;width:min(440px,calc(100vw - 28px))!important;max-height:calc(100svh - 26px)!important}.result-photo{position:relative;height:min(26svh,230px);background:#d6e5da;overflow:hidden}.result-photo img{width:100%;height:100%;object-fit:cover}.result-stamp{position:absolute;right:20px;bottom:20px;border:3px solid var(--red);color:var(--red);padding:6px 11px;font-size:25px;font-weight:900;letter-spacing:.05em;transform:rotate(-10deg);background:#f6f7f1e6;border-radius:7px;box-shadow:0 0 0 3px #f6f7f17a}.result-stamp.success{color:var(--teal-dark);border-color:var(--teal-dark)}.photo-label{position:absolute;left:20px;bottom:15px;font:600 11px var(--mono);letter-spacing:.18em;color:white;text-shadow:0 1px 5px #102f3b80}.result-body{padding:25px 26px 16px}.result-body h2{margin:10px 0 7px;font-size:29px}.result-detail{font-size:11px;color:var(--muted);line-height:1.8;margin:0;min-height:40px}.result-stats{display:grid;grid-template-columns:1.15fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin:17px 0}.result-stats>div+div{padding-left:16px;border-left:1px solid var(--line)}.result-stats span{display:block;font-size:11px;color:var(--muted)}.result-stats strong{display:block;font:600 31px/1.2 var(--mono);margin-top:4px}.result-stats small{font:500 11px var(--sans);margin-left:5px;color:var(--muted)}.result-actions{display:grid;grid-template-columns:1.1fr 1fr;gap:10px}.result-actions button{font-size:13px}.result-body>.text-button{font-size:11px}.friend-comparison{font-size:11px;color:var(--teal-dark);background:#e6edde;padding:8px 12px;border-radius:6px}.share-sheet{width:min(440px,calc(100vw - 28px))!important;padding:27px!important;text-align:center}.share-sheet h2{font-size:25px}.share-sheet #share-preview{max-height:49svh;width:auto;max-width:100%;border-radius:5px;box-shadow:0 7px 24px #102f3b20;display:block;margin:16px auto 20px}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.share-actions button{font-size:11px;padding:10px}.share-note{font-size:11px;color:var(--muted);margin:9px 0 0;line-height:1.7}.loading{position:fixed;inset:0;background:var(--paper);z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .4s}.loading-symbol{font:800 84px/1 var(--mono);color:var(--teal-dark);transform:rotate(-6deg)}.loading-symbol span{font-size:40px;vertical-align:top}.loading p{font-size:12px;margin:20px 0;color:var(--muted);letter-spacing:.12em}.loading>span{width:90px;height:3px;background:var(--teal);animation:loading 1s ease-in-out infinite alternate;transform-origin:left}.loading.out{opacity:0;pointer-events:none}@keyframes loading{from{transform:scaleX(.2)}to{transform:scaleX(1)}}.unsupported{position:fixed;inset:0;z-index:101;background:var(--paper);display:grid;place-content:center;text-align:center;padding:25px;line-height:2}.unsupported h2{font-size:24px}.unsupported p{font-size:13px}.unsupported button{background:var(--yellow);border-radius:9px;padding:12px 22px;margin-top:15px}
@media(min-width:1600px){.hero-copy{margin-top:7vh}.mission-board{margin-bottom:15px}}
@media(max-width:1150px){.topbar{padding:22px 4vw}.home{padding-left:4vw;padding-right:4vw}.hero-copy{width:58%;padding-bottom:46px}.hero-copy h1{font-size:82px}.mission-board{padding:19px 20px 10px}.mission{gap:10px;padding:15px 10px}.mission-record{display:none}.mission-arrow{margin-left:auto}.game-toolbar{left:4vw}.comment{left:4vw}.driving-controls{left:4vw;right:4vw}.scene-caption{right:4vw}}
@media(max-width:760px){.topbar{padding:18px 22px}.brand-symbol{width:40px;height:40px;font-size:40px;border-radius:11px}.brand-symbol span{font-size:22px}.brand-name{font-size:18px}.brand-name small{font-size:11px}.open-label{display:none}.icon-button{width:36px;height:36px}.top-actions{gap:7px}.home{padding:0 22px 17px;min-height:calc(100svh - 76px)}.world-shade{background:linear-gradient(180deg,rgba(237,244,235,.92),rgba(237,244,235,.56) 32%,transparent 57%,rgba(234,241,228,.7) 77%),linear-gradient(90deg,rgba(237,244,235,.45),transparent 85%)}.hero-copy{margin-top:19px;width:100%;padding-bottom:0}.eyebrow{font-size:11px;letter-spacing:.16em;gap:8px}.tiny-scooter{width:18px;height:18px;font-size:14px;line-height:18px}.hero-copy h1{font-size:clamp(61px,13vw,90px);line-height:1.12;margin:19px 0 14px;letter-spacing:-.06em}.hero-description{font-size:12px;line-height:1.9;margin-bottom:18px}.hero-cta{gap:20px}.primary.large{min-width:155px;min-height:51px;font-size:15px;border-radius:10px;padding:11px 20px}.primary.large span{font-size:24px}.text-button{font-size:11px}.hero-footnote{font-size:11px;gap:6px;margin-top:17px}.scene-caption{top:clamp(400px,53svh,570px);right:22px;font-size:11px;padding:8px 9px}.mission-board{margin-top:clamp(120px,19svh,200px);padding:16px 16px 5px;border-radius:13px}.board-heading{margin-bottom:9px}.board-heading h2{font-size:14px;margin-top:4px}.board-heading .kicker{font-size:11px}.board-note{font-size:11px}.board-note span{display:none}.mission-list{display:flex;flex-direction:column}.mission{padding:12px 9px;gap:12px}.mission+.mission{border-left:0;border-top:1px solid var(--line)}.mission.selected{border:0}.mission-number{font-size:28px;width:26px}.mission-info strong{font-size:13px}.mission-info small{font-size:11px;margin-top:3px}.mission-record{display:block;font-size:11px}.mission-arrow{font-size:19px;margin-left:4px}.home-footer{font-size:11px;letter-spacing:0;padding-top:12px}.challenge-note{font-size:11px;margin-top:12px;padding:7px 10px;max-width:280px}.game-toolbar{top:78px;left:20px;gap:9px}.game-title small{font-size:11px}.game-title h2{font-size:15px}.round-button{width:31px;height:31px;font-size:17px}.game-title{margin-right:3px}.instrument{top:135px;left:20px;transform:none;min-width:0;padding:10px 16px 13px;gap:15px;border-radius:10px}.time-readout>strong{font-size:32px}.time-readout>span{font-size:11px}.speed-readout strong{font-size:27px}.speed-readout{min-width:47px}.speed-readout>span{font-size:11px}.instrument-rule{height:30px}.task-hint{top:223px;left:20px;transform:none;font-size:11px;padding:7px 13px;max-width:calc(100vw - 40px);white-space:normal;text-align:left;border-radius:9px}.stop-checks{left:20px;top:265px;transform:none;gap:4px}.stop-checks span{font-size:11px;padding:5px 8px}.comment{left:18px;bottom:216px;max-width:calc(100vw - 36px);padding:8px 12px 8px 8px;gap:8px}.examiner-avatar{height:30px;width:30px;font-size:19px}.comment p{font-size:11px;margin-top:2px}.comment small{font-size:11px}.driving-controls{bottom:max(44px,calc(env(safe-area-inset-bottom) + 30px));left:18px;right:18px;gap:6px;align-items:flex-end}.control-label{font-size:11px;margin-bottom:8px}.control-label span{display:none}.steering-buttons{gap:6px}.steer{width:57px;height:77px;border-radius:11px}.steer svg{width:23px;height:23px}.steer span{font-size:11px}.steer-dial{display:none}.pedal-group{gap:7px}.pedal-group .drive{width:66px;border-radius:11px}.brake{height:88px}.throttle{height:110px}.pedal-group strong{font-size:12px}.pedal-group small{font-size:11px}.pedal-lines{font-size:27px}.utility-controls{position:absolute;bottom:126px;right:0;gap:6px;margin:0}.utility{width:42px;height:44px;border-radius:8px;gap:2px}.utility small{font-size:11px}.utility>span{font-size:18px}.utility svg{height:18px;width:18px}.control-tip{bottom:max(16px,env(safe-area-inset-bottom));font-size:11px;letter-spacing:0}.photo-thumb{right:19px;bottom:280px;width:104px}.photo-thumb img{height:74px}.photo-thumb span{font-size:11px}.sheet h2{font-size:27px}dialog.sheet{padding:27px}.help-steps{margin:18px 0}.result-body{padding:20px 22px 13px}.result-body h2{font-size:25px}.result-stats{margin:12px 0;padding:10px 0}.result-detail{font-size:11px;min-height:36px}.result-stats strong{font-size:28px}.result-actions button{font-size:12px;padding:11px}.result-photo{height:24svh;min-height:140px}.result-stamp{font-size:21px;right:17px;bottom:17px}.toast{bottom:20px;font-size:11px;padding:10px 16px}}
@media(max-width:380px){.hero-copy h1{font-size:58px}.hero-copy{margin-top:10px}.hero-description{font-size:11px}.hero-cta{gap:16px}.home{padding-left:18px;padding-right:18px}.topbar{padding-left:18px;padding-right:18px}.mission-board{margin-top:130px;padding-left:12px;padding-right:12px}.board-note{display:none}.mission-record{display:none}.steer{width:50px}.pedal-group .drive{width:60px}.driving-controls{left:14px;right:14px}.result-photo{min-height:110px;height:20svh}}
@media(max-height:730px) and (min-width:761px){.topbar{padding-top:16px;padding-bottom:16px}.home{min-height:calc(100svh - 80px)}.hero-copy{margin-top:10px;padding-bottom:30px}.hero-copy h1{font-size:70px;margin:16px 0}.hero-description{font-size:13px;margin-bottom:18px}.primary.large{min-height:52px}.hero-footnote{margin-top:17px}.mission-board{padding-top:15px}.board-heading{margin-bottom:10px}.mission{padding-top:12px;padding-bottom:12px}.scene-caption{top:48vh}.instrument{top:15px}.task-hint{top:118px}}
@media(max-height:560px) and (orientation:landscape){.hero-copy h1{font-size:52px}.hero-copy{padding-bottom:28px}.hero-description{font-size:11px;margin-bottom:15px}.hero-footnote{display:none}.scene-caption{top:48vh}.home{min-height:740px}.mission-board{margin-top:80px}.comment{bottom:180px}.game-toolbar{top:70px}.instrument{top:12px;left:50%;transform:translateX(-50%)}.task-hint{top:108px;left:50%;transform:translateX(-50%)}.driving-controls{bottom:30px}.utility-controls{position:static}.control-tip{bottom:8px}.result-sheet{display:grid!important;grid-template-columns:.8fr 1fr;width:min(740px,calc(100vw - 28px))!important}.result-sheet:not([open]){display:none!important}.result-photo{height:100%;min-height:300px}.result-body{padding:20px}.result-body h2{font-size:23px}.result-stats{padding:8px 0}.result-stats strong{font-size:24px}.result-detail{min-height:0}.stop-checks{top:155px;left:50%;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.flash.fire{opacity:0}.loading>span{transform:none}.primary:hover{transform:none}}
#challenge-url{width:100%;margin-top:8px;padding:10px;border:1px solid #a9bbb1;border-radius:7px;background:white;color:var(--ink);font-size:11px}

/* Balance lives alongside speed: a warning is visible before the rider falls. */
.instrument{display:grid;grid-template-columns:auto 1px auto;column-gap:25px;row-gap:9px;padding-bottom:19px}
.balance-readout{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:8px;color:var(--teal-dark);font-size:11px;font-weight:700;white-space:nowrap}
.balance-track{position:relative;width:68px;height:6px;border-radius:4px;background:linear-gradient(90deg,#df927b,#e6ce88 25%,#95c2ac 43%,#95c2ac 57%,#e6ce88 75%,#df927b);flex-shrink:0}
.balance-track i{position:absolute;left:50%;top:-2px;height:10px;border-left:1px solid #102f3b66}
.balance-track b{position:absolute;left:calc(50% - 4px);top:-1px;width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.balance-readout[data-state=supported]{color:var(--muted)}
.balance-readout[data-state=warning]{color:#985800}
.balance-readout[data-state=danger],.balance-readout[data-state=fallen]{color:#b6372c}
.task-hint{top:169px}.stop-checks{top:212px}
@media(max-width:760px){.instrument{column-gap:15px;row-gap:8px;padding-bottom:17px}.balance-readout{gap:13px;font-size:11px;padding-top:7px}.balance-track{width:68px}.task-hint{top:255px}.stop-checks{top:297px}}
@media(max-height:730px) and (min-width:761px){.task-hint{top:150px}.stop-checks{top:193px}}
@media(max-height:560px) and (orientation:landscape){.task-hint{top:140px}.stop-checks{top:182px}}

/* Keep only the current task in view; stop progress uses the existing check row. */
body[data-mission=stop] .balance-readout{display:none}
body[data-mission=seven] #signal-left,body[data-mission=seven] #look,body[data-mission=turn] #signal-left,body[data-mission=turn] #look{display:none}
.stop-checks span{position:relative;overflow:hidden;min-width:58px;text-align:center}
.stop-checks .holding{background:#fff4d2;color:var(--ink);font-variant-numeric:tabular-nums}
.stop-checks .holding:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--hold-progress,0%);background:var(--teal)}
.drive.guided,.utility.guided{outline:3px solid var(--teal);outline-offset:4px}
.task-hint[data-phase=go],.task-hint[data-phase=finish]{background:#e4f4e8;color:var(--teal-dark)}
@media(max-width:760px){.keyboard-hint{display:none}.stop-checks span{min-width:56px}.game .pedal-group small{display:none}.game .brand-name small{display:none}}

body[data-mission=stop] .task-hint{top:137px}
body[data-mission=stop] .stop-checks{top:180px}
@media(max-width:760px){body[data-mission=stop] .task-hint{top:223px}body[data-mission=stop] .stop-checks{top:265px}body[data-screen=game] .brand-name small{display:none}}
@media(max-height:730px) and (min-width:761px){body[data-mission=stop] .task-hint{top:118px}body[data-mission=stop] .stop-checks{top:161px}}
@media(max-height:560px) and (orientation:landscape){body[data-mission=stop] .task-hint{top:108px}body[data-mission=stop] .stop-checks{top:155px}}

/* A small progress strip opens the keepsake flow, away from driving controls. */
.license-progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:8px 3px 0;border-top:1px dashed #9fb8ac}
#license-progress{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--teal-dark)}
.license-progress-button{min-height:44px;padding:9px 13px;border-radius:8px;background:#e7efdf;font-size:11px;font-weight:700;color:var(--teal-dark);text-align:center;line-height:1.5}
.license-progress-button:hover{background:#d9e7cf}
.license-progress-button.ready{background:var(--yellow);color:var(--ink);box-shadow:0 2px 0 #c5a039}
.license-progress-button.ready:hover{background:#ffdd7a}
#result-license{margin-top:10px;min-height:44px;color:var(--teal-dark);border-color:#9ab7a7;background:#e7efdf;font-size:12px}
.result-sheet:has(#result-license:not([hidden])){overflow-y:auto!important}
dialog.license-sheet{width:min(500px,calc(100vw - 28px));padding:32px;scroll-padding-block:24px}
.license-sheet h2{padding-right:24px;margin:10px 0;font-size:28px}
.license-sheet .sheet-intro{margin:0;font-size:12px;line-height:1.8}
#license-checklist{list-style:none;padding:0;margin:23px 0}
#license-checklist li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;padding:10px 2px;border-top:1px solid var(--line);font-size:12px;line-height:1.6}
#license-checklist li:last-child{border-bottom:1px solid var(--line)}
#license-checklist li>span:first-child{font-weight:600;min-width:0}
#license-checklist li>span:last-child{font-size:11px;white-space:nowrap;color:var(--muted)}
#license-checklist li.done>span:last-child,#license-checklist li.passed>span:last-child,#license-checklist li[data-passed=true]>span:last-child,#license-checklist li>span.done{color:var(--teal-dark);font-weight:700}
#license-form label{display:block;margin-bottom:8px;font-size:12px;font-weight:700}
#license-name{display:block;width:100%;min-height:50px;border:1px solid #a4b9ac;border-radius:9px;padding:11px 13px;background:#fff;color:var(--ink);font:500 16px/1.5 var(--sans)}
#license-name::placeholder{color:#7b8c83;opacity:1}
#license-name:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-color:var(--teal-dark)}
#license-name-hint{display:block;margin:8px 0 19px;color:var(--muted);font-size:11px;line-height:1.7}
#license-claim{font-size:14px}
#license-preview{display:block;width:100%;max-height:46svh;object-fit:contain;border-radius:10px;background:#e7efdf;box-shadow:0 6px 22px #102f3b17}
#license-summary{margin:13px 0 17px;font-size:11px;line-height:1.8;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.license-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.license-actions button{font-size:12px;padding:12px 10px;gap:6px}
.license-footnote{display:block;margin:22px 0 0;font-size:11px;line-height:1.5;text-align:center;color:var(--muted)}
@media(max-width:760px){.license-progress-row{margin-top:8px;padding-top:6px;gap:8px}#license-progress{font-size:11px}.license-progress-button{font-size:11px;padding:8px 11px}dialog.license-sheet{padding:27px 24px 24px}.license-sheet h2{font-size:25px}.license-sheet .sheet-intro{font-size:11px}#license-checklist{margin:19px 0}#license-checklist li{min-height:42px;font-size:11px}#license-checklist li>span:last-child{font-size:11px}.license-footnote{margin-top:19px}}
@media(max-width:380px){dialog.license-sheet{padding-left:21px;padding-right:21px}.license-sheet h2{font-size:23px}.license-actions{gap:8px}.license-actions button{font-size:11px}.license-progress-button{padding-left:9px;padding-right:9px}}

/* Simulator: clear exam entry and controls sized for two thumbs. */
::selection{background:#ffd358;color:#102f3b}input{caret-color:var(--teal-dark)}
a{color:var(--teal-dark);text-underline-offset:4px}
.hero-copy h1{font-size:clamp(52px,5.5vw,88px);letter-spacing:-.035em;line-height:1.15;margin:18px 0}
.hero-description{font-size:15px}.exam-promise{font-size:12px;color:#385c54;margin:18px 0 0;font-weight:600}
.primary,.primary:hover{box-shadow:0 4px 12px #866d1820}.primary:hover{transform:none}
.hero-copy{padding-bottom:40px}.mission-board{margin-top:30px;padding-bottom:18px}
.practice-picker summary{display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer;min-height:48px;list-style:none}
.practice-picker summary::-webkit-details-marker{display:none}
.practice-picker summary:after{content:'+';font-size:23px;color:var(--teal-dark)}
.practice-picker[open] summary:after{content:'−'}
.practice-picker h2{margin:0;font-size:18px}.practice-picker summary span{margin-left:auto;color:#436154;font-size:12px}
.practice-picker summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.practice-start{margin:8px 0 4px;min-height:49px}
.mission-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.mission{min-width:0;gap:10px}.mission+.mission{border-left:0}.mission-info strong{font-size:14px}.mission-info small{font-size:11px;line-height:1.7}.mission-record{display:none}.mission-number{font-size:26px}
.simulator-intro{max-width:720px;padding:32px 0 16px;color:#37564e}
.simulator-intro h2{font-size:21px;margin:0 0 10px;color:var(--ink)}
.simulator-intro p{font-size:14px;line-height:1.9;margin:0 0 14px}.simulator-intro a{font-size:13px}
.home-footer{flex-wrap:wrap;gap:14px;align-items:center}.home-footer a,.home-footer .text-button{font-size:11px}
.scene-caption{top:400px}.hero-footnote{font-size:11px;color:#436154}
.exam-hud{position:absolute;right:5.3vw;top:96px;background:var(--paper);padding:10px 14px;border-radius:10px;text-align:center;min-width:78px;box-shadow:0 4px 14px #102f3b18}
.exam-hud>span{display:block;font-size:11px;color:#436154}.exam-hud strong{font:700 33px/1.15 var(--mono)}.exam-hud small{font:600 11px var(--sans);padding-left:4px}
.exam-hud.danger{color:#a52c27}.deduction-alert{position:absolute;top:230px;left:50%;transform:translateX(-50%);padding:10px 14px;background:#fff0e8;color:#8c2920;border-radius:8px;max-width:80vw;font-size:13px;line-height:1.6}
.steer{width:102px;height:112px}.steer svg{width:35px;height:35px}.steer span{font-size:13px}
.utility{width:56px;height:56px}.utility small{font-size:11px}.utility svg{width:24px;height:24px}
body[data-screen=game] #signal-left,body[data-screen=game] #signal-right,body[data-screen=game] #look{display:flex}
body:not([data-mission=seven]):not([data-mission=turn]) .balance-readout{display:none}
.comment p{font-size:13px}.comment small{font-size:11px}.comment{bottom:250px}
.result-sheet{overflow-y:auto!important}.result-actions #exam-next{grid-column:1/-1;width:100%}
.result-deductions{list-style:none;padding:0;margin:12px 0;font-size:12px;max-height:140px;overflow-y:auto}
.result-deductions li{padding:7px 0;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);line-height:1.5}
.result-deductions b{white-space:nowrap;color:#a52c27}.exam-result-note{font-size:12px;line-height:1.7;color:var(--teal-dark)}
.format-picker{padding:0;border:0;margin:15px 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.format-picker legend{font-size:11px;color:#436154;text-align:center;margin-bottom:8px}
.format-picker label{display:flex;gap:7px;align-items:center;min-height:42px;padding:8px 12px;border:1px solid #b1c3b8;border-radius:7px;font-size:12px;cursor:pointer}
.format-picker label:has(input:checked){background:#e1eee6;border-color:var(--teal-dark);color:var(--teal-dark)}
.format-picker input{accent-color:var(--teal-dark);margin:0}
dialog.share-sheet{width:min(480px,calc(100vw - 28px))}.share-sheet h2{font-size:25px;padding-right:20px}
#share-preview{max-height:50svh;object-fit:contain;width:100%}.share-note{font-size:11px}
@media(max-width:1000px){.mission-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .hero-copy{margin-top:24px;width:100%;padding-bottom:0}.hero-copy h1{font-size:clamp(42px,10.8vw,64px);line-height:1.18;letter-spacing:-.025em;margin:12px 0 15px}.hero-description{font-size:13px;max-width:260px;line-height:1.8}
 .hero-cta{gap:18px}.hero-cta .primary.large{min-height:55px;font-size:16px;padding:12px 20px}.hero-cta .text-button{font-size:12px}
 .exam-promise{font-size:11px;margin-top:17px}.hero-footnote{font-size:11px;line-height:1.7;margin-top:12px}
 .scene-caption{top:395px;right:20px;font-size:11px}.mission-board{margin-top:146px;padding:13px 15px 15px}
 .mission-list{display:grid;grid-template-columns:1fr 1fr}.mission{padding:12px 6px;gap:7px}.mission-number{font-size:22px;width:21px;flex-shrink:0}.mission-info strong{font-size:12px}.mission-info small{font-size:11px;line-height:1.55}.practice-picker h2{font-size:17px}.practice-picker summary span{font-size:11px}
 .license-progress-row{align-items:center;gap:8px}#license-progress{font-size:11px;white-space:normal;line-height:1.7}.license-progress-button{font-size:11px;flex-shrink:0}
 .simulator-intro{padding-top:27px}.simulator-intro h2{font-size:19px}.simulator-intro p{font-size:13px}.home-footer{font-size:11px}
 .driving-controls{left:12px;right:12px;bottom:max(35px,calc(env(safe-area-inset-bottom) + 22px));display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:end}
 .steering-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.steer{width:100%;height:112px;min-width:0;border-radius:13px}.steer svg{width:34px;height:34px}.steer span{font-size:12px}.steer-dial{display:none}
 .pedal-group{display:grid;grid-template-columns:1fr 1fr;gap:7px}.pedal-group .drive{width:100%;min-width:0;height:112px}.pedal-group .throttle{height:126px}.pedal-group strong{font-size:14px}.pedal-lines{font-size:32px}
 .utility-controls{left:0;right:0;bottom:144px;display:flex;justify-content:center;gap:10px}.utility{width:55px;height:54px}.utility small{font-size:11px}.utility svg{width:23px;height:23px}
 .control-label{font-size:11px}.control-tip{font-size:11px;bottom:max(11px,env(safe-area-inset-bottom))}
 .comment{bottom:258px;left:16px;max-width:calc(100vw - 32px)}.comment p{font-size:12px}.comment small{font-size:11px}.examiner-avatar{display:none}
 .photo-thumb{bottom:325px;right:15px;width:96px}.photo-thumb span{font-size:11px}
 .exam-hud{top:132px;right:16px;min-width:64px;padding:8px 10px}.exam-hud strong{font-size:29px}.exam-hud>span{font-size:11px}
 .deduction-alert{left:20px;top:294px;transform:none;max-width:calc(100vw - 40px);font-size:12px;z-index:4}
 .task-hint{font-size:12px;line-height:1.6;padding:8px 12px;max-width:calc(100vw - 40px)}
 .result-detail,.exam-result-note{font-size:12px}.result-stats>div>span{font-size:11px}.result-body h2{font-size:25px}.result-deductions{max-height:100px;font-size:11px}
 .share-sheet h2{font-size:22px}.share-actions button{font-size:12px}.format-picker label{font-size:12px}
}
@media(max-width:360px){.driving-controls{column-gap:16px}.utility-controls{gap:8px}.utility{width:52px}.steer{height:108px}.pedal-group .drive{height:108px}.pedal-group .throttle{height:122px}.hero-copy h1{font-size:40px}.hero-cta{gap:12px}.mission-info small{font-size:11px}.mission-number{display:none}.license-progress-button{padding:8px}}
@media(max-height:560px) and (orientation:landscape){
 .driving-controls{display:flex;left:16px;right:16px;bottom:24px;gap:18px}.steering-buttons{display:flex}.steer{width:76px;height:82px}.pedal-group{display:flex}.pedal-group .drive{width:76px;height:82px}.pedal-group .throttle{height:94px}.utility-controls{position:static;display:flex;gap:8px}.utility{width:48px;height:50px}.comment{bottom:126px;max-width:260px}.exam-hud{top:72px;right:16px}.deduction-alert{top:172px;left:50%;transform:translateX(-50%)}.task-hint{font-size:11px}.photo-thumb{bottom:124px}
}

/* Readable small controls on the changing 3D backdrop. */
.control-tip{background:#102f3bd9;border-radius:5px;padding:4px 9px;text-shadow:none}.control-label{color:var(--ink);text-shadow:none;background:#f6f7f1e8;display:table;padding:3px 7px;border-radius:5px}.timer-track i{width:100%}.brand-name small{letter-spacing:.1em}.primary:hover{box-shadow:0 7px 20px #102f3b20}.drive{box-shadow:0 5px 12px #102f3b24}.drive.held,.utility.held{box-shadow:0 2px 6px #102f3b24}

/* Feedback stays beside the result; replay gives the scene its own space. */
.camera-view{min-width:56px;min-height:38px;border-radius:9px;background:var(--paper);font-size:12px;font-weight:700;padding:8px 10px}
.camera-view[aria-pressed=true]{background:var(--yellow)}
body[data-view=overview] .instrument,body[data-view=overview] .comment,body[data-view=overview] .stop-checks{display:none}
body[data-view=overview] .task-hint{top:155px}
.practice-recommendation{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0 8px;border-top:1px solid var(--line);margin-top:12px}
.practice-recommendation p{margin:0;font-size:12px;line-height:1.75}.practice-recommendation strong{display:block;color:var(--teal-dark)}
.practice-recommendation span{display:block;color:#436154}.practice-recommendation button{flex-shrink:0}
.result-coach{border-block:1px solid #b9cec4;padding:13px 0;margin:16px 0 10px;line-height:1.75}
.result-coach>strong{font-size:14px;color:var(--teal-dark)}.result-coach>p{font-size:13px;margin:5px 0;color:#37564e}
.result-coach details{margin-top:8px;font-size:12px}.result-coach summary,.exam-breakdown summary{cursor:pointer;min-height:32px;display:list-item;padding:4px 0;font-weight:600}
.result-coach ol{padding-left:22px;margin:8px 0 0}.result-coach li+li{margin-top:4px}
.result-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:12px 0}
.result-tools .text-button{font-size:12px;min-height:40px;color:var(--teal-dark)}.result-tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.exam-breakdown{font-size:12px;margin:10px 0}.exam-breakdown ol{list-style:none;padding:0;margin:7px 0}
.exam-breakdown li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.exam-breakdown li span:first-child{min-width:0}.exam-breakdown li small{display:block;color:var(--muted);margin-top:2px;font-size:11px}
.exam-breakdown li b{font-size:12px;white-space:nowrap;font-weight:600}.exam-breakdown [data-status=failed] b{color:#a52c27}.exam-breakdown [data-status=completed] b{color:var(--teal-dark)}
.caption-label{display:block;font-size:12px;font-weight:700;text-align:left;margin:15px 0 8px}
#share-caption{display:block;width:100%;font:500 16px/1.5 var(--sans);color:var(--ink);background:white;border:1px solid #a4b9ac;border-radius:8px;padding:10px 12px;min-height:46px}
#share-caption:focus-visible,textarea:focus-visible,input[type=range]:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.share-image-status{font-size:12px;line-height:1.6;color:#436154;margin:10px 0 0;min-height:19px}
#challenge-url{font:400 14px/1.7 var(--sans);resize:vertical;min-height:116px;caret-color:var(--teal-dark)}
.share-sheet #share-preview{max-height:43svh;margin-top:10px}.share-sheet #share-preview[aria-busy=true]{opacity:.35}
body[data-screen=replay]{overflow:hidden;height:100svh}body[data-screen=replay] .world-shade{background:linear-gradient(0deg,#102f3b35,transparent 45%)}
body[data-screen=replay] .topbar{padding-top:16px}.replay-panel{position:fixed;z-index:30;bottom:20px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));background:var(--paper);border:1px solid #fff;border-radius:16px;padding:19px 23px;box-shadow:0 5px 18px #102f3b25}
.replay-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.replay-heading h2{font-size:20px;line-height:1.4;margin:0}.replay-heading p{font-size:12px;color:#436154;margin:5px 0 0}
.replay-heading>.secondary{min-height:40px;font-size:12px;padding:8px 12px;flex-shrink:0}
.replay-time{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin-top:18px}.replay-time output{font-variant-numeric:tabular-nums;color:var(--teal-dark);font-weight:700}
#replay-scrub{width:100%;accent-color:var(--teal-dark);height:32px;margin:5px 0 10px;cursor:pointer;touch-action:pan-y}
.replay-actions{display:grid;grid-template-columns:1fr 64px 76px 1.7fr;gap:9px}.replay-actions button{font-size:13px;min-height:44px;padding:9px 12px;white-space:nowrap}
.replay-actions [aria-pressed=true]{background:#e1eee6;color:var(--teal-dark)}
@media(max-width:760px){
 .game-toolbar{right:16px;gap:8px}.game-title{min-width:0;max-width:160px;margin-right:auto}.game-title h2{font-size:14px;line-height:1.4}.camera-view{min-width:52px;min-height:34px;font-size:12px;padding:7px 8px}
 body[data-view=overview] .task-hint{top:126px;max-width:calc(100vw - 124px)}body[data-view=overview] .exam-hud{top:132px}
 .practice-recommendation{gap:10px}.practice-recommendation p{font-size:12px}.practice-recommendation button{font-size:12px}
 .result-coach{margin:12px 0;padding:10px 0}.result-coach>p{font-size:12px}.result-tools{gap:6px;margin:8px 0}.result-tools button{font-size:11px}
 .replay-panel{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);padding:15px;border-radius:13px}.replay-heading h2{font-size:17px}.replay-heading p{font-size:11px}.replay-heading{gap:10px}.replay-heading>.secondary{font-size:11px;padding:8px 10px}
 .replay-time{margin-top:13px}.replay-actions{grid-template-columns:1fr 52px 58px;gap:7px}.replay-actions button{padding:8px;font-size:12px;min-height:40px}#replay-share{grid-column:1/-1;min-height:44px}
 .share-sheet{padding:23px!important}.share-sheet .format-picker{margin:10px 0}.share-sheet h2{font-size:21px}.share-sheet #share-preview{max-height:39svh}
}
@media(max-height:560px) and (orientation:landscape){
 .replay-panel{width:min(680px,calc(100vw - 24px));bottom:10px;padding:10px 15px}.replay-heading h2{font-size:16px}.replay-heading p{display:none}.replay-time{margin-top:6px}#replay-scrub{height:24px;margin:1px 0 4px}.replay-actions{grid-template-columns:1fr 52px 62px 1.7fr}.replay-actions button{min-height:34px;padding:6px 10px}#replay-share{grid-column:auto;min-height:34px}
 body[data-view=overview] .task-hint{top:105px;max-width:300px}.game-toolbar{right:auto}
}

.driving-controls,.driving-controls button{touch-action:none;user-select:none;-webkit-user-select:none}
/* Keep instructions contextual; let the course and the result photo lead. */
.hero-copy h1{margin-bottom:28px}
.mission-board{width:100%;max-width:640px;align-self:flex-start}
.simulator-intro{padding:18px 0 8px;font-size:12px}
.simulator-intro summary{cursor:pointer;min-height:40px;padding:10px 0;font-weight:600}
.simulator-intro p{margin:8px 0 12px;font-size:13px;line-height:1.8}
.license-progress-row{justify-content:flex-end}
.license-progress-row #license-progress{margin-right:auto}
.result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-detail{min-height:0}
.result-coach{border:0;padding:0;margin:14px 0 8px}
.result-coach details{margin:0;font-size:13px}
.result-coach summary{color:var(--teal-dark)}
.result-coach details p{font-size:13px;line-height:1.7;margin:8px 0}
.result-deduction-details{font-size:12px;margin:8px 0}
.result-deduction-details summary{cursor:pointer;min-height:32px;padding:5px 0}
.share-image-status:empty{display:none}
@media(max-width:760px){
 .hero-copy h1{margin-bottom:24px}.mission-board{margin-top:150px}
 .result-coach details{font-size:12px}.simulator-intro{padding-top:10px}
}

/* Reserve a clear riding view between the HUD and the touch controls. */
:root{
 --safe-top:env(safe-area-inset-top,0px);
 --safe-right:env(safe-area-inset-right,0px);
 --safe-bottom:env(safe-area-inset-bottom,0px);
 --safe-left:env(safe-area-inset-left,0px);
 --app-height:100svh;
 --hud-top:max(8px,var(--safe-top));
 --hud-left:max(10px,var(--safe-left));
 --hud-right:max(10px,var(--safe-right));
}
@supports(height:100dvh){:root{--app-height:100dvh}}
body[data-screen=game],body[data-screen=replay]{height:var(--visible-height,var(--app-height))}
.game{top:var(--visible-top,0px);bottom:auto;height:var(--visible-height,var(--app-height))}
.topbar{padding-top:max(18px,var(--safe-top));padding-left:max(22px,var(--safe-left));padding-right:max(22px,var(--safe-right))}
body[data-notice=deduction] .task-hint,body[data-notice=deduction] .comment,
body[data-notice=comment] .task-hint{display:none}
body[data-view=overview][data-notice=comment] .comment{display:flex}

/* The app supplies visualViewport dimensions so the keyboard cannot hide forms. */
dialog.sheet{
 position:fixed;
 top:calc(var(--visible-top,0px) + max(12px,var(--safe-top)));
 bottom:auto;
 left:max(12px,var(--safe-left));
 right:max(12px,var(--safe-right));
 margin:0 auto;
 width:min(480px,calc(100vw - max(12px,var(--safe-left)) - max(12px,var(--safe-right))));
 max-width:calc(100vw - max(12px,var(--safe-left)) - max(12px,var(--safe-right)));
 max-height:calc(var(--visible-height,var(--app-height)) - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom)))!important;
 overflow:auto!important;
 overscroll-behavior:contain;
 scroll-padding-block:48px 20px;
 -webkit-overflow-scrolling:touch;
}
dialog .close-dialog{width:38px;height:38px;right:8px;top:8px}
.share-sheet #share-preview{max-height:min(39svh,calc(var(--visible-height,var(--app-height)) * .39))}
#license-preview{max-height:min(46svh,calc(var(--visible-height,var(--app-height)) * .46))}
.toast{bottom:max(20px,var(--safe-bottom));white-space:normal;overflow-wrap:anywhere}
.replay-panel{bottom:max(12px,var(--safe-bottom));max-width:calc(100vw - max(12px,var(--safe-left)) - max(12px,var(--safe-right)));max-height:calc(var(--visible-height,var(--app-height)) - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom)));overflow:auto}

@media(max-width:900px){
 body[data-screen=game] .topbar{
  position:fixed;top:calc(var(--visible-top,0px) + var(--hud-top));right:var(--hud-right);
  padding:0;margin:0;width:auto;z-index:10;
 }
 body[data-screen=game] .topbar .brand{display:none}
 body[data-screen=game] .top-actions{gap:4px}
 body[data-screen=game] .icon-button{width:36px;height:36px}
 .game .game-toolbar{top:var(--hud-top);left:var(--hud-left);right:calc(var(--hud-right) + 86px);height:38px;gap:6px}
 .game .game-title{flex:1;min-width:0;max-width:none;margin:0}
 .game .game-title small{display:block;font:600 10px/12px var(--sans);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .game .game-title h2{font-size:13px;line-height:19px;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
 .game .round-button{width:36px;height:36px;flex:0 0 36px}
 .game .camera-view{min-width:44px;min-height:36px;flex:0 0 44px;padding:6px;font-size:11px}
 .game .instrument{
  top:calc(var(--hud-top) + 46px);left:var(--hud-left);right:auto;transform:none;
  width:200px;min-width:0;max-width:calc(100vw - var(--hud-left) - var(--hud-right) - 76px);
  padding:4px 12px;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);column-gap:10px;row-gap:4px;
 }
 .game .time-readout>span{font-size:10px;line-height:13px}
 .game .time-readout>strong{font-size:26px;line-height:28px;margin-top:0}
 .game .time-readout small{font-size:13px}
 .game .speed-readout{min-width:0;gap:3px}
 .game .speed-readout strong{font-size:26px;line-height:28px}
 .game .speed-readout>span{font-size:10px}
 .game .instrument-rule{height:27px}
 .game .balance-readout{font-size:10px;line-height:14px;padding-top:3px;gap:8px}
 .game .balance-track{width:58px}
 .game .timer-track{bottom:1px;left:12px;right:12px;height:2px}
 .game .exam-hud{top:calc(var(--hud-top) + 46px);right:var(--hud-right);min-width:64px;padding:6px 8px}
 .game .exam-hud>span{font-size:10px;line-height:13px}
 .game .exam-hud strong{font-size:26px;line-height:28px}
 .game .exam-hud small{font-size:10px}
 body[data-screen=game] .game :is(.task-hint,.comment,.deduction-alert){
  top:calc(var(--hud-top) + 132px);bottom:auto;left:var(--hud-left);right:var(--hud-right);
  transform:none;width:auto;max-width:none;min-height:32px;margin:0;padding:6px 10px;
  border-radius:8px;font-size:12px;line-height:1.6;text-align:left;white-space:normal;z-index:4;
 }
 .game .comment small{display:none}
 .game .comment p{font-size:12px;line-height:1.6;margin:0}
 body[data-screen=game] .game .stop-checks{
  top:calc(var(--hud-top) + 104px);left:var(--hud-left);transform:none;width:200px;
  max-width:calc(100vw - var(--hud-left) - var(--hud-right) - 76px);gap:4px;
 }
 .game .stop-checks span{flex:1;min-width:0;padding:4px 3px;font-size:10px;line-height:14px}
 body[data-screen=game][data-view=overview] .game :is(.task-hint,.comment,.deduction-alert){top:calc(var(--hud-top) + 104px)}
 .game .driving-controls{
  left:max(12px,var(--safe-left));right:max(12px,var(--safe-right));bottom:max(12px,calc(var(--safe-bottom) + 10px));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;
 }
 .game .control-label,.game .steer-dial,.game .keyboard-hint,.game .pedal-group small{display:none}
 .game .steering-buttons,.game .pedal-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
 .game .steer,.game .pedal-group .drive{width:100%;min-width:0;height:112px;border-radius:12px}
 .game .pedal-group .throttle{height:124px}
 .game .steer svg{width:32px;height:32px}
 .game .steer span{font-size:12px}
 .game .utility-controls{
  position:absolute;left:0;right:0;bottom:128px;margin:0;display:grid;
  grid-template-columns:64px 64px minmax(0,1fr) 48px 48px;gap:6px;
 }
 .game .utility{width:48px;height:48px;padding:4px;gap:2px}
 .game .utility:nth-child(1){grid-column:1}.game .utility:nth-child(2){grid-column:2}
 .game .utility:nth-child(3){grid-column:4}.game .utility:nth-child(4){grid-column:5}
 .game .utility svg{width:22px;height:22px}.game .utility small{font-size:10px;line-height:14px}
 .game .photo-thumb{right:var(--hud-right);bottom:calc(max(12px,var(--safe-bottom)) + 260px);width:84px}
 .game .photo-thumb img{height:58px}
}
@media(max-width:360px){.game .driving-controls{column-gap:16px}}

@media(max-height:560px) and (orientation:landscape){
 body[data-screen=game] .topbar{position:fixed;top:calc(var(--visible-top,0px) + var(--hud-top));right:var(--hud-right);padding:0;margin:0;width:auto}
 body[data-screen=game] .topbar .brand{display:none}
 body[data-screen=game] .top-actions{gap:4px}
 body[data-screen=game] .icon-button{width:36px;height:36px}
 .game .game-toolbar{top:var(--hud-top);left:var(--hud-left);right:auto;width:210px;height:38px;gap:6px}
 .game .instrument{
  top:var(--hud-top);left:calc(var(--hud-left) + 220px);right:calc(var(--hud-right) + 88px);
  width:auto;max-width:260px;min-width:0;transform:none;padding:4px 10px;row-gap:0;
  grid-template-columns:minmax(0,1.2fr) 1px minmax(0,.8fr);
 }
 .game .time-readout{display:flex;align-items:center;gap:4px;min-width:0}
 .game .time-readout>span{flex:1;min-width:0;max-width:42px;font-size:9px;line-height:11px;white-space:normal}
 .game .time-readout>strong{flex-shrink:0;font-size:24px;line-height:26px;margin:0}
 .game .speed-readout strong{font-size:24px;line-height:26px}
 .game .instrument-rule{height:26px}
 .game .balance-readout{position:absolute;top:46px;left:0;right:12px;padding:3px 8px;background:var(--paper);border:0;border-radius:7px;line-height:14px}
 .game .timer-track{bottom:1px}
 .game .exam-hud{top:calc(var(--hud-top) + 46px);right:var(--hud-right);display:flex;align-items:center;gap:5px;padding:4px 7px;min-width:64px}
 .game .exam-hud>span{font-size:10px;line-height:13px;white-space:nowrap}
 .game .exam-hud strong{font-size:23px;line-height:26px;white-space:nowrap}
 body[data-screen=game] .game :is(.task-hint,.comment,.deduction-alert),
 body[data-screen=game][data-view=overview] .game :is(.task-hint,.comment,.deduction-alert){
  top:calc(var(--hud-top) + 46px);left:var(--hud-left);right:auto;width:210px;
  max-width:210px;min-height:30px;font-size:11px;line-height:1.4;padding:6px 8px;
 }
 .game .comment p{font-size:11px;line-height:1.4}
 body[data-screen=game] .game .stop-checks{top:calc(var(--hud-top) + 46px);left:calc(var(--hud-left) + 220px);width:200px;max-width:calc(100vw - var(--hud-left) - var(--hud-right) - 308px);gap:4px}
 .game .driving-controls{
  left:var(--hud-left);right:var(--hud-right);bottom:max(8px,calc(var(--safe-bottom) + 8px));
  display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:12px;align-items:end;
 }
 .game .steering-group,.game .pedal-group{width:100%;max-width:180px;min-width:0}
 .game .pedal-group{justify-self:end}
 .game .control-label,.game .steer-dial,.game .keyboard-hint,.game .pedal-group small{display:none}
 .game .steering-buttons,.game .pedal-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
 .game .steer,.game .pedal-group .drive{width:100%;min-width:0;height:88px}
 .game .pedal-group .throttle{height:94px}
 .game .utility-controls{position:static;display:grid;grid-template-columns:60px 60px 46px 46px;gap:6px;margin:0}
 .game .utility{width:46px;height:50px;grid-column:auto!important;padding:4px}
 .game .photo-thumb{display:none}
 .result-sheet{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
 .result-sheet .result-photo{min-height:0;height:100%;max-height:calc(var(--visible-height,var(--app-height)) - 24px)}
 .result-sheet .result-body{min-width:0;padding:18px}
 .replay-panel{bottom:max(8px,var(--safe-bottom))}
}
@media(max-height:680px){body[data-screen=game] .photo-thumb{display:none}}

/* Enlarge the actual signal targets without extending into adjacent controls. */
.game .utility-controls{align-items:end}
.game :is(#signal-left,#signal-right){width:64px;height:64px;flex:0 0 64px}
.game :is(#signal-left,#signal-right) svg{width:28px;height:28px}
.game :is(#signal-left,#signal-right) small{font-size:12px;line-height:16px}
@media(max-height:560px) and (orientation:landscape){
 .game :is(#signal-left,#signal-right){width:60px;height:60px;flex-basis:60px}
}

/* Keep the home stage open; show the course list only when requested. */
.home.home-compact{min-height:calc(var(--visible-height,100svh) - 98px)}
.home-compact .hero-copy{padding-bottom:0}
.home-compact .practice-link{min-height:48px;white-space:nowrap;font-size:14px}
.home-secondary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px;margin-top:8px}
.home-secondary .text-button{min-height:44px;font-size:12px}
.home-secondary #license-progress{font-size:11px;color:var(--teal-dark)}
.home-secondary #license-open.ready{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.home-compact .simulator-intro{margin-top:auto;padding-top:36px}
dialog.practice-sheet{padding:24px;width:min(480px,calc(100vw - 24px))}
.practice-sheet h2{font-size:25px;margin:6px 36px 20px 0}
.practice-sheet .mission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.practice-sheet .mission{min-height:56px;padding:10px 9px;gap:8px;border:1px solid transparent;border-radius:8px;background:transparent}
.practice-sheet .mission.selected{border-color:var(--teal);background:#e0eee4}
.practice-sheet .mission-number{font-size:22px;width:25px;flex-shrink:0}
.practice-sheet .mission-info strong{font-size:13px;line-height:1.5}
.practice-sheet .practice-start{margin-top:16px;min-height:50px}
.practice-sheet .practice-recommendation{margin-top:12px;padding-top:12px;gap:10px}
.practice-sheet .practice-recommendation button{font-size:12px;min-height:44px}
@media(max-width:760px){
 .home.home-compact{min-height:calc(var(--visible-height,100svh) - 76px)}
 .home-compact .practice-link{font-size:13px}
 dialog.practice-sheet{padding:22px 18px}
 .practice-sheet .mission-info strong{font-size:12px}
}
@media(max-height:560px) and (orientation:landscape){
 .home-compact .hero-copy{margin-top:0}
 .home-compact .hero-copy h1{font-size:32px;line-height:1.2;margin:8px 0 14px}
 .home-compact .hero-copy h1 br{display:none}
 .home-compact .hero-copy h1 .outlined{margin-left:.3em}
 .home-compact .hero-cta .primary.large{min-height:48px}
 .home-compact .exam-promise{margin-top:10px}
 .home-compact .home-secondary{margin-top:2px}
}