/* Homepage reading surfaces: light catches the frame, scenery stays diffused
 * behind the data. Unsupported blur keeps the existing opaque surface. */
.home-page {
  --home-glass-fill: var(--surface);
  --home-glass-cell: var(--surface-2);
  --home-glass-edge: color-mix(in srgb,var(--line) 78%,var(--accent));
  --home-glass-light: color-mix(in srgb,var(--surface) 70%,#fff);
  --home-glass-glow: color-mix(in srgb,var(--accent) 8%,transparent);
  --home-glass-shadow: 0 10px 28px color-mix(in srgb,var(--bg) 32%,transparent);
}
/* Keep all header controls reachable between the desktop and mobile layouts,
 * including when the signed-in account has a long display name. */
@media(min-width:851px) and (max-width:1100px) {
  .home-page .site-header .header-inner {padding-inline:16px;gap:12px}
  .home-page .site-header .main-nav {gap:10px}
  .home-page .site-header .main-nav>a {font-size:15px;padding-inline:6px}
  .home-page .site-header .header-tools {gap:10px}
  .home-page .site-header .account-menu>summary>.account-name {display:none}
}
:root[data-theme=dark] .home-page {
  --home-glass-light: color-mix(in srgb,var(--text) 14%,transparent);
  --home-glass-glow: color-mix(in srgb,var(--accent) 10%,transparent);
  --home-glass-shadow: 0 12px 32px #00000026;
}
@media(prefers-color-scheme:dark) {
  :root[data-theme=auto] .home-page {
    --home-glass-light: color-mix(in srgb,var(--text) 14%,transparent);
    --home-glass-glow: color-mix(in srgb,var(--accent) 10%,transparent);
    --home-glass-shadow: 0 12px 32px #00000026;
  }
}

:root[data-palette] .home-page .site-main :is(.panel.home-matches-panel,.panel.home-teams-panel,.panel.home-ranking-panel) {
  border: 1px solid var(--home-glass-edge);
  border-radius: 18px;
  background-color: var(--home-glass-fill);
  background-image: radial-gradient(ellipse at 0 0,var(--home-glass-glow),transparent 62%),linear-gradient(135deg,var(--home-glass-light),transparent 42%);
  box-shadow: inset 0 1px 0 var(--home-glass-light),inset 0 -1px 0 color-mix(in srgb,var(--line) 26%,transparent),var(--home-glass-shadow);
  color: var(--text);
}
:root[data-palette] .home-page .site-main :is(.home-matches-panel,.home-teams-panel,.home-ranking-panel)>.section-heading {
  padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb,var(--line) 76%,transparent);
}
:root[data-palette] .home-page .site-main :is(.home-matches-panel,.home-teams-panel)>.section-heading h2 {
  color: var(--text);
}
:root[data-palette] .home-page .site-main :is(.home-ranking-section,.other-events)>.section-heading {
  padding: 10px 16px;
  border: 1px solid var(--home-glass-edge);
  border-radius: 12px;
  background: linear-gradient(115deg,var(--home-glass-glow),transparent 70%),var(--home-glass-fill);
  box-shadow: inset 0 1px 0 var(--home-glass-light),0 4px 16px color-mix(in srgb,var(--bg) 24%,transparent);
  color: var(--text);
}

/* Quiet, raised cells keep names and scores crisp inside the softer shell.
 * Player-card art and blue/red match outcome colours remain component-owned. */
