/* ============================================================
   Betriebshof Tycoon – Stylesheet v9
   Grundstimmung: Nachtschicht im Revier. Amber-Licht auf dunklem
   Stahlblau, Emaille-Schilder, Monospace-Anzeigen – handgemacht.
   ============================================================ */
:root{
  --amber:#FFB63D; --amberHi:#FFD98A; --lime:#A6CE39; --limeHi:#CDE88A;
  --blau:#2B77DB; --bg:#05080F; --ink:#EEF1F7; --grau:#8B94A3;
  --line:rgba(148,163,184,.12);
  --panel:linear-gradient(180deg,rgba(30,41,59,.72),rgba(15,23,42,.86));
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);overflow:hidden}
body{font-family:'Space Grotesk',"Bahnschrift","DIN Alternate",system-ui,sans-serif;
  color:var(--ink)}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid rgba(255,182,61,.55);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Feine Körnung über allem – der "Druck auf Blech"-Charakter */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

@keyframes rise{60%{opacity:1}to{transform:translateY(-64px) scale(1.18);opacity:0}}
@keyframes ride{to{transform:translateX(var(--dx))}}
@keyframes goldRide{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 480px))}}
@keyframes twk{from{opacity:.4}to{opacity:1}}
@keyframes drift{to{transform:translateX(70px)}}
@keyframes tickmove{to{transform:translateX(-100%)}}
@keyframes avi{50%{opacity:.15}}
@keyframes winf{0%,88%{opacity:.75}92%{opacity:.15}96%{opacity:.75}}
@keyframes okGlow{0%,100%{box-shadow:0 0 8px rgba(166,206,57,.25),inset 0 1px 0 rgba(255,255,255,.18)}
  50%{box-shadow:0 0 22px rgba(166,206,57,.65),inset 0 1px 0 rgba(255,255,255,.18)}}
@keyframes goldPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(255,182,61,.7))}50%{filter:drop-shadow(0 0 22px rgba(255,214,120,1))}}
@keyframes shine{from{transform:translateX(-110%)}to{transform:translateX(340%)}}
@keyframes confFall{to{transform:translateY(110vh) rotate(760deg);opacity:.9}}
@keyframes comboPop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.92)}}
@keyframes coin{to{transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(.4);opacity:0}}
@keyframes signSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(-.7deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ============ LAYOUT: Die Szene ist das Interface ============ */
:root{--ground:344px;--road:258px;--roadH:86px;--sheetHalf:258px;--sheetMin:118px}
@media (min-width:920px){:root{--ground:130px;--road:0px;--roadH:130px}}
#root{position:fixed;inset:0;overflow:hidden;background:#05080F}
#depot{position:absolute;inset:0}

/* ============ HUD: schwebt über der Szene ============ */
#hud{position:absolute;left:16px;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:14;pointer-events:none}
/* Kontrast auf hellen Himmeln: harte Halo statt Verlaufsfläche (keine
   Kante wie bei einem Schleier-Hintergrund – wirkt bei jeder Tageszeit) */
#eyebrow{font-size:8.5px;letter-spacing:.26em;color:var(--ink);
  text-shadow:0 0 2px #000,0 0 5px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8)}
#money{font-size:36px;font-weight:800;line-height:1.1;color:var(--amber);
  text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.85),0 0 20px rgba(255,182,61,.45);font-variant-numeric:tabular-nums}
#hudSub{font-size:11px;margin-top:1px;text-shadow:0 0 2px #000,0 0 4px rgba(0,0,0,.85)}
#perSec{color:var(--lime);text-shadow:0 0 2px #000,0 0 4px rgba(0,0,0,.85),0 0 8px rgba(166,206,57,.4)}
#pax{color:#e8cf9c}
#chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;max-width:70vw}
.chip{display:none;font-family:var(--mono);font-size:10.5px;color:var(--amberHi);
  background:rgba(255,182,61,.12);border:1px solid rgba(255,182,61,.45);
  border-radius:6px;padding:1px 7px;animation:chipIn .25s ease}
.chip.on{display:inline-block}
#comboChip.on{color:var(--amberHi)}
#wetterChip.on{color:#B7C0CE;background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.3)}
#hudBtns{position:absolute;right:14px;top:calc(env(safe-area-inset-top,0px) + 14px);
  display:flex;gap:8px;z-index:14}
#acctChip{height:36px;display:flex;align-items:center;gap:7px;padding:0 12px;border-radius:18px;
  border:1px solid rgba(148,163,184,.22);background:rgba(16,21,31,.72);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:11px;color:var(--grau);max-width:130px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#acctChip .dot{width:7px;height:7px;border-radius:50%;background:#5a6474;flex:none}
#acctChip.user{color:var(--limeHi);border-color:rgba(166,206,57,.45)}
#acctChip.user .dot{background:var(--lime);box-shadow:0 0 8px rgba(166,206,57,.9)}
#acctChip:active{transform:scale(.96)}
#acctName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#setBtn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(148,163,184,.22);
  background:rgba(16,21,31,.72);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center}
#setBtn svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round}
#setBtn:active{transform:scale(.95)}

/* ---- Ziel-Leiste mit Fortschrittsring ---- */
@keyframes goalPop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
#goalBar{position:absolute;left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 108px);
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:17px;z-index:13;
  background:rgba(10,15,26,.72);backdrop-filter:blur(12px);
  border:1px solid rgba(255,182,61,.38);animation:goalPop .4s ease}
#goalRing{width:34px;height:34px;flex:none;transform:rotate(-90deg)}
#goalRing circle{fill:none;stroke:rgba(148,163,184,.2);stroke-width:3.5}
#goalRing #goalRingFg{stroke:var(--amber);stroke-linecap:round;stroke-dasharray:0 88;
  transition:stroke-dasharray .3s}
#goalMain{flex:1;min-width:0}
#goalLabel{font-size:8.5px;letter-spacing:.2em;color:#c9a04a}
#goalText{font-size:13px;font-weight:700;color:var(--amberHi);margin-top:1px;line-height:1.25}
#goalReward{flex:none;font-size:9px;font-weight:700;color:#EAF7C0;
  background:linear-gradient(#6E9324,#3F5811);border:1px solid rgba(166,206,57,.5);
  border-radius:6px;padding:3px 7px;white-space:nowrap}

