:root {
  --bg: #020817;
  --bg-2: #07132b;
  --ink: #ffffff;
  --muted: #b8c3dd;
  --line: rgba(255, 255, 255, 0.13);
  --panel: rgba(17, 18, 53, 0.88);
  --panel-2: rgba(34, 17, 67, 0.88);
  --yellow: #ffd000;
  --yellow-2: #ffb400;
  --purple: #7a23d3;
  --pink: #e010ab;
  --cyan: #39c5ff;
  --green: #13ba4a;
  --red: #ed2024;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 15%, rgba(122, 35, 211, 0.2), transparent 34rem),
    radial-gradient(circle at 80% 35%, rgba(255, 208, 0, 0.09), transparent 30rem),
    linear-gradient(180deg, #020817 0%, #071124 42%, #07051d 100%);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

.site-shell {
  width: min(100%, 1500px);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(2, 8, 23, 0.8), rgba(6, 8, 31, 0.96));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.site-ad-slot {
  display: grid;
  justify-items: center;
  min-height: 290px;
  padding: 18px clamp(10px, 4vw, 44px) 22px;
  overflow: hidden;
  background: #040918;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-ad-label {
  margin-bottom: 8px;
  color: #8f9bb3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-ad-frame {
  width: 300px;
  height: 250px;
  max-width: 100%;
  overflow: hidden;
}

.site-ad-frame iframe {
  display: block;
  width: 300px;
  max-width: 100%;
  height: 250px;
  border: 0;
  position: relative;
  z-index: 2;
}

.top-strip,
.main-header,
main,
.site-footer {
  padding-left: clamp(18px, 4vw, 44px);
  padding-right: clamp(18px, 4vw, 44px);
}

.top-strip {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #020712;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #d8deee;
  font-size: 12px;
}

.top-strip p {
  margin: 0;
  font-weight: 600;
}

.top-strip nav,
.primary-nav,
.header-actions {
  display: flex;
  align-items: center;
}

.top-strip nav {
  gap: 22px;
  white-space: nowrap;
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 98px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  background: rgba(4, 12, 32, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #061128;
  background: conic-gradient(from 90deg, var(--yellow), var(--pink), #20e269, #39c5ff, var(--yellow));
  clip-path: polygon(50% 0, 62% 30%, 96% 16%, 77% 50%, 100% 80%, 62% 70%, 50% 100%, 38% 70%, 0 80%, 23% 50%, 4% 16%, 38% 30%);
  font-family: Anton, sans-serif;
  font-size: 16px;
}

.brand-text strong {
  display: block;
  font-family: Anton, sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
}

.brand-text small {
  display: block;
  color: #c8d4f0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.year {
  color: var(--yellow);
  font-family: Anton, sans-serif;
  font-size: 36px;
}

.primary-nav {
  justify-content: center;
  gap: clamp(12px, 1.7vw, 28px);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
}

.primary-nav a {
  position: relative;
  padding: 38px 0;
  color: #edf2ff;
  white-space: nowrap;
}

.primary-nav a.active {
  color: var(--yellow);
}

.primary-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 3px;
  background: var(--yellow);
}

.header-actions {
  gap: 14px;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.icon-button svg {
  width: 24px;
  height: 24px;
}

.ticket-button,
.primary-button,
.secondary-button,
.team-card a,
.newsletter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
}

.ticket-button,
.primary-button,
.newsletter button {
  color: #061128;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  box-shadow: 0 10px 24px rgba(255, 208, 0, 0.24);
}

.secondary-button {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}

.compact {
  min-height: 40px;
  padding: 0 22px;
  font-size: 15px;
}

.full {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(90deg, rgba(3, 8, 22, 0.94) 0%, rgba(6, 10, 32, 0.7) 42%, rgba(5, 8, 24, 0.28) 100%),
    url("/assets/images/venues/sabina-park.webp") center/cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -6% -12% 35%;
  height: 70%;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 208, 0, 0.5), transparent 18%),
    radial-gradient(circle at 58% 45%, rgba(224, 16, 171, 0.65), transparent 28%),
    radial-gradient(circle at 74% 58%, rgba(57, 197, 255, 0.5), transparent 28%);
  filter: saturate(1.3);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 58px 0 70px 22px;
}

.eyebrow {
  margin: 0 0 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.eyebrow span,
h2 span,
.tickets-card h2 span,
.countdown-card h2,
.key-info strong,
.numbers-card dt {
  color: var(--yellow);
}

.hero h1 {
  max-width: 610px;
  margin: 0;
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(56px, 6.2vw, 92px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.hero h1 span {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: clamp(28px, 2.7vw, 42px);
}

.hero-tagline {
  max-width: 610px;
  margin: 8px 0 0;
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.hero-tagline span {
  display: block;
  color: var(--yellow);
}

.lead {
  max-width: 490px;
  margin: 24px 0 30px;
  color: #eef3ff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.hero-players {
  position: relative;
  z-index: 2;
  min-height: 470px;
}

.player-stage {
  position: absolute;
  right: -5%;
  bottom: -28px;
  width: min(850px, 112%);
  height: 510px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr 0.92fr;
  align-items: end;
  gap: 18px;
  padding: 64px 38px 74px;
}

.player-stage::before {
  content: "";
  position: absolute;
  inset: 60px 6% 58px 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 48%, rgba(255, 208, 0, 0.55), transparent 18%),
    radial-gradient(circle at 38% 50%, rgba(224, 16, 171, 0.55), transparent 29%),
    radial-gradient(circle at 66% 52%, rgba(57, 197, 255, 0.44), transparent 29%);
  filter: blur(12px);
}

.player-stage::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  filter: blur(16px);
}

.action-card {
  position: relative;
  z-index: 2;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(6, 10, 32, 0.86));
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.34);
}

.action-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--action-image) center/cover;
  opacity: 0.86;
  filter: saturate(1.12) contrast(1.06);
}

.action-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 18%, rgba(3, 8, 22, 0.2) 52%, rgba(3, 8, 22, 0.92)),
    radial-gradient(circle at 50% 18%, var(--action-glow), transparent 44%);
}

.action-card span {
  position: relative;
  z-index: 2;
  width: calc(100% - 22px);
  margin-bottom: 12px;
  padding: 11px 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(5, 8, 24, 0.78);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.action-bat {
  --action-image: url("/assets/images/news/cpl-2026-schedule-announced.webp");
  --action-glow: rgba(255, 208, 0, 0.42);
  transform: rotate(-5deg) translateY(28px);
}

.action-crowd {
  --action-image: url("/assets/images/venues/sabina-park.webp");
  --action-glow: rgba(224, 16, 171, 0.38);
  min-height: 390px;
}

.action-ball {
  --action-image: url("/assets/images/venues/arnos-vale-stadium.webp");
  --action-glow: rgba(57, 197, 255, 0.36);
  transform: rotate(5deg) translateY(28px);
}

.player-badges {
  position: absolute;
  z-index: 3;
  left: 18%;
  right: 12%;
  bottom: 24px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.player-badges span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 8, 24, 0.72);
  backdrop-filter: blur(8px);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.feature-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: -34px;
  padding: 0 clamp(18px, 4vw, 44px);
}