:root[data-palette] .home-page .site-main .home-team-grid>a {
  border-color: color-mix(in srgb,var(--line) 70%,transparent);
  border-radius: 10px;
  background: linear-gradient(145deg,var(--home-glass-light),transparent 60%),var(--home-glass-cell);
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--surface) 58%,transparent),0 3px 9px color-mix(in srgb,var(--bg) 18%,transparent);
  color: var(--text);
}
:root[data-palette] .home-page .site-main .home-fixtures .cup-match-card.fixture-card {
  background-color: color-mix(in srgb,var(--surface) 95%,transparent);
  box-shadow: inset 0 1px 0 var(--home-glass-light),0 3px 10px color-mix(in srgb,var(--bg) 16%,transparent);
}
:root[data-palette] .home-page .site-main .event-shortcuts>a {
  min-width: 0;
  border-color: var(--home-glass-edge);
  border-radius: 13px;
  background: linear-gradient(125deg,var(--home-glass-glow),transparent 65%),var(--home-glass-fill);
  box-shadow: inset 0 1px 0 var(--home-glass-light),0 5px 18px color-mix(in srgb,var(--bg) 24%,transparent);
  color: var(--text);
}
:root[data-palette] .home-page .site-main .event-shortcuts>a>div {flex:1;min-width:0}
:root[data-palette] .home-page .site-main .event-shortcuts strong {white-space:normal;overflow-wrap:anywhere}
:root[data-palette] .home-page .site-main .event-shortcut-symbol {
  background: color-mix(in srgb,var(--surface-2) 72%,transparent);
  border-color: color-mix(in srgb,var(--line) 70%,transparent);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .home-page {
    --home-glass-fill: color-mix(in srgb,var(--surface) 78%,transparent);
    --home-glass-cell: color-mix(in srgb,var(--surface-2) 74%,transparent);
  }
  :root[data-theme=dark] .home-page {--home-glass-fill:color-mix(in srgb,var(--surface) 83%,transparent)}
  @media(prefers-color-scheme:dark) {
    :root[data-theme=auto] .home-page {--home-glass-fill:color-mix(in srgb,var(--surface) 83%,transparent)}
  }
  :root[data-palette] .home-page .site-main :is(.panel.home-matches-panel,.panel.home-teams-panel,.panel.home-ranking-panel),
  :root[data-palette] .home-page .site-main :is(.home-ranking-section,.other-events)>.section-heading,
  :root[data-palette] .home-page .site-main .event-shortcuts>a {
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
  }
}
@media(hover:hover) and (pointer:fine) {
  :root[data-palette] .home-page .site-main :is(.home-team-grid>a,.event-shortcuts>a):hover {
    background-color: color-mix(in srgb,var(--surface) 90%,transparent);
    border-color: color-mix(in srgb,var(--accent) 56%,var(--line));
    box-shadow: inset 0 1px 0 var(--home-glass-light),0 6px 18px color-mix(in srgb,var(--bg) 28%,transparent);
  }
}
@media(max-width:600px) {
  :root[data-palette] .home-page .site-main :is(.panel.home-matches-panel,.panel.home-teams-panel,.panel.home-ranking-panel) {border-radius:14px}
  :root[data-palette] .home-page .site-main :is(.home-ranking-section,.other-events)>.section-heading {padding:9px 12px}
}
@media(prefers-reduced-transparency:reduce) {
  :root[data-palette] .home-page {--home-glass-fill:var(--surface);--home-glass-cell:var(--surface-2)}
  :root[data-palette] .home-page .site-main :is(.panel.home-matches-panel,.panel.home-teams-panel,.panel.home-ranking-panel),
  :root[data-palette] .home-page .site-main :is(.home-ranking-section,.other-events)>.section-heading,
  :root[data-palette] .home-page .site-main .event-shortcuts>a {-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(forced-colors:active) {
  :root[data-palette] .home-page .site-main :is(.panel.home-matches-panel,.panel.home-teams-panel,.panel.home-ranking-panel,.home-team-grid>a,.event-shortcuts>a,.home-fixtures .cup-match-card.fixture-card),
  :root[data-palette] .home-page .site-main :is(.home-ranking-section,.other-events)>.section-heading {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media print {
  :root[data-palette] .home-page .site-main :is(.panel.home-matches-panel,.panel.home-teams-panel,.panel.home-ranking-panel,.home-team-grid>a,.event-shortcuts>a,.home-fixtures .cup-match-card.fixture-card),
  :root[data-palette] .home-page .site-main :is(.home-ranking-section,.other-events)>.section-heading {
    background: #fff;
    border-color: #bbb;
    color: #111;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}