/* ============================================================================
   ISKOBONUS — "THE ARENA LEDGER"  (casino listing page only)
   Loads AFTER main.css + tailwind.css + theme.css → these rules win on cascade.
   Self-contained. Selectors match docs/redesign/3-markup.md EXACTLY.
   Visual values taken from docs/redesign/2-css.md (renamed to markup selectors).

   Header / nav / footer global chrome is NOT restyled this round — skipped.

   Sections:
     A) Design-system tokens
     B) Shared buttons (.btn-primary / .btn-ghost / .btn-twitch / .cut-corner)
     C) Hero — "the stadium"
     D) Command bar (filter + sort) + token strip
     E) List container + podium band + dividers + rank rail
     F) Podium card (Top 3)
     G) Leaderboard row (rank 4+)
     H) Details drawer (shared, animated grid-rows)
     I) Promo strip · empty state · skeletons
     J) Responsive (tablet ≤1024 · mobile ≤640)
     K) prefers-reduced-motion

   Governing law: one gold focal per card · blue = system · 70% intensity · honor RM
============================================================================ */

/* ============================================================================
   A) DESIGN SYSTEM TOKENS  (spec A1–A6)
============================================================================ */
:root {
  /* --- A2 Color: background layers --- */
  --bg-base:   #06080f;
  --bg-raise:  #0b0f18;
  --surface:   #0e1219;
  --surface-2: #121826;

  /* --- Brand --- */
  --gold:    #f5b524;
  --gold-hi: #ffc83d;
  --blue:    #2b90f0;
  --blue-hi: #54b4ff;

  /* --- Text --- */
  --text-1: rgba(255,255,255,.95);
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.45);
  --ink:    #0a0b0f;

  /* --- Borders / hairlines --- */
  --border:      rgba(255,255,255,.07);
  --border-blue: rgba(84,180,255,.22);
  --border-gold: rgba(245,181,36,.45);

  /* --- Status --- */
  --amber: #fbbf24;
  --green: #22c55e;

  /* --- A1 Type families --- */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;

  /* --- A1 Type scale --- */
  --t-hero:        clamp(40px, 7vw, 68px);
  --t-h1:          40px;
  --t-h2:          30px;
  --t-podium-stat: clamp(34px, 4vw, 44px);
  --t-row-stat:    26px;
  --t-rank:        28px;
  --t-name:        20px;
  --t-lead:        17px;
  --t-body:        15px;
  --t-data:        15px;
  --t-meta:        13px;
  --t-label:       11px;

  /* --- A3 Spacing (8px base) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px;
  --section-gap: 64px;

  /* --- A4 Radius --- */
  --r-card:16px; --r-podium:20px; --r-tile:12px;
  --r-chip:999px; --r-btn:12px; --r-code:8px; --r-popover:14px;

  /* --- A5 Depth / glow --- */
  --shadow-card:   0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -22px rgba(0,0,0,.8);
  --ring-blue:     0 0 0 1px var(--border-blue), 0 0 28px -12px rgba(43,144,240,.5);
  --ring-gold:     0 0 0 1px var(--border-gold), 0 0 34px -10px rgba(245,181,36,.45);
  --glow-champion: 0 0 0 1px var(--border-gold), 0 24px 60px -22px rgba(245,181,36,.4);

  /* --- A6 Motion --- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 140ms; --dur: 200ms; --dur-slow: 280ms;

  /* --- A4 Esports clip-corner (primary CTAs only) --- */
  --clip-cta: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);

  /* --- layout maxima --- */
  --w-page: 1320px;
  --w-list: 1180px;
  --w-hero: 760px;
}

/* numerals: tabular wherever the markup asks for it + on the data surfaces */
.tabular-nums,
.lb-row, .podium-card, .cmd-bar, .hero-stats,
.isko-ring, .strength-bar, .stat-grid-4 {
  font-variant-numeric: tabular-nums;
}

/* ----- generic typographic helpers used by the markup ----- */
.t-label {
  font: 700 var(--t-label)/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.t-data  { font: 600 var(--t-data)/1.2 var(--font-body); color: var(--text-1); }
.t-meta  { font: 500 var(--t-meta)/1.4 var(--font-body); color: var(--text-3); }
.t-body  { font: 400 var(--t-body)/1.55 var(--font-body); color: var(--text-2); }

/* gold focal helpers (gradient-clipped numerals) */
.gold-focal {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gold-focal-soft { color: var(--gold); opacity: .92; }

/* ============================================================================
   B) SHARED BUTTONS  (.btn-primary / .btn-ghost / .btn-twitch / .cut-corner)
   This file loads after theme.css → we may freely override these.
============================================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--font-display);
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border: none; border-radius: var(--r-btn);
  padding: 12px 20px; cursor: pointer; position: relative; overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: var(--ring-gold); }
.btn-primary:active { transform: translateY(0); }
/* sheen sweep (markup adds .sheen to the hero CTA; we also sweep on hover) */
.btn-primary::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font-body);
  color: var(--text-1);
  background: transparent;
  border: 1px solid var(--border-blue);
  border-radius: var(--r-btn);
  padding: 12px 20px; cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-ghost:hover { background: rgba(43,144,240,.08); box-shadow: var(--ring-blue); }

.btn-twitch {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 13px/1 var(--font-body); color: #fff;
  background: #9146ff; border: none; border-radius: var(--r-btn);
  padding: 9px 16px; cursor: pointer; text-decoration: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-twitch:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* esports clip-corner — applied via the .cut-corner class in markup */
.cut-corner { clip-path: var(--clip-cta); }

/* ============================================================================
   C) HERO — "the stadium"
============================================================================ */
.hero-stadium {
  position: relative; overflow: hidden;
  min-height: 420px; display: flex; align-items: center;
  text-align: left;
}
/* layered radials live on .hero-bg so the SVG floor can sit above it */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 52% at 20% -4%, rgba(245,181,36,.20), transparent 66%),
    radial-gradient(56% 56% at 94% 4%, rgba(84,180,255,.24), transparent 64%),
    radial-gradient(60% 45% at 55% 110%, rgba(245,181,36,.10), transparent 70%),
    var(--bg-base);
  background-attachment: scroll;   /* scroll with the page so the glows don't shift weirdly */
}
.grid-floor {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 220px;
  pointer-events: none; opacity: .5; z-index: 0;
  stroke: var(--border-blue); fill: none;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
/* optional 20s perspective drift (killed under reduced-motion) */
.grid-floor { animation: floorDrift 20s linear infinite; }
@keyframes floorDrift { to { transform: translateY(-12px); } }

.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--w-hero); padding: 64px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-chip);
  border: 1px solid var(--border-gold); background: rgba(245,181,36,.07);
  font: 700 var(--t-label)/1 var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2);
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px -1px var(--gold);
  animation: dotPulse 1.8s var(--ease) infinite;
}
@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.hero-h1 {
  font: 800 var(--t-hero)/1.02 var(--font-display);
  color: var(--text-1); letter-spacing: -.01em; margin: 0;
}
.text-shimmer {
  background: linear-gradient(90deg, var(--blue-hi), var(--gold), var(--blue-hi));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% 0; } }

