/* ════════════════════════════════════════════════════════════════════
   ISKONEW — "Arena Ledger" Frontpage (Nachbau der iskobonus.com-Frontpage)
   Läuft im eigenen System: lädt NACH shell.css/tailwind.css/theme.css.
   Alle Seiten-Tokens sind mit --ar- geprefixt, damit nichts mit den
   tweakcn-Theme-Variablen (theme.css) kollidiert.
   Sections: A Tokens · B Buttons · C Hero · D Ticker · E Command-Bar
             F Liste + Rows · G Drawer · H Empty/Skeleton · I Responsive
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ar-bg:        #101114;
  --ar-raise:     #16171d;
  --ar-surface:   #1a1b22;
  --ar-surface-2: #23242f;

  --ar-gold:    #f5b524;
  --ar-gold-hi: #ffc83d;
  --ar-blue:    #2b90f0;
  --ar-blue-hi: #54b4ff;

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

  --ar-border:      rgba(255,255,255,.10);
  --ar-border-blue: rgba(84,180,255,.22);
  --ar-border-gold: rgba(245,181,36,.45);

  --ar-amber: #fbbf24;
  --ar-green: #22c55e;

  --ar-font-display: 'Sora', 'Open Sans', system-ui, sans-serif;
  --ar-font-body:    'Open Sans', 'Sora', system-ui, sans-serif;

  --ar-r-card: 16px; --ar-r-tile: 12px; --ar-r-chip: 999px;
  --ar-r-btn: 12px; --ar-r-code: 8px; --ar-r-popover: 14px;

  --ar-shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px -12px rgba(0,0,0,.6);
  --ar-ring-blue:   0 0 0 1px var(--ar-border-blue), 0 0 10px -8px rgba(43,144,240,.25);
  --ar-ring-gold:   0 0 0 1px var(--ar-border-gold), 0 0 10px -8px rgba(245,181,36,.20);

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

  --ar-clip-cta: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);

  --ar-w-page: 1320px;
  --ar-w-list: 1180px;
}

/* page scope: KEIN eigener Hintergrund — Seite liegt direkt auf dem Theme-BG
   (Wunsch: Kasten-Look entfernt, Inhalt bündig mit Casino-Card-Breite) */
.iskotrack { background: transparent; color: var(--ar-text-2); }

.tabular-nums, .lb-row, .cmd-bar { font-variant-numeric: tabular-nums; }

.t-label {
  font: 700 11px/1 var(--ar-font-body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ar-text-3);
}
.gold-focal {
  background: linear-gradient(135deg, var(--ar-gold-hi), var(--ar-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ════════════ B) Buttons (eigene Klassen — theme.css .btn-primary bleibt unberührt) ════════════ */
.btn-arena {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--ar-font-display);
  color: var(--ar-ink);
  background: linear-gradient(135deg, var(--ar-gold-hi), var(--ar-gold));
  border: none; border-radius: var(--ar-r-btn);
  padding: 12px 20px; cursor: pointer; position: relative; overflow: hidden;
  text-decoration: none;
  transition: transform var(--ar-dur) var(--ar-ease), box-shadow var(--ar-dur) var(--ar-ease), filter var(--ar-dur) var(--ar-ease);
}
.btn-arena:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: var(--ar-ring-gold); }
.btn-arena:active { transform: translateY(0); }
.btn-arena::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(--ar-dur-slow) var(--ar-ease);
}
.btn-arena:hover::after { transform: translateX(120%); }

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

.cut-corner { clip-path: var(--ar-clip-cta); }

/* ════════════ C) Hero — "the stadium" ════════════ */
.hero-stadium {
  position: relative; overflow: hidden;
  min-height: 420px; display: flex; align-items: center;
  text-align: left;
}
/* Hero-BG komplett gelöscht (Wunsch): kein Tint, kein Kasten — der Hero liegt
   direkt auf dem Seitenhintergrund. Das Element wurde auch aus dem Markup entfernt. */
.hero-grid {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--ar-w-list); 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; }

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

