:root {
  color-scheme: dark;
  --bg: #081210;
  --panel: rgba(12, 27, 24, .76);
  --panel-strong: #0d1d1a;
  --ink: #ecebf2;
  --muted: rgba(236, 235, 242, .54);
  --line: rgba(236, 235, 242, .12);
  --green: #93fc7b;
  --green-dark: #0b1a13;
  --metal: #d8b76a;
  --danger: #ff8a8a;
  --page-x: clamp(1.1rem, 5vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(90% 62% at 50% -8%, rgba(48, 111, 91, .28), transparent 65%),
    radial-gradient(55% 40% at 88% 13%, rgba(147, 252, 123, .07), transparent 70%),
    linear-gradient(180deg, #0b1715, var(--bg) 42%, #06100e);
  font-family: "SF Mono", ui-monospace, Menlo, "Cascadia Mono", monospace;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-header {
  padding: clamp(2rem, 5vw, 4.2rem) var(--page-x) 0;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand img { display: block; width: auto; height: clamp(2.4rem, 6vw, 3.6rem); }
.section-nav {
  display: inline-flex;
  padding: .28rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 16, 14, .48);
}
.section-nav a {
  padding: .66rem 1rem;
  color: var(--muted);
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .64rem;
  font-weight: 800;
}
.section-nav a:hover { color: var(--ink); }
.section-nav a.active { color: var(--green-dark); background: var(--green); }
.site-description {
  max-width: none;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.7;
}

main { padding: clamp(2rem, 5vw, 4rem) var(--page-x) 4rem; }
.museum-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(16, 35, 31, .9), rgba(7, 18, 16, .72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 26px 70px rgba(0,0,0,.16);
}
.eyebrow {
  display: block;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .63rem;
  font-weight: 800;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(12rem, .65fr);
  gap: 2rem;
  min-height: 29rem;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(147,252,123,.035) 58% 59%, transparent 59%),
    repeating-linear-gradient(90deg, transparent 0 7.9%, rgba(255,255,255,.018) 8%);
}
.hero-copy { position: relative; z-index: 2; align-self: center; max-width: 47rem; }
.hero h1 {
  margin: .7rem 0 1rem;
  font: 850 clamp(2.8rem, 7vw, 6.5rem)/.9 system-ui, sans-serif;
  letter-spacing: -.06em;
}
.hero-copy > p {
  max-width: 41rem;
  margin: 0;
  color: rgba(236,235,242,.66);
  font: 500 clamp(.9rem, 1.5vw, 1.08rem)/1.75 system-ui, sans-serif;
}
.hero-copy .hero-line {
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 750;
}
.hero-total {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: end;
  text-align: right;
}
.hero-total strong {
  color: var(--green);
  font: 900 clamp(5rem, 14vw, 10rem)/.75 system-ui, sans-serif;
  letter-spacing: -.08em;
}
.hero-total span {
  max-width: 12rem;
  margin-top: 1.1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .15em;
  line-height: 1.6;
  font-size: .66rem;
}
.hero-stats {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  align-self: end;
}
.hero-stat {
  padding: .95rem 1rem;
  border-top: 1px solid var(--line);
}
.hero-stat strong { display: block; font: 800 1.3rem/1 system-ui, sans-serif; }
.hero-stat span { display: block; margin-top: .45rem; color: var(--muted); font-size: .58rem; line-height: 1.5; }
.hero-emblem {
  position: absolute;
  right: -6rem;
  top: -8rem;
  width: 25rem;
  height: 25rem;
  opacity: .12;
  transform: rotate(12deg);
}
.emblem-ring { position: absolute; inset: 0; border: 1px solid var(--green); border-radius: 50%; }
.emblem-ring::before, .emblem-ring::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid var(--green);
  border-radius: 50%;
}
.emblem-ring::after { inset: 32%; }
.emblem-cup {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--green);
  font: 900 8rem/1 system-ui, sans-serif;
}

