/* =========================================================================
   ui_kits/website/site.css
   Page styles for the Sue's Angels FC homepage UI kit.
   Tokens come from ../colors_and_type.css
   ========================================================================= */

/* -- Layout ---------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--sp-section) 0; position: relative; }
.section--alt { background: var(--surface-1); }
.section--compact { padding: var(--sp-7) 0; }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-7); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.section__head--compact {
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
}
.section__head .t-eyebrow { margin-bottom: 10px; }
.section__head .t-h2 { font-size: clamp(28px, 4vw, 44px); line-height: 0.95; margin: 0; }
.section__more { font: 700 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-1); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--volt); }
.section__more:hover { color: var(--volt); }

/* -- Nav ------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(3, 18, 28, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: flex; align-items: center; gap: var(--sp-5);
}
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav__wordmark { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.04em; color: var(--fg-1); text-transform: uppercase; line-height: 1; }
.nav__links { display: flex; gap: 4px; margin-left: var(--sp-6); flex: 1; }
.nav__link {
  color: var(--fg-2); text-decoration: none;
  font: 700 12px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 14px; border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--fg-1); background: rgba(255,255,255,0.05); }
.nav__link.is-active { color: var(--volt); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__icon { background: transparent; border: 1px solid var(--hairline-strong); border-radius: 9999px; width: 36px; height: 36px; display: inline-grid; place-items: center; color: var(--fg-1); cursor: pointer; }
.nav__icon:hover { background: var(--surface-2); border-color: var(--volt); color: var(--volt); }
.nav__burger { display: none; background: transparent; border: 0; padding: 8px; flex-direction: column; gap: 4px; cursor: pointer; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--fg-1); }
.nav__drawer { display: none; }

/* Language shifter */
.lang-shifter { position: relative; }
.lang-shifter__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--hairline-strong);
  color: var(--fg-1); cursor: pointer;
  border-radius: 9999px;
  padding: 7px 12px 7px 10px;
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  transition: all var(--dur-fast);
}
.lang-shifter__btn:hover { background: var(--surface-2); border-color: var(--volt); color: var(--volt); }
.lang-shifter__btn[aria-expanded="true"] { background: var(--volt); color: var(--navy); border-color: var(--volt); }
.lang-shifter__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs); padding: 6px;
  min-width: 200px; max-height: 60vh; overflow-y: auto;
  z-index: 100; box-shadow: 0 18px 48px rgba(0,0,0,0.5);
  display: grid; gap: 2px;
}
.lang-shifter__opt {
  display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px;
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: var(--radius-xs); text-align: left;
  color: var(--fg-1);
  font: 600 13px/1 var(--font-sans);
  transition: background var(--dur-fast);
}
.lang-shifter__opt:hover { background: var(--surface-2); }
.lang-shifter__opt.is-active { background: rgba(214,242,58,0.12); color: var(--volt); }
.lang-shifter__short {
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.14em;
  background: var(--surface-3); color: var(--fg-2);
  padding: 5px 7px; border-radius: 4px; text-align: center;
  text-transform: uppercase;
}
.lang-shifter__opt.is-active .lang-shifter__short { background: var(--volt); color: var(--navy); }
.lang-shifter__label { color: inherit; }

/* Hide Google Translate's banner-frame + 'Powered by' badge */
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-logo-link, .goog-te-gadget span { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__drawer { display: flex; flex-direction: column; background: var(--surface-1); border-top: 1px solid var(--hairline); padding: 18px var(--gutter); gap: 4px; }
  .nav__drawer a { color: var(--fg-1); text-decoration: none; font: 800 18px/1 var(--font-sans); text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
}

/* -- Hero ------------------------------------------------------------------ */
.hero { position: relative; min-height: calc(100vh - 72px); padding: var(--sp-8) 0 0; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: #02060E; }
.hero__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.014) 2px, rgba(255,255,255,0.014) 3px);
  pointer-events: none; mix-blend-mode: overlay;
}
.hero__protect { position: absolute; inset: 0; background: var(--grad-hero); }

.hero__content {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center; min-height: calc(100vh - 220px);
}
.hero__copy { max-width: 820px; min-width: 0; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--sp-5); }
.hero__dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--volt); box-shadow: var(--glow-volt-sm); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.4vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
}
.hero__title em { font-style: normal; color: var(--volt); text-shadow: 0 0 32px rgba(216,255,0,0.4); }
.hero__title .hero__tail { color: var(--volt); }
.hero__sub { color: var(--fg-2); font-size: var(--fs-lead); font-weight: 500; max-width: 560px; margin-top: var(--sp-5); }
.hero__ctas { display: flex; gap: 10px; margin-top: var(--sp-6); flex-wrap: wrap; }
.hero__ctas .btn__arrow {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 999px; background: var(--navy); color: var(--volt);
  margin-right: 10px; flex-shrink: 0;
}

.hero__side { justify-self: stretch; display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; max-width: none; width: 100%; }
.hero__badge-wrap { position: relative; display: grid; place-items: center; padding: var(--sp-3) 0; }
.hero__badge-img { width: 240px; height: 240px; filter: drop-shadow(0 0 60px rgba(216,255,0,0.35)) drop-shadow(0 30px 60px rgba(0,0,0,0.65)); }
.hero__champ-strip {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: var(--sp-3);
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(214,242,58,0.22), rgba(214,242,58,0.04));
  border: 1px solid var(--hairline-volt);
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2);
}
.hero__champ-strip strong {
  color: var(--volt); font-family: var(--font-display); font-size: 14px; font-weight: 900; letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(214,242,58,0.4);
}

/* Countdown card — compact, badge-led, with subtle pulse on the digits. */
.hero__count {
  background: rgba(5, 11, 23, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: var(--sp-5);
  position: relative;
}
.hero__count::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); box-shadow: var(--glow-volt-sm);
}
.hero__count-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hero__count-eye { font: 700 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--volt); }
.hero__count-live { font: 700 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.hero__count-fix {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: center; margin-bottom: 16px;
  padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.hero__count-fix strong {
  font-family: var(--font-display); font-size: 18px; line-height: 1;
  color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em;
  text-align: center;
}
.hero__count-team {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.hero__count-team--home { justify-content: flex-end; }
.hero__count-team--away { justify-content: flex-start; }
.hero__count-team--away strong { color: var(--volt); }
.hero__count-team .fixture-card__badge { width: 28px; height: 28px; flex-shrink: 0; }
.hero__count-team .fixture-card__badge--shield { height: 32px; width: auto; }
.hero__count-fix em {
  font-style: normal; font: 900 10px/1 var(--font-sans);
  letter-spacing: 0.2em; color: var(--fg-3);
  padding: 6px 10px; border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}
.hero__count-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; margin-bottom: 14px;
}
.hero__count-grid > div {
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 12px 6px 10px;
  text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.hero__count-grid span {
  font-family: var(--font-stat); font-size: 32px; line-height: 0.9;
  color: var(--volt); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(214,242,58,0.32);
}
.hero__count-grid label {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase;
  margin-top: 2px;
}
.hero__count-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  padding-top: 10px; border-top: 1px solid var(--hairline);
  font: 600 10px/1.2 var(--font-sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
}
.hero__count-meta .hero__sep { color: var(--fg-4); }
.hero__count-comp { color: var(--volt) !important; }

.hero__ticker {
  position: relative; z-index: 2;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: linear-gradient(0deg, rgba(5,11,23,0.95), rgba(5,11,23,0.7));
  margin-top: var(--sp-7);
  overflow: hidden;
}
.hero__ticker-inner {
  display: flex; gap: 24px; align-items: center;
  padding: 16px var(--gutter); white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--container); margin: 0 auto;
}
.hero__ticker-inner::-webkit-scrollbar { display: none; }

@media (max-width: 1080px) {
  .hero__content { grid-template-columns: 1fr; min-height: auto; padding-bottom: var(--sp-6); }
  .hero__side { justify-self: stretch; max-width: 100%; }
  .hero__badge-wrap { display: none; }
}

/* -- Fixture card ---------------------------------------------------------- */
.fixture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.fixture-card {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs);
  padding: var(--sp-4) var(--sp-5); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center;
  transition: background var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fixture-card:hover { background: var(--surface-2); transform: translateY(-2px); }
.fixture-card__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--volt); box-shadow: var(--glow-volt-sm); transform: scaleY(0.3); transform-origin: center; transition: transform var(--dur-med) var(--ease-out); }
.fixture-card:hover .fixture-card__rail { transform: scaleY(1); }

.fixture-card__date { text-align: center; padding-right: var(--sp-4); border-right: 1px solid var(--hairline); }
.fixture-card__day { font-family: var(--font-display); font-size: 42px; line-height: 0.9; color: var(--fg-1); }
.fixture-card__mon { font: 700 9px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-top: 4px; }

.fixture-card__teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fixture-card__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fixture-card__badge { width: 24px; height: 24px; border-radius: 9999px; background: var(--surface-3); flex-shrink: 0; object-fit: contain; }
/* Shield-shaped badges keep their natural aspect and don't get clipped by border-radius. */
.fixture-card__badge--shield { border-radius: 0; background: transparent; }
.fixture-card__badge--circle { border-radius: 9999px; }
.fixture-card__badge.is-us { background: transparent; box-shadow: none; }
img.fixture-card__badge { background: transparent; }
.fixture-card__name { font: 800 17px/1.1 var(--font-sans); text-transform: uppercase; color: var(--fg-1); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-card__vs { font: 700 10px/1 var(--font-sans); letter-spacing: .2em; color: var(--fg-3); margin-left: 34px; }
.fixture-card__meta { font: 600 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.fixture-card__sep { color: var(--fg-4); }
.fixture-card__home { color: var(--volt); }
.fixture-card__away { color: var(--fg-2); }

.fixture-card__kick { text-align: right; }
.fixture-card__time { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--volt); }
.fixture-card__ven { font: 600 9px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-top: 4px; max-width: 160px; }

@media (max-width: 980px) { .fixture-grid { grid-template-columns: 1fr; } }

/* -- Result card ----------------------------------------------------------- */
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

/* Horizontal carousel variant — used on the homepage Results section */
.result-carousel {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
  padding-bottom: 4px;
}
.result-carousel::-webkit-scrollbar { display: none; }
.result-carousel .result-card {
  flex: 0 0 calc((100% - var(--sp-4) * 2) / 3);
  min-width: 300px;
  scroll-snap-align: start;
}
@media (max-width: 980px) {
  .result-carousel .result-card { flex-basis: calc((100% - var(--sp-4)) / 2); }
}
@media (max-width: 640px) {
  .result-carousel .result-card { flex-basis: 88%; }
}
.result-carousel__nav { display: inline-flex; align-items: center; gap: 6px; }
.result-carousel__btn {
  width: 36px; height: 36px; border-radius: 9999px;
  background: transparent; border: 1px solid var(--hairline-strong);
  color: var(--fg-1); cursor: pointer;
  display: inline-grid; place-items: center;
  transition: all var(--dur-fast);
}
.result-carousel__btn:hover:not(:disabled) { background: var(--volt); color: var(--navy); border-color: var(--volt); }
.result-carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.result-card { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); transition: background var(--dur-med) var(--ease-out); }
.result-card:hover { background: var(--surface-2); transform: translateY(-3px); border-color: var(--hairline-volt); box-shadow: 0 18px 38px rgba(0,0,0,0.45); }
.result-card__head { display: flex; align-items: center; gap: 10px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline); }
.result-card__score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; }
.result-card__side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.result-card__side--right { align-items: flex-end; text-align: right; }
.result-card__side .fixture-card__badge { width: 28px; height: 28px; }
.result-card__side .fixture-card__badge--shield { height: 32px; width: auto; }
.result-card__name { font: 800 11px/1.15 var(--font-sans); text-transform: uppercase; color: var(--fg-1); letter-spacing: -0.005em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; max-width: 100%; }
.result-card__nums { font-family: var(--font-display); font-size: 38px; line-height: 1; display: flex; gap: 10px; align-items: baseline; color: var(--fg-3); flex-shrink: 0; }
.result-card__nums .is-volt { color: var(--volt); text-shadow: 0 0 20px rgba(216,255,0,0.35); }
.result-card__dash { color: var(--fg-4); }
.result-card__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); align-items: end; }
.result-card__scorers { font: 600 11px/1.4 var(--font-sans); color: var(--fg-2); margin-top: 2px; }
.result-card__motm { text-align: right; }

.result-card--placeholder { justify-content: center; min-height: 220px; }
.result-card__placeholder {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: var(--sp-3) 0;
}
.result-card__placeholder p { color: var(--fg-3); font-size: var(--fs-sm); margin: 0; max-width: 320px; line-height: 1.4; }

/* -- Season results list (full Results page) ------------------------------- */
.rr-list { display: flex; flex-direction: column; gap: 4px; }
.rr {
  position: relative;
  display: grid; grid-template-columns: 140px 1fr 60px; gap: var(--sp-5); align-items: center;
  background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs);
  padding: 16px var(--sp-5);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rr:hover { background: var(--surface-2); transform: translateY(-1px); }

/* Cup row treatments — distinct backgrounds per round so the cup story reads visually. */
.rr--cup { padding-top: 28px; } /* room for round chip */
.rr--round-of-32 { background: linear-gradient(90deg, rgba(255,255,255,0.04), var(--surface-1) 60%); border-color: rgba(255,255,255,0.10); }
.rr--last-16     { background: linear-gradient(90deg, rgba(192,196,204,0.06), var(--surface-1) 60%); border-color: rgba(192,196,204,0.18); }
.rr--quarter-final { background: linear-gradient(90deg, rgba(205,127,50,0.08), var(--surface-1) 60%); border-color: rgba(205,127,50,0.32); }
.rr--semi-final  { background: linear-gradient(90deg, rgba(192,196,204,0.10), var(--surface-1) 55%); border-color: rgba(192,196,204,0.42); }
.rr--final       {
  background: linear-gradient(90deg, rgba(242,199,68,0.18), rgba(242,199,68,0.04) 50%, var(--surface-1));
  border-color: rgba(242,199,68,0.55);
  box-shadow: inset 4px 0 0 #F2C744;
}
.rr--final.rr--loss { box-shadow: inset 4px 0 0 var(--loss); border-color: rgba(255,77,94,0.5); background: linear-gradient(90deg, rgba(255,77,94,0.18), rgba(255,77,94,0.04) 50%, var(--surface-1)); }

/* Round chip pinned top-left of cup rows */
.rr__round {
  position: absolute; top: 0; left: 0;
  padding: 4px 10px; border-bottom-right-radius: var(--radius-xs);
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(255,255,255,0.10); color: var(--fg-1);
}
.rr__round--round-of-32 { background: rgba(255,255,255,0.12); color: var(--fg-2); }
.rr__round--last-16 { background: rgba(192,196,204,0.18); color: #C0C4CC; }
.rr__round--quarter-final { background: rgba(205,127,50,0.30); color: #F2A04E; }
.rr__round--semi-final { background: rgba(192,196,204,0.32); color: #E6E8EC; }
.rr__round--final { background: #F2C744; color: var(--navy); box-shadow: 0 0 14px rgba(242,199,68,0.4); }
.rr__round--pending {
  background: linear-gradient(90deg, rgba(214,242,58,0.85), rgba(214,242,58,0.55));
  color: var(--navy); letter-spacing: 0.18em;
  box-shadow: 0 0 14px rgba(214,242,58,0.4);
  animation: rrPend 2.2s ease-in-out infinite;
}
.rr--pending {
  background: linear-gradient(90deg, rgba(214,242,58,0.06), var(--surface-1) 50%);
  border-color: var(--hairline-volt);
}
@keyframes rrPend { 50% { opacity: 0.7; } }

.rr__pens {
  display: inline-flex; align-items: baseline; gap: 6px; margin-left: 12px;
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3);
}
.rr__pens strong {
  font-family: var(--font-stat); font-size: 20px; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--fg-1);
}
.rr__pens strong.is-volt { color: var(--volt); }
.rr__pens strong.is-loss { color: var(--loss); }
.rr__score .is-loss { color: var(--loss); }

.rr__date { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr__dt { font: 800 14px/1 var(--font-sans); color: var(--fg-1); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.rr__tm { font: 600 10px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }
.rr__teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; min-width: 0; }
.rr__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rr__side--right { justify-content: flex-end; }
.rr__name { font: 800 14px/1.15 var(--font-sans); text-transform: uppercase; color: var(--fg-1); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr__score { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 36px; line-height: 0.9; color: var(--fg-3); }
.rr__score .is-volt { color: var(--volt); text-shadow: 0 0 14px rgba(214,242,58,0.32); }
.rr__dash { color: var(--fg-4); font-size: 24px; }
.rr__score--wo { font-size: inherit; }
.rr__wochip {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: rgba(214,242,58,0.12); color: var(--volt);
  border: 1px solid var(--hairline-volt); white-space: nowrap;
}
.rr__tag { justify-self: end; }
.rr--wo { border-left: 3px solid var(--volt); }

/* Inline summary that appears under a result when match data has been entered. */
.rr__details {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--hairline);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.rr__details-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3);
}
.rr__detail { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr__detail-lbl {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--fg-3); text-transform: uppercase;
}
.rr__detail-lbl--yc { color: #F2C744; }
.rr__detail-lbl--rc { color: var(--loss); }
.rr__detail-val { font: 600 13px/1.4 var(--font-sans); color: var(--fg-1); }
.rr__commentary {
  background: var(--surface-2); border-left: 3px solid var(--volt);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-xs);
}
.rr__commentary p { margin: 6px 0 0; color: var(--fg-2); font: 500 13px/1.55 var(--font-sans); }

@media (max-width: 780px) {
  .rr { grid-template-columns: 1fr; gap: var(--sp-4); }
  .rr__teams { grid-template-columns: 1fr auto 1fr; }
  .rr__name { font-size: 13px; }
  .rr__score { font-size: 28px; }
  .rr__tag { justify-self: start; }
}

@media (max-width: 980px) { .result-grid { grid-template-columns: 1fr; } }

/* -- League Table ---------------------------------------------------------- */
.table-wrap { overflow: hidden; }
.lt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lt thead th { font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 16px 14px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.lt tbody td { padding: 14px; border-bottom: 1px solid var(--hairline); color: var(--fg-2); font: 600 14px/1 var(--font-sans); }
.lt tbody tr:last-child td { border-bottom: 0; }
.lt__num { text-align: center; width: 44px; }
.lt__pos { font-family: var(--font-display); font-size: 22px; color: var(--fg-3); width: 48px; text-align: center; }
.lt__club { color: var(--fg-1); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; display: flex; align-items: center; gap: 10px; }
.lt__club .fixture-card__badge { width: 22px; height: 22px; }
.lt__pts { color: var(--fg-1); font-weight: 800; font-size: 16px; }
.lt__form { display: flex; gap: 4px; }
.lt__f { width: 18px; height: 18px; border-radius: 2px; font: 800 9px/18px var(--font-sans); text-align: center; color: var(--navy); }
.lt__f--w { background: var(--win); }
.lt__f--d { background: var(--draw); color: var(--navy); }
.lt__f--l { background: var(--loss); color: #fff; }

.lt tbody tr.is-us { background: linear-gradient(90deg, rgba(216,255,0,0.10) 0%, transparent 80%); }
.lt tbody tr.is-us td { color: var(--volt); }
.lt tbody tr.is-us td.lt__club { color: var(--volt); }
.lt tbody tr.is-us td:first-child { box-shadow: inset 4px 0 0 var(--volt); }

@media (max-width: 720px) { .lt__hide-sm { display: none; } }

/* -- Sponsors -------------------------------------------------------------- */
/* Sponsor card: white bg, edge-to-edge logo, slim cute homepage variant */
.sponsor-card {
  position: relative; overflow: hidden;
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  text-decoration: none; color: var(--navy);
  aspect-ratio: 2.6 / 1;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.sponsor-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.35), var(--glow-volt-sm); }
.sponsor-card__logo {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 18px 22px;
  display: block;
  box-sizing: border-box;
}
.sponsor-card__name { display: none; }
.sponsor-card--full .sponsor-card__logo { object-fit: cover; }
.sponsor-card--full { aspect-ratio: 1 / 1; }

/* Big sponsor block on the Sponsors page — bigger, looser grid */
.sponsor-grid--xl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 880px) { .sponsor-grid--xl { grid-template-columns: 1fr; } }

.sponsor-tier { margin-bottom: var(--sp-7); }
.sponsor-tier:last-child { margin-bottom: 0; }
.sponsor-tier__label { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.sponsor-tier__rule { flex: 1; height: 1px; background: var(--hairline); }
.sponsor-grid { display: grid; gap: var(--sp-3); }
.sponsor-grid--lg { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.sponsor-grid--md { grid-template-columns: repeat(4, 1fr); }
.sponsor-grid--sm { grid-template-columns: repeat(6, 1fr); }
.sponsor { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); display: grid; place-items: center; transition: all var(--dur-med) var(--ease-out); padding: var(--sp-5); position: relative; overflow: hidden; }
.sponsor:hover { background: var(--surface-2); border-color: var(--hairline-volt); box-shadow: var(--glow-volt-sm); }
.sponsor.is-placeholder { background: transparent; border-style: dashed; border-color: var(--hairline); }
.sponsor.is-placeholder:hover { border-color: var(--volt); box-shadow: none; }
.sponsor.is-placeholder .sponsor__name { color: var(--fg-3); }
.sponsor__logo { max-width: 80%; max-height: 80%; object-fit: contain; filter: brightness(0) invert(1); transition: filter var(--dur-med) var(--ease-out); opacity: 0.92; }
.sponsor:hover .sponsor__logo { filter: none; opacity: 1; }
.sponsor__name { font-family: var(--font-display); color: var(--fg-1); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; white-space: pre-line; line-height: 0.95; }
.sponsor--lg { aspect-ratio: 2.2/1; } .sponsor--lg .sponsor__name { font-size: 38px; }
.sponsor--md { aspect-ratio: 1.6/1; } .sponsor--md .sponsor__name { font-size: 22px; }
.sponsor--sm { aspect-ratio: 1.6/1; } .sponsor--sm .sponsor__name { font-size: 14px; letter-spacing: 0.08em; }

@media (max-width: 980px) {
  .sponsor-grid--lg { grid-template-columns: 1fr; }
  .sponsor-grid--md { grid-template-columns: repeat(2, 1fr); }
  .sponsor-grid--sm { grid-template-columns: repeat(3, 1fr); }
}

/* -- Gallery --------------------------------------------------------------- */
.g-section {
  background:
    radial-gradient(ellipse at top right, rgba(214,242,58,0.04) 0%, transparent 50%),
    var(--surface-2);
}
.g-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 280px 280px;
  gap: 8px; margin-top: var(--sp-5);
}
.g-shot--hero { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.g-shot--s1   { grid-column: 9 / span 4; grid-row: 1; }
.g-shot--s2   { grid-column: 9 / span 4; grid-row: 2; }
.g-shot--s3   { grid-column: 1 / span 6; grid-row: 3; }
.g-shot--s4   { grid-column: 7 / span 6; grid-row: 3; }
.g-mosaic { grid-template-rows: 280px 280px 280px; }
@media (max-width: 880px) {
  .g-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 200px 200px; }
  .g-shot--hero { grid-column: 1 / -1; grid-row: 1; }
  .g-shot--s1   { grid-column: 1; grid-row: 2; }
  .g-shot--s2   { grid-column: 2; grid-row: 2; }
  .g-shot--s3   { grid-column: 1; grid-row: 3; }
  .g-shot--s4   { grid-column: 2; grid-row: 3; }
}

.g-shot {
  position: relative; overflow: hidden; cursor: pointer; margin: 0;
  border-radius: var(--radius-xs);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.g-shot:hover { transform: scale(1.015); z-index: 2; box-shadow: 0 22px 50px rgba(0,0,0,0.5); }
.g-shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-med); }
.g-shot:hover .g-shot__img { transform: scale(1.06); filter: brightness(1.08); }

.g-shot--a { background: linear-gradient(135deg, #1A2842 0%, #050B17 100%); }
.g-shot--b { background: radial-gradient(ellipse at 60% 40%, #2D5078 0%, #050B17 70%); }
.g-shot--c { background: linear-gradient(160deg, rgba(214,242,58,0.30), rgba(214,242,58,0.04) 50%, #050B17); }
.g-shot--d { background: linear-gradient(180deg, #16284A 0%, #050B17 80%); }
.g-shot--e { background: radial-gradient(ellipse at 50% 80%, #1F3A5C 0%, #050B17 70%); }

.g-shot__pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.g-shot__index {
  font-family: var(--font-display);
  font-size: clamp(120px, 16vw, 280px); line-height: 0.85;
  color: rgba(255,255,255,0.05); letter-spacing: -0.04em;
  transition: color var(--dur-med);
}
.g-shot:hover .g-shot__index { color: rgba(214,242,58,0.12); }
.g-shot--hero .g-shot__index { font-size: clamp(180px, 22vw, 360px); }

.g-shot__protect {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(2,6,12,0.78) 100%);
  pointer-events: none;
}
.g-shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(14px, 2vw, 24px);
  display: flex; align-items: flex-end; gap: 14px;
}
.g-shot__num {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px); line-height: 0.85;
  color: var(--volt); letter-spacing: -0.005em;
  text-shadow: 0 0 14px rgba(214,242,58,0.4);
  border-right: 2px solid var(--volt); padding-right: 12px;
}
.g-shot__cap-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-shot__title {
  font: 900 clamp(11px, 1.1vw, 14px)/1.1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.g-shot--hero .g-shot__title { font-size: clamp(15px, 1.4vw, 18px); }
.g-shot__sub {
  font: 700 9px/1.2 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.g-shot__admin {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: 6px; flex-direction: column; align-items: flex-end;
}

.g-empty {
  margin-top: var(--sp-4);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-1); border: 1px dashed var(--hairline-volt);
  border-radius: var(--radius-xs);
  font: 800 12px/1.3 var(--font-sans); letter-spacing: 0.12em; color: var(--fg-2); text-transform: uppercase;
}
@media (max-width: 640px) {
  .g-empty { flex-direction: column; align-items: flex-start; }
}

/* Legacy horizontal-rail gallery (still used on GalleryPage etc.) */
.gallery-rail {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 var(--gutter);
  scroll-snap-type: x mandatory; scrollbar-width: thin; margin-top: var(--sp-4);
}
}
.gallery-rail::-webkit-scrollbar { height: 4px; } .gallery-rail::-webkit-scrollbar-thumb { background: var(--hairline-strong); }
.shot { position: relative; width: 240px; flex-shrink: 0; aspect-ratio: 4/5; scroll-snap-align: start; overflow: hidden; cursor: pointer; transition: transform var(--dur-med) var(--ease-out); }
.shot:hover { transform: scale(1.02); z-index: 1; }
.shot--feature { width: 360px; aspect-ratio: 4/4.5; }
.shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__admin {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 4px; z-index: 3;
}
.shot__cap-input {
  background: rgba(0,0,0,0.75); color: #fff; border: 1px solid var(--hairline-strong);
  font: 600 11px/1 var(--font-sans); padding: 6px 8px; border-radius: var(--radius-pill);
  width: 140px;
}
.shot__rm {
  width: 28px; height: 28px; border-radius: 9999px;
  background: rgba(255,77,94,0.85); color: #fff; border: 0;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.shot__rm:hover { background: var(--loss); }

/* Partner admin overlay */
.partner-card__main {
  background: transparent; border: 0; padding: 0;
  display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: var(--sp-5);
  text-align: left; cursor: pointer; font-family: inherit; width: 100%;
  color: inherit;
}
.partner-card__admin {
  display: flex; gap: 6px; padding: 8px 12px;
  border-top: 1px solid #E6E8EC; background: #F6F8FA;
}
.partner-edit {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-4) 0;
}
.partner-edit__full { grid-column: 1 / -1; }
.partner-edit__check { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; }
.partner-edit label { display: flex; flex-direction: column; gap: 6px; font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }
.partner-edit input, .partner-edit textarea {
  background: var(--surface-2); border: 1px solid var(--hairline-strong); color: var(--fg-1);
  font: 500 14px/1.3 var(--font-sans); padding: 10px 12px; border-radius: var(--radius-md);
}
.partner-edit input:focus, .partner-edit textarea:focus { outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(214,242,58,0.18); }
@media (max-width: 640px) { .partner-edit { grid-template-columns: 1fr; } }
.shot--a { background: linear-gradient(135deg, #1A2842 0%, #050B17 100%); }
.shot--b { background: radial-gradient(ellipse at 60% 40%, #2D5078 0%, #050B17 70%); }
.shot--c { background: radial-gradient(ellipse at 30% 60%, rgba(216,255,0,0.3) 0%, #0A1426 50%, #050B17 100%); }
.shot--d { background: linear-gradient(180deg, #16284A 0%, #050B17 80%); }
.shot--e { background: radial-gradient(ellipse at 50% 80%, #1F3A5C 0%, #050B17 70%); }
.shot__protect { position: absolute; inset: 0; background: var(--grad-protect-b); }
.shot__cap { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-5); display: flex; flex-direction: column; gap: 4px; z-index: 2; }

/* -- Statement ------------------------------------------------------------- */
.statement { padding-top: calc(var(--sp-section) * 1.2); padding-bottom: calc(var(--sp-section) * 1.2); background: var(--bg); position: relative; overflow: hidden; }
.statement::before { content: ''; position: absolute; left: -10%; top: 50%; transform: translateY(-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(216,255,0,0.06) 0%, transparent 60%); }
.statement__quote {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.86; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--fg-1); margin: 18px 0 0;
  position: relative; z-index: 1;
}
.statement__quote em { font-style: normal; color: var(--volt); text-shadow: 0 0 40px rgba(216,255,0,0.35); }
.statement__sig { display: flex; align-items: center; gap: 18px; margin-top: var(--sp-6); }
.statement__rule { width: 64px; height: 2px; background: var(--volt); }

/* -- Join CTA -------------------------------------------------------------- */
.join { background: var(--volt); color: var(--navy); padding: var(--sp-7) 0; position: relative; overflow: hidden; }
.join::after { content: ''; position: absolute; right: -100px; bottom: -100px; width: 400px; height: 400px; border-radius: 9999px; background: radial-gradient(circle, rgba(10,20,38,0.18) 0%, transparent 70%); }
.join__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: center; position: relative; z-index: 1; }
.join__title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 72px); line-height: 0.9; letter-spacing: -0.015em; color: var(--navy); text-transform: uppercase; margin: 8px 0 var(--sp-3); }
.join__sub { color: rgba(10,20,38,0.78); font-size: var(--fs-body); font-weight: 500; max-width: 480px; }
.join__actions { display: flex; flex-direction: column; gap: 8px; }
.join .btn--dark { background: var(--navy); color: var(--fg-1); border: 0; justify-content: space-between; padding: 12px 18px; font-size: var(--fs-sm); }
.join .btn--dark:hover { background: #000; box-shadow: 0 0 0 4px rgba(10,20,38,0.12); }
@media (max-width: 880px) { .join__inner { grid-template-columns: 1fr; } }

/* -- Modal ----------------------------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(2, 5, 11, 0.85); z-index: 100; display: grid; place-items: center; padding: var(--gutter); animation: fade 200ms ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal__panel { background: var(--surface-1); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); padding: var(--sp-7); max-width: 520px; width: 100%; }
.modal__form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.modal__form label { display: flex; flex-direction: column; gap: 6px; font: 700 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.modal__form input, .modal__form textarea { background: var(--surface-2); border: 1px solid var(--hairline-strong); color: var(--fg-1); font: 500 15px/1.2 var(--font-sans); padding: 12px 14px; border-radius: var(--radius-md); }
.modal__form input:focus, .modal__form textarea:focus { outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(216,255,0,0.18); }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--sp-3); }

/* -- Squad ----------------------------------------------------------------- */
.sq-section {
  background:
    radial-gradient(ellipse at bottom right, rgba(214,242,58,0.04) 0%, transparent 50%),
    var(--surface-2);
}

/* Position filter chips */
.sq-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: var(--sp-5) 0 var(--sp-4);
}
.sq-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface-1); border: 1px solid var(--hairline);
  color: var(--fg-2); font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: all var(--dur-fast);
}
.sq-chip:hover:not(:disabled) { border-color: var(--hairline-volt); color: var(--fg-1); transform: translateY(-1px); }
.sq-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.sq-chip__count {
  display: inline-grid; place-items: center; min-width: 22px; height: 18px;
  padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--fg-3);
  font: 700 10px/1 var(--font-stat); letter-spacing: 0;
}
.sq-chip--on {
  background: var(--volt); border-color: var(--volt); color: var(--navy);
  box-shadow: 0 8px 20px rgba(214,242,58,0.22);
}
.sq-chip--on .sq-chip__count { background: rgba(7,29,41,0.18); color: var(--navy); }

/* Rolling carousel container */
.sq-roller {
  position: relative;
  padding: 0 36px;
}
.sq-roller__viewport { overflow: hidden; }
.sq-roller__track {
  display: flex; gap: 12px;
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0.24, 1.04);
  will-change: transform;
}
.sq-roller__cell {
  flex: 0 0 calc((100% - 36px) / 4);   /* 4 visible with 3 × 12px gaps */
  min-width: 0;
}
@media (max-width: 880px) {
  .sq-roller__cell { flex-basis: calc((100% - 12px) / 2); }
  .sq-roller__track { transform: none !important; }
}
@media (max-width: 520px) {
  .sq-roller__cell { flex-basis: 100%; }
}
.sq-roller__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 9999px;
  display: grid; place-items: center;
  background: var(--surface-1); border: 1px solid var(--hairline-volt);
  color: var(--volt); font: 900 22px/1 var(--font-sans);
  cursor: pointer; transition: all var(--dur-fast);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.sq-roller__nav:hover { background: var(--volt); color: var(--navy); transform: translateY(-50%) scale(1.06); }
.sq-roller__nav--prev { left: 0; }
.sq-roller__nav--next { right: 0; }
@media (max-width: 880px) { .sq-roller__nav { display: none; } }

.sq-roller__dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: var(--sp-4);
}
.sq-roller__dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--surface-3); border: none; padding: 0; cursor: pointer;
  transition: all var(--dur-fast);
}
.sq-roller__dot:hover { background: var(--fg-3); }
.sq-roller__dot.is-on { background: var(--volt); width: 22px; box-shadow: 0 0 10px rgba(214,242,58,0.5); }

/* Compact homepage player card — neat trading-card style */
.player-card.is-compact {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  overflow: hidden; padding: 0;
  text-align: left; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-med),
              box-shadow var(--dur-med);
}
.player-card.is-compact:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-volt);
  box-shadow: 0 18px 38px rgba(0,0,0,0.5), 0 0 0 1px rgba(214,242,58,0.1);
}
.player-card.is-compact .player-card__photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #1A2842 0%, #050B17 100%);
  overflow: hidden; position: relative;
}
.player-card.is-compact .player-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: brightness(0.9) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-med);
}
.player-card.is-compact:hover .player-card__photo img {
  transform: scale(1.08); filter: brightness(1.05) contrast(1.05);
}
.player-card.is-compact .player-card__num {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-stat); font-size: 40px; line-height: 0.86;
  color: var(--volt); text-shadow: 0 0 16px rgba(214,242,58,0.5);
  letter-spacing: -0.01em;
}
.player-card.is-compact .player-card__info {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.player-card.is-compact .player-card__name {
  font-family: var(--font-display);
  font-size: 17px; line-height: 1.0;
  color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-card.is-compact .player-card__role {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase;
}
.player-card.is-compact .player-card__stat {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline);
}
.player-card.is-compact .player-card__stat-v {
  font-family: var(--font-stat); font-size: 22px; line-height: 1;
  color: var(--volt); font-variant-numeric: tabular-nums;
}
.player-card.is-compact .player-card__stat-l {
  font: 700 9px/1 var(--font-sans); letter-spacing: 0.16em;
  color: var(--fg-3); text-transform: uppercase;
}

/* Position-coded accent rail on the player card */
.player-card.is-compact { position: relative; }
.player-card__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0.55;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
  z-index: 1;
}
.player-card.is-compact:hover .player-card__rail { transform: scaleY(1); opacity: 1; }
.player-card--gk  .player-card__rail { background: #22D3EE; }
.player-card--def .player-card__rail { background: var(--volt); }
.player-card--mid .player-card__rail { background: #F2C744; }
.player-card--att .player-card__rail { background: #FF6B9D; }

/* Captain / MOTM pills */
.player-card__badges {
  position: absolute; top: 8px; right: 10px;
  display: flex; gap: 4px; z-index: 2;
}
.player-card__pill {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill);
  font: 900 9px/1 var(--font-sans); letter-spacing: 0;
}
.player-card__pill--c { background: var(--volt); color: var(--navy); }
.player-card__pill--m { background: rgba(214,242,58,0.18); color: var(--volt); border: 1px solid var(--hairline-volt); }

/* Hover-revealed secondary stats row */
.player-card__hover-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: 0; opacity: 0; overflow: hidden;
  margin-top: 0; padding-top: 0; border-top: 0 solid var(--hairline);
  transition: max-height var(--dur-med) var(--ease-out),
              opacity var(--dur-fast),
              padding-top var(--dur-med),
              margin-top var(--dur-med),
              border-top-width var(--dur-med);
}
.player-card.is-compact:hover .player-card__hover-stats {
  max-height: 64px; opacity: 1;
  margin-top: 8px; padding-top: 10px; border-top-width: 1px;
}
.player-card__hover-stats > div {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.player-card__hover-stats span {
  font-family: var(--font-stat); font-size: 16px; line-height: 1;
  color: var(--volt); font-variant-numeric: tabular-nums;
}
.player-card__hover-stats label {
  font: 700 8px/1 var(--font-sans); letter-spacing: 0.14em;
  color: var(--fg-3); text-transform: uppercase; white-space: nowrap;
}

.squad-banner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 14px var(--sp-5);
  background: linear-gradient(90deg, rgba(214,242,58,0.10) 0%, transparent 100%);
  border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs);
  margin-bottom: var(--sp-6);
}
.squad-banner .t-meta { color: var(--volt); flex-shrink: 0; }
.squad-banner__copy { font: 500 14px/1.4 var(--font-sans); color: var(--fg-2); }