/* ---- Tap-Ring: pulsierendes Tipp-Ziel in der Szene ---- */
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,182,61,.5)}100%{box-shadow:0 0 0 13px rgba(255,182,61,0)}}
#tapRing{position:absolute;left:50%;top:26%;transform:translateX(-50%);
  text-align:center;z-index:3;pointer-events:none;transition:opacity .4s ease;opacity:1}
#tapRing.hide{opacity:0}
#tapRingDot{width:50px;height:50px;margin:0 auto;border-radius:50%;
  border:1.5px solid rgba(255,217,138,.55);display:flex;align-items:center;justify-content:center;
  animation:pulseRing 1.8s ease-out infinite}
#tapRingDot i{width:9px;height:9px;border-radius:50%;background:var(--amberHi)}
#tapHint{margin-top:7px;font-size:9px;letter-spacing:.22em;color:var(--amberHi);opacity:.85}

/* ============ SZENE ============ */
#depot{overflow:hidden;cursor:pointer;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#03060C,#060D1B 30%,#0C1830 48%,
    #16294A calc(100% - var(--ground)),#191F29 calc(100% - var(--ground)))}
#vorplatz{position:absolute;left:0;right:0;bottom:0;height:var(--road);
  background:linear-gradient(#161B23,#0C0F15);pointer-events:none}
#stars,#stars::after{position:absolute;top:6%;left:4%;width:2px;height:2px;border-radius:50%;
  background:#fff;pointer-events:none;
  box-shadow:38px 8px 0 #ffffffcc,96px 26px 0 1px #ffffff88,150px 4px 0 #ffffffaa,
    210px 30px 0 #ffffff77,268px 12px 0 1px #ffffffbb,330px 24px 0 #ffffff88,
    400px 6px 0 #ffffffaa,470px 30px 0 #ffffff66,540px 10px 0 1px #ffffffcc,
    610px 22px 0 #ffffff88,680px 5px 0 #ffffffaa,750px 28px 0 #ffffff77,820px 12px 0 #ffffff99;
  animation:twk 4s ease-in-out infinite alternate}
#stars::after{content:"";top:18px;left:14px;
  box-shadow:60px 26px 0 #ffffff88,130px 40px 0 #ffffff66,240px 44px 0 #ffffff99,
    360px 38px 0 #ffffff70,480px 46px 0 #ffffff88,590px 40px 0 #ffffff60,
    710px 44px 0 #ffffff90,790px 36px 0 #ffffff70;animation-delay:2s}
#moon{position:absolute;right:14%;top:10%;width:34px;height:34px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle at 38% 34%,#FFF8E6,#E8DFC4 58%,#C9BE9C);
  box-shadow:0 0 26px 8px rgba(255,244,214,.16)}
.t-day #moon{display:none}
.t-morning #moon{opacity:.45}
.cloud{position:absolute;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(170,195,235,.07),transparent 68%)}
#c1{top:4%;left:-6%;width:52%;height:34%;animation:drift 110s ease-in-out infinite alternate}
#c2{top:16%;right:-10%;width:60%;height:30%;animation:drift 160s ease-in-out infinite alternate-reverse}
#glow{position:absolute;left:0;right:0;bottom:var(--ground);height:26%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(199,78,46,.16) 55%,rgba(255,182,61,.24))}
/* Die Kulissen-Höhe hängt an der BREITE, nicht an der Depot-Höhe: sonst zoomt
   "slice" auf hohen Desktop-Depots so weit rein, dass nur noch ein Drittel der
   Szene im Bild ist. So bleibt der Ausschnitt überall bei ~480 Einheiten. */
.lay{position:absolute;left:0;right:0;bottom:var(--ground);width:100%;pointer-events:none;
  max-height:56%}
#far{aspect-ratio:3.4/1} #near{aspect-ratio:2.67/1}
.avi{animation:avi 1.6s step-end infinite}
.win-f{animation:winf 7s step-end infinite}
.win-f2{animation:winf 9s step-end infinite reverse}
.lamp{position:absolute;bottom:var(--ground);width:110px;height:120px;pointer-events:none}
.lamp i{position:absolute;left:50%;bottom:0;width:3px;height:78px;
  background:linear-gradient(#39424f,#171c24);transform:translateX(-50%)}
.lamp u{position:absolute;left:50%;bottom:74px;width:9px;height:9px;border-radius:50%;
  background:var(--amber);transform:translateX(-50%);box-shadow:0 0 14px 4px rgba(255,182,61,.65)}
.lamp s{position:absolute;left:50%;bottom:-30px;width:96px;height:104px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,182,61,.17),rgba(255,182,61,.02) 78%,transparent);
  clip-path:polygon(41% 0,59% 0,100% 100%,0 100%)}
#road{position:absolute;left:0;right:0;bottom:var(--road);height:var(--roadH);pointer-events:none;
  background:linear-gradient(#2C3543 0,#2C3543 2px,#222A36 2px,#1A2029 62%,#161B23 100%)}
#road::before{content:"";position:absolute;left:0;right:0;top:44%;height:3px;
  background:repeating-linear-gradient(90deg,#3B4552 0 26px,transparent 26px 54px)}
/* eingelassene Straßenbahngleise in der vorderen Fahrspur */
#road::after{content:"";position:absolute;left:0;right:0;top:70%;height:15%;opacity:.5;
  background:linear-gradient(180deg,#48525F 0 1.5px,transparent 1.5px calc(100% - 1.5px),
    #48525F calc(100% - 1.5px) 100%)}
#fx{position:absolute;inset:0;pointer-events:none;z-index:5}
/* Der Hero-Wagen dreht Runden (JS-gesteuert): vorne links→rechts,
   hinten rechts→links. Position kommt per transform aus game.js. */
#hero{position:absolute;left:0;z-index:3;will-change:transform;
  pointer-events:none;filter:drop-shadow(0 9px 7px rgba(0,0,0,.55))}
.rider{position:absolute;pointer-events:none;animation:ride linear forwards}
/* ---- Coach-Sprechblase: begleitet nur die ersten Tutorial-Ziele ---- */
#coach{position:absolute;left:14px;bottom:calc(var(--sheetHalf) + 12px);right:100px;z-index:8;
  display:flex;align-items:flex-end;gap:9px;animation:chipIn .25s ease}
#coachAvatar{flex:none;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#243247,#0d1420);
  border:1.5px solid rgba(255,182,61,.6);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px rgba(255,182,61,.25);animation:bob 3s ease-in-out infinite}
