:root{font-family:'Trebuchet MS',Arial,sans-serif;color:#fff7e9;--cream:#fff7e9;--yellow:#ffe16a;--green:#204b39}
*{box-sizing:border-box}
/* Handy drehen (R45): keine Schriftvergroesserung im Querformat, nichts darf die Seite breiter machen als den Schirm,
   sonst zoomt der Browser beim Zurueckdrehen heraus und alles wird winzig */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow:hidden;width:100%;height:100%;overscroll-behavior:none}
body{margin:0;background:#8ecbd1;overflow:hidden;width:100%;height:100%;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font:inherit;color:inherit;border:0;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #ffb729;outline-offset:5px}
[hidden]{display:none!important}
#game,.shade{position:fixed;inset:0;width:100%;height:100%}
.shade{pointer-events:none;background:linear-gradient(90deg,rgba(18,48,40,.96),rgba(21,52,39,.78) 26%,transparent 64%)}
body.racing .shade,body.cer .shade{background:linear-gradient(0deg,#092c3340,transparent 30%,transparent 80%,#193f4438)}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 55%,rgba(9,40,40,.30) 100%)}

/* Ladebildschirm mit Unreal-Key-Art */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:end center;padding:0 20px 12vh;background:#163d38 url(assets/keyart.jpg) center/cover no-repeat;transition:opacity .5s}
#loader.done{opacity:0;pointer-events:none}
.loader-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#163d38d0;border:1px solid #fff3;border-radius:22px;padding:22px 34px;backdrop-filter:blur(6px);min-width:min(420px,90vw)}
.loader-card b{font-size:28px;letter-spacing:2px}.loader-card small{font-size:15px;color:#d7e6d6}
.lbar{width:100%;height:10px;border-radius:10px;background:#ffffff22;overflow:hidden}.lbar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .25s}

header{position:fixed;top:0;left:0;right:0;padding:25px 36px;display:flex;justify-content:space-between;align-items:center;z-index:5}
.brand{display:flex;align-items:center;gap:11px;font-size:16px;letter-spacing:1px;font-weight:900;color:inherit;text-decoration:none}
.brand-icon{background:var(--cream);color:var(--green);border-radius:50%;width:35px;height:35px;text-align:center;font-size:29px;line-height:36px;display:inline-block}
.edition{font-size:8px;letter-spacing:2px;border-left:1px solid #fff6;padding-left:12px;width:88px;line-height:1.5}
.top-actions{display:flex;gap:8px}
.top-actions button{background:#173f3580;border:1px solid #fff5;border-radius:30px;padding:10px 15px;font-size:13px;backdrop-filter:blur(8px)}

#menu{position:fixed;inset:0;padding:125px 6vw 50px;overflow:auto}
.intro{width:500px;max-width:48vw}
.eyebrow{font-size:11px;letter-spacing:3px;font-weight:bold;color:#ffe16a;display:flex;align-items:center;gap:8px}
.eyebrow i{width:6px;height:6px;background:#ffe16a;border-radius:50%}
h1{font-size:clamp(42px,4.4vw,70px);line-height:1.01;letter-spacing:-3px;margin:24px 0 20px;font-weight:900}
h1 em{color:var(--yellow);font-style:normal}
p{font-size:15px;line-height:1.65;color:#e1eddd}
.pills{display:flex;gap:8px;margin:18px 0 24px}
.pills span{border:1px solid #ffffff40;padding:6px 11px;border-radius:20px;font-size:11px}
.setup{max-width:420px}
.step{font-size:11px;letter-spacing:1.8px;font-weight:bold;display:flex;align-items:center;gap:10px}
.step>span{color:#a3bdb1}.step small{margin-left:auto;font-size:11px;letter-spacing:0;color:#c8d8c7;font-weight:normal}
#modes{display:flex;gap:8px;margin:10px 0 18px}
.mode{flex:1;text-align:left;background:#ffffff0e;border:1px solid #ffffff2b;border-radius:12px;padding:10px 12px}
.mode b{display:block;font-size:13px}.mode span{display:block;font-size:10px;opacity:.75;margin-top:3px}
.mode.selected{background:var(--yellow);color:#203e2f;border-color:var(--yellow)}
#classes{display:flex;gap:8px;margin:-8px 0 18px}
.cls{flex:1;background:#ffffff0e;border:1px solid #ffffff2b;border-radius:12px;padding:8px 10px;text-align:center}
.cls b{display:block;font-size:14px;font-style:italic}.cls span{display:block;font-size:10px;opacity:.75}
.cls.selected{background:#ff6b4a;border-color:#ff6b4a;color:#fff}
.tips b{font-weight:900}.c-mini{color:#5ad0ff}.c-super{color:#ffa531}.c-ultra{color:#e08bff}
.swatch.gold{background:linear-gradient(135deg,#fff3b0,#ffc93c 45%,#c98a12)}
.swatch.locked{filter:grayscale(1) brightness(.6)}.swatch.locked:after{content:'🔒';font-size:16px}
#toast{position:fixed;top:24%;left:50%;transform:translate(-50%,-10px) scale(.9);padding:8px 18px;border-radius:14px;background:#1b2a3ad9;color:#fff;font-weight:900;font-size:22px;letter-spacing:1px;font-style:italic;opacity:0;pointer-events:none;z-index:4;white-space:nowrap;transition:opacity .15s,transform .15s}
#toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#toast.good{background:#2f9a57e6}#toast.bad{background:#c2413be6}
#toast.mt-mini{background:#c9921fe6}#toast.mt-super{background:#e0551ae6}#toast.mt-ultra{background:#1fa8c9e6;box-shadow:0 0 24px #5ff2ff}
#resultStars{font-size:40px;letter-spacing:6px;color:#ffffff30;display:flex;align-items:center;gap:4px}
#resultStars i{font-style:normal}#resultStars i.on{color:#ffd23f;text-shadow:0 0 14px #ffb70088}
#resultStars b{font-size:13px;letter-spacing:2px;background:#ffd23f;color:#203e2f;border-radius:8px;padding:4px 8px;margin-left:10px}
#resultStats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 12px}
#resultStats div{background:#ffffff10;border-radius:10px;padding:7px 10px;display:flex;flex-direction:column}
#resultStats span{font-size:10px;letter-spacing:1px;opacity:.7}#resultStats b{font-size:16px;font-variant-numeric:tabular-nums}
/* R38: On-Ride-Foto der Achterbahn als schraeg angepinntes Polaroid, Blitz beim Ausloesen */
#ridePhoto{margin:6px auto 12px;background:#fff8ea;padding:8px 8px 6px;border-radius:5px;box-shadow:0 10px 26px #0007;transform:rotate(-2.2deg);max-width:320px}
#ridePhoto img{display:block;width:100%;border-radius:2px;aspect-ratio:16/9;object-fit:cover;background:#223}
#ridePhoto figcaption{color:#46343a;font-weight:800;font-size:11px;letter-spacing:1.6px;text-align:center;margin-top:6px}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
#cerUnlock{color:var(--yellow);font-weight:bold;margin:4px 0}
#colors{display:flex;gap:12px;margin:12px 0 20px}
.swatch{width:44px;height:34px;border-radius:9px;background:var(--swatch);border:2px solid transparent;box-shadow:inset 0 -5px #0002;position:relative}
.swatch.selected{border-color:var(--cream);outline:2px solid #fff5;outline-offset:3px}
.swatch.selected:after{content:'✓';color:white;font-size:18px}
#tracks{display:flex;gap:8px;margin:12px 0 18px;transition:opacity .2s}
#tracks.locked{opacity:.55}#tracks.locked .track{cursor:default}
.track{flex:1;text-align:left;background:#ffffff0e;border:1px solid #ffffff2b;border-radius:12px;padding:12px 10px;transition:.2s}
.track.selected{background:var(--cream);color:var(--green);border-color:var(--cream)}
.track b{font-size:12px;display:block;line-height:1.4}.track span{display:block;font-size:10px;opacity:.7;margin-top:5px}
.track i{font-size:22px;display:block;font-style:normal;margin-bottom:6px}
.track .best{display:block;font-size:10px;margin-top:4px;color:#ffcf4d;font-variant-numeric:tabular-nums;letter-spacing:.5px;opacity:1}
.track.selected .best{color:#b07f1e}
#start,.modal button:not(.secondary),#ceremony button:not(.secondary){width:100%;border-radius:12px;background:var(--yellow);color:#203e2f;font-weight:bold;padding:18px 20px;text-align:left;font-size:16px;box-shadow:0 5px #c19a37;transition:.15s}
#start:hover,.modal button:hover{filter:brightness(1.07);transform:translateY(-2px)}
#start span{float:right;font-size:22px;line-height:18px}
.controls{font-size:10px;display:flex;gap:6px;align-items:center;white-space:nowrap;margin-top:18px;color:#b7cabc}
.tips{font-size:11px;color:#cfe0cc;margin:8px 0 0}
kbd{font-family:inherit;font-size:9px;border:1px solid #ffffff40;padding:4px;border-radius:4px}
#autoGas{background:transparent;border:1px solid #fff4;border-radius:20px;padding:6px 12px;font-size:11px;color:#e4e9d5;margin-top:8px}
#autoGas[aria-pressed=true]{background:#ffe16a;color:#234d39}
.postcard{position:fixed;right:5vw;bottom:110px;transform:rotate(-4deg);background:var(--cream);color:var(--green);padding:18px 26px;box-shadow:5px 7px #1b483842;border-radius:3px}
.postcard>span{font-size:8px;letter-spacing:2px;display:block}.postcard strong{display:block;font-size:21px;margin:10px 0 5px}.postcard small{font-size:10px}
.menu-footer{position:fixed;bottom:25px;left:6vw;right:36px;font-size:8px;letter-spacing:2px;color:#d6e2d4}.menu-footer span{float:right}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
.position{position:absolute;left:40px;top:116px;text-shadow:2px 4px #24443966}
.position strong{font-size:94px;font-style:italic;line-height:.9;color:var(--yellow)}
.position>span{font-size:22px;opacity:.8}.position small{display:block;font-size:11px;letter-spacing:2px;margin-top:10px}
.race-top{position:absolute;top:106px;left:50%;transform:translateX(-50%);display:flex;gap:36px;padding:12px 25px;border-radius:16px;background:#204b3977;backdrop-filter:blur(8px)}
.race-top small{display:block;font-size:10px;letter-spacing:2px;margin-bottom:5px}
.race-top strong{font-size:25px;font-variant-numeric:tabular-nums}.race-top em{font-size:15px;opacity:.6;font-style:normal}
#item{pointer-events:auto;position:absolute;right:36px;top:106px;width:112px;height:128px;border:3px solid #fff8;border-radius:22px;background:#24543fa6;backdrop-filter:blur(8px);box-shadow:0 4px #153b4055}
#item.ready{border-color:var(--yellow);box-shadow:0 0 18px #ffe16a88}
#itemIcon{display:block;font-size:46px;line-height:55px}#item small{font-size:9px;letter-spacing:1px;display:block;margin:5px 0}#item kbd{font-size:8px}
.speed{position:absolute;bottom:48px;right:40px;text-align:right}
.speed>strong{font-size:65px;font-style:italic}.speed>small{font-size:11px;margin-left:6px}
.spores{display:inline-flex;align-items:baseline;gap:4px;padding:4px 12px;border-radius:20px;background:#204b3999;margin-bottom:4px;font-variant-numeric:tabular-nums}
.spores i{font-style:normal;color:#fff27a}.spores b{font-size:20px}.spores small{font-size:11px;opacity:.7}
.spores.full{background:#ffe16a;color:#23452f}.spores.full i{color:#c36b00}
.driftbar{width:180px;height:7px;background:#24493980;border-radius:6px;overflow:hidden;margin:0 0 8px auto}.driftbar i{display:block;width:0;height:100%;background:#73dcff}
.speed>span{font-size:9px;letter-spacing:1.3px}
#map{position:absolute;bottom:37px;left:30px;width:180px;height:144px;filter:drop-shadow(0 3px 3px #0003)}
#raceTip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;text-shadow:1px 1px #000}
#message{position:fixed;top:36%;left:50%;transform:translate(-50%,-50%);font-size:72px;font-weight:900;font-style:italic;color:var(--yellow);text-shadow:0 5px #205237;pointer-events:none;white-space:nowrap;z-index:4}

/* Modals, Grand Prix, Siegerehrung */
.modal{position:fixed;inset:0;background:#183f41a0;backdrop-filter:blur(10px);display:grid;place-items:center;z-index:10;padding:20px}
.modal>div,#ceremony>div{background:#214d39;border:1px solid #fff3;border-radius:24px;padding:32px;width:460px;max-width:95vw;max-height:92vh;overflow:auto}
.modal h2,#ceremony h2{font-size:34px;letter-spacing:-1px;margin:14px 0}
.modal button,#ceremony button{margin-top:14px}
.secondary{display:block;background:transparent;width:100%;padding:12px;font-size:13px}
.modal ol,#ceremony ol{padding:0;list-style:none;margin:10px 0}
.modal li,#ceremony li{display:flex;padding:7px 0;border-bottom:1px solid #fff2;font-size:14px;gap:12px}
.modal li span:last-child,#ceremony li span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.modal li .gain{margin-left:auto;color:#9fe39a;font-variant-numeric:tabular-nums}.modal li .gain+span{margin-left:14px!important;min-width:52px;text-align:right}
.modal li.me,#ceremony li.me{color:var(--yellow)}
#ceremony{position:fixed;right:28px;bottom:28px;z-index:10}
#ceremony>div{width:400px;background:#214d39e6;backdrop-filter:blur(8px)}

/* Touch-Steuerung: Grundlayout (Daumen links lenken, rechts Gas/Drift/Item/Bremse) */
#touch{display:none;position:fixed;left:0;right:0;bottom:0;padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:6}
@media(pointer:coarse){body.racing #touch{display:flex}}
#touch button{pointer-events:auto;touch-action:none;background:#214d39a8;border:2px solid #fffc;border-radius:22px;font-weight:bold;color:#fff;backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;transition:transform .06s,background .06s}
#touch button.down{transform:scale(.94);background:#ffe16acc;color:#203e2f}
#touch .steer{display:flex;gap:12px}
#touch .steer button{width:92px;height:118px;font-size:38px}
#touch .act{display:grid;grid-template-columns:auto auto;grid-template-areas:"item brake" "drift gas";gap:12px;align-items:end;justify-items:end}
.t-item{grid-area:item;width:92px;height:92px;border-radius:50%!important;font-size:40px}
.t-item.ready{background:#ffe16ad9!important;color:#203e2f!important;box-shadow:0 0 22px #ffe16aaa}
.t-brake{grid-area:brake;width:112px;height:64px;font-size:16px;background:#6b2f2fa8!important}
.t-drift{grid-area:drift;width:92px;height:118px;font-size:18px;background:#2a5d7aa8!important}.t-drift small{font-size:11px;opacity:.85;margin-top:4px}
.t-gas{grid-area:gas;width:112px;height:130px;font-size:24px;background:#2f7a4fc0!important}

#error{position:fixed;inset:20%;background:#214d39;padding:40px;z-index:60}

@media(max-height:790px) and (min-width:761px){#menu{padding-top:96px}h1{font-size:50px;margin:14px 0}.pills{margin:10px 0 14px}.intro>p{margin:8px 0}#colors{margin-bottom:14px}.track{padding:8px 10px}.track i{font-size:16px}.menu-footer{bottom:15px}#modes{margin-bottom:12px}}

/* Schmale Bildschirme / Hochformat: alles groesser (Feedback: Schrift, Menue und GUI waren zu klein) */
@media(max-width:760px){
 header{padding:12px 14px}
 .brand{font-size:18px;gap:9px}.edition{display:none}
 .brand-icon{width:42px;height:42px;line-height:43px;font-size:32px}
 .top-actions{gap:10px}.top-actions button{padding:14px 18px;font-size:18px;border-radius:36px}
 #menu{padding:92px 18px 56px;background:linear-gradient(90deg,#163d38ee,#163d38c4 65%,#163d3888)}
 .intro{width:100%;max-width:600px}
 .eyebrow{font-size:16px}
 h1{font-size:clamp(52px,13.5vw,72px);margin:16px 0 12px;letter-spacing:-2px}h1 br{display:none}
 .intro>p{font-size:20px;line-height:1.55}
 .pills{margin:14px 0 22px;flex-wrap:wrap;gap:10px}.pills span{padding:10px 16px;font-size:16px;border-radius:26px}
 .setup{max-width:none}
 .step{font-size:17px;letter-spacing:2px;margin-top:6px}.step small{font-size:16px}
 #modes{gap:10px;margin:12px 0 20px}.mode{padding:16px 14px;border-radius:16px}.mode b{font-size:19px}.mode span{font-size:14px}
 #classes{gap:10px;margin:-10px 0 20px}.cls{padding:12px 8px;border-radius:16px}.cls b{font-size:19px}.cls span{font-size:14px}
 #toast{font-size:24px;top:22%}
 #resultStats span{font-size:13px}#resultStats b{font-size:19px}
 #colors{gap:12px;margin:14px 0 22px;flex-wrap:wrap}.swatch{width:62px;height:56px;border-radius:14px}.swatch.selected:after{font-size:28px}
 #tracks{gap:10px;margin:14px 0 22px}.track{padding:18px 12px;border-radius:16px}.track b{font-size:18px}.track span{font-size:14px}.track .best{font-size:13px}.track i{font-size:32px}
 #start,.modal button:not(.secondary),#ceremony button:not(.secondary){font-size:22px;padding:24px 22px;border-radius:18px}
 #start span{font-size:28px;line-height:22px}
 .controls{font-size:13px}.tips{font-size:16px;line-height:1.5}kbd{font-size:13px;padding:5px 7px}
 #autoGas{font-size:17px;padding:14px 20px}
 .postcard,.menu-footer{display:none}
 .loader-card b{font-size:30px}.loader-card small{font-size:17px}
 .modal>div{padding:28px 22px;width:560px}.modal h2,#ceremony h2{font-size:34px}
 .secondary{padding:16px;font-size:18px}
 .modal li,#ceremony li{font-size:19px;padding:11px 0}
 #ceremony{left:12px;right:12px;bottom:12px}#ceremony>div{width:auto;padding:22px}
 #message{font-size:68px}
}

/* Hochformat mit Touch: HUD oben kompakt aber gross lesbar, Steuerung als Daumen-Cluster unten */
@media(pointer:coarse) and (orientation:portrait){
 #raceTip,.controls,#item{display:none!important}
 header{padding:10px 12px}
 .position{left:14px;top:78px}.position strong{font-size:80px}.position>span{font-size:24px}.position small{font-size:14px}
 .race-top{top:80px;left:auto;right:12px;transform:none;gap:16px;padding:10px 16px;border-radius:18px}
 .race-top small{font-size:13px}.race-top strong{font-size:30px}.race-top em{font-size:18px}
 .speed{right:12px;bottom:calc(max(272px,34vh) + env(safe-area-inset-bottom,0px))}.speed>strong{font-size:50px}.speed>small{font-size:14px}.speed>span{display:none}
 .spores{padding:3px 10px}.spores b{font-size:22px}.spores small{font-size:13px}.spores i{font-size:18px}
 .driftbar{width:150px;height:9px;margin-bottom:0}
 #map{left:8px;bottom:calc(max(270px,34vh) + env(safe-area-inset-bottom,0px));width:120px;height:96px}
 #message{font-size:58px;top:32%}
 .top-actions{gap:8px}.top-actions button{padding:12px 14px;font-size:16px}.top-actions .lbl{display:none}
 #touch{padding:0 10px calc(12px + env(safe-area-inset-bottom,0px))}
 #touch .steer{gap:10px}
 #touch .steer button{width:clamp(72px,20vw,100px);height:clamp(124px,17vh,150px);font-size:44px;border-radius:26px}
 #touch .act{gap:10px}
 .t-item{width:clamp(70px,19vw,96px);height:clamp(70px,19vw,96px);font-size:36px}
 .t-brake{width:clamp(82px,23vw,116px);height:66px;font-size:16px}
 .t-drift{width:clamp(70px,19vw,96px);height:clamp(124px,17vh,150px);font-size:18px}
 .t-gas{width:clamp(82px,23vw,116px);height:clamp(140px,19vh,168px);font-size:26px}
 #testPanel{display:none!important}
}

/* Querformat mit Touch: HUD an die Raender, Steuerung klein und halbtransparent in die Ecken, Mitte frei */
@media(pointer:coarse) and (orientation:landscape){
 #raceTip,.controls,#item,#map{display:none!important}
 header{padding:6px 12px}.brand-name,.edition{display:none}
 .brand-icon{width:32px;height:32px;line-height:33px;font-size:24px}
 .top-actions button{padding:8px 12px;font-size:14px}
 .top-actions .lbl{display:none}
 .position{left:12px;top:44px}.position strong{font-size:52px}.position>span{font-size:16px}.position small{display:none}
 .race-top{top:8px;gap:18px;padding:6px 14px;border-radius:12px;background:#204b3966}
 .race-top small{font-size:10px;margin-bottom:1px}.race-top strong{font-size:20px}.race-top em{font-size:13px}
 .speed{right:auto;left:50%;transform:translateX(-50%);bottom:8px;text-align:center}
 .speed>strong{font-size:34px}.speed>small{font-size:11px}.speed>span,.driftbar{display:none}
 .spores{padding:2px 10px;margin:0 8px 0 0}.spores b{font-size:16px}
 #message{font-size:44px;top:30%}
 #touch{padding:0 10px calc(8px + env(safe-area-inset-bottom,0px))}
 #touch button{background:#214d3973;border-color:#ffffffa6}
 #touch .steer button{width:78px;height:86px;font-size:32px}
 #touch .act{grid-template-columns:auto auto auto;grid-template-areas:"item drift gas" "brake drift gas";gap:8px}
 .t-item{width:64px;height:64px;font-size:28px}
 .t-brake{width:64px;height:40px;font-size:11px}
 .t-drift{width:74px;height:112px;font-size:14px}
 .t-gas{width:86px;height:112px;font-size:18px}
 #menu{padding-top:62px}
 #ceremony{right:10px;bottom:10px;left:auto}#ceremony>div{width:340px;padding:14px;max-height:80vh}#ceremony h2{font-size:22px;margin:6px 0}#ceremony li{font-size:14px;padding:5px 0}
 .modal>div{max-height:94vh;padding:18px;width:560px}.modal h2{font-size:24px;margin:6px 0}.modal li{font-size:14px;padding:5px 0}
 #resultStars{font-size:28px}#resultStats{grid-template-columns:1fr 1fr 1fr}#resultStats b{font-size:14px}
 #toast{top:20%;font-size:18px}
}

/* Zeitfahren, Speedlines */
#modes{flex-wrap:wrap}.mode{min-width:120px}
#classes.locked{opacity:.4;pointer-events:none}
#hud.tt .position{display:none}
#ttDelta.ahead{color:#7dffa8}#ttDelta.behind{color:#ff8a7a}
/* Die drehende Flaeche ist groesser als der Schirm - sie steckt in einem Rahmen mit overflow:hidden, damit nichts
   ueber den Rand ragt (iOS zoomte beim Drehen des Handys auf die Ueberbreite heraus, R45) */
#speedlines{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s}
#speedlines:before{content:'';position:absolute;inset:-12%;background:repeating-conic-gradient(from 0deg at 50% 52%,#fff0 0deg 4.4deg,#ffffff40 4.7deg,#fff0 5.2deg 9deg);-webkit-mask:radial-gradient(ellipse 60% 55% at 50% 52%,transparent 45%,#000 95%);mask:radial-gradient(ellipse 60% 55% at 50% 52%,transparent 45%,#000 95%);animation:speedspin .16s steps(2) infinite}
body.boosting #speedlines{opacity:.9}
@keyframes speedspin{50%{transform:rotate(2.2deg)}}
@media(prefers-reduced-motion:reduce){#speedlines:before{animation:none}}
/* Vier Strecken: Raster statt Zeile */
#tracks{display:grid;grid-template-columns:repeat(4,1fr)}
.track{padding:10px 8px}.track b{font-size:11px}.track span{font-size:9px}
@media(max-width:760px){#tracks{grid-template-columns:repeat(2,1fr)}.track b{font-size:18px}.track span{font-size:14px}}
@media(pointer:coarse) and (orientation:landscape){#tracks{grid-template-columns:repeat(4,1fr)}}
/* Touch v3: rechte Daumenspalte = DRIFT direkt ueber GAS (Daumen gleitet hoch, Drift gibt selbst Gas); links daneben Item & Bremse */
#touch .act{grid-template-columns:auto auto;grid-template-areas:"item drift" "brake gas";justify-items:center;align-items:end}
.t-drift small{font-size:10px;letter-spacing:.5px}
body.autogas #touch .act{grid-template-areas:"item drift" "brake drift"}
body.autogas .t-gas{display:none!important}
@media(pointer:coarse) and (orientation:portrait){
 #touch .act{gap:10px}
 .t-item{width:clamp(66px,18vw,88px);height:clamp(66px,18vw,88px)}
 .t-brake{width:clamp(66px,18vw,88px);height:58px;font-size:14px}
 .t-drift{width:clamp(100px,28vw,132px);height:clamp(92px,12vh,112px);font-size:21px;border-radius:26px!important}
 .t-gas{width:clamp(100px,28vw,132px);height:clamp(112px,14vh,134px);font-size:26px}
 body.autogas .t-drift{height:clamp(214px,27vh,256px);font-size:24px}
}
@media(pointer:coarse) and (orientation:landscape){
 #touch .act{gap:8px}
 .t-item{width:58px;height:58px;font-size:26px}
 .t-brake{width:62px;height:44px;font-size:11px}
 .t-drift{width:108px;height:80px;font-size:16px}
 .t-gas{width:108px;height:96px;font-size:18px}
 body.autogas .t-drift{height:184px;font-size:18px}
}
/* Strecke laedt (Shader werden im Hintergrund kompiliert) */
#trackLoading{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:8;display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:30px;background:#10202acc;font-weight:bold;letter-spacing:1px;pointer-events:none}
#trackLoading i{width:16px;height:16px;border-radius:50%;border:3px solid #fff4;border-top-color:var(--yellow);animation:tlspin .8s linear infinite}
@keyframes tlspin{to{transform:rotate(360deg)}}
/* ================= Menue v3: minimal ================= */
.edition{display:none}
body:not(.racing):not(.cer) .shade{background:linear-gradient(90deg,#08140fd9 0%,#08140f8c 30%,transparent 58%)}
#menu{padding:0;display:flex;align-items:flex-end;overflow:auto}
.menu-panel{margin:0 0 calc(34px + env(safe-area-inset-bottom,0px)) clamp(16px,5vw,64px);width:min(430px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px}
.menu-title{margin:0 0 6px;font-size:clamp(40px,4.4vw,60px);line-height:.9;letter-spacing:-2px;font-weight:900;text-shadow:0 4px 18px #0006}
.menu-title em{display:block;color:var(--yellow);font-style:normal}
#menu .seg{display:flex;gap:4px;margin:0;padding:4px;border-radius:14px;background:#08140fb3;backdrop-filter:blur(8px)}
#menu .seg button{flex:1;min-width:0;margin:0;padding:10px 6px;border:0;border-radius:10px;background:transparent;text-align:center;color:#dfe9dd}
#menu .seg button b{font-size:14px;font-style:normal}#menu .seg button span{display:none}
#menu .seg button.selected{background:var(--yellow);color:#16301f}
#menu #classes.locked{opacity:.35}
#menu #tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}
#menu #tracks .track{margin:0;padding:10px 4px 8px;border:2px solid transparent;border-radius:12px;background:#08140fb3;backdrop-filter:blur(8px);text-align:center;color:#eef4ec}
#menu #tracks .track i{font-size:22px;margin:0 0 4px}#menu #tracks .track b{font-size:11px;line-height:1.2}
#menu #tracks .track .best{font-size:10px;margin-top:3px;color:#ffe16acc}
#menu #tracks .track.selected{border-color:var(--yellow);background:#08140fe0;color:#fff}
#menu #tracks.locked .track{opacity:.8}
#menu #colors{display:flex;gap:10px;margin:2px 0}
#menu #colors .swatch{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 -4px #0003;outline:0}
#menu #colors .swatch.selected{border:3px solid #fff;transform:scale(1.12)}#menu #colors .swatch.selected:after{content:''}
#menu #start{margin:4px 0 0;padding:17px 20px;border-radius:14px;font-size:18px;text-align:left}
.menu-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:18px;color:#cddbcb}
.menu-meta small{font-size:13px;letter-spacing:.5px}
#menu .controls{margin:0;font-size:11px;color:#b9c9b8}
#autoGas{display:none}
@media(pointer:coarse){#menu .controls{display:none}#autoGas{display:inline-block;margin:0}}
@media(max-width:760px){
 body:not(.racing):not(.cer) .shade{background:linear-gradient(0deg,#08140fe6 0%,#08140f99 45%,transparent 75%)}
 .menu-panel{margin:0 16px calc(18px + env(safe-area-inset-bottom,0px));width:auto;flex:1;gap:12px}
 .menu-title{font-size:clamp(44px,13vw,62px)}
 #menu .seg button{padding:14px 4px}#menu .seg button b{font-size:17px}
 #menu #tracks{grid-template-columns:repeat(2,1fr);gap:8px}
 #menu #tracks .track{padding:12px 6px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;align-items:center}
 #menu #tracks .track i{grid-row:span 2;font-size:28px;margin:0}#menu #tracks .track b{font-size:16px}#menu #tracks .track .best{font-size:13px;margin:0}
 #menu #colors{gap:14px;justify-content:center}#menu #colors .swatch{width:42px;height:42px}
 #menu #start{font-size:22px;padding:20px}
 .menu-meta small{font-size:15px}
 #autoGas{font-size:15px;padding:10px 16px}
}
@media(pointer:coarse) and (orientation:landscape){
 .menu-panel{margin-bottom:10px;gap:7px;width:min(520px,calc(100vw - 32px))}
 .menu-title{font-size:34px;margin:0}.menu-title em{display:inline}
 #menu .seg button{padding:8px 4px}#menu .seg button b{font-size:14px}
 #menu #tracks{grid-template-columns:repeat(4,1fr)}#menu #tracks .track{padding:6px 4px;display:block;text-align:center}#menu #tracks .track i{font-size:18px}#menu #tracks .track b{font-size:12px}
 #menu #colors .swatch{width:30px;height:30px}#menu #start{padding:12px 16px;font-size:17px}
}
/* ================= Menue v4: weniger Formular, mehr Spielhalle ================= */
:root{--gold:#ffd45c;--gold2:#ffb02e;--ink:#12261c}
body,button,input,kbd,select{font-family:'Baloo 2','Trebuchet MS',Arial,sans-serif}
body:not(.racing):not(.cer) .shade{background:linear-gradient(90deg,#06120dee 0%,#06120db8 34%,#06120d26 62%,transparent 78%)}
.menu-panel{width:min(468px,calc(100vw - 32px));gap:11px;padding:20px 20px 18px;border-radius:26px;
 background:linear-gradient(165deg,#12291ee6,#07140eF2);border:1px solid #ffffff1f;
 box-shadow:0 26px 60px -18px #000c,0 2px 0 #ffffff1a inset,0 -30px 60px -40px var(--gold) inset;backdrop-filter:blur(16px) saturate(1.2)}
.menu-brand{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.mb-icon{width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:27px;border-radius:17px;
 background:radial-gradient(circle at 32% 28%,#ffffff30,#ffffff08 60%),linear-gradient(150deg,#ff5f57,#c9302a);
 box-shadow:0 6px 16px -6px #000a,0 1px 0 #ffffff55 inset;transform:rotate(-6deg)}
.menu-title{margin:0;font-size:clamp(31px,3.3vw,41px);line-height:.94;letter-spacing:-.5px;font-weight:800;
 background:linear-gradient(180deg,#fffdf6 38%,#ffd45c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px #0007)}
.menu-title em{display:inline;color:transparent;font-style:normal}
.menu-tag{margin:1px 0 0;font-size:12.5px;letter-spacing:.3px;color:#a9c6b3;font-weight:500}
#menu .seg{gap:3px;padding:4px;border-radius:15px;background:#05100bc7;border:1px solid #ffffff12;box-shadow:0 2px 10px #0004 inset}
#menu .seg button{padding:9px 6px;border-radius:11px;color:#b9d2c1;font-weight:700;transition:.16s}
#menu .seg button:hover{color:#fff;background:#ffffff12}
#menu .seg button.selected{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#2a1a06;box-shadow:0 3px 10px -3px #ffb02e99,0 1px 0 #fff6 inset}
#menu #tracks{grid-template-columns:repeat(2,1fr);gap:8px}
#menu #tracks .track{position:relative;overflow:hidden;padding:0;aspect-ratio:16/8.4;border-radius:15px;border:1.5px solid #ffffff1a;
 background:linear-gradient(158deg,var(--c1,#1d4030),var(--c2,#07140e));box-shadow:0 8px 18px -12px #000b;transition:transform .16s,border-color .16s,box-shadow .16s}
#menu #tracks .track canvas{position:absolute;left:0;top:-4%;width:100%;height:104%;opacity:.92}
#menu #tracks .track i{position:absolute;left:8px;top:6px;z-index:2;font-size:15px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
 background:#06120db3;border:1px solid #ffffff24;margin:0}
#menu #tracks .track b{position:absolute;left:9px;right:9px;bottom:16px;z-index:2;text-align:left;font-size:13.5px;font-weight:700;line-height:1.1;
 text-shadow:0 2px 6px #000b,0 0 14px #0009}
#menu #tracks .track .best{position:absolute;left:9px;right:9px;bottom:4px;z-index:2;text-align:left;font-size:10.5px;margin:0;color:var(--acc,#ffe16a);
 letter-spacing:.3px;text-shadow:0 1px 4px #000c}
#menu #tracks .track:after{content:'';position:absolute;inset:auto 0 0 0;height:56%;z-index:1;background:linear-gradient(0deg,#04100ce8,#04100c00)}
#menu #tracks .track:hover{transform:translateY(-2px)}
#menu #tracks .track.selected{border-color:var(--acc,var(--gold));box-shadow:0 0 0 1px var(--acc,var(--gold)) inset,0 10px 26px -12px var(--acc,#ffd45c);background:linear-gradient(158deg,var(--c1,#1d4030),var(--c2,#07140e))}
#menu #tracks .track.selected canvas{opacity:1}
.menu-picks{display:flex;gap:14px;align-items:flex-end;margin-top:1px}
.pick{display:flex;flex-direction:column;gap:5px}
.pick>small{font-size:9.5px;letter-spacing:1.6px;color:#8fae9b;font-weight:700}
#menu #drivers{display:flex;gap:6px}
#menu #drivers button{width:40px;height:40px;margin:0;padding:0;border-radius:13px;font-size:19px;line-height:1;background:#05100bc7;border:1.5px solid #ffffff1a;transition:.15s}
#menu #drivers button:hover{transform:translateY(-2px)}
#menu #drivers button.selected{background:linear-gradient(180deg,#ffffff1f,#ffffff08);border-color:var(--gold);box-shadow:0 0 0 3px #ffd45c33,0 6px 14px -8px #ffd45c}
#menu #colors{display:flex;gap:7px;margin:0}
#menu #colors .swatch{width:26px;height:26px;border:1.5px solid #ffffff22;box-shadow:inset 0 -5px 8px -4px #0007,inset 0 4px 6px -3px #fff5}
#menu #colors .swatch.selected{border:2px solid #fff;transform:scale(1.14);box-shadow:0 0 0 3px #ffffff2e,inset 0 -5px 8px -4px #0007}
#menu #start{position:relative;overflow:hidden;margin:6px 0 0;padding:15px 18px;border-radius:16px;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:space-between;
 background:linear-gradient(180deg,#ffe98a,var(--gold2));color:#2a1a06;box-shadow:0 6px 0 -1px #c2820f,0 14px 26px -14px #ffb02e}
#menu #start b{font-weight:800}
#menu #start span{float:none;font-size:21px;line-height:1;transition:transform .16s}
#menu #start:hover span{transform:translateX(4px)}
#menu #start:after{content:'';position:absolute;top:-60%;left:-30%;width:28%;height:220%;transform:rotate(18deg);
 background:linear-gradient(90deg,#fff0,#ffffffb0,#fff0);animation:shine 4.2s ease-in-out infinite}
@keyframes shine{0%,72%{left:-35%}92%,100%{left:125%}}
.menu-meta{padding-top:2px;border-top:1px solid #ffffff10;margin-top:2px}
.menu-meta small{color:#ffe16a}
#menu .controls{color:#87a692}
@media(max-width:760px){
 .menu-panel{margin:0 12px calc(12px + env(safe-area-inset-bottom,0px));padding:16px 16px 14px;border-radius:22px;gap:10px}
 .menu-title{font-size:clamp(30px,8.4vw,40px)}.mb-icon{width:46px;height:46px;font-size:24px}
 #menu #tracks{grid-template-columns:repeat(2,1fr);gap:8px}
 #menu #tracks .track{aspect-ratio:16/9;display:block;padding:0}
 #menu #tracks .track i{grid-row:auto;font-size:15px;margin:0}
 #menu #tracks .track b{font-size:14px}#menu #tracks .track .best{font-size:11px}
 #menu #colors .swatch{width:30px;height:30px}#menu #drivers button{width:44px;height:44px;font-size:21px}
 #menu #start{font-size:19px;padding:16px 18px}
}
@media(pointer:coarse) and (orientation:landscape){
 .menu-panel{width:min(540px,calc(100vw - 24px));padding:12px 14px 11px;gap:7px;border-radius:18px}
 .menu-brand{gap:9px;margin:0}.mb-icon{width:36px;height:36px;font-size:18px;border-radius:12px}
 .menu-title{font-size:26px}.menu-tag{display:none}
 #menu .seg button{padding:7px 4px}
 #menu #tracks{grid-template-columns:repeat(4,1fr);gap:6px}
 #menu #tracks .track{aspect-ratio:16/11}#menu #tracks .track b{font-size:11px;bottom:13px}#menu #tracks .track .best{font-size:9.5px}
 #menu #drivers button{width:34px;height:34px;font-size:17px}
 #menu #colors .swatch{width:24px;height:24px}
 #menu #start{padding:11px 16px;font-size:16px}
 .menu-meta{display:none}
}
/* Panel kompakt halten: der Titel steht im Panel, die Kopfzeilen-Marke waere doppelt */
body:not(.racing):not(.cer) header .brand{opacity:0;pointer-events:none}
.menu-panel{max-height:calc(100vh - 56px);overflow:auto;scrollbar-width:none}
.menu-panel::-webkit-scrollbar{display:none}
#menu #tracks .track{aspect-ratio:16/9.4}
@media(min-width:761px) and (max-height:820px){
 .menu-panel{margin-bottom:calc(20px + env(safe-area-inset-bottom,0px));padding:15px 17px 13px;gap:8px;border-radius:22px}
 .menu-brand{gap:10px}.mb-icon{width:42px;height:42px;font-size:22px;border-radius:14px}
 .menu-title{font-size:30px}.menu-tag{font-size:11.5px}
 #menu .seg button{padding:7px 6px}#menu .seg button b{font-size:13px}
 #menu #tracks .track{aspect-ratio:16/10.4}#menu #tracks .track b{font-size:12.5px;bottom:15px}
 #menu #drivers button{width:36px;height:36px;font-size:17px}
 #menu #colors .swatch{width:24px;height:24px}
 #menu #start{padding:12px 17px;font-size:17px;margin-top:3px}
 .menu-meta{font-size:11px}
}
.menu-picks{align-items:flex-start}
@media(max-width:430px){
 .menu-picks{gap:10px}
 #menu #drivers{gap:5px}#menu #drivers button{width:40px;height:40px;font-size:19px}
 #menu #colors{gap:6px}#menu #colors .swatch{width:26px;height:26px}
}
/* Fuenfte Strecke: die letzte Karte nimmt die ganze Breite */
#menu #tracks .track:nth-child(5):last-child{grid-column:span 2;aspect-ratio:16/4.6}
#menu #tracks .track:nth-child(5):last-child canvas{top:-30%;height:160%}
@media(pointer:coarse) and (orientation:landscape){
 #menu #tracks{grid-template-columns:repeat(5,1fr)}
 #menu #tracks .track:nth-child(5):last-child{grid-column:span 1;aspect-ratio:16/11}
 #menu #tracks .track:nth-child(5):last-child canvas{top:-4%;height:104%}
}

/* ---- Fahrer-Vorschau (gerendert) und Item-Fenster v2 ---- */
#menu #drivers button{overflow:hidden;padding:0;background:radial-gradient(circle at 50% 22%,#ffffff1c,#ffffff05 62%),#05100bc7}
#menu #drivers button canvas{width:100%;height:100%;display:block;pointer-events:none}
#menu #drivers button.selected canvas{filter:drop-shadow(0 2px 6px #ffd45c55)}
#item,#titem{--it:#cfe0d4}
#item #itemIcon,#titem #titemIcon{display:grid;place-items:center;position:relative}
#item #itemIcon svg,#titem #titemIcon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px #0006)}
#item #itemIcon .cnt,#titem #titemIcon .cnt{position:absolute;right:-2px;bottom:-4px;font-size:13px;font-weight:800;color:#2a1a06;
 background:var(--it);border-radius:8px;padding:0 5px;box-shadow:0 2px 6px #0007}
#item{background:linear-gradient(180deg,#0d1c15e0,#07120de8);border:1.5px solid #ffffff1a;box-shadow:0 10px 26px -14px #000c}
#item.ready{border-color:var(--it);box-shadow:0 0 0 1px var(--it) inset,0 10px 30px -12px var(--it)}
#item.ready #itemIcon{animation:itempop .32s ease-out}
#titem.ready{box-shadow:0 0 0 3px var(--it),0 10px 26px -10px var(--it)}
#item.spin #itemIcon,#titem.spin #titemIcon{animation:itemspin .16s linear infinite}
@keyframes itempop{0%{transform:scale(.6) rotate(-14deg)}60%{transform:scale(1.14) rotate(4deg)}100%{transform:scale(1)}}
@keyframes itemspin{0%{transform:translateY(-6%) scale(.94)}50%{transform:translateY(6%) scale(1.04)}100%{transform:translateY(-6%) scale(.94)}}
#item #itemIcon{width:64px;height:64px;margin:8px auto 2px;font-size:0;line-height:0}
#titem #titemIcon{width:58px;height:58px;font-size:0;line-height:0}
@media(max-width:760px){#item #itemIcon{width:52px;height:52px;margin:6px auto 0}}
@media(min-width:761px) and (max-height:830px){
 #menu #tracks .track{aspect-ratio:16/9}
 #menu #tracks .track:nth-child(5):last-child{aspect-ratio:16/4.2}
 #menu #tracks .track:nth-child(5):last-child canvas{top:-8%;height:116%}
 .menu-meta{display:none}.menu-panel{gap:7px}
}
@media(min-width:761px) and (max-height:760px){
 .menu-tag{display:none}.menu-title{font-size:27px}.mb-icon{width:38px;height:38px;font-size:20px}
 #menu #tracks .track:nth-child(5):last-child{aspect-ratio:16/3.2}
 #menu #tracks .track b{font-size:12px;bottom:13px}#menu #tracks .track .best{font-size:10px}
 #menu #drivers button{width:34px;height:34px}#menu #colors .swatch{width:22px;height:22px}
 #menu #start{padding:10px 16px;font-size:16px}
}
/* Grafikstufe im Menue */
#menu #gfx,#assist{display:flex;gap:4px}
#menu #gfx button,#assist button{margin:0;padding:6px 9px;border-radius:10px;font-size:11px;font-weight:700;color:#b9d2c1;background:#05100bc7;border:1.5px solid #ffffff14}
#menu #gfx button.selected,#assist button.selected{background:linear-gradient(180deg,#ffffff1f,#ffffff08);border-color:var(--gold);color:#fff}
.gfx-pick{margin-left:auto}
@media(max-width:430px){.gfx-pick{margin-left:0;width:100%}#menu #gfx button,#assist button{padding:7px 10px;font-size:12px}}
/* Item-Vorschau als gerendertes Bild */
#item #itemIcon img,#titem #titemIcon img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 3px 6px #0007)}

/* ---- Menue v5: passt auf den Schirm, drei Karten je Reihe, Medaille auf der Karte ---- */
/* Das Panel war bei niedrigen Fenstern unten abgeschnitten - Fahrerwahl und Startknopf lagen
   ausserhalb des Bildes. Jetzt begrenzt es seine Hoehe und die Streckenliste scrollt zur Not. */
.menu-panel{max-height:calc(100vh - 28px)}
#menu #tracks{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff2e transparent}
#menu #tracks::-webkit-scrollbar{width:6px}
#menu #tracks::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:3px}

@media(min-width:980px){
 .menu-panel{width:min(742px,calc(100vw - 48px))}
 #menu #tracks{grid-template-columns:repeat(3,1fr);gap:9px}
 #menu #tracks .track{aspect-ratio:16/10.6}
 #menu #tracks .track b{font-size:14px;bottom:26px}
 .menu-picks{gap:20px}
}

/* Kurzbeschreibung unter dem Namen */
#menu #tracks .track u{position:absolute;left:9px;right:9px;bottom:14px;z-index:2;text-align:left;font-size:10px;font-weight:600;
 text-decoration:none;letter-spacing:.2px;color:#d6e6da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.82}
@media(max-width:979px){#menu #tracks .track u{display:none}}

/* Medaille oben rechts */
#menu #tracks .track em.medal{position:absolute;top:6px;right:7px;z-index:3;font-size:15px;font-style:normal;line-height:1;
 filter:drop-shadow(0 2px 3px #0009)}
#menu #tracks .track[data-medal="3"] em.medal{display:none}

/* Auswahl etwas deutlicher, Hover ruhiger */
#menu #tracks .track{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
#menu #tracks .track.selected{transform:translateY(-1px)}

/* ============================================================================================
   R40: Menue und Schrift im Arcade-Stil - fette kursive Display-Schrift mit dicker
   dunkler Kontur und farbigem Schlagschatten, helle Karten, schraege Knoepfe, weiss-blaue Rauten (R54 Wiesn Kart).
   Steht am Ende und ueberstimmt die aelteren Schichten (body-Praefix fuer die Spezifitaet).
   ============================================================================================ */
:root{--wk-ink:#14264a;--wk-red:#d8262e;--wk-red2:#a3141c;--wk-yellow:#ffc83a;--wk-orange:#ff7a1a;--wk-blue:#1f78d1;--wk-sky:#62c9ff;
 --wk-font:'Rubik','Baloo 2','Trebuchet MS',Arial,sans-serif;
 --wk-check:conic-gradient(from 45deg,var(--wk-blue) 25%,#fff 0 50%,var(--wk-blue) 0 75%,#fff 0) 0 0/14px 14px}
body .menu-title,body .position strong,body #toast{font-family:var(--wk-font);font-style:italic;font-weight:900;paint-order:stroke fill}
/* Titel: weiss mit dicker Kontur, "Kart" gold, roter Versatzschatten */
body .menu-title{font-size:clamp(46px,5vw,68px);letter-spacing:-1px;line-height:.92;color:#fff;-webkit-text-stroke:9px var(--wk-ink);text-shadow:0 6px 0 var(--wk-red),0 10px 18px #0007;transform:skewX(-6deg);transform-origin:left bottom}
body .menu-title em{color:var(--wk-yellow);font-style:italic}
body .menu-tag{font-family:var(--wk-font);font-style:italic;font-weight:800;color:#fff;letter-spacing:.3px;-webkit-text-stroke:4px var(--wk-ink);paint-order:stroke fill;font-size:15px;margin-top:4px}
/* Helle Karte mit Zielflaggen-Streifen */
body #menu .menu-panel{position:relative;padding:22px 18px 18px;border-radius:26px;background:linear-gradient(180deg,#ffffffef,#e7f3ffe8);box-shadow:0 8px 0 #15133a40,0 24px 60px -20px #000a;color:var(--wk-ink)}
body #menu .menu-panel:before{content:'';position:absolute;left:18px;right:18px;top:-9px;height:14px;border-radius:7px;background:var(--wk-check);box-shadow:0 3px 0 #15133a55}
body #menu .menu-brand{margin:-6px 0 2px}
/* Segmente (Modus, Klasse, Lenkhilfe, Grafik): schraege Knoepfe */
body #menu .seg,body #menu #gfx,body #menu #assist{background:#15133a14;border-radius:16px;padding:5px;gap:6px;backdrop-filter:none}
body #menu .seg button,body #menu #gfx button,body #menu #assist button{transform:skewX(-10deg);border-radius:11px;background:#fff;color:var(--wk-ink);border:2.5px solid #15133a26;box-shadow:0 3px 0 #15133a33;font-family:var(--wk-font);font-style:italic;font-weight:800;transition:transform .12s,box-shadow .12s,background .12s}
body #menu .seg button b{font-style:italic;font-weight:900;display:inline-block;transform:skewX(10deg);font-size:15px}
body #menu .seg button:hover,body #menu #gfx button:hover,body #menu #assist button:hover{transform:skewX(-10deg) translateY(-2px);box-shadow:0 5px 0 #15133a33}
body #menu .seg button.selected,body #menu #gfx button.selected,body #menu #assist button.selected{background:linear-gradient(180deg,var(--wk-yellow),var(--wk-orange));color:#fff;border-color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);-webkit-text-stroke:3.5px var(--wk-ink);paint-order:stroke fill}
body #menu .pick small{font-family:var(--wk-font);font-style:italic;font-weight:900;letter-spacing:.5px;color:var(--wk-ink);font-size:12px}
/* Strecken-Karten: dicker weisser Rand, Auswahl gelb mit dunkler Kontur und Glanz */
body #menu #tracks{gap:8px}
body #menu #tracks .track{border:3px solid #fff;border-radius:14px;box-shadow:0 3px 0 #15133a55;overflow:hidden}
body #menu #tracks .track b{font-family:var(--wk-font);font-style:italic;font-weight:900;color:#fff;-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill;letter-spacing:.2px}
body #menu #tracks .track.selected{border-color:var(--wk-yellow);box-shadow:0 0 0 3px var(--wk-ink),0 6px 0 3px var(--wk-ink),0 14px 26px -10px var(--wk-yellow);transform:translateY(-3px) scale(1.03)}
body #menu #tracks .track.selected:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,#fff0 30%,#ffffff55 42%,#fff0 54%) -200% 0/250% 100% no-repeat;animation:wkShine 2.4s ease-in-out infinite}
@keyframes wkShine{0%,40%{background-position:-200% 0}100%{background-position:200% 0}}
/* Fahrer und Farben */
body #menu #drivers button{border-radius:14px;border:2.5px solid #15133a26;background:#fff;box-shadow:0 3px 0 #15133a33}
body #menu #drivers button.selected{border-color:var(--wk-yellow);box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink)}
body #menu #colors .swatch{border:3px solid #fff;box-shadow:0 0 0 2px #15133a55,0 3px 0 #15133a44}
body #menu #colors .swatch.selected{box-shadow:0 0 0 3px var(--wk-ink),0 4px 0 2px var(--wk-ink)}
/* Start: grosser roter schraeger Knopf mit Zielflagge */
body #menu #start{position:relative;overflow:hidden;transform:skewX(-8deg);border-radius:18px;padding:18px 26px;background:linear-gradient(180deg,#ff4a4a,var(--wk-red) 55%,var(--wk-red2));border:3px solid #fff;box-shadow:0 0 0 3px var(--wk-ink),0 7px 0 3px var(--wk-ink),0 16px 30px -12px #e8202aaa;color:#fff;animation:wkPulse 1.8s ease-in-out infinite}
body #menu #start b{display:inline-block;transform:skewX(8deg);font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:26px;letter-spacing:.5px;text-transform:uppercase;-webkit-text-stroke:5px var(--wk-ink);paint-order:stroke fill}
body #menu #start span{position:absolute;right:0;top:0;bottom:0;width:70px;float:none;background:var(--wk-check);opacity:.9;-webkit-mask:linear-gradient(90deg,#0000,#000 60%);mask:linear-gradient(90deg,#0000,#000 60%);font-size:0}
body #menu #start:hover{transform:skewX(-8deg) translateY(-3px)}
body #menu #start:active{transform:skewX(-8deg) translateY(3px);box-shadow:0 0 0 3px var(--wk-ink),0 3px 0 3px var(--wk-ink)}
@keyframes wkPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
body #menu .controls,body #menu #trophies{color:#15133ab3;font-weight:700}
body #menu kbd{background:#fff;color:var(--wk-ink);border:2px solid #15133a33;border-radius:6px;box-shadow:0 2px 0 #15133a33}
/* HUD: Platz, Rundenzaehler, Zeit und Einblendungen in derselben Schrift */
body .position strong{color:var(--wk-yellow);-webkit-text-stroke:8px var(--wk-ink);text-shadow:0 5px 0 var(--wk-red)}
body .position>span,body #lap,body #time{font-family:var(--wk-font);font-style:italic;font-weight:900;-webkit-text-stroke:4px var(--wk-ink);paint-order:stroke fill;color:#fff}
/* R50: Tempo war auf Wasser, Sand und heller Fahrbahn kaum lesbar - gleiche Kontur wie Runde/Zeit, im Turbo tuerkis */
body #speed{font-family:var(--wk-font);font-weight:900;-webkit-text-stroke:6px var(--wk-ink);paint-order:stroke fill;color:#fff;text-shadow:0 4px 0 var(--wk-ink);font-variant-numeric:tabular-nums;transition:color .15s}
body.boosting #speed{color:#7cf3ff;text-shadow:0 4px 0 var(--wk-ink),0 0 18px #7cf3ffaa}
body .speed>small,body #driftlabel{font-weight:800;text-shadow:0 0 3px var(--wk-ink),0 1px 2px var(--wk-ink),0 0 1px var(--wk-ink)}
body #toast{background:none;color:#fff;font-size:34px;-webkit-text-stroke:7px var(--wk-ink);text-shadow:0 5px 0 var(--wk-red),0 8px 16px #0006;letter-spacing:.5px}
body #toast.good{background:none;text-shadow:0 5px 0 #1f9a4b,0 8px 16px #0006}
body #toast.bad{background:none;text-shadow:0 5px 0 var(--wk-red),0 8px 16px #0006}
body #toast.mt-mini{background:none;text-shadow:0 5px 0 #c9921f,0 8px 16px #0006}
body #toast.mt-super{background:none;text-shadow:0 5px 0 var(--wk-orange),0 8px 16px #0006}
body #toast.mt-ultra{background:none;box-shadow:none;text-shadow:0 5px 0 #1a7fa8,0 0 24px #5ff2ff}
/* Ladekarte */
body .loader-card b{font-family:var(--wk-font);font-style:italic;font-weight:900;-webkit-text-stroke:6px var(--wk-ink);paint-order:stroke fill;color:#fff;text-shadow:0 5px 0 var(--wk-red)}
@media (prefers-reduced-motion:reduce){body #menu #start,body #menu #tracks .track.selected:before{animation:none}}
/* R40: Streckenliste darf nicht schrumpfen - sonst quetschte das Raster die Zeilen und die Karten
   ueberlappten sich. Breit: vier Spalten (sieben Strecken in zwei Zeilen), schmal: zwei Spalten. */
body #menu #tracks{flex-shrink:0;grid-template-columns:repeat(4,1fr)}
@media (max-width:620px){body #menu #tracks{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================================   R41: Fenster (Pause, Ergebnis, Siegerehrung, Fehler, Laden) im Menuestil von R40 - helle Karte
   mit Zielflaggen-Streifen, kursive Display-Schrift mit Kontur, roter Hauptknopf, weisse
   Nebenknoepfe. Dazu Handy-Feinschliff im Menue.
   ============================================================================================ */
body .modal{background:#15133a8c;backdrop-filter:blur(8px)}
body .modal>div,body #ceremony>div{position:relative;overflow:visible;background:linear-gradient(180deg,#fffffff5,#e7f3fff0);color:var(--wk-ink);border:0;border-radius:26px;box-shadow:0 8px 0 #15133a40,0 24px 60px -20px #000c;padding:30px 26px 22px}
body .modal>div:before,body #ceremony>div:before{content:'';position:absolute;left:18px;right:18px;top:-9px;height:14px;border-radius:7px;background:var(--wk-check);box-shadow:0 3px 0 #15133a55}
/* Inhalt scrollt innen, damit der Zielflaggen-Streifen oben nicht abgeschnitten wird */
body .modal>div{max-height:min(92vh,calc(100dvh - 40px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body .modal .eyebrow,body #ceremony .eyebrow{color:var(--wk-red);font-family:var(--wk-font);font-style:italic;font-weight:900;letter-spacing:1.5px}
body .modal .eyebrow i{background:var(--wk-red)}
body .modal h2,body #ceremony h2{font-family:var(--wk-font);font-style:italic;font-weight:900;letter-spacing:0;line-height:1.02;color:#fff;-webkit-text-stroke:7px var(--wk-ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--wk-red),0 8px 16px #0004;margin:10px 0 14px}
body .modal p,body #ceremony p{color:#15133acc}
body #resultTime{font-family:var(--wk-font);font-style:italic;font-weight:800;font-size:18px;color:var(--wk-ink);margin:4px 0 8px}
body #cerUnlock{color:#c25a00}
/* Hauptknopf rot und schraeg wie "Los geht's", Nebenknoepfe weiss */
body .modal button:not(.secondary),body #ceremony button:not(.secondary){position:relative;overflow:hidden;transform:skewX(-8deg);border-radius:16px;padding:15px 22px;background:linear-gradient(180deg,#ff4a4a,var(--wk-red) 55%,var(--wk-red2));border:3px solid #fff;box-shadow:0 0 0 3px var(--wk-ink),0 6px 0 3px var(--wk-ink);color:#fff;font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:19px;letter-spacing:.3px;-webkit-text-stroke:4px var(--wk-ink);paint-order:stroke fill;text-align:center;margin-top:18px}
body .modal button:not(.secondary):hover,body #ceremony button:not(.secondary):hover{transform:skewX(-8deg) translateY(-2px);filter:brightness(1.08)}
body .modal button:not(.secondary):active,body #ceremony button:not(.secondary):active{transform:skewX(-8deg) translateY(3px);box-shadow:0 0 0 3px var(--wk-ink),0 3px 0 3px var(--wk-ink)}
body .modal .secondary,body #ceremony .secondary{transform:skewX(-8deg);border-radius:13px;margin-top:12px;padding:11px 16px;background:#fff;color:var(--wk-ink);border:2.5px solid #15133a26;box-shadow:0 3px 0 #15133a33;font-family:var(--wk-font);font-style:italic;font-weight:800;font-size:15px}
body .modal .secondary:hover,body #ceremony .secondary:hover{transform:skewX(-8deg) translateY(-2px);box-shadow:0 5px 0 #15133a33}
body .modal .secondary[aria-pressed="true"]{background:linear-gradient(180deg,var(--wk-yellow),var(--wk-orange));color:#fff;border-color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
/* Sterne und Werte */
body #resultStars{color:#15133a26;-webkit-text-stroke:0}
body #resultStars i.on{color:var(--wk-yellow);-webkit-text-stroke:2px var(--wk-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--wk-orange)}
body #resultStars b{background:var(--wk-red);color:#fff;font-family:var(--wk-font);font-style:italic;font-weight:900;transform:skewX(-8deg)}
body #resultStats div{background:#fff;border:2px solid #15133a1f;box-shadow:0 2px 0 #15133a26}
body #resultStats span{color:#15133aa6;opacity:1;font-weight:700}
body #resultStats b{color:var(--wk-ink);font-family:var(--wk-font);font-style:italic;font-weight:900}
/* Rangliste: Zeilen als kleine Karten, eigene Zeile gelb */
body .modal ol,body #ceremony ol{display:flex;flex-direction:column;gap:4px}
body .modal li,body #ceremony li{border:0;border-radius:10px;padding:6px 12px;background:#15133a0d;color:var(--wk-ink);font-weight:700}
body .modal li span:first-child,body #ceremony li span:first-child{font-family:var(--wk-font);font-style:italic;font-weight:900;min-width:26px}
body .modal li.me,body #ceremony li.me{background:linear-gradient(90deg,var(--wk-yellow),#ffe98a);color:var(--wk-ink);box-shadow:0 0 0 2px var(--wk-ink)}
body .modal li .gain{color:#1f9a4b}
/* R57: 12er-Feld - Ranglisten-Zeilen etwas enger, damit das Ergebnis ohne Scrollen passt */
body .modal ol.many,body #ceremony ol.many{gap:2px}
body .modal ol.many li,body #ceremony ol.many li{padding:3px 12px;font-size:14px}
body #ceremony>div{background:linear-gradient(180deg,#fffffff2,#e7f3ffe8);backdrop-filter:blur(6px)}
/* Fehler- und Ladeanzeige */
body #error{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));border-radius:22px;background:#fff;color:var(--wk-ink);box-shadow:0 0 0 3px var(--wk-ink),0 8px 0 3px var(--wk-ink);padding:28px;font-weight:700}
body #trackLoading{background:#fff;color:var(--wk-ink);box-shadow:0 0 0 3px var(--wk-ink),0 5px 0 3px var(--wk-ink);font-family:var(--wk-font);font-style:italic;font-weight:900}
body #trackLoading i{border-color:#15133a26;border-top-color:var(--wk-red)}
/* Streckenkarten: Auswahl hebt sich an und hat einen Rahmen - im scrollenden Raster brauchte
   sie Luft, sonst schnitt der Rand oben und links die gewaehlte Karte ab. */
body #menu #tracks{padding:8px 7px 11px;margin:-8px -7px -11px}
/* Handy hochkant: Kopfleisten-Knoepfe lagen ueber dem Titel, die Auswahlzeile lief rechts aus dem Bild */
@media (max-width:620px){
 body #menu{padding-top:64px;align-items:flex-start}
 body #menu .menu-panel{max-height:none;flex:none}
 body #menu .menu-picks{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start}
 body #menu .gfx-pick{grid-column:1/-1}
 body #menu #colors{flex-wrap:nowrap;gap:6px}
 body #menu #colors .swatch{width:27px;height:27px}
 body #menu #colors{gap:5px}
 body #menu .gfx-pick{margin-left:0}
 body .modal{padding:16px}
 body .modal>div{padding:28px 18px 18px;width:100%;max-width:100%}
 body .modal h2,body #ceremony h2{font-size:30px}
}
/* Ergebnis auf dem Desktop kompakter, damit die Knoepfe ohne Scrollen im Bild bleiben */
@media (min-width:761px){
 body #result>div{width:560px;padding-top:24px}
 body #result h2{font-size:30px;margin:6px 0 8px}
 body #resultTime{margin:0 0 4px;font-size:16px}
 body #resultStars{font-size:30px}
 body #resultStats{grid-template-columns:repeat(3,1fr);gap:6px}
 body #resultStats div{padding:5px 9px}
 body .modal li{padding:4px 12px;font-size:13px}
 body .modal ol{gap:3px}
}
/* Countdown und Einblendungen (RUNDE 2, LOS!) in der Display-Schrift, etwas tiefer als die
   Streckeneinblendung, damit sich beide nicht mehr ueberlappen; springen bei jedem Wechsel auf */
body #message{top:41%;font-family:var(--wk-font);font-weight:900;font-style:italic;color:var(--wk-yellow);-webkit-text-stroke:9px var(--wk-ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--wk-red),0 12px 22px #0006;letter-spacing:1px}
body #message.pop{animation:mkPop .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes mkPop{0%{transform:translate(-50%,-50%) scale(.35) rotate(-8deg);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
/* Die Rand-Vignette (z-index 2) lag ueber dem Menue und dunkelte die Ecken des Panels ab - der
   Startknopf unten links wirkte dadurch grau statt weiss-rot. Menue liegt jetzt darueber. */
body #menu{z-index:3}
/* Handy: Startknopf klebt unten am Menue, auch wenn die Streckenliste gescrollt wird */
@media (max-width:620px){
 body #menu .menu-panel{overflow:visible}
 body #menu #start{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:5}
 body #menu .seg button b{font-size:13px;white-space:nowrap}
 /* Kopfleiste im Rennen: Marke nur als Icon, Knoepfe einzeilig statt gestreckter Ovale */
 body.racing header .brand-name{display:none}
 body header .top-actions{align-items:center}
 body header .top-actions button{white-space:nowrap;height:auto;min-height:0;padding:8px 12px;line-height:1.1}
}
@media (prefers-reduced-motion:reduce){body .modal button,body #ceremony button{transition:none}body #message.pop{animation:none}}
/* R41: Wiesnland (Open World) - Missionsanzeige oben links, Portal-Knopf, keine Platz-/Rundenanzeige */
#owPanel{display:none;position:fixed;left:18px;top:74px;z-index:3;padding:10px 16px 11px;border-radius:18px;background:linear-gradient(180deg,#ffffffee,#e7f3ffe6);box-shadow:0 0 0 3px var(--wk-ink),0 5px 0 3px var(--wk-ink);color:var(--wk-ink);pointer-events:none;max-width:min(360px,70vw);transform:skewX(-6deg)}
body.ow #owPanel{display:block}
#owPanel b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:13px;letter-spacing:1px;color:var(--wk-red)}
#owPanel span{display:block;font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:30px;line-height:1.05;color:var(--wk-yellow);-webkit-text-stroke:6px var(--wk-ink);paint-order:stroke fill}
#owPanel small{display:block;font-weight:800;font-size:13px;margin-top:3px}
#owPortal{position:fixed;left:50%;bottom:22%;z-index:5;transform:translateX(-50%) skewX(-8deg);padding:14px 26px;border-radius:18px;border:3px solid #fff;background:linear-gradient(180deg,#ff4a4a,var(--wk-red) 55%,var(--wk-red2));box-shadow:0 0 0 3px var(--wk-ink),0 6px 0 3px var(--wk-ink);color:#fff;cursor:pointer;animation:wkPulse 1.2s ease-in-out infinite}
#owPortal b{display:block;font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:24px;-webkit-text-stroke:5px var(--wk-ink);paint-order:stroke fill}
#owPortal span{display:block;font-size:12px;font-weight:800;opacity:.9}
body.ow .position,body.ow #lap,body.ow #gpBadge{display:none!important}
body.ow .race-top>div:first-child{display:none!important}
body #menu #tracks.locked,body #menu #classes.locked{opacity:.38;pointer-events:none;filter:saturate(.4)}

/* R44: Bildraten-Anzeige (?fps) */
#fpsMeter{position:fixed;left:6px;top:calc(env(safe-area-inset-top,0px) + 4px);z-index:99;font:600 11px/1.3 system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:6px;pointer-events:none}

/* ===== R44: Touch-Steuerung (grosse Daumenflaechen) =====
   Runde Knoepfe mit weissem Rand, Verlauf und kraeftiger Kursivschrift. Gas und Hopser getrennt:
   GAS (gruen, gross) unten rechts, HOPS (rot) links daneben im Daumenbogen, Item-Blase oben, Bremse klein. */
body #touch{padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));align-items:flex-end}
body #touch button{font-family:var(--wk-font,'Rubik',system-ui,sans-serif);font-style:italic;font-weight:900;letter-spacing:.5px;color:#fff;
 border:3px solid #fff;border-radius:50%;backdrop-filter:none;-webkit-backdrop-filter:none;
 text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:0 5px 0 rgba(0,0,0,.28),inset 0 -6px 0 rgba(0,0,0,.18),inset 0 5px 0 rgba(255,255,255,.28);
 transition:transform .06s ease-out,filter .06s;line-height:1}
body #touch button small{display:block;white-space:nowrap;font-size:10px;font-weight:800;opacity:.9;margin-top:3px;letter-spacing:.8px}
body #touch button.down{transform:scale(.9) translateY(3px);filter:brightness(1.25);box-shadow:0 2px 0 rgba(0,0,0,.28),inset 0 -3px 0 rgba(0,0,0,.18),inset 0 4px 0 rgba(255,255,255,.3);color:#fff}
/* Lenkung: zwei grosse Kapseln */
body #touch .steer{display:flex;gap:10px;padding:6px;border-radius:999px;background:rgba(10,18,40,.28)}
body #touch .steer button{width:clamp(74px,20vw,96px);height:clamp(74px,20vw,96px);font-size:34px;font-style:normal;
 background:radial-gradient(circle at 35% 30%,#5a6b8f,#27324d 70%)}
/* Aktionsgruppe */
body #touch .act{display:grid;grid-template-columns:auto auto;grid-template-areas:"item brake" "hop gas";gap:10px 12px;align-items:end;justify-items:center}
body #touch .t-gas{grid-area:gas;width:clamp(96px,26vw,118px);height:clamp(96px,26vw,118px);font-size:24px;
 background:radial-gradient(circle at 35% 28%,#8ff07a,#2fae3f 55%,#1d7a2b)!important}
body #touch .t-drift{grid-area:hop;width:clamp(86px,23vw,104px);height:clamp(86px,23vw,104px);font-size:20px;border-radius:50%!important;margin-bottom:26px;
 background:radial-gradient(circle at 35% 28%,#ff9a86,#f0402f 55%,#b8231a)!important}
body #touch .t-item{grid-area:item;width:clamp(66px,18vw,80px);height:clamp(66px,18vw,80px);font-size:34px;font-style:normal;
 background:radial-gradient(circle at 35% 28%,#ffffff,#dfe7f5 60%,#aab6cc)!important;color:#1d2a44!important;text-shadow:none;border-color:#ffd43b}
body #touch .t-item.ready{background:radial-gradient(circle at 35% 28%,#fff6b0,#ffd43b 60%,#e8a40c)!important;box-shadow:0 0 0 4px rgba(255,212,59,.35),0 0 22px rgba(255,212,59,.8),0 5px 0 rgba(0,0,0,.28)!important;animation:mkItemPulse 1s ease-in-out infinite}
@keyframes mkItemPulse{50%{transform:scale(1.06)}}
body #touch .t-brake{grid-area:brake;width:clamp(56px,15vw,66px);height:clamp(56px,15vw,66px);font-size:10px;letter-spacing:0;
 background:radial-gradient(circle at 35% 28%,#9aa3b5,#5b6477 60%,#3b4252)!important}
/* Auto-Gas an: HOPS rutscht an die Stelle von GAS */
body.autogas #touch .act{grid-template-areas:"item brake" "hop hop"}
body.autogas #touch .t-drift{margin-bottom:0;width:clamp(100px,27vw,120px);height:clamp(100px,27vw,120px)}
/* Querformat / niedrige Hoehe: alles etwas kleiner und flacher */
@media (max-height:500px){
 body #touch .steer button{width:66px;height:66px;font-size:28px}
 body #touch .act{grid-template-columns:auto auto auto;grid-template-areas:"item hop gas" "brake hop gas";gap:8px}
 body #touch .t-gas{width:88px;height:88px;font-size:19px}
 body #touch .t-drift{width:78px;height:78px;font-size:16px;margin-bottom:0}
 body #touch .t-item{width:56px;height:56px;font-size:26px}
 body #touch .t-brake{width:50px;height:50px}
}

/* ===== R44: Fortschritt - XP-Balken im Ergebnis, Erfolge-Tafel ===== */
#resultProg{margin:10px 0 6px;text-align:left}
#resultProg .xp-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--wk-font,'Rubik',sans-serif);font-style:italic;font-weight:900;letter-spacing:.5px}
#resultProg .xp-head b{font-size:18px;color:#f07800;text-shadow:0 2px 0 rgba(0,0,0,.18)}
#resultProg .xp-bar,#achBar{position:relative;height:14px;border-radius:9px;background:rgba(0,0,0,.35);border:2px solid #fff;overflow:hidden;margin:6px 0}
#resultProg .xp-bar i,#achBar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2fd35f,#b6ff5c);border-radius:7px;transition:width .9s cubic-bezier(.2,.8,.2,1);display:block;height:100%}
#achBar{height:20px}#achBar span{position:relative;display:block;text-align:center;font-weight:800;font-size:12px;line-height:16px;text-shadow:0 1px 0 rgba(0,0,0,.6)}
#resultProg .xp-parts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;opacity:.9}
#resultProg .xp-parts b{color:#15913a}
#resultProg .xp-up{margin-top:8px;padding:6px 10px;border-radius:10px;background:linear-gradient(90deg,#ff7a1a,#ffd43b);color:#2a1606;font-weight:900;font-style:italic;animation:xpPop .5s ease-out 1.2s both}
@keyframes xpPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.ach-new{display:grid;gap:6px;margin-top:8px}
.ach{display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:8px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.ach i{grid-row:span 2;font-size:24px;font-style:normal;text-align:center}.ach b{font-size:14px}.ach small{font-size:11px;opacity:.8}
.ach-new .ach{background:linear-gradient(90deg,rgba(255,212,59,.28),rgba(255,122,26,.18));border-color:#ffd43b;animation:xpPop .45s ease-out both}
#achPanel>div{max-width:720px}
#achList{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:52vh;overflow:auto;margin:10px 0;text-align:left}
#achList .ach{opacity:.55}#achList .ach.on{opacity:1;border-color:#ffd43b;background:rgba(255,212,59,.14)}
.ach-colors{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ach-colors span{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;border:2px solid var(--c);color:#fff;opacity:.6}
.ach-colors span.on{background:var(--c);opacity:1;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.ach-btn{font-family:var(--wk-font,'Rubik',sans-serif);font-style:italic;font-weight:900;border-radius:999px;padding:6px 14px;border:3px solid #fff;background:linear-gradient(180deg,#ffd43b,#f59f00);color:#3a2300;box-shadow:0 4px 0 rgba(0,0,0,.25);cursor:pointer;margin-right:10px}
.ach-btn small{font-size:11px;font-weight:800;margin-left:4px;opacity:.85}

/* ===== R44: Fortschritt - XP-Balken im Ergebnis, Erfolge-Tafel ===== */
#resultProg{margin:10px 0 6px;text-align:left}
#resultProg .xp-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--wk-font,'Rubik',sans-serif);font-style:italic;font-weight:900;letter-spacing:.5px}
#resultProg .xp-head b{font-size:18px;color:#f07800;text-shadow:0 2px 0 rgba(0,0,0,.18)}
#resultProg .xp-bar,#achBar{position:relative;height:14px;border-radius:9px;background:rgba(0,0,0,.35);border:2px solid #fff;overflow:hidden;margin:6px 0}
#resultProg .xp-bar i,#achBar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2fd35f,#b6ff5c);border-radius:7px;transition:width .9s cubic-bezier(.2,.8,.2,1);display:block;height:100%}
#achBar{height:20px}#achBar span{position:relative;display:block;text-align:center;font-weight:800;font-size:12px;line-height:16px;text-shadow:0 1px 0 rgba(0,0,0,.6)}
#resultProg .xp-parts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;opacity:.9}
#resultProg .xp-parts b{color:#15913a}
#resultProg .xp-up{margin-top:8px;padding:6px 10px;border-radius:10px;background:linear-gradient(90deg,#ff7a1a,#ffd43b);color:#2a1606;font-weight:900;font-style:italic;animation:xpPop .5s ease-out 1.2s both}
@keyframes xpPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.ach-new{display:grid;gap:6px;margin-top:8px}
.ach{display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:8px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.ach i{grid-row:span 2;font-size:24px;font-style:normal;text-align:center}.ach b{font-size:14px}.ach small{font-size:11px;opacity:.8}
.ach-new .ach{background:linear-gradient(90deg,rgba(255,212,59,.28),rgba(255,122,26,.18));border-color:#ffd43b;animation:xpPop .45s ease-out both}
#achPanel>div{max-width:720px}
#achList{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:52vh;overflow:auto;margin:10px 0;text-align:left}
#achList .ach{opacity:.55}#achList .ach.on{opacity:1;border-color:#ffd43b;background:rgba(255,212,59,.14)}
.ach-colors{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ach-colors span{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;border:2px solid var(--c);color:#fff;opacity:.6}
.ach-colors span.on{background:var(--c);opacity:1;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.ach-btn{font-family:var(--wk-font,'Rubik',sans-serif);font-style:italic;font-weight:900;border-radius:999px;padding:6px 14px;border:3px solid #fff;background:linear-gradient(180deg,#ffd43b,#f59f00);color:#3a2300;box-shadow:0 4px 0 rgba(0,0,0,.25);cursor:pointer;margin-right:10px}
.ach-btn small{font-size:11px;font-weight:800;margin-left:4px;opacity:.85}

/* ===== R45: Ein-Hand-Steuerung (Handy hochkant) - keine Fahrknoepfe, eine Wischflaeche ueber dem Spielbild ===== */
#ohPad{display:none}
#ctrlMode{display:none}
@media(pointer:coarse){#ctrlMode:not([hidden]){display:inline-block;margin:0 0 0 8px}}
#ctrlMode{background:transparent;border:1px solid #fff4;border-radius:20px;padding:6px 12px;font-size:11px;color:#e4e9d5}
#ctrlMode[aria-pressed=true]{background:#ffe16a;color:#234d39}
/* Die Flaeche liegt unter der Kopfzeile (Pause, Ton), dem Wiesnland-Portal und der Item-Blase */
body.onehand #touch{top:0;z-index:3;padding:0}
body.onehand #ohPad{display:block;position:fixed;inset:0;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
body.onehand #touch .steer,body.onehand #touch .t-drift,body.onehand #touch .t-brake,body.onehand #touch .t-gas{display:none!important}
body.onehand #touch .act{display:block;position:fixed;right:12px;top:calc(158px + env(safe-area-inset-top,0px));z-index:2}
body.onehand #touch .t-item{width:64px!important;height:64px!important;font-size:28px}
body.onehand #titem #titemIcon{width:44px;height:44px}
body.onehand #autoGas{display:none!important}
/* Lenk-Anzeige: Schiene am Aufsetzpunkt, Knopf folgt dem Finger */
#ohStick{position:fixed;left:0;top:0;width:0;height:0;opacity:0;transform:translate(50vw,75vh);transition:opacity .15s;pointer-events:none;--r:64px}
#ohStick.on{opacity:1}
#ohStick:before{content:'';position:absolute;left:calc(-1 * var(--r) - 26px);width:calc(2 * var(--r) + 52px);top:-26px;height:52px;border-radius:26px;
 background:linear-gradient(90deg,#ffffff38,#ffffff14 40%,#ffffff14 60%,#ffffff38);border:2px solid #ffffff66;box-shadow:0 4px 18px #0004}
#ohStick i{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;border:3px solid #fff;
 background:radial-gradient(circle at 35% 30%,#ffffffee,#ffe16a 55%,#f5a300);box-shadow:0 3px 0 #0003,0 0 18px #ffe16a88}
/* Kurzanleitung zum Rennstart, blendet sich aus */
#ohHint{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:5px 8px;
 width:min(360px,calc(100vw - 32px));padding:10px 12px;border-radius:18px;background:#15133acc;border:2px solid #ffffff55;pointer-events:none;
 font-family:var(--wk-font,'Rubik',sans-serif);font-style:italic;font-weight:800;font-size:12px;letter-spacing:.4px;color:#fff;opacity:0;transition:opacity .4s,transform .4s;transform:translate(-50%,10px)}
#ohHint.show{opacity:1;transform:translate(-50%,0)}
#ohHint b{flex-basis:100%;text-align:center;font-weight:900;font-size:14px;color:var(--wk-yellow,#ffd21f)}
#ohHint span{padding:3px 8px;border-radius:999px;background:#ffffff1f}

/* Einblendungen nie breiter als der Schirm (lange Streckennamen im Hochformat) */
#toast{max-width:calc(100vw - 16px);white-space:normal;text-align:center}

/* =============================================================================================
   R45: Menue v6 - jede Einstellung auf jedem Schirm sichtbar, "Garage"-Karte fuer Fahrer, Kart
   und Einstellungen, lueckenloses Streckenraster. Hochkant passt alles auf einen Schirm, quer
   zweispaltig mit sichtbarem Startknopf (vorher lag er unter dem Bildrand).
   ============================================================================================= */
/* Panel: dunkle Kontur wie die Knoepfe, feines Diagonalmuster */
body #menu .menu-panel{background:repeating-linear-gradient(135deg,#15133a06 0 9px,#15133a00 9px 18px),linear-gradient(180deg,#fffffff4,#e2f0ffef);
 box-shadow:0 0 0 3px var(--wk-ink),0 9px 0 3px var(--wk-ink),0 30px 70px -24px #000c}
body #menu .menu-panel:before{left:22px;right:22px;top:-10px;height:15px;box-shadow:0 0 0 2.5px var(--wk-ink)}
/* Abschnittsnamen als kleine schraege Tinten-Schilder */
body #menu .pick>small{display:inline-block;align-self:flex-start;padding:2px 9px 3px;border-radius:7px;background:var(--wk-ink);color:#fff;font-size:10.5px;letter-spacing:1.2px;line-height:1.25;transform:skewX(-8deg)}
/* Garage: Fahrer | Kart, darunter Lenkhilfe | Grafik */
body #menu .menu-picks{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-items:start;margin:0;padding:11px 13px 12px;border-radius:18px;background:#15133a0c;border:2px solid #15133a14}
body #menu .menu-picks .pick{min-width:0;gap:6px}
body #menu .gfx-pick{margin-left:0;width:auto;grid-column:auto}
body #menu #colors{flex-wrap:wrap;gap:6px;margin:0}
body #menu #colors .swatch{width:28px;height:28px}
body #menu #colors .swatch.locked{opacity:.55}
body #menu #drivers{gap:6px}
/* Einstellungs-Knoepfe (Lenkhilfe, Grafik) gleich hoch, Text nicht gequetscht */
body #menu #assist button,body #menu #gfx button{padding:6px 11px;font-size:12px;white-space:nowrap}
/* Streckenkarten: Vorschau nie verzerrt, Name in der Display-Schrift */
body #menu #tracks .track canvas{object-fit:cover}
body #menu #tracks .track b{font-family:var(--wk-font);font-style:italic;font-weight:900;letter-spacing:.2px;-webkit-text-stroke:3.5px #0b0a22;paint-order:stroke fill}
body #menu #tracks .track.selected{border-color:var(--wk-yellow);box-shadow:0 0 0 3px var(--wk-ink),0 5px 0 3px var(--wk-ink),0 0 22px #ffd21f88;transform:translateY(-2px) scale(1.02);z-index:1}
/* Fuss: Erfolge links, Umschalter als Chips */
body #menu .menu-meta{flex-wrap:wrap;gap:8px 10px;justify-content:flex-start;border:0;padding:0;margin:0}
body #menu .menu-meta .controls{margin-left:auto}
body #menu #autoGas,body #menu #ctrlMode{margin:0;padding:7px 13px;border-radius:11px;transform:skewX(-8deg);background:#fff;color:var(--wk-ink);border:2.5px solid #15133a26;box-shadow:0 3px 0 #15133a33;font-family:var(--wk-font);font-style:italic;font-weight:800;font-size:13px}
body #menu #autoGas[aria-pressed=true],body #menu #ctrlMode[aria-pressed=true]{background:linear-gradient(180deg,var(--wk-yellow),var(--wk-orange));color:#fff;border-color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
body #menu #ctrlMode[hidden]{display:none!important}

/* ---- Breit: Modus und Klasse in einer Zeile, vier Karten je Reihe, letzte Reihe fuellt aus ---- */
@media (min-width:761px){
 body #menu .menu-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"brand brand" "modes classes" "tracks tracks" "picks picks" "start start" "meta meta";column-gap:10px;width:min(760px,calc(100vw - 48px))}
 body #menu .menu-brand{grid-area:brand}body #menu #modes{grid-area:modes}body #menu #classes{grid-area:classes}
 body #menu #tracks{grid-area:tracks}body #menu .menu-picks{grid-area:picks}body #menu #start{grid-area:start}body #menu .menu-meta{grid-area:meta}
 body #menu #tracks{grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(84px,11.5vh,108px)}
 body #menu #tracks .track{grid-column:span 3;aspect-ratio:auto;height:auto}
 body #menu #tracks .track:nth-child(5):nth-last-child(3),body #menu #tracks .track:nth-child(6):nth-last-child(2),body #menu #tracks .track:nth-child(7):last-child{grid-column:span 4}
 body #menu #tracks .track canvas{top:0;height:100%}
}
@media (min-width:761px) and (max-height:760px){body #menu #tracks{grid-auto-rows:clamp(70px,11vh,90px)}}

/* ---- Handy hochkant: alles auf einen Schirm - drei Karten je Reihe, Garage kompakt ---- */
@media (max-width:620px){
 body #menu{padding-top:60px}
 body #menu .menu-panel{gap:9px;padding:18px 14px 12px}
 body #menu .menu-brand{margin:-4px 0 0;gap:10px}
 body .menu-title{font-size:clamp(29px,8.6vw,38px)}body .menu-title em{display:inline}
 body #menu .menu-tag{font-size:12.5px;-webkit-text-stroke:3px var(--wk-ink)}
 body #menu .mb-icon{width:42px;height:42px;font-size:22px}
 body #menu #tracks{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(70px,10.2vh,94px);gap:7px}
 body #menu #tracks .track{grid-column:span 2;aspect-ratio:auto;height:auto;border-width:2.5px}
 body #menu #tracks .track:nth-child(7):last-child{grid-column:span 6}
 body #menu #tracks .track canvas{top:0;height:100%}
 body #menu #tracks .track b{font-size:11.5px;left:6px;right:4px;bottom:9px;white-space:normal;line-height:1.05;-webkit-text-stroke:3px #0b0a22}
 body #menu #tracks .track i{width:22px;height:22px;font-size:12px;left:5px;top:5px;border-radius:7px}
 body #menu #tracks .track .best{display:none}
 body #menu .menu-picks{grid-template-columns:auto minmax(0,1fr);gap:9px 12px;padding:10px 11px}
 body #menu #drivers{gap:5px}body #menu #drivers button{width:40px;height:40px}
 body #menu #colors{gap:5px}body #menu #colors .swatch{width:25px;height:25px}
 body #menu #start{font-size:22px;padding:14px 22px}
 body #menu .menu-meta .controls{display:none}
}
@media (max-width:620px) and (max-height:700px){
 body #menu .menu-tag{display:none}
 body #menu #tracks{grid-auto-rows:64px}
 body #menu .seg button{padding:9px 4px}
}

/* ---- Handy quer: zwei Spalten - links Titel, Modus, Klasse, Garage; rechts Strecken und Start ---- */
@media (pointer:coarse) and (orientation:landscape){
 body:not(.racing) header .top-actions{flex-direction:column}
 body #menu{align-items:stretch;padding:8px 76px calc(8px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}
 body #menu .menu-panel{display:grid;width:100%;max-width:980px;max-height:none;margin:0;overflow:hidden;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"brand tracks" "modes tracks" "classes tracks" "picks tracks" "picks start";gap:7px 12px;padding:12px 12px 10px}
 body #menu .menu-brand{grid-area:brand}body #menu #modes{grid-area:modes}body #menu #classes{grid-area:classes}
 body #menu #tracks{grid-area:tracks}body #menu .menu-picks{grid-area:picks}body #menu #start{grid-area:start}
 body #menu .menu-meta{display:none}
 body .menu-title{font-size:24px}body .menu-title em{display:inline}
 body #menu .mb-icon{width:32px;height:32px;font-size:17px;border-radius:10px}
 body #menu .seg{padding:4px;gap:4px}body #menu .seg button{padding:6px 3px}body #menu .seg button b{font-size:12.5px;white-space:nowrap}
 body #menu #tracks{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,1fr);height:100%;overflow:hidden;padding:4px;margin:-4px;gap:6px}
 body #menu #tracks .track{grid-column:span 3;aspect-ratio:auto;height:auto;min-height:0}
 body #menu #tracks .track:nth-child(5):nth-last-child(3),body #menu #tracks .track:nth-child(6):nth-last-child(2),body #menu #tracks .track:nth-child(7):last-child{grid-column:span 4}
 body #menu #tracks .track canvas{top:0;height:100%}
 body #menu #tracks .track b{font-size:11px;bottom:8px;left:6px;right:4px;white-space:normal;line-height:1.05;-webkit-text-stroke:3px #0b0a22}
 body #menu #tracks .track .best{display:none}
 body #menu #tracks .track i{width:20px;height:20px;font-size:11px;left:4px;top:4px}
 body #menu .menu-picks{align-self:stretch;align-content:start;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;padding:7px 9px}
 body #menu .pick>small{font-size:9.5px}
 body #menu #drivers button{width:32px;height:32px}
 body #menu #colors{gap:4px}body #menu #colors .swatch{width:20px;height:20px}
 body #menu #assist button,body #menu #gfx button{padding:4px 8px;font-size:11px}
 body #menu #start{position:static;margin:0;padding:10px 18px;font-size:18px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-width:760px){
 body #menu{padding-right:70px}
 body #menu .menu-panel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:5px 9px;padding:10px 10px 8px}
 body .menu-title{font-size:19px}body #menu .mb-icon{width:26px;height:26px;font-size:14px;border-radius:8px}
 body #menu .seg{padding:3px;gap:3px}body #menu .seg button{padding:5px 2px}body #menu .seg button b{font-size:10.5px}
 body #menu #tracks{gap:5px}
 body #menu #tracks .track{grid-column:span 4}
 body #menu #tracks .track:nth-child(5):nth-last-child(3),body #menu #tracks .track:nth-child(6):nth-last-child(2){grid-column:span 4}
 body #menu #tracks .track:nth-child(7):last-child{grid-column:span 12}
 body #menu #tracks .track b{font-size:10px;-webkit-text-stroke:2.5px #0b0a22}
 body #menu .menu-picks{gap:4px 8px;padding:6px 8px;border-radius:14px}
 body #menu .pick>small{font-size:8.5px;padding:1px 7px 2px}
 body #menu #drivers{gap:4px}body #menu #drivers button{width:28px;height:28px;border-radius:9px}
 body #menu #colors{display:grid;grid-template-columns:repeat(5,17px);gap:3px}body #menu #colors .swatch{width:17px;height:17px;padding:0}
 body #menu #colors .swatch.locked:after{font-size:9px}
 body #menu #assist button,body #menu #gfx button{padding:3px 6px;font-size:10px}
 body #menu .menu-meta{gap:4px}
 body #menu .ach-btn,body #menu #autoGas,body #menu #ctrlMode{padding:4px 6px;font-size:10px;white-space:nowrap}
 body #menu #start{padding:8px 14px;font-size:16px}
}
/* v6 Feinschliff: Einstellungsgruppen ohne grauen Balken, Hochkant-Garage in voller Breite, Fuss kompakt */
body #menu #assist,body #menu #gfx{display:inline-flex;width:max-content;max-width:100%;background:transparent;padding:0;gap:5px}
body #menu .ach-btn{margin:0;padding:6px 13px;font-size:13px;border-width:2.5px;transform:skewX(-8deg);box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink)}
body #menu .ach-btn small{font-size:11px}
/* R50: ".menu-meta small" faerbt gelb - auf dem gelben Knopf war "Stufe N" unlesbar; jetzt dunkles Abzeichen */
body #menu .ach-btn small:not(:empty){color:var(--wk-yellow);background:var(--wk-ink);opacity:1;border-radius:999px;padding:1px 7px 2px;margin-left:6px;letter-spacing:.3px;vertical-align:1px}
@media (max-width:620px){
 body #menu .menu-picks{grid-template-columns:auto minmax(0,1fr);gap:8px 14px}
 body #menu .menu-picks .pick:nth-child(1),body #menu .menu-picks .pick:nth-child(2){grid-column:1/-1;display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;column-gap:8px}
 body #menu .menu-picks .pick:nth-child(1)>small,body #menu .menu-picks .pick:nth-child(2)>small{justify-self:start}
 body #menu #colors{display:grid;grid-template-columns:repeat(5,28px);gap:6px 7px}
 body #menu #colors .swatch{width:28px;height:28px;padding:0}
 body #menu #assist button,body #menu #gfx button{padding:6px 8px;font-size:12px}
 body #menu #tracks{grid-auto-rows:clamp(66px,8.8vh,84px)}
 body #menu .menu-meta{justify-content:space-between}
 body #menu #ctrlMode{font-size:12.5px}
}
@media (pointer:coarse) and (orientation:landscape){
 body #menu .menu-panel{grid-template-areas:"brand tracks" "modes tracks" "classes tracks" "picks tracks" "meta start"}
 body #menu .menu-meta{display:flex;grid-area:meta;align-self:end;flex-wrap:nowrap;gap:6px}
 body #menu .menu-meta .controls,body #menu #trophies{display:none}
 body #menu .ach-btn{padding:5px 9px;font-size:11.5px}body #menu .ach-btn small{display:none}
 body #menu #autoGas,body #menu #ctrlMode{padding:5px 8px;font-size:11px}
 body #menu .ach-btn,body #menu #autoGas,body #menu #ctrlMode{white-space:nowrap}
 body #menu .menu-picks{align-self:start}
 body #menu #colors{display:grid;grid-template-columns:repeat(5,20px);gap:4px}body #menu #colors .swatch{padding:0}
 body #menu #colors .swatch.locked:after{font-size:10px}
 body #menu #assist button,body #menu #gfx button{padding:4px 7px;font-size:10.5px}
}
@media (pointer:coarse) and (orientation:landscape) and (min-width:761px) and (max-width:900px){
 body #menu .ach-btn,body #menu #autoGas,body #menu #ctrlMode{padding:4px 7px;font-size:10.5px}
}
/* Wiesnland-Tafel (seit dem Merge-Marker-Fix wirklich fixiert): hochkant unter der Zeitanzeige, links neben der Item-Blase */
@media (max-width:620px){
 #owPanel{top:calc(150px + env(safe-area-inset-top,0px));left:12px;max-width:calc(100vw - 108px);padding:7px 12px 8px;border-radius:14px}
 #owPanel b{font-size:11px}#owPanel span{font-size:22px;-webkit-text-stroke:5px var(--wk-ink)}#owPanel small{font-size:11.5px}
}
@media (pointer:coarse) and (orientation:landscape){
 #owPanel{top:calc(56px + env(safe-area-inset-top,0px));left:10px;max-width:min(300px,40vw);padding:5px 10px 6px;border-radius:12px}
 #owPanel b{font-size:10px}#owPanel span{font-size:18px;-webkit-text-stroke:4px var(--wk-ink)}#owPanel small{font-size:10.5px}
}

/* ===== R46: Rivale im HUD, Tages-Herausforderung im Menue ===== */
#rivalTag{position:absolute;left:40px;top:238px;display:flex;align-items:center;gap:6px;padding:4px 12px 5px 9px;border-radius:12px;transform:skewX(-8deg);
 background:linear-gradient(180deg,#34c46a,#1f9a4b);border:2.5px solid #fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);
 font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:13px;letter-spacing:.6px;color:#fff;-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill;pointer-events:none}
#rivalTag.ahead{background:linear-gradient(180deg,#ff4a4a,var(--wk-red) 60%,var(--wk-red2))}
#rivalTag b{font-size:14px;-webkit-text-stroke:0}
@media (max-width:620px){#rivalTag{left:14px;top:192px;font-size:12px}}
@media (pointer:coarse) and (orientation:landscape){#rivalTag{left:12px;top:112px;font-size:11px;padding:3px 9px 4px 7px}}
body.ow #rivalTag{display:none!important}
#hud.tt #rivalTag{display:none!important}
#resultStats .rival.won{background:linear-gradient(90deg,#d8ffe3,#fff);border-color:#1f9a4b66}
#resultStats .rival.won b{color:#1f9a4b}

/* Tages-Herausforderung: Karte ueber dem Startknopf */
body #menu #daily{grid-area:daily;display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px 8px 10px;border-radius:16px;text-align:left;
 background:linear-gradient(100deg,#fff7d6,#ffffff 60%);border:2.5px solid var(--wk-ink);box-shadow:0 4px 0 var(--wk-ink);color:var(--wk-ink);transition:transform .12s}
body #menu #daily:hover{transform:translateY(-2px)}
body #menu #daily i{font-style:normal;font-size:24px;line-height:1}
body #menu #daily span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body #menu #daily small{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:10.5px;letter-spacing:1.1px;color:var(--wk-red)}
body #menu #daily b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:15px;line-height:1.1}
body #menu #daily em{font-style:normal;font-weight:700;font-size:11.5px;color:#15133aa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #menu #daily u{text-decoration:none;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#ff4a4a,var(--wk-red));color:#fff;font-size:14px;border:2.5px solid var(--wk-ink)}
body #menu #daily.done{background:linear-gradient(100deg,#dcffe6,#fff 60%)}
body #menu #daily.done small{color:#1f9a4b}
body #menu #daily.done u{background:linear-gradient(180deg,#34c46a,#1f9a4b)}
/* R87 Wochen-Cup-Karte: gleiche Form wie die Tagesaufgabe, Gold-Look mit Pokal */
body #menu #wcup{grid-area:wcup;display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px 8px 10px;border-radius:16px;text-align:left;
 background:linear-gradient(100deg,#fff0b8,#ffffff 60%);border:2.5px solid var(--wk-ink);box-shadow:0 4px 0 var(--wk-ink);color:var(--wk-ink);transition:transform .12s}
body #menu #wcup:hover{transform:translateY(-2px)}
body #menu #wcup i{font-style:normal;font-size:24px;line-height:1}
body #menu #wcup span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body #menu #wcup small{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:10.5px;letter-spacing:1.1px;color:#8a5800}
body #menu #wcup b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:15px;line-height:1.1}
body #menu #wcup em{font-style:normal;font-weight:700;font-size:11.5px;color:#15133aa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #menu #wcup u{text-decoration:none;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#ffd23a,var(--wk-orange));color:#fff;font-size:14px;border:2.5px solid var(--wk-ink)}
body #menu #wcup.done{background:linear-gradient(100deg,#dcffe6,#fff 60%)}
body #menu #wcup.done small{color:#1f9a4b}
body #menu #wcup.done u{background:linear-gradient(180deg,#34c46a,#1f9a4b)}
/* R94 Einstiegs-Tour: Karte fuer neue Fahrer (gleiche Form, frisches Gruen) und Checkliste im HUD */
body #menu #tourBtn{grid-area:tour;display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px 8px 10px;border-radius:16px;text-align:left;
 background:linear-gradient(100deg,#dcf8ff,#ffffff 60%);border:2.5px solid var(--wk-ink);box-shadow:0 4px 0 var(--wk-ink);color:var(--wk-ink);transition:transform .12s}
body #menu #tourBtn[hidden]{display:none}
body #menu #tourBtn:hover{transform:translateY(-2px)}
body #menu #tourBtn i{font-style:normal;font-size:24px;line-height:1}
body #menu #tourBtn span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body #menu #tourBtn small{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:10.5px;letter-spacing:1.1px;color:#0a7d8a}
body #menu #tourBtn b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:15px;line-height:1.1}
body #menu #tourBtn em{font-style:normal;font-weight:700;font-size:11.5px;color:#15133aa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #menu #tourBtn u{text-decoration:none;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#41c9e8,#0a9ab3);color:#fff;font-size:14px;border:2.5px solid var(--wk-ink)}
#tourHud{position:absolute;left:50%;top:14px;transform:translateX(-50%);pointer-events:none;z-index:6}
#tourHud b{display:inline-block;padding:5px 14px;border-radius:999px;background:#10202acc;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.4px;white-space:nowrap}
#hud[hidden] #tourHud{display:none}
@media (min-width:761px){body #menu .menu-panel{grid-template-areas:"brand brand" "modes classes" "tracks tracks" "picks picks" "tour tour" "wcup wcup" "daily daily" "start start" "meta meta"}}
@media (max-width:620px){body #menu #daily,body #menu #wcup{padding:6px 10px 6px 8px}body #menu #daily b,body #menu #wcup b{font-size:14px}body #menu #daily i,body #menu #wcup i{font-size:20px}body #menu #tracks{grid-auto-rows:clamp(64px,8.2vh,80px)}}
@media (pointer:coarse) and (orientation:landscape){
 body #menu .menu-panel{grid-template-rows:auto auto auto minmax(0,1fr) auto auto;grid-template-areas:"brand tracks" "modes tracks" "classes tracks" "picks tracks" "picks daily" "meta start"}
 body #menu #daily,body #menu #wcup{padding:4px 8px;gap:7px;border-radius:12px;box-shadow:0 3px 0 var(--wk-ink)}
 body #menu #daily i,body #menu #wcup i{font-size:16px}body #menu #daily small,body #menu #wcup small{font-size:9px}body #menu #daily b,body #menu #wcup b{font-size:12px}body #menu #daily em,body #menu #wcup em{font-size:10px}
 body #menu #daily u,body #menu #wcup u{width:24px;height:24px;font-size:11px}
}
/* R47: Tintenpilz - Kleckse ploppen auf und rutschen langsam nach unten */
#inkFx{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s}
#inkFx i{position:absolute;display:block;transform-origin:50% 50%}
#inkFx i svg{width:100%;height:100%;filter:drop-shadow(0 .6vmin .8vmin #0006)}
#inkFx.on i{animation:inkpop .28s cubic-bezier(.3,1.6,.5,1) both,inkslide 4s ease-in both}
@keyframes inkpop{from{scale:.2}to{scale:1}}
@keyframes inkslide{from{translate:0 0}to{translate:0 14vh}}
@media(prefers-reduced-motion:reduce){#inkFx.on i{animation:none}}

/* R47: Item-Feld im Spiel ueberarbeitet - weisser Aussenring und Ring in Item-Farbe, Strahlenkranz hinter dem
   Item, schwebendes Item, farbiges Namensschild, Roulette mit blinkendem Rahmen, Aufblitzen beim Einsammeln */
#item{overflow:hidden;width:120px;height:138px;border:0;border-radius:30px;
 background:radial-gradient(circle at 50% 40%,#ffffff2e 0 22%,#ffffff00 58%),linear-gradient(180deg,#1b3346f2,#0b1624f5);
 box-shadow:0 0 0 3px #fffffff2,0 0 0 6px var(--it),0 12px 26px -10px #000d}
#item.ready{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--it),0 0 26px 4px color-mix(in srgb,var(--it) 55%,transparent),0 12px 26px -10px #000d}
#item .it-rays{position:absolute;left:50%;top:41%;width:190px;height:190px;translate:-50% -50%;pointer-events:none;opacity:0;transition:opacity .3s;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--it) 70%,#fff) 0 9deg,#0000 9deg 30deg);
 -webkit-mask:radial-gradient(circle,#000 14%,#0000 62%);mask:radial-gradient(circle,#000 14%,#0000 62%);animation:itrays 7s linear infinite}
#item.ready .it-rays{opacity:.5}
#item.spin .it-rays{opacity:.35;animation-duration:1.2s}
@keyframes itrays{to{rotate:360deg}}
#item #itemIcon{position:relative;z-index:1;width:74px;height:74px;margin:10px auto 0}
#item.ready #itemIcon{animation:itempop .32s ease-out,itfloat 1.8s ease-in-out .32s infinite}
@keyframes itfloat{50%{translate:0 -4px}}
#item:not(.ready):not(.spin) #itemIcon{opacity:.5;filter:saturate(.35)}
#item.spin #itemIcon{filter:blur(.7px)}
#item.spin{animation:itrim .3s steps(1) infinite}
@keyframes itrim{0%{--it:#ffd45c}33%{--it:#8fd8ff}66%{--it:#ff6b5a}}
#item #itemName{position:relative;z-index:1;display:inline-block;margin:4px auto 0;padding:2px 10px;border-radius:999px;font-size:10px;font-weight:900;font-style:italic;letter-spacing:.6px;
 color:#1a1030;background:var(--it);box-shadow:0 2px 0 #0005;max-width:108px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#item:not(.ready) #itemName{background:#ffffff26;color:#d9e6ee}
#item kbd{position:absolute;z-index:1;right:9px;top:8px;font-size:8px;padding:1px 4px;border-radius:5px;background:#0008;color:#fff;border:1px solid #fff5}
#item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
#item.ready::after{animation:itflash .55s ease-out}
@keyframes itflash{0%{opacity:.9;box-shadow:inset 0 0 0 30px #fff}100%{opacity:0;box-shadow:inset 0 0 0 0 #fff}}
@media(max-width:760px){#item{width:96px;height:114px;border-radius:24px}#item #itemIcon{width:58px;height:58px;margin:8px auto 0}#item .it-rays{width:150px;height:150px}#item #itemName{font-size:9px;max-width:86px}}
@media(prefers-reduced-motion:reduce){#item .it-rays,#item.ready #itemIcon,#item.spin{animation:none}}

/* R47: Spiegel-Modus - Bild und Minikarte seitenverkehrt */
body.mirror #game,body.mirror #map{transform:scaleX(-1)}
#menu #classes .mirror-btn{margin:0 0 0 auto;padding:6px 11px;border-radius:12px;font-size:12px;font-weight:800;color:#d6e7ff;background:linear-gradient(180deg,#2b3f7acc,#18244acc);border:1.5px solid #9fc3ff55;white-space:nowrap}
#menu #classes .mirror-btn.selected{background:linear-gradient(180deg,#8fd8ff,#4a8dff);color:#08163a;border-color:#fff;box-shadow:0 0 14px #8fd8ff88}
#menu #classes .mirror-btn.locked{opacity:.5;filter:grayscale(.6)}
#menu #classes .mirror-btn{position:relative;flex:0 0 auto;min-width:0;padding:6px 9px;font-size:16px;line-height:1}
#menu #classes .mirror-btn b{display:none}
#menu #classes .mirror-btn.locked::after{content:'🔒';position:absolute;right:-4px;bottom:-4px;font-size:10px}
/* R50 Controller: sichtbarer Fokus in Pause, Ergebnis, Siegerehrung und Erfolgen */
body.pad .modal button:focus,body.pad #ceremony button:focus{outline:4px solid var(--wk-yellow);outline-offset:3px}
body.pad #item kbd{width:17px;height:17px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;background:#1c7cff;border:2px solid #fff;box-shadow:0 2px 0 #15133a}
/* R50 Wetterbericht: ein Symbol je Runde als Pille unter Runde/Zeit, die aktuelle Runde gross (ausserhalb des
   Kastens, sonst zog die Zeile ihn am Handy ueber die Platzanzeige) */
#wxStrip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;background:#15133aa6;backdrop-filter:blur(6px);font-size:15px;line-height:1.15;white-space:nowrap;pointer-events:none}
#wxStrip[hidden]{display:none}
#wxStrip i{font-style:normal;opacity:.55;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
#wxStrip i.on{opacity:1;transform:scale(1.25)}
#wxStrip i.past{opacity:.3}
#wxStrip b{font-size:11px;font-weight:900;opacity:.45}
@media(pointer:coarse) and (orientation:portrait){#wxStrip{left:0;transform:none;font-size:12px;padding:3px 9px;gap:4px}}
@media(pointer:coarse) and (orientation:landscape){#wxStrip{font-size:11px;padding:2px 8px;top:calc(100% + 3px)}}

/* =============================================================================================
   R52: Feinschliff Layout - nichts ragt mehr aus seinem Kasten, Einblendungen liegen nie ueber
   Runde/Zeit, Touch-Knoepfe und Menue passen auf kleine Handys (hochkant 360 px, quer 640 px).
   ============================================================================================= */
/* Modus-Knoepfe: Breite nach Inhalt statt gleich breit - "Zeitfahren" wurde abgeschnitten, "Grand Prix"
   brach auf Tablet und Laptop zweizeilig um */
body #menu #modes{flex-wrap:nowrap}
body #menu #modes button{flex:1 1 auto;padding-left:6px;padding-right:6px}
body #menu #modes button b{white-space:nowrap}
@media (min-width:761px){body #menu #modes button b{font-size:14px}}
@media (max-width:420px){
 body #menu #modes{gap:4px;padding:4px}
 body #menu #modes button{padding:9px 3px}
 body #menu #modes button b{font-size:clamp(11px,3.3vw,13px);letter-spacing:-.2px}
}
/* Ganz schmal hochkant: Grafik bekommt eine eigene Zeile wie Fahrer und Kart ("Sparsam" ragte hinaus) */
@media (max-width:380px){
 body #menu .menu-picks .pick:nth-child(3),body #menu .menu-picks .pick:nth-child(4){grid-column:1/-1;display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;column-gap:8px}
 body #menu .menu-picks .pick:nth-child(3)>small,body #menu .menu-picks .pick:nth-child(4)>small{justify-self:start}
}
/* Handy quer: Garage als Zeilen "Etikett | Auswahl" - vorher standen Kart und Grafik rechts neben Fahrer und
   Lenkhilfe, die Farben und "Sparsam" liefen in die Tagesaufgabe hinein */
@media (pointer:coarse) and (orientation:landscape){
 body #menu .menu-picks{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 9px}
 body #menu .menu-picks .pick:nth-child(n){display:contents}
 body #menu .menu-picks .pick:nth-child(n)>small{justify-self:start;align-self:center}
 /* Zeilen ueber die ganze Hoehe verteilen - vorher blieb unter "Grafik" ein leerer Streifen bis zu den Chips */
 body #menu .menu-picks{align-self:stretch;align-content:space-evenly}
 body #menu .menu-picks .pick>div{min-width:0}
 body #menu #colors{grid-template-columns:repeat(5,20px);gap:4px 5px}
 body #menu #modes button{padding-left:3px;padding-right:3px}body #menu #modes button b{font-size:12.5px}
 /* "Hochkant: Ein-Hand" war der breiteste Chip und schob sich unter den Startknopf */
 body #menu #ctrlMode .pre{display:none}
 body #menu #ctrlMode:before{content:'📱 ';-webkit-text-stroke:0}
 body #menu .menu-meta{min-width:0}
}
@media (pointer:coarse) and (orientation:landscape) and (max-width:760px){
 /* Streckenspalte etwas breiter, damit "Geisterhaus" und "Sternenbahn" in die Karten passen */
 body #menu .menu-panel{grid-template-columns:minmax(262px,1.02fr) minmax(0,1fr)}
 body #menu #colors{grid-template-columns:repeat(5,18px);gap:3px 4px}
 body #menu #colors .swatch{width:18px;height:18px}
 body #menu #tracks .track b{font-size:9.5px;letter-spacing:0}
 body #menu #modes button b{font-size:10.5px}
 body #menu .ach-btn,body #menu #autoGas,body #menu #ctrlMode{padding:4px 6px;font-size:10px}
}

/* Einblendungen (Turbo, Platz, Rivale ...) unter Runde/Zeit und dem Wetterbericht - auf Laptops mit 600-700 px
   Hoehe lagen sie genau ueber der Zeit. Die grosse Mitteilung (RUNDE 2, Countdown) bleibt darunter frei. */
body #toast{top:max(24%,222px)}
/* mit left:50% stand dem Text nur die halbe Schirmbreite zur Verfuegung - "WINDSCHATTEN-BOOST!" brach hochkant
   immer zweizeilig um; jetzt einzeilig, bis er wirklich nicht mehr passt */
body #toast{width:max-content}
body #message{top:max(41%,330px)}
@media (pointer:coarse) and (orientation:portrait){
 /* hochkant: kleiner und einzeilig unter Rivalen-Schild und Item-Blase statt zweizeilig darueber */
 body #toast{top:calc(236px + env(safe-area-inset-top,0px));font-size:clamp(19px,6vw,30px);line-height:1.1;-webkit-text-stroke:5px var(--wk-ink);max-width:calc(100vw - 24px)}
 body #message{top:max(41%,calc(306px + env(safe-area-inset-top,0px)))}
 /* Item-Blase lag 4 px ueber dem Runde/Zeit-Kasten */
 body.onehand #touch .act{top:calc(168px + env(safe-area-inset-top,0px))}
 body.ow #toast{top:calc(244px + env(safe-area-inset-top,0px))}
}
@media (pointer:coarse) and (orientation:landscape){
 body #toast{top:calc(90px + env(safe-area-inset-top,0px));font-size:22px;line-height:1.1;-webkit-text-stroke:5px var(--wk-ink);max-width:min(620px,calc(100vw - 24px))}
 body.ow #toast{top:calc(138px + env(safe-area-inset-top,0px))}
 body #message{top:47%}
 /* Beschriftungen passen in die runden Knoepfe, Item-Symbol in seine Blase */
 body #touch .t-drift small{font-size:8px;letter-spacing:.2px;white-space:nowrap}
 body #touch .t-brake{font-size:9px;letter-spacing:0}
 body #titem #titemIcon{width:40px;height:40px}
 /* Kerbe/Kamera-Loch seitlich (viewport-fit=cover): HUD und Knoepfe ruecken aus dem sicheren Bereich nicht heraus */
 body header{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
 body .position{left:max(12px,env(safe-area-inset-left,0px))}
 body #rivalTag{left:max(10px,env(safe-area-inset-left,0px))}
 body #owPanel{left:max(10px,env(safe-area-inset-left,0px))}
 /* ... und das Menue haelt rechts Platz fuer die mitgerueckten Kopfleisten-Knoepfe frei */
 body #menu{padding-right:calc(64px + max(12px,env(safe-area-inset-right,0px)))}
 body #touch{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
}
/* Zeitfahren und Grand Prix: Geist, Medaillenzeit und Rennzaehler in derselben Display-Schrift wie Runde/Zeit
   (standen vorher in der Fliesstext-Schrift daneben) */
body #ttDelta,body #ttMedalTime,body #gpRace{font-family:var(--wk-font);font-style:italic;font-weight:900;-webkit-text-stroke:4px var(--wk-ink);paint-order:stroke fill;color:#fff}
body #ttDelta.ahead{color:#7dffa8}body #ttDelta.behind{color:#ff8a7a}
/* Zeitfahren hochkant: vier Felder passten nicht in den rechts verankerten Kasten - er lief links aus dem Bild.
   Die Platzanzeige fehlt im Zeitfahren, also volle Breite und etwas kleinere Ziffern */
@media (pointer:coarse) and (orientation:portrait){
 body #hud.tt .race-top{left:12px;right:12px;justify-content:space-between;gap:8px;padding:10px 12px}
 body #hud.tt .race-top small{font-size:11px;letter-spacing:1.5px;white-space:nowrap}
 body #hud.tt .race-top strong{font-size:clamp(18px,5.6vw,26px);white-space:nowrap}
 body #hud.tt .race-top em{font-size:clamp(12px,3.6vw,16px)}
}
/* Grand Prix hochkant: mit dem breiten Etikett "GRAND PRIX" schob sich der Kasten ueber die Platzanzeige und
   verdeckte die eigene Position - dort reicht "GP", die Felder ruecken zusammen */
@media (pointer:coarse) and (orientation:portrait){
 body #hud:not(.tt) .race-top:has(#gpBadge:not([hidden])){gap:10px;padding-left:12px;padding-right:12px}
 body #hud:not(.tt) .race-top:has(#gpBadge:not([hidden])) strong{font-size:clamp(20px,6.6vw,30px)}
 body #hud:not(.tt) .race-top:has(#gpBadge:not([hidden])) em{font-size:clamp(13px,4vw,18px)}
 body #gpBadge small{font-size:0;letter-spacing:0}
 body #gpBadge small:before{content:'GP';font-size:13px;letter-spacing:2px}
}
/* kurze Hochkant-Handys (360x640, SE): grosse Mitteilung etwas kleiner, sie liegt sonst breit ueber Karte und Tempo */
@media (pointer:coarse) and (orientation:portrait) and (max-height:700px){body #message{font-size:46px;-webkit-text-stroke:7px var(--wk-ink)}}
/* quer auf kleinen Handys: Tempo mittig zwischen Lenk- und Aktionsknoepfen, nicht unter BREMSE */
@media (pointer:coarse) and (orientation:landscape) and (max-width:720px){body .speed{left:43%}}
@media (pointer:coarse) and (orientation:landscape) and (max-width:760px){body #menu{padding-right:calc(58px + max(12px,env(safe-area-inset-right,0px)))}}

/* =============================================================================================
   R52: Minimal-HUD hochkant (Nutzerwunsch "Anzeige im Rennen zu voll") - nur Platz, Runde, Item, Pause,
   Einblendungen und Drift-Balken. Zeit, Wetterleiste, Rivalen-Schild, Sporen, Tempo, Karte und die Kopfleisten-
   Knoepfe (Ton, Vollbild, Marke) gibt es mit "Anzeige hochkant: VOLL" im Pausemenue. Zeitfahren behaelt Zeit und Geist.
   ============================================================================================= */
@media (pointer:coarse) and (orientation:portrait){
 body.hudmin.racing header .brand,body.hudmin.racing #sound,body.hudmin.racing #full{display:none!important}
 body.hudmin.racing header{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;justify-content:flex-end}
 body.hudmin.racing #pause{width:44px;height:44px;padding:0!important;display:grid;place-items:center;font-size:16px;border-radius:50%;background:#15133a8c;border-color:#ffffff59}
 body.hudmin .position{left:14px;top:calc(8px + env(safe-area-inset-top,0px))}
 body.hudmin .position strong{font-size:58px;-webkit-text-stroke:7px var(--wk-ink)}
 body.hudmin .position>span{font-size:19px}
 body.hudmin .position small{display:none}
 /* Runde als kleine Pille oben in der Mitte */
 body.hudmin .race-top{top:calc(18px + env(safe-area-inset-top,0px));left:50%;right:auto;transform:translateX(-50%);gap:12px;padding:5px 14px 6px;border-radius:999px;background:#15133a8c;backdrop-filter:blur(6px)}
 body.hudmin .race-top small{display:none}
 body.hudmin .race-top strong{font-size:24px;line-height:1}
 body.hudmin .race-top em{font-size:15px}
 body.hudmin .race-top>div:nth-child(2),body.hudmin #gpBadge,body.hudmin #ttMedal{display:none!important}
 body.hudmin #wxStrip{left:50%;transform:translateX(-50%);top:calc(100% + 4px);font-size:12px;padding:2px 9px;gap:4px;background:#15133a8c}
 body.hudmin #lap:before{content:'🏁 ';font-size:15px;-webkit-text-stroke:0;vertical-align:3px}
 /* Zeitfahren: Zeit und Geist bleiben (ohne Runde), Wiesnland: Kopfkasten ganz weg */
 body.hudmin #hud.tt .race-top>div:nth-child(2){display:block!important}
 body.hudmin #hud.tt .race-top>div:first-child{display:none!important}
 body.hudmin #hud.tt .race-top{left:50%;right:auto;padding:5px 14px 6px}
 body.hudmin #hud.tt .race-top strong{font-size:22px}
 body.hudmin.ow .race-top{display:none!important}
 body.hudmin #rivalTag,body.hudmin #map,body.hudmin .speed .spores,body.hudmin .speed>strong,body.hudmin .speed>small{display:none!important}
 /* Item-Blase unter dem Pause-Knopf, Drift-Balken als duenne Linie */
 body.hudmin.onehand #touch .act{top:calc(66px + env(safe-area-inset-top,0px))}
 body.hudmin.onehand .speed{right:auto;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px))}
 body.hudmin .driftbar{width:130px;height:7px;opacity:.9}
 body.hudmin #toast{top:calc(148px + env(safe-area-inset-top,0px));font-size:clamp(18px,5.4vw,26px)}
 body.hudmin.ow #toast{top:calc(160px + env(safe-area-inset-top,0px))}
 body.hudmin #message{top:max(36%,calc(230px + env(safe-area-inset-top,0px)))}
 body.hudmin #owPanel{top:calc(64px + env(safe-area-inset-top,0px));padding:5px 10px 6px}
 body.hudmin #owPanel span{font-size:18px}
}
/* =============================================================================================
   R53: Minimal-HUD jetzt ueberall Standard (Nutzerwunsch "ingame gui minimal") - Desktop und quer wie hochkant:
   Platz (klein, oben links), Runde als Pille oben mittig, Item-Blase oben rechts unter dem runden Pause-Knopf,
   Drift-Balken unten mittig, Windschatten nur als schmaler Balken. Zeit, Wetterleiste, Rivale, Karte, Tempo,
   Sporen, Tastenhilfe und Kopfleisten-Knoepfe mit "Anzeige: VOLL" im Pausemenue.
   ============================================================================================= */
@media not all and (pointer:coarse) and (orientation:portrait){
 body.hudmin.racing header .brand,body.hudmin.racing #sound,body.hudmin.racing #full{display:none!important}
 body.hudmin.racing header{justify-content:flex-end}
 body.hudmin.racing #pause{width:42px;height:42px;padding:0!important;display:grid;place-items:center;font-size:15px;border-radius:50%;background:#15133a8c;border-color:#ffffff59}
 body.hudmin.racing #pause .lbl{display:none}
 body.hudmin .position{left:26px;top:calc(14px + env(safe-area-inset-top,0px))}
 body.hudmin .position strong{font-size:64px;-webkit-text-stroke:7px var(--wk-ink)}
 body.hudmin .position>span{font-size:20px}
 body.hudmin .position small{display:none}
 body.hudmin .race-top{top:calc(20px + env(safe-area-inset-top,0px));gap:12px;padding:5px 16px 6px;border-radius:999px;background:#15133a8c;backdrop-filter:blur(6px)}
 body.hudmin .race-top small{display:none}
 body.hudmin .race-top strong{font-size:24px;line-height:1}
 body.hudmin .race-top em{font-size:15px}
 body.hudmin .race-top>div:nth-child(2),body.hudmin #gpBadge,body.hudmin #ttMedal{display:none!important}
 body.hudmin #wxStrip{left:50%;transform:translateX(-50%);top:calc(100% + 4px);font-size:12px;padding:2px 9px;gap:4px;background:#15133a8c}
 body.hudmin #lap:before{content:'🏁 ';font-size:15px;-webkit-text-stroke:0;vertical-align:3px}
 body.hudmin #hud.tt .race-top>div:nth-child(2){display:block!important}
 body.hudmin #hud.tt .race-top>div:first-child{display:none!important}
 body.hudmin.ow .race-top{display:none!important}
 body.hudmin #rivalTag,body.hudmin #map,body.hudmin #raceTip,body.hudmin #driftlabel,body.hudmin .speed .spores,body.hudmin .speed>strong,body.hudmin .speed>small{display:none!important}
 body.hudmin #item{top:calc(70px + env(safe-area-inset-top,0px));right:22px;width:78px;height:78px;border-radius:24px}
 body.hudmin #item small,body.hudmin #item kbd{display:none}
 body.hudmin #itemIcon{font-size:40px}
 body.hudmin .speed{right:auto;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 body.hudmin .driftbar{width:170px;height:7px;opacity:.9}
 body.hudmin #draftHud{left:26px;top:calc(96px + env(safe-area-inset-top,0px));min-width:0;width:132px;padding:5px 9px;gap:6px;border-width:1.5px;border-radius:10px}
 body.hudmin #draftHud .draft-wind{font-size:22px}
 body.hudmin #draftTitle{font-size:10px}
 body.hudmin #draftHint{display:none}
 body.hudmin #draftMeter{margin-top:3px;height:4px}
 body.hudmin #toast{top:calc(84px + env(safe-area-inset-top,0px))}
}
@media (pointer:coarse) and (orientation:landscape){
 body.hudmin .position{left:calc(14px + env(safe-area-inset-left,0px))}
 body.hudmin .position strong{font-size:46px;-webkit-text-stroke:6px var(--wk-ink)}
 body.hudmin #draftHud{top:calc(70px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px))}
 body.hudmin #toast{top:calc(64px + env(safe-area-inset-top,0px))}
}
/* R52: Siegerehrung - "ERFOLG: Grand-Prix-Sieger" lag hinter der Ergebniskarte (quer/Desktop halb, hochkant ganz).
   Jetzt ueber der Karte: breit mittig im freien Bereich links davon, hochkant oben zwischen Kopfleiste und Karte. */
body.cer #toast{z-index:11;left:calc((100vw - 430px) / 2);max-width:calc(100vw - 470px);font-size:28px;top:max(18%,120px)}
@media (pointer:coarse) and (orientation:landscape){body.cer #toast{left:calc((100vw - 352px) / 2);max-width:calc(100vw - 380px);font-size:20px;top:calc(60px + env(safe-area-inset-top,0px))}}
@media (max-width:760px) and (orientation:portrait){body.cer #toast{left:50%;max-width:calc(100vw - 24px);font-size:19px;top:calc(62px + env(safe-area-inset-top,0px));-webkit-text-stroke:5px var(--wk-ink)}}
/* R52: Pause quer - sechs Knoepfe untereinander passten nicht (640x360: nur bis "Anzeige", "Zur Streckenauswahl" lag
   unsichtbar im Rollbereich). Jetzt zweispaltig: Titel und Weiterfahren breit, Einstellungen 2x2, Ausgang darunter. */
@media (orientation:landscape) and (max-height:500px){
 body #pausePanel>div{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;align-content:start;width:min(620px,94vw);padding:16px 18px 14px}
 body #pausePanel>div>.eyebrow,body #pausePanel>div>h2,body #pausePanel #resume,body #pausePanel #quit{grid-column:1/-1}
 body #pausePanel h2{font-size:22px;margin:0 0 2px}
 body #pausePanel .eyebrow{font-size:11px}
 body #pausePanel button{margin:0!important}
 body #pausePanel #resume{padding:9px 18px;font-size:17px}
 body #pausePanel .secondary{padding:8px 10px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* R52: Windschatten – klarer Ladestand und ein ruhiges Signal zum Ausscheren. */
#draftHud{position:absolute;left:40px;top:286px;display:flex;align-items:center;gap:9px;min-width:190px;padding:10px 14px 11px 10px;border:2px solid #a6f5ec;border-radius:15px;background:linear-gradient(125deg,#122c3cf5,#153b4af2);box-shadow:0 0 0 3px #15133a,0 5px 0 2px #15133a;color:#efffff;pointer-events:none}
#draftHud[hidden]{display:none}
#draftHud .draft-wind{font:900 44px/1 var(--wk-font);font-style:italic;color:#80e9ee}
#draftHud>div{flex:1;min-width:0}
#draftTitle{display:block;font:900 italic 13px/1.2 var(--wk-font);letter-spacing:.7px}
#draftHint{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.4px;color:#b3dce5}
#draftMeter{height:5px;margin-top:7px;overflow:hidden;border-radius:5px;background:#ffffff24}
#draftMeter i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#59c8ef,#a3ffe5);transition:transform .08s linear}
#draftHud.ready{border-color:#fcf0a4;background:linear-gradient(120deg,#174445f5,#176b61f2);box-shadow:0 0 0 3px #15133a,0 5px 0 2px #15133a,0 0 25px #8affd944}
#draftHud.ready .draft-wind,#draftHud.ready #draftHint{color:#fff1a2}
#draftHud.ready #draftMeter i{background:#fff1a2}
@media(max-width:620px){#draftHud{left:14px;top:236px;min-width:156px;gap:6px;padding:7px 10px 8px 8px;border-radius:12px}#draftHud .draft-wind{font-size:32px}#draftTitle{font-size:11px}#draftHint{font-size:9px}}
@media(pointer:coarse) and (orientation:landscape){#draftHud{left:12px;top:146px;min-width:148px;padding:5px 9px;gap:6px}#draftHud .draft-wind{font-size:28px}#draftTitle{font-size:10px}#draftHint{font-size:9px}#draftMeter{margin-top:4px;height:4px}}
@media(prefers-reduced-motion:reduce){#draftMeter i{transition:none}}

/* ===== R55: Online-Knopf im Menue und Lobby-Tafel (Peer-to-Peer, siehe net.mjs) ===== */
body #menu .menu-brand{display:flex;align-items:center;gap:12px}
.online-btn{margin-left:auto;display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;padding:7px 14px;border-radius:16px;border:3px solid #fff;background:linear-gradient(180deg,#4a9dff,var(--wk-blue) 60%,#155aa8);color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);transform:skewX(-8deg);cursor:pointer;font-family:var(--wk-font);transition:transform .12s}
.online-btn:hover{transform:skewX(-8deg) translateY(-2px)}
.online-btn span{grid-row:span 2;font-size:24px;transform:skewX(8deg)}
.online-btn b{font-style:italic;font-weight:900;font-size:17px;-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill;transform:skewX(8deg);text-align:left;line-height:1.05}
.online-btn small{font-size:10px;font-weight:800;opacity:.92;transform:skewX(8deg);text-align:left;white-space:nowrap}
.online-btn.live{background:linear-gradient(180deg,#5fd88a,#1f9a4b);animation:wkPulse 1.6s ease-in-out infinite}
#online [hidden]{display:none!important}
#online .online-card{width:min(500px,calc(100vw - 20px));max-width:none;box-sizing:border-box}
#online .on-sub{opacity:.85;font-size:14px;margin:0 0 12px}
#online label.on-name{display:flex;gap:10px;align-items:center;font-weight:800;font-size:13px}
#online input,#online select{font:inherit;font-weight:800;padding:10px 12px;border-radius:12px;border:2px solid #fff5;background:#ffffff18;color:#fff;min-width:0}
#online select option{color:#14264a}
#online input#onName{flex:1}
#online #onStart{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
#online button{white-space:normal}
@media (max-width:420px){body #online #onQuick{font-size:16px}#online .online-card{padding-left:14px;padding-right:14px}}
#online .on-join{display:flex;gap:8px}
#online .on-join input{flex:1;text-transform:uppercase;letter-spacing:3px;text-align:center}
#online .on-join button,#online #onCreate{margin-top:0}
#online .on-code{display:flex;align-items:center;gap:10px;font-weight:800;margin-top:10px}
#online .on-code b{font-size:30px;letter-spacing:4px;font-family:var(--wk-font);font-style:italic}
#online .on-code button{margin:0 0 0 auto}
#online #onPlayers{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#online #onPlayers li{border:0;background:#ffffff14;border-radius:10px;padding:7px 10px;align-items:center;gap:8px}
#online #onPlayers li.me{background:#ffc83a30;outline:2px solid #ffc83a}
#online #onPlayers li.bot{opacity:.55;font-size:13px}
#online #onPlayers li em{margin-left:auto;font-size:11px;opacity:.8;font-style:normal}
#online #onPlayers li i{font-style:normal}
#online #onWhat{display:flex;gap:6px;margin-top:6px}
#online #onWhat button{flex:1;margin:0}
#online #onWhat button.selected{background:var(--wk-yellow);color:var(--wk-ink)}
#online .on-sel{display:flex;gap:8px;margin-top:8px}
#online .on-sel select{flex:1}
#online select:disabled{opacity:.4}
#online #onStatus{min-height:1em;font-size:13px;opacity:.9;margin:10px 0 0;word-break:break-all}
#online #onWait{font-weight:700;opacity:.9}
@media (max-width:560px){.online-btn small{display:none}.online-btn{padding:6px 10px}#online #onPlayers{grid-template-columns:1fr}}
#online .on-tip{font-size:12px;opacity:.7;margin:6px 0 0}
/* R55 Lobby auf der hellen Modal-Karte: dunkle Schrift in den Feldern, Code-Feld breit, Beitreten in Blau */
body #online input,body #online select{background:#fff;color:var(--wk-ink);border:2.5px solid #14264a33;box-shadow:inset 0 2px 0 #14264a14}
body #online input::placeholder{color:#14264a66}
body #online .on-join{align-items:stretch}
body #online .on-join input{flex:1 1 60%;font-size:20px}
body #online .on-join button{width:auto;flex:0 0 auto;padding-left:22px;padding-right:22px}
body #online #onJoin{background:linear-gradient(180deg,#4a9dff,var(--wk-blue) 60%,#155aa8)}
body #online #onPlayers li{background:#14264a0f;color:var(--wk-ink)}
body #online #onPlayers li.me{background:#ffc83a40}
body #online .on-code{color:var(--wk-ink)}
body #online .on-sub,body #online #onWait,body #online #onStatus,body #online .on-tip,body #online label.on-name{color:var(--wk-ink)}
/* R55: Wiesnland (Open World) im Menue hervorheben - eigener Knopf-Look mit Riesenrad */
body #menu #modes .mode[data-mode="world"]{background:linear-gradient(180deg,#6fdc8c,#2f9e57);color:#fff;border-color:#fff;-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
body #menu #modes .mode[data-mode="world"] b:before{content:'🎡 ';-webkit-text-stroke:0}
body #menu #modes .mode[data-mode="world"].selected{background:linear-gradient(180deg,var(--wk-yellow),var(--wk-orange))}
/* R60: Wiesnland frei fahren (Challenges, Portale) bekommt den Riesenrad-Look, der Kotzhügel Fight den roten Kampf-Look */
body #menu #modes .mode[data-mode="roam"]{background:linear-gradient(180deg,#6fdc8c,#2f9e57);color:#fff;border-color:#fff;-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
body #menu #modes .mode[data-mode="roam"] b:before{content:'🎡 ';-webkit-text-stroke:0}
body #menu #modes .mode[data-mode="roam"].selected{background:linear-gradient(180deg,var(--wk-yellow),var(--wk-orange))}
body #menu #modes .mode[data-mode="world"]{background:linear-gradient(180deg,#ff7a6a,#c8323a)}
body #menu #modes .mode[data-mode="world"] b:before{content:'⚔ '}
/* fuenf Modi in einer Zeile neben den Klassen: Modus-Spalte breiter, "Fight" nur hochkant (dort zwei Spalten) */
@media (min-width:761px){body #menu .menu-panel{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}body #menu #modes{gap:5px}body #menu #modes button b{font-size:13px;letter-spacing:-.2px}}
@media (min-width:761px),(orientation:landscape){body #menu #modes .m-long{display:none}}
/* R55 Titel "Suppa Oktoberfest Karts": laenger als "Wiesn Kart" - kleiner, darf umbrechen */
body .menu-title{font-size:clamp(28px,3.3vw,46px);line-height:1;letter-spacing:-.5px}
body .loader-card b{font-size:clamp(20px,4vw,30px);text-align:center}
/* R55 Herzerl-Schlacht: Anzeige oben mittig (Herzen, Mitspieler, Zeit) */
#battleHud{position:fixed;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 58px));transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:6px 16px;border-radius:999px;background:#14264ad9;color:#fff;box-shadow:0 4px 0 #0005;pointer-events:none;font-family:var(--wk-font)}
#battleHud[hidden]{display:none}
#battleHud b{font-style:italic;font-weight:900;font-size:13px;letter-spacing:.5px;color:#ffc83a}
#battleHud span{font-size:22px;color:#ff4a5a;text-shadow:0 2px 0 #5a1c10;letter-spacing:2px}
#battleHud small{font-size:12px;font-weight:800;opacity:.9}
/* R57: nie umbrechen (mit left:50% blieb nur die halbe Breite); hochkant oben links, ohne Titel, frei vom Item-Knopf */
#battleHud{width:max-content;max-width:calc(100vw - 24px);white-space:nowrap}
@media (max-width:620px){#battleHud{left:max(10px,env(safe-area-inset-left,0px));transform:none;max-width:calc(100vw - 130px);gap:8px;padding:5px 12px}#battleHud b{display:none}#battleHud span{font-size:18px;letter-spacing:1px}#battleHud small{font-size:11.5px}}
body #online #onQuick{background:linear-gradient(180deg,#5fd88a,#1f9a4b);font-size:18px}
body #online #onWhat{flex-wrap:wrap}
/* R56 Handy hochkant (Nutzerhinweis): Lenkknoepfe als hohe Kapseln (leichter zu treffen), Item-Knopf rechts auf halber
   Hoehe in Daumennaehe statt oben am HUD - stoert die Wischlenkung und die Lenkknoepfe nicht */
@media (pointer:coarse) and (orientation:portrait){
 body #touch .steer{gap:12px;padding:8px}
 body #touch .steer button{width:clamp(86px,25vw,118px);height:clamp(118px,18vh,168px);border-radius:32px;font-size:40px}
 body #touch .t-item{width:clamp(76px,21vw,92px);height:clamp(76px,21vw,92px)}
 body.onehand #touch .act{top:auto;bottom:calc(38vh + env(safe-area-inset-bottom,0px));right:14px}
 body.onehand #touch .t-item{width:84px!important;height:84px!important}
 body.onehand #titem #titemIcon{width:56px;height:56px}
}
/* R56 Kotzhuegel Fight: Platz-Anzeige und Wiesnland-Missionstafel passen nicht zum Arena-Kampf */
body.battle .position,body.battle #owPanel,body.battle #rivalTag{display:none!important}
/* R56: neun Fahrer - die Auswahl darf zweizeilig werden */
body #menu #drivers{flex-wrap:wrap;max-width:260px}
/* ===== R56 Ladebildschirm: neues Titelbild (Blender, art/r56/create_keyart.py), helle Karte mit weiss-blauen Rauten,
   Rauten-Fortschrittsbalken; hochkant eigenes Bild ===== */
body #loader{background:#14264a url(assets/keyart.jpg) center/cover no-repeat;padding-bottom:9vh}
@media (orientation:portrait){body #loader{background-image:url(assets/keyart_portrait.jpg)}}
body #loader:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#14264a00 55%,#14264acc);pointer-events:none}
body .loader-card{position:relative;z-index:1;overflow:hidden;background:linear-gradient(180deg,#fffffff0,#e9f1ffe8);color:var(--wk-ink);border:3px solid #fff;border-radius:24px;
 box-shadow:0 0 0 3px var(--wk-ink),0 9px 0 3px var(--wk-ink),0 30px 60px -20px #000c;padding:26px 30px 20px;backdrop-filter:none}
body .loader-card:before{content:'';position:absolute;left:0;right:0;top:0;height:11px;background:var(--wk-check)}
body .loader-card .brand-icon{background:none;width:auto;height:auto;font-size:34px;line-height:1;filter:drop-shadow(0 3px 0 #14264a55)}
body .loader-card small{color:var(--wk-ink);font-weight:800;opacity:.85}
body .loader-card .lbar{height:16px;border-radius:9px;background:#14264a1c;border:2.5px solid var(--wk-ink)}
body .loader-card .lbar i{background:var(--wk-check);background-size:14px 14px;animation:wkRauten 1.2s linear infinite}
@keyframes wkRauten{to{background-position:28px 0}}
@media (prefers-reduced-motion:reduce){body .loader-card .lbar i{animation:none}}
/* R56 offene Raeume: Liste mit Belegung und Ping */
body #online .on-rooms{display:grid;gap:6px;margin-bottom:4px}
body #online .on-room{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:8px 10px;border-radius:12px;background:#14264a0f;color:var(--wk-ink)}
body #online .on-room b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:15px}
body #online .on-room span{grid-row:2;font-size:12px;font-weight:700;opacity:.8}
body #online .on-room button{grid-row:1/3;grid-column:2;margin:0;padding:8px 14px;font-size:14px}
body #online .on-room.mine{outline:2px solid var(--wk-yellow);background:#ffc83a26}
/* R56 Karosserie-Wahl unter den Kartfarben */
body #menu .kstyle{display:flex;gap:6px;margin-top:6px}
body #menu .kstyle button{padding:4px 10px;font-size:12px;border-radius:10px;border:2px solid #14264a26;background:#fff;color:var(--wk-ink);font-family:var(--wk-font);font-style:italic;font-weight:900;box-shadow:0 2px 0 #14264a33;margin:0}
body #menu .kstyle button.selected{background:linear-gradient(180deg,var(--wk-yellow),var(--wk-orange));color:#fff;-webkit-text-stroke:2.5px var(--wk-ink);paint-order:stroke fill;border-color:#fff;box-shadow:0 0 0 2px var(--wk-ink)}

/* R57 Online-Bestenliste (Zeitfahr-Ergebnis und Online-Fenster) */
.lb-box{margin:12px 0 4px;padding:10px 12px;border-radius:14px;background:#15133a0d;box-shadow:inset 0 0 0 2px #15133a1a;text-align:left}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-family:var(--wk-font);font-style:italic;font-weight:900;color:var(--wk-ink)}
.lb-head select,.lb-head input{min-width:0;max-width:60%;font:700 14px/1.2 system-ui,sans-serif;padding:5px 8px;border-radius:9px;border:2px solid #15133a33;background:#fff;color:var(--wk-ink)}
body .modal .lb-list{margin:4px 0;gap:2px}
body .modal .lb-list li{display:flex;gap:8px;padding:4px 10px;font-size:14px;align-items:center}
body .modal .lb-list li span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .modal .lb-list li.lb-note{background:none;font-style:italic;font-weight:600;opacity:.75;justify-content:center}
/* R93: kleiner Geist-Knopf am Zeilenende - gegen den Geist dieses Eintrags fahren */
.lb-duel{flex:none;padding:2px 8px!important;font-size:15px;line-height:1.4;border-radius:10px;background:#ffffff2b;border:none;cursor:pointer}
.lb-duel:hover{background:#ffffff52;transform:translateY(-1px)}
.lb-box .lb-post{width:100%;margin:6px 0 2px}
.lb-hint{margin:4px 0 0;font-size:12px;line-height:1.3;opacity:.7;color:var(--wk-ink)}

/* R57 Handy hochkant: vier Modi passen nicht in eine Zeile (Zeitfahren abgeschnitten, Kotzhügel Fight ragte hinaus)
   -> 2x2-Raster; Lenkhilfe und Grafik je eine volle Zeile (Sparsam ragte rechts hinaus) */
@media (max-width:480px){
 body #menu #modes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 body #menu #modes button{min-width:0;padding-top:7px;padding-bottom:7px}
 body #menu .menu-picks .pick:has(#assist),body #menu .menu-picks .gfx-pick{grid-column:1/-1}
 body #menu #assist,body #menu #gfx{width:100%;box-sizing:border-box}
 body #menu #assist button,body #menu #gfx button{flex:1 1 0;min-width:0}
}

/* R59 Handy hochkant, Zwei-Tasten-Lenkung (Nutzerhinweis "Links-Taste zu klein, erwische sie staendig nicht"):
   Lenktasten hoeher, die linke breiter und mit unsichtbarer Trefferzone bis an den Rand und nach oben; die Aktionstasten
   so klein, dass alles in 100vw passt (vorher ragten Gas und Bremse rechts aus dem Bild) */
@media (pointer:coarse) and (orientation:portrait){
 body:not(.onehand) #touch{padding:0 8px calc(10px + env(safe-area-inset-bottom,0px))}
 body:not(.onehand) #touch .steer{gap:8px;padding:6px}
 body:not(.onehand) #touch .steer button{height:clamp(140px,22vh,196px);border-radius:30px;font-size:42px;position:relative}
 body:not(.onehand) #touch .steer button:first-child{width:27vw}
 body:not(.onehand) #touch .steer button:last-child{width:23vw}
 body:not(.onehand) #touch .steer button::before{content:'';position:absolute;top:-28px;bottom:-12px;left:-4px;right:-4px}
 body:not(.onehand) #touch .steer button:first-child::before{left:-24px}
 body:not(.onehand) #touch .act{gap:8px 8px}
 body:not(.onehand) #touch .t-gas{width:21vw;height:21vw;max-width:96px;max-height:96px}
 body:not(.onehand) #touch .t-drift{width:19vw;height:19vw;max-width:86px;max-height:86px;margin-bottom:14px}
 body:not(.onehand) #touch .t-item{width:17vw;height:17vw;max-width:78px;max-height:78px}
 body:not(.onehand) #touch .t-brake{width:13vw;height:13vw;max-width:60px;max-height:60px}
}

/* R61 schmales Hochformat (<=420 px): Online-Knopf ragte aus der Menuekarte und deckte "Lederhosn" ab -
   jetzt kompakt (Globus ueber dem Wort); waagrechter Rollbalken des Menues weg */
#menu{overflow-x:hidden}
@media (max-width:420px){
 body #menu .menu-brand{gap:8px}body #menu .menu-brand>div{min-width:0}
 body #menu .online-btn{grid-template-columns:auto;justify-items:center;padding:4px 9px 5px;border-radius:14px}
 body #menu .online-btn span{grid-row:auto;font-size:18px;line-height:1}
 body #menu .online-btn b{font-size:13px;-webkit-text-stroke:2.5px var(--wk-ink);text-align:center}
}

/* R60: elf Strecken (#tracks.many) - breit und Handy quer sechs Karten je Reihe (zwei Reihen wie vorher mit acht), die
   elfte fuellt die Reihe; Handy hochkant drei je Reihe; kleines Handy quer vier je Reihe */
body #menu #tracks.many .track b{white-space:normal;line-height:1.05}
@media (min-width:761px){
 body #menu #tracks.many .track{grid-column:span 2}
 body #menu #tracks.many .track:nth-child(11):last-child{grid-column:span 4}
 body #menu #tracks.many .track b{font-size:12px;left:6px;right:4px;bottom:13px;-webkit-text-stroke:3px #0b0a22}
 body #menu #tracks.many .track u{display:none}
 body #menu #tracks.many .track .best{font-size:9.5px;left:6px;bottom:2px}
 body #menu #tracks.many .track i{width:22px;height:22px;font-size:12px;left:5px;top:5px;border-radius:7px}
}
@media (max-width:620px){body #menu #tracks.many .track:nth-child(11):last-child{grid-column:span 4}}
@media (pointer:coarse) and (orientation:landscape){
 body #menu #tracks.many .track{grid-column:span 2}
 body #menu #tracks.many .track:nth-child(11):last-child{grid-column:span 4}
 body #menu #tracks.many .track b{font-size:10px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-width:760px){
 body #menu #tracks.many .track{grid-column:span 3}
 body #menu #tracks.many .track:nth-child(11):last-child{grid-column:span 6}
}

/* R60 Online: Lobby-Leiste, Chat-Verlauf, Chat-Leiste, Knoepfe */
#lobbyBar{position:fixed;left:50%;top:max(12px,calc(env(safe-area-inset-top) + 8px));transform:translateX(-50%) skewX(-6deg);z-index:6;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 16px;border-radius:16px;
 background:linear-gradient(180deg,#ffffffee,#e7f3ffe6);box-shadow:0 0 0 3px var(--wk-ink,#14264a),0 5px 0 3px var(--wk-ink,#14264a);color:var(--wk-ink,#14264a);max-width:calc(100vw - 24px);white-space:nowrap;font-family:var(--wk-font)}
#lobbyBar[hidden]{display:none}
#lobbyBar b{font-style:italic;font-weight:900;font-size:12px;letter-spacing:.8px;color:var(--wk-red,#e8202a)}
#lobbyBar strong{font-style:italic;font-weight:900;font-size:26px;line-height:1;color:var(--wk-yellow,#ffd21f);-webkit-text-stroke:5px var(--wk-ink,#14264a);paint-order:stroke fill;font-variant-numeric:tabular-nums}
#lobbyBar span{font-weight:900;font-size:14px}
#lobbyBar small{font-weight:700;font-size:11.5px;opacity:.8;overflow:hidden;text-overflow:ellipsis}
#lobbyBar button{pointer-events:auto;padding:6px 12px;border-radius:12px;border:2.5px solid #fff;background:linear-gradient(180deg,#4ad06a,#1f9a4b);color:#fff;font-weight:900;font-style:italic;box-shadow:0 0 0 2.5px var(--wk-ink,#14264a);cursor:pointer}
body.battle #lobbyBar,body:not(.racing) #lobbyBar{display:none}
#chatFeed{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(210px + env(safe-area-inset-bottom,0px));z-index:6;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;max-width:min(420px,60vw);pointer-events:none}
#chatFeed[hidden]{display:none}
#chatFeed li,#onChatLog li{padding:4px 10px;border-radius:12px;background:#14264ad0;color:#fff;font-size:14px;font-weight:700;line-height:1.25;word-break:break-word;animation:chatIn .25s ease-out}
#chatFeed li b,#onChatLog li b{color:#ffd21f;font-weight:900}
#chatFeed li.me b,#onChatLog li.me b{color:#7ff0c0}
#chatFeed li.sys,#onChatLog li.sys{background:#2f6bffcc;font-weight:800;font-size:13px}
#chatFeed li .emo,#onChatLog li .emo{font-size:22px;line-height:1}
@keyframes chatIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
#chatBar{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:12;width:min(620px,calc(100vw - 20px));padding:10px;border-radius:18px;background:#ffffffee;
 box-shadow:0 0 0 3px var(--wk-ink,#14264a),0 6px 0 3px var(--wk-ink,#14264a);display:flex;flex-direction:column;gap:8px}
#chatBar[hidden]{display:none}
#chatBar .ch-emo,.on-chat-emo{display:flex;flex-wrap:wrap;gap:5px}
#chatBar .ch-emo button,.on-chat-emo button{font-size:22px;line-height:1;width:40px;height:40px;border-radius:12px;border:2px solid #14264a22;background:#f2f6ff;cursor:pointer;padding:0}
#chatBar .ch-quick{display:flex;flex-wrap:wrap;gap:5px}
#chatBar .ch-quick button{padding:6px 10px;border-radius:999px;border:2px solid #14264a;background:#ffd21f;color:#14264a;font-weight:900;font-size:12.5px;cursor:pointer}
#chatForm,#onChatForm{display:flex;gap:6px}
#chatForm input,#onChatForm input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:2.5px solid #14264a;font-size:16px;font-weight:700;color:#14264a;background:#fff}
#chatForm button,#onChatForm button{padding:0 16px;border-radius:12px;border:2.5px solid #14264a;background:linear-gradient(180deg,#4ad06a,#1f9a4b);color:#fff;font-weight:900;cursor:pointer}
header .top-actions #netBtn,header .top-actions #chatBtn{font-size:18px}
header .top-actions #netBtn[hidden],header .top-actions #chatBtn[hidden]{display:none}
.on-chat{display:flex;flex-direction:column;gap:6px;margin:8px 0}
#onChatLog{list-style:none;margin:0;padding:6px;max-height:150px;min-height:44px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;border-radius:12px;background:#0a142833}
.on-chat-emo button{width:34px;height:34px;font-size:18px}
#onlineBtn small.live{color:#7fff9a}
@media (max-width:620px){#lobbyBar{top:calc(112px + env(safe-area-inset-top,0px));gap:7px;padding:5px 10px}#lobbyBar b{display:none}#lobbyBar strong{font-size:20px}#lobbyBar small{display:none}
 #chatFeed{bottom:calc(250px + env(safe-area-inset-bottom,0px));max-width:70vw}#chatFeed li{font-size:12.5px}}
@media (pointer:coarse) and (orientation:landscape){#lobbyBar{top:calc(8px + env(safe-area-inset-top,0px))}#lobbyBar small{display:none}#chatFeed{bottom:auto;top:calc(120px + env(safe-area-inset-top,0px))}}
#onlineBtn.pulse{animation:wkPulse 1.6s ease-in-out infinite}

/* R60 Wiesnland-Herausforderungen */
#owCh{display:block;font-weight:900;font-size:12.5px;margin-top:3px;color:var(--wk-blue,#1f5cc8)}
#chPop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:190px;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:16px;background:linear-gradient(180deg,#ffffffee,#e7f3ffe6);
 box-shadow:0 0 0 3px var(--wk-ink,#14264a),0 5px 0 3px var(--wk-ink,#14264a);color:var(--wk-ink,#14264a);pointer-events:none;transform:skewX(-6deg);font-family:var(--wk-font);min-width:220px;animation:chIn .2s ease-out}
#chPop[hidden]{display:none}
#chPop i{font-style:normal;font-size:30px}
#chPop small{display:block;font-weight:900;font-size:11.5px;letter-spacing:.6px;color:var(--wk-red,#e8202a);text-transform:uppercase}
#chPop b{display:block;font-style:italic;font-weight:900;font-size:26px;line-height:1.05;color:var(--wk-yellow,#ffd21f);-webkit-text-stroke:5px var(--wk-ink,#14264a);paint-order:stroke fill;font-variant-numeric:tabular-nums}
#chPop em{display:block;font-style:normal;font-weight:800;font-size:11.5px}
#chPop span{font-size:22px;color:#ffb800;letter-spacing:1px;text-shadow:0 2px 0 #14264a}
@keyframes chIn{from{opacity:0;transform:skewX(-6deg) translateX(20px)}to{opacity:1;transform:skewX(-6deg)}}
@media (max-width:620px){#chPop{top:calc(200px + env(safe-area-inset-top,0px));min-width:0;padding:6px 10px}#chPop b{font-size:20px}#chPop i{font-size:24px}}

/* R61 Cups: Auswahl nur im Grand Prix - vier Knoepfe (drei Vierer-Cups + Marathon); Strecken ausserhalb des Cups
   blass, die vier Cup-Strecken mit ihrer Reihenfolge 1-4 */
body #menu #cups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body #menu #cups[hidden]{display:none}
body #menu #cups .cup{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;text-align:left;padding:6px 8px;position:relative;min-width:0}
body #menu #cups .cup i{grid-row:span 2;font-style:normal;font-size:22px;transform:skewX(10deg)}
body #menu #cups .cup b{font-size:12.5px;line-height:1.02;transform:skewX(10deg);overflow-wrap:anywhere}
body #menu #cups .cup small{font-size:10px;font-weight:800;opacity:.8;transform:skewX(10deg);white-space:nowrap}
body #menu #cups .cup .cup-tro{position:absolute;right:3px;top:-9px;font-style:normal;font-size:16px;transform:skewX(10deg);filter:drop-shadow(0 2px 0 #14264a88)}
body #menu #tracks.gpcups .track.outcup{opacity:.36;filter:saturate(.35)}
body #menu #tracks.gpcups .track.incup[data-cupn]:after{content:attr(data-cupn);position:absolute;left:auto;right:6px;top:6px;z-index:3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--wk-yellow);color:var(--wk-ink);font:italic 900 13px var(--wk-font);box-shadow:0 0 0 2px var(--wk-ink)}
@media (max-width:480px){body #menu #cups{grid-template-columns:1fr 1fr}}

/* R61 Online als Standardmodus: eigener blauer Modus-Knopf, der Startknopf wird im Online-Modus blau */
body #menu #modes .mode-online{border-color:#4a9dff}
body #menu #modes .mode-online:not(.selected){background:linear-gradient(180deg,#eef6ff,#d3e7ff)}
body #menu #modes .mode-online.selected{background:linear-gradient(180deg,#4a9dff,var(--wk-blue) 60%,#155aa8)}
body.m-online #menu #start{filter:hue-rotate(205deg) saturate(1.15)}
body.m-online #menu #tracks.locked,body.m-online #menu #classes.locked{opacity:.45}

/* R61 CRT-Modus: Knopf neben der Grafikstufe; das HTML-HUD bekommt feine Scanlines und einen Hauch Leuchten */
body #menu #crtBtn{margin-top:6px;width:100%;transform:skewX(-10deg);border-radius:11px;background:#fff;color:var(--wk-ink);border:2.5px solid #15133a26;box-shadow:0 3px 0 #15133a33;font:italic 800 13px var(--wk-font);padding:5px 8px;cursor:pointer}
body #menu #crtBtn.selected{background:linear-gradient(180deg,#7fe3ff,#2aa6d8);color:#fff;border-color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
body.crt:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
body.crt #hud{text-shadow:0 0 6px #ffffff55}

/* R61 Controller-Menue: deutlich sichtbarer Fokus (gelber Rahmen mit dunkler Kontur), Fernseher/Xbox: Sicherheitsrand,
   keine Touch-Tasten, Hinweis zur Spielsteuerung in Edge */
.padf{outline:4px solid #ffd23f!important;outline-offset:3px!important;box-shadow:0 0 0 8px #14264a,0 0 22px 8px #ffd23faa!important}
body.tv #touch{display:none!important}
body.tv #menu .menu-panel{margin-bottom:max(4vh,24px)}
/* R88 Xbox/TV (Nutzerbericht): Fenstertext und Knoepfe fuer drei Meter Abstand groesser, teures
   Hintergrund-Blur auf der Konsole aus - die 3D-Szene dahinter rendert trotzdem weiter */
body.tv .modal{backdrop-filter:none}
body.tv .modal>div,body.tv #ceremony>div{width:min(720px,95vw);padding:26px 30px}
body.tv .modal h2{font-size:38px}
body.tv .modal button,body.tv #ceremony button{font-size:19px;padding:15px 20px;min-height:52px}
body.tv .modal li,body.tv #ceremony li{font-size:17px;padding:9px 0}
body.tv .modal p,body.tv #ceremony p{font-size:17px}
body.tv #online input,body.tv #online select{font-size:17px;padding:10px 12px}
body.tv #online .on-chat input{font-size:16px}
body.tv #resultStats div,body.tv #resultProg div{font-size:16px}
body.tv #toast{font-size:18px}
#tvHint{position:fixed;left:50%;top:max(12px,3vh);transform:translateX(-50%);z-index:30;max-width:min(680px,calc(100vw - 32px));padding:10px 16px;border-radius:14px;
 background:#14264aee;color:#fff;font:700 15px/1.3 var(--wk-font);box-shadow:0 0 0 2.5px #ffd23f,0 8px 24px #0008;text-align:center}
#tvHint b{color:#ffd23f}

/* R63 Rueckspiegel: Rahmen um den eingeblendeten Rueckblick (das Bild zeichnet der Renderer darunter) */
#mirror{position:fixed;z-index:12;pointer-events:none;border:3px solid #14264a;border-radius:10px;box-shadow:0 0 0 2px #ffffffd0,0 4px 12px #0006;transition:opacity .12s}
#mirror b{position:absolute;left:50%;top:-24px;transform:translateX(-50%) skewX(-8deg);white-space:nowrap;font:italic 900 14px var(--wk-font,sans-serif);color:#ff4a3d;-webkit-text-stroke:3px #14264a;paint-order:stroke fill;animation:wkPulse 0.6s ease-in-out infinite}

/* ===== R65: Einfaches Startmenue - zwei grosse Knoepfe, Fahrer, Tagesaufgabe; alles andere hinter "Alle Modi" ===== */
#menu .quick,#menu .q-back{display:none}
body.menu-simple #menu .quick{display:flex;flex-direction:column;gap:12px}
body:not(.menu-simple) #menu .q-back{display:block;position:absolute;top:-4px;left:26px;z-index:5;margin:0;box-shadow:0 3px 0 var(--wk-ink);padding:5px 12px;border-radius:999px;border:2px solid var(--wk-ink);background:#fff;color:var(--wk-ink);font-family:var(--wk-font);font-weight:800;font-size:12.5px;cursor:pointer}
body.menu-simple #menu #modes,body.menu-simple #menu #classes,body.menu-simple #menu #tracks,body.menu-simple #menu #cups,body.menu-simple #menu #start,body.menu-simple #menu .menu-brand .online-btn,
body.menu-simple #menu .menu-picks .pick:not(:first-child),body.menu-simple #menu .menu-meta .controls,body.menu-simple #menu #trophies{display:none!important}
body.menu-simple #menu{align-items:center;justify-content:center}
body.menu-simple #menu .menu-panel{display:flex!important;flex-direction:column;gap:12px;width:min(480px,calc(100vw - 32px));max-width:480px;margin:auto;grid-template-areas:none}
body.menu-simple #menu .menu-picks{display:block;padding:10px 12px}
body.menu-simple #menu .menu-picks .pick:first-child{display:block}
body.menu-simple #menu #drivers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
body.menu-simple .menu-title{font-size:clamp(26px,6.5vw,40px)}
.q-btn{position:relative;display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:16px 20px;border-radius:20px;border:3px solid #fff;text-align:left;cursor:pointer;color:#fff;
 transform:skewX(-6deg);box-shadow:0 0 0 3px var(--wk-ink),0 7px 0 3px var(--wk-ink),0 16px 30px -14px #0008;transition:transform .12s}
.q-btn:hover,.q-btn.padf{transform:skewX(-6deg) translateY(-3px)}
.q-btn:active{transform:skewX(-6deg) translateY(2px)}
.q-btn>*{transform:skewX(6deg)}
.q-btn i{font-style:normal;font-size:40px;line-height:1;filter:drop-shadow(0 3px 0 #0005)}
.q-btn span{display:flex;flex-direction:column;gap:2px;min-width:0}
.q-btn b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:27px;letter-spacing:.4px;text-transform:uppercase;-webkit-text-stroke:5px var(--wk-ink);paint-order:stroke fill;line-height:1.05}
.q-btn small{font-weight:800;font-size:13px;opacity:.95;text-shadow:0 1px 0 #0006}
.q-online{background:linear-gradient(180deg,#4aa6ff,var(--wk-blue) 55%,#12509a);animation:wkPulse 1.8s ease-in-out infinite}
.q-race{background:linear-gradient(180deg,#ff4a4a,var(--wk-red) 55%,var(--wk-red2))}
.q-btn em{position:absolute;top:-12px;right:14px;padding:3px 10px 4px;border-radius:999px;background:var(--wk-yellow);color:var(--wk-ink);border:2.5px solid var(--wk-ink);
 font-style:normal;font-family:var(--wk-font);font-weight:900;font-size:13px;letter-spacing:.3px;box-shadow:0 3px 0 var(--wk-ink);animation:qBadge 1.4s ease-in-out infinite}
@keyframes qBadge{0%,100%{transform:skewX(6deg) rotate(-4deg) scale(1)}50%{transform:skewX(6deg) rotate(3deg) scale(1.08)}}
.q-online.live{background:linear-gradient(180deg,#5fd88a,#1f9a4b)}
.q-more{margin:2px 0 0;padding:10px 14px;border-radius:14px;border:2.5px dashed #14264a66;background:#ffffffb0;color:var(--wk-ink);font-family:var(--wk-font);font-weight:800;font-size:14px;cursor:pointer}
.q-more:hover,.q-more.padf{background:#fff;border-style:solid}
.q-hint{margin:0;text-align:center;font-size:12px;font-weight:700;color:#14264aa8}
.q-hint:empty{display:none}
@media (max-width:620px){.q-btn{padding:13px 16px;gap:11px}.q-btn i{font-size:32px}.q-btn b{font-size:22px;-webkit-text-stroke:4px var(--wk-ink)}.q-btn small{font-size:12px}}
@media (pointer:coarse) and (orientation:landscape){
 body.menu-simple #menu{padding:8px 76px 8px 12px}
 body.menu-simple #menu .menu-panel{width:min(560px,calc(100vw - 110px));gap:7px;padding:10px 14px}
 body.menu-simple #menu .quick{display:grid;grid-template-columns:1fr 1fr;gap:9px}
 body.menu-simple #menu .q-more,body.menu-simple #menu .q-hint{grid-column:1/-1}
 .q-btn{padding:9px 12px;gap:8px}.q-btn i{font-size:26px}.q-btn b{font-size:17px;-webkit-text-stroke:3.5px var(--wk-ink)}.q-btn small{font-size:10.5px}
 .q-more{padding:6px 10px;font-size:12px}
 body.menu-simple #menu .menu-meta{display:none}
}
/* Online-Lackierungen: kleines Weltkugel-Zeichen am Farbtupfer */
#menu #colors .swatch.onl{position:relative}
#menu #colors .swatch.onl:before{content:'🌐';position:absolute;right:-5px;bottom:-5px;font-size:11px;line-height:1}
/* R65: Online-Vorteile im Online-Fenster */
#online .on-perks{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
#online .on-perks span{padding:4px 10px;border-radius:999px;background:#fff6d6;border:2px solid #14264a33;font-size:12px;font-weight:700;color:#14264a}
#online .on-perks b{color:#d8262e}
.q-streak{color:#c2410c}
@media (max-height:520px){
 body.menu-simple #menu .menu-panel{width:min(620px,calc(100vw - 110px));gap:7px;padding:10px 14px;max-height:calc(100vh - 16px);overflow:auto}
 body.menu-simple #menu .quick{display:grid;grid-template-columns:1fr 1fr;gap:9px}
 body.menu-simple #menu .q-more,body.menu-simple #menu .q-hint{grid-column:1/-1}
 body.menu-simple .menu-title{font-size:24px}body.menu-simple .menu-title em{display:inline}body.menu-simple #menu .menu-tag{display:none}
 .q-btn{padding:9px 12px;gap:8px}.q-btn i{font-size:26px}.q-btn b{font-size:17px;-webkit-text-stroke:3.5px var(--wk-ink)}.q-btn small{font-size:10.5px}
 .q-btn em{top:auto;bottom:-10px;right:10px;font-size:11px}
 .q-more{padding:6px 10px;font-size:12px}
 body.menu-simple #menu .menu-meta{display:none}
}
/* R66: Aufsatz-Wahl (Voxel-Kosmetik) in der Fahrer-Karte */
#menu .top-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
#menu .top-row>small{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:10px;letter-spacing:1px;color:#14264a99}
#menu #toppers{display:flex;gap:5px;flex-wrap:wrap}
#menu #toppers button{width:34px;height:34px;margin:0;padding:0;border-radius:10px;border:2px solid #14264a33;background:#fff;font-size:17px;line-height:1;cursor:pointer;position:relative}
#menu #toppers button.selected{border-color:var(--wk-ink);background:var(--wk-yellow);box-shadow:0 3px 0 var(--wk-ink)}
#menu #toppers button.locked{filter:grayscale(1);opacity:.45}
#menu #toppers button.locked:after{content:'🔒';position:absolute;right:-4px;bottom:-5px;font-size:10px;filter:none}
body.menu-simple #menu .top-row{justify-content:center}
@media (max-height:520px){#menu #toppers button{width:28px;height:28px;font-size:14px}#menu .top-row{margin-top:5px}}
/* R66: Gluecksbrezn des Tages (Pixel-Brezn aus voxel.mjs, 2D gezeichnet) */
.lucky{display:flex;align-items:center;gap:12px;margin:0;padding:8px 14px;border-radius:16px;border:2.5px solid var(--wk-ink);background:linear-gradient(100deg,#fff4c9,#ffe08a);color:var(--wk-ink);
 box-shadow:0 4px 0 var(--wk-ink);cursor:pointer;text-align:left;animation:luckyWob 2.4s ease-in-out infinite}
.lucky[hidden]{display:none}
.lucky canvas{image-rendering:pixelated;width:60px;height:40px;flex:none;filter:drop-shadow(0 2px 0 #0004)}
.lucky .lucky-ico{font-style:normal;font-size:36px;line-height:1;width:60px;text-align:center;flex:none;filter:drop-shadow(0 2px 0 #0004)}
.lucky span{display:flex;flex-direction:column}
.lucky b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:16px}
.lucky small{font-weight:700;font-size:11.5px;color:#14264ab0}
.lucky.open{animation:luckyPop .8s ease-out}
.lucky.padf,.lucky:hover{transform:translateY(-2px)}
@keyframes luckyWob{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-2.5deg)}92%{transform:rotate(2.5deg)}95%{transform:rotate(-1.5deg)}}
@keyframes luckyPop{0%{transform:scale(1)}30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1);opacity:.4}}
.lucky-px{position:fixed;width:8px;height:8px;z-index:60;pointer-events:none;animation:luckyPx .9s cubic-bezier(.2,.7,.3,1) forwards;box-shadow:0 0 0 1px #14264a}
@keyframes luckyPx{to{transform:translate(var(--dx),var(--dy)) rotate(90deg);opacity:0}}
@media (max-height:520px){.lucky{grid-column:1/-1;padding:5px 10px}.lucky canvas{width:45px;height:30px}.lucky b{font-size:13px}.lucky small{font-size:10px}}
/* R66: Hinweise (Gluecksbrezn, Aufsatz, gesperrt) auch im Menue ueber der Karte */
body:not(.racing) #toast{z-index:70;top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));font-size:22px;-webkit-text-stroke:5px var(--wk-ink);max-width:92vw;white-space:normal;text-align:center}
/* R66: Spitznamen wuerfeln */
#online .on-name{position:relative}
#online #onDice{margin:0 0 0 6px;padding:4px 8px;border-radius:10px;border:2px solid #14264a33;background:#fff;font-size:18px;line-height:1;cursor:pointer;vertical-align:middle;width:auto}
#online #onDice:hover{transform:rotate(-12deg) scale(1.08)}
/* R66: Fahrschule (Tipps im ersten Rennen) */
#coach{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:8;display:flex;align-items:center;gap:10px;max-width:min(560px,92vw);
 padding:9px 16px;border-radius:16px;background:#fffdf3;border:3px solid var(--wk-ink);box-shadow:0 5px 0 var(--wk-ink);color:var(--wk-ink);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
#coach.on{opacity:1;transform:translate(-50%,0)}
#coach b{flex:none;padding:3px 8px;border-radius:999px;background:var(--wk-yellow);font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:12px}
#coach span{font-weight:800;font-size:15px;line-height:1.25}
@media (max-width:620px){#coach{bottom:calc(210px + env(safe-area-inset-bottom,0px))}#coach span{font-size:13px}}
@media (pointer:coarse) and (orientation:landscape){#coach{bottom:calc(120px + env(safe-area-inset-bottom,0px))}#coach span{font-size:12.5px}}
/* R68: Siegerkarte teilen */
#result .share-btn{display:block;margin:6px auto 4px;padding:7px 16px;border-radius:999px;border:2.5px solid var(--wk-ink);background:#fff;color:var(--wk-ink);font-family:var(--wk-font);font-weight:900;font-size:14px;box-shadow:0 3px 0 var(--wk-ink);cursor:pointer;width:auto}
#result .share-btn[hidden]{display:none}
#result .share-btn:hover{transform:translateY(-2px)}
body #result .share-btn,body #result .share-btn b{-webkit-text-stroke:0;text-shadow:none;font-style:normal;letter-spacing:.2px;text-transform:none;transform:none;background:#fff;color:var(--wk-ink);animation:none;min-height:0;font-size:14px;width:auto}
/* R69: Wochenziele-Karte */
body #menu #weekly{display:flex;flex-direction:column;gap:5px;margin:0;padding:8px 12px;border-radius:16px;border:2.5px solid var(--wk-ink);background:linear-gradient(100deg,#eef6ff,#fff);color:var(--wk-ink);box-shadow:0 4px 0 var(--wk-ink);text-align:left;cursor:pointer;width:100%}
body #menu #weekly .wk-head{display:flex;align-items:center;gap:8px}
body #menu #weekly .wk-head b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:12px;letter-spacing:1px;color:#1f78d1}
body #menu #weekly .wk-head i{font-style:normal;letter-spacing:2px;color:#1f9a4b;font-size:14px}
body #menu #weekly .wk-head em{flex:1;font-style:normal;font-weight:700;font-size:11.5px;color:#14264aa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #menu #weekly .wk-head u{text-decoration:none;font-weight:900}
body #menu #weekly .wk-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;align-items:center;gap:8px}
body #menu #weekly .wk-row small{font-weight:800;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #menu #weekly .wk-row small:last-child{text-align:right;color:#14264a99}
body #menu #weekly .wk-row s{height:8px;border-radius:99px;background:linear-gradient(90deg,#34c46a var(--p),#14264a22 var(--p));text-decoration:none}
body #menu #weekly .wk-row.ok small{color:#1f9a4b}
body #menu #weekly .wk-foot{font-size:11px;font-weight:700;color:#14264a99}
body #menu #weekly.done{background:linear-gradient(100deg,#fff6d6,#fff)}
@media (max-height:520px){body #menu #weekly{padding:5px 10px;grid-column:1/-1}}
/* R95 Wiesn-Saison: Karte unter den Wochenzielen - Kopfzeile mit Stufe und naechster Belohnung, Balken darunter */
body #menu #season{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;margin:0;padding:8px 12px;border-radius:16px;border:2.5px solid var(--wk-ink);background:linear-gradient(100deg,#eaffe9,#fff);color:var(--wk-ink);box-shadow:0 4px 0 var(--wk-ink)}
body #menu #season .sn-head{display:flex;align-items:center;gap:8px}
body #menu #season .sn-head b{font-family:var(--wk-font);font-style:italic;font-weight:900;font-size:12px;letter-spacing:1px;color:#2e8a3a}
body #menu #season .sn-head i{font-style:normal;font-weight:800;font-size:12.5px}
body #menu #season .sn-head em{flex:1;font-style:normal;font-weight:700;font-size:11.5px;color:#14264aa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #menu #season .sn-bar{height:9px;border-radius:99px;background:#14264a1c;overflow:hidden}
body #menu #season .sn-bar s{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5fc46a var(--p),#14264a22 var(--p));text-decoration:none}
@media (max-width:620px),(max-height:520px){body.menu-simple #menu #qHint{display:none}}
/* R69: Garagen-Vorschau in der Fahrer-Karte */
#menu #garage{display:block;width:220px;max-width:70%;aspect-ratio:360/220;height:auto;margin:-4px auto 4px;object-fit:contain;filter:drop-shadow(0 8px 6px #0003);pointer-events:none}
#menu #garage:not([src]){display:none}
@media (max-height:520px),(pointer:coarse) and (orientation:landscape){#menu #garage{width:150px}}

/* R70: 16-BIT-Knopf wie CRT */
body #menu #bitBtn{margin-top:6px;width:100%;transform:skewX(-10deg);border-radius:11px;background:#fff;color:var(--wk-ink);border:2.5px solid #15133a26;box-shadow:0 3px 0 #15133a33;font:italic 800 13px var(--wk-font);padding:5px 8px;cursor:pointer}
body #menu #bitBtn.selected{background:linear-gradient(180deg,#7fe3ff,#2aa6d8);color:#fff;border-color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
body #menu #bitBtn.selected{background:linear-gradient(180deg,#b48cff,#6a3cd8)}
/* R79: Arcade-480-Look (Dreamcast-artig) - eigener Knopf, orange gewaehlt */
body #menu #dcBtn{margin-top:6px;width:100%;transform:skewX(-10deg);border-radius:11px;background:#fff;color:var(--wk-ink);border:2.5px solid #15133a26;box-shadow:0 3px 0 #15133a33;font:italic 800 13px var(--wk-font);padding:5px 8px;cursor:pointer}
body #menu #dcBtn.selected{background:linear-gradient(180deg,#7fe3ff,#2aa6d8);color:#fff;border-color:#fff;box-shadow:0 0 0 2.5px var(--wk-ink),0 4px 0 2px var(--wk-ink);-webkit-text-stroke:3px var(--wk-ink);paint-order:stroke fill}
body #menu #dcBtn.selected{background:linear-gradient(180deg,#ffb45a,#e86a1a)}
/* R70: SOUND TEST (Easter Egg, 5x auf den Titel) im 16-Bit-Stil */
#soundTest{z-index:90;background:#000c}
#soundTest .st-card{max-width:560px;max-height:86vh;overflow:auto;margin:auto;padding:18px 20px;border:4px solid #fff;border-radius:6px;background:#1a1040;color:#fff;font-family:'Courier New',monospace;box-shadow:0 0 0 4px #000,8px 8px 0 #000}
#soundTest h2{margin:0;text-align:center;font:900 30px 'Courier New',monospace;letter-spacing:6px;color:#ffd23a;text-shadow:3px 3px 0 #d8262e}
#soundTest .st-sub{margin:4px 0 10px;text-align:center;font-size:12px;color:#b8b0e8}
#soundTest h3{margin:12px 0 6px;font:900 15px 'Courier New',monospace;letter-spacing:3px;color:#7fe3ff}
#soundTest .st-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#soundTest .st-list li{display:flex;align-items:center;gap:10px}
#soundTest button{margin:0;padding:4px 8px;border:2px solid #fff;border-radius:3px;background:#2a1c6a;color:#fff;font:700 13px 'Courier New',monospace;cursor:pointer;width:auto;transform:none;box-shadow:none;-webkit-text-stroke:0;text-shadow:none}
#soundTest button.on,#soundTest button:hover,#soundTest button.padf{background:#ffd23a;color:#1a1040}
#soundTest .st-sfx{display:flex;flex-wrap:wrap;gap:4px}
#soundTest .st-close{display:block;margin:14px auto 0;padding:6px 22px;background:#d8262e}
body.bit16 #toast{letter-spacing:1px}
/* R70: die (unsichtbare) Kopfleiste ueberdeckte im Menue den Titel - nur ihre Knoepfe fangen Klicks */
body:not(.racing) header{pointer-events:none}
body:not(.racing) header a,body:not(.racing) header button{pointer-events:auto}
#soundTest .st-list li span{flex:1;text-align:left;color:#fff;font:700 14px 'Courier New',monospace;letter-spacing:.5px;opacity:1}
/* R71: 16-Bit-Titelkarte zum Rennstart */
#stage{position:fixed;left:50%;top:11%;z-index:30;transform:translate(-160vw,0);display:none;flex-direction:column;align-items:center;gap:4px;min-width:min(520px,90vw);padding:12px 22px 14px;
 background:#1a1040f0;border:4px solid #fff;outline:4px solid #14264a;box-shadow:8px 8px 0 #000a;color:#fff;font-family:'Courier New',monospace;text-align:center;pointer-events:none}
#stage.in{display:flex;animation:stageIn .55s steps(7) forwards}
#stage.out{animation:stageOut .5s steps(6) forwards}
@keyframes stageIn{from{transform:translate(-160vw,0)}to{transform:translate(-50%,0)}}
@keyframes stageOut{from{transform:translate(-50%,0)}to{transform:translate(110vw,0)}}
#stage small{font-weight:900;font-size:13px;letter-spacing:3px;color:#7fe3ff}
#stage b{font:900 clamp(22px,5vw,38px) 'Courier New',monospace;letter-spacing:3px;color:#ffd23a;text-shadow:3px 3px 0 #d8262e,6px 6px 0 #000}
#stage span{font-weight:700;font-size:13px;color:#d8d0ff}
#stage i{font-style:normal;font-weight:900;font-size:12px;letter-spacing:2px;color:#fff;background:#d8262e;padding:2px 10px;margin-top:4px}
@media (pointer:coarse) and (orientation:landscape){#stage{top:14%;padding:8px 16px}}
/* R71: Wiesn-Taler-Rekord auf der Streckenkarte */
#menu #tracks .track em.taler{position:absolute;top:7px;right:30px;z-index:3;font-size:11px;font-weight:900;font-style:normal;line-height:1;padding:2px 5px;border-radius:999px;background:#14264acc;color:#ffd23a}
#menu #tracks .track em.taler:empty{display:none}

/* ===== R71: minimaleres Ingame-HUD (Nutzerwunsch) ===== */
body.hudmin #wxStrip{transition:opacity .5s;opacity:0;pointer-events:none}
body.hudmin #wxStrip.peek{opacity:1}
body.hudmin #itemName,body.hudmin #item kbd{display:none!important}
body.hudmin #draftHud{width:auto;min-width:0;padding:3px 8px;gap:5px;background:#15133a8c;border-color:#ffffff40}
body.hudmin #draftHud #draftTitle,body.hudmin #draftHud #draftHint{display:none}
body.hudmin #draftHud #draftMeter{width:70px}
body.hudmin #draftHud.ready{border-color:#7fffe8;box-shadow:0 0 12px #7fffe8aa}
body.hudmin #raceTip{display:none!important}

/* ===== R71: groessere Schrift auf dem Handy (Nutzerwunsch "im Handy-Modus Schrift zu klein") ===== */
@media (max-width:620px){
 body #menu .menu-tag{font-size:13px}
 .q-btn small{font-size:13.5px}
 .q-hint{font-size:13.5px}
 .q-more{font-size:15px}
 .lucky b{font-size:17px}.lucky small{font-size:13px}
 body #menu #daily small{font-size:12px}body #menu #daily b{font-size:16px}body #menu #daily em{font-size:13px}
 body #menu #weekly .wk-head b{font-size:13px}body #menu #weekly .wk-head em{font-size:12.5px}body #menu #weekly .wk-row small{font-size:13.5px}body #menu #weekly .wk-row{grid-template-columns:minmax(0,1fr) 70px 46px}
 #menu .top-row>small,body #menu .pick>small{font-size:12px}
 #menu #toppers button{width:38px;height:38px;font-size:19px}
 body #menu #tracks .track b{font-size:13px}
 body #menu .seg button b{font-size:15px}
 body #menu .ach-btn{font-size:14px}
 #coach span{font-size:15px}#coach b{font-size:13px}
 body:not(.racing) #toast{font-size:21px}
 #result h2{font-size:30px}#result #resultTime{font-size:15px}
 #resultStats span{font-size:11.5px!important}#resultStats b{font-size:17px!important}
 #resultProg .xp-parts span{font-size:13px}#resultProg .xp-head{font-size:15px}
 .ach-new .ach b{font-size:15px}.ach-new .ach small{font-size:12.5px}
 #online .on-sub{font-size:14px}#online .on-perks span{font-size:13px}#online label,#online .on-rooms b{font-size:15px}
 #achPanel #achList small{font-size:12.5px}
 #stage small,#stage span,#stage i{font-size:13px}
}
@media (pointer:coarse) and (orientation:landscape){
 body #menu .seg button b{font-size:13px}
 body #menu #tracks .track b{font-size:12px}
 .q-btn small{font-size:12px}.q-more{font-size:13.5px}
 body #menu #daily b{font-size:14px}body #menu #daily em{font-size:11.5px}
 body #menu #assist button,body #menu #gfx button{font-size:12px}
 #coach span{font-size:14px}
}

/* R72 Arcade-Paket: Speed-Trap-Blitz */
#trapFlash{position:fixed;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none;transition:opacity .45s ease-out}
#trapFlash.on{opacity:.5;transition:none}
@media (prefers-reduced-motion:reduce){#trapFlash.on{opacity:.12}}

/* R72 (Nutzerwunsch): die STAGE-Titelkarte verdeckte die Kamerafahrt - jetzt nur noch eine schmale, durchsichtige Zeile unten */
#stage{top:auto;bottom:calc(7% + env(safe-area-inset-bottom,0px));min-width:0;padding:0;gap:4px;background:none;border:0;outline:0;box-shadow:none;
  font-family:var(--wk-font,sans-serif);transform:translate(-50%,0);opacity:0;white-space:nowrap}
#stage.in{display:flex;animation:stageFade .5s ease-out forwards}
#stage.out{animation:stageFadeOut .5s ease-in forwards}
@keyframes stageFade{from{opacity:0}to{opacity:.9}}
@keyframes stageFadeOut{from{opacity:.9}to{opacity:0}}
#stage small{font-size:11px;font-weight:700;letter-spacing:3px;color:#fff;opacity:.85;text-shadow:0 1px 6px #000a}
#stage b{font:800 clamp(16px,3vw,22px) var(--wk-font,sans-serif);letter-spacing:4px;color:#fff;text-shadow:0 1px 8px #000b}
#stage span,#stage i{display:none}
@media (pointer:coarse) and (orientation:landscape){#stage{top:auto;bottom:calc(9% + env(safe-area-inset-bottom,0px));padding:0}}

/* R72 (Nutzerwunsch "mobiles Menue im Hochformat kaum lesbar"): hier nichts mehr unter 14-15 px */
@media (max-width:760px) and (orientation:portrait){
 body #menu .menu-tag{font-size:15.5px!important;line-height:1.35}
 body #menu #onlineBtn b,body #menu .mode b,body #menu .mode-online b{font-size:15px!important}
 body #menu .q-back{font-size:16px!important;padding:10px 14px}
 body #menu .track i,body #menu .track b{font-size:16px!important}
 body #menu .pick small,body #menu .top-row small,body #menu #daily small,body #menu #achBtnLvl{font-size:14px!important;letter-spacing:1.5px}
 body #menu #kstyle button,body #menu #assist button,body #menu #gfx button,body #menu #crtBtn,body #menu #bitBtn,body #menu #dcBtn{font-size:15px!important;padding:9px 12px;min-height:40px}
 body #menu #daily em,body #menu .wk-head b,body #menu .wk-head em{font-size:15px!important}
 body #menu .wk-head u,body #menu .wk-head i,body #menu #daily u,body #menu #achBtn{font-size:16px!important}
 body #menu #ctrlMode,body #menu #ctrlMode .pre{font-size:15px!important}
 body #menu #tracks{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 body #menu #tracks .track b{white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-height:1.2}
 body #menu #tracks .track{grid-column:auto!important;min-height:76px}
 body:not(.menu-simple) #menu .q-back{position:static;display:inline-block;margin:0 0 10px}
}

/* R72 (Nutzerwunsch "zu viele Texteinblendungen"): Meldungen und Hinweise sind kleine, durchsichtige Zeilen am unteren Rand,
   nur Countdown, O'ZAPFT IS und neue Bestzeit bleiben gross */
body #toast{top:auto!important;bottom:calc(14% + env(safe-area-inset-bottom,0px))!important;left:50%!important;padding:0!important;background:none!important;box-shadow:none!important;
  font-size:15px!important;font-style:normal!important;font-weight:700!important;letter-spacing:2.5px!important;line-height:1.25!important;text-transform:uppercase;color:#ffffffe6!important;
  -webkit-text-stroke:0!important;text-shadow:0 1px 6px #000b!important;max-width:calc(100vw - 32px)!important}
body #toast.good{color:#a9ffc1!important}body #toast.bad{color:#ffc2b8!important}
body #toast.mt-mini,body #toast.mt-super,body #toast.mt-ultra{color:#fff!important;box-shadow:none!important;text-shadow:0 1px 6px #000b!important}
body #message.quiet{top:auto!important;bottom:calc(19% + env(safe-area-inset-bottom,0px));transform:translate(-50%,0);font-size:17px!important;font-style:normal;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:#ffffffd8;-webkit-text-stroke:0!important;text-shadow:0 1px 6px #000b!important;animation:none}
@media (pointer:coarse) and (orientation:portrait),(max-width:760px) and (orientation:portrait){
 body #toast{top:calc(96px + env(safe-area-inset-top,0px))!important;bottom:auto!important}
 body #message.quiet{top:calc(124px + env(safe-area-inset-top,0px))!important;bottom:auto!important}
}
/* R73: "Strecke laedt" im Menue klein am unteren Rand statt mitten ueber den Knoepfen */
body:not(.racing) #trackLoading{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:6px 14px;gap:8px;font-size:13px;
  box-shadow:0 0 0 2px var(--wk-ink),0 3px 0 2px var(--wk-ink)}
body:not(.racing) #trackLoading i{width:12px;height:12px;border-width:2px}
/* R82: dezente Tempo-Vignette - Raender dunkeln bei hohem Tempo leicht ab */
#speedVin{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s linear;background:radial-gradient(ellipse at center,transparent 52%,rgba(12,16,38,.55) 100%);z-index:3}
#hud[hidden]~#speedVin{opacity:0!important}