.feature-strip article,
.panel,
.team-card,
.social-grid article {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(21, 24, 62, 0.94), rgba(14, 17, 45, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.feature-strip article {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.feature-strip article:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.feature-strip article:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.feature-strip svg,
.key-info svg,
.fan-zone svg,
.newsletter svg {
  flex: 0 0 auto;
  color: var(--yellow);
}

.feature-strip strong,
.feature-strip span {
  display: block;
}

.feature-strip strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  text-transform: uppercase;
}

.feature-strip span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

main {
  padding-top: 24px;
  padding-bottom: 0;
}

.overview-grid,
.dashboard-grid,
.lower-grid,
.venue-fan-grid {
  display: grid;
  gap: 14px;
}

.overview-grid {
  grid-template-columns: 1.9fr 1fr 1.1fr 1.5fr;
}

.panel {
  border-radius: var(--radius);
  padding: 20px;
}

h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: 18px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.countdown div {
  min-height: 84px;
  display: grid;
  place-items: center;
  padding: 10px 6px;
  border-radius: 6px;
  background: rgba(80, 30, 148, 0.58);
}

.countdown strong,
.countdown span {
  display: block;
  text-align: center;
  text-transform: uppercase;
}

.countdown strong {
  font-size: 38px;
  line-height: 1;
}

.countdown span {
  color: #dce3fa;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.meta-list {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 20px 0;
  list-style: none;
  color: #dce3fa;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.meta-list li,
.card-actions,
.section-heading,
.latest-news article,
.fixture-list article,
.top-players li,
.newsletter,
.site-footer .legal {
  display: flex;
  align-items: center;
}

.meta-list svg {
  width: 18px;
  margin-right: 8px;
  color: var(--muted);
  vertical-align: middle;
}

.card-actions {
  gap: 12px;
  flex-wrap: wrap;
}

.key-info ul {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.key-info li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 12px;
}

.key-info svg {
  grid-row: span 2;
}

.key-info strong,
.key-info span {
  display: block;
}

.key-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: center;
}

.partner-grid span {
  min-height: 72px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
}

.partner-grid span:nth-child(2) {
  color: var(--yellow);
}

.disclosure {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.tickets-card {
  background:
    linear-gradient(90deg, rgba(20, 16, 48, 0.95), rgba(42, 13, 62, 0.62)),
    url("/assets/images/news/cpl-2026-tv-guide.webp") center/cover;
}

.tickets-card p {
  max-width: 270px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.section-block,
.dashboard-grid,
.lower-grid,
.venue-fan-grid,
.social-section,
.newsletter,
.site-footer {
  margin-top: 22px;
}

.section-heading {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.section-heading a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d5a4ff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.section-heading svg {
  width: 16px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

.team-card {
  position: relative;
  min-height: 268px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  border-radius: 6px;
  padding: 22px 10px;
  text-align: center;
}

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, var(--team-glow, rgba(255, 208, 0, 0.18)), transparent 44%);
  pointer-events: none;
}

.team-logo {
  position: relative;
  z-index: 1;
  width: 116px;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.38));
}

.team-code {
  position: relative;
  z-index: 1;
  min-width: 54px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #061128;
  background: var(--team-accent, var(--yellow));
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.team-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  line-height: 1.05;
}

.team-card a {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 24px;
  font-size: 15px;
  color: #fff;
  background: var(--team-accent, var(--purple));
}

.jk {
  --team-accent: #c59b49;
  --team-glow: rgba(197, 155, 73, 0.28);
}

.tkr {
  --team-accent: #cf20b8;
  --team-glow: rgba(207, 32, 184, 0.28);
}

.gaw {
  --team-accent: #0aa636;
  --team-glow: rgba(10, 166, 54, 0.3);
}

.br {
  --team-accent: #ffd000;
  --team-glow: rgba(255, 208, 0, 0.26);
}

.br a,
.br .team-code {
  color: #11142b;
}

.slk {
  --team-accent: #1f9ee9;
  --team-glow: rgba(31, 158, 233, 0.3);
}

.sknp {
  --team-accent: #12ba65;
  --team-glow: rgba(18, 186, 101, 0.28);
}

.abf {
  --team-accent: #ed2024;
  --team-glow: rgba(237, 32, 36, 0.28);
}

.dashboard-grid {
  grid-template-columns: 0.85fr 1.18fr 1fr;
}

.numbers-card dl {
  display: grid;
  gap: 20px;
  margin: 0;
}

.numbers-card dl div {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
}

.numbers-card dt {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  font-weight: 900;
}

.numbers-card dd {
  margin: 0;
  color: #dce3fa;
  font-weight: 700;
}

.video-thumb {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

.video-thumb img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  opacity: 0.78;
}

.video-thumb button {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.video-thumb > div {
  position: absolute;
  left: 18px;
  right: 88px;
  bottom: 18px;
}

.video-thumb strong,
.video-thumb span {
  display: block;
}

.video-thumb strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 25px;
  text-transform: uppercase;
}

.video-thumb span {
  color: #dce3fa;
  font-weight: 700;
}

.video-thumb time {
  position: absolute;
  right: 14px;
  bottom: 18px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.68);
}

.latest-news {
  display: grid;
  align-content: start;
  gap: 14px;
}

.latest-news article {
  gap: 12px;
  min-height: 96px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.latest-news img {
  width: 96px;
  height: 74px;
  border-radius: 4px;
  object-fit: cover;
}

.latest-news div {
  flex: 1;
  min-width: 0;
}

.latest-news span {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 6px;
  border-radius: 3px;
  color: #fff;
  background: var(--purple);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.latest-news strong,
.latest-news small {
  display: block;
}

.latest-news strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  line-height: 1.05;
  text-transform: uppercase;
}

.latest-news small {
  margin-top: 4px;
  color: var(--muted);
}

.latest-news b,
.top-players b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21px;
  text-transform: uppercase;
  white-space: nowrap;
}

.latest-news em {
  min-width: 72px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  color: #f2d75c;
  background: rgba(255, 208, 0, 0.08);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.lower-grid {
  grid-template-columns: 0.95fr 1fr 1.1fr;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 10px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.points-card .secondary-button {
  margin-top: 20px;
  background: linear-gradient(180deg, #651ae1, #5713c4);
  border: 0;
}

.panel-note {
  margin: -8px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 12px;
  color: #bfc8e1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.last-updated svg {
  width: 13px;
  height: 13px;
  color: var(--yellow);
}

.live-score-card {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 208, 0, 0.13), rgba(57, 197, 255, 0.08)),
    rgba(255, 255, 255, 0.04);
}

.live-score-card span,
.live-score-card strong,
.live-score-card small {
  display: block;
}

.live-score-card span {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.live-score-card strong {
  font-family: Anton, sans-serif;
  font-size: 48px;
  line-height: 1;
}

.live-score-card small {
  max-width: 360px;
  color: #dce3fa;
  font-weight: 700;
  line-height: 1.5;
}

.fixture-list {
  display: grid;
}

.fixture-list article {
  position: relative;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fixture-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fixture-list time {
  width: 54px;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.fixture-list strong {
  width: 122px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 25px;
  text-transform: uppercase;
}

.fixture-list strong span {
  color: var(--muted);
  font-size: 14px;
}

.fixture-list small {
  flex: 1;
  color: var(--muted);
}

.fixture-list b {
  color: #fff;
  white-space: nowrap;
}

.top-players ol {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.top-players li {
  gap: 12px;
}

.top-players li > span {
  width: 26px;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px;
  font-weight: 900;
}

.top-players img,
.player-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.top-players img {
  object-fit: cover;
}

.player-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #061128;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.74), transparent 28%),
    linear-gradient(135deg, var(--yellow), #39c5ff);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.top-players div {
  flex: 1;
}

.top-players strong,
.top-players small {
  display: block;
}

.top-players strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

.top-players .player-avatar {
  display: grid;
  font-size: 20px;
  line-height: 1;
}

.top-players small {
  color: var(--muted);
}

.venue-fan-grid {
  grid-template-columns: 1.05fr 1.08fr;
}

.venue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.venue-grid figure {
  margin: 0;
}

.venue-grid img {
  width: 100%;
  aspect-ratio: 1.55;
  object-fit: cover;
  border-radius: 5px;
}

.venue-grid figcaption {
  margin-top: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 900;
}

.venue-grid span {
  display: block;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-size: 12px;
}

.fan-zone {
  background:
    linear-gradient(90deg, rgba(17, 18, 53, 0.96), rgba(46, 14, 74, 0.68)),
    url("/assets/images/news/cpl-2026-tv-guide.webp") center right/cover;
}

.fan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 72%;
}

.fan-grid a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 10px;
}

.fan-grid svg {
  grid-row: span 2;
}

.fan-grid strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  text-transform: uppercase;
}

.fan-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.social-section h2 {
  margin-bottom: 14px;
}

.faq-section {
  margin-top: 22px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.faq-grid article {
  min-height: 160px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 24, 62, 0.94), rgba(14, 17, 45, 0.9));
}

.faq-grid h3 {
  margin-bottom: 10px;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
}

.faq-grid p {
  margin-bottom: 0;
  color: #dce3fa;
  font-weight: 700;
  line-height: 1.55;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.social-grid article {
  min-height: 150px;
  padding: 16px;
  border-radius: 6px;
}

.social-grid strong {
  display: block;
  margin-bottom: 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}

.social-grid p {
  margin-bottom: 12px;
  color: #dce3fa;
  font-weight: 700;
  line-height: 1.45;
}

.social-grid img {
  width: 100%;
  height: 78px;
  margin-bottom: 8px;
  border-radius: 4px;
  object-fit: cover;
}

.social-grid time {
  color: var(--muted);
  font-size: 12px;
}

.newsletter {
  justify-content: space-between;
  gap: 28px;
  padding: 22px 30px;
  border-radius: 6px;
  background: linear-gradient(90deg, #4c16bc, #8a23dc 55%, #5316a7);
}

.newsletter > div {
  display: flex;
  align-items: center;
  gap: 18px;
}

.newsletter h2,
.newsletter p {
  margin: 0;
}

.newsletter p {
  color: #e7ddff;
}

.newsletter form {
  flex: 1;
  display: flex;
  max-width: 860px;
  min-width: 280px;
}

.newsletter input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: rgba(255, 255, 255, 0.13);
}

.newsletter input::placeholder {
  color: #cab8ee;
}

.newsletter button {
  min-width: 250px;
  border: 0;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.content-guide,
.intent-checklist {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 24, 62, 0.94), rgba(14, 17, 45, 0.9));
}

.content-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  padding: clamp(22px, 4vw, 36px);
}

.compact-guide {
  grid-template-columns: minmax(0, 1fr);
}

.content-copy h2 {
  max-width: 780px;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
}

.content-copy p {
  max-width: 860px;
  color: #dce3fa;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.72;
}

.lead-copy {
  color: #fff !important;
  font-size: 18px !important;
}

.topic-grid {
  display: grid;
  gap: 14px;
}

.topic-grid article,
.intent-checklist article {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.topic-grid article {
  padding: 18px;
}

.topic-grid h3 {
  margin-bottom: 8px;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.topic-grid p {
  margin-bottom: 0;
  color: #dce3fa;
  font-weight: 700;
  line-height: 1.55;
}

.internal-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.internal-link-row a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(255, 208, 0, 0.07);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.intent-checklist {
  padding: 24px;
}

.intent-checklist > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.intent-checklist article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 14px;
  color: #fff;
  font-weight: 800;
}

.intent-checklist svg {
  flex: 0 0 auto;
  color: var(--yellow);
}

.page-hero {
  margin-top: 22px;
  padding: clamp(34px, 7vw, 76px) clamp(18px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(3, 8, 22, 0.94), rgba(11, 17, 51, 0.72)),
    url("/assets/images/venues/sabina-park.webp") center/cover;
}

.page-hero h1 {
  max-width: 900px;
  margin: 0;
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.95;
  text-transform: uppercase;
}

.page-hero p:last-child {
  max-width: 720px;
  margin: 18px 0 0;
  color: #e4ebff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.listing-grid .team-card {
  min-height: 300px;
}

.list-card {
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.list-card img {
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
  border-radius: 6px;
}

.player-card {
  justify-items: start;
}

.player-card-photo {
  width: 120px !important;
  height: 120px !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: top center;
  background: rgba(255, 255, 255, 0.06);
}

.player-profile-photo {
  margin-top: 22px;
}

.player-profile-photo img {
  width: min(340px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21, 24, 62, 0.94), rgba(14, 17, 45, 0.9));
}

.list-card h2 {
  margin-bottom: 0;
}

.list-card p {
  color: #dce3fa;
  font-weight: 700;
  line-height: 1.55;
}

.tag {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 3px;
  color: #fff;
  background: var(--purple);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.single-panel {
  margin-top: 22px;
}

.single-panel > .panel {
  max-width: 980px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.detail-panel {
  max-width: 980px;
}

.detail-panel dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.detail-panel dl div {
  padding: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.detail-panel dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-panel dd {
  margin: 5px 0 0;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-panel p {
  max-width: 760px;
  color: #dce3fa;
  font-weight: 700;
  line-height: 1.65;
}

.site-footer {
  padding-top: 34px;
  padding-bottom: 28px;
  background: #040b1c;
}

.site-footer {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 34px;
}

.footer-brand p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.site-footer nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.site-footer strong {
  display: block;
  margin-bottom: 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  text-transform: uppercase;
}

.site-footer a,
.site-footer span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.site-footer .legal {
  grid-column: 1 / -1;
  gap: 18px;
  padding-top: 24px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .legal span {
  margin-right: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 1220px) {
  .main-header {
    grid-template-columns: 1fr auto;
  }

  .primary-nav {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .primary-nav a {
    padding: 0 0 18px;
  }

  .overview-grid,
  .dashboard-grid,
  .lower-grid,
  .venue-fan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid,
  .social-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .top-strip,
  .main-header,
  main,
  .site-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .top-strip {
    display: none;
  }

  .main-header {
    position: static;
    min-height: auto;
    padding-top: 16px;
    padding-bottom: 8px;
    gap: 12px;
  }

  .brand-text strong {
    font-size: 32px;
  }

  .year {
    font-size: 28px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 780px;
  }

  .hero-copy {
    padding: 42px 0 12px;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero h1 span {
    font-size: 28px;
  }

  .hero-tagline {
    font-size: 52px;
  }

  .hero-players {
    min-height: 370px;
  }

  .player-stage {
    right: -18%;
    bottom: -18px;
    width: 126%;
    height: 390px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 60px 22px 62px;
  }

  .action-card {
    min-height: 230px;
  }

  .action-crowd {
    min-height: 280px;
  }

  .action-card span {
    font-size: 15px;
  }

  .player-badges {
    left: 10%;
    right: 10%;
    bottom: 22px;
    flex-wrap: wrap;
  }

  .player-badges span {
    min-height: 30px;
    padding: 0 10px;
    font-size: 14px;
  }

  .feature-strip,
  .overview-grid,
  .dashboard-grid,
  .lower-grid,
  .venue-fan-grid,
  .team-grid,
  .venue-grid,
  .social-grid,
  .faq-grid,
  .site-footer,
  .site-footer nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-strip {
    margin-top: 14px;
    padding: 0;
  }

  .feature-strip article,
  .feature-strip article:first-child,
  .feature-strip article:last-child {
    border-radius: var(--radius);
  }

  .countdown {
    grid-template-columns: repeat(2, 1fr);
  }

  .fan-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .newsletter,
  .newsletter > div,
  .newsletter form {
    display: grid;
  }

  .newsletter button,
  .newsletter input {
    width: 100%;
    min-width: 0;
    border-radius: 4px;
    border: 0;
  }

  .listing-grid,
  .content-guide,
  .detail-panel dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .intent-checklist > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer .legal {
    display: grid;
    gap: 8px;
  }
}

/* User-provided image hero mode. Put the supplied image at:
   /assets/images/hero/cpl-2026-reference-hero.webp */
.hero.hero-image-only {
  display: block;
  position: relative;
  min-height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  background:
    url("/assets/images/hero/cpl-2026-reference-hero.webp") center top / cover no-repeat,
    linear-gradient(135deg, #050816, #160726 55%, #ff9d00);
}

.hero.hero-image-only::before,
.hero.hero-image-only::after {
  display: none;
}

.hero-image-links {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hero-hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  color: transparent;
  text-decoration: none;
  outline-offset: 3px;
  -webkit-tap-highlight-color: rgba(255, 204, 0, 0.2);
}

.hero-hotspot:focus-visible {
  outline: 3px solid #ffcc00;
  background: rgba(255, 204, 0, 0.14);
}

.hero-hotspot-logo {
  left: 2.3%;
  top: 3.8%;
  width: 19.2%;
  height: 8.8%;
}

.hero-hotspot-home {
  left: 25.8%;
  top: 4.6%;
  width: 4.5%;
  height: 7.3%;
}

.hero-hotspot-teams {
  left: 32.1%;
  top: 4.6%;
  width: 5.5%;
  height: 7.3%;
}

.hero-hotspot-schedule {
  left: 38.9%;
  top: 4.6%;
  width: 7.4%;
  height: 7.3%;
}

.hero-hotspot-live {
  left: 47.5%;
  top: 4.6%;
  width: 4.8%;
  height: 7.3%;
}

.hero-hotspot-stats {
  left: 52.9%;
  top: 4.6%;
  width: 4.8%;
  height: 7.3%;
}

.hero-hotspot-news {
  left: 58.5%;
  top: 4.6%;
  width: 5.1%;
  height: 7.3%;
}

.hero-hotspot-more {
  left: 64%;
  top: 4.6%;
  width: 6.2%;
  height: 7.3%;
}

.hero-hotspot-tickets-top {
  left: 87.8%;
  top: 4.1%;
  width: 10.3%;
  height: 7.8%;
}

.hero-hotspot-view-schedule {
  left: 3.5%;
  top: 75.6%;
  width: 16.6%;
  height: 8.2%;
}

.hero-hotspot-book-tickets {
  left: 21.2%;
  top: 75.6%;
  width: 16.7%;
  height: 8.2%;
}

.hero-hotspot-vibes {
  left: 73.8%;
  top: 84%;
  width: 23.5%;
  height: 11%;
}

.hero-seo-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .hero.hero-image-only {
    aspect-ratio: 16 / 9;
    min-height: auto;
    background-position: center top;
  }
}

/* Reference polish pass: tighter CPL dashboard layout with player-led hero. */
.site-shell {
  width: min(100%, 1440px);
}

.top-strip {
  min-height: 34px;
  font-size: 11px;
}

.main-header {
  min-height: 86px;
  gap: 22px;
  background:
    linear-gradient(180deg, rgba(5, 13, 37, 0.98), rgba(4, 10, 29, 0.96));
}

.brand-mark {
  width: 52px;
  height: 52px;
}

.brand-text strong {
  font-size: 36px;
}

.year {
  font-size: 32px;
}

.primary-nav {
  gap: clamp(11px, 1.35vw, 22px);
  font-size: 15px;
}

.primary-nav a {
  padding: 34px 0;
}

.ticket-button,
.primary-button,
.secondary-button,
.team-card a,
.newsletter button {
  min-height: 42px;
  padding: 0 22px;
  font-size: 15px;
}

.hero {
  min-height: 540px;
  grid-template-columns: minmax(390px, 0.9fr) minmax(560px, 1.1fr);
  background:
    linear-gradient(90deg, rgba(3, 7, 22, 0.96) 0%, rgba(4, 9, 27, 0.82) 35%, rgba(6, 8, 26, 0.42) 72%, rgba(4, 7, 20, 0.16) 100%),
    linear-gradient(180deg, rgba(5, 11, 35, 0.18), rgba(5, 8, 24, 0.82)),
    url("/assets/images/venues/sabina-park.webp") center/cover;
}

.hero::before {
  inset: auto -6% -10% 31%;
  height: 78%;
  background:
    radial-gradient(circle at 34% 64%, rgba(255, 208, 0, 0.76), transparent 15%),
    radial-gradient(circle at 49% 55%, rgba(224, 16, 171, 0.75), transparent 25%),
    radial-gradient(circle at 68% 59%, rgba(57, 197, 255, 0.58), transparent 27%),
    linear-gradient(100deg, rgba(255, 208, 0, 0.42), rgba(224, 16, 171, 0.36), rgba(57, 197, 255, 0.32));
  clip-path: polygon(0 42%, 16% 26%, 24% 46%, 38% 12%, 48% 44%, 64% 16%, 72% 46%, 94% 28%, 100% 78%, 0 100%);
  filter: saturate(1.35);
}

.hero-copy {
  position: relative;
  z-index: 5;
  padding: 50px 0 62px 22px;
}

.eyebrow {
  margin-bottom: 8px;
  font-size: 19px;
}

.hero h1 {
  max-width: 590px;
  font-size: clamp(58px, 5.8vw, 88px);
  line-height: 1.05;
}

.hero h1 span {
  max-width: 520px;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 0.92;
}

.hero-tagline {
  margin-top: 6px;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(50px, 6vw, 92px);
  line-height: 0.9;
  transform: rotate(-2deg);
}

.lead {
  max-width: 500px;
  margin: 20px 0 26px;
  font-size: 16px;
  line-height: 1.55;
}

.hero-players {
  min-height: 540px;
  isolation: isolate;
}

.player-stage {
  right: -4%;
  bottom: -22px;
  width: min(980px, 112%);
  height: 548px;
  display: block;
  padding: 0;
}

.player-stage::before {
  inset: 72px 3% 48px 4%;
  background:
    radial-gradient(circle at 43% 50%, rgba(255, 208, 0, 0.54), transparent 18%),
    radial-gradient(circle at 39% 55%, rgba(224, 16, 171, 0.58), transparent 29%),
    radial-gradient(circle at 70% 52%, rgba(57, 197, 255, 0.5), transparent 31%);
}

.player-stage::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 2%;
  bottom: 0;
  z-index: 1;
  height: 30%;
  background:
    linear-gradient(95deg, rgba(255, 208, 0, 0.34), rgba(226, 15, 178, 0.3), rgba(46, 190, 255, 0.24)),
    linear-gradient(180deg, transparent, rgba(3, 7, 22, 0.72));
  clip-path: polygon(0 36%, 38% 12%, 100% 26%, 100% 100%, 0 100%);
  opacity: 0.95;
}

.action-card {
  display: none;
}

.hero-player {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  display: grid;
  justify-items: center;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.55)) saturate(1.05) contrast(1.03);
}

.hero-player img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;
  image-rendering: auto;
}

.hero-player span {
  display: none;
}

.hero-player-1 {
  left: 0;
  width: 31%;
  height: 420px;
  transform: rotate(-3deg);
}

.hero-player-1 img {
  transform: scale(1.08);
}

.hero-player-2 {
  left: 30%;
  width: 37%;
  height: 540px;
  z-index: 3;
}

.hero-player-2 img {
  transform: scale(1.14);
}

.hero-player-3 {
  right: 0;
  width: 31%;
  height: 426px;
  transform: rotate(3deg);
}

.hero-player-3 img {
  transform: scale(1.08);
}

.player-badges {
  left: 30%;
  right: 18%;
  bottom: 54px;
  z-index: 4;
}

.feature-strip {
  margin-top: -28px;
}

.feature-strip article {
  min-height: 78px;
  padding: 14px 16px;
}

.feature-strip strong {
  font-size: 15px;
}

.overview-grid {
  grid-template-columns: 1.48fr 0.92fr 1.02fr 1.3fr;
}

.panel {
  padding: 18px;
  border-color: rgba(127, 91, 255, 0.32);
  background:
    linear-gradient(145deg, rgba(22, 24, 65, 0.96), rgba(10, 14, 40, 0.94));
}

h2 {
  font-size: 24px;
}

.countdown div {
  min-height: 76px;
}

.countdown strong {
  font-size: 34px;
}

.content-guide {
  margin-top: 18px;
  padding: 28px;
}

.content-copy h2 {
  font-size: clamp(30px, 3.3vw, 44px);
}

.content-copy p {
  font-size: 15px;
  line-height: 1.66;
}

.team-grid {
  gap: 12px;
}

.team-card {
  min-height: 220px;
  gap: 8px;
  padding: 18px 8px;
}

.team-logo {
  width: 92px;
  height: 92px;
}

.team-card h3 {
  font-size: 19px;
}

.team-card a {
  min-height: 34px;
  padding: 0 20px;
  font-size: 14px;
}

.dashboard-grid {
  grid-template-columns: 0.86fr 1.34fr 1.02fr;
}

.numbers-card dl {
  gap: 17px;
}

.video-thumb {
  min-height: 278px;
}

.video-thumb img {
  height: 300px;
}

.lower-grid {
  grid-template-columns: 1fr 1.02fr 1.12fr;
}

.venue-grid {
  gap: 10px;
}

.social-grid article {
  min-height: 134px;
}

@media (max-width: 1220px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 850px;
  }

  .hero-copy {
    padding-bottom: 8px;
  }

  .hero-players {
    min-height: 420px;
  }

  .player-stage {
    right: -4%;
    width: 108%;
    height: 450px;
  }

  .hero-player-1,
  .hero-player-3 {
    height: 330px;
  }

  .hero-player-2 {
    height: 420px;
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 780px;
    overflow: hidden;
  }

  .hero-copy {
    padding: 48px 22px 0;
  }

  .hero h1 {
    max-width: 100%;
    font-size: 48px;
  }

  .hero h1 span {
    max-width: 100%;
    font-size: 27px;
  }

  .hero-tagline {
    max-width: 305px;
    font-size: 30px;
    line-height: 0.95;
  }

  .lead {
    max-width: 305px;
    font-size: 15px;
  }

  .player-stage {
    right: -42%;
    width: 158%;
    height: 380px;
  }

  .hero-player span {
    display: none;
  }

  .hero-player-1,
  .hero-player-3 {
    height: 260px;
  }

  .hero-player-2 {
    height: 340px;
  }

  .feature-strip {
    margin-top: 14px;
  }
}

/* Portal upgrade: reference-inspired hero and match-center homepage flow. */
.hero {
  min-height: 620px;
  grid-template-columns: minmax(480px, 0.96fr) minmax(560px, 1.04fr);
  align-items: stretch;
  background:
    linear-gradient(90deg, rgba(3, 7, 22, 0.98) 0%, rgba(5, 8, 24, 0.9) 29%, rgba(12, 8, 30, 0.55) 58%, rgba(4, 5, 18, 0.2) 100%),
    radial-gradient(circle at 74% 42%, rgba(255, 128, 35, 0.46), transparent 27%),
    radial-gradient(circle at 68% 58%, rgba(143, 38, 255, 0.34), transparent 36%),
    url("/assets/images/venues/sabina-park.webp") center/cover;
}

.hero::before {
  inset: 0 0 auto 0;
  height: 100%;
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 208, 0, 0.42), transparent 15%),
    linear-gradient(160deg, transparent 36%, rgba(255, 96, 0, 0.22) 56%, rgba(149, 48, 255, 0.2) 78%, transparent);
  clip-path: none;
  opacity: 0.88;
}

.hero-copy {
  padding: 74px 0 44px 32px;
}

.eyebrow {
  color: #a45bff;
  font-size: 22px;
}

.hero h1 {
  max-width: 720px;
  font-size: clamp(74px, 6.7vw, 118px);
  line-height: 1.05;
}

.hero h1 span {
  max-width: 760px;
  margin-top: 14px;
  color: var(--yellow);
  font-size: clamp(42px, 4.2vw, 72px);
  line-height: 0.92;
}

.hero-tagline {
  max-width: 640px;
  margin-top: 18px;
  font-family: Inter, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 500;
  line-height: 1.28;
  text-transform: none;
  transform: none;
}

.lead {
  max-width: 635px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
}

.hero-actions {
  margin-top: 30px;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  margin-top: 36px;
  border: 1px solid rgba(127, 91, 255, 0.38);
  border-radius: 8px;
  background: rgba(9, 11, 37, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.hero-facts span {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 12px;
  align-items: center;
  padding: 18px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-facts span:last-child {
  border-right: 0;
}

.hero-facts i {
  grid-row: span 2;
  color: var(--yellow);
}

.hero-facts strong {
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 21px;
  text-transform: uppercase;
}

.hero-facts small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

.hero-players {
  min-height: 620px;
}

.player-stage {
  right: -7%;
  bottom: -26px;
  width: min(1040px, 116%);
  height: 610px;
}

.player-stage::before {
  inset: 60px 2% 56px 0;
  background:
    radial-gradient(circle at 52% 41%, rgba(255, 208, 0, 0.58), transparent 16%),
    radial-gradient(circle at 44% 58%, rgba(225, 38, 166, 0.6), transparent 28%),
    radial-gradient(circle at 70% 48%, rgba(42, 190, 255, 0.46), transparent 30%);
}

.player-stage::after {
  left: 0;
  right: 0;
  height: 25%;
}

.hero-player {
  bottom: 34px;
}

.hero-player-1 {
  left: 1%;
  width: 31%;
  height: 460px;
}

.hero-player-1 img {
  transform: scale(1.16);
}

.hero-player-2 {
  left: 31%;
  width: 39%;
  height: 600px;
}

.hero-player-2 img {
  transform: scale(1.2);
}

.hero-player-3 {
  right: 0;
  width: 32%;
  height: 470px;
}

.hero-player-3 img {
  transform: scale(1.14);
}

.hero-vibes-card {
  position: absolute;
  right: 7%;
  bottom: 70px;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 12px;
  align-items: center;
  min-width: 360px;
  padding: 18px 20px;
  border: 1px solid rgba(170, 91, 255, 0.5);
  border-radius: 8px;
  background: rgba(8, 9, 31, 0.78);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.hero-vibes-card i {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.hero-vibes-card strong {
  grid-column: 2;
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 26px;
  text-transform: uppercase;
}

.hero-vibes-card span {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.25;
}

.home-match-hub {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.opening-match {
  padding: 0;
  overflow: hidden;
}

.opening-label {
  display: flex;
  gap: 10px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, rgba(79, 20, 123, 0.75), rgba(14, 17, 49, 0.5));
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}

.opening-label span {
  color: rgba(255, 255, 255, 0.78);
}

.opening-label strong {
  color: var(--yellow);
}

.opening-match-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 72px minmax(0, 1.3fr) minmax(220px, 0.9fr) 180px;
  gap: 18px;
  align-items: center;
  padding: 24px;
}

.match-team {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0 16px;
  align-items: center;
}

.match-team img {
  grid-row: span 2;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--team-accent), transparent 55%));
}

.match-team span {
  color: var(--team-accent);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 18px;
  font-weight: 900;
}

.match-team strong {
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 34px;
  line-height: 0.98;
  text-transform: uppercase;
}

.versus {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 208, 0, 0.62);
  border-radius: 50%;
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 25px;
}

.match-venue,
.opening-actions {
  display: grid;
  gap: 10px;
}

.match-venue i {
  color: var(--yellow);
}

.match-venue strong {
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

.match-venue span {
  color: rgba(255, 255, 255, 0.72);
}

.match-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.match-card-grid .panel {
  min-height: 294px;
}

.card-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.card-title h2 {
  margin: 0;
}

.card-title span {
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(255, 208, 0, 0.12);
  color: var(--yellow);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.score-placeholder {
  display: block;
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
}

.mini-fixture {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 12px;
  align-items: center;
  margin: 28px 0;
  text-align: center;
}

.mini-fixture img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.mini-fixture strong {
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 24px;
}

.mini-fixture span {
  color: var(--muted);
}

.mini-points-card ol {
  display: grid;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.mini-points-card li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
}

.mini-points-card strong {
  color: #fff;
}

.mini-points-card em {
  color: var(--yellow);
  font-style: normal;
}

.performer-card > img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin-bottom: 12px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 208, 0, 0.2), rgba(127, 91, 255, 0.24));
}

.performer-card > strong,
.performer-card > b {
  display: block;
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
}

.performer-card > b {
  margin: 10px 0 18px;
  color: var(--yellow);
}

.portal-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.portal-grid .numbers-card {
  grid-column: 1 / -1;
}

.portal-grid .numbers-card dl {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.match-center-grid {
  grid-template-columns: 1.08fr 1fr 1.08fr;
}

.venue-fan-grid {
  grid-template-columns: 1fr 1.2fr 0.86fr;
}

.how-watch-card ul {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.how-watch-card li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 10px;
  align-items: center;
}

.how-watch-card i {
  grid-row: span 2;
  color: var(--yellow);
}

.how-watch-card strong {
  color: #fff;
}

.how-watch-card span {
  color: var(--muted);
}

@media (max-width: 1220px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 980px;
  }

  .hero-copy {
    padding-right: 28px;
  }

  .hero-players {
    min-height: 430px;
  }

  .player-stage {
    right: -6%;
    width: 108%;
    height: 460px;
  }

  .opening-match-main,
  .match-card-grid,
  .portal-grid,
  .venue-fan-grid,
  .match-center-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opening-actions,
  .match-venue,
  .portal-grid .numbers-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 760px;
  }

  .hero-copy {
    padding: 42px 20px 0;
  }

  .hero h1 {
    font-size: 52px;
  }

  .hero h1 span {
    max-width: 350px;
    font-size: 34px;
  }

  .hero-tagline {
    max-width: 330px;
    font-size: 18px;
  }

  .lead {
    max-width: 330px;
    font-size: 15px;
  }

  .hero-facts {
    grid-template-columns: 1fr;
    max-width: 330px;
    margin-top: 24px;
  }

  .hero-facts span {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 13px 16px;
  }

  .hero-facts span:last-child {
    border-bottom: 0;
  }

  .player-stage {
    display: none;
  }

  .hero-players,
  .hero-vibes-card {
    display: none;
  }

  .opening-match-main,
  .match-card-grid,
  .portal-grid,
  .venue-fan-grid,
  .match-center-grid {
    grid-template-columns: 1fr;
  }

  .opening-match-main {
    padding: 18px;
  }

  .match-team {
    grid-template-columns: 72px 1fr;
  }

  .match-team img {
    width: 72px;
    height: 72px;
  }

  .match-team strong {
    font-size: 27px;
  }

  .versus {
    justify-self: center;
  }

  .portal-grid .numbers-card dl {
    grid-template-columns: 1fr;
  }
}