.squad-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
@media (max-width: 980px) { .squad-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .squad-grid { grid-template-columns: 1fr; } }

/* Homepage compact strip — 4 across on desktop with smaller photo */
.squad-grid--compact { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.squad-grid--compact .player-card__photo { aspect-ratio: 1 / 1; }
.squad-grid--compact .player-card__num { font-size: 38px; }
.squad-grid--compact .player-card__info { padding: 12px 14px; gap: 4px; }
.squad-grid--compact .player-card__name { font-size: 18px; }
.squad-grid--compact .player-card__stat { padding-top: 6px; margin-top: 4px; }
.squad-grid--compact .player-card__stat-v { font-size: 20px; }
@media (max-width: 980px) { .squad-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .squad-grid--compact { grid-template-columns: repeat(2, 1fr); } }

.player-card {
  background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs);
  overflow: hidden; transition: background var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.player-card:hover { background: var(--surface-2); transform: translateY(-2px); }

.player-card__photo {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--surface-2);
}
.player-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-card__num {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--font-stat); font-size: 56px; line-height: 0.86;
  color: var(--volt); letter-spacing: 0; text-shadow: 0 0 20px rgba(214,242,58,0.4);
}
.player-card__pos {
  position: absolute; bottom: 10px; right: 12px;
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase;
}
.player-card__captain {
  position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--volt); color: var(--navy);
  display: grid; place-items: center;
  font: 900 11px/1 var(--font-sans); letter-spacing: 0;
  box-shadow: var(--glow-volt-sm);
}

.player-card__info { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
.player-card__name {
  font-family: var(--font-display); font-size: 28px; line-height: 0.92;
  text-transform: uppercase; color: var(--fg-1); letter-spacing: -0.01em;
}
.player-card__role {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em;
  color: var(--fg-3); text-transform: uppercase;
}
.player-card__stat {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline);
}
.player-card__stat-v { font-family: var(--font-stat); font-size: 28px; color: var(--fg-1); line-height: 1; }
.player-card__stat-l { font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }

.player-card.is-placeholder .player-card__name { color: var(--fg-3); }
.player-card.is-placeholder .player-card__num { color: var(--fg-3); text-shadow: none; opacity: 0.45; }
.player-card.is-live { border-color: var(--hairline-volt); }
.player-card.is-live .player-card__num { color: var(--volt); }
.player-card__positions { font: 600 11px/1.3 var(--font-sans); color: var(--fg-3); letter-spacing: 0.04em; }

/* Formation insight card (Teams page · Stats tab) */
.formation-card {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5);
  background: linear-gradient(135deg, rgba(214,242,58,0.10), rgba(214,242,58,0.02));
  border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs); padding: var(--sp-5);
}
.formation-card__value {
  font-family: var(--font-stat); font-size: clamp(56px, 8vw, 96px);
  line-height: 0.9; color: var(--volt); margin: 8px 0 4px;
  text-shadow: 0 0 24px rgba(214,242,58,0.32);
  font-variant-numeric: tabular-nums;
}
.formation-card__breakdown {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  font: 600 12px/1.2 var(--font-sans); color: var(--fg-3);
}
.formation-card__breakdown strong { color: var(--fg-1); font-family: var(--font-stat); font-size: 18px; font-weight: 400; }
@media (max-width: 720px) {
  .formation-card { grid-template-columns: 1fr; }
  .formation-card__breakdown { align-items: flex-start; }
}

/* Three-stat mini grid inside the player card (Teams page) */
.player-card__stats3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline);
  gap: 4px;
}
.player-card__stats3 > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.player-card__stats3 span { font-family: var(--font-stat); font-size: 24px; line-height: 1; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.player-card__stats3 label { font: 700 9px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }

/* Leaderboards (Teams page) */
.leader-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .leader-grid { grid-template-columns: 1fr; } }
.leader-board {
  background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
}
.leader-board > header { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline); }
.leader-row {
  display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.leader-row:last-child { border-bottom: 0; }
.leader-row__rank { font-family: var(--font-stat); font-size: 22px; color: var(--fg-3); line-height: 1; text-align: center; }
.leader-row:nth-child(2) .leader-row__rank { color: var(--volt); }
.leader-row__name { font: 800 13px/1.2 var(--font-sans); text-transform: uppercase; color: var(--fg-1); letter-spacing: -0.005em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-row__meta { display: none; font: 600 10px/1 var(--font-sans); letter-spacing: 0.12em; color: var(--fg-3); text-transform: uppercase; grid-column: 2; }
.leader-row__v { font-family: var(--font-stat); font-size: 22px; color: var(--volt); line-height: 1; font-variant-numeric: tabular-nums; }
.leader-row__l { font: 700 9px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }

/* Leaderboard competition filter strip */
.leader-filter {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.leader-filter .filters { padding: 0; margin: 0; }

/* =========================================================================
   LEADERBOARDS v2 — banded, avatar-led, properly aligned
   ========================================================================= */
.lb2-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-bottom: 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.lb2-toolbar__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lb2-toolbar__lbl { color: var(--fg-3); white-space: nowrap; }
.lb2-toolbar__meta { margin-left: auto; }

.lb2-wrap {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  overflow-x: auto;
}

/* Group bar above the headers */
.lb2-groups {
  display: grid;
  grid-template-columns: 48px minmax(220px, 1fr) repeat(3, minmax(64px, auto)) repeat(4, minmax(56px, auto)) repeat(2, minmax(60px, auto)) repeat(2, minmax(48px, auto));
  align-items: stretch; min-width: 1020px;
  background: var(--navy-deep);
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--hairline-strong);
}
.lb2-groups__player { grid-column: 1 / span 2; padding: 10px 16px; color: var(--fg-2); }
.lb2-groups__band {
  padding: 10px 8px; text-align: center;
  border-left: 1px solid var(--hairline);
  background: rgba(255,255,255,0.02);
}
.lb2-groups__band:nth-of-type(1) { grid-column: 3 / span 3; }
.lb2-groups__band:nth-of-type(2) { grid-column: 6 / span 4; }
.lb2-groups__band:nth-of-type(3) { grid-column: 10 / span 2; }
.lb2-groups__band:nth-of-type(4) { grid-column: 12 / span 2; }
.lb2-groups__band--volt { background: rgba(214,242,58,0.08); color: var(--volt); }
.lb2-groups__band--muted { color: var(--fg-4); }

.lb2 {
  width: 100%; border-collapse: collapse;
  min-width: 1020px;
  font-variant-numeric: tabular-nums;
}
.lb2 thead { background: rgba(255,255,255,0.02); }
.lb2__th {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 8px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--hairline-strong);
  text-align: center; white-space: nowrap;
  transition: color var(--dur-fast);
}
.lb2__th:hover { color: var(--volt); }
.lb2__th--pos { width: 48px; }
.lb2__th--name { text-align: left; min-width: 220px; padding-left: 16px; }
.lb2__th--apps { color: var(--fg-2); }
.lb2__th--goals { color: var(--volt); }
.lb2__th--disc { color: var(--fg-4); }
.lb2__caret { display: inline-block; margin-left: 4px; font-size: 8px; opacity: 0.5; vertical-align: middle; }
.lb2__th.is-sorted { color: var(--volt); background: rgba(214,242,58,0.04); }
.lb2__th.is-sorted .lb2__caret { opacity: 1; }

.lb2__row {
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.lb2__row:nth-child(even) { background: rgba(255,255,255,0.012); }
.lb2__row:hover { background: rgba(214,242,58,0.06); }
.lb2__row:last-child { border-bottom: 0; }
.lb2__row--top {
  background: linear-gradient(90deg, rgba(214,242,58,0.10), transparent 30%);
  box-shadow: inset 3px 0 0 var(--volt);
}
.lb2__row--top .lb2__pos-n { color: var(--volt); }

.lb2 td { padding: 10px 8px; vertical-align: middle; border: 0; }
.lb2__pos {
  width: 48px; text-align: center;
  font-family: var(--font-stat); font-size: 18px; color: var(--fg-2); line-height: 1;
  position: relative;
}
.lb2__crown { color: var(--volt); font-size: 10px; line-height: 1; margin-right: 2px; }
.lb2__pos-n { font-family: var(--font-stat); font-variant-numeric: tabular-nums; }

.lb2__name {
  text-align: left; padding-left: 16px !important; min-width: 220px;
}
.lb2__name { display: flex; align-items: center; gap: 12px; }
.lb2__name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb2__name-main { font: 800 14px/1.1 var(--font-sans); letter-spacing: -0.005em; color: var(--fg-1); }
.lb2__name-sub  { font: 600 10px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--fg-3); text-transform: uppercase; }

.lb2__td {
  text-align: center;
  font-family: var(--font-stat); font-size: 16px; color: var(--fg-1); line-height: 1;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--hairline);
}
.lb2__td.is-on { color: var(--volt); font-size: 18px; background: rgba(214,242,58,0.05); }
.lb2__td--big { font-size: 18px; color: var(--volt); }
.lb2__td--muted { color: var(--fg-3); font-size: 14px; }
.lb2__td--yc { color: var(--draw); }
.lb2__td--rc { color: var(--loss); }

/* Player card photo block — no squad-number overlay (squad numbers not confirmed). */

/* Avatar circle in leaderboard rows */
.lb-avatar {
  width: 38px; height: 38px; border-radius: 9999px;
  overflow: hidden; flex-shrink: 0;
  background: var(--surface-3);
  border: 1.5px solid var(--hairline-strong);
  display: grid; place-items: center;
}
.lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-avatar__placeholder {
  font-family: var(--font-stat); font-size: 13px; color: var(--volt);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   PLAYER PHOTO UPLOADER + AVATAR HEADER
   ========================================================================= */
.pp__avatar {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 2px solid var(--hairline-volt);
  flex-shrink: 0;
}
.pp__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp__avatar-num {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-stat); font-size: 44px;
  color: var(--volt); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(214,242,58,0.4);
}
.pp__avatar-num-badge {
  position: absolute; right: -4px; bottom: -4px;
  background: var(--volt); color: var(--navy);
  font: 900 11px/1 var(--font-sans); letter-spacing: 0.04em;
  padding: 4px 7px; border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
.pp__avatar-img + .pp__avatar-num-badge { display: inline-block; }
.pp__avatar:has(.pp__avatar-num) .pp__avatar-num-badge { display: none; }

.pup {
  display: inline-flex; gap: 6px; margin-top: 12px;
  align-items: center;
}
.pup__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed var(--hairline-volt);
  color: var(--volt); cursor: pointer;
  padding: 6px 11px; border-radius: var(--radius-pill);
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  transition: all var(--dur-fast);
}
.pup__btn:hover { background: var(--volt); color: var(--navy); border-style: solid; }
.pup__btn--danger { color: var(--fg-3); border-color: var(--hairline); border-style: solid; }
.pup__btn--danger:hover { background: var(--loss); color: #fff; border-color: var(--loss); }

@media (max-width: 720px) {
  .pp__avatar { width: 70px; height: 70px; }
  .pp__avatar-num { font-size: 32px; }
}

/* =========================================================================
   LEADERBOARD TABLE (Teams · Leaderboards)
   ========================================================================= */
.lb-wrap {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  overflow-x: auto;
}
.lb {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  min-width: 900px;
}
.lb thead { background: var(--navy-deep); }
.lb__th {
  font: 800 10px/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
  padding: 14px 10px;
  text-align: left;
  cursor: pointer; user-select: none;
  white-space: nowrap;
  position: relative;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color var(--dur-fast);
}
.lb__th:hover { color: var(--volt); }
.lb__th--num { text-align: center; }
.lb__th--pos { width: 56px; text-align: center; }
.lb__th--name { min-width: 200px; }
.lb__th--team { min-width: 200px; }
.lb__caret {
  display: inline-flex; flex-direction: column; gap: 1px;
  margin-left: 6px; vertical-align: middle;
  color: var(--fg-4);
  font-size: 7px; line-height: 1;
}
.lb__th.is-sorted .lb__caret { color: var(--fg-2); }
.lb__th.is-sorted--asc  .lb__caret-up { color: var(--volt); }
.lb__th.is-sorted--desc .lb__caret-dn { color: var(--volt); }

.lb__row {
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.lb__row:nth-child(even) { background: rgba(255,255,255,0.015); }
.lb__row:hover { background: rgba(214,242,58,0.06); }
.lb__row--top { box-shadow: inset 4px 0 0 var(--volt); }
.lb__row--top .lb__pos span:last-child { color: var(--volt); }

.lb td { padding: 14px 10px; vertical-align: middle; border: 0; }
.lb__pos {
  width: 56px; text-align: center;
  font-family: var(--font-stat); font-size: 22px; color: var(--fg-2); line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.lb__crown { color: var(--volt); font-size: 14px; line-height: 1; filter: drop-shadow(0 0 6px rgba(214,242,58,0.6)); }
.lb__name {
  font: 700 14px/1.2 var(--font-sans); letter-spacing: -0.005em;
  color: var(--fg-1); display: flex; align-items: center; gap: 10px;
}
.lb__name .lb__num {
  font-family: var(--font-stat); font-size: 13px; color: var(--volt);
  background: rgba(214,242,58,0.12); padding: 3px 7px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.lb__team {
  font: 600 12px/1.2 var(--font-sans); color: var(--fg-2);
  display: flex; align-items: center; gap: 10px;
}
.lb__team img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.lb__td--num { text-align: center; font-family: var(--font-stat); font-size: 16px; color: var(--fg-1); line-height: 1; }
.lb__td--muted { color: var(--fg-3); font-size: 14px; }
.lb__td--yc { color: var(--draw); }
.lb__td--rc { color: var(--loss); }
.lb__td.is-sorted-col { color: var(--volt); font-size: 18px; }

/* -- Footer ---------------------------------------------------------------- */
.footer { background: var(--bg); padding: var(--sp-8) 0 var(--sp-5); border-top: 1px solid var(--hairline); }
.footer__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--sp-7); margin-bottom: var(--sp-7); }
.footer__brand { display: flex; align-items: center; gap: var(--sp-4); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--fg-2); text-decoration: none; font-size: var(--fs-xs); font-weight: 500; }
.footer__col a:hover { color: var(--volt); }
.footer__rule { height: 1px; background: var(--hairline); margin: var(--sp-5) 0; }
.footer__util { display: flex; align-items: center; gap: var(--sp-5); justify-content: space-between; flex-wrap: wrap; }
.footer__util-links { display: flex; gap: var(--sp-4); }
.footer__util-links a { color: var(--fg-3); font: 600 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.footer__util-links a:hover { color: var(--volt); }

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

/* -- Anchor smooth-scroll spacing for sticky nav --------------------------- */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

/* -- Tweaks overrides ------------------------------------------------------ */
/* Keep the club name (and opposition names) cleanly on one line everywhere. */
.nav__wordmark,
.lt__club,
.hero__count-fix strong,
.footer__brand .t-h3 { white-space: nowrap; }
/* Result cards now allow 2 lines on the team name so we don't truncate longer clubs. */
.lt__club { overflow: hidden; text-overflow: ellipsis; }

/* -- Champions banner (Table page) ---------------------------------------- */
.champ-banner {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-5); align-items: center;
  background: var(--volt); color: var(--navy);
  border-radius: var(--radius-xs);
  padding: var(--sp-6);
  position: relative; overflow: hidden;
}
.champ-banner::after {
  content: ''; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px;
  border-radius: 9999px; background: radial-gradient(circle, rgba(10,20,38,0.14) 0%, transparent 70%);
}
.champ-banner__mark { display: grid; place-items: center; }
.champ-banner__mark img { width: auto; height: 144px; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); }
.champ-banner__copy { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.champ-banner__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 64px); line-height: 0.92;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--navy); margin: 0;
}
.champ-banner__sub { color: rgba(10,20,38,0.78); font-size: var(--fs-lead); font-weight: 600; margin: 0; max-width: 720px; }
@media (max-width: 640px) {
  .champ-banner { grid-template-columns: 78px 1fr; padding: var(--sp-5); }
  .champ-banner__mark img { width: auto; height: 78px; }
}

/* Compact champions strip used on the homepage table preview */
.champ-strip {
  display: flex; align-items: center; gap: var(--sp-4);
  background: linear-gradient(90deg, rgba(214,242,58,0.18), rgba(214,242,58,0.02));
  border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs);
  padding: 12px var(--sp-4); margin-bottom: var(--sp-5);
}
.champ-strip__chip {
  display: inline-block; padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--volt); color: var(--navy);
  font: 900 11px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: var(--glow-volt-sm); flex-shrink: 0;
}
.champ-strip__copy { color: var(--fg-2); font-size: var(--fs-sm); }
.champ-strip__copy strong { color: var(--fg-1); }

/* -- League table status pills + divider --------------------------------- */
.status-pill {
  display: inline-block; padding: 4px 9px; border-radius: var(--radius-pill);
  font: 800 9px/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.status-pill--champion {
  background: var(--volt); color: var(--navy); box-shadow: var(--glow-volt-sm);
}
.status-pill--promoted {
  background: rgba(214,242,58,0.18); color: var(--volt); border: 1px solid var(--hairline-volt);
}
.status-pill--promotion-contender {
  background: rgba(255,255,255,0.08); color: var(--fg-2); border: 1px solid var(--hairline-strong);
}
.status-pill--eliminated {
  background: transparent; color: var(--fg-4); border: 1px solid var(--hairline);
}
.status-pill--in-contention { background: transparent; color: var(--fg-3); border: 1px solid var(--hairline); }

.lt__row--champion td.lt__pos { color: var(--volt); }
.lt__divider td {
  padding: 0 !important; border-bottom: 0 !important;
  position: relative;
}
.lt__divider td > span {
  display: block; padding: 10px var(--sp-4);
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--volt);
  background: linear-gradient(90deg, rgba(214,242,58,0.10), transparent);
  border-top: 2px dashed var(--hairline-volt);
  border-bottom: 2px dashed var(--hairline-volt);
}

/* -- Match entry (coach data form) ---------------------------------------- */
.me__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); cursor: pointer;
  transition: all var(--dur-fast);
}
.me__toggle:hover { border-color: var(--volt); color: var(--volt); background: rgba(214,242,58,0.04); }
.me__toggle-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--volt); box-shadow: var(--glow-volt-sm); }

.me {
  margin-top: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.me__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.me__title { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); margin: 6px 0 0; color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em; }
.me__close {
  background: transparent; border: 1px solid var(--hairline-strong); color: var(--fg-2);
  width: 32px; height: 32px; border-radius: 9999px; cursor: pointer; font-size: 18px; line-height: 1;
}
.me__close:hover { color: var(--volt); border-color: var(--volt); }

.me__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.me__grid section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 720px) { .me__grid { grid-template-columns: 1fr; } }

.me__lbl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-2); text-transform: uppercase;
}
.me__count { color: var(--volt); font-weight: 700; }

.me__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.me__chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 4px 4px 4px 10px;
  font: 700 12px/1 var(--font-sans); color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em;
}
.me__chip-num {
  font-family: var(--font-stat); font-size: 11px;
  background: var(--volt); color: var(--navy);
  padding: 3px 6px; border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.me__chip-x {
  background: transparent; border: 0; color: var(--fg-3); width: 22px; height: 22px;
  border-radius: 9999px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}
.me__chip-x:hover { background: rgba(255,255,255,0.08); color: var(--loss); }
.me__empty { font: 600 11px/1 var(--font-sans); color: var(--fg-4); padding: 4px 0; text-transform: uppercase; letter-spacing: 0.14em; }

.me__picker, .me__min {
  background: var(--surface-1); border: 1px solid var(--hairline-strong); color: var(--fg-1);
  font: 500 13px/1 var(--font-sans); padding: 9px 10px; border-radius: var(--radius-md);
  width: 100%;
}
.me__picker:focus, .me__min:focus { outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(214,242,58,0.18); }
.me__min { font-family: var(--font-mono); width: 64px; text-align: center; }
.me__textarea {
  background: var(--surface-1); border: 1px solid var(--hairline-strong); color: var(--fg-1);
  font: 500 14px/1.5 var(--font-sans);
  padding: 12px 14px; border-radius: var(--radius-md);
  width: 100%; resize: vertical; min-height: 110px;
}
.me__textarea:focus { outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(214,242,58,0.18); }
.me__row { display: flex; gap: 6px; align-items: center; }
.me__row .me__picker { flex: 1; }
.me__rm {
  background: transparent; border: 1px solid var(--hairline); color: var(--fg-3);
  width: 34px; height: 34px; border-radius: var(--radius-md); cursor: pointer; font-size: 16px; line-height: 1;
}
.me__rm:hover { color: var(--loss); border-color: var(--loss); }

.me__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--hairline); flex-wrap: wrap;
}
.me__saved { font: 600 10px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }
.me__actions { display: flex; gap: 8px; }

/* Position chips inside a Starter or Bench row — horizontal slider rail
   (swipeable on mobile + desktop) per client request, mirroring the homepage
   carousels. Selected chips stay visible; the rail scrolls rather than wraps. */
.me__poschips {
  display: flex; flex-wrap: nowrap; gap: 6px; margin: 8px 0 6px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 4px;
  scrollbar-width: thin;
}
.me__poschips::-webkit-scrollbar { height: 5px; }
.me__poschips::-webkit-scrollbar-thumb { background: var(--hairline-volt); border-radius: 9999px; }
.me__poschip { flex: 0 0 auto; scroll-snap-align: start; }
.me__poschip {
  background: transparent; border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 5px 10px;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); cursor: pointer;
  transition: all var(--dur-fast);
}
.me__poschip:hover:not(:disabled) { border-color: var(--volt); color: var(--volt); }
.me__poschip:disabled { opacity: 0.3; cursor: not-allowed; }
.me__poschip.is-on { background: var(--volt); color: var(--navy); border-color: var(--volt); box-shadow: var(--glow-volt-sm); }
.me__poschip.is-suggest:not(.is-on) { border-color: var(--hairline-volt); color: var(--volt); border-style: dashed; }

.me__starter, .me__bench {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs); padding: 12px;
  margin-bottom: 8px;
}
.me__starter-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me__starter-head .me__chip-name { flex: 1; min-width: 120px; font: 700 13px/1 var(--font-sans); color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em; }
.me__starter-meta { font: 600 10px/1.3 var(--font-sans); color: var(--fg-3); letter-spacing: 0.04em; }
.me__suggest { color: var(--volt); }
.me__subof {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.me__subof input { accent-color: var(--volt); }
.me__benchtag {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); color: var(--fg-3);
}

.me__col--full { grid-column: 1 / -1; }

.me__events { display: flex; flex-direction: column; gap: 6px; }
.me__pen {
  display: inline-flex; align-items: center; gap: 4px;
  font: 800 10px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; padding: 0 6px;
}
.me__pen input { accent-color: var(--volt); }
.me__pen span { color: var(--fg-2); }
.me__pen input:checked + span { color: var(--volt); }

/* Segmented goal-type toggle (Open Play / Penalty) */
.me__goaltype {
  display: inline-flex; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill); overflow: hidden; flex-shrink: 0;
}
.me__goaltype-btn {
  background: transparent; border: 0; color: var(--fg-3);
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 10px; cursor: pointer;
  transition: all var(--dur-fast);
}
.me__goaltype-btn:hover { color: var(--fg-1); background: rgba(255,255,255,0.04); }
.me__goaltype-btn.is-on { background: var(--volt); color: var(--navy); }
.me__goaltype-btn--set.is-on { background: #22D3EE; color: var(--navy); }
.me__goaltype-btn--pen.is-on { background: #F2C744; color: var(--navy); }

.me__stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  overflow: hidden; align-self: flex-start;
}
.me__stepper button {
  background: var(--surface-1); border: 0; color: var(--fg-1);
  width: 36px; height: 36px; font-size: 18px; line-height: 1; cursor: pointer;
}
.me__stepper button:hover { background: var(--surface-2); color: var(--volt); }
.me__stepper span {
  font-family: var(--font-stat); font-size: 22px; color: var(--volt); line-height: 1;
  min-width: 56px; text-align: center; padding: 0 8px;
  border-left: 1px solid var(--hairline-strong); border-right: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  display: inline-grid; place-items: center; height: 36px;
}

.me__formation {
  display: flex; flex-direction: column; gap: 2px; text-align: right; margin-left: auto;
  align-items: flex-end;
}
.me__formation span { font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--fg-3); text-transform: uppercase; }
.me__formation strong {
  font-family: var(--font-stat); font-size: 22px; color: var(--volt); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.me__formation-note { font: 600 9px/1 var(--font-sans); letter-spacing: 0.12em; color: var(--fg-3); text-transform: uppercase; }
.me__formation-edit {
  background: transparent; border: 1px dashed var(--hairline);
  color: var(--fg-3); font: 700 9px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill); cursor: pointer; margin-top: 4px;
  transition: all var(--dur-fast);
}
.me__formation-edit:hover { border-color: var(--volt); color: var(--volt); }
.me__formation-edit-row { display: flex; gap: 6px; margin-top: 4px; align-items: center; }
.me__formation-input {
  background: var(--surface-1); border: 1px solid var(--hairline-strong); color: var(--fg-1);
  font: 700 12px/1 var(--font-mono); letter-spacing: 0;
  padding: 6px 8px; border-radius: var(--radius-md); width: 130px;
}
.me__formation-input:focus { outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(214,242,58,0.2); }
.me__formation-btn {
  background: transparent; border: 1px solid var(--hairline-strong); color: var(--fg-3);
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer;
}
.me__formation-btn--save { background: var(--volt); color: var(--navy); border-color: var(--volt); }
.me__formation-btn:hover { border-color: var(--volt); color: var(--volt); }
.me__formation-btn--save:hover { background: #B5D000; color: var(--navy); border-color: #B5D000; }

.me__warn {
  background: rgba(255,77,94,0.08); color: var(--loss);
  border: 1px solid rgba(255,77,94,0.32); border-radius: var(--radius-xs);
  padding: 8px 10px; font: 600 11px/1.3 var(--font-sans);
}

/* Polish-into-article control + preview */
.me__polish {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px;
}
.me__polished {
  margin-top: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline-volt);
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-xs);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 12px;
}
.me__polished-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.me__polished-body p {
  color: var(--fg-1); font: 500 14px/1.65 var(--font-sans);
  margin: 0 0 10px;
}
.me__polished-body p:last-child { margin-bottom: 0; }
.me__polished-body p:first-child { font-size: 16px; font-weight: 600; }
.me__add-opp {
  background: transparent; border: 1px dashed var(--hairline);
  color: var(--fg-3); font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer;
  margin-top: 4px; text-align: left;
}
.me__add-opp:hover { border-color: var(--volt); color: var(--volt); }

/* =========================================================================
   PLAYER PROFILE MODAL (PlayerProfile.jsx)
   ========================================================================= */
.pp-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 5, 11, 0.85); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: var(--gutter);
  animation: ppFade 220ms var(--ease-out);
  overflow-y: auto;
}
@keyframes ppFade { from { opacity: 0; backdrop-filter: blur(0); } }

.pp {
  position: relative;
  width: 100%; max-width: 960px;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
  animation: ppPop 280ms var(--ease-out);
  margin: var(--sp-5) auto;
}
@keyframes ppPop { from { transform: translateY(20px); opacity: 0; } }

.pp__close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 9999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-strong);
  color: var(--fg-1); font-size: 20px; line-height: 1; cursor: pointer;
  transition: all var(--dur-fast);
  z-index: 1;
}
.pp__close:hover { background: var(--volt); color: var(--navy); border-color: var(--volt); box-shadow: var(--glow-volt-sm); }

.pp__head {
  display: grid; grid-template-columns: 100px 1fr; gap: var(--sp-5);
  align-items: center;
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline);
}
.pp__num {
  font-family: var(--font-stat);
  font-size: 96px; line-height: 0.86;
  color: var(--volt); text-shadow: 0 0 32px rgba(214,242,58,0.32);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pp__hd-text > .t-eyebrow { display: block; margin-bottom: 4px; }
.pp__name {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px); line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--fg-1); text-transform: uppercase;
  margin: 0;
}
.pp__sub { color: var(--fg-2); font-size: var(--fs-body); margin: 8px 0 0; max-width: 640px; }

/* ─── KPI GROUPS — Appearances / Attack / Penalties / Recognition ────────
   Grouped, banded stat panel. Each group is a labelled block; cells inside
   share a hairline grid. Hero cells glow volt. Hover lifts each cell. */
.pp-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.pp-kpi__group {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
.pp-kpi__group::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0.5;
}
.pp-kpi__group-label {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.2em;
  color: var(--volt); text-transform: uppercase;
}
.pp-kpi__cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 4px;
}
.pp-kpi__cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 12px;
  border-radius: var(--radius-xs);
  background: transparent;
  transition: background var(--dur-fast), transform var(--dur-fast);
  min-width: 0;
}
.pp-kpi__cell:hover { background: var(--surface-3); transform: translateY(-2px); }
.pp-kpi__cell b {
  font-family: var(--font-stat); font-size: 26px; line-height: 0.9;
  color: var(--fg-1); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  font-weight: 400;
}
.pp-kpi__cell i {
  font: 800 8px/1.1 var(--font-sans); letter-spacing: 0.1em;
  color: var(--fg-3); text-transform: uppercase; font-style: normal;
  text-align: center; white-space: nowrap;
}
.pp-kpi__cell--hero { background: rgba(214,242,58,0.06); }
.pp-kpi__cell--hero b { color: var(--volt); text-shadow: 0 0 16px rgba(214,242,58,0.3); }
.pp-kpi__cell--yc b { color: var(--draw); }
.pp-kpi__cell--rc b { color: var(--loss); }

/* Headline stat strip — tiled scoreboard.
   Uses the "grid lines via gap + background" trick: a hairline-coloured
   background shows through 1px gaps, so every cell (including wrapped rows
   and the trailing cell) gets clean, even dividers on all four sides.
   Fixed equal tiles via auto-fill keep the wrap tidy — no stretched lone cell. */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 1px;
  background: var(--hairline-strong);   /* shows through the gaps as dividers */
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.pp-stats::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--volt), transparent);
  opacity: 0.5; pointer-events: none;
}
.pp-stat {
  background: var(--surface-2);
  border: 0; border-radius: 0;
  padding: 16px 12px 13px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
  transition: background var(--dur-fast);
}
.pp-stat:hover { background: var(--surface-3); }
.pp-stat span {
  font-family: var(--font-stat); font-size: 30px; line-height: 0.9;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pp-stat--primary { background: rgba(214,242,58,0.05); }
.pp-stat--primary span { color: var(--volt); }
.pp-stat label {
  font: 800 9px/1.1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase;
  margin-top: 5px; white-space: nowrap;
}
.pp-stat--yc span { color: var(--draw); }
.pp-stat--rc span { color: var(--loss); }

/* Two-up row (gauge + donut) */
.pp-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-4); }
@media (max-width: 720px) { .pp-row { grid-template-columns: 1fr; } }