.hero-h1 {
  font: 800 clamp(40px, 7vw, 68px)/1.02 var(--ar-font-display);
  color: var(--ar-text-1); letter-spacing: -.01em; margin: 0;
}
/* Kein Gelb-Blau-Verlauf mehr (Wunsch): Standard-Theme-Blau wie z.B. im Shop */
.text-shimmer { color: var(--blu, #2b90f0); }

.hero-lead {
  max-width: 540px;
  font: 400 17px/1.5 var(--ar-font-body); color: var(--ar-text-2); margin: 0;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }

.hero-side {
  display: flex; flex-direction: column; gap: 0;
  /* gleiches Card-Rezept wie die Casino-Rows — kein blaustichiger Verlauf */
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 55%), var(--ar-surface);
  border: 1px solid var(--ar-border); border-radius: var(--ar-r-card);
  box-shadow: var(--ar-shadow-card); padding: 18px 22px;
}
.hs-eyebrow { font: 700 11px/1 var(--ar-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ar-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(--ar-border); }
.hs-stat:first-of-type { border-top: 0; }
.hs-l { font: 500 13px/1.3 var(--ar-font-body); color: var(--ar-text-3); }
.hs-v { font: 700 15px/1.2 var(--ar-font-display); color: var(--ar-text-1); text-align: right; }
.hs-v.hs-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.hero-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ar-text-3);
}
.hero-status-dot.is-live {
  background: var(--ar-green); box-shadow: 0 0 8px -1px var(--ar-green);
  animation: ar-dotPulse 1.8s var(--ar-ease) infinite;
}
/* Live-Zeile in der Überblick-Box: Name + Viewer-Pill + Twitch-Button */
.hs-live-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hs-live-name { color: var(--ar-text-1); font: 700 13px/1 var(--ar-font-display); }
.hs-viewers {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 11px/1 var(--ar-font-body); color: var(--ar-text-2); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.05); border: 1px solid var(--ar-border);
  border-radius: 999px; padding: 4px 9px;
}
.hs-viewers i { font-size: 10px; color: var(--ar-text-3); }
.hs-watch {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--ar-font-body); color: #fff; text-decoration: none;
  background: #9146ff; border-radius: 999px; padding: 5px 12px;
  transition: filter var(--ar-dur-fast) var(--ar-ease), transform var(--ar-dur-fast) var(--ar-ease);
}
.hs-watch:hover { filter: brightness(1.12); transform: translateY(-1px); }
.hs-watch i { font-size: 11px; }

/* ════════════ D) Winner-Ticker ════════════ */
.rb-ticker {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--ar-border); border-bottom: 1px solid var(--ar-border);
  background: var(--ar-raise); padding: 10px 0;
}
.rb-ticker-track { display: inline-flex; gap: 40px; animation: ar-ticker 40s linear infinite; will-change: transform; }
@keyframes ar-ticker { to { transform: translateX(-50%); } }
.rb-ticker-item { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--ar-font-body); color: var(--ar-text-2); }
.rb-ticker-item i { color: var(--ar-gold); font-size: 12px; }
.rb-ticker-name { color: var(--ar-text-1); font-weight: 700; }
.rb-ticker-arrow { color: var(--ar-text-3); }
.rb-ticker-prize { color: var(--ar-gold); font-weight: 700; }

