*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;background:#89aa70;color:#17384e;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#89aa70;touch-action:none}
#gameCanvas,.rausch-main-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#89aa70;touch-action:none}
#hud,.rausch-map-hud{position:absolute;z-index:8;top:12px;left:12px;max-width:calc(100% - 230px);padding:10px 13px;border-radius:13px;background:rgba(18,43,57,.91);color:#fff;font-weight:900;box-shadow:0 5px 16px #0004;pointer-events:none}
.rausch-map-hud small{display:block;margin-top:3px;font-weight:750;opacity:.9}

/* EXAKT aus Spielerisch lernen */
.rausch-round-mini{display:inline-block;font-size:.76rem;font-weight:800;opacity:.72;letter-spacing:.05em}
.rausch-score-focus{display:inline-flex;align-items:baseline;gap:7px;margin-top:7px;padding:5px 10px;border-radius:999px;background:#fff3c4;color:#473700;font-size:.86rem;font-weight:900;box-shadow:0 2px 8px #0003}
.rausch-score-focus strong{font-size:1.28rem;line-height:1}

.distance{margin-top:7px}
.distance-bar{width:100%;height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.25)}
#distanceBar{display:block;width:0%;height:100%;border-radius:inherit;background:#f3cd43;transition:width .12s linear}
.distance-label{display:block;margin-top:4px;font-size:.67rem;font-weight:750;opacity:.9}
#miniMapBox,.rausch-minimap-wrap{position:absolute;z-index:9;right:10px;top:10px;width:min(29vw,210px);min-width:145px;aspect-ratio:1.6;overflow:hidden;border:3px solid #fff;border-radius:13px;background:#89aa70;box-shadow:0 6px 18px #0006;pointer-events:none}
#miniMap,.rausch-minimap{width:100%;height:100%;display:block}
#controls,.wm-drive-controls{position:absolute;z-index:12;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(96vw,520px);display:grid;grid-template-columns:96px 1fr;align-items:end;justify-items:center;gap:18px;pointer-events:none}
.wm-drive-controls>*{pointer-events:auto}
.wm-pedals{display:grid;gap:9px}
.wm-pedal{width:88px;height:72px;padding:0;border:0;border-radius:17px;background:linear-gradient(#4f88aa,#234f6c);color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:950;box-shadow:0 7px 20px rgba(0,0,0,.3);cursor:pointer;touch-action:none}
.wm-pedal span{display:block;font-size:1.65rem;line-height:1}
.wm-pedal small{display:block;margin-top:3px;font-size:.7rem;font-weight:900}
.wm-pedal.active{filter:brightness(1.22);transform:translateY(2px)}
.wm-steer{position:relative;width:min(52vw,220px);height:min(52vw,220px);min-width:165px;min-height:165px;touch-action:none}
.wm-wheel{position:absolute;inset:10%;border:15px solid rgba(23,63,89,.7);border-radius:50%;background:radial-gradient(circle,rgba(23,63,89,.72) 0 17%,transparent 18%);box-shadow:0 7px 20px rgba(0,0,0,.2);pointer-events:none;transition:transform .16s ease-out}
.wm-wheel::before,.wm-wheel::after{content:"";position:absolute;left:50%;top:50%;width:45%;height:12px;background:rgba(23,63,89,.72);border-radius:20px;transform-origin:0 50%}
.wm-wheel::before{transform:rotate(25deg)}
.wm-wheel::after{transform:rotate(155deg)}
.wm-steer-btn{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:74px;height:74px;padding:0;border:3px solid #fff;border-radius:50%;background:rgba(23,63,89,.91);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:2.2rem;font-weight:950;line-height:1;box-shadow:0 5px 15px rgba(0,0,0,.33);cursor:pointer;touch-action:none}
.wm-steer-btn.left{left:0}.wm-steer-btn.right{right:0}
.wm-steer-btn.active{background:#2e789e;transform:translateY(-50%) scale(.96)}
.rausch-back{position:absolute;z-index:30;top:10px;right:230px;width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#173f59;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 4px 13px rgba(0,0,0,.25)}

/* =========================================================
   MULTIPLAYER-BUTTON
   1:1 aus Spielerisch lernen
   ========================================================= */

.wm-room-float{position:fixed;left:14px;top:14px;z-index:10050;font-family:inherit}
.wm-room-float[hidden]{display:none!important}
.wm-room-chip{border:1px solid #dbe5e9;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 3px 12px rgba(22,47,58,.12);padding:6px 10px;font-weight:800;font-size:.88rem;cursor:pointer;display:flex;gap:6px;align-items:center}
.wm-room-chip .host{font-size:.72rem;padding:2px 6px;border-radius:999px;background:#eef4f7}

.overlay{position:fixed;z-index:5000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(14,31,39,.42)}
.overlay.hidden{display:none}.start-overlay{background:rgba(238,244,247,.96)}
.solo-card{width:min(680px,100%);padding:22px;border-radius:24px;background:#fff;color:#17384e;text-align:center;box-shadow:0 12px 35px rgba(23,56,78,.13)}
.solo-card h3{margin-top:0;font-size:clamp(1.35rem,5vw,2rem)}.solo-card p{line-height:1.45}
.solo-primary,.solo-secondary{width:100%;min-height:50px;padding:14px;border:0;border-radius:14px;font-family:Arial,Helvetica,sans-serif;font-size:1rem;font-weight:850;text-align:center;cursor:pointer}
.solo-primary{background:#1f5a7a;color:#fff}.solo-secondary{margin-top:9px;background:#e8f0f4;color:#17384e}
.solo-feedback{min-height:3em;margin:14px 0;font-weight:800}
@media(max-width:520px){.rausch-map-hud{font-size:.82rem;max-width:52%;padding:8px 10px}.rausch-map-hud small{font-size:.69rem}.rausch-minimap-wrap{width:42vw;min-width:0}.wm-drive-controls{bottom:15px}.rausch-back{top:58px;right:10px;width:40px;height:40px}}
@media(max-width:430px){.wm-drive-controls{grid-template-columns:82px 1fr;gap:9px}.wm-pedal{width:78px;height:65px}.wm-steer{width:min(55vw,200px);height:min(55vw,200px)}.wm-steer-btn{width:64px;height:64px;font-size:1.9rem}.wm-wheel{border-width:13px}}
@media(max-height:620px){.wm-drive-controls{bottom:5px}.wm-pedal{width:72px;height:58px}.wm-steer{width:160px;height:160px;min-width:150px;min-height:150px}.wm-steer-btn{width:58px;height:58px;font-size:1.7rem}}
.wm-drive-controls,.wm-drive-controls *,#game button,#game canvas{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important;-webkit-tap-highlight-color:transparent!important}
.wm-pedal,.wm-steer-btn{touch-action:none!important}