.hero-lead {
  max-width: 540px;
  font: 400 var(--t-lead)/1.5 var(--font-body); color: var(--text-2); margin: 0;
}

.hero-stats {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  font: 600 var(--t-data)/1.2 var(--font-body); color: var(--text-2);
}
.hero-stats #hero-stat-count {
  color: var(--text-1); font-weight: 800; font-family: var(--font-display);
}
.middot { color: var(--text-3); }
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px -1px var(--green);
  animation: dotPulse 1.8s var(--ease) infinite;
}

.hero-cta {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 4px;
}

.scroll-cue {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: var(--text-3); z-index: 1;
  animation: bob 1.8s var(--ease) infinite;
}
@keyframes bob {
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%    {transform:translateX(-50%) translateY(6px);}
}

/* ---- asymmetric split hero (replaces the centered marketing hero) ---- */
.hero-grid {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--w-page); margin: 0 auto; padding: 48px 24px;
  display: grid; grid-template-columns: 1.5fr 0.85fr; gap: 48px; align-items: center;
}
.hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; }
.hero-main .hero-h1 { text-align: left; }
.hero-main .hero-lead { text-align: left; max-width: 520px; }
.hero-main .hero-cta { justify-content: flex-start; }

.hero-side {
  display: flex; flex-direction: column; gap: 0;
  background: linear-gradient(180deg, rgba(18,24,38,.72), rgba(10,14,22,.6));
  border: 1px solid var(--border-gold); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 18px 22px; backdrop-filter: blur(6px);
}
.hs-eyebrow { font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.hs-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.hs-stat:first-of-type { border-top: 0; }
.hs-l { font: 500 13px/1.3 var(--font-body); color: var(--text-3); }
.hs-v { font: 700 15px/1.2 var(--font-display); color: var(--text-1); text-align: right; }
.hs-v.hs-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
  .hero-side { order: 2; }
}

/* ============================================================================
   D) COMMAND BAR (filter + sort)
============================================================================ */
.cmd-bar-wrap {
  position: sticky; top: 56px; z-index: 40;
  background: rgba(6,8,15,.85);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.cmd-bar { max-width: var(--w-page); margin: 0 auto; }
.cmd-scroll {
  min-height: 60px; padding: 10px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  overflow: visible;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cmd-scroll::-webkit-scrollbar { display: none; }

.cmd-count {
  flex: 0 0 auto; font: 700 14px/1 var(--font-display); color: var(--text-1);
  white-space: nowrap;
}
#result-count { color: var(--gold); }

/* quick-filter segment (single-select) — icon + label + count badge */
.quick-seg { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.qf-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--font-body); color: var(--text-2);
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 13px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.qf-pill i { font-size: 13px; color: var(--text-3); transition: color var(--dur-fast) var(--ease); }
.qf-pill:hover { border-color: var(--border-blue); color: var(--text-1); }
.qf-pill:hover i { color: var(--blue-hi); }
.qf-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px;
  background: rgba(255,255,255,.07); color: var(--text-2);
  font: 700 11px/1 var(--font-body); margin-left: 1px;
}
.qf-pill.is-active {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--ink); border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(245,181,36,.6);
}
.qf-pill.is-active i { color: var(--ink); }
.qf-pill.is-active .qf-count { background: rgba(42,29,0,.22); color: var(--ink); }

/* popover anchor + dropdown chips (Boni / Zahlungen) */
.popover-anchor { position: relative; flex: 0 0 auto; }
.cmd-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px/1 var(--font-body); color: var(--text-2);
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 13px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmd-chip > i:first-child { font-size: 13px; color: var(--text-3); transition: color var(--dur-fast) var(--ease); }
.cmd-chip .fa-chevron-down { font-size: 10px; color: var(--text-3); }
.cmd-chip:hover,
.cmd-chip[aria-expanded="true"] { border-color: var(--border-blue); color: var(--text-1); }
.cmd-chip:hover > i:first-child,
.cmd-chip[aria-expanded="true"] > i:first-child { color: var(--blue-hi); }
.chip-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px;
  background: var(--blue); color: var(--ink);
  font: 700 11px/18px var(--font-body); text-align: center;
}
.chip-badge[hidden] { display: none; }

/* B3 popover panel (shared) */
.popover {
  position: fixed; z-index: 80;
  min-width: 220px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-popover);
  box-shadow: var(--shadow-card), var(--ring-blue);
  padding: 8px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.popover[hidden] { display: none; }