.section { padding-top: clamp(3.2rem, 8vw, 6.5rem); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.section-head > div:first-child { min-width: 0; width: 100%; }
.section-number {
  float: left;
  margin-right: .9rem;
  color: var(--green);
  font: 900 2rem/.8 system-ui, sans-serif;
}
.section-head h2 {
  margin: .42rem 0 0;
  font: 800 clamp(1.65rem, 3.2vw, 2.6rem)/1 system-ui, sans-serif;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.section-head > p {
  max-width: none;
  margin: 0;
  padding-left: 3.25rem;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.65;
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 1rem;
  padding-top: 2.2rem;
}
.podium-card {
  position: relative;
  min-height: 20rem;
  padding: 1.3rem;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(21,40,35,.88), rgba(8,20,17,.76));
  text-align: left;
}
.podium-card.rank-1 { min-height: 24rem; border-color: rgba(147,252,123,.34); }
.podium-card::after {
  content: attr(data-rank);
  position: absolute;
  right: -.35rem;
  bottom: -1.8rem;
  color: rgba(147,252,123,.055);
  font: 950 10rem/1 system-ui, sans-serif;
}
.podium-rank { display: flex; align-items: center; justify-content: space-between; color: var(--green); }
.podium-rank strong { font: 900 1.8rem/1 system-ui,sans-serif; }
.podium-rank span { color: var(--muted); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.podium-logo { width: 5.2rem; height: 5.2rem; margin: 2rem 0 1rem; border-radius: 50%; object-fit: cover; background: #142723; }
.podium-card h3 { margin: 0; font: 800 1.45rem/1.1 system-ui,sans-serif; }
.podium-total { margin-top: .55rem; color: var(--green); font: 850 2.2rem/1 system-ui,sans-serif; }
.podium-total span { color: var(--muted); font: 650 .6rem/1.5 inherit; text-transform: uppercase; letter-spacing: .12em; }
.podium-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.2rem; }
.podium-meta span { padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .57rem; line-height: 1.5; }
.podium-meta b { display: block; color: var(--ink); font-size: .8rem; }

.filter-shell {
  position: sticky;
  z-index: 20;
  top: .75rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: 1rem;
  border: 1px solid rgba(147,252,123,.18);
  border-radius: 17px;
  background: rgba(7, 18, 16, .91);
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
}
.filter-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
#resultStatus { color: var(--muted); font-size: .62rem; }
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.25fr auto auto;
  align-items: end;
  gap: .7rem;
}
.filters label, .view-control, .comparison-controls label { display: grid; gap: .38rem; }
.filters label > span, .view-control > span, .comparison-controls label > span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .54rem;
}
.filters select, .filters input, .comparison-controls select {
  min-width: 0;
  width: 100%;
  height: 2.6rem;
  padding: 0 .75rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0c1b18;
  font-size: .68rem;
}
.segmented {
  display: inline-flex;
  height: 2.6rem;
  padding: .2rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0c1b18;
}
.segmented button {
  padding: 0 .7rem;
  white-space: nowrap;
  color: var(--muted);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: .6rem;
}
.segmented button.active { color: var(--green-dark); background: var(--green); font-weight: 800; }
.reset-button, .history-actions button {
  height: 2.6rem;
  padding: 0 .85rem;
  white-space: nowrap;
  color: var(--green);
  border: 1px solid rgba(147,252,123,.36);
  border-radius: 9px;
  background: transparent;
  font-size: .6rem;
}
.reset-button:hover, .history-actions button:hover { color: var(--green-dark); background: var(--green); }
.page-error {
  margin-top: 2rem;
  padding: 1rem;
  color: var(--danger);
  border: 1px solid rgba(255,138,138,.26);
  border-radius: 12px;
  background: rgba(108,20,20,.08);
}
.insight-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin-top: 1rem; }
.insight-strip p { margin: 0; padding: .85rem; color: rgba(236,235,242,.68);
                   border: 1px solid var(--line); border-radius: 11px;
                   background: rgba(12,27,24,.42); font: 600 .63rem/1.6 system-ui,sans-serif; }
