/* ════════════════════════════════════════════════════════════════════════
   LEADERS — the Claude Design "Leaders" file (19.10.2026), inside the standings
   screen's second tab. A category's leader on a card in his club's colours, the
   next four beside it with a bar, and the other categories below as small cards.
   Under the games minimum the card is neutral and has no bars or "king" titles.
   Everything follows the width of the tab's own box. Scoped to #st-leaders.
   ════════════════════════════════════════════════════════════════════════ */

#screen-standings .st-leaders {
  container-type: inline-size;
  padding: 0; font-family: var(--ds-font); color: var(--ds-ink);
}

/* ── Controls: players / teams, then the categories ── */
.lg-ctl { display: flex; margin-bottom: 14px; }
.lg-ctl:empty { display: none; }
.lg-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--ds-card); border: 1.5px solid var(--ds-line); align-self: flex-start; }
.lg-seg button {
  min-height: var(--ds-h-btn); padding: 0 22px; border: 0; border-radius: 0; background: transparent; color: var(--ds-ink);
  font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.lg-seg button:hover { background: var(--ds-soft); }
.lg-seg button[aria-selected="true"] { background: var(--ds-lg, var(--ds-ink)); color: #fff; }
html[data-theme="dark"] .lg-seg button[aria-selected="true"] { color: #0C111C; }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.lg-tab {
  flex: none; min-height: var(--ds-h-btn); padding: 0 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: transparent; color: var(--ds-ink2); font: 700 var(--ds-fs-15) var(--ds-font); white-space: nowrap; cursor: pointer;
}
.lg-tab:hover { color: var(--ds-ink); }
.lg-tab[aria-selected="true"] { background: var(--ds-card); color: var(--ds-ink); font-weight: 800; border-bottom-color: var(--ds-lg, var(--ds-ink)); }
.lg-seg button:focus-visible, .lg-tab:focus-visible, .lg-btn:focus-visible, .lg-hero:focus-visible, .lg-li:focus-visible,
.lg-w-head:focus-visible, .lg-w-lead:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ds-h-btn); padding: 0 18px;
  border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink);
  font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.lg-btn:hover { background: var(--ds-soft); }
.lg-btn--solid { background: var(--ds-ink); color: var(--ds-card); }
.lg-btn--solid:hover { background: var(--ds-ink); opacity: .9; }