.pay-popover { display: grid; gap: 12px; min-width: 320px; }
.pay-group { display: block; }
.pay-group .t-label { margin: 4px 4px 6px; }
/* .pay-grid INSIDE the popover = toggle-chip wrap (distinct from the drawer .pay-grid) */
.popover .pay-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.toggle-chip {
  font: 500 13px/1 var(--font-body); color: var(--text-2);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-chip); padding: 7px 12px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.toggle-chip:hover { border-color: var(--border-blue); }
.toggle-chip.is-on {
  background: rgba(43,144,240,.12); border-color: var(--blue);
  color: var(--blue-hi); font-weight: 600;
}

/* active filter token-chips strip */
.token-strip {
  max-width: var(--w-page); margin: 0 auto; padding: 8px 24px 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.token-strip[hidden] { display: none; }
.token-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-body); color: var(--ink);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border: none; border-radius: var(--r-chip); padding: 6px 10px; cursor: pointer;
}
.token-chip i { font-weight: 800; opacity: .8; }
.token-chip:hover i { opacity: 1; }
.token-reset {
  font: 600 12px/1 var(--font-body); color: var(--text-3);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
.token-reset:hover { color: var(--text-1); }

/* ============================================================================
   E) LIST CONTAINER + PODIUM BAND + DIVIDERS + RANK RAIL
============================================================================ */
/* page scope wrapper: <main id="alle" class="iskotrack"> */
.iskotrack { background: var(--bg-base); color: var(--text-2); }

.arena-list {
  max-width: var(--w-list); margin: 0 auto; padding: 0 24px 64px;
  background: var(--bg-base);
}

.section-h2 {
  font: 700 var(--t-h2)/1.1 var(--font-display); color: var(--text-1); margin: 0;
}

/* podium strip band */
.podium-band {
  background: var(--bg-raise);
  border-radius: var(--r-podium);
  padding: 48px 32px 32px;
  margin: 64px 0 48px;
}
.podium-band .section-h2 { margin-bottom: 36px; }
#podium-section { position: relative; }
.podium-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; align-items: end;
}

/* "Rangliste" divider */
.rangliste-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 48px 0 24px;
}
.divider-rule { flex: 1; height: 1px; background: var(--border); }
.divider-count { white-space: nowrap; }

/* leaderboard stack along the vertical rank rail */
.rank-rail-wrap { position: relative; padding-left: 0; }
.rank-rail { display: none; }   /* no vertical rail */
.lb-stack { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================================
   F) PODIUM CARD (Top 3)
============================================================================ */
.podium-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 24px 24px;
  background: var(--surface);
  border-radius: var(--r-podium);
  box-shadow: var(--shadow-card);
  margin-top: 28px; /* room for the floating medallion */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.podium-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card), var(--ring-blue); }