.insight-strip strong { color: var(--green); }

.crown-stage {
  min-height: 31rem;
  margin-top: 2rem;
  padding: clamp(1.2rem, 4vw, 3rem);
}
.crown-layout {
  display: grid;
  grid-template-columns: minmax(20rem,.72fr) minmax(0,1.65fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.crown-leader {
  width: 100%;
  max-width: 22rem;
  margin: auto;
}
.crown-leader-card {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: 27rem;
  padding: 1.45rem 1.4rem 1.55rem;
  overflow: hidden;
  color: inherit;
  border: 1px solid rgba(147,252,123,.3);
  border-radius: 25px;
  background:
    radial-gradient(circle at 50% 34%, rgba(147,252,123,.12), transparent 40%),
    linear-gradient(155deg, rgba(20,42,36,.92), rgba(8,20,17,.84));
  box-shadow: 0 24px 65px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.035);
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.crown-leader-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3.2rem;
  width: 17rem;
  height: 17rem;
  border: 1px dashed rgba(147,252,123,.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.4rem rgba(147,252,123,.022),
    inset 0 0 55px rgba(147,252,123,.06);
}
.crown-leader-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(147,252,123,.04));
  pointer-events: none;
}
.crown-leader-card:hover {
  transform: translateY(-3px);
  border-color: rgba(147,252,123,.56);
  box-shadow: 0 30px 75px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
}
.crown-leader-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.crown-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.crown-kicker i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--leader-color, var(--green));
  box-shadow: 0 0 14px var(--leader-color, var(--green));
}
.crown-logo-orbit {
  display: grid;
  place-items: center;
  width: 11rem;
  height: 11rem;
  margin: 1.1rem 0 .8rem;
  border: 1px solid rgba(147,252,123,.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147,252,123,.1), rgba(147,252,123,.018) 65%);
}
.crown-logo-shell {
  display: grid;
  place-items: center;
  width: 8.2rem;
  height: 8.2rem;
  border: 1px solid rgba(236,235,242,.12);
  border-radius: 50%;
  background: rgba(7,18,16,.82);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.crown-logo-shell img,
.crown-logo-shell .logo-fallback {
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 0;
  object-fit: contain;
}
.crown-leader-card > strong {
  display: block;
  font: 850 1.45rem/1 system-ui,sans-serif;
}
.crown-rank {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .56rem;
}
.crown-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  margin-top: .95rem;
}
.crown-total b {
  color: var(--green);
  font: 900 2.7rem/.85 system-ui,sans-serif;
}
.crown-total small {
  color: rgba(236,235,242,.56);
  font-size: .5rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.crown-share {
  margin-top: .65rem;
  color: var(--muted);
  font-size: .54rem;
}
.crown-list { display: grid; gap: .65rem; }
.crown-row {
  display: grid;
  grid-template-columns: 2rem minmax(7rem,.8fr) minmax(8rem,1.8fr) auto;
  gap: .75rem;
  align-items: center;
  width: 100%;
  padding: .7rem;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  text-align: left;
}
.crown-row:hover { border-color: rgba(147,252,123,.42); }
.crown-row img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.crown-name { min-width: 0; font: 750 .75rem/1.2 system-ui,sans-serif; }
.crown-name small { display: block; margin-top: .22rem; color: var(--muted); font: 500 .53rem/1.2 inherit; }
.share-track { height: .45rem; overflow: hidden; border-radius: 99px; background: rgba(236,235,242,.08); }
.share-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--club-color, var(--green)); }
.crown-value { text-align: right; font: 850 .85rem/1 system-ui,sans-serif; }
.crown-value small { display: block; margin-top: .2rem; color: var(--muted); font: 500 .5rem/1 inherit; }

