@font-face{
  font-family: "Anta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/anta-latin.95489b93.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/public-sans-latin.c1b6da51.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --primary:        #dddbfd;
  --primary-strong: #efeeff;
  --secondary:      #d9fdff;

  --bg:             #0a0b0f;
  --surface:        #14161d;
  --surface-raised: #1b1e27;
  --surface-2:      #1f232e;
  --field:          #262b38;

  --ink:        #f2f3f7;
  --ink-muted:  #9aa1b2;
  --ink-over-photo: #d7dbe6;
  --line:       rgba(242,243,247,0.13);
  --line-soft:  rgba(242,243,247,0.06);

  --rule-accent: rgba(221,219,253,0.30);

  --accent: #b9b4ff;
  --ok:     #37d399;
  --danger: #ff6b61;

  --control-accent: #6c5cff;

  --ok-wash:     rgba(55,211,153,0.14);
  --danger-wash: rgba(255,107,97,0.14);

  --plate:       rgba(255,255,255,0.9);
  --plate-hover: #ffffff;

  --font-display: "Anta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --gap:       12px;

  --edge-light: inset 0 1px 0 rgba(255,255,255,0.055);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 12px 32px rgba(0,0,0,0.5);
  --glow:       0 0 0 1px rgba(221,219,253,0.28), 0 8px 30px rgba(221,219,253,0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

[hidden]{ display: none !important; }

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

body{
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% -5%,  rgba(221,219,253,0.07), transparent 70%),
    radial-gradient(50vw 40vh at 92% 8%,   rgba(217,253,255,0.05), transparent 70%);
}

.page{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

img{ max-width: 100%; }

a{ color: var(--accent); }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

h1{ font-size: clamp(1.9rem, 5vw, 2.9rem); }
h2{ font-size: clamp(1.25rem, 3vw, 1.6rem); }
h3{ font-size: 1.02rem; letter-spacing: -0.01em; }

.microLabel{
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hint{
  display: block;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

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

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.topBar{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10,11,15,0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.topBar__inner{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}

.brand__mark{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: contain;
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.brand__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__name em{
  font-style: normal;
  color: var(--primary);
}

.topBar__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.hero{
  position: relative;
  margin-bottom: 26px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.heroCollage{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}

.heroTile{
  background-position: center;
  background-size: cover;

  filter: blur(2px) saturate(118%) contrast(106%);
  transform: scale(1.08);
  opacity: 0.9;
}

.heroTile:nth-child(1){ background-image: url("./images/game-images/PHOTO-2025-11-18-14-01-13.jpg"); }
.heroTile:nth-child(2){ background-image: url("./images/game-images/PHOTO-2026-05-15-18-42-11.jpg"); }
.heroTile:nth-child(3){ background-image: url("./images/game-images/PHOTO-2025-11-18-14-01-27.jpg"); }
.heroTile:nth-child(4){ background-image: url("./images/game-images/PHOTO-2026-05-15-18-41-55.jpg"); }
.heroTile:nth-child(5){ background-image: url("./images/game-images/PHOTO-2026-05-15-18-42-00.jpg"); }
.heroTile:nth-child(6){ background-image: url("./images/game-images/PHOTO-2025-11-18-14-01-21.jpg"); }
.heroTile:nth-child(7){ background-image: url("./images/game-images/PHOTO-2025-11-18-14-01-25.jpg"); }
.heroTile:nth-child(8){ background-image: url("./images/game-images/PHOTO-2025-11-18-14-01-14.jpg"); }

.heroTile{ animation: heroDrift 38s var(--ease) infinite alternate; }
.heroTile:nth-child(2){ animation-duration: 44s; animation-delay: -6s;  }
.heroTile:nth-child(3){ animation-duration: 52s; animation-delay: -14s; }
.heroTile:nth-child(4){ animation-duration: 41s; animation-delay: -22s; }
.heroTile:nth-child(5){ animation-duration: 47s; animation-delay: -9s;  }
.heroTile:nth-child(6){ animation-duration: 55s; animation-delay: -30s; }
.heroTile:nth-child(7){ animation-duration: 43s; animation-delay: -17s; }
.heroTile:nth-child(8){ animation-duration: 50s; animation-delay: -25s; }

@keyframes heroDrift{
  from{ transform: scale(1.08) translate3d(0, 0, 0); }
  to  { transform: scale(1.16) translate3d(-1.5%, -2%, 0); }
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10,11,15,0.62) 0%,
      rgba(10,11,15,0.48) 34%,
      rgba(10,11,15,0.86) 76%,
      var(--bg) 100%),
    linear-gradient(115deg,
      rgba(221,219,253,0.16) 0%,
      transparent 42%,
      rgba(217,253,255,0.12) 100%);
}

.hero__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(14px, 2.5vw, 26px) 16px clamp(28px, 6vw, 48px);
  text-align: center;
}

.pageActions{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.heroLogo{
  display: block;
  width: auto;
  height: clamp(132px, 29vh, 300px);
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto clamp(-10px, -1.4vh, -4px);
}

.hero h1{
  font-size: clamp(2.2rem, 7.5vw, 4.2rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: 0 auto;
  text-wrap: balance;
}

.hero:not(.hero--slim) h1{ font-weight: 700; }

.hero h1 em{
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__tagline{
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-over-photo);
}

.hero__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: clamp(18px, 3.2vh, 32px);
}

.hero--slim .hero__inner{
  padding: clamp(34px, 6vw, 56px) 16px clamp(22px, 4vw, 34px);
  text-align: left;
}
.hero--slim .heroTile{ filter: blur(2px) saturate(120%) contrast(108%); opacity: 0.95; }

.hero--slim::after{
  background:
    linear-gradient(180deg,
      rgba(10,11,15,0.58) 0%,
      rgba(10,11,15,0.44) 40%,
      rgba(10,11,15,0.82) 80%,
      var(--bg) 100%),
    linear-gradient(115deg,
      rgba(221,219,253,0.14) 0%,
      transparent 45%,
      rgba(217,253,255,0.10) 100%);
}

.btn,
.btnLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--edge-light);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:hover:not(:disabled),
.btnLink:hover{
  background: var(--surface-2);
  border-color: rgba(221,219,253,0.34);
  transform: translateY(-1px);
  box-shadow: var(--edge-light), var(--shadow-sm);
}

.btn:active:not(:disabled){ transform: translateY(0); }

.btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--ghost{ background: var(--surface); }

.btn--primary{
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
  font-weight: 700;
}

.btn--primary:hover:not(:disabled){
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  box-shadow: var(--glow);
}

.btn--danger{
  background: var(--surface);
  border-color: var(--danger);
  color: var(--danger);
}

.btn--danger:hover:not(:disabled){
  background: var(--danger-wash);
  border-color: var(--danger);
}

.btn--sm{
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.9rem;
  border-radius: 10px;
}

.iconBtn{
  width: 44px;
  min-width: 44px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.btn--sm.iconBtn{ width: 38px; min-width: 38px; }

.iconBtn:hover{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.socialIcon{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 11px;
  transform: scale(1.12);
  opacity: 0.92;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.iconBtn:hover .socialIcon{ opacity: 1; transform: scale(1.17); }

.backLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color 0.15s var(--ease);
}

.backLink:hover{ color: var(--ink); }

.menu{
  margin: 0 0 4px;
  border-top: 1px solid var(--rule-accent);
}

.menuGroup{ display: block; }

.menuGroup + .menuGroup{ margin-top: 0; }

.menuCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--rule-accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.menuCard small{
  order: -1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.menuCard__name{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.menuCard__name::after{
  content: "→";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-muted);
  transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}

.menuCard:hover{ color: var(--primary); }

.menuCard:hover .menuCard__name::after{
  transform: translateX(4px);
  color: var(--primary);
}

.menuCard--soon{
  color: var(--ink-muted);
  cursor: not-allowed;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.menuCard--soon:hover{ color: var(--ink-muted); }

.pageHead{
  padding: 40px 0 22px;
}

.pageHead h1{ margin-bottom: 6px; }

.subHead{
  margin: 22px 0 10px;
  color: var(--secondary);
}

.sectionHead{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.sectionHead--center{ justify-content: center; }

.leagueHeading{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.leagueHeading h1{
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  letter-spacing: -0.035em;
}

.lastUpdated{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.tableWrap{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--edge-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.leagueTable{
  border-collapse: collapse;
  width: 100%;
  min-width: 340px;
  font-variant-numeric: tabular-nums;
}

.colPos{ width: 58px; }
.colPlayed{ width: 74px; }
.colGd{ width: 66px; }
.colPts{ width: 72px; }

.leagueTable th{
  padding: 13px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.leagueTable td{
  padding: 0 12px;
  height: 54px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
}

.leagueTable tbody tr:last-child td{ border-bottom: 0; }

.leagueTable tbody tr{ transition: background 0.15s var(--ease); }
.leagueTable tbody tr:hover{ background: rgba(242,243,247,0.032); }

.leagueTable th:nth-child(2),
.leagueTable .teamCell{
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.leagueTable th:nth-child(1),
.leagueTable td:nth-child(1),
.leagueTable th:nth-child(3),
.leagueTable td:nth-child(3),
.leagueTable th:nth-child(4),
.leagueTable td:nth-child(4),
.leagueTable th:nth-child(5),
.leagueTable td:nth-child(5){
  white-space: nowrap;
}

.rankBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.rankRow--1 .rankBadge{
  background: linear-gradient(150deg, var(--primary), #b9b4ff);
  border-color: transparent;
  color: var(--bg);
  box-shadow: 0 3px 14px rgba(221,219,253,0.3);
}

.rankRow--2 .rankBadge,
.rankRow--3 .rankBadge{
  background: rgba(221,219,253,0.14);
  border-color: rgba(221,219,253,0.35);
  color: var(--primary);
}

.rankRow--1 td:first-child{
  box-shadow: inset 3px 0 0 var(--primary);
}

.teamCell{
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.numCell{
  color: var(--ink-muted);
  font-size: 0.94rem;
  font-weight: 500;
}

.ptsCell{
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
}

.tableEmpty{
  padding: 30px 12px !important;
  height: auto !important;
  color: var(--ink-muted);
  text-align: center;
}

.fixturesSection{ margin-top: 34px; }

.fixtures{
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.fixtureCard{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--edge-light);
  padding: 14px 16px 16px;
  text-align: left;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fixtureCard:hover{
  border-color: rgba(221,219,253,0.26);
  transform: translateY(-2px);
}

.fixtureTitle{
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  text-align: left;
}

.fixtureLine{
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 8px 0 0;
}

.fixturePitch{
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fixtureVs{
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.fxV{
  display: inline-block;
  margin: 0 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fixtureEmpty{
  grid-column: 1 / -1;
  padding: 34px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-muted);
  font-weight: 500;
  text-align: center;
}

.archiveSection{
  margin-top: 26px;
  text-align: center;
}

.archiveImage{
  width: 100%;
  height: auto;
  display: block;
  margin: 16px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.panel{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--edge-light);
  padding: 18px;
  margin-bottom: 16px;
  text-align: left;
}

.panel--inset{
  background: var(--surface-2);
  border-radius: var(--radius);
  margin: 12px 0 0;
  box-shadow: none;
}

.panel--danger{ border-color: rgba(255,107,97,0.45); }

.panelHead{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap);
}

.row--top{ margin-top: 12px; }

.field{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 180px;
}

.field--narrow{ flex: 0 1 110px; }

.field label{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.checkRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.check input[type="checkbox"]{
  width: 20px;
  height: 20px;
  accent-color: var(--control-accent);
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select{
  font: inherit;
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus{
  border-color: rgba(221,219,253,0.5);
  box-shadow: 0 0 0 3px rgba(221,219,253,0.13);
}

select{
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f2f3f7' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

input:disabled,
select:disabled{
  background: var(--surface);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.teamNames{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.teamNameRow{
  display: flex;
  align-items: center;
  gap: 10px;
}

.teamNumber{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
}

.quickRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}

.quickRow:first-of-type{ border-top: 0; }

.quickRow--done{ opacity: 0.72; }

.quickTeams{
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quickInputs{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.scoreInput{
  width: 68px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.scoreDash{ font-weight: 700; color: var(--ink-muted); }

.msg{
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 1.2em;
}

.msg--ok{ color: var(--ok); }
.msg--error{ color: var(--danger); }

.tag{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--done{
  background: var(--ok-wash);
  color: var(--ok);
}

.tag--undone{
  background: var(--danger-wash);
  color: var(--danger);
}

.badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--secondary);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.lastMatch{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.siteFooter{
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.footerNav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.partners{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.partners__label{
  flex: 0 0 100%;
  margin-bottom: 2px;
  text-align: center;
}

.partnerPlate{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--plate);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

a.partnerPlate:hover{
  background: var(--plate-hover);
  transform: translateY(-1px);
}

.partnerPlate img{
  display: block;
  width: auto;
  height: 30px;
  object-fit: contain;
}

.partnerPlate--uop img{
  height: 44px;
  margin: -7px 0;
}

.partnerPlate--sponsor{
  padding: 0;
  overflow: hidden;
  background: transparent;
}

a.partnerPlate--sponsor:hover{ background: transparent; }

.partnerPlate--sponsor img{
  height: 48px;
  width: auto;
  border-radius: inherit;
}

.hero__meta .partnerPlate--sponsor img{
  height: auto;
  width: clamp(122px, 26vw, 164px);
}

.legal{
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.7;
  color: #6f7686;
}

.legal a{
  color: #8a91a3;
  text-decoration: none;
}

.legal a:hover{
  color: var(--ink);
  text-decoration: underline;
}

.siteFooter > .legal:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.siteFooter > .partners:first-child{ margin-top: 0; }

.legal__sep{
  margin: 0 7px;
  opacity: 0.5;
}

.legal__line + .legal__line{ margin-top: 4px; }

.prose{ max-width: 68ch; }

.prose h2{
  margin: 34px 0 10px;
  font-size: 1.22rem;
}

.prose h3{
  margin: 22px 0 6px;
  font-size: 1rem;
  color: var(--secondary);
}

.prose p,
.prose ul{
  margin: 0 0 12px;
  color: #c8cddb;
}

.prose ul{ padding-left: 20px; }
.prose li{ margin-bottom: 6px; }

.prose strong{ color: var(--ink); font-weight: 650; }

.prose__updated{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.calloutNote{
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--secondary);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.92rem;
}

.errorPanel{
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 28px;
  text-align: center;
}

@media (max-width: 900px){
  .fixtures{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .heroCollage{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px){
  .page{ padding: 0 12px 36px; }

  .fixtures{ grid-template-columns: 1fr; }

  .menuCard{ font-size: 1.22rem; padding: 13px 2px; }
  .menuCard--soon{ font-size: 0.72rem; }

  .heroCollage{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .heroTile:nth-child(n+5){ display: none; }

  .leagueTable th{ padding: 11px 8px; font-size: 0.62rem; letter-spacing: 0.1em; }
  .leagueTable td{ padding: 0 8px; height: 48px; font-size: 0.92rem; }

  .colPos{ width: 46px; }
  .colPlayed{ width: 52px; }
  .colGd{ width: 48px; }
  .colPts{ width: 54px; }

  .rankBadge{ width: 24px; height: 24px; font-size: 0.76rem; border-radius: 8px; }
  .ptsCell{ font-size: 1.06rem; }

  .brand__name{ font-size: 0.94rem; }

  .quickRow{ align-items: stretch; }
  .quickTeams{ flex-basis: 100%; font-weight: 600; }
  .quickInputs{ flex: 1 1 auto; }
  .quickRow .btn{ flex: 1 1 auto; }

  .row > .btn{ flex: 1 1 100%; }
}

@media (max-width: 420px){
  .topBar__actions .btnLink:not(.iconBtn){ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .menuCard:hover,
  .fixtureCard:hover,
  .btn:hover:not(:disabled),
  .btnLink:hover{ transform: none; }
  .heroTile{ transform: scale(1.08); }
}