.pp-card {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.pp-card h4 {
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 4px;
}
.pp-empty { color: var(--fg-3); font: 500 13px/1.5 var(--font-sans); }

/* Win gauge */
.pp-gauge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pp-gauge__pct {
  font-family: var(--font-stat); font-size: 32px; fill: var(--volt);
  font-variant-numeric: tabular-nums;
}
.pp-gauge__label { font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; fill: var(--fg-3); text-transform: uppercase; }
.pp-gauge__legend { display: flex; gap: 16px; font: 700 11px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase; }
.pp-gauge__legend b { font-family: var(--font-stat); font-size: 18px; margin-right: 4px; font-variant-numeric: tabular-nums; }

/* Position donut */
.pp-donut { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; }
@media (max-width: 540px) { .pp-donut { grid-template-columns: 1fr; justify-items: center; } }
.pp-donut__svg { flex-shrink: 0; }
.pp-donut__total {
  font-family: var(--font-stat); font-size: 36px; fill: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.pp-donut__label { font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; fill: var(--fg-3); text-transform: uppercase; }
.pp-donut__legend {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.pp-donut__legend li {
  display: grid; grid-template-columns: 12px 50px 1fr auto; gap: 10px; align-items: center;
  font: 700 11px/1 var(--font-sans); color: var(--fg-2);
}
.pp-donut__dot { width: 12px; height: 12px; border-radius: 9999px; }
.pp-donut__pos { font-weight: 800; letter-spacing: 0.08em; color: var(--fg-1); }
.pp-donut__pct { color: var(--volt); font-family: var(--font-stat); font-size: 14px; text-align: right; }
.pp-donut__n   { color: var(--fg-3); font-family: var(--font-stat); font-size: 13px; }

/* Stat bars */
.pp-bar { display: flex; flex-direction: column; gap: 6px; }
.pp-bar__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 700 11px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.08em;
}
.pp-bar__head span:first-child { color: var(--fg-2); text-transform: uppercase; }
.pp-bar__head strong { font-family: var(--font-stat); font-size: 16px; color: var(--volt); margin-right: 4px; font-variant-numeric: tabular-nums; }
.pp-bar__track {
  height: 10px; background: rgba(255,255,255,0.06); border-radius: 9999px; overflow: hidden;
}
.pp-bar__fill {
  height: 100%; border-radius: 9999px;
  transition: width 0.6s var(--ease-out);
}

/* Match log */
.pp-log-list { display: flex; flex-direction: column; gap: 4px; }
.pp-log {
  display: grid; grid-template-columns: 28px 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
}
.pp-log:hover { background: rgba(214,242,58,0.04); border-color: var(--hairline-volt); }
.pp-log__res {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9999px;
  font: 900 11px/1 var(--font-sans); color: var(--navy);
}
.pp-log__res--w { background: var(--win); }
.pp-log__res--d { background: var(--draw); }
.pp-log__res--l { background: var(--loss); color: #fff; }
.pp-log__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-log__top {
  display: flex; gap: 8px; align-items: baseline;
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.12em; color: var(--fg-3); text-transform: uppercase;
}
.pp-log__comp { color: var(--volt); }
.pp-log__match { color: var(--fg-1); font: 700 13px/1.2 var(--font-sans); letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-log__match .fixture-card__badge { width: 20px; height: 20px; flex-shrink: 0; }
.pp-log__match .fixture-card__badge--shield { height: 22px; width: auto; }
.pp-log__match strong { font-family: var(--font-stat); font-size: 14px; margin-left: 6px; color: var(--volt); }
.pp-log__role { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pp-log__role-tag {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--radius-pill);
}
.pp-log__role-tag--start { background: rgba(214,242,58,0.18); color: var(--volt); }
.pp-log__role-tag--sub   { background: rgba(34,211,238,0.18); color: #22D3EE; }
.pp-log__pos { font: 700 10px/1 var(--font-mono); color: var(--fg-2); letter-spacing: 0.05em; }
.pp-log__suboff {
  font: 800 8px/1 var(--font-sans); letter-spacing: 0.18em; color: #F2C744; text-transform: uppercase;
  border: 1px solid rgba(242,199,68,0.4); padding: 2px 5px; border-radius: var(--radius-pill);
}
.pp-log__formation {
  font: 800 11px/1 var(--font-stat); letter-spacing: 0;
  color: var(--volt);
  background: rgba(214,242,58,0.12); padding: 2px 6px; border-radius: var(--radius-pill);
}
.pp-log__contrib { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 180px; }
.pp-log__chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.04em;
  padding: 4px 7px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pp-log__chip--g  { background: rgba(214,242,58,0.18); color: var(--volt); }
.pp-log__chip--a  { background: rgba(34,211,238,0.18); color: #22D3EE; }
.pp-log__chip--m  { background: var(--volt); color: var(--navy); box-shadow: var(--glow-volt-sm); }
.pp-log__chip--yc { background: rgba(242,199,68,0.18); color: #F2C744; }
.pp-log__chip--rc { background: rgba(255,77,94,0.18); color: var(--loss); }

@media (max-width: 720px) {
  .pp { padding: var(--sp-4); }
  .pp__head { grid-template-columns: 70px 1fr; gap: var(--sp-4); }
  .pp__num { font-size: 64px; }
  .pp-log { grid-template-columns: 24px 1fr; gap: 8px; padding: 8px 10px; }
  .pp-log__role, .pp-log__contrib { grid-column: 2; justify-content: flex-start; align-items: flex-start; flex-direction: row; }
}

.pp-foot kbd {
  background: var(--surface-3); padding: 2px 6px; border-radius: 4px;
  font: 700 10px/1 var(--font-mono); color: var(--fg-1);
  border: 1px solid var(--hairline);
}

/* Clickable player card */
.player-card--btn {
  border: 1px solid var(--hairline-volt);
  background: var(--surface-1);
  text-align: left; cursor: pointer; padding: 0;
  font-family: inherit; color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.player-card--btn:hover { transform: translateY(-3px); background: var(--surface-2); border-color: var(--volt); }
.player-card--btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* Player profile — tabs */
.pp-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.pp-tab {
  background: transparent; border: 0; padding: 12px 16px;
  color: var(--fg-3); font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all var(--dur-fast);
}
.pp-tab:hover { color: var(--fg-1); }
.pp-tab.is-active { color: var(--volt); border-bottom-color: var(--volt); }

/* Auto-narrative block */
.pp-narrative {
  background: linear-gradient(135deg, rgba(214,242,58,0.08), rgba(214,242,58,0.02));
  border: 1px solid var(--hairline-volt); border-left: 3px solid var(--volt);
  border-radius: var(--radius-xs); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 8px;
}
.pp-narrative p {
  color: var(--fg-1); font: 500 14px/1.6 var(--font-sans);
  margin: 0; max-width: 720px;
}
.pp-narrative p:first-of-type {
  font: 600 15px/1.55 var(--font-sans); color: var(--fg-1);
}

/* Big stat tile inside trends cards */
.pp-bigstat { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.pp-bigstat:last-child { border-bottom: 0; }
.pp-bigstat__v { font-family: var(--font-stat); font-size: 38px; color: var(--volt); line-height: 1; font-variant-numeric: tabular-nums; }
.pp-bigstat__l { font: 700 11px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }

/* Form ribbon */
.pp-form { display: flex; flex-direction: column; gap: 12px; }
.pp-form__legend {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font: 600 11px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.04em;
}
.pp-form__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pp-form__legend-meta { margin-left: auto; color: var(--fg-4); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.pp-form__row { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-form-pill {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px;
  border-radius: var(--radius-xs); font: 900 12px/1 var(--font-sans); color: var(--navy);
  transition: transform var(--dur-fast); cursor: default;
}
.pp-form-pill:hover { transform: translateY(-2px); }
.pp-form-pill--w { background: var(--win); }
.pp-form-pill--d { background: var(--draw); }
.pp-form-pill--l { background: var(--loss); color: #fff; }

/* Contribution timeline */
.pp-timeline { display: flex; flex-direction: column; gap: 12px; }
.pp-timeline__bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(28px, 1fr); gap: 4px;
  height: 140px; align-items: end;
  padding-bottom: 20px; border-bottom: 1px solid var(--hairline);
  position: relative;
}
.pp-timeline__col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.pp-timeline__stack { display: flex; flex-direction: column-reverse; gap: 1px; flex: 1; width: 100%; justify-content: flex-end; align-items: stretch; }
.pp-timeline__bar { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; transition: all var(--dur-med); }
.pp-timeline__bar--g { background: var(--volt); box-shadow: 0 0 8px rgba(214,242,58,0.4); }
.pp-timeline__bar--a { background: #22D3EE; }
.pp-timeline__bar--empty { background: rgba(255,255,255,0.06); height: 2px; }
.pp-timeline__col:hover .pp-timeline__bar { filter: brightness(1.2); }
.pp-timeline__lbl {
  font: 700 9px/1 var(--font-mono); color: var(--fg-4);
  position: absolute; bottom: 0; transform: translateY(100%);
  letter-spacing: 0;
}
.pp-timeline__key {
  display: flex; gap: 16px; font: 700 11px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.08em;
}
.pp-timeline__key span { display: inline-flex; align-items: center; gap: 6px; }
.pp-timeline__dot { width: 10px; height: 10px; border-radius: 2px; }
.pp-timeline__dot--g { background: var(--volt); }
.pp-timeline__dot--a { background: #22D3EE; }

/* Achievement badges */
.pp-badges {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.pp-badge {
  background: var(--surface-1); border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs); padding: var(--sp-4);
  text-align: center; display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  cursor: default;
}
.pp-badge:hover { transform: translateY(-3px); box-shadow: var(--glow-volt-sm); border-color: var(--volt); }
.pp-badge__icon { font-size: 28px; line-height: 1; }
.pp-badge__label { font: 900 10px/1.2 var(--font-sans); letter-spacing: 0.12em; color: var(--volt); text-transform: uppercase; }
.pp-badge__sub { font: 600 10px/1.4 var(--font-sans); color: var(--fg-3); }

/* Donut legend hover state */
.pp-donut__legend li { transition: opacity var(--dur-fast); cursor: default; }
.pp-donut__legend li.is-hover { opacity: 1; }
.pp-donut__legend:has(li.is-hover) li:not(.is-hover) { opacity: 0.35; }
body[data-countdown="off"] .hero__count { display: none; }
body.no-glow .hero__title em { text-shadow: none; }
body.no-glow .hero__count-grid span { text-shadow: none; }
body.no-glow .hero__dot { box-shadow: none; }
body.no-glow .hero__scan { display: none; }
body.no-glow .hero__count::before { box-shadow: none; }
body.is-comfy { --sp-section: clamp(96px, 14vw, 200px); }
body.is-comfy .section__head { margin-bottom: var(--sp-8); }
body.is-comfy .fixture-card,
body.is-comfy .result-card,
body.is-comfy .player-card__info,
body.is-comfy .stat-tile { padding: var(--sp-6); }

/* Body baseline polish — sharper rendering, smoother transitions site-wide. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { image-rendering: -webkit-optimize-contrast; }

/* Admin slot — only visible to admins (AdminMode.jsx). */
.admin-slot {
  border: 1px dashed var(--volt);
  border-radius: var(--radius-xs);
  background: rgba(214,242,58,0.04);
  padding: 14px; margin: var(--sp-4) 0;
}
.admin-slot__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-slot__chip {
  background: var(--volt); color: var(--navy);
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.18em;
  padding: 4px 8px; border-radius: var(--radius-pill);
}
.admin-slot__title { font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--volt); text-transform: uppercase; }
.admin-slot__body { display: flex; flex-direction: column; gap: 8px; }

/* =========================================================================
   v3 PAGES — Champions, Sponsors (MUFC style), News magazine, Join routes,
   About championship banner
   ========================================================================= */

/* CHAMPIONS PAGE */
.champ-hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, #D6F23A 0%, #A8C200 100%);
  color: var(--navy);
  padding: var(--sp-8) 0 var(--sp-9);
}
.champ-hero__rays {
  position: absolute; inset: -10%;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0deg 14deg, rgba(255,255,255,0.06) 14deg 28deg);
  opacity: 0.5; pointer-events: none;
  animation: champRays 90s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes champRays { to { transform: rotate(360deg); } }
.champ-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: center;
}
.champ-hero__eyebrow { color: rgba(10,20,38,0.85); font-weight: 800; }
.champ-hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.88; letter-spacing: -0.015em;
  margin: 12px 0 var(--sp-4); text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.champ-hero__title span { display: block; color: var(--navy); }
.champ-hero__title em {
  display: block; font-style: normal;
  color: var(--navy); opacity: 0.78;
  font-size: 0.5em; margin-top: 6px; letter-spacing: 0.04em;
  font-weight: 700;
}
.champ-hero__sub { font-size: var(--fs-lead); color: rgba(10,20,38,0.86); max-width: 520px; margin: 0; font-weight: 500; }
.champ-hero__ctas { display: flex; gap: 10px; margin-top: var(--sp-5); flex-wrap: wrap; }
.champ-hero__badge { position: relative; display: grid; place-items: center; }
.champ-hero__badge img {
  width: clamp(150px, 20vw, 220px); height: auto;
  filter:
    drop-shadow(0 24px 48px rgba(0,0,0,0.32))
    drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}
.champ-hero__ribbon {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--navy); color: var(--volt);
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
.champ-hero__ribbon strong { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; }
@media (max-width: 980px) { .champ-hero__inner { grid-template-columns: 1fr; text-align: left; } }

/* Recent league results list on the champions page */
.champ-recent {
  display: flex; flex-direction: column; gap: 4px;
}
.champ-recent__row {
  display: grid; grid-template-columns: 56px 120px 1fr; gap: var(--sp-4); align-items: center;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 12px 16px;
  transition: background var(--dur-fast);
}
.champ-recent__row:hover { background: var(--surface-2); }
.champ-recent__row--w { border-left: 3px solid var(--win); }
.champ-recent__row--d { border-left: 3px solid var(--draw); }
.champ-recent__row--l { border-left: 3px solid var(--loss); }
.champ-recent__date { font: 700 12px/1 var(--font-sans); color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }
.champ-recent__match { font: 600 14px/1.2 var(--font-sans); color: var(--fg-1); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.champ-recent__match .fixture-card__badge { width: 22px; height: 22px; flex-shrink: 0; }
.champ-recent__match .fixture-card__badge--shield { height: 24px; width: auto; }
.champ-recent__match strong { font-family: var(--font-stat); font-size: 16px; color: var(--volt); margin: 0 6px; }
@media (max-width: 640px) { .champ-recent__row { grid-template-columns: 48px 1fr; } .champ-recent__date { grid-column: 2; } .champ-recent__match { grid-column: 1 / -1; } }

.champ-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs); overflow: hidden;
}
@media (max-width: 720px) { .champ-stats { grid-template-columns: repeat(2, 1fr); } }
.champ-stat {
  background: var(--surface-1); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.champ-stat:not(:nth-child(4n))::after {
  content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background: var(--hairline);
}
.champ-stat__v { font-family: var(--font-stat); font-size: 48px; line-height: 0.9; color: var(--volt); font-variant-numeric: tabular-nums; }
.champ-stat__l { font: 800 10px/1 var(--font-sans); letter-spacing: 0.16em; color: var(--fg-3); text-transform: uppercase; }

.champ-milestones {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.champ-milestone {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast);
}
.champ-milestone:hover { background: var(--surface-2); }
.champ-milestone__d {
  font-family: var(--font-stat); font-size: 22px; color: var(--volt);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.champ-milestone__t { margin: 0 0 6px; font: 900 17px/1 var(--font-sans); letter-spacing: -0.005em; color: var(--fg-1); text-transform: uppercase; }
.champ-milestone__c { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 640px) { .champ-milestone { grid-template-columns: 1fr; gap: 6px; } }

.champ-next {
  background: var(--surface-1); border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.champ-next p { color: var(--fg-2); font-size: var(--fs-lead); margin: 0; max-width: 600px; }

/* ABOUT CHAMPIONSHIP BANNER */
.about-champ {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: center;
  background: linear-gradient(135deg, rgba(214,242,58,0.18), rgba(214,242,58,0.04) 70%, transparent);
  border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs);
  padding: var(--sp-5);
}
.about-champ__badge { position: relative; }
.about-champ__badge img { width: 140px; height: 140px; filter: drop-shadow(0 0 24px rgba(214,242,58,0.4)); }
.about-champ__ribbon {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--navy); color: var(--volt);
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
.about-champ__ribbon strong { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em; }
.about-champ__h { font: 900 32px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-1); margin: 4px 0 12px; text-transform: uppercase; }
.about-champ__copy p { color: var(--fg-2); margin: 0 0 var(--sp-3); font-size: var(--fs-body); }
@media (max-width: 720px) { .about-champ { grid-template-columns: 1fr; text-align: left; } .about-champ__badge img { width: 100px; height: 100px; } }

/* SPONSORS — MAN UTD-STYLE PARTNERS PAGE */
.partner-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
}
@media (max-width: 720px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-card {
  display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: var(--sp-5);
  background: #FFFFFF; color: var(--navy);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 0;
  text-align: left; cursor: pointer; font-family: inherit;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.partner-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.partner-card--primary { border-color: var(--hairline-volt); }
.partner-card__logo-wrap {
  width: 140px; height: 110px;
  display: grid; place-items: center;
  border-right: 1px solid #E6E8EC;
  padding: 12px;
  background: #FFFFFF;
}
.partner-card__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-card__meta { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) 0; min-width: 0; }
.partner-card__name { font: 900 16px/1.1 var(--font-sans); letter-spacing: -0.005em; color: var(--navy); text-transform: uppercase; }
.partner-card__role { font: 600 12px/1.3 var(--font-sans); color: rgba(10,20,38,0.6); text-transform: uppercase; letter-spacing: 0.04em; }
.partner-card__arrow {
  display: grid; place-items: center; padding: 0 var(--sp-5);
  color: rgba(10,20,38,0.4);
  transition: all var(--dur-fast);
}
.partner-card:hover .partner-card__arrow { color: var(--volt); transform: translateX(4px); }

/* Partner detail modal */
.partner-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 5, 11, 0.85); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: var(--gutter);
  animation: ppFade 220ms var(--ease-out); overflow-y: auto;
}
.partner-detail {
  position: relative;
  width: 100%; max-width: 720px;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
  animation: ppPop 280ms var(--ease-out);
}
.partner-detail__close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 9999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-strong);
  color: var(--fg-1); font-size: 20px; cursor: pointer;
  transition: all var(--dur-fast);
}
.partner-detail__close:hover { background: var(--volt); color: var(--navy); border-color: var(--volt); }
.partner-detail__head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--hairline); }
.partner-detail__logo {
  width: 120px; height: 90px; padding: 10px;
  background: #fff; border-radius: var(--radius-xs);
  display: grid; place-items: center;
}
.partner-detail__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-detail__name { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); line-height: 0.95; margin: 6px 0 4px; color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.01em; }
.partner-detail__role { color: var(--fg-3); font-size: var(--fs-sm); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.partner-detail__blurb { color: var(--fg-2); line-height: 1.6; margin: 0; }
.partner-detail__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* HOME PAGE — main sponsors block (Sponsors.jsx) */
.sp-home {
  background:
    radial-gradient(ellipse at top right, rgba(214,242,58,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(214,242,58,0.03) 0%, transparent 45%),
    var(--surface-2);
  position: relative; overflow: hidden;
}
.sp-home__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (max-width: 880px) { .sp-home__grid { grid-template-columns: 1fr; } }
.sp-home__card {
  position: relative;
  display: grid; grid-template-columns: 130px 1fr auto; gap: var(--sp-4); align-items: center;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-4) + 4px);
  text-decoration: none; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.sp-home__card::after {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 220px; height: 220px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(214,242,58,0.12) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-med);
  pointer-events: none;
}
.sp-home__card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-volt);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(214,242,58,0.08);
}
.sp-home__card:hover::after { opacity: 1; }
.sp-home__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--volt);
  transform: scaleY(0.4); transform-origin: top; transition: transform var(--dur-med) var(--ease-out);
}
.sp-home__card:hover .sp-home__rail { transform: scaleY(1); }
.sp-home__logo-plate {
  width: 130px; height: 130px;
  background: #FFFFFF; border-radius: var(--radius-xs);
  display: grid; place-items: center; padding: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.sp-home__logo-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-home__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-home__role {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em; color: var(--volt); text-transform: uppercase;
}
.sp-home__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1; margin: 4px 0 2px;
  color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em;
}
.sp-home__sub {
  font: 500 13px/1.4 var(--font-sans); color: var(--fg-2); margin: 0;
  max-width: 380px;
}
.sp-home__since {
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--fg-3); text-transform: uppercase;
  margin-top: 6px;
}
.sp-home__arrow {
  display: grid; place-items: center; padding: 0 8px;
  color: var(--fg-3); transition: color var(--dur-fast), transform var(--dur-fast);
}
.sp-home__card:hover .sp-home__arrow { color: var(--volt); transform: translateX(6px); }

.sp-home__cta {
  margin-top: var(--sp-4);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-1); border: 1px dashed var(--hairline-volt);
  border-radius: var(--radius-xs);
  font: 800 12px/1.3 var(--font-sans); letter-spacing: 0.12em; color: var(--fg-2); text-transform: uppercase;
}
@media (max-width: 640px) {
  .sp-home__card { grid-template-columns: 90px 1fr; padding: var(--sp-4); }
  .sp-home__logo-plate { width: 90px; height: 90px; }
  .sp-home__arrow { display: none; }
  .sp-home__cta { flex-direction: column; align-items: flex-start; }
}

/* NEWS — magazine layout */
.news-card {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.news-card:hover { transform: translateY(-3px); border-color: var(--hairline-volt); background: var(--surface-2); }
.news-card__media {
  position: relative; aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end; padding: var(--sp-4);
}
.news-card--lg .news-card__media { aspect-ratio: 21 / 9; }
.news-card--md .news-card__media { aspect-ratio: 16 / 10; }
.news-card--xs .news-card__media { aspect-ratio: 16 / 6; }
.news-card__media--a { background: linear-gradient(135deg, #1A2842 0%, #050B17 100%); }
.news-card__media--b { background: radial-gradient(ellipse at 60% 40%, #2D5078 0%, #050B17 70%); }
.news-card__media--c { background: linear-gradient(160deg, rgba(214,242,58,0.30), rgba(214,242,58,0.04) 50%, #050B17); }
.news-card__media--d { background: linear-gradient(180deg, #16284A 0%, #050B17 80%); }
.news-card__media--e { background: radial-gradient(ellipse at 50% 80%, #1F3A5C 0%, #050B17 70%); }
.news-card__cat {
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.18em; color: #fff;
  background: rgba(2,6,12,0.65); padding: 6px 10px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.18); text-transform: uppercase;
}
.news-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card__title { margin: 0; color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em; }
.news-card--lg .news-card__title { font: 900 clamp(28px, 4vw, 48px)/0.95 var(--font-sans); }
.news-card--md .news-card__title { font: 900 20px/1.1 var(--font-sans); }
.news-card--xs .news-card__title { font: 900 15px/1.2 var(--font-sans); }
.news-card { cursor: pointer; }
.news-card__meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 8px;
}
.news-card__meta-row .news-card__meta { margin-top: 0; }
.news-card__read-more {
  display: inline-flex; align-items: center; gap: 4px;
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--volt);
  transition: gap var(--dur-fast);
}
.news-card:hover .news-card__read-more { gap: 8px; }

/* Article detail modal */
.ad-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 5, 11, 0.88); backdrop-filter: blur(10px);
  display: grid; place-items: start center; padding: var(--gutter);
  animation: ppFade 220ms var(--ease-out); overflow-y: auto;
}
.ad {
  position: relative;
  width: 100%; max-width: 880px;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin: var(--sp-5) auto;
  animation: ppPop 280ms var(--ease-out);
}
.ad__close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 38px; height: 38px; border-radius: 9999px;
  background: rgba(2, 6, 12, 0.78); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 18px; cursor: pointer;
  transition: all var(--dur-fast);
}
.ad__close:hover { background: var(--volt); color: var(--navy); border-color: var(--volt); }

.ad__media { position: relative; }
.ad__media--report { aspect-ratio: 16/9; }
.ad__media[class*="ad__media--"]:not(.ad__media--report) {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1A2842, #050B17);
  display: block;
}
.ad__media--a { background: linear-gradient(135deg, #1A2842 0%, #050B17 100%); }
.ad__media--b { background: radial-gradient(ellipse at 60% 40%, #2D5078 0%, #050B17 70%); }
.ad__media--c { background: linear-gradient(160deg, rgba(214,242,58,0.30), rgba(214,242,58,0.04) 50%, #050B17); }
.ad__media--d { background: linear-gradient(180deg, #16284A 0%, #050B17 80%); }
.ad__media--e { background: radial-gradient(ellipse at 50% 80%, #1F3A5C 0%, #050B17 70%); }

.ad__body { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); }
.ad__cat {
  display: inline-block; align-self: flex-start;
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--volt); padding: 6px 10px; border-radius: var(--radius-pill);
  background: rgba(214,242,58,0.12); border: 1px solid var(--hairline-volt);
}
.ad__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 56px); line-height: 0.95;
  color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.015em;
  margin: 0;
}
.ad__date {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase;
}
.ad__story { display: flex; flex-direction: column; gap: 14px; }
.ad__story p {
  color: var(--fg-1); font-size: 16px; line-height: 1.7;
  margin: 0;
}
.ad__story p:first-child {
  font-size: 19px; line-height: 1.55; color: var(--fg-1);
  font-weight: 500;
}

.ad-extras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs); padding: var(--sp-4);
  margin-top: var(--sp-3);
}
.ad-extra { display: flex; flex-direction: column; gap: 4px; }
.ad-extra__lbl { font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--fg-3); text-transform: uppercase; }
.ad-extra div { font: 600 13px/1.4 var(--font-sans); color: var(--fg-1); }

.ad__foot { display: flex; gap: 10px; padding-top: var(--sp-4); border-top: 1px solid var(--hairline); margin-top: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 720px) { .ad__body { padding: var(--sp-5); } }

/* Match-report graphic — broadcast-style scoreboard graphic per match-report article. */
.news-card__media--report {
  padding: 0; display: block;
  aspect-ratio: 16/9;
  background: #02060E;
  position: relative; overflow: hidden;
}
.news-card__cat--floating { position: absolute; top: 16px; left: 16px; z-index: 3; }
/* The cover graphics (match report, match preview, sponsor feature) already carry
   their own header labels in the top-left. Hide the duplicate floating category
   chip for those cards so they don't overlap. */
.news-card__media--report .news-card__cat--floating,
.news-card__media--sponsor .news-card__cat--floating { display: none; }
.mr-graphic {
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(214,242,58,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(214,242,58,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0A1622 0%, #02060E 100%);
  overflow: hidden;
}
.mr-graphic::before {
  /* Subtle diagonal stripes texture */
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 24px, rgba(255,255,255,0.012) 24px 25px);
  pointer-events: none;
}
.mr-graphic::after {
  /* Volt accent line at bottom */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--volt), transparent);
  box-shadow: 0 0 14px rgba(214,242,58,0.32);
}
.mr-graphic[data-result="L"]::after { background: linear-gradient(90deg, var(--loss), transparent); box-shadow: 0 0 14px rgba(255,77,94,0.4); }
.mr-graphic[data-result="D"]::after { background: linear-gradient(90deg, var(--draw), transparent); }

/* Top status bar */
.mr-graphic__top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px;
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mr-graphic__ft {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--volt);
}
.mr-graphic__ft::before {
  content: ''; width: 8px; height: 8px; border-radius: 9999px;
  background: var(--volt); box-shadow: 0 0 12px var(--volt);
}
.mr-graphic__comp { color: rgba(255,255,255,0.55); text-align: center; flex: 1; }
.mr-graphic__chip {
  background: var(--volt); color: var(--navy);
  padding: 7px 14px; border-radius: var(--radius-pill);
  font: 900 11px/1 var(--font-sans); letter-spacing: 0.22em;
  box-shadow: 0 0 18px rgba(214,242,58,0.4);
}
.mr-graphic__chip--d { background: var(--draw); box-shadow: 0 0 18px rgba(242,199,68,0.32); }
.mr-graphic__chip--l { background: var(--loss); color: #fff; box-shadow: 0 0 18px rgba(255,77,94,0.4); }

/* Main scoreline area */
.mr-graphic__main {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 36px);
  align-items: center; padding: 0 clamp(20px, 4vw, 44px);
}
.mr-graphic__side {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center;
}
.mr-graphic__badge {
  width: clamp(62px, 8vw, 100px); height: clamp(62px, 8vw, 100px); object-fit: contain;
  filter:
    drop-shadow(0 0 24px rgba(214,242,58,0.32))
    drop-shadow(0 12px 24px rgba(0,0,0,0.55));
}
/* Shield-shaped badges (Sue's, Pure FC, Old Freemen's) — preserve aspect via height-only sizing. */
.mr-graphic__badge--shield {
  width: auto;
  height: clamp(70px, 9vw, 112px);
}
.mr-graphic__badge--circle {
  /* default circular badges already fit; nothing extra needed */
}
.mr-graphic__badge--placeholder {
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 70%);
  border-radius: 9999px;
  border: 2px dashed rgba(255,255,255,0.15);
  filter: none;
}
.mr-graphic__team {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 30px); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mr-graphic__tag {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
  padding: 4px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill);
}
.mr-graphic__tag--us {
  background: var(--volt); color: var(--navy); border-color: var(--volt);
  box-shadow: 0 0 14px rgba(214,242,58,0.4);
}
.mr-graphic__side--us .mr-graphic__team { color: var(--volt); }

/* Score column */
.mr-graphic__score {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.mr-graphic__score-nums {
  display: flex; align-items: baseline; gap: clamp(8px, 1.5vw, 18px);
  font-family: var(--font-stat);
}
.mr-graphic__num {
  font-size: clamp(54px, 8.5vw, 110px); line-height: 0.86;
  color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast);
}
.mr-graphic__num.is-volt {
  color: var(--volt);
  text-shadow:
    0 0 28px rgba(214,242,58,0.5),
    0 0 56px rgba(214,242,58,0.25);
}
.mr-graphic__dash {
  color: rgba(255,255,255,0.25);
  font-size: clamp(38px, 5.5vw, 70px);
  font-family: var(--font-stat);
}
.mr-graphic__wo {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 60px); color: var(--volt);
  letter-spacing: 0.04em; text-shadow: 0 0 18px rgba(214,242,58,0.32);
}
.mr-graphic__pens {
  font: 900 11px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); margin-top: 2px;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: rgba(214,242,58,0.12); border: 1px solid var(--hairline-volt);
}

/* Preview-graphic variant: same chrome, fixture metadata instead of a score. */
.mr-graphic__score--preview { gap: 12px; }
.mr-graphic__vs {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px); line-height: 1;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.55);
}
.mr-graphic__chip {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--radius-pill);
}
.mr-graphic__chip--preview {
  background: rgba(214,242,58,0.16); color: var(--volt);
  border: 1px solid var(--hairline-volt);
}
.mr-graphic--preview .mr-graphic__side--us .mr-graphic__team { color: var(--volt); }

/* Sponsor cover graphic — used as the cover image for the SPONSORS feature article. */
.sp-cover {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(ellipse at top left, rgba(214,242,58,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(214,242,58,0.08) 0%, transparent 55%),
    linear-gradient(160deg, #0E1A26 0%, #050B17 100%);
  border-radius: var(--radius-xs); overflow: hidden;
}
.sp-cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}
.sp-cover__top {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.sp-cover__eyebrow {
  font: 900 11px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--volt);
}
.sp-cover__year {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em; color: rgba(255,255,255,0.55);
}
.sp-cover__logos {
  position: relative; z-index: 1;
  flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.sp-cover__logo-cell {
  flex: 0 1 220px; max-width: 280px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sp-cover__logo-cell img {
  width: clamp(120px, 14vw, 200px); height: clamp(120px, 14vw, 200px);
  object-fit: contain; background: #FFFFFF;
  border-radius: var(--radius-xs); padding: clamp(10px, 1.4vw, 18px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(214,242,58,0.16);
}
.sp-cover__role {
  font: 900 9px/1.3 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--volt); text-align: center;
}
.sp-cover__amp {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px); line-height: 1;
  color: rgba(255,255,255,0.4);
}
.sp-cover__foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.08);
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.news-card__media--sponsor { padding: 0; aspect-ratio: 16/9; align-items: stretch; }
.news-card__media--sponsor > .sp-cover { border-radius: 0; }
.news-card--lg .news-card__media--sponsor { aspect-ratio: 21/9; }
.ad__media--sponsor > .sp-cover { aspect-ratio: 21/9; }

@media (max-width: 640px) {
  .sp-cover__amp { display: none; }
  .sp-cover__logos { gap: 14px; }
}

/* Footer meta row */
.mr-graphic__foot {
  position: relative; z-index: 2;
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  padding: 16px 24px 18px;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mr-graphic__foot span { display: inline-flex; align-items: center; gap: 6px; }
.mr-graphic__motm { color: var(--volt) !important; }
.mr-graphic__motm::before {
  content: ''; width: 6px; height: 6px; border-radius: 9999px;
  background: var(--volt); box-shadow: 0 0 8px var(--volt);
}
.mr-graphic__cap { color: rgba(255,255,255,0.78) !important; }

/* Hero card upsizes everything */
.news-card--lg .news-card__media--report { aspect-ratio: 21/9; }
.news-card--lg .mr-graphic__team { font-size: clamp(24px, 3.5vw, 44px); }
.news-card--lg .mr-graphic__num  { font-size: clamp(72px, 11vw, 150px); }
.news-card--lg .mr-graphic__dash { font-size: clamp(54px, 7vw, 90px); }
.news-card--lg .mr-graphic__badge { width: clamp(80px, 10vw, 130px); height: clamp(80px, 10vw, 130px); }
.news-card__meta { font: 600 11px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; margin-top: auto; }

.news-secondary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
@media (max-width: 980px) { .news-secondary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-secondary { grid-template-columns: 1fr; } }

.news-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 720px) { .news-feed { grid-template-columns: 1fr; } }

/* JOIN — routes + form layout */
.join-v2 {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 880px) { .join-v2 { grid-template-columns: 1fr; } }

.join-v2__routes { display: flex; flex-direction: column; gap: 6px; }
.join-v2__route {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 14px 36px 14px 14px;
  text-align: left; cursor: pointer; font-family: inherit;
  transition: all var(--dur-fast);
}
.join-v2__route:hover { background: var(--surface-2); border-color: var(--hairline-volt); }
.join-v2__route.is-active { background: var(--surface-2); border-color: var(--volt); box-shadow: inset 4px 0 0 var(--volt); }
.join-v2__route-l { font: 900 13px/1.1 var(--font-sans); letter-spacing: 0.04em; color: var(--fg-1); text-transform: uppercase; }
.join-v2__route-s { font: 500 12px/1.4 var(--font-sans); color: var(--fg-3); }
.join-v2__route-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-4); }
.join-v2__route.is-active .join-v2__route-arrow { color: var(--volt); }
.join-v2__direct {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px dashed var(--hairline-strong); border-radius: var(--radius-xs);
  display: flex; flex-direction: column; gap: 6px;
}
.join-v2__direct a { color: var(--fg-1); text-decoration: none; font: 700 14px/1.3 var(--font-sans); }
.join-v2__direct a:hover { color: var(--volt); }