#coachAvatar svg{width:22px;height:22px;stroke:var(--amber);fill:none;stroke-width:1.6}
#coachAvatar svg rect{fill:var(--amber);stroke:none}
#coachAvatar svg circle{stroke:var(--amberHi);stroke-width:1.2}
#coachBubble{position:relative;background:linear-gradient(#FDFBF3,#EBE7DA);color:#17233D;
  border-radius:12px 12px 12px 3px;padding:8px 26px 8px 11px;font-size:11.5px;line-height:1.4;
  box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(30,58,110,.5)}
#coachClose{position:absolute;right:5px;top:4px;width:18px;height:18px;border-radius:6px;
  color:#5a6474;font-size:13px;line-height:1}
#goldBus{position:absolute;left:-200px;z-index:7;padding:6px;display:none}
#goldBus.on{display:block;animation:goldRide 11s linear forwards,goldPulse 1s ease-in-out infinite}
#goldBanner{position:absolute;left:14px;bottom:calc(var(--road) + 130px);z-index:6;
  pointer-events:none;font-family:var(--mono);font-size:11px;color:var(--amberHi);
  background:rgba(20,13,2,.85);border:1px solid rgba(255,182,61,.6);border-radius:8px;
  padding:5px 12px;white-space:nowrap;display:none;animation:chipIn .3s ease;
  box-shadow:0 0 18px rgba(255,182,61,.35);max-width:94%;overflow:hidden;text-overflow:ellipsis}
#goldBanner.on{display:block}

/* ---- Sonderereignis "Störung": Mehrfach-Tipp an zufälliger Stelle ---- */
@keyframes stoerungPulse{0%,100%{box-shadow:0 0 8px rgba(255,182,61,.6)}
  50%{box-shadow:0 0 20px rgba(255,182,61,1)}}
#stoerung{position:absolute;z-index:7;width:52px;height:52px;border-radius:50%;
  display:none;align-items:center;justify-content:center;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#3a2a12,#1a1006);
  border:2px solid var(--amber);animation:stoerungPulse 1s ease-in-out infinite}
#stoerung.on{display:flex}
#stoerung svg{width:26px;height:26px;stroke:var(--amberHi);fill:none;stroke-width:1.8;
  stroke-linecap:round}
#stoerungCount{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;
  padding:0 4px;border-radius:9px;background:#E24C4C;color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.4)}

/* ---- Sonderereignis "Gericht": Timing-Sweetspot ---- */
#gericht{position:absolute;left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 108px);z-index:15;
  display:none;text-align:center;cursor:pointer;backdrop-filter:blur(10px);
  background:rgba(20,13,2,.9);border:1px solid rgba(255,182,61,.6);border-radius:10px;
  padding:8px 14px;box-shadow:0 0 18px rgba(255,182,61,.3);max-width:94%}