/* tinted gradient border by tier (mask trick) */
.podium-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: -1;
}
.podium-card.tier-gold::before   { background: linear-gradient(135deg, var(--gold-hi), rgba(245,181,36,.25), var(--gold)); }
.podium-card.tier-silver::before { background: linear-gradient(135deg, #d8dde6, rgba(216,221,230,.25), #aeb6c2); }
.podium-card.tier-bronze::before { background: linear-gradient(135deg, #d79a63, rgba(215,154,99,.25), #b06f3a); }

/* champion: tallest, raised, static gold glow (the only gold-ring+gold-stat card) */
.podium-card.is-champion {
  box-shadow: var(--glow-champion);
  transform: translateY(-16px) scale(1.02);
  padding-top: 40px;
}
.podium-card.is-champion:hover { transform: translateY(-19px) scale(1.02); }
@media (min-width: 1024px) {
  /* champion centered: DOM 1,2,3 → visual 2,1,3 (driven by --rank inline var) */
  .podium-card[style*="--rank:1"] { order: 2; }
  .podium-card[style*="--rank:2"] { order: 1; }
  .podium-card[style*="--rank:3"] { order: 3; }
}

/* rank medallion (floating, overlaps top edge) */
.medallion {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.medallion.tier-gold   { background: radial-gradient(circle at 30% 25%, var(--gold-hi), var(--gold) 70%, #b8860b); }
.medallion.tier-silver { background: radial-gradient(circle at 30% 25%, #f1f4f8, #c2c9d4 70%, #8a93a3); }
.medallion.tier-bronze { background: radial-gradient(circle at 30% 25%, #f0bd8e, #c8804a 70%, #8a522a); }
.medal-num {
  position: relative; z-index: 1;
  font: 800 var(--t-rank)/1 var(--font-display); color: var(--ink);
}
/* champion one-time shine sweep */
.medallion.tier-gold::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  transform: translateX(-120%); animation: medalShine 2.6s var(--ease) .4s 1 forwards;
}
@keyframes medalShine { to { transform: translateX(120%); } }

/* ISKO Score ring (shared SVG component) */
.isko-ring {
  position: absolute; top: 16px; right: 16px;
  width: 44px; text-align: center; line-height: 0;
}
.isko-ring svg { display: block; width: 100%; height: auto; }
.isko-track { stroke: var(--border-blue); }
.isko-arc {
  /* JS sets stroke-dashoffset from data-final on scroll-in; tier class sets color */
  transition: stroke-dashoffset 900ms var(--ease);
}
.isko-ring.is-gold  .isko-arc { stroke: var(--gold); }
.isko-ring.is-blue  .isko-arc { stroke: var(--blue-hi); }
.isko-ring.is-muted .isko-arc { stroke: var(--text-3); }
.isko-num {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px; display: grid; place-items: center;
  font: 600 var(--t-data)/1 var(--font-body); color: var(--text-1);
}
.isko-cap {
  display: block; margin-top: 2px; line-height: 1;
  font: 700 9px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}

/* logo plate */
.podium-logo {
  width: 80px; height: 80px; border-radius: var(--r-tile);
  display: grid; place-items: center; background: #0a0d14;
  border: 1px solid var(--border);
}
.podium-logo img { max-width: 60px; max-height: 60px; object-fit: contain; }
.podium-logo i { font-size: 32px; color: var(--text-3); }

.podium-name {
  font: 700 var(--t-name)/1.2 var(--font-display); color: var(--text-1);
  text-align: center; margin: 0;
}
.podium-verdict {
  font: italic 400 13px/1.4 var(--font-body); color: var(--text-3);
  text-align: center; margin: 0;
}

/* bonusType tag (text, not chip) */
.podium-type { min-height: 14px; }
.type-tag {
  font: 700 var(--t-label)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.type-tag.is-sticky { color: var(--blue-hi); }
.type-tag.is-nonsticky {
  color: var(--gold); border: 1px solid var(--border-gold);
  border-radius: var(--r-chip); padding: 4px 8px;
}

/* the gold focal: bonus % big */
.podium-bonus {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bonus-pct {
  font: 800 var(--t-podium-stat)/1 var(--font-display);
}
.bonus-sub { font: 600 var(--t-data)/1 var(--font-body); color: var(--text-2); }
.fs-line { font: 600 var(--t-meta)/1 var(--font-body); color: var(--blue-hi); }

/* strength bar (blue→gold normalized fill, --w drives width) */
.strength-bar {
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.strength-fill {
  display: block; height: 100%; border-radius: 999px;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform-origin: left;
  transition: width 600ms var(--ease);
}

.podium-meta { text-align: center; }

/* no-deposit pill (amber, reserved) */
.nodep-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber); background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.35); border-radius: var(--r-chip); padding: 5px 10px;
}

/* front-face trust marker (always visible compliance line) */
.front-trust {
  font: 500 var(--t-meta)/1.3 var(--font-body); color: var(--text-3); text-align: center;
}

/* actions: code pill + primary CTA */
.podium-actions {
  width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.podium-actions .btn-primary { width: 100%; }

/* code pill — click to copy */
.code-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/1 var(--font-body); color: var(--text-1);
  background: transparent; border: 1px dashed var(--border-blue);
  border-radius: var(--r-code); padding: 8px 12px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.code-pill:hover { border-color: var(--blue-hi); }
.code-val { letter-spacing: .04em; }
.code-ico { color: var(--text-3); }
.code-pill.is-copied {
  color: var(--green); border-color: var(--green); border-style: solid;
  background: rgba(34,197,94,.08);
  animation: copyFlash var(--dur-fast) var(--ease);
}
.code-pill.is-copied .code-ico { color: var(--green); }
@keyframes copyFlash {
  0%   { box-shadow: 0 0 0 0 rgba(245,181,36,.5); }
  100% { box-shadow: 0 0 0 8px rgba(245,181,36,0); }
}

/* payment strip — grayscale, blooms to color on card/row hover */
.pay-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-strip.pay-foot { justify-content: center; }
.pay-strip img, .pay-strip .pay-icon {
  height: 20px; width: auto; filter: grayscale(1); opacity: .4;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.podium-card:hover .pay-strip img,
.podium-card:hover .pay-strip .pay-icon,
.lb-row:hover .pay-strip img,
.lb-row:hover .pay-strip .pay-icon { filter: grayscale(0); opacity: 1; }
/* full payment grid (drawer) — always color, larger */
.pay-strip.pay-full img, .pay-strip.pay-full .pay-icon {
  height: 22px; filter: none; opacity: 1;
}

/* details toggle (podium) */
.details-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 13px/1 var(--font-body); color: var(--text-3);
  background: none; border: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.details-toggle:hover { color: var(--text-1); }
.details-toggle i { transition: transform var(--dur) var(--ease); }
.details-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* ============================================================================
   G) LEADERBOARD ROW (rank 4+)
============================================================================ */
.lb-row {
  position: relative;
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: 42px 60px minmax(120px, 1fr) minmax(150px, 1.3fr) 92px 104px 170px;
  min-height: 116px; padding: 16px 20px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lb-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), var(--ring-blue); }

/* hover scanline (single sweep) */
.lb-row::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(84,180,255,.12) 50%, transparent 60%);
  transform: translateX(-110%); opacity: 0;
}
.lb-row:hover::after { opacity: 1; animation: scanSweep var(--dur-slow) var(--ease) forwards; }
@keyframes scanSweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* rail node tied to the vertical rail */
.rail-node {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-hi); box-shadow: 0 0 12px -2px var(--blue-hi);
  margin-left: -24px; /* sits on the rail (.rank-rail-wrap padding-left) */
  animation: nodePulse 2.4s var(--ease) infinite;
}
@keyframes nodePulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.35); opacity: .6; }
}

/* rank cell */
.lb-rank { text-align: center; }
.rank-num {
  display: block;
  font: 800 var(--t-rank)/1 var(--font-display); color: var(--gold);
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
.lb-row:hover .rank-num { color: var(--gold); text-shadow: 0 0 12px -2px var(--gold); }
.isko-chip {
  display: inline-block; margin-top: 4px;
  font: 600 11px/1 var(--font-body); color: var(--text-3);
}

/* logo plate (row variant) */
.lb-logo {
  width: 60px; height: 60px; border-radius: var(--r-tile);
  display: flex; align-items: center; justify-content: center; background: #0a0d14;
  border: 1px solid var(--border); overflow: hidden; flex: 0 0 auto;
}
.lb-logo .logo-block { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-logo .logo-img,
.lb-logo img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; }
.lb-logo .logo-icon, .lb-logo i { font-size: 24px; color: var(--text-3); }

/* name + type */
.lb-name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row-name { font: 700 18px/1.2 var(--font-display); color: var(--text-1); margin: 0; }
.row-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* WILLKOMMENSBONUS headline block */
.lb-welcome { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wb-label { font: 700 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.wb-main { font: 800 22px/1.1 var(--font-display); color: var(--gold); white-space: nowrap; }
.wb-main .wb-bis { font: 700 13px/1 var(--font-body); color: var(--text-2); }
.wb-fs { font: 700 12px/1 var(--font-body); color: var(--blue-hi); }

/* labeled stat columns (Bonus / Max.Bet · Max.Bonus / Wager) */
.lb-stat-col { display: flex; flex-direction: column; gap: 12px; }
.lb-stat { display: flex; flex-direction: column; gap: 3px; }
.ls-l { font: 700 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.ls-v { font: 800 16px/1 var(--font-display); color: var(--text-1); white-space: nowrap; }

/* actions cell — Code (top) + Jetzt spielen + Details ansehen (stacked) */
.lb-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.lb-actions .code-pill { width: 100%; justify-content: space-between; }
.lb-play { width: 100%; padding: 11px 14px; font-size: 14px; }
.lb-info {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--r-btn);
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-2);
  font: 600 12px/1 var(--font-body); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lb-info:hover { border-color: var(--border-blue); color: var(--text-1); background: rgba(43,144,240,.07); }
.lb-info .fa-circle-info { color: var(--blue-hi); }

/* feature badges in the row (Welcome / Free Spins / No-Deposit / Crypto) */
.feat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
}
.feat-badge i { font-size: 10px; }
.fb-welcome { color: #34d399;     background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.30); }
.fb-fs      { color: var(--gold); background: rgba(245,181,36,.10); border-color: rgba(245,181,36,.30); }
.fb-nodep   { color: var(--amber);   background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.30); }
.fb-crypto  { color: var(--blue-hi); background: rgba(84,180,255,.10); border-color: rgba(84,180,255,.30); }

/* ---- Uniform top-bar utility cluster (logged-in: admin / gift / bell / avatar / burger) ---- */
header #lb-btn, header #notif-btn, header #user-menu-btn,
header a[href="/admin"].text-amber-400 {
  height: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03);
  color: var(--text-2); padding: 0 12px; box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
header #lb-btn:hover, header #notif-btn:hover, header #user-menu-btn:hover,
header a[href="/admin"].text-amber-400:hover {
  border-color: var(--border-blue); background: rgba(43,144,240,.07); color: var(--text-1); box-shadow: none;
}
header #lb-btn, header #notif-btn { width: 40px; padding: 0; }
/* no burgers on desktop — the sidebar is always there; the old mobile toggle is replaced by .rb-burger + the sidebar */
header #mobile-menu-toggle { display: none !important; }
@media (min-width: 1024px) { header .rb-burger { display: none !important; } }
header #user-menu-btn { gap: 8px; padding: 0 10px; width: auto; }
header a[href="/admin"].text-amber-400 { gap: 7px; color: #ffc83d; font-weight: 700; width: auto; }
header a[href="/admin"].text-amber-400:hover { color: #ffd24a; }

/* clean slim top bar — kill the old glowing header line (looked off, only over the content,
   creating an asymmetric glow next to the sidebar) and use a quiet full-context hairline */
header.header-mint-glow::after { display: none !important; }
header.header-mint-glow { border-bottom: 1px solid var(--border); }

/* row trust line — hidden on desktop/tablet rows (license + min. deposit live in the
   expandable drawer); shown only in the mobile card layout below */
.front-trust.lb-trust {
  display: none;
  grid-column: 1 / -1; text-align: left; margin: 0;
  padding-bottom: 14px; padding-left: 56px;
}

/* full-row invisible expand hit-target (left 80%) */
.row-expand {
  position: absolute; inset: 0; width: 80%;
  background: none; border: none; cursor: pointer; padding: 0; margin: 0;
  z-index: 1;
}
/* keep interactive cells clickable above the expand overlay */
.lb-row .lb-cta,
.lb-row .lb-code,
.lb-row .code-pill { position: relative; z-index: 2; }

/* ============================================================================
   H) DETAILS DRAWER (shared, animated grid-rows)

   CSS ↔ JS CONTRACT (drawer open/close):
     • Markup puts the `hidden` attribute on `.row-drawer` (id drawer-podium-N /
       drawer-row-N). `hidden` collapses it (display:none) for the no-JS / initial
       state.
     • Resting (collapsed) state when shown: `.row-drawer { display:grid;
       grid-template-rows:0fr }` with `.drawer-inner { overflow:hidden }`.
     • OPEN  : JS removes the `hidden` attribute, then on the NEXT animation frame
               adds `.is-open` → grid-template-rows animates 0fr → 1fr (240ms).
     • CLOSE : JS removes `.is-open` → animates 1fr → 0fr; after the transitionend
               (~240ms) it re-adds the `hidden` attribute.
     • One drawer open at a time; the toggle flips aria-expanded on
       `.details-toggle` / `.row-expand`.
============================================================================ */
.row-drawer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease);
}
.row-drawer.is-open { grid-template-rows: 1fr; }
.row-drawer[hidden] { display: none; }     /* initial / fully-closed state */

/* the panel itself: clips during the 0fr→1fr animation, holds the visual chrome */
.drawer-inner {
  overflow: hidden; min-height: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 24px 20px;
}
.drawer-inner > * { margin: 0; }
.drawer-inner > * + * { margin-top: 14px; }

/* round the bottom corners to match the host card radius */
.lb-row .row-drawer { grid-column: 1 / -1; margin: 0 -20px; }
.lb-row .drawer-inner { border-radius: 0 0 var(--r-card) var(--r-card); }
.podium-card .drawer-inner { border-radius: 0 0 var(--r-podium) var(--r-podium); }

/* stat cards (icon + label + value) */
.stat-grid-4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-cell {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stat-cell:hover { border-color: var(--border-gold); transform: translateY(-1px); }
.stat-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(245,181,36,.12); border: 1px solid rgba(245,181,36,.28);
  color: var(--gold); font-size: 14px;
}
.stat-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-cell .t-label { margin: 0; }
.stat-cell .t-data  { font: 800 var(--t-data)/1.15 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* drawer content blocks — subtle panels with icon headers */
.drawer-block {
  background: rgba(255,255,255,.022);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
}
.drawer-block .t-label { margin: 0 0 12px; }
.drawer-h { display: flex; align-items: center; gap: 7px; }
.drawer-h i { color: var(--gold); font-size: 12px; }

/* welcome deposit ladder */
.ladder {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0;
}
.ladder-step {
  flex: 1; position: relative; padding: 0 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font: 500 var(--t-meta)/1.4 var(--font-body); color: var(--text-2);
}
.ladder-n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(43,144,240,.12); color: var(--blue-hi);
  font: 700 12px/1 var(--font-display);
}
.ladder-txt { display: block; }
.ladder-txt b { display: block; font: 800 16px/1 var(--font-display); color: var(--gold); }
.ladder-sub { display: block; font: 500 11px/1 var(--font-body); color: var(--text-3); margin-top: 3px; }
.ladder-step:not(:last-child)::after {
  content: ""; position: absolute; top: 12px; left: 50%; right: -50%;
  height: 1px; background: var(--border);
}

/* pros: 2-col checkmark list */
.pros-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.pros-grid li {
  display: flex; align-items: flex-start; gap: 8px;
  font: 400 var(--t-body)/1.4 var(--font-body); color: var(--text-2);
}
.pro-tick { color: var(--blue-hi); margin-top: 2px; }

/* ============================================================================
   I) PROMO STRIP · EMPTY STATE · SKELETONS
============================================================================ */
.promo-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 32px; border-radius: var(--r-card);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(43,144,240,.18), transparent 60%),
    linear-gradient(135deg, rgba(245,181,36,.10), transparent 60%),
    var(--surface);
  border: 1px solid var(--border-blue);
  margin: 4px 0;
}
.promo-copy .t-label { margin: 0 0 6px; }
.promo-title { font: 800 22px/1.1 var(--font-display); color: var(--text-1); margin: 0; }

/* empty state */
.empty-state {
  max-width: 520px; margin: 64px auto; padding: 48px 32px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.empty-state[hidden] { display: none; }
.empty-ico { font-size: 48px; color: var(--text-3); opacity: .5; margin-bottom: 16px; display: block; }
.empty-head { font: 700 22px/1.2 var(--font-display); color: var(--text-1); margin: 0 0 20px; }

/* skeletons (.skel on .podium-card / .lb-row) */
.skel {
  background: linear-gradient(100deg, var(--surface) 30%, rgba(255,255,255,.05) 50%, var(--surface) 70%);
  background-size: 200% 100%; animation: skel 1.4s linear infinite;
}
.skel::before, .skel::after { display: none !important; }
.podium-card.skel {
  height: 360px; border-radius: var(--r-podium);
  display: block; padding: 0; box-shadow: var(--shadow-card);
}
.lb-row.skel {
  min-height: 88px; height: 88px; border-radius: var(--r-card);
  display: block; padding: 0; box-shadow: var(--shadow-card);
}
@keyframes skel { to { background-position: -200% 0; } }

/* ============================================================================
   J) RESPONSIVE — tablet ≤1024 · mobile ≤640
============================================================================ */

/* ---- TABLET (≤1024) ---- */
@media (max-width: 1280px) {   /* raised from 1024: the 250px sidebar squeezes content, so simplify earlier */
  /* podium: 3-up equal height, champion keeps gold border/glow but not raised */
  .podium-card.is-champion { transform: none; padding-top: 32px; }
  .podium-card.is-champion:hover { transform: translateY(-3px); }

  /* leaderboard: drop the two labeled stat columns (info stays in the Willkommensbonus block + drawer) */
  .lb-row {
    grid-template-columns: 42px 56px minmax(120px, 1fr) minmax(150px, 1.2fr) 168px;
  }
  .lb-stat-col { display: none; }

  /* drawer stat grid → 2-up */
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- MOBILE (≤640) ---- */
@media (max-width: 640px) {
  :root { --section-gap: 40px; }

  .hero-stadium { min-height: 400px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn-primary, .hero-cta .btn-ghost { width: 100%; }
  .grid-floor { height: 140px; }
  .scroll-cue { display: none; }

  /* command bar stays one scrolling line (never a drawer) with edge fade */
  .cmd-scroll {
    padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }

  /* Boni / Zahlungen popovers → bottom-sheets for thumb reach */
  .popover {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    min-width: 0; width: 100%;
    border-radius: var(--r-popover) var(--r-popover) 0 0;
  }
  .pay-popover { min-width: 0; }

  /* podium → 1-col stack, full-width portrait, reset desktop ordering */
  .podium-band { padding: 40px 16px 24px; }
  .podium-grid { grid-template-columns: 1fr; align-items: stretch; }
  .podium-card[style*="--rank:1"],
  .podium-card[style*="--rank:2"],
  .podium-card[style*="--rank:3"] { order: 0; }

  /* leaderboard → stacked card (rank badge floats top-right, stats become inline rows) */
  .lb-row {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; min-height: 0; position: relative;
  }
  .lb-rank {
    position: absolute; top: 14px; right: 16px;
    display: flex; flex-direction: row; align-items: baseline; gap: 6px; text-align: right;
  }
  .lb-rank .isko-chip { margin-top: 0; }
  .lb-logo { width: 52px; height: 52px; }
  .lb-stat-col { display: flex; flex-direction: row; gap: 18px; flex-wrap: wrap; }
  .lb-row .row-drawer { margin: 0 -16px; }

  /* drawer stacks */
  .stat-grid-4 { grid-template-columns: 1fr; }
  .pros-grid { grid-template-columns: 1fr; }
  .ladder { flex-direction: column; gap: 12px; }
  .ladder-step:not(:last-child)::after { display: none; }

  .promo-strip { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* ============================================================================
   K) prefers-reduced-motion — render final state instantly
============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .lb-row::after { display: none; }              /* no scanline */
  .scroll-cue { display: none; }
  .grid-floor { animation: none; }
  .text-shimmer { animation: none; background-position: 0 0; }
  .strength-fill { transition: none; }           /* JS sets final width directly */
  .isko-arc { transition: none; }                /* JS sets final offset directly */
  .medallion.tier-gold::after { display: none; }
  .pulse-dot, .live-dot, .rail-node { animation: none; }
  .row-drawer { transition: none; }              /* drawer snaps */
}

/* ============================================================================
   L) Small-N podium — center 1 or 2 cards instead of left-aligning in 3 cols.
   (Live can have very few casinos; a lone card must sit centered, not in col 1.)
============================================================================ */
@media (min-width: 1024px) {
  /* exactly one card → single centered column */
  .podium-grid:has(.podium-card:only-child) {
    grid-template-columns: minmax(300px, 440px);
    justify-content: center;
  }
  /* exactly two cards → two centered columns */
  .podium-grid:has(.podium-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 380px));
    justify-content: center;
  }
  /* a lone champion shouldn't be pushed by the 3-up centering order */
  .podium-grid:has(.podium-card:only-child) .podium-card,
  .podium-grid:has(.podium-card:nth-child(2):last-child) .podium-card { order: 0; }
}

/* ============ M) sidebar + framing (casino page) ============ */
/* Left sidebar nav + winner ticker + floating Twitch widget + hero game-art.
   OUR dark neon-blue+gold palette — inspired by, not a clone. 70% intensity.
   Reuses existing :root tokens; only adds the two layout vars below.
   No un-stoppable loops: marquee pauses on hover; all loops killed by the
   global prefers-reduced-motion block (section K) + explicit overrides here. */
:root { --rb-w:250px; --rb-wc:74px; }

/* ---- SIDEBAR (fixed, full height, collapsible, mobile off-canvas) ---- */
.rb-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--rb-w); z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 12px;
  background:
    radial-gradient(130% 26% at 0% 0%, rgba(84,180,255,.12), transparent 62%),
    radial-gradient(130% 22% at 0% 100%, rgba(245,181,36,.10), transparent 62%),
    linear-gradient(180deg, #0c1018, #090d14);
  border-right: 1px solid var(--border-gold);
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
  overflow: hidden;
}

.rb-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 8px 22px; }
.rb-brand img { height: 92px; width: auto; max-width: 100%; }
/* Live-Twitch status badge in the sidebar (replaces the old floating widget) */
.rb-tw-badge {
  margin-left: auto; font: 700 9px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); flex: 0 0 auto;
}
.rb-tw-badge.is-live {
  color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1);
  box-shadow: 0 0 10px -3px rgba(34,197,94,.5);
}
.rb-brand-name {
  font: 800 18px/1 var(--font-display); color: var(--text-1); letter-spacing: -.01em;
}

.rb-nav {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; scrollbar-width: thin;
}
.rb-nav-group { margin-top: 14px; }
.rb-nav-label {
  font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); padding: 4px 12px 8px;
}