/* ════════════ E) Command-Bar (Filter) ════════════ */
.cmd-bar-wrap {
  position: sticky; top: 60px; z-index: 40;
  /* kein Kasten-BG mehr — nur Blur + Theme-Tint für Lesbarkeit beim Scrollen */
  background: color-mix(in srgb, var(--background, #17181c) 88%, transparent);
  backdrop-filter: blur(24px);
}
.cmd-bar { max-width: var(--ar-w-list); margin: 0 auto; }
.cmd-scroll {
  min-height: 60px; padding: 10px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
}
.cmd-count { flex: 0 0 auto; font: 700 14px/1 var(--ar-font-display); color: var(--ar-text-1); white-space: nowrap; }
#result-count { color: var(--ar-gold); }

.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(--ar-font-body); color: var(--ar-text-2);
  background: rgba(255,255,255,.03); border: 1px solid var(--ar-border);
  border-radius: 12px; padding: 9px 13px; cursor: pointer; white-space: nowrap;
  transition: background var(--ar-dur-fast) var(--ar-ease), border-color var(--ar-dur-fast) var(--ar-ease), color var(--ar-dur-fast) var(--ar-ease);
}
.qf-pill i { font-size: 13px; color: var(--ar-text-3); transition: color var(--ar-dur-fast) var(--ar-ease); }
.qf-pill:hover { border-color: var(--ar-border-blue); color: var(--ar-text-1); }
.qf-pill:hover i { color: var(--ar-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(--ar-text-2);
  font: 700 11px/1 var(--ar-font-body); margin-left: 1px;
}
.qf-pill.is-active {
  background: var(--ar-gold);
  color: var(--ar-ink); border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 12px -6px rgba(245,181,36,.35);
}
.qf-pill.is-active i { color: var(--ar-ink); }
.qf-pill.is-active .qf-count { background: rgba(42,29,0,.22); color: var(--ar-ink); }

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

.popover {
  position: fixed; z-index: 80;
  min-width: 220px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--ar-surface-2) !important;
  border: 1px solid var(--ar-border) !important;
  border-radius: var(--ar-r-popover) !important;
  box-shadow: var(--ar-shadow-card), var(--ar-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; }
.popover .pay-grid { display: flex; flex-wrap: wrap; gap: 8px; }

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

.token-strip {
  max-width: var(--ar-w-list); 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(--ar-font-body); color: var(--ar-ink);
  background: linear-gradient(135deg, var(--ar-gold-hi), var(--ar-gold));
  border: none; border-radius: var(--ar-r-chip); padding: 6px 10px; cursor: pointer;
}
.token-reset {
  font: 600 12px/1 var(--ar-font-body); color: var(--ar-text-3);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
.token-reset:hover { color: var(--ar-text-1); }

/* ════════════ F) Liste + Leaderboard-Rows ════════════ */
.arena-list {
  max-width: var(--ar-w-list); margin: 0 auto; padding: 0 24px 64px;
}
.section-h2 { font: 700 30px/1.1 var(--ar-font-display); color: var(--ar-text-1); margin: 0; }

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

.lb-stack { display: flex; flex-direction: column; gap: 12px; }

.lb-row {
  position: relative;
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: 112px minmax(120px, 1fr) minmax(150px, 1.3fr) 92px 104px 170px;
  min-height: 124px; padding: 16px 22px 16px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 55%),
    var(--ar-surface);
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-r-card);
  box-shadow: var(--ar-shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform var(--ar-dur) var(--ar-ease), box-shadow var(--ar-dur) var(--ar-ease), border-color var(--ar-dur) var(--ar-ease);
}
.lb-row:hover { transform: translateY(-3px); border-color: var(--ar-border-blue); box-shadow: var(--ar-shadow-card), 0 20px 44px -22px rgba(0,0,0,.75), var(--ar-ring-blue); }

.lb-rank { position: absolute; top: 8px; left: 10px; z-index: 4; }
.rank-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 34px; height: 27px; padding: 0 10px;
  border-radius: 8px; border: none;
  background: linear-gradient(135deg, var(--ar-gold-hi), var(--ar-gold));
  font: 800 15px/1 var(--ar-font-display); color: var(--ar-ink); white-space: nowrap;
  box-shadow: 0 4px 12px -6px rgba(245,181,36,.5);
}
.rank-num::before { content: "#"; opacity: .65; font-weight: 700; }

.lb-logo {
  width: 112px; height: 112px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
}
.lb-logo .logo-block { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; }
.lb-logo i { font-size: 24px; color: var(--ar-text-3); }

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

.type-tag { font: 700 11px/1 var(--ar-font-body); letter-spacing: .12em; text-transform: uppercase; }
.type-tag.is-sticky { color: var(--ar-blue-hi); }
.type-tag.is-nonsticky {
  color: var(--ar-gold); border: 1px solid var(--ar-border-gold);
  border-radius: var(--ar-r-chip); padding: 4px 8px;
}

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

.lb-stat-col { display: flex; flex-direction: column; gap: 8px; }
.lb-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 7px 11px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid var(--ar-border);
  transition: border-color var(--ar-dur) var(--ar-ease), background var(--ar-dur) var(--ar-ease);
}
.lb-row:hover .lb-stat { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.ls-l { font: 700 9px/1 var(--ar-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ar-text-3); white-space: nowrap; }
.ls-v { font: 800 15px/1 var(--ar-font-display); color: var(--ar-text-1); white-space: nowrap; }

.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: 12px 14px; font-size: 14px;
  box-shadow: 0 6px 18px -7px rgba(245,181,36,.6);
}
.lb-play:hover { box-shadow: 0 11px 26px -8px rgba(245,181,36,.8); filter: brightness(1.05); }
.lb-info {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--ar-r-btn);
  background: rgba(255,255,255,.04); border: 1px solid var(--ar-border); color: var(--ar-text-2);
  font: 600 12px/1 var(--ar-font-body); cursor: pointer;
  transition: border-color var(--ar-dur-fast) var(--ar-ease), color var(--ar-dur-fast) var(--ar-ease), background var(--ar-dur-fast) var(--ar-ease);
}
.lb-info:hover { border-color: var(--ar-border-blue); color: var(--ar-text-1); background: rgba(43,144,240,.07); }
.lb-info .fa-circle-info { color: var(--ar-blue-hi); }

.feat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px/1 var(--ar-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(--ar-gold);  background: rgba(245,181,36,.10); border-color: rgba(245,181,36,.30); }
.fb-crypto  { color: var(--ar-blue-hi); background: rgba(84,180,255,.10); border-color: rgba(84,180,255,.30); }
.fb-excl    { color: var(--ar-amber); background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.30); }