#gericht.on{display:block;animation:chipIn .3s ease}
#gerichtLabel{font-family:var(--mono);font-size:10.5px;color:var(--amberHi);
  margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gerichtBar{position:relative;width:auto;height:10px;border-radius:5px;
  overflow:hidden;background-image:linear-gradient(90deg,
    #7a2020 0%,#7a2020 30%,#7a6a20 30%,#7a6a20 42%,
    #2a6a20 42%,#2a6a20 58%,#7a6a20 58%,#7a6a20 70%,#7a2020 70%,#7a2020 100%)}
#gerichtMarker{position:absolute;top:-3px;left:0;width:3px;height:16px;
  background:#fff;border-radius:2px;box-shadow:0 0 6px rgba(255,255,255,.9);
  transform:translateX(-50%)}

/* Negativer Toast (Fahrzeugverlust, Strafzahlung) */
.toast.bad{border-color:#E24C4C;color:#FFB4AC;
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 14px rgba(226,76,76,.35)}

/* ---- Tageszeiten (Zusatz zur Design-Basis: Abend) ---- */
.t-night #depot{background:linear-gradient(180deg,#02040A,#050B18 34%,#0A1428 calc(100% - var(--ground)),#191F29 calc(100% - var(--ground)))}
.t-night #glow{opacity:.2}
.t-morning #depot{background:linear-gradient(180deg,#1B2743,#4A4668 40%,#C77E5A calc(100% - var(--ground) - 60px),#E8A56B calc(100% - var(--ground)),#191F29 calc(100% - var(--ground)))}
.t-morning #glow{opacity:.4}
.t-morning #stars{opacity:.3} .t-morning #stars::after{opacity:.2}
.t-day #depot{background:linear-gradient(180deg,#6E97C9,#93B5DC 42%,#BCD2E8 calc(100% - var(--ground)),#191F29 calc(100% - var(--ground)))}
.t-day #glow,.t-day #stars{display:none}
.t-day .cloud{background:radial-gradient(ellipse at center,rgba(255,255,255,.5),transparent 66%)}

/* ---- Silhouetten-Farbsystem: .sil = Flächen, .st = Streben/Linien ---- */
.sil{fill:#15203A}
.st{fill:none;stroke:#15203A;stroke-linecap:round;stroke-linejoin:round}
#far .sil2{fill:#101A31}
#near .sil{fill:#0A0F17}
#near .st{stroke:#0A0F17}
/* Doppelbock-Illustration: Tageszeit-Stimmung über Filter */
#bockImg{filter:brightness(.94) drop-shadow(0 4px 9px rgba(0,0,0,.4))}
.t-night #bockImg{filter:brightness(.8) drop-shadow(0 4px 9px rgba(0,0,0,.45))}
.t-morning #bockImg{filter:brightness(.92) saturate(1.05) drop-shadow(0 4px 9px rgba(0,0,0,.35))}
.t-day #bockImg{filter:brightness(1.16) saturate(.72) contrast(.96) drop-shadow(0 4px 9px rgba(0,0,0,.25))}
.t-day .sil{fill:#54688A} .t-day .st{stroke:#54688A}
.t-day #far .sil2{fill:#627497}
.t-day #near .sil{fill:#33415C} .t-day #near .st{stroke:#33415C}

.signTxt{fill:#FFB63D}
.t-day .signTxt{fill:#8EA2C0}

.t-day .lit{opacity:0 !important}
.t-day .lamp u{opacity:.2;box-shadow:none}
.t-day .lamp s{opacity:0}

/* ============ SHEET + DOCK: alles Weitere, ein Wisch entfernt ============ */
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:16;display:flex;flex-direction:column;
  border-radius:26px 26px 0 0;background:linear-gradient(180deg,rgba(13,19,32,.9),rgba(6,9,16,.97));
  backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.09);
  box-shadow:0 -18px 40px rgba(0,0,0,.45);padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 10px)}
#sheet.s-min{height:var(--sheetMin)}
#sheet.s-half{height:var(--sheetHalf)}
#sheet.s-full{top:calc(env(safe-area-inset-top,0px) + 52px);height:auto;border-radius:26px 26px 0 0}
#sheetGrab{display:block;width:100%;padding:2px 0 8px;flex:none}
#sheetGrab i{display:block;width:44px;height:4px;border-radius:2px;
  background:rgba(148,163,184,.4);margin:0 auto}
#sheetTop{display:none;flex:none;justify-content:space-between;align-items:center;margin-bottom:8px}
#sheet.s-full #sheetTop{display:flex}
#sheetMoney{font-size:15px;font-weight:800;color:var(--amber);text-shadow:0 0 12px rgba(255,182,61,.45)}
#sheetMoney small{font-size:10px;font-weight:700;color:var(--lime);margin-left:8px}
#sheetClose{font-size:9px;letter-spacing:.14em;color:var(--grau);padding:6px 2px 6px 12px}
#jetztDran{display:none;flex:none}
#sheet.s-half #jetztDran{display:block}
#jdHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#jdHead>span{font-size:9px;letter-spacing:.24em;color:#c9a04a}
#jdWarum{font-size:9.5px;color:var(--grau);padding:2px 0 2px 12px}
#jdCard{display:flex;align-items:center;gap:12px;padding:11px;border-radius:18px;
  background:linear-gradient(135deg,rgba(36,26,5,.9),rgba(22,15,2,.94));
  border:1px solid rgba(255,182,61,.4)}
#jdCard .jdIcon{flex:none;width:86px;height:56px;display:flex;align-items:flex-end;
  justify-content:center;border-radius:13px;overflow:hidden;
  background:radial-gradient(90% 75% at 50% 12%,rgba(255,182,61,.18),transparent 62%),
    linear-gradient(#0D1420,#0A0F18)}
#jdCard .jdIcon>div{margin-bottom:6px}
#jdCard .jdInfo{flex:1;min-width:0}
#jdCard .jdName{font-size:14.5px;font-weight:700;color:var(--amberHi)}
#jdCard .jdDesc{font-size:11px;color:#c9a04a;margin-top:2px;line-height:1.35}
#jdCard .jdBuy{flex:none;text-align:center;padding:10px 13px;border-radius:14px;
  background:linear-gradient(#FFC96B,#D68F1E);border:1px solid #FFDF9D;
  box-shadow:0 5px 16px rgba(255,182,61,.35);color:#241A05}
#jdCard .jdBuy.warten{background:linear-gradient(#1C4E93,#123A6E);
  border:1px solid rgba(43,119,219,.4);opacity:.75;color:var(--ink);box-shadow:none}
#jdCard .jdBuy small{display:block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.12em;font-weight:700;opacity:.75}
#jdCard .jdBuy .p{font-family:var(--mono);font-size:14px;font-weight:800}
#sheetBody{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
#sheet.s-full #sheetBody{display:block}
#sheetBody::-webkit-scrollbar{width:8px}
#sheetBody::-webkit-scrollbar-thumb{background:#232C3B;border-radius:4px}
.tab{display:none}.tab.on{display:block}
#dock{display:flex;gap:8px;margin-top:10px;flex:none}
#sheet.s-full #dock{display:none}
.tabBtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--grau);transition:opacity .2s}
.tabBtn .dIcon{position:relative;width:46px;height:46px;border-radius:16px;
  background:rgba(20,27,40,.7);border:1px solid rgba(148,163,184,.16);
  display:flex;align-items:center;justify-content:center;color:var(--grau)}
.tabBtn .dSvg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tabBtn .dLbl{font-size:9.5px;letter-spacing:.06em}
.tabBtn.on{color:var(--amberHi)}
.tabBtn.on .dIcon{background:linear-gradient(#241a05,#170f02);
  border:1px solid rgba(255,182,61,.55);color:var(--amberHi)}
.tabBtn.on .dLbl{font-weight:700}
.tabBtn.locked{opacity:.4}
.tabBtn .dot{display:none;position:absolute;right:-2px;top:-2px;width:9px;height:9px;
  border-radius:50%;background:var(--lime);border:2px solid #0A0F18;
  box-shadow:0 0 8px rgba(166,206,57,.9)}
.tabBtn .dot.on{display:block}
#sheetHint{flex:none;text-align:center;font-size:8.5px;letter-spacing:.1em;
  color:#5f6a7a;margin-top:9px}
#sheet.s-full #sheetHint{display:none}
#content{padding:0}

#modeRow{display:flex;gap:6px;margin-bottom:12px;justify-content:flex-end}
#modeRow button{padding:6px 11px;border-radius:9px;font-size:10px;font-family:var(--mono);
  font-weight:700;color:var(--grau);
  background:rgba(20,27,40,.7);border:1px solid rgba(148,163,184,.16)}
