/* ══════════════════════════════════════════════════════════════════════════
   ChillBot Community — Design-System „Eisgeist"
   Dark, Eisblau → Indigo → Violett, Glassmorphism, konsistentes Motion-System.
   Vanilla CSS, kein Build-Step. Aurora-Hintergrund + Micro-Interactions.
   ══════════════════════════════════════════════════════════════════════════ */

@import url("/static/css/tokens.css");
/* Panel-Designsystem (Hülle, Komponenten, Bewegung) — seit dem Redesign
   08/2026 die gemeinsame Grundlage ALLER Zuschauer-Seiten. Steht bewusst
   hier: community.css hängt in jeder Vorlage, damit war es genau ein
   Import statt acht Änderungen. */
@import url("/static/css/panel.css");

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-ui); -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden; position:relative;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(99,102,241,.4);color:#fff}

/* ── Aurora-Hintergrund (GPU-freundlich, langsam driftend) ─────────────────── */
/* ── Hintergrundschimmer ───────────────────────────────────────────────────
   Zwei driftende Farbwolken. Sie sahen vorher genauso aus wie jetzt, kosteten
   aber die halbe Bildrate: `filter:blur(90px)` auf zwei 60vw großen Flächen
   (rund 860×860 px) muss der Browser bei JEDER Änderung im Bild neu rastern —
   gemessen 8 fps auf der Rangliste, und der Schimmer liegt auf fast jeder
   Seite des Panels.

   Die Weichzeichnung ist hier aber gar nicht nötig: Weichheit kann der
   Farbverlauf selbst. Statt eines harten Verlaufs mit anschließendem Blur
   steht jetzt ein Verlauf mit mehreren Stufen da, der von innen nach außen
   ausläuft. Der wird EINMAL gezeichnet und danach nur noch verschoben —
   reine Compositor-Arbeit auf der Grafikkarte.

   Die Flächen sind etwas größer als vorher, weil der Blur den sichtbaren
   Bereich über die Elementkante hinaus gezogen hat. */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%,rgba(20,26,48,.9),transparent 60%),var(--bg)}
.aurora::before,.aurora::after{content:'';position:absolute;border-radius:50%;
  opacity:.62;will-change:transform}
.aurora::before{width:78vw;height:78vw;left:-20vw;top:-26vw;
  background:radial-gradient(circle,
    rgba(56,214,245,.28) 0%, rgba(56,214,245,.20) 20%, rgba(56,214,245,.115) 38%,
    rgba(56,214,245,.05) 56%, rgba(56,214,245,.015) 72%, rgba(56,214,245,0) 84%);
  animation:drift1 26s var(--e-io) infinite alternate}
.aurora::after{width:72vw;height:72vw;right:-22vw;bottom:-28vw;
  background:radial-gradient(circle,
    rgba(168,85,247,.25) 0%, rgba(168,85,247,.18) 20%, rgba(168,85,247,.10) 38%,
    rgba(168,85,247,.045) 56%, rgba(168,85,247,.014) 72%, rgba(168,85,247,0) 84%);
  animation:drift2 32s var(--e-io) infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-12vw,-8vh,0) scale(1.1)}}
#fx{position:fixed;inset:0;z-index:-1;pointer-events:none}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after{animation:none}
  .reveal{opacity:1!important;transform:none!important;animation:none!important}
  .coin,.badge-live.on .dot{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.reveal{opacity:0;transform:translateY(20px);
  animation:reveal .7s var(--e) forwards}
.reveal[data-d="1"]{animation-delay:.06s}.reveal[data-d="2"]{animation-delay:.12s}
.reveal[data-d="3"]{animation-delay:.18s}.reveal[data-d="4"]{animation-delay:.24s}
.reveal[data-d="5"]{animation-delay:.30s}.reveal[data-d="6"]{animation-delay:.36s}
@keyframes reveal{to{opacity:1;transform:none}}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);
  background:linear-gradient(to bottom,rgba(10,12,21,.86),rgba(10,12,21,.55));
  border-bottom:1px solid var(--stroke)}
/* Breite: mindestens die Inhaltsspalte (1120), bei Bedarf mehr — aber NIE mehr
   als das Fenster. `fit-content` zwischen den beiden Grenzen macht genau das:
   auf großen Schirmen darf die Leiste über die Spalte hinausragen (so sah sie
   immer schon aus), auf kleinen bleibt sie im Fenster und die Linkzeile rollt
   in sich selbst. Ein waagerechter Rollbalken am FENSTER würde jedes Layout
   darunter mitkippen — das ist der eine Ausgang, den es nicht geben darf. */
.nav-in{width:fit-content;min-width:min(1120px,100%);max-width:100%;
  margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);
  font-weight:700;font-size:18px;letter-spacing:-.4px}
.brand .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:20px;background:var(--grad);box-shadow:0 8px 22px -8px rgba(99,102,241,.7);
  position:relative;overflow:hidden}
.brand .mark::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 45%);mix-blend-mode:overlay}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Die Linkzeile ist die einzige Stelle, die nachgeben darf: sie rollt in sich
   selbst, sobald die Leiste ans Fenster stößt. Sichtbare Rollbalken wären in
   einer Navigation nur Lärm — gerollt wird mit Trackpad, Rad oder Wisch. */
.nav-links{display:flex;gap:4px;margin-left:8px;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{padding:9px 15px;border-radius:11px;font-size:14px;font-weight:600;
  flex:0 0 auto;white-space:nowrap;
  color:var(--muted);transition:color var(--t1),background var(--t1);position:relative}
.nav-links a:hover{color:var(--text);background:var(--card)}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{content:'';position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  border-radius:2px;background:var(--grad)}
.nav-links a.soon{opacity:.55;cursor:default}
.nav-links a .tag{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ice);margin-left:5px;vertical-align:middle}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.coin-pill{display:flex;align-items:center;gap:8px;padding:8px 15px 8px 12px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--stroke);font-family:var(--f-mono);font-weight:600;
  font-size:14.5px;transition:border-color var(--t1)}
.coin-pill:hover{border-color:var(--stroke-2)}
.coin-pill .c{color:var(--gold);font-size:16px}
.nav-av{width:38px;height:38px;border-radius:11px;background:var(--grad) center/cover;
  border:1.5px solid var(--stroke-2);display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px}
.ghost{padding:9px 15px;border-radius:11px;border:1px solid var(--stroke);background:var(--card);
  font-size:13.5px;font-weight:600;color:var(--muted);transition:var(--t1);cursor:pointer;white-space:nowrap}
.ghost:hover{color:var(--text);border-color:var(--stroke-2)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--f-ui);font-weight:800;font-size:15.5px;letter-spacing:.2px;border:0;
  padding:15px 28px;border-radius:14px;color:#fff;position:relative;overflow:hidden;
  transition:transform var(--t1) var(--e),box-shadow var(--t2) var(--e);will-change:transform}
.btn.grad{background:var(--grad);box-shadow:var(--shadow-glow)}
.btn.grad::after{content:'';position:absolute;inset:0;background:
  linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform var(--t3) var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn.grad:hover{box-shadow:0 26px 60px -18px rgba(99,102,241,.7)}
.btn.grad:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.twitch{background:linear-gradient(135deg,var(--twitch),#772ce8);
  box-shadow:0 18px 44px -14px rgba(145,71,255,.7)}
.btn.twitch svg{fill:#fff}
.btn.lg{padding:17px 34px;font-size:16.5px}
.btn svg{flex-shrink:0}

/* ── Glass-Panel ─────────────────────────────────────────────────────────── */
.panel{background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--stroke);
  border-radius:var(--r-lg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--elev-3);position:relative;overflow:hidden}
.panel::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}

/* ══ LANDING ═══════════════════════════════════════════════════════════════ */
/* Vertikaler Leerraum gestrafft (vorher 74/48): so ist der Skin-Beweis darunter
   schon ohne Scrollen angeschnitten sichtbar — das war der Hauptmangel der Seite. */
.hero{text-align:center;padding:46px 0 26px;position:relative}
.badge-live{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;margin-bottom:18px;border:1px solid;transition:var(--t2)}
.badge-live .lastSeen{color:var(--dim);font-weight:600}
.badge-live.on{color:#ff5c72;border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.1)}
.badge-live.off{color:var(--muted);border-color:var(--stroke);background:var(--card)}
.badge-live .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.badge-live.on .dot{box-shadow:0 0 0 0 rgba(255,92,114,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,92,114,0)}100%{box-shadow:0 0 0 0 rgba(255,92,114,0)}}
.hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,6.5vw,72px);
  line-height:1.02;letter-spacing:-2px;margin-bottom:20px}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{font-size:clamp(15px,2vw,18.5px);color:var(--muted);max-width:560px;margin:0 auto 24px;line-height:1.65}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* .btn ist inline-flex — das schlägt sonst das hidden-Attribut (Live-Wechsel) */
.hero .cta .btn[hidden]{display:none}
.hero .fineprint{margin-top:18px;font-size:12.5px;color:var(--dim)}