.rb-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-2); text-decoration: none;
  font: 600 14px/1 var(--font-body); position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rb-nav-link:hover { background: rgba(84,180,255,.08); color: var(--text-1); }
.rb-nav-ico {
  width: 22px; text-align: center; font-size: 16px; color: var(--text-3);
  flex: 0 0 auto; transition: color var(--dur-fast);
}
.rb-nav-link:hover .rb-nav-ico { color: var(--blue-hi); }

.rb-nav-link.is-active {
  background: linear-gradient(90deg, rgba(245,181,36,.18), rgba(245,181,36,.04));
  color: var(--text-1);
}
.rb-nav-link.is-active .rb-nav-ico { color: var(--gold); }
.rb-nav-link.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  box-shadow: 0 0 10px -2px var(--gold);
}

/* mobile backdrop */
.rb-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(4,6,12,.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur);
}
body.rb-mobile-open .rb-backdrop { opacity: 1; pointer-events: auto; }

/* ---- CONTENT SHIFT: pad the body so each page's own mx-auto still CENTERS the content
   (margin-left on .rb-shift overrode mx-auto → content hugged the left). ---- */
body.rb-on { padding-left: var(--rb-w); transition: padding-left var(--dur) var(--ease); }
.rb-shift { /* no-op now; shift handled by body padding */ }

