:root {
  --bg: #081018;
  --bg-soft: #0d1721;
  --surface: rgba(15, 23, 34, 0.92);
  --surface-2: rgba(11, 18, 28, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --text: #ecf1f7;
  --muted: #9eb0c3;
  --gold: #ddb15b;
  --cyan: #33b8ec;
  --danger: #f25f5c;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(39, 69, 119, 0.16), transparent 34%),
    radial-gradient(circle at top right, rgba(231, 172, 61, 0.10), transparent 28%),
    linear-gradient(180deg, #071018 0%, #09131d 35%, #0b1118 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-frame {
  max-width: 1280px;
  padding: 26px 18px 44px;
}

.page-shell {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.top-brand {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--text);
}

.top-subbrand {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  margin-top: 4px;
}

.top-pill-wrap {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.top-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-shell {
  margin-top: 28px;
}

.hero-eyebrow,
.section-eyebrow {
  display: inline-block;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  font-weight: 800;
}

.hero-title {
  margin-top: 12px;
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero-subtitle,
.section-subtitle,
.muted-copy {
  color: var(--muted);
}

.hero-subtitle {
  max-width: 860px;
  font-size: 1.06rem;
  line-height: 1.75;
}

.club-card,
.surface-card,
.versus-shell,
.stat-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18,27,39,0.97), rgba(10,17,27,0.97));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.club-card {
  overflow: hidden;
  height: 100%;
}

.club-card-banner {
  width: 100%;
  overflow: hidden;
  background: #0b121c;
  border-bottom: 1px solid var(--line);
}

.club-card-art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  max-height: none;
}

.club-card-copy {
  padding: 20px 20px 22px;
}

.club-name {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.club-tagline {
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 14px;
}

.club-meta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.club-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 0.92rem;
}

.versus-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.versus-core {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: #081018;
  background: linear-gradient(135deg, var(--gold), #f6d07c);
  box-shadow: 0 10px 28px rgba(221, 177, 91, 0.35);
  margin-bottom: 14px;
}

.versus-text {
  font-weight: 700;
  margin-bottom: 6px;
}

.premium-tabs .nav-tabs {
  border-bottom: 1px solid var(--line);
  gap: 10px;
}

.premium-tabs .nav-link {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border-radius: 999px !important;
  padding: 12px 18px;
  font-weight: 700;
}

.premium-tabs .nav-link.active,
.premium-tabs .nav-link:hover {
  background: linear-gradient(135deg, rgba(221,177,91,0.18), rgba(51,184,236,0.1));
  border-color: rgba(221,177,91,0.45);
  color: var(--text);
}

.section-title {
  font-size: 2rem;
  font-weight: 900;
  margin-top: 10px;
  margin-bottom: 8px;
}

.panel-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.surface-card {
  padding: 22px;
}

.stat-card {
  padding: 20px;
  height: 100%;
}

.stat-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.stat-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 800;
}

.stat-value {
  font-size: 2rem;
  font-weight: 900;
  margin-top: 6px;
}

.match-card { padding: 22px; }
.match-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 800;
}
.match-date { color: var(--muted); margin-top: 8px; }
.match-fixture { font-weight: 700; margin-top: 14px; }
.match-score { font-size: 2rem; font-weight: 900; margin-top: 10px; }
.match-status { color: var(--muted); margin-top: 4px; }

.premium-table { color: var(--text); margin-bottom: 0; }
.premium-table thead th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  border-bottom-color: rgba(255,255,255,0.09);
}
.premium-table td,
.premium-table th { border-color: rgba(255,255,255,0.07); }
.premium-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.golden-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.golden-row:last-child { border-bottom: none; }
.golden-rank {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(221, 177, 91, 0.14);
  color: var(--gold);
  font-weight: 900;
}
.golden-player { font-weight: 800; }
.golden-goals { color: var(--muted); font-size: 0.92rem; }