/* schwebende Coins */
.floaty{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.coin{position:absolute;font-size:26px;opacity:.5;filter:drop-shadow(0 6px 14px rgba(56,214,245,.4));
  animation:float 9s var(--e-io) infinite}
.coin:nth-child(1){left:8%;top:18%;animation-delay:0s}
.coin:nth-child(2){right:10%;top:24%;font-size:20px;animation-delay:-2s}
.coin:nth-child(3){left:16%;bottom:16%;font-size:32px;animation-delay:-4s;opacity:.4}
.coin:nth-child(4){right:16%;bottom:22%;font-size:22px;animation-delay:-6s}
.coin:nth-child(5){left:46%;top:8%;font-size:18px;animation-delay:-3s;opacity:.35}
@keyframes float{50%{transform:translateY(-22px) rotate(8deg)}}

/* Feature-Karten */
.section-head{text-align:center;margin:64px 0 30px}
.section-head .kick{font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3.5vw,38px);
  letter-spacing:-1px;margin-top:8px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.feat-card{padding:26px 24px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--stroke);
  transition:transform var(--t2) var(--e),border-color var(--t2),box-shadow var(--t2);
  transform-style:preserve-3d;will-change:transform;position:relative;overflow:hidden}
.feat-card::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--t2);
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(120,150,255,.14),transparent 45%)}
.feat-card:hover{border-color:var(--stroke-glow);box-shadow:0 24px 50px -26px rgba(99,102,241,.55)}
.feat-card:hover::after{opacity:1}
.feat-card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;
  margin-bottom:16px;background:var(--grad-soft);border:1px solid var(--stroke)}
.feat-card h3{font-family:var(--f-display);font-weight:600;font-size:18.5px;margin-bottom:7px;letter-spacing:-.3px}
.feat-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.feat-card .pill{position:absolute;top:18px;right:18px;font-size:10px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);color:var(--ice);
  background:rgba(56,214,245,.12);border:1px solid rgba(56,214,245,.3)}
/* „Live" = Feature ist fertig und spielbar (löst die alten „Bald"-Pillen ab) */
.feat-card .pill.live{color:var(--green);background:var(--green-dim);border-color:rgba(52,211,153,.34)}

/* Community-Statistiken */
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:8px}
.cstat{text-align:center;padding:28px 18px;border-radius:var(--r-md);
  background:var(--grad-soft);border:1px solid var(--stroke)}
.cstat .n{font-family:var(--f-mono);font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cstat .l{font-size:13px;color:var(--muted);margin-top:6px;font-weight:600}

/* Social + Footer */
.social{display:flex;gap:12px;justify-content:center;margin:56px 0 10px;flex-wrap:wrap}
.social a{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:var(--card);border:1px solid var(--stroke);transition:var(--t2) var(--e)}
.social a:hover{transform:translateY(-2px);border-color:var(--stroke-glow);color:var(--ice)}
.foot{text-align:center;color:var(--dim);font-size:12.5px;padding:36px 0 48px;line-height:1.7}

/* ══ DASHBOARD ═════════════════════════════════════════════════════════════ */
.dash{padding:34px 0 60px}
.greet{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.4vw,34px);letter-spacing:-1px;margin-bottom:4px}
.greet .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.greet-sub{color:var(--muted);font-size:14.5px;margin-bottom:26px}

.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
@media(max-width:860px){.dash-grid{grid-template-columns:1fr}}