.join-v2__form {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs); padding: var(--sp-6);
}
.join-v2__form-head { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-4); }
.join-v2__form-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); line-height: 0.95; color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.01em; margin: 8px 0 6px; }
.join-v2__form-sub { color: var(--fg-3); font-size: var(--fs-sm); margin: 0; }
.join-v2__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
@media (max-width: 640px) { .join-v2__grid { grid-template-columns: 1fr; } }
.join-v2__field { display: flex; flex-direction: column; gap: 6px; }
.join-v2__field--full { grid-column: 1 / -1; }
.join-v2__field span { font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--fg-3); text-transform: uppercase; }
.join-v2__field span em { color: var(--volt); font-style: normal; }
.join-v2__field input, .join-v2__field textarea {
  background: var(--surface-2); border: 1px solid var(--hairline-strong); color: var(--fg-1);
  font: 500 15px/1.3 var(--font-sans); padding: 12px 14px; border-radius: var(--radius-md);
  width: 100%; box-sizing: border-box;
}
.join-v2__field input:focus, .join-v2__field textarea:focus {
  outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(214,242,58,0.18);
}
.join-v2__actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap;
}
.join-v2__thanks {
  padding: var(--sp-7) 0; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.join-v2__thanks h3 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); margin: 0; color: var(--fg-1); text-transform: uppercase; }
.join-v2__thanks p { color: var(--fg-2); margin: 0; }

/* HOME CHAMPIONS strip — under the hero */
.home-champ {
  background: linear-gradient(135deg, var(--volt) 0%, #B5D000 100%);
  color: var(--navy);
}
.home-champ__inner {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-5); align-items: center;
}
@media (max-width: 880px) { .home-champ__inner { grid-template-columns: 1fr; } }
.home-champ__title { font: 900 28px/0.95 var(--font-sans); margin: 4px 0 6px; text-transform: uppercase; letter-spacing: -0.01em; }
.home-champ__sub { color: rgba(10,20,38,0.8); margin: 0; max-width: 480px; }
.home-champ__nums { display: flex; gap: var(--sp-5); }
.home-champ__nums div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.home-champ__nums span { font-family: var(--font-stat); font-size: 36px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.home-champ__nums label { font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; color: rgba(10,20,38,0.65); }

/* PRESEASON HUB */
.preseason__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
}
@media (max-width: 980px) { .preseason__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .preseason__grid { grid-template-columns: 1fr; } }
.preseason__card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: transform var(--dur-fast);
  min-height: 160px;
}
.preseason__card:hover { transform: translateY(-3px); }
.preseason__card--volt { background: var(--volt); color: var(--navy); }
.preseason__card--ghost { background: var(--surface-1); border: 1px solid var(--hairline-volt); color: var(--fg-1); }
.preseason__title { font: 900 18px/1.1 var(--font-sans); margin: 6px 0 8px; text-transform: uppercase; letter-spacing: -0.005em; }
.preseason__sub { font-size: var(--fs-sm); margin: 0; opacity: 0.78; }
.preseason__arrow { color: inherit; flex-shrink: 0; }
.preseason__card--volt .preseason__sub { color: rgba(10,20,38,0.78); }

/* KIT REVEAL */
.kit-reveal__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center;
}
@media (max-width: 880px) { .kit-reveal__grid { grid-template-columns: 1fr; } }
.kit-reveal__media { position: relative; }
.kit-reveal__photo {
  aspect-ratio: 4/5; border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse at 30% 25%, rgba(214,242,58,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(214,242,58,0.08) 0%, transparent 55%),
    linear-gradient(160deg, #11202E 0%, #050B17 100%);
  border: 1px solid var(--hairline-volt);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.kit-reveal__photo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(214,242,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,242,58,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.kit-reveal__photo img {
  width: 62%; height: auto; object-fit: contain; opacity: 1;
  position: relative; z-index: 1;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(214,242,58,0.18));
}
.kit-reveal__chip {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--volt);
  background: rgba(7,29,41,0.6); border: 1px solid var(--hairline-volt); padding: 6px 10px; border-radius: var(--radius-pill); text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.kit-reveal__title { font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 72px); line-height: 0.95; color: var(--fg-1); margin: 8px 0 var(--sp-3); text-transform: uppercase; letter-spacing: -0.015em; }
.kit-reveal__copy p { color: var(--fg-2); font-size: var(--fs-body); line-height: 1.6; max-width: 480px; margin: 0 0 var(--sp-4); }
.kit-reveal__copy .kit-reveal__title em { font-style: normal; color: var(--volt); }

/* PAGE HERO — used by every sub-page (Teams, About, Sponsors, etc.) */
.page-hero {
  padding: var(--sp-9) 0 var(--sp-7);
  background:
    radial-gradient(ellipse at 80% 30%, rgba(214,242,58,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(20,56,73,0.6) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--volt); box-shadow: var(--glow-volt-sm);
}
.page-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); flex-wrap: wrap; }
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 144px); line-height: 0.88; letter-spacing: -0.02em;
  color: #fff; text-transform: uppercase; margin: 12px 0 0;
}
.page-hero__title em { font-style: normal; color: var(--volt); }
.page-hero__sub { color: var(--fg-2); font-size: var(--fs-lead); font-weight: 500; max-width: 640px; margin-top: var(--sp-5); }
.page-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; align-self: center; }

/* =========================================================================
   GENERIC PLACEHOLDERS
   ========================================================================= */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.02) 12px 13px),
    var(--surface-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-xs);
  display: grid; place-items: center;
  padding: var(--sp-5);
  aspect-ratio: 4/3;
  transition: border-color var(--dur-med);
}
.placeholder:hover { border-color: var(--volt); }
.placeholder--tall { aspect-ratio: 4/5; }
.placeholder--row  { aspect-ratio: auto; padding: var(--sp-6) var(--sp-5); }
.placeholder--big  { aspect-ratio: auto; padding: var(--sp-8) var(--sp-7); }
.placeholder__inner { text-align: center; display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.placeholder__hint { font: 500 13px/1.5 var(--font-sans); color: var(--fg-3); }
.placeholder__big-title { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); line-height: 0.92; color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.01em; margin: 8px 0 0; }
.placeholder__copy { color: var(--fg-2); font-size: var(--fs-lead); margin-top: 8px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* =========================================================================
   ABOUT PAGE
   ========================================================================= */
.about-mission { max-width: 980px; }
.about-mission__eyebrow { margin-bottom: 18px; }
.about-mission__quote {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 80px); line-height: 1.0;
  text-transform: uppercase; letter-spacing: -0.015em;
  color: var(--fg-1);
}
.about-mission__quote em { font-style: normal; color: var(--volt); display: inline-block; margin-top: 10px; }

/* Founding-story block — editorial layout */
.about-story-section {
  background:
    radial-gradient(ellipse at top right, rgba(214,242,58,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(214,242,58,0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  position: relative;
  overflow: hidden;
}
.about-story-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.about-story {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px);
  align-items: start; max-width: 1180px;
}
.about-story__masthead {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-top: 8px;
}
.about-story__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 96px); line-height: 0.92;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--fg-1); margin: 0;
}
.about-story__title em { font-style: normal; color: var(--volt); }
.about-story__rule {
  width: 64px; height: 3px; background: var(--volt); margin: 4px 0 8px;
  box-shadow: 0 0 14px rgba(214,242,58,0.4);
}
.about-story__dedication {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-left: 2px solid var(--volt);
  background: rgba(214,242,58,0.04);
}
.about-story__dedication-label {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--volt);
}
.about-story__dedication strong {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1; color: var(--fg-1);
  letter-spacing: 0.01em;
}
.about-story__dedication-meta {
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 4px;
}

.about-story__body {
  font-size: var(--fs-lead); line-height: 1.72; color: var(--fg-2); font-weight: 500;
  max-width: 640px;
}
.about-story__body p { margin: 0 0 var(--sp-4); }
.about-story__lede {
  font-size: clamp(20px, 1.65vw, 24px); line-height: 1.55;
  color: var(--fg-1); font-weight: 600;
}
.about-story__lede::first-letter {
  font-family: var(--font-display);
  float: left; font-size: clamp(64px, 6vw, 92px); line-height: 0.82;
  padding: 6px 14px 0 0; color: var(--volt);
  text-shadow: 0 0 24px rgba(214,242,58,0.32);
}
.about-story__lede strong { color: var(--volt); font-weight: 700; }
.about-story__pull {
  margin: var(--sp-5) 0; padding: 0 0 0 var(--sp-5);
  border-left: 3px solid var(--volt);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15;
  letter-spacing: -0.005em; color: var(--fg-1);
  font-style: normal; text-transform: none;
}
.about-story__sign {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 12px;
  font: 800 11px/1.4 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--volt);
}
.about-story__sign-line { color: var(--fg-4); }

@media (max-width: 880px) {
  .about-story { grid-template-columns: 1fr; gap: var(--sp-5); }
  .about-story__masthead { position: static; }
}

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
.value-card { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); padding: var(--sp-5); display: flex; flex-direction: column; gap: 14px; transition: all var(--dur-med); }
.value-card:hover { background: var(--surface-2); border-color: var(--hairline-volt); }
.value-card__num { font-family: var(--font-stat); font-size: 56px; color: var(--volt); line-height: 0.86; }
.value-card__title { font-family: var(--font-display); font-size: 28px; line-height: 0.92; text-transform: uppercase; letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.value-card__copy { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }

.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-6); padding: var(--sp-5) 0; border-bottom: 1px solid var(--hairline); position: relative; }
.timeline__item:last-child { border-bottom: 0; }
.timeline__item::before { content: ''; position: absolute; left: 140px; top: 32px; width: 8px; height: 8px; border-radius: 999px; background: var(--volt); box-shadow: var(--glow-volt-sm); transform: translateX(-12px); }
.timeline__item.is-future::before { background: var(--surface-3); box-shadow: none; }
.timeline__year { font-family: var(--font-stat); font-size: 48px; line-height: 0.9; color: var(--fg-1); }
.timeline__item.is-future .timeline__year { color: var(--fg-3); }
.timeline__title { font: 900 18px/1.1 var(--font-sans); text-transform: uppercase; letter-spacing: -0.005em; color: var(--fg-1); margin: 0 0 6px; }
.timeline__copy { color: var(--fg-2); font-size: var(--fs-body); margin: 0; max-width: 720px; }
@media (max-width: 720px) { .timeline__item { grid-template-columns: 1fr; gap: 8px; } .timeline__item::before { display: none; } }

.leadership-grid, .community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.community-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .leadership-grid { grid-template-columns: repeat(2, 1fr); } .community-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   TEAMS PAGE
   ========================================================================= */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--hairline); padding-top: var(--sp-5); }
.tabs__btn { background: transparent; border: 0; padding: 14px 18px; color: var(--fg-3); font: 700 12px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--dur-fast); }

/* Larger tab buttons for top-level page navigation (Schedule, Media) */
.tabs--lg { gap: 10px; padding-top: var(--sp-3); }
.tabs--lg .tabs__btn {
  padding: 13px 16px;
  font: 800 12px/1 var(--font-sans); letter-spacing: 0.1em;
}
.tabs--lg .tabs__btn span {
  font-family: var(--font-stat); font-size: 13px; color: var(--fg-3);
  letter-spacing: 0; margin-left: 8px;
  background: var(--surface-2); padding: 3px 8px; border-radius: var(--radius-pill);
}
.tabs--lg .tabs__btn.is-active span { background: rgba(214,242,58,0.16); color: var(--volt); }
.tabs--lg .tabs__btn.is-active { border-bottom-width: 3px; }
.tabs__btn:hover { color: var(--fg-1); }
.tabs__btn.is-active { color: var(--volt); border-bottom-color: var(--volt); }
.tabs__btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }
.tabs__btn span { font-family: var(--font-stat); font-size: 12px; color: var(--fg-3); letter-spacing: 0; }
.tabs__btn.is-active span { color: var(--volt); }

.squad-grid--full { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1180px) { .squad-grid--full { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .squad-grid--full { grid-template-columns: repeat(2, 1fr); } }

.coaches-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 1080px) { .coaches-grid { grid-template-columns: repeat(2, 1fr); } .coach-card--lead { grid-column: 1 / -1; } }
.coach-card { display: flex; flex-direction: column; gap: 10px; }
.coach-card__meta { padding-top: 4px; }
.coach-card--lead .placeholder { aspect-ratio: 16/10; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); padding: var(--sp-5); text-align: center; }
.stat-tile__v { font-family: var(--font-stat); font-size: 72px; line-height: 0.86; color: var(--fg-1); }
.stat-tile__l { font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-top: 8px; }
.stat-form-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; margin-top: var(--sp-5); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stat-form-row__cells { display: flex; gap: 6px; }
.stat-form-row__cell { width: 28px; height: 28px; border-radius: 4px; background: var(--surface-2); color: var(--fg-3); font: 800 11px/28px var(--font-sans); text-align: center; }
.stats-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 720px) { .stats-callouts { grid-template-columns: 1fr; } }

/* =========================================================================
   FIXTURES + RESULTS PAGES
   ========================================================================= */
.filters { display: flex; gap: 8px; flex-wrap: wrap; padding: var(--sp-5) 0 0; }
.filters .chip { cursor: pointer; padding: 10px 14px; }

.fixture-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.fixture-card--row { grid-template-columns: auto 1fr auto; }

.form-tracker { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5); background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); margin-top: var(--sp-5); flex-wrap: wrap; }
.form-tracker__cells { display: flex; gap: 6px; }
.form-tracker__cell { width: 32px; height: 32px; border-radius: 4px; background: var(--surface-2); color: var(--fg-3); font: 800 12px/32px var(--font-sans); text-align: center; }
.form-tracker__cell--w { background: var(--win); color: var(--navy); }
.form-tracker__cell--d { background: var(--draw); color: var(--navy); }
.form-tracker__cell--l { background: var(--loss); color: #fff; }

/* =========================================================================
   TABLE PAGE
   ========================================================================= */
.table-legend { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; flex-wrap: wrap; color: var(--fg-2); font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.table-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================================
   NEWS PAGE
   ========================================================================= */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); grid-auto-flow: dense; }
@media (max-width: 980px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .news-grid { grid-template-columns: 1fr; } }
.news-grid__feature { grid-column: span 2; grid-row: span 2; }
@media (max-width: 980px) { .news-grid__feature { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 580px) { .news-grid__feature { grid-column: span 1; } }

.article { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); overflow: hidden; cursor: pointer; transition: all var(--dur-med); display: flex; flex-direction: column; height: 100%; }
.article:hover { background: var(--surface-2); transform: translateY(-2px); }
.article__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.article__media--a { background: linear-gradient(135deg, #1A2842 0%, #050B17 100%); }
.article__media--b { background: radial-gradient(ellipse at 60% 40%, #2D5078 0%, #050B17 70%); }
.article__media--c { background: radial-gradient(ellipse at 30% 60%, rgba(214,242,58,0.3) 0%, #0D2A3B 50%, #050B17 100%); }
.article__media--d { background: linear-gradient(180deg, #16284A 0%, #050B17 80%); }
.article__media--e { background: radial-gradient(ellipse at 50% 80%, #1F3A5C 0%, #050B17 70%); }
.article__media::after { content: ''; position: absolute; inset: 0; background: var(--grad-protect-b); }
.article--big .article__media { aspect-ratio: 16/12; }
.article__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.article__lede { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.article__meta-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.article__meta-list li {
  font: 600 11px/1.4 var(--font-sans); letter-spacing: 0.04em; color: var(--fg-3);
  padding-left: 14px; position: relative;
}
.article__meta-list li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--volt);
}
.article__title { font: 900 18px/1.15 var(--font-sans); text-transform: uppercase; letter-spacing: -0.005em; color: var(--fg-1); margin: 0; }
.article__title--big { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 48px); line-height: 0.92; font-weight: 400; letter-spacing: -0.015em; }
.article__meta { display: flex; gap: 8px; }

/* =========================================================================
   GALLERY PAGE
   ========================================================================= */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; gap: 4px; grid-auto-flow: dense;
}
@media (max-width: 1080px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-tile {
  position: relative; overflow: hidden; cursor: pointer; transition: transform var(--dur-med);
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-4);
}
.gallery-tile:hover { transform: scale(1.02); z-index: 1; }
.gallery-tile--tall { grid-row: span 2; }
.gallery-tile--a { background: linear-gradient(135deg, #1A2842 0%, #050B17 100%); }
.gallery-tile--b { background: radial-gradient(ellipse at 60% 40%, #2D5078 0%, #050B17 70%); }
.gallery-tile--c { background: radial-gradient(ellipse at 30% 60%, rgba(214,242,58,0.3) 0%, #0D2A3B 50%, #050B17 100%); }
.gallery-tile--d { background: linear-gradient(180deg, #16284A 0%, #050B17 80%); }
.gallery-tile--e { background: radial-gradient(ellipse at 50% 80%, #1F3A5C 0%, #050B17 70%); }
.gallery-tile::after { content: ''; position: absolute; inset: 0; background: var(--grad-protect-b); pointer-events: none; }
.gallery-tile__chip {
  align-self: flex-start; font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,0.5); color: #fff; backdrop-filter: blur(4px); z-index: 1;
}
.gallery-tile__no { align-self: flex-end; font: 700 10px/1 var(--font-mono); color: var(--fg-3); letter-spacing: 0.08em; z-index: 1; }

/* =========================================================================
   SPONSORS PAGE
   ========================================================================= */
.sp-tier { margin-bottom: var(--sp-7); }
.sp-tier__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.sp-tier__perks { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 18px; flex-wrap: wrap; }
.sp-tier__perks li { font: 600 13px/1.4 var(--font-sans); color: var(--fg-2); position: relative; padding-left: 16px; }
.sp-tier__perks li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 2px; background: var(--volt); }

.sp-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; padding: var(--sp-7) 0; }
@media (max-width: 880px) { .sp-cta { grid-template-columns: 1fr; } }
.sp-cta__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.sp-cta__actions .btn { justify-content: center; }

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-6); }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-routes { display: flex; flex-direction: column; gap: 10px; }
.contact-route { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); padding: var(--sp-4); text-align: left; cursor: pointer; transition: all var(--dur-fast); display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 4px; }
.contact-route:hover { background: var(--surface-2); border-color: var(--hairline-volt); }
.contact-route.is-active { background: var(--surface-2); border-color: var(--volt); box-shadow: inset 4px 0 0 var(--volt); }
.contact-route__l { font: 800 14px/1.2 var(--font-sans); text-transform: uppercase; color: var(--fg-1); letter-spacing: -0.005em; }
.contact-route__s { font: 500 12px/1.4 var(--font-sans); color: var(--fg-3); grid-column: 1; }
.contact-route__arrow { grid-row: 1 / span 2; align-self: center; color: var(--fg-3); }
.contact-route.is-active .contact-route__arrow { color: var(--volt); }
.contact-direct { margin-top: var(--sp-5); padding: var(--sp-5); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-xs); display: flex; flex-direction: column; gap: 8px; }
.contact-direct a { color: var(--fg-1); text-decoration: none; font: 600 14px/1.3 var(--font-sans); }
.contact-direct a:hover { color: var(--volt); }

.contact-form { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-form__title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.015em; color: var(--fg-1); margin: 4px 0 8px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font: 700 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.contact-form input, .contact-form textarea { background: var(--surface-2); border: 1px solid var(--hairline-strong); color: var(--fg-1); font: 500 15px/1.2 var(--font-sans); padding: 12px 14px; border-radius: var(--radius-md); transition: all var(--dur-fast); }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(214,242,58,0.18); }
.contact-form__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: 8px; flex-wrap: wrap; }

/* =========================================================================
   JOIN PAGE
   ========================================================================= */
.join-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 720px) { .join-grid { grid-template-columns: 1fr; } }
.join-card { background: var(--surface-1); border: var(--border-1); border-radius: var(--radius-xs); padding: var(--sp-6); text-align: left; cursor: pointer; transition: all var(--dur-med); display: flex; flex-direction: column; gap: 14px; min-height: 220px; position: relative; overflow: hidden; }
.join-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--volt); transform: scaleY(0.2); transform-origin: center; transition: transform var(--dur-med) var(--ease-out); }
.join-card:hover { background: var(--surface-2); transform: translateY(-2px); }
.join-card:hover::before { transform: scaleY(1); box-shadow: var(--glow-volt-sm); }
.join-card__l { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); line-height: 0.92; color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.015em; }
.join-card__s { font-size: var(--fs-body); color: var(--fg-2); line-height: 1.5; }
.join-card__cta { margin-top: auto; font: 800 12px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt); }

.join-faq { max-width: 900px; }
.faq { border-bottom: 1px solid var(--hairline); padding: var(--sp-5) 0; }
.faq summary { font: 900 18px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: -0.005em; color: var(--fg-1); cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { color: var(--volt); font-size: 24px; font-weight: 400; transition: transform var(--dur-fast); }
.faq[open] summary > span { transform: rotate(45deg); }
.faq p { color: var(--fg-2); margin: 12px 0 0; max-width: 720px; }


/* ────────────────────────────────────────────────────────────────────────────
   INTERACTIVITY POLISH — appended block
   • Result card: left rail colored per result (W=green, D=draw, L=red)
   • Clean-sheet chips: GK-only checkboxes styled like the goalscorer chips
   • About: value cards + timeline items get hover state matching homepage feel
   • Hero: subtle button/title polish
   • JoinCTA: arrow & lift on buttons
   ──────────────────────────────────────────────────────────────────────────── */

/* RESULT CARD — result-colored rail */
.result-card { --rc-rail: var(--volt); padding-left: calc(var(--sp-5) + 3px); position: relative; overflow: hidden; }
.result-card--win  { --rc-rail: var(--win); }
.result-card--draw { --rc-rail: var(--draw); }
.result-card--loss { --rc-rail: var(--loss); }
.result-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rc-rail); opacity: 0; transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast), box-shadow var(--dur-med);
}
.result-card:hover::before { transform: scaleY(1); opacity: 1; box-shadow: 0 0 14px var(--rc-rail); }

/* CLEAN-SHEET CHIPS — used inside MatchEntry */
.me__cs-list { display: flex; flex-wrap: wrap; gap: 8px; }
.me__cs {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer; transition: all var(--dur-fast);
}
.me__cs:hover { border-color: var(--hairline-volt); background: var(--surface-2); }
.me__cs input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--fg-3);
  background: transparent; cursor: pointer; transition: all var(--dur-fast);
  position: relative; flex-shrink: 0;
}
.me__cs input:checked { background: var(--volt); border-color: var(--volt); }
.me__cs input:checked::after {
  content: ''; position: absolute; left: 4px; top: 0px;
  width: 5px; height: 10px; border: solid var(--navy); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.me__cs-num {
  font-family: var(--font-stat); font-size: 11px;
  background: var(--volt); color: var(--navy);
  padding: 3px 7px; border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.me__cs-name { font: 700 12px/1 var(--font-sans); color: var(--fg-1); letter-spacing: -0.005em; text-transform: uppercase; }
.me__cs-tag {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); padding-left: 8px; margin-left: 4px;
  border-left: 1px solid var(--hairline);
}
.me__cs--on { background: rgba(214,242,58,0.10); border-color: var(--hairline-volt); }
.me__cs--on .me__cs-tag { color: var(--volt); }
.me__hint { font: 500 11px/1.4 var(--font-sans); color: var(--fg-3); margin: 8px 0 0; }

/* ABOUT — value cards interactive feel */
.value-card { position: relative; overflow: hidden; transform: translateY(0); transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-med); }
.value-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0; transform: scaleY(0.3); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.45); }
.value-card:hover::before { opacity: 1; transform: scaleY(1); }
.value-card__num { transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast); }
.value-card:hover .value-card__num { transform: scale(1.08); }

/* ABOUT — timeline item hover */
.timeline__item { transition: padding-left var(--dur-fast), background var(--dur-fast); padding-left: 0; padding-right: var(--sp-3); border-radius: var(--radius-xs); }
.timeline__item:hover { background: rgba(214,242,58,0.04); padding-left: 14px; }
.timeline__item::before { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-fast); }
.timeline__item:hover::before { transform: translateX(-50%) scale(1.5); box-shadow: 0 0 18px rgba(214,242,58,0.55); }

/* ABOUT — championship banner pulse */
.about-champ { transition: transform var(--dur-med); }
.about-champ:hover { transform: translateY(-2px); }
.about-champ__badge img { transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med); }
.about-champ:hover .about-champ__badge img { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 36px rgba(214,242,58,0.55)); }

/* HERO — title shimmer on em, dot pulse stronger */
.hero__title em { position: relative; }
.hero:hover .hero__ctas .btn--volt:hover .btn__arrow { transform: translateX(3px); }
.btn__arrow { transition: transform var(--dur-fast); }

/* JOINCTA — buttons get a sliding arrow and stronger hover */
.join .btn--dark { position: relative; transition: all var(--dur-fast); }
.join .btn--dark::after {
  content: '\2192'; margin-left: 8px; display: inline-block;
  transition: transform var(--dur-fast);
}
.join .btn--dark:hover { transform: translateX(4px); background: #000; box-shadow: 0 6px 18px rgba(10,20,38,0.35); }
.join .btn--dark:hover::after { transform: translateX(4px); }
/* Strip the existing trailing arrows since we now generate them via ::after */
.join .btn--dark { white-space: nowrap; }


/* ────────────────────────────────────────────────────────────────────────────
   HERO — interactive polish
   • Animated volt gradient sweep behind "ECHOES"
   • Continuous breathing glow on the title's volt accents
   • Pulsing badge + champions ribbon
   • CTA buttons get a stronger hover lift
   • Decorative volt grid overlay layered behind the copy
   ──────────────────────────────────────────────────────────────────────────── */

/* Subtle volt gridlines layered over the stadium backdrop */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(214,242,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,242,58,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 75%);
}

/* Volt em — breathing glow + gradient sweep */
.hero__title em {
  background: linear-gradient(90deg, var(--volt) 0%, var(--volt-glow, #E2FB60) 50%, var(--volt) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroEmSweep 4s ease-in-out infinite, heroEmPulse 3s ease-in-out infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 32px rgba(214,242,58,0.4));
}
@keyframes heroEmSweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes heroEmPulse { 0%, 100% { filter: drop-shadow(0 0 28px rgba(214,242,58,0.35)); } 50% { filter: drop-shadow(0 0 48px rgba(214,242,58,0.65)); } }

/* Tail dot pulses with the em */
.hero__title .hero__tail {
  animation: heroEmPulse 3s ease-in-out infinite;
}

/* Eyebrow live-dot breathes harder + the eyebrow text itself glows on hover */
.hero__eyebrow { transition: color var(--dur-med); cursor: default; }
.hero__eyebrow:hover { color: #fff; }
.hero__dot {
  width: 9px; height: 9px; border-radius: 9999px; background: var(--volt);
  display: inline-block; margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 12px var(--volt);
  animation: heroDot 1.6s ease-in-out infinite;
}
@keyframes heroDot {
  0%, 100% { box-shadow: 0 0 10px var(--volt); transform: scale(1); }
  50%      { box-shadow: 0 0 22px var(--volt), 0 0 36px rgba(214,242,58,0.55); transform: scale(1.15); }
}

/* CTA — lift + arrow slide + outline glow */
.hero__ctas .btn--lg { transition: transform var(--dur-fast), box-shadow var(--dur-med), background var(--dur-fast); position: relative; }
.hero__ctas .btn--lg:hover { transform: translateY(-3px); }
.hero__ctas .btn--volt:hover { box-shadow: 0 18px 40px rgba(214,242,58,0.35); }
.hero__ctas .btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.hero__ctas .btn--volt:hover .btn__arrow { transform: translateX(4px); }

/* Badge floats subtly and glows brighter on section hover */
.hero__badge-img { animation: heroBadgeFloat 6s ease-in-out infinite; transition: filter var(--dur-med); }
@keyframes heroBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero:hover .hero__badge-img { filter: drop-shadow(0 0 80px rgba(214,242,58,0.5)) drop-shadow(0 30px 60px rgba(0,0,0,0.65)); }

/* Champions ribbon stripe pulse */
.hero__champ-strip {
  animation: heroChampPulse 2.4s ease-in-out infinite;
}
@keyframes heroChampPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(214,242,58,0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(214,242,58,0.45), 0 0 24px rgba(214,242,58,0.18); }
}

/* Countdown numbers gently flash when seconds tick (no JS, just CSS scaling on hover) */
.hero__count-grid > div { transition: transform var(--dur-fast); }
.hero__count:hover .hero__count-grid > div { transform: translateY(-2px); }

/* JoinCTA — leave the inherited rules from earlier, just ensure no doubled arrow */
.join .btn--dark::after { content: ''; margin-left: 0; }
.join .btn--dark { padding-right: 18px; }
.join .btn--dark::before {
  content: '→'; display: inline-block; margin-right: 8px; color: var(--volt);
  transition: transform var(--dur-fast);
}
.join .btn--dark:hover::before { transform: translateX(2px); }


/* ────────────────────────────────────────────────────────────────────────────
   ABOUT PAGE — final overrides + new sections
   • Resets default anchor styling on the champions banner (no purple underlines)
   • Adds: .about-mission__rule, .about-numbers / .about-num, .about-tl carousel,
           .about-close CTA
   • Rewrites .value-card to be smaller + click-to-expand
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. ANY <a> wrapper on the About page should never inherit user-agent purple */
.about-champ--link,
a.about-champ {
  color: inherit;
  text-decoration: none;
}
.about-champ--link *,
a.about-champ * { text-decoration: none !important; }
/* Same for any value-card / about-tl card that might become a link in future */
.value-card, .about-tl__card { color: inherit; text-decoration: none; }

/* 2. Mission — volt accent rule + tighter typography */
.about-mission { max-width: 1080px; position: relative; padding-left: 18px; }
.about-mission__rule {
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  background: var(--volt); box-shadow: 0 0 14px rgba(214,242,58,0.45);
  border-radius: 2px;
}
.about-mission__quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
  display: flex; flex-direction: column; gap: 4px;
  margin: 12px 0 0;
}
.about-mission__quote em {
  font-style: normal; color: var(--volt);
  margin-top: 14px;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.01em;
  display: inline-block; padding-top: 12px;
  border-top: 1px solid rgba(214,242,58,0.22);
  align-self: flex-start;
}

/* 3. By the numbers — 6 small animated stat cards */
.about-numbers {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-top: var(--sp-5);
}
@media (max-width: 1080px) { .about-numbers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .about-numbers { grid-template-columns: repeat(2, 1fr); } }

.about-num {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-med);
  cursor: default;
  animation: aNumEnter 0.6s var(--ease-out) backwards;
}
@keyframes aNumEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.about-num:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  background: var(--surface-2);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.about-num__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--volt); opacity: 0; transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.about-num:hover .about-num__rail { opacity: 1; transform: scaleY(1); }
.about-num__v {
  font-family: var(--font-stat);
  font-size: clamp(34px, 4vw, 46px); line-height: 0.86;
  color: var(--volt); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 0 18px rgba(214,242,58,0.28);
}
.about-num__l {
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--fg-1); text-transform: uppercase;
  margin-top: 8px;
}
.about-num__sub {
  font: 600 10px/1.3 var(--font-sans); color: var(--fg-3); letter-spacing: 0.04em;
  text-transform: uppercase; margin-top: 2px;
}

/* 4. VALUE CARDS — small interactive cards (override the older fat version) */
.values-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important; margin-top: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 980px) { .values-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .values-grid { grid-template-columns: 1fr !important; } }

.value-card {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 18px 18px 16px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  text-align: left; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-med);
}
.value-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  background: var(--surface-2);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
}
.value-card__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0; transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.value-card:hover .value-card__rail,
.value-card--open .value-card__rail { opacity: 1; transform: scaleY(1); }

.value-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.value-card__num {
  font-family: var(--font-stat) !important;
  font-size: 24px !important; line-height: 1 !important;
  color: var(--volt) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.value-card__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9999px;
  background: rgba(214,242,58,0.10); color: var(--volt);
  transition: background var(--dur-fast), transform var(--dur-med);
}
.value-card:hover .value-card__icon { background: var(--volt); color: var(--navy); transform: rotate(-4deg) scale(1.05); }

.value-card__title {
  font-family: var(--font-display) !important;
  font-size: 18px !important; line-height: 1 !important;
  letter-spacing: -0.005em; text-transform: uppercase;
  color: var(--fg-1); margin: 0;
}
.value-card__copy {
  color: var(--fg-2) !important; font-size: 13px !important; line-height: 1.45 !important; margin: 0;
}
.value-card__detail {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out),
              opacity var(--dur-fast),
              padding-top var(--dur-med),
              margin-top var(--dur-med);
  padding-top: 0; margin-top: 0;
}
.value-card__detail p {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-3);
  padding-top: 10px; border-top: 1px solid var(--hairline);
}
.value-card--open .value-card__detail {
  max-height: 200px; opacity: 1; margin-top: 4px;
}
.value-card__more {
  margin-top: auto; padding-top: 6px;
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em; color: var(--volt);
  text-transform: uppercase; align-self: flex-start;
}

/* 5. JOURNEY — horizontal carousel of compact cards */
.about-tl {
  position: relative;
  padding: var(--sp-5) 40px 0;
}
.about-tl__viewport { overflow: hidden; }
.about-tl__track {
  display: flex; gap: 12px;
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0.24, 1.04);
  will-change: transform;
}
.about-tl__card {
  flex: 0 0 calc((100% - 24px) / 3);   /* 3 visible w/ 2 × 12px gaps */
  min-width: 0;
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-med);
}
.about-tl__card:hover {
  transform: translateY(-4px);
  border-left-color: var(--volt);
  background: var(--surface-2);
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}
.about-tl__card.is-champ {
  border-left-color: var(--volt);
  background: linear-gradient(160deg, rgba(214,242,58,0.10), transparent 60%), var(--surface-1);
}
.about-tl__card.is-future {
  border-left-color: var(--fg-4);
  opacity: 0.85;
}
.about-tl__year {
  font: 900 11px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.about-tl__tag {
  display: inline-flex; align-self: flex-start;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: rgba(214,242,58,0.10); border: 1px solid var(--hairline-volt);
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.18em; color: var(--volt); text-transform: uppercase;
}
.about-tl__card.is-future .about-tl__tag {
  background: rgba(255,255,255,0.04); border-color: var(--hairline); color: var(--fg-3);
}
.about-tl__title {
  font-family: var(--font-display);
  font-size: 18px; line-height: 1; margin: 0;
  letter-spacing: -0.005em; text-transform: uppercase; color: var(--fg-1);
}
.about-tl__copy {
  font: 500 13px/1.5 var(--font-sans); color: var(--fg-2); margin: 0;
  flex: 1;
}
.about-tl__index {
  position: absolute; right: 14px; bottom: 8px;
  font-family: var(--font-stat); font-size: 28px; line-height: 1;
  color: var(--volt); opacity: 0.12;
  letter-spacing: -0.02em; pointer-events: none;
}
.about-tl__card:hover .about-tl__index { opacity: 0.32; }

.about-tl__nav {
  position: absolute; top: calc(50% + 12px); transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 9999px;
  display: grid; place-items: center;
  background: var(--surface-1); border: 1px solid var(--hairline-volt);
  color: var(--volt); font: 900 22px/1 var(--font-sans);
  cursor: pointer; transition: all var(--dur-fast);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.about-tl__nav:hover {
  background: var(--volt); color: var(--navy);
  transform: translateY(-50%) scale(1.06);
}
.about-tl__nav--prev { left: 0; }
.about-tl__nav--next { right: 0; }

.about-tl__dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: var(--sp-4);
}
.about-tl__dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--surface-3); border: none; padding: 0; cursor: pointer;
  transition: all var(--dur-fast);
}
.about-tl__dot:hover { background: var(--fg-3); }
.about-tl__dot.is-on {
  background: var(--volt); width: 22px;
  box-shadow: 0 0 10px rgba(214,242,58,0.5);
}