.rb-burger {
  display: none;
  background: transparent; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-2); width: 38px; height: 38px; cursor: pointer;
}

/* responsive: off-canvas drawer under 1024 */
@media (max-width: 1023px) {
  .rb-sidebar { transform: translateX(-100%); width: var(--rb-w); z-index: 70; }
  body.rb-mobile-open .rb-sidebar { transform: none; }
  body.rb-on { padding-left: 0; }
  .rb-burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- HERO GAME-ART (decorative neon icons floating in the hero) ---- */
.hero-art {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
/* original atmosphere: soft glowing light orbs (replaces the slot-symbol icons) */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(16px); opacity: .5; will-change: transform;
  animation: rbFloat 13s var(--ease) infinite;
}
.ho-1 { left: 7%;   top: 26%; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(43,144,240,.55), transparent 70%); animation-delay: -1s; }
.ho-2 { left: 15%;  top: 64%; width: 90px;  height: 90px;
  background: radial-gradient(circle, rgba(245,181,36,.40), transparent 70%); animation-delay: -5s; animation-duration: 15s; }
.ho-3 { right: 8%;  top: 22%; width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(245,181,36,.45), transparent 70%); animation-delay: -3s; animation-duration: 14s; }
.ho-4 { right: 14%; top: 60%; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(43,144,240,.50), transparent 70%); animation-delay: -7s; animation-duration: 16s; }
.ho-5 { left: 47%;  top: 4%;  width: 80px;  height: 80px;
  background: radial-gradient(circle, rgba(84,180,255,.35), transparent 70%); animation-delay: -2s; animation-duration: 12s; }