/* Profilkarte */
.profile{padding:26px 26px 24px}
.profile .row{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.profile .av{width:66px;height:66px;border-radius:18px;background:var(--grad) center/cover;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:28px;color:#fff;border:2px solid var(--stroke-2);
  box-shadow:0 10px 26px -10px rgba(99,102,241,.7)}
.profile .id{flex:1;min-width:0}
.profile .id .nm{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.4px;
  display:flex;align-items:center;gap:9px}
.profile .id .nm .mini{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.profile .id .rk{font-size:13px;color:var(--muted);margin-top:3px}
.lvl-badge{flex-shrink:0;text-align:center;padding:10px 16px;border-radius:var(--r-md);
  background:var(--grad-soft);border:1px solid var(--stroke)}
.lvl-badge .k{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.lvl-badge .v{font-family:var(--f-mono);font-weight:700;font-size:26px;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.xp{margin-top:2px}
.xp .bar{height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.xp .bar i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);background:var(--grad);
  box-shadow:0 0 18px rgba(99,102,241,.7);width:0;transition:width 1.1s var(--e)}
.xp .meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-top:8px;font-family:var(--f-mono)}

.mini.on{background:#ff5c72;box-shadow:0 0 0 4px rgba(255,92,114,.18)}
.mini.off{background:var(--dim)}

/* Guthaben-Hero im Dashboard */
.wallet{padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wallet .k{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.wallet .bal{font-family:var(--f-mono);font-weight:700;font-size:clamp(34px,5vw,50px);letter-spacing:-1.5px;line-height:1;
  background:linear-gradient(135deg,#fff,#bcd0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wallet .cur{font-size:14px;color:var(--muted);margin-top:8px;font-weight:600}

/* Live-Widget */
.live-w{padding:22px 24px}
.live-w .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.live-w .ring{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex-shrink:0;
  background:var(--card-2);border:1px solid var(--stroke)}
.live-w.on .ring{color:#ff5c72;border-color:rgba(255,92,114,.4);background:rgba(255,92,114,.1)}
.live-w .st{font-family:var(--f-display);font-weight:600;font-size:16px}
.live-w .sub{font-size:12.5px;color:var(--muted);margin-top:1px}

/* Entry-Kacheln */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:28px 26px;min-height:172px;
  border:1px solid var(--stroke);display:flex;flex-direction:column;justify-content:space-between;
  transition:transform var(--t2) var(--e),border-color var(--t2),box-shadow var(--t2);cursor:pointer;
  background:var(--card)}
.tile.slot{background:linear-gradient(135deg,rgba(56,214,245,.16),rgba(59,155,255,.08))}
.tile.case{background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(99,102,241,.08))}
.tile:hover{transform:translateY(-2px);border-color:var(--stroke-glow);box-shadow:0 30px 60px -28px rgba(99,102,241,.6)}
.tile.locked{cursor:default}.tile.locked:hover{transform:none;box-shadow:var(--shadow)}
.tile .emoji{font-size:44px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.tile h3{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.5px;margin-top:auto}
.tile p{font-size:13px;color:var(--muted);margin-top:4px}
.tile .go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--text)}
.tile .go svg{transition:transform var(--t1)}
.tile:hover .go svg{transform:translateX(4px)}
.tile .soon-tag{position:absolute;top:20px;right:20px;font-size:10px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);color:#0a0c15;background:var(--gold)}

/* Quick-Coins */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.qcard{padding:18px 20px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--stroke);
  display:flex;align-items:center;gap:14px}
.qcard .qi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex-shrink:0;
  background:var(--grad-soft);border:1px solid var(--stroke)}
.qcard .qt{flex:1;min-width:0}
.qcard .qt b{display:block;font-weight:700;font-size:14.5px}
.qcard .qt span{font-size:12px;color:var(--muted)}
.qcard .qbtn{font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:10px;white-space:nowrap;
  background:var(--grad);color:#fff;border:0;cursor:pointer;transition:var(--t1)}
.qcard .qbtn.dim{background:var(--card-2);color:var(--dim);border:1px solid var(--stroke);cursor:default}
.qcard .qbtn:not(.dim):hover{transform:translateY(-1px)}
.streakDots{display:flex;gap:5px;flex-shrink:0}
.streakDots .sd{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.1);transition:.2s}
.streakDots .sd.on{background:var(--grad);box-shadow:0 0 8px rgba(99,102,241,.6)}
.streakDots .sd.week{outline:1.5px solid var(--gold);outline-offset:1px}
.streakDots .sd.week.on{background:var(--gold);box-shadow:0 0 10px rgba(251,191,36,.7)}

/* Aufgaben */
.tasksPanel h3{font-family:var(--f-display)}
.task{display:flex;align-items:center;gap:12px;padding:11px 4px}
.task+.task{border-top:1px solid rgba(255,255,255,.05)}
.task .tIcon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;
  background:var(--card-2);border:1px solid var(--stroke);flex-shrink:0}
.task .tLabel{flex:1;font-size:13.5px;font-weight:600}
.task.claimed{opacity:.55}.task.claimed .tLabel{text-decoration:line-through;color:var(--muted)}
.task.ready .tIcon{border-color:var(--stroke-glow)}
.task .qbtn{font-size:12px;font-weight:800;padding:7px 12px;border-radius:9px;background:var(--grad);color:#fff;border:0;cursor:pointer;transition:var(--t1)}
.task .qbtn:hover{transform:translateY(-1px)}
.taskState{font-size:12.5px;font-weight:800;font-family:var(--f-mono)}
.taskState.done{color:var(--green)}
.taskState.todo{color:var(--dim)}

/* Erfolge-Strip (Dashboard) */
.badge-strip{display:flex;flex-wrap:wrap;gap:8px}
.badge-strip .bchip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--stroke);font-size:12.5px;font-weight:700}
.badge-strip .bchip .bi{font-size:15px}
.badge-strip .bchip.locked{opacity:.38;filter:grayscale(.85)}

/* Stat-Grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-top:16px}
.stat{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-md);padding:18px;
  transition:transform var(--t2) var(--e),border-color var(--t2)}
.stat:hover{transform:translateY(-2px);border-color:var(--stroke-2)}
.stat .ico{font-size:19px;display:block;margin-bottom:9px}
.stat .k{font-size:12px;color:var(--muted);font-weight:600}
.stat .v{font-family:var(--f-mono);font-size:23px;font-weight:700;letter-spacing:-.6px;margin-top:3px}
.stat .s{font-size:11px;color:var(--dim);margin-top:3px}
.v.green{color:var(--green)}.v.red{color:var(--red)}.v.gold{color:var(--gold)}

/* Leaderboard-Vorschau */
.board{padding:22px 24px}
.board h3{font-family:var(--f-display);font-weight:600;font-size:17px;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.board .hint{font-size:12px;color:var(--dim);margin-bottom:16px}
.lrow{display:flex;align-items:center;gap:13px;padding:10px 8px;border-radius:11px;transition:background var(--t1)}
.lrow:hover{background:var(--card)}
.lrow+.lrow{border-top:1px solid rgba(255,255,255,.05)}
.lrow .pos{width:26px;text-align:center;font-family:var(--f-mono);font-weight:700;font-size:14px;color:var(--dim)}
.lrow.top1 .pos{color:var(--gold)}.lrow.top2 .pos{color:#cbd5e1}.lrow.top3 .pos{color:#e0a06a}
.lrow .lav{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff;flex-shrink:0}
.lrow .lnm{flex:1;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow.me .lnm{color:var(--ice)}
.lrow .lbal{font-family:var(--f-mono);font-weight:600;font-size:14px;color:var(--gold)}

.note{margin-top:26px;text-align:center;font-size:12.5px;color:var(--dim);line-height:1.7}
.note b{color:var(--muted)}

/* ── Login-Karte (Twitch fehlt / kompakter Login) ─────────────────────────── */
.center{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:24px}
.login-box{max-width:440px;width:100%;padding:44px 38px;text-align:center}
.login-box .mark{width:74px;height:74px;border-radius:20px;background:var(--grad);display:grid;place-items:center;
  font-size:38px;margin:0 auto 22px;box-shadow:0 16px 38px -10px rgba(99,102,241,.7)}
.login-box h1{font-family:var(--f-display);font-weight:700;font-size:25px;letter-spacing:-.6px;margin-bottom:10px}
.login-box p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:26px}
.warn{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.4);border-radius:12px;
  color:var(--red);padding:14px 16px;font-size:13px;text-align:left;line-height:1.55}

/* ── Enge Schirme ──────────────────────────────────────────────────────────
   Zehn Einträge plus drei Guthaben-Pillen sind auf einem 13-Zoll-Laptop mehr,
   als nebeneinander passt. Bevor gerollt werden muss, rücken erst einmal alle
   zusammen — das kostet ein paar Pixel Luft und spart über hundert. */
@media(max-width:1440px){
  .nav-in{gap:14px;padding:14px 16px}
  .nav-links{gap:2px;margin-left:2px}
  .nav-links a{padding:9px 10px;font-size:13.5px}
  .nav-links a.on::after{left:10px;right:10px}
  .nav-right{gap:8px}
  .coin-pill,.scrap-pill,.mark-pill{padding:7px 11px 7px 9px;font-size:13.5px}
}

/* Wenn wirklich gerollt werden muss, darf die Zeile nicht einfach abgeschnitten
   aussehen — sonst hält man den letzten sichtbaren Eintrag für den letzten.
   Der Auslauf ist genau so breit wie die Innenluft am Ende: voll gerollt liegt
   er über leerem Raum, vorher über dem, was noch kommt. */
@media(max-width:1180px){
  .nav-links{padding-right:24px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
}

@media(max-width:640px){
  .nav-links{display:none}
  .wallet .bal{font-size:36px}
}

/* ══════════════════════════════════════════════════════════════════════════
   Handy-Navigation (Zuschauerbereich) — Phase 1
   Top-App-Bar (fix oben) + Bottom-Tab-Bar (Daumenbereich) + Bottom-Sheets.
   Sichtbar ≤ 860px; ersetzt die auf dem Handy ausgeblendete Desktop-Nav.
   Markup: templates/_partials/mobile_nav.html · Logik: community.js
   ══════════════════════════════════════════════════════════════════════════ */
.m-nav{display:none}

@media (max-width:860px){
  /* Desktop-Nav weicht der Handy-Navigation — nur auf Seiten, die sie einbinden */
  body:has(.m-nav) .nav,
  body.has-mnav .nav{display:none}
  body:has(.m-nav),
  body.has-mnav{
    /* 64 statt 56: die Bedienelemente in der Kopfzeile sind auf 44 px
       gewachsen (siehe unten), damit sie mit dem Daumen sicher zu treffen
       sind. Ohne den Nachzug hier läge die Kopfzeile über dem Inhalt. */
    padding-top:calc(64px + env(safe-area-inset-top));
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }
  .m-nav{display:block}

  /* Top-App-Bar */
  .m-topbar{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;align-items:center;gap:12px;
    padding:calc(9px + env(safe-area-inset-top)) 14px 9px;
    background:linear-gradient(to bottom,rgba(10,12,21,.94),rgba(10,12,21,.6));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke)}
  .m-topbar .brand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.3px}
  .m-topbar .brand .mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;
    background:var(--grad);box-shadow:0 6px 16px -6px rgba(99,102,241,.7)}
  .m-topbar .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .m-tb-right{margin-left:auto;display:flex;align-items:center;gap:9px}
  .m-topbar .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
    background:var(--card-2);border:1px solid var(--stroke);font-family:var(--f-mono);font-weight:700;font-size:13px}
  .m-topbar .pill.coins{color:var(--gold)}
  .m-av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--stroke-2);
    background:var(--grad) center/cover;color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 16px -8px rgba(99,102,241,.8);cursor:pointer}

  /* ── Tippziele in der Kopfzeile ───────────────────────────────────────
     Gemessen waren es 30×30 (Marke), 38×38 (Glocke) und 34×34 (Konto) —
     alle unter den 44 px, ab denen ein Daumen zuverlässig trifft. Auf
     Fingergeräten wachsen sie deshalb; am Rechner bleibt alles wie es war,
     dort zielt eine Maus genau. */
  @media (pointer:coarse){
    .m-topbar .pIconBtn,.m-topbar .m-av{width:44px;height:44px}
    .m-topbar .brand{min-height:44px;align-items:center}
    .m-topbar .pill{min-height:38px}
  }

  /* Bottom-Tab-Bar */
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;justify-content:space-around;gap:2px;
    padding:8px 10px calc(9px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(10,12,21,.97),rgba(10,12,21,.72));
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--stroke)}
  .m-tab{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--dim);font-size:10.5px;font-weight:700;border:0;background:0;cursor:pointer;text-decoration:none;
    transition:color var(--t1) var(--e),transform var(--t1) var(--e)}
  .m-tab .ic{font-size:21px;line-height:1;transition:filter var(--t1)}
  .m-tab.on{color:var(--text)}
  .m-tab.on .ic{filter:drop-shadow(0 4px 12px rgba(56,214,245,.6))}
  .m-tab:active{transform:scale(.9)}
  .m-tab.center{flex:0 0 auto;width:58px;height:58px;margin-top:-24px;border-radius:50%;color:#fff;
    background:var(--grad);box-shadow:0 12px 26px -8px rgba(99,102,241,.8),inset 0 0 0 3px rgba(10,12,21,.92)}
  .m-tab.center .ic{font-size:24px;filter:none}

  /* Scrim + Sheets */
  .m-scrim{position:fixed;inset:0;z-index:60;background:rgba(4,5,10,.62);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity var(--t2) var(--e)}
  .m-scrim.show{opacity:1}
  /* Gegenstück zu lockScroll() in community.js: der Body friert an seiner
     Stelle ein, statt unter dem offenen Sheet weiterzuscrollen. `top` setzt
     das Skript inline auf die gemerkte Scroll-Position. */
  body.sheet-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  /* ── Warum das Sheet eine Höhe UND einen Bildlauf braucht ───────────────
     „Mehr" ist mit den Jahren auf zwölf Zeilen gewachsen; zusammen mit dem
     Guthaben-Streifen misst es rund 1040 px. Das Sheet klebt aber am unteren
     Rand und war weder gedeckelt noch scrollbar — auf einem 640 px hohen
     Handy schoben sich die ersten VIER Einträge (Quests, Events,
     Fernsteuerung, Booster) über die Bildschirmkante hinaus und waren
     schlicht nicht erreichbar. Kein Bildlauf, kein Hinweis, einfach weg.

     Deckel und `overflow-y` beheben das. `svh` statt `vh`, weil die
     Adressleiste mobiler Browser sonst mitzählt und der Deckel zu hoch
     ausfällt; `dvh`/`vh` bleiben als Rückfallebene für ältere Browser.
     `overscroll-behavior:contain` verhindert, dass der Schwung am Listenende
     die Seite DAHINTER weiterscrollt. */
  .m-sheet{position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:linear-gradient(to bottom,var(--bg-2),var(--bg));border-top:1px solid var(--stroke-2);
    border-radius:24px 24px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));
    max-height:86vh;max-height:86dvh;max-height:86svh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateY(101%);transition:transform var(--t2) var(--e);box-shadow:0 -30px 60px -20px rgba(0,0,0,.8)}
  .m-sheet.open{transform:none}
  /* Der Griff bleibt beim Scrollen stehen — sonst verliert man den Rand, an
     dem man das Sheet wieder zuzieht. */
  .m-grab{position:sticky;top:0;z-index:1;
    width:40px;height:4px;border-radius:99px;background:var(--stroke-2);margin:2px auto 12px}
  .m-sheet h3{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--muted);margin:2px 4px 10px;letter-spacing:.2px}
  .m-sheet-row{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:14px;
    background:var(--card);border:1px solid var(--stroke);margin-bottom:8px;text-decoration:none;color:var(--text);
    transition:background var(--t1),border-color var(--t1)}
  .m-sheet-row:active{background:var(--card-2);border-color:var(--stroke-glow)}
  /* Zeile mit eingebettetem Bedienelement (Lautstärke) — kein Zeilen-Klick. */
  .m-sheet-row.static:active{background:none;border-color:var(--stroke)}
  .m-sheet-row.static .volCtl{border:0;background:none;padding:0}
  .m-sheet-row.static .volRange{width:96px;opacity:1}
  .m-sheet-row .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
    background:var(--grad-soft);border:1px solid var(--stroke);flex-shrink:0}
  .m-sheet-row .t{flex:1;min-width:0}
  .m-sheet-row .t b{display:block;font-size:14.5px;font-weight:700}
  .m-sheet-row .t span{display:block;font-size:11.5px;color:var(--dim)}
  .m-sheet-row .chev{color:var(--dim);font-size:18px;margin-left:auto}
  .m-sheet-row.danger .ic{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.3)}
  .m-sheet-row.danger b{color:var(--red)}
  /* Läuft-gerade-Zeile (Submarathon): warm hervorgehoben, damit sie sich vom
     immer gleichen Rest der Schublade abhebt. */
  .m-sheet-row.is-live-row{background:rgba(255,176,32,.08);border-color:rgba(255,176,32,.34)}
  .m-sheet-row.is-live-row .ic{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.4)}
  .m-bal-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:2px 0 12px}
  .m-bal-strip .b{background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:11px 8px;text-align:center}
  .m-bal-strip .b .v{font-family:var(--f-mono);font-weight:700;font-size:16px}
  .m-bal-strip .b.gold .v{color:var(--gold)} .m-bal-strip .b.ice .v{color:var(--ice)} .m-bal-strip .b.violet .v{color:var(--violet)}
  .m-bal-strip .b .l{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-top:3px;font-weight:800}
  .m-acct-head{display:flex;align-items:center;gap:13px;padding:6px 4px 14px}
  .m-acct-head .m-av.lg{width:46px;height:46px;border-radius:14px;font-size:19px}
  .m-acct-head .nm{font-family:var(--f-display);font-weight:700;font-size:17px}
  .m-acct-head .sub{font-size:12px;color:var(--muted)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .m-scrim,.m-sheet,.m-tab{transition:none}
}
/* Handy-Feinschliff: Toasts über die Tab-Bar heben (Overlays/Modals decken sie
   bewusst ab, Toasts sollen darüber schweben). Nur wo die Handy-Nav existiert. */
