:root{font-family:Arial,Helvetica,sans-serif;color:#f2ede2;background:#071822;font-synthesis:none}*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden}.game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:linear-gradient(#65b2c5 20%,#c8d9cc 58%,#426073)}canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 37%,transparent 35%,rgba(4,19,25,.49) 100%)}button{font:inherit;cursor:pointer}.hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:18px;right:18px;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}.hud[hidden],.progress[hidden],.cockpit[hidden],.touch-controls[hidden],.hint[hidden],.panel[hidden],.restart[hidden]{display:none!important}.vehicle,.race-data{border:1px solid #e8cb9c82;border-radius:12px;background:#092532dc;box-shadow:0 10px 30px #08212a64}.vehicle{display:flex;align-items:center;gap:8px;padding:5px 13px 5px 3px}.vehicle img{width:74px;height:52px;object-fit:contain;background:#e9dfc6;border-radius:7px}.vehicle strong{font-size:14px;display:block}.vehicle span{color:#f3c682;letter-spacing:.18em;font-size:9px}.race-data{text-align:right;padding:9px 14px;min-width:125px}.race-data span,.race-data small{display:block;font-size:10px;letter-spacing:.13em;color:#f4d39c}.race-data strong{display:block;font-size:22px;letter-spacing:.05em}.progress{position:absolute;top:100px;left:50%;transform:translateX(-50%);width:min(390px,46vw);height:10px;border-radius:99px;background:#0e3345bc;border:1px solid #f3d59eaa;z-index:4}.progress-player,.progress-rival,.progress-finish{position:absolute;top:-9px;font-size:22px;line-height:22px}.progress-player{color:#fff;left:0;z-index:2;text-shadow:0 1px 6px #192a30}.progress-rival{color:#ffb761;left:0}.progress-finish{right:-13px;color:#fff}.cockpit{position:absolute;bottom:-2px;left:0;width:100%;height:clamp(240px,39vh,460px);pointer-events:none;z-index:2;transform-origin:50% 100%;will-change:transform}.cockpit-art{width:100%;height:100%;display:block}.wheel{position:absolute;left:50%;bottom:-43%;width:min(36vh,30vw);aspect-ratio:1;transform:translateX(-50%) rotate(var(--turn,0deg));filter:drop-shadow(0 10px 8px #0008);border:15px solid #27282a;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 7px #a39d8e,0 0 0 5px #625e58}.wheel-ring{position:absolute;inset:14px;border:3px solid #a59a81;border-radius:50%}.wheel-spoke{position:absolute;left:50%;top:50%;width:12%;height:46%;background:linear-gradient(90deg,#555b59,#c8c1a8,#606665);transform-origin:50% 0}.wheel-spoke--one{transform:rotate(0deg)}.wheel-spoke--two{transform:rotate(120deg)}.wheel-spoke--three{transform:rotate(240deg)}.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border:5px solid #a8a38f;border-radius:50%;background:#303b3e;display:grid;place-items:center;color:#d1b482;font:bold 30px Georgia,serif}.speed{position:absolute;right:max(4vw,18px);bottom:14px;display:flex;align-items:baseline;gap:6px;color:#fff;text-shadow:0 2px 7px #000}.speed strong{font-size:clamp(28px,4vw,54px)}.speed span{font-size:11px;letter-spacing:.16em}.hint{position:absolute;top:25%;left:50%;transform:translateX(-50%);z-index:5;background:#082a38e8;border:1px solid #f0ca87;border-radius:14px;padding:12px 20px;text-align:center;font-weight:bold;font-size:clamp(16px,2.4vw,27px);box-shadow:0 12px 40px #0008;white-space:nowrap}.restart{position:absolute;z-index:6;left:18px;bottom:max(18px,env(safe-area-inset-bottom));border:1px solid #f4d09c;border-radius:30px;background:#0d2e3cdd;color:#fff;padding:9px 14px}.panel{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 26px));max-height:calc(100% - 28px);overflow:auto;border:1px solid #e8c88b8a;border-radius:22px;background:linear-gradient(145deg,#163c4bf5,#092331f9);box-shadow:0 22px 85px #001722b8;padding:clamp(19px,4vw,40px)}.panel:before{content:"";position:absolute;right:-55px;top:-70px;width:270px;height:270px;border-radius:50%;border:1px solid #dbb97929;box-shadow:0 0 0 31px #dbb9790b,0 0 0 70px #dbb97908;pointer-events:none}.eyebrow{margin:0 0 12px;color:#edc58a;letter-spacing:.24em;font-size:11px;font-weight:bold}.panel h1,.panel h2{font-family:Georgia,serif;line-height:.95;margin:0;font-weight:bold;letter-spacing:.015em}.panel h1{font-size:clamp(38px,8vw,76px)}.panel h1 em{color:#edc88e;font-style:normal}.panel h2{font-size:clamp(38px,7vw,66px);color:#edc88e}.intro{font-size:clamp(14px,1.8vw,17px);max-width:550px;line-height:1.45;color:#dbe7e5}.chooser-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 0 8px;font-size:11px;letter-spacing:.18em;color:#edd19f}.chooser-heading span{color:#b9d1d3;letter-spacing:0}.chooser{display:flex;gap:9px;overflow-x:auto;padding:3px 2px 12px;scrollbar-color:#d6b675 #173f4d}.chooser button{flex:0 0 105px;height:92px;border:2px solid #90aeb277;background:#d9d6c7;border-radius:11px;padding:4px;color:#173644;transition:transform .15s,border-color .15s}.chooser button:hover{transform:translateY(-3px)}.chooser button[aria-pressed="true"]{border-color:#ffd48a;box-shadow:0 0 0 2px #ffd48a80}.chooser img{height:64px;width:100%;object-fit:contain}.chooser span{display:block;font-weight:bold;font-size:10px}.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}.primary{border:0;border-radius:10px;background:#e7b977;color:#17323c;font-weight:900;letter-spacing:.09em;padding:15px 20px;box-shadow:0 5px 0 #a77642}.primary:hover{background:#ffce89}.primary span{margin-left:20px}.quiet{background:none;border:0;color:#f5ddba;font-weight:bold;text-decoration:underline;text-underline-offset:5px;padding:10px 0}.controls-help{margin:14px 0 0;color:#d1e1df;line-height:1.45;font-size:13px}.edition{display:block;margin-top:19px;color:#bdd3d4;font-size:11px}.result-panel{text-align:center;max-width:550px}.result-panel p:not(.eyebrow){line-height:1.5;color:#e1e9e5}.result-panel .actions{justify-content:center}.result-time{font-size:36px;color:#f7d095;font-weight:bold;letter-spacing:.08em}.touch-controls{position:absolute;bottom:max(9px,env(safe-area-inset-bottom));left:10px;right:10px;z-index:6;display:flex;justify-content:space-between;pointer-events:none}.touch-steer,.touch-drive{display:flex;gap:7px}.touch-controls button{pointer-events:auto;touch-action:none;border:2px solid #e9c99b99;background:#113847cb;color:white;border-radius:15px;width:66px;height:62px;font-weight:bold;box-shadow:0 5px 15px #0019;user-select:none}.touch-controls button:active,.touch-controls button.active{background:#e2af71;color:#112a35}.touch-drive button{width:72px;font-size:12px}.touch-drive button:last-child{width:82px;height:72px;border-radius:50%;background:#b66937ea;border-color:#edc18b}@media(pointer:coarse){.restart{bottom:90px}.cockpit{height:clamp(190px,35vh,340px)}.speed{bottom:80px;right:16px}.progress{top:85px}}@media(max-width:600px){.panel{padding:20px}.intro{margin:12px 0}.chooser-heading{margin-top:13px}.chooser button{flex-basis:88px;height:80px}.chooser img{height:53px}.hud{left:9px;right:9px;top:max(8px,env(safe-area-inset-top))}.vehicle{padding:3px 6px 3px 3px}.vehicle img{width:52px;height:42px}.vehicle strong{font-size:11px}.race-data{padding:6px 8px;min-width:99px}.race-data strong{font-size:17px}.race-data small,.race-data span{font-size:8px}.progress{width:35vw}.wheel{width:min(26vh,30vw);border-width:9px}.wheel-hub{font-size:18px}.speed strong{font-size:25px}.speed span{font-size:8px}}@media(max-height:540px){.panel{padding:17px}.panel h1{font-size:39px}.intro{margin:8px 0}.chooser-heading{margin-top:8px}.chooser button{height:68px}.chooser img{height:42px}.actions{margin-top:10px}.edition{margin-top:10px}.cockpit{height:42vh}.wheel{width:min(33vh,23vw)}}
.panel{overflow-x:hidden}
.panel{scrollbar-color:#d6b675 #173f4d;scrollbar-width:thin}
.panel::-webkit-scrollbar{width:10px}
.panel::-webkit-scrollbar-track{background:#173f4d}
.panel::-webkit-scrollbar-thumb{background:#d6b675;border-radius:10px}
.game:fullscreen{width:100vw;height:100vh;height:100dvh}
.fullscreen[hidden]{display:none!important}
.fullscreen{position:absolute;z-index:11;top:max(82px,calc(env(safe-area-inset-top) + 72px));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:7px;min-height:40px;padding:6px 11px;border:1px solid #edc992;border-radius:10px;background:#092d3ddc;color:#f7e7ca;font-size:12px;font-weight:bold;box-shadow:0 7px 20px #00182670}
.fullscreen:hover,.fullscreen:focus-visible{background:#294e59}
.fullscreen span:first-child{font-size:22px;line-height:1}
.audio-actions[hidden]{display:none!important}
.audio-actions{position:absolute;z-index:11;top:max(129px,calc(env(safe-area-inset-top) + 119px));right:max(12px,env(safe-area-inset-right));display:flex;gap:6px}
.audio-actions button{min-height:36px;padding:6px 10px;border:1px solid #edc992;border-radius:9px;background:#092d3ddc;color:#f7e7ca;font-size:11px;font-weight:bold;box-shadow:0 7px 20px #00182670}
.audio-actions button:hover,.audio-actions button:focus-visible{background:#294e59}
.audio-actions button[aria-pressed="false"]{opacity:.67}
@media(max-width:650px){.audio-actions{top:max(98px,calc(env(safe-area-inset-top) + 91px));right:max(8px,env(safe-area-inset-right))}.audio-actions button{padding:5px 8px;font-size:10px}}
@media(max-width:650px){.fullscreen{top:max(54px,calc(env(safe-area-inset-top) + 47px));right:max(8px,env(safe-area-inset-right));min-height:39px;padding:5px 9px;font-size:10px}}
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:start}.vehicle{justify-self:start}.vehicle--rival{justify-self:end;text-align:right}.vehicle--rival img{transform:scaleX(-1)}.race-data{justify-self:center;text-align:center}.progress{top:92px}.chooser-heading{margin:13px 0 6px}.chooser button{height:77px;flex-basis:88px}.chooser img{height:51px}.track-chooser{display:flex;gap:9px}.track-chooser button{flex:1 1 0;min-width:0;border:2px solid #83a7a8aa;border-radius:10px;background:#113440;color:#e9ece6;text-align:left;padding:9px 12px}.track-chooser button[aria-pressed="true"]{border-color:#f5cb81;background:#355768}.track-chooser strong,.track-chooser small{display:block}.track-chooser strong{font-size:13px}.track-chooser small{margin-top:3px;color:#c8d5d2;font-size:10px}.rescue[hidden]{display:none!important}.rescue{position:absolute;inset:0;z-index:7;overflow:hidden;background:linear-gradient(#10333cb0,#143a4899 58%,#0f2a35ca);text-align:center;pointer-events:none}.rescue-title{position:absolute;top:18%;left:0;right:0;color:#ffdc9d;font:bold clamp(17px,3.6vw,34px) Georgia,serif;letter-spacing:.05em;text-shadow:0 3px 6px #142b31}.rescue-boom{position:absolute;top:-24px;left:50%;width:min(410px,60vw);height:47px;transform:translateX(-50%);border:11px solid #4d5660;background:repeating-linear-gradient(135deg,#c39b6c 0 17px,#373f43 17px 30px);box-shadow:0 8px 20px #152634}.rescue-lift{position:absolute;top:29%;left:50%;width:clamp(230px,36vw,460px);transform:translate(-50%,var(--lift,0px));transition:transform .09s linear}.rescue-lift img{display:block;width:100%;height:230px;object-fit:contain;filter:drop-shadow(0 18px 8px #09212b8c)}.rescue-chains{height:130px;display:flex;justify-content:space-around;padding:0 18%;margin-bottom:-27px}.rescue-chains i{height:100%;width:6px;border:2px solid #363f42;background:repeating-linear-gradient(#aab5b5 0 7px,#4b5458 7px 16px);transform-origin:top}.rescue-chains i:first-child{transform:rotate(-16deg)}.rescue-chains i:last-child{transform:rotate(16deg)}.rescue-note{position:absolute;left:0;right:0;bottom:11%;font-size:clamp(13px,2vw,19px);color:#f4e5c5}.start-panel{width:min(850px,calc(100% - 26px))}@media(max-width:650px){.hud{left:7px;right:7px;gap:4px}.vehicle{gap:3px;padding:3px}.vehicle img{width:45px;height:35px}.vehicle strong{font-size:10px}.vehicle span{font-size:7px;letter-spacing:.1em}.race-data{padding:5px 6px;min-width:83px}.race-data strong{font-size:15px}.race-data small{max-width:105px;font-size:7px;letter-spacing:0}.progress{top:77px;width:49vw}.track-chooser strong{font-size:11px}.track-chooser small{font-size:9px}.rescue-lift{top:25%}.rescue-chains{height:105px}.rescue-lift img{height:180px}}@media(max-height:620px){.start-panel{padding:14px}.start-panel h1{font-size:39px}.start-panel .intro{margin:6px 0;font-size:12px}.chooser-heading{margin:7px 0 3px}.chooser button{height:60px;flex-basis:75px}.chooser img{height:37px}.track-chooser button{padding:6px}.start-panel .actions{margin-top:7px}.start-panel .edition{margin-top:5px}}

/* Auswahlmenü: ein klarer Startknopf und eine einheitliche Bedienleiste. */
.start-panel .menu-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px;align-items:stretch}
.menu-actions .primary{grid-column:1/-1;min-height:66px;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:17px 24px;font-size:clamp(16px,2.6vw,22px)}
.menu-actions .primary span{margin-left:12px;font-size:25px;font-weight:normal;line-height:1}
.menu-option{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:50px;padding:10px 12px;border:1px solid #93adae9c;border-radius:10px;background:#193b49;color:#f5e7ce;font-size:12px;font-weight:800;letter-spacing:.035em;line-height:1.2;text-align:center;transition:background .15s,border-color .15s}
.menu-option__icon{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;color:#edc58a;font-size:22px;font-weight:normal;line-height:1}
.menu-option__label{min-width:0}
.menu-option:hover,.menu-option:focus-visible{background:#2b5360;border-color:#f2ca88}
.menu-option[aria-pressed="true"],.menu-option[aria-expanded="true"]{border-color:#e8bd76;background:#294b58}
.menu-actions button:focus-visible{outline:2px solid #fff1c9;outline-offset:2px}
@media(max-width:600px){.start-panel .menu-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.menu-actions #helpButton{grid-column:1/-1}.menu-option{min-height:46px;padding:8px;font-size:11px;gap:5px}.menu-option__icon{width:21px;height:23px;font-size:19px}.menu-actions .primary{min-height:58px;padding:12px 18px}}
@media(max-height:620px){.start-panel .menu-actions{margin-top:9px;gap:7px}.menu-actions .primary{min-height:48px;padding:9px 15px}.menu-option{min-height:39px;padding:5px 9px}}

/* Helles, schlankes Zweisspeichenlenkrad nach der Bulli-Vorlage. */
.wheel{bottom:-40%;width:min(44vh,36vw);border:9px solid #d9dfd8;background:transparent;box-shadow:inset 0 0 0 2px #6c7e7e,0 0 0 2px #637273;filter:drop-shadow(0 9px 9px #0009)}
.wheel-ring{inset:6px;border:1px solid #fbf9ee99}
.wheel-spoke{left:50%;top:50%;width:46%;height:8%;background:linear-gradient(#f3f4e9,#c8d4cf 44%,#9caca8 94%);clip-path:polygon(0 29%,82% 17%,100% 24%,100% 76%,82% 83%,0 71%);transform-origin:0 50%;box-shadow:none}
.wheel-spoke--one{transform:rotate(0deg)}
.wheel-spoke--two{transform:rotate(180deg)}
.wheel-hub{width:20%;border:6px solid #c2d0cb;background:radial-gradient(circle at 48% 42%,#33474d,#1b2b31 72%);box-shadow:0 0 0 2px #839894,0 5px 9px #0007;color:#f1dfbc;font-size:clamp(16px,2vw,26px)}
@media(max-width:600px){.wheel{width:min(35vh,43vw);border-width:6px;bottom:-18%}.wheel-hub{border-width:4px}}
@media(max-height:540px){.wheel{width:min(39vh,29vw);bottom:-20%}}