.scene-label{padding:15px 18px;background:#111923c7;border:1px solid #ffffff18;border-radius:11px;backdrop-filter:blur(8px)}.scene-label #target-distance{margin-bottom:0}.readout{padding:10px 18px;background:#111923b8;border:1px solid #ffffff12;border-radius:12px;backdrop-filter:blur(8px)}.scene-footer{background:#111923c7;color:#e1eaf0}.mobile-drive{display:none}#minimap{background:#131b23}
@media(max-width:740px){.scene-label{top:68px;left:12px;padding:10px 12px}.scene-label .eyebrow{font-size:10px}.race-hud{margin-top:8px}.race-hud strong{font-size:16px}.race-hud span{font-size:12px}.scene-label #target-distance{font-size:11px;margin-top:6px}.views{top:14px;bottom:auto;right:12px}.readout{bottom:133px;left:12px;padding:5px 12px}.readout>div{padding-left:10px}.readout>div small{font-size:9px}#minimap{bottom:146px;width:76px!important;height:76px!important}.mobile-drive{display:flex;position:absolute;bottom:57px;left:12px;right:12px;justify-content:space-between;gap:8px}.mobile-drive button{width:54px;height:54px;background:#18222dea;font-size:25px;touch-action:none;user-select:none}.mobile-drive button.held{background:#c2f58b;color:#18220e}.scene-footer{font-size:10px;padding:12px}.scene-footer>span{max-width:220px}.scene-footer label{font-size:10px}.header-right #status{display:none}}
.joystick-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:auto}#joystick{width:126px;height:126px;position:relative;border-radius:50%;border:1px solid #c2f58b66;background:radial-gradient(circle,#33463de8,#131d28e8);box-shadow:inset 0 0 25px #0006,0 4px 18px #0003;touch-action:none;user-select:none;-webkit-user-select:none}.joystick-knob{position:absolute;left:40px;top:40px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e2ffc3,#96c96b);border:2px solid #eeffdb;box-shadow:0 3px 12px #0008;pointer-events:none}#joystick:not(.held) .joystick-knob{transition:transform .12s ease-out}.joystick-axis{position:absolute;background:#d6e9cb22;pointer-events:none}.joystick-axis.vertical{top:12px;bottom:12px;left:50%;width:1px}.joystick-axis.horizontal{left:12px;right:12px;top:50%;height:1px}.joystick-hint{font-size:9px;letter-spacing:.12em;color:#e1eaf0;text-shadow:0 1px 3px #000}.touch-brake{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;pointer-events:auto}.touch-brake small{font-size:9px}
@media(max-width:740px),(pointer:coarse){.mobile-drive{display:flex;position:absolute;bottom:58px;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));align-items:flex-end;justify-content:space-between;pointer-events:none;z-index:2}.mobile-drive .touch-brake{width:65px;height:65px;border-radius:50%;background:#23332ded;border:1px solid #c2f58b88;color:#c2f58b;touch-action:none;user-select:none}.mobile-drive .touch-brake.held{background:#c2f58b;color:#18220e}.readout{bottom:214px;left:16px;padding:5px 10px}#minimap{bottom:144px;width:65px!important;height:65px!important;right:16px}.scene-footer>span{font-size:0}.scene-footer>span::after{content:'Joystick fahren · Loslassen bremst';font-size:10px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){header{height:48px}main{display:block;height:auto;min-height:0}#stage{height:calc(100dvh - 48px);min-height:290px}.scene-label{top:12px;left:16px;padding:8px 12px}.scene-label .eyebrow,.scene-label #target-distance,.race-hud #lap{display:none}.race-hud{margin-top:0}.race-hud strong{font-size:15px}.views{top:12px;bottom:auto}.readout{bottom:72px;left:170px}#velocity{font-size:28px}.readout>div{display:none}.scene-footer{padding:10px 16px}.mobile-drive{bottom:42px}#minimap{bottom:122px}}
#mobile-menu-open,#mobile-camera{display:none}#mobile-menu{padding:0;border:1px solid #56616b;border-radius:18px;background:#1b2024;color:#f0f4f5;width:min(420px,calc(100% - 24px));max-height:86dvh;overflow:auto;overscroll-behavior:contain}#mobile-menu::backdrop{background:#080d14b3;backdrop-filter:blur(5px)}#mobile-menu-close{display:block;position:sticky;top:0;z-index:5;width:100%;padding:16px;background:#25302b;border:0;border-radius:0;color:#c2f58b}#mobile-menu aside{overflow:visible;border:0;padding-top:18px}
@media(max-width:740px),(pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body>header{display:none}main{display:block;width:100%;height:100dvh;min-height:0}#stage{height:100dvh;min-height:0;width:100%}main>aside{display:none}
 #mobile-menu-open{display:block;position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:44px;height:44px;z-index:5;background:#18222dd9;border-color:#ffffff28;font-size:22px;border-radius:50%}
 #mobile-camera{display:block;margin-bottom:18px}#mobile-camera .views{position:static;display:flex;justify-content:center;margin-bottom:12px}#mobile-menu .dpad,#mobile-menu .telemetry,#mobile-menu footer,#mobile-menu .panel-heading{display:none}
 #stage>.views,.scene-footer,.readout,#stage #minimap,.joystick-hint,.scene-label>.eyebrow,.scene-label #target-distance,.race-hud #lap{display:none}
 .scene-label{top:max(14px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));padding:8px 12px;border-radius:20px;background:#111923a8}.race-hud{margin:0;gap:12px}.race-hud strong{font-size:13px}.race-hud span{font-size:12px}
 .mobile-drive{bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));align-items:flex-end}#joystick{background:radial-gradient(circle,#33463da8,#131d28a8);width:112px;height:112px}.joystick-knob{left:34px;top:34px}.mobile-drive .touch-brake{width:58px;height:58px;background:#23332dbb;margin-bottom:4px}#toast{top:80px;font-size:12px;padding:9px 12px}
}
#sorted-count{color:#c2f58b;font-size:12px;white-space:nowrap}@media(max-width:740px),(pointer:coarse){.race-hud #lap-time{display:none}.race-hud{gap:10px}#sorted-count{font-size:12px}}
.level-select{display:flex;gap:8px;margin-bottom:16px}.level-select button{flex:1;padding:11px 6px;font-size:13px}.runner-help,.runner-actions{display:none}body[data-level=runner] .runner-help{display:block}body[data-level=runner] .game-help,body[data-level=runner] #demo,body[data-level=runner] #drive-sliders,body[data-level=runner] #mobile-camera,body[data-level=runner] .views,body[data-level=runner] #minimap,body[data-level=runner] .telemetry{display:none!important}body[data-level=runner] .runner-actions{display:flex;position:absolute;bottom:155px;left:18px;right:18px;justify-content:space-between;pointer-events:none;z-index:2}.runner-actions button{pointer-events:auto;font-size:12px;padding:11px 13px;background:#183238db;color:#c2f58b;border-color:#a4dd8666}#runner-retry{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:18px 24px;background:#c2f58b;color:#152419;z-index:4;white-space:nowrap}body[data-level=runner] .scene-footer>span{font-size:0}body[data-level=runner] .scene-footer>span::after{content:'A/D Spur wechseln · Q/E schnappen · Leertaste bremsen';font-size:11px}@media(max-width:740px),(pointer:coarse){body[data-level=runner] .runner-actions{bottom:max(148px,calc(env(safe-area-inset-bottom) + 136px))}.runner-actions button{padding:10px;font-size:11px}}

