.drive-toolbar{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:800;margin-bottom:10px;color:#526342}
.drive-scene{position:relative;height:clamp(320px,64dvh,590px);overflow:hidden;border-radius:24px;border:6px solid #32444a;background:#b9dce3;isolation:isolate}
.drive-landscape{position:absolute;inset:0;transform-origin:50% 40%}
.drive-world{width:100%;height:100%;position:absolute;inset:0}
.drive-landscape{aspect-ratio:1000/650}
.tunnel-choice{position:absolute;top:15%;width:68px;height:58px;transform:translateX(-50%);border:4px solid #fff5d5;border-radius:12px;background:#245f86;color:white;font-size:36px;font-weight:900;box-shadow:0 5px 0 #173c53;z-index:2}
.tunnel-y{left:24%}.tunnel-i{left:76%}.tunnel-choice:enabled:hover{background:#3e82a8;outline:4px solid #fff9}
.drive-word-sign{position:absolute;left:50%;top:39%;transform:translateX(-50%);background:#fffdf0;border:5px solid #486d50;border-radius:14px;min-width:150px;padding:8px 18px;text-align:center;box-shadow:0 4px 0 #0002}
.drive-word-sign span{display:block;font-size:10px;font-weight:900;letter-spacing:1px;color:#637657}.drive-word-sign strong{font-size:clamp(26px,4.2vw,45px);white-space:nowrap;letter-spacing:2px;color:#283b32}
.drive-cockpit{position:absolute;bottom:-20px;left:-4%;width:108%;height:23%;border-radius:48% 48% 0 0;background:linear-gradient(#42515a,#1e2e36);border-top:9px solid #73848b;pointer-events:none;z-index:4;box-shadow:0 -6px 18px #0002}
.drive-wheel{position:absolute;left:17%;top:-24%;width:150px;height:150px;border:18px solid #1b272d;border-radius:50%;box-shadow:0 0 0 4px #73828a,inset 0 0 0 3px #73828a;transition:transform .5s}.drive-wheel:before,.drive-wheel:after{content:"";position:absolute;background:#1b272d;width:100%;height:15px;top:46%;left:0}.drive-wheel:after{transform:rotate(90deg)}.drive-wheel span{position:absolute;inset:35%;border-radius:50%;background:#b5c4c8;z-index:1}
.drive-dashboard{position:absolute;left:55%;top:24%;display:flex;align-items:baseline;gap:9px;color:#cfebd4}.drive-dashboard>span{font-size:10px;letter-spacing:2px}.drive-dashboard strong{font-size:30px}.drive-dashboard small{font-size:10px}
.drive-dark{position:absolute;inset:0;background:#122129;opacity:0;pointer-events:none;z-index:3;transition:opacity .5s}.drive-scene.in-tunnel .drive-dark{opacity:1}
.drive-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:25px;text-align:center;background:#142b39da;color:#fff;z-index:5}.drive-overlay h2{font-size:30px}.drive-overlay p{max-width:440px;line-height:1.6;margin:0}
.drive-scene.driving .drive-dashes{animation:road-flow .5s linear infinite}.drive-scene.approaching .drive-landscape{animation:approach 10s linear forwards}.drive-scene.turn-y .drive-landscape{transform-origin:24% 35%;animation:enter-tunnel 1.4s ease-in forwards}.drive-scene.turn-i .drive-landscape{transform-origin:76% 35%;animation:enter-tunnel 1.4s ease-in forwards}.turn-y .drive-wheel{transform:rotate(-65deg)}.turn-i .drive-wheel{transform:rotate(65deg)}.drive-scene.crashed{animation:crash-shake .35s}.drive-scene.crashed .drive-cockpit{border-color:#d57a60}
@keyframes road-flow{to{stroke-dashoffset:-50}}@keyframes approach{from{transform:scale(.85)}to{transform:scale(1.15)}}@keyframes enter-tunnel{from{transform:scale(1.15)}to{transform:scale(5)}}@keyframes crash-shake{25%,75%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
body:has(#drive-panel:not([hidden])) .intro{margin:8px 0 12px}body:has(#drive-panel:not([hidden])) h1{font-size:30px;margin:5px}body:has(#drive-panel:not([hidden])) .eyebrow,body:has(#drive-panel:not([hidden])) #intro-text{display:none}
@media(max-width:600px){.drive-scene{height:58dvh;min-height:330px}.drive-wheel{width:110px;height:110px;border-width:13px;left:12%}.drive-dashboard>span{display:none}.tunnel-choice{width:56px;height:52px;font-size:30px}.drive-word-sign{min-width:125px;padding:8px}.drive-toolbar{font-size:12px}.drive-world{object-fit:fill}}
@media(prefers-reduced-motion:reduce){.drive-scene .drive-landscape,.drive-scene .drive-dashes{animation:none!important}.drive-dark,.drive-wheel{transition:none}.drive-scene.crashed{animation:none}}
/* Speed-controlled approach, tunnel exit and instruments. */
.drive-landscape{aspect-ratio:auto}
.drive-scene.approaching .drive-landscape,.drive-scene.turn-y .drive-landscape,.drive-scene.turn-i .drive-landscape{animation:none}
.drive-scene.driving .drive-dashes{animation-duration:var(--road-duration,.5s)}
.drive-scene.stopped .drive-dashes{animation-play-state:paused}
.tunnel-choice{width:100px;font-size:29px}
.drive-cockpit{height:27%;bottom:-8px}
.drive-wheel{left:10%;width:125px;height:125px;border-width:15px;top:-5%}
.drive-dashboard{left:35%;top:0;height:100%;gap:14px;align-items:center}
.drive-speedometer{position:relative;width:140px;align-self:center}
.drive-speedometer svg{display:block;width:100%}.drive-speedometer>div{position:absolute;bottom:4px;left:0;width:100%;text-align:center}.drive-dashboard .drive-speedometer strong{font-size:19px}.drive-speedometer small{font-size:10px}
#drive-needle{transform-origin:70px 66px;transition:transform .2s ease}
.drive-fuel-gauge{display:flex;flex-direction:column;gap:5px;width:65px;text-align:center}.drive-fuel-gauge strong{font-size:24px}.drive-fuel-gauge meter{width:100%;height:18px}
.drive-pedals{position:absolute;right:7%;top:18%;height:70%;display:flex;align-items:center;gap:12px;pointer-events:auto}
.drive-pedals button{border:3px solid #9ba9ab;border-radius:12px;background:repeating-linear-gradient(#445963 0 6px,#354952 6px 12px);color:#fff;padding:10px 8px;min-width:62px;min-height:62px;font-size:12px;font-weight:900;touch-action:manipulation;box-shadow:0 4px 0 #15252d}.drive-pedals button small{display:block;font-size:19px;margin-top:5px}.drive-pedals #drive-gas{height:90%;border-color:#a4c77a}.drive-pedals button:active{transform:translateY(3px)}.drive-pedals button:disabled{opacity:.5}
.drive-after{position:absolute;inset:0;z-index:2;overflow:hidden}.drive-after>svg{width:100%;height:100%}.drive-answer-sign{position:absolute;left:7%;top:25%;background:#fff8da;border:5px solid #46704e;border-radius:12px;padding:12px;max-width:60%;color:#273d32;box-shadow:0 5px 0 #0002}.drive-answer-sign small{display:block;font-weight:800;font-size:10px}.drive-answer-sign strong{font-size:clamp(25px,4vw,42px)}
.drive-canister{position:absolute;left:46%;top:43%;font-size:54px;transform:scale(calc(.6 + var(--exit-progress)*1.3));transform-origin:center bottom}.drive-canister b{display:block;font-size:20px;background:#ffefaa;border-radius:10px;padding:3px 8px;color:#3e592c}
.drive-puddle{position:absolute;left:38%;top:55%;width:24%;height:10%;border-radius:40% 60% 35% 50%;background:#68b3cb;border:5px solid #95d5df;box-shadow:inset 20px 3px #4295b0;transform:scale(calc(.7 + var(--exit-progress)))}
.drive-effects{position:absolute;inset:0;pointer-events:none;z-index:7}.fuel-float{position:absolute;left:45%;top:55%;font-size:clamp(36px,6vw,64px);font-weight:900;color:#fff9cb;text-shadow:0 3px 0 #436331,0 0 12px #243a32;background:#416d42cc;border-radius:18px;padding:8px 16px;animation:fuel-rise 2s ease-out forwards}.fuel-loss{background:#8a3e36dd}
@keyframes fuel-rise{0%{opacity:1;transform:translateY(0) scale(.8)}20%{opacity:1;transform:translateY(-15px) scale(1)}100%{opacity:0;transform:translateY(-140px) scale(1.1)}}
.drive-scene.skidding .drive-after{animation:skid .8s ease-in-out}.drive-scene.skidding .drive-wheel{animation:wheel-skid .8s ease-in-out}@keyframes skid{25%{transform:translateX(-20px) rotate(-3deg)}60%{transform:translateX(22px) rotate(3deg)}100%{transform:none}}@keyframes wheel-skid{25%{transform:rotate(-65deg)}60%{transform:rotate(60deg)}}
@media(max-width:600px){.tunnel-choice{width:82px;font-size:24px}.drive-wheel{width:85px;height:85px;border-width:10px;left:8%;top:10%}.drive-dashboard{left:31%;gap:4px}.drive-speedometer{width:96px}.drive-fuel-gauge{width:42px}.drive-fuel-gauge strong{font-size:18px}.drive-pedals{right:5%;gap:5px}.drive-pedals button{min-width:42px;min-height:52px;font-size:9px;padding:6px 3px}.drive-pedals button small{font-size:15px}.drive-dashboard .drive-speedometer strong{font-size:14px}.drive-answer-sign{padding:8px}.drive-canister{font-size:42px}.fuel-float{left:35%}}
@media(prefers-reduced-motion:reduce){.drive-scene.skidding .drive-after,.drive-scene.skidding .drive-wheel{animation:none}#drive-needle{transition:none}.fuel-float{animation:fuel-fade 2s forwards}@keyframes fuel-fade{to{opacity:0}}}
/* The tunnel walls frame a growing daylight opening onto the continuing road. */
.drive-dark{transition:none;background:repeating-radial-gradient(ellipse at 50% 42%,#17262d 0 35px,#26383f 37px 41px,#17262d 44px 80px);-webkit-mask-image:radial-gradient(ellipse at 50% 42%,transparent var(--opening,0%),#000 calc(var(--opening,0%) + 1%));mask-image:radial-gradient(ellipse at 50% 42%,transparent var(--opening,0%),#000 calc(var(--opening,0%) + 1%))}
.drive-answer-sign{left:6%;top:25%;padding:0;border:0;background:none;box-shadow:none;border-radius:0;max-width:54%;isolation:isolate}
.drive-answer-board{position:relative;background:#246897;color:white;border:4px solid #f4f5e8;border-radius:7px;padding:12px 18px;box-shadow:0 0 0 2px #254b63,3px 5px 8px #0003;text-align:center}
.drive-answer-board small{color:#e5f1f7;letter-spacing:1px}.drive-answer-board strong{display:block;line-height:1.2}.drive-answer-board>span{display:block;font-size:26px;line-height:1}
.drive-answer-sign::after{content:"";position:absolute;top:100%;left:calc(50% - 6px);height:100px;width:12px;background:linear-gradient(90deg,#71818a,#c3cdd0,#667780);z-index:-1;box-shadow:3px 2px 3px #0002}
@media(max-width:600px){.drive-answer-board{padding:8px 10px}.drive-answer-board small{font-size:8px}.drive-answer-board strong{font-size:clamp(20px,5vw,30px)}.drive-answer-sign::after{height:75px}}
.drive-dark{background:#122129;-webkit-mask-image:none;mask-image:none}
.drive-after>svg{transform:scale(var(--exit-zoom,1));transform-origin:50% 37%}
.drive-canister{left:76%;top:48%;width:clamp(44px,7vw,72px);height:auto;transform:translateY(calc(var(--exit-progress,0)*90px)) scale(calc(.8 + var(--exit-progress,0)*1.2));transform-origin:center bottom;font-size:initial}
.drive-canister svg{display:block;width:100%;height:auto}
.drive-puddle{left:36%;top:51%;width:28%;height:auto;aspect-ratio:240/90;border:0;border-radius:0;background:none;box-shadow:none;transform:translateY(calc(var(--exit-progress,0)*110px)) scale(calc(.7 + var(--exit-progress,0)*1.4));transform-origin:center center}
.drive-puddle svg{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.drive-canister,.drive-puddle{transform:none}}
.drive-tunnel-shell{position:absolute;z-index:3;transform:translateX(-50%);pointer-events:none}.drive-tunnel-shell svg{display:block;width:100%;height:100%}
.drive-tunnel-walls{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transform-origin:50% 38%}.drive-scene .drive-after{transition:none}

.drive-after>.drive-answer-sign,.drive-after>.drive-puddle{opacity:var(--hazard-opacity,0)}

/* A single perspective canvas owns the road and both tunnel portals. */
.drive-canvas{position:absolute;inset:0;width:100%;height:100%}
.drive-landscape{transform:none!important;pointer-events:none}
.drive-landscape>.drive-world{display:none}
.drive-dark{display:none}
.drive-word-sign::after{content:"";position:absolute;top:100%;left:calc(50% - 5px);width:10px;height:40px;background:#737d74;z-index:-1}
.drive-scene .drive-after{pointer-events:none}
.drive-scene.skidding .drive-canvas{animation:skid .8s ease-in-out}

.drive-instruments{display:flex;flex-direction:column;align-items:center;gap:7px;width:100px}
.drive-countdown{width:100%;padding:6px 4px;border:3px solid #18282a;border-radius:6px;background:#112d20;color:#83ff9b;box-shadow:inset 0 2px 5px #0008,0 1px 0 #82918a;text-align:center}
.drive-countdown-label{display:block;font:700 8px/1.2 sans-serif;letter-spacing:.4px;margin-bottom:2px}
.drive-dashboard .drive-countdown strong{font:700 28px/1 monospace;font-variant-numeric:tabular-nums;text-shadow:0 0 6px #65ff8277}
.drive-countdown.urgent{background:#3d1217;color:#ff7777}
.drive-dashboard .drive-countdown.urgent strong{text-shadow:0 0 6px #ff393988}
.drive-instruments .drive-fuel-gauge{gap:0}
.drive-instruments .drive-fuel-gauge strong{font-size:18px}
@media(max-width:600px){.drive-instruments{width:65px;gap:3px}.drive-countdown{padding:4px 2px;border-width:2px}.drive-countdown-label{font-size:6px;letter-spacing:0}.drive-dashboard .drive-countdown strong{font-size:21px}.drive-speedometer{width:82px}.drive-instruments .drive-fuel-gauge strong{font-size:15px}}