@media (max-width:860px){
  body:has(.m-nav) .toast{bottom:calc(90px + env(safe-area-inset-bottom))}
}

/* ── Discord-Einladungskarte ──────────────────────────────────────────────────
   Glas-Karte im Eisgeist-Look (wie .panel), Discord-Blau nur als Akzent:
   Logo-Kachel, Lichtkante oben und ein weiches Glühen hinter dem Logo.
   Die ganze Karte ist der Link — Hover hebt sie an. */
.dc-cta{position:relative;display:flex;align-items:center;gap:20px;padding:22px 26px;
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--stroke);box-shadow:var(--elev-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:transform var(--t2) var(--e),border-color var(--t2) var(--e),box-shadow var(--t2) var(--e)}
.dc-cta::before{content:'';position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(88,101,242,.6) 30%,rgba(148,168,255,.5) 60%,transparent)}
.dc-cta::after{content:'';position:absolute;left:-70px;top:50%;width:300px;height:300px;
  transform:translateY(-50%);pointer-events:none;opacity:.55;transition:opacity var(--t2) var(--e);
  background:radial-gradient(circle,rgba(88,101,242,.4),transparent 65%)}
.dc-cta:hover{transform:translateY(-2px);border-color:rgba(88,101,242,.5);
  box-shadow:var(--elev-3),0 26px 60px -30px rgba(88,101,242,.95)}
.dc-cta:hover::after{opacity:.9}
.dc-cta:focus-visible{outline:none;box-shadow:var(--elev-2),var(--ring)}
.dc-cta > *{position:relative}

.dc-cta-ic{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:var(--r-md);color:#fff;
  background:linear-gradient(150deg,#7d88ff,var(--discord) 55%,#4650d8);
  box-shadow:0 14px 30px -12px rgba(88,101,242,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.dc-cta-ic svg{fill:currentColor;display:block}
.dc-cta-body{flex:1 1 220px;min-width:0;display:block}
.dc-cta-title{display:block;font-family:var(--f-display);font-weight:700;font-size:var(--fs-6);
  color:var(--text);line-height:1.2;letter-spacing:-.3px}
.dc-cta-sub{display:block;color:var(--muted);font-size:var(--fs-3);margin-top:5px;line-height:1.55}

.btn-discord{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#6b76ff,var(--discord) 70%);color:#fff;
  font-family:var(--f-ui);font-weight:700;font-size:var(--fs-4);
  padding:12px 22px;border-radius:var(--r-pill);white-space:nowrap;text-decoration:none;
  box-shadow:0 12px 28px -12px rgba(88,101,242,.9),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform var(--t1) var(--e),box-shadow var(--t1) var(--e),filter var(--t1) var(--e)}
.btn-discord svg{flex-shrink:0}
.btn-discord .di-arrow{transition:transform var(--t2) var(--e)}
.dc-cta:hover .btn-discord{filter:brightness(1.08);box-shadow:0 16px 34px -12px rgba(88,101,242,1)}
.dc-cta:hover .di-arrow{transform:translateX(3px)}
.btn-discord:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(88,101,242,1);filter:brightness(1.06)}
.btn-discord:active{transform:translateY(0) scale(.97)}
.btn-discord:focus-visible{outline:none;box-shadow:var(--ring)}
.dash .dc-cta{margin-bottom:16px}

/* Karte ohne eigenen Link (eingeloggt: zwei Aktionen im Fuß) */
.dc-cta.is-static{cursor:default}
.dc-cta.is-static:hover{transform:none;border-color:var(--stroke);box-shadow:var(--elev-2)}
.dc-cta.is-static:hover::after{opacity:.55}

/* Aktionen + Verknüpfungsstatus (eingeloggtes Portal) */
.dc-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dc-actions .btn-discord[hidden]{display:none}
.di-reward{font-size:var(--fs-2);font-weight:800;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.18);color:#fff}
.btn-dc-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--r-pill);
  font-size:var(--fs-4);font-weight:700;color:var(--muted);white-space:nowrap;
  border:1px solid var(--stroke);background:var(--card);transition:var(--t2) var(--e)}
.btn-dc-ghost:hover{color:var(--text);border-color:rgba(88,101,242,.5);background:var(--discord-dim)}
.dc-state{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.dc-state[hidden]{display:none}
.dc-ok{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-3);font-weight:700;
  color:var(--green);background:var(--green-dim);border:1px solid rgba(52,211,153,.34);
  padding:5px 12px;border-radius:var(--r-pill)}
.dc-ok b{color:var(--text)}
.dc-ok [hidden]{display:none}
.dc-unlink{background:none;border:0;cursor:pointer;font-family:var(--f-ui);font-size:var(--fs-2);
  font-weight:700;color:var(--dim);padding:4px 2px;border-bottom:1px dashed var(--stroke-2);
  transition:color var(--t1) var(--e)}
.dc-unlink:hover{color:var(--red)}

/* Rückmeldung nach dem OAuth-Rücksprung (?link=…) */
.link-note{margin-bottom:14px;padding:13px 18px;border-radius:var(--r-md);font-size:var(--fs-4);
  font-weight:600;border:1px solid var(--stroke);background:var(--card);color:var(--text)}
.link-note.ok{color:var(--green);border-color:rgba(52,211,153,.36);background:var(--green-dim)}
.link-note.warn{color:var(--gold);border-color:rgba(251,191,36,.36);background:var(--gold-dim)}

/* Landing: kurze Stichpunkte unter der Einladungskarte — hält den Abschnitt
   im gleichen Rhythmus wie die Feature- und Zahlen-Blöcke darüber. */
.dc-notes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.dc-notes span{font-size:var(--fs-3);font-weight:600;color:var(--muted);padding:8px 14px;
  border-radius:var(--r-pill);background:var(--card);border:1px solid var(--stroke)}