.club-vault { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 2rem; }
.club-card {
  position: relative;
  min-width: 0;
  padding: 1.2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(155deg, rgba(17,34,30,.84), rgba(8,18,16,.72));
}
.club-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--club-color, var(--green));
}
.club-card-head { display: flex; align-items: center; gap: .85rem; }
.club-card-head img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; background: #142723; }
.club-card-head h3 { margin: 0; font: 800 1.08rem/1.1 system-ui,sans-serif; }
.club-card-head span { display: block; margin-top: .25rem; color: var(--muted); font-size: .55rem; }
.club-total { margin-left: auto; text-align: right; }
.club-total strong { display: block; color: var(--green); font: 900 2rem/1 system-ui,sans-serif; }
.club-total span { margin-top: .3rem; text-transform: uppercase; letter-spacing: .1em; }
.fingerprint { display: flex; height: .65rem; margin-top: 1.2rem; overflow: hidden; border-radius: 99px; background: rgba(236,235,242,.06); }
.fingerprint span { min-width: 2px; height: 100%; border-right: 1px solid rgba(7,18,16,.48); }
.fingerprint-key { display: flex; flex-wrap: wrap; gap: .4rem .7rem; margin-top: .65rem; }
.fingerprint-key span { color: var(--muted); font-size: .5rem; }
.fingerprint-key i { display: inline-block; width: .4rem; height: .4rem; margin-right: .25rem; border-radius: 50%; }
.club-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.1rem; }
.club-metric { padding-top: .65rem; border-top: 1px solid var(--line); }
.club-metric span { display: block; color: var(--muted); font-size: .5rem; line-height: 1.4; }
.club-metric b { display: block; margin-top: .3rem; font: 750 .7rem/1.35 system-ui,sans-serif; }
.open-history {
  width: 100%;
  margin-top: 1rem;
  padding: .72rem;
  color: var(--green);
  border: 1px solid rgba(147,252,123,.32);
  border-radius: 9px;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .55rem;
  font-weight: 800;
}
.open-history:hover { color: var(--green-dark); background: var(--green); }

.era-grid { display: grid; gap: .8rem; padding-top: 2rem; }
.era-card {
  display: grid;
  grid-template-columns: 7rem minmax(0,1fr) minmax(11rem,.45fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(12,27,24,.55);
}
.era-label strong { display: block; color: var(--green); font: 900 1.5rem/1 system-ui,sans-serif; }
.era-label span { display: block; margin-top: .3rem; color: var(--muted); font-size: .52rem; }
.era-bar { display: flex; height: 2.6rem; overflow: hidden; border-radius: 9px; background: rgba(236,235,242,.05); }
.era-segment { min-width: 3px; padding: 0; border: 0; border-right: 1px solid rgba(8,18,16,.6); background: var(--club-color); }
.era-segment:hover, .era-segment:focus-visible { filter: brightness(1.35); }
.era-leader { display: flex; align-items: center; gap: .65rem; }
.era-leader img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; }
.era-leader strong { display: block; font: 750 .72rem/1.2 system-ui,sans-serif; }
.era-leader span { display: block; margin-top: .2rem; color: var(--muted); font-size: .5rem; line-height: 1.35; }
.era-competition-key { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .45rem .8rem;
                       padding-top: .2rem; color: var(--muted); font-size: .5rem; }
.era-competition-key b { color: var(--ink); }

.multi-title-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; padding-top: 2rem; }
.multi-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(12,27,24,.55); }
.multi-head { display: flex; align-items: center; gap: .7rem; }
.multi-head img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.multi-head strong { display: block; font: 800 .78rem/1.2 system-ui,sans-serif; }
.multi-head span { display: block; margin-top: .2rem; color: var(--green); font-size: .56rem; }
.multi-season { margin-left: auto; color: var(--muted); font-size: .62rem; }
.competition-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.competition-chip { padding: .38rem .5rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; font-size: .49rem; }