@media (max-width: 1080px) {
  .about-tl__card { flex-basis: calc((100% - 12px) / 2); }
  .about-tl__nav { display: none; }
}
@media (max-width: 720px) {
  .about-tl__card { flex-basis: 100%; }
  .about-tl { padding-left: 0; padding-right: 0; }
}

/* 6. CLOSING CTA */
.about-close { padding-bottom: var(--sp-8); }
.about-close__inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(ellipse at top right, rgba(214,242,58,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(214,242,58,0.06) 0%, transparent 50%),
    linear-gradient(160deg, #0E1A26 0%, #050B17 100%);
  border-radius: var(--radius-xs);
  border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.about-close__inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(214,242,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,242,58,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.about-close__copy { position: relative; z-index: 1; }
.about-close__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px); line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--fg-1); margin: 8px 0 12px;
}
.about-close__sub {
  font: 500 var(--fs-lead) / 1.5 var(--font-sans);
  color: var(--fg-2); margin: 0;
  max-width: 520px;
}
.about-close__cta {
  position: relative; z-index: 1;
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-self: end;
}
@media (max-width: 880px) {
  .about-close__inner { grid-template-columns: 1fr; }
  .about-close__cta { justify-self: start; }
}

/* Champions banner — make link feel clickable */
.about-champ--link {
  display: grid; cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-med);
}
.about-champ--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.5);
}
.about-champ__cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Reset any inherited link underlines inside the about-mission quote (defensive) */
.about-mission__quote, .about-mission__quote * { text-decoration: none !important; }

/* Hide the old timeline component if it ever renders alongside the new carousel */
.about-journey-section .timeline { display: none; }


/* ────────────────────────────────────────────────────────────────────────────
   TEAMS PAGE — compact-card grid, redesigned team stats, comp filter
   ──────────────────────────────────────────────────────────────────────────── */

/* Full squad grid — same compact card style as the homepage carousel */
.squad-grid--full {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 980px) { .squad-grid--full { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 720px) { .squad-grid--full { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .squad-grid--full { grid-template-columns: 1fr !important; } }
.squad-grid--full .player-card {
  text-align: left;
  cursor: pointer;
  position: relative;
}

/* Team stats — headline tiles + grouped sub-sections */
.ts-headline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: var(--sp-5) 0;
}
@media (max-width: 880px) { .ts-headline { grid-template-columns: 1fr; } }
.ts-headline__tile {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-med);
}
.ts-headline__tile:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
}
.ts-headline__tile--accent {
  background: linear-gradient(160deg, rgba(214,242,58,0.10) 0%, var(--surface-1) 60%);
  border-color: var(--hairline-volt);
}
.ts-headline__v {
  font-family: var(--font-stat);
  font-size: clamp(40px, 4.5vw, 56px); line-height: 0.85;
  color: var(--volt); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 0 24px rgba(214,242,58,0.3);
}
.ts-headline__v--sm { font-size: 22px !important; text-shadow: none; margin-top: 4px; }
.ts-headline__l {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--fg-2); text-transform: uppercase;
  margin-top: 8px;
}
.ts-headline__eye {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.ts-headline__name {
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  letter-spacing: -0.005em; text-transform: uppercase; color: var(--fg-1);
  margin-top: 4px;
}

/* Grouped stat sections */
.ts-section { margin-top: var(--sp-5); }
.ts-section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
}

/* Coloured stat tiles */
.ts-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 880px) { .ts-tiles { grid-template-columns: repeat(2, 1fr); } }
.ts-tile {
  --ts-accent: var(--volt);
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-med);
}
.ts-tile--volt  { --ts-accent: var(--volt); }
.ts-tile--cyan  { --ts-accent: #22D3EE; }
.ts-tile--amber { --ts-accent: #F2C744; }
.ts-tile--red   { --ts-accent: #FB7185; }
.ts-tile--muted { --ts-accent: var(--fg-4); }
.ts-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--ts-accent) 60%, transparent);
  box-shadow: 0 14px 30px rgba(0,0,0,0.5);
}
.ts-tile__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ts-accent); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.ts-tile:hover .ts-tile__rail { opacity: 1; transform: scaleY(1); }
.ts-tile__v {
  font-family: var(--font-stat);
  font-size: clamp(36px, 4vw, 48px); line-height: 0.86;
  color: var(--ts-accent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  text-shadow: 0 0 18px color-mix(in oklab, var(--ts-accent) 30%, transparent);
}
.ts-tile__l {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-2); margin-top: 8px;
}

/* PLAYER PROFILE — competition filter row */
.pp-comp-filter {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 12px 16px; margin: var(--sp-3) 0;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
}
.pp-comp-filter__lbl { color: var(--volt) !important; flex-shrink: 0; }

/* PENALTY CONVERSION CARD */
.pp-pen-stats {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--sp-5); align-items: center;
}
@media (max-width: 720px) { .pp-pen-stats { grid-template-columns: 1fr; } }
.pp-pen-stats__main {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px; border-radius: var(--radius-xs);
  background: linear-gradient(160deg, rgba(214,242,58,0.10), transparent 60%);
  border: 1px solid var(--hairline-volt);
}
.pp-pen-stats__pct {
  font-family: var(--font-stat); font-size: 56px; line-height: 0.86;
  color: var(--volt); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(214,242,58,0.4);
}
.pp-pen-stats__lbl {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--fg-2); text-transform: uppercase;
}
.pp-pen-stats__breakdown { display: flex; flex-direction: column; gap: 12px; }
.pp-pen-stats__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
}
.pp-pen-stats__row--total {
  grid-template-columns: 1fr auto;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.pp-pen-stats__bar {
  position: relative; height: 8px; border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.pp-pen-stats__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 9999px;
  transition: width 0.6s var(--ease-out);
}
.pp-pen-stats__bar-fill--scored { background: var(--volt); box-shadow: 0 0 12px rgba(214,242,58,0.4); }
.pp-pen-stats__bar-fill--missed { background: #FB7185; box-shadow: 0 0 12px rgba(251,113,133,0.35); }
.pp-pen-stats__v {
  font-family: var(--font-stat); font-size: 22px; line-height: 1;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
  min-width: 30px; text-align: right;
}
.pp-pen-stats__l {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase;
  min-width: 80px;
}

/* Leaderboard table — extra columns: G/A volt-highlighted */
.lb2__td--big.is-on { color: var(--volt); }
.lb2-groups {
  grid-template-columns: 2fr 0.8fr 1.3fr 1fr 1fr 0.6fr !important;
}
@media (max-width: 880px) {
  .lb2-groups { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────────────────────────────────────
   LEADERBOARD POLISH — drop the misaligned group band, lean on column tooltips
   ──────────────────────────────────────────────────────────────────────────── */
.lb2-groups { display: none !important; }

/* Volt-tint the GLS header and column body to anchor the eye on goals. */
.lb2__th--goals .lb2__th-l { color: var(--volt) !important; }
/* G/A column always volt-emphasised so combined involvements pop. */
.lb2 thead th:nth-child(10) .lb2__th-l { color: var(--volt) !important; }
.lb2 tbody td:nth-child(10) { color: var(--volt) !important; font-weight: 700; }


/* ────────────────────────────────────────────────────────────────────────────
   SPONSORS — partner card visual fix
   Old layout was 140px / 1fr / auto which squashed the role label so phrases
   like "WARM-UP & TRAINING TOP SPONSOR" wrapped a word per line.
   New: dedicated padding, balanced text wrap, breathable spacing.
   ──────────────────────────────────────────────────────────────────────────── */
.partner-card,
.partner-card__main {
  grid-template-columns: 120px minmax(0, 1fr) auto !important;
  gap: var(--sp-4) !important;
}
.partner-card__logo-wrap {
  width: 120px !important; height: 100px !important;
  padding: 12px !important;
}
.partner-card__meta {
  padding: var(--sp-4) 12px var(--sp-4) 0 !important;
  min-width: 0;
}
.partner-card__name {
  font-size: 17px !important;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
}
.partner-card__role {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  text-wrap: balance;
  word-break: normal;
  hyphens: auto;
  max-width: 100%;
}
.partner-card__arrow { padding: 0 var(--sp-4) !important; }

@media (max-width: 540px) {
  .partner-card,
  .partner-card__main {
    grid-template-columns: 80px minmax(0, 1fr) auto !important;
  }
  .partner-card__logo-wrap { width: 80px !important; height: 80px !important; padding: 8px !important; }
  .partner-card__name { font-size: 15px !important; }
  .partner-card__role { font-size: 10px !important; }
}


/* ────────────────────────────────────────────────────────────────────────────
   ABOUT — Club History / On the Field record cards
   Sits above the founding-story (off-field) block. Cards aggregate from
   derivedSquad() so they grow into all-time leaders across future seasons.
   ──────────────────────────────────────────────────────────────────────────── */
.about-records-section { background: var(--surface-2); }
.about-records {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--sp-5);
}
@media (max-width: 980px) { .about-records { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .about-records { grid-template-columns: 1fr; } }
.about-record {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-med);
  animation: aRecEnter 0.55s var(--ease-out) backwards;
}
@keyframes aRecEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.about-record:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  background: var(--surface-2);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.about-record__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.about-record:hover .about-record__rail { opacity: 1; transform: scaleY(1); }
.about-record__eye {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.about-record__k {
  font-family: var(--font-stat);
  font-size: clamp(32px, 3.4vw, 44px); line-height: 0.86;
  color: var(--volt);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  text-shadow: 0 0 18px rgba(214,242,58,0.3);
  margin-top: 6px;
}
.about-record__v {
  font-family: var(--font-display);
  font-size: 18px; line-height: 1.05;
  color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em;
  margin-top: 4px;
  text-wrap: balance;
}
.about-record__sub {
  font: 700 10px/1.3 var(--font-sans); letter-spacing: 0.16em;
  color: var(--fg-3); text-transform: uppercase;
  margin-top: 4px;
}
.about-records__note {
  margin: var(--sp-5) 0 0;
  display: flex; justify-content: center;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.24em;
  color: var(--fg-3); text-transform: uppercase;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}


/* ────────────────────────────────────────────────────────────────────────────
   SPONSORS — partner card layout fix v2
   The earlier override set the OUTER .partner-card to display:grid with 3 cols
   but it only contains ONE child (.partner-card__main button). That child got
   placed in col 1 (120px) and squashed the role text inside.
   Fix: outer card is a normal block; the inner button is the 3-col grid.
   ──────────────────────────────────────────────────────────────────────────── */
.partner-card {
  display: block !important;
  grid-template-columns: none !important;
}
.partner-card__main {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) auto !important;
  gap: var(--sp-4) !important;
  align-items: center !important;
  width: 100% !important;
}


/* ────────────────────────────────────────────────────────────────────────────
   SPONSORS PAGE — dynamic stats, benefits, enquiry CTA
   Plus: global anchor reset so no link ever inherits browser purple.
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. KILL ALL PURPLE / DEFAULT LINK COLOR site-wide ─────────────────────── */
a, a:link, a:visited, a:active { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 2px; }

/* 2. STATS STRIP — anchor numbers under the hero ────────────────────────── */
.sp-stats-section {
  background:
    radial-gradient(ellipse at top, rgba(214,242,58,0.06) 0%, transparent 60%),
    var(--surface-2);
  position: relative;
}
.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .sp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sp-stats { grid-template-columns: 1fr; } }

.sp-stat {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              box-shadow var(--dur-med);
  animation: spStatEnter 0.6s var(--ease-out) backwards;
}
.sp-stat:nth-child(1) { animation-delay: 0.00s; }
.sp-stat:nth-child(2) { animation-delay: 0.08s; }
.sp-stat:nth-child(3) { animation-delay: 0.16s; }
.sp-stat:nth-child(4) { animation-delay: 0.24s; }
@keyframes spStatEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp-stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.sp-stat::after {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 160px; height: 160px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(214,242,58,0.10) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-med); pointer-events: none;
}
.sp-stat:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  box-shadow: 0 16px 32px rgba(0,0,0,0.45);
}
.sp-stat:hover::before { opacity: 1; transform: scaleY(1); }
.sp-stat:hover::after { opacity: 1; }
.sp-stat__value {
  font-family: var(--font-stat);
  font-size: clamp(36px, 4.5vw, 56px); line-height: 0.85;
  color: var(--volt);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  text-shadow: 0 0 22px rgba(214,242,58,0.32);
}
.sp-stat:nth-child(2) .sp-stat__value,
.sp-stat:nth-child(3) .sp-stat__value {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.005em;
}
.sp-stat__label {
  font: 800 10px/1.3 var(--font-sans); letter-spacing: 0.2em;
  color: var(--fg-2); text-transform: uppercase;
  margin-top: 6px;
}

/* 3. BENEFITS GRID ───────────────────────────────────────────────────────── */
.sp-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: var(--sp-5);
}
@media (max-width: 980px) { .sp-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sp-benefits { grid-template-columns: 1fr; } }

.sp-benefit {
  position: relative; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: default;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-med);
}
.sp-benefit::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.sp-benefit:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-volt);
  background: var(--surface-2);
  box-shadow: 0 18px 36px rgba(0,0,0,0.5);
}
.sp-benefit:hover::before { opacity: 1; transform: scaleY(1); }
.sp-benefit__num {
  font-family: var(--font-stat);
  font-size: 36px; line-height: 0.86;
  color: var(--volt);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  text-shadow: 0 0 18px rgba(214,242,58,0.32);
  align-self: flex-start;
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
  width: 100%;
}
.sp-benefit__title {
  font-family: var(--font-display);
  font-size: 18px; line-height: 1; margin: 0;
  letter-spacing: -0.005em; text-transform: uppercase; color: var(--fg-1);
}
.sp-benefit__copy {
  color: var(--fg-2); font-size: 13px; line-height: 1.5; margin: 0;
}

/* 4. ENQUIRY CTA ─────────────────────────────────────────────────────────── */
.sp-cta-section { padding-bottom: var(--sp-8); }
.sp-cta--rich {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-5);
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(ellipse at top right, rgba(214,242,58,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(214,242,58,0.06) 0%, transparent 50%),
    linear-gradient(160deg, #0E1A26 0%, #050B17 100%);
  border-radius: var(--radius-xs);
  border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.sp-cta--rich::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(214,242,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,242,58,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
@media (max-width: 880px) { .sp-cta--rich { grid-template-columns: 1fr; } }

.sp-cta__copy { position: relative; z-index: 1; }
.sp-cta__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px); line-height: 0.94;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--fg-1); margin: 12px 0 16px;
}
.sp-cta__title em { font-style: normal; color: var(--volt); }
.sp-cta__lede {
  font: 500 var(--fs-lead) / 1.6 var(--font-sans);
  color: var(--fg-2); margin: 0 0 var(--sp-4); max-width: 560px;
}
.sp-cta__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sp-cta__list li {
  display: flex; align-items: center; gap: 12px;
  font: 700 13px/1.4 var(--font-sans); color: var(--fg-1);
  letter-spacing: 0.01em;
}
.sp-cta__list li span {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 9999px;
  background: var(--volt); color: var(--navy);
  font-weight: 900; font-size: 13px; flex-shrink: 0;
}

.sp-cta__panel {
  position: relative; z-index: 1;
  background: var(--surface-1); border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  align-self: stretch;
  justify-content: space-between;
}
.sp-cta__panel-eye {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.24em;
  color: var(--volt); text-transform: uppercase;
}
.sp-cta__email {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1;
  color: var(--fg-1) !important;
  letter-spacing: -0.005em; text-transform: lowercase;
  word-break: break-all;
  border-bottom: 1px solid rgba(214,242,58,0.4);
  padding-bottom: 12px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.sp-cta__email:hover { color: var(--volt) !important; border-color: var(--volt); }
.sp-cta__actions { display: flex; flex-direction: column; gap: 8px; }
.sp-cta__actions .btn { justify-content: center; }
.sp-cta__arrow { display: inline-block; margin-left: 6px; transition: transform var(--dur-fast); }
.sp-cta__actions .btn:hover .sp-cta__arrow { transform: translateX(4px); }
.sp-cta__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--hairline);
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.2em;
  color: var(--fg-3); text-transform: uppercase;
}

/* 5. PARTNER GRID — small visual rhythm boost ──────────────────────────── */
.partner-card { animation: spStatEnter 0.55s var(--ease-out) backwards; }
.partner-card:nth-child(odd)  { animation-delay: 0.04s; }
.partner-card:nth-child(even) { animation-delay: 0.12s; }

/* 6. KILL ANY STRAY UNDERLINES on sponsor copy text ──────────────────── */
.partner-detail__body a:not(.btn) {
  color: var(--volt) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--hairline-volt);
  padding-bottom: 1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.partner-detail__body a:not(.btn):hover { color: #fff !important; border-color: var(--volt); }


/* ────────────────────────────────────────────────────────────────────────────
   CHAMPIONS PAGE — fix missing styles
   The JSX defined .champ-next__count / .champ-next__card / sub-spans without
   matching CSS rules — every label and value rendered inline and concatenated
   ("SEASON KICKOFF108DAYS TO GO", "TRIALSOPEN", "DIVISIONTBC", etc).
   Plus polish: visible per-tile accent rails, breathing borders, hover lift.
   ──────────────────────────────────────────────────────────────────────────── */

/* THE NUMBERS — stat tile accents + hover */
.champ-stat { position: relative; }
.champ-stat__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.champ-stat:hover .champ-stat__rail { opacity: 1; transform: scaleY(1); }
.champ-stat--win  .champ-stat__rail { background: var(--win); }
.champ-stat--draw .champ-stat__rail { background: var(--draw); }
.champ-stat--loss .champ-stat__rail { background: var(--loss); }
.champ-stat--volt .champ-stat__rail { background: var(--volt); }
.champ-stat--hero { background: linear-gradient(160deg, rgba(214,242,58,0.10), transparent 60%); }
.champ-stat--hero .champ-stat__v { color: var(--volt); font-size: 56px; text-shadow: 0 0 22px rgba(214,242,58,0.4); }
.champ-stat--perfect .champ-stat__v { color: var(--volt) !important; }
.champ-stat--win  .champ-stat__v { color: var(--win); }
.champ-stat--draw .champ-stat__v { color: var(--draw); }
.champ-stat--loss .champ-stat__v { color: var(--loss); }

/* UP NEXT — section background */
.champ-next-section {
  background:
    radial-gradient(ellipse at top right, rgba(214,242,58,0.05) 0%, transparent 55%),
    var(--surface-2);
}

/* UP NEXT — overall container */
.champ-next {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--sp-5);
  align-items: stretch;
  padding: clamp(20px, 3vw, 40px);
  background:
    linear-gradient(160deg, #0E1A26 0%, #050B17 100%);
  border-radius: var(--radius-xs);
  border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.champ-next::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(214,242,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,242,58,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
@media (max-width: 880px) { .champ-next { grid-template-columns: 1fr; } }

/* COUNTDOWN PANEL */
.champ-next__count {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline-volt);
  border-radius: var(--radius-xs);
  text-align: left;
}
.champ-next__count-eye {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.champ-next__count-n {
  font-family: var(--font-stat);
  font-size: clamp(56px, 7vw, 88px); line-height: 0.86;
  color: var(--volt); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 28px rgba(214,242,58,0.4);
  margin-top: 8px;
}
.champ-next__count-l {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--fg-1); text-transform: uppercase;
  margin-top: 4px;
}
.champ-next__count-date {
  font: 600 12px/1.4 var(--font-sans);
  color: var(--fg-3); letter-spacing: 0.04em;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* MINI STATUS CARDS */
.champ-next__cards {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-self: start;
}
@media (max-width: 720px) { .champ-next__cards { grid-template-columns: 1fr; } }

.champ-next__card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 16px;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              box-shadow var(--dur-med);
}
.champ-next__card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  box-shadow: 0 16px 32px rgba(0,0,0,0.5);
}
.champ-next__card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.champ-next__card:hover::before { opacity: 1; transform: scaleY(1); }
.champ-next__card-eye {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--fg-3); text-transform: uppercase;
}
.champ-next__card strong {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1;
  color: var(--volt); text-transform: uppercase; letter-spacing: -0.005em;
}
.champ-next__card-sub {
  font: 500 12px/1.5 var(--font-sans);
  color: var(--fg-2);
  padding-top: 8px; border-top: 1px solid var(--hairline);
}

/* CTA row spans both columns */
.champ-next__cta {
  position: relative; z-index: 1;
  grid-column: 1 / -1;
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}

/* RECENT RESULTS — score & sides layout */
.champ-recent__match {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center;
  gap: var(--sp-3) !important;
}
.champ-recent__side {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.champ-recent__side:nth-child(3) { justify-content: flex-end; }
.champ-recent__side span:not(.fixture-card__badge) {
  font: 800 13px/1.15 var(--font-sans); color: var(--fg-1);
  text-transform: uppercase; letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.champ-recent__us { color: var(--volt) !important; }
.champ-recent__score {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 24px; line-height: 1;
  color: var(--fg-3); font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.champ-recent__score .is-volt { color: var(--volt); }
.champ-recent__dash { color: var(--fg-4); }
.champ-recent__wo {
  font-family: var(--font-display); font-size: 18px;
  color: var(--volt); padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(214,242,58,0.12); border: 1px solid var(--hairline-volt);
}
.champ-recent__margin {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.12em;
  color: var(--volt); padding: 4px 8px; border-radius: var(--radius-pill);
  background: rgba(214,242,58,0.10); border: 1px solid var(--hairline-volt);
  white-space: nowrap;
}

/* CHAMP HERO — improve CTA contrast (the "View every result" button was navy-on-navy) */
.champ-hero__ctas .btn--dark {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
}
.champ-hero__ctas .btn--dark:hover { background: #000; }
.champ-hero__ctas .btn--ghost { background: rgba(10,20,38,0.06); }
.champ-hero__ctas .btn--ghost:hover { background: rgba(10,20,38,0.12); }


/* ────────────────────────────────────────────────────────────────────────────
   VOLT BUTTONS — always dark navy text for readability
   ──────────────────────────────────────────────────────────────────────────── */
.btn--volt,
.btn--volt:link,
.btn--volt:visited,
.btn--volt:hover,
.btn--volt:active,
.btn--volt * { color: var(--navy) !important; }
.btn--volt svg { stroke: var(--navy) !important; fill: none; }
.btn--volt .btn__arrow,
.btn--volt .sp-cta__arrow { color: var(--navy) !important; }

/* Catch any rare anchor that's volt-bg but isn't using .btn class */
[style*="background: var(--volt)"],
[style*="background-color: var(--volt)"] {
  color: var(--navy) !important;
}


/* ─── SPONSOR PAGE — the magazine block (homepage Sponsors) admin variants ── */
/* Wrap so we can show edit/remove controls underneath each card in admin mode. */
.sp-home__card-wrap { display: flex; flex-direction: column; gap: 8px; }
.sp-home__admin {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 0 6px;
}
/* Make sure the home-style card works as a <button> (was an <a> on home). */
button.sp-home__card {
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; appearance: none;
}

/* Ensure every volt CTA button on the page is the same pill shape +
   navy text (matches the BACK THE PROJECT button screenshot). */
.btn--volt {
  border-radius: 10px;
  padding: 14px 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.btn--volt.btn--sm {
  padding: 10px 18px;
  font-size: var(--fs-sm);
}
.btn--volt.btn--lg {
  padding: 18px 28px;
  font-size: var(--fs-body);
}


/* ────────────────────────────────────────────────────────────────────────────
   SPONSORS — Join the family card (same magazine pattern as sp-home__card)
   ──────────────────────────────────────────────────────────────────────────── */
.sp-join {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: stretch;
  margin-top: var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-4) + 4px);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              box-shadow var(--dur-med);
}
.sp-join::after {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 240px; height: 240px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(214,242,58,0.10) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-med);
  pointer-events: none;
}
.sp-join:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-volt);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.sp-join:hover::after { opacity: 1; }
.sp-join__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--volt);
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out);
}
.sp-join:hover .sp-join__rail { transform: scaleY(1); }

/* Icon plate — same shape as sp-home__logo-plate but with a volt envelope inside */
.sp-join__icon-plate {
  width: 130px; height: 130px;
  background: #FFFFFF; border-radius: var(--radius-xs);
  display: grid; place-items: center; padding: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  color: var(--volt);
  align-self: start;
}
.sp-join__icon-plate svg { color: var(--navy); }

.sp-join__meta {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.sp-join__role {
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.sp-join__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1;
  letter-spacing: -0.005em; text-transform: lowercase;
  color: var(--fg-1) !important;
  margin: 4px 0 4px;
  word-break: break-word;
  display: inline-block; align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(214,242,58,0.32);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.sp-join__name:hover {
  color: var(--volt) !important;
  border-color: var(--volt);
}
.sp-join__sub {
  font: 500 14px/1.55 var(--font-sans);
  color: var(--fg-2); margin: 4px 0 6px;
  max-width: 620px;
}
.sp-join__actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}

.sp-join__arrow {
  display: grid; place-items: center; padding: 0 8px;
  color: var(--fg-3);
  transition: color var(--dur-fast), transform var(--dur-fast);
  align-self: center;
}
.sp-join:hover .sp-join__arrow { color: var(--volt); transform: translateX(6px); }

@media (max-width: 640px) {
  .sp-join {
    grid-template-columns: 90px minmax(0, 1fr);
    padding: var(--sp-4);
  }
  .sp-join__icon-plate { width: 90px; height: 90px; padding: 10px; }
  .sp-join__arrow { display: none; }
}


/* ─── JOIN THE FAMILY — fix checklist + badge image inside icon plate ────── */
.sp-join__icon-plate img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

/* Force the list items to fill the meta column and wrap normally. The previous
   rule lost text width because a li-level overflow/whitespace context was
   inherited. Explicit reset here. */


/* ─── CHAMPIONS HERO — ribbon now sits BELOW the badge ─────────────────── */
.champ-hero__crest {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.champ-hero__crest img {
  max-width: 100%; height: auto;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,0.45));
}
.champ-hero__ribbon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 22px;
  background: rgba(7,29,41,0.55);
  border: 1px solid rgba(214,242,58,0.35);
  border-radius: var(--radius-xs);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.champ-hero__ribbon strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1;
  color: var(--volt);
  letter-spacing: 0.02em; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(214,242,58,0.45);
}
.champ-hero__ribbon span {
  font: 800 10px/1.2 var(--font-sans); letter-spacing: 0.24em;
  color: var(--fg-1); text-transform: uppercase;
}

/* ─── SPONSORS — Custom proposal checklist visibility fix ─────────────── */
/* Earlier rules set color: var(--fg-1) on light backgrounds. Force readable
   color regardless of where this list is rendered. */
.sp-cta__list li {
  color: var(--fg-1) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.sp-cta__list li span {
  background: var(--volt) !important;
  color: var(--navy) !important;
  width: 22px !important; height: 22px !important;
  font-weight: 900 !important; font-size: 13px !important;
  flex: 0 0 22px !important;
}


/* ─── CHAMPIONS HERO BADGE — restack ribbon BELOW the badge ──────────── */
.champ-hero__badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  position: relative !important;
  inset: auto !important;
}
.champ-hero__badge img {
  position: static !important;
  max-width: 200px !important; width: 100% !important; height: auto !important;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,0.5)) drop-shadow(0 0 60px rgba(214,242,58,0.18)) !important;
}
.champ-hero__ribbon {
  position: static !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 6px !important;
  padding: 14px 24px !important;
  background: rgba(7,29,41,0.6) !important;
  border: 1px solid rgba(214,242,58,0.4) !important;
  border-radius: var(--radius-xs) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.champ-hero__ribbon strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1;
  color: var(--volt); letter-spacing: 0.02em; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(214,242,58,0.5);
}
.champ-hero__ribbon span {
  font: 800 11px/1.2 var(--font-sans); letter-spacing: 0.22em;
  color: var(--fg-1); text-transform: uppercase;
}


/* ─── HERO CTA BUTTONS — match BACK THE PROJECT style ─────────────────── */
/* Both hero buttons same shape (rounded pill), volt and ghost variants. */
.hero__ctas .btn--lg {
  border-radius: 10px;
  padding: 16px 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: var(--fs-body);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__ctas .btn--volt {
  background: var(--volt);
  border: 1px solid var(--volt);
  color: var(--navy) !important;
  box-shadow: 0 0 0 1px rgba(214,242,58,0.4), 0 8px 22px rgba(214,242,58,0.22);
}
.hero__ctas .btn--volt:hover {
  background: var(--volt);
  box-shadow: 0 0 0 1px var(--volt), 0 14px 34px rgba(214,242,58,0.4);
  transform: translateY(-2px);
}
.hero__ctas .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--fg-1);
}
.hero__ctas .btn--ghost:hover {
  border-color: var(--volt);
  color: var(--volt);
  background: rgba(214,242,58,0.06);
}


/* ─── ABOUT CHAMPIONS BANNER — restack the badge + ribbon vertically ─── */
.about-champ {
  grid-template-columns: minmax(220px, 260px) 1fr !important;
  gap: var(--sp-7) !important;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5) !important;
  align-items: center;
}
.about-champ__badge {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 4px 0;
}
.about-champ__badge img {
  position: static !important;
  width: clamp(140px, 16vw, 180px) !important;
  height: auto !important;
  margin: 0 auto;
}
.about-champ__ribbon {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 18px !important;
  background: rgba(7,29,41,0.6);
  border: 1px solid rgba(214,242,58,0.4);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.about-champ__ribbon strong {
  font-family: var(--font-display);
  font-size: 18px !important; line-height: 1;
  color: var(--volt);
  letter-spacing: 0.02em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(214,242,58,0.4);
}
.about-champ__ribbon span {
  font: 800 9px/1.2 var(--font-sans) !important;
  letter-spacing: 0.22em;
  color: var(--fg-1); text-transform: uppercase;
}

@media (max-width: 720px) {
  .about-champ { grid-template-columns: 1fr !important; text-align: center; }
  .about-champ__badge img { width: 140px !important; }
}


/* ─── ABOUT CHAMPS — badge: no tilt on hover, straight scale only ─────── */
.about-champ:hover .about-champ__badge img {
  transform: scale(1.06) !important;   /* no rotate */
}


/* ─── SPONSORS — Custom proposal checklist VISIBILITY FIX v2 ───────────
   The list is .sp-join__list (used inside the Join the Family card).
   Earlier fix targeted .sp-cta__list — wrong class. Force visibility here. */


/* ─── SPONSORS JOIN — WIDEN the meta column + force readable list ──────
   The card was 130px badge + meta + auto arrow. The auto arrow was eating
   space and the meta column was cramped, wrapping items onto multiple lines.
   This pass: drop the arrow column, expand the meta column to take the
   remaining width, and force the actions row to flow naturally. */
.sp-join {
  grid-template-columns: 130px minmax(0, 1fr) !important;
  gap: var(--sp-5) !important;
  padding: var(--sp-5) !important;
}
.sp-join__arrow { display: none !important; }
.sp-join__meta {
  display: flex !important; flex-direction: column !important;
  gap: 14px !important; min-width: 0 !important;
  max-width: none !important;
}
.sp-join__sub {
  max-width: none !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Make the checklist a clean inline-flex row per item, no wrapping. */

/* Mobile: stack into single column gracefully. */
@media (max-width: 640px) {
  .sp-join { grid-template-columns: 1fr !important; }
  .sp-join__icon-plate { width: 100% !important; max-width: 180px; margin: 0 auto; }
}


/* ─── COACHES TAB — featured manager card + TBA grid ─────────────────── */
.coaches-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-5) !important;
  grid-template-columns: none !important;
}

/* FEATURED MANAGER CARD — magazine layout */
.coach-feature {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              box-shadow var(--dur-med);
}
.coach-feature::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--volt); opacity: 0;
  transform: scaleY(0.4); transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast);
}
.coach-feature:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-volt);
  box-shadow: 0 18px 36px rgba(0,0,0,0.5);
}
.coach-feature:hover::before { opacity: 1; transform: scaleY(1); }

.coach-feature__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #1A2842 0%, #050B17 100%);
  overflow: hidden;
}
.coach-feature__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: brightness(0.95) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out);
}
.coach-feature:hover .coach-feature__photo img { transform: scale(1.04); }
.coach-feature__role {
  position: absolute; left: 14px; bottom: 14px;
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--volt); color: var(--navy);
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
}

.coach-feature__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  min-width: 0;
}
.coach-feature__head { display: flex; flex-direction: column; gap: 4px; }
.coach-feature__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px); line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--fg-1); margin: 6px 0 0;
}
.coach-feature__short {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.18em;
  color: var(--fg-3); text-transform: uppercase;
  margin: 4px 0 0;
}

.coach-feature__bio {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}
.coach-feature__bio p {
  font: 500 14px/1.6 var(--font-sans);
  color: var(--fg-2);
  margin: 0;
}
.coach-feature__bio p:first-of-type {
  font-size: 16px;
  color: var(--fg-1);
  font-weight: 600;
}

.coach-feature__cv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.coach-feature__cv > section { display: flex; flex-direction: column; gap: 8px; }
.coach-feature__cv ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.coach-feature__cv li {
  font: 600 13px/1.3 var(--font-sans);
  color: var(--fg-1);
  padding-left: 14px; position: relative;
}
.coach-feature__cv li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--volt);
}
.coach-feature__supports { grid-column: 1 / -1; }
.coach-feature__supports strong {
  font-family: var(--font-display);
  font-size: 18px; color: var(--fg-1);
  text-transform: uppercase; letter-spacing: -0.005em;
  display: inline-block; margin-top: 4px;
}

@media (max-width: 880px) {
  .coach-feature { grid-template-columns: 1fr; }
  .coach-feature__body { padding: 0 var(--sp-5) var(--sp-5); }
  .coach-feature__cv { grid-template-columns: 1fr; }
}

/* TBA GRID — small placeholder cards for backroom roles */
.coach-tba-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 880px) { .coach-tba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .coach-tba-grid { grid-template-columns: 1fr; } }