.roster-panel { overflow: hidden; }
.roster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.roster-team-name {
  font-size: 1.5rem;
  font-weight: 900;
}
.roster-team-meta { color: var(--muted); margin-top: 6px; }
.roster-team-mascot {
  display: block;
  width: 150px;
  max-width: 34%;
  height: auto;
  aspect-ratio: 15 / 11;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0b121c;
}
.roster-list { padding-top: 12px; }
.roster-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.roster-row:last-child { border-bottom: none; }
.roster-number {
  min-width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #081018;
  font-weight: 900;
}
.roster-player-name { font-weight: 700; }

.rules-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}
.rules-list li { margin-bottom: 12px; color: var(--muted); }

.form-control,
.form-select,
textarea.form-control {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
  border-radius: 14px;
  min-height: 48px;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: rgba(221,177,91,0.6);
  box-shadow: 0 0 0 0.2rem rgba(221,177,91,0.16);
}

.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--gold), #f2c86a);
  border: none;
  color: #081018;
  font-weight: 800;
  border-radius: 999px;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background: linear-gradient(135deg, #f0c56b, #f8d98c);
  color: #081018;
}

.alert {
  border-radius: 16px;
  border: none;
}

.site-footer {
  text-align: center;
  color: var(--muted);
  padding: 32px 8px 12px;
}

.small { font-size: 0.88rem; }