.comparison-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  max-width: 48rem;
  margin: 2rem auto 0;
  padding: 1rem;
}
.versus { align-self: center; color: var(--green); font: 900 .75rem/1 system-ui,sans-serif; }
.comparison-table { margin-top: 1rem; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.comparison-row { display: grid; grid-template-columns: 1fr minmax(9rem,.7fr) 1fr; text-align: center; }
.comparison-row > * { padding: .75rem; border-bottom: 1px solid var(--line); }
.comparison-row:last-child > * { border-bottom: 0; }
.comparison-row span { color: var(--muted); font-size: .55rem; }
.comparison-row b { font: 750 .74rem/1.3 system-ui,sans-serif; }
.comparison-club { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem !important; background: rgba(147,252,123,.035); }
.comparison-club img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }

.dynasty-trail { margin-top: 2rem; padding: clamp(1.2rem,3vw,2rem); }
.dynasty-empty { color: var(--muted); font-size: .7rem; line-height: 1.7; text-align: center; }
.dynasty-head { display: flex; align-items: center; gap: .9rem; }
.dynasty-head img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }
.dynasty-head h3 { margin: 0; font: 850 1.35rem/1 system-ui,sans-serif; }
.dynasty-head p { margin: .4rem 0 0; color: var(--muted); font-size: .64rem; line-height: 1.5; }
.dynasty-points { display: grid; grid-template-columns: repeat(5,1fr); gap: .6rem; margin-top: 1.3rem; }
.dynasty-point { position: relative; padding: .8rem; border-top: 2px solid var(--club-color,var(--green)); background: rgba(255,255,255,.018); }
.dynasty-point span { display: block; color: var(--muted); font-size: .48rem; text-transform: uppercase; letter-spacing: .1em; }
.dynasty-point b { display: block; margin-top: .35rem; font: 750 .68rem/1.4 system-ui,sans-serif; }
.dynasty-insight { margin: 1rem 0 0; color: rgba(236,235,242,.72); font: 600 .72rem/1.7 system-ui,sans-serif; }

.timeline { position: relative; display: grid; gap: .7rem; padding: 2rem 0 0 2rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: 2.3rem; bottom: 1rem; width: 1px; background: rgba(147,252,123,.24); }
.season-row {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0,1fr);
  gap: 1rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(12,27,24,.52);
}
.season-row::before { content: ""; position: absolute; left: -1.78rem; top: 1.35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--bg); }
.season-label { color: var(--green); font: 850 .75rem/1 system-ui,sans-serif; }
.season-label span { display: block; margin-top: .4rem; color: var(--muted); font: 500 .5rem/1.3 inherit; }
.season-titles { display: flex; flex-wrap: wrap; gap: .5rem; }
.timeline-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .55rem;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255,255,255,.018);
  text-align: left;
}
.timeline-title:hover { border-color: rgba(147,252,123,.42); }
.timeline-title.is-muted { opacity: .18; }
.timeline-title img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.timeline-title b { font: 750 .6rem/1.15 system-ui,sans-serif; }
.timeline-title span { display: block; margin-top: .15rem; color: var(--muted); font-size: .45rem; }
.season-row.multi { border-color: rgba(216,183,106,.28); }