@media (max-width:560px){
  .dc-cta{padding:18px;gap:14px}
  .dc-cta-title{font-size:var(--fs-5)}
  .btn-discord{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dc-cta,.dc-cta:hover,.btn-discord{transform:none;transition:none}
}

/* ── Live-Bühne (Twitch-Player ganz oben) ─────────────────────────────────── */
.live-stage{margin:22px 0 6px;padding:14px 14px 16px;border-radius:var(--r-lg);position:relative;
  background:linear-gradient(180deg,rgba(255,92,114,.09),var(--card));
  border:1px solid rgba(255,92,114,.3);box-shadow:var(--elev-3),0 0 60px -30px rgba(255,92,114,.8)}
.live-stage[hidden]{display:none!important}
.dash .live-stage{margin:0 0 22px}
.ls-head{display:flex;align-items:center;gap:14px;padding:4px 8px 12px;flex-wrap:wrap}
.ls-badge{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:6px 14px;
  border-radius:var(--r-pill);font-size:var(--fs-2);font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:#fff;background:#e0334c;
  box-shadow:0 10px 24px -10px rgba(224,51,76,.95)}
.ls-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.8s infinite}
.ls-title{flex:1 1 220px;min-width:0;font-family:var(--f-display);font-weight:600;font-size:var(--fs-5)}
.ls-title b{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.ls-hint{display:block;font-family:var(--f-ui);font-weight:500;font-size:var(--fs-2);
  color:var(--dim);margin-top:3px}
.ls-open{flex:0 0 auto;font-size:var(--fs-3);font-weight:700;color:var(--muted);padding:9px 16px;
  border-radius:var(--r-pill);border:1px solid var(--stroke);background:var(--card);
  transition:var(--t2) var(--e)}
.ls-open:hover{color:#fff;border-color:rgba(145,71,255,.6);background:var(--twitch-dim)}
.ls-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
  background:#000;border:1px solid var(--stroke);box-shadow:var(--elev-2)}
.ls-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ls-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);
  font-size:var(--fs-3);font-weight:600}
