/* =============================================================
   CEV Live Scores — light theme, matching EuroVolley.TV
   Brand: Midnight Blue #00002d · Cobalt Blue #0000ff · Sunshine Yellow #ffc800
   ============================================================= */
:root {
  --bg:          #ffffff;
  --surface:     #ffffff;
  --surface-alt: #f7f7f9;      /* Cool Grey tint for section bands */
  --surface-hover: #f0f1f5;
  --navy:        #00002d;      /* CEV Midnight Blue - primary text/nav */
  --navy-soft:   rgba(0,0,45,0.05);
  --cobalt:      #0000ff;      /* CEV Cobalt Blue - headlines/links */
  --cobalt-dim:  rgba(0,0,255,0.08);
  --yellow:      #ffc800;      /* CEV Sunshine Yellow - CTAs/highlights */
  --yellow-dim:  rgba(255,200,0,0.16);
  --live:        #ff0000;      /* CEV Volley Red (EuroVolley accent) */
  --live-dim:    rgba(255,0,0,0.08);
  --border:      rgba(0,0,45,0.12);
  --border-sub:  rgba(0,0,45,0.06);
  --text:        #00002d;
  --text-dim:    rgba(0,0,45,0.62);
  --text-muted:  rgba(0,0,45,0.38);
  --radius:      8px;
  --font: 'Plus Jakarta Sans','Segoe UI',sans-serif;
  --font-display: 'Poppins','Plus Jakarta Sans',sans-serif; /* stand-in for CEV's licensed "Lemur" display face */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;min-height:100vh;-webkit-font-smoothing:antialiased;}
button{cursor:pointer;border:none;background:none;font-family:var(--font);}
img{display:block;max-width:100%;}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:60px;background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
.topbar__brand{display:flex;align-items:center;gap:12px;}
.topbar__logo{width:34px;height:34px;border-radius:50%;}
.topbar__titles{display:flex;flex-direction:column;line-height:1.15;}
.topbar__title{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:0.01em;color:var(--navy);text-transform:uppercase;}
.topbar__title .accent{color:var(--cobalt);}
.topbar__sub{font-size:9.5px;font-weight:700;color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase;}
.topbar__meta{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-dim);}
#liveCount{color:var(--live);}
.topbar__sep{opacity:0.4;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);display:inline-block;}
.dot--live{background:var(--live);animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,0,0,.5);}70%{box-shadow:0 0 0 6px rgba(255,0,0,0);}100%{box-shadow:0 0 0 0 rgba(255,0,0,0);}}

/* ── Main navigation tabs ─────────────────────────────────────── */
.main-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.main-tab {
  font-family: var(--font-display);
  padding: 13px 18px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
}
.main-tab:hover { color: var(--navy); }
.main-tab.active { color: var(--navy); border-bottom-color: var(--yellow); }