/* Material Discovery keeps the play area clear on touch screens. */
.lab-help,.lab-grab{display:none}.level-select{flex-wrap:wrap}.level-select button[data-level="building"]{flex-basis:100%}
body[data-level="building"] .lab-help{display:block}body[data-level="building"] .lab-grab{display:block}
body[data-level="building"] :is(.runner-help,.game-help,.views,#mobile-camera,#minimap,.readout,.telemetry,#demo,#drive-sliders){display:none!important}
body[data-level="building"] .eyebrow{color:#bdeac6}body[data-level="building"] .scene-label>.eyebrow{font-size:0}body[data-level="building"] .scene-label>.eyebrow:after{content:'MATERIAL DISCOVERY';font-size:10px;letter-spacing:2px}
.lab-help p{font-size:12px;line-height:1.6;color:#aabbb8}.lab-help h3{font-size:19px;margin:10px 0}#lab-progress{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0}#lab-progress li{font-size:11px;padding:9px;background:#ffffff05;border:1px solid #ffffff0c;border-radius:8px;color:#b9c8c4}#lab-progress small{display:block;margin:4px 0 0 15px;font-size:9px;opacity:.6}#lab-progress .done{color:#bdeac6;border-color:#bdeac640;background:#bdeac608}
.lab-grab{position:absolute;z-index:12;bottom:75px;right:24px;padding:17px 24px;border-radius:30px;background:#c3ecc7;color:#233c40;border:1px solid #e1fbe5;font-weight:700;box-shadow:0 8px 35px #0004;cursor:pointer;touch-action:manipulation}
#lab-win{position:absolute;z-index:25;left:50%;top:40%;transform:translate(-50%,-50%);width:min(340px,82%);padding:30px;background:#233c40f5;border:1px solid #bdeac680;border-radius:20px;text-align:center;box-shadow:0 30px 100px #0006}#lab-win[hidden]{display:none}#lab-win h2{font-size:30px}#lab-win p{line-height:1.6;color:#c2d1cb}#lab-win button{display:block;width:100%;margin-top:12px;padding:13px;border-radius:10px;border:1px solid #8faa9e;background:#bdeac6;color:#233c40;cursor:pointer}
@media(max-width:740px),(pointer:coarse){.lab-grab{bottom:155px;right:16px;padding:14px 18px;font-size:12px}body[data-level="building"] #checkpoint{font-size:11px;max-width:185px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body[data-level="building"] .scene-label{max-width:calc(100% - 75px)}body[data-level="building"] #toast{bottom:225px;font-size:12px;max-width:85%;white-space:normal}}

body[data-level="building"] .scene-label{padding:12px 16px}body[data-level="building"] .race-hud strong{font-size:16px}body[data-level="building"] .scene-label #lap{display:none}body[data-level="building"] .scene-footer>span{font-size:0}body[data-level="building"] .scene-footer>span:after{content:"WASD / Pfeile fahren · E Probe schnappen · Leertaste bremsen";font-size:11px}body[data-level="building"] .scene-footer label{display:none}
@media(max-width:740px),(pointer:coarse){body[data-level="building"] .scene-label{padding:8px 12px}body[data-level="building"] .race-hud strong{font-size:11px}body[data-level="building"] #toast{top:auto;left:50%;transform:translateX(-50%);width:max-content}}

.city-help,.city-actions{display:none}.level-select button[data-level="city"]{flex-basis:100%}
body[data-level="city"] .city-help{display:block}
body[data-level="city"] :is(.runner-help,.lab-help,.game-help,.views,#mobile-camera,#minimap,.telemetry,#demo,#drive-sliders,.dpad,.mobile-drive,.lab-grab){display:none!important}
body[data-level="city"] .city-actions{display:flex;position:absolute;bottom:205px;left:18px;right:18px;justify-content:space-between;pointer-events:none;z-index:2}
.city-actions button{pointer-events:auto;font-size:13px;padding:14px 18px;background:#1b2240db;color:#85efff;border-color:#85efff66}
body[data-level="city"] .scene-label>.eyebrow{font-size:0}body[data-level="city"] .scene-label>.eyebrow:after{content:'CITY SWING';font-size:10px;letter-spacing:2px}
body[data-level="city"] .scene-footer>span{font-size:0}body[data-level="city"] .scene-footer>span::after{content:'A/D oder Q/E: Arm links / rechts · abwechseln = Combo · R Neustart';font-size:11px}body[data-level="city"] .scene-footer label{display:none}
@media(max-width:740px),(pointer:coarse){body[data-level="city"] .city-actions{bottom:max(40px,calc(env(safe-area-inset-bottom) + 28px))}.city-actions button{padding:16px 20px;font-size:13px}}