@media (max-width: 991px) {
  .top-pill-wrap { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .app-frame { padding: 16px 12px 30px; }
  .page-shell { padding: 18px; border-radius: 22px; }
  .hero-title { font-size: 2.2rem; }
  .club-card-banner { min-height: 0; }
  .versus-core { width: 84px; height: 84px; font-size: 1.6rem; }
  .roster-team-mascot { width: 110px; }
}

/* Full artwork, including crown and club lettering, remains visible on laptop screens. */
.club-card-banner { display: flex; align-items: center; justify-content: center; background: #11171e; }
.club-card-art { width: 100%; height: auto; display: block; aspect-ratio: auto; object-fit: contain; }
/* Windows/Edge native dropdowns use light popup backgrounds; set dark text for options. */
.form-select { color: #f3f6fb !important; background-color: #152333 !important; }
.form-select option, .form-select optgroup { color: #111827 !important; background-color: #ffffff !important; }
.form-select:focus { color: #ffffff !important; }

/* V6 navigation: positioned directly below the brand header, above hero imagery. */
.site-header {
  padding: 10px 8px 18px;
}
.site-navigation {
  margin-bottom: 20px;
}
.site-navigation .nav-tabs {
  flex-wrap: nowrap;
  display: flex;
  gap: 10px;
  border: 0;
}
.site-navigation .nav-item {
  min-width: 0;
}
.site-navigation .nav-link {
  white-space: nowrap;
  text-align: center;
  display: block;
}

@media (max-width: 767px) {
  .site-header {
    padding: 4px 4px 14px;
  }
  .top-brand {
    font-size: 1.42rem;
  }
  .top-subbrand {
    font-size: .68rem;
    letter-spacing: .10em;
  }
  .top-pill-wrap {
    display: none;
  }
  /* The navigation stays visible while the page scrolls on phones. */
  .site-navigation {
    position: sticky;
    top: 0;
    z-index: 1050;
    margin: 0 -12px 16px;
    padding: 9px 12px 11px;
    background: rgba(8, 16, 24, .97);
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .site-navigation .nav-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .site-navigation .nav-item {
    width: 100%;
  }
  .site-navigation .nav-link {
    padding: 12px 3px;
    width: 100%;
    border-radius: 12px !important;
    font-size: clamp(.70rem, 3vw, .83rem);
    line-height: 1.2;
  }
  .hero-shell {
    margin-top: 0;
  }
  .page-shell {
    padding: 18px;
  }
}


/* V7: modern navigation for desktop and phones */
.site-navigation {
  position: relative;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(22,34,50,.96), rgba(12,21,33,.96));
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.site-navigation .nav-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  width: 100%;
  gap: 6px;
}
.site-navigation .nav-item { min-width: 0; width: 100%; }
.site-navigation .nav-link {
  display: block;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid transparent;
  border-radius: 14px !important;
  color: #bac7d7;
  font-weight: 700;
  font-size: .94rem;
  background: transparent;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.site-navigation .nav-link:hover {
  color: #f4f7fb;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.07);
}
.site-navigation .nav-link.active {
  color: #111923;
  background: linear-gradient(125deg,#f0d18a,#d7a64d);
  border-color: rgba(243,213,147,.85);
  box-shadow: 0 5px 17px rgba(220,171,83,.22);
}
.nav-tab-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.nav-tab-icon { font-size: 1.06rem; line-height: 1; }
.page-shell { margin-top: 20px; }
/* The hero is rendered only inside Overview, not in the shared app header. */
@media (max-width: 767px) {
  .site-navigation {
    position: sticky;
    top: 0;
    z-index: 1050;
    margin: 0 -12px 14px;
    padding: 8px 10px;
    border-radius: 0 0 18px 18px;
    border-top: 0;
    background: rgba(9,16,26,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .site-navigation .nav-tabs { gap: 5px; }
  .site-navigation .nav-link { padding: 11px 2px; font-size: .75rem; }
  .nav-tab-inner { flex-direction: column; gap: 5px; }
  .nav-tab-icon { font-size: 1.22rem; }
  .page-shell { margin-top: 0; }
}

/* V8: dbc.Tab 2.0 labels must be strings. Decorative icons are CSS only. */
.site-navigation .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.site-navigation .nav-link::before {
  font-family: inherit;
  font-size: 1.12rem;
  line-height: 1;
  font-weight: 400;
}
.site-navigation .nav-item:nth-child(1) .nav-link::before { content: "⌂"; }
.site-navigation .nav-item:nth-child(2) .nav-link::before { content: "♟"; }
.site-navigation .nav-item:nth-child(3) .nav-link::before { content: "♡"; }
.site-navigation .nav-item:nth-child(4) .nav-link::before { content: "⚙"; }
@media (max-width: 767px) {
  .site-navigation .nav-link { flex-direction: column; gap: 5px; }
  .site-navigation .nav-link::before { font-size: 1.22rem; }
}


/* V9: Dash Bootstrap Tabs attaches site-navigation to the nav element itself.
   Target that node rather than only a descendant, preventing laptop stacking. */
.site-navigation,
.site-navigation.nav,
.site-navigation.nav-tabs,
.site-navigation .nav,
.site-navigation .nav-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 8px;
}
.site-navigation > .nav-item,
.site-navigation .nav-tabs > .nav-item {
  min-width: 0;
  width: 100%;
  margin: 0;
}
.site-navigation .nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 9px;
  font-size: clamp(.75rem, 1.1vw, .93rem);
  white-space: normal;
  line-height: 1.2;
  border-radius: 14px !important;
}
.site-navigation .nav-item:nth-child(1) .nav-link::before { content: "⌂"; }
.site-navigation .nav-item:nth-child(2) .nav-link::before { content: "▦"; }
.site-navigation .nav-item:nth-child(3) .nav-link::before { content: "♟"; }
.site-navigation .nav-item:nth-child(4) .nav-link::before { content: "♡"; }
.site-navigation .nav-item:nth-child(5) .nav-link::before { content: "⚙"; }
@media (max-width: 767px) {
  .site-navigation,
  .site-navigation.nav,
  .site-navigation.nav-tabs,
  .site-navigation .nav,
  .site-navigation .nav-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .site-navigation .nav-link {
    flex-direction: column;
    gap: 5px;
    min-height: 62px;
    padding: 9px 2px;
    font-size: clamp(.58rem, 2.6vw, .75rem);
    overflow-wrap: anywhere;
  }
  .site-navigation .nav-link::before { font-size: 1.1rem; }
}


/* V11 — edge-to-edge responsive layout, while retaining the existing navigation design. */
html, body, #react-entry-point, #_dash-app-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html, body {
  overflow-x: clip;
}
.app-frame.container-fluid {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: clamp(10px, 2vw, 28px);
  padding-right: clamp(10px, 2vw, 28px);
}
.app-frame .row,
.app-frame .row > [class*="col"],
.app-frame #page,
.app-frame .page-shell,
.app-frame .site-navigation {
  min-width: 0;
  max-width: 100%;
}
/* Override previous negative mobile margins, which made the menu appear offset. */
@media (max-width: 767px) {
  .app-frame.container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
  .site-navigation,
  .site-navigation.nav,
  .site-navigation.nav-tabs {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  .site-navigation .nav-link {
    overflow-wrap: anywhere;
  }
  .page-shell {
    width: 100%;
    max-width: 100%;
  }
}

/* V12: dark premium Fan Zone panels; existing header/nav styles unchanged */
.fan-panel { border-top: 3px solid #5864b7; }
.fan-panel.fan-purple { border-top-color: #8c7ce9; }
.fan-panel.fan-gold { border-top-color: #e6b54c; }
.fan-panel.fan-green { border-top-color: #32be95; }
.fan-heading { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.fan-heading .panel-title { margin:0; }
.fan-icon { font-size:1.65rem; }
.fan-panel .form-label { font-weight:650; color:#dbe4ef; }
.fan-panel .btn { min-height:42px; }
.fan-status-row {padding:10px 0; border-bottom:1px solid rgba(255,255,255,.10);}
.fan-status-row:last-child {border-bottom:0;}
.fan-table { font-size:.92rem; }
@media(max-width:767px){.fan-panel{padding:18px 14px;}.fan-table{font-size:.85rem;}}

/* V12.5.1: distinguish in-progress saves on desktop and mobile. */
button.btn:disabled { cursor: progress; }
button.btn:disabled .bi-hourglass-split { display: inline-block; animation: sundayfc-hourglass 1.1s ease-in-out infinite; }
@keyframes sundayfc-hourglass { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } }

/* V12.6 — full width, theme switcher, accessible match results and standings */
.app-frame { max-width: none; width: 100%; }
.player-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin:12px 0; }
.player-access {display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.player-pin-input {width:132px;padding:7px 10px;border-radius:10px;background:var(--surface);color:var(--text);border:1px solid var(--line);}
.player-welcome {color:var(--gold);font-weight:750;font-size:0.95rem;}
.match-score-values {display:flex;gap:12px;justify-content:center;align-items:center;font-size:2rem;font-weight:900;}
.result-win {color:#25b969;}
.result-loss {color:#f26b70;}
.result-draw {color:#4bafff;}
.score-divider {color:var(--muted);}
.standings-table-wrap {width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.13);background:var(--surface);}
.standings-table {width:100%;border-collapse:separate!important;border-spacing:0!important;min-width:490px;margin-bottom:0!important;}
.standings-table th {padding:15px 11px!important;background:rgba(221,177,91,.12)!important;white-space:nowrap;color:var(--muted)!important;font-size:.78rem;text-align:center;}
.standings-table th:first-child {text-align:left;}
.standings-table td {padding:16px 11px!important;background:transparent!important;color:var(--text)!important;text-align:center;vertical-align:middle;}
.standings-table td:first-child {text-align:left;min-width:156px;font-weight:750;}
.standings-table .standings-leader td {background:rgba(221,177,91,.085)!important;}
.standings-star {color:#e6ae42;}
.points-pill {display:inline-flex;min-width:34px;justify-content:center;border-radius:9px;background:rgba(221,177,91,.20);padding:5px 8px;font-weight:850;color:var(--text);}
html[data-sundayfc-theme="light"] {--bg:#f2f5fa;--bg-soft:#eaf0f6;--surface:#fff;--surface-2:#f6f8fc;--line:rgba(36,52,74,.18);--text:#162438;--muted:#52647b;--shadow:0 12px 32px rgba(22,36,58,.10);}
html[data-sundayfc-theme="light"] body {background:linear-gradient(180deg,#eef3f9,#f7f9fd 45%,#edf2f7)!important;color:var(--text);}
html[data-sundayfc-theme="light"] .surface-card,
html[data-sundayfc-theme="light"] .stat-card,
html[data-sundayfc-theme="light"] .versus-shell,
html[data-sundayfc-theme="light"] .club-card {background:linear-gradient(180deg,#fff,#f8fafd)!important;color:var(--text)!important;border-color:var(--line)!important;}
html[data-sundayfc-theme="light"] .surface-card *,
html[data-sundayfc-theme="light"] .stat-card * {--bs-body-color:var(--text);}
html[data-sundayfc-theme="light"] .premium-tabs .nav-link {color:#34465f;background:#e6edf5;}
html[data-sundayfc-theme="light"] .premium-tabs .nav-link.active {color:#18273b;background:#efd29a;}
html[data-sundayfc-theme="light"] .form-select,
html[data-sundayfc-theme="light"] .form-control {background-color:#fff!important;color:#1c2e42!important;border-color:#c8d3df!important;}
html[data-sundayfc-theme="light"] .form-select option {color:#1c2e42!important;}
html[data-sundayfc-theme="light"] .top-pill {background:#fff;color:#52647b;}
html[data-sundayfc-theme="light"] .premium-table {--bs-table-bg:transparent;--bs-table-color:#162438;}
html[data-sundayfc-theme="light"] .standings-table-wrap {background:#fff;}
html[data-sundayfc-theme="light"] .standings-table th {background:#f3e4c9!important;color:#334155!important;}
html[data-sundayfc-theme="light"] .standings-table .standings-leader td {background:#fff8e9!important;}
html[data-sundayfc-theme="light"] .points-pill {color:#614612;}
html[data-sundayfc-theme="light"] .muted-copy,
html[data-sundayfc-theme="light"] .section-subtitle {color:#536579;}
html[data-sundayfc-theme="light"] .page-shell {background:rgba(255,255,255,.6);}
@media(max-width:575px){.player-controls{justify-content:center}.player-access{justify-content:center}.match-score-values{font-size:1.7rem}}

/* Standings: team identity without an artificial leader star. */
.standings-team-label { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.standings-team-logo { height:31px; width:31px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.19)); }
@media(max-width:540px) { .standings-team-label {gap:6px;} .standings-team-logo {height:25px; width:25px;} }

/* Admin analytics: adapt to both existing themes */
.analytics-kpi { border: 1px solid rgba(128,148,170,.25); border-radius: 14px; padding: 16px; height:100%; background:rgba(122,145,169,.06); }
.analytics-kpi-label{font-size:.83rem;opacity:.78}
.analytics-kpi-value{font-size:1.75rem;font-weight:800;line-height:1.4; font-variant-numeric:tabular-nums}
.analytics-trend{width:100%;min-width:0}
.analytics-page-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(128,148,170,.17);padding:10px 5px}
.analytics-player-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}
.analytics-player{display:flex;align-items:center;gap:9px;border:1px solid rgba(128,148,170,.23);border-radius:12px;padding:11px;font-weight:600;font-size:.89rem;background:rgba(128,148,170,.07)}
.analytics-player.active{border-color:rgba(25,135,84,.45);background:rgba(25,135,84,.11)}
.analytics-player.inactive{opacity:.58}
.analytics-active-icon{color:#19a774}
.analytics-inactive-icon{color:#8593a5}
.analytics-privacy-note{font-size:.7rem;opacity:.7;margin-top:4px}


/* V12.8 — visual refresh: no analytics or business-logic changes. */
:root {
  --display-font: "Arial Narrow", "Roboto Condensed", Impact, "Arial Black", sans-serif;
  --focus-ring: rgba(51,184,236,.36);
}
/* Avoid remote font requests; the site remains self-contained. */
body { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.hero-title, .section-title, .top-brand, .stat-value, .match-score,
.match-score-values, .analytics-kpi-value, .points-pill, .versus-core {
  font-family: var(--display-font);
  font-stretch: condensed;
  letter-spacing: .005em;
}
.hero-title { line-height: 1.06; text-wrap: balance; }
.section-title { line-height: 1.12; text-wrap: balance; }
.section-subtitle, .hero-subtitle { line-height: 1.65; }
.section-eyebrow, .hero-eyebrow { letter-spacing: .15em; }
.site-navigation .nav-link { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.site-navigation .nav-link.active { box-shadow: inset 0 -3px 0 var(--gold), 0 5px 16px rgba(0,0,0,.12); }
.site-navigation .nav-link:focus-visible, .btn:focus-visible, a:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .player-pin-input:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}
.surface-card, .stat-card, .club-card, .versus-shell { box-shadow: 0 14px 36px rgba(0,0,0,.19); }
.stat-card { height: 100%; }
.stat-value { font-size: clamp(2rem, 2.4vw, 2.7rem); }
/* Match scoreboards: left team / result / right team, with consistent team identity. */
.match-card { position:relative; overflow: hidden; padding: 22px 20px; }
.match-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, #d8a84d 0%, #d8a84d 48%, #33b8ec 52%, #33b8ec 100%); opacity:.85; }
.match-label { color:var(--gold); }
.match-date { color:var(--muted); }
.match-scoreboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(82px,auto) minmax(0,1fr); align-items:center; gap:8px; margin:18px 0 12px; }
.match-team { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; gap:7px; }
.match-team-mark { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 5px 6px rgba(0,0,0,.25)); }
.match-team-name { font-size:.78rem; line-height:1.24; font-weight:750; text-align:center; overflow-wrap:break-word; }
.match-scoreboard .match-score { margin:0; min-width:0; text-align:center; font-size:clamp(1.65rem, 2.5vw, 2.5rem); line-height:1.1; white-space:nowrap; }
.match-scoreboard .match-score-values { margin:0; gap:7px; font-size:inherit; }
.match-scoreboard .score-divider { font-size:.8em; }
.match-status { display:table; margin: 10px auto 0; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.match-status-done { border-color:rgba(31,173,121,.38); color:#38cc97; background:rgba(31,173,121,.09); }
.match-status-upcoming { border-color:rgba(221,177,91,.28); color:var(--gold); background:rgba(221,177,91,.08); }
/* Analytics: scannable cards and readable activity pills. */
.analytics-kpi { border-radius:18px; padding:20px 18px; background:linear-gradient(160deg,rgba(70,100,135,.12),rgba(100,125,145,.035)); border-color:var(--line); }
.analytics-kpi-label { font-size:.77rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.analytics-kpi-value { font-size:clamp(2rem,3vw,2.8rem); font-weight:850; line-height:1.15; margin:7px 0; font-variant-numeric:tabular-nums; }
.analytics-section-heading { font-size:1.18rem; font-weight:800; border-left:3px solid var(--gold); padding-left:12px; }
.analytics-trend { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:rgba(100,125,145,.035); }
.analytics-page-row { padding:13px 12px; border-radius:8px; }
.analytics-page-row:nth-child(odd) { background:rgba(128,148,170,.055); }
.analytics-player-grid { grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; }
.analytics-player { min-height:51px; border-radius:13px; padding:12px; font-size:.88rem; transition:border-color .15s ease; }
.analytics-player.active { border-color:rgba(29,184,125,.48); background:rgba(29,184,125,.13); }
.analytics-player.inactive { opacity:.7; }
.analytics-active-icon,.analytics-inactive-icon { flex:none; font-size:1.1rem; line-height:1; }
/* Strengthen contrast in light mode without affecting match result colors. */
html[data-sundayfc-theme="light"] .analytics-kpi { background:linear-gradient(160deg,#fff,#f2f6fb); }
html[data-sundayfc-theme="light"] .analytics-player.active { background:#e5f7ef; color:#175a40; }
html[data-sundayfc-theme="light"] .analytics-player.inactive { color:#41536a; }
html[data-sundayfc-theme="light"] .match-status-done { color:#087a4d; }
html[data-sundayfc-theme="light"] .match-status-upcoming { color:#865e17; }
html[data-sundayfc-theme="light"] .match-team-name { color:var(--text); }
@media (max-width: 767px) {
  .app-frame.container-fluid { padding-left:10px; padding-right:10px; }
  .page-shell { padding:clamp(12px,3.6vw,20px); border-radius:20px; }
  .hero-title { font-size:clamp(2rem,7vw,2.8rem); }
  .site-navigation .nav-link { min-height:65px; padding:10px 3px; font-size:clamp(.62rem,2.55vw,.77rem); line-height:1.2; }
  .site-navigation .nav-link::before { font-size:1.15rem; }
  .match-team-mark { width:45px; height:45px; }
  .match-scoreboard { grid-template-columns:minmax(0,1fr) minmax(76px,auto) minmax(0,1fr); gap:6px; }
  .analytics-player-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analytics-kpi { padding:15px; }
}
@media (max-width: 380px) {
  .site-navigation .nav-link { font-size:.6rem; }
  .match-team-name { font-size:.72rem; }
  .match-scoreboard .match-score { font-size:1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-navigation .nav-link, .analytics-player { transition:none; }
}

/* V12.8.3 — make the player PIN entry easy to locate and clearly focused. */
.player-pin-input:placeholder-shown {
  border: 2px solid #33b8ec;
  box-shadow: 0 0 0 3px rgba(51,184,236,.15);
}
.player-pin-input:focus {
  border: 2px solid #33b8ec !important;
  outline: 3px solid rgba(51,184,236,.4) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(51,184,236,.2) !important;
}

/* V12.8.6 — PIN gate lives exclusively inside Fan Zone. */
.fan-login-card {max-width:470px;margin:18px auto 32px;padding:30px;text-align:center;}
.fan-lock-icon {font-size:2rem;margin-bottom:8px;}
.fan-zone-login-form {display:flex;flex-direction:column;gap:13px;max-width:340px;margin:auto;text-align:left;}
.fan-pin-label {font-weight:750;color:var(--text);}
.fan-zone-login-form .player-pin-input {width:100%;height:52px;font-size:1.15rem;padding:12px 15px;
  border:2px solid #4089e7;box-shadow:0 0 0 3px rgba(64,137,231,.19);}
.fan-zone-login-form .player-pin-input:focus {outline:none;border-color:#2779ed;
  box-shadow:0 0 0 4px rgba(39,121,237,.30);}
.fan-zone-account {display:flex;justify-content:flex-end;}
.fan-zone-account .player-access {justify-content:flex-end;}
@media(max-width:575px){.fan-login-card{padding:23px 17px}.fan-zone-account{justify-content:center}}

/* V12.8.7 — feedback during Fan Zone PIN authentication. */
.fan-zone-login-form button[type="submit"][aria-busy="true"] {
  display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:.85;cursor:progress;
}
.fan-login-spinner {
  width:16px;height:16px;display:inline-block;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;
  animation:fan-login-spin .7s linear infinite;
}
.fan-login-status {font-size:.87rem;color:var(--text);text-align:center;}
@keyframes fan-login-spin {to {transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.fan-login-spinner{animation:none;border-right-color:currentColor;}}

/* V12.8.8 — compact site header and subtle gold navigation outline. */
.site-header-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(12px, 1.8vw, 26px);
  row-gap: 8px;
  padding: 10px 8px 12px;
}
.site-brand-block { min-width: 0; }
.site-header-compact .site-header-pills { justify-content: flex-end; }
.site-header-compact .site-theme-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(221, 177, 91, .50);
  color: var(--gold);
  background: rgba(221, 177, 91, .08);
  font-size: 1.25rem;
  line-height: 1;
}
.site-header-compact .site-theme-toggle:hover { background: rgba(221, 177, 91, .18); color: var(--gold); }
.site-navigation, .site-navigation.nav, .site-navigation.nav-tabs {
  border: 1px solid #b89438 !important;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(184, 148, 56, .10), 0 10px 26px rgba(0,0,0,.12);
}
html[data-sundayfc-theme="light"] .site-navigation,
html[data-sundayfc-theme="light"] .site-navigation.nav,
html[data-sundayfc-theme="light"] .site-navigation.nav-tabs {
  border-color: #ac8530 !important;
}
html[data-sundayfc-theme="light"] .site-theme-toggle {
  color: #79561b;
  border-color: rgba(121,86,27,.5);
  background: rgba(221,177,91,.10);
}
@media (max-width: 767px) {
  .site-header-compact {
    grid-template-columns: minmax(0,1fr) auto;
    padding: 5px 5px 12px;
  }
  .site-header-compact .site-header-pills { display: none; }
  .site-header-compact .site-theme-toggle { min-width: 42px; min-height: 42px; }
  .site-navigation, .site-navigation.nav, .site-navigation.nav-tabs {
    border-top: 1px solid #b89438 !important;
    border-radius: 14px;
  }
}