/* ── Layout ────────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - 60px - 45px - 40px);}
@media(max-width:768px){.layout{grid-template-columns:1fr;}.sidebar{display:none;}}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar{border-right:1px solid var(--border);padding:16px 0;position:sticky;top:105px;height:calc(100vh - 105px);overflow-y:auto;background:var(--surface-alt);}
.sidebar__section{padding:0 12px 16px;}
.sidebar__section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px;}
.sidebar__heading{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);}
.sidebar__loading{font-size:12px;color:var(--text-muted);padding:6px 4px;}

.month-nav{width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-size:16px;display:flex;align-items:center;justify-content:center;}
.month-nav:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* Calendar grid */
#calendarGrid{width:100%;}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px;}
.cal-dow{font-size:9px;font-weight:800;color:var(--text-muted);text-align:center;padding:2px 0;letter-spacing:0.05em;}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;border-radius:4px;color:var(--text-muted);cursor:default;background:var(--bg);}
.cal-day.has-match{background:var(--cobalt-dim);color:var(--navy);cursor:pointer;}
.cal-day.has-match:hover{background:var(--cobalt);color:#fff;}
.cal-day.has-live{background:var(--live);color:#fff;animation:pulse 1.8s infinite;cursor:pointer;}
.cal-day.is-today{background:var(--yellow);color:var(--navy);font-weight:900;}
.cal-day.is-selected{outline:2px solid var(--navy);outline-offset:-1px;}

/* ── Filters ───────────────────────────────────────────────── */
.filters{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--border);}
.filter-btn{font-family:var(--font-display);display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:11.5px;font-weight:800;letter-spacing:0.05em;color:var(--text-dim);background:var(--surface-alt);border:1px solid var(--border);transition:all .15s;}
.filter-btn:hover{color:var(--navy);border-color:var(--navy);}
.filter-btn.active{background:var(--yellow);color:var(--navy);border-color:var(--yellow);}
.filter-btn--live.active{background:var(--live);color:#fff;border-color:var(--live);}
.filter-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;}
.filter-dot--live{background:var(--live);opacity:1;animation:pulse 1.8s infinite;}
.filter-btn--live.active .filter-dot--live{background:#fff;}
.filters__date{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--text-dim);}

/* ── Board ─────────────────────────────────────────────────── */
.board{padding:0 0 60px;background:var(--bg);}
.board__loading,.board__empty{padding:60px 20px;text-align:center;color:var(--text-dim);font-size:13px;}

/* Competition group */
.competition-group{border-bottom:1px solid var(--border);}
.competition-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--surface-alt);cursor:pointer;user-select:none;}
.competition-header:hover{background:var(--navy-soft);}
.comp-left{display:flex;align-items:center;gap:8px;}
.comp-name{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:var(--navy);}
.comp-live-badge{font-size:10px;font-weight:800;background:var(--live);color:#fff;border-radius:3px;padding:1px 6px;letter-spacing:0.05em;}
.comp-chevron{font-size:11px;color:var(--text-muted);transition:transform .2s;}
.competition-group.collapsed .comp-chevron{transform:rotate(-90deg);}
.competition-group.collapsed .match-list{display:none;}

/* Day separator */
.day-separator{padding:9px 20px 6px;font-size:10.5px;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:var(--cobalt);background:var(--cobalt-dim);border-top:1px solid var(--border);}

/* Match row */
.match-row{display:grid;grid-template-columns:72px 1fr 56px;align-items:center;padding:0 20px;height:56px;border-top:1px solid var(--border-sub);cursor:pointer;transition:background .1s;background:var(--bg);}
.match-row:hover{background:var(--surface-alt);}

.match-status{font-size:11px;font-weight:700;color:var(--text-muted);display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.match-status__time{font-size:12.5px;color:var(--text-dim);font-weight:700;}
.match-status.is-live .match-status__label,.match-status.is-live .match-status__time{color:var(--live);}
.match-status__set{font-size:9px;font-weight:800;background:var(--live);color:#fff;border-radius:2px;padding:1px 4px;letter-spacing:0.05em;}

.match-teams{display:flex;flex-direction:column;gap:4px;min-width:0;}
.team-line{display:flex;align-items:center;gap:8px;}
.team-logo{width:22px;height:22px;border-radius:3px;object-fit:contain;flex-shrink:0;background:var(--surface-alt);border:1px solid var(--border-sub);}
.team-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.team-line.is-winner .team-name{font-weight:900;color:var(--navy);}
.team-sets{display:flex;gap:3px;margin-left:auto;flex-shrink:0;}
.set-score{font-size:11px;font-weight:600;min-width:18px;text-align:center;color:var(--text-muted);padding:1px 2px;border-radius:2px;}
.set-score.active{background:var(--yellow-dim);color:var(--navy);font-weight:900;}

.match-score{display:flex;flex-direction:column;align-items:center;font-family:var(--font-display);font-size:19px;font-weight:900;color:var(--navy);min-width:48px;text-align:center;}
.match-score .score-val{line-height:1;}
.match-score.is-winner-home .score-top{color:var(--cobalt);}
.match-score.is-winner-guest .score-bottom{color:var(--cobalt);}
.score-dash{font-size:9px;color:var(--text-muted);font-weight:700;}

/* ── Competitions view (full page grid) ──────────────────────────── */
.competitions-view { max-width: 1200px; margin: 0 auto; padding: 24px; background: var(--bg); }
.competitions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.comp-search {
  flex: 1;
  max-width: 360px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--navy);
  font-size: 13px;
  font-family: var(--font);
}
.comp-search::placeholder { color: var(--text-muted); }
.comp-search:focus { outline: none; border-color: var(--cobalt); }
.comp-count { font-size: 12px; color: var(--text-dim); font-weight: 700; white-space: nowrap; }

.competitions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
/* Dark accent cards - echoes EuroVolley.TV's "ALL ACCESS" card style */
.comp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
}
.comp-card:hover { background: #0a0a45; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,45,0.18); }
.comp-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); flex-shrink: 0; }
.comp-card__dot.live { background: var(--live); animation: pulse 1.8s infinite; }
.comp-card__name { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--yellow); line-height: 1.35; letter-spacing: 0.01em; }
.comp-card__meta { font-size: 10.5px; color: rgba(255,255,255,0.55); margin-top: 3px; font-weight: 600; }

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

