/* =========================================================
   Base
   ========================================================= */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-alt: #f8f9fb;

  --text: #171717;
  --text-muted: #6b7280;
  --border: #e2e5e9;

  --primary: #d71920;
  --primary-hover: #b9151b;
  
  --match-bg: #f7f8f8;
  --match-hover: #eef0f1;

  --header-bg: #17191c;
  --header-text: #ffffff;

  --favorite: #f5b800;
  --live: #d71920;

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  --radius: 10px;
}


/* =========================================================
   Reset
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}


/* =========================================================
   Header
   ========================================================= */

.header {
  min-height: 66px;
  padding: 12px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background: var(--header-bg);
  color: var(--header-text);

  border-bottom: 3px solid var(--primary);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 25px;
}

.brand {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.header-subtitle {
  margin-top: 2px;

  font-size: 11px;
  font-weight: 500;

  color: #aeb4bd;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* =========================================================
   Theme selector
   ========================================================= */

.theme-picker {
  display: flex;
  align-items: center;
  gap: 7px;
}

.theme-btn {
  width: 18px;
  height: 18px;

  padding: 0;

  border: 2px solid transparent;
  border-radius: 50%;

  opacity: 0.75;
}

.theme-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.theme-btn.active {
  opacity: 1;

  outline: 2px solid #ffffff;
  outline-offset: 2px;
}


/* =========================================================
   View tabs (Schedule / Standings)
   ========================================================= */

.view-tabs {
  display: flex;
  gap: 4px;

  padding: 8px 18px 0;

  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  padding: 8px 16px;

  font-size: 13px;
  font-weight: 700;

  color: var(--text-muted);

  background: none;
  border: none;
  border-bottom: 2px solid transparent;

  cursor: pointer;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}


/* =========================================================
   Standings tab
   ========================================================= */

.standings-controls {
  padding: 14px 18px;

  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#standings-league-select {
  min-height: 36px;
  padding: 6px 10px;

  border: 1px solid var(--border);
  border-radius: 7px;

  background: var(--surface);
  color: var(--text);
}

#standings-table-wrap {
  padding: 18px;
}

.standings-table {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;

  table-layout: fixed;
  border-collapse: collapse;

  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.standings-table th,
.standings-table td {
  padding: 8px 10px;

  font-size: 13px;
  text-align: center;

  border-bottom: 1px solid var(--border);
}

.standings-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);

  background: var(--surface-alt);
}

.standings-table th:nth-child(2),
.standings-table td:nth-child(2) {
  text-align: left;
}

.standings-team-cell {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  text-align: left;
}

.standings-team-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standings-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.standings-table tr.fav-row {
  background: rgba(245, 184, 0, 0.12);
}

@media (max-width: 560px) {
  .standings-table col.col-optional {
    display: none;
  }

  .standings-table .col-optional {
    display: none;
  }

  .standings-table th,
  .standings-table td {
    padding: 7px 5px;
    font-size: 12px;
  }

  .standings-logo {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  #standings-table-wrap {
    padding: 10px;
  }
}


/* =========================================================
   Date/navigation bar
   ========================================================= */

.date-bar {
  padding: 12px 18px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

  position: sticky;
  top: 0;
  z-index: 20;
}

.date-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-display {
  min-width: 210px;

  font-size: 14px;
  font-weight: 700;

  text-align: center;
}

.btn {
  min-height: 36px;
  padding: 8px 13px;

  border: 1px solid var(--border);
  border-radius: 7px;

  background: var(--surface);
  color: var(--text);

  font-size: 13px;
  font-weight: 600;
}

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

.btn-nav {
  width: 36px;
  padding: 0;
}

.btn-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-sm {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.btn-icon {
  position: relative;

  width: 34px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
  line-height: 1;

  color: var(--text-muted);
}

.btn-icon svg {
  display: block;
}

.btn-icon .refresh-icon {
  font-size: 24px;
  font-weight: 700;
}

.btn-badge {
  position: absolute;
  top: -5px;
  right: -5px;

  min-width: 16px;
  height: 16px;
  padding: 0 3px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  color: #ffffff;
  background: var(--primary);
  border-radius: 999px;
}

#btn-show-hidden.is-active {
  border-color: var(--favorite);
  background: var(--favorite);
  color: #171717;
}

#btn-notify.is-active {
  border-color: var(--favorite);
  background: var(--favorite);
  color: #171717;
}

#btn-refresh.is-spinning {
  pointer-events: none;
  opacity: 0.7;
}

.refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes btn-refresh-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#btn-refresh.is-spinning .refresh-icon {
  animation: btn-refresh-spin 0.6s linear infinite;
}

