/* Clean Sport visual system.
 * Presentation-only layer: no data, routing or interaction logic changes.
 */
:root {
  color-scheme: dark;
  --bg: #071116;
  --secondary-bg: #0c1a21;
  --panel: #10232b;
  --panel-strong: #16303a;
  --text: #f7fbfc;
  --hint: #a6bac3;
  --link: #48d8ff;
  --border: rgba(173, 222, 232, 0.13);
  --accent: #ff7a1a;
  --accent-2: #20dbe5;
  --danger: #ff667a;
  --warning: #ffc857;
  --success: #37d895;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

/* One viewport-sized paint layer; document height never rescales the gradients. */
html { background: #071116; }
body { background: transparent; background-attachment: scroll; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% -8%, rgba(32, 219, 229, 0.11), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(255, 122, 26, 0.12), transparent 31%),
    linear-gradient(180deg, #071116 0%, #071015 48%, #050d11 100%);
}

.app-shell {
  width: min(800px, 100%);
  padding-inline: 15px;
}

.topbar {
  margin-bottom: 12px;
  padding: 3px 1px 0;
}

.eyebrow {
  color: var(--accent-2);
  letter-spacing: 0.19em;
}

h1 {
  letter-spacing: -0.04em;
}

.icon-button {
  border-color: rgba(32, 219, 229, 0.24);
  background:
    linear-gradient(180deg, rgba(20, 47, 56, 0.9), rgba(9, 24, 30, 0.95));
  color: var(--text);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.icon-button:active {
  border-color: rgba(255, 122, 26, 0.5);
}

.user-strip {
  border-color: rgba(173, 222, 232, 0.14);
  background: rgba(10, 27, 34, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.user-avatar {
  background: linear-gradient(145deg, var(--accent), #ffb34d);
  color: #071116;
}

.language-pill {
  border-color: rgba(32, 219, 229, .25);
  background: rgba(32, 219, 229, .05);
}

.main-navigation {
  gap: 7px;
  margin-bottom: 17px;
}

.main-nav-button {
  min-width: 78px;
  min-height: 56px;
  border-color: rgba(173, 222, 232, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(18, 39, 48, .92), rgba(10, 25, 31, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  color: #90a2ab;
}

.main-nav-icon {
  color: #9cb0b8;
}

.main-nav-button.active {
  border-color: rgba(255, 122, 26, .56);
  background:
    linear-gradient(145deg, rgba(255, 122, 26, .98), rgba(255, 151, 58, .9));
  color: #071116;
  box-shadow:
    0 8px 24px rgba(255, 122, 26, .15),
    inset 0 1px rgba(255,255,255,.18);
}

.main-nav-button.active .main-nav-icon {
  color: #071116;
}

.main-nav-button[data-view="news"].active,
.main-nav-button[data-view="fixtures"].active,
.main-nav-button[data-view="teams"].active {
  border-color: rgba(32, 219, 229, .62);
  background: linear-gradient(145deg, #08c9d7, #46e8ec);
  box-shadow: 0 8px 24px rgba(32, 219, 229, .13);
}

.hero {
  border-color: rgba(255, 122, 26, .22);
  background:
    radial-gradient(circle at 83% 22%, rgba(32, 219, 229, .23), transparent 25%),
    radial-gradient(circle at 12% 100%, rgba(255, 122, 26, .20), transparent 34%),
    linear-gradient(135deg, #10252e, #0b1b22 58%, #0b171c);
}

.hero-eyebrow {
  color: var(--accent);
}

.hero-chip,
.meta-chip {
  background: rgba(7, 17, 22, .5);
  border-color: rgba(173,222,232,.15);
}

.text-button,
.source-link,
.open-link,
.news-open-hint {
  color: var(--accent-2);
}

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

.match-card,
.compact-card,
.team-card,
.player-card,
.source-card,
.settings-card,
.home-carousel,
.home-settings {
  border-color: rgba(173, 222, 232, 0.12);
  background:
    linear-gradient(180deg, rgba(17, 37, 45, .96), rgba(10, 24, 30, .98));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .18),
    inset 0 1px rgba(255,255,255,.025);
}

.match-card {
  padding: 14px;
}

.match-score {
  border: 1px solid rgba(255, 122, 26, .15);
  background: #142b34;
}

.match-score:not(.scheduled) {
  color: #fff;
}

.live-dot {
  color: var(--accent);
}

.badge-fallback {
  background: #142b34;
  color: var(--accent-2);
}

.filter-button,
.league-chip {
  border-color: rgba(173,222,232,.13);
  background: rgba(13, 31, 38, .88);
}

.filter-button.active {
  border-color: rgba(255, 122, 26, .55);
  background: var(--accent);
  color: #071116;
}

.league-chip.active {
  border-color: rgba(32, 219, 229, .55);
  background: rgba(32, 219, 229, .12);
  color: #eafffc;
  box-shadow: inset 0 0 0 1px rgba(32, 219, 229, .06);
}

.league-badge {
  border-color: rgba(32, 219, 229, .22);
  background: rgba(32, 219, 229, .07);
  color: var(--accent-2);
}

.news-card {
  border-color: rgba(173,222,232,.12);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(16, 35, 43, .98), rgba(9, 23, 29, .99));
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

.news-image,
.news-detail-image {
  background:
    radial-gradient(circle at 78% 28%, rgba(32, 219, 229, .24), transparent 24%),
    linear-gradient(135deg, #163440, #0b1b22);
}

.news-card-meta,
.news-detail-meta {
  color: var(--accent-2);
}

.category-badge {
  background: rgba(255, 122, 26, .14);
  color: #ff9b48;
}

.rumor-badge {
  background: rgba(255, 200, 87, .11);
}

.status-badge.official {
  background: rgba(32, 219, 229, .10);
  color: var(--accent-2);
}

.news-detail-backdrop {
  background: rgba(2, 8, 11, .62);
}

.news-detail-sheet {
  background:
    radial-gradient(circle at 92% 0, rgba(255,122,26,.08), transparent 27%),
    #071116;
  border-color: rgba(173,222,232,.15);
}

.news-detail-handle {
  background: rgba(173, 222, 232, .34);
}

.detail-close-button {
  background: rgba(7,17,22,.82);
  border-color: rgba(173,222,232,.18);
}

.detail-source-button {
  border-color: rgba(32,219,229,.22);
  background: #10242c;
  color: var(--accent-2);
}

.table-shell,
#table-view .standings-scroll {
  border: 1px solid rgba(173,222,232,.12);
  border-radius: 18px;
  background: #0b1b21;
}

.league-table th,
#table-view .standings-grid thead th {
  background: #15303a;
  color: #9db0b8;
}

.league-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.012);
}

#table-view .standings-grid .standings-position,
#table-view .standings-grid .standings-club {
  background: #0d2027;
}

#table-view .standings-grid thead .standings-position,
#table-view .standings-grid thead .standings-club {
  background: #15303a;
}

#table-view .standings-playing .standings-club {
  box-shadow: inset 3px 0 var(--accent);
}

#table-view .standings-grid .standings-score {
  color: var(--accent);
}

.position-marker.champions {
  background: #3c8cff;
}

.position-marker.europe {
  background: var(--accent-2);
}

.form-dot.W,
.home-form.w {
  background: rgba(55,216,149,.16);
  color: #56e4a8;
}

.form-dot.D,
.home-form.d {
  background: rgba(255,200,87,.14);
  color: #ffd36e;
}

.form-dot.L,
.home-form.l {
  background: rgba(255,102,122,.14);
  color: #ff8191;
}

.favorite-button,
.stat-cell {
  background: #142c35;
}

.favorite-button.active {
  border-color: rgba(255,122,26,.38);
  color: var(--accent);
}

.player-photo {
  background:
    radial-gradient(circle at 50% 105%, rgba(255,122,26,.22), transparent 50%),
    linear-gradient(160deg, #16333d, #0b1d24);
}

.search-input,
.select-input {
  background: #0d2027;
  border-color: rgba(173,222,232,.13);
}

.search-input:focus,
.select-input:focus {
  border-color: rgba(32,219,229,.5);
  box-shadow: 0 0 0 3px rgba(32,219,229,.06);
}

.source-note-bar {
  border-color: rgba(32,219,229,.16);
  background: rgba(32,219,229,.045);
}

.toast {
  border-color: rgba(173,222,232,.15);
  background: rgba(9,24,30,.96);
}

.personal-home {
  --home-panel: #0d2027;
  --home-muted: #90a4ad;
}

.home-edit,
.home-save {
  background: var(--accent);
  color: #071116;
  box-shadow: 0 8px 22px rgba(255,122,26,.14);
}

.home-interest {
  background: #0f242c;
}

.home-interest-monogram {
  background: #17323b;
}

.home-slide-title h3,
.home-link,
.home-star {
  color: var(--accent-2);
}

.home-dots button[aria-current="true"] > span {
  background: var(--accent);
}

.home-favorite-row {
  background: rgba(255,122,26,.045);
}

.home-info p {
  background: #10242c;
}

.home-news-card img {
  border: 1px solid rgba(173,222,232,.10);
}

.fixture-comparison {
  --comparison-home: #20dbe5;
  --comparison-away: #ff8b35;
}

.match-detail {
  --md-home: #20dbe5;
  --md-away: #ff8b35;
}

.fixture-comparison .comparison-teams,
.fixture-comparison .comparison-average,
.fixture-comparison .metric-card,
.fixture-comparison .comparison-all,
.fixture-comparison .comparison-missing,
.match-detail .md-team,
.match-detail .md-facts article,
.match-detail .md-stat,
.match-detail .md-rate,
.match-detail .md-player-group,
.match-detail .md-unavailable {
  border-color: rgba(173,222,232,.12);
  background-color: #0f242c;
}

.fixture-comparison .comparison-explanation,
.fixture-comparison .comparison-info[open] > summary,
.match-detail .md-info > div {
  background: #16303a;
}

.app-footer {
  color: #758b94;
}

/* Compact shell and a thumb-reachable dock; all original routes remain available. */
.app-shell { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
.topbar h1 { font-size: clamp(24px, 6vw, 30px); line-height: 1.15; }
.topbar .eyebrow { font-size: 9px; letter-spacing: .14em; }
.user-strip { min-height: 42px; padding: 7px 10px; gap: 9px; border-radius: 14px; margin-bottom: 12px; }
.user-avatar { width: 30px; height: 30px; font-size: 11px; }
.user-name { font-size: 12px; }
.user-status { font-size: 10px; }
.main-nav-icon svg, .clean-icon { width: 21px; height: 21px; display: block; }
.main-nav-button { min-width: 73px; min-height: 58px; font-size: 10px; padding: 7px 9px; border-radius: 13px; }
.main-navigation { margin-inline: -15px; padding-inline: 15px; scroll-padding-inline: 15px; }
.clean-dock { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(800px, 100%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(6, 18, 24, .97); backdrop-filter: blur(16px); box-shadow: 0 -8px 30px #0003; }
.clean-dock .main-nav-button, .clean-more > summary { min-width: 0; width: 100%; min-height: 51px; margin: 0; padding: 6px 2px; border: 0; border-radius: 10px; box-shadow: none; background: transparent; font-size: 10px; color: var(--hint); }
.clean-dock .main-nav-button.active { background: rgba(255,122,26,.09); color: var(--accent); }
.clean-dock .main-nav-button.active .main-nav-icon { color: var(--accent); }
.clean-dock .main-nav-button[data-view="news"].active, .clean-dock .main-nav-button[data-view="fixtures"].active { background: rgba(32,219,229,.08); color: var(--accent-2); }
.clean-dock .main-nav-button[data-view="news"].active .main-nav-icon, .clean-dock .main-nav-button[data-view="fixtures"].active .main-nav-icon { color: var(--accent-2); }
.clean-more > summary { list-style: none; display: grid; justify-items: center; align-content: center; gap: 4px; font-weight: 750; cursor: pointer; }
.clean-more > summary::-webkit-details-marker { display: none; }
.clean-more[open] > summary, .clean-more.is-active > summary { color: var(--accent-2); background: rgba(32,219,229,.08); }
.clean-more[open] > summary .main-nav-icon, .clean-more.is-active > summary .main-nav-icon { color: var(--accent-2); }
.clean-more-panel { position: absolute; bottom: calc(100% + 8px); right: 10px; width: min(320px, calc(100vw - 20px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: #10232b; box-shadow: 0 -12px 40px #0008; }
.clean-more-panel .main-nav-button { min-height: 65px; border: 1px solid var(--border); background: #0b1b22; }
.clean-more-panel .main-nav-button:last-child { grid-column: 1 / -1; }
.toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
button:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.match-score, .stat-cell strong, .home-mini-table { font-variant-numeric: tabular-nums; }
.news-detail-sheet { max-height: calc(var(--tg-viewport-stable-height, 100vh) - 12px); }
.news-detail-title { font-size: clamp(23px, 6vw, 29px); line-height: 1.22; }
.news-detail-text, .news-detail-summary { font-size: 16px; line-height: 1.65; }
/* Editorial feed: pictures stay in their own column; image failures use the full width. */
#news-view .news-list { gap: 12px; }
#news-view .news-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); min-height: 132px; border-radius: 16px; }
#news-view .news-image { grid-column: 1; grid-row: 1; height: 100%; min-height: 132px; aspect-ratio: auto; }
#news-view .news-image img { position: absolute; inset: 0; }
#news-view .news-content { grid-column: 1 / -1; min-width: 0; padding: 12px; }
#news-view .news-image + .news-content { grid-column: 2; }
#news-view .news-title { font-size: 15px; line-height: 1.35; margin: 5px 0 7px; }
#news-view .news-summary { font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#news-view .news-card-meta { font-size: 9px; letter-spacing: .02em; color: #ffab69; }
#news-view .news-footer { font-size: 10px; line-height: 1.4; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
#news-view .news-source-name { max-width: 100%; text-align: left; }
.news-toolbar, .search-toolbar { margin-inline: -15px; padding-inline: 15px; }
.personal-home .home-heading h2 { font-size: 23px; }
.personal-home .home-kicker { color: var(--accent-2); font-size: 9px; }
.personal-home .home-news-card img { aspect-ratio: 1.65; border-radius: 13px; }
.personal-home .home-news-card strong { font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.personal-home .home-news-meta { font-size: 11px; line-height: 1.5; }
.personal-home .home-carousel { border-radius: 18px; }
.home-slide-title h3 { line-height: 1.45; }
.home-settings-actions .home-save { min-width: 100px; }
.home-info p { max-width: calc(100vw - 56px); }
.match-list { gap: 9px; }
.match-card { border-radius: 15px; }
.match-meta { font-size: 10px; line-height: 1.4; margin-bottom: 10px; flex-wrap: wrap; }
.match-card[role="button"] { cursor: pointer; }
.match-score { min-width: 60px; font-size: 21px; padding: 8px; border-radius: 11px; }
.match-score.scheduled { color: #e1f8fa; font-size: 14px; }
.match-team-name { line-height: 1.3; overflow-wrap: anywhere; }

/* Keep the menu usable in landscape and with a reduced-height webview. */
.clean-more-panel { max-height: min(65vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
#news-view .news-card-meta { font-size: 10px; }
#news-view .news-footer { font-size: 11px; }
#news-view .news-summary { font-size: 13px; }
@media (max-width: 350px) {
  #news-view .news-card { grid-template-columns: 96px minmax(0, 1fr); }
  #news-view .news-content { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav-button, .icon-button, .clean-dock * { transition: none; }
  .main-nav-button:active, .icon-button:active { transform: none; }
}

/* Set stroke on SVG itself so navigation state changes repaint in WebKit. */
.main-nav-button .main-nav-icon svg { stroke: #9cb0b8; }
.main-nav-button.active .main-nav-icon svg { stroke: #071116; }
.clean-dock .main-nav-button.active .main-nav-icon svg { stroke: var(--accent); }
.clean-dock .main-nav-button[data-view="news"].active .main-nav-icon svg,
.clean-dock .main-nav-button[data-view="fixtures"].active .main-nav-icon svg,
.clean-dock .main-nav-button[data-view="teams"].active .main-nav-icon svg { stroke: var(--accent-2); }
.clean-more > summary .main-nav-icon svg { stroke: #9cb0b8; }
.clean-more[open] > summary .main-nav-icon svg,
.clean-more.is-active > summary .main-nav-icon svg { stroke: var(--accent-2); }

/* Directory cards: compact identity row, with every existing statistic retained. */
.team-card, .player-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 38px;
  column-gap: 10px;
  row-gap: 4px;
  padding: 14px;
  border-radius: 16px;
}
.team-card-head, .player-card-head { display: contents; }
.team-card-head > .team-badge,
.player-card-head > .player-photo {
  grid-column: 1; grid-row: 1 / span 2;
  width: 52px; height: 56px; align-self: center;
}
.team-card-head > .favorite-button,
.player-card-head > .favorite-button {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
}
.team-name, .player-name {
  grid-column: 2; grid-row: 1; align-self: end;
  margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere;
}
.team-meta, .player-meta {
  grid-column: 2; grid-row: 2;
  margin: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere;
}
.team-card > .stats-row, .player-card > .stats-row,
.player-card > .source-note, .player-card > .card-footer { grid-column: 1 / -1; }
.team-card > .stats-row, .player-card > .stats-row { margin-top: 8px; }
.player-card > .source-note { margin: 8px 0 0; }
.player-card .card-footer { margin-top: 4px; }

select.select-input {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; font-size: 14px; line-height: 1.4; color: var(--text);
}
.player-photo.badge-fallback { display: grid; place-items: center; }
select.select-input {
  -webkit-appearance: none; appearance: none; height: 44px; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #a6bac3 50%),
    linear-gradient(135deg, #a6bac3 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px; background-repeat: no-repeat;
}

/* Persistent chrome must not sample different page content during navigation. */
.clean-dock { background: #061218; backdrop-filter: none; }
.user-strip { background: #0a1b22; backdrop-filter: none; }
.main-nav-button { transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .main-nav-button { transition: none; } }

/* The original catalogue remains a non-interactive routing model only. */
#main-navigation[hidden] { display: none; }