/* ── Detail overlay panel ────────────────────────────────────────────── */
.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.detail-overlay.open {
  pointer-events: all;
  opacity: 1;
  background: rgba(0,0,45,0.45);
}

.detail-panel {
  width: 480px;
  max-width: 100vw;
  background: var(--bg);
  border-left: 3px solid var(--yellow);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.detail-panel--wide { width: 620px; }
.detail-overlay.open .detail-panel { transform: translateX(0); }

/* Match detail always stacks above the competition detail panel, since it can be
   opened as a drill-down from within it (clicking a match row inside a competition). */
#matchDetail { z-index: 210; }

.detail-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 10;
}
.detail-panel-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.detail-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.detail-close:hover { background: var(--live); }

/* Match header: competition + scoreboard */
.detail-header {
  padding: 22px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.detail-comp {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.detail-live-badge {
  display: inline-block;
  background: var(--live);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 4px;
  padding: 4px 9px;
  margin-bottom: 16px;
  animation: pulse 1.8s infinite;
}
.detail-status-badge {
  display: inline-block;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 4px 9px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.detail-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.detail-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.detail-logo {
  width: 56px; height: 56px;
  border-radius: 8px;
  object-fit: contain;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 6px;
}
.detail-team-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.detail-team.is-winner .detail-team-name { color: var(--cobalt); font-weight: 900; }

.detail-vs { text-align: center; }
.detail-sets-score {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  color: var(--navy);
}
.detail-vs-dash { font-size: 28px; color: var(--text-muted); }
.winner-score { color: var(--cobalt); }
.detail-vs-label { font-size: 10px; color: var(--text-muted); text-align: center; font-weight: 700; margin-top: 4px; }

.detail-sets-table {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
.dst-head, .dst-row {
  display: grid;
  grid-template-columns: 1fr repeat(5,28px) 36px;
  padding: 6px 10px;
  gap: 2px;
  align-items: center;
}
.dst-head {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.dst-row { border-bottom: 1px solid var(--border-sub); font-weight: 600; }
.dst-row:last-child { border-bottom: none; }
.dst-row.is-winner { background: var(--yellow-dim); }
.dst-team { font-weight: 700; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dst-sets { font-weight: 900; text-align: center; color: var(--navy); }
.dst-winner { color: var(--cobalt); }
.dst-active { color: var(--navy); font-weight: 900; background: var(--yellow-dim); border-radius: 3px; text-align: center; }

.detail-body { padding: 18px 20px 40px; flex: 1; }
.detail-loading { color: var(--text-dim); font-size: 13px; padding: 24px 0; text-align: center; }
.detail-upcoming { background: var(--cobalt-dim); border-radius: 6px; padding: 12px 16px; font-size: 13px; color: var(--navy); margin-bottom: 16px; font-weight: 600; }
.detail-section { margin-bottom: 22px; }
.detail-section-title { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 10px; }

.detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table th { text-align: center; padding: 7px 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); border-bottom: 2px solid var(--border); background: var(--surface-alt); }
.detail-table th:first-child { text-align: left; }
.detail-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--border-sub); }
.detail-table td:first-child { text-align: left; font-weight: 600; }
.detail-table tr.tbl-winner td { background: var(--yellow-dim); }
.detail-table td.tbl-active { color: var(--cobalt); font-weight: 900; }
.detail-table td.tbl-sets { font-weight: 900; color: var(--navy); }

.detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-info-item { background: var(--surface-alt); border: 1px solid var(--border-sub); border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.detail-info-item strong { color: var(--navy); display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }

body.detail-open { overflow: hidden; }
@media(max-width:540px){.detail-panel{width:100vw;}.detail-panel--wide{width:100vw;}.detail-sets-score{font-size:28px;}.detail-info-grid{grid-template-columns:1fr;}}

/* ── Competition detail panel tabs ────────────────────────────── */
.comp-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  background: var(--surface-alt);
  flex-shrink: 0;
}
.comp-tab {
  font-family: var(--font-display);
  padding: 13px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
}
.comp-tab:hover { color: var(--navy); }
.comp-tab.active { color: var(--navy); border-bottom-color: var(--yellow); }

/* Standing table */
.standing-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.standing-table thead tr { background: var(--surface-alt); }
.standing-table th { padding: 9px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); text-align: center; white-space: nowrap; border-bottom: 2px solid var(--border); }
.standing-table th:first-child, .standing-table th:nth-child(2) { text-align: left; }
.standing-table td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--border-sub); color: var(--text-dim); }
.standing-table td:first-child { text-align: center; font-weight: 800; color: var(--text-muted); width: 32px; }
.standing-table td:nth-child(2) { text-align: left; }
.standing-table tr:hover td { background: var(--surface-alt); }
.standing-team { display: flex; align-items: center; gap: 8px; }
.standing-logo { width: 22px; height: 22px; border-radius: 3px; object-fit: contain; background: var(--surface-alt); border: 1px solid var(--border-sub); flex-shrink: 0; }
.standing-name { font-weight: 700; color: var(--navy); }
.standing-pts { font-weight: 900 !important; color: var(--cobalt) !important; }
.standing-wins { color: var(--navy) !important; font-weight: 700 !important; }