/* ─── PLAYER CARD — bio slot under the stats ──────────────────────────── */
.player-card__bio {
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  margin-top: 10px;
}
.player-card__bio p {
  font: 500 11px/1.5 var(--font-sans);
  color: var(--fg-2); margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.player-card__bio--placeholder {
  font-style: italic;
  color: var(--fg-3) !important;
  opacity: 0.55;
}


/* ─── SQUAD SPOTLIGHT COVER GRAPHIC ──────────────────────────────────────
   Used as the cover image for any `kind: 'player'` news article.
   Pulls the player's stored photo (via window.getPlayerPhoto) when one is
   set in Teams tab → player card, otherwise falls back to the avatar SVG.
   ──────────────────────────────────────────────────────────────────────── */
.news-card__media--spotlight,
.ad__media--spotlight { padding: 0; align-items: stretch; }
.ad__media--spotlight { aspect-ratio: 16/9; }

.ss-cover {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(214,242,58,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(214,242,58,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #0E1A26 0%, #050B17 100%);
  display: grid;
  grid-template-rows: 1fr auto;
}
.ss-cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ss-cover__photo {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  overflow: hidden;
}
.ss-cover__photo img {
  height: 100%; width: auto; max-width: 80%;
  object-fit: cover; object-position: top center;
  filter: brightness(0.96) contrast(1.04)
          drop-shadow(0 14px 32px rgba(0,0,0,0.55));
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.ss-cover__photo--avatar {
  height: auto !important; width: 220px !important;
  margin: auto; opacity: 0.4; mask-image: none !important;
  -webkit-mask-image: none !important;
}
.ss-cover__num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-stat);
  font-size: clamp(48px, 7vw, 96px); line-height: 0.85;
  color: var(--volt);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  text-shadow: 0 0 32px rgba(214,242,58,0.5);
  z-index: 2;
}

.ss-cover__chrome {
  position: relative; z-index: 2;
  align-self: start; justify-self: start;
  padding: 18px 0 0 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.ss-cover__eye {
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.24em;
  color: var(--volt); text-transform: uppercase;
}
.ss-cover__role {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: rgba(255,255,255,0.6); text-transform: uppercase;
}

.ss-cover__bottom {
  position: relative; z-index: 2;
  padding: 0 22px 20px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 70%;
}
.ss-cover__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px); line-height: 0.92;
  color: #FFFFFF; letter-spacing: -0.005em; text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.ss-cover__tag {
  display: inline-flex; align-self: flex-start;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--volt); color: var(--navy);
  font: 900 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(214,242,58,0.3);
}
.news-card--lg .ss-cover__name { font-size: clamp(40px, 5vw, 64px); }
.news-card--lg .ss-cover__num  { font-size: clamp(72px, 9vw, 128px); }


/* ─── PLAYER PROFILE — Season Story / Player Bio toggle ─────────────────
   Replaces the old single "BIO · LIVE" eyebrow with a two-tab switch.
   ──────────────────────────────────────────────────────────────────────── */
.pp-narrative__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.pp-narrative__tabs {
  display: inline-flex; gap: 4px;
  padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
}
.pp-narrative__tab {
  appearance: none; cursor: pointer;
  padding: 6px 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent;
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); transition: all var(--dur-fast);
}
.pp-narrative__tab:hover { color: var(--fg-1); }
.pp-narrative__tab.is-on {
  background: var(--volt); color: var(--navy);
  box-shadow: 0 4px 14px rgba(214,242,58,0.25);
}
.pp-narrative__meta {
  font: 800 9px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.pp-narrative__empty {
  color: var(--fg-3) !important; font-style: italic;
  font-weight: 500 !important;
}


/* ─── FOOTER — discreet admin toggle ───────────────────────────────────── */
.footer__admin-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-3) !important;
  transition: color var(--dur-fast);
  cursor: pointer;
}
.footer__admin-link:hover { color: var(--volt) !important; }
.footer__admin-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--fg-4);
  color: transparent;
  font-size: 0; line-height: 0;
  flex-shrink: 0;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.footer__admin-link--on { color: var(--volt) !important; }
.footer__admin-link--on .footer__admin-dot {
  background: var(--volt);
  box-shadow: 0 0 6px rgba(214,242,58,0.6);
}


/* ─── HOME HERO — Next Match team names BIGGER + interactive ─────────────
   Bumps club names from 18px to ~28px, badges 28→44px, adds a hover
   "ready" glow that makes the matchup feel alive without overdoing it.
   ──────────────────────────────────────────────────────────────────────── */
.hero__count-fix strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1 !important;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  text-shadow: 0 0 0 transparent;
  transition: text-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.hero__count-team:hover strong {
  transform: translateY(-1px);
}
.hero__count-team--away strong { color: var(--volt); }
.hero__count-team--away:hover strong {
  text-shadow: 0 0 18px rgba(214,242,58,0.5);
}
.hero__count-fix em {
  font-style: normal;
  font: 900 12px/1 var(--font-sans) !important;
  letter-spacing: 0.28em;
  color: var(--fg-3);
  padding: 6px 10px; border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.02);
}
.hero__count-team .fixture-card__badge {
  width: 44px !important; height: 44px !important;
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med);
}
.hero__count-team .fixture-card__badge--shield {
  height: 48px !important; width: auto !important;
}
.hero__count-team:hover .fixture-card__badge {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)) drop-shadow(0 0 12px rgba(214,242,58,0.18));
}
.hero__count-fix {
  gap: clamp(14px, 2vw, 22px) !important;
  padding: 12px 0 !important;
}

/* ─── CHAMPIONS HERO — fix invisible CTA + make stats interactive ───── */
.champ-hero__ctas .btn--dark {
  background: var(--navy);
  color: #FFFFFF !important;
  border: 1px solid var(--navy);
  position: relative; overflow: hidden;
}
.champ-hero__ctas .btn--dark::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(214,242,58,0.25) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-med);
}
.champ-hero__ctas .btn--dark:hover::after { opacity: 1; }
.champ-hero__ctas .btn--dark:hover {
  background: #000; transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
}

/* Make the inline stats in the chrome strip pop on hover */
.champ-hero__chrome-stat { transition: color var(--dur-fast), transform var(--dur-fast); }
.champ-hero__chrome-stat:hover { color: var(--navy) !important; transform: translateY(-1px); }

/* The "17 WINS / +77 GD / 51 PTS" hero stat cluster — interactive lift */
.champ-hero__numbers { display: flex; gap: clamp(20px, 3vw, 36px); align-items: baseline; }
.champ-hero__numbers > div {
  display: flex; flex-direction: column; align-items: center;
  cursor: default;
  transition: transform var(--dur-fast) var(--ease-out);
}
.champ-hero__numbers > div:hover { transform: translateY(-2px); }


/* Champions UP NEXT — TBC variant (smaller than the days-counter) */
.champ-next__count-n--tbc {
  font-size: clamp(48px, 6vw, 72px) !important;
}


/* ─── FIXTURE ADMIN — admin-only "+ ADD FIXTURE" launcher + form ───────── */
.fx-admin {
  margin: var(--sp-4) 0 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.fx-admin__add { align-self: flex-start; }

.fx-add {
  background: var(--surface-1);
  border: 1px solid var(--hairline-volt);
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-xs);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.fx-add__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.fx-add__close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 9999px;
  display: grid; place-items: center;
  color: var(--fg-3); font-size: 18px; line-height: 1;
  transition: all var(--dur-fast);
}
.fx-add__close:hover { color: var(--volt); background: var(--surface-3); }

.fx-add__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3) var(--sp-4);
}
.fx-add__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-add__field--wide { grid-column: span 2; }
@media (max-width: 880px) {
  .fx-add__grid { grid-template-columns: repeat(2, 1fr); }
  .fx-add__field--wide { grid-column: span 2; }
}
@media (max-width: 540px) {
  .fx-add__grid { grid-template-columns: 1fr; }
  .fx-add__field--wide { grid-column: span 1; }
}

.fx-add__field > span {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.22em;
  color: var(--volt); text-transform: uppercase;
}
.fx-add__field input,
.fx-add__field select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  color: var(--fg-1); font: 600 14px/1.2 var(--font-sans);
  padding: 10px 12px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.fx-add__field input:focus,
.fx-add__field select:focus {
  outline: none;
  border-color: var(--volt);
  background: var(--surface-2);
}
.fx-add__field input::placeholder { color: var(--fg-3); }
.fx-add__field select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%23D6F23A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.fx-add__hint {
  font: 700 11px/1.2 var(--font-sans); color: var(--fg-3);
  font-style: normal; letter-spacing: 0.02em;
}

.fx-add__seg {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.fx-add__seg-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: transparent;
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em;
  color: var(--fg-3); text-transform: uppercase;
  transition: all var(--dur-fast);
}
.fx-add__seg-btn:hover { color: var(--fg-1); }
.fx-add__seg-btn.is-on {
  background: var(--volt); color: var(--navy);
}

.fx-add__actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}
.fx-add__note {
  font: 600 11px/1.4 var(--font-sans); color: var(--fg-3);
  margin-left: auto;
}

/* Admin-added fixture review list */
.fx-admin__list {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
}
.fx-admin__list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-admin__row {
  display: grid;
  grid-template-columns: 120px 1fr 1.4fr auto;
  gap: 12px; align-items: center;
  padding: 8px 12px;
  background: var(--surface-1);
  border-radius: var(--radius-xs);
  border: 1px solid var(--hairline);
  font: 600 12px/1.3 var(--font-sans);
}
@media (max-width: 720px) { .fx-admin__row { grid-template-columns: 1fr; gap: 4px; } }
.fx-admin__row-date {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em;
  color: var(--volt); text-transform: uppercase;
}
.fx-admin__row-fx { color: var(--fg-1); }
.fx-admin__row-fx em { font-style: normal; color: var(--fg-3); }
.fx-admin__row-comp {
  font: 700 11px/1.2 var(--font-sans); letter-spacing: 0.04em;
  color: var(--fg-2);
}
.fx-admin__row-rm {
  appearance: none; cursor: pointer;
  border: 1px solid var(--hairline);
  background: transparent; color: var(--fg-3);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  transition: all var(--dur-fast);
}
.fx-admin__row-rm:hover { color: #FB7185; border-color: #FB7185; }


/* ────────────────────────────────────────────────────────────────────────────
   HOME CHAMPIONS STRIP — full rebuild
   Was: flat volt gradient, navy text, invisible "btn--dark" CTA (text styled
   navy on a navy bg by my earlier blanket volt-text rule).
   Now: layered composition with a watermark badge, animated entry numbers,
   a clear navy-pill CTA with WHITE text + volt halo, and subtle texture.
   ──────────────────────────────────────────────────────────────────────────── */
.home-champ {
  background:
    radial-gradient(ellipse at top right, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(7,29,41,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--volt) 0%, #B5D000 100%) !important;
  color: var(--navy);
  position: relative;
  overflow: hidden;
}
/* Subtle pinstripe pattern across the volt fill for texture */
.home-champ::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(7,29,41,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,29,41,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Watermark badge in the bottom-right corner — large, dim, decorative */
.home-champ__watermark {
  position: absolute; right: -60px; bottom: -80px;
  width: 360px; height: 360px;
  pointer-events: none; z-index: 0;
  opacity: 0.12;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.home-champ__watermark img { width: 100%; height: 100%; object-fit: contain; }
.home-champ:hover .home-champ__watermark {
  opacity: 0.18; transform: rotate(-6deg) scale(1.04);
}
@media (max-width: 880px) { .home-champ__watermark { right: -100px; width: 280px; height: 280px; } }

.home-champ__inner {
  position: relative; z-index: 1;
  display: grid !important;
  grid-template-columns: 1.4fr auto auto !important;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6)) !important;
  align-items: center !important;
}
@media (max-width: 1080px) {
  .home-champ__inner { grid-template-columns: 1fr auto !important; }
}
@media (max-width: 720px) {
  .home-champ__inner { grid-template-columns: 1fr !important; text-align: center; }
  .home-champ__nums { justify-content: center; }
}

.home-champ__eye {
  color: var(--navy) !important;
  letter-spacing: 0.22em;
  font-weight: 900;
  display: inline-flex; align-items: center; gap: 8px;
}
.home-champ__eye::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--navy);
  box-shadow: 0 0 0 3px rgba(7,29,41,0.12);
}
.home-champ__title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 0.95 !important;
  margin: 10px 0 8px !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.home-champ__sub {
  font: 600 14px/1.55 var(--font-sans) !important;
  color: rgba(7,29,41,0.78) !important;
  margin: 0 !important;
  max-width: 560px !important;
}

/* Numbers cluster — chips that lift on hover, animated count-up entry */
.home-champ__nums {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch;
}
.home-champ__num {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 2px !important;
  padding: 12px 18px;
  border-radius: var(--radius-xs);
  background: rgba(7,29,41,0.06);
  border: 1px solid rgba(7,29,41,0.12);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast),
              box-shadow var(--dur-med);
  cursor: default;
  min-width: 76px;
}
.home-champ__num:hover {
  transform: translateY(-3px);
  background: rgba(7,29,41,0.10);
  box-shadow: 0 10px 24px rgba(7,29,41,0.18);
}
.home-champ__num span {
  font-family: var(--font-stat) !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 0.9 !important;
  color: var(--navy) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.home-champ__num label {
  font: 800 9px/1 var(--font-sans) !important;
  letter-spacing: 0.22em !important;
  color: rgba(7,29,41,0.7) !important;
  text-transform: uppercase;
  margin-top: 6px;
}

/* CTA — navy pill with WHITE text + volt halo on hover */
.home-champ__cta {
  display: inline-flex !important;
  align-items: center; gap: 10px;
  background: var(--navy) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--navy) !important;
  padding: 14px 22px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  font-size: var(--fs-body) !important;
  text-transform: none;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med),
              background var(--dur-fast),
              color var(--dur-fast);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.18),
    0 8px 22px rgba(7,29,41,0.32);
}
.home-champ__cta:hover {
  transform: translateY(-2px);
  background: #FFFFFF !important;
  color: var(--navy) !important;
  border-color: #FFFFFF !important;
  box-shadow:
    0 6px 0 rgba(0,0,0,0.20),
    0 14px 30px rgba(7,29,41,0.36),
    0 0 0 4px rgba(255,255,255,0.45);
}
.home-champ__cta-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.home-champ__cta:hover .home-champ__cta-arrow {
  transform: translateX(4px);
}

/* Stop the global volt-text override from re-painting CTA text */
.home-champ__cta * { color: inherit !important; }


/* ─── HOME CHAMPIONS CTA — align with the site's standard button style ──
   Earlier rebuild used a custom 3D pill with drop-shadow; that doesn't
   match the rest of the site. Use the standard btn--dark + btn--lg with
   only the colour rules locked so the global volt-text override doesn't
   re-paint the text.
   ──────────────────────────────────────────────────────────────────────── */