@media (max-width:560px){
  .live-stage{padding:10px 10px 12px;margin:16px 0 4px;border-radius:var(--r-md)}
  .ls-head{padding:2px 4px 10px;gap:10px}
  .ls-open{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .ls-badge .dot{animation:none} }

/* Dezenter Dashboard-Login/Shortcut im Footer (Owner/Mod) */
.foot-admin{display:block;margin-top:10px}
.foot-admin a,.foot-admin-link{color:var(--muted);font-weight:600;font-size:12.5px;
  border-bottom:1px dashed var(--stroke-2);padding-bottom:1px;transition:color var(--t1) var(--e)}
.foot-admin a:hover,.foot-admin-link:hover{color:var(--ice-2)}

/* ══════════════════════════════════════════════════════════════════════════
   Premium-Hebung (Phase 5) — Tiefe, Fokus, Politur. Additiv über den
   bestehenden Eisgeist-Komponenten; nutzt die erweiterten Tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sichtbarer Tastatur-Fokus (A11y): dezente Outline global, Ring auf Controls */
:focus-visible{outline:2px solid var(--ice-2);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.ghost:focus-visible,.btn-discord:focus-visible,button:focus-visible,
select:focus-visible,input:focus-visible,.m-tab:focus-visible,.coin-pill:focus-visible{
  outline:none;box-shadow:var(--ring)}

/* Buttons: satterer Ruhe-Schatten + spürbarer Press */
.btn.grad{box-shadow:var(--elev-2),var(--shadow-glow)}
.btn:active{transform:translateY(0) scale(.97)}

/* Karten-Tiefe vereinheitlichen (Elevation-Stapel, keine Panels) */
.feat-card,.qcard,.cstat,.stat{box-shadow:var(--elev-1)}
.feat-card:hover{box-shadow:var(--elev-3)}
.tile{box-shadow:var(--elev-2)}

/* Stat-Karten: Icon-Badge, klarere Hierarchie, Mono-/Tab-Zahlen, Hover-Anhebung */
.stat{padding:16px 16px 15px}
.stat .ico{width:34px;height:34px;margin-bottom:11px;display:grid;place-items:center;font-size:17px;
  border-radius:11px;background:var(--grad-soft);border:1px solid var(--stroke)}
.stat .k{font-size:11.5px;letter-spacing:.2px}
.stat:hover{box-shadow:var(--elev-2);border-color:var(--stroke-glow)}

/* Ruhige Zahlen: tabellarische Ziffern überall, wo Werte stehen */
.coin-pill,.lrow .lbal,.wallet .bal,.cstat .n,.lvl-badge .v,.xp .meta,.stat .v,
.m-topbar .pill,.taskState{font-variant-numeric:tabular-nums}

/* Nav: aktiver Punkt mit sanftem Eis-Glow */
.nav-links a.on::after{box-shadow:0 0 12px rgba(56,214,245,.6)}

/* Hero-Verlaufstext: dezenter Shimmer */
.hero h1 .g{background-size:220% auto;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:220% center}}

/* Profil-Avatar: Level-Ring (Gradient-Fassung) */
.profile .av{border:0;
  box-shadow:0 10px 26px -10px rgba(99,102,241,.7),0 0 0 2px var(--bg),0 0 0 4px rgba(99,102,241,.6)}

/* Leaderboard-Vorschau: Podium-Akzent für Top 3 */
.lrow.top1 .lav{box-shadow:0 0 0 2px var(--gold),0 8px 20px -8px rgba(251,191,36,.7)}
.lrow.top2 .lav{box-shadow:0 0 0 2px #cbd5e1}
.lrow.top3 .lav{box-shadow:0 0 0 2px #e0a06a}

/* Skeleton-Ladezustand (statt „lädt …") */
.skeleton{position:relative;overflow:hidden;background:var(--card-2);border-radius:var(--r-sm);color:transparent!important}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:sk 1.3s var(--e-io) infinite}
@keyframes sk{100%{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){
  .hero h1 .g{animation:none}
  .skeleton::after{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Rechtstexte (Impressum, Datenschutz) — Lesetypografie im Eisgeist-Stil.
   Schmalere Spalte als das Dashboard: Fließtext liest sich ab ~70 Zeichen
   Zeilenlänge deutlich schlechter.
   ══════════════════════════════════════════════════════════════════════════ */
.legal{max-width:820px;padding-bottom:20px}
.legal-head{text-align:center;margin:52px 0 30px}
.legal-head .kick{font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.legal-head h1{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,5vw,44px);
  letter-spacing:var(--tracking-tight)}
.legal-head .sub{color:var(--muted);font-size:14px;margin-top:8px}

.legal-box{display:block;padding:34px 38px;line-height:1.72;font-size:15px;color:var(--text)}
.legal-box .legal-lead{color:var(--muted);font-size:15.5px;border-left:2px solid var(--stroke-glow);
  padding-left:16px;margin-bottom:30px}
.legal-box h2{font-family:var(--f-display);font-weight:700;font-size:20px;
  margin:34px 0 12px;letter-spacing:var(--tracking-tight);scroll-margin-top:90px}
.legal-box h2:first-of-type{margin-top:0}
.legal-box h3{font-family:var(--f-display);font-weight:600;font-size:16px;
  margin:24px 0 8px;color:var(--ice-2)}
/* Zeilenlänge hart begrenzen: Fließtext liest sich jenseits von ~70 Zeichen
   spürbar schlechter — die Panel-Breite allein regelt das nicht. */
.legal-box p{margin-bottom:14px;color:#c3ccdf;max-width:58ch}
.legal-box ul{margin:0 0 16px 20px;color:#c3ccdf;max-width:56ch}
.legal-box li{margin-bottom:7px;padding-left:4px}
.legal-box li::marker{color:var(--ice)}
.legal-box b{color:var(--text)}
.legal-box a{color:var(--ice-2);border-bottom:1px solid rgba(59,155,255,.35);
  transition:color var(--t1) var(--e),border-color var(--t1) var(--e)}
.legal-box a:hover{color:var(--ice);border-color:var(--ice)}
.legal-box .addr{font-family:var(--f-mono);font-size:14px;line-height:1.9;
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-sm);
  padding:16px 18px;display:inline-block;min-width:min(100%,320px)}
.legal-box code{font-family:var(--f-mono);font-size:.88em;background:var(--card-2);
  border:1px solid var(--stroke);border-radius:6px;padding:1px 6px;color:var(--ice)}
.legal-cross{text-align:center;color:var(--muted);font-size:13.5px;margin:26px 0 4px}
.legal-cross a{color:var(--ice-2);font-weight:600}

/* Betreiber-Hinweis, solange Pflichtangaben fehlen */
.legal-todo{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.34);
  border-radius:var(--r-md);padding:18px 22px;margin-bottom:22px;font-size:14px;
  line-height:1.65;color:#e8d9ae}
.legal-todo b{color:var(--gold)}
.legal-todo code{background:rgba(0,0,0,.3);border-color:rgba(251,191,36,.28);color:var(--gold)}
.legal-todo-keys{margin-top:8px;font-size:13px}
.legal-todo details{margin-top:12px}
.legal-todo summary{cursor:pointer;font-weight:600;color:var(--gold)}
.legal-todo pre{margin-top:10px;background:rgba(0,0,0,.35);border:1px solid var(--stroke);
  border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;font-family:var(--f-mono);
  font-size:12.5px;line-height:1.6;color:#cfd8ea}

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard: Live-Banner, neue Kacheln, Rangliste, Aufgaben, Onboarding
   ══════════════════════════════════════════════════════════════════════════ */

/* Live-Banner — der Doppel-Bonus ist die stärkste Mechanik der Plattform und
   stand vorher nur als Fließtext in einer Crew-Beschreibung. */
.liveBanner{display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:14px 20px;
  border-radius:var(--r-md);text-decoration:none;color:inherit;
  background:linear-gradient(100deg,rgba(251,113,133,.18),rgba(145,71,255,.14));
  border:1px solid rgba(251,113,133,.45);box-shadow:0 18px 40px -22px rgba(251,113,133,.7);
  transition:transform var(--t2) var(--e),box-shadow var(--t2) var(--e)}
.liveBanner[hidden]{display:none}
.liveBanner:hover{transform:translateY(-2px);box-shadow:0 24px 50px -22px rgba(251,113,133,.85)}
.lbDot{width:11px;height:11px;border-radius:50%;background:#ff5c72;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,92,114,.65);animation:pulse 1.8s infinite}
.lbTxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lbTxt b{font-size:15px}
.lbSub{font-size:12.5px;color:var(--muted)}
.lbSub b{color:var(--gold);font-family:var(--f-mono);font-size:13px}
.lbCta{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ice-2);white-space:nowrap}
@media(max-width:640px){ .lbCta{display:none} }
@media(prefers-reduced-motion:reduce){ .lbDot{animation:none} }

/* Kacheln */
.stat .collBar{height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);
  overflow:hidden;margin:7px 0 5px}
.stat .collBar i{display:block;height:100%;border-radius:inherit;background:var(--grad);
  transition:width var(--t3) var(--e)}
.rarestBox{display:flex;align-items:center;gap:8px;min-height:30px}
.rarestArt{font-size:22px;line-height:1;display:grid;place-items:center;width:30px;height:30px;
  border-radius:8px;border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);
  background:color-mix(in srgb,var(--rc) 14%,transparent)}
.rarestArt img{width:24px;height:24px;object-fit:contain}
.stat .v.up{color:var(--green)}
.stat .v.down{color:var(--red)}

/* Aufgeklappte Slot-Details statt drei roter Kacheln im Hauptblick */
.statDetails{margin-top:12px;border:1px solid var(--stroke);border-radius:var(--r-sm);
  background:var(--card);padding:0 14px}
.statDetails summary{cursor:pointer;padding:11px 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.statDetails summary:hover{color:var(--text)}
.statDetails[open] summary{border-bottom:1px solid var(--stroke);margin-bottom:10px}
.sdGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 18px;
  padding-bottom:14px}
.sdGrid > div{display:flex;flex-direction:column;gap:2px}
.sdK{font-size:11px;color:var(--dim)}
.sdGrid b{font-family:var(--f-mono);font-size:15px}

/* Rangliste: Segmentschalter, eigene Zeile. Zeiger aus panel.css. */
.boardTabs{display:inline-flex;gap:2px;padding:3px;margin:2px 0 8px;
  border-radius:var(--r-pill);background:rgba(0,0,0,.26);border:1px solid var(--stroke)}
.bTab{position:relative;z-index:1;cursor:pointer;font-family:inherit;font-weight:700;font-size:12px;
  padding:6px 12px;border-radius:var(--r-pill);border:0;background:none;color:var(--muted);
  transition:color var(--d-fast) var(--ease),transform var(--d-press) var(--ease)}
.bTab:hover{color:var(--text)}
.bTab:active{transform:scale(.96)}
.bTab.on{color:var(--text)}
.bTab:focus-visible{outline:none;box-shadow:var(--ring)}
.lrow.mine{background:var(--grad-soft);border-radius:10px}
.boardGap{text-align:center;color:var(--dim);font-size:14px;letter-spacing:3px;padding:2px 0}

/* Aufgaben: Kopfzeilen mit Countdown, Fortschritt, Meilenstein-Box */
.tpHead{font-family:var(--f-display);font-weight:600;font-size:15px;margin-bottom:10px;
  display:flex;align-items:baseline;gap:8px}
.tpCd{margin-left:auto;font-size:11px;color:var(--dim);font-weight:500;font-family:var(--f-mono)}
.tProg{display:flex;align-items:center;gap:8px;margin-top:5px}
.tpBar{flex:1;height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}
.tpBar i{display:block;height:100%;border-radius:inherit;background:var(--ice-2);
  transition:width var(--t3) var(--e)}
.tpN{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);flex-shrink:0}
.msBox{margin-top:18px;border-top:1px solid var(--stroke);padding-top:12px}
.msBox summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--muted)}
.msBox summary:hover{color:var(--text)}
.msBox summary span{font-size:11.5px;color:var(--dim);font-weight:500;margin-left:6px}
.msBox #tasksList{margin-top:10px}

/* Onboarding-Tour */
.tour{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:22px;
  background:rgba(4,6,12,.76);backdrop-filter:blur(8px)}
.tour[hidden]{display:none}
.tourCard{width:min(100%,420px);background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--stroke-glow);border-radius:var(--r-lg);padding:28px 30px;
  box-shadow:var(--elev-3);text-align:center}
.tourStep{font-family:var(--f-mono);font-size:11px;color:var(--dim);letter-spacing:1px;margin-bottom:10px}
.tourCard h3{font-family:var(--f-display);font-weight:700;font-size:21px;margin-bottom:10px}
.tourCard p{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:22px}
.tourActions{display:flex;align-items:center;justify-content:space-between;gap:12px}

@media(prefers-reduced-motion:reduce){
  .stat .collBar i,.tpBar i{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Visueller Beweis auf der Landingpage
   Die Seite bewarb ein hochgradig visuelles Sammelspiel und zeigte kein Bild
   davon. Skin-Wand + laufendes Case-Opening schließen genau diese Lücke.
   ══════════════════════════════════════════════════════════════════════════ */
.proof{margin:0 0 18px}
.proofGrid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;margin-bottom:22px}
.proofText .kick{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.proofText h2{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3vw,30px);
  letter-spacing:var(--tracking-tight);margin-bottom:10px}
.proofText p{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:44ch}

/* Endlos laufendes Case-Opening — derselbe Reel wie im Spiel, nur klein und stumm. */
/* min-width:0 ist Pflicht: Grid-Kinder haben min-width:auto, dadurch würde die
   Spalte auf die volle Breite des Reel-Inhalts (26 Items) wachsen und die
   ganze Seite horizontal überlaufen lassen. */
.proofDemo{position:relative;min-width:0}
.demoReel{position:relative;border-radius:var(--r-md);border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);overflow:hidden}
.dmView{position:relative;height:112px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.dmTrack{display:flex;height:100%;will-change:transform}
.dmItem{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-right:1px solid rgba(255,255,255,.05);position:relative}
.dmItem::before{content:'';position:absolute;inset:auto 0 0;height:3px;background:var(--rc,#9aa4ba)}
.dmItem .dmArt{font-size:30px;line-height:1}
.dmItem .dmArt img{height:2.4em;width:auto;object-fit:contain}
.dmItem .dmName{font-size:9.5px;color:var(--muted);letter-spacing:.2px}
.dmMarker{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);z-index:2;
  background:var(--dmc,#fff);box-shadow:0 0 14px var(--dmc,#fff);transition:background .3s,box-shadow .3s}
.dmDrop{height:28px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:var(--muted);border-top:1px solid var(--stroke)}
.dmDrop b{color:var(--dmc,var(--text))}
.demoCta{display:block;text-align:center;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--ice-2)}
.demoCta:hover{color:var(--ice)}

/* Skin-Wand: eine sehr langsame Endlosschleife, an den Rändern ausgefadet. */
.skinWall{position:relative;overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wallTrack{display:flex;gap:12px;width:max-content;animation:wallScroll 60s linear infinite}
.skinWall:hover .wallTrack{animation-play-state:paused}
@keyframes wallScroll{to{transform:translateX(-50%)}}
.wallCard{flex:0 0 112px;padding:12px 8px 10px;border-radius:var(--r-sm);text-align:center;
  border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,transparent),rgba(255,255,255,.02));
  box-shadow:0 0 22px -12px var(--rc);transition:transform var(--t2) var(--e)}
.wallCard:hover{transform:translateY(-4px)}
.wcArt{font-size:34px;line-height:1;margin-bottom:6px}
.wcArt img{height:2.6em;width:auto;object-fit:contain}
.wcName{font-weight:700;font-size:12.5px}
.wcRar{font-family:var(--f-mono);font-size:10px;color:var(--rc);margin-top:2px}

@media(max-width:820px){
  .proofGrid{grid-template-columns:1fr;gap:18px}
  .proofText{order:-1;text-align:center}
  .proofText p{margin:0 auto}
  .wallCard{flex-basis:96px}
}
@media(max-width:640px){
  /* Auf dem Handy zaehlt jeder Pixel ueber der Falz — der Hero wird enger,
     damit die Skin-Wand moeglichst frueh ins Bild kommt. */
  .hero{padding:26px 0 18px}
  .hero h1{font-size:clamp(30px,10vw,42px);margin-bottom:14px}
  .hero .lead{margin-bottom:18px;font-size:14.5px}
  .badge-live{margin-bottom:12px;font-size:12px;padding:6px 12px}
  .hero .floaty{display:none}          /* schwebende Coins kosten nur Hoehe */
  .wallCard{flex-basis:88px;padding:9px 6px 8px}
  .wcArt{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  .wallTrack{animation:none}
  .wallCard:hover{transform:none}
}

/* ── Lautstärke-Regler (Header) ───────────────────────────────────────────
   Schmal im Ruhezustand; der Schieberegler klappt beim Hovern/Fokus auf, damit
   er die Navigation nicht dauerhaft verbreitert. */
.volCtl{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-pill);
  border:1px solid var(--stroke);background:var(--card);
  transition:border-color var(--t1) var(--e),background var(--t1) var(--e)}
.volCtl:hover,.volCtl:focus-within{border-color:var(--stroke-glow);background:var(--card-2)}
.volBtn{background:none;border:0;cursor:pointer;font-size:14px;line-height:1;padding:2px;
  color:var(--muted);transition:color var(--t1) var(--e)}
.volCtl:hover .volBtn{color:var(--text)}
.volCtl.muted .volBtn{color:var(--dim)}
.volRange{width:0;opacity:0;height:3px;accent-color:var(--ice);cursor:pointer;
  transition:width var(--t2) var(--e),opacity var(--t2) var(--e)}
.volCtl:hover .volRange,.volCtl:focus-within .volRange{width:78px;opacity:1}
/* Touch-Geräte kennen kein Hover — dort dauerhaft ausgeklappt. */
@media (hover:none){ .volRange{width:64px;opacity:1} }
@media (max-width:900px){ .volCtl{display:none} }
@media(prefers-reduced-motion:reduce){ .volRange{transition:none} }

/* Klarstellungs-Kasten „kein Echtgeld" (Case-Seite) */
.nogamble{max-width:760px;margin:26px auto 0;padding:16px 20px;border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--stroke);color:var(--muted);
  font-size:13px;line-height:1.65;text-align:center}
.nogamble b{color:var(--text)}

/* Footer mit Rechtslinks */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;margin-bottom:12px}
.foot-links a{color:var(--muted);font-weight:600;font-size:13px;
  border-bottom:1px solid transparent;transition:color var(--t1) var(--e),border-color var(--t1) var(--e)}
.foot-links a:hover{color:var(--ice-2);border-color:var(--ice-2)}
.foot-note{max-width:620px;margin:0 auto}
.foot-extra{margin-bottom:10px}

@media(max-width:640px){
  .legal-box{padding:24px 20px;font-size:14.5px}
  .legal-box .addr{width:100%}
}

/* ── Code einlösen ───────────────────────────────────────────────────────────
   Ein Eingabefeld, ein Knopf, eine Antwort. Der Code wird abgetippt (oft vom
   Handy, oft aus einem Stream-Overlay abgelesen) — deshalb Monospace, weite
   Laufweite und ein Feld, das auch auf 375 px noch die volle Länge zeigt. */
.redeem{display:block;padding:20px 22px}
.redeem h3{font-family:var(--f-display);font-weight:600;font-size:16px;
  display:flex;align-items:center;gap:9px;margin-bottom:6px}
.redeem .rdHint{font-size:12.5px;color:var(--dim);line-height:1.6;margin-bottom:14px}
.rdRow{display:flex;gap:10px;flex-wrap:wrap}
.rdRow input{flex:1 1 190px;min-width:0;background:rgba(0,0,0,.35);
  border:1px solid var(--stroke-2);border-radius:var(--r-sm);padding:13px 15px;
  color:var(--text);font-family:var(--f-mono);font-size:15px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  transition:border-color var(--t1) var(--e),box-shadow var(--t1) var(--e)}
.rdRow input::placeholder{color:var(--dim);letter-spacing:.06em;font-weight:500;
  text-transform:none}
.rdRow input:focus{outline:none;border-color:var(--ice);box-shadow:var(--ring-ice)}
.rdRow .btn{padding:13px 24px;font-size:14.5px}
.rdRow .btn[disabled]{opacity:.55;cursor:progress;transform:none}
.rdMsg{margin-top:13px;padding:13px 16px;border-radius:var(--r-sm);font-size:13.5px;
  font-weight:600;line-height:1.6;animation:rdIn .28s var(--e)}
.rdMsg[hidden]{display:none}
.rdMsg.ok{background:var(--green-dim);border:1px solid rgba(52,211,153,.36);color:var(--green)}
.rdMsg.err{background:var(--red-dim);border:1px solid rgba(251,113,133,.34);color:var(--red)}
.rdMsg ul{margin:8px 0 0 18px;color:var(--text);font-weight:700}
.rdMsg li{margin-bottom:3px}
.rdMsg a{display:inline-block;margin-top:9px;color:var(--ice);font-weight:700;
  border-bottom:1px dashed var(--stroke-2)}
.rdMsg a:hover{border-bottom-color:var(--ice)}
@keyframes rdIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rdMsg{animation:none}}
/* Auf dem Handy bekommt der Knopf eine eigene Zeile in voller Breite — sonst
   steht er als schmaler Rest neben einem Feld, das ohnehin die Zeile braucht. */
