/* Zählwiese Auto-Teppich: hand-painted educational map on iOS */
.drive-page{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;padding:1px 10px max(12px,env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overscroll-behavior:contain!important}
.drive-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;width:min(100%,430px);margin:0 auto}
.drive-heading h1{font:900 clamp(24px,7.2vw,32px) "Chalkboard SE","Marker Felt",sans-serif;color:#846246;text-shadow:1px 2px #fff6dd;margin:1px 0!important}
.drive-heading>span{font:900 14px "Chalkboard SE","Marker Felt",sans-serif;color:#71905b;border:2px solid #a9ad74;background:#fff0cf;padding:3px 12px;border-radius:18px;white-space:nowrap}
.drive-instruction{width:min(100%,395px);height:84px;display:flex;gap:6px;align-items:center;justify-content:center;border-radius:20px;border:2px dashed #b89469;background:#fff1cdcf;flex:0 0 auto}
.drive-instruct-car{width:93px;height:68px;display:block;filter:drop-shadow(2px 3px 1px #93836755)}
.drive-instruct-car svg{width:100%;height:100%}
.drive-arrow{font-size:36px;color:#b88c60;text-shadow:1px 1px #fff2cf}
.drive-instruct-target{width:64px;height:67px;display:block}
.drive-instruct-target svg{width:100%;height:100%}
.drive-caption{font:900 clamp(15px,4.4vw,19px) "Chalkboard SE","Marker Felt",sans-serif;color:#597f55;text-align:center;margin:2px auto 4px!important;text-shadow:1px 1px #fff5dc}
.drive-map-wrap{position:relative;width:min(100%,400px);max-height:unset;flex:0 0 auto;touch-action:none;filter:drop-shadow(2px 4px 2px #78674e6b)}
#driveMap{display:block;width:100%;height:auto;aspect-ratio:390/510;border:7px solid #ac8661;border-radius:28px;overflow:hidden;touch-action:none!important;background:#b0d39f;box-shadow:inset 0 0 0 3px #f4e0bd}
.drive-stop{filter:drop-shadow(1px 2px 1px #79674c88);pointer-events:none}
.drive-stop.drive-destination{filter:drop-shadow(0 0 8px #f5df85)}
.drive-car{cursor:grab;filter:drop-shadow(2px 4px 1px #4f554872);touch-action:none}
.drive-car:active{cursor:grabbing}
.drive-car>svg{width:98px;height:76px}
.drive-car.drive-wrong{animation:drive-no .55s ease}
.drive-car.drive-celebration{animation:drive-happy .8s ease-out 2}
@keyframes drive-happy{0%,100%{filter:drop-shadow(2px 4px 1px #4f554872)}45%{filter:drop-shadow(0 0 10px #fff0a4)}}
@keyframes drive-no{0%,100%{opacity:1}50%{opacity:.55}}
.drive-foot{font:900 15px "Chalkboard SE","Marker Felt",sans-serif;color:#5a7953;text-align:center;line-height:1.2}
.drive-controls{display:flex;gap:10px;justify-content:center}
.drive-again,.drive-next{border:3px solid #af8a67;border-radius:23px;min-height:43px;padding:6px 16px;background:#fff0c6;color:#795e4b;font:900 clamp(15px,4.1vw,19px) "Chalkboard SE","Marker Felt",sans-serif;box-shadow:1px 3px #93795b69}
.drive-next{background:#bce1ac;color:#4b7453;border-color:#719a73}
.drive-next[hidden]{display:none!important}
@media(max-height:810px) and (orientation:portrait){.drive-heading h1{font-size:24px}.drive-instruction{height:62px}.drive-instruct-car{width:80px;height:54px}.drive-instruct-target{width:53px;height:52px}.drive-map-wrap{width:min(100%,calc((100dvh - 260px) * 390 / 510),345px)!important}.drive-foot{font-size:13px}}
@media(orientation:landscape) and (max-height:530px){.drive-page{display:grid!important;grid-template-columns:minmax(0,1fr) 37%;grid-template-rows:auto auto 1fr auto;gap:5px 12px!important;align-items:center}.drive-heading{grid-column:2;grid-row:1}.drive-instruction{grid-column:2;grid-row:2}.drive-caption{grid-column:2;grid-row:3}.drive-map-wrap{grid-column:1;grid-row:1/5;width:min(calc((100dvh - 88px)*390/510),100%)!important}.drive-controls{grid-column:2;grid-row:4}.drive-foot{display:none}}

/* Illustrated interconnected streets, vehicle follows the road geometry. */
.drive-page .drive-map-wrap{width:min(100%,430px)}
.drive-page #driveMap{border:9px solid #b58860!important;border-radius:24px!important;background:#a8cf9b!important;box-shadow:0 0 0 3px #f9e5bf,inset 0 0 0 3px #ecd4a7!important}
.drive-car{cursor:grab;touch-action:none;filter:drop-shadow(2px 3px 3px #414c4a99)}
.drive-stop.drive-destination{animation:zw-drive-dest .65s ease-in-out 3}
.drive-car.drive-wrong{animation:zw-drive-shake .45s ease-in-out}
.drive-car.drive-celebration{animation:zw-drive-success .72s ease-in-out infinite alternate}
@keyframes zw-drive-dest{50%{filter:drop-shadow(0 0 14px #fbe49c)}}
@keyframes zw-drive-shake{0%,100%{filter:drop-shadow(2px 3px 3px #414c4a99)}50%{filter:drop-shadow(0 0 12px #f08080)}}
@keyframes zw-drive-success{to{filter:drop-shadow(0 0 16px #f2e799)}}