.home-champ__cta.btn.btn--dark {
  background: var(--navy) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--navy) !important;
  /* Inherit the standard btn--lg shape: pill, padding, font-weight */
  border-radius: 10px !important;
  padding: 16px 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  font-size: var(--fs-body) !important;
  /* Subtle elevation so it reads as the primary CTA — not the heavy 3D shadow */
  box-shadow: 0 4px 14px rgba(7,29,41,0.25) !important;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast),
              color var(--dur-fast),
              box-shadow var(--dur-med);
}
.home-champ__cta.btn.btn--dark:hover {
  transform: translateY(-2px);
  background: #000 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(7,29,41,0.40) !important;
}
.home-champ__cta.btn.btn--dark * { color: #FFFFFF !important; }
.home-champ__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.home-champ__cta.btn.btn--dark:hover .home-champ__cta-arrow {
  transform: translateX(3px);
}


/* ─── HERO NEXT MATCH — fix overflow at full-screen widths ──────────────
   On big screens the right-hand card is narrow for the title bar
   "SUE'S ANGELS · VS · HILLSIDE ELITE BLUES" — long names like Hillside
   were running off the edge. Switch to a balanced 1fr / auto / 1fr grid,
   force two-line wrap on names, and reduce the font size at the top end
   so the away name fits.
   ──────────────────────────────────────────────────────────────────────── */
.hero__count-fix {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px) !important;
  width: 100%;
}
.hero__count-team {
  min-width: 0; /* lets grid shrink the column */
  display: flex; align-items: center; gap: 8px;
}
.hero__count-team--home { justify-content: flex-end; }
.hero__count-team--away { justify-content: flex-start; }
.hero__count-team strong {
  font-size: clamp(13px, 1.15vw, 18px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important;
  /* Allow up to 2 lines, then ellipsis. Names like HILLSIDE ELITE BLUES
     break cleanly across two lines without overflow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  hyphens: none;
}
.hero__count-team .fixture-card__badge {
  width: clamp(20px, 1.6vw, 28px) !important;
  height: clamp(20px, 1.6vw, 28px) !important;
  flex-shrink: 0;
}
.hero__count-team .fixture-card__badge--shield {
  width: auto !important;
  height: clamp(22px, 1.8vw, 30px) !important;
}
.hero__count-fix em {
  font-style: normal !important;
  font-size: clamp(9px, 0.7vw, 11px) !important;
  letter-spacing: 0.18em !important;
  padding: 4px 8px !important;
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────────────────────────────────
   SPONSORS — JOIN THE FAMILY checklist (single source of truth)
   The list is .sp-join__list. Replaces 5 prior overlapping rule sets that
   were creating wrapping + visibility glitches.
   ──────────────────────────────────────────────────────────────────────── */
.sp-join__list {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.sp-join__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  color: #FFFFFF;
  font: 700 15px / 1.4 var(--font-sans);
  letter-spacing: 0.01em;
  white-space: normal;
  word-break: normal;
  overflow: visible;
}
.sp-join__list li > span:first-child {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--volt);
  color: var(--navy);
  font: 900 13px / 1 var(--font-sans);
  letter-spacing: 0;
}


/* ─── PLAYER CARD — admin-mode photo upload overlay ───────────────────────
   Discreet "Edit photo" pill that sits at the bottom of the photo box on
   every player card in the Teams grid. Only visible in admin mode (and only
   ever rendered if window.useAdmin returns truthy — visitors don't even get
   the markup).
   ──────────────────────────────────────────────────────────────────────── */
.player-card__admin-photo {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 4;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.player-card:hover .player-card__admin-photo,
.player-card:focus-within .player-card__admin-photo {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}

/* The PhotoUploader pill renders its own button + remove button. Force
   them to fit cleanly inside the small card area. */
.player-card__admin-photo .pup {
  display: flex; gap: 4px;
  flex-direction: row;
  width: 100%;
}
.player-card__admin-photo .pup__btn {
  flex: 1; min-width: 0;
  font-size: 10px !important;
  padding: 6px 8px !important;
  letter-spacing: 0.08em !important;
  background: rgba(0,0,0,0.7) !important;
  color: var(--volt) !important;
  border: 1px solid var(--hairline-volt) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-card__admin-photo .pup__btn:hover {
  background: var(--volt) !important;
  color: var(--navy) !important;
  border-color: var(--volt) !important;
}
.player-card__admin-photo .pup__btn--danger {
  flex: 0 0 auto;
  color: #FF6B7D !important;
  border-color: #FF6B7D !important;
}
.player-card__admin-photo .pup__btn--danger:hover {
  background: #FF6B7D !important;
  color: #FFFFFF !important;
}


/* ─── TEAM STATS — competition split toggle (All / League / Cups) ─────── */
.ts-split {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.ts-split__lbl { color: var(--volt) !important; }
.ts-split__seg {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.ts-split__btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: transparent;
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); transition: all var(--dur-fast);
}
.ts-split__btn:hover { color: var(--fg-1); }
.ts-split__btn.is-on { background: var(--volt); color: var(--navy); }
.ts-split__note {
  font: 600 11px/1.3 var(--font-sans); color: var(--fg-3); letter-spacing: 0.02em;
}


/* ─── MATCH ENTRY — quick-fill squad ticker ───────────────────────────── */
.me__quick {
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-xs); margin-bottom: 10px; overflow: hidden;
}
.me__quick > summary {
  cursor: pointer; padding: 10px 14px; list-style: none;
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--volt);
}
.me__quick > summary::-webkit-details-marker { display: none; }
.me__quick[open] > summary { border-bottom: 1px solid var(--hairline); }
.me__quick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px; padding: 12px 14px;
}
.me__quick-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-pill);
  background: var(--surface-1); border: 1px solid var(--hairline);
  cursor: pointer; transition: all var(--dur-fast); min-width: 0;
}
.me__quick-chip:hover { border-color: var(--hairline-volt); }
.me__quick-chip.is-on { background: rgba(214,242,58,0.10); border-color: var(--hairline-volt); }
.me__quick-chip input { accent-color: var(--volt); flex-shrink: 0; }
.me__quick-num {
  font-family: var(--font-stat); font-size: 12px; color: var(--fg-3);
  min-width: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.me__quick-chip.is-on .me__quick-num { color: var(--volt); }
.me__quick-name {
  font: 700 12px/1 var(--font-sans); color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* Joint-apps subline — bold the tied player names in volt */
.stat-tile .t-meta strong { color: var(--volt); font-weight: 800; }


/* Footer columns — headings + links in caps */
.footer__col .t-eyebrow,
.footer__col ul li a { text-transform: uppercase; }


/* ─── SQUAD POSITION DIVIDERS (Teams → First Team) ───────────────────── */
.squad-pos-group { margin-bottom: var(--sp-6); }
.squad-pos-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--sp-5) 0 var(--sp-4);
}
.squad-pos-divider__short {
  font-family: var(--font-stat); font-size: 13px; line-height: 1;
  color: var(--navy); background: var(--volt);
  padding: 6px 9px; border-radius: 7px; letter-spacing: 0.04em;
  font-weight: 800;
}
.squad-pos-divider__label {
  font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 24px); line-height: 1;
  color: var(--fg-1); text-transform: uppercase; letter-spacing: -0.005em;
}
.squad-pos-divider__count {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.1em;
  color: var(--fg-3); background: var(--surface-3);
  padding: 4px 8px; border-radius: 9999px;
}
.squad-pos-divider__rule {
  flex: 1; height: 1px; background: var(--hairline);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TUNING (≤ 600px) — sizing only, no content/logic changes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Champions "THE NUMBERS" grid — stop the big stat values overflowing */
  .champ-stat__v { font-size: clamp(30px, 12vw, 46px) !important; word-break: break-word; }
  .champ-stat--hero .champ-stat__v { font-size: clamp(38px, 15vw, 60px) !important; }
  .champ-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .champ-stat { padding: 16px 14px !important; }

  /* Champions UP NEXT countdown number */
  .champ-next__count-n { font-size: clamp(40px, 16vw, 64px) !important; }
  .champ-next__count-n--tbc { font-size: clamp(34px, 13vw, 52px) !important; }

  /* Squad position dividers a touch tighter */
  .squad-pos-divider__label { font-size: 18px; }

  /* Team-stats tiles to 2-up so numbers have room */
  .ts-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .ts-headline { grid-template-columns: 1fr !important; }

  /* KPI groups stack cleanly */
  .pp-kpi { grid-template-columns: 1fr !important; }

  /* Section headers: let the "more" link wrap under the title */
  .section__head--compact { flex-wrap: wrap; gap: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — mobile-first guarantees across all breakpoints
   Breakpoints: mobile 320–767 · tablet 768–1023 · laptop 1024–1439 · desktop 1440+
   Rules here are defensive: prevent overflow, enforce min sizes, fluid media.
   They sit at the END of the stylesheet so they win on conflicts.
   ═══════════════════════════════════════════════════════════════════════ */

/* Global: never allow horizontal scroll; media always scales within its box. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
.container { width: 100%; }

/* ── MOBILE 320–767 ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --gutter: 18px; }               /* 16–24px internal padding */

  /* Base text floor: 16px minimum for body copy. */
  body { font-size: 16px; }

  /* Buttons: minimum 48px tall, comfortable tap targets. */
  .btn, .btn--sm, .btn--lg,
  button.btn, a.btn {
    min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Force single-column on the common multi-column grids. */
  .footer__cols,
  .values-grid,
  .about-numbers,
  .about-records,
  .sp-stats,
  .sp-benefits,
  .ts-tiles,
  .ts-headline,
  .pp-kpi,
  .squad-grid,
  .squad-grid--full,
  .squad-grid--compact,
  .lt-grid,
  .stats-callouts,
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Two-up where one-up would waste space (small stat tiles). */
  .champ-stats,
  .about-numbers { grid-template-columns: repeat(2, 1fr) !important; }

  /* Sponsor home cards + partner cards stack their internal columns. */
  .sp-home__grid { grid-template-columns: 1fr !important; }

  /* Tables: allow horizontal scroll inside a wrapper rather than breaking layout. */
  .lb2-wrap, .table-wrap, .lt__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Headlines shouldn't overflow tiny screens. */
  .hero__title { font-size: clamp(44px, 13vw, 72px); }

  /* Section vertical rhythm a touch tighter. */
  .section { padding: clamp(40px, 9vw, 64px) 0; }
}

/* ── TABLET 768–1023 ────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: 28px; }
  /* Heavy 4-up grids relax to 2-up so cards stay legible. */
  .values-grid,
  .sp-benefits,
  .about-records,
  .ts-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .about-numbers { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── LAPTOP 1024–1439 ───────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --gutter: 40px; }
}

/* ── DESKTOP 1440+ ──────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --gutter: 48px; }              /* 32–48px side padding */
  /* Container already caps at 1280px and is centred via .container margin auto. */
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION v2 — predominately mobile audience
   Overrides the earlier defensive block. Sits last → wins.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* PLAYER CARDS: small + 2-up, not giant single column. */
  .squad-grid,
  .squad-grid--full,
  .squad-grid--compact { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Shrink the compact card internals so two fit neatly at 390px. */
  .player-card.is-compact .player-card__num { font-size: 30px; }
  .player-card.is-compact .player-card__name { font-size: 14px; }
  .player-card.is-compact .player-card__role { font-size: 8px; }
  .player-card.is-compact .player-card__stat-v { font-size: 18px; }
  .player-card.is-compact .player-card__stat-l { font-size: 8px; }
  .player-card__bio { display: none; }            /* bio hidden on small cards; full bio in profile */
  .player-card__hover-stats { display: none; }      /* hover stats are desktop-only */

  /* NAV: trim to logo + lang + burger. Join lives in the drawer. */
  .nav__actions .btn--volt { display: none; }
  .nav__inner { gap: 12px; }
  .nav__brand img { height: 36px !important; }
  .nav__wordmark { font-size: 15px; }

  /* CHAMPIONS hero numbers cluster */
  .champ-hero__numbers { gap: 18px; flex-wrap: wrap; }

  /* Big display headings scale down a notch so nothing clips. */
  .t-h2 { font-size: clamp(26px, 8vw, 38px); }
  .t-h1 { font-size: clamp(34px, 11vw, 52px); }
  .page-hero__title, .pageHero__title { font-size: clamp(34px, 12vw, 56px); }

  /* Match-report / preview cover graphics: keep team names from overflowing. */
  .mr-graphic__team { font-size: clamp(13px, 4.5vw, 20px) !important; }
  .mr-graphic__score, .mr-graphic__pens { font-size: clamp(28px, 10vw, 44px) !important; }

  /* Sponsor logo plates fluid. */
  .sp-home__logo-plate { width: 84px; height: 84px; }
  .sp-home__card { grid-template-columns: 84px 1fr !important; }
  .sp-home__arrow { display: none; }

  /* Fixture / result cards: comfortable single column with full info. */
  .result-carousel .result-card { flex-basis: 86% !important; }

  /* Tighten container padding to spec (16–24px). */
  :root { --gutter: 18px; }

  /* Leaderboard table stays scrollable, never squashes. */
  .lb2 { min-width: 620px; }
  .lb2-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Very small phones (≤380px): single column player cards is fine. */
@media (max-width: 360px) {
  .squad-grid--full, .squad-grid--compact { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW GUARD (≤767px) — keep words/graphics inside the screen.
   Desktop layout is untouched (all rules live inside this media query).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Nothing may push past the viewport edge. */
  * { min-width: 0; }
  body, .container, section { overflow-x: clip; }

  /* Long words / emails / URLs wrap instead of forcing horizontal scroll. */
  h1, h2, h3, h4, p, span, a, li, .t-h1, .t-h2, .t-h3, .t-h4,
  .sp-join__name, .partner-detail__name, .about-story__title,
  .mr-graphic__team, .ss-cover__name, .champ-hero__title {
    overflow-wrap: anywhere; word-break: normal; hyphens: auto;
  }

  /* Display headings: a touch smaller so nothing clips at 390px. */
  .t-h1            { font-size: clamp(30px, 9.5vw, 46px); line-height: 1.04; }
  .t-h2            { font-size: clamp(24px, 7.5vw, 34px); line-height: 1.06; }
  .t-h3            { font-size: clamp(18px, 5.5vw, 24px); }
  .hero__title     { font-size: clamp(40px, 12vw, 64px); line-height: 0.98; }
  .page-hero__title, .ph__title { font-size: clamp(32px, 11vw, 52px); line-height: 1.0; }
  .about-story__title { font-size: clamp(34px, 12vw, 52px); }
  .about-mission__quote { font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.12 !important; }

  /* Eyebrows / labels: keep letter-spacing from overflowing. */
  .t-eyebrow { letter-spacing: 0.14em; font-size: 10px; }

  /* Stat numbers never wider than their tile. */
  .champ-stat__v, .ts-tile__v, .ts-headline__v, .about-num__v,
  .pp-kpi__cell b, .stat-tile__v, .sq-banner__num {
    font-size: clamp(26px, 9vw, 40px) !important;
    overflow-wrap: anywhere;
  }
  .champ-stat--hero .champ-stat__v { font-size: clamp(34px, 12vw, 52px) !important; }

  /* Cover graphics (match report / preview / sponsor / spotlight): clamp text. */
  .mr-graphic__team { font-size: clamp(12px, 4vw, 18px) !important; }
  .mr-graphic__score { font-size: clamp(26px, 9vw, 40px) !important; }
  .ss-cover__name { font-size: clamp(22px, 7vw, 36px) !important; }
  .sp-cover__logo-cell img { max-width: 90px; }

  /* Card padding trimmed so content has breathing room, not edge-to-edge. */
  .result-card, .fixture-card, .news-card, .about-record, .ts-tile,
  .about-num, .value-card, .sp-stat, .sp-benefit { padding: 14px !important; }

  /* Tables that must keep columns: scroll, never crush. */
  .lb2 { min-width: 600px; }
  .lt__table { min-width: 540px; }
  .lt__scroll, .lb2-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Buttons wrap their label rather than overflow. */
  .btn { white-space: normal; text-align: center; line-height: 1.15; }

  /* Hero CTAs stack full-width so labels never clip. */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TYPE SCALE (≤767px) — cute · clean · professional
   A single coherent hierarchy. Desktop is untouched.
   Body 16 / sub 15 / eyebrow 10 · headings step down cleanly.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Body + leads */
  body            { font-size: 16px; line-height: 1.55; }
  .t-lead, .t-body-lg, .hero__sub, .ph__sub, .page-hero__sub { font-size: 15px !important; line-height: 1.55 !important; }
  .t-body         { font-size: 15px; line-height: 1.55; }
  .t-meta, .t-small { font-size: 12px; }

  /* Eyebrow / kicker labels */
  .t-eyebrow      { font-size: 10px; letter-spacing: 0.16em; }

  /* Heading hierarchy — clean steps, nothing oversized */
  .hero__title    { font-size: clamp(38px, 11vw, 54px) !important; line-height: 1.0; letter-spacing: -0.01em; }
  .page-hero__title, .ph__title { font-size: clamp(30px, 9.5vw, 46px) !important; line-height: 1.02; }
  .t-h1           { font-size: 30px !important; line-height: 1.05; }
  .t-h2           { font-size: 24px !important; line-height: 1.08; }
  .t-h3           { font-size: 19px !important; line-height: 1.12; }
  .t-h4           { font-size: 16px !important; line-height: 1.2; }

  /* Section headers: title + "see all" link sit calmly */
  .section__head--compact .t-h2 { font-size: 22px !important; }

  /* Mission quote — readable, not shouty */
  .about-mission__quote { font-size: 22px !important; line-height: 1.18 !important; }
  .about-mission__quote em { font-size: 16px !important; }

  /* Story / editorial blocks */
  .about-story__title { font-size: 34px !important; }
  .about-story__lede  { font-size: 16px !important; line-height: 1.55 !important; }
  .about-story__body p, .coach-feature__bio p { font-size: 15px !important; line-height: 1.6 !important; }
  .about-story__pull  { font-size: 20px !important; line-height: 1.25 !important; }

  /* Stat values: bold but contained */
  .champ-stat__v               { font-size: 36px !important; }
  .champ-stat--hero .champ-stat__v { font-size: 44px !important; }
  .ts-tile__v, .ts-headline__v { font-size: 32px !important; }
  .about-num__v                { font-size: 30px !important; }
  .stat-tile__v                { font-size: 40px !important; }
  .sq-banner__num              { font-size: 26px !important; }
  .pp-kpi__cell b              { font-size: 22px !important; }

  /* Player card type (2-up small cards) */
  .player-card.is-compact .player-card__num    { font-size: 28px; }
  .player-card.is-compact .player-card__name   { font-size: 14px; line-height: 1.1; }
  .player-card.is-compact .player-card__role   { font-size: 9px; letter-spacing: 0.12em; }
  .player-card.is-compact .player-card__stat-v { font-size: 17px; }
  .player-card.is-compact .player-card__stat-l { font-size: 8px; }

  /* Cover-graphic type */
  .mr-graphic__team { font-size: 15px !important; }
  .mr-graphic__score { font-size: 34px !important; }
  .ss-cover__name { font-size: 26px !important; }

  /* Buttons: 16px label, never smaller (legibility + tap) */
  .btn, .btn--sm { font-size: 14px; }
  .btn--lg { font-size: 16px; }

  /* Nav drawer links */
  .nav__drawer a { font-size: 17px; }

  /* Footer columns */
  .footer__col a { font-size: 13px; }
  .footer__col .t-eyebrow { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES v3 (≤767px) — homepage squad roller + menu + overlap guard
   Mobile-only. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* HOMEPAGE SQUAD CAROUSEL — small cards, horizontal swipe (slider back). */
  .sq-roller { padding: 0 !important; }
  .sq-roller__nav { display: none !important; }      /* arrows off; swipe instead */
  .sq-roller__viewport { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sq-roller__viewport::-webkit-scrollbar { display: none; }
  .sq-roller__track { transform: none !important; gap: 10px !important; }
  .sq-roller__cell { flex: 0 0 44% !important; }      /* ~2.2 cards visible → clearly swipeable */
  .sq-roller .player-card__num  { font-size: 26px; }
  .sq-roller .player-card__name { font-size: 13px; line-height: 1.1; }
  .sq-roller .player-card__role { font-size: 8px; }
  .sq-roller .player-card__stat-v { font-size: 16px; }
  .sq-roller .player-card__hover-stats { display: none; }

  /* MENU fonts smaller + tidy. */
  .nav__drawer a { font-size: 14px !important; padding: 11px 0 !important; letter-spacing: 0.06em; }
  .nav__drawer .btn { font-size: 14px !important; }
  .nav__wordmark { font-size: 14px !important; }
  .lang-shifter__btn { font-size: 12px; padding: 7px 9px; }

  /* OVERLAP GUARD: absolutely-positioned decorative numbers/labels must not
     sit on top of text. Let cover graphics keep their own stacking but cap
     the giant ghost index numbers so they don't bleed over content. */
  .about-tl__index { font-size: 22px !important; }
  .g-shot__index { font-size: clamp(60px, 22vw, 120px) !important; }

  /* Any element that genuinely needs width keeps a horizontal scroller
     rather than overlapping neighbours. */
  .lb2-wrap, .lt__scroll, .table-wrap,
  .result-carousel, .news-secondary-rail { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Stack flex rows that were side-by-side and now collide. */
  .sp-join { grid-template-columns: 1fr !important; }
  .sp-join__icon-plate { width: 84px !important; height: 84px !important; }
  .champ-next { grid-template-columns: 1fr !important; }
  .champ-next__cards { grid-template-columns: 1fr 1fr !important; }
  .coach-feature { grid-template-columns: 1fr !important; }

  /* Result card score row: keep badge + name + score from overlapping. */
  .result-card__score { gap: 8px !important; }
  .result-card__name { font-size: 11px !important; }
  .result-card__nums { font-size: 30px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES v4 (≤767px) — hero banner clip + CTA buttons. Mobile only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hero statement was clipping on the right — make it fit + wrap cleanly. */
  .hero__title {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
    hyphens: none;
  }

  /* Hero CTA buttons: compact, not giant; never run off the right edge. */
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero__ctas .btn,
  .hero__ctas .btn--lg {
    width: 100%; box-sizing: border-box;
    min-height: 46px; padding: 12px 16px !important;
    font-size: 13px !important; letter-spacing: 0.06em;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES v5 (≤767px) — home-champ overlap, fixture card, full-story btn
   Mobile only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* HOME CHAMPIONS strip: stack cleanly, kill the watermark that was bleeding
     under the text and causing the overlapping look. */
  .home-champ__inner { grid-template-columns: 1fr !important; text-align: left !important; gap: 16px !important; row-gap: 16px !important; }
  .home-champ__watermark { display: none !important; }
  .home-champ__title { font-size: 26px !important; line-height: 1.0 !important; }
  .home-champ__sub { font-size: 14px !important; }
  .home-champ__nums { justify-content: flex-start !important; gap: 18px !important; }
  .home-champ__nums span { font-size: 30px !important; }
  /* "The full story" button: compact, full width, never oversized. */
  .home-champ__cta {
    width: 100%; box-sizing: border-box; justify-content: center;
    min-height: 46px; padding: 12px 16px !important; font-size: 13px !important;
  }

  /* FIXTURE CARD: stop labels wrapping one letter per line. The narrow grid
     columns were squeezing "DIVISION TEN" / "HOME" into vertical stacks. */
  .fixture-card__comp,
  .fixture-card__loc,
  .fixture-card__ven,
  .fixture-card__team-name {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    max-width: none !important;
  }
  /* Give the fixture card a simpler, roomier mobile layout. */
  .fixture-card { padding: 14px !important; }
  .fixture-card__team-name { font-size: 14px !important; }
  .fixture-card__time { font-size: 26px !important; }
  .fixture-card__comp, .fixture-card__loc, .fixture-card__ven {
    font-size: 9px !important; letter-spacing: 0.1em !important; line-height: 1.3 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FIXES v6 (≤767px) — hero CTA buttons compact + contained. Mobile only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero__ctas { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100%; }
  .hero__ctas .btn,
  .hero__ctas .btn--lg,
  .hero__ctas a {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    min-height: 44px !important; height: auto !important;
    padding: 11px 14px !important;
    font-size: 13px !important; letter-spacing: 0.04em !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE CONSOLIDATION — final pass. Mobile (≤767) + tablet (768–1023).
   Desktop (≥1024) fully untouched. Safety nets so nothing ever overflows.
   ═══════════════════════════════════════════════════════════════════════ */

/* League table: hide secondary columns a little wider so the preview + full
   table both fit phones cleanly (was 720, now 767 to match our breakpoint). */
@media (max-width: 767px) {
  .lt__hide-sm { display: none !important; }
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .lt { min-width: 0 !important; }
  .lt thead th, .lt tbody td { padding: 11px 8px !important; font-size: 13px !important; }
  .lt__pos { font-size: 18px !important; width: 34px !important; }
  .lt__club { font-size: 12px !important; gap: 7px !important; }
  .lt__club .fixture-card__badge { width: 18px !important; height: 18px !important; }

  /* Global safety: no fixed desktop widths leak onto mobile. */
  .container, .nav__inner, section, main { max-width: 100% !important; }

  /* Modals never exceed the screen on mobile. */
  .modal__panel, .pp-modal__panel, .partner-detail {
    max-width: 94vw !important; max-height: 90vh !important; overflow-y: auto !important;
  }

  /* Forms: full-width fields, comfortable tap targets. */
  input, select, textarea { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
  textarea { min-height: 96px; }
}

/* ── TABLET 768–1023: relax dense desktop grids to 2-up, keep it premium ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .sp-home__grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .squad-grid--full, .squad-grid--compact { grid-template-columns: repeat(3, 1fr); }
  .coach-feature { grid-template-columns: 220px 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE VISUAL QA (≤767px) — fixture cards, tabs, statement. Mobile only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── FIXTURE / RESULT CARDS: stack into a clean, scannable mobile card ── */
  .fixture-card, .fixture-card--row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "date teams" "meta meta" "kick kick" !important;
    gap: 10px 14px !important;
    align-items: center !important;
    padding: 16px !important;
  }
  .fixture-card__date { grid-area: date; border-right: 0 !important; padding-right: 0 !important; text-align: center; }
  .fixture-card__day  { font-size: 34px !important; }
  .fixture-card__mon  { font-size: 9px !important; white-space: nowrap; }
  .fixture-card__teams { grid-area: teams; gap: 4px !important; }
  .fixture-card__name { font-size: 15px !important; }
  .fixture-card__vs   { margin-left: 34px !important; }

  /* Meta becomes a row of chips — NEVER letter-by-letter. Full width below. */
  .fixture-card__meta {
    grid-area: meta;
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    margin-top: 4px !important; align-items: center !important;
  }
  .fixture-card__meta > span:not(.fixture-card__sep) {
    display: inline-flex; align-items: center;
    white-space: nowrap !important; word-break: keep-all !important;
    background: var(--surface-3); border: 1px solid var(--hairline);
    border-radius: 9999px; padding: 4px 9px;
    font-size: 9px !important; letter-spacing: 0.1em !important; line-height: 1.3 !important;
  }
  .fixture-card__meta .fixture-card__sep { display: none !important; }   /* chips replace dot separators */
  .fixture-card__home { color: var(--volt) !important; border-color: var(--hairline-volt) !important; }

  /* Kick row full width, left aligned under the teams. */
  .fixture-card__kick { grid-area: kick; text-align: left !important; display: flex; align-items: baseline; gap: 10px; }
  .fixture-card__time { font-size: 24px !important; }
  .fixture-card__ven  { max-width: none !important; white-space: normal !important; font-size: 9px !important; }

  /* ── TABS (Team / Schedule / Media): horizontal scroll, never merge ──── */
  .tabs, .tabs--lg {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar, .tabs--lg::-webkit-scrollbar { display: none; }
  .tabs__btn {
    flex: 0 0 auto !important; white-space: nowrap !important;
    min-height: 44px; padding: 12px 14px !important;
    font-size: 12px !important; letter-spacing: 0.06em !important;
  }

  /* Filters (chips) wrap cleanly with breathing room. */
  .filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .filters .chip { min-height: 38px; }

  /* ── STATEMENT band: fix overlapping lines + size ─────────────────────── */
  .statement { padding-top: 48px !important; padding-bottom: 48px !important; }
  .statement__quote {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
  }
  .statement__quote em { text-shadow: 0 0 24px rgba(216,255,0,0.3); }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE v7 (≤767px) — horizontal scroll rails instead of over-compression.
   Naturally-horizontal components scroll INSIDE themselves; page stays 100vw.
   Desktop (≥768/1024) untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Reusable rail behaviour applied to player/squad grids + carousels. */
  .squad-grid--full,
  .squad-grid--compact,
  .sq-roller__track {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    gap: 12px !important;
    padding: 4px 18px 14px !important;   /* first/last cards clear the edges */
    margin: 0 -18px !important;          /* bleed to screen edges for the rail */
    scrollbar-width: none;
  }
  .squad-grid--full::-webkit-scrollbar,
  .squad-grid--compact::-webkit-scrollbar,
  .sq-roller__track::-webkit-scrollbar { display: none; }

  /* Readable card size — NOT tiny. ~2 cards + a peek of the third. */
  .squad-grid--full > *,
  .squad-grid--compact > *,
  .sq-roller__cell {
    flex: 0 0 46% !important;
    min-width: 150px !important;
    scroll-snap-align: start;
  }

  /* Restore comfortable type inside the (now larger) player cards. */
  .player-card.is-compact .player-card__num    { font-size: 30px; }
  .player-card.is-compact .player-card__name   { font-size: 15px; line-height: 1.12; }
  .player-card.is-compact .player-card__role   { font-size: 9px; letter-spacing: 0.14em; }
  .player-card.is-compact .player-card__stat-v { font-size: 19px; }
  .player-card.is-compact .player-card__stat-l { font-size: 8px; }

  /* Position-group dividers stay full-width above each rail. */
  .squad-pos-group { margin-bottom: 22px; }
  .squad-pos-divider { padding: 0 0 2px; }

  /* Homepage squad roller: hide the now-irrelevant desktop arrows/dots. */
  .sq-roller { padding: 0 !important; }
  .sq-roller__nav, .sq-roller__dots { display: none !important; }
  .sq-roller__viewport { overflow: visible !important; }

  /* A subtle "swipe" affordance under rails. */
  .squad-pos-group::after,
  .sq-roller::after {
    content: 'SWIPE →';
    display: block; text-align: right;
    font: 800 8px/1 var(--font-sans); letter-spacing: 0.2em;
    color: var(--fg-4); padding: 2px 2px 0;
  }

  /* GALLERY mosaic → clean swipe rail too (avoids cramped tiny tiles). */
  .gallery-rail { scroll-snap-type: x mandatory; }
  .gallery-rail > * { flex: 0 0 80% !important; scroll-snap-align: start; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE v8 (≤767px) — ONE consistent button standard across the whole site.
   Every .btn (and its size/colour variants) shares height, padding, radius,
   weight and label size on mobile, so banners read uniformly. Desktop locked.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .btn,
  .btn--sm,
  .btn--lg,
  a.btn, button.btn {
    min-height: 48px !important;
    height: auto !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Banner / hero / CTA-block buttons go full-width and stack uniformly. */
  .hero__ctas,
  .home-champ__cta,
  .about-close__cta,
  .sp-cta__actions,
  .sp-join__actions,
  .join-cta__actions,
  .champ-hero__ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .hero__ctas .btn,
  .about-close__cta .btn,
  .sp-cta__actions .btn,
  .sp-join__actions .btn,
  .join-cta__actions .btn,
  .champ-hero__ctas .btn,
  .home-champ__cta {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Compact inline buttons (nav "Join", section "see all", chips, tabs) keep a
     smaller footprint so they don't look like giant banner buttons. */
  .nav__actions .btn--sm,
  .section__more,
  .sq-chip, .chip, .filters .chip, .tabs__btn {
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    width: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE DESIGN SYSTEM v2 (≤767px) — premium type scale, button + spacing
   standards. Supersedes earlier mobile button/type patches. Desktop locked.
   NOTE: brand display/sans fonts are kept (they ARE the approved identity —
   swapping to Inter on mobile only would make mobile look like a different
   brand than the locked desktop). Hierarchy is achieved via size/weight.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ---- TYPE SCALE ---- */
  body { font-size: 16px; line-height: 1.6; }
  .hero__title { font-size: clamp(38px, 11vw, 44px) !important; line-height: 1.0 !important; letter-spacing: -0.03em !important; }
  .page-hero__title, .ph__title { font-size: clamp(32px, 9vw, 38px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  .t-h1 { font-size: 32px !important; line-height: 1.05 !important; }
  .t-h2 { font-size: 25px !important; line-height: 1.15 !important; }
  .t-h3 { font-size: 20px !important; line-height: 1.2 !important; }
  .t-h4 { font-size: 17px !important; line-height: 1.25 !important; }
  .t-lead, .hero__sub, .ph__sub, .page-hero__sub { font-size: 16px !important; line-height: 1.6 !important; }
  .t-body { font-size: 16px !important; line-height: 1.6 !important; }
  p { max-width: 68ch; }
  .t-meta, .t-small { font-size: 13px !important; }
  .t-eyebrow { font-size: 11px !important; letter-spacing: 0.16em !important; }

  /* ---- BUTTONS (design-system v2: 12px radius, 16px label, 600, 48-52px) ---- */
  .btn, .btn--sm, .btn--lg, a.btn, button.btn {
    min-height: 50px !important; height: auto !important;
    border-radius: 10px !important;
    padding: 14px 22px !important;
    font-size: 16px !important; font-weight: 600 !important;
    letter-spacing: 0.01em !important; line-height: 1.15 !important;
  }
  /* Small inline controls stay compact + pill (chips/tabs/see-all). */
  .nav__actions .btn--sm { min-height: 42px !important; font-size: 14px !important; padding: 10px 16px !important; }
  .chip, .filters .chip, .sq-chip { min-height: 40px !important; border-radius: 9999px !important; font-size: 12px !important; padding: 9px 14px !important; }
  .tabs__btn { min-height: 46px !important; font-size: 13px !important; }
  .section__more { font-size: 13px !important; }

  /* ---- SPACING RHYTHM ---- */
  :root { --gutter: 18px; }
  .section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .section--compact { padding-top: 32px !important; padding-bottom: 32px !important; }
  .section__head--compact { margin-bottom: 20px !important; }

  /* ---- HERO HEIGHT CAP (420–550px, not full-screen) ---- */
  .hero { min-height: 0 !important; }
  .hero__inner, .hero__content { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* ---- NUMBERS feel powerful but contained ---- */
  .home-champ__nums span, .champ-stat__v, .ts-tile__v, .stat-tile__v,
  .about-num__v, .ts-headline__v { font-weight: 800 !important; letter-spacing: -0.01em !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PDF FEEDBACK FIXES (≤767px) — compact footer, button finish, font fits.
   Buttons are rounded-rectangles site-wide (base .btn now 10px). Desktop
   visuals otherwise untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* FOOTER: compact 2-column grid, not a tall single-file list. */
  .footer__top { display: flex; flex-direction: column; gap: 20px; }
  .footer__cols { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 18px 12px !important; }
  .footer__col { gap: 8px !important; }
  .footer__col a { font-size: 12px !important; padding: 2px 0; }
  .footer__util { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

  /* Buttons: never run past the screen edge; full label visible. */
  .btn, a.btn, button.btn { max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; }

  /* "Join the club" nav button: smaller label so it finishes cleanly. */
  .nav__actions .btn--volt { font-size: 13px !important; padding: 9px 14px !important; min-height: 40px !important; }

  /* Values cards (about): keep the 01/02/03/04 number + title aligned, never
     stacked/squashed — give each card a consistent header row. */
  .value-card__head { display: flex !important; align-items: center !important; gap: 10px !important; }
  .value-card__num { font-size: 22px !important; line-height: 1 !important; flex: 0 0 auto !important; }
  .value-card__icon { flex: 0 0 auto !important; }
  .value-card { padding: 16px !important; }
  .value-card__title { font-size: 17px !important; }
  .value-card__copy { font-size: 14px !important; line-height: 1.5 !important; }
}


/* ─── HERO CTA BUTTONS (≤767px) — smaller label, rounded-rectangle ──────── */
@media (max-width: 767px) {
  .hero__ctas .btn,
  .hero__ctas .btn--lg {
    font-size: 14px !important;       /* down from 16px standard */
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 10px !important;   /* rounded rectangle, not pill */
    min-height: 46px !important;
    padding: 12px 18px !important;
  }
}


/* ─── LANGUAGE SHIFTER (≤767px) — keep "EN" on one line, never E/N stacked ── */
@media (max-width: 767px) {
  .lang-shifter__btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    min-width: max-content !important;
  }
  .lang-shifter__btn span { white-space: nowrap !important; }
  .lang-shifter__btn svg { flex-shrink: 0 !important; }
  /* Give the nav room so the language pill isn't crushed. */
  .nav__actions { gap: 8px !important; flex-wrap: nowrap !important; }
}


/* ─── NAV "JOIN THE CLUB" (≤767px) — remove from top bar, keep in drawer ──
   Per client request: the top-bar Join button is hidden on mobile; the menu
   drawer already carries a "Join the club" button. The drawer button is a
   rounded-rectangle (curved edges) sized cleanly. */
@media (max-width: 767px) {
  .nav__actions .btn--volt { display: none !important; }
  .nav__drawer .btn {
    border-radius: 10px !important;
    font-size: 14px !important; font-weight: 700 !important;
    min-height: 46px !important; padding: 12px 18px !important;
    letter-spacing: 0.04em !important;
  }
}


/* ─── NAV HEADER (≤767px) — efficient, balanced spacing ─────────────────── */
@media (max-width: 767px) {
  .nav { height: auto !important; }
  .nav__inner {
    height: 58px !important;
    padding-left: 16px !important; padding-right: 16px !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .nav__brand { gap: 9px !important; margin-right: auto; min-width: 0; }
  .nav__brand img { height: 34px !important; }
  .nav__wordmark { font-size: 14px !important; white-space: nowrap; }
  .nav__actions { gap: 10px !important; align-items: center !important; }
  .lang-shifter__btn { padding: 8px 10px !important; }
  .nav__burger { padding: 8px 4px !important; }
  .nav__burger span { width: 22px; }
}


/* ─── HERO SUB TEXT (≤767px) — smaller so it never clips ────────────────── */
@media (max-width: 767px) {
  .hero__sub {
    font-size: 14px !important; line-height: 1.5 !important;
    max-width: 100% !important; padding-right: 4px;
    overflow-wrap: anywhere;
  }

  /* Safety: keep the nav menu (burger) clearly visible + tappable. */
  .nav { overflow: visible !important; }
  .nav__burger {
    display: flex !important; align-items: center; justify-content: center;
    width: 40px !important; height: 40px !important;
    flex-shrink: 0 !important;
  }
  .nav__burger span { background: var(--fg-1) !important; }
  .nav__drawer {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; box-sizing: border-box;
  }
}


/* ─── HERO CTA BUTTONS (≤767px) — fully contained, no right-edge clipping ── */
@media (max-width: 767px) {
  .hero__ctas {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 8px !important;
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 2px;
  }
  .hero__ctas .btn,
  .hero__ctas .btn--lg,
  .hero__ctas a.btn {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 44px !important; height: auto !important;
    padding: 11px 16px !important;
    font-size: 13px !important; font-weight: 700 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}


/* ─── HERO TICKER (≤767px) — clean horizontal slider, no overlap ─────────── */
@media (max-width: 767px) {
  .hero__ticker { overflow: hidden !important; }
  .hero__ticker-inner {
    display: flex !important; flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important; padding: 12px 16px !important;
    animation: none !important;            /* kill any marquee that overlaps on mobile */
    scrollbar-width: none;
  }
  .hero__ticker-inner::-webkit-scrollbar { display: none; }
  .hero__ticker-inner > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important; letter-spacing: 0.08em !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL BUTTON STANDARD (all viewports) — rounded rectangle, 11px label.
   Client request: every button identical — rectangular with visible curved
   edges on both sides, text 11px. Applied site-wide (mobile + desktop).
   ═══════════════════════════════════════════════════════════════════════ */
.btn, .btn--sm, .btn--lg, .btn--volt, .btn--ghost, .btn--dark, .btn--solid,
a.btn, button.btn {
  border-radius: 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
/* Keep mobile overrides consistent too (they previously set 13–16px). */
@media (max-width: 767px) {
  .btn, .btn--sm, .btn--lg, a.btn, button.btn,
  .hero__ctas .btn, .hero__ctas .btn--lg,
  .nav__drawer .btn, .nav__actions .btn--volt {
    font-size: 11px !important;
    border-radius: 10px !important;
    letter-spacing: 0.08em !important;
  }
}


/* ─── HOME CHAMPIONS "THE FULL STORY" (≤767px) — compact text link, not a
   giant button. Mirrors the "ALL FIXTURES →" section-more style. ─────────── */
@media (max-width: 767px) {
  .home-champ__cta {
    display: inline-flex !important; align-items: center; gap: 6px;
    width: auto !important; max-width: max-content !important;
    min-height: 0 !important; height: auto !important;
    padding: 0 !important; margin-top: 4px !important;
    background: transparent !important; border: 0 !important;
    color: var(--navy) !important;
    font: 800 12px/1 var(--font-sans) !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    border-radius: 0 !important;
    border-bottom: 2px solid rgba(7,29,41,0.4) !important;
    padding-bottom: 4px !important;
  }
  .home-champ__cta:active { transform: none !important; }
}


/* ─── CHAMPIONS STRIP COPY (≤767px) — smaller so the line fits cleanly ──── */
@media (max-width: 767px) {
  .champ-strip__copy { font-size: 12px !important; line-height: 1.45 !important; }
  .champ-strip__copy strong { font-size: 12px !important; }
  .champ-strip { flex-wrap: wrap !important; gap: 8px !important; }
  /* Champions hero + table-banner sub text also smaller on mobile. */
  .champ-hero__sub, .champ-banner__sub { font-size: 14px !important; line-height: 1.5 !important; }
}


/* ─── "THE FULL STORY →" (≤767px) — keep arrow on same line as the words ── */
@media (max-width: 767px) {
  .home-champ__cta {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .home-champ__cta .home-champ__cta-arrow {
    display: inline !important; margin: 0 0 0 6px !important;
    flex: 0 0 auto !important;
  }
}


/* ─── HOME CHAMPIONS NUMBER TILES (≤767px) — smaller, cuter chips ────────── */
@media (max-width: 767px) {
  .home-champ__nums { gap: 10px !important; }
  .home-champ__nums > div {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }
  .home-champ__nums span { font-size: 24px !important; }
  .home-champ__nums label { font-size: 8px !important; letter-spacing: 0.14em !important; margin-top: 3px; }
}


/* ─── HOME CHAMPIONS "THE FULL STORY" — FINAL override (wins over global .btn)
   Must sit last in the file. Higher specificity (.home-champ scope) + !important
   so it stays a compact editorial text-link on mobile, not a chunky button. ── */
@media (max-width: 767px) {
  .home-champ .home-champ__cta.btn,
  .home-champ a.home-champ__cta {
    display: inline-flex !important; align-items: center !important;
    width: auto !important; max-width: max-content !important;
    min-height: 0 !important; height: auto !important;
    padding: 0 0 4px 0 !important; margin-top: 6px !important;
    background: transparent !important; border: 0 !important;
    border-bottom: 2px solid rgba(7,29,41,0.45) !important;
    border-radius: 0 !important;
    color: var(--navy) !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  .home-champ .home-champ__cta.btn .home-champ__cta-arrow {
    margin-left: 6px !important;
  }
}


/* ─── STORY MODULE COPY (≤767px) — smaller so it fits cleanly ───────────── */
@media (max-width: 767px) {
  .kit-reveal__copy p { font-size: 14px !important; line-height: 1.5 !important; max-width: 100% !important; }
  .kit-reveal__title { font-size: clamp(30px, 9vw, 44px) !important; }
}


/* ─── STORY COPY — FINAL size override (≤767px), highest specificity ─────── */
@media (max-width: 767px) {
  .kit-reveal .kit-reveal__copy p,
  section.kit-reveal .kit-reveal__copy p {
    font-size: 13px !important; line-height: 1.5 !important;
    max-width: 100% !important; margin-bottom: 14px !important;
  }
}


/* ─── HOME CHAMPIONS "THE FULL STORY" — compact button (FINAL, wins all) ──── */
@media (max-width: 767px) {
  .home-champ .home-champ__cta.btn,
  .home-champ a.home-champ__cta {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: auto !important; max-width: max-content !important;
    min-height: 40px !important; height: auto !important;
    padding: 10px 16px !important; margin-top: 14px !important;
    background: var(--navy) !important; color: #fff !important;
    border: 0 !important; border-bottom: 0 !important;
    border-radius: 10px !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  .home-champ .home-champ__cta.btn .home-champ__cta-arrow { margin-left: 6px !important; color: var(--volt) !important; }
}


/* ─── STORY MODULE (≤767px) — guarantee copy wraps inside the screen ────── */
@media (max-width: 767px) {
  .kit-reveal__grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .kit-reveal__copy { max-width: 100% !important; min-width: 0 !important; }
  .kit-reveal .kit-reveal__copy p,
  section.kit-reveal .kit-reveal__copy p {
    font-size: 13px !important; line-height: 1.55 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important; word-break: normal !important; hyphens: auto;
    white-space: normal !important;
  }
}


/* ─── HOME CHAMPIONS statrow (≤767px) — full-story button beside 51 PTS ──── */
@media (max-width: 767px) {
  .home-champ__statrow {
    display: flex !important; align-items: center !important;
    gap: 14px !important; flex-wrap: wrap !important; margin-top: 14px;
  }
  .home-champ__statrow .home-champ__nums { margin: 0 !important; }
  /* Button sits to the right of the stats, matching the navy "Media volunteer"
     scheme: navy fill, white label, volt arrow. */
  .home-champ .home-champ__statrow .home-champ__cta.btn {
    margin: 0 !important;
    display: inline-flex !important; align-items: center !important;
    width: auto !important; max-width: max-content !important;
    min-height: 40px !important; padding: 10px 16px !important;
    background: var(--navy) !important; color: #fff !important;
    border: 0 !important; border-radius: 10px !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 0.08em !important; text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  .home-champ .home-champ__statrow .home-champ__cta.btn .home-champ__cta-arrow { color: var(--volt) !important; margin-left: 6px !important; }

  /* STORY copy — bulletproof: stack grid, clip section, wrap + 13px. */
  .kit-reveal { overflow: hidden !important; }
  .kit-reveal__grid { grid-template-columns: 1fr !important; }
  .kit-reveal__copy { max-width: 100% !important; min-width: 0 !important; }
  .kit-reveal__copy p {
    font-size: 13px !important; line-height: 1.55 !important;
    max-width: 100% !important; overflow-wrap: anywhere !important; word-break: normal !important;
  }
}


/* ─── STORY MODULE (≤767px) — premium, on-brand, compact ─────────────────── */
@media (max-width: 767px) {
  .kit-reveal__grid { gap: 18px !important; }
  .kit-reveal__photo { aspect-ratio: 16/10 !important; }   /* shorter on mobile, not a tall slab */
  .kit-reveal__photo img { width: 46% !important; }
  .kit-reveal__copy .t-eyebrow { font-size: 10px !important; }
  .kit-reveal__title { font-size: clamp(28px, 9vw, 40px) !important; margin: 6px 0 12px !important; }
  .kit-reveal__copy p { font-size: 13px !important; line-height: 1.55 !important; }
}


/* Story "Read more" inline link */
.kit-reveal__readmore {
  color: var(--volt) !important; font-weight: 700;
  white-space: nowrap; border-bottom: 1px solid var(--hairline-volt);
}
.kit-reveal__readmore:hover { border-color: var(--volt); }


/* ─── HOME CHAMPIONS (≤767px) — refined, on-brand, interactive ──────────── */
@media (max-width: 767px) {
  .home-champ__statrow { gap: 10px !important; align-items: stretch !important; }
  .home-champ__nums { gap: 8px !important; flex: 1 1 auto; }

  /* Stat tiles: subtle navy chip on the volt field, even sizing, lift on tap. */
  .home-champ__nums > div {
    flex: 1 1 0 !important;
    background: rgba(7,29,41,0.06) !important;
    border: 1px solid rgba(7,29,41,0.18) !important;
    border-radius: 12px !important;
    padding: 12px 6px !important;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
  }
  .home-champ__nums > div:active { transform: scale(0.96); background: rgba(7,29,41,0.12) !important; }
  .home-champ__nums span { font-size: 26px !important; font-weight: 800 !important; color: var(--navy) !important; letter-spacing: -0.01em; }
  .home-champ__nums label { font-size: 8px !important; letter-spacing: 0.16em !important; color: rgba(7,29,41,0.7) !important; margin-top: 4px; }

  /* "THE FULL STORY" button: full-width row below the stats, matching height,
     navy fill, white text, volt arrow — feels deliberate, not oversized. */
  .home-champ__statrow .home-champ__cta.btn {
    flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
    justify-content: space-between !important;
    min-height: 46px !important; padding: 13px 18px !important;
    background: var(--navy) !important; color: #fff !important;
    border-radius: 12px !important;
    font-size: 12px !important; letter-spacing: 0.12em !important;
    box-shadow: 0 8px 20px rgba(7,29,41,0.25);
    transition: transform var(--dur-fast), box-shadow var(--dur-med);
  }
  .home-champ__statrow .home-champ__cta.btn:active { transform: translateY(1px); }
  .home-champ__statrow .home-champ__cta.btn .home-champ__cta-arrow { color: var(--volt) !important; }

  /* Headline + sub: tighten so the block reads cleanly. */
  .home-champ__title { font-size: clamp(30px, 9vw, 40px) !important; line-height: 0.98 !important; }
  .home-champ__sub { font-size: 14px !important; line-height: 1.5 !important; }
  .home-champ__eye { font-size: 11px !important; letter-spacing: 0.16em !important; }
}


/* ═══ HOME CHAMPIONS — REDESIGN v2 (≤767px). Solid navy stat panel on volt. ═══ */
@media (max-width: 767px) {
  .home-champ .home-champ__statrow {
    display: flex !important; flex-direction: column !important;
    gap: 12px !important; margin-top: 18px !important; align-items: stretch !important;
  }
  /* One dark panel holding all three stats, split by hairline dividers. */
  .home-champ .home-champ__statrow .home-champ__nums {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important;
    background: var(--navy) !important;
    border-radius: 16px !important;
    padding: 16px 4px !important; margin: 0 !important;
    box-shadow: 0 14px 30px rgba(7,29,41,0.3);
    overflow: hidden;
  }
  .home-champ .home-champ__statrow .home-champ__nums > div {
    flex: none !important; background: transparent !important; border: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 0 !important; padding: 2px 6px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums > div:last-child { border-right: 0 !important; }
  .home-champ .home-champ__statrow .home-champ__nums span {
    font-size: 30px !important; font-weight: 800 !important;
    color: var(--volt) !important; letter-spacing: -0.01em !important;
    text-shadow: 0 0 18px rgba(214,242,58,0.35);
  }
  .home-champ .home-champ__statrow .home-champ__nums label {
    font-size: 8px !important; letter-spacing: 0.2em !important;
    color: rgba(255,255,255,0.65) !important; margin-top: 2px !important;
  }
  /* Story button: outlined navy bar that reads as a CTA, full width. */
  .home-champ .home-champ__statrow .home-champ__cta.btn {
    width: 100% !important; flex: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    min-height: 48px !important; padding: 14px 18px !important;
    background: transparent !important; color: var(--navy) !important;
    border: 2px solid var(--navy) !important; border-radius: 12px !important;
    font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.16em !important;
    box-shadow: none !important;
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .home-champ .home-champ__statrow .home-champ__cta.btn:active {
    background: var(--navy) !important; color: #fff !important;
  }
  .home-champ .home-champ__statrow .home-champ__cta.btn .home-champ__cta-arrow { color: inherit !important; }
}


/* ═══ HOME CHAMPIONS — REDESIGN v3 (≤767px). Clean tiles + solid CTA. ═══ */
@media (max-width: 767px) {
  .home-champ .home-champ__statrow {
    display: flex !important; flex-direction: column !important;
    gap: 12px !important; margin-top: 18px !important; align-items: stretch !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important; background: transparent !important;
    padding: 0 !important; margin: 0 !important; box-shadow: none !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums > div {
    background: rgba(7,29,41,0.08) !important;
    border: 1px solid rgba(7,29,41,0.16) !important;
    border-radius: 14px !important; padding: 14px 6px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums span {
    font-size: 28px !important; font-weight: 800 !important;
    color: var(--navy) !important; letter-spacing: -0.01em !important; text-shadow: none !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums label {
    font-size: 8px !important; letter-spacing: 0.18em !important;
    color: rgba(7,29,41,0.62) !important; margin-top: 0 !important;
  }
  .home-champ .home-champ__statrow .home-champ__cta.btn {
    width: 100% !important; flex: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    min-height: 50px !important; padding: 15px 18px !important;
    background: var(--navy) !important; color: #fff !important;
    border: 0 !important; border-radius: 14px !important;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em !important;
    box-shadow: none !important;
  }
  .home-champ .home-champ__statrow .home-champ__cta.btn .home-champ__cta-arrow { color: var(--volt) !important; }
}


/* ─── HOME CHAMPIONS "THE FULL STORY" (≤767px) — thin full-width bar ─────── */
@media (max-width: 767px) {
  .home-champ .home-champ__statrow .home-champ__cta.btn {
    width: 100% !important; max-width: 100% !important;
    min-height: 38px !important; height: 38px !important;
    padding: 0 18px !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
    font-size: 11px !important; letter-spacing: 0.16em !important;
  }
}


/* ─── HOME CHAMPIONS stat tiles (≤767px) — number + label SIDE BY SIDE ───── */
@media (max-width: 767px) {
  .home-champ .home-champ__statrow .home-champ__nums {
    grid-template-columns: 1fr !important;   /* one stat per row, full width */
    gap: 8px !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums > div {
    flex-direction: row !important; align-items: baseline !important;
    justify-content: flex-start !important; gap: 10px !important;
    padding: 12px 16px !important;
  }
  .home-champ .home-champ__statrow .home-champ__nums span { font-size: 24px !important; }
  .home-champ .home-champ__statrow .home-champ__nums label { margin: 0 !important; font-size: 10px !important; letter-spacing: 0.16em !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HOME CHAMPIONS — clean rebuild (hc2). Compact, on-brand, responsive.
   Sits on the existing .home-champ volt background.
   ═══════════════════════════════════════════════════════════════════════ */
.hc2 { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hc2__eye {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(7,29,41,0.7);
}
.hc2__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px); line-height: 0.95; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--navy); margin: 0;
}
.hc2__sub {
  font: 600 15px/1.5 var(--font-sans); color: rgba(7,29,41,0.78); margin: 0;
}
.hc2__stats {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 6px;
}
.hc2__stat {
  font: 700 13px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(7,29,41,0.7); display: inline-flex; align-items: baseline; gap: 6px;
}
.hc2__stat b {
  font-family: var(--font-stat); font-size: clamp(26px, 4vw, 34px); line-height: 1;
  color: var(--navy); letter-spacing: -0.01em;
}
.hc2__divider { width: 1px; height: 22px; background: rgba(7,29,41,0.22); align-self: center; }
.hc2__cta {
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--navy); color: #fff !important;
  border-radius: 10px; padding: 0 18px; height: 44px;
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; transition: transform var(--dur-fast), background var(--dur-fast);
}
.hc2__cta span { color: var(--volt); font-size: 14px; }
.hc2__cta:hover { background: #000; }
.hc2__cta:active { transform: translateY(1px); }

/* Desktop: place the CTA inline-right, stats under the title — keep it tidy. */
@media (min-width: 768px) {
  .hc2__cta { align-self: flex-start; min-width: 240px; }
}

/* Mobile: full-width thin CTA bar, compact stats row. */
@media (max-width: 767px) {
  .hc2 { gap: 8px; }
  .hc2__title { font-size: clamp(30px, 9vw, 40px) !important; }
  .hc2__sub { font-size: 13px !important; }
  .hc2__stats { gap: 12px !important; margin-top: 4px; }
  .hc2__stat { font-size: 11px !important; }
  .hc2__stat b { font-size: 24px !important; }
  .hc2__divider { height: 18px; }
  .hc2__cta { width: 100% !important; height: 40px !important; margin-top: 12px; font-size: 11px !important; }
}


/* ─── PAGE HERO SUB (≤767px) — smaller so it fits the banner cleanly ─────── */
@media (max-width: 767px) {
  .page-hero__sub, .ph__sub, .page-hero p {
    font-size: 13px !important; line-height: 1.5 !important;
    max-width: 100% !important; overflow-wrap: anywhere;
  }
}

@media (max-width: 767px) {
  .page-hero__sub, .ph__sub, .page-hero p { hyphens: none !important; overflow-wrap: break-word !important; }
}


/* ─── PENDING SEASON placeholder (≤767px) — smaller copy + tighter title ── */
@media (max-width: 767px) {
  .placeholder__big-title { font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.05 !important; }
  .placeholder__copy { font-size: 12px !important; line-height: 1.55 !important; max-width: 100% !important; }
}


/* ─── RESULTS hero meta — clean chips instead of a run-on dotted line ────── */
.results-hero__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.results-hero__metachip {
  font: 800 10px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--volt); background: rgba(214,242,58,0.10);
  border: 1px solid var(--hairline-volt); border-radius: 9999px;
  padding: 6px 10px; white-space: nowrap;
}

/* ─── RESULTS competition filter (≤767px) — compact chips ───────────────── */
@media (max-width: 767px) {
  .results-hero__metachip { font-size: 9px !important; padding: 5px 8px !important; }
  .filters { gap: 6px !important; }
  .filters .chip { min-height: 36px !important; padding: 7px 11px !important; font-size: 11px !important; }
}


/* ─── LEAGUE TABLE (≤767px) — stop "PTS" wrapping (S under PT) ───────────── */
@media (max-width: 767px) {
  .lt thead th, .lt tbody td { white-space: nowrap !important; }
  .lt__num { width: auto !important; min-width: 30px; padding-left: 6px !important; padding-right: 6px !important; }
  .lt__pts { padding-left: 8px !important; padding-right: 8px !important; }
  .lt thead th { font-size: 10px !important; letter-spacing: 0.06em !important; }
}


/* ─── SQUAD RAIL "SWIPE →" affordance (≤767px) — shift left, more visible ── */
@media (max-width: 767px) {
  .squad-pos-group::after,
  .sq-roller::after {
    text-align: left !important;
    padding-left: 2px !important;
    color: var(--volt) !important;
    opacity: 0.8;
  }
}


/* ─── LEADERBOARD TOOLBAR (≤767px) — compact season/comp filters ─────────── */
@media (max-width: 767px) {
  .lb2-toolbar { gap: 10px !important; }
  .lb2-toolbar__group { gap: 6px !important; }
  .lb2-toolbar__lbl { font-size: 9px !important; letter-spacing: 0.14em !important; margin-bottom: 2px; }
  .lb2-toolbar .filters { gap: 5px !important; }
  .lb2-toolbar .chip { min-height: 32px !important; padding: 6px 10px !important; font-size: 10px !important; }
  .lb2-toolbar__meta { display: none !important; }
}


/* ─── LEADERBOARD — freeze the player column while stats scroll sideways ─── */
.lb2__th--pos, .lb2__pos {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface-2);
}
.lb2__th--name, .lb2__name {
  position: sticky; left: 48px; z-index: 3;
  background: var(--surface-1);
}
.lb2__th--pos, .lb2__th--name { background: var(--surface-2) !important; z-index: 4; }
/* Subtle divider so the frozen column reads as separate from scrolling stats. */
.lb2__name::after, .lb2__th--name::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: var(--hairline-strong);
}
@media (max-width: 767px) {
  .lb2__th--name, .lb2__name { min-width: 150px !important; left: 38px !important; }
  .lb2__th--pos, .lb2__pos { width: 38px !important; }
  .lb2__name-main { font-size: 12px !important; }
}


/* ─── LEADERBOARD — close gap between pos & name, ease APPS column ───────── */
/* The pos column is sticky at left:0 and name sticky at left:48px — tighten
   that offset so the number sits right against the name (no mini gap). */
.lb2__th--pos, .lb2__pos { width: 34px !important; padding-left: 8px !important; padding-right: 2px !important; }
.lb2__th--name, .lb2__name { left: 34px !important; padding-left: 8px !important; }
/* Give the APPS / data cells a touch more breathing room so they don't squash. */
.lb2__td { padding-left: 10px !important; padding-right: 10px !important; }
.lb2__th { padding-left: 10px !important; padding-right: 10px !important; }
@media (max-width: 767px) {
  .lb2__th--pos, .lb2__pos { width: 28px !important; padding-left: 6px !important; }
  .lb2__th--name, .lb2__name { left: 28px !important; padding-left: 6px !important; }
  .lb2__td, .lb2__th { padding-left: 8px !important; padding-right: 8px !important; }
}


/* ─── LEADERBOARD — fully close pos↔name gap (align sticky offset exactly) ─ */
.lb2__th--pos, .lb2__pos {
  width: 30px !important; min-width: 30px !important; max-width: 30px !important;
  padding-left: 8px !important; padding-right: 0 !important; box-sizing: border-box !important;
}
.lb2__th--name, .lb2__name { left: 30px !important; padding-left: 4px !important; }
@media (max-width: 767px) {
  .lb2__th--pos, .lb2__pos { width: 26px !important; min-width: 26px !important; max-width: 26px !important; padding-left: 6px !important; }
  .lb2__th--name, .lb2__name { left: 26px !important; padding-left: 4px !important; }
}


/* ─── COACH FEATURE BIO (≤767px) — smaller body copy ─────────────────────── */
@media (max-width: 767px) {
  .coach-feature__bio p,
  .coach-feature__bio p:first-of-type {
    font-size: 13px !important; line-height: 1.55 !important;
  }
  .coach-feature__name { font-size: clamp(24px, 7vw, 32px) !important; }
}


/* ─── PLAYER PROFILE (≤767px) — compact competition filter + smaller bio ─── */
@media (max-width: 767px) {
  .pp-comp-filter { padding: 8px 12px !important; gap: 8px !important; }
  .pp-comp-filter__lbl { font-size: 9px !important; letter-spacing: 0.12em !important; }
  .pp-comp-filter .filters { gap: 5px !important; }
  .pp-comp-filter .chip { min-height: 30px !important; padding: 5px 9px !important; font-size: 10px !important; }
  /* Bio / season-story text smaller. */
  .pp-narrative p { font-size: 13px !important; line-height: 1.55 !important; }
  .pp-narrative__tab { font-size: 10px !important; padding: 6px 11px !important; }
}


/* ─── NEWS CARDS (≤767px) — smaller title + lede ─────────────────────────── */
@media (max-width: 767px) {
  .news-card__title { font-size: 16px !important; line-height: 1.2 !important; }
  .news-card--lg .news-card__title { font-size: 19px !important; }
  .news-card__lede { font-size: 12px !important; line-height: 1.5 !important; }
  .news-card__meta, .news-card__read-more { font-size: 10px !important; }
}


/* ─── MATCH REPORT COVER (≤767px) — ensure both badges + score read clearly ─ */
@media (max-width: 767px) {
  .mr-graphic { padding: 16px 12px !important; }
  .mr-graphic__badge { width: 44px !important; height: 44px !important; }
  .mr-graphic__badge--shield { height: 48px !important; width: auto !important; }
  .mr-graphic__team { font-size: 12px !important; }
  .mr-graphic__score-nums { gap: 6px !important; }
  .mr-graphic__num { font-size: 38px !important; }
  .mr-graphic__tag { font-size: 7px !important; }
}


/* ─── ARTICLE DETAIL (≤767px) — smaller article body + title ─────────────── */
@media (max-width: 767px) {
  .ad__title { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.0 !important; }
  .ad__story p { font-size: 14px !important; line-height: 1.6 !important; }
  .ad__story p:first-child { font-size: 15px !important; line-height: 1.55 !important; }
  .ad__body { padding: var(--sp-4) !important; gap: var(--sp-3) !important; }
  .ad-extra div { font-size: 12px !important; }
}


/* ─── SQUAD SPOTLIGHT cover — role tag bottom-right; no number ever ──────── */
.ss-cover__num { display: none !important; }
.ss-cover__role {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  font: 900 9px/1 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy); background: var(--volt);
  padding: 6px 10px; border-radius: 9999px;
}

/* ─── SPONSOR cover foot — centre the text ───────────────────────────────── */
.sp-cover__foot { justify-content: center !important; text-align: center; gap: 6px 16px; }


/* ─── MATCH REPORT / PREVIEW foot (≤767px) — venue + KO always visible ───── */
@media (max-width: 767px) {
  .mr-graphic__foot {
    display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important;
    font-size: 9px !important; letter-spacing: 0.08em !important;
    padding-top: 10px !important; opacity: 1 !important; overflow: visible !important;
  }
  .mr-graphic__foot span { white-space: nowrap; }
}


/* ─── ARTICLE CUSTOM COVER (admin override) ──────────────────────────────── */
.ad__media--custom, .news-card__media--custom { position: relative; overflow: hidden; }
.ad__media--custom { aspect-ratio: 16/9; }
.ad__media--custom img, .news-card__media--custom img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ad__coveradmin {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px var(--sp-5); background: var(--surface-2); border-bottom: 1px solid var(--hairline);
}
.ad__cover-reset {
  appearance: none; cursor: pointer; border: 1px solid var(--hairline);
  background: transparent; color: var(--fg-3);
  padding: 8px 12px; border-radius: 8px;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.ad__cover-reset:hover { color: var(--volt); border-color: var(--hairline-volt); }


/* ─── SQUAD SPOTLIGHT — remove position tag; PLAYER chip bottom-right ────── */
.ss-cover__role { display: none !important; }
.news-card__media--spotlight .news-card__cat--floating,
.ad__media--spotlight .news-card__cat--floating {
  display: inline-block !important;
  top: auto !important; left: auto !important;
  bottom: 14px !important; right: 14px !important;
}

/* ─── MATCH REPORT / PREVIEW covers — taller so badges/score/venue/KO show ─ */
.news-card__media--report { aspect-ratio: 16/11 !important; }
.news-card--lg .news-card__media--report { aspect-ratio: 16/10 !important; }
.ad__media--report { aspect-ratio: 16/11 !important; }
@media (max-width: 767px) {
  .news-card__media--report, .ad__media--report { aspect-ratio: 4/3 !important; }
  .mr-graphic { padding: 14px 12px !important; gap: 6px !important; }
  .mr-graphic__main { gap: 8px !important; }
  .mr-graphic__num { font-size: 34px !important; }
  .mr-graphic__badge { width: 40px !important; height: 40px !important; }
  .mr-graphic__badge--shield { height: 44px !important; width: auto !important; }
  .mr-graphic__team { font-size: 11px !important; }
  .mr-graphic__foot { font-size: 9px !important; gap: 6px 10px !important; }
  .mr-graphic__tag { font-size: 7px !important; }
}


/* ─── SPONSOR JOIN card — transparent badge plate, nudged left, smaller copy ─ */
.sp-join__icon-plate {
  background: transparent !important; box-shadow: none !important;
  padding: 0 !important; margin-left: -4px;
}
.sp-join__icon-plate img { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45)); }
.sp-join__sub { font-size: 13px !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
  .sp-join__sub { font-size: 12px !important; }
}


/* ─── FOOTER UTILITY ROW (≤767px) — much smaller copyright/links ─────────── */
@media (max-width: 767px) {
  .footer__util .t-meta { font-size: 9px !important; letter-spacing: 0.04em !important; }
  .footer__util-links a { font-size: 9px !important; }
}


/* ─── SPONSOR JOIN checklist — smaller text ──────────────────────────────── */
.sp-join__list li { font-size: 12px !important; }
.sp-join__list li > span:first-child { width: 18px !important; height: 18px !important; min-width: 18px !important; font-size: 11px !important; flex: 0 0 18px !important; }
@media (max-width: 767px) { .sp-join__list li { font-size: 11px !important; } }


/* ─── SP-HOME CTA strip — much smaller text + button ─────────────────────── */
.sp-home__cta span { font-size: 10px !important; letter-spacing: 0.1em !important; }
.sp-home__cta .btn { font-size: 9px !important; min-height: 32px !important; padding: 7px 12px !important; }
@media (max-width: 767px) {
  .sp-home__cta span { font-size: 9px !important; }
  .sp-home__cta .btn { font-size: 9px !important; min-height: 30px !important; }
}

/* ─── SPONSOR BENEFIT CARDS — smaller copy ───────────────────────────────── */
.sp-benefit__copy { font-size: 12px !important; line-height: 1.45 !important; }
@media (max-width: 767px) { .sp-benefit__copy { font-size: 11px !important; } }


/* ═══ BATCH: about/champ/join font + alignment tweaks (mostly mobile) ═══ */
/* Champions stat cluster + "THE NUMBERS" header nudge left (remove indent) */
.champ-stats-head, .champ-hero__chrome { padding-left: 0 !important; }
.champ-hero__numbers { margin-left: 0 !important; padding-left: 0 !important; }

/* About records note — no special centering needed; keep tidy */
.about-records__note { font-size: 10px !important; }

/* About close sub smaller */
.about-close__sub { font-size: 13px !important; line-height: 1.5 !important; }
.about-close__cta { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }

/* About story body smaller */
.about-story__lede { font-size: 14px !important; line-height: 1.55 !important; }
.about-story__body p { font-size: 13px !important; line-height: 1.6 !important; }
.about-story__pull { font-size: 16px !important; line-height: 1.3 !important; }

/* Champion banner sub (A PERFECT FIRST CAMPAIGN line) centred + smaller */
.about-champ__copy p { font-size: 13px !important; text-align: center; }
.about-champ__copy { text-align: center; }

/* Journey eyebrow / section heads nudge left handled by container; ensure
   the eyebrow meta sits left */
.about-journey-section .section__head--compact span.t-meta { text-align: left; }

/* JOIN page smaller text */
.join-v2__form-sub { font-size: 13px !important; line-height: 1.5 !important; }
.join-v2__actions .t-meta { font-size: 10px !important; }
.faq__q, .faq summary { font-size: 13px !important; }

/* ─── ABOUT JOURNEY CAROUSEL — ensure the track actually slides (bug fix) ── */
.about-tl__track { transform: translateX(0); }
@media (max-width: 767px) {
  .about-tl__card { flex-basis: 82% !important; }
}


/* ─── GALLERY empty-state — smaller text + button ────────────────────────── */
.g-empty span { font-size: 10px !important; letter-spacing: 0.08em !important; line-height: 1.5 !important; }
.g-empty .btn { font-size: 10px !important; min-height: 34px !important; padding: 8px 12px !important; }
@media (max-width: 767px) {
  .g-empty span { font-size: 9px !important; }
  .g-empty .btn { font-size: 9px !important; }
}


/* ─── FOOTER columns — smaller + more compact ────────────────────────────── */
.footer__col .t-eyebrow { font-size: 9px !important; letter-spacing: 0.12em !important; margin-bottom: 4px; }
.footer__col a { font-size: 11px !important; padding: 1px 0 !important; }
.footer__col ul { gap: 2px !important; }
.footer__col { gap: 6px !important; }
.footer__cols { gap: 14px 12px !important; }
@media (max-width: 767px) {
  .footer__col .t-eyebrow { font-size: 8px !important; }
  .footer__col a { font-size: 10px !important; }
}


/* ═══ MATCH PREVIEW GRAPHIC — clean, contained layout (all widths) ═══════════
   Fixes the broken preview cover (giant overlapping badges + VS/KO collision).
   Three even columns, small badges, VS centred, KO chip below — no overlap. */
.mr-graphic--preview .mr-graphic__main {
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important; gap: 10px !important;
}
.mr-graphic--preview .mr-graphic__side {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 6px !important; min-width: 0 !important; text-align: center !important;
}
.mr-graphic--preview .mr-graphic__badge {
  width: 52px !important; height: 52px !important; flex: 0 0 auto !important;
}
.mr-graphic--preview .mr-graphic__badge--shield { height: 56px !important; width: auto !important; }
.mr-graphic--preview .mr-graphic__team { font-size: 13px !important; line-height: 1.1 !important; }
.mr-graphic--preview .mr-graphic__tag { font-size: 8px !important; }
.mr-graphic--preview .mr-graphic__score--preview {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 6px !important; min-width: 0 !important;
}
.mr-graphic--preview .mr-graphic__vs {
  font-size: clamp(24px, 5vw, 40px) !important; line-height: 1 !important;
}
.mr-graphic--preview .mr-graphic__pens {
  font-size: 11px !important; padding: 4px 9px !important; white-space: nowrap !important;
}

@media (max-width: 767px) {
  .mr-graphic--preview .mr-graphic__badge { width: 42px !important; height: 42px !important; }
  .mr-graphic--preview .mr-graphic__badge--shield { height: 46px !important; }
  .mr-graphic--preview .mr-graphic__team { font-size: 11px !important; }
  .mr-graphic--preview .mr-graphic__vs { font-size: 24px !important; }
  .mr-graphic--preview .mr-graphic__pens { font-size: 10px !important; }
  .mr-graphic--preview .mr-graphic__tag { font-size: 7px !important; }
}


/* ─── ABOUT PAGE (≤767px) — ensure long lines fit, no overflow ──────────── */
@media (max-width: 767px) {
  .about-champ__copy p,
  .about-records__note span,
  .about-record__v,
  .about-mission__quote,
  .about-story__body p,
  .about-close__sub {
    overflow-wrap: anywhere !important; word-break: normal !important; hyphens: none !important;
    max-width: 100% !important;
  }
  .about-champ__copy p { font-size: 12px !important; line-height: 1.5 !important; }
  .about-record__v { font-size: 15px !important; }
  .about-records__note span { font-size: 9px !important; line-height: 1.5 !important; }
}


/* ─── ABOUT JOURNEY header — meta sits under the title, left-aligned ─────── */
.about-journey-section .section__head--compact {
  flex-direction: column !important; align-items: flex-start !important; gap: 4px !important;
}
.about-journey-section .section__head--compact > span.t-meta { text-align: left !important; }


/* ─── ABOUT JOURNEY (≤767px) — stack ALL events vertically (no carousel) ─── */
@media (max-width: 767px) {
  .about-tl { padding: 0 !important; }
  .about-tl__viewport { overflow: visible !important; }
  .about-tl__track {
    flex-direction: column !important; transform: none !important;
    gap: 10px !important; width: 100% !important;
  }
  .about-tl__card { flex-basis: auto !important; width: 100% !important; }
  .about-tl__nav, .about-tl__dots { display: none !important; }

  /* Founding-story body smaller */
  .about-story__body p, .about-story__lede { font-size: 12px !important; line-height: 1.55 !important; }
  .about-story__pull { font-size: 15px !important; line-height: 1.3 !important; }
}

/* Join form sub smaller */
.join-v2__form-sub { font-size: 12px !important; line-height: 1.5 !important; }
@media (max-width: 767px) { .join-v2__form-sub { font-size: 11px !important; } }


/* ─── JOIN FAQ — smaller text + clearer +/× toggle ───────────────────────── */
.faq summary { font-size: 14px !important; gap: 12px; }
.faq summary > span { color: var(--navy) !important; background: var(--volt); width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 16px !important; line-height: 1; flex: 0 0 22px; }
.faq p { font-size: 12px !important; line-height: 1.55 !important; }
@media (max-width: 767px) {
  .faq summary { font-size: 12px !important; }
  .faq p { font-size: 11px !important; }
  .faq { padding: 14px 0 !important; }
}

/* Champions UP NEXT — smaller header + count labels */
.champ-next-section .section__head--compact .t-h2 { font-size: 18px !important; line-height: 1.1 !important; }
.champ-next__count-l { font-size: 10px !important; }
.champ-next__count-date { font-size: 10px !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
  .champ-next-section .section__head--compact .t-h2 { font-size: 16px !important; }
  .champ-next__count-date { font-size: 9px !important; }
}


/* ─── ABOUT STORY body — smaller so it fits cleanly ──────────────────────── */
.about-story__lede { font-size: 13px !important; line-height: 1.5 !important; }
.about-story__body p { font-size: 12px !important; line-height: 1.55 !important; }
.about-story__pull { font-size: 15px !important; line-height: 1.3 !important; }
@media (max-width: 767px) {
  .about-story__lede { font-size: 12px !important; }
  .about-story__body p { font-size: 11px !important; }
  .about-story__pull { font-size: 14px !important; }
}


/* ─── JOIN FAQ — move +/× toggle to the LEFT, guarantee visible ──────────── */
.faq summary {
  justify-content: flex-start !important; gap: 12px !important; align-items: center !important;
}
.faq summary > span {
  order: -1 !important;                 /* icon first → on the left */
  flex: 0 0 24px !important; width: 24px !important; height: 24px !important;
  display: inline-grid !important; place-items: center !important;
  background: var(--volt) !important; color: var(--navy) !important;
  border-radius: 6px !important; font-size: 18px !important; font-weight: 700 !important;
  line-height: 1 !important;
}

/* Champions "All results →" link smaller */
.champ-recent-section .section__more, .champ-recent .section__more { font-size: 11px !important; }
@media (max-width: 767px) { .champ-next__card-sub { font-size: 10px !important; } }


/* ═══ ABOUT PAGE — uniform body text (13px everywhere, non-headings) ═══════ */
.about-mission__quote,
.about-mission__quote em,
.about-num__sub,
.about-record__sub,
.about-records__note span,
.about-story__lede,
.about-story__body p,
.about-story__pull,
.about-champ__copy p,
.value-card__copy,
.value-card__detail p,
.about-tl__copy,
.about-close__sub {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
/* keep the mission quote a touch more open but same size */
.about-mission__quote { line-height: 1.3 !important; }


/* ═══ GLOBAL — all non-heading body text 12px (site-wide) ═════════════════
   Headings (.t-h1/h2/h3/h4, hero/page titles, stat numbers, display type)
   keep their sizes; everything else (paragraphs, ledes, labels, card copy,
   meta, list items, buttons stay as set) normalises to 12px. */
.t-body, .t-lead, p,
.about-story__lede, .about-story__body p, .about-story__pull,
.about-mission__quote, .about-mission__quote em,
.about-num__sub, .about-record__sub, .about-records__note span,
.about-champ__copy p, .value-card__copy, .value-card__detail p,
.about-tl__copy, .about-close__sub,
.hero__sub, .page-hero__sub, .ph__sub,
.news-card__lede, .ad__story p, .ad-extra div,
.kit-reveal__copy p, .sp-benefit__copy, .sp-join__sub,
.join-v2__form-sub, .faq p, .placeholder__copy,
.champ-hero__sub, .champ-banner__sub, .champ-next__card-sub,
.coach-feature__bio p, .pp-narrative p, .fixture-card__name,
.result-card__scorers {
  font-size: 12px !important;
  line-height: 1.55 !important;
}


/* ═══ TEXT WRAPPING — let sub/lead/hero copy wrap cleanly (no nowrap) ═══════ */
.hero__sub, .page-hero__sub, .ph__sub, .placeholder__copy,
.champ-hero__sub, .join__sub, .about-close__sub, .about-story__lede,
.about-story__body p, .about-champ__copy p, .champ-next__card-sub,
.join-v2__form-sub, .sp-join__sub {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  max-width: 100%;
}

/* CLUB HISTORY record sub-labels smaller */
.about-record__sub, .about-records__note span { font-size: 11px !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
  .about-record__sub, .about-records__note span { font-size: 10px !important; }
}


/* ═══ ABOUT STORY — bulletproof mobile containment (no right-edge cutoff) ══ */
@media (max-width: 767px) {
  .about-story { grid-template-columns: 1fr !important; gap: 16px !important; overflow: hidden !important; }
  .about-story__body,
  .about-story__masthead { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
  .about-story__body p,
  .about-story__lede,
  .about-story__pull {
    max-width: 100% !important; min-width: 0 !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
    word-break: normal !important; hyphens: none !important; text-wrap: pretty;
  }
}

/* Short stat sub-lines wrap cleanly (no dashes in source, just ensure wrap). */
.champ-next__card-sub,
.about-record__sub {
  white-space: normal !important; overflow-wrap: anywhere; text-wrap: pretty; max-width: 100%;
}


/* ═══ JOIN HERO SUB — firm containment so it never cuts off right edge ═════ */
.page-hero__sub, .ph__sub {
  max-width: 100% !important; min-width: 0 !important;
  white-space: normal !important; overflow-wrap: anywhere !important;
  word-break: normal !important; hyphens: none !important; text-wrap: pretty;
  padding-right: 2px;
}
@media (max-width: 767px) {
  .page-hero, .ph { overflow: hidden !important; }
  .page-hero__inner, .ph__inner, .page-hero__content { max-width: 100% !important; min-width: 0 !important; }
  .page-hero__sub, .ph__sub { font-size: 12px !important; line-height: 1.55 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE/TABLET TEXT CONTAINMENT (≤1023px) — root-cause fix for
   right-edge clipping. Desktop (≥1024px) untouched. Sits last → wins.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  *, *::before, *::after { box-sizing: border-box; }

  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { position: relative; }

  main, section, header, footer, nav, article, aside, div, form { max-width: 100%; }

  p, h1, h2, h3, h4, h5, h6, span, a, li, label, button, input, textarea,
  .t-lead, .t-body, .t-meta, .t-small,
  .hero__sub, .page-hero__sub, .ph__sub,
  .about-story__body p, .about-story__lede, .about-story__pull,
  .about-mission__quote, .about-champ__copy p,
  .join__sub, .join-v2__form-sub, .about-close__sub,
  .sp-join__sub, .sp-benefit__copy, .partner-detail__copy,
  .news-card__excerpt, .ad-body p, .pp-narrative p,
  .coach-feature__bio p, .faq p, .placeholder__copy {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal;
    hyphens: none;
  }

  /* Containers: full width, consistent padding, never clip text. */
  .container, .page-hero__inner, .ph__inner, .hero__content,
  .section__inner, .about-story__body, .about-story__masthead {
    width: 100%; max-width: 100%; min-width: 0;
  }

  /* Flex/grid children must be allowed to shrink (the #1 clipping cause). */
  .container > *, .grid > *, [class*="grid"] > *, [class*="flex"] > *,
  .card, .panel, .news-card, .result-card, .fixture-card,
  .about-story, .about-story > *, .sp-join, .coach-feature,
  .hero__content, .hero__content > * { min-width: 0; }

  img, video, svg, canvas { max-width: 100%; height: auto; }
}


/* ═══ PROSE WORD-BREAK FIX — keep whole words intact (override 'anywhere') ══
   'anywhere' was breaking mid-word near the edge. Prose should only break a
   word as a last resort, so use 'break-word' + normal word-break. Scoped to
   readable body copy; structural containment from the global rule stays. */
@media (max-width: 1023px) {
  p, .t-lead, .t-body,
  .about-story__body p, .about-story__lede, .about-story__pull,
  .about-mission__quote, .about-champ__copy p,
  .hero__sub, .page-hero__sub, .ph__sub,
  .join__sub, .join-v2__form-sub, .about-close__sub,
  .sp-join__sub, .sp-benefit__copy, .partner-detail__copy,
  .news-card__excerpt, .ad-body p, .pp-narrative p,
  .coach-feature__bio p, .faq p, .placeholder__copy {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty;
  }
}


/* ═══ DESKTOP ONLY (≥1024px) — sub-heading 14px + vertical scroll control ══ */
@media (min-width: 1024px) {
  .page-hero__sub, .ph__sub, .hero__sub { font-size: 14px !important; line-height: 1.6 !important; }
}

/* Vertical up/down scroll control — desktop only, hidden on mobile/tablet. */
.scroll-nav { display: none; }
@media (min-width: 1024px) {
  .scroll-nav {
    display: flex; flex-direction: column; gap: 8px;
    position: fixed; right: 22px; bottom: 28px; z-index: 1200;
  }
  .scroll-nav__btn {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--hairline-volt);
    background: rgba(7,29,41,0.82); color: var(--volt);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer; display: grid; place-items: center;
    font-size: 18px; line-height: 1; transition: background var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
  }
  .scroll-nav__btn:hover { background: var(--volt); color: var(--navy); }
  .scroll-nav__btn:active { transform: translateY(1px); }
  .scroll-nav__btn[disabled] { opacity: 0.3; pointer-events: none; }
}


/* ═══ ABOUT JOURNEY (desktop ≥1024px) — horizontal scroll rail, ALL events ══
   The paged-transform carousel only advanced a fraction of a card, hiding the
   later milestones. Switch desktop to a clean horizontal scroll rail so all 7
   events are reachable. Mobile (≤767px stacked) is untouched. */
@media (min-width: 1024px) {
  .about-tl__viewport {
    overflow-x: auto !important; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    scroll-padding-left: 4px; padding-bottom: 10px;
  }
  .about-tl__viewport::-webkit-scrollbar { height: 8px; }
  .about-tl__viewport::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 9999px; }
  .about-tl__viewport::-webkit-scrollbar-thumb { background: var(--hairline-volt); border-radius: 9999px; }
  .about-tl__track {
    transform: none !important; gap: 16px !important; width: max-content !important;
  }
  .about-tl__card { flex: 0 0 320px !important; scroll-snap-align: start; }
}


/* ═══ DESKTOP (≥1024px) — restore original mission quote + story sizes ═════
   Several earlier mobile-intended reductions were applied globally and shrank
   desktop. Restore the approved desktop scale here. Mobile (≤1023) untouched. */
@media (min-width: 1024px) {
  .about-mission__quote { font-size: clamp(30px, 3.4vw, 52px) !important; line-height: 1.18 !important; }
  .about-mission__quote em { font-size: inherit !important; }

  .about-story__lede { font-size: clamp(20px, 1.65vw, 24px) !important; line-height: 1.55 !important; }
  .about-story__body p { font-size: var(--fs-lead) !important; line-height: 1.72 !important; }
  .about-story__pull { font-size: clamp(24px, 2.4vw, 36px) !important; line-height: 1.15 !important; }
  .about-champ__copy p { font-size: var(--fs-body) !important; }
}


/* ═══ HOMEPAGE "OUR STORY" (kit-reveal) — desktop (≥1024px) sizing ═════════
   Re-assert a comfortable desktop scale. Mobile (≤767) untouched. */
@media (min-width: 1024px) {
  .kit-reveal__title { font-size: clamp(48px, 5vw, 72px) !important; line-height: 0.95 !important; }
  .kit-reveal__copy p { font-size: var(--fs-lead) !important; line-height: 1.6 !important; max-width: 480px !important; }
  .kit-reveal__copy .t-eyebrow { font-size: 12px !important; }
}


/* ═══ DESKTOP (≥1024px) — smaller OUR STORY copy ══════════════════════════ */
@media (min-width: 1024px) {
  .kit-reveal__copy p { font-size: 15px !important; line-height: 1.55 !important; }
}

/* ═══ TEAMS · FIRST TEAM (≥1024px) — position groups as horizontal sliders ═
   Mirrors the mobile swipe rails: each position group (GK/DEF/MID/ATT) becomes
   a horizontal scroll rail of player cards. Mobile (≤767) already does this and
   is untouched; this only adds the behaviour on desktop. */
@media (min-width: 1024px) {
  .squad-grid--full {
    display: flex !important; flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    gap: 16px !important; padding-bottom: 12px; scroll-padding-left: 4px;
  }
  .squad-grid--full > * { flex: 0 0 200px !important; scroll-snap-align: start; min-width: 0; }
  .squad-grid--full::-webkit-scrollbar { height: 8px; }
  .squad-grid--full::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 9999px; }
  .squad-grid--full::-webkit-scrollbar-thumb { background: var(--hairline-volt); border-radius: 9999px; }
  .squad-pos-group { margin-bottom: var(--sp-5); }
}


/* ═══ TEAMS · FIRST TEAM (≥1024px) — match the HOME PAGE squad slider look ══
   Clean horizontal rail per position group: smooth snap, hidden scrollbar,
   a peek of the next card. Mobile (≤767) untouched. */
@media (min-width: 1024px) {
  .squad-grid--full {
    display: flex !important; flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-left: 4px;
    gap: 18px !important; padding: 4px 0 16px !important;
    scrollbar-width: none !important;          /* hidden like the home roller */
  }
  .squad-grid--full::-webkit-scrollbar { display: none !important; }
  .squad-grid--full > * {
    flex: 0 0 210px !important; scroll-snap-align: start; min-width: 0;
  }
  /* subtle 'swipe' affordance under each group, mirroring the home rail */
  .squad-pos-group { position: relative; margin-bottom: var(--sp-6); }
}


/* ═══ TEAMS · FIRST TEAM (≥1024px) — VISIBLE slider track under each rail ══ */
@media (min-width: 1024px) {
  .squad-grid--full {
    scrollbar-width: thin !important;
    scrollbar-color: var(--volt) rgba(255,255,255,0.06) !important;
    padding-bottom: 14px !important;
  }
  .squad-grid--full::-webkit-scrollbar { display: block !important; height: 10px !important; }
  .squad-grid--full::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06) !important; border-radius: 9999px !important;
  }
  .squad-grid--full::-webkit-scrollbar-thumb {
    background: var(--volt) !important; border-radius: 9999px !important;
    border: 2px solid transparent; background-clip: padding-box;
  }
  .squad-grid--full::-webkit-scrollbar-thumb:hover { background: var(--volt) !important; }
}


/* ═══ MOBILE-ONLY (≤767px) — bigger mission quote ═════════════════════════ */
@media (max-width: 767px) {
  .about-mission__quote { font-size: 18px !important; line-height: 1.32 !important; }
}

/* ═══ TEAMS · FIRST TEAM (≤767px) — replace "SWIPE →" with a volt slider bar ═ */
@media (max-width: 767px) {
  /* Remove the text affordance. */
  .squad-pos-group::after { content: none !important; display: none !important; }
  /* Show a visible volt scrollbar under each position rail. */
  .squad-grid--full {
    scrollbar-width: thin !important;
    scrollbar-color: var(--volt) rgba(255,255,255,0.08) !important;
    padding-bottom: 12px !important;
  }
  .squad-grid--full::-webkit-scrollbar { display: block !important; height: 8px !important; }
  .squad-grid--full::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.08) !important; border-radius: 9999px !important;
  }
  .squad-grid--full::-webkit-scrollbar-thumb {
    background: var(--volt) !important; border-radius: 9999px !important;
  }
}