/* Stats / Bestenlisten — baut auf design-system.css + community.css auf. */

.stats-wrap{padding:var(--s-7) 0 var(--s-10)}

/* --- Hero --- */
.stats-hero{text-align:center;margin-bottom:var(--s-8)}
.stats-hero .page-title{margin-bottom:var(--s-3)}
.stats-hero-sub{max-width:560px;margin:0 auto}
.stats-hero-game{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.stats-game-icon-lg{width:56px;height:56px;color:var(--accent,var(--gold))}
.stats-game-icon-lg svg{width:100%;height:100%}

/* --- Zurueck-Link (Detailseite) --- */
.stats-back{margin-bottom:var(--s-5)}
.stats-back a{display:inline-flex;align-items:center;gap:6px;color:var(--ivory-muted);font-size:var(--fs-small);font-weight:600;text-decoration:none;transition:color var(--dur-fast) var(--ease-out-quart)}
.stats-back a:hover{color:var(--ivory)}

/* --- Leerzustand --- */
.stats-empty{max-width:520px;margin:var(--s-9) auto;text-align:center;color:var(--ivory-muted)}
.stats-empty svg{width:56px;height:56px;color:var(--line-strong);margin-bottom:var(--s-4)}
.stats-empty p{font-size:1.05rem;line-height:1.6}

/* --- Spiel-Sektion (Uebersicht) --- */
.stats-games{display:flex;flex-direction:column;gap:var(--s-9)}
.stats-game{--accent:var(--gold)}
.stats-game-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);padding-bottom:var(--s-3);border-bottom:1px solid var(--line-soft)}
.stats-game-icon{display:inline-flex;width:34px;height:34px;color:var(--accent);flex-shrink:0}
.stats-game-icon svg{width:100%;height:100%}
.stats-game-title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.015em;color:var(--ivory);margin:0}
.stats-game-link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:var(--fs-small);font-weight:700;text-decoration:none;white-space:nowrap;transition:gap var(--dur-fast) var(--ease-out-quart),opacity var(--dur-fast)}
.stats-game-link:hover{gap:9px;opacity:0.85}

/* --- Board-Karten-Grid (Uebersicht) --- */
.stats-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s-5)}
.stats-board-card{display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-soft);text-decoration:none;color:inherit;transition:border-color var(--dur-fast) var(--ease-out-quart),transform var(--dur-fast) var(--ease-out-quart)}
.stats-board-card:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px)}
.stats-board-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ivory);margin-bottom:var(--s-4);letter-spacing:-0.01em}
.stats-board-more{margin-top:var(--s-4);font-size:var(--fs-small);font-weight:600;color:var(--accent);opacity:0.9}

/* --- Detailseite --- */
.stats-detail{display:flex;flex-direction:column;gap:var(--s-8)}
.stats-board-block{scroll-margin-top:90px}
.stats-board-heading{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;color:var(--ivory);margin:0 0 var(--s-4);padding-left:var(--s-3);border-left:3px solid var(--accent,var(--gold))}
.stats-list-card{background:var(--bg-panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);box-shadow:var(--shadow-soft)}
.stats-list-card + .stats-list-card{margin-top:var(--s-4)}
.stats-list-scope{font-size:var(--fs-small);font-weight:700;letter-spacing:0.02em;color:var(--ivory-muted);text-transform:uppercase;margin-bottom:var(--s-3);padding-bottom:var(--s-2);border-bottom:1px solid var(--line-soft)}

/* --- Bestenliste --- */
.lb{list-style:none;margin:0;padding:0;--lb-accent:var(--gold)}
.lb-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-2);border-radius:var(--r-sm);transition:background var(--dur-fast) var(--ease-out-quart)}
.lb-row + .lb-row{margin-top:2px}
.lb-row:hover{background:var(--bg-panel-soft)}
.lb-rank{flex-shrink:0;width:30px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ivory-faint);font-weight:600}
.lb-head{flex-shrink:0;border-radius:6px;image-rendering:pixelated;border:1px solid var(--line-soft);background:var(--bg-raised)}
.lb-name{flex:1;min-width:0;font-weight:600;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-value{flex-shrink:0;font-family:var(--font-mono);font-weight:700;color:var(--lb-accent);font-size:0.95rem;font-variant-numeric:tabular-nums}

/* Podium: Medaille als runder Rang-Chip */
.lb-medal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-family:var(--font-display);font-size:0.78rem;font-weight:700;color:#1a1205;border:1px solid rgba(0,0,0,0.25)}
.lb-medal-gold{background:linear-gradient(140deg,#ffe9a8,#f7d56b 55%,#c9a64a);box-shadow:0 0 14px var(--gold-glow)}
.lb-medal-silver{background:linear-gradient(140deg,#f4f7fb,#c8cfda 55%,#9aa3b4);color:#1b2130}
.lb-medal-bronze{background:linear-gradient(140deg,#f0c090,#d38a4e 55%,#a5622f);color:#2a1608}
.lb-row-gold{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.lb-row-gold:hover{background:color-mix(in srgb,var(--gold) 11%,transparent)}
.lb-empty{color:var(--ivory-faint);font-size:var(--fs-small);padding:var(--s-3) var(--s-2);margin:0}

@media (max-width:560px){
  .stats-board-grid{grid-template-columns:1fr}
  .stats-game-link{margin-left:0}
  .stats-game-head{flex-wrap:wrap}
}