/* Comp matches list */
.comp-match-day { padding: 9px 20px 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt); background: var(--cobalt-dim); border-bottom: 1px solid var(--border); }
.comp-match-row { display: grid; grid-template-columns: 64px 1fr 50px; align-items: center; padding: 0 20px; height: 52px; border-bottom: 1px solid var(--border-sub); cursor: pointer; transition: background .1s; }
.comp-match-row:hover { background: var(--surface-alt); }
.comp-match-status { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.comp-match-status.is-live { color: var(--live); font-weight: 800; }
.comp-match-status.is-ft { color: var(--text-muted); }
.comp-teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.comp-team-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.comp-team-logo { width: 18px; height: 18px; border-radius: 2px; object-fit: contain; background: var(--surface-alt); flex-shrink: 0; }
.comp-team-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-team-line.is-winner .comp-team-name { font-weight: 900; color: var(--navy); }
.comp-score { font-family: var(--font-display); font-size: 16px; font-weight: 900; text-align: center; display: flex; flex-direction: column; gap: 1px; color: var(--navy); }
.comp-score-top, .comp-score-bottom { line-height: 1; }
.comp-score.home-win .comp-score-top { color: var(--cobalt); }
.comp-score.guest-win .comp-score-bottom { color: var(--cobalt); }
.comp-score-dash { font-size: 8px; color: var(--text-muted); font-weight: 700; }
.comp-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* ── Match stats ─────────────────────────────────────────────── */
.stats-team-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.stats-team-home { text-align: left; color: var(--text-dim); }
.stats-team-guest { text-align: right; color: var(--text-dim); }
.stats-vs-label { text-align: center; font-size: 10px; color: var(--text-muted); }

.stats-bar-block { padding: 8px 16px; border-bottom: 1px solid var(--border-sub); }
.stats-bar-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 5px; }
.stats-bar-label span:first-child, .stats-bar-label span:last-child { font-size: 13px; font-weight: 900; color: var(--navy); min-width: 28px; }
.stats-bar-label span:first-child { text-align: left; }
.stats-bar-label span:last-child { text-align: right; }
.stats-bar-label .stat-name { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stats-bar-track { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 5px; border-radius: 2px; overflow: hidden; background: var(--surface-alt); }
.stats-bar-home { background: var(--cobalt); border-radius: 2px 0 0 2px; transition: width .4s; }
.stats-bar-guest { background: var(--yellow); border-radius: 0 2px 2px 0; transition: width .4s; }

.stats-section-title { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt); padding: 14px 16px 6px; }

