/* Only the theme control changes in dark mode. */
.home-theme-switch.glass { justify-content: flex-start; cursor: pointer; }
.theme-thumb { position: relative; display: block; width: 24px; height: 24px; transform: translateX(0); transition: transform 520ms cubic-bezier(.22,1,.36,1); }
.home-theme-switch .theme-thumb img { position: absolute; inset: 0; transition: opacity 300ms ease; }
.theme-moon { opacity: 0; }
html[data-theme="light"] .theme-thumb { transform: translateX(24px); }
html[data-theme="light"] .theme-sun { opacity: 0; }
html[data-theme="light"] .theme-moon { opacity: 1; filter: brightness(0) saturate(100%) invert(6.67%); }

html[data-theme="light"] { color-scheme: light; --line: #d9d9d9; background: #fffbf8; }
html[data-theme="light"] body,
html[data-theme="light"] .screen { background: #fffbf8; }
html[data-theme="light"] body { color: #111111; }
html[data-theme="light"] .home-brand-logo { filter: brightness(0) saturate(100%) invert(6.67%); }
html[data-theme="light"] .home-theme-switch.glass { background: rgba(217,217,217,.4); }

html[data-theme="light"] :is(.score-header, .compact-score-header, .achievements-header) {
  background: linear-gradient(180deg,rgba(245,243,242,.2),rgba(217,217,217,.2));
  color: #111111;
  box-shadow: inset 0 0 1px rgba(245,243,242,.2), 0 10px 30px rgba(255,251,248,.5), inset 0 0 4px rgba(255,251,248,.2);
}
html[data-theme="light"] .score-header > .glass-stroke { display: block; }
html[data-theme="light"] :is(.outcome, .mark-control, .achievement-counter) { background: rgba(217,217,217,.4); color: #111111; }
html[data-theme="light"] :is(.score-divider, .achievements-divider) { background: #d9d9d9; }
html[data-theme="light"] .achievement-mini-icon [fill="#D4F3FF"] { fill: #6190a3; }
html[data-theme="light"] .online-star { background: #111111; }
html[data-theme="light"] .online-control[aria-pressed="false"] .online-toggle { background: #fffbf8; }
html[data-theme="light"] .online-control[aria-pressed="false"] .online-star { background: #111111; }
html[data-theme="light"] .period-bound { background: #fffbf8; color: #111111; }

html[data-theme="light"] :is(.score-group-label--select, .score-group-toggle, .table-person-select, .table-person-menu, .table-filter, .table-period-expanded, .wheel-card, .wheel-highlight, .wheel-done, .round-share-button) {
  background: rgba(217,217,217,.2); color: #111111;
}
html[data-theme="light"] :is(.score-group-label, .table-person-option, .wheel-option, .wheel-title) { color: #111111; }
html[data-theme="light"] :is(.score-group-chevron, .table-person-chevron) path { stroke: #111111; }
html[data-theme="light"] .wheel-option.is-current::after { background: #111111; }
html[data-theme="light"] .round-share-button .share-icon { filter: brightness(0) saturate(100%) invert(6.67%); }
html[data-theme="light"] .score-group-body::after { background: #fffbf8; }
html[data-theme="light"] .table-online-star-wrap { background: #fffbf8; }
html[data-theme="light"] .table-online-star { background: #111111; }

html[data-theme="light"] .bottom-nav { background: rgba(245,243,242,.2); }
html[data-theme="light"] .nav-slider { background: rgba(217,217,217,.4); }
html[data-theme="light"] .nav-item .nav-shape { fill: rgba(17,17,17,.4); stroke: none; }
html[data-theme="light"] .nav-active-icons .nav-shape { fill: #111111; }

html[data-theme="light"] .top-gradient[data-state="large"] { background: linear-gradient(180deg,rgba(255,251,248,1) 0%,rgba(255,251,248,.9) var(--top-fade-stop),rgba(255,251,248,0) 100%); }
html[data-theme="light"] .top-gradient[data-state="compact"],
html[data-theme="light"] .compact-top-gradient { background: linear-gradient(180deg,rgba(255,251,248,1) 0%,rgba(255,251,248,.9) 70%,rgba(255,251,248,0) 100%); }
html[data-theme="light"] .top-gradient[data-state="achievements"] { background: linear-gradient(180deg,rgba(255,251,248,1) 0%,rgba(255,251,248,.9) 80%,rgba(255,251,248,0) 100%); }
html[data-theme="light"] .top-gradient[data-state="achievement-popup"] { background: linear-gradient(180deg,rgba(255,251,248,1) 0%,rgba(255,251,248,.9) 30%,rgba(255,251,248,0) 100%); }
html[data-theme="light"] .achievements-top-gradient { background: linear-gradient(180deg,rgba(255,251,248,.9) 79.8%,rgba(255,251,248,0) 100%); }
html[data-theme="light"] .bottom-gradient { background: linear-gradient(180deg,rgba(255,251,248,0) 0%,rgba(255,251,248,.8) 50%,rgba(255,251,248,1) 100%); }

/* Page surfaces. Keep the coloured backplates and player-result circles intact. */
html[data-theme="light"] :is(.match-game, .standing-main, .stats-panel),
html[data-theme="light"] .achievement-card .achievement-main-panel {
  background: linear-gradient(180deg,rgba(255,251,248,.5),rgba(217,217,217,.5));
  color: #111111;
  box-shadow: none;
}
html[data-theme="light"] .standing-card .standing-main { box-shadow: none; }
html[data-theme="light"] .achievement-card.is-prototype .achievement-main-panel,
html[data-theme="light"] .achievement-card.is-open .achievement-main-panel {
  background: linear-gradient(180deg,rgba(255,251,248,.5),rgba(217,217,217,.5));
  box-shadow: none;
}
html[data-theme="light"] :is(.real-score, .prediction),
html[data-theme="light"] .achievement-card .achievement-score {
  background: rgba(255,251,248,.4);
  color: #111111;
}
html[data-theme="light"] :is(.team-name, .prediction-score, .real-score, .standing-name, .standing-record),
html[data-theme="light"] .achievement-card .achievement-score-value { color: #111111; }
html[data-theme="light"] .standing-position {
  background: rgba(217,217,217,.4);
  color: #111111;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
}
html[data-theme="light"] .standing-score-box { background: #fffbf8; color: #111111; }
html[data-theme="light"] .achievement-score-player { background: #fffbf8; color: #111111; }
html[data-theme="light"] .achievement-card.is-prototype.is-secret-prototype .achievement-secret-line { background: rgba(217,217,217,.4); }
html[data-theme="light"] .achievement-card[data-tone="silver"] { --achievement-mid: #6190a3; --achievement-light: #d4f3ff; }
html[data-theme="light"] .achievement-card[data-tone="gold"] { --achievement-mid: #f1b22a; --achievement-light: #ffe8b0; }
html[data-theme="light"] .achievement-card[data-tone="stone"] { --achievement-mid: #7106c9; --achievement-light: #d883eb; }

.stats-panel, .standing-position { position: relative; }
.stats-panel > .glass-stroke, .standing-position > .glass-stroke { display: none; }
html[data-theme="light"] :is(.stats-panel, .standing-position) > .glass-stroke { display: block; }
html[data-theme="light"] .stats-panel { -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); }
html[data-theme="light"] :is(.stats-rate--glass, .stats-stack-item, .stats-chart-shell, .stats-team-card) {
  background: rgba(217,217,217,.4);
  box-shadow: none;
}
html[data-theme="light"] :is(.stats-metric-label, .stats-rate-value, .stats-stack-item, .stats-feature-value, .stats-team-name) { color: #111111; }
html[data-theme="light"] .stats-chart { background: #fffbf8; }
html[data-theme="light"] .stats-chart text { fill: #111111; }
html[data-theme="light"] .stats-chart-grid { stroke: #d9d9d9; }
html[data-theme="light"] .stats-chart-line { stroke: #111111; }
html[data-theme="light"] .stats-chart-marker { fill: #111111; }
html[data-theme="light"] .stats-chart .stats-chart-marker-text { fill: #fffbf8 !important; }

/* Composite the artwork first, then fade the whole group in either theme. */
.achievement-artwork {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .2;
  pointer-events: none;
  transition: opacity 360ms ease;
}
.achievement-card.is-earned .achievement-artwork { opacity: 1; }
.achievement-card .achievement-artwork > .achievement-color-panel,
.achievement-card .achievement-artwork > .achievement-emblem {
  opacity: 1 !important;
}

/* Horizontal light glass; inner capsules and statistics retain their fills. */
html[data-theme="light"] .match-game,
html[data-theme="light"] .standing-main,
html[data-theme="light"] .achievement-card.is-prototype .achievement-main-panel {
  background: linear-gradient(90deg, #fffbf8 0%, rgba(245,243,242,.5) 100%);
  -webkit-backdrop-filter: blur(160px);
  backdrop-filter: blur(160px);
}