.history-section .section-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.history-section .section-head > div:first-child { grid-column: 1; grid-row: 1; }
.history-actions { display: flex; grid-column: 2; grid-row: 1; gap: .55rem; }
.history-table-wrap { margin-top: 2rem; overflow: auto; border: 1px solid var(--line); border-radius: 15px; }
.history-table { width: 100%; min-width: 48rem; border-collapse: collapse; font-size: .66rem; }
.history-table th, .history-table td { padding: .85rem; border-bottom: 1px solid var(--line); text-align: left; }
.history-table th { position: sticky; z-index: 2; top: 0; color: var(--muted); background: #0c1b18; text-transform: uppercase; letter-spacing: .12em; font-size: .52rem; }
.history-table th button { color: inherit; border: 0; background: transparent; text-transform: inherit; letter-spacing: inherit; font-size: inherit; }
.history-table tbody tr:hover { background: rgba(147,252,123,.035); }
.history-club { display: inline-flex; align-items: center; gap: .5rem; color: inherit; border: 0; background: transparent; text-align: left; }
.history-club img { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; }
.history-table th:nth-child(4),
.history-table td:nth-child(4) {
  width: 5rem;
  text-align: center;
}
.history-logo {
  display: block;
  width: 2.15rem !important;
  height: 2.15rem !important;
  max-width: 2.15rem;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: contain;
  background: #142723;
}
.history-table .logo-fallback.history-logo { display: inline-grid; }
.category-badge { padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .48rem; text-transform: uppercase; letter-spacing: .08em; }

.methodology-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; padding-top: 2rem; }
.method-copy { color: rgba(236,235,242,.66); font: 500 .75rem/1.75 system-ui,sans-serif; }
.method-copy p { margin-top: 0; }
.method-copy ul { padding-left: 1.1rem; }
.source-facts { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.source-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem; border-bottom: 1px solid var(--line); }
.source-facts div:last-child { border-bottom: 0; }
.source-facts dt { color: var(--muted); font-size: .53rem; }
.source-facts dd { margin: 0; text-align: right; font: 750 .62rem/1.3 system-ui,sans-serif; }

