:root {
  color-scheme: dark;
  --page: #090909;
  --shell: #151515;
  --surface: #202020;
  --surface-raised: #282828;
  --surface-hover: #303030;
  --line: #383838;
  --line-soft: #2c2c2c;
  --text: #f4f4f4;
  --text-soft: #d2d2d2;
  --muted: #9a9a9a;
  --accent: #57a5ff;
  --accent-strong: #7dbcff;
  --accent-wash: rgba(87, 165, 255, 0.14);
  --danger: #ef6969;
  --gold: #e8bd61;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
}

body {
  background: var(--page);
  color: var(--text-soft);
  font-family: "DM Sans", sans-serif;
}

::selection {
  color: #06101d;
  background: var(--accent);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  max-width: 1240px;
  background: var(--shell);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.masthead {
  border-color: var(--text);
}

.masthead h1 {
  color: var(--text);
  font-family: "Newsreader", serif;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.masthead-subline {
  color: var(--muted);
  border-color: var(--line);
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
}

.masthead-subline .status {
  color: var(--accent);
}

.nav-bar {
  background: transparent;
  border-color: var(--line);
}

.nav-bar button,
.nav-dropdown-item {
  color: var(--text-soft);
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-shadow: none;
}

.nav-bar button:hover,
.nav-bar button.active,
.nav-dropdown-item:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
  text-shadow: none;
}

.nav-search-btn {
  border-color: var(--line);
}

.nav-search-btn:hover,
.nav-search-btn.active {
  background: var(--accent-wash);
  border-color: var(--accent);
}

.nav-search-icon,
.nav-search-btn:hover .nav-search-icon,
.nav-search-btn.active .nav-search-icon {
  color: var(--accent);
}

.nav-dropdown-menu {
  background: var(--surface);
  border-color: var(--line);
  border-top-color: var(--accent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.nav-dropdown-item {
  border-color: var(--line-soft);
}

.search-bar-container {
  background: transparent;
  border-color: var(--line);
}

.search-input-wrapper,
.player-search-wrapper,
.team-search-wrapper {
  background: var(--surface);
  border-color: var(--line);
  border-bottom-color: var(--accent);
  box-shadow: none;
}

.search-input,
.player-search-input,
.team-search-input {
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-style: normal;
}

.search-input::placeholder,
.player-search-input::placeholder,
.team-search-input::placeholder {
  color: var(--muted);
  font-style: normal;
}

.search-input:focus {
  background: var(--surface-raised);
}

.search-button,
.compare-btn,
.go-btn,
.hero-btn-primary,
.compare-bar-btn {
  color: #06101d;
  background: var(--accent);
  border-radius: 5px;
  box-shadow: none;
  text-shadow: none;
}

.search-button:hover,
.compare-btn:hover,
.go-btn:hover,
.hero-btn-primary:hover,
.compare-bar-btn:hover {
  background: var(--accent-strong);
}

.page-content,
#news-wrapper {
  color: var(--text-soft);
  background: var(--surface);
  border-color: var(--line);
}

#news-wrapper,
.page-content {
  border-top-color: var(--text-soft);
}

.news-edition + .news-edition {
  border-color: var(--line);
}

.news-item {
  background: transparent;
  border-radius: 6px;
}

.news-item:hover {
  background: var(--surface-hover);
}

.news-item h3,
.edition-headline,
.section-heading,
.article-headline {
  color: var(--text);
  border-color: var(--line);
  font-family: "Newsreader", serif;
}

.news-item a {
  color: var(--text);
}

.news-item a:hover h3,
.section-heading {
  color: var(--accent);
}

.news-item-meta,
.article-meta,
.edition-standfirst,
.scroll-loader,
.end-of-content,
.no-news-message,
.search-results-info {
  color: var(--muted);
}

.news-summary,
.article-content {
  color: var(--text-soft);
  font-family: "Newsreader", serif;
}

.article-content a,
.creator-info a,
.clear-search {
  color: var(--accent);
  text-shadow: none;
}

.article-content a:hover,
.creator-info a:hover,
.clear-search:hover {
  color: var(--accent-strong);
}

.clear-search {
  background: var(--surface-raised);
  border-color: var(--line);
}

.article-headline {
  text-shadow: none;
}

.article-not-found-message,
.article-not-found-action {
  text-align: center;
}

.article-not-found-message {
  color: var(--muted);
  font-size: 1.2em;
  margin-top: 40px;
}

.article-not-found-action {
  margin-top: 20px;
}

.article-not-found-action a {
  color: var(--accent);
  font-size: 1.1em;
  font-weight: 700;
  text-underline-offset: 3px;
}

.edition-headline::before {
  color: #06101d;
  background: var(--accent);
  font-family: "DM Sans", sans-serif;
}

.news-item-image {
  border-radius: 7px;
}

.loader-spinner {
  border-color: var(--line);
  border-top-color: var(--accent);
}

.end-divider {
  background: linear-gradient(to right, transparent, var(--line), transparent);
}

.chat-container,
.chat-message,
.chat-message:nth-child(odd),
.chat-message:nth-child(even),
.about-section,
.about-section:nth-child(odd),
.about-section:nth-child(even),
.creator-info {
  color: var(--text-soft);
  background: var(--surface);
  background-image: none;
  border-color: var(--line);
}

.chat-message:nth-child(odd) .speaker-name,
.chat-message:nth-child(odd) .message-content,
.chat-message:nth-child(even) .message-content,
.workflow-step strong,
.tech-item,
.schedule-table td {
  color: var(--text-soft);
}

.chat-message:nth-child(even) .speaker-name,
.about-section h3 {
  color: var(--accent);
  text-shadow: none;
}

.workflow-step {
  background: transparent;
  border-color: var(--accent);
}

.about-title {
  color: var(--text);
  font-family: "Newsreader", serif;
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 30px;
}

.creator-links a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.creator-tagline {
  color: var(--muted);
  font-size: 0.9em;
  margin-top: 10px;
}

.message-content,
.chat-container {
  font-family: "Newsreader", serif;
}

.schedule-table th,
.schedule-table td {
  color: var(--text-soft);
  background: var(--surface-raised) !important;
  background-image: none;
  border-color: var(--line);
}

.chat-container::-webkit-scrollbar-track {
  background: var(--shell);
  border-color: var(--line);
}

.chat-container::-webkit-scrollbar-thumb {
  background: var(--accent);
}

/* Shared football typography and surfaces */
:is(
  .leagues-header h2,
  .league-header-left h2,
  .competition-header h2,
  .players-header h2,
  .compare-header h2,
  .player-hero-info h1,
  .team-header-info h2,
  .matches-page-header h2,
  .competition-group-header,
  .standings-block-header,
  .matches-header,
  .stat-category-header,
  .lineup-column-header,
  .match-score-team-name,
  .match-score-center,
  .trophy-team-name,
  .career-season-name,
  .compare-table-section h3,
  .compare-player-col .p-name
) {
  color: var(--text) !important;
  border-color: var(--line) !important;
  font-family: "DM Sans", sans-serif !important;
  letter-spacing: -0.025em;
}

:is(
  .league-card-name,
  .team-card-name,
  .player-card-name,
  .td-name
) {
  color: var(--text) !important;
  font-family: "DM Sans", sans-serif !important;
}

:is(
  .competition-header-meta,
  .team-header-meta,
  .league-header-left .season-label,
  .player-hero-meta,
  .career-season-team,
  .career-season-totals,
  .breadcrumb,
  .stale-notice,
  .data-notice,
  .empty-category,
  .empty-section-notice,
  .no-matches-msg,
  .no-players-msg,
  .no-teams-msg,
  .no-players-row td,
  .standings-empty,
  .td-match-comp,
  .td-nation,
  .td-age,
  .match-meta-line,
  .match-stat-title,
  .lineup-coach,
  .potm-minutes,
  .low-minutes-notice
) {
  color: var(--muted) !important;
}

:is(
  .region-heading,
  .region-toggle > summary,
  .league-card-meta,
  .team-card-abbr,
  .player-card-pos,
  .td-jersey,
  .td-pos,
  .competition-teams-link,
  .breadcrumb a,
  .match-back,
  .timeline-minute,
  .timeline-desc a,
  .lineup-shirt,
  .lineup-player-name.linked-name,
  .potm-name,
  .player-hero-meta .pos-badge
) {
  color: var(--accent) !important;
  border-color: var(--accent);
}

.country-heading,
.league-card-country,
.player-card-nation {
  color: var(--muted);
}

.leagues-grid,
.teams-grid,
.players-grid {
  gap: 10px;
  background: transparent;
  border: 0;
}

.league-card,
.team-card,
.player-card,
.radar-panel,
.potm-callout,
.career-season {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.league-card:hover,
.team-card:hover,
.player-card:hover,
.player-card.selected {
  background: var(--surface-hover);
}

.player-card.selected {
  outline-color: var(--accent);
}

.player-card-select {
  color: var(--accent);
  border-color: var(--line);
}

.player-card.selected .player-card-select {
  color: #06101d;
  background: var(--accent);
  border-color: var(--accent);
}

.competition-group {
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.competition-group-header {
  margin: 0;
  padding: 12px 16px;
  background: #242424;
  border-bottom: 1px solid var(--line) !important;
  font-size: 1rem;
}

table,
.standings-table,
.matches-table,
.squad-table,
.stat-table,
.compare-table {
  color: var(--text-soft);
  background: transparent;
  border-color: var(--line);
}

table th,
.standings-table th,
.matches-table th,
.squad-table th,
.stat-table th,
.compare-table th {
  color: var(--muted);
  background: #1c1c1c;
  border-color: var(--line);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
}

table td,
.standings-table td,
.matches-table td,
.squad-table td,
.stat-table td,
.compare-table td,
.compare-table td:first-child {
  color: var(--text-soft);
  border-color: var(--line-soft);
  font-family: "DM Sans", sans-serif;
}

:is(.standings-table, .matches-table, .squad-table, .stat-table, .compare-table) tbody tr:hover td,
.matches-table tbody tr.linked:hover td,
.squad-table tbody tr:hover td {
  background: var(--surface-hover);
}

.standings-table tr.own-team td {
  background: var(--accent-wash);
}

.standings-table tr.own-team td.standings-team-cell,
.td-match-score,
.match-stat-values .highlighted,
.compare-table .winner {
  color: var(--accent) !important;
}

/* In-progress scores stay distinct from the blue used for finished results. */
.td-match-live {
  color: var(--gold) !important;
}

.match-team-link,
.standings-team-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.match-team-link:hover,
.standings-team-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.date-nav a,
.hero-btn-secondary,
.back-link,
.compare-bar-clear {
  color: var(--text-soft);
  background: var(--surface-raised);
  border-color: var(--line);
  border-radius: 5px;
}

.date-nav a:hover,
.hero-btn-secondary:hover,
.back-link:hover,
.compare-bar-clear:hover {
  color: var(--accent);
  background: var(--surface-hover);
  border-color: var(--accent);
}

.date-nav .current-date {
  color: var(--text);
  font-family: "DM Sans", sans-serif;
}

.date-nav .today-badge {
  color: var(--accent);
  font-family: "DM Sans", sans-serif;
  font-style: normal;
}

.pos-tab,
.radar-toggle,
.scope-select,
.standings-season-picker select,
.picker-select {
  color: var(--text-soft);
  background-color: var(--surface-raised);
  border-color: var(--line);
  font-family: "DM Sans", sans-serif;
}

.pos-tab:hover,
.radar-toggle:hover:not(.active) {
  color: var(--text);
  border-color: var(--accent);
}

.pos-tab.active,
.radar-toggle.active {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent);
}

.radar-panel-title,
.radar-controls-title,
.bio-label,
.match-info-label,
.potm-label,
.lineup-subheader,
.picker-label,
.standings-season-picker label {
  color: var(--muted);
  border-color: var(--line);
  font-family: "DM Sans", sans-serif;
}

.bio-value,
.match-info-value,
.timeline-desc,
.lineup-player-name,
.match-stat-values {
  color: var(--text-soft);
  font-family: "DM Sans", sans-serif;
}

.bio-strip,
.match-info-strip,
.timeline-row,
.lineup-subheader,
.radar-panel-title,
.radar-controls-title,
.data-notice,
.stale-notice,
.position-filters,
.match-toggle {
  border-color: var(--line);
}

.player-photo {
  background: var(--surface-raised);
  border-color: var(--line);
  border-radius: 8px;
}

.pct-bar-bg,
.acc-bar-bg,
.match-stat-bar-dual {
  background: #3a3a3a;
}

.pct-bar-fill,
.acc-bar-fill,
.match-stat-bar-home {
  background: var(--accent);
}

.pct-bar-fill.high,
.acc-bar-fill.good,
.lineup-rating.high,
.potm-rating {
  color: #06101d;
  background: var(--accent);
}

.pct-bar-fill.mid,
.acc-bar-fill,
.lineup-rating.mid {
  background: var(--gold);
}

.lineup-rating.low,
.card-chip.red {
  background: var(--danger);
}

.summary-type-badge {
  color: var(--muted);
  border-color: var(--line);
}

.summary-type-badge.club {
  color: var(--accent);
  border-color: var(--accent);
}

.summary-type-badge.country {
  color: var(--gold);
  border-color: var(--gold);
}

.match-stat-bar-away {
  background: #777;
}

.compare-bar {
  color: var(--text);
  background: #101010;
  border-top: 1px solid var(--line);
}

.compare-bar-names {
  color: var(--muted);
}

@media (max-width: 600px) {
  .container {
    margin: 0;
    padding: 10px;
    border-left: 0;
    border-right: 0;
  }

  .page-content[style] {
    padding: 14px !important;
  }

  .masthead h1 {
    font-size: 2rem;
  }

  .masthead-subline {
    font-size: 0.65rem;
  }

  .nav-bar button {
    font-size: 0.72rem;
  }

  .matches-table {
    min-width: 560px;
  }

  .competition-group {
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}