.player-stats-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.player-stats-table thead tr { background: var(--surface-alt); }
.player-stats-table th { padding: 7px 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); text-align: center; white-space: nowrap; border-bottom: 2px solid var(--border); }
.player-stats-table th:nth-child(2) { text-align: left; }
.player-stats-table td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--border-sub); color: var(--text-dim); }
.player-stats-table td:first-child { color: var(--text-muted); font-size: 10px; }
.player-stats-table td:nth-child(2) { text-align: left; font-weight: 700; color: var(--navy); }
.player-stats-table td.pts { font-weight: 900; color: var(--cobalt); }
.player-stats-table tr:hover td { background: var(--surface-alt); }
.team-block-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.team-block-logo { width: 22px; height: 22px; border-radius: 3px; object-fit: contain; background: var(--surface-alt); border: 1px solid var(--border-sub); }
.team-block-name { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Footer ────────────────────────────────────────────────── */
.footer{text-align:center;color:var(--text-muted);font-size:11.5px;padding:14px 16px;border-top:1px solid var(--border);background:var(--surface-alt);}
.footer strong{color:var(--text-dim);}

/* ── Competition category tabs (Clubs / National / Beach) ────────── */
.comp-category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.comp-cat-tab {
  font-family: var(--font-display);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
  transition: all .15s;
}
.comp-cat-tab:hover { color: var(--navy); background: var(--surface-alt); }
.comp-cat-tab.active { color: var(--navy); border-bottom-color: var(--cobalt); background: var(--cobalt-dim); }

.comp-subcategory { margin-bottom: 28px; }
.comp-subcategory__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  padding-left: 2px;
  border-left: 4px solid var(--yellow);
  padding-left: 10px;
}
.comp-subcategory__empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 0 10px 14px;
  font-style: italic;
}

/* ── Year selector in competitions toolbar ────────────────────────── */
.comp-year-select {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.comp-year-select:focus { outline: none; border-color: var(--cobalt); }

/* ── Standing group titles (Pool A / Pool B etc.) ────────────────── */
.standing-group-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px 8px;
  border-left: 4px solid var(--yellow);
  margin: 8px 0 0 12px;
}
.standing-group-title:first-child { margin-top: 0; }

/* Highlight the two teams playing when standings are shown inside a match panel */
.standing-table tr.standing-highlight td {
  background: var(--yellow-dim);
  font-weight: 800;
}
.standing-table tr.standing-highlight .standing-name { color: var(--navy); }

/* Small "/total" context next to a stat value (e.g. kills/attempts, positive/total rec) */
.stat-sub { font-size: 0.78em; font-weight: 600; color: var(--text-muted); }

/* ── Sidebar promotional banner (below calendar) ─────────────────── */
.sidebar__banner {
  padding: 0 12px 16px;
}
.sidebar__banner a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.sidebar__banner a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,45,0.18);
}
.sidebar__banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* Competitions tab hidden temporarily - remove this rule to bring it back.
   Kept in the DOM (index.html) and all JS logic intact for easy re-enable. */
.main-tab--competitions { display: none; }

/* External link tab (e.g. "Live Score" button linking off-site) - same look as
   the other tabs but styled as a plain link, not a view-switch. */
a.main-tab--external {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
a.main-tab--external:hover { color: var(--navy); }