.club-dialog {
  width: min(68rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  color: var(--ink);
  border: 1px solid rgba(236,235,242,.18);
  border-radius: 20px;
  background: #0a1714;
  box-shadow: 0 35px 120px rgba(0,0,0,.7);
}
.club-dialog::backdrop { background: rgba(2,8,7,.82); backdrop-filter: blur(5px); }
.dialog-shell { position: relative; padding: clamp(1rem,3vw,2rem); }
.dialog-close { position: sticky; z-index: 4; top: 0; float: right; width: 2.4rem; height: 2.4rem; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: #0c1b18; font-size: 1.2rem; }
.drawer-hero { display: flex; align-items: center; gap: 1rem; padding: .6rem 3.3rem 1.5rem 0; border-bottom: 1px solid var(--line); }
.drawer-hero img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; }
.drawer-hero h2 { margin: .25rem 0 0; font: 850 clamp(1.8rem,4vw,3rem)/1 system-ui,sans-serif; }
.drawer-total { margin-left: auto; text-align: right; }
.drawer-total strong { display: block; color: var(--green); font: 900 3.5rem/.8 system-ui,sans-serif; }
.drawer-total span { color: var(--muted); font-size: .55rem; text-transform: uppercase; letter-spacing: .12em; }
.drawer-milestones { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; margin-top: 1.2rem; }
.milestone { padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.milestone span { display: block; color: var(--muted); font-size: .48rem; line-height: 1.4; }
.milestone b { display: block; margin-top: .35rem; font: 750 .68rem/1.4 system-ui,sans-serif; }
.drawer-section { margin-top: 1.5rem; }
.drawer-section h3 { margin: 0 0 .8rem; font: 800 1rem/1 system-ui,sans-serif; }
.drawer-history-groups { display: grid; gap: .55rem; }
.drawer-history-groups details { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.drawer-history-groups summary { cursor: pointer; padding: .75rem; color: var(--green);
                                 background: rgba(147,252,123,.035); text-transform: uppercase;
                                 letter-spacing: .12em; font-size: .54rem; font-weight: 800; }
.drawer-history-groups details > .drawer-season { padding-inline: .75rem; }
.drawer-season { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.drawer-season > strong { color: var(--green); font-size: .67rem; }
.drawer-season div { display: flex; flex-wrap: wrap; gap: .4rem; }

.empty-state { padding: 2rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; text-align: center; font-size: .7rem; line-height: 1.6; }
.logo-fallback {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #07110e;
  background: var(--club-color,var(--green));
  font: 900 .6rem/1 system-ui,sans-serif;
}
.skeleton {
  display: block;
  min-height: 2.6rem;
  border-radius: 10px;
  background: linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.09),rgba(255,255,255,.035));
  background-size: 200% 100%;
  animation: pulse 1.3s linear infinite;
}
.skeleton-number { width: 12rem; height: 8rem; }
.podium-skeleton { min-height: 19rem; }
@keyframes pulse { to { background-position: -200% 0; } }

footer { padding: 0 var(--page-x) 3rem; color: rgba(236,235,242,.34); font-size: .7rem; line-height: 1.8; }

@media (max-width: 1080px) {
  .filters { grid-template-columns: repeat(3,1fr); }
  .view-control { grid-column: span 2; }
  .history-section .section-head { grid-template-columns: minmax(0, 1fr); }
  .history-actions { grid-column: 1; grid-row: auto; }
  .club-vault { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .multi-title-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .crown-layout { grid-template-columns: 1fr; }
  .crown-leader { max-width: 22rem; }
  .drawer-milestones { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .header-row { align-items: flex-start; }
  .section-nav { position: sticky; top: .6rem; }
  .section-nav a { padding: .58rem .7rem; font-size: .56rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-total { justify-items: start; text-align: left; }
  .hero-total strong { font-size: clamp(4.8rem,22vw,7rem); }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .section-head, .history-section .section-head { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .section-head h2 { white-space: normal; }
  .section-head > p { max-width: none; padding-left: 0; }
  .history-actions { grid-column: 1; grid-row: auto; }
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium-card, .podium-card.rank-1 { min-height: 18rem; }
  .podium-card.rank-1 { order: -1; }
  .filter-shell { position: relative; top: auto; }
  .filters { grid-template-columns: 1fr 1fr; }
  .search-filter, .view-control { grid-column: 1 / -1; }
  .reset-button { width: 100%; }
  .segmented { display: flex; overflow-x: auto; }
  .segmented button { flex: 1; }
  .club-vault, .multi-title-grid { grid-template-columns: 1fr; }
  .crown-row { grid-template-columns: 2rem minmax(6rem,1fr) auto; }
  .crown-row .share-track { grid-column: 2 / -1; }
  .era-card { grid-template-columns: 1fr; }
  .era-bar { order: 3; }
  .era-competition-key { grid-column: auto; order: 4; }
  .dynasty-points { grid-template-columns: 1fr 1fr; }
  .season-row { grid-template-columns: 1fr; }
  .methodology-grid { grid-template-columns: 1fr; }
  .comparison-controls { grid-template-columns: 1fr; }
  .versus { justify-self: center; }
  .comparison-row { grid-template-columns: 1fr 7rem 1fr; }
  .insight-strip { grid-template-columns: 1fr; }
  .drawer-hero { align-items: flex-start; flex-wrap: wrap; }
  .drawer-total { width: 100%; margin-left: 0; text-align: left; }
  .drawer-milestones { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .brand img { height: 2.25rem; }
  .site-description { font-size: .7rem; }
  .hero-stats, .filters { grid-template-columns: 1fr; }
  .search-filter, .view-control { grid-column: auto; }
  .hero { border-radius: 17px; }
  .club-metrics { grid-template-columns: 1fr; }
  .dynasty-points, .drawer-milestones { grid-template-columns: 1fr; }
  .timeline { padding-left: 1.5rem; }
  .timeline::before { left: .35rem; }
  .season-row::before { left: -1.43rem; }
  .drawer-season { grid-template-columns: 1fr; gap: .45rem; }
}

@media print {
  body { color: #111; background: #fff; }
  .site-header, .filter-shell, .history-actions, footer, .dialog-close { display: none !important; }
  main { padding: 0; }
  .view-panel { display: block !important; }
  .museum-panel, .podium-card, .club-card, .era-card, .multi-card {
    color: #111; border-color: #bbb; background: #fff; box-shadow: none;
  }
  .section { break-inside: avoid; }
}