.drive-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:4px 0 8px}
.drive-hud>div{padding:8px 10px;border:1px solid #546959;border-radius:8px;background:#1d2b25}
.drive-hud small{display:block;color:#9fc8a5;font:12.6px 'Space Mono',monospace;letter-spacing:.08em}
.drive-hud strong{display:block;margin-top:4px;color:#f2f8e7;font:700 21px 'Space Mono',monospace}
.drive-road{--road-scroll:0px;position:relative;height:330px;overflow:hidden;touch-action:pan-y;border:3px solid #7d9179;border-radius:13px;background:#344036;box-shadow:inset 0 0 0 9px #536a58,0 14px 28px #0006;user-select:none}
.drive-road-surface{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#ffffff07 0 2px,transparent 2px 42px),linear-gradient(90deg,#516553 0 3%,#a2a99b 3% 4%,#38434b 4% 96%,#a2a99b 96% 97%,#516553 97% 100%);background-size:100% 42px,100% 100%;background-position:0 var(--road-scroll),0 0}
.drive-lane-markers{position:absolute;inset:0;z-index:1;pointer-events:none}
.drive-lane-markers i{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:repeating-linear-gradient(180deg,#f5f2d6 0 24px,transparent 24px 54px);background-position-y:var(--road-scroll);opacity:.78;box-shadow:0 0 3px #f5f2d655}
.drive-road:before,.drive-road:after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:8px;background:repeating-linear-gradient(180deg,#d6d7bd 0 22px,#394c3e 22px 44px);background-position-y:var(--road-scroll)}
.drive-road:before{left:2%}.drive-road:after{right:2%}
.drive-traffic-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.drive-player,.drive-traffic-car{position:absolute;z-index:3;width:48px;height:96px;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 8px 5px #0008);transform:translateX(-50%)}
.drive-player{bottom:13px;background-image:url('assets/drive-mercedes-v2.svg');transition:left .17s cubic-bezier(.18,.8,.25,1)}
.drive-player.swerve-left{animation:car-swerve-left .2s ease-out}.drive-player.swerve-right{animation:car-swerve-right .2s ease-out}
.drive-traffic-car{z-index:2;width:46px;height:92px;background-image:url('assets/drive-traffic-v2.svg');transform:translateX(-50%) scale(var(--depth,.8));transform-origin:50% 100%}
.drive-traffic-car.type-truck{width:51px;height:108px;filter:brightness(.8) saturate(.75) drop-shadow(0 8px 5px #0008)}
.drive-traffic-car.type-cone{width:35px;height:42px;background:none;filter:drop-shadow(0 5px 3px #0008)}
.drive-traffic-car.type-cone:before{content:'🚧';position:absolute;inset:0;display:grid;place-items:center;font-size:40.6px}
.drive-traffic-car.variant-1{filter:hue-rotate(120deg) saturate(.9) drop-shadow(0 8px 5px #0008)}
.drive-traffic-car.variant-2{filter:hue-rotate(230deg) saturate(.85) drop-shadow(0 8px 5px #0008)}
.drive-traffic-car.variant-3{filter:grayscale(.7) brightness(.85) drop-shadow(0 8px 5px #0008)}
.drive-impact{position:absolute;z-index:5;left:50%;top:42%;padding:8px 12px;border:1px solid #ffba8c;border-radius:8px;background:#5e2b1ee8;color:#fff5d9;white-space:nowrap;font:700 15.4px Manrope;opacity:0;transform:translate(-50%,-50%) scale(.8);pointer-events:none;transition:opacity .15s,transform .15s}
.drive-impact.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.drive-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0}
.drive-controls button{min-width:100px;padding:11px 9px;border:1px solid #8cab7a;border-radius:8px;background:#304e39;color:#eaffdd;font:700 15.4px 'Space Mono',monospace;cursor:pointer;touch-action:manipulation}
.drive-controls button:active{background:#bde994;color:#203121}
.drive-controls span{color:#b9c9ba;font:14px/1.3 'Space Mono',monospace;text-align:center}
.drive-progress{height:8px;border-radius:8px;overflow:hidden;background:#27352d;border:1px solid #58705a}
.drive-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#96bd78,#d3f992);transition:width .1s}
.drive-shake{animation:road-shake .25s linear 2}
@keyframes car-swerve-left{50%{transform:translateX(-50%) rotate(-9deg)}}
@keyframes car-swerve-right{50%{transform:translateX(-50%) rotate(9deg)}}
@keyframes road-shake{25%{transform:translateX(2px)}75%{transform:translateX(-2px)}}
@media(max-width:520px){.drive-road{height:245px}.drive-hud strong{font-size:15.4px}.drive-hud small{font-size:9.8px}.drive-hud>div{padding:6px}.drive-player{width:38px;height:76px}.drive-traffic-car{width:36px;height:72px}.drive-traffic-car.type-truck{width:40px;height:82px}.drive-traffic-car.type-cone{width:29px;height:36px}.drive-controls button{min-width:82px;font-size:12.6px}.drive-controls span{font-size:11.2px}}
@media(prefers-reduced-motion:reduce){.drive-player,.drive-impact{transition:none}.drive-shake,.drive-player.swerve-left,.drive-player.swerve-right{animation:none}}