.hero-art-item {
  position: absolute;
  font-size: clamp(34px, 4vw, 60px);
  opacity: .5; will-change: transform;
  animation: rbFloat 9s var(--ease) infinite;
}
/* corners/sides, alternating gold vs blue glow, varied size/delay/duration */
.ha-1 { left: 6%;  top: 18%; color: var(--gold);
  text-shadow: 0 0 18px rgba(245,181,36,.55); filter: drop-shadow(0 0 10px rgba(245,181,36,.4));
  animation-delay: -1s; animation-duration: 9s; }
.ha-2 { left: 11%; top: 64%; color: var(--blue-hi); font-size: clamp(28px,3vw,48px);
  text-shadow: 0 0 18px rgba(84,180,255,.55); filter: drop-shadow(0 0 10px rgba(43,144,240,.4));
  animation-delay: -2s; animation-duration: 11s; }
.ha-3 { left: 3%;  top: 42%; color: var(--blue-hi); font-size: clamp(24px,2.4vw,40px);
  text-shadow: 0 0 16px rgba(84,180,255,.5); filter: drop-shadow(0 0 8px rgba(43,144,240,.35));
  animation-delay: -3s; animation-duration: 10s; opacity: .4; }
.ha-4 { right: 7%; top: 20%; color: var(--blue-hi);
  text-shadow: 0 0 18px rgba(84,180,255,.55); filter: drop-shadow(0 0 10px rgba(43,144,240,.4));
  animation-delay: -1.5s; animation-duration: 10.5s; }