.date-picker-wrap {
  position: relative;
  display: inline-flex;
}

.date-picker-visual {
  pointer-events: none;
}

.date-picker-input {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  cursor: pointer;
}

#date-picker {
  min-height: 36px;

  padding: 6px 10px;

  border: 1px solid var(--border);
  border-radius: 7px;

  background: var(--surface);
  color: var(--text);
}

.summary-bar {
  margin-left: auto;

  font-size: 12px;
  color: var(--text-muted);

  white-space: nowrap;
}

.summary-bar b {
  color: var(--text);
}


/* =========================================================
   Main content
   ========================================================= */

.main {
  width: min(1100px, calc(100% - 30px));

  margin: 20px auto 50px;
}


/* =========================================================
   Loading
   ========================================================= */

.loading-wrapper {
  display: none;

  padding: 45px 20px;

  align-items: center;
  justify-content: center;
  gap: 12px;

  color: var(--text-muted);

  font-size: 14px;
}

.loading-wrapper.active {
  display: flex;
}

.spinner {
  width: 23px;
  height: 23px;

  border: 3px solid var(--border);
  border-top-color: var(--primary);

  border-radius: 50%;

  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   Errors / empty state
   ========================================================= */

.error-box {
  display: none;

  margin-bottom: 18px;
  padding: 13px 15px;

  border: 1px solid #ef9b9b;
  border-left: 4px solid #d71920;
  border-radius: 7px;

  background: #fff0f0;
  color: #8a1115;

  font-size: 13px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.error-box.active {
  display: block;
}

.error-box strong {
  margin-right: 6px;
}

.empty-state {
  display: none;

  padding: 60px 20px;

  text-align: center;
  color: var(--text-muted);
}

.empty-state.active {
  display: block;
}

.empty-state .icon {
  margin-bottom: 12px;

  font-size: 46px;

  opacity: 0.4;
}

.empty-state p {
  margin: 0;

  font-size: 14px;
}


/* =========================================================
   League cards
   ========================================================= */

.league-card {
  margin-bottom: 14px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--surface);

  box-shadow: var(--shadow);
}

.league-card.hidden-league {
  opacity: 0.5;
}

.league-card.dragging {
  opacity: 0.45;
}

.league-card.drag-over-top {
  border-top: 3px solid var(--primary);
}

.league-card.drag-over-bottom {
  border-bottom: 3px solid var(--primary);
}


/* =========================================================
   League header
   ========================================================= */

.league-header {
  min-height: 47px;

  padding: 10px 13px;

  display: flex;
  align-items: center;
  gap: 9px;

  background: #202327;
  color: #ffffff;

  user-select: none;
}

.league-header:hover {
  background: #292d32;
}

.league-drag {
  color: #858b93;

  font-size: 15px;

  cursor: grab;
}

.league-drag:active {
  cursor: grabbing;
}

.league-name {
  flex: 1;

  font-size: 14px;
  font-weight: 700;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-count {
  font-size: 11px;
  color: #aeb4bd;
  white-space: nowrap;
}

.league-fav-btn,
.league-dismiss,
.league-hide {
  width: 28px;
  height: 28px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 5px;

  background: transparent;
  color: #9299a2;

  font-size: 15px;
}

.league-fav-btn:hover,
.league-dismiss:hover,
.league-hide:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.league-fav-btn.is-fav {
  color: var(--favorite);
}

.league-card.fav-league .league-header {
  box-shadow: inset 4px 0 0 var(--favorite);
}


/* =========================================================
   Collapsing leagues
   ========================================================= */

.league-card.collapsed .matches-list {
  max-height: 0;
}


/* =========================================================
   Match list
   ========================================================= */

.matches-list {
  margin: 0;
  padding: 0;

  list-style: none;

  overflow: hidden;
  transition: max-height 0.3s ease;
}

.match-row {
  min-height: 82px;

  padding: 10px 15px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
  align-items: center;
  gap: 12px;

  border-top: 1px solid var(--border);

  background: var(--surface);
}

.match-row:first-child {
  border-top: 0;
}

.match-row:hover {
  background: var(--surface-alt);
}

.lineup-btn {
  margin-top: 5px;
  padding: 3px 7px;

  border: 1px solid var(--border);
  border-radius: 4px;

  background: transparent;
  color: var(--text-muted);

  font-size: 10px;
  font-weight: 700;
}

.lineup-btn:hover,
.lineup-btn.is-open {
  border-color: var(--primary);
  color: var(--primary);
}

.match-lineup {
  list-style: none;

  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

.match-lineup[hidden] {
  display: none;
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;

  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
}

.lineup-team + .lineup-team {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}

.lineup-team h3 {
  margin: 0 0 10px;

  font-size: 13px;
}

.lineup-label {
  margin: 10px 0 4px;

  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.lineup-source {
  margin: -1px 0 7px;

  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.lineup-pitch {
  position: relative;

  width: 100%;
  max-width: 310px;
  aspect-ratio: 1.45 / 1;
  margin: 0 auto 12px;

  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 50%,
      transparent 50%
    )
    center / 50% 100%,
    #396e48;
}

.lineup-pitch::before,
.lineup-pitch::after {
  content: "";
  position: absolute;
  left: 50%;

  border: 1px solid rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
}

.lineup-pitch::before {
  top: -1px;
  width: 42%;
  height: 19%;
  border-top: 0;
}

.lineup-pitch::after {
  bottom: -1px;
  width: 42%;
  height: 19%;
  border-bottom: 0;
}

.pitch-player {
  position: absolute;
  top: var(--pitch-top);
  left: var(--pitch-left);

  width: 38px;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 2px #173820;
}

.pitch-player-image {
  width: 26px;
  height: 26px;

  object-fit: cover;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #dde2e4;
}

.pitch-player-image.is-jersey {
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.pitch-player span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-players {
  margin: 0;
  padding-left: 22px;
}

.lineup-players li {
  padding: 3px 0;

  display: flex;
  justify-content: space-between;
  gap: 8px;

  font-size: 12px;
}

.lineup-player-name {
  min-width: 0;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lineup-headshot {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;

  object-fit: cover;
  border-radius: 50%;
  background: var(--border);
}

.lineup-headshot.is-jersey {
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.lineup-players small,
.lineup-bench {
  color: var(--text-muted);
  font-size: 11px;
}

.lineup-bench {
  margin: 0;
  line-height: 1.45;
}

.lineup-loading,
.lineup-empty {
  padding: 16px;
  text-align: center;

  color: var(--text-muted);
  font-size: 12px;
}

.match-note {
  list-style: none;

  padding: 7px 14px;

  border-top: 1px solid var(--border);

  background: color-mix(
    in srgb,
    var(--match-bg) 80%,
    var(--surface)
  );

  color: var(--text-muted);

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.match-note::before {
  content: "";
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-right: 7px;
  margin-bottom: 1px;

  border-radius: 50%;

  background: var(--primary);
}


/* =========================================================
   Team
   ========================================================= */

.team {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 9px;
}

.team.home {
  flex-direction: row-reverse;
  text-align: right;
}

.team-logo,
.team-logo-ph {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;
}

.team-logo {
  object-fit: contain;
}

.team-logo-ph {
  border-radius: 50%;

  background: #eceef1;
}

.match-row {
  background: var(--match-bg);
  transition: background-color 0.15s ease;
}

.match-row:hover {
  background: var(--match-hover);
}

.team-info {
  min-width: 0;
  flex: 1;
}

.team-name {
  font-size: 13px;
  font-weight: 700;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-rank {
  display: inline-block;
  margin-right: 5px;

  padding: 1px 5px;

  font-size: 10px;
  font-weight: 800;

  color: var(--header-text);
  background: var(--primary);
  border-radius: 4px;
}

.team.home .team-rank {
  margin-right: 0;
  margin-left: 5px;
}

.team-abbrev {
  margin-top: 3px;

  font-size: 10px;
  font-weight: 500;

  color: var(--text-muted);

  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* =========================================================
   Favorite team button
   ========================================================= */

.fav-btn {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: transparent;
  color: #c6c9ce;

  font-size: 15px;
}

.fav-btn:hover {
  background: #eee;
  color: #888;
}

.fav-btn.is-fav {
  color: var(--favorite);
}


/* =========================================================
   Match center
   ========================================================= */

.match-center {
  min-width: 130px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  text-align: center;
}

.time-display {
  font-size: 15px;
  font-weight: 800;
}

.score-display {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.score-display span {
  padding: 0 3px;

  color: var(--text-muted);
}

.live-score {
  color: var(--live);
}
.team:has(.fav-btn.is-fav) {
  background: color-mix(
    in srgb,
    var(--favorite) 10%,
    var(--match-bg)
  );

  box-shadow:
    inset 3px 0 0 var(--favorite);
}
.tbd-display {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}


/* =========================================================
   Status
   ========================================================= */

.status-badge {
  padding: 2px 6px;

  border-radius: 4px;

  background: #eceef1;
  color: #666;

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
}

.status-badge.live,
.live-badge {
  background: var(--live);
  color: #ffffff;
}

.live-badge {
  padding: 3px 6px;

  border-radius: 4px;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.05em;
}


/* =========================================================
   Broadcast / venue
   ========================================================= */

.broadcast-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
}

.broadcast-chip {
  padding: 2px 5px;

  border: 1px solid var(--border);
  border-radius: 3px;

  background: var(--surface-alt);

  color: var(--text-muted);

  font-size: 9px;
  font-weight: 600;
}

.match-meta {
  max-width: 160px;

  color: var(--text-muted);

  font-size: 9px;
  line-height: 1.25;
}


/* =========================================================
   Theme: Light / Warm Stone
   ========================================================= */

html[data-theme="light"] {
  --bg: #e9e7e2;
  --surface: #f6f5f2;
  --surface-alt: #eeece7;
  --match-bg: #efede8;
  --match-hover: #e7e4dd;

  --text: #292a28;
  --text-muted: #73736e;
  --border: #d4d1ca;

  --primary: #77766f;
  --primary-hover: #62615c;

  --header-bg: #3f403d;
  --header-text: #f5f4f0;

  --favorite: #b49245;
  --live: #a64d4d;
}

html[data-theme="light"] .league-header {
  background: #555651;
  color: #f5f4f0;
}

html[data-theme="light"] .league-header:hover {
  background: #60615c;
}

html[data-theme="light"] .league-count,
html[data-theme="light"] .league-drag {
  color: #c3c2bc;
}


/* =========================================================
   Theme: Ocean / Dusty Blue
   ========================================================= */

html[data-theme="ocean"] {
  --bg: #dfe6e8;
  --surface: #f4f7f7;
  --surface-alt: #e9eeee;
    --match-bg: #e7edef;
  --match-hover: #dde6e8;

  --text: #263236;
  --text-muted: #68787d;
  --border: #c7d1d3;

  --primary: #617f88;
  --primary-hover: #526e76;

  --header-bg: #3f555c;
  --header-text: #f4f7f7;

  --favorite: #b79a57;
  --live: #a85151;
}

html[data-theme="ocean"] .league-header {
  background: #536c73;
}

html[data-theme="ocean"] .league-header:hover {
  background: #5e787f;
}


/* =========================================================
   Theme: Purple / Muted Plum
   ========================================================= */

html[data-theme="purple"] {
  --bg: #e7e1e5;
  --surface: #f7f4f6;
  --surface-alt: #eee9ec;
    --match-bg: #eee9ec;
  --match-hover: #e5dde2;

  --text: #342d32;
  --text-muted: #796e75;
  --border: #d5cbd1;

  --primary: #806a78;
  --primary-hover: #6e5b68;

  --header-bg: #55464f;
  --header-text: #f8f5f7;

  --favorite: #b99a52;
  --live: #a74f56;
}

html[data-theme="purple"] .league-header {
  background: #685762;
}

html[data-theme="purple"] .league-header:hover {
  background: #74626d;
}


/* =========================================================
   Theme: Orange / Clay
   ========================================================= */

html[data-theme="orange"] {
  --bg: #ebe1da;
  --surface: #f8f4f1;
  --surface-alt: #f0e8e2;
    --match-bg: #f0e7e1;
  --match-hover: #e8dcd4;

  --text: #382d28;
  --text-muted: #7d6d65;
  --border: #dacbc2;

  --primary: #a66f57;
  --primary-hover: #8f5f4b;

  --header-bg: #654b3f;
  --header-text: #faf6f3;

  --favorite: #b99449;
  --live: #a74d4d;
}

html[data-theme="orange"] .league-header {
  background: #795a4b;
}

html[data-theme="orange"] .league-header:hover {
  background: #876555;
}


/* =========================================================
   Theme: Night
   ========================================================= */

html[data-theme="night"] {
  --bg: #0f1115;
  --surface: #191d23;
  --surface-alt: #22272e;
    --match-bg: #191d23;
  --match-hover: #22272e;

  --text: #e7eaf0;
  --text-muted: #929aa6;
  --border: #303640;

  --primary: #64748b;
  --primary-hover: #94a3b8;

  --header-bg: #090b0e;
  --header-text: #ffffff;

  --favorite: #d2ae59;
  --live: #d75b5b;

  --shadow: none;
}

html[data-theme="night"] .league-header {
  background: #11151a;
}

html[data-theme="night"] .league-header:hover {
  background: #1d232b;
}

html[data-theme="night"] #date-picker,
html[data-theme="night"] .btn {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="night"] .team-logo-ph {
  background: #2b3038;
}

html[data-theme="night"] .fav-btn:hover {
  background: #292f37;
}

html[data-theme="night"] .match-note {
  background: #332d15;
  color: #e3ca7b;
}

html[data-theme="night"] .error-box {
  background: #35191b;
  border-color: #7f292e;
  color: #ffb4b8;
}


/* =========================================================
   Theme: Gold / Sage
   ========================================================= */

html[data-theme="gold"] {
  --bg: #e1e5dc;
  --surface: #f5f6f2;
  --surface-alt: #eaede6;
    --match-bg: #e8ece4;
  --match-hover: #dde3d8;

  --text: #2c312a;
  --text-muted: #6f776b;
  --border: #ccd2c7;

  --primary: #71806a;
  --primary-hover: #606f5a;

  --header-bg: #485344;
  --header-text: #f5f7f3;

  --favorite: #b2944e;
  --live: #a64f4f;
}

html[data-theme="gold"] .league-header {
  background: #5b6856;
}

html[data-theme="gold"] .league-header:hover {
  background: #687663;
}

/* END OF THEME STYLING */

.league-drag {
  cursor: grab;
  user-select: none;
}

.league-drag:active {
  cursor: grabbing;
}

.league-card.dragging {
  opacity: 0.45;
}

.league-card.drag-over-top {
  border-top: 3px solid var(--primary);
}

.league-card.drag-over-bottom {
  border-bottom: 3px solid var(--primary);
}
.league-card {
  position: relative;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    margin 0.15s ease,
    box-shadow 0.15s ease;
}

.league-card.dragging {
  opacity: 0.35;
  transform: scale(0.98);
}

.league-card.drag-over-top {
  margin-top: 18px;
}

.league-card.drag-over-top::before {
  content: "";
  position: absolute;

  left: 8px;
  right: 8px;
  top: -12px;

  height: 5px;

  border-radius: 999px;

  background: var(--primary);

  box-shadow:
    0 0 0 2px var(--surface),
    0 2px 8px rgba(0, 0, 0, 0.18);
}

.league-card.drag-over-bottom {
  margin-bottom: 18px;
}

.league-card.drag-over-bottom::after {
  content: "";
  position: absolute;

  left: 8px;
  right: 8px;
  bottom: -12px;

  height: 5px;

  border-radius: 999px;

  background: var(--primary);

  box-shadow:
    0 0 0 2px var(--surface),
    0 2px 8px rgba(0, 0, 0, 0.18);
}

.league-drag {
  cursor: grab;
}

.league-drag:active {
  cursor: grabbing;
}
.league-header {
  cursor: pointer;
}
.league-header .league-drag {
  cursor: grab;
}

.league-header .league-drag:active {
  cursor: grabbing;
}

.league-header button {
  cursor: pointer;
}
/* =========================================================
   Favorite teams
   ========================================================= */

.team {
  position: relative;
  padding: 7px 9px;
  border-radius: 8px;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* A team containing a selected favorite star */
.team:has(.fav-btn.is-fav) {
  background: color-mix(
    in srgb,
    var(--favorite) 12%,
    var(--surface)
  );

  box-shadow:
    inset 3px 0 0 var(--favorite);
}

/* Home team gets accent on the right instead */
.team.home:has(.fav-btn.is-fav) {
  box-shadow:
    inset -3px 0 0 var(--favorite);
}

.team:has(.fav-btn.is-fav) .team-name {
  font-weight: 800;
}


/* Favorite star itself */

.fav-btn {
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.fav-btn.is-fav {
  color: var(--favorite);

  background: color-mix(
    in srgb,
    var(--favorite) 18%,
    transparent
  );

  transform: scale(1.12);
}

.fav-btn.is-fav:hover {
  transform: scale(1.2);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

  .header {
    padding: 11px 14px;
  }

  .theme-picker {
    gap: 5px;
  }

  .theme-btn {
    width: 15px;
    height: 15px;
  }

  .date-bar {
    padding: 10px 11px;
    gap: 8px;

    position: static;
  }

  .date-nav-group {
    width: 100%;

    justify-content: space-between;
  }

  .date-display {
    min-width: 0;
    flex: 1;

    font-size: 13px;
  }

  .lineup-grid {
    grid-template-columns: 1fr;
    gap: 14px;

    padding: 13px;
  }

  .lineup-team + .lineup-team {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-top: 14px;
    padding-left: 0;
  }


  .summary-bar {
    width: 100%;
    margin-left: 0;

    text-align: center;
  }

  .main {
    width: calc(100% - 18px);

    margin-top: 10px;
  }

  .league-card {
    margin-bottom: 10px;

    border-radius: 7px;
  }

  .league-header {
    padding: 9px 8px;
    gap: 6px;
  }

  .league-name {
    font-size: 12px;
  }

  .league-count {
    display: none;
  }

  .league-dismiss,
  .league-hide,
  .league-fav-btn {
    width: 25px;
    height: 25px;
  }

  .match-row {
    min-height: 75px;

    padding: 8px 8px;

    grid-template-columns:
      minmax(0, 1fr)
      82px
      minmax(0, 1fr);

    gap: 5px;
  }

  .team {
    gap: 5px;
  }

  .team.home {
    gap: 5px;
  }

  .team-logo,
  .team-logo-ph {
    width: 29px;
    height: 29px;

    flex-basis: 29px;
  }

  .team-name {
    font-size: 11px;

    white-space: normal;
    line-height: 1.2;
  }

  .team-abbrev {
    display: none;
  }

  .fav-btn {
    width: 20px;
    height: 20px;

    flex-basis: 20px;

    font-size: 12px;
  }

  .match-center {
    min-width: 0;
  }

  .time-display {
    font-size: 12px;
  }

  .score-display {
    font-size: 17px;
  }

  .broadcast-chip {
    font-size: 8px;
  }

  .match-meta {
    max-width: 90px;

    font-size: 8px;
  }

  .status-badge {
    font-size: 8px;
  }
}


/* =========================================================
   Very small phones
   ========================================================= */

@media (max-width: 420px) {

  .header-logo {
    font-size: 21px;
  }

  .brand {
    font-size: 15px;
  }

  .header-subtitle {
    font-size: 9px;
  }

  .theme-picker {
    max-width: 92px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

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

  .team-logo,
  .team-logo-ph {
    width: 25px;
    height: 25px;

    flex-basis: 25px;
  }

  .team-name {
    font-size: 10px;
  }

  .fav-btn {
    display: none;
  }

  .match-meta {
    display: none;
  }
}
/* =========================================================
   OLD-STYLE THEME REFRESH
   Add this entire block at the END of style.css
   ========================================================= */


/* ---------------------------------------------------------
   DEFAULT / CHARCOAL
   --------------------------------------------------------- */

:root {
  --bg: #202329;
  --surface: #292d34;
  --surface-alt: #31363e;

  --match-bg: #292f37;
  --match-hover: #323943;

  --text: #f1f3f5;
  --text-muted: #aab1ba;
  --border: #4a515c;

  --primary: #8a98a8;
  --primary-hover: #a4b0be;

  --header-bg: #17191e;
  --header-text: #f7f8f9;

  --league-bg: #495463;
  --league-hover: #566273;

  --favorite: #d8c64b;
  --live: #d96969;

  --shadow:
    0 3px 9px rgba(0, 0, 0, 0.25);
}


/* ---------------------------------------------------------
   MATTE SLATE
   existing "light" button
   --------------------------------------------------------- */

html[data-theme="light"] {
  --bg: #30383e;
  --surface: #39434a;
  --surface-alt: #424d55;

  --match-bg: #39444b;
  --match-hover: #455159;

  --text: #f2f4f4;
  --text-muted: #b8c0c3;
  --border: #5c6970;

  --primary: #91a4aa;
  --primary-hover: #abbabe;

  --header-bg: #252c31;
  --header-text: #f7f8f8;

  --league-bg: #596a70;
  --league-hover: #667980;

  --favorite: #d4c563;
  --live: #d87171;
}


/* ---------------------------------------------------------
   STEEL BLUE
   existing "ocean" button
   --------------------------------------------------------- */

html[data-theme="ocean"] {
  --bg: #202a35;
  --surface: #293746;
  --surface-alt: #314253;

  --match-bg: #2b3a49;
  --match-hover: #34485a;

  --text: #f0f4f7;
  --text-muted: #aab8c4;
  --border: #506375;

  --primary: #69a4ca;
  --primary-hover: #83b6d6;

  --header-bg: #17212b;
  --header-text: #f5f8fa;

  --league-bg: #536f8a;
  --league-hover: #607f9c;

  --favorite: #d3c65c;
  --live: #dc7474;
}


/* ---------------------------------------------------------
   MATTE PLUM
   existing "purple" button
   --------------------------------------------------------- */

html[data-theme="purple"] {
  --bg: #30272d;
  --surface: #44343d;
  --surface-alt: #4e3c46;

  --match-bg: #493841;
  --match-hover: #55424d;

  --text: #f6f0f3;
  --text-muted: #c2afb8;
  --border: #705965;

  --primary: #b1839a;
  --primary-hover: #c49aae;

  --header-bg: #271e23;
  --header-text: #faf5f7;

  --league-bg: #795a69;
  --league-hover: #896776;

  --favorite: #d8cf54;
  --live: #df747d;
}


/* ---------------------------------------------------------
   MATTE RUST / CLAY
   existing "orange" button
   --------------------------------------------------------- */

html[data-theme="orange"] {
  --bg: #322923;
  --surface: #493a31;
  --surface-alt: #55443a;

  --match-bg: #493b33;
  --match-hover: #57483e;

  --text: #f5f1ed;
  --text-muted: #c1b2a8;
  --border: #715e52;

  --primary: #bd8666;
  --primary-hover: #cf9878;

  --header-bg: #29211c;
  --header-text: #faf6f2;

  --league-bg: #80604e;
  --league-hover: #906d59;

  --favorite: #d7c456;
  --live: #d96e6e;
}


/* ---------------------------------------------------------
   DARK GRAY / NAVY
   existing "night" button
   --------------------------------------------------------- */

html[data-theme="night"] {
  --bg: #191c23;
  --surface: #222833;
  --surface-alt: #29313d;

  --match-bg: #242d38;
  --match-hover: #2c3744;

  --text: #f0f3f6;
  --text-muted: #a3adb8;
  --border: #455260;

  --primary: #6ba8d1;
  --primary-hover: #85bbe0;

  --header-bg: #12151b;
  --header-text: #f8fafb;

  --league-bg: #4e6c87;
  --league-hover: #5b7b98;

  --favorite: #d8d349;
  --live: #db6b6b;

  --shadow:
    0 3px 10px rgba(0, 0, 0, 0.32);
}


/* ---------------------------------------------------------
   MUTED MUSTARD / OLIVE
   existing "gold" button
   --------------------------------------------------------- */

html[data-theme="gold"] {
  --bg: #2d2d24;
  --surface: #3b3b30;
  --surface-alt: #454538;

  --match-bg: #3e3e32;
  --match-hover: #49493a;

  --text: #f3f2ea;
  --text-muted: #bab8a3;
  --border: #62614d;

  --primary: #b4a557;
  --primary-hover: #c7b967;

  --header-bg: #25251e;
  --header-text: #faf9f1;

  --league-bg: #6c6848;
  --league-hover: #7a7550;

  --favorite: #e0d346;
  --live: #d86d6d;
}


/* =========================================================
   GLOBAL THEME SURFACES
   ========================================================= */

html,
body {
  background: var(--bg);
  color: var(--text);
}

.header {
  background: var(--header-bg);
  color: var(--header-text);

  border-bottom:
    2px solid var(--primary);
}

.date-bar {
  background:
    color-mix(
      in srgb,
      var(--surface) 88%,
      var(--bg)
    );

  border-bottom:
    1px solid var(--border);
}

.main {
  color: var(--text);
}


/* =========================================================
   BUTTONS / DATE CONTROLS
   ========================================================= */

.btn,
#date-picker {
  background: var(--surface-alt);
  color: var(--text);

  border:
    1px solid var(--border);

  box-shadow: none;
}

.btn:hover {
  background:
    color-mix(
      in srgb,
      var(--surface-alt) 82%,
      var(--primary)
    );
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);

  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}


/* =========================================================
   LEAGUE CARDS
   ========================================================= */

.league-card {
  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: 9px;

  box-shadow: var(--shadow);

  overflow: hidden;
}


/* Header gets a slightly lighter/more colorful shade,
   like your original screenshots */

.league-header,
html[data-theme="light"] .league-header,
html[data-theme="ocean"] .league-header,
html[data-theme="purple"] .league-header,
html[data-theme="orange"] .league-header,
html[data-theme="night"] .league-header,
html[data-theme="gold"] .league-header {
  background: var(--league-bg);
  color: var(--text);

  min-height: 46px;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--border) 70%,
      transparent
    );
}

.league-header:hover,
html[data-theme="light"] .league-header:hover,
html[data-theme="ocean"] .league-header:hover,
html[data-theme="purple"] .league-header:hover,
html[data-theme="orange"] .league-header:hover,
html[data-theme="night"] .league-header:hover,
html[data-theme="gold"] .league-header:hover {
  background: var(--league-hover);
}

.league-name {
  color: var(--text);
}

.league-count {
  color: var(--text-muted);
}


/* Count pill, closer to original version */

.league-count {
  padding: 3px 8px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--border) 80%,
      transparent
    );

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--bg) 55%,
      transparent
    );

  font-weight: 600;
}


/* =========================================================
   MATCH ROWS
   ========================================================= */

.match-row {
  background: var(--match-bg);

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--border) 72%,
      transparent
    );

  color: var(--text);

  transition:
    background-color 0.15s ease;
}

.match-row:hover {
  background: var(--match-hover);
}


/* remove the overly-white card feeling */

.team-name,
.time-display,
.score-display {
  color: var(--text);
}

.team-abbrev,
.match-meta {
  color: var(--text-muted);
}


/* =========================================================
   FAVORITES
   ========================================================= */

.team:has(.fav-btn.is-fav) {
  background:
    color-mix(
      in srgb,
      var(--favorite) 9%,
      var(--match-bg)
    );

  box-shadow:
    inset 3px 0 0 var(--favorite);
}

.team.home:has(.fav-btn.is-fav) {
  box-shadow:
    inset -3px 0 0 var(--favorite);
}

.fav-btn {
  color:
    color-mix(
      in srgb,
      var(--text-muted) 75%,
      transparent
    );
}

.fav-btn:hover {
  background:
    color-mix(
      in srgb,
      var(--favorite) 10%,
      transparent
    );

  color: var(--favorite);
}

.fav-btn.is-fav {
  color: var(--favorite);

  background:
    color-mix(
      in srgb,
      var(--favorite) 14%,
      transparent
    );
}


/* =========================================================
   MATCH STATUS
   ========================================================= */

.status-badge {
  background:
    color-mix(
      in srgb,
      var(--surface-alt) 85%,
      var(--text)
    );

  color: var(--text-muted);

  border:
    1px solid var(--border);
}

.status-badge.live {
  background: var(--live);
  color: #fff;

  border-color: transparent;
}

.live-score {
  color: var(--live);
}


/* =========================================================
   BROADCAST
   ========================================================= */

.broadcast-chip {
  background:
    color-mix(
      in srgb,
      var(--surface-alt) 85%,
      var(--bg)
    );

  border:
    1px solid var(--border);

  color: var(--text-muted);

  border-radius: 4px;
}


/* =========================================================
   MATCH NOTES
   1st Leg / 2nd Leg / aggregate notes
   ========================================================= */

/*
   Instead of a giant yellow strip, make it a small
   metadata badge centered between matches.
*/

.match-note {
  width: max-content;
  max-width: calc(100% - 24px);

  margin:
    7px auto;

  padding:
    3px 9px;

  list-style: none;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 45%,
      var(--border)
    );

  border-radius:
    999px;

  background:
    color-mix(
      in srgb,
      var(--primary) 12%,
      var(--surface)
    );

  color:
    color-mix(
      in srgb,
      var(--text) 80%,
      var(--primary)
    );

  font-size: 10px;
  font-weight: 700;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;

  text-align:
    center;
}


/* no dot / warning-strip styling */

.match-note::before {
  content: none;
}


/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.empty-state {
  color: var(--text-muted);
}

.loading-wrapper {
  color: var(--text-muted);
}


/* =========================================================
   DRAG SLOT
   ========================================================= */

.league-card.drag-over-top::before,
.league-card.drag-over-bottom::after {
  background: var(--primary);

  box-shadow:
    0 0 0 2px var(--bg),
    0 2px 8px rgba(0, 0, 0, 0.35);
}
.league-drag {
  cursor: grab;

  /* Important for mobile dragging */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;

  padding: 8px;
  margin: -8px 0 -8px -8px;
}

.league-drag.drag-handle-active {
  cursor: grabbing;
}

.league-card.dragging {
  opacity: 0.35;
  transform: scale(0.985);
  z-index: 10;
}

body.league-drag-active {
  user-select: none;
  -webkit-user-select: none;
}
/* =========================================================
   Live league indicator
   ========================================================= */

.league-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 3px 7px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--live) 18%,
      transparent
    );

  color: #fff;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.06em;
}

.live-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--live);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--live) 18%,
      transparent
    );

  animation:
    livePulse 1.6s ease-in-out
    infinite;
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}


/* Give a league containing live games
   a subtle accent too */

.league-card.has-live-match
.league-header {
  box-shadow:
    inset 3px 0 0
    var(--live);
}


/* =========================================================
   Match priority visual states
   ========================================================= */

.completed-match {
  opacity: 0.72;
}

.completed-match:hover {
  opacity: 1;
}

.live-match {
  background:
    color-mix(
      in srgb,
      var(--live) 5%,
      var(--match-bg)
    );
}


/* =========================================================
   Last updated
   ========================================================= */

.summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.updated-ago {
  color: var(--text-muted);

  font-size: 10px;

  white-space: nowrap;
}

.updated-ago::before {
  content: "·";

  margin-right: 8px;
}


@media (max-width: 700px) {
  .league-live-badge {
    padding: 2px 5px;

    font-size: 8px;
  }

  .updated-ago {
    font-size: 9px;
  }
}