/* Final hero crop: keep the user's supplied artwork, remove its baked-in menu strip,
   and let the real site header be the only navigation. */
.hero.hero-image-only {
  aspect-ratio: 1488 / 717;
  background-position: center bottom, center;
  background-repeat: no-repeat;
  background-size: auto 116.8%, cover;
}

.hero-hotspot-view-schedule {
  left: 3.5%;
  top: 71.5%;
  width: 16.6%;
  height: 9.6%;
}

.hero-hotspot-book-tickets {
  left: 21.2%;
  top: 71.5%;
  width: 16.7%;
  height: 9.6%;
}

.hero-hotspot-vibes {
  left: 73.8%;
  top: 81.5%;
  width: 23.5%;
  height: 12.8%;
}

.top-strip {
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.main-header {
  min-height: 96px;
  background: linear-gradient(180deg, rgba(3, 8, 24, 0.99), rgba(4, 10, 30, 0.98));
}

.brand-text strong,
.year,
.primary-nav,
.ticket-button {
  font-family: "Barlow Condensed", Anton, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-text strong {
  font-size: 42px;
  font-weight: 900;
  line-height: 0.86;
}

.brand-text small {
  font-size: 13px;
  font-weight: 900;
}

.year {
  font-size: 40px;
  font-weight: 900;
}

.primary-nav {
  gap: clamp(14px, 1.6vw, 30px);
  font-size: 19px;
  font-weight: 900;
}

.primary-nav a {
  padding: 37px 0;
  line-height: 1;
}

.ticket-button {
  min-height: 56px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

@media (max-width: 1220px) {
  .primary-nav {
    font-size: 18px;
  }
}

@media (max-width: 820px) {
  .hero.hero-image-only {
    aspect-ratio: 1488 / 717;
    background-position: center bottom, center;
    background-size: auto 116.8%, cover;
  }

  .brand-text strong {
    font-size: 34px;
  }

  .year {
    font-size: 32px;
  }

  .primary-nav {
    font-size: 17px;
  }

  .ticket-button {
    min-height: 46px;
    font-size: 16px;
  }
}

/* Site-wide readability polish for generated CPL Insider pages. */
:root {
  --copy: #e8eefc;
  --muted-readable: #b8c3dd;
  --panel-readable: rgba(17, 21, 58, 0.94);
}

html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--copy);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
li,
dd,
figcaption,
small,
input,
button,
table {
  letter-spacing: 0;
}

p,
li,
dd,
.content-copy p,
.topic-grid p,
.detail-panel p,
.list-card p,
.faq-grid p,
.social-grid p,
.footer-brand p {
  color: var(--copy);
  line-height: 1.68;
}

small,
.panel-note,
.last-updated,
.latest-news small,
.top-players small,
.fixture-list small,
.feature-strip span,
.site-footer a,
.site-footer span,
.venue-grid span,
.fan-grid span,
.key-info span {
  color: var(--muted-readable);
}

h2,
h3,
.section-heading a,
.secondary-button,
.primary-button,
.ticket-button,
.team-card a,
.newsletter button,
.fixture-list time,
.fixture-list strong,
.top-players strong,
.latest-news strong {
  letter-spacing: 0;
}

h2 {
  line-height: 1.08;
}

h3,
.team-card h3,
.topic-grid h3,
.faq-grid h3,
.list-card h2,
.detail-panel dd {
  line-height: 1.12;
}

a,
button,
.fixture-link {
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255, 208, 0, 0.9);
  outline-offset: 3px;
}

.panel,
.team-card,
.social-grid article,
.topic-grid article,
.intent-checklist article,
.faq-grid article {
  background: linear-gradient(145deg, var(--panel-readable), rgba(12, 17, 48, 0.94));
}

.panel {
  padding: 22px;
}

.section-heading {
  align-items: flex-start;
}

.section-heading h2 {
  max-width: 100%;
}

.section-heading a {
  min-height: 28px;
}

.feature-strip article {
  min-width: 0;
}

.feature-strip strong {
  line-height: 1.08;
}

.feature-strip span {
  line-height: 1.42;
}

.countdown strong,
.numbers-card dt,
.live-score-card strong {
  font-family: "Barlow Condensed", Anton, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.meta-list,
.key-info ul {
  line-height: 1.35;
}

.team-card {
  min-width: 0;
  padding-inline: 14px;
}

.team-card h3 {
  min-height: 48px;
  display: grid;
  align-content: center;
}

.team-card a,
.secondary-button.compact,
.primary-button.compact {
  min-height: 42px;
}

.portal-grid,
.match-center-grid,
.venue-fan-grid,
.content-guide,
.listing-grid,
.detail-layout {
  gap: 16px;
}

.latest-news article,
.fixture-list article,
.top-players li {
  min-width: 0;
}

.latest-news strong {
  font-size: 20px;
  line-height: 1.12;
}

.latest-news em {
  min-width: 82px;
  line-height: 1.12;
}

.points-card,
.fixtures-card {
  overflow-x: auto;
}

table {
  min-width: 560px;
  font-size: 14px;
  line-height: 1.35;
}

th,
td {
  padding: 11px 8px;
}

td:nth-child(2),
th:nth-child(2) {
  min-width: 170px;
}

.fixture-list article {
  align-items: flex-start;
  min-height: 70px;
}

.fixture-list time {
  flex: 0 0 58px;
  line-height: 1.02;
}

.fixture-list strong {
  flex: 0 0 132px;
  width: auto;
  line-height: 1.02;
}

.fixture-list small {
  line-height: 1.45;
}

.fixture-list b {
  padding-top: 2px;
  font-weight: 800;
}

.live-score-card small {
  color: var(--copy);
  line-height: 1.62;
}

.top-players div {
  min-width: 0;
}

.top-players strong {
  line-height: 1.08;
}

.top-players b {
  line-height: 1.05;
  text-align: right;
}

.venue-grid figcaption {
  line-height: 1.2;
}

.fan-grid a {
  min-width: 0;
}

.fan-grid strong,
.fan-grid span,
.how-watch-card strong,
.how-watch-card span {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fan-grid strong {
  line-height: 1.12;
}

.fan-grid {
  max-width: 100%;
}

.hero-seo-copy h1,
.hero-seo-copy p {
  max-width: 1px;
  overflow: hidden;
}

.faq-grid article {
  padding: 20px;
}

.faq-grid h3 {
  font-size: 23px;
}

.faq-grid p {
  margin-bottom: 0;
}

.content-copy p {
  max-width: 900px;
  font-weight: 650;
}

.lead-copy {
  line-height: 1.62 !important;
}

.topic-grid article {
  padding: 20px;
}

.intent-checklist article {
  line-height: 1.35;
}

.page-hero p:last-child {
  color: var(--copy);
  line-height: 1.62;
}

.list-card {
  gap: 14px;
}

.list-card p {
  font-weight: 650;
}

.detail-panel p {
  max-width: 840px;
  font-weight: 650;
}

.newsletter input {
  color: #fff;
  font-size: 15px;
}

.site-footer a,
.site-footer span {
  line-height: 1.35;
}

.site-footer strong {
  line-height: 1.08;
}

@media (max-width: 1220px) {
  .primary-nav {
    scrollbar-width: thin;
  }

  .portal-grid,
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fixture-list article {
    gap: 12px;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 15px;
  }

  .main-header {
    align-items: start;
  }

  .primary-nav {
    width: 100%;
    padding-bottom: 6px;
    line-height: 1;
  }

  .primary-nav a {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .panel,
  .faq-grid article,
  .topic-grid article,
  .intent-checklist {
    padding: 18px;
  }

  .section-heading {
    gap: 10px;
  }

  .section-heading a {
    white-space: normal;
    text-align: right;
  }

  .portal-grid,
  .listing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fixture-list article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  .fixture-list strong {
    flex-basis: auto;
    width: auto;
    font-size: 22px;
  }

  .fixture-list small {
    grid-column: 2 / 4;
  }

  .fixture-list b {
    justify-self: end;
  }

  .latest-news article {
    align-items: flex-start;
  }

  .latest-news img {
    width: 82px;
    height: 66px;
  }

  .latest-news em {
    display: none;
  }

  .top-players li {
    display: grid;
    grid-template-columns: 24px 54px minmax(0, 1fr) auto;
  }

  .top-players img,
  .player-avatar {
    width: 54px;
    height: 54px;
  }

  .site-footer {
    gap: 24px;
  }
}

@media (max-width: 520px) {
  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  .brand-text strong {
    font-size: 30px;
  }

  .brand-text small {
    font-size: 11px;
  }

  .year {
    font-size: 28px;
  }

  .header-actions {
    gap: 8px;
  }

  .icon-button {
    width: 40px;
    height: 40px;
  }

  .ticket-button {
    min-height: 42px;
    padding-inline: 18px;
  }

  .section-heading {
    display: grid;
  }

  .section-heading a {
    justify-self: start;
    text-align: left;
  }

  .fixture-list article {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .fixture-list b,
  .fixture-list small {
    grid-column: 2;
    justify-self: start;
  }

  .live-score-card {
    padding: 18px;
  }

  .live-score-card strong {
    font-size: 38px;
  }

  .top-players li {
    grid-template-columns: 22px 50px minmax(0, 1fr);
    align-items: center;
  }

  .top-players b {
    grid-column: 3;
    text-align: left;
  }

  .newsletter {
    padding: 18px;
  }
}

/* Visual typography refresh v3: contrast, no-wrap nav, and cleaner font loading. */
body {
  font-size: 16px !important;
  line-height: 1.68 !important;
}

.site-shell {
  width: min(100%, 1460px);
}

.top-strip {
  min-height: 38px;
  font-size: 14px !important;
}

.main-header {
  min-height: 104px;
  gap: 30px;
}

.brand-mark {
  width: 62px;
  height: 62px;
}

.brand-text strong {
  font-size: 48px !important;
  line-height: 1 !important;
}

.brand-text small {
  color: #c8d4f0 !important;
  font-size: 14px !important;
  line-height: 1.05;
}

.year {
  font-size: 44px !important;
}

.primary-nav {
  gap: clamp(18px, 1.9vw, 34px) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.primary-nav a {
  padding: 40px 0 !important;
  white-space: nowrap !important;
}

.ticket-button {
  min-height: 58px !important;
  padding-inline: 32px !important;
  font-size: 20px !important;
}

main {
  padding-top: 28px;
}

.panel,
.team-card,
.social-grid article,
.topic-grid article,
.faq-grid article,
.intent-checklist article {
  border-color: rgba(255, 255, 255, 0.17);
}

.panel {
  padding: 24px !important;
}

.section-block,
.dashboard-grid,
.portal-grid,
.lower-grid,
.venue-fan-grid,
.social-section,
.newsletter,
.site-footer {
  margin-top: 26px !important;
}

.section-heading {
  margin-bottom: 17px !important;
}

h2,
.section-heading h2,
.card-title h2,
.newsletter h2,
.site-footer strong {
  font-family: "Barlow Condensed", Anton, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

h2,
.section-heading h2 {
  font-size: 34px !important;
  line-height: 1.02 !important;
}

.card-title h2 {
  font-size: 26px !important;
}

.section-heading a,
.compact,
.team-card a,
.internal-link-row a {
  font-size: 17px !important;
}

.feature-strip strong,
.meta-list,
.key-info strong,
.partner-grid span,
.team-code,
.fixture-list time,
.fixture-list strong,
.top-players li > span,
.top-players strong,
.top-players b,
.latest-news strong,
.latest-news em,
.venue-grid figcaption,
.fan-grid strong,
.how-watch-card strong,
.tag {
  font-family: "Barlow Condensed", Anton, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.feature-strip article {
  min-height: 94px !important;
  padding: 20px 22px !important;
}

.feature-strip strong {
  font-size: 19px !important;
}

.feature-strip span {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.content-copy p,
.topic-grid p,
.detail-panel p,
.list-card p,
.faq-grid p,
.tickets-card p,
.page-hero p:last-child {
  font-size: 17px !important;
  line-height: 1.76 !important;
  font-weight: 650 !important;
}

.lead-copy {
  font-size: 20px !important;
  line-height: 1.68 !important;
}

.content-copy h2 {
  font-size: clamp(38px, 4.2vw, 56px) !important;
  line-height: 1.03 !important;
}

.topic-grid h3,
.faq-grid h3,
.list-card h2,
.detail-panel dd {
  font-size: 28px !important;
  line-height: 1.08 !important;
}

.team-card {
  min-height: 268px;
  padding: 18px 16px !important;
}

.team-logo {
  width: 104px;
  height: 104px;
}

.team-code {
  font-size: 16px !important;
}

.team-card h3 {
  min-height: 58px;
  font-size: 24px !important;
  line-height: 1.03 !important;
}

.team-card a {
  min-height: 44px !important;
}

table {
  font-size: 14px !important;
}

th {
  font-size: 12px !important;
}

th,
td {
  padding: 12px 9px !important;
}

.last-updated,
.panel-note {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.fixture-list article {
  min-height: 78px !important;
  padding: 16px 0 !important;
}

.fixture-list time {
  flex-basis: 64px !important;
  font-size: 19px !important;
}

.fixture-list strong {
  flex-basis: 146px !important;
  font-size: 28px !important;
}

.fixture-list strong span {
  font-size: 16px !important;
}

.fixture-list small,
.top-players small,
.latest-news small,
.venue-grid span,
.fan-grid span,
.site-footer a,
.site-footer span {
  font-size: 13px !important;
  line-height: 1.48 !important;
}

.latest-news article {
  min-height: 106px !important;
  padding: 12px !important;
}

.latest-news img {
  width: 104px !important;
  height: 80px !important;
}

.latest-news strong {
  font-size: 22px !important;
  line-height: 1.08 !important;
}

.latest-news span {
  font-size: 11px !important;
}

.latest-news em {
  font-size: 17px !important;
}

.live-score-card strong {
  font-size: 54px !important;
}

.live-score-card small {
  font-size: 15px !important;
}

.top-players li {
  gap: 14px !important;
}

.top-players li > span {
  font-size: 28px !important;
}

.top-players img,
.player-avatar {
  width: 64px !important;
  height: 64px !important;
}

.top-players strong {
  font-size: 22px !important;
}

.top-players b {
  font-size: 23px !important;
}

.venue-grid figcaption {
  font-size: 20px !important;
}

.fan-grid strong,
.how-watch-card strong {
  font-size: 20px !important;
}

.newsletter {
  padding: 24px !important;
}

.newsletter h2 {
  font-size: 31px !important;
}

.newsletter p,
.social-grid p,
.footer-brand p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.newsletter input {
  min-height: 52px !important;
  font-size: 16px !important;
}

.newsletter button {
  min-height: 52px !important;
  font-size: 18px !important;
}

.site-footer {
  padding-top: 40px !important;
  padding-bottom: 34px !important;
}

.site-footer strong {
  font-size: 20px !important;
}

.page-hero h1 {
  font-size: clamp(56px, 7vw, 102px) !important;
  line-height: 1.05 !important;
}

@media (max-width: 1220px) {
  .primary-nav {
    font-size: 20px !important;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 15.5px !important;
  }

  .main-header {
    min-height: auto;
  }

  .brand-mark {
    width: 52px;
    height: 52px;
  }

  .brand-text strong {
    font-size: 36px !important;
    line-height: 1 !important;
  }

  .year {
    font-size: 34px !important;
  }

  .primary-nav {
    gap: 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .primary-nav a {
    padding: 0 0 16px !important;
    white-space: nowrap !important;
  }

  h2,
  .section-heading h2 {
    font-size: 30px !important;
  }

  .content-copy p,
  .topic-grid p,
  .detail-panel p,
  .list-card p,
  .faq-grid p {
    font-size: 16px !important;
    line-height: 1.68 !important;
  }

  .fixture-list strong {
    flex-basis: auto !important;
    font-size: 25px !important;
  }

  .latest-news img {
    width: 90px !important;
    height: 70px !important;
  }

  .top-players img,
  .player-avatar {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ── Mobile Navigation Hamburger ─────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 900px) {
  .top-strip nav {
    display: none !important;
  }

  .nav-toggle {
    display: flex;
  }

  .main-header {
    grid-template-columns: auto 1fr auto !important;
    min-height: 70px !important;
  }

  .primary-nav {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    z-index: 200 !important;
    width: min(300px, 80vw) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 80px 0 30px !important;
    background: rgba(4, 10, 28, 0.98) !important;
    backdrop-filter: blur(22px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    transform: translateX(110%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
  }

  .primary-nav.is-open {
    transform: translateX(0) !important;
  }

  .primary-nav a {
    display: block !important;
    padding: 16px 28px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 20px !important;
    white-space: normal !important;
  }

  .primary-nav a.active {
    color: var(--yellow) !important;
    background: rgba(255, 208, 0, 0.06) !important;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Overlay backdrop */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
  }

  .nav-overlay.is-open {
    display: block;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE VISUAL HIERARCHY — 5 ZONE REDESIGN
   v20260714-hierarchy1
   ═══════════════════════════════════════════════════════════════ */

/* ── Zone 1: Match Hub (purple / yellow stadium energy) ───────── */
.home-match-hub {
  position: relative;
  margin-top: 0;
  padding: clamp(28px, 4vw, 44px) 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(122, 35, 211, 0.28), transparent 72%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(255, 208, 0, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(57, 197, 255, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(10, 4, 28, 0.97) 0%, rgba(14, 6, 36, 0.99) 100%);
  border-bottom: 1px solid rgba(122, 35, 211, 0.25);
}

.home-match-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

/* Opening match: full-width feature strip, not a small card */
.opening-match.panel {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(122, 35, 211, 0.55) 0%, rgba(4, 10, 32, 0.9) 50%, rgba(255, 208, 0, 0.15) 100%) !important;
  box-shadow: 0 0 0 1px rgba(122, 35, 211, 0.4), 0 28px 60px rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 16px;
}

.opening-match.panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(122, 35, 211, 0.6), rgba(255, 208, 0, 0.3));
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.opening-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.opening-label span {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 4px;
  background: var(--yellow);
  color: #061128;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.opening-label strong {
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.opening-match-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  flex-wrap: wrap;
}

.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 100px;
}

.match-team img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px var(--team-accent, rgba(255,208,0,0.4)));
  transition: filter 0.3s ease;
}

.match-team:hover img {
  filter: drop-shadow(0 0 28px var(--team-accent, rgba(255,208,0,0.7)));
}

.match-team span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--team-accent, var(--yellow));
  color: #061128;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.match-team strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
  text-transform: uppercase;
}

.versus {
  font-family: Anton, sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

.match-venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  flex: 0 0 auto;
}

.match-venue svg {
  color: var(--yellow);
  width: 18px;
  height: 18px;
}

.match-venue strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.match-venue span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.opening-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* Match quick cards — distinct from generic .panel */
.match-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.live-match-card,
.next-match-card,
.mini-points-card,
.performer-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px !important;
  padding: 18px !important;
}

.live-match-card {
  background:
    linear-gradient(145deg, rgba(224, 16, 171, 0.22), rgba(14, 6, 36, 0.95)) !important;
  border-color: rgba(224, 16, 171, 0.3) !important;
}

.next-match-card {
  background:
    linear-gradient(145deg, rgba(57, 197, 255, 0.15), rgba(6, 10, 28, 0.95)) !important;
  border-color: rgba(57, 197, 255, 0.25) !important;
}

.mini-points-card {
  background:
    linear-gradient(145deg, rgba(122, 35, 211, 0.2), rgba(8, 4, 28, 0.95)) !important;
  border-color: rgba(122, 35, 211, 0.3) !important;
}

.performer-card {
  background:
    linear-gradient(145deg, rgba(255, 208, 0, 0.12), rgba(10, 6, 20, 0.95)) !important;
  border-color: rgba(255, 208, 0, 0.2) !important;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-title h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px !important;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

.card-title span {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Zone 2: Teams Band (dark transparent with accent) ─────────── */
.section-block#teams {
  position: relative;
  margin-top: 0;
  padding: clamp(32px, 4.5vw, 54px) 0;
  background:
    linear-gradient(180deg, rgba(4, 6, 20, 0.98) 0%, rgba(6, 8, 26, 0.99) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Zone 2: Section heading style — with left accent bar + eyebrow */
.section-block#teams .section-heading {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 28px;
}

.section-block#teams .section-heading::before {
  content: "CPL 2026";
  display: block;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.section-block#teams .section-heading h2 {
  position: relative;
  padding-left: 18px;
  font-size: clamp(32px, 3.8vw, 52px) !important;
  margin-bottom: 0;
}

.section-block#teams .section-heading h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 2px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--yellow), var(--pink));
}

/* Team cards: enhanced glow, no flat panel look */
.team-card {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.team-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--team-accent, rgba(255,208,0,0.35)) !important;
}

/* ── Zone 3: Media / Dashboard (editorial / newspaper style) ──── */
.portal-grid {
  position: relative;
  margin-top: 0 !important;
  padding: clamp(28px, 4vw, 44px) 0;
  background:
    linear-gradient(180deg, rgba(6, 8, 22, 0.99) 0%, rgba(8, 10, 26, 0.99) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Editorial section label for dashboard */
.portal-grid::before {
  content: "LIVE DATA";
  position: absolute;
  top: clamp(18px, 2.5vw, 28px);
  right: 0;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px 0 0 4px;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-left: 3px solid var(--cyan);
}

/* Fixtures card: cleaner data-list style, less decorative */
.fixtures-card {
  background:
    linear-gradient(145deg, rgba(10, 14, 38, 0.97), rgba(6, 9, 28, 0.99)) !important;
  border-color: rgba(57, 197, 255, 0.18) !important;
  border-left: 3px solid var(--cyan) !important;
}

.fixtures-card .section-heading h2 {
  color: var(--cyan) !important;
}

/* News cards: horizontal editorial style */
.latest-news {
  background:
    linear-gradient(145deg, rgba(12, 6, 36, 0.97), rgba(8, 6, 28, 0.99)) !important;
  border-color: rgba(224, 16, 171, 0.18) !important;
  border-left: 3px solid var(--pink) !important;
}

.latest-news .section-heading h2 {
  color: var(--pink) !important;
}

.latest-news article {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
  transition: background 0.2s ease;
}

.latest-news article:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Points table: data-table style */
.points-card {
  background:
    linear-gradient(145deg, rgba(6, 12, 36, 0.97), rgba(8, 6, 32, 0.99)) !important;
  border-color: rgba(122, 35, 211, 0.25) !important;
  border-left: 3px solid var(--purple) !important;
}

.points-card h2 {
  color: #c4a4ff !important;
}

.points-card table {
  border-radius: 6px;
  overflow: hidden;
}

.points-card thead tr {
  background: rgba(122, 35, 211, 0.18) !important;
}

.points-card th {
  color: #c4a4ff !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
}

.points-card tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Highlights card */
.highlights-card {
  background:
    linear-gradient(145deg, rgba(14, 10, 36, 0.97), rgba(6, 4, 20, 0.99)) !important;
  border-color: rgba(255, 208, 0, 0.15) !important;
  border-left: 3px solid var(--yellow) !important;
}

.highlights-card .section-heading h2 {
  color: var(--yellow) !important;
}

/* Numbers / stats card */
.numbers-card {
  background:
    linear-gradient(145deg, rgba(4, 10, 28, 0.97), rgba(6, 8, 26, 0.99)) !important;
  border-color: rgba(19, 186, 74, 0.18) !important;
  border-left: 3px solid var(--green) !important;
}

.numbers-card h2 {
  color: var(--green) !important;
}

.numbers-card dt {
  color: var(--green) !important;
}

/* ── Zone 4: Match Center lower grid ────────────────────────────── */
.match-center-grid {
  margin-top: 0 !important;
  padding: clamp(24px, 3.5vw, 40px) 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 28, 0.99), rgba(6, 4, 22, 0.99));
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Top performers card */
.top-players {
  background:
    linear-gradient(145deg, rgba(10, 10, 34, 0.97), rgba(6, 8, 26, 0.99)) !important;
  border-color: rgba(57, 197, 255, 0.2) !important;
  border-top: 3px solid var(--cyan) !important;
}

.top-players .section-heading h2 {
  color: var(--cyan) !important;
}

/* Live score in match center */
.fixtures-card.panel {
  border-top: 3px solid var(--yellow) !important;
  border-left: 0 !important;
}

/* ── Zone 5: Venues / Fan Zone ──────────────────────────────────── */
.venue-fan-grid {
  margin-top: 0 !important;
  padding: clamp(28px, 4vw, 44px) 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 50%, rgba(10, 166, 54, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(4, 8, 20, 0.99), rgba(6, 6, 18, 0.99));
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.venues-card {
  border-top: 3px solid var(--green) !important;
}

.venues-card .section-heading h2 {
  color: var(--green) !important;
}

/* Fan zone: icon grid clean style */
.fan-zone {
  border-top: 3px solid var(--pink) !important;
}

.fan-zone h2 {
  color: var(--pink) !important;
}

.fan-grid a {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.fan-grid a:hover {
  background: rgba(224, 16, 171, 0.1);
  border-color: rgba(224, 16, 171, 0.3);
}

.fan-grid svg {
  color: var(--pink) !important;
  width: 22px;
  height: 22px;
}

.how-watch-card {
  border-top: 3px solid var(--yellow) !important;
}

.how-watch-card .section-heading h2 {
  color: var(--yellow) !important;
}

/* ── Zone 6: SEO Guide — article layout, reading-friendly ─────── */
.content-guide {
  position: relative;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(6, 6, 20, 0.99) 0%, rgba(4, 8, 24, 0.99) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: clamp(44px, 6vw, 80px) 0 !important;
}

.content-guide.compact-guide {
  padding: clamp(28px, 4vw, 52px) 0 !important;
}

/* Eyebrow label */
.content-guide .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 4px;
  background: rgba(255, 208, 0, 0.1);
  border: 1px solid rgba(255, 208, 0, 0.25);
  color: var(--yellow);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.content-copy h2 {
  font-size: clamp(34px, 4.2vw, 58px) !important;
  line-height: 1.02 !important;
  max-width: 820px;
  border-left: 5px solid var(--yellow);
  padding-left: 22px;
  margin-left: -22px;
}

.content-copy .lead-copy {
  max-width: 760px;
  font-size: 19px !important;
  line-height: 1.72 !important;
  color: #e4ebff !important;
  margin-top: 18px;
}

.content-copy p {
  max-width: 780px;
  color: #c8d4ec !important;
  font-size: 17px !important;
  line-height: 1.78 !important;
}

/* Topic cards: article blocks, not decorative cards */
.topic-grid {
  gap: 2px !important;
}

.topic-grid article {
  padding: 20px 22px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 3px solid rgba(255, 208, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.topic-grid article:first-child {
  border-radius: 8px 8px 0 0 !important;
}

.topic-grid article:last-child {
  border-radius: 0 0 8px 8px !important;
}

.topic-grid article:hover {
  border-left-color: var(--yellow) !important;
  background: rgba(255, 208, 0, 0.04) !important;
}

.topic-grid h3 {
  font-size: 20px !important;
  margin-bottom: 6px;
}

/* ── Zone 7: FAQ — compact answer grid ──────────────────────────── */
.faq-section {
  position: relative;
  margin-top: 0 !important;
  padding: clamp(32px, 4.5vw, 56px) 0;
  background:
    linear-gradient(180deg, rgba(4, 6, 18, 0.99) 0%, rgba(3, 5, 16, 0.99) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* FAQ section heading */
.faq-section > h2,
.faq-section .faq-heading {
  position: relative;
  margin-bottom: 6px;
  padding-bottom: 14px;
}

.faq-section > h2::after,
.faq-section .faq-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow), var(--pink));
}

/* FAQ cards: compact, not same height as match panels */
.faq-grid {
  gap: 10px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.faq-grid article {
  min-height: auto !important;
  padding: 16px 18px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.faq-grid article:hover {
  background: rgba(255, 208, 0, 0.05) !important;
  border-color: rgba(255, 208, 0, 0.2) !important;
}

.faq-grid h3 {
  font-size: 17px !important;
  color: #fff !important;
  margin-bottom: 8px;
  line-height: 1.3 !important;
  text-transform: none !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
}

.faq-grid p {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

/* ── Zone 8: Social / Newsletter — polished ──────────────────────── */
.social-section {
  padding: clamp(24px, 3.5vw, 40px) 0;
  margin-top: 0 !important;
  background: rgba(4, 6, 18, 0.99);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.social-section h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.social-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), transparent);
}

.social-grid article {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  transition: background 0.2s ease;
}

.social-grid article:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.newsletter {
  margin-top: 18px !important;
  background: linear-gradient(90deg, #4c16bc, #8a23dc 55%, #5316a7) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(122, 35, 211, 0.35) !important;
}

/* ── Spacing rhythm: zone vertical gaps ─────────────────────────── */
.home-match-hub + .section-block#teams,
.section-block#teams + .portal-grid,
.portal-grid + .match-center-grid,
.match-center-grid + .venue-fan-grid,
.venue-fan-grid + .content-guide,
.content-guide + .faq-section,
.faq-section + .social-section {
  margin-top: 0 !important;
}

/* Generous top spacing for each zone within main */
main > .home-match-hub { margin-top: 0; }
main > .section-block#teams { margin-top: 8px; }
main > .portal-grid { margin-top: 8px; }
main > .match-center-grid { margin-top: 8px; }
main > .venue-fan-grid { margin-top: 8px; }
main > .content-guide { margin-top: 8px; }
main > .faq-section { margin-top: 8px; }
main > .social-section { margin-top: 8px; }

/* ── Responsive: zone adjustments ───────────────────────────────── */
@media (max-width: 1100px) {
  .match-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .match-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-copy h2 {
    border-left: 4px solid var(--yellow);
    padding-left: 14px;
    margin-left: -14px;
  }

  .opening-match-main {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 540px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Homepage visual hierarchy v1 final overrides. */
.home-page {
  background:
    linear-gradient(180deg, rgba(2, 8, 23, 0) 0, rgba(2, 8, 23, 0) 720px, rgba(3, 6, 20, 0.72) 720px),
    radial-gradient(circle at 12% 36%, rgba(255, 208, 0, 0.06), transparent 24rem),
    radial-gradient(circle at 88% 62%, rgba(57, 197, 255, 0.06), transparent 26rem);
}

.home-page .home-match-hub {
  position: relative;
  isolation: isolate;
  margin-inline: calc(clamp(18px, 4vw, 44px) * -1);
  padding: clamp(22px, 3.2vw, 42px) clamp(18px, 4vw, 44px);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 208, 0, 0.12), transparent 24rem),
    linear-gradient(135deg, rgba(20, 10, 52, 0.9), rgba(5, 12, 33, 0.98));
  border-top: 1px solid rgba(255, 208, 0, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-page .opening-match {
  border-color: rgba(255, 208, 0, 0.34) !important;
  background:
    linear-gradient(90deg, rgba(255, 208, 0, 0.15), rgba(122, 35, 211, 0.16)),
    linear-gradient(145deg, rgba(15, 17, 48, 0.98), rgba(8, 10, 30, 0.98)) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.home-page .match-card-grid .panel {
  min-height: 262px;
}

.home-page .live-match-card {
  border-top: 4px solid #ff3b4f !important;
}

.home-page .next-match-card {
  border-top: 4px solid var(--yellow) !important;
}

.home-page .mini-points-card {
  border-top: 4px solid var(--purple) !important;
}

.home-page .performer-card {
  border-top: 4px solid var(--cyan) !important;
}

.home-page #teams {
  margin-inline: calc(clamp(18px, 4vw, 44px) * -1);
  padding-inline: clamp(18px, 4vw, 44px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 208, 0, 0.08), transparent 28rem),
    linear-gradient(180deg, rgba(2, 6, 20, 0.98), rgba(4, 11, 29, 0.98)) !important;
}

.home-page .team-card {
  background:
    radial-gradient(circle at 50% 18%, var(--team-glow, rgba(255, 208, 0, 0.18)), transparent 46%),
    linear-gradient(180deg, rgba(12, 16, 46, 0.92), rgba(5, 8, 25, 0.98)) !important;
}

.home-page .portal-grid,
.home-page .match-center-grid,
.home-page .venue-fan-grid,
.home-page .content-guide,
.home-page .faq-section,
.home-page .social-section {
  margin-inline: calc(clamp(18px, 4vw, 44px) * -1);
  padding-inline: clamp(18px, 4vw, 44px);
}

.home-page .portal-grid {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, rgba(6, 8, 22, 0.99), rgba(6, 5, 22, 0.99)) !important;
}

.home-page .match-center-grid {
  background:
    radial-gradient(circle at 86% 16%, rgba(122, 35, 211, 0.14), transparent 22rem),
    linear-gradient(180deg, rgba(7, 5, 24, 0.99), rgba(3, 7, 22, 0.99)) !important;
}

.home-page .venue-fan-grid {
  background:
    radial-gradient(circle at 18% 24%, rgba(19, 186, 74, 0.12), transparent 24rem),
    linear-gradient(180deg, rgba(3, 10, 22, 0.99), rgba(4, 7, 18, 0.99)) !important;
}

.home-page .content-guide {
  background:
    linear-gradient(90deg, rgba(255, 208, 0, 0.035), transparent 32%),
    linear-gradient(180deg, rgba(4, 7, 19, 0.99), rgba(3, 6, 16, 0.99)) !important;
}

.home-page .faq-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(224, 16, 171, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(3, 5, 16, 0.99), rgba(2, 5, 14, 0.99)) !important;
}

.home-page .panel,
.home-page .topic-grid article,
.home-page .faq-grid article,
.home-page .social-grid article {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.home-page .content-guide .topic-grid article,
.home-page .faq-grid article,
.home-page .social-grid article {
  box-shadow: none !important;
}

@media (max-width: 820px) {
  .home-page .home-match-hub,
  .home-page #teams,
  .home-page .portal-grid,
  .home-page .match-center-grid,
  .home-page .venue-fan-grid,
  .home-page .content-guide,
  .home-page .faq-section,
  .home-page .social-section {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

/* Homepage polish v2: rebalance media, article, and FAQ zones. */
.home-page .portal-grid {
  align-items: start !important;
}

.home-page .portal-grid > .panel {
  height: auto !important;
  min-height: 0 !important;
}

.home-page .portal-grid .fixtures-card,
.home-page .portal-grid .highlights-card,
.home-page .portal-grid .latest-news {
  align-self: start !important;
}

.home-page .portal-grid::before {
  content: "MATCHDAY HUB";
  right: clamp(18px, 4vw, 44px);
  border-left-color: var(--yellow);
}

.home-page .highlights-card {
  padding: 0 !important;
  overflow: hidden;
  border-left: 0 !important;
  border-top: 4px solid var(--yellow) !important;
  background: #050716 !important;
}

.home-page .highlights-card .section-heading {
  padding: 22px 22px 0;
}

.home-page .video-thumb {
  min-height: 342px !important;
  border-radius: 0 !important;
}

.home-page .video-thumb img {
  height: 342px !important;
  border-radius: 0 !important;
}

.home-page .video-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(2, 4, 15, 0.94));
  pointer-events: none;
}

.home-page .video-thumb > div,
.home-page .video-thumb time,
.home-page .video-thumb button {
  z-index: 2;
}

.home-page .latest-news {
  display: grid !important;
  gap: 12px !important;
}

.home-page .latest-news article {
  min-height: 92px !important;
}

.home-page .latest-news img {
  width: 92px !important;
  height: 68px !important;
}

.home-page .latest-news strong {
  font-size: 20px !important;
}

.home-page .numbers-card {
  padding-block: 20px !important;
}

.home-page .numbers-card dl {
  gap: 10px !important;
}

.home-page .content-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.home-page .content-copy {
  padding: clamp(4px, 1vw, 12px) 0;
}

.home-page .content-copy h2 {
  max-width: 900px;
}

.home-page .content-copy p {
  max-width: 850px;
}

.home-page .topic-grid {
  position: sticky;
  top: 126px;
  padding: 12px;
  border: 1px solid rgba(255, 208, 0, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.home-page .topic-grid::before {
  content: "CPL 2026 CONTENT HUB";
  display: block;
  margin: 0 0 12px;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-page .topic-grid article {
  padding: 16px 18px !important;
}

.home-page .topic-grid h3 {
  font-size: 21px !important;
}

.home-page .topic-grid p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.home-page .faq-section {
  padding-block: clamp(42px, 5vw, 68px) !important;
}

.home-page .faq-section .section-heading {
  margin-bottom: 24px !important;
}

.home-page .faq-grid {
  gap: 14px !important;
}

.home-page .faq-grid article {
  padding: 20px 22px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.home-page .faq-grid h3 {
  font-size: 18px !important;
}

.home-page .faq-grid p {
  font-size: 14.5px !important;
}

.home-page .social-section {
  padding-top: clamp(30px, 4vw, 46px) !important;
}

@media (max-width: 1100px) {
  .home-page .content-guide {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page .topic-grid {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .topic-grid::before {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .home-page .video-thumb,
  .home-page .video-thumb img {
    height: 280px !important;
    min-height: 280px !important;
  }

  .home-page .topic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Custom Mobile Navigation & Squad Slider Fixes */
.team-silo-nav, .td-nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.team-silo-nav::-webkit-scrollbar, .td-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  .team-squad-grid {
    padding-left: 36px !important;
    padding-right: 36px !important;
    scroll-padding-inline: 36px !important;
  }
  .td-slider-control {
    z-index: 10 !important;
    background: rgba(10, 16, 37, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
  }
  .td-slider-prev {
    left: 4px !important;
  }
  .td-slider-next {
    right: 4px !important;
  }
  .team-silo-nav, .td-nav {
    top: 8px !important;
  }
}

@media (min-width: 901px) {
  .team-silo-nav, .td-nav {
    top: 92px !important;
  }
  .td-page .team-silo-section {
    scroll-margin-top: 152px !important;
  }
}

/* CPL live-score hub: the same data state renders pre-match, live, and completed matches. */
.live-score-page {
  margin-inline: auto;
  max-width: 1280px;
  padding: 34px clamp(16px, 3vw, 34px) 72px;
}

.live-score-page .page-hero {
  margin: 0 0 20px;
}

.ls-hero {
  align-items: end;
  background: linear-gradient(125deg, #101a43, #090f28 58%, #25145a);
  border: 1px solid rgba(161, 127, 255, 0.35);
  border-radius: 8px;
  display: flex;
  gap: 26px;
  justify-content: space-between;
  margin-bottom: 20px;
  overflow: hidden;
  padding: clamp(24px, 4vw, 46px);
  position: relative;
}

.ls-hero::after {
  background: radial-gradient(circle, rgba(255, 208, 0, 0.22), transparent 66%);
  content: "";
  height: 330px;
  pointer-events: none;
  position: absolute;
  right: -120px;
  top: -180px;
  width: 330px;
}

.ls-hero > * { position: relative; z-index: 1; }
.ls-hero h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); margin: 5px 0 10px; }
.ls-hero p:not(.eyebrow) { color: #c9d2ec; font-size: 1rem; line-height: 1.6; margin: 0; max-width: 640px; }
.ls-hero nav { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.ls-hero nav a { border: 1px solid rgba(255,255,255,.18); color: #eef3ff; font-family: "Barlow Condensed", sans-serif; font-size: .9rem; font-weight: 800; padding: 10px 13px; text-transform: uppercase; }
.ls-hero nav a:hover { border-color: #ffd000; color: #ffd000; }

.ls-current,
.ls-section {
  background: linear-gradient(145deg, rgba(16, 26, 67, .96), rgba(7, 13, 33, .98));
  border: 1px solid rgba(145, 160, 211, .24);
  border-radius: 8px;
  margin-top: 20px;
  padding: clamp(20px, 3vw, 32px);
}

.ls-status,
.ls-section-heading,
.ls-actions,
.ls-match-facts,
.ls-upcoming-list > a {
  align-items: center;
  display: flex;
}

.ls-status { justify-content: space-between; gap: 18px; }
.ls-status > span,
.live-feed-badge {
  align-items: center;
  border: 1px solid rgba(184, 197, 235, .35);
  color: #cdd7f3;
  display: inline-flex;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .9rem;
  font-weight: 900;
  gap: 7px;
  letter-spacing: .03em;
  padding: 7px 10px;
  text-transform: uppercase;
}
.ls-status > span.is-live,
.live-feed-badge.is-live { border-color: #29e08a; color: #29e08a; }
.ls-status > span.is-complete { border-color: #ffd000; color: #ffd000; }
.ls-status > div { color: #aeb9d5; display: grid; gap: 3px; text-align: right; }
.ls-status small { font-size: .68rem; text-transform: uppercase; }
.ls-status time { color: #eef3ff; font-size: .82rem; font-weight: 700; }

.ls-scoreboard {
  align-items: center;
  display: grid;
  gap: clamp(14px, 3vw, 44px);
  grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr) minmax(0, 1fr);
  margin: 28px 0 20px;
}
.ls-team { align-items: center; color: #fff; display: flex; gap: 16px; min-width: 0; text-decoration: none; }
.ls-team-away { flex-direction: row-reverse; text-align: right; }
.ls-team img { height: clamp(64px, 8vw, 124px); object-fit: contain; width: clamp(64px, 8vw, 124px); }
.ls-team span { display: grid; gap: 3px; min-width: 0; }
.ls-team small { color: #aeb9d5; font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; }
.ls-team strong { font-family: "Barlow Condensed", sans-serif; font-size: clamp(1.15rem, 2.4vw, 1.8rem); line-height: 1; text-transform: uppercase; }
.ls-team b { color: #ffd000; font-family: "Barlow Condensed", sans-serif; font-size: clamp(1.5rem, 3.3vw, 2.7rem); line-height: 1; }
.ls-score-centre { display: grid; gap: 7px; justify-items: center; text-align: center; }
.ls-score-centre p { color: #9faed1; font-size: .75rem; margin: 0; text-transform: uppercase; }
.ls-score-centre h2 { font-size: clamp(1.25rem, 2.5vw, 2rem); margin: 0; }
.ls-score-centre > strong { color: #b66cff; font-family: "Barlow Condensed", sans-serif; font-size: clamp(3rem, 6vw, 5rem); line-height: .8; }
.ls-score-centre time,
.ls-score-centre span { color: #dbe4fb; font-size: .86rem; line-height: 1.4; }
.ls-score-centre span { align-items: center; display: inline-flex; gap: 5px; }
.ls-summary { border-top: 1px solid rgba(145, 160, 211, .18); color: #cbd5ef; line-height: 1.65; margin: 0; padding-top: 18px; }

.ls-detail-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.ls-detail-grid article { background: rgba(3, 7, 23, .34); border: 1px solid rgba(145, 160, 211, .18); padding: 14px; }
.ls-detail-grid p { color: #ab83ff; font-family: "Barlow Condensed", sans-serif; font-weight: 800; margin: 0 0 10px; text-transform: uppercase; }
.ls-detail-grid article > div:not(.ls-recent-overs > div) { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.ls-detail-grid article > div span { color: #ffd000; font-weight: 800; }
.ls-recent-overs > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-recent-overs span { align-items: center; background: #172142; border-radius: 50%; display: inline-flex; font-size: .73rem; font-weight: 800; height: 26px; justify-content: center; width: 26px; }
.ls-recent-overs span.is-boundary { background: #168d4d; }
.ls-recent-overs span.is-wicket { background: #b92845; }

.ls-lineups { border-top: 1px solid rgba(145, 160, 211, .18); display: none; margin-top: 20px; padding-top: 20px; }
.ls-lineups.is-visible { display: block; }
.ls-lineups-heading { align-items: end; display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.ls-lineups-heading h3 { font-size: 1.55rem; margin: 3px 0 0; }
.ls-lineups-heading > span { color: #aeb9d5; font-size: .82rem; text-align: right; }
.ls-lineup-groups { display: grid; gap: 18px; }
.ls-lineup-groups article { min-width: 0; }
.ls-lineup-groups h4 { align-items: center; color: #fff; display: flex; font-size: .95rem; gap: 9px; margin: 0 0 10px; }
.ls-lineup-groups h4 span { background: #6f22c8; color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: .74rem; padding: 4px 7px; }
.ls-player-strip { display: grid; gap: 9px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ls-player-card { align-items: end; aspect-ratio: 4 / 5; background: linear-gradient(155deg, rgba(30, 22, 70, .96), rgba(5, 10, 27, .98)); border: 1px solid rgba(166, 119, 255, .28); color: #fff; display: grid; min-height: 0; overflow: hidden; position: relative; text-decoration: none; }
.ls-player-card:hover { border-color: #ffd000; }
.ls-player-card img { height: 100%; inset: 0; object-fit: contain; object-position: center bottom; position: absolute; width: 100%; }
.ls-player-card::after { background: linear-gradient(180deg, transparent 42%, rgba(3, 7, 23, .95) 84%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.ls-player-card > span:last-child { display: grid; gap: 2px; padding: 9px; position: relative; z-index: 1; }
.ls-player-card strong { font-family: "Barlow Condensed", sans-serif; font-size: .88rem; line-height: 1.05; text-transform: uppercase; }
.ls-player-card small { color: #c1cbea; font-size: .68rem; line-height: 1.2; }
.ls-player-fallback { align-items: center; align-self: center; background: rgba(182, 108, 255, .16); border: 1px solid rgba(182, 108, 255, .45); border-radius: 50%; color: #d8b8ff; display: flex; font-family: "Barlow Condensed", sans-serif; font-size: 1.6rem; font-weight: 900; height: 66px; justify-content: center; justify-self: center; width: 66px; }

.ls-match-facts { border-top: 1px solid rgba(145, 160, 211, .18); display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 20px 0; padding-top: 20px; }
.ls-match-facts > div { border-right: 1px solid rgba(145, 160, 211, .18); padding: 0 16px; }
.ls-match-facts > div:first-child { padding-left: 0; }
.ls-match-facts > div:last-child { border: 0; }
.ls-match-facts dt { color: #9eadd0; font-family: "Barlow Condensed", sans-serif; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.ls-match-facts dd { color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.35; margin: 5px 0 0; }
.ls-actions { flex-wrap: wrap; gap: 10px; }
.ls-actions button { background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff; cursor: pointer; font-family: "Barlow Condensed", sans-serif; font-size: .95rem; font-weight: 800; padding: 12px 15px; text-transform: uppercase; }
.ls-actions button:hover { border-color: #ffd000; color: #ffd000; }
.ls-actions > a:not(.primary-button) { color: #ffd000; font-family: "Barlow Condensed", sans-serif; font-weight: 800; padding: 10px 4px; text-transform: uppercase; }
.ls-source-note { align-items: flex-start; background: rgba(31, 158, 233, .08); border-left: 3px solid #1f9ee9; color: #cfdbf5; display: flex; font-size: .87rem; gap: 10px; line-height: 1.55; margin: 22px 0 0; padding: 12px 14px; }

.ls-section-heading { justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.ls-section-heading h2 { margin: 3px 0 0; }
.ls-section-heading > a { color: #ffd000; font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.ls-upcoming-list { border-top: 1px solid rgba(145,160,211,.18); }
.ls-upcoming-list > a { border-bottom: 1px solid rgba(145,160,211,.18); color: #eef3ff; gap: 16px; min-height: 84px; padding: 12px 0; text-decoration: none; }
.ls-upcoming-list > a:hover { background: rgba(182,108,255,.08); }
.ls-upcoming-list time { display: grid; flex: 0 0 126px; gap: 3px; }
.ls-upcoming-list time strong { color: #ffd000; font-family: "Barlow Condensed", sans-serif; font-size: 1.05rem; }
.ls-upcoming-list time span,
.ls-upcoming-list small { color: #aeb9d5; font-size: .82rem; }
.ls-upcoming-team { align-items: center; display: flex; gap: 8px; min-width: 88px; }
.ls-upcoming-team img { height: 38px; object-fit: contain; width: 38px; }
.ls-upcoming-list em { color: #b66cff; font-family: "Barlow Condensed", sans-serif; font-size: 1.05rem; font-style: normal; font-weight: 900; }
.ls-upcoming-list small { align-items: center; display: flex; gap: 5px; margin-left: auto; max-width: 220px; }
.ls-upcoming-list > a > svg { color: #ffd000; flex: 0 0 auto; }
.ls-results-list { display: grid; gap: 10px; }
.ls-results-list a { align-items: center; background: rgba(3,7,23,.28); border: 1px solid rgba(145,160,211,.18); color: #fff; display: grid; gap: 8px; grid-template-columns: 100px minmax(0, 1fr) 32px; padding: 14px; text-decoration: none; }
.ls-results-list a span { color: #29e08a; font-family: "Barlow Condensed", sans-serif; font-weight: 900; text-transform: uppercase; }
.ls-results-list a p { color: #b8c5e1; font-size: .9rem; margin: 0; }
.ls-empty { align-items: center; background: rgba(3,7,23,.28); border: 1px solid rgba(145,160,211,.18); color: #c7d3ef; display: flex; gap: 14px; padding: 18px; }
.ls-empty h3 { color: #fff; margin: 0 0 5px; }
.ls-empty p { margin: 0; }

@media (max-width: 820px) {
  .live-score-page { padding: 20px 12px 52px; }
  .ls-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
  .ls-hero nav { justify-content: flex-start; }
  .ls-scoreboard { gap: 10px; grid-template-columns: 1fr 90px 1fr; }
  .ls-team { flex-direction: column; gap: 7px; text-align: center; }
  .ls-team-away { flex-direction: column; }
  .ls-team img { height: 72px; width: 72px; }
  .ls-team strong { font-size: 1rem; }
  .ls-score-centre h2 { font-size: 1.05rem; }
  .ls-score-centre > strong { font-size: 3.2rem; }
  .ls-detail-grid { grid-template-columns: 1fr; }
  .ls-player-strip { display: flex; margin: 0 -2px; overflow-x: auto; padding: 0 2px 8px; scroll-snap-type: x mandatory; }
  .ls-player-card { flex: 0 0 138px; scroll-snap-align: start; }
  .ls-match-facts { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .ls-match-facts > div:nth-child(2) { border-right: 0; }
  .ls-match-facts > div:nth-child(3) { padding-left: 0; }
  .ls-upcoming-list > a { display: grid; gap: 9px; grid-template-columns: 1fr 1fr 22px; padding: 14px 0; }
  .ls-upcoming-list time { flex: initial; grid-column: 1 / -1; }
  .ls-upcoming-list .ls-upcoming-team { min-width: 0; }
  .ls-upcoming-list > a > em { display: none; }
  .ls-upcoming-list small { grid-column: 1 / 3; margin: 0; max-width: none; }
  .ls-upcoming-list > a > svg { grid-column: 3; grid-row: 2 / 4; }
  .ls-results-list a { grid-template-columns: 1fr 25px; }
  .ls-results-list a span,
  .ls-results-list a p { grid-column: 1; }
  .ls-results-list a > svg { grid-column: 2; grid-row: 1 / 4; }
}

@media (max-width: 440px) {
  .ls-status { align-items: flex-start; flex-direction: column; }
  .ls-status > div { text-align: left; }
  .ls-scoreboard { grid-template-columns: 1fr 58px 1fr; }
  .ls-team img { height: 58px; width: 58px; }
  .ls-team b { font-size: 1.35rem; }
  .ls-score-centre > strong { font-size: 2.6rem; }
  .ls-score-centre time { font-size: .72rem; }
  .ls-actions { display: grid; grid-template-columns: 1fr; }
  .ls-actions .primary-button,
  .ls-actions button { text-align: center; width: 100%; }
  .ls-lineups-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ls-lineups-heading > span { text-align: left; }
}

/* Mobile Dark Card Container for Team Hero Copy */
@media (max-width: 900px) {
  .td-hero-copy,
  .hero-reference-copy {
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    margin: 16px 14px 20px !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
    background: #080d22 !important;
    background: linear-gradient(180deg, rgba(8, 13, 34, 0.96) 0%, rgba(5, 8, 22, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
  }
}

/* CPL match centre reference layout */
.mc-page {
  --mc-bg: #020817;
  --mc-panel: #071224;
  --mc-panel-strong: #09162a;
  --mc-line: rgba(135, 159, 203, .24);
  --mc-copy: #b9c5db;
  --mc-pink: #ef45b7;
  --mc-purple: #a64ef5;
  --mc-green: #59dc62;
  background: var(--mc-bg);
  max-width: 1560px;
  padding: 0 20px 28px;
}
.mc-page h1,
.mc-page h2,
.mc-page h3,
.mc-page h4 { letter-spacing: 0; }
.mc-page h2 { font-size: 1rem; line-height: 1.15; text-transform: uppercase; }
.mc-live-ticker { align-items: center; background: linear-gradient(90deg, #45105d, #210c3d 70%, #310a40); border-block: 1px solid #8e2e9f; color: #fff; display: grid; gap: 22px; grid-template-columns: auto minmax(220px, .8fr) minmax(300px, 1.4fr) auto; margin: 0 -20px; min-height: 44px; padding: 7px 22px; }
.mc-live-ticker strong { align-items: center; display: flex; font-size: .8rem; gap: 7px; text-transform: uppercase; white-space: nowrap; }
.mc-live-ticker strong i { background: #ff6bd0; border-radius: 50%; box-shadow: 0 0 12px #ff6bd0; height: 7px; width: 7px; }
.mc-live-ticker strong span { color: #eebff1; font-weight: 600; }
.mc-live-ticker p { font-size: .84rem; margin: 0; }
.mc-live-ticker p b { color: #fff; }
.mc-live-ticker dl { display: flex; gap: 18px; margin: 0; }
.mc-live-ticker dl div { align-items: center; border-left: 1px solid rgba(255,255,255,.28); display: flex; gap: 7px; padding-left: 18px; }
.mc-live-ticker dt { color: #ccbcd7; font-size: .7rem; font-weight: 800; }
.mc-live-ticker dd { font-size: .82rem; font-weight: 800; margin: 0; }
.mc-score-shell { background: var(--mc-panel); border: 1px solid var(--mc-line); display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(270px, .9fr); margin-top: 0; overflow: hidden; }
.mc-score-stage { background: linear-gradient(90deg, rgba(3, 10, 27, .82), rgba(4, 10, 24, .35)), url('/assets/images/hero/cpl-2026-teams-stadium-hero.webp') center/cover; min-height: 400px; padding: 22px 28px 20px; position: relative; }
.mc-score-stage::after { background: linear-gradient(180deg, transparent, rgba(2,8,23,.72)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.mc-score-stage > * { position: relative; z-index: 1; }
.mc-match-meta h1 { color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 1.15rem; margin: 0 0 4px; text-transform: uppercase; }
.mc-match-meta p { align-items: center; color: #d2d9e8; display: flex; font-size: .82rem; gap: 6px; margin: 0; }
.mc-scoreboard { align-items: center; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); margin: 27px 0 22px; }
.mc-score-team { align-items: center; color: #fff; display: flex; gap: 16px; min-width: 0; text-decoration: none; }
.mc-score-team-away { flex-direction: row-reverse; text-align: right; }
.mc-score-team img { height: 110px; object-fit: contain; width: 110px; }
.mc-score-team span { display: grid; gap: 2px; min-width: 0; }
.mc-score-team small { color: #d8def0; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.mc-score-team strong { font-family: "Barlow Condensed", sans-serif; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: .98; text-transform: uppercase; }
.mc-score-team b { font-family: "Barlow Condensed", sans-serif; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; }
.mc-score-centre { display: grid; gap: 8px; justify-items: center; text-align: center; }
.mc-score-centre span { background: #b1182d; border-radius: 3px; color: #fff; font-size: .7rem; font-weight: 900; padding: 6px 10px; }
.mc-score-centre span:not(.is-live):not(.is-final) { background: #522487; }
.mc-score-centre > strong { color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 1.15rem; }
.mc-score-centre time { color: #cbd4e8; font-size: .72rem; line-height: 1.45; }
.mc-chase-box { background: rgba(3, 8, 24, .78); border: 1px solid var(--mc-pink); margin: 0 auto; max-width: 740px; padding: 12px 18px; text-align: center; }
.mc-chase-box h2 { color: var(--mc-pink); font-size: clamp(1.1rem, 2vw, 1.55rem); margin: 0 0 6px; text-transform: none; }
.mc-chase-box p { color: #d5dcec; font-size: .85rem; margin: 0 0 9px; }
.mc-chase-box > div { display: flex; justify-content: center; gap: 22px; }
.mc-chase-box > div span { color: #b7c1d7; font-size: .75rem; }
.mc-chase-box > div b { color: #fff; margin-left: 5px; }
.mc-chase-box > small { color: #9eabc6; display: block; margin-top: 9px; }
.mc-chase-box > small strong { color: #eef2fb; }
.mc-crease-panel { background: linear-gradient(180deg, rgba(7, 17, 35, .98), rgba(3, 10, 24, .98)); border-left: 1px solid var(--mc-line); padding: 18px; }
.mc-crease-panel section + section { margin-top: 18px; }
.mc-crease-panel h2 { color: #d8e0ef; font-size: .78rem; margin: 0 0 9px; }
.mc-live-player { align-items: center; background: #0a172b; border: 1px solid rgba(144,162,198,.3); color: #fff; display: grid; gap: 10px; grid-template-columns: 54px minmax(0, 1fr) auto; min-height: 70px; padding: 5px 9px 0 4px; text-decoration: none; }
.mc-live-player + .mc-live-player { margin-top: 6px; }
.mc-live-player img { align-self: end; height: 64px; object-fit: contain; object-position: bottom; width: 54px; }
.mc-live-player > span:not(.mc-player-fallback) { display: grid; gap: 4px; }
.mc-live-player strong { font-size: .82rem; }
.mc-live-player small { color: #bdc8dc; font-size: .66rem; }
.mc-live-player > b { font-family: "Barlow Condensed", sans-serif; font-size: 1.45rem; }
.mc-live-player-empty { align-items: center; border: 1px dashed rgba(144,162,198,.28); color: #8795b0; display: flex; font-size: .76rem; min-height: 72px; padding: 12px; }
.mc-player-fallback { align-items: center; align-self: center; background: #18213b; border-radius: 50%; color: #d8c3ff; display: flex; font-family: "Barlow Condensed", sans-serif; font-weight: 900; height: 46px; justify-content: center; justify-self: center; width: 46px; }
.mc-feed-time { align-items: center; border-top: 1px solid var(--mc-line); color: #8492ad; display: flex; gap: 9px; margin-top: 20px; padding-top: 13px; }
.mc-feed-time span { display: grid; gap: 2px; }
.mc-feed-time small { font-size: .63rem; text-transform: uppercase; }
.mc-feed-time time { color: #cbd4e4; font-size: .72rem; }
.mc-content-grid { align-items: start; display: grid; gap: 10px; grid-template-columns: minmax(0, 2.35fr) minmax(290px, .95fr); margin-top: 10px; }
.mc-primary-column { display: grid; gap: 10px; min-width: 0; }
.mc-sidebar { display: grid; gap: 10px; min-width: 0; }
.mc-tabs { align-items: stretch; background: var(--mc-panel); border: 1px solid var(--mc-line); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 50px; overflow-x: auto; }
.mc-tabs a { align-items: center; border-bottom: 2px solid transparent; color: #edf2fb; display: flex; font-size: .69rem; font-weight: 800; gap: 7px; justify-content: center; min-width: 92px; padding: 0 8px; text-decoration: none; text-transform: uppercase; }
.mc-tabs a.is-active { border-bottom-color: var(--mc-pink); color: var(--mc-pink); }
.mc-pulse-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-pulse-grid > article,
.mc-scorecard-grid > article,
.mc-stats-grid > article,
.mc-side-card,
.mc-bottom-card { background: linear-gradient(145deg, rgba(8, 19, 38, .98), rgba(3, 11, 25, .98)); border: 1px solid var(--mc-line); padding: 15px; }
.mc-pulse-grid h2,
.mc-scorecard-grid h2,
.mc-stats-grid h2,
.mc-side-card h2,
.mc-bottom-card h2 { color: #f3f6fb; font-size: .86rem; margin: 0 0 12px; }
.mc-panel-empty { align-items: center; color: #8998b4; display: flex; font-size: .75rem; line-height: 1.45; margin: 0; min-height: 75px; }
.mc-over-list { display: grid; gap: 7px; }
.mc-over-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 34px 1fr; }
.mc-over-row > strong { color: #a8b5cc; font-size: .7rem; }
.mc-over-row > span { display: flex; flex-wrap: wrap; gap: 5px; }
.mc-over-row i { align-items: center; background: #1b2740; border-radius: 3px; color: #fff; display: flex; font-size: .66rem; font-style: normal; font-weight: 800; height: 25px; justify-content: center; width: 25px; }
.mc-over-row i.is-boundary { background: #287b45; }
.mc-over-row i.is-wicket { background: #bb2e3f; }
.mc-partnership-score { display: block; font-size: 1rem; margin-bottom: 11px; }
.mc-partnership-score small { color: #b6c0d3; font-weight: 400; }
.mc-progress { background: #1d2b41; height: 8px; overflow: hidden; }
.mc-progress i { background: linear-gradient(90deg, #f3229f, #e05ac9); display: block; height: 100%; }
.mc-pulse-grid article > p:not(.mc-panel-empty) { color: #a9b5cb; font-size: .7rem; margin: 12px 0 0; }
.mc-probability > div { align-items: center; display: flex; justify-content: center; gap: 22px; min-height: 85px; }
.mc-probability span,
.mc-probability b { color: var(--mc-purple); display: grid; font-family: "Barlow Condensed", sans-serif; font-size: 1.6rem; }
.mc-probability b { color: var(--mc-green); }
.mc-probability small { color: inherit; font-size: .68rem; text-transform: uppercase; }
.mc-scorecard-grid { display: grid; gap: 8px; grid-template-columns: 1.2fr 1fr; }
.mc-table-wrap { max-width: 100%; overflow-x: auto; }
.mc-page table { border-collapse: collapse; color: #eef2fa; font-size: .7rem; width: 100%; }
.mc-page th,
.mc-page td { border-bottom: 1px solid rgba(139,159,198,.19); padding: 8px 5px; text-align: right; white-space: nowrap; }
.mc-page th:first-child,
.mc-page td:first-child { text-align: left; }
.mc-page thead th { color: #c7d0e0; font-size: .63rem; text-transform: uppercase; }
.mc-page tbody th { color: #fff; font-weight: 600; }
.mc-table-empty { color: #8998b4; height: 80px; text-align: center !important; }
.mc-stats-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr .8fr; }
.mc-chart-empty { align-items: center; color: #8390aa; display: flex; flex-direction: column; font-size: .7rem; gap: 8px; justify-content: center; min-height: 150px; }
.mc-bar-chart { align-items: end; border-bottom: 1px solid #47556e; display: flex; gap: 5px; height: 138px; padding-top: 8px; }
.mc-bar-chart > i { background: linear-gradient(180deg, var(--mc-pink), #5b2dd6); flex: 1; min-width: 5px; position: relative; }
.mc-bar-chart > i span { bottom: -17px; color: #8390aa; font-size: .55rem; left: 50%; position: absolute; transform: translateX(-50%); }
.mc-chart-legend { color: #96a4bc; display: flex; font-size: .65rem; gap: 15px; margin: 22px 0 0; }
.mc-stats-grid ol { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.mc-stats-grid li { align-items: center; display: grid; gap: 7px; grid-template-columns: 8px 1fr auto; }
.mc-stats-grid li i { background: var(--mc-pink); border-radius: 50%; height: 7px; width: 7px; }
.mc-stats-grid li span,
.mc-stats-grid li time { color: #b6c1d5; font-size: .67rem; }
.mc-side-card > a:last-child,
.mc-bottom-card > a:last-child { align-items: center; color: var(--mc-pink); display: flex; font-family: "Barlow Condensed", sans-serif; font-size: .75rem; font-weight: 800; gap: 7px; justify-content: center; margin-top: 11px; text-decoration: none; text-transform: uppercase; }
.mc-standings th:nth-child(2) { min-width: 135px; }
.mc-standings tbody th { align-items: center; display: flex; gap: 6px; }
.mc-standings tbody img { object-fit: contain; }
.mc-mini-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mc-mini-tabs span { border: 1px solid var(--mc-line); color: #9ba8be; font-size: .55rem; padding: 6px 8px; text-transform: uppercase; }
.mc-mini-tabs span.is-active { border-bottom-color: var(--mc-pink); color: var(--mc-pink); }
.mc-other-list { display: grid; gap: 7px; }
.mc-other-list > a { background: #08172a; border: 1px solid rgba(139,159,198,.2); color: #fff; display: grid; gap: 4px; padding: 9px; text-decoration: none; }
.mc-other-list small { color: #97a6be; font-size: .61rem; }
.mc-other-list span { align-items: center; display: grid; gap: 7px; grid-template-columns: 38px 1fr auto 1fr 38px; }
.mc-other-list img { object-fit: contain; }
.mc-other-list b { font-size: .75rem; }
.mc-other-list em { color: #9aa7bc; font-size: .62rem; font-style: normal; }
.mc-other-list p { color: #9ca9bf; font-size: .61rem; margin: 0; }
.mc-watch-card dl,
.mc-info-list { display: grid; margin: 0; }
.mc-watch-card dl div,
.mc-info-list div { display: grid; gap: 8px; grid-template-columns: 90px minmax(0, 1fr); padding: 7px 0; }
.mc-watch-card dt,
.mc-info-list dt { color: #eef2fa; font-size: .68rem; font-weight: 800; }
.mc-watch-card dd,
.mc-info-list dd { color: #b7c2d5; font-size: .68rem; margin: 0; }
.mc-watch-card .primary-button { background: linear-gradient(90deg, #df2aa3, #f04db7); color: #fff !important; justify-content: center; padding: 11px; }
.mc-bottom-grid { display: grid; gap: 10px; grid-template-columns: 1.15fr .85fr .95fr; margin-top: 10px; }
.mc-playing-xi { display: block; }
.mc-playing-xi .ls-lineups-heading { color: #8f9db5; font-size: .7rem; margin: -7px 0 11px; }
.mc-playing-xi .ls-lineup-groups { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-playing-xi .ls-lineup-groups h3 { border-bottom: 1px solid var(--mc-line); color: var(--team-accent); font-size: .74rem; margin: 0 0 8px; padding-bottom: 7px; text-transform: uppercase; }
.mc-playing-xi ol { display: grid; gap: 3px; list-style: none; margin: 0; padding: 0; }
.mc-playing-xi li { align-items: center; display: grid; gap: 7px; grid-template-columns: 28px minmax(0, 1fr); min-height: 29px; }
.mc-playing-xi li img { height: 28px; object-fit: contain; object-position: bottom; width: 28px; }
.mc-playing-xi li .mc-player-fallback { font-size: .58rem; height: 24px; width: 24px; }
.mc-playing-xi li > span { align-items: center; display: flex; gap: 7px; min-width: 0; }
.mc-playing-xi li b { align-items: center; background: #8134c2; border-radius: 50%; display: flex; font-size: .56rem; height: 17px; justify-content: center; width: 17px; }
.mc-playing-xi li a,
.mc-playing-xi li div { color: #dce3ef; font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-match-news { display: grid; gap: 7px; }
.mc-match-news > a { align-items: center; border: 1px solid rgba(139,159,198,.2); color: #fff; display: grid; gap: 8px; grid-template-columns: 66px 1fr; padding: 6px; text-decoration: none; }
.mc-match-news img { height: 52px; object-fit: cover; width: 66px; }
.mc-match-news span { display: grid; gap: 2px; }
.mc-match-news b { color: var(--mc-green); font-size: .58rem; }
.mc-match-news strong { font-size: .68rem; line-height: 1.25; }
.mc-match-news small { color: #8997af; font-size: .56rem; }
.mc-feed-footer { align-items: center; color: #8f9db3; display: flex; font-size: .64rem; gap: 16px; justify-content: flex-end; padding: 16px 10px 0; }
.mc-feed-footer span:first-child { margin-right: auto; }
.mc-feed-footer button { background: transparent; border: 0; color: #d9e2ef; cursor: pointer; padding: 4px; }

@media (max-width: 1100px) {
  .mc-score-shell { grid-template-columns: minmax(0, 1.7fr) minmax(250px, .8fr); }
  .mc-content-grid { grid-template-columns: minmax(0, 1.75fr) minmax(270px, .8fr); }
  .mc-score-stage { padding-inline: 20px; }
  .mc-score-team { gap: 9px; }
  .mc-score-team img { height: 84px; width: 84px; }
  .mc-scoreboard { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); }
  .mc-bottom-grid { grid-template-columns: 1fr 1fr; }
  .mc-bottom-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .mc-page { padding-inline: 12px; }
  .mc-live-ticker { grid-template-columns: auto 1fr; margin-inline: -12px; padding-inline: 14px; }
  .mc-live-ticker > p:nth-of-type(2),
  .mc-live-ticker dl { display: none; }
  .mc-score-shell { grid-template-columns: 1fr; }
  .mc-crease-panel { border-left: 0; border-top: 1px solid var(--mc-line); display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
  .mc-crease-panel section + section { margin-top: 0; }
  .mc-feed-time { grid-column: 1 / -1; margin-top: 0; }
  .mc-content-grid { grid-template-columns: 1fr; }
  .mc-sidebar { grid-template-columns: 1fr 1fr; }
  .mc-sidebar > :last-child { grid-column: 1 / -1; }
  .mc-pulse-grid,
  .mc-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-pulse-grid > :last-child,
  .mc-stats-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .mc-page { padding: 0 8px 20px; }
  .mc-live-ticker { margin-inline: -8px; padding-inline: 10px; }
  .mc-live-ticker strong span { display: none; }
  .mc-live-ticker p { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mc-score-stage { min-height: auto; padding: 18px 12px; }
  .mc-match-meta h1 { font-size: .92rem; }
  .mc-scoreboard { gap: 6px; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); margin-block: 20px; }
  .mc-score-team,
  .mc-score-team-away { flex-direction: column; text-align: center; }
  .mc-score-team img { height: 62px; width: 62px; }
  .mc-score-team strong { font-size: 1rem; }
  .mc-score-team b { font-size: 1.55rem; }
  .mc-score-centre span { font-size: .58rem; padding: 5px 7px; }
  .mc-score-centre time { font-size: .58rem; }
  .mc-chase-box { padding-inline: 10px; }
  .mc-chase-box > div { flex-direction: column; gap: 4px; }
  .mc-crease-panel { grid-template-columns: 1fr; padding: 12px; }
  .mc-feed-time { grid-column: auto; }
  .mc-tabs { grid-template-columns: repeat(6, 100px); justify-content: start; }
  .mc-pulse-grid,
  .mc-scorecard-grid,
  .mc-stats-grid,
  .mc-sidebar,
  .mc-bottom-grid { grid-template-columns: 1fr; }
  .mc-pulse-grid > :last-child,
  .mc-stats-grid > :last-child,
  .mc-sidebar > :last-child,
  .mc-bottom-grid > :last-child { grid-column: auto; }
  .mc-playing-xi .ls-lineup-groups { grid-template-columns: 1fr; }
  .mc-feed-footer { align-items: flex-start; flex-wrap: wrap; }
  .mc-feed-footer span:first-child { flex-basis: 100%; }
}

/* Compact live match centre: progressive disclosure keeps the page focused. */
.lc-page {
  --lc-bg: #020917;
  --lc-panel: rgba(8, 20, 38, .96);
  --lc-panel-2: rgba(10, 25, 46, .96);
  --lc-line: rgba(139, 160, 194, .25);
  --lc-copy: #b9c5d7;
  --lc-pink: #e24ad0;
  --lc-purple: #8d3fd0;
  --lc-green: #49bf56;
  background: var(--lc-bg);
  margin-inline: auto;
  max-width: 1600px;
  padding: 0 22px 30px;
  width: 100%;
}
.lc-page h1,
.lc-page h2,
.lc-page h3 { letter-spacing: 0; }
.lc-match-strip {
  align-items: center;
  background: linear-gradient(90deg, #101b2d, #091526 60%, #0d1827);
  border-bottom: 1px solid rgba(123, 145, 180, .22);
  color: #dfe7f4;
  display: flex;
  gap: 10px;
  margin: 0 -22px;
  min-height: 46px;
  padding: 7px 22px;
}
.lc-match-strip > span {
  background: #5d2d91;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
}
.lc-match-strip > span.is-live { background: #d72d2d; }
.lc-match-strip strong,
.lc-match-strip p { font-size: 13px; margin: 0; text-transform: uppercase; }
.lc-match-strip strong { color: #fff; }
.lc-match-strip i { background: #8492a8; border-radius: 50%; height: 4px; width: 4px; }
.lc-match-strip time,
.lc-match-strip > small { color: #8d9bb2; font-size: 11px; margin-left: auto; }
.lc-page-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
  padding-top: 10px;
}
.lc-main,
.lc-sidebar { min-width: 0; }
.lc-main { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.lc-sidebar { display: grid; gap: 10px; }
.lc-score-hero,
.lc-current-bar,
.lc-workspace { max-width: 100%; min-width: 0; width: 100%; }
.lc-score-hero {
  background: linear-gradient(90deg, rgba(2, 9, 23, .94), rgba(3, 12, 25, .7)), url('/assets/images/hero/cpl-2026-teams-stadium-hero.webp') center/cover;
  border-bottom: 1px solid var(--lc-line);
  min-height: 255px;
  overflow: hidden;
  padding: 16px 30px 12px;
  position: relative;
}
.lc-score-hero::after {
  background: linear-gradient(180deg, transparent, rgba(2, 9, 23, .82));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.lc-score-hero > * { position: relative; z-index: 1; }
.lc-score-hero > h1 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.lc-scoreboard {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .62fr) minmax(0, 1fr);
  min-height: 190px;
}
.lc-score-team {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 22px;
  min-width: 0;
  text-decoration: none;
}
.lc-score-team-away { flex-direction: row-reverse; text-align: right; }
.lc-score-team img { height: 126px; object-fit: contain; width: 126px; }
.lc-score-team span { display: grid; gap: 2px; min-width: 0; }
.lc-score-team small {
  color: #e2e8f2;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.lc-score-team strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1;
  text-transform: uppercase;
}
.lc-score-team b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1;
}
.lc-score-centre { display: grid; gap: 6px; justify-items: center; text-align: center; }
.lc-score-centre > span {
  background: #632d91;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
}
.lc-score-centre > span.is-live { background: #dd2f2f; }
.lc-score-centre > b {
  align-items: center;
  border: 1px solid var(--lc-line);
  border-radius: 50%;
  display: flex;
  font-size: 12px;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.lc-score-centre h2 {
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
  margin: 2px 0 0;
  text-transform: uppercase;
}
.lc-score-centre p { color: var(--lc-copy); font-size: 12px; line-height: 1.4; margin: 0; }
.lc-match-rate {
  align-items: center;
  background: rgba(6, 17, 33, .82);
  border: 1px solid var(--lc-line);
  display: grid;
  grid-template-columns: 1fr 1fr 2.4fr;
  margin: 0;
  min-height: 44px;
}
.lc-match-rate > div {
  align-items: center;
  border-right: 1px solid var(--lc-line);
  display: flex;
  gap: 10px;
  justify-content: center;
  min-width: 0;
  padding: 7px 18px;
}
.lc-match-rate > div:last-child { border: 0; }
.lc-match-rate dt { color: #b7c1d2; font-size: 11px; text-transform: uppercase; }
.lc-match-rate dd { color: #fff; font-size: 12px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-current-bar {
  background: linear-gradient(90deg, var(--lc-panel-2), var(--lc-panel));
  border: 1px solid var(--lc-line);
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1.15fr;
  min-height: 102px;
}
.lc-current-bar > div {
  border-right: 1px solid var(--lc-line);
  min-width: 0;
  padding: 8px 14px;
}
.lc-current-bar > div:last-child { border: 0; }
.lc-current-bar > div > small,
.lc-recent > small {
  color: #9aa8be;
  display: block;
  font-size: 10px;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.lc-player-row {
  align-items: center;
  color: #fff;
  display: grid;
  gap: 9px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-height: 58px;
  position: relative;
  text-decoration: none;
}
.lc-player-row img { align-self: end; height: 56px; object-fit: contain; object-position: center bottom; width: 48px; }
.lc-player-row > span:not(.lc-player-fallback) { display: grid; gap: 4px; min-width: 0; }
.lc-player-row strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-player-row small { color: #bdc7d7; font-size: 10px; }
.lc-player-row > b { font-family: "Barlow Condensed", sans-serif; font-size: 22px; }
.lc-player-row > em {
  background: #6a278a;
  border-radius: 2px;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  padding: 3px 5px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 2px;
}
.lc-player-empty { color: #8d9bb0; font-size: 11px; line-height: 1.4; padding: 14px; }
.lc-player-fallback,
.lc-player-row .mc-player-fallback {
  align-items: center;
  background: #17243a;
  border-radius: 50%;
  color: #d9b7ff;
  display: flex;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.lc-recent { align-content: center; display: grid; }
.lc-recent-over { align-items: center; display: flex; gap: 7px; min-width: 0; }
.lc-recent-over > strong { color: #e6ecf5; font-size: 12px; margin-right: 5px; }
.lc-recent-over > span { display: flex; gap: 7px; }
.lc-recent-over i {
  align-items: center;
  background: #2a3648;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.lc-recent-over i.is-boundary { background: #277f3b; }
.lc-recent-over i.is-wicket { background: #d83434; }
.lc-inline-empty { color: #aab6c8; font-size: 13px; line-height: 1.45; margin: 0; }
.lc-workspace { background: var(--lc-panel); border: 1px solid var(--lc-line); overflow: hidden; }
.lc-tabs {
  border-bottom: 1px solid var(--lc-line);
  display: flex;
  min-height: 54px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lc-tabs::-webkit-scrollbar { display: none; }
.lc-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #dfe5ef;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  gap: 8px;
  justify-content: center;
  min-width: 142px;
  padding: 0 14px;
  text-transform: uppercase;
}
.lc-tabs button.is-active { border-bottom-color: var(--lc-pink); color: #fff; }
.lc-panel { display: grid; grid-template-columns: 1.35fr .9fr; min-height: 440px; }
.lc-panel[hidden] { display: none !important; }
.lc-panel > * { min-width: 0; padding: 14px 18px; }
.lc-panel > * + * { border-left: 1px solid var(--lc-line); }
.lc-commentary > header,
.lc-scorecard-block > header,
.lc-lineups > header,
.lc-side-card > header {
  align-items: center;
  border-bottom: 1px solid var(--lc-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 34px;
}
.lc-commentary h2,
.lc-scorecard-block h2,
.lc-lineups h2,
.lc-tab-info h2,
.lc-side-card h2 {
  color: #f3f6fb;
  font-size: 13px;
  margin: 0;
  text-transform: uppercase;
}
.lc-commentary header > div { display: flex; gap: 6px; }
.lc-commentary header span {
  border: 1px solid var(--lc-line);
  color: #aeb9ca;
  font-size: 9px;
  padding: 4px 8px;
  text-transform: uppercase;
}
.lc-commentary header span:first-child { background: #6b2a91; border-color: #6b2a91; color: #fff; }
.lc-commentary-list { list-style: none; margin: 0; padding: 0; }
.lc-commentary-list li {
  align-items: center;
  border-bottom: 1px solid rgba(139, 160, 194, .16);
  display: grid;
  gap: 12px;
  grid-template-columns: 42px 28px 1fr;
  min-height: 48px;
}
.lc-commentary-list time { color: var(--lc-pink); font-size: 12px; }
.lc-commentary-list b {
  align-items: center;
  background: #334052;
  border-radius: 50%;
  display: flex;
  font-size: 10px;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.lc-commentary-list b.is-boundary { background: #693294; }
.lc-commentary-list b.is-wicket { background: #d63030; }
.lc-commentary-list p { color: #d5ddea; font-size: 12px; line-height: 1.4; margin: 0; }
.lc-commentary-empty {
  align-items: center;
  color: #8998ad;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 345px;
  text-align: center;
}
.lc-commentary-empty h3 { color: #eef2f8; font-size: 16px; margin: 12px 0 6px; }
.lc-commentary-empty p { font-size: 13px; line-height: 1.5; margin: 0; max-width: 360px; }
.lc-scorecard-block > header span {
  background: #246f31;
  color: #fff;
  font-size: 8px;
  padding: 4px 7px;
  text-transform: uppercase;
}
.lc-table-wrap { overflow-x: auto; }
.lc-page table { border-collapse: collapse; color: #eef2f8; font-size: 11px; width: 100%; }
.lc-page th,
.lc-page td { border-bottom: 1px solid rgba(139, 160, 194, .16); padding: 9px 6px; text-align: right; white-space: nowrap; }
.lc-page th:first-child,
.lc-page td:first-child { text-align: left; }
.lc-page thead th { color: #c0cbdc; font-size: 10px; text-transform: uppercase; }
.lc-page tbody th { font-weight: 500; }
.lc-table-empty { color: #8e9cb1; height: 160px; text-align: center !important; }
.lc-scorecard-block dl { margin: 0; }
.lc-scorecard-block dl > div { display: grid; gap: 10px; grid-template-columns: 75px 1fr; padding: 8px 0; }
.lc-scorecard-block dt { color: #fff; font-size: 11px; font-weight: 700; }
.lc-scorecard-block dd { color: #b6c1d2; font-size: 11px; margin: 0; }
.lc-scorecard-block dl > div:nth-child(2) dd { color: #55d95d; font-size: 18px; font-weight: 900; }
.lc-stats-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
.lc-stats-panel > article { border: 1px solid var(--lc-line); padding: 22px; }
.lc-stats-panel > article + article { border-left: 1px solid var(--lc-line); }
.lc-stats-panel h2 { color: #aeb9ca; font-size: 11px; margin: 0 0 12px; text-transform: uppercase; }
.lc-stats-panel > article > strong { color: #fff; font-family: "Barlow Condensed", sans-serif; font-size: 30px; }
.lc-lineups { grid-column: 1 / -1; }
.lc-lineups header span { color: #98a6bb; font-size: 10px; }
.lc-lineups .ls-lineup-groups { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; padding-top: 14px; }
.lc-lineups h3 { border-bottom: 1px solid var(--lc-line); color: var(--team-accent); font-size: 12px; margin: 0 0 8px; padding-bottom: 8px; text-transform: uppercase; }
.lc-lineups ol { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lc-lineups li { align-items: center; display: grid; gap: 8px; grid-template-columns: 32px 1fr; min-height: 34px; }
.lc-lineups li img { height: 34px; object-fit: contain; object-position: bottom; width: 32px; }
.lc-lineups li > span { align-items: center; display: flex; gap: 8px; }
.lc-lineups li b { align-items: center; background: #6d2c95; border-radius: 50%; display: flex; font-size: 9px; height: 20px; justify-content: center; width: 20px; }
.lc-lineups li a,
.lc-lineups li div { color: #dce4ef; font-size: 11px; text-decoration: none; }
.lc-lineups article > p { color: #aab6c8; font-size: 13px; line-height: 1.45; }
.lc-tab-info { grid-column: 1 / -1; }
.lc-info-list { display: grid; margin: 0; }
.lc-info-list > div { display: grid; gap: 10px; grid-template-columns: 100px 1fr; padding: 6px 0; }
.lc-info-list dt { color: #f1f4f9; font-size: 11px; font-weight: 700; }
.lc-info-list dd { color: #b4c0d2; font-size: 11px; line-height: 1.35; margin: 0; }
.lc-side-card { background: linear-gradient(145deg, var(--lc-panel-2), var(--lc-panel)); border: 1px solid var(--lc-line); padding: 12px 14px; }
.lc-side-card header a { color: #c8d1df; font-size: 10px; text-decoration: none; text-transform: uppercase; }
.lc-side-card .lc-player-row { border-bottom: 1px solid rgba(139, 160, 194, .16); grid-template-columns: 50px 1fr auto; min-height: 64px; }
.lc-side-card .lc-player-row:last-child { border-bottom: 0; }
.lc-side-card .lc-player-row > em { right: 2px; top: 16px; }
.lc-other-matches > a {
  align-items: center;
  border-bottom: 1px solid rgba(139, 160, 194, .16);
  color: #fff;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px 1fr 44px;
  min-height: 82px;
  text-decoration: none;
}
.lc-other-matches > a:last-child { border-bottom: 0; }
.lc-other-matches img { object-fit: contain; }
.lc-other-matches span { display: grid; gap: 2px; }
.lc-other-matches small { color: #96a4b9; font-size: 9px; }
.lc-other-matches strong { font-size: 12px; }
.lc-other-matches em { color: #9ba9bd; font-size: 9px; font-style: normal; }
.lc-other-matches p { color: #c1cada; font-size: 13px; line-height: 1.4; margin: 0; }
.lc-watch dl { margin: 6px 0 12px; }
.lc-watch dl > div { display: grid; grid-template-columns: 95px 1fr; padding: 5px 0; }
.lc-watch dt { color: #e8edf5; font-size: 11px; }
.lc-watch dd { color: #b9c4d5; font-size: 11px; margin: 0; }
.lc-watch .primary-button { align-items: center; background: linear-gradient(90deg, #90289e, #c835bd); color: #fff; display: flex; font-size: 13px; justify-content: center; min-height: 44px; padding: 12px; }
.lc-feed-footer { align-items: center; color: #8290a6; display: flex; font-size: 10px; gap: 16px; justify-content: flex-end; padding: 12px 4px 0; }
.lc-feed-footer span:first-child { margin-right: auto; }
.lc-feed-footer button { align-items: center; background: transparent; border: 0; color: #dbe3ef; cursor: pointer; display: inline-flex; height: 44px; justify-content: center; padding: 4px; width: 44px; }
.is-feed-stale [data-live-connection],
.is-feed-stale [data-live-refresh-copy] { color: #ffd45c; }

@media (max-width: 1180px) {
  .lc-page-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .lc-score-team img { height: 96px; width: 96px; }
  .lc-scoreboard { grid-template-columns: 1fr 150px 1fr; }
  .lc-current-bar { grid-template-columns: 1fr 1fr; }
  .lc-current-bar > div:nth-child(2) { border-right: 0; }
  .lc-current-bar > div:nth-child(-n+2) { border-bottom: 1px solid var(--lc-line); }
}

@media (max-width: 900px) {
  .lc-page { padding-inline: 12px; }
  .lc-match-strip { margin-inline: -12px; padding-inline: 14px; }
  .lc-page-grid { grid-template-columns: 1fr; }
  .lc-sidebar { grid-template-columns: 1fr 1fr; }
  .lc-sidebar > :last-child { grid-column: 1 / -1; }
  .lc-panel { min-height: 390px; }
}

@media (max-width: 650px) {
  .lc-page { padding: 0 8px 24px; }
  .lc-match-strip { margin-inline: -8px; padding-inline: 9px; }
  .lc-match-strip p {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  .lc-match-strip time,
  .lc-match-strip > small { display: none; }
  .lc-score-hero { padding: 14px 10px 10px; }
  .lc-scoreboard { gap: 6px; grid-template-columns: 1fr 82px 1fr; min-height: 170px; }
  .lc-score-team,
  .lc-score-team-away { flex-direction: column; gap: 4px; text-align: center; }
  .lc-score-team img { height: 68px; width: 68px; }
  .lc-score-team strong { font-size: 17px; }
  .lc-score-team b { font-size: 31px; }
  .lc-score-centre h2 { font-size: 10px; }
  .lc-score-centre p { font-size: 11px; }
  .lc-match-rate { grid-template-columns: 1fr 1fr; }
  .lc-match-rate > div { padding-inline: 8px; }
  .lc-match-rate > div:nth-child(2) { border-right: 0; }
  .lc-match-rate > div:last-child { border-top: 1px solid var(--lc-line); grid-column: 1 / -1; }
  .lc-match-rate dd { white-space: normal; }
  .lc-current-bar { grid-template-columns: 1fr; }
  .lc-current-bar > div { border-bottom: 1px solid var(--lc-line); border-right: 0; }
  .lc-tabs button { min-width: 128px; }
  .lc-panel { grid-template-columns: 1fr; min-height: 0; }
  .lc-panel > * + * { border-left: 0; border-top: 1px solid var(--lc-line); }
  .lc-commentary-empty { min-height: 230px; }
  .lc-stats-panel { grid-template-columns: 1fr; }
  .lc-lineups .ls-lineup-groups,
  .lc-sidebar { grid-template-columns: 1fr; }
  .lc-sidebar > :last-child { grid-column: auto; }
  .lc-feed-footer { align-items: flex-start; flex-wrap: wrap; }
  .lc-feed-footer span:first-child { flex-basis: 100%; }
}

@media (max-width: 360px) {
  .lc-match-strip {
    align-items: flex-start;
    display: grid;
    grid-template-columns: auto auto 1fr;
  }
  .lc-match-strip p { grid-column: 1 / -1; }
}

/* Match-state clarity and readable live-centre typography. */
.lc-score-centre p,
.lc-commentary-empty p,
.lc-inline-empty,
.lc-lineups article > p,
.lc-other-matches p { font-size: 15px; }
.lc-page table,
.lc-scorecard-block dt,
.lc-scorecard-block dd,
.lc-info-list dt,
.lc-info-list dd,
.lc-watch dt,
.lc-watch dd { font-size: 14px; }
.lc-page thead th { font-size: 12px; }
.lc-tabs { scroll-padding-inline: 16px; scroll-snap-type: x proximity; }
.lc-tabs button { scroll-snap-align: center; }
.lc-page:not([data-live-state="live"]):not([data-live-state="innings-break"]):not([data-live-state="rain-delay"]) .lc-current-bar,
.lc-page:not([data-live-state="live"]):not([data-live-state="innings-break"]):not([data-live-state="rain-delay"]) .lc-sidebar > .lc-side-card:first-child { display: none; }
.lc-page:not([data-live-state="live"]):not([data-live-state="innings-break"]):not([data-live-state="rain-delay"]) .lc-panel { min-height: 250px; }
.lc-page:not([data-live-state="live"]):not([data-live-state="innings-break"]):not([data-live-state="rain-delay"]) .lc-commentary-empty { min-height: 170px; }
.lc-page:not([data-live-state="live"]):not([data-live-state="innings-break"]):not([data-live-state="rain-delay"]) .lc-table-empty { height: 100px; }

.site-ad-frame { position: relative; }
.site-ad-fallback {
  align-content: center;
  background: linear-gradient(145deg, #101735, #251052);
  border: 1px solid rgba(180, 108, 255, .42);
  color: #fff;
  display: grid;
  gap: 14px;
  height: 250px;
  inset: 0;
  padding: 28px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  width: 300px;
  z-index: 1;
}
.site-ad-fallback small { color: #ffd400; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.site-ad-fallback strong { font-family: "Barlow Condensed", sans-serif; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.site-ad-fallback span { border: 1px solid rgba(255, 255, 255, .34); font-size: 13px; font-weight: 800; margin-inline: auto; padding: 9px 14px; text-transform: uppercase; }
.site-ad-frame.is-fallback .site-ad-fallback { display: grid; }
.site-ad-frame.is-fallback iframe { display: none; }

@media (max-width: 650px) {
  .lc-workspace { position: relative; }
  .lc-workspace::after {
    background: linear-gradient(90deg, transparent, rgba(8, 20, 38, .96));
    content: "";
    height: 53px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    z-index: 2;
  }
  .lc-score-centre p,
  .lc-commentary-empty p,
  .lc-inline-empty,
  .lc-lineups article > p,
  .lc-other-matches p { font-size: 14px; }
  .lc-page table,
  .lc-scorecard-block dt,
  .lc-scorecard-block dd,
  .lc-info-list dt,
  .lc-info-list dd,
  .lc-watch dt,
  .lc-watch dd { font-size: 13px; }
}