/* ── Small sample, said in words ── */
.lg-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; padding: 16px 20px;
  background: var(--ds-card); border: 1.5px solid var(--ds-warn);
}
.lg-banner-n { flex: none; font: 800 56px/.9 var(--ds-font-num); color: var(--ds-warn); }
.lg-banner > div { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-banner > div b { font: 800 var(--ds-fs-17)/1.45 var(--ds-font); text-wrap: balance; }
.lg-banner > div span { font: 700 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }

/* ── The leader and the next four ── */
.lg-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@container (min-width: 860px) { .lg-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; } }
.lg-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: 340px; box-sizing: border-box; padding: 28px 24px; border: 0; border-radius: 0;
  background: var(--lg-bg, var(--ds-card)); color: var(--lg-ink, var(--ds-ink)); text-align: start; cursor: pointer; font: inherit;
}
@container (min-width: 860px) { .lg-hero { min-height: 440px; padding: 34px 36px; } }
.lg-hero[disabled] { cursor: default; }
.lg-hero.is-early { border: 1.5px dashed var(--ds-ink2); }
.lg-glow, .lg-ring, .lg-dots { position: absolute; z-index: 0; pointer-events: none; }
.lg-glow { inset: 0; background: radial-gradient(circle at 88% 120%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 58%); }
.lg-ring { width: 560px; height: 560px; border-radius: 50%; top: -230px; left: -190px; box-sizing: border-box; border: 64px solid var(--lg-ring, #fff); opacity: .5; }
.lg-dots {
  inset: 0; z-index: 1; background-image: radial-gradient(rgba(255, 255, 255, .18) 1.3px, transparent 1.8px); background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(to left, transparent 20%, #000 90%); mask-image: linear-gradient(to left, transparent 20%, #000 90%);
}
.lg-hero.is-early .lg-dots { background-image: radial-gradient(rgba(127, 127, 127, .14) 1.3px, transparent 1.8px); }
.lg-no {
  position: absolute; z-index: 1; bottom: -.16em; left: .02em; font: 800 440px/1 var(--ds-font-num); color: transparent;
  -webkit-text-stroke: 2px var(--lg-ink, var(--ds-ink)); opacity: .22; pointer-events: none;
}
.lg-hero-top, .lg-hero-name, .lg-hero-sub, .lg-hero-gp, .lg-tie { position: relative; z-index: 2; }
.lg-hero-top { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-hero-title { font: 800 var(--ds-fs-15)/1.25 var(--ds-font); letter-spacing: .05em; opacity: .95; }
.lg-hero-stat { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lg-hero-val { font: 800 120px/.8 var(--ds-font-num); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: -.01em; direction: ltr; }
@container (min-width: 860px) { .lg-hero-val { font-size: 176px; } }
.lg-hero.is-early .lg-hero-val { font-size: 96px; }
@container (min-width: 860px) { .lg-hero.is-early .lg-hero-val { font-size: 108px; } }
.lg-hero-unit { padding-bottom: 8px; max-width: 18ch; font: 700 var(--ds-fs-15)/1.35 var(--ds-font); opacity: .92; }
.lg-hero-name { margin-top: 4px; font: 900 32px/1.05 var(--ds-font); letter-spacing: -.02em; overflow-wrap: anywhere; }
@container (min-width: 860px) { .lg-hero-name { font-size: 44px; } }
.lg-hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 700 var(--ds-fs-14)/1.3 var(--ds-font); }
.lg-crest .team-crest { --crest-ring: rgba(255, 255, 255, .7); box-shadow: 0 0 0 2px var(--crest-ring); }
.lg-hero.is-early .lg-crest .team-crest { box-shadow: inset 0 0 0 1px var(--ds-ink2); }
.lg-pos { opacity: .85; }
.lg-tie { font: 700 var(--ds-fs-15)/1.3 var(--ds-font); }
.lg-hero-gp { display: flex; align-items: baseline; gap: 4px; font: 600 var(--ds-fs-14) var(--ds-font); }
.lg-hero-gp b { font: 800 20px/1 var(--ds-font-num); }

.lg-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-list { list-style: none; margin: 0; padding: 0; }
.lg-li {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 8px 10px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink); font: inherit; cursor: pointer;
  text-align: start; transition: background var(--ds-t-ctrl) ease;
}
.lg-li:hover:not([disabled]) { background: color-mix(in srgb, var(--ds-ink) 4%, transparent); }
.lg-li[disabled] { cursor: default; }
.lg-li-rank { flex: none; min-width: 28px; font: 800 24px/1 var(--ds-font-num); color: var(--ds-ink2); text-align: center; }
.lg-li .team-crest { flex: none; }
.lg-li-who { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.lg-li-name { flex: 1 1 100%; font: 800 var(--ds-fs-15)/1.3 var(--ds-font); overflow-wrap: anywhere; }
.lg-li-team, .lg-li-pos { font: 600 var(--ds-fs-13)/1.35 var(--ds-font); color: var(--ds-ink2); }
.lg-bar { flex: 1 1 100%; display: block; height: 4px; margin-top: 4px; background: var(--ds-line); }
.lg-bar i { display: block; height: 100%; }
.lg-li-val { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 56px; }
.lg-li-val > b { direction: ltr; font: 800 32px/1 var(--ds-font-num); font-variant-numeric: tabular-nums; }
.lg-li-gp { display: flex; align-items: baseline; gap: 3px; font: 700 12px var(--ds-font); color: var(--ds-ink2); }
.lg-li-gp b { font: 800 15px var(--ds-font-num); color: var(--ds-ink); }

/* ── The other categories ── */
.lg-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; }
.lg-wall-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; padding: 16px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.lg-w-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--ds-h-btn); padding: 0;
  border: 0; background: none; color: var(--ds-ink); font: inherit; text-align: start; cursor: pointer;
}
.lg-w-head b { font: 900 var(--ds-fs-20)/1.2 var(--ds-font); }
.lg-w-head span { font: 600 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); }
.lg-w-lead {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 84px; padding: 12px 14px; box-sizing: border-box;
  border: 0; border-radius: 0; background: var(--lg-bg, var(--ds-card)); color: var(--lg-ink, var(--ds-ink)); font: inherit; cursor: pointer; text-align: start;
}
.lg-w-lead.is-early { border: 1.5px dashed var(--ds-ink2); }
.lg-w-lead .lg-dots { background-size: 9px 9px; background-image: radial-gradient(rgba(255, 255, 255, .18) 1.2px, transparent 1.6px); mask-image: linear-gradient(to left, transparent 30%, #000); -webkit-mask-image: linear-gradient(to left, transparent 30%, #000); }
.lg-w-lead.is-early .lg-dots { background-image: radial-gradient(rgba(127, 127, 127, .14) 1.2px, transparent 1.6px); }
.lg-w-crest, .lg-w-whos, .lg-w-lval { position: relative; z-index: 2; }
.lg-w-crest { flex: none; }
.lg-w-crest .team-crest { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.lg-w-lead.is-early .lg-w-crest .team-crest { box-shadow: inset 0 0 0 1px var(--ds-ink2); }
.lg-w-whos { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-w-who { display: flex; flex-direction: column; min-width: 0; }
.lg-w-name { font: 800 var(--ds-fs-15)/1.3 var(--ds-font); overflow-wrap: anywhere; }
.lg-w-team { font: 600 var(--ds-fs-13) var(--ds-font); opacity: .88; }
.lg-w-lval { flex: none; direction: ltr; font: 800 48px/.9 var(--ds-font-num); }
.lg-w-row { display: flex; align-items: center; gap: 10px; min-height: var(--ds-h-btn); border-top: 1px solid var(--ds-line); }
.lg-w-rank { flex: none; min-width: 20px; font: 800 17px/1 var(--ds-font-num); color: var(--ds-ink2); text-align: center; }
.lg-w-row .team-crest { flex: none; }
.lg-w-rname { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--ds-fs-14)/1.3 var(--ds-font); }
.lg-w-val { flex: none; direction: ltr; font: 800 20px/1 var(--ds-font-num); }

/* ── Empty, error ── */
.lg-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; padding: 28px 24px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.lg-state p { margin: 0; font: 600 var(--ds-fs-15)/1.5 var(--ds-font); color: var(--ds-ink2); text-wrap: pretty; }
.lg-foot { margin: 22px 0 0; font: 600 var(--ds-fs-12)/1.4 var(--ds-font); color: var(--ds-ink2); }
@media (prefers-reduced-motion: reduce) { .lg-hero, .lg-w-lead, .lg-li, .lg-btn, .lg-seg button { transition: none; } }