/* wgf-leaderboards.css — the /leaderboards/ hub ("Hall of Champions").
   The hub's signature is the CHAMPION CARD: each ladder is represented by its reigning #1,
   rendered in the M31 player-card identity (class-ring portrait + class-coloured name + spec),
   with a class-colour rail so the whole board reads as a gallery of class colours. Composes the
   locked tokens (_tokens.css) + the M31 identity atoms (wgf-leaderboard.css). Per-card accent is
   passed inline as --rail (the champion's class colour); everything else stays quiet gold/neutral.
   Scoped under .wgf-lb so nothing else inherits it. */

.wgf-lb{margin:0 0 var(--space-6);}

/* ── Eyebrow: a Cinzel section label with a trailing hairline (PVP ─────) ── */
.wgf-lb-eyebrow{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-5) 0 var(--space-3);
  font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.14em;
  color:var(--wgf-gold-muted);font-weight:600;}
.wgf-lb-eyebrow::after{content:"";flex:1;height:1px;background:var(--wgf-border-neutral);}

/* ── Featured champion (the headline #1) ── */
.wgf-lb-feature{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3) var(--space-4);
  position:relative;text-decoration:none;color:var(--wgf-text);
  background:linear-gradient(100deg,color-mix(in srgb,var(--rail,var(--wgf-gold-accent)) 12%,var(--wgf-panel-2)),var(--wgf-panel-1) 62%);
  border:1px solid var(--wgf-border-neutral);border-left:4px solid var(--rail,var(--wgf-gold-accent));
  border-radius:var(--radius-card);box-shadow:var(--shadow-1);
  padding:var(--space-4) var(--space-4) var(--space-4) var(--space-4);margin:var(--space-2) 0 var(--space-4);}
.wgf-lb-feature .char-portrait{width:64px;height:64px;flex:0 0 64px;border-width:3px;}
.wgf-lb-feat-id{min-width:0;}
.wgf-lb-feat-eyebrow{display:block;font-family:var(--font-display);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--rail,var(--wgf-gold-muted));margin-bottom:var(--space-1);}
.wgf-lb-feat-name{font-family:var(--font-ui);font-weight:700;font-size:var(--text-xl);line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wgf-lb-feat-meta{display:block;color:var(--wgf-muted);font-size:var(--text-sm);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wgf-lb-feat-rt{text-align:right;white-space:nowrap;}
.wgf-lb-feat-rt b{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:2rem;line-height:1;color:var(--wgf-gold-bright);font-weight:600;}
.wgf-lb-feat-rt small{display:block;font-family:var(--font-display);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.1em;color:var(--wgf-muted);margin-top:var(--space-1);}

/* ── Champion grid (the six ladders) ── */
.wgf-lb-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr);}

/* ── Champion card ── */
.wgf-lb-card{display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-3);
  position:relative;text-decoration:none;color:var(--wgf-text);
  background:var(--wgf-panel-1);border:1px solid var(--wgf-border-neutral);
  border-left:3px solid var(--rail,var(--wgf-gold-accent));border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);min-height:150px;}
@media(prefers-reduced-motion:no-preference){
  .wgf-lb-card,.wgf-lb-feature{transition:border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);}}
.wgf-lb-card:hover,.wgf-lb-feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);
  border-color:var(--wgf-border-strong);}
.wgf-lb-card:focus-visible,.wgf-lb-feature:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* card head: bracket label (Cinzel) + ranked-count pill */
.wgf-lb-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);}
.wgf-lb-bracket{font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;
  letter-spacing:.06em;color:var(--wgf-text);font-weight:600;}
.wgf-lb-count{font-family:var(--font-display);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--wgf-muted);background:var(--wgf-panel-3);border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-pill);padding:.12rem .55rem;white-space:nowrap;flex:0 0 auto;}

/* champion identity (reuses .char-portrait / .char-name from wgf-leaderboard.css) */
.wgf-lb-champ{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
.wgf-lb-card .char-portrait{width:40px;height:40px;flex:0 0 40px;}
.wgf-lb-champ-id{min-width:0;}
.wgf-lb-champ-name{display:block;font-family:var(--font-ui);font-weight:600;font-size:var(--text-md);
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wgf-lb-champ-meta{display:block;color:var(--wgf-muted);font-size:var(--text-xs);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wgf-lb-champ--empty{color:var(--wgf-muted);font-style:italic;font-size:var(--text-sm);}

/* card foot: rating (mono) + tier word, and the View-ladder cue */
.wgf-lb-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-2);}
.wgf-lb-rt{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;}
.wgf-lb-rt b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.5rem;line-height:1;
  color:var(--wgf-gold-bright);font-weight:600;}
.wgf-lb-tier{font-family:var(--font-display);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--wgf-muted);}
.wgf-lb-go{font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);color:var(--wgf-gold-bright);
  white-space:nowrap;flex:0 0 auto;}
.wgf-lb-card:hover .wgf-lb-go,.wgf-lb-feature:hover .wgf-lb-go{color:var(--wgf-gold-primary);}

/* ── Explore: visible quick-links + a collapsed deep-prose disclosure (SEO kept in-DOM) ── */
.wgf-lb-explore{margin-top:var(--space-6);}
.wgf-lb-quicklinks{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3);}
.wgf-lb-quicklinks a{display:inline-flex;align-items:center;background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);border-radius:var(--radius-pill);padding:.35rem .85rem;
  font-size:var(--text-sm);color:var(--wgf-text);text-decoration:none;}
@media(prefers-reduced-motion:no-preference){
  .wgf-lb-quicklinks a{transition:border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);}}
.wgf-lb-quicklinks a:hover{border-color:var(--wgf-border-strong);color:var(--wgf-gold-bright);}
.wgf-lb-quicklinks a:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.wgf-lb-about{border-top:1px solid var(--wgf-border-neutral);padding-top:var(--space-3);}
.wgf-lb-about>summary{cursor:pointer;font-family:var(--font-display);font-size:var(--text-sm);
  text-transform:uppercase;letter-spacing:.06em;color:var(--wgf-gold-muted);list-style-position:inside;}
.wgf-lb-about>summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px;}
.wgf-lb-about-body{margin-top:var(--space-3);}
.wgf-lb-about-body p{color:var(--wgf-muted);font-size:var(--text-sm);line-height:1.6;
  max-width:72ch;margin:0 0 var(--space-2);}
.wgf-lb-about-body a{color:var(--wgf-gold-bright);}

/* ── Responsive ── */
@media(max-width:880px){.wgf-lb-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){
  .wgf-lb-grid{grid-template-columns:1fr;}
  .wgf-lb-feature{grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3);}
  .wgf-lb-feature .char-portrait{width:52px;height:52px;flex:0 0 52px;}
  .wgf-lb-feat-rt{grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:var(--space-2);
    border-top:1px solid var(--wgf-border-neutral);padding-top:var(--space-2);}
  .wgf-lb-feat-rt b{font-size:1.6rem;}
  .wgf-lb-feat-rt small{margin-top:0;}
}