#modeRow button.on{border:1px solid rgba(255,182,61,.6);color:var(--amberHi);
  background:linear-gradient(#241a05,#170f02)}

.card{display:flex;gap:10px;align-items:center;padding:10px;border-radius:15px;
  margin-bottom:8px;background:linear-gradient(180deg,rgba(30,41,59,.6),rgba(15,23,42,.8));
  border:1px solid rgba(148,163,184,.12);transition:border-color .2s}
@media (hover:hover){
  .card:not(.locked):hover{border-color:rgba(255,182,61,.25)}
}
.card.locked{opacity:.45;filter:saturate(.4)}
.cIcon{flex:none;width:100px;height:68px;display:flex;align-items:flex-end;
  justify-content:center;border-radius:14px;overflow:hidden;position:relative;
  background:radial-gradient(90% 75% at 50% 12%,rgba(255,182,61,.16),transparent 62%),
    linear-gradient(#0D1420,#0A0F18);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.1)}
.cIcon>div{margin-bottom:7px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.cIcon::after{content:"";position:absolute;left:6%;right:6%;bottom:8px;height:2px;
  background:#242E3D;border-radius:2px}
.cInfo{flex:1;min-width:0}
.cName{display:flex;gap:7px;align-items:baseline;font-weight:700;font-size:14.5px}
.cCount{color:var(--amber);font-family:var(--mono);font-size:13px;
  text-shadow:0 0 6px rgba(255,182,61,.4)}
.cDesc{font-size:11.5px;color:var(--grau);margin-top:2px;line-height:1.4}
.cProd{font-size:11.5px;color:var(--lime);margin-top:4px;font-family:var(--mono)}
.cProd.konz{color:var(--amber)}
.ms{height:5px;background:#0A0F18;border-radius:4px;margin-top:6px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.1)}
.msFill{height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg,#c98a2c,var(--amber));box-shadow:0 0 8px rgba(255,182,61,.55)}
.buy{flex:none;border-radius:13px;padding:9px 10px;text-align:center;min-width:90px;color:var(--ink);
  background:linear-gradient(#1C4E93,#123A6E);border:1px solid rgba(43,119,219,.35);opacity:.6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.4)}
.buy:active{transform:scale(.96)}
.buy.ok{background:linear-gradient(#6E9324,#3F5811);border:1px solid rgba(166,206,57,.6);
  opacity:1;animation:okGlow 2.2s ease-in-out infinite}
.buy small{display:block;font-size:10px;color:rgba(255,255,255,.72);margin-bottom:2px}
.buy .p{font-family:var(--mono);font-size:13px;font-weight:700}
.upg .buy{min-width:100px;padding:9px 12px}
.done{color:var(--lime);font-size:12px;font-family:var(--mono);flex:none;
  text-shadow:0 0 6px rgba(166,206,57,.5)}

.netzBox{background:linear-gradient(180deg,rgba(30,41,59,.6),rgba(15,23,42,.8));
  border:1px solid rgba(148,163,184,.12);border-radius:15px;
  padding:12px;margin-bottom:9px}
.netzBox.prestige{border-color:rgba(166,206,57,.28)}
.netzBox h3{margin:0 0 9px;font-size:11px;letter-spacing:.28em;color:var(--grau);font-weight:600}
.statRow{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.statRow span:last-child{font-family:var(--mono);color:var(--amber);font-variant-numeric:tabular-nums}
#prestigeBtn{width:100%;padding:13px;border-radius:14px;margin-top:10px;font-weight:700;
  font-size:14px;letter-spacing:.04em;color:#EAF7C0;border:1px solid rgba(166,206,57,.5);
  background:linear-gradient(#5F7F1E,#3A520F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.4)}
#prestigeBtn:active{transform:scale(.98)}
#prestigeBtn:disabled{opacity:.4;pointer-events:none}
#wipeBtn{width:100%;padding:10px;margin-top:4px;border-radius:12px;
  border:1px solid #4a2626;color:#c98a8a;font-size:12px;background:#160d0d}

.achGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.achItem{display:flex;gap:8px;align-items:center;padding:8px;border-radius:12px;
  background:#0A0F18;box-shadow:inset 0 0 0 1px rgba(148,163,184,.1)}
.achItem svg{flex:none;width:22px;height:26px}
.achItem .plaq{fill:#1B2432;stroke:#2a3546;stroke-width:1}
.achItem .plaqStar{fill:#2a3546}
.achItem.got{box-shadow:inset 0 0 0 1px #6b5314,0 0 10px rgba(255,182,61,.12)}
.achItem.got .plaq{fill:#241a05;stroke:var(--amber)}
.achItem.got .plaqStar{fill:var(--amber)}
.achT{min-width:0}
.achN{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.achItem.got .achN{color:var(--amber)}
.achD{font-size:9.5px;color:var(--grau);line-height:1.3}

.netzBox input[type="text"],.netzBox textarea{
  width:100%;background:#0A0F18;border:1px solid rgba(148,163,184,.18);border-radius:10px;
  color:var(--ink);padding:10px;font-size:13px;font-family:inherit;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.netzBox input[type="text"]:focus{outline:none;border-color:rgba(255,182,61,.55);
  box-shadow:0 0 0 2px rgba(255,182,61,.15),inset 0 2px 6px rgba(0,0,0,.4)}
#nameFixed{font-size:12px;color:var(--limeHi);font-family:var(--mono);padding:4px 0}
#hideRow{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--grau);
  font-family:var(--mono);margin-top:9px;cursor:pointer;user-select:none}
#hideRow input{width:16px;height:16px;accent-color:var(--amber);cursor:pointer}
.boardBtn{width:100%;padding:11px;border-radius:10px;font-size:13px;margin-top:8px;font-weight:600;
  border:1px solid rgba(148,163,184,.22);background:linear-gradient(#1a2130,#10151f);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.boardBtn:active{transform:scale(.98)}
.boardBtn.blue{border:1px solid rgba(43,119,219,.5);background:linear-gradient(#1C4E93,#123A6E);color:var(--ink)}
.boardBtn.green{border:1px solid rgba(166,206,57,.4);background:linear-gradient(#5F7F1E,#3F5811);color:#EAF7C0}
#boardList{margin-top:13px}
.boardRow{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 0;
  border-bottom:1px solid rgba(148,163,184,.08)}
.boardRow:last-child{border-bottom:none}
.boardRow.me{color:var(--lime)}
.boardRank{width:22px;flex:none;color:var(--grau);font-family:var(--mono)}
.boardName{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boardVal{font-family:var(--mono);flex:none;font-variant-numeric:tabular-nums;color:var(--amber)}
.boardRow.me .boardVal{color:var(--lime)}
.boardEmpty{font-size:12px;color:var(--grau);line-height:1.5;padding:5px 0;margin:0}
.acctSync{font-size:11.5px;color:var(--grau);line-height:1.55;margin:8px 0}

/* ---- Betriebsaufträge (Tagesaufgaben) ---- */
.dailyRow{display:flex;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px solid rgba(148,163,184,.08)}
.dailyRow:last-child{border-bottom:none}
.dailyInfo{flex:1;min-width:0}
.dailyTxt{font-size:12.5px;font-weight:600;line-height:1.35}
.dailyRow.done .dailyTxt{color:var(--limeHi)}
.dailyProg{font-size:10.5px;color:var(--grau);font-family:var(--mono);margin-top:3px}
.dailyBar{height:5px;background:#0A0F18;border-radius:4px;margin-top:5px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.1)}
.dailyFill{height:100%;width:0%;border-radius:4px;transition:width .3s;
  background:linear-gradient(90deg,#c98a2c,var(--amber));box-shadow:0 0 8px rgba(255,182,61,.5)}
.dailyRow.done .dailyFill{background:linear-gradient(90deg,#84A82A,#A6CE39);
  box-shadow:0 0 8px rgba(166,206,57,.55)}
.dailyClaim{flex:none;padding:9px 13px;border-radius:11px;font-size:11px;font-weight:700;
  letter-spacing:.08em;color:#EAF7C0;border:1px solid rgba(166,206,57,.6);
  background:linear-gradient(#6E9324,#3F5811);animation:okGlow 2.2s ease-in-out infinite}
.dailyClaim:active{transform:scale(.95)}
.dailyCheck{flex:none;color:var(--lime);font-family:var(--mono);font-size:13px;
  text-shadow:0 0 6px rgba(166,206,57,.5);padding:0 6px}
.dailyBonus{font-size:11px;color:var(--grau);font-family:var(--mono);text-align:center;
  padding:9px 0 2px}
.dailyBonus b{color:var(--lime)}

/* ---- Direktion (Netzpunkte investieren) ---- */
.dirRow{display:flex;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px solid rgba(148,163,184,.08)}
.dirRow:last-child{border-bottom:none}
.dirInfo{flex:1;min-width:0}
.dirName{font-size:12.5px;font-weight:700}
.dirName .lvl{color:var(--lime);font-family:var(--mono);font-size:11px;margin-left:6px}
.dirDesc{font-size:10.5px;color:var(--grau);line-height:1.4;margin-top:2px}
.dirBtn{flex:none;min-width:72px;padding:9px 10px;border-radius:11px;text-align:center;
  color:var(--ink);background:linear-gradient(#1C4E93,#123A6E);
  border:1px solid rgba(43,119,219,.35);opacity:.55;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.dirBtn.ok{background:linear-gradient(#5F7F1E,#3F5811);border-color:rgba(166,206,57,.6);
  opacity:1;animation:okGlow 2.2s ease-in-out infinite}
.dirBtn:active{transform:scale(.95)}
.dirBtn small{display:block;font-size:9px;color:rgba(255,255,255,.7)}
.dirBtn .p{font-family:var(--mono);font-size:12.5px;font-weight:700}
.dirMax{flex:none;color:var(--amber);font-family:var(--mono);font-size:11px;
  text-shadow:0 0 6px rgba(255,182,61,.4);padding:0 6px}

/* ---- Lackiererei ---- */
#livGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.livItem{display:flex;gap:9px;align-items:center;padding:9px;border-radius:12px;
  text-align:left;background:#0A0F18;border:1px solid rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .15s}
.livItem:active{transform:scale(.97)}
.livItem.on{border-color:rgba(255,182,61,.7);box-shadow:0 0 12px rgba(255,182,61,.18),
  inset 0 1px 0 rgba(255,255,255,.06)}
.livItem.locked{opacity:.45;filter:saturate(.5);cursor:default}
.livSw{flex:none;width:26px;height:34px;border-radius:6px;overflow:hidden;display:flex;
  flex-direction:column;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.4)}
.livSw i{display:block;width:100%}
.livSw i:first-child{flex:2.2}
.livSw i:last-child{flex:1}
.livT{min-width:0}
.livT b{display:block;font-size:11.5px;line-height:1.25}
.livItem.on .livT b{color:var(--amberHi)}
.livT small{display:block;font-size:9.5px;color:var(--grau);line-height:1.35;margin-top:2px}

/* ---- Revier-Karte ---- */
#revKarte{display:block;width:100%;height:auto;background:
  radial-gradient(80% 60% at 50% 30%,rgba(43,119,219,.06),transparent 70%),#0A0F18;
  border-radius:14px;box-shadow:inset 0 0 0 1px rgba(148,163,184,.1);margin-bottom:4px}
#revKarte .revNode:hover circle:first-child{filter:drop-shadow(0 0 6px rgba(255,182,61,.5))}
#revDetail .buy{min-width:96px}
.revHead{display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 0 8px;border-bottom:1px solid rgba(148,163,184,.08);margin-bottom:4px}
.revHead>div{min-width:0;flex:1}

/* ---- Geteiltes Wetter: Szenen-Overlays ---- */
@keyframes wRegen{from{background-position:0 0,0 0}to{background-position:-60px 340px,-30px 240px}}
@keyframes wSchnee{from{background-position:0 0,0 0}to{background-position:34px 340px,-46px 260px}}
#wetterFx{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity 1s}
#wetterFx.w-regen{opacity:.4;
  background-image:
    repeating-linear-gradient(105deg,transparent 0 11px,rgba(170,200,235,.5) 11px 12px,transparent 12px 26px),
    repeating-linear-gradient(105deg,transparent 0 17px,rgba(170,200,235,.3) 17px 18px,transparent 18px 40px);
  background-size:60px 340px,80px 240px;
  animation:wRegen .5s linear infinite}
#wetterFx.w-schnee{opacity:.55;
  background-image:
    radial-gradient(2px 2px at 12px 22px,#fff 60%,transparent),
    radial-gradient(1.5px 1.5px at 40px 64px,#ffffffcc 60%,transparent);
  background-size:68px 85px,90px 130px;
  animation:wSchnee 6s linear infinite}
#wetterFx.w-hitze{opacity:.25;
  background:linear-gradient(180deg,rgba(255,182,61,.25),transparent 55%)}

/* ---- Statistik-Sparkline ---- */
#sparkBox{margin-top:10px;padding-top:9px;border-top:1px solid rgba(148,163,184,.08)}
#sparkLabel{font-size:9px;letter-spacing:.2em;color:var(--grau);font-family:var(--mono);
  margin-bottom:5px}
#sparkline{display:block;width:100%;height:40px;background:#0A0F18;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.08)}

/* ---- Einstellungen ---- */
.setRow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(148,163,184,.08);cursor:pointer;
  font-size:13px;user-select:none}
.setRow input[type="checkbox"]{width:18px;height:18px;accent-color:var(--amber);cursor:pointer}
.setRow input[type="range"]{flex:1;max-width:160px;accent-color:var(--amber);cursor:pointer}

/* ============ STARTBILDSCHIRM ============ */
/* Kein backdrop-filter und Zentrierung über margin:auto – beides vermeidet
   die iOS-Bugs, bei denen Trefferflächen nicht zum sichtbaren Knopf passen */
#startScr{position:fixed;inset:0;z-index:40;display:none;overflow-y:auto;
  padding:24px 16px}
#startScr.on{display:flex}
.startVeil{position:fixed;inset:0;
  background:
    radial-gradient(90% 60% at 50% 12%,rgba(255,182,61,.09),transparent 60%),
    radial-gradient(120% 100% at 50% 110%,rgba(5,8,15,.6),transparent 55%),
    linear-gradient(180deg,rgba(5,8,15,.9),rgba(5,8,15,.96))}
.startInner{position:relative;z-index:2;text-align:center;max-width:420px;
  width:100%;margin:auto;animation:chipIn .4s ease}
.startEmblem{margin-bottom:14px}
.startEmblem svg{width:46px;height:52px;filter:drop-shadow(0 0 10px rgba(255,182,61,.45))}
#startSign{position:relative;display:inline-block;padding:20px 38px 17px;
  border-radius:12px;transform:rotate(-1.2deg);animation:signSway 7s ease-in-out infinite;
  background:linear-gradient(172deg,#FDFBF3,#F0EDE0 55%,#D9D5C5);
  box-shadow:0 20px 55px rgba(0,0,0,.65),0 4px 14px rgba(0,0,0,.5),
    inset 0 0 0 3px #14181F,inset 0 0 0 6px rgba(30,58,110,.9),
    inset 0 2px 12px rgba(255,255,255,.75)}
#startSign .screw{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#EDEDED,#8B94A1 55%,#4A525E);
  box-shadow:0 1px 2px rgba(0,0,0,.5)}
#startSign .tl{left:9px;top:9px} #startSign .tr{right:9px;top:9px}
#startSign .bl{left:9px;bottom:9px} #startSign .br{right:9px;bottom:9px}
.signLine1{font-size:clamp(15px,4vw,19px);font-weight:700;letter-spacing:.34em;
  color:#1E3A6E;padding-left:.34em}
.signLine2{font-size:clamp(34px,10vw,52px);font-weight:800;letter-spacing:.1em;
  padding-left:.1em;line-height:1.05;color:#17233D;font-family:var(--mono)}
.startTag{margin:18px 0 22px;font-size:11px;letter-spacing:.3em;color:var(--amberHi);
  font-family:var(--mono);text-shadow:0 0 12px rgba(255,182,61,.5)}
#startBtns{display:flex;flex-direction:column;gap:10px;align-items:center;
  position:relative;z-index:2}
.startBtn{display:block;width:310px;max-width:84vw;padding:14px;min-height:48px;
  border-radius:14px;font-weight:700;letter-spacing:.14em;font-size:13px;
  transition:transform .08s}
.startBtn:active{transform:translateY(1px) scale(.99)}
.startBtn.primary{color:#241a05;border:1px solid #FFDf9d;
  background:linear-gradient(#FFC96B,#D68F1E);
  box-shadow:0 6px 20px rgba(255,182,61,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.startBtn.secondary{color:var(--ink);border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(#1a2130,#10151f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.4)}
.startBtn.ghost{background:none;border:none;color:var(--grau);font-size:11px;
  letter-spacing:.08em;padding:8px;font-weight:600;box-shadow:none}
.startBtn:disabled{opacity:.4;pointer-events:none}
.startBtn.wide{width:100%;max-width:none;margin-top:4px}
#startNote{margin:20px auto 0;max-width:320px;font-size:11.5px;color:var(--grau);line-height:1.6}
#startStatus{margin:10px auto 0;max-width:320px;min-height:14px;font-size:11px;
  color:#FF8A7A;font-family:var(--mono);line-height:1.5}
/* Beim Booten nur das Schild als Splash zeigen – Knöpfe erst, wenn klar ist,
   dass keine automatische Anmeldung läuft */
#startScr.boot #startBtns,#startScr.boot #startNote,#startScr.boot #startStatus{visibility:hidden}

/* ============ OVERLAYS ============ */
.ovl{position:fixed;inset:0;background:rgba(4,6,11,.92);display:none;align-items:center;
  justify-content:center;padding:24px;z-index:45}
.ovl.on{display:flex}
.sheet{position:relative;width:100%;max-width:360px;padding:22px;border-radius:20px;
  background:linear-gradient(180deg,#1B2432,#10151f);border:1px solid rgba(255,182,61,.5);
  box-shadow:0 0 40px rgba(255,182,61,.18),inset 0 1px 0 rgba(255,255,255,.07);
  animation:chipIn .25s ease}
.sheetTitle{font-size:13px;letter-spacing:.24em;color:var(--amberHi);margin:0 0 10px;font-weight:700}
.sheetTabs{display:flex;gap:6px;margin:0 30px 12px 0}
.sheetTabs button{flex:1;padding:12px 4px;min-height:44px;border-radius:10px;font-size:11px;
  letter-spacing:.1em;color:var(--grau);background:linear-gradient(#141b28,#0e131d);
  border:1px solid var(--line);font-weight:600}
.sheetTabs button.on{color:var(--amberHi);background:linear-gradient(#241a05,#170f02);
  border-color:rgba(255,182,61,.65)}
.sheetHint{font-size:11.5px;color:var(--grau);line-height:1.55;margin:0 0 12px}
.sheetClose{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:9px;
  color:var(--grau);font-size:16px;line-height:1;border:1px solid var(--line);background:#10151f}
.fld{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--grau);
  margin-bottom:10px;font-family:var(--mono)}
.fld input{width:100%;margin-top:5px;background:#0A0F18;border:1px solid rgba(148,163,184,.18);
  border-radius:10px;color:var(--ink);padding:11px;font-size:14px;font-family:inherit;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.fld input:focus{outline:none;border-color:rgba(255,182,61,.6);
  box-shadow:0 0 0 2px rgba(255,182,61,.18),inset 0 2px 6px rgba(0,0,0,.4)}
.err{min-height:16px;font-size:11.5px;color:#FF8A7A;margin:2px 0 8px;font-family:var(--mono);line-height:1.4}
.confBtn{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:14px;
  margin-top:10px;border:1px solid rgba(43,119,219,.4);
  background:linear-gradient(#16233c,#0f1828);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.confBtn small{display:block;font-size:10px;letter-spacing:.18em;color:var(--grau);
  margin-bottom:4px;font-family:var(--mono)}
.confBtn span{font-family:var(--mono);font-size:12px;color:var(--amber)}
.confBtn:active{transform:scale(.98)}

#modal{position:fixed;inset:0;background:rgba(4,6,11,.92);display:none;align-items:center;
  justify-content:center;padding:24px;z-index:30}
#modal.on{display:flex}
#modalBox{background:linear-gradient(180deg,#1B2432,#10151f);border:1px solid var(--amber);
  border-radius:20px;box-shadow:0 0 40px rgba(255,182,61,.25),inset 0 1px 0 rgba(255,255,255,.07);
  padding:24px;max-width:340px;text-align:center;animation:chipIn .25s ease}
#modalBox h2{margin:0 0 8px;font-size:17px}
#modalBox p{margin:0 0 6px;font-size:13px;color:var(--grau);line-height:1.55}
#modalBox .big{font-size:24px;margin:12px 0;font-family:var(--mono);color:var(--amber);
  text-shadow:0 0 14px rgba(255,182,61,.5);font-weight:800}
#modalBox button{margin-top:10px;padding:10px 28px;border:1px solid var(--amber);
  border-radius:12px;color:var(--amber);font-weight:700;background:linear-gradient(#241a05,#170f02)}
#toasts{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  display:flex;flex-direction:column;gap:6px;align-items:center;z-index:25;pointer-events:none}
.toast{background:linear-gradient(#191308,#0d0a04);border:1px solid var(--amber);
  color:var(--amberHi);padding:9px 15px;font-size:12px;font-family:var(--mono);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 14px rgba(255,182,61,.25);
  animation:chipIn .25s ease;transition:opacity .4s,transform .4s;max-width:100%}
.toast.lime{border-color:var(--lime);color:var(--limeHi);
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 14px rgba(166,206,57,.3)}
.toast.out{opacity:0;transform:translateY(8px)}
.conf{position:fixed;top:-14px;width:8px;height:13px;z-index:40;border-radius:2px;
  pointer-events:none;animation:confFall linear forwards}


/* ============ DESKTOP: schwebendes Panel + Dock-Leiste ============ */
@media (min-width:920px){
  #hud{left:24px;top:18px}
  #eyebrow{font-size:9px;letter-spacing:.28em}
  #money{font-size:44px}
  #hudSub{font-size:12px;margin-top:2px}
  #hudBtns{right:96px;top:24px}
  #goalBar{left:24px;right:auto;top:126px;width:370px}
  #coach{left:24px;right:auto;max-width:430px;bottom:146px}
  #goldBanner{left:24px;bottom:calc(var(--road) + 150px)}
  #gericht{left:36%;right:auto;top:18px;width:330px;transform:translateX(-50%)}
  #tapRing{left:42%;top:34%}
  #vorplatz{display:none}
  #sheet,#sheet.s-min,#sheet.s-half,#sheet.s-full{
    left:auto;right:88px;top:72px;bottom:20px;height:auto;border-radius:22px;
    border:1px solid rgba(148,163,184,.18);border-top:1px solid rgba(148,163,184,.18);
    box-shadow:0 24px 60px rgba(0,0,0,.5);width:352px;padding:14px}
  #sheetGrab,#sheetTop,#sheetHint{display:none !important}
  #jetztDran,#sheet.s-min #jetztDran,#sheet.s-half #jetztDran{display:block;margin-bottom:10px}
  #sheetBody,#sheet.s-min #sheetBody,#sheet.s-half #sheetBody{display:block}
  /* #dock steckt im DOM innerhalb von #sheet. Das Panel hat backdrop-filter,
     was es selbst zum Bezugsrahmen für position:fixed-Kinder macht (Spec:
     filter/backdrop-filter erzeugen einen Containing Block) – "fixed" landet
     also NICHT am Bildschirmrand, sondern innerhalb des Panels. Deshalb hier
     bewusst position:absolute + negativer right-Wert: rückt das Dock relativ
     zum Panel exakt so weit nach rechts raus, dass es sichtbar daneben sitzt
     (Panel bei right:88px, Dock soll bei right:20px vom Bildschirmrand enden
     -> 88px - 20px = 68px Abstand nach außen). */
  #dock,#sheet.s-full #dock{display:flex;position:absolute;right:-68px;top:0;
    flex-direction:column;gap:10px;margin:0;width:56px}
  .tabBtn{flex:none}
  .tabBtn .dIcon{width:52px;height:52px;border-radius:17px}
  .tabBtn .dLbl{font-size:8px}
}