@media(max-width:600px){.rdRow .btn{flex:1 1 100%}}

/* ── Konto & Daten (Löschbereich im Portal) ──────────────────────────────── */
.danger-zone{border-color:rgba(251,113,133,.28)}
.danger-zone h3{font-family:var(--f-display);font-weight:600;font-size:16px;
  display:flex;align-items:center;gap:9px;margin-bottom:6px}
.danger-zone .hint{font-size:12.5px;color:var(--dim);line-height:1.6;margin-bottom:14px}
.danger-zone .dz-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:16px;font-size:12.5px}
.danger-zone .dz-links a{color:var(--muted);font-weight:600;border-bottom:1px dashed var(--stroke-2)}
.danger-zone .dz-links a:hover{color:var(--ice-2)}
.btn-danger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid rgba(251,113,133,.4);
  background:rgba(251,113,133,.1);color:var(--red);font-family:inherit;font-weight:700;font-size:13.5px;
  padding:11px 18px;border-radius:var(--r-pill);transition:background var(--t1) var(--e),
  border-color var(--t1) var(--e),transform var(--t1) var(--e)}
.btn-danger:hover{background:rgba(251,113,133,.18);border-color:var(--red);transform:translateY(-1px)}
.btn-danger:active{transform:translateY(0) scale(.98)}
.btn-danger[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Bestätigungs-Dialog */
.dz-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px;
  background:rgba(4,6,12,.78);backdrop-filter:blur(8px);animation:dzIn .25s var(--e)}
.dz-modal[hidden]{display:none}
@keyframes dzIn{from{opacity:0}to{opacity:1}}
.dz-card{width:min(100%,460px);background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid rgba(251,113,133,.34);border-radius:var(--r-lg);padding:28px 30px;
  box-shadow:var(--elev-3);animation:dzPop .3s var(--e)}
@keyframes dzPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.dz-card h3{font-family:var(--f-display);font-weight:700;font-size:19px;margin-bottom:10px}
.dz-card p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:12px}
.dz-card ul{margin:0 0 16px 18px;font-size:13px;color:var(--muted);line-height:1.65}
.dz-card label{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:7px}
.dz-card input{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--stroke-2);
  border-radius:var(--r-sm);padding:12px 14px;color:var(--text);font-family:var(--f-mono);
  font-size:14px;margin-bottom:18px}
.dz-card input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(251,113,133,.22)}
.dz-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.dz-cancel{cursor:pointer;background:transparent;border:1px solid var(--stroke-2);color:var(--muted);
  font-family:inherit;font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:var(--r-pill)}
.dz-cancel:hover{color:var(--text);border-color:var(--stroke-glow)}
.dz-err{color:var(--red);font-size:12.5px;font-weight:600;margin-bottom:12px;min-height:1em}