.code-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/1 var(--ar-font-body); color: var(--ar-text-1);
  background: transparent; border: 1px dashed var(--ar-border-blue);
  border-radius: var(--ar-r-code); padding: 8px 12px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--ar-dur-fast) var(--ar-ease), color var(--ar-dur-fast) var(--ar-ease), background var(--ar-dur-fast) var(--ar-ease);
}
.code-pill:hover { border-color: var(--ar-blue-hi); }
.code-val { letter-spacing: .06em; font-weight: 800; color: var(--ar-blue-hi); }
.code-ico { color: var(--ar-text-3); }
.code-pill.is-copied {
  color: var(--ar-green); border-color: var(--ar-green); border-style: solid;
  background: rgba(34,197,94,.08);
}
.code-pill.is-copied .code-ico { color: var(--ar-green); }

.pay-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-strip .pay-icon {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; font: 700 11px/1 var(--ar-font-body); color: var(--ar-text-2);
  filter: grayscale(1); opacity: .5;
  transition: filter var(--ar-dur) var(--ar-ease), opacity var(--ar-dur) var(--ar-ease);
}
.pay-strip .pay-icon i { font-size: 18px; }
.lb-row:hover .pay-strip .pay-icon { filter: grayscale(0); opacity: 1; }
.pay-strip.pay-full .pay-icon { height: 22px; filter: none; opacity: 1; }

.row-expand {
  position: absolute; inset: 0; width: 80%;
  background: none; border: none; cursor: pointer; padding: 0; margin: 0;
  z-index: 1;
}
.lb-row .lb-actions, .lb-row .code-pill { position: relative; z-index: 2; }

/* ════════════ G) Details-Drawer ════════════ */
.row-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ar-ease); }
.row-drawer.is-open { grid-template-rows: 1fr; }
.row-drawer[hidden] { display: none; }
.drawer-inner {
  overflow: hidden; min-height: 0;
  background: var(--ar-surface-2);
  border-top: 1px solid var(--ar-border);
  padding: 24px 20px;
}
.drawer-inner > * { margin: 0; }
.drawer-inner > * + * { margin-top: 14px; }
.lb-row .row-drawer { grid-column: 1 / -1; margin: 0 -20px; }
.lb-row .drawer-inner { border-radius: 0 0 var(--ar-r-card) var(--ar-r-card); }

.stat-grid-4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-cell {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--ar-border); border-radius: 12px; padding: 11px 13px;
}
.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(--ar-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 15px/1.15 var(--ar-font-display); color: var(--ar-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.drawer-block {
  background: rgba(255,255,255,.022);
  border: 1px solid var(--ar-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(--ar-gold); font-size: 12px; }

.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 15px/1.4 var(--ar-font-body); color: var(--ar-text-2);
}
.pro-tick { color: var(--ar-blue-hi); margin-top: 2px; }

/* ════════════ H) Promo · Empty · Skeleton ════════════ */
.promo-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 32px; border-radius: var(--ar-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(--ar-surface);
  border: 1px solid var(--ar-border-blue);
  margin: 4px 0;
}
.promo-copy .t-label { margin: 0 0 6px; }
.promo-title { font: 800 22px/1.1 var(--ar-font-display); color: var(--ar-text-1); margin: 0; }

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

.skel {
  background: linear-gradient(100deg, var(--ar-surface) 30%, rgba(255,255,255,.05) 50%, var(--ar-surface) 70%);
  background-size: 200% 100%; animation: ar-skel 1.4s linear infinite;
}
.lb-row.skel { min-height: 88px; height: 88px; border-radius: var(--ar-r-card); display: block; padding: 0; }
@keyframes ar-skel { to { background-position: -200% 0; } }

/* ════════════ I) Responsive ════════════ */
@media (max-width: 1280px) {
  .lb-row { grid-template-columns: 56px minmax(120px, 1fr) minmax(150px, 1.2fr) 168px; }
  .lb-logo { width: 56px; height: 56px; }
  .lb-stat-col { display: none; }
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
  .hero-side { order: 2; }
}
@media (max-width: 640px) {
  .hero-stadium { min-height: 400px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn-arena, .hero-cta .btn-arena-ghost { width: 100%; }
  .cmd-bar-wrap { top: 56px; }
  .popover {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto !important;
    min-width: 0; width: 100%;
    border-radius: var(--ar-r-popover) var(--ar-r-popover) 0 0 !important;
  }
  .pay-popover { min-width: 0; }
  .lb-row { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 0; align-items: stretch; }
  .lb-rank { position: absolute; top: 14px; right: 16px; left: auto; }
  .lb-logo { width: 88px; height: 88px; margin: 0 auto; }
  .lb-name, .lb-welcome { text-align: center; align-items: center; }
  .row-expand { display: none; }
  .stat-grid-4 { grid-template-columns: 1fr; }
  .pros-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot, .hero-status-dot.is-live, .text-shimmer, .rb-ticker-track, .skel { animation: none !important; }
  .lb-row, .btn-arena, .btn-arena-ghost { transition: none !important; }
}