.ha-5 { right: 4%; top: 60%; color: var(--gold); font-size: clamp(30px,3.4vw,52px);
  text-shadow: 0 0 18px rgba(245,181,36,.55); filter: drop-shadow(0 0 10px rgba(245,181,36,.4));
  animation-delay: -2.5s; animation-duration: 9.5s; }
.ha-6 { right: 12%; top: 40%; color: var(--gold); font-size: clamp(24px,2.4vw,40px);
  text-shadow: 0 0 16px rgba(245,181,36,.5); filter: drop-shadow(0 0 8px rgba(245,181,36,.35));
  animation-delay: -3.5s; animation-duration: 12s; opacity: .4; }
@keyframes rbFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-16px) rotate(4deg); }
}

/* ---- HERO STATUS LINE ---- */
.hero-status {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 14px/1 var(--font-body); color: var(--text-2);
}
.hero-status .middot { color: var(--text-3); }
.hero-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-3); box-shadow: 0 0 8px -1px var(--text-3);
}
.hero-status-dot.is-live {
  background: #22c55e; box-shadow: 0 0 10px -1px #22c55e;
  animation: rbPulse 1.8s var(--ease) infinite;
}
@keyframes rbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ---- WINNER TICKER (marquee of recent winners) ---- */
.rb-ticker {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(11,15,24,.9), rgba(14,18,25,.7));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  height: 46px; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rb-ticker-track {
  display: flex; align-items: center; gap: 0; white-space: nowrap;
  animation: rbMarquee 38s linear infinite; will-change: transform;
}
.rb-ticker:hover .rb-ticker-track { animation-play-state: paused; }
.rb-ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 22px;
  font: 600 13px/1 var(--font-body); color: var(--text-2);
  border-right: 1px solid var(--border);
}
.rb-ticker-item i { color: var(--gold); }
.rb-ticker-name { color: var(--text-1); }
.rb-ticker-prize { color: var(--gold); font-weight: 700; }
.rb-ticker-arrow { color: var(--text-3); }
/* JS duplicates the items so -50% loops seamlessly */
@keyframes rbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- FLOATING TWITCH WIDGET (bottom-right) ---- */
.rb-twitch {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-card);
  color: var(--text-1); text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rb-twitch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), 0 0 22px -8px #9146ff;
}
.rb-twitch .fa-twitch { color: #9146ff; font-size: 18px; }
.rb-twitch-meta { display: flex; flex-direction: column; line-height: 1.1; }
.rb-twitch-name { font: 700 13px/1 var(--font-body); color: var(--text-1); }
.rb-twitch-status {
  font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-top: 3px;
}
.rb-twitch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.rb-twitch.is-live .rb-twitch-dot {
  background: #22c55e; box-shadow: 0 0 8px -1px #22c55e;
  animation: rbPulse 1.8s var(--ease) infinite;
}
.rb-twitch.is-live .rb-twitch-status { color: #22c55e; }
@media (max-width: 640px) {
  .rb-twitch { right: 12px; bottom: 12px; padding: 8px 12px; }
}

/* ---- TOP-3 TIER ACCENT on leaderboard rows (subtle; podium removed) ---- */
.lb-row.tier-1 .rank-num { color: var(--gold); }
.lb-row.tier-2 .rank-num { color: #cfd6e0; }
.lb-row.tier-3 .rank-num { color: #e0a36b; }

.lb-row.tier-1::before,
.lb-row.tier-2::before,
.lb-row.tier-3::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
}
.lb-row.tier-1::before { background: var(--gold);   box-shadow: 0 0 10px -3px var(--gold); }
.lb-row.tier-2::before { background: #cfd6e0;        box-shadow: 0 0 10px -3px rgba(207,214,224,.7); }
.lb-row.tier-3::before { background: #e0a36b;        box-shadow: 0 0 10px -3px rgba(224,163,107,.7); }

/* RM safety: stop the marquee/float/pulse loops (global block also covers these) */
@media (prefers-reduced-motion: reduce) {
  .rb-ticker-track { animation: none; }
  .hero-art-item { animation: none; }
  .hero-status-dot.is-live,
  .rb-twitch.is-live .rb-twitch-dot { animation: none; }
}