@media(prefers-reduced-motion:reduce){
  .dz-modal,.dz-card{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile (Meilenstein 9)

   Das Twitch-Publikum ist überwiegend mobil; die Oberfläche war auf Desktop
   ausgelegt. Verbindliche Stufen: 4 Spalten → 2 unter 900px → 1 unter 600px.
   Alles ab 375px Breite muss bedienbar bleiben.
   ══════════════════════════════════════════════════════════════════════════ */

/* auto-fit-Grids folgen der Breite von selbst, sind aber unter 900px zu eng
   gerastert — hier hart auf zwei bzw. eine Spalte festlegen. */
@media (max-width:900px){
  .features,.cstats,.stat-grid,.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-grid .stat-wide{grid-column:1 / -1}
}
@media (max-width:600px){
  .features,.shelf,.tiles{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:0 16px}
  .panel{padding:18px 16px}
}
/* ── Kennzahlen bleiben auch am Handy ZWEISPALTIG ──────────────────────────
   Die Stufe „unter 600 px alles einspaltig" stimmt für die großen Karten
   (.features, .tiles, .shelf) — die tragen Überschrift, Fließtext und einen
   Knopf. Für .stat-grid und .cstats stimmt sie nicht: das sind kleine
   Zähler aus Symbol, Wort und Zahl. Einspaltig wurde daraus eine Kolonne
   halbleerer, bildschirmbreiter Kästen, die den Start des Portals auf dem
   Handy allein durch die Statistik um über 1000 px verlängert hat — man
   scrollte an sechs fast leeren Kacheln vorbei.

   Zwei Spalten passen selbst auf 320 px (je ~144 px). Die breite Kachel
   (Sammlungsfortschritt mit Balken) behält ihre volle Zeile. */
@media (max-width:600px){
  .cstats,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-grid .stat-wide{grid-column:1 / -1}
  .stat{padding:14px 12px}
  .stat .v{font-size:20px}
  .stat .k{font-size:11px}
}

/* Touch-Ziele: mindestens 44×44 px. Auf Zeigergeräten bleiben die kompakteren
   Maße — dort ist Präzision kein Problem und der Platz wertvoller. */
@media (hover:none){
  .btn,.openBtn,.qbtn,.bTab,.gv-tab,.m-tab,.linkBtn,.dz-cancel,.btn-danger,
  .cslot-up,.cslot-asc,.cslot-gear,.bc-sp,.cap-upgrade,.es-buy{
    min-height:44px;min-width:44px}
  .volBtn,.cslot-swap,.close-x,.pvClose,.bi-reroll{min-width:44px;min-height:44px}
  .foot-links a{display:inline-block;padding:10px 4px}
  /* 3D-Tilt ergibt auf Touch keinen Sinn (kein Hover-Zustand, kein Zeiger). */
  [data-tilt]{transform:none!important}
}

/* Guthaben immer sichtbar: die Kopfzeile klebt oben, die Coin-Pille bleibt
   auch dann stehen, wenn der Rest der Navigation ins Sheet wandert. */
@media (max-width:860px){
  .nav{position:sticky;top:0;z-index:40}
}

/* Rangliste auf dem Handy: Kompaktzeilen ohne Avatar — der Platz gehört dem
   Namen und der Zahl. */
@media (max-width:600px){
  /* .lrow ist ein Flex-Container — Avatar ausblenden und die Abstände enger
     ziehen reicht; ein Grid-Umbau wäre hier falsch. */
  .lrow .lav{display:none}
  .lrow{gap:9px;padding:9px 6px}
  .lrow .lnm{font-size:13.5px}
  .lrow .lbal{font-size:13px}
  .lrow .pos{min-width:22px}
}

/* ── Live-Feed-Ticker ──────────────────────────────────────────────────────
   Sozialer Beweis: nur Epic und aufwärts, damit es besonders bleibt. Neue
   Einträge sliden von oben ein, ältere fahren nach unten weg.

   Steht bewusst HIER und nicht in cases.css: der Ticker läuft auch auf der
   Landingpage, und die lädt nur community.css. Ohne diese Regeln fehlt dem
   Eintrag `position:absolute` — alter und neuer stapeln sich dann untereinander,
   statt sich zu überblenden. */
.dropTicker{position:relative;overflow:hidden;height:34px;margin:0 auto 18px;max-width:560px;
  border-radius:var(--r-pill);border:1px solid var(--stroke);background:var(--card);
  display:flex;align-items:center;justify-content:center}
.dropTicker[hidden]{display:none}
.dtItem{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;color:var(--muted);padding:0 16px;white-space:nowrap}
.dtItem b{color:var(--text)}
.dtItem .dtSkin{color:var(--rc,var(--gold));font-weight:800}
.dtItem .dtArt{font-size:17px;line-height:1;flex-shrink:0}
.dtItem img.dtArt{width:20px;height:20px;object-fit:contain}
.dtItem.enter{animation:dtIn .5s var(--e) both}
.dtItem.leave{animation:dtOut .5s var(--e) both}
@keyframes dtIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes dtOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(100%)}}
@media(max-width:600px){
  .dtItem{font-size:11.5px;padding:0 10px}
}
@media(prefers-reduced-motion:reduce){
  .dtItem.enter,.dtItem.leave{animation-name:dtFade}
  @keyframes dtFade{from{opacity:0}to{opacity:1}}
}

/* ── Icons (SVG statt Emoji) ───────────────────────────────────────────────
   Emojis rendern auf jedem Betriebssystem anders, lassen sich nicht einfärben
   und drücken die wahrgenommene Qualität. Alle Interface-Icons sind Inline-SVG
   im Lucide-Stil (siehe static/js/icons.js) und erben die Textfarbe. */
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0;
  color:inherit;flex-shrink:0}
.ic-svg{display:block}
/* In runden Icon-Flächen (Kacheln, Karten) etwas größer und mittig */
.stat .ico .ic-svg,.qcard .qi .ic-svg,.tile .emoji .ic-svg{width:20px;height:20px}
.feat-card .ic .ic-svg{width:26px;height:26px}

/* ══════════════════════════════════════════════════════════════════════════
   Karten-Standard („hochwertige Karten")

   Jede Karte bekommt dieselbe Behandlung: Glas, 3D-Neigung zur Mausposition
   und ein Glanz-Highlight, das dem Zeiger folgt. Der Glanz ist ein radialer
   Verlauf, dessen Mittelpunkt aus --mx/--my kommt (von community.js gesetzt) —
   dadurch läuft die ganze Interaktion über `transform` und `opacity`, nie über
   Layout-Eigenschaften.

   Übergang: 200 ms beim Hovern, 350 ms beim Verlassen — das Zurückgleiten darf
   ruhiger sein als das Anspringen, sonst wirkt es nervös.
   ══════════════════════════════════════════════════════════════════════════ */
.feat-card,.tile,.case,.qcard,.stat,.wallCard,.crew-slot{
  transition:transform .35s var(--e),box-shadow .35s var(--e),border-color .35s var(--e)}
.feat-card:hover,.tile:hover,.case:hover,.qcard:hover,.stat:hover,.crew-slot.filled:hover{
  transition-duration:.2s}

/* Glanz-Highlight, das dem Cursor folgt (8 % Deckkraft, wie im Konzept) */
[data-tilt],.case,.tile,.feat-card{position:relative}
[data-tilt]::after,.case::after,.tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .25s var(--e);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.08),transparent 60%)}
[data-tilt]:hover::after,.case:hover::after,.tile:hover::after{opacity:1}

/* Rarität-Karten: farbiger Border-Glow; Legendary und Mythic bekommen einen
   langsam rotierenden Verlauf (8 s pro Umlauf). */
.wallCard.r-legendary,.wallCard.r-mythic,.case.c-cartel,.crew-slot.filled.r-legendary,
.crew-slot.filled.r-mythic{position:relative}
.wallCard.r-legendary::before,.wallCard.r-mythic::before,
.crew-slot.filled.r-legendary::after,.crew-slot.filled.r-mythic::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),transparent,var(--rc),transparent 55%);
  animation:borderSpin 8s linear infinite;opacity:.55}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes borderSpin{to{--ang:360deg}}

/* Mythic: dezente aufsteigende Partikel im Kartenhintergrund */
.wallCard.r-mythic::after,.crew-slot.filled.r-mythic::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(2px 2px at 20% 90%,var(--rc),transparent),
                   radial-gradient(1.5px 1.5px at 62% 95%,var(--rc),transparent),
                   radial-gradient(2px 2px at 84% 88%,var(--rc),transparent);
  opacity:.5;animation:mythicRise 5.5s linear infinite}
@keyframes mythicRise{
  0%{transform:translateY(0);opacity:0}
  20%{opacity:.55}
  100%{transform:translateY(-70px);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .wallCard::before,.wallCard::after,.crew-slot.filled::before,.crew-slot.filled::after{
    animation:none}
  [data-tilt]::after,.case::after,.tile::after{transition:none}
}

/* ── Zahlen: durchgängig Monospace mit Tausenderpunkt ─────────────────────
   „Alle Zahlen in Monospace" konsequent auf jede Wertanzeige ausgeweitet.
   tabular-nums verhindert zusätzlich das Zappeln beim Hochzählen. */
.stat .v,.cstat .n,.wallet .bal,.coin-pill,.scrap-pill,.mark-pill,.lrow .lbal,
.lvl-badge .v,.xp .meta,.m-topbar .pill,.taskState,.tpN,.pyN,.crHead b,
.sdGrid b,.lbSub b,.br-tp,.dmDrop b,.wcRar,.bu-dmg,.rRate b,.pvRar,
.dz-card input,.collectRow .crHead b{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ── Ungelesen-Punkt in der Navigation ────────────────────────────────────
   Gehört hierher und nicht in social.css: die Navigation steht auf JEDER
   Portal-Seite, social.css lädt aber nur /community und das Profil. */
.nav-links a{position:relative}
.m-tab{position:relative}
.navDot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 8px rgba(251,113,133,.8)}
.m-tab .navDot{top:6px;right:calc(50% - 18px)}
.mSheetBadge{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--red);color:#fff;font:800 11px var(--f-ui);display:grid;
  place-items:center;flex:none}