/* Generated from shared shell and landing chunks. Edit src/web/styles, then run npm run build:styles. */
:root {
  --bg: #0b0f17;
  --panel: #111722;
  --panel-2: #151c28;
  --panel-3: #17233b;
  --line: #252e3b;
  --line-strong: #344052;
  --text: #f2f5f9;
  --muted: #8b96a8;
  --soft: #c7cfdb;
  --lime: #5f8cff;
  --lime-dark: #4674e8;
  --orange: #f4a340;
  --danger: #dc3d32;
  --green: #16834b;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

/* The navy Spurs crest disappears on the app's dark surfaces. Keep the shared
   source artwork intact and render its silhouette in white everywhere. */
img[src*="tottenham-hotspur.webp"] {
  filter: brightness(0) invert(1) !important;
}

/* Optional light appearance for the shared shell, generic modes and shared dialogs.
   Competition-branded UCL, Premier League and World Cup surfaces keep their own themes. */
html.light-mode {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #f8f9fc;
  --panel-3: #eef3ff;
  --line: #dfe4ec;
  --line-strong: #cbd3df;
  --text: #172033;
  --muted: #68758a;
  --soft: #3e4a5f;
  color-scheme: light;
}

html.light-mode body {
  color: var(--text);
  background: var(--bg);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar {
  border-bottom-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(20, 28, 48, 0.04);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(
  .brand-copy strong,
  .topbar h1,
  .section-heading h3,
  .panel-heading strong,
  .fixture-team.winner,
  .fixture-team b,
  .team h2,
  .score span,
  .plot-item strong,
  .champion-stage
) {
  color: var(--text);
}

html.light-mode body.before-start .mode-card-default,
html.light-mode body.before-start .mode-card-online,
html.light-mode body.before-start .mode-card-legacy,
html.light-mode body.before-start .mode-card-custom,
html.light-mode body.before-start .mode-card-coming-soon {
  border: 1px solid #e0e5ed;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(29, 45, 70, 0.07);
}

html.light-mode body.before-start :is(
  .mode-card-default,
  .mode-card-online,
  .mode-card-legacy,
  .mode-card-custom,
  .mode-card-coming-soon
) :is(h3, .landing-setting-heading > span, .landing-team-setting > span, .spectate-picker-copy strong) {
  color: #172033;
}

html.light-mode body.before-start :is(
  .mode-card-default,
  .mode-card-online,
  .mode-card-legacy,
  .mode-card-custom,
  .mode-card-coming-soon
) :is(p, small, .spectate-picker-copy small) {
  color: #68758a;
}

html.light-mode body.before-start :is(
  .mode-card-default,
  .mode-card-online,
  .mode-card-legacy,
  .mode-card-custom,
  .mode-card-coming-soon
) :is(.segmented, .spectate-picker, .landing-setting-info-panel) {
  border-color: #dfe4ec;
  background: #f5f7fa;
}

html.light-mode body.before-start :is(
  .mode-card-default,
  .mode-card-online,
  .mode-card-legacy,
  .mode-card-custom,
  .mode-card-coming-soon
) .segmented button:not(.active) {
  color: #647187;
}

html.light-mode body.before-start :is(.mode-card-premier-league, .mode-card-ucl) h3 {
  color: #ffffff;
}

html.light-mode body.before-start .home-achievement-leaderboard {
  border: 1px solid #e0e5ed;
  color: #344158;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(29, 45, 70, 0.07);
}

html.light-mode body.before-start .home-achievement-leaderboard h2,
html.light-mode body.before-start .home-achievement-row > strong,
html.light-mode body.before-start .home-achievement-player b,
html.light-mode body.before-start .home-achievement-own strong {
  color: #172033;
}

html.light-mode body.before-start .home-achievement-row,
html.light-mode body.before-start .home-achievement-own {
  border-color: #e2e7ee;
  color: #536078;
}

html.light-mode body.before-start .home-achievement-row.is-current {
  background: #eef3ff;
}

html.light-mode body.before-start .home-achievement-action {
  color: #31558f;
  background: #edf2fa;
}

html.light-mode body.standard-mode-active :is(.match-stage, .round-board, .panel, .match-analysis, .standard-match-tactics, .story-card) {
  border-color: #e0e5ed;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(29, 45, 70, 0.07);
}

html.light-mode body.standard-mode-active :is(.team, .fixture, .live-feed-item, .queue-item, .plot-item, .match-stat-row) {
  border-color: #e4e8ef;
  color: #344158;
  background: #f8f9fc;
}

html.light-mode body.standard-mode-active :is(.fixture.complete, .live-feed-item:nth-child(n + 3)) {
  background: #f2f5f9;
}

html.light-mode body.standard-mode-active :is(.fixture.selected, .queue-item.current, .spoiler-panel) {
  border-color: #9bb5f5;
  background: #eef3ff;
}

html.light-mode body.standard-mode-active :is(.match-events, .live-sim, .standard-tactic-buttons, .match-highlight-mode) {
  border-color: #dde3ec;
  color: var(--text);
  background: #f5f7fa;
}

html.light-mode body.standard-mode-active :is(.fixture-team, .queue-team, .event, .live-label, .text-button) {
  color: #536078;
}

html.light-mode body.standard-mode-active :is(.team-name, .match-score, .fixture-team.winner .name, .fixture-team.winner b) {
  color: #172033;
}

html.light-mode body.standard-mode-active :is(.live-control, .load-more, .ghost-button, .standard-tactic-buttons button:not(.active), .match-highlight-mode button:not(.active)) {
  border-color: #d8dee8;
  color: #526078;
  background: #ffffff;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.modal, .confirm-modal, .snapshot-modal) {
  border-color: #dbe1ea;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(29, 45, 70, 0.2);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.modal, .confirm-modal, .snapshot-modal)::backdrop {
  background: rgba(34, 43, 60, 0.42);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.modal, .confirm-modal, .snapshot-modal) :is(h2, h3, strong) {
  color: #172033;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.modal, .confirm-modal, .snapshot-modal) :is(p, small, label) {
  color: #68758a;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .modal .icon-button {
  border-color: #e0e5ed;
  color: #536078;
  background: #f5f7fa;
}

html.light-mode .settings-option {
  color: #172033;
  background: #f5f7fa;
}

html.light-mode .settings-option-copy strong {
  color: #172033;
}

html.light-mode .settings-option-copy small,
html.light-mode .settings-note {
  color: #68758a;
}

html.light-mode .settings-keybind-list {
  border-color: #dfe4ec;
  background: #f8f9fc;
}

html.light-mode :is(.news-modal, .discord-modal, .donate-modal, .home-achievement-modal) {
  border-color: #dbe1ea;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(29, 45, 70, 0.2);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .achievement-unlock-modal:not([data-achievement-theme]) {
  border-color: #dbe1ea;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(29, 45, 70, 0.2);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .achievement-unlock-modal:not([data-achievement-theme]) p {
  color: #68758a;
}

html.light-mode :is(.news-modal, .discord-modal, .donate-modal, .home-achievement-modal) :is(h2, strong) {
  color: #172033;
}

html.light-mode :is(.news-modal, .discord-modal, .donate-modal, .home-achievement-modal) p {
  color: #68758a;
}

html.light-mode .news-entry + .news-entry,
html.light-mode .home-achievement-modal-table {
  border-color: #e0e5ed;
}

html.light-mode .home-achievement-modal-table .home-achievement-row {
  color: #344158;
  background: #f8f9fc;
}

html.light-mode .home-achievement-modal-table .home-achievement-row.is-heading {
  background: #eef3ff;
}

html.light-mode .toast {
  border-color: #cbd6e7;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(29, 45, 70, 0.16);
}

@media (hover: hover) and (pointer: fine) {
  html.light-mode .settings-option:hover {
    background: #edf1f7;
  }

  html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .utility-button:hover {
    color: #172033;
    background: #edf1f7;
  }
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .secondary-button {
  border: 1px solid #c8d3e1;
  color: #31558f;
  background: #ffffff;
  font-weight: 800;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .danger-button {
  border: 1px solid #d8a7ad;
  color: #a32638;
  background: #fff3f4;
  font-weight: 800;
}

html.light-mode .settings-switch {
  border: 1px solid #bfcad8;
  background: #d8e0ea;
}

html.light-mode .settings-switch i {
  top: 2px;
  left: 2px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(29, 45, 70, 0.2);
}

html.light-mode .settings-option.is-enabled .settings-switch {
  border-color: #5f8cff;
  background: #5f8cff;
}

@media (hover: hover) and (pointer: fine) {
  html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .secondary-button:hover {
    border-color: #9bb5f5;
    color: #244f9d;
    background: #edf3ff;
  }
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .champion-stage {
  color: #172033;
  background: #ffffff;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .champion-stage :is(h2, strong) {
  color: #172033;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .champion-stage p {
  color: #526178;
  font-weight: 700;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .champion-stage .flag-orb {
  border-color: transparent;
  background: transparent;
  box-shadow: 0 0 0 4px #dfe7f6, 0 12px 24px rgba(29, 45, 70, 0.14);
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(.champion-award, .champion-place) {
  border: 1px solid #d8e0ea;
  color: #172033;
  background: #f7f9fc;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .champion-place.place-1 {
  border-color: #8ca9eb;
  background: #eaf1ff;
  box-shadow: inset 0 3px #426fda;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(
  .champion-place > b,
  .champion-section-label,
  .champion-award-copy > span
) {
  color: #315fbd;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(
  .champion-place small,
  .champion-award-copy small
) {
  color: #526178;
  font-weight: 700;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .champion-award-copy small b {
  color: #344158;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(
  .champion-place-flag,
  .champion-award-flag,
  .champion-award-flag .award-flag
) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .penalty-stage {
  border: 1px solid #d8e0ea;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(29, 45, 70, 0.14);
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .penalty-stage-head {
  color: #526178;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .penalty-stage-head strong,
html.light-mode body.custom-tournament-mode-active:not(.before-start) .penalty-call strong {
  color: #172033;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(
  .penalty-stage-head strong i,
  .penalty-call span,
  .penalty-ledgers span
) {
  color: #526178;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .penalty-scene {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(34, 87, 64, 0.16)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 42px, transparent 42px 84px),
    #7fb99c;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .match-penalty-overlay {
  color: #172033;
  background: rgba(244, 247, 251, 0.96);
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .match-penalty-decision strong {
  color: #172033;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(
  .match-penalty-decision span,
  .match-penalty-decision small
) {
  color: #526178;
  font-weight: 700;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) #newTournamentButton {
  border: 1px solid #cbd5e3;
  color: #315fbd;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(29, 45, 70, 0.08);
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(
  .golden-boot-flag,
  .hero-flag,
  .fixture-flag,
  .custom-group-flag
) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .score-separator {
  color: #526178;
  font-weight: 700;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .timeline-event > b {
  color: #315fbd;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(.primary-button, .play-button) {
  color: #ffffff;
  background: #426fda;
}

html.light-mode body.custom-tournament-mode-active:not(.before-start) .go-to-top span {
  color: #315fbd;
}

@media (hover: hover) and (pointer: fine) {
  html.light-mode body.custom-tournament-mode-active:not(.before-start) :is(.primary-button, .play-button):hover {
    color: #ffffff;
    background: #315fbd;
  }
}

@media (max-width: 850px) {
  html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.sidebar, .topbar) {
    background: rgba(255, 255, 255, 0.97);
  }

  html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .round-nav {
    border-color: #dfe4ec;
    background: #ffffff;
    box-shadow: 18px 22px 50px rgba(29, 45, 70, 0.16);
  }
}

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

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html.route-retro-loading body {
  background: #076f45;
}

html.route-retro-loading #appShell {
  display: none !important;
}

body::before,
body::after,
.ambient,
.main::before {
  display: none;
}

.app-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  width: 100%;
  height: 72px;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(20px, 3vw, 44px);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(20, 28, 48, 0.02);
  backdrop-filter: blur(16px);
}

.brand {
  flex: 0 0 auto;
  gap: 10px;
  padding: 0;
  color: var(--text);
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #1f5eff;
  box-shadow: none;
  line-height: 1;
}

.brand-mark .brand-mark-number {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.brand-mark .brand-mark-label {
  margin-top: 2px;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.55px;
}

.brand-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.brand-copy small {
  color: #8a94a6;
  font-size: 8px;
  font-weight: 700;
}

.tournament-status {
  order: 3;
  width: 126px;
  flex: 0 0 126px;
  margin: 0;
}

.eyebrow-row {
  color: var(--muted);
  font-size: 8px;
}

.eyebrow-row span:last-child {
  color: #1f5eff;
}

.progress-track {
  height: 4px;
  margin: 7px 0 0;
  background: #e8ecf3;
}

.progress-track span {
  background: #1f5eff;
  box-shadow: none;
}

.tournament-status p {
  display: none;
}

.round-nav {
  order: 2;
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.round-nav::-webkit-scrollbar {
  display: none;
}

.round-link {
  display: flex;
  width: auto;
  min-width: max-content;
  grid-template-columns: none;
  gap: 0;
  padding: 9px 10px;
  border-radius: 8px;
  color: #7a8496;
  background: transparent;
}

.round-link .round-index,
.round-link small {
  display: none;
}

.round-link strong {
  font-size: 9px;
  font-weight: 700;
}

.round-link.active {
  color: #1546bd;
  background: #eef3ff;
  box-shadow: none;
}

.round-link.active::before {
  display: none;
}

.round-link.complete {
  color: #24704b;
}

.sidebar-bottom {
  order: 4;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
}

.side-action {
  display: flex;
  width: auto;
  height: 36px;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #566176;
  background: transparent;
  font-size: 9px;
}

.side-icon {
  color: #1f5eff;
  font-size: 13px;
}

.side-action kbd,
.save-note {
  display: none;
}

.main {
  min-width: 0;
}

.topbar {
  position: relative;
  top: auto;
  z-index: 8;
  max-width: 1280px;
  min-height: 126px;
  margin: 0 auto;
  padding: 35px 24px 22px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.legacy-topbar-back {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #29364a;
  border-radius: 8px;
  color: #b9c7dc;
  background: #111925;
  cursor: pointer;
  font: 800 10px "Manrope", sans-serif;
}

.legacy-topbar-back[hidden] {
  display: none;
}

.saved-tournament-delete-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 0 14px;
  border: 1px solid #9f3340;
  border-radius: 8px;
  color: #ffd9dd;
  background: #451820;
  cursor: pointer;
  font: 800 11px "Manrope", sans-serif;
}

.saved-tournament-delete-button:hover {
  border-color: #e25b69;
  background: #641f2a;
}

.saved-tournament-delete-button[hidden] {
  display: none;
}

.retro-saved-tournament-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.retro-saved-tournament-actions .saved-tournament-delete-button {
  margin-left: auto;
}

.saved-tournament-delete-modal .confirm-icon {
  color: #d54858;
}

.before-start:not(.legacy-mode-active) .topbar {
  justify-content: flex-start;
}

.legacy-topbar-back > span:first-child {
  color: #8ba9ff;
  font-size: 19px;
  line-height: 1;
}

.legacy-header-back {
  display: none;
}

.legacy-mode-active .topbar {
  min-height: 72px;
  padding-block: 16px;
}

.page-kicker,
.section-kicker {
  color: #1f5eff;
  font-weight: 800;
}

.topbar h1 {
  color: var(--text);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -1.5px;
}

.top-actions {
  gap: 8px;
}

.last-updated {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 30px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid #dbe0e8;
  color: #8993a4;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.last-updated strong {
  color: #4c576c;
  font-weight: 500;
}

.utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #8792a6;
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    transform 120ms ease;
}

.utility-button > span:first-child {
  color: #6f96ff;
  font-size: 13px;
}

.utility-button:active {
  transform: scale(0.97);
}

.search {
  width: 210px;
  height: 39px;
  border-color: var(--line);
  color: #7a8496;
  background: #fff;
}

.search:focus-within {
  border-color: #8daeff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 94, 255, 0.08);
}

.search input {
  color: var(--text);
}

.search input::placeholder {
  color: #9aa3b2;
}

.icon-button,
.ghost-button {
  border-color: var(--line);
  color: #4c576c;
  background: #fff;
}

.ghost-button {
  color: #fff;
  background: #172033;
}

.content {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(560px, 860px) minmax(220px, 260px);
  grid-template-areas:
    "next stage boot"
    "board board board";
  align-items: start;
  justify-content: center;
  gap: 22px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.stage-column {
  grid-area: stage;
  min-width: 0;
}

.insight-left {
  grid-area: boot;
}

.insight-right {
  grid-area: next;
}

.round-board {
  grid-area: board;
  min-width: 0;
}

.match-stage {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: #fff;
  background-image: none;
  box-shadow: 0 8px 28px rgba(28, 38, 61, 0.06);
}

.match-stage::before,
.match-stage::after {
  display: none;
}

.stage-topline {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: #8a94a6;
}

.live-label {
  color: #526078;
  font-weight: 800;
}

.live-label span {
  background: #1f5eff;
  box-shadow: 0 0 0 3px rgba(31, 94, 255, 0.1);
}

.matchup {
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
  gap: 16px;
  padding: 24px clamp(24px, 4vw, 52px) 20px;
}

.team {
  min-height: 196px;
  justify-content: center;
  padding: 20px 14px;
  border: 1px solid #e8ebf1;
  border-radius: 13px;
  color: var(--text);
  background: #fafbfc;
  box-shadow: none;
}

.team .seed {
  margin-bottom: 11px;
  color: #858fa1;
  font-weight: 700;
}

.flag-orb {
  display: grid;
  width: clamp(78px, 7vw, 98px);
  height: clamp(50px, 4.6vw, 64px);
  overflow: hidden;
  place-items: center;
  border: 1px solid #dce1ea;
  border-radius: 6px;
  background: #edf0f5;
  box-shadow: 0 4px 12px rgba(22, 32, 51, 0.09);
  font-size: 32px;
}

.country-flag {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  background: #edf0f5;
}

.country-flag img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-flag.flag-belarus img {
  background: #ce1720;
  object-fit: cover;
  object-position: left center;
}

.flag-fallback {
  font-size: 1.05em;
  line-height: 1;
}

.team h2 {
  max-width: 220px;
  margin: 13px 0 8px;
  color: var(--text);
  font-size: clamp(16px, 1.65vw, 22px);
  font-weight: 800;
  letter-spacing: -0.7px;
}

.rating {
  gap: 3px;
}

.rating i {
  width: 12px;
  height: 3px;
  background: #dfe3eb;
}

.rating i.on {
  background: #1f5eff;
}

.discipline {
  display: grid;
  min-height: 18px;
  gap: 4px;
  margin-top: 8px;
}

.discipline:empty {
  margin-top: 0;
}

.discipline-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 170px;
  color: #ad3028;
  font-size: 8px;
  font-weight: 800;
}

.discipline-card i,
.red-event i,
.red-card-icon {
  display: inline-block;
  width: 7px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: #d93a31;
}

.score-zone {
  min-height: 160px;
  padding: 20px 8px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
}

.venue {
  color: #7c8799;
  font-weight: 800;
}

.score {
  margin: 12px 0 6px;
}

.score span {
  color: var(--text);
  font-size: clamp(39px, 4vw, 54px);
  font-weight: 800;
  transition: color 160ms ease, transform 160ms var(--ease-out);
}

.score span.score-pop {
  color: #1f5eff;
  transform: scale(1.15);
}

.score small,
.result-note {
  color: #8a94a6;
  font-weight: 700;
}

.stage-action {
  padding: 5px 24px 24px;
}

.primary-button {
  color: #fff;
  background: #1f5eff;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}

.play-button {
  min-width: 160px;
  border: 0;
  outline: 0;
}

.stage-action p {
  color: #929bad;
}

.stage-action p:empty {
  display: none;
}

.spoiler-panel {
  margin: 4px 20px 20px;
  border-color: #dbe4ff;
  color: var(--text);
  background: #f2f6ff;
}

.spoiler-panel p {
  color: #687386;
}

.spoiler-icon {
  color: #1f5eff;
  background: #e1e9ff;
}

.live-sim {
  position: relative;
  z-index: 3;
  margin: 4px 20px 20px;
  overflow: hidden;
  border: 1px solid #dde3ed;
  border-radius: 12px;
  background: #f8faff;
}

.live-sim[hidden] {
  display: none;
}

.live-sim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid #e4e9f1;
}

.live-clock-block {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 11px;
}

.live-clock-block > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1f5eff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.9px;
}

.live-clock-block > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4c42;
  box-shadow: 0 0 0 3px rgba(239, 76, 66, 0.1);
}

.live-clock-block strong {
  grid-row: 1 / 3;
  grid-column: 2;
  min-width: 74px;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -1.2px;
}

.live-clock-block small {
  color: #8a94a6;
  font-size: 7px;
  font-weight: 700;
}

.live-controls {
  display: flex;
  gap: 6px;
}

.live-control {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #dce2eb;
  border-radius: 7px;
  color: #536078;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}

.live-control:active {
  transform: scale(0.97);
}

.skip-control {
  border-color: #1f5eff;
  color: #fff;
  background: #1f5eff;
}

.live-event-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 72px;
  padding: 9px;
}

.live-feed-item {
  display: grid;
  grid-template-columns: 32px 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid #e5e9f0;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
}

.live-feed-item:nth-child(n + 3) {
  color: #69758a;
  background: #f5f7fa;
}

.feed-minute {
  color: #1f5eff;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 700;
}

.feed-icon {
  display: grid;
  place-items: center;
  color: #1f5eff;
  font-size: 8px;
}

.feed-team-flag {
  display: block;
  width: 24px;
  height: 16px;
}

.live-feed-flag,
.fixture-flag,
.queue-flag,
.search-flag,
.field-flag-art {
  border: 1px solid rgba(24, 34, 54, 0.14);
  border-radius: 3px;
}

.live-feed-item strong,
.live-feed-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-feed-item strong {
  font-size: 8px;
  font-weight: 800;
}

.live-feed-item small {
  margin-top: 2px;
  color: #7c8799;
  font-size: 7px;
}

.red-item {
  border-left: 3px solid #d93a31;
}

.goal-item {
  border-left: 3px solid #16834b;
}

.shootout-item {
  border-left: 3px solid #f0a13e;
}

.match-stage.is-live {
  border-color: #b8caff;
  box-shadow: 0 8px 28px rgba(31, 94, 255, 0.09);
}

.match-events {
  margin: 0 20px 20px;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  color: var(--text);
  background: #fafbfc;
}

.event {
  color: #4e5a70;
}

.event b,
.event-side.away .event b {
  color: #1f5eff;
}

.red-event {
  display: flex;
  align-items: center;
  gap: 5px;
}

.event-side.away .red-event {
  justify-content: flex-end;
}

.event-outcome {
  border-color: #dce2eb;
  color: #687386;
  background: #fff;
}

.story-strip {
  display: none;
}

.round-board {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(28, 38, 61, 0.04);
}

.section-heading {
  margin-bottom: 16px;
}

.section-heading h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.text-button {
  color: #687386;
}

.text-button.active {
  color: #1f5eff;
}

.secondary-button {
  min-height: 34px;
  border-color: #1f5eff;
  color: #1f5eff;
  background: #fff;
}

.fixture-grid {
  gap: 7px;
}

.fixture {
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  color: #4c586d;
  background: #fff;
  box-shadow: none;
}

.fixture.selected {
  border-color: #8caaff;
  background: #f2f6ff;
  box-shadow: 0 0 0 2px rgba(31, 94, 255, 0.07);
}

.fixture.complete {
  background: #f8fafc;
}

.fixture-team {
  color: #4c586d;
  font-size: 9px;
}

.fixture-team .flag {
  display: block;
  width: 23px;
  height: 15px;
}

.fixture-team.winner {
  color: var(--text);
}

.fixture-team.winner .name::after {
  color: #16834b;
}

.fixture-team b {
  color: var(--text);
}

.fixture-meta {
  color: #97a0af;
}

.load-more {
  border-color: #d7dde7;
  color: #687386;
  background: #fafbfc;
}

.insight-column {
  gap: 12px;
}

.plot-panel {
  display: none;
}

.panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 6px 20px rgba(28, 38, 61, 0.04);
}

.panel-heading {
  padding: 14px;
  border-bottom-color: #e7eaf0;
}

.panel-heading span {
  color: #1f5eff;
}

.panel-heading strong {
  color: var(--text);
}

.queue-item {
  padding: 11px 13px;
  border-bottom-color: #eceff4;
}

.queue-item.current {
  background: #f1f5ff;
}

.queue-item.current .queue-number {
  color: #1f5eff;
}

.queue-team {
  color: #4d596e;
}

.queue-team > span:first-child {
  display: block;
  width: 21px;
  height: 14px;
  flex: 0 0 auto;
}

.plot-item {
  border-bottom-color: #eceff4;
}

.plot-icon {
  color: #1f5eff;
  background: #edf2ff;
}

.plot-item strong {
  color: var(--text);
}

.plot-item p,
.empty-story,
.empty-story p {
  color: #7c8799;
}

.toast {
  border-color: #27344a;
  color: #fff;
  background: #172033;
  box-shadow: 0 14px 40px rgba(23, 32, 51, 0.22);
}

.modal,
.confirm-modal {
  border-color: var(--line);
  color: var(--text);
  background: #fff;
  box-shadow: 0 24px 80px rgba(23, 32, 51, 0.2);
}

.modal::backdrop,
.confirm-modal::backdrop {
  background: rgba(22, 28, 42, 0.5);
}

.modal .icon-button {
  color: #536078;
  background: #f8f9fb;
}

.setting-group,
.switch-row {
  border-top-color: #e7eaf0;
}

.setting-copy p,
.switch-row p,
.field-intro {
  color: #748095;
}

.segmented {
  border-color: #dfe4ec;
  background: #f5f7fa;
}

.segmented button {
  color: #6d788c;
}

.segmented button.active {
  color: #fff;
  background: #1f5eff;
}

.switch {
  background: #d7dce5;
}

.switch::after {
  background: #fff;
}

.switch-row input:checked + .switch {
  background: #1f5eff;
}

.switch-row input:checked + .switch::after {
  background: #fff;
}

.modal-search {
  background: #fff;
}

.field-list {
  border-color: #e1e5ec;
}

.field-team {
  border-color: #eceff4;
}

.field-team:nth-child(odd) {
  border-right-color: #eceff4;
}

.field-team .field-flag {
  display: block;
  width: 28px;
  height: 19px;
  font-size: 0;
}

.field-team small {
  color: #687386;
  background: #f0f2f6;
}

.field-team small.invited {
  color: #a05b12;
  background: #fff3e3;
}

.champion-stage {
  color: var(--text);
  background: #fff;
}

.champion-stage .flag-orb {
  width: 140px;
  height: 91px;
  border: 4px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #1f5eff, 0 15px 28px rgba(23, 32, 51, 0.14);
}

.champion-stage p {
  color: #748095;
}

.trophy {
  color: #1f5eff;
}

.search-result-popover {
  top: 104px;
  right: max(24px, calc((100vw - 1232px) / 2 + 119px));
  border-color: var(--line);
  color: var(--text);
  background: #fff;
  box-shadow: 0 18px 50px rgba(23, 32, 51, 0.16);
}

.search-result {
  grid-template-columns: 29px 1fr;
  border-bottom-color: #e8ebf1;
  color: var(--text);
}

.search-result > span:first-child {
  width: 27px;
  height: 18px;
}

.search-result small {
  color: #7c8799;
}

@media (hover: hover) and (pointer: fine) {
  .round-link:hover {
    color: #1f5eff;
    background: #f3f6ff;
  }

  .side-action:hover,
  .queue-item:hover {
    color: var(--text);
    background: #f5f7fa;
  }

  .fixture:hover {
    border-color: #c9d5f6;
    background: #fbfcff;
  }

  .primary-button:hover {
    background: #164bd2;
  }

  .secondary-button:hover {
    color: #fff;
    background: #1f5eff;
  }

  .ghost-button:hover {
    border-color: #172033;
    color: #fff;
    background: #27334a;
  }

  .icon-button:hover {
    border-color: #ccd2dc;
    color: var(--text);
    background: #f7f8fa;
  }

  .live-control:hover {
    border-color: #9db5f7;
    color: #1f5eff;
  }

  .skip-control:hover {
    color: #fff;
    background: #164bd2;
  }

  .text-button:hover {
    color: #1f5eff;
  }

  .search-result:hover {
    background: #f5f7fb;
  }
}

@media (max-width: 1320px) {
  .tournament-status {
    display: none;
  }

  .sidebar {
    gap: 14px;
  }

  .round-link {
    padding-inline: 8px;
  }
}

@media (max-width: 1180px) {
  .content {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "stage boot"
      "next boot"
      "board board";
  }

  .insight-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "next"
      "boot"
      "board";
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    display: flex;
    width: 270px;
    height: 100vh;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    padding: 24px 16px;
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
    transition: transform 220ms var(--ease-out);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 18px 0 50px rgba(23, 32, 51, 0.18);
  }

  .brand {
    padding: 0 4px;
  }

  .round-nav {
    display: grid;
    flex: 0 0 auto;
    overflow: visible;
  }

  .round-link {
    display: grid;
    width: 100%;
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    padding: 10px;
  }

  .round-link .round-index,
  .round-link small {
    display: block;
  }

  .round-link.active {
    background: #eef3ff;
  }

  .tournament-status {
    display: block;
    order: 2;
    width: auto;
    flex: 0 0 auto;
    margin: 0 4px;
  }

  .round-nav {
    order: 3;
  }

  .sidebar-bottom {
    display: grid;
    order: 4;
    margin-top: auto;
  }

  .side-action {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-menu {
    display: grid;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: 72px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 247, 251, 0.95);
    backdrop-filter: blur(14px);
  }

  .topbar > div:nth-child(2) {
    margin-right: auto;
  }

  .search,
  .ghost-button {
    display: none;
  }

  .content {
    padding: 16px 14px 48px;
  }

  .search-result-popover {
    top: 66px;
    right: 14px;
  }
}

@media (max-width: 640px) {
  .legacy-mode-active .topbar {
    position: sticky;
    top: 0;
    z-index: 24;
    min-height: 54px;
    padding: 7px 14px;
    background: rgba(9, 14, 22, 0.96);
    box-shadow: 0 1px 0 #202b3d;
    backdrop-filter: blur(14px);
  }

  .legacy-topbar-back {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  .legacy-topbar-back > span:first-child {
    font-size: 24px;
  }

  .legacy-back-label {
    display: none;
  }

  .legacy-landing-settings {
    grid-template-columns: 1fr;
  }

  .legacy-landing-setting:first-child {
    grid-column: auto;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .page-kicker {
    display: none;
  }

  .last-updated {
    gap: 3px;
    margin-left: 1px;
    padding-left: 8px;
    font-size: 8px;
  }

  .last-updated-date {
    display: none;
  }

  .matchup {
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    gap: 7px;
    padding: 18px 10px;
  }

  .team {
    min-height: 162px;
    padding: 12px 7px;
  }

  .flag-orb {
    width: 58px;
    height: 38px;
  }

  .team h2 {
    max-width: 105px;
    font-size: 13px;
  }

  .team .seed {
    font-size: 7px;
  }

  .score-zone {
    min-height: 135px;
    padding: 14px 2px;
  }

  .score span {
    min-width: 22px;
    font-size: 31px;
  }

  .score-zone .result-note {
    font-size: 10px;
    text-align: center;
  }

  .venue {
    display: none;
  }

  .discipline-card {
    max-width: 100px;
    overflow: hidden;
  }

  .spoiler-panel,
  .live-sim,
  .match-events {
    margin-inline: 10px;
  }

  .live-sim-head {
    align-items: stretch;
    flex-direction: column;
  }

  .live-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .live-event-feed {
    grid-template-columns: 1fr;
  }

  .live-feed-item:nth-child(n + 3) {
    display: none;
  }

  .round-board {
    padding: 16px 12px;
  }

  .fixture-grid,
  .insight-column,
  .field-list {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .board-actions {
    width: 100%;
    justify-content: space-between;
  }

  .field-team:nth-child(odd) {
    border-right: 0;
  }
}

/* Online tournament results */
.online-results {
  width: min(100%, 1040px);
  margin-inline: auto;
}

.online-results[hidden] {
  display: none;
}

.online-results-head {
  margin-bottom: 22px;
  text-align: center;
}

.online-results-head h2 {
  margin: 7px 0 8px;
  color: #f4f7fb;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05;
}

.online-results-head p {
  margin: 0;
  color: #94a2b6;
  font-size: 12px;
}

.online-results-leaders {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px 0;
  text-align: center;
}

.online-results-leaders:empty {
  display: none;
}

.online-results-leaders span,
.online-results-leaders small {
  color: #8191aa;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.online-results-leaders strong {
  color: #8facff;
  font-size: 20px;
}

.online-results-players {
  display: grid;
  gap: 10px;
}

.online-result-player {
  overflow: hidden;
  border: 1px solid #202d40;
  border-radius: 8px;
  background: #0d151f;
}

.online-result-player > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid #202d40;
  background: #111b29;
}

.online-result-player > header > span {
  color: #6789e7;
  font: 700 11px "DM Mono", monospace;
}

.online-result-player > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-result-player > header strong {
  overflow: hidden;
  color: #eef2f7;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-result-player > header small {
  color: #8290a4;
  font-size: 9px;
}

.online-result-player > header b {
  color: #8facff;
  font-size: 10px;
}

.online-result-team-list {
  display: grid;
}

.online-result-team {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 16px;
  padding: 11px 15px;
  border-bottom: 1px solid #182334;
}

.online-result-team:last-child {
  border-bottom: 0;
}

.online-result-team > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.online-result-team > div > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-result-team strong {
  overflow: hidden;
  color: #e5eaf2;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-result-team small,
.online-result-team p {
  color: #7f8da2;
  font-size: 8px;
}

.online-result-team p {
  margin: 0;
  line-height: 1.65;
  text-align: right;
}

.online-result-flag {
  width: 42px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 4px;
}

.online-results-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.online-results-actions button {
  min-width: 150px;
  min-height: 46px;
}

.online-results-waiting {
  margin: 14px 0 0;
  color: #8290a4;
  font-size: 9px;
  text-align: center;
}

.online-results-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 520px);
  margin: 0 auto 18px;
  padding: 4px;
  border: 1px solid #243248;
  border-radius: 8px;
  background: #0b121c;
}

.online-results-tabs button {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: #7f8da2;
  background: transparent;
  cursor: pointer;
  font: 800 9px "Manrope", sans-serif;
}

.online-results-tabs button.is-active {
  color: #f3f6fa;
  background: #1a2942;
}

.online-results-panel[hidden] {
  display: none;
}

.online-results-table-wrap {
  overflow-x: auto;
  border: 1px solid #202d40;
  border-radius: 8px;
  background: #0d151f;
}

.online-results-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  font-size: 10px;
  text-align: center;
}

.online-results-table th {
  height: 38px;
  padding: 0 10px;
  color: #708098;
  background: #111b29;
  font-size: 8px;
  text-transform: uppercase;
}

.online-results-table td {
  height: 50px;
  padding: 0 10px;
  border-top: 1px solid #1b2738;
  color: #bac5d4;
  font-family: "DM Mono", monospace;
}

.online-results-table th:nth-child(2),
.online-results-table td.is-player {
  width: 42%;
  text-align: left;
}

.online-results-table td.is-player {
  color: #edf2f7;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.online-results-table td.is-points {
  color: #8facff;
  font-size: 13px;
  font-weight: 800;
}

.online-result-team {
  align-items: start;
}

.online-result-score-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  grid-auto-rows: 124px;
  gap: 7px;
}

.online-result-score-card {
  display: grid;
  grid-template-rows: 27px minmax(0, 1fr) 22px;
  height: 124px;
  overflow: hidden;
  border: 1px solid #26344a;
  border-radius: 7px;
  background: #101925;
}

.online-result-score-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 27px;
  padding: 0 8px;
  border-bottom: 1px solid #202d40;
}

.online-result-score-card > header span,
.online-result-score-card > header b,
.online-result-score-card > small {
  font-size: 7px;
  font-weight: 800;
}

.online-bracket-heading {
  margin: 0 0 10px;
  color: #e8edf4;
  font-size: 14px;
}

.online-final-bracket-heading {
  margin-top: 26px;
}

.online-bracket-round-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 700px);
  margin-bottom: 12px;
  gap: 6px;
}

.online-bracket-round-tabs button {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid #243248;
  border-radius: 7px;
  color: #8190a5;
  background: #0e1722;
  cursor: pointer;
  font: 800 8px "Manrope", sans-serif;
}

.online-bracket-round-tabs button.is-active {
  border-color: #4568ad;
  color: #f0f4f9;
  background: #1a2942;
}

.online-opening-bracket {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  max-height: 62vh;
  gap: 7px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #344765 #0c141f;
}

.online-opening-bracket[hidden],
.online-results-bracket[hidden] {
  display: none;
}

.online-result-score-card > header span,
.online-result-score-card > small {
  color: #71819a;
}

.online-result-score-card > header .is-win {
  color: #59d99b;
}

.online-result-score-card > header .is-loss {
  color: #e27474;
}

.online-result-score-team {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 4px 8px;
}

.online-result-score-team strong {
  color: #b8c2d0;
  font-size: 8px;
}

.online-result-score-team b {
  color: #c8d1de;
  font: 700 10px "DM Mono", monospace;
  text-align: right;
}

.online-result-score-team.is-winner strong,
.online-result-score-team.is-winner b {
  color: #f2f5f9;
}

.online-result-score-flag {
  width: 28px;
  height: 19px;
  border-radius: 3px;
}

.online-result-score-card > small {
  display: block;
  padding: 5px 8px 7px;
  text-align: right;
}

.online-result-bye {
  align-self: center;
  color: #71819a;
  font-size: 8px;
}

.online-results-bracket {
  display: grid;
  grid-auto-columns: 220px;
  grid-auto-flow: column;
  height: min(72vh, 760px);
  gap: 12px;
  overflow: auto;
  padding: 2px 2px 12px;
  scrollbar-color: #344765 #0c141f;
}

.online-bracket-round {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.online-bracket-round h3 {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 8px;
  padding: 10px 8px;
  color: #8facff;
  background: #0b111a;
  font-size: 9px;
  text-align: center;
}

.online-bracket-round > div {
  display: grid;
  align-content: space-around;
  gap: 7px;
}

.online-bracket-match {
  overflow: hidden;
  border: 1px solid #202d40;
  border-radius: 7px;
  background: #0f1824;
}

.online-bracket-match > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 38px;
  align-items: center;
  min-height: 34px;
  gap: 7px;
  padding: 4px 8px;
}

.online-bracket-match > div.is-winner {
  background: #15233a;
}

.online-bracket-match strong {
  overflow: hidden;
  color: #9ca9ba;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-bracket-match .is-winner strong {
  color: #eaf0f7;
}

.online-bracket-match b {
  color: #dce4ee;
  font: 700 9px "DM Mono", monospace;
  text-align: right;
}

.online-bracket-flag {
  width: 30px;
  height: 20px;
  border-radius: 3px;
}

@media (max-width: 640px) {
  .online-results-head {
    text-align: left;
  }

  .online-results-leaders {
    justify-items: start;
  }

  .online-result-player > header {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .online-result-player > header b {
    grid-column: 2;
  }

  .online-result-team {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .online-result-score-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .online-result-team p {
    padding-left: 52px;
    text-align: left;
  }

  .online-results-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .online-results-actions button {
    width: 100%;
  }

  .online-bracket-round-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .online-results-table-wrap {
    overflow: hidden;
  }

  .online-results-table {
    min-width: 0;
    table-layout: fixed;
  }

  .online-results-table th,
  .online-results-table td {
    padding-inline: 4px;
  }

  .online-results-table th:first-child,
  .online-results-table td:first-child {
    width: 30px;
  }

  .online-results-table th:nth-child(2),
  .online-results-table td.is-player {
    width: 42%;
  }

  .online-results-table th:nth-child(7),
  .online-results-table td:nth-child(7),
  .online-results-table th:nth-child(8),
  .online-results-table td:nth-child(8) {
    display: none;
  }

  .online-results-table td.is-player {
    font-size: 9px;
  }

  .online-results-table td.is-points {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .online-results-table th:nth-child(5),
  .online-results-table td:nth-child(5) {
    display: none;
  }

  .online-results-table th:nth-child(2),
  .online-results-table td.is-player {
    width: 48%;
  }

  .online-bracket-round-tabs button {
    font-size: 7px;
  }
}

/* Keep the online match controls and shootout attached to the score area. */
.online-match-sidebar {
  display: grid;
  grid-column: 1;
  grid-row: 3 / span 2;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.online-match-sidebar > .online-match-stats,
.online-match-sidebar > .online-tactics {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

.online-match-sidebar > .online-match-stats {
  min-height: 0;
  align-self: start;
}

.online-match-sidebar > .online-tactics {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 0;
  border: 0;
}

.online-match-sidebar > .online-tactics[hidden] {
  display: none !important;
}

.online-match-sidebar > .online-tactics .online-tactics-copy > span,
.online-match-sidebar > .online-tactics .online-tactics-copy > strong {
  display: none;
}

.online-match-sidebar > .online-tactics .online-tactics-copy > p {
  display: block;
  margin: 0;
  color: #8b99af;
  font: 700 9px/1.3 "DM Mono", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}

.online-match-centre > .online-live-controls {
  display: flex;
  grid-column: 1;
  grid-row: auto;
  width: 164px;
  margin-top: 2px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.online-current-match > .online-penalty-control,
.online-current-match > .online-ready-panel {
  grid-column: 2 / -1;
  grid-row: 4;
  align-self: start;
  justify-self: center;
  margin: 0;
}

.online-penalty-control {
  max-width: 520px;
}

.online-penalty-scene {
  height: 178px;
}

.online-penalty-scene .penalty-goal {
  top: 19px;
  width: 224px;
  height: 96px;
}

.online-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
  transform: translate(-68px, -105px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
  transform: translate(68px, -105px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
  transform: translate(0, -85px) scale(0.7);
}

.online-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
  transform: translate(-74px, -55px) scale(0.7);
}

.online-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
  transform: translate(74px, -55px) scale(0.7);
}

@media (max-width: 900px) {
  .online-match-sidebar {
    grid-column: 1 / -1;
    grid-row: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .online-match-sidebar > .online-tactics {
    padding: 0;
    border: 1px solid #26344a;
    border-radius: 8px;
    background: #0a111b;
    overflow: hidden;
  }

  .online-match-sidebar > .online-tactics .online-tactics-copy {
    display: block;
    padding: 10px 5px;
    border-bottom: 1px solid #26344a;
    text-align: center;
  }

  .online-current-match.tactics-hidden .online-match-sidebar {
    grid-template-columns: 1fr;
  }

  .online-current-match > .online-penalty-control,
  .online-current-match > .online-ready-panel {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

@media (max-width: 640px) {
  .online-current-match.has-penalty-control .online-match-sidebar > .online-tactics {
    display: grid;
  }

  .online-match-centre > .online-live-controls {
    width: 148px;
  }

  .online-penalty-control {
    width: min(100%, 430px);
    padding-top: 4px;
    border-top: 0;
  }

  .online-penalty-scene {
    height: 150px;
  }

  .online-penalty-scene .penalty-goal {
    width: min(190px, 78vw);
    height: 82px;
  }
}

/* Keep online scores level and use conventional, unslashed numerals. */
.online-match-score {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Manrope, system-ui, sans-serif;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .online-match-sidebar > .online-tactics {
    grid-column: 1;
  }

  .online-match-sidebar > .online-match-stats {
    grid-column: 2;
  }

  .online-current-match.tactics-hidden .online-match-sidebar > .online-match-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .online-round-matches.is-all-matches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .online-round-matches.is-all-matches .online-centre-match {
    gap: 7px;
    padding: 11px 9px;
  }

  .online-round-matches.is-all-matches .online-centre-head {
    align-items: flex-start;
    gap: 5px;
    font-size: 9px;
  }

  .online-round-matches.is-all-matches .online-centre-head small {
    max-width: 58px;
    font-size: 7px;
    text-align: right;
    white-space: normal;
  }

  .online-round-matches.is-all-matches .online-centre-team {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .online-round-matches.is-all-matches .online-centre-flag.country-flag {
    width: 34px;
    height: 23px;
  }

  .online-round-matches.is-all-matches .online-centre-team strong {
    font-size: 10px;
  }

  .online-round-matches.is-all-matches .online-centre-team b {
    max-width: 30px;
    font-size: 12px;
  }
}

/* Unified live and full-time timeline */
.team .seed,
.discipline {
  display: none;
}

.team h2 {
  max-width: 290px;
  margin-top: 19px;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -1.25px;
}

.match-events {
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto) minmax(0, 1fr);
  align-items: center;
  min-height: 126px;
  gap: 22px;
  padding: 22px 26px;
}

.event-side {
  min-width: 0;
  gap: 11px;
}

.event-centre {
  display: grid;
  min-width: 118px;
  justify-items: center;
  gap: 9px;
}

.event-outcome {
  margin: 0;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  color: #8fa1c6;
  background: #17202e;
}

.event-outcome.live {
  color: #83a4ff;
  background: #17233b;
}

.event-live-clock {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.event-live-clock[hidden],
.score-live-controls[hidden],
.event-outcome[hidden] {
  display: none;
}

.event-live-clock > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7fa2ff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}

.event-live-clock > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ee4d43;
}

.event-live-clock strong {
  color: #f2f5f9;
  font-family: "DM Mono", monospace;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1;
  white-space: nowrap;
}

.event-live-clock small {
  color: #6f7c90;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.score-live-controls {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.score-live-controls .live-control {
  min-height: 26px;
  min-width: 44px;
  padding-inline: 6px;
  font-size: 10px;
  white-space: nowrap;
}

.score-zone .score-live-clock {
  min-height: 38px;
  margin-bottom: 2px;
}

.score-zone .score-live-clock strong {
  font-size: 24px;
}

.team-score {
  margin-top: 10px;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -3px;
  transition:
    color 160ms ease,
    transform 160ms var(--ease-out);
}

.team-score.score-pop {
  color: #78a0ff;
  transform: scale(1.12);
}

.score-separator {
  color: #657185;
  font-family: "DM Mono", monospace;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.pause-control {
  gap: 5px;
}

.timeline-event {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #c7d0df;
  font-size: clamp(10px, 1vw, 13px);
}

.timeline-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-event b {
  flex: 0 0 auto;
  color: #6f98ff;
}

.event-side.away .timeline-event {
  justify-content: flex-end;
}

.event-enter {
  animation: timeline-event-in 220ms var(--ease-out) both;
}

@keyframes timeline-event-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 640px) {
  .team h2 {
    max-width: 120px;
    margin-top: 14px;
    font-size: clamp(17px, 5vw, 23px);
    letter-spacing: -0.8px;
  }

  .match-events {
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
    gap: 7px;
    min-height: 105px;
    padding: 15px 9px;
  }

  .event-centre {
    min-width: 78px;
  }

  .event-live-clock strong,
  .score-zone .score-live-clock strong {
    font-size: clamp(13px, 3.6vw, 15px);
    letter-spacing: -0.7px;
  }

  .timeline-event {
    gap: 4px;
    font-size: 8px;
  }
}

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

/* Clean dark theme */
.sidebar {
  background: rgba(14, 19, 28, 0.96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.015);
}

/* France 1998 final cascade lock: prevents later shared retro palettes leaking in. */
body.retro-mode-active.retro-1998-active {
  color: #f7faff !important;
  background-color: #020d29;
  background-image: url("./assets/retro-1998/france-98-bg-desktop.png");
}

body.retro-mode-active.retro-1998-active :is(
  .retro-tournament-screen, #mainContent, .app-shell, .match-screen
) { color: #f7faff; }

body.retro-mode-active.retro-1998-active :is(
  .retro-group-table, .retro-fixture, .retro-match-stage, .retro-golden-boot,
  .retro-active-fixtures, .retro-squad-view, .retro-lineups-view, .retro-manager-lineup,
  #mainContent .panel, #mainContent .fixture-card, #mainContent .match-card,
  #mainContent .round-board, #mainContent .match-stage, #mainContent .match-analysis,
  #mainContent .penalty-stage, #mainContent .match-penalty-overlay,
  #mainContent .champion-stage, .retro-champion, .modal, .confirm-modal, .snapshot-modal
) {
  border-color: rgba(220, 229, 239, 0.58);
  color: #f7faff;
  background-color: #041c4b;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.15), transparent 24%), linear-gradient(180deg, rgba(31, 69, 126, 0.92), rgba(4, 25, 67, 0.96));
}

body.retro-mode-active.retro-1998-active :is(.primary-button, #mainContent .primary-button, .snapshot-actions button) {
  border-color: #dce5ef;
  color: #ffffff;
  background: linear-gradient(180deg, #2c69c3 0%, #0b3f96 48%, #052964 51%, #082f73 100%);
}

body.retro-mode-active.retro-1998-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button,
body.retro-mode-active.retro-1998-active #mainContent :is(.shootout-summary-row i, .penalty-score-dot, .kick-result-marker) {
  border-radius: 50% !important;
}

body.retro-mode-active.retro-1998-active #mainContent :is(.bracket-connector::before, .bracket-connector::after, .bracket-line) {
  border-color: rgba(220, 229, 239, 0.68);
  background: rgba(220, 229, 239, 0.68);
}

body.retro-mode-active.retro-1998-active #mainContent :is(.bracket-card, .bracket-match, .third-place-card) {
  border-color: rgba(220, 229, 239, 0.58);
  background: linear-gradient(160deg, rgba(52, 96, 158, 0.94), rgba(4, 28, 75, 0.97));
}

@media (max-width: 720px) {
  body.retro-mode-active.retro-1998-active {
    background-image: url("./assets/retro-1998/france-98-bg-portrait.png");
  }
}

/* France 1998 release polish: keep this at the end of the stylesheet so the
   shared Brazil-era tournament widgets cannot leak their geometry or colour. */
body.retro-mode-active.retro-1998-active .retro-tournament-heading {
  display: block !important;
  min-height: 112px !important;
  height: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
body.retro-mode-active.retro-1998-active .retro-tournament-heading > * {
  display: none !important;
}
body.retro-mode-active.retro-1998-active .retro-tournament-heading::before,
body.retro-mode-active.retro-1998-active .retro-tournament-heading::after {
  content: none !important;
  display: none !important;
}

body.retro-mode-active.retro-1998-active #mainContent .retro-scorers,
body.retro-mode-active.retro-1998-active #mainContent .retro-no-scorers,
body.retro-mode-active.retro-1998-active #mainContent :is(.team-match-events, .event-side) {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--r98-cream) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent .retro-scorers {
  padding: 0 !important;
}
body.retro-mode-active.retro-1998-active #mainContent .retro-scorers :is(span, b) {
  border: 0 !important;
  color: var(--r98-cream) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active #mainContent .team-filter-control .search-result-popover,
body.retro-mode-active.retro-1998-active #mainContent .round-board .search-result-popover {
  border: 1px solid rgba(226,229,191,.62) !important;
  border-radius: 4px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(180deg, rgba(70,94,72,.98), rgba(24,45,32,.99)) !important;
  box-shadow: 0 14px 30px rgba(18,29,20,.44) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .search-result-popover :is(button, .search-result) {
  border-color: rgba(226,229,191,.24) !important;
  border-radius: 2px !important;
  color: var(--r98-cream) !important;
  background: rgba(32,55,38,.92) !important;
  box-shadow: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent .search-result-popover :is(button, .search-result):is(:hover, :focus-visible, .selected) {
  color: #fff !important;
  background: linear-gradient(90deg, var(--r98-burgundy), var(--r98-pink)) !important;
}

body.retro-mode-active.retro-1998-active #mainContent .standard-match-tactics {
  border: 1px solid rgba(226,229,191,.58) !important;
  border-radius: 5px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(150deg, rgba(104,129,99,.96), rgba(31,56,39,.98) 64%, rgba(95,51,76,.82)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 8px 10px 0 rgba(31,63,105,.22) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .standard-match-tactics > span {
  border-color: rgba(226,229,191,.38) !important;
  color: var(--r98-cream) !important;
  background: rgba(24,45,32,.8) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .standard-tactic-buttons {
  border: 1px solid rgba(226,229,191,.34) !important;
  border-radius: 3px !important;
  background: rgba(24,45,32,.68) !important;
  box-shadow: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent .standard-tactic-buttons button {
  border: 1px solid rgba(226,229,191,.28) !important;
  border-radius: 2px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(180deg, #668268, #314f3a) !important;
  box-shadow: none !important;
  clip-path: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent .standard-tactic-buttons button:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #7f987b, #48634d) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .standard-tactic-buttons button.active {
  border-color: rgba(255,236,225,.8) !important;
  color: #fff !important;
  background: linear-gradient(180deg, #e24872, var(--r98-pink)) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .standard-match-tactics > small {
  border-color: rgba(226,229,191,.3) !important;
  color: var(--r98-muted) !important;
  background: rgba(95,51,76,.44) !important;
}

body.retro-mode-active.retro-1998-active #mainContent :is(.match-commentary-view, .match-commentary-feed, .commentary-bar, .commentary-feed, .live-commentary, .match-commentary) {
  border-color: rgba(226,229,191,.48) !important;
  border-radius: 4px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(90deg, rgba(24,45,32,.97), rgba(95,51,76,.86)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .match-commentary-feed .commentary-line {
  border-color: rgba(226,229,191,.22) !important;
  color: var(--r98-cream) !important;
  background: rgba(32,55,38,.76) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .match-commentary-feed .commentary-line span {
  color: var(--r98-cream) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .match-commentary-feed.is-major,
body.retro-mode-active.retro-1998-active #mainContent .match-commentary-feed.is-goal {
  border-color: rgba(244,244,223,.72) !important;
  background: linear-gradient(90deg, var(--r98-burgundy), #8c3556) !important;
}

body.retro-mode-active.retro-1998-active #mainContent :is(.penalty-stage, .match-penalty-overlay) {
  border: 1px solid rgba(226,229,191,.62) !important;
  border-radius: 6px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(150deg, rgba(101,128,99,.96), rgba(24,45,32,.98) 68%, rgba(95,51,76,.72)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 15px 34px rgba(18,29,20,.35) !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(.penalty-scene, .match-penalty-scene, .standard-penalty-scene, .retro-manager-pitch, .lineup-pitch, .match-2d-pitch) {
  border-color: rgba(244,244,223,.72) !important;
  border-radius: 4px !important;
  background-color: #31583e !important;
  background-image:
    linear-gradient(rgba(244,244,223,.11), rgba(244,244,223,.03)),
    repeating-linear-gradient(90deg, #31583e 0 12.5%, #3f6949 12.5% 25%) !important;
  box-shadow: inset 0 0 0 1px rgba(244,244,223,.12), inset 0 18px 28px rgba(255,255,255,.06) !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(.penalty-goal, .penalty-net, .retro-pitch-halfway, .retro-pitch-circle, .match-2d-halfway, .match-2d-circle, .match-2d-box) {
  border-color: rgba(244,244,223,.72) !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 2px solid var(--r98-cream) !important;
  border-radius: 50% !important;
  background: rgba(217,55,99,.18) !important;
  box-shadow: 0 0 0 4px rgba(244,244,223,.08) !important;
  clip-path: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(.penalty-marks i, .shootout-summary-row i, .penalty-score-dot, .kick-result-marker) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
}

body.retro-mode-active.retro-1998-active .snapshot-modal,
body.retro-mode-active.retro-1998-active .snapshot-modal form {
  border-color: rgba(226,229,191,.66) !important;
  border-radius: 6px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(145deg, rgba(112,141,106,.98), rgba(24,45,32,.99) 66%, rgba(95,51,76,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.34), 0 28px 68px rgba(18,29,20,.58) !important;
}
body.retro-mode-active.retro-1998-active .snapshot-modal :is(.snapshot-modal-head, .snapshot-preview) {
  border-color: rgba(226,229,191,.48) !important;
  border-radius: 4px !important;
  color: var(--r98-cream) !important;
  background: rgba(24,45,32,.84) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
}
body.retro-mode-active.retro-1998-active .snapshot-modal :is(h2, .section-kicker) { color: var(--r98-cream) !important; }
body.retro-mode-active.retro-1998-active .snapshot-modal .snapshot-actions button,
body.retro-mode-active.retro-1998-active .snapshot-modal .close-modal {
  border-radius: 3px !important;
  clip-path: none !important;
}

body.retro-mode-active.retro-1998-active #mainContent .champion-stage {
  border: 1px solid rgba(226,229,191,.68) !important;
  border-radius: 6px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(145deg, rgba(122,148,116,.97), rgba(35,61,42,.98) 54%, rgba(95,51,76,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 18px 44px rgba(18,29,20,.42) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .champion-stage :is(.champion-content, .champion-podium, .champion-award, .champion-extra-awards > *, .prediction-result) {
  border-color: rgba(226,229,191,.44) !important;
  border-radius: 4px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(150deg, rgba(76,106,79,.88), rgba(24,45,32,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .champion-stage :is(h2, .trophy, .champion-award strong, .champion-award span) {
  color: var(--r98-cream) !important;
}
body.retro-mode-active.retro-1998-active #mainContent .champion-stage :is(p, small) { color: var(--r98-muted) !important; }
body.retro-mode-active.retro-1998-active #mainContent .champion-stage .champion-award-mark { color: var(--r98-pink) !important; }

body.retro-mode-active.retro-1998-active #mainContent :is(.round-heading, .round-title, .bracket-round-heading, .bracket-round-title, .bracket-round-header, .bracket-header, .bracket-column > h3) {
  border-color: rgba(226,229,191,.48) !important;
  border-radius: 0 !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(90deg, #314f3a, var(--r98-burgundy) 78%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(.bracket-card, .bracket-match, .third-place-card) {
  border-radius: 4px !important;
  color: var(--r98-cream) !important;
  background: linear-gradient(150deg, rgba(92,119,91,.94), rgba(24,45,32,.98)) !important;
}

body.retro-mode-active.retro-1998-active :is(
  .retro-screen-back, .retro-screen-restart, .retro-screen-action, .retro-back-to-modes,
  .utility-button, .retro-view-tabs button, #mainContent button, .snapshot-modal button,
  .confirm-modal button, .champion-actions button
) {
  border-radius: 3px !important;
  clip-path: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(
  .retro-view-tabs, .match-analysis, .round-board, .stage-column, .match-stage,
  .fixture-grid, .retro-manager-lineup, .retro-match-lineups-panel
) {
  border-radius: 6px !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(
  .retro-view-tabs, .match-analysis, .round-board, .stage-column, .match-stage,
  .fixture-grid, .standard-match-tactics
)::before,
body.retro-mode-active.retro-1998-active #mainContent :is(
  .retro-view-tabs, .match-analysis, .round-board, .stage-column, .match-stage,
  .fixture-grid, .standard-match-tactics
)::after {
  content: none !important;
  display: none !important;
}
body.retro-mode-active.retro-1998-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button,
body.retro-mode-active.retro-1998-active #mainContent :is(.penalty-marks i, .shootout-summary-row i, .penalty-score-dot, .kick-result-marker) {
  border-radius: 50% !important;
}

@media (max-width: 720px) {
  body.retro-mode-active.retro-1998-active .retro-tournament-heading {
    min-height: 84px !important;
    height: 84px !important;
    margin: 0 !important;
  }
  body.retro-mode-active.retro-1998-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

.brand-mark {
  background: #5f8cff;
}

.brand-copy small,
.team .seed,
.venue,
.result-note,
.score small,
.live-clock-block small,
.fixture-meta,
.search-result small,
.champion-stage p {
  color: #7f8a9d;
}

.eyebrow-row {
  color: #7f8a9d;
}

.eyebrow-row span:last-child,
.page-kicker,
.section-kicker,
.live-clock-block > span,
.feed-minute,
.event b,
.event-side.away .event b,
.panel-heading span,
.text-button.active,
.trophy {
  color: #78a0ff;
}

.progress-track {
  background: #232b38;
}

.progress-track span {
  background: #5f8cff;
}

.round-link {
  color: #788396;
}

.round-link.active {
  color: #a9c0ff;
  background: #17233b;
}

.round-link.complete {
  color: #62b888;
}

.side-action {
  color: #9aa5b6;
}

.side-icon {
  color: #78a0ff;
}

.topbar h1,
.section-heading h3,
.panel-heading strong,
.fixture-team.winner,
.fixture-team b,
.team h2,
.score span,
.live-clock-block strong,
.plot-item strong,
.search-result,
.champion-stage {
  color: var(--text);
}

.search,
.icon-button {
  border-color: #2a3443;
  color: #a6b0bf;
  background: #111722;
}

.search:focus-within {
  border-color: #5f8cff;
  background: #111722;
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.11);
}

.search input {
  color: var(--text);
}

.search input::placeholder {
  color: #687386;
}

.ghost-button {
  border-color: #354258;
  color: #eef3ff;
  background: #202a3a;
}

.match-stage,
.round-board,
.panel {
  border-color: #252e3b;
  background: #111722;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.stage-topline,
.panel-heading {
  border-bottom-color: #252e3b;
}

.live-label {
  color: #aab4c4;
}

.live-label span {
  background: #5f8cff;
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.12);
}

.team {
  border-color: #283241;
  color: var(--text);
  background: #151c28;
}

.flag-orb,
.country-flag {
  border-color: #343f4f;
  background: #202938;
}

.flag-orb {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.rating i {
  background: #303a49;
}

.rating i.on {
  background: #5f8cff;
}

.score span.score-pop {
  color: #78a0ff;
}

.primary-button {
  background: #5f8cff;
}

.spoiler-panel {
  border-color: #2f4168;
  color: var(--text);
  background: #17233b;
}

.spoiler-panel p {
  color: #9aa6b9;
}

.spoiler-icon {
  color: #9db6ff;
  background: #24345a;
}

.live-sim {
  border-color: #293547;
  background: #101722;
}

.live-sim-head {
  border-bottom-color: #273142;
}

.live-control {
  border-color: #303b4b;
  color: #aab5c5;
  background: #171f2c;
}

.skip-control {
  border-color: #5f8cff;
  color: #fff;
  background: #5f8cff;
}

.live-feed-item {
  border-color: #293342;
  color: var(--text);
  background: #171f2c;
}

.live-feed-item:nth-child(n + 3) {
  color: #96a1b2;
  background: #131a25;
}

.live-feed-item small,
.live-feed-item:nth-child(n + 3) small {
  color: #7f8a9d;
}

.live-feed-flag,
.fixture-flag,
.queue-flag,
.search-flag,
.field-flag-art {
  border-color: rgba(255, 255, 255, 0.16);
}

.match-stage.is-live {
  border-color: #496fca;
  box-shadow: 0 8px 30px rgba(36, 78, 181, 0.15);
}

.match-events {
  border-color: #283241;
  color: var(--text);
  background: #131a25;
}

.event {
  color: #aab4c3;
}

.event-outcome {
  border-color: #303a49;
  color: #929daf;
  background: #171f2c;
}

.text-button {
  color: #8b96a8;
}

.secondary-button {
  border-color: #5f8cff;
  color: #8eabff;
  background: transparent;
}

.fixture {
  border-color: #283241;
  color: #a9b3c2;
  background: #151c28;
}

.fixture.selected {
  border-color: #557edc;
  background: #17233b;
  box-shadow: 0 0 0 2px rgba(95, 140, 255, 0.08);
}

.fixture.complete {
  background: #131a24;
}

.fixture-team,
.queue-team {
  color: #a9b3c2;
}

.load-more {
  border-color: #303a49;
  color: #909bad;
  background: #141b26;
}

.queue-item {
  border-bottom-color: #252e3b;
}

.queue-item.current {
  background: #17233b;
}

.queue-item.current .queue-number {
  color: #78a0ff;
}

.plot-item {
  border-bottom-color: #252e3b;
}

.plot-icon {
  color: #8eabff;
  background: #1b2945;
}

.plot-item p,
.empty-story,
.empty-story p {
  color: #7f8a9d;
}

.modal,
.confirm-modal {
  border-color: #303a49;
  color: var(--text);
  background: #111722;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

.modal::backdrop,
.confirm-modal::backdrop {
  background: rgba(3, 6, 11, 0.72);
}

.simulate-confirm-icon {
  color: #8aabff;
  background: rgba(95, 140, 255, 0.12);
  font-size: 14px;
}

#simulateRoundModal h2 {
  line-height: 1.3;
}

#simulateRoundModal .confirm-actions {
  margin-top: 24px;
}

@media (max-width: 480px) {
  #simulateRoundModal .confirm-actions {
    margin-top: 20px;
  }
}

/* UEFA Euro 2016: deep-blue broadcast panels, cyan ribbons and yellow match accents. */
.mode-card-retro[data-retro-competition="euros"] {
  --retro-accent: #19c9ef;
  --retro-accent-text: #031b53;
  overflow: hidden;
  border-color: rgba(70, 211, 246, 0.42);
  background:
    radial-gradient(circle at 82% 20%, rgba(104, 220, 255, 0.24), transparent 30%),
    radial-gradient(circle at 18% 92%, rgba(0, 72, 178, 0.54), transparent 36%),
    repeating-radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 19px),
    linear-gradient(135deg, #031747 0%, #064d9b 54%, #12a9d6 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 22px 56px rgba(0, 34, 94, 0.34);
}

.mode-card-retro[data-retro-competition="euros"] :is(h3, .landing-setting-heading > span, .landing-team-setting > span) {
  color: #ffffff;
}

.mode-card-retro[data-retro-competition="euros"] :is(.retro-competition-switch, .retro-year-switch, .landing-segmented) {
  border-color: rgba(150, 231, 255, 0.34);
  background: rgba(2, 24, 72, 0.56);
}

.mode-card-retro[data-retro-competition="euros"] :is(.retro-competition-switch button, .retro-year-switch button, .landing-segmented button) {
  color: #bdeeff;
}

.mode-card-retro[data-retro-competition="euros"] :is(.retro-competition-switch button.active, .retro-year-switch button.active, .landing-segmented button.active) {
  color: #031b53;
  background: #80e6ff;
}

.mode-card-retro[data-retro-competition="euros"] .retro-team-picker {
  border-color: rgba(150, 231, 255, 0.42);
  background: rgba(2, 23, 70, 0.7);
}

/* Euro 2016 final colour lock: keep cyan accents without overriding menu geometry. */
.mode-card-retro[data-retro-competition="euros"] .retro-start-button {
  border-color: #ffe14d;
  color: #062052;
  background: #ffe14d;
  box-shadow: 0 8px 0 rgba(2, 24, 70, 0.42);
}

html.route-retro-loading:has(body.retro-euro-2016-active) body,
body.retro-mode-active.retro-euro-2016-active {
  --e16-deep: #020d32;
  --e16-navy: #031b53;
  --e16-blue: #0756aa;
  --e16-blue-bright: #078ad0;
  --e16-cyan: #1cc7ee;
  --e16-sky: #92ebff;
  --e16-yellow: #ffdc38;
  --e16-white: #f8fdff;
  --e16-muted: #a9d7ea;
  --e16-line: rgba(111, 220, 249, 0.38);
  --e16-line-soft: rgba(159, 228, 250, 0.18);
  --e16-panel: rgba(3, 31, 88, 0.94);
  --e16-panel-soft: rgba(5, 58, 125, 0.9);
  --q22-ink: #020d32;
  --q22-ink-soft: #031b53;
  --q22-panel: rgba(3, 31, 88, 0.96);
  --q22-panel-soft: rgba(5, 58, 125, 0.94);
  --q22-wine: #0756aa;
  --q22-wine-bright: #078ad0;
  --q22-line: rgba(111, 220, 249, 0.42);
  --q22-line-soft: rgba(159, 228, 250, 0.2);
  --q22-cream: #dff8ff;
  --q22-white: #f8fdff;
  --q22-gold: #1cc7ee;
  --q22-gold-soft: #92ebff;
  color: var(--e16-white);
  background:
    radial-gradient(circle at 84% 8%, rgba(98, 219, 255, 0.35), transparent 28%),
    radial-gradient(circle at 14% 88%, rgba(0, 91, 196, 0.45), transparent 34%),
    repeating-radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #020c2d 0%, #043878 48%, #078fc4 100%) fixed;
  scrollbar-color: var(--e16-cyan) var(--e16-deep);
}

.retro-euro-2016-active *,
.retro-euro-2016-active *::before,
.retro-euro-2016-active *::after {
  scrollbar-color: var(--e16-cyan) var(--e16-deep);
}

.retro-euro-2016-active .retro-tournament-screen {
  min-height: 100vh;
  color: var(--e16-white);
  background:
    linear-gradient(rgba(2, 19, 64, 0.24), rgba(1, 10, 38, 0.55)),
    radial-gradient(circle at 12% 22%, rgba(38, 201, 239, 0.16) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 72%, rgba(255, 220, 56, 0.12) 0 5px, transparent 6px);
  background-size: auto, 72px 72px, 94px 94px;
}

.retro-euro-2016-active .retro-screen-header {
  border: 0;
  border-bottom: 1px solid var(--e16-line);
  color: var(--e16-white);
  background: rgba(2, 17, 58, 0.92);
  box-shadow: 0 16px 38px rgba(0, 8, 37, 0.34);
  backdrop-filter: blur(18px);
}

.retro-euro-2016-active .retro-screen-brand .brand-mark {
  border: 1px solid var(--e16-cyan);
  border-radius: 14px;
  color: var(--e16-navy);
  background: linear-gradient(145deg, #ffffff, #9beaff);
  box-shadow: 0 0 0 4px rgba(28, 199, 238, 0.12);
}

.retro-euro-2016-active :is(.retro-screen-restart, .retro-screen-action, .retro-back-to-modes) {
  border: 1px solid transparent;
  border-radius: 10px;
  color: #d7f7ff;
  background: rgba(6, 72, 143, 0.2);
}

.retro-euro-2016-active :is(.retro-screen-restart, .retro-screen-action, .retro-back-to-modes):hover {
  border-color: var(--e16-cyan);
  color: var(--e16-navy);
  background: var(--e16-sky);
  transform: translateY(-1px);
}

.retro-euro-2016-active #retroDonateButton {
  border-color: rgba(255, 220, 56, 0.6);
  color: var(--e16-yellow);
  background: rgba(255, 220, 56, 0.08);
}

.retro-euro-2016-active .retro-tournament-main {
  width: min(1540px, calc(100% - 42px));
}

.retro-euro-2016-active .retro-tournament-heading {
  position: relative;
  min-height: 122px;
  padding: 22px 180px 24px 0;
  border-bottom: 1px solid var(--e16-line);
}

.retro-euro-2016-active .retro-tournament-heading::after {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 142px;
  height: 112px;
  background: url("./assets/ui/euro-2016-logo.webp") center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 10, 47, 0.34));
  content: "";
}

.retro-euro-2016-active .retro-tournament-heading > div:first-child > span,
.retro-euro-2016-active .retro-tournament-progress span {
  color: var(--e16-yellow);
  font-family: "DM Mono", monospace;
  letter-spacing: 0.12em;
}

.retro-euro-2016-active .retro-tournament-heading h1,
.retro-euro-2016-active .retro-tournament-progress strong {
  color: var(--e16-white);
  letter-spacing: -0.03em;
  text-shadow: 0 4px 22px rgba(0, 9, 46, 0.46);
}

.retro-euro-2016-active .retro-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 5px;
  border: 1px solid var(--e16-line);
  border-radius: 16px;
  background: rgba(2, 19, 64, 0.76);
  box-shadow: 0 14px 30px rgba(0, 10, 45, 0.22);
}

.retro-euro-2016-active .retro-view-tabs::before {
  display: none;
}

.retro-euro-2016-active .retro-view-tabs button {
  min-height: 50px;
  border: 0;
  border-radius: 11px;
  color: var(--e16-muted);
  background: transparent;
}

.retro-euro-2016-active .retro-view-tabs button:hover:not(.active) {
  color: var(--e16-white);
  background: rgba(12, 114, 191, 0.42);
}

.retro-euro-2016-active .retro-view-tabs button.active {
  color: var(--e16-navy);
  background: linear-gradient(135deg, #b9f3ff, #45d0ef);
  box-shadow: inset 0 -3px #0874bc, 0 5px 14px rgba(0, 14, 62, 0.22);
}

.retro-euro-2016-active #mainContent {
  color: var(--e16-white);
}

.retro-euro-2016-active #mainContent :is(
  .match-stage,
  .round-board,
  .panel,
  .match-analysis,
  .standard-match-tactics,
  .story-card
),
.retro-euro-2016-active :is(
  .retro-group-table,
  .retro-squad-view,
  .retro-lineups-view,
  .retro-match-lineups-panel,
  .retro-lineup-side,
  .retro-squad-position-group,
  .retro-lineup-tabs,
  .retro-manager-lineup,
  .retro-live-ratings-side
) {
  border: 1px solid var(--e16-line);
  border-radius: 16px;
  color: var(--e16-white);
  background:
    linear-gradient(145deg, rgba(8, 75, 151, 0.36), transparent 44%),
    var(--e16-panel);
  box-shadow: 0 16px 34px rgba(0, 9, 43, 0.3), inset 0 1px rgba(255, 255, 255, 0.045);
}

.retro-euro-2016-active #mainContent :is(.match-stage, .round-board, .match-analysis)::before {
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--e16-yellow), var(--e16-cyan), transparent 82%);
}

.retro-euro-2016-active #mainContent :is(
  .stage-round,
  .panel-heading h2,
  .panel-heading span,
  .match-analysis-heading,
  .section-heading h2,
  .live-clock,
  .event-live-clock strong
) {
  color: var(--e16-sky);
}

.retro-euro-2016-active #mainContent :is(
  .team-name,
  .match-score,
  .score-separator,
  .champion-stage h2,
  .golden-boot-player strong,
  .match-stat-row b
) {
  color: var(--e16-white);
}

.retro-euro-2016-active #mainContent :is(
  .primary-button,
  .play-button,
  .secondary-button,
  .live-control,
  .snapshot-trigger
) {
  border: 1px solid var(--e16-yellow);
  border-radius: 10px;
  color: var(--e16-navy);
  background: var(--e16-yellow);
  box-shadow: 0 6px 0 rgba(0, 13, 55, 0.42);
}

.retro-euro-2016-active #mainContent :is(
  .primary-button,
  .play-button,
  .secondary-button,
  .live-control,
  .snapshot-trigger
):hover {
  border-color: var(--e16-sky);
  background: var(--e16-sky);
  transform: translateY(-1px);
}

.retro-euro-2016-active #mainContent :is(
  .text-button,
  .history-round-button,
  #newerRoundButton,
  .team-filter-chip,
  .team-filter-search,
  .team-filter-control
) {
  border: 1px solid var(--e16-line);
  border-radius: 10px;
  color: #d8f7ff;
  background: rgba(3, 29, 81, 0.88);
  box-shadow: none;
}

.retro-euro-2016-active #mainContent .fixture {
  border: 1px solid var(--e16-line-soft);
  border-radius: 12px;
  color: #e6faff;
  background: rgba(4, 43, 104, 0.9);
  box-shadow: none;
}

.retro-euro-2016-active #mainContent .fixture:nth-child(even) {
  background: rgba(5, 61, 128, 0.88);
}

.retro-euro-2016-active #mainContent .fixture:hover,
.retro-euro-2016-active #mainContent .fixture.selected {
  border-color: var(--e16-cyan);
  background: rgba(7, 96, 177, 0.96);
  box-shadow: inset 5px 0 var(--e16-yellow), 0 10px 22px rgba(0, 13, 55, 0.22);
  transform: translateY(-1px);
}

.retro-euro-2016-active #mainContent :is(
  .fixture-card-head,
  .retro-fixture-details,
  .match-stats-grid span,
  .golden-boot-player small,
  .plot-list p,
  .story-card p
),
.retro-euro-2016-active .retro-squad-row small {
  color: var(--e16-muted);
}

.retro-euro-2016-active #mainContent :is(.bracket-heads, .retro-table-head, .retro-table-head b) {
  color: var(--e16-yellow);
}

.retro-euro-2016-active #mainContent :is(
  .bracket-connector::before,
  .bracket-connector::after,
  .bracket-fixture[data-connects="true"]::after
) {
  border-color: rgba(80, 211, 241, 0.64);
}

.retro-euro-2016-active #mainContent :is(.match-commentary-feed, .match-highlight-mode) {
  border: 1px solid var(--e16-line);
  border-radius: 12px;
  color: var(--e16-white);
  background: rgba(2, 20, 63, 0.94);
}

.retro-euro-2016-active #mainContent :is(.match-2d-pitch, .match-penalty-scene, .standard-penalty-scene),
.retro-euro-2016-active .retro-manager-pitch {
  border: 1px solid rgba(192, 247, 255, 0.72);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0, 41, 91, 0.14), rgba(0, 20, 54, 0.28)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, rgba(0, 0, 0, 0.035) 12.5% 25%),
    #168675;
  box-shadow: inset 0 0 42px rgba(0, 28, 54, 0.36);
}

.retro-euro-2016-active #mainContent .standard-tactic-buttons {
  border: 1px solid var(--e16-line);
  border-radius: 10px;
  background: rgba(2, 20, 63, 0.72);
}

.retro-euro-2016-active #mainContent .standard-tactic-buttons button {
  color: var(--e16-muted);
  background: transparent;
}

.retro-euro-2016-active #mainContent .standard-tactic-buttons button.active {
  color: var(--e16-navy);
  background: var(--e16-sky);
  box-shadow: inset 4px 0 var(--e16-yellow);
}

.retro-euro-2016-active :is(.retro-table-head, .retro-squad-heading, .retro-squad-position-group > h2, .retro-lineup-side header),
.retro-euro-2016-active #mainContent :is(.panel-heading, .match-analysis-heading, .standard-match-tactics > span) {
  border-color: var(--e16-line);
  color: var(--e16-sky);
  background: linear-gradient(90deg, rgba(7, 88, 167, 0.94), rgba(4, 50, 116, 0.94));
}

.retro-euro-2016-active :is(.retro-table-row, .retro-squad-row, .retro-lineup-side li) {
  border-color: var(--e16-line-soft);
  color: #e7faff;
  background: rgba(3, 37, 94, 0.94);
}

.retro-euro-2016-active :is(.retro-table-row, .retro-squad-row, .retro-lineup-side li):nth-child(even) {
  background: rgba(5, 61, 128, 0.84);
}

.retro-euro-2016-active .retro-table-row.qualified {
  box-shadow: inset 4px 0 var(--e16-cyan);
}

.retro-euro-2016-active .retro-table-row.best-third {
  box-shadow: inset 4px 0 var(--e16-yellow);
}

.retro-euro-2016-active :is(.retro-squad-heading select, #mainContent input, #mainContent select, [data-retro-manager-formation]) {
  border: 1px solid var(--e16-line);
  border-radius: 9px;
  color: var(--e16-white);
  background: var(--e16-deep);
}

.retro-euro-2016-active .retro-squad-number,
.retro-euro-2016-active .retro-manager-player b,
.retro-euro-2016-active .retro-manager-section-title span {
  color: var(--e16-yellow);
}

.retro-euro-2016-active .retro-squad-heading em {
  color: var(--e16-sky);
  font: 700 10px "DM Mono", monospace;
}

.retro-euro-2016-active .retro-squad-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  margin: 0 0 16px;
}

.retro-euro-2016-active :is(.retro-team-rating-card, .retro-squad-xi-card) {
  overflow: hidden;
  border: 1px solid var(--e16-line);
  border-radius: 14px;
  background: rgba(3, 30, 86, 0.94);
}

.retro-euro-2016-active :is(.retro-team-rating-card, .retro-squad-xi-card) > header {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--e16-line);
  color: var(--e16-white);
  background: linear-gradient(90deg, #0757a9, #057ebd);
}

.retro-euro-2016-active :is(.retro-team-rating-card, .retro-squad-xi-card) > header span {
  color: var(--e16-sky);
  font: 800 10px "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retro-euro-2016-active :is(.retro-team-rating-card, .retro-squad-xi-card) > header strong {
  color: var(--e16-yellow);
  font-size: 22px;
}

.retro-euro-2016-active .retro-team-rating-card > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--e16-line-soft);
}

.retro-euro-2016-active .retro-team-rating-card > div > span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(3, 35, 92, 0.98);
}

.retro-euro-2016-active .retro-team-rating-card small {
  color: var(--e16-muted);
  font-size: 9px;
}

.retro-euro-2016-active .retro-team-rating-card b {
  color: var(--e16-white);
  font: 800 12px "DM Mono", monospace;
}

.retro-euro-2016-active .retro-squad-xi-card ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 8px;
  list-style: none;
}

.retro-euro-2016-active .retro-squad-xi-card li {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr) 34px 28px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 7px;
  border-bottom: 1px solid var(--e16-line-soft);
  color: var(--e16-white);
}

.retro-euro-2016-active .retro-squad-xi-card li b,
.retro-euro-2016-active .retro-squad-xi-card li i {
  color: var(--e16-yellow);
  font: 800 9px "DM Mono", monospace;
}

.retro-euro-2016-active .retro-squad-xi-card li span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-euro-2016-active .retro-squad-xi-card li em {
  color: var(--e16-sky);
  font: 700 8px "DM Mono", monospace;
}

.retro-euro-2016-active .retro-squad-row {
  grid-template-columns: 30px minmax(0, 1fr) 34px 32px;
  gap: 8px;
}

.retro-euro-2016-active .retro-squad-row > em,
.retro-euro-2016-active .retro-squad-row > i {
  color: var(--e16-sky);
  font: 800 9px "DM Mono", monospace;
  text-align: center;
}

.retro-euro-2016-active .retro-squad-row > i {
  display: grid;
  width: 30px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--e16-line);
  border-radius: 7px;
  color: var(--e16-yellow);
  background: rgba(2, 18, 59, 0.8);
}

.retro-euro-2016-active .retro-squad-row.is-likely-starter {
  box-shadow: inset 3px 0 var(--e16-yellow);
}

.retro-euro-2016-active .retro-lineup-tabs {
  overflow: hidden;
  border-radius: 14px;
}

.retro-euro-2016-active .retro-lineup-tabs button {
  color: var(--e16-muted);
}

.retro-euro-2016-active .retro-lineup-tabs button.active {
  color: var(--e16-navy);
  background: var(--e16-sky);
  box-shadow: inset 0 -3px var(--e16-yellow);
}

.retro-euro-2016-active .retro-mode-active .retro-manager-lineup > header,
.retro-euro-2016-active .retro-manager-lineup > header,
.retro-euro-2016-active .retro-live-ratings-side > header {
  border-color: var(--e16-line);
  background: linear-gradient(90deg, #0757a9, #087fc0);
}

.retro-euro-2016-active .retro-pitch-player b {
  border-color: #d8f8ff;
  color: var(--e16-white);
  background: var(--e16-blue);
  box-shadow: 0 3px 9px rgba(0, 11, 47, 0.48);
}

.retro-euro-2016-active .retro-pitch-player i {
  color: var(--e16-navy);
  background: var(--e16-yellow);
}

.retro-euro-2016-active .retro-manager-player {
  border-color: var(--e16-line-soft);
  color: var(--e16-white);
  background: rgba(4, 49, 111, 0.92);
}

.retro-euro-2016-active .retro-manager-player.is-selected {
  border-color: var(--e16-yellow);
  background: var(--e16-blue);
  box-shadow: inset 4px 0 var(--e16-yellow);
}

.retro-euro-2016-active #mainContent :is(.penalty-stage, .match-penalty-overlay, .champion-stage) {
  border: 1px solid var(--e16-cyan);
  border-radius: 16px;
  color: var(--e16-white);
  background: rgba(2, 22, 68, 0.97);
  box-shadow: 0 18px 38px rgba(0, 8, 40, 0.36);
}

.retro-euro-2016-active #mainContent .champion-stage .trophy,
.retro-euro-2016-active #mainContent .champion-stage p {
  color: var(--e16-yellow);
}

body.retro-mode-active.retro-euro-2016-active :is(
  .modal,
  .confirm-modal,
  .snapshot-modal,
  .achievement-unlock-modal
) {
  border: 1px solid var(--e16-cyan);
  border-top: 5px solid var(--e16-yellow);
  border-radius: 16px;
  color: var(--e16-white);
  background: linear-gradient(145deg, rgba(6, 74, 146, 0.99), rgba(2, 17, 58, 0.99));
  box-shadow: 0 24px 70px rgba(0, 7, 35, 0.68);
}

/* France 1998 — isolated glossy late-1990s presentation */
body.retro-mode-active.retro-1998-active {
  --retro-98-blue: #0b3f96;
  --retro-98-deep: #041c4b;
  --retro-98-navy: #020d29;
  --retro-98-red: #c92f4f;
  --retro-98-silver: #dce5ef;
  --retro-98-chrome: #91a5bb;
  --retro-98-white: #f7faff;
  --retro-98-muted: #bdcce0;
  --retro-accent: var(--retro-98-blue);
  color: var(--retro-98-white);
  background: var(--retro-98-navy) url("./assets/retro-1998/france-98-bg-desktop.png") center top / cover fixed no-repeat;
}

.retro-1998-active .retro-tournament-screen {
  color: var(--retro-98-white);
  background: linear-gradient(180deg, rgba(2, 13, 41, 0.18), rgba(2, 13, 41, 0.72));
}

.retro-1998-active :is(.retro-screen-header, .retro-tournament-heading, .retro-view-tabs, .retro-filter-row) {
  border-color: rgba(220, 229, 239, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(148, 172, 201, 0.06) 34%, rgba(3, 25, 70, 0.86) 36%),
    rgba(4, 28, 75, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), inset 0 -1px rgba(6, 18, 46, 0.8), 0 12px 28px rgba(0, 5, 22, 0.28);
  backdrop-filter: blur(8px) saturate(1.08);
}

.retro-1998-active :is(.retro-screen-back, .retro-screen-restart, .retro-screen-action, .retro-back-to-modes, .utility-button) {
  border: 1px solid rgba(220, 229, 239, 0.62);
  border-radius: 7px;
  color: var(--retro-98-white);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(111, 137, 169, 0.1) 40%, rgba(4, 28, 75, 0.82) 43%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58), 0 4px 12px rgba(0, 5, 22, 0.28);
}

.retro-1998-active :is(.retro-screen-back, .retro-screen-restart, .retro-screen-action, .retro-back-to-modes, .utility-button):hover {
  border-color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(52, 93, 156, 0.3) 42%, rgba(9, 53, 131, 0.94) 45%);
}

.retro-1998-active :is(.primary-button, .retro-screen-brand .brand-mark, #retroDonateButton, .snapshot-actions button) {
  border: 1px solid #b7c8dc;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(180deg, #2c69c3 0%, #0b3f96 48%, #052964 51%, #082f73 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62), inset 0 -1px rgba(0, 8, 33, 0.84), 0 5px 0 #021a43, 0 9px 20px rgba(0, 5, 22, 0.28);
  text-shadow: 0 1px 1px rgba(0, 7, 28, 0.82);
}

.retro-1998-active :is(.primary-button, .snapshot-actions button):hover:not(:disabled) {
  border-color: #ffffff;
  background: linear-gradient(180deg, #417bd2, #1050b4 48%, #07357c 51%, #0b438f);
}

.retro-1998-active :is(.primary-button, .secondary-button, button):focus-visible,
[data-achievement-theme="1998"] button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

.retro-1998-active :is(button, input, select):disabled {
  filter: saturate(0.35);
  opacity: 0.58;
}

.retro-1998-active :is(
  .retro-group-table, .retro-fixture, .retro-match-stage, .retro-golden-boot,
  .retro-active-fixtures, .retro-squad-panel, .retro-lineup-panel,
  #mainContent .fixture-card, #mainContent .match-card, #mainContent .bracket-card,
  #mainContent .tactics-panel, #mainContent .lineup-panel, #mainContent .bench-panel,
  #mainContent .team-match-events, #mainContent .live-match-card,
  .modal, .confirm-modal, .snapshot-modal
) {
  border: 1px solid rgba(220, 229, 239, 0.58);
  border-radius: 9px;
  color: var(--retro-98-white);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), transparent 24%),
    linear-gradient(180deg, rgba(31, 69, 126, 0.88), rgba(4, 25, 67, 0.91));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.45), inset 0 -1px rgba(0, 8, 33, 0.72), 0 14px 34px rgba(0, 4, 20, 0.28);
  backdrop-filter: blur(7px) saturate(1.08);
}

.retro-1998-active :is(.retro-group-table h2, .retro-section-heading, #mainContent .round-title, #mainContent .round-heading) {
  border-color: rgba(220, 229, 239, 0.58);
  color: var(--retro-98-white);
  background: linear-gradient(90deg, #082f73, rgba(18, 72, 151, 0.92) 70%, rgba(201, 47, 79, 0.82));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.38), inset 0 -1px rgba(0, 8, 33, 0.72);
}

.retro-1998-active :is(.retro-table-head, .retro-table-row, .retro-match-schedule, .retro-fixture-details, .match-meta, .fixture-meta) {
  border-color: rgba(202, 217, 234, 0.24);
  color: var(--retro-98-muted);
}

.retro-1998-active .retro-table-row.qualified {
  border-left-color: #d7e3f0;
  background: linear-gradient(90deg, rgba(36, 88, 165, 0.42), rgba(7, 37, 91, 0.24));
}

.retro-1998-active :is(.retro-view-tabs button, .retro-filter-row button, .retro-group-controls button, .retro-squad-tabs button) {
  border-radius: 6px;
  color: var(--retro-98-muted);
  background: rgba(2, 20, 57, 0.62);
}

.retro-1998-active :is(.retro-view-tabs button, .retro-filter-row button, .retro-group-controls button, .retro-squad-tabs button):hover,
.retro-1998-active :is(.retro-view-tabs button.active, .retro-filter-row button.active, .retro-group-controls button.active, .retro-squad-tabs button.active) {
  color: #ffffff;
  background: linear-gradient(180deg, #326ec5, #0b3f96 52%, #06275f 54%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.48);
}

.retro-1998-active :is(input, select, .team-filter-control, .search-control) {
  border: 1px solid rgba(220, 229, 239, 0.58);
  border-radius: 6px;
  color: #ffffff;
  background: rgba(2, 17, 49, 0.84);
  box-shadow: inset 0 1px 5px rgba(0, 4, 20, 0.56), 0 1px rgba(255, 255, 255, 0.2);
}

.retro-1998-active :is(input, select)::placeholder { color: #9fb2ca; }

.retro-1998-active :is(.prediction-option, .team-filter-option, .retro-squad-player):hover {
  border-color: #dce5ef;
  background: linear-gradient(90deg, rgba(18, 76, 166, 0.84), rgba(154, 42, 72, 0.48));
}

.retro-1998-active #mainContent :is(.commentary-bar, .commentary-feed, .live-commentary, .match-commentary) {
  border-color: rgba(220, 229, 239, 0.48);
  color: var(--retro-98-white);
  background: linear-gradient(90deg, rgba(4, 24, 64, 0.94), rgba(11, 63, 150, 0.82), rgba(109, 28, 58, 0.78));
}

.retro-1998-active #mainContent :is(.tactic-button, .formation-option, .lineup-tab):hover,
.retro-1998-active #mainContent :is(.tactic-button.active, .formation-option.active, .lineup-tab.active) {
  border-color: #e5edf6;
  color: #ffffff;
  background: linear-gradient(180deg, #326ec5, #0b3f96 54%, #06275f 56%);
}

.retro-1998-active #mainContent :is(.lineup-pitch, .penalty-pitch, .match-penalty-pitch, .online-penalty-pitch) {
  border: 2px solid rgba(225, 235, 246, 0.76);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    repeating-linear-gradient(90deg, #0a3d86 0 12.5%, #0c468f 12.5% 25%);
  box-shadow: inset 0 0 40px rgba(0, 8, 33, 0.62), 0 12px 28px rgba(0, 4, 20, 0.3);
}

.retro-1998-active #mainContent :is(.player-card, .bench-player, .lineup-player) {
  border-color: rgba(224, 233, 244, 0.62);
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(160deg, rgba(70, 112, 174, 0.94), rgba(5, 34, 83, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.42), 0 5px 13px rgba(0, 5, 22, 0.3);
}

.retro-1998-active #mainContent :is(.penalty-stage, .match-penalty-overlay) {
  border: 1px solid rgba(220, 229, 239, 0.7);
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(42, 84, 147, 0.96), rgba(3, 22, 62, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 18px 42px rgba(0, 4, 20, 0.42);
}

.retro-1998-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button {
  width: 46px;
  height: 46px;
  border: 3px solid #f3f7fc;
  border-radius: 50% !important;
  background: rgba(201, 47, 79, 0.36);
  box-shadow: 0 0 0 5px rgba(11, 63, 150, 0.34), 0 6px 16px rgba(0, 4, 20, 0.36);
}

.retro-1998-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button:hover {
  background: rgba(201, 47, 79, 0.78);
}

.retro-1998-active #mainContent :is(.shootout-summary-row i, .penalty-score-dot, .kick-result-marker) {
  border-radius: 50% !important;
}

.retro-1998-active #mainContent .shootout-summary-row i { background: #dce5ef; }
.retro-1998-active #mainContent .shootout-summary-row.missed i { background: #c92f4f; }

.retro-1998-active #mainContent .bracket-connector::before,
.retro-1998-active #mainContent .bracket-connector::after,
.retro-1998-active #mainContent .bracket-line {
  border-color: rgba(220, 229, 239, 0.64);
  background: rgba(220, 229, 239, 0.64);
}

.retro-1998-active #mainContent :is(.bracket-view, .bracket-scroll) {
  overflow-x: auto;
  scrollbar-color: #8da6c1 #031b48;
}

.retro-1998-active #mainContent .champion-stage,
.retro-1998-active .retro-champion {
  border: 1px solid rgba(235, 242, 249, 0.72);
  border-radius: 11px;
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(145deg, rgba(13, 67, 151, 0.96), rgba(3, 22, 62, 0.97) 62%, rgba(102, 26, 55, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58), 0 22px 54px rgba(0, 4, 20, 0.42);
}

.retro-1998-active #mainContent .champion-stage :is(.award-card, .final-standing, .champion-action-card) {
  border: 1px solid rgba(220, 229, 239, 0.52);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(88, 124, 171, 0.5), rgba(2, 21, 59, 0.76));
}

.retro-1998-active :is(.snapshot-modal, .confirm-modal)::backdrop,
.feature-announcement-1998::backdrop,
[data-achievement-theme="1998"]::backdrop {
  background: rgba(1, 7, 24, 0.74);
  backdrop-filter: blur(5px);
}

[data-achievement-theme="1998"] {
  --achievement-accent: #2e6cc5;
  --achievement-accent-strong: #0b3f96;
  --achievement-ink: #f7faff;
  --achievement-muted: #bdcce0;
  border-color: rgba(220, 229, 239, 0.62);
  color: #f7faff;
  background: linear-gradient(145deg, rgba(29, 72, 135, 0.98), rgba(3, 20, 57, 0.98) 68%, rgba(105, 27, 57, 0.96));
}

[data-achievement-theme="1998"] :is(.achievement-country, .achievement-progress-track, .achievement-year-tabs) {
  border-color: rgba(220, 229, 239, 0.42);
  background: rgba(2, 18, 53, 0.68);
}

[data-achievement-theme="1998"] .achievement-country.is-complete,
[data-achievement-theme="1998"] .achievement-year-tabs button[aria-selected="true"] {
  color: #ffffff;
  background: linear-gradient(135deg, #1c5bb7, #0b3f96 64%, #a62b4b);
}

[data-achievement-theme="1998"] .achievement-progress-track span { background: linear-gradient(90deg, #2f71d0, #c92f4f); }

.achievement-unlock-banner[data-achievement-theme="1998"],
.achievement-unlock-modal[data-achievement-theme="1998"] {
  border-color: #dce5ef;
  color: #ffffff;
  background: linear-gradient(135deg, #0b3f96, #041c4b 68%, #9c2949);
}

.feature-announcement-1998 {
  overflow: hidden;
  border: 1px solid rgba(230, 238, 247, 0.72);
  border-radius: 11px;
  color: #f7faff;
  background: linear-gradient(145deg, rgba(32, 81, 151, 0.98), rgba(3, 20, 57, 0.99) 62%, rgba(119, 29, 61, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58), 0 28px 70px rgba(0, 4, 20, 0.52);
}

.feature-announcement-1998 .feature-announcement-accent {
  background: url("./assets/retro-1998/france-98-bg-desktop.png") center / cover no-repeat;
}

.feature-announcement-1998-visual { position: relative; display: grid; place-items: center; min-height: 210px; }
.feature-announcement-1998-visual img { position: relative; z-index: 1; width: min(210px, 68%); filter: drop-shadow(0 12px 18px rgba(0, 5, 22, 0.48)); }
.feature-announcement-1998-visual small { position: relative; z-index: 1; color: #dce5ef; letter-spacing: 0.28em; }
.feature-announcement-1998-glow { position: absolute; width: 230px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); filter: blur(30px); }
.feature-announcement-1998 .feature-announcement-button { border-color: #dce5ef; color: #fff; background: linear-gradient(180deg, #2f71d0, #0b3f96 54%, #052863 56%); }

.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] {
  border-color: rgba(220, 229, 239, 0.5);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), transparent 25%),
    url("./assets/retro-1998/france-98-bg-desktop.png") center / cover no-repeat;
}

.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] :is(.retro-competition-switch, .retro-year-switch, .landing-segmented) {
  border-color: rgba(220, 229, 239, 0.38);
  background: rgba(2, 18, 53, 0.78);
}

.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] .retro-start-button:not(:disabled),
.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] .retro-year-switch button.active {
  border-color: #dce5ef;
  color: #ffffff;
  background: linear-gradient(180deg, #2f71d0, #0b3f96 54%, #052863 56%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.52), 0 5px 0 #021a43;
}

@media (max-width: 720px) {
  body.retro-mode-active.retro-1998-active {
    background-image: url("./assets/retro-1998/france-98-bg-portrait.png");
    background-attachment: scroll;
  }

  .retro-1998-active :is(.retro-screen-header, .retro-tournament-heading) { border-radius: 0 0 9px 9px; }
  .retro-1998-active #mainContent :is(.bracket-view, .bracket-scroll) { padding-bottom: 12px; }
  .retro-1998-active #mainContent .champion-stage { grid-template-columns: 1fr; }
  .feature-announcement-1998 .feature-announcement-accent { background-image: url("./assets/retro-1998/france-98-bg-portrait.png"); }
}

body.retro-mode-active.retro-euro-2016-active :is(
  .modal,
  .confirm-modal,
  .snapshot-modal,
  .achievement-unlock-modal
)::backdrop {
  background: rgba(0, 7, 32, 0.76);
  backdrop-filter: blur(9px);
}

body.retro-mode-active.retro-euro-2016-active :is(.modal, .confirm-modal, .snapshot-modal) h2 {
  color: var(--e16-white);
}

body.retro-mode-active.retro-euro-2016-active :is(.modal, .confirm-modal, .snapshot-modal) p {
  color: var(--e16-muted);
}

body.retro-mode-active.retro-euro-2016-active :is(
  .modal .primary-button,
  .confirm-modal .primary-button,
  .confirm-modal .danger-button,
  .snapshot-actions button
) {
  border: 1px solid var(--e16-yellow);
  border-radius: 9px;
  color: var(--e16-navy);
  background: var(--e16-yellow);
}

body.retro-mode-active.retro-euro-2016-active :is(
  .modal .icon-button,
  .confirm-modal .secondary-button,
  .settings-option,
  .settings-keybind-list,
  .bug-report-message
) {
  border-color: var(--e16-line);
  color: var(--e16-white);
  background: rgba(2, 22, 68, 0.88);
}

body.retro-mode-active.retro-euro-2016-active .toast {
  border: 1px solid var(--e16-cyan);
  border-radius: 10px;
  color: var(--e16-white);
  background: var(--e16-deep);
}

@media (max-width: 900px) {
  .retro-euro-2016-active .retro-tournament-main {
    width: min(100% - 22px, 760px);
  }

  .retro-euro-2016-active .retro-tournament-heading {
    min-height: 104px;
    padding-right: 126px;
  }

  .retro-euro-2016-active .retro-tournament-heading::after {
    width: 104px;
    height: 92px;
  }

  .retro-euro-2016-active .retro-squad-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .retro-euro-2016-active .retro-tournament-heading {
    min-height: 84px;
    padding-right: 78px;
  }

  .retro-euro-2016-active .retro-tournament-heading::after {
    width: 70px;
    height: 68px;
  }

  .retro-euro-2016-active .retro-team-rating-card > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .retro-euro-2016-active .retro-squad-xi-card ol {
    grid-template-columns: 1fr;
  }

  .retro-euro-2016-active #mainContent :is(.match-stage, .round-board, .panel, .match-analysis),
  .retro-euro-2016-active :is(.retro-group-table, .retro-squad-view, .retro-lineups-view) {
    border-radius: 12px;
    box-shadow: 0 9px 22px rgba(0, 7, 35, 0.28);
  }
}

/* Complete light-mode coverage for every non-competition page and overlay. */
html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(p, li, small, label) {
  font-weight: 600;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .header-actions .header-donate-link,
html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .header-actions .header-donate-link > span {
  color: #ffffff;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .header-actions .header-donate-link {
  background: #31558f;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .sidebar .header-actions .header-donate-link > span:first-child {
  color: #ffffff;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) dialog:not(.asset-pack-dialog):not(.retro-achievements-modal):not(.achievement-unlock-dialog) :is(input, textarea, select) {
  border-color: #cbd4e1;
  color: #172033;
  background: #f7f9fc;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) dialog:not(.asset-pack-dialog):not(.retro-achievements-modal):not(.achievement-unlock-dialog) :is(input, textarea)::placeholder {
  color: #6b778a;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(button, input, select, textarea) {
  font-weight: 700;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .header-actions .utility-button {
  color: #4b5a70;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .utility-button > span:first-child,
html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .side-icon {
  color: #315fbd;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.last-updated, .footer-last-updated) {
  color: #536078;
  font-weight: 600;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.last-updated, .footer-last-updated) strong {
  color: #344158;
  font-weight: 700;
}

html.light-mode body.before-start :is(
  .mode-card-default,
  .mode-card-online,
  .mode-card-legacy,
  .mode-card-custom,
  .mode-card-coming-soon
) .landing-setting-info-panel strong {
  color: #172033;
}

html.light-mode body.before-start :is(
  .mode-card-default,
  .mode-card-online,
  .mode-card-legacy,
  .mode-card-custom,
  .mode-card-coming-soon
) .landing-setting-info summary {
  border-color: #aab6c7;
  color: #41516a;
}

/* 256-team knockout */
html.light-mode body.standard-mode-active :is(.legacy-topbar-back, .search, .overview-search) {
  border-color: #d8dee8;
  color: #344158;
  background: #ffffff;
}

html.light-mode body.standard-mode-active .matchup > .team {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html.light-mode body.standard-mode-active .team-filter-search {
  border: 1px solid #cbd5e3;
  color: #315fbd;
  background: #ffffff;
}

html.light-mode body.standard-mode-active .team-filter-search:focus-within {
  border-color: #6f95ed;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(49, 95, 189, 0.12);
}

html.light-mode body.standard-mode-active .team-filter-search input {
  color: #172033;
  font-weight: 700;
}

html.light-mode body.standard-mode-active .team-filter-search input::placeholder {
  color: #637188;
  opacity: 1;
}

html.light-mode body.standard-mode-active .team-filter-control .search-result-popover {
  border: 1px solid #d7dee8;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(29, 45, 70, 0.16);
}

html.light-mode body.standard-mode-active .team-filter-control .search-result {
  border-bottom-color: #e3e8ef;
  color: #172033;
  background: #ffffff;
  font-weight: 700;
}

html.light-mode body.standard-mode-active .team-filter-control .search-result small {
  color: #526178;
  font-weight: 600;
}

html.light-mode body.standard-mode-active .history-round-button {
  border: 1px solid #cbd5e3;
  color: #29466f;
  background: #ffffff;
}

html.light-mode body.standard-mode-active #simulateRoundButton {
  border: 1px solid #315fbd;
  color: #ffffff;
  background: #315fbd;
}

html.light-mode body.standard-mode-active #unresolvedFilter {
  min-height: 34px;
  padding-inline: 11px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #46556b;
  background: #f5f7fa;
}

html.light-mode body.standard-mode-active #unresolvedFilter.active {
  border-color: #b8c9ef;
  color: #244f9d;
  background: #edf3ff;
}

@media (hover: hover) and (pointer: fine) {
  html.light-mode body.standard-mode-active .team-filter-control .search-result:hover,
  html.light-mode body.standard-mode-active .history-round-button:hover {
    color: #244f9d;
    background: #edf3ff;
  }

  html.light-mode body.standard-mode-active #simulateRoundButton:hover {
    color: #ffffff;
    background: #244f9d;
  }
}

html.light-mode body.standard-mode-active :is(.match-analysis-heading strong, .panel-heading strong, #stageRoundLabel) {
  color: #344158;
  font-weight: 800;
}

html.light-mode body.standard-mode-active #goldenBootTitle {
  color: #9a6500;
  font-weight: 800;
}

html.light-mode body.standard-mode-active :is(.fixture-meta, .team .seed, .venue, .result-note, .match-stat-row span, .plot-item p, .empty-story p) {
  color: #536078;
  font-weight: 600;
}

html.light-mode body.standard-mode-active .match-stats-grid {
  border-bottom-color: #e2e7ee;
  background: #ffffff;
}

html.light-mode body.standard-mode-active .match-stat-row {
  color: #344158;
  background: #f7f9fc;
}

html.light-mode body.standard-mode-active .match-stat-row b {
  color: #1f2b40;
  font-weight: 800;
}

html.light-mode body.standard-mode-active .golden-boot-row {
  border-bottom-color: #e2e7ee;
  background: #ffffff;
}

html.light-mode body.standard-mode-active .golden-boot-rank {
  color: #526178;
  font-weight: 700;
}

html.light-mode body.standard-mode-active .golden-boot-player strong {
  color: #172033;
  font-weight: 800;
}

html.light-mode body.standard-mode-active .golden-boot-player small {
  color: #536078;
  font-weight: 600;
}

html.light-mode body.standard-mode-active .golden-boot-row > b,
html.light-mode body.standard-mode-active .golden-boot-row.leader > b,
html.light-mode body.standard-mode-active .golden-boot-row.leader .golden-boot-rank {
  color: #315fbd;
  font-weight: 800;
}

/* Achievements keeps each competition's panel artwork but fixes the shared page chrome. */
html.light-mode body.achievements-mode-active .achievements-intro h1 {
  color: #172033;
  font-weight: 800;
}

html.light-mode body.achievements-mode-active .achievements-intro p {
  color: #4f5d72;
  font-weight: 600;
}

html.light-mode body.achievements-mode-active .achievements-kicker {
  color: #315fbd;
}

/* Custom tournament and one-off matches */
html.light-mode body.custom-tournament-mode-active :is(.custom-tournament-header h1, .custom-panel-heading h2, .custom-bracket-edit-round > header strong, .custom-match-team-name strong) {
  color: #172033;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-tournament-header, .custom-config-bar, .custom-match-options, .custom-bracket-edit-round > header) {
  border-color: #d9e0e9;
}

html.light-mode body.custom-tournament-mode-active .custom-config-bar {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(29, 45, 70, 0.06);
}

html.light-mode body.custom-tournament-mode-active :is(.custom-back-button, .custom-preset-actions button) {
  border-color: #cfd7e3;
  color: #344158;
  background: #ffffff;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-header-team-count, .custom-config-group > span, .custom-panel-heading span, .custom-script-pickers label > span, .custom-score-script label > span, .custom-winner-select > span, .custom-match-team-card header, .custom-match-team-selectors label) {
  color: #526178;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-segmented, .custom-builder-tabs) {
  background: #eef2f7;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-segmented button, .custom-builder-tabs button) {
  color: #46556c;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-segmented button:hover, .custom-builder-tabs button:hover) {
  color: #172033;
  background: #e1e7f0;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-segmented button.active, .custom-builder-tabs button.active) {
  color: #ffffff;
  background: #426fda;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-manager-control select, .custom-manager-control > button, .custom-match-team-selectors select, .custom-rating-grid input, .custom-rule-fields input[type="number"], .custom-scorer-picker > button) {
  border: 1px solid #d5dce7;
  color: #172033;
  background: #ffffff;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-bracket-edit-match, .custom-group-match-edits button, .custom-group-fixture-editor article, .custom-player-row) {
  border-color: #dce2eb;
  color: #344158;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(29, 45, 70, 0.05);
}

html.light-mode body.custom-tournament-mode-active :is(.custom-bracket-edit-match > header, .custom-direct-match-slot, .custom-group-match-settings, .custom-group-fixture-editor) {
  border-color: #e0e5ed;
}

html.light-mode body.custom-tournament-mode-active .custom-direct-match-slot {
  border-bottom-color: #e0e5ed;
}

html.light-mode body.custom-tournament-mode-active .custom-preset-actions .custom-header-start {
  border-color: #426fda;
  color: #ffffff;
  background: #426fda;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-direct-match-slot > button:first-child, .custom-direct-match-slot strong, .custom-group-match-edits button) {
  color: #243149;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-direct-match-slot small, .custom-future-team, .custom-bracket-edit-match > header span, .custom-bracket-edit-match > header small) {
  color: #5c6b80;
}

html.light-mode body.custom-tournament-mode-active .custom-bracket-edit-match > header button {
  color: #31558f;
  background: #eaf0f9;
}

html.light-mode body.custom-match-mode-active :is(.custom-match-builder, .custom-match-teams) {
  border-color: #d9e0e9;
  background: #ffffff;
}

html.light-mode body.custom-match-mode-active .custom-match-builder {
  box-shadow: 0 12px 34px rgba(29, 45, 70, 0.07);
}

html.light-mode body.custom-match-mode-active .custom-match-team-card {
  border-color: #dce2eb;
  color: #172033;
  background: #f8f9fc;
}

html.light-mode body.custom-match-mode-active .custom-match-error {
  color: #a32638;
  font-weight: 800;
}

html.light-mode body.custom-tournament-mode-active :is(.custom-editor-modal .custom-ratings-panel, .custom-editor-modal .custom-match-rule-editor, .custom-team-picker-panel, .custom-manager-picker-panel, .custom-scorer-menu) {
  border-color: #cfd7e3;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(29, 45, 70, 0.2);
}

html.light-mode body.custom-tournament-mode-active .custom-editor-backdrop {
  background: rgba(34, 43, 60, 0.42);
}

html.light-mode body.custom-tournament-mode-active :is(.custom-match-rule-editor > header h3, .custom-account-save-option, .custom-section-title strong) {
  color: #172033;
}

html.light-mode body.custom-tournament-mode-active .custom-team-creator-actions {
  border-color: #d9e0e9;
  background: #f7f9fc;
  box-shadow: 0 -12px 28px rgba(29, 45, 70, 0.1);
}

/* Legacy draft: retain the green pitch, lighten the surrounding draft workspace. */
html.light-mode body.legacy-mode-active :is(.legacy-topbar-back, .legacy-draft-status, .legacy-left-panel, .legacy-setup-panel, .legacy-country-panel, .legacy-complete-panel, .legacy-randomiser) {
  border-color: #d9e0e9;
  color: #172033;
  background: #ffffff;
}

html.light-mode body.legacy-mode-active :is(.legacy-player-card, .legacy-choice, .legacy-formation-choice button, .legacy-country-card) {
  border-color: #dce2eb;
  color: #172033;
  background: #f7f9fc;
}

html.light-mode body.legacy-mode-active :is(.legacy-player-card strong, .legacy-draft-status strong, .legacy-randomiser > strong, .legacy-choice strong, .legacy-country-card strong) {
  color: #172033;
}

html.light-mode body.legacy-mode-active :is(.legacy-player-card small, .legacy-player-card span, .legacy-stats span, .legacy-helper small, .legacy-country-card small) {
  color: #526178;
  font-weight: 700;
}

html.light-mode body.legacy-mode-active .legacy-draft-status > div strong {
  color: #ffffff;
}

html.light-mode body.legacy-mode-active .legacy-stats span b {
  color: #243149;
}

html.light-mode body.legacy-mode-active .legacy-rating-badge b {
  color: #16834b;
}

html.light-mode body.legacy-mode-active .legacy-respin-button {
  border-color: #cfd7e3;
  color: #31558f;
  background: #eef3ff;
}

/* Online mode */
html.light-mode body.online-screen-open .online-screen {
  color: #172033;
  background:
    radial-gradient(circle at 78% 2%, rgba(66, 109, 210, 0.1), transparent 34%),
    #f4f6fa;
}

html.light-mode body.online-screen-open .online-screen-topbar {
  border-bottom: 1px solid #d9e0e9;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(29, 45, 70, 0.04);
}

html.light-mode body.online-screen-open :is(.online-screen-heading h1, .online-entry-panel h2, .online-private-divider span, .online-lobby-heading strong, .online-draft-head h3, .online-match-head h3, .online-results-head h2) {
  color: #172033;
}

html.light-mode body.online-screen-open :is(.online-screen-back, .online-private-divider small, .online-field > span, .online-entry-divider, .online-screen-heading p, .online-results-head p) {
  color: #526178;
}

html.light-mode body.online-screen-open .online-screen-action {
  border-color: #d7dee9;
  color: #315fbd;
  background: #ffffff;
}

html.light-mode body.online-screen-open .online-field input {
  border: 1px solid #cfd7e3;
  color: #172033;
  background: #ffffff;
}

html.light-mode body.online-screen-open .online-entry-divider::before,
html.light-mode body.online-screen-open .online-entry-divider::after {
  background: #d9e0e9;
}

html.light-mode body.online-screen-open :is(
  .online-room-code-panel,
  .online-member,
  .online-roulette,
  .online-draft-roster,
  .online-active-team,
  .online-owned-country,
  .online-tactics,
  .online-current-match,
  .online-ready-panel,
  .online-penalty-control,
  .online-centre-match,
  .online-my-matches,
  .online-results,
  .online-result-player,
  .online-result-team,
  .online-result-score-card,
  .online-bracket-match,
  .online-team-select-dialog
) {
  border-color: #d9e0e9;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(29, 45, 70, 0.06);
}

html.light-mode body.online-screen-open :is(.online-member strong, .online-roster-country strong, .online-active-team strong, .online-owned-country strong, .online-match-team strong, .online-centre-team strong, .online-result-player strong, .online-result-team strong, .online-bracket-match strong) {
  color: #172033;
}

html.light-mode body.online-screen-open :is(.online-member small, .online-roster-country small, .online-active-team small, .online-owned-country small, .online-tactics-copy p, .online-match-clock small, .online-centre-head small, .online-result-team small, .online-result-team p) {
  color: #526178;
}

html.light-mode body.online-screen-open :is(.online-live-controls .live-control, .online-tactic-buttons button, .online-match-filter button, .online-bracket-round-tabs button, .online-results-tabs button, #confirmJoinRoomButton) {
  border-color: #cfd7e3;
  color: #344158;
  background: #eef2f7;
}

/* Palestine Challenge */
html.light-mode body.challenge-mode-active .challenge-screen {
  color: #172033;
  background: #f4f6fa;
}

html.light-mode body.challenge-mode-active .challenge-header {
  border-bottom-color: #d9e0e9;
  background: rgba(255, 255, 255, 0.96);
}

html.light-mode body.challenge-mode-active :is(.challenge-hero, .challenge-dashboard-band, .challenge-run, .challenge-leaderboard-row) {
  border-color: #d9e0e9;
}

html.light-mode body.challenge-mode-active :is(.challenge-hero h1, .challenge-run h2, .challenge-scoring h2, .challenge-section-heading h2, .challenge-countdown strong, .challenge-player-summary strong, .challenge-match-result strong, .challenge-leaderboard-row strong) {
  color: #172033;
}

html.light-mode body.challenge-mode-active :is(.challenge-hero p, .challenge-countdown > span, .challenge-countdown small, .challenge-run p, .challenge-scoring-grid span, .challenge-history-item dt) {
  color: #526178;
}

html.light-mode body.challenge-mode-active :is(.challenge-prize, .challenge-player-summary div, .challenge-match-result, .challenge-scoring-grid div, .challenge-history-item, .challenge-own-rank) {
  border-color: #d9e0e9;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(29, 45, 70, 0.05);
}

html.light-mode body.challenge-mode-active .challenge-scoring-grid {
  background: #d9e0e9;
}

html.light-mode body.challenge-mode-active .challenge-tabs {
  border-color: #d9e0e9;
  background: #ffffff;
}

html.light-mode body.challenge-mode-active .challenge-tabs button {
  color: #526178;
}

html.light-mode body.challenge-mode-active .challenge-tabs button[aria-selected="true"] {
  color: #ffffff;
  background: #315fbd;
}

html.light-mode body.challenge-mode-active :is(.challenge-auth-modal input, .username-review-modal input) {
  border-color: #cfd7e3;
  color: #172033;
  background: #ffffff;
}

/* Profile */
html.light-mode body.profile-mode-active .profile-screen,
html.light-mode body.profile-mode-active .profile-header {
  color: #172033;
  background: #f4f6fa;
}

html.light-mode body.profile-mode-active .profile-header {
  border-bottom: 1px solid #d9e0e9;
}

html.light-mode body.profile-mode-active :is(.profile-hero h1, .profile-preview strong, .profile-achievement-total > div > strong, .profile-achievement-total strong, .profile-unlocked-heading h2, .profile-history-section h2, .profile-danger-zone h2) {
  color: #172033;
}

html.light-mode body.profile-mode-active :is(.profile-preview span, .profile-achievement-total span, .profile-unlocked-heading p, .profile-history-section p, .profile-danger-zone p, .profile-empty-state) {
  color: #526178;
}

html.light-mode body.profile-mode-active :is(.profile-account-overview, .profile-edit-panel, .profile-unlocked-achievement, .profile-empty-state, .profile-history-section) {
  border-color: #d9e0e9;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(29, 45, 70, 0.06);
}

html.light-mode body.profile-mode-active .profile-achievement-total {
  border-left-color: #d9e0e9;
}

html.light-mode body.profile-mode-active :is(.profile-hero-actions button, .profile-header-actions .utility-button, .profile-header .legacy-topbar-back) {
  border: 1px solid #d5dce7;
  color: #344158;
  background: #ffffff;
}

html.light-mode body.profile-mode-active .profile-avatar-preview {
  background: #eef2f7;
}

html.light-mode body.profile-mode-active .profile-danger-zone {
  border-top-color: #e1cbd0;
}

/* Specialised generic dialogs that previously bypassed the shared modal rules. */
html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.username-review-modal, .profile-delete-modal, .challenge-auth-modal, .online-team-select-dialog) {
  border-color: #d5dce7;
  color: #172033;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(29, 45, 70, 0.2);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.username-review-modal, .profile-delete-modal, .challenge-auth-modal, .online-team-select-dialog) :is(h2, strong) {
  color: #172033;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) :is(.username-review-modal, .profile-delete-modal, .challenge-auth-modal, .online-team-select-dialog) :is(p, small, label > span) {
  color: #526178;
}

@media (prefers-reduced-motion: reduce) {
  .retro-euro-2016-active button {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
}

.modal .icon-button {
  color: #a5afbf;
  background: #171f2c;
}

.settings-modal {
  width: min(560px, calc(100vw - 32px));
}

.settings-modal .modal-head h2 {
  margin: 0;
  color: #f1f4f9;
}

.settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 12px;
  padding: 18px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  text-align: left;
  background: #121a26;
  cursor: pointer;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}

.settings-option:hover {
  background: #162131;
}

.settings-option:active {
  transform: scale(0.985);
}

.settings-option-copy {
  display: grid;
  gap: 7px;
}

.settings-option-copy strong {
  color: #f1f4f9;
  font-size: 15px;
}

.settings-option-copy small,
.settings-note {
  color: #8792a5;
  font-size: 10px;
  line-height: 1.6;
}

.settings-switch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #354050;
  transition: background-color 160ms ease;
}

.settings-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d7deea;
  transition: transform 180ms var(--ease-out), background-color 160ms ease;
}

.settings-option.is-enabled .settings-switch {
  background: #5f8cff;
}

.settings-option.is-enabled .settings-switch i {
  background: #fff;
  transform: translateX(20px);
}

.settings-keybind-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #253244;
  border-radius: 8px;
  background: #0d141f;
}

.settings-keybind-list.is-disabled {
  opacity: 0.54;
}

.settings-keybind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.settings-keybind-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-keybind-row strong {
  color: #f1f4f9;
  font-size: 13px;
}

.settings-keybind-row small {
  color: #8792a5;
  font-size: 10px;
  line-height: 1.45;
}

.settings-keybind-button {
  min-width: 86px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #33445d;
  border-radius: 6px;
  background: #151f2d;
  color: #eef4ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.settings-keybind-button.is-listening {
  border-color: #7ea0ff;
  background: #1f3154;
  color: #ffffff;
}

@media (max-width: 520px) {
  .settings-keybind-row {
    grid-template-columns: 1fr;
  }

  .settings-keybind-button {
    width: 100%;
  }
}

/* Shared World Cup manager, recoloured and reshaped by each edition below. */
body.retro-mode-active {
  --q22-ink: #062b20;
  --q22-ink-soft: #064b35;
  --q22-panel: rgba(5, 91, 58, 0.98);
  --q22-panel-soft: rgba(8, 74, 51, 0.96);
  --q22-wine: #07945d;
  --q22-wine-bright: #0bbd75;
  --q22-line: #70b491;
  --q22-line-soft: rgba(220, 242, 218, 0.27);
  --q22-cream: #f3f8df;
  --q22-white: #fffef4;
  --q22-gold: #f4c625;
  --q22-gold-soft: #f8d54a;
}

body.retro-mode-active.retro-2010-active {
  --q22-ink: #211c19;
  --q22-ink-soft: #342016;
  --q22-panel: rgba(52, 32, 22, 0.97);
  --q22-panel-soft: rgba(81, 36, 15, 0.96);
  --q22-wine: #a9440c;
  --q22-wine-bright: #d46b0e;
  --q22-line: #a96732;
  --q22-line-soft: rgba(255, 211, 79, 0.28);
  --q22-cream: #fff5db;
  --q22-white: #fffaf0;
  --q22-gold: #ffd34f;
  --q22-gold-soft: #ffe58c;
}

body.retro-mode-active.retro-2018-active {
  --q22-ink: #361018;
  --q22-ink-soft: #671018;
  --q22-panel: rgba(7, 52, 95, 0.97);
  --q22-panel-soft: rgba(103, 16, 24, 0.96);
  --q22-wine: #a51a16;
  --q22-wine-bright: #c92b25;
  --q22-line: #b37868;
  --q22-line-soft: rgba(233, 196, 119, 0.3);
  --q22-cream: #fff4d6;
  --q22-white: #fffaf0;
  --q22-gold: #e9c477;
  --q22-gold-soft: #f3d99c;
}

.retro-mode-active .retro-match-lineups-panel > .retro-lineups-grid {
  align-items: start;
}

.retro-lineup-workspace {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 8px;
}

.retro-lineup-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--q22-line);
  background: var(--q22-panel);
}

.retro-lineup-tabs button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border: 0;
  border-right: 1px solid var(--q22-line);
  color: #bca5a1;
  background: transparent;
  font-size: 9px;
  font-weight: 800;
  transition: color 150ms ease, background-color 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.retro-lineup-tabs button:last-child {
  border-right: 0;
}

.retro-lineup-tabs button.active {
  color: var(--q22-ink);
  background: var(--q22-gold-soft);
  box-shadow: inset 0 -3px var(--q22-wine);
}

.retro-lineup-tabs button:active {
  transform: scale(0.98);
}

.retro-lineup-tab-flag,
.retro-lineup-tab-flag img {
  width: 24px;
  height: 16px;
  object-fit: cover;
}

.retro-mode-active .retro-manager-lineup,
.retro-mode-active .retro-live-ratings-side {
  min-width: 0;
  border: 1px solid var(--q22-line);
  color: var(--q22-cream);
  background: var(--q22-panel);
}

.retro-formation-badge {
  padding: 7px 9px;
  border: 1px solid var(--q22-gold);
  color: var(--q22-gold-soft);
  font: 800 9px "DM Mono", monospace;
}

.retro-manager-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 1.28;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 216, 0.58);
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(244, 234, 216, 0.42) 49.75% 50.25%, transparent 50.25%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 12.5%, rgba(0, 0, 0, 0.025) 12.5% 25%),
    #244f40;
  box-shadow: inset 0 0 36px rgba(4, 20, 15, 0.42);
}

.retro-manager-pitch-box {
  position: relative;
  min-width: 0;
}

.retro-manager-lineup.is-opponent .retro-manager-pitch-box {
  width: 100%;
  margin: 0;
}

.retro-pitch-corner-control {
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 9px;
  display: flex;
  justify-content: flex-start;
}

.retro-pitch-corner-control label {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.retro-pitch-corner-control label > span {
  padding: 2px 5px;
  color: var(--q22-gold-soft);
  background: var(--q22-ink-soft);
  font: 800 7px "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retro-pitch-corner-control [data-retro-manager-formation] {
  min-width: 108px;
  min-height: 32px;
  background: var(--q22-panel-soft);
}

.retro-pitch-corner-control .retro-formation-badge {
  background: var(--q22-ink-soft);
}

.retro-manager-pitch::before,
.retro-manager-pitch::after {
  position: absolute;
  left: 50%;
  width: 42%;
  height: 14%;
  border: 1px solid rgba(244, 234, 216, 0.48);
  content: "";
  transform: translateX(-50%);
}

.retro-manager-pitch::before {
  top: -1px;
  border-top: 0;
}

.retro-manager-pitch::after {
  bottom: -1px;
  border-bottom: 0;
}

.retro-pitch-halfway {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid rgba(244, 234, 216, 0.48);
}

.retro-pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19%;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 234, 216, 0.48);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.retro-pitch-player {
  position: absolute;
  z-index: 2;
  top: var(--pitch-y);
  left: var(--pitch-x);
  display: grid;
  width: clamp(58px, 16%, 76px);
  min-height: 54px;
  justify-items: center;
  gap: 1px;
  padding: 2px;
  border: 0;
  color: #fffaf0;
  background: transparent;
  text-shadow: 0 1px 3px #071b14, 0 1px 8px #071b14;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.retro-pitch-player b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid rgba(244, 234, 216, 0.9);
  border-radius: 50%;
  color: #fffaf0;
  background: var(--q22-wine);
  box-shadow: 0 2px 6px rgba(6, 15, 11, 0.52);
  font: 800 9px "DM Mono", monospace;
  text-shadow: none;
}

.retro-pitch-player span {
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-pitch-player i {
  min-width: 28px;
  padding: 2px 5px;
  border-radius: 9px;
  color: var(--q22-ink);
  background: var(--q22-gold-soft);
  font: 800 8px "DM Mono", monospace;
  text-align: center;
  text-shadow: none;
}

.retro-pitch-player small {
  min-height: 9px;
  color: #d8c4bd;
  font: 800 7px "DM Mono", monospace;
  text-shadow: 0 1px 3px #071b14;
}

.retro-pitch-player small.is-up {
  color: #76e4ac;
}

.retro-pitch-player small.is-down {
  color: #ff8798;
}

.retro-pitch-player.is-selected,
.retro-pitch-player.is-drop-target {
  color: var(--q22-white);
  background: transparent;
  box-shadow: none;
}

.retro-pitch-player.is-selected b,
.retro-pitch-player.is-drop-target b {
  border-color: var(--q22-white);
  color: var(--q22-ink);
  background: var(--q22-gold-soft);
  box-shadow: 0 0 0 4px rgba(224, 201, 149, 0.28);
}

.retro-pitch-player.is-preview-in b {
  border-color: #76e4ac;
  box-shadow: 0 0 0 4px rgba(88, 214, 151, 0.28);
}

.retro-pitch-player.is-preview-in i {
  color: #071e14;
  background: #76e4ac;
}

.retro-manager-player.is-preview-out {
  border-color: #e0c995;
  background: rgba(224, 201, 149, 0.1);
}

.retro-pitch-player.is-missing {
  cursor: default;
  opacity: 0.88;
}

.retro-pitch-player.is-missing b {
  border-style: dashed;
  color: #fff;
  background: #68142d;
}

.retro-pitch-player.is-missing i {
  color: #fff;
  background: #68142d;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 7px;
}

.retro-pitch-player.is-injured:not(:disabled) {
  cursor: grab;
}

.retro-pitch-player.is-injured b {
  border-color: #f2c66d;
  background: #754810;
}

.retro-pitch-player.is-injured i {
  background: #754810;
}

.retro-pitch-player.is-dragging,
.retro-manager-player.is-dragging {
  opacity: 0.42;
}

.retro-pitch-player:active:not(:disabled) {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(0.96);
}

.retro-manager-player.is-drop-target {
  border-color: var(--q22-white);
  background: var(--q22-wine);
  box-shadow: inset 4px 0 var(--q22-gold);
}

@media (hover: hover) and (pointer: fine) {
  .retro-pitch-player:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.04);
  }

  .retro-pitch-player:hover:not(:disabled) b {
    border-color: var(--q22-gold);
    background: var(--q22-wine-bright);
  }
}

.retro-mode-active .retro-manager-lineup > header,
.retro-mode-active .retro-live-ratings-side > header {
  display: grid;
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--q22-line);
  background: var(--q22-wine);
}

.retro-mode-active .retro-manager-lineup header > span,
.retro-mode-active .retro-live-ratings-side header > span,
.retro-manager-player > span,
.retro-live-rating-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.retro-mode-active .retro-manager-lineup header small,
.retro-mode-active .retro-live-ratings-side header small,
.retro-mode-active .retro-manager-lineup header label > span,
.retro-mode-active .retro-live-ratings-side header label > span {
  color: var(--q22-gold);
  font: 700 8px "DM Mono", monospace;
  letter-spacing: 0.08em;
}

.retro-mode-active .retro-manager-lineup header strong,
.retro-mode-active .retro-live-ratings-side header strong,
.retro-manager-player strong,
.retro-live-rating-row strong {
  overflow: hidden;
  color: var(--q22-white);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-mode-active .retro-manager-lineup header label,
.retro-mode-active .retro-live-ratings-side header label {
  display: grid;
  gap: 4px;
}

.retro-mode-active [data-retro-manager-formation] {
  min-height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--q22-gold);
  border-radius: 2px;
  color: var(--q22-white);
  background: var(--q22-panel-soft);
  font: 800 10px "DM Mono", monospace;
  cursor: pointer;
}

.retro-manager-hint {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--q22-line-soft);
  color: #c3aaa7;
  font-size: 9px;
  line-height: 1.55;
}

.retro-pitch-sub-counter {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(224, 201, 149, 0.58);
  border-radius: 2px;
  color: var(--q22-white);
  background: var(--q22-panel-soft);
  font: 800 10px "Manrope", system-ui, sans-serif;
  letter-spacing: 0;
}

.retro-pitch-sub-counter.is-pending {
  gap: 5px;
  padding: 4px;
}

.retro-pitch-sub-counter.is-pending > span {
  padding-inline: 4px;
  white-space: nowrap;
}

.retro-pitch-sub-counter.is-pending button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--q22-line);
  border-radius: 2px;
  color: var(--q22-cream);
  background: var(--q22-panel-soft);
  font: 800 8px "Manrope", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease;
}

.retro-pitch-sub-counter.is-pending button:last-child {
  border-color: var(--q22-gold);
  color: var(--q22-ink);
  background: var(--q22-gold-soft);
}

.retro-pitch-sub-counter.is-pending button:active {
  transform: scale(0.97);
}

.retro-manager-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 34%);
  align-items: start;
  gap: 12px;
  padding: 12px;
}

.retro-manager-layout > .retro-manager-pitch-box {
  width: 100%;
  margin: 0;
}

.retro-manager-section {
  padding: 12px;
}

.retro-manager-section.is-bench {
  display: grid;
  height: 0;
  min-width: 0;
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0 0 0 12px;
  overflow: hidden;
  border-left: 1px solid var(--q22-line);
}

.retro-manager-section.is-bench .retro-manager-player-list {
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-color: var(--q22-gold) rgba(57, 13, 32, 0.72);
  scrollbar-width: thin;
}

.retro-manager-section.is-bench .retro-manager-player {
  min-height: 50px;
  grid-template-columns: 26px minmax(0, 1fr) 26px 30px;
  gap: 7px;
  padding-inline: 7px;
}

.retro-manager-section + .retro-manager-section {
  border-top: 1px solid var(--q22-line);
}

.retro-manager-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.retro-manager-section-title strong {
  color: var(--q22-white);
  font-size: 10px;
}

.retro-manager-section-title span {
  color: var(--q22-gold);
  font: 700 8px "DM Mono", monospace;
}

.retro-manager-player-list,
.retro-live-rating-list {
  display: grid;
  gap: 4px;
}

.retro-manager-player {
  display: grid;
  width: 100%;
  min-height: 44px;
  grid-template-columns: 28px minmax(0, 1fr) 28px 32px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--q22-line-soft);
  border-radius: 2px;
  color: var(--q22-cream);
  background: var(--q22-panel-soft);
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.retro-manager-player b {
  color: var(--q22-gold);
  font: 800 11px "DM Mono", monospace;
}

.retro-manager-player small,
.retro-live-rating-row small {
  overflow: hidden;
  color: #b99f9c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-manager-player strong {
  font-size: 12px;
}

.retro-manager-player em {
  color: #c3aaa7;
  font: 700 9px "DM Mono", monospace;
  text-align: center;
}

.retro-manager-player > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--q22-line);
  color: var(--q22-gold);
  font: 800 9px "DM Mono", monospace;
}

.retro-manager-player.is-bench {
  opacity: 1;
  background: var(--q22-ink-soft);
}

.retro-manager-player.is-selected {
  border-color: var(--q22-gold);
  background: var(--q22-wine);
  box-shadow: inset 4px 0 var(--q22-gold);
}

.retro-manager-player:active:not(:disabled) {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .retro-manager-player:hover:not(:disabled) {
    border-color: var(--q22-gold);
    background: var(--q22-wine);
  }
}

.retro-live-rating-list {
  padding: 8px;
}

.retro-live-rating-row {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 9px;
  border-bottom: 1px solid var(--q22-line-soft);
}

.retro-live-rating-row > i {
  color: #9c8583;
  font: 700 8px "DM Mono", monospace;
  text-align: right;
}

.retro-live-rating-row > i.is-up {
  color: #5fd79a;
}

.retro-live-rating-row > i.is-down {
  color: #ff7787;
}

.retro-live-rating-row > b {
  display: grid;
  width: 36px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--q22-line);
  color: var(--q22-white);
  background: #3a0b20;
  font: 800 10px "DM Mono", monospace;
}

.retro-live-rating-row > b.is-excellent {
  border-color: #21c77a;
  color: #58d697;
  background: #08291d;
}

.retro-live-rating-row > b.is-good {
  border-color: #6be29e;
  color: #83e3aa;
  background: #102b1c;
}

.retro-live-rating-row > b.is-average {
  border-color: #f0cc60;
  color: #f0cc60;
  background: #332605;
}

.retro-live-rating-row > b.is-poor {
  border-color: #ff7185;
  color: #ff8293;
  background: #3a0b18;
}

.retro-pitch-player i.is-excellent {
  color: #58d697;
  background: #08291d;
}

.retro-pitch-player i.is-good {
  color: #83e3aa;
  background: #102b1c;
}

.retro-pitch-player i.is-average {
  color: #f0cc60;
  background: #332605;
}

.retro-pitch-player i.is-poor {
  color: #ff8293;
  background: #3a0b18;
}

/* Brazil 2014: deep green watercolor cards and rounded tournament controls. */
.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-lineup-tabs,
.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-manager-lineup {
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(36, 109, 75, 0.14);
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-lineup-tabs {
  overflow: hidden;
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-lineup-workspace :is(button, select, b, i, em, small, strong) {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-lineup-tabs button {
  color: #d5e8d8;
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-lineup-tabs button.active,
.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-lineup-tabs button[aria-selected="true"] > span {
  color: #07130d;
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-manager-hint,
.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-manager-player small,
.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-manager-player em {
  color: #c9dfcf;
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-pitch-player {
  color: #fff;
  text-shadow: 0 2px 3px #071b14, 0 0 8px #071b14, 0 0 12px #071b14;
}

.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .retro-pitch-player span {
  font-size: 10px;
}

/* South Africa 2010: warm ticket-like panels and chunky orange controls. */
.retro-2010-active .retro-lineup-tabs,
.retro-2010-active .retro-manager-lineup {
  border-width: 2px;
  border-radius: 5px;
  box-shadow: 0 5px 0 rgba(81, 36, 15, 0.72);
}

.retro-2010-active .retro-lineup-tabs {
  overflow: hidden;
}

.retro-2010-active .retro-lineup-workspace :is(button, select, b, i, em, small, strong) {
  font-family: "Manrope", system-ui, sans-serif;
}

.retro-2010-active .retro-pitch-player b {
  border-radius: 5px;
}

/* Russia 2018: folk-poster type, cream rules and compact badge shapes. */
.retro-2018-active .retro-lineup-tabs,
.retro-2018-active .retro-manager-lineup {
  border-width: 2px;
  border-radius: 6px;
  box-shadow: 8px 8px 0 rgba(82, 9, 21, 0.4);
}

.retro-2018-active .retro-lineup-tabs {
  overflow: hidden;
}

.retro-2018-active .retro-lineup-workspace :is(button, select, b, i, em, small, strong) {
  font-family: "Neucha", "Manrope", sans-serif;
  letter-spacing: 0.02em;
}

.retro-2018-active .retro-pitch-player b {
  border-radius: 4px;
}

.timeline-event.substitution-event,
.timeline-event.injury-event {
  max-width: min(100%, 220px);
}

.timeline-event.substitution-event span,
.timeline-event.injury-event span {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 8px;
  line-height: 1.2;
}

.timeline-event.substitution-event::before {
  color: #76e4ac;
  content: "↕";
  font-weight: 900;
}

.event-side.away .timeline-event.substitution-event::before {
  order: 3;
}

.timeline-event.injury-event::before {
  color: #f2c66d;
  content: "+";
  font-weight: 900;
}

@media (max-width: 1100px) {
  .retro-manager-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .retro-manager-section.is-bench {
    height: auto;
    min-height: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--q22-line);
    border-left: 0;
  }

  .retro-manager-section.is-bench .retro-manager-player-list {
    max-height: 320px;
    padding-right: 4px;
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  .retro-mode-active .retro-manager-lineup > header,
  .retro-mode-active .retro-live-ratings-side > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .retro-mode-active .retro-manager-lineup header label,
  .retro-mode-active .retro-live-ratings-side header label {
    grid-column: 1 / -1;
  }

  .retro-manager-layout {
    gap: 10px;
    padding: 6px;
  }

  .retro-lineup-workspace {
    gap: 5px;
  }

  .retro-manager-section.is-bench .retro-manager-player-list {
    max-height: 280px;
    padding-right: 0;
    overflow-y: auto;
  }

  .retro-manager-pitch {
    width: 100%;
    aspect-ratio: 1.28;
    margin-top: 0;
  }

  .retro-pitch-player {
    width: clamp(54px, 18%, 68px);
    min-height: 50px;
  }

  .retro-pitch-player span {
    font-size: 9px;
  }

  .retro-pitch-corner-control {
    top: 6px;
    left: 6px;
  }

  .retro-pitch-corner-control [data-retro-manager-formation] {
    min-width: 88px;
    min-height: 28px;
    padding-left: 7px;
    font-size: 8px;
  }

  .retro-pitch-sub-counter {
    top: 6px;
    right: 6px;
    gap: 5px;
    padding: 5px 6px;
    font-size: 8px;
  }
}

/* 2026 shootouts: keep the arena blue while preserving green/red result semantics. */
body.retro-mode-active.retro-2026-active #mainContent .penalty-stage {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: var(--wc26-white) !important;
  background:
    radial-gradient(circle at 50% 115%, rgba(55, 104, 255, 0.4), transparent 48%),
    linear-gradient(145deg, #10286f 0%, var(--wc26-navy) 76%) !important;
  box-shadow: 10px 12px 0 rgba(4, 28, 89, 0.55), 0 22px 42px rgba(0, 10, 45, 0.3) !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-stage-head {
  color: var(--wc26-orange) !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-stage-head strong {
  color: var(--wc26-white) !important;
  text-shadow: none !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-stage-head strong i,
body.retro-mode-active.retro-2026-active #mainContent .penalty-stage-head strong b.score-pop {
  color: var(--wc26-orange) !important;
}

body.retro-mode-active.retro-2026-active #mainContent :is(
  .standard-penalty-scene,
  .match-penalty-scene
) {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(6, 22, 79, 0.04), rgba(6, 22, 79, 0.42)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 42px, transparent 42px 84px),
    #1769d8 !important;
  box-shadow: inset 0 0 46px rgba(4, 28, 89, 0.26) !important;
}

body.retro-mode-active.retro-2026-active #mainContent .match-penalty-overlay {
  color: var(--wc26-white) !important;
  background:
    radial-gradient(circle at 50% 110%, rgba(55, 104, 255, 0.38), transparent 48%),
    linear-gradient(145deg, rgba(16, 40, 111, 0.98), rgba(6, 22, 79, 0.98)) !important;
  box-shadow: inset 0 4px 0 var(--wc26-orange), inset 0 -3px 0 rgba(55, 104, 255, 0.5) !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-call :is(strong, span),
body.retro-mode-active.retro-2026-active #mainContent .penalty-ledgers span {
  color: var(--wc26-white) !important;
  text-shadow: none !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-mark {
  border-color: rgba(255, 255, 255, 0.46) !important;
  background: #10286f !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-mark.goal {
  border-color: #70e79c !important;
  background: #1ea85b !important;
  box-shadow: 0 0 0 3px rgba(30, 168, 91, 0.16) !important;
}

body.retro-mode-active.retro-2026-active #mainContent .penalty-mark.miss {
  border-color: #ff8c7d !important;
  background: var(--wc26-red) !important;
  box-shadow: 0 0 0 3px rgba(240, 68, 47, 0.13) !important;
}

@media (max-width: 420px) {
  .retro-lineup-tabs button {
    min-height: 34px;
    padding: 4px 6px;
  }

  .retro-manager-pitch {
    aspect-ratio: 1.16;
  }

  .retro-pitch-player {
    width: clamp(43px, 16%, 56px);
    min-height: 42px;
  }

  .retro-pitch-player b {
    width: 21px;
    height: 21px;
    font-size: 8px;
  }

  .retro-pitch-player i {
    min-width: 24px;
    padding: 1px 4px;
    font-size: 7px;
  }

  .retro-pitch-player small {
    display: none;
  }

  .retro-pitch-sub-counter {
    display: grid;
    justify-items: end;
    gap: 1px;
  }

  .retro-pitch-sub-counter.is-pending {
    display: flex;
    gap: 3px;
  }

  .retro-pitch-sub-counter.is-pending > span {
    display: none;
  }

  .retro-pitch-sub-counter.is-pending button {
    min-height: 25px;
    padding-inline: 6px;
    font-size: 7px;
  }
}

.settings-note {
  margin: 12px 0 0;
}

.setting-group,
.switch-row {
  border-top-color: #293240;
}

.setting-copy p,
.switch-row p,
.field-intro {
  color: #8994a6;
}

.segmented {
  border-color: #2d3746;
  background: #0e141e;
}

.segmented button {
  color: #8994a6;
}

.segmented button.active {
  color: #fff;
  background: #5f8cff;
}

.switch {
  background: #354050;
}

.switch::after {
  background: #adb7c5;
}

.switch-row input:checked + .switch {
  background: #5f8cff;
}

.switch-row input:checked + .switch::after {
  background: #fff;
}

.modal-search {
  background: #151c28;
}

.field-list {
  border-color: #2b3543;
}

.field-team,
.field-team:nth-child(odd) {
  border-color: #252e3b;
}

.field-team small {
  color: #9aa5b6;
  background: #202938;
}

.field-team small.invited {
  color: #f4b466;
  background: #332719;
}

.champion-stage {
  position: relative;
  overflow: hidden;
  background: #111722;
}

.champion-content {
  position: relative;
  z-index: 1;
}

.champion-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.champion-confetti i {
  position: absolute;
  top: -18px;
  left: var(--confetti-x);
  width: var(--confetti-width);
  height: var(--confetti-height);
  border-radius: 2px;
  background: var(--confetti-colour);
  opacity: 0;
  animation: champion-confetti-fall var(--confetti-duration) cubic-bezier(0.22, 0.8, 0.32, 1) var(--confetti-delay) both;
  will-change: transform, opacity;
}

@keyframes champion-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) rotate(0deg);
  }
  9% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift), 540px, 0) rotate(var(--confetti-spin));
  }
}

@media (prefers-reduced-motion: reduce) {
  .champion-confetti {
    display: none;
  }
}

.champion-stage .flag-orb {
  border-color: #111722;
  box-shadow: 0 0 0 5px #5f8cff, 0 15px 28px rgba(0, 0, 0, 0.28);
}

.champion-award {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(330px, 100%);
  margin: 22px auto;
  padding: 13px 15px;
  border-radius: 11px;
  color: #eef2f8;
  background: #18202d;
  text-align: left;
}

.champion-award[hidden] {
  display: none;
}

.champion-award-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #f1c85b;
  background: rgba(241, 200, 91, 0.1);
  font-size: 18px;
}

.champion-award-copy {
  min-width: 0;
}

.champion-award-copy > span {
  display: block;
  margin-bottom: 2px;
  color: #f1c85b;
  font-family: "DM Mono", monospace;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.9px;
}

.champion-award-copy strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.champion-award-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #98a4b6;
  font-size: 8px;
}

.champion-award-copy small b {
  margin-left: auto;
  color: #dbe2ec;
  font-weight: 600;
}

.champion-award-flag,
.champion-award-flag .award-flag {
  display: block;
  width: 22px;
  height: 14px;
}

.champion-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.champion-content {
  width: min(720px, 100%);
}

.champion-stage {
  min-height: 0;
  padding: 32px clamp(18px, 4vw, 48px) 30px;
}

.champion-stage .flag-orb {
  margin-block: 14px;
}

.champion-podium {
  display: block;
  margin: 20px 0 14px;
}

.champion-podium[hidden],
.champion-extra-awards[hidden] {
  display: none;
}

.champion-section-label {
  display: block;
  margin-bottom: 8px;
  color: #78a0ff;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.champion-podium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.champion-podium-grid.has-four-places {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.champion-place {
  display: grid;
  grid-template-columns: 24px 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #303a49;
  border-radius: 9px;
  color: #eef2f8;
  background: #18202d;
  text-align: left;
}

.champion-place.place-1 {
  border-color: rgba(120, 160, 255, 0.72);
  background: #202b3d;
  box-shadow: inset 0 3px #78a0ff;
}

.champion-place > b {
  color: #78a0ff;
  font-size: 20px;
  font-weight: 900;
}

.champion-place-flag,
.champion-place-flag img {
  display: block;
  width: 34px;
  height: 22px;
  object-fit: cover;
}

.champion-place span,
.champion-place strong,
.champion-place small {
  display: block;
  min-width: 0;
}

.champion-place strong {
  overflow: hidden;
  color: #f5f7fb;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.champion-place small {
  margin-top: 2px;
  color: #98a4b6;
  font-size: 8px;
}

.champion-awards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.champion-awards-grid > .champion-award,
.champion-extra-awards .champion-award {
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

.champion-extra-awards {
  display: contents;
}

.champion-glove-award .champion-award-copy strong {
  font-size: 12px;
}

.champion-award-copy small {
  min-width: 0;
}

.champion-award-flag {
  display: flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14px;
  margin: 0;
}

.champion-award-flag .award-flag,
.champion-award-flag .award-flag img {
  display: block;
  width: 22px;
  height: 14px;
  margin: 0;
  object-fit: cover;
}

@media (min-width: 701px) and (max-width: 1367px) {
  body #mainContent:has(#championStage:not([hidden])) {
    grid-template-columns: minmax(0, 1080px);
    grid-template-areas:
      "stage"
      "board";
    justify-content: center;
    padding-inline: 20px;
  }

  body #mainContent:has(#championStage:not([hidden])) .insight-left,
  body #mainContent:has(#championStage:not([hidden])) .insight-right {
    display: none;
  }

  body #mainContent:has(#championStage:not([hidden])) .stage-column {
    width: 100%;
    max-width: 1080px;
  }

  .champion-place strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .champion-actions {
    flex-direction: column;
  }

  .champion-podium-grid,
  .champion-podium-grid.has-four-places,
  .champion-awards-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .retro-mode-active #mainContent .stage-round {
    width: max-content;
    max-width: calc(100% - 24px);
    font-size: 9px;
    letter-spacing: 0.55px;
    white-space: nowrap;
  }
}

.search-result-popover {
  border-color: #303a49;
  color: var(--text);
  background: #151c28;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

.search-result {
  border-bottom-color: #283241;
  color: var(--text);
}

.toast {
  border-color: #3b4657;
  color: #fff;
  background: #202938;
}

@media (hover: hover) and (pointer: fine) {
  .utility-button:hover {
    color: var(--text);
    background: #171f2c;
  }

  .round-link:hover {
    color: #a9c0ff;
    background: #17233b;
  }

  .side-action:hover,
  .queue-item:hover {
    color: var(--text);
    background: #171f2c;
  }

  .fixture:hover {
    border-color: #3b4c69;
    background: #182130;
  }

  .primary-button:hover,
  .skip-control:hover {
    color: #fff;
    background: #4674e8;
  }

  .secondary-button:hover {
    color: #fff;
    background: #5f8cff;
  }

  .ghost-button:hover {
    border-color: #46536a;
    color: #fff;
    background: #2a3547;
  }

  .icon-button:hover {
    border-color: #3a4658;
    color: #fff;
    background: #1a2230;
  }

  .live-control:hover {
    border-color: #5277cf;
    color: #a9c0ff;
  }

  .text-button:hover {
    color: #a9c0ff;
  }

  .search-result:hover {
    background: #1b2432;
  }
}

@media (max-width: 850px) {
  body.before-start #menuButton {
    display: none;
  }

  .sidebar,
  .topbar {
    background: rgba(14, 19, 28, 0.97);
  }

  .last-updated {
    border-left-color: #313b4a;
    color: #7f8a9c;
  }

  .last-updated strong {
    color: #c9d1df;
  }

  .utility-button {
    width: 36px;
    padding: 0;
  }

  .utility-button > span:last-child {
    display: none;
  }
}

/* Borderless match presentation */
.match-stage {
  border: 0;
  background: #101620;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.stage-topline {
  padding: 19px 24px 7px;
  border: 0;
}

.matchup {
  gap: clamp(10px, 3vw, 28px);
  padding-top: 18px;
}

.team {
  min-height: 210px;
  padding-inline: 8px;
  border: 0;
  background: transparent;
}

.flag-orb,
.country-flag,
.live-feed-flag,
.fixture-flag,
.queue-flag,
.search-flag,
.field-flag-art,
.participant-flag-art {
  border: 0;
  box-shadow: none;
}

.flag-orb {
  width: clamp(88px, 8vw, 112px);
  height: clamp(57px, 5.2vw, 73px);
  background: transparent;
}

.score-zone {
  min-height: 180px;
}

.score {
  margin-block: 16px 8px;
}

.score span {
  font-size: clamp(46px, 5vw, 64px);
}

.live-sim,
.match-events {
  border: 0;
  background: #0c1119;
}

.live-sim-head {
  border: 0;
}

.live-feed-item {
  border: 0;
  background: #151d29;
}

.live-feed-item:nth-child(n + 3) {
  background: #121923;
}

.round-board,
.panel {
  border: 0;
  box-shadow: none;
}

.round-board {
  background: #101620;
}

.panel {
  background: #101620;
}

.panel-heading {
  border: 0;
}

.fixture {
  position: relative;
  border: 0;
  background: #151c28;
}

.fixture.selected {
  border: 0;
  background: #192640;
  box-shadow: none;
}

.fixture.selected::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--domestic-fixture-accent, #5f8cff);
  content: "";
}

.fixture.complete {
  background: #121923;
}

.queue {
  gap: 2px;
  padding: 6px;
}

.queue-item {
  border: 0;
  border-radius: 8px;
}

.field-list,
.field-team,
.field-team:nth-child(odd),
.modal,
.confirm-modal {
  border: 0;
}

.secondary-button,
.live-control {
  border: 0;
  background: #1a2330;
}

.skip-control {
  background: #5f8cff;
}

.load-more {
  border: 0;
  background: #151c28;
}

/* Pre-tournament field reveal */
.before-start .round-nav,
.before-start .tournament-status,
.before-start .top-actions .search,
.before-start #fullscreenButton,
.before-start #newTournamentButton {
  display: none;
}

.field-overview {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.field-overview[hidden] {
  display: none;
}

.home-editorial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(17, 23, 34, 0.7);
}

.home-editorial-copy {
  min-width: 190px;
}

.home-editorial-copy h2 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 11px;
  letter-spacing: -0.1px;
}

.home-editorial-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.home-editorial-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.home-editorial-links a {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #0f151f;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.home-editorial-links a:active {
  transform: scale(0.97);
}

.overview-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding: 28px 0 30px;
}

.overview-intro h2 {
  margin: 6px 0 9px;
  color: var(--text);
  font-size: clamp(27px, 3vw, 40px);
  letter-spacing: -1.5px;
}

.overview-intro p {
  max-width: 620px;
  margin: 0;
  color: #a3adbd;
  font-size: 13px;
  line-height: 1.65;
}

.field-totals {
  display: flex;
  flex: 0 0 auto;
  gap: 28px;
}

.field-totals div {
  display: grid;
  gap: 2px;
}

.field-totals strong {
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 23px;
  font-weight: 500;
}

.field-totals span {
  color: #8390a4;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.overview-toolbar {
  position: sticky;
  top: 86px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(16, 22, 32, 0.94);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
}

.overview-search {
  width: min(330px, 50vw);
  border: 0;
  background: #1a2230;
  display: flex;
}

.overview-search:focus-within {
  border: 0;
  background: #1d2635;
}

.start-tournament {
  min-width: 156px;
}

.participant-sections {
  display: grid;
  gap: 34px;
  margin-top: 34px;
}

.participant-group {
  min-width: 0;
}

.participant-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}

.participant-group-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.participant-group-head span {
  color: #7d899b;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.participant-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 5px;
}

.participant {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 7px;
  transition: background-color 160ms ease;
}

.participant-flag {
  display: block;
  width: 38px;
  height: 25px;
}

.participant > span:last-child {
  display: grid;
  min-width: 0;
}

.participant strong {
  overflow: hidden;
  color: #d8dee8;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant small {
  margin-top: 2px;
  color: #748197;
  font-size: 9px;
}

.overview-empty {
  padding: 70px 20px;
  color: #7f8a9d;
  text-align: center;
  font-size: 11px;
}

@media (hover: hover) and (pointer: fine) {
  .home-editorial-links a:hover {
    border-color: rgba(111, 152, 255, 0.48);
    color: var(--text);
    background: #151d2a;
  }

  .participant:hover {
    background: #121a26;
  }

  .fixture:hover {
    border: 0;
    background: #182130;
  }
}

@media (max-width: 900px) {
  .home-editorial {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-editorial-links {
    justify-content: flex-start;
  }

  .participant-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .field-overview {
    padding: 0 14px 50px;
  }

  .home-editorial {
    padding: 12px;
  }

  .overview-intro {
    align-items: start;
    flex-direction: column;
    gap: 22px;
    padding-top: 18px;
  }

  .field-totals {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .overview-toolbar {
    top: 82px;
  }

  .overview-search {
    min-width: 0;
    flex: 1;
    display: flex;
  }

  .start-tournament {
    min-width: 0;
    padding-inline: 13px;
    font-size: 9px;
  }

  .participant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }

  .team {
    min-height: 170px;
  }

  .flag-orb {
    width: 66px;
    height: 43px;
  }
}

/* Team-owned score layout */
.score-zone {
  row-gap: 8px;
}

.team-score + h2 {
  margin-top: 8px;
}

.score-live-controls {
  margin-bottom: 1px;
}

.score-zone .score-live-clock {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .matchup {
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    gap: 4px;
  }

  .team-score {
    margin-top: 8px;
    font-size: 36px;
  }

  .team-score + h2 {
    margin-top: 7px;
  }

  .score-live-controls {
    width: 90px;
    gap: 3px;
  }

  .score-live-controls .live-control {
    min-width: 26px;
    min-height: 25px;
    padding-inline: 5px;
    font-size: 7px;
  }

  .pause-label {
    display: none;
  }

  .score-separator {
    font-size: 22px;
  }
}

/* Inline match score and team-owned event lists */
.match-stage.is-live .matchup {
  padding-top: 72px;
}

.score-zone {
  min-height: 210px;
  row-gap: 10px;
}

.scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 11px;
  min-width: 132px;
  font-family: "DM Mono", monospace;
}

.match-score {
  color: var(--text);
  font-size: clamp(42px, 4.6vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -3px;
  transition:
    color 160ms ease,
    transform 160ms var(--ease-out);
}

.match-score:first-child {
  text-align: right;
}

.match-score:last-child {
  text-align: left;
}

.match-score.score-pop {
  color: #78a0ff;
  transform: scale(1.12);
}

.scoreline .score-separator {
  color: #778297;
  font-size: 27px;
}

.score-live-controls {
  position: absolute;
  top: 13px;
  left: 50%;
  z-index: 3;
  gap: 8px;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
}

.score-live-controls .live-control {
  min-height: 42px;
  padding-inline: 15px;
  border-radius: 9px;
  font-size: 12px;
}

.score-live-controls .pause-control {
  min-width: 88px;
}

.score-live-controls .skip-control {
  min-width: 66px;
}

.team-match-events {
  width: min(100%, 260px);
  min-height: 50px;
  margin-top: 24px;
  align-self: center;
  color: #aeb8c8;
  text-align: left;
}

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

.team-match-events.away {
  text-align: right;
}

.team-match-events .timeline-event,
.team-match-events .event {
  font-size: clamp(10px, 1vw, 13px);
}

@media (max-width: 640px) {
  .match-stage.is-live .matchup {
    padding-top: 58px;
  }

  .score-zone {
    min-height: 190px;
  }

  .scoreline {
    min-width: 82px;
    gap: 6px;
  }

  .match-score {
    font-size: 32px;
    letter-spacing: -2px;
  }

  .scoreline .score-separator {
    font-size: 18px;
  }

  .score-live-controls {
    top: 10px;
    gap: 4px;
  }

  .score-live-controls .live-control {
    min-width: 30px;
    min-height: 32px;
    padding-inline: 8px;
    font-size: 8px;
  }

  .score-live-controls .pause-control,
  .score-live-controls .skip-control {
    min-width: 40px;
  }

  .team-match-events {
    width: 100%;
    min-height: 38px;
    margin-top: 16px;
  }

  .team-match-events .timeline-event,
  .team-match-events .event {
    font-size: 8px;
  }
}

/* Compact live header and flag-aligned match details */
.stage-round {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #a6b1c2;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.match-stage.is-live .live-label {
  visibility: hidden;
}

.match-stage.is-live .matchup {
  padding-top: 18px;
}

.score-live-controls {
  top: -37px;
  left: 24px;
  gap: 6px;
  transform: none;
}

.score-live-controls .live-control {
  min-height: 32px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 8px;
}

.score-live-controls .pause-control {
  min-width: 70px;
}

.score-live-controls .skip-control {
  min-width: 52px;
}

.scoreline {
  transform: translateY(-15px);
}

.team {
  --flag-alignment-width: clamp(88px, 8vw, 112px);
}

.team-match-events {
  width: min(280px, 100%);
  min-height: 38px;
  margin-top: 18px;
  overflow: hidden;
}

.team-match-events .timeline-event {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.team-match-events .timeline-event span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-match-events.away .timeline-event {
  justify-self: end;
}

.shootout-summary {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.team-match-events.away .shootout-summary {
  margin-left: auto;
}

.shootout-summary-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 26px;
  color: #dce3ef;
  font-size: 11px;
}

.shootout-summary-row i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #45d589;
}

.shootout-summary-row.missed i {
  background: #ff626c;
}

.shootout-summary-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-match-events.away .shootout-summary-row {
  grid-template-columns: minmax(0, 1fr) 9px;
}

.team-match-events.away .shootout-summary-row i {
  grid-column: 2;
  grid-row: 1;
}

.team-match-events.away .shootout-summary-row span {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

@media (max-width: 640px) {
  .shootout-summary {
    width: min(210px, 42vw);
    padding: 9px;
  }

  .shootout-summary-row {
    grid-template-columns: 8px minmax(0, 1fr);
    font-size: 9px;
  }

  .shootout-summary-row i {
    width: 8px;
    height: 8px;
  }

  .team-match-events.away .shootout-summary-row {
    grid-template-columns: minmax(0, 1fr) 8px;
  }
}

@media (max-width: 640px) {
  .stage-round {
    max-width: 100px;
    font-size: 7px;
    letter-spacing: 0.6px;
    text-align: center;
  }

  .match-stage.is-live .matchup {
    padding-top: 18px;
  }

  .score-live-controls {
    top: -40px;
    left: 10px;
    gap: 4px;
  }

  .score-live-controls .live-control {
    min-width: 28px;
  min-height: 22px;
    padding-inline: 7px;
    font-size: 7px;
  }

  .score-live-controls .pause-control,
  .score-live-controls .skip-control {
    min-width: 36px;
  }

  .scoreline {
    transform: translateY(-10px);
  }

  .team {
    --flag-alignment-width: 66px;
  }

  .team-match-events .timeline-event {
    max-width: 128px;
  }
}

/* Final live-match control placement */
.stage-round {
  font-size: 15px;
  letter-spacing: 1.35px;
}

.skip-live-control {
  position: absolute;
  top: 50px;
  left: 24px;
  z-index: 4;
}

.skip-live-control[hidden] {
  display: none;
}

.skip-live-control .live-control {
  min-width: 50px;
  min-height: 30px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 8px;
}

.score-live-controls {
  position: static;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 0 0 1px;
  transform: translateY(-13px);
}

.shootout-skip-control {
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  order: 2;
}

.shootout-skip-control[hidden] {
  display: none;
}

.score-live-controls .shootout-skip-control .live-control {
  min-width: 112px;
}

.score-live-controls .live-control {
  min-width: 43px;
  min-height: 30px;
  padding-inline: 9px;
  border-radius: 8px;
  color: #e4e9f1;
  font-size: 11px;
  line-height: 1;
}

.score-live-controls .pause-control {
  min-width: 58px;
}

.scoreline {
  transform: translateY(-10px);
}

.match-stage.is-live .stage-action {
  display: none !important;
}

/* Standard match tactical controls and live 2D viewer */
.standard-match-tactics {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 18px;
}

.standard-match-tactics[hidden],
.match-2d-viewer[hidden],
.match-commentary-view[hidden],
.match-analysis[hidden] {
  display: none;
}

/* ── Commentary-first match view ── */
.match-commentary-view {
  width: min(760px, calc(100% - 48px));
  margin: 24px auto 18px;
}

.match-stage.has-match-penalty .match-commentary-view {
  visibility: hidden;
}

.match-commentary-feed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
  padding: 0 12px;
  border: 1px solid #26344a;
  border-radius: 9px;
  background: #0a111b;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.commentary-line {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  text-align: center;
  animation: commentaryFadeIn 0.22s ease-out;
}

.match-commentary-feed .commentary-line span {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  color: #d0d8ec;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
}

/* Goal celebration */
.match-commentary-feed.is-goal {
  min-height: 42px;
  max-height: 42px;
}

.match-commentary-feed.is-goal .commentary-line span {
  font-size: 13px;
  font-weight: 800;
  color: var(--goal-flash-text-color, #fff);
  letter-spacing: 0.5px;
}

.match-commentary-feed.is-goal-flashing .commentary-line span {
  animation: goalFlashText 1.4s ease-out forwards;
}

.match-commentary-feed.is-goal-flash {
  animation: goalPulse 0.5s ease-in-out 2, goalFlashBg 0.9s ease-out forwards;
  border-color: var(--goal-flash-color, #C1272D) !important;
}

.match-commentary-feed.is-major .commentary-line span {
  font-weight: 700;
  color: #d0d8ec;
}

@keyframes goalPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes goalFlashBg {
  0% { background: var(--goal-flash-color, #C1272D); }
  100% { background: #0a111b; }
}

@keyframes goalFlashText {
  0%, 45% { color: var(--goal-flash-text-color, #fff); }
  100% { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .match-commentary-feed.is-goal-flash {
    animation: none;
    background: var(--goal-flash-color, #C1272D) !important;
  }

  .match-commentary-feed.is-goal-flashing .commentary-line span {
    animation: none;
  }
}

.commentary-line.heading {
  border-bottom-color: #2a4a6a;
}

.commentary-line.heading span {
  color: #c0d0e8;
  font-weight: 700;
}

.commentary-line span {
  color: #d0d8ec;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

@keyframes commentaryFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smooth fade transition between commentary and 2D */
.match-2d-viewer:not([hidden]) {
  animation: match2dFadeIn 0.35s ease-out;
}

.match-commentary-view:not([hidden]) {
  animation: match2dFadeIn 0.35s ease-out;
}

@keyframes match2dFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.standard-match-tactics > span {
  display: block;
  margin-bottom: 8px;
  color: #8290a6;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

.standard-match-tactics > small {
  display: block;
  min-height: 28px;
  padding: 9px 12px 8px;
  border-top: 1px solid rgba(130, 144, 166, 0.24);
  color: #8290a6;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.standard-tactic-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid #26344a;
  border-radius: 8px;
  background: #0a111b;
}

.standard-tactic-buttons button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px;
  border: 0;
  border-radius: 5px;
  color: #8f9bb0;
  background: transparent;
  font: 700 9px/1.2 Inter, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.standard-tactic-buttons button:hover:not(:disabled) {
  color: #f3f6fb;
  background: #172235;
}

.standard-tactic-buttons button.active {
  color: #fff;
  background: #426fc8;
  box-shadow: 0 5px 16px rgba(66, 111, 200, 0.24);
}

.standard-tactic-buttons button:disabled {
  cursor: default;
  opacity: 0.76;
}

.match-2d-viewer {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 22px;
  overflow: hidden;
  border: 1px solid #2a3b50;
  border-radius: 8px;
  background: #0a111b;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.match-2d-toolbar {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 13px;
  border-bottom: 1px solid #223047;
  background: #0d1623;
}

.match-2d-toolbar > span {
  color: #8494ad;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.match-highlight-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid #28364c;
  border-radius: 6px;
  background: #080f18;
}

.match-highlight-mode button {
  min-height: 28px;
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  color: #7f8da3;
  background: transparent;
  font: 700 8px/1 Inter, sans-serif;
  cursor: pointer;
  transition: color 160ms ease-out, background 160ms ease-out, transform 160ms ease-out;
}

.match-highlight-mode button.active {
  color: #f5f7fb;
  background: #294d8e;
}

.match-highlight-mode button:active {
  transform: scale(0.97);
}

.match-2d-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, rgba(0, 0, 0, 0.035) 12.5% 25%),
    #128349;
  box-shadow: inset 0 0 0 3px rgba(222, 250, 230, 0.58);
  transition: opacity 180ms ease-out, filter 180ms ease-out;
}

.match-2d-pitch.is-highlight-cut {
  opacity: 0.82;
  filter: blur(1px);
}

.match-2d-pitch::before,
.match-2d-pitch::after {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(230, 251, 236, 0.7);
  content: "";
  transform: translateY(-50%);
}

.match-2d-pitch::before { left: 11.5%; }
.match-2d-pitch::after { right: 11.5%; }

.match-2d-halfway {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 2px;
  background: rgba(224, 249, 231, 0.56);
  transform: translateX(-50%);
}

.match-2d-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 19%;
  aspect-ratio: 1;
  border: 2px solid rgba(224, 249, 231, 0.56);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.match-2d-box {
  position: absolute;
  top: 23%;
  z-index: 1;
  width: 17%;
  height: 54%;
  border: 2px solid rgba(224, 249, 231, 0.56);
}

.match-2d-box-home {
  left: 0;
  border-left: 0;
}

.match-2d-box-away {
  right: 0;
  border-right: 0;
}

.match-2d-goal {
  position: absolute;
  top: 39%;
  z-index: 1;
  width: 2.2%;
  height: 22%;
  border: 2px solid rgba(224, 249, 231, 0.72);
}

.match-2d-goal-home { left: 0; border-left: 0; }
.match-2d-goal-away { right: 0; border-right: 0; }

.match-2d-players {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.match-2d-player,
.match-2d-ball {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left var(--move-duration, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1), top var(--move-duration, 700ms) cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: left, top;
}

.match-2d-player {
  width: clamp(14px, 2.6vw, 22px);
  height: clamp(14px, 2.6vw, 22px);
  border: 2px solid rgba(255, 255, 255, 0.82);
  color: #fff;
  font: 800 6px/1 Inter, sans-serif;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
}

.match-2d-player.is-home { background: #7149c6; }
.match-2d-player.is-away { color: #142234; background: #f1f4f8; }

.match-2d-ball {
  z-index: 5;
  width: clamp(7px, 1.25vw, 11px);
  height: clamp(7px, 1.25vw, 11px);
  border: 1px solid #17202c;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.match-2d-event {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  color: #fff;
  background: rgba(8, 15, 25, 0.92);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  transform: translate(-50%, -50%);
  animation: match-2d-event-in 200ms ease-out both;
}

.match-2d-event[hidden] { display: none; }

@keyframes match-2d-event-in {
  from { opacity: 0; transform: translate(-50%, -44%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.match-2d-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 12px;
  color: #8795aa;
  font-size: 10px;
}

.match-2d-footer > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-2d-footer strong {
  color: #7fa4ff;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.45px;
}

.match-analysis {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid #27364c;
  border-radius: 8px;
  background: #0d1623;
}

.match-analysis-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 12px;
  border-bottom: 1px solid #223047;
}

.match-analysis-heading span {
  color: #7799ee;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.match-analysis-heading strong {
  color: #e9edf5;
  font-size: 12px;
}

.match-stats-grid {
  padding: 6px 12px 8px;
  border-bottom: 1px solid #223047;
}

.match-stat-row {
  display: grid;
  grid-template-columns: minmax(42px, 1fr) minmax(104px, 1.45fr) minmax(42px, 1fr);
  align-items: center;
  min-height: 29px;
  color: #8d99ab;
  font-size: 9px;
  text-align: center;
}

.match-stat-row b {
  color: #edf1f7;
  font-family: "DM Mono", monospace;
  font-size: 10px;
}

.match-lineups {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.match-lineup-side {
  min-width: 0;
  padding: 8px 12px 12px;
}

.match-lineup-side + .match-lineup-side {
  border-left: 1px solid #223047;
}

.match-lineup-head {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.match-lineup-flag {
  flex: 0 0 auto;
  width: 32px;
  height: 21px;
}

.match-lineup-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.match-lineup-head strong {
  overflow: hidden;
  color: #edf1f7;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-lineup-head small {
  color: #71819a;
  font: 700 8px/1 "DM Mono", monospace;
}

.match-lineup-side ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-lineup-side li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 24px;
  align-items: center;
  min-height: 27px;
  border-top: 1px solid rgba(42, 56, 78, 0.58);
  color: #d9e0eb;
  font-size: 9px;
}

.match-lineup-side li > span {
  color: #7fa4ff;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 800;
}

.match-lineup-side li > strong {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-lineup-side li > small {
  color: #61df96;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 640px) {
  .standard-match-tactics,
  .match-2d-viewer,
  .match-analysis {
    width: calc(100% - 20px);
  }

  .match-2d-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
  }

  .match-2d-toolbar > span {
    min-height: 14px;
    padding: 2px 3px 0;
  }

  .match-highlight-mode button {
    min-height: 31px;
  }

  .standard-tactic-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .standard-tactic-buttons button {
    min-height: 34px;
    font-size: 8px;
  }

  .match-2d-pitch {
    aspect-ratio: 16 / 9.2;
  }

  .match-2d-player {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
    font-size: 5px;
  }

  .match-2d-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    min-height: 48px;
    padding: 9px 10px;
  }

  .match-2d-footer > span {
    width: 100%;
    white-space: normal;
  }

  .match-analysis-heading {
    padding-inline: 12px;
  }

  .match-stats-grid {
    padding-inline: 12px;
  }

  .match-lineups {
    grid-template-columns: 1fr;
  }

  .match-lineup-side {
    padding-inline: 12px;
  }

  .match-lineup-side + .match-lineup-side {
    border-top: 1px solid #223047;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-2d-player,
  .match-2d-ball,
  .match-2d-event {
    transition-duration: 1ms !important;
    animation: none !important;
  }

  .match-2d-pitch.is-highlight-cut {
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 640px) {
  .stage-round {
    max-width: 130px;
    font-size: 10px;
    letter-spacing: 0.75px;
  }

  .skip-live-control {
    position: static;
    top: auto;
    left: auto;
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    order: 2;
  }

  .skip-live-control .live-control {
    min-width: 42px;
    min-height: 27px;
    padding-inline: 7px;
    font-size: 7px;
  }

  .score-live-controls {
    width: auto;
    gap: 4px;
    transform: translateY(-9px);
  }

  .score-live-controls > .pause-control,
  .score-live-controls > #speedButton {
    order: 1;
  }

  .score-live-controls .live-control {
    min-width: 33px;
    min-height: 27px;
    padding-inline: 6px;
    font-size: 10px;
  }

  .score-live-controls .pause-control {
    min-width: 48px;
  }

  .scoreline {
    transform: translateY(-7px);
  }
}

/* Penalty shootout sequence */
.penalty-stage {
  position: relative;
  z-index: 3;
  width: min(620px, calc(100% - 48px));
  margin: -7px auto 24px;
  padding: 15px 18px 17px;
  border-radius: 15px;
  background: #0a111b;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.penalty-stage[hidden] {
  display: none;
}

.penalty-stage-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  color: #78869c;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
}

.penalty-stage-head > span:last-child {
  text-align: right;
}

.penalty-stage-head strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f2f5f9;
  font-size: 21px;
  letter-spacing: -1px;
}

.penalty-stage-head strong b {
  min-width: 17px;
  font-weight: 500;
  text-align: center;
  transition: color 160ms ease, transform 160ms var(--ease-out);
}

.penalty-stage-head strong b.score-pop {
  color: #78a0ff;
  transform: scale(1.16);
}

.penalty-stage-head strong i {
  color: #59667a;
  font-style: normal;
  font-weight: 400;
}

.penalty-scene {
  position: relative;
  height: 178px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(7, 13, 22, 0.15), rgba(7, 13, 22, 0.66)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 42px, transparent 42px 84px),
    #19382d;
  perspective: 700px;
}

.penalty-scene::before {
  position: absolute;
  bottom: -72px;
  left: 50%;
  width: 270px;
  height: 130px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.penalty-goal {
  position: absolute;
  top: 19px;
  left: 50%;
  width: 224px;
  height: 96px;
  border-top: 3px solid #e5eaf2;
  border-right: 3px solid #e5eaf2;
  border-left: 3px solid #e5eaf2;
  transform: translateX(-50%);
}

.penalty-net {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, #dce5ef 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 18px, #dce5ef 18px 19px);
}

.penalty-keeper,
.penalty-taker {
  position: absolute;
  width: 25px;
  height: 43px;
  transform-origin: 50% 80%;
}

.penalty-keeper {
  bottom: 4px;
  left: calc(50% - 13px);
  z-index: 2;
  color: #f3a65e;
  transition: transform var(--penalty-dive-duration, 520ms) cubic-bezier(0.77, 0, 0.175, 1);
}

.penalty-taker {
  bottom: 8px;
  left: calc(50% + 38px);
  z-index: 4;
  color: #dce4f0;
  transition:
    transform var(--penalty-kicker-duration, 300ms) var(--ease-out),
    opacity var(--penalty-fade-duration, 200ms) ease;
}

.penalty-keeper i,
.penalty-taker i {
  position: absolute;
  top: 0;
  left: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.penalty-keeper b,
.penalty-taker b {
  position: absolute;
  top: 11px;
  left: 7px;
  width: 12px;
  height: 23px;
  border-radius: 5px 5px 3px 3px;
  background: currentColor;
}

.penalty-keeper b::before,
.penalty-taker b::before {
  position: absolute;
  top: 4px;
  left: -14px;
  width: 40px;
  height: 5px;
  border-radius: 4px;
  background: currentColor;
  content: "";
}

.penalty-keeper b::after,
.penalty-taker b::after {
  position: absolute;
  top: 19px;
  left: -5px;
  width: 22px;
  height: 17px;
  box-sizing: border-box;
  border-top: 5px solid currentColor;
  border-right: 5px solid currentColor;
  border-left: 5px solid currentColor;
  border-radius: 4px 4px 2px 2px;
  content: "";
}

.penalty-ball {
  position: absolute;
  bottom: 19px;
  left: calc(50% - 6px);
  z-index: 5;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 37%, #18202a 0 2px, transparent 2.4px),
    radial-gradient(circle at 38% 64%, #18202a 0 2px, transparent 2.4px),
    #f5f7fa;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  transition: transform var(--penalty-flight-duration, 540ms) cubic-bezier(0.77, 0, 0.175, 1);
}

.penalty-scene[data-state="flight"] .penalty-taker,
.penalty-scene[data-state="result"] .penalty-taker {
  opacity: 0.72;
  transform: translate(-16px, -3px) rotate(-12deg);
}

.penalty-scene[data-state="flight"][data-direction="left"] .penalty-ball,
.penalty-scene[data-state="result"][data-direction="left"] .penalty-ball {
  transform: translate(-91px, -96px) scale(0.72);
}

.penalty-scene[data-state="flight"][data-direction="centre"] .penalty-ball,
.penalty-scene[data-state="result"][data-direction="centre"] .penalty-ball {
  transform: translate(0, -96px) scale(0.72);
}

.penalty-scene[data-state="flight"][data-direction="right"] .penalty-ball,
.penalty-scene[data-state="result"][data-direction="right"] .penalty-ball {
  transform: translate(91px, -96px) scale(0.72);
}

.penalty-scene[data-state="flight"][data-result="save"][data-direction="left"] .penalty-ball {
  transform: translate(-66px, -72px) scale(0.7);
}

.penalty-scene[data-state="flight"][data-result="save"][data-direction="centre"] .penalty-ball {
  transform: translate(0, -70px) scale(0.7);
}

.penalty-scene[data-state="flight"][data-result="save"][data-direction="right"] .penalty-ball {
  transform: translate(66px, -72px) scale(0.7);
}

.penalty-scene[data-state="flight"][data-direction="wide-left"] .penalty-ball {
  transform: translate(-132px, -86px) scale(0.73) rotate(-38deg);
}

.penalty-scene[data-state="flight"][data-direction="wide-right"] .penalty-ball {
  transform: translate(132px, -86px) scale(0.73) rotate(38deg);
}

.penalty-scene[data-state="result"][data-result="wide"][data-direction="wide-left"] .penalty-ball {
  transform: translate(-164px, -57px) scale(0.65) rotate(-155deg);
}

.penalty-scene[data-state="result"][data-result="wide"][data-direction="wide-right"] .penalty-ball {
  transform: translate(164px, -57px) scale(0.65) rotate(155deg);
}

.penalty-scene[data-state="result"][data-result="save"][data-direction="left"] .penalty-ball {
  transform: translate(-137px, -56px) scale(0.64) rotate(-160deg);
}

.penalty-scene[data-state="result"][data-result="save"][data-direction="centre"] .penalty-ball {
  transform: translate(57px, -48px) scale(0.66) rotate(150deg);
}

.penalty-scene[data-state="result"][data-result="save"][data-direction="right"] .penalty-ball {
  transform: translate(137px, -56px) scale(0.64) rotate(160deg);
}

.penalty-scene[data-state="flight"][data-dive="left"] .penalty-keeper,
.penalty-scene[data-state="result"][data-dive="left"] .penalty-keeper {
  transform: translate(-68px, -6px) rotate(-64deg);
}

.penalty-scene[data-state="flight"][data-dive="centre"] .penalty-keeper,
.penalty-scene[data-state="result"][data-dive="centre"] .penalty-keeper {
  transform: translateY(-10px) scale(1.06);
}

.penalty-scene[data-state="flight"][data-dive="right"] .penalty-keeper,
.penalty-scene[data-state="result"][data-dive="right"] .penalty-keeper {
  transform: translate(68px, -6px) rotate(64deg);
}

.penalty-scene[data-state="flight"][data-keeper-target="top-left"] .penalty-keeper,
.penalty-scene[data-state="result"][data-keeper-target="top-left"] .penalty-keeper {
  transform: translate(-68px, -18px) rotate(-64deg);
}

.penalty-scene[data-state="flight"][data-keeper-target="bottom-left"] .penalty-keeper,
.penalty-scene[data-state="result"][data-keeper-target="bottom-left"] .penalty-keeper {
  transform: translate(-68px, 2px) rotate(-64deg);
}

.penalty-scene[data-state="flight"][data-keeper-target="top-right"] .penalty-keeper,
.penalty-scene[data-state="result"][data-keeper-target="top-right"] .penalty-keeper {
  transform: translate(68px, -18px) rotate(64deg);
}

.penalty-scene[data-state="flight"][data-keeper-target="bottom-right"] .penalty-keeper,
.penalty-scene[data-state="result"][data-keeper-target="bottom-right"] .penalty-keeper {
  transform: translate(68px, 2px) rotate(64deg);
}

.penalty-scene[data-result="goal"] {
  box-shadow: inset 0 0 0 999px rgba(57, 174, 111, 0.045);
}

.penalty-scene[data-result="save"],
.penalty-scene[data-result="wide"] {
  box-shadow: inset 0 0 0 999px rgba(223, 91, 82, 0.045);
}

.penalty-scene.is-resetting .penalty-ball,
.penalty-scene.is-resetting .penalty-keeper,
.penalty-scene.is-resetting .penalty-taker {
  transition: none;
}

.penalty-call {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-height: 20px;
  margin-top: 10px;
}

.penalty-call strong {
  color: #f1f4f8;
  font-size: 12px;
}

.penalty-call span {
  color: #8794a8;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.penalty-ledgers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 10px;
}

.penalty-ledgers > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.penalty-ledgers > div.away {
  justify-content: flex-end;
}

.penalty-ledgers span {
  overflow: hidden;
  color: #9ba7b9;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-marks {
  display: flex;
  gap: 4px;
}

.penalty-mark {
  display: block;
  width: 11px;
  height: 4px;
  border-radius: 999px;
  background: #293344;
}

.penalty-mark.goal {
  background: #5f8cff;
}

.penalty-mark.miss {
  background: #d75b54;
}

.match-stage.is-shootout .team-match-events {
  display: none;
}

.match-stage.is-shootout .matchup {
  padding-bottom: 8px;
}

@media (max-width: 640px) {
  .penalty-stage {
    width: calc(100% - 20px);
    margin-bottom: 12px;
    padding: 12px;
  }

  .penalty-stage-head {
    gap: 7px;
    font-size: 6px;
    letter-spacing: 0.45px;
  }

  .penalty-stage-head strong {
    gap: 5px;
    font-size: 17px;
  }

  .penalty-scene {
    height: 150px;
  }

  .penalty-goal {
    width: 190px;
    height: 82px;
  }

  .penalty-scene[data-state="flight"][data-direction="left"] .penalty-ball,
  .penalty-scene[data-state="result"][data-direction="left"] .penalty-ball {
    transform: translate(-76px, -82px) scale(0.72);
  }

  .penalty-scene[data-state="flight"][data-direction="centre"] .penalty-ball,
  .penalty-scene[data-state="result"][data-direction="centre"] .penalty-ball {
    transform: translate(0, -82px) scale(0.72);
  }

  .penalty-scene[data-state="flight"][data-direction="right"] .penalty-ball,
  .penalty-scene[data-state="result"][data-direction="right"] .penalty-ball {
    transform: translate(76px, -82px) scale(0.72);
  }

  .penalty-scene[data-state="flight"][data-result="save"][data-direction="left"] .penalty-ball {
    transform: translate(-55px, -61px) scale(0.7);
  }

  .penalty-scene[data-state="flight"][data-result="save"][data-direction="centre"] .penalty-ball {
    transform: translate(0, -59px) scale(0.7);
  }

  .penalty-scene[data-state="flight"][data-result="save"][data-direction="right"] .penalty-ball {
    transform: translate(55px, -61px) scale(0.7);
  }

  .penalty-scene[data-state="flight"][data-direction="wide-left"] .penalty-ball {
    transform: translate(-111px, -73px) scale(0.73) rotate(-38deg);
  }

  .penalty-scene[data-state="flight"][data-direction="wide-right"] .penalty-ball {
    transform: translate(111px, -73px) scale(0.73) rotate(38deg);
  }

  .penalty-scene[data-state="result"][data-result="wide"][data-direction="wide-left"] .penalty-ball {
    transform: translate(-134px, -49px) scale(0.65) rotate(-155deg);
  }

  .penalty-scene[data-state="result"][data-result="wide"][data-direction="wide-right"] .penalty-ball {
    transform: translate(134px, -49px) scale(0.65) rotate(155deg);
  }

  .penalty-scene[data-state="result"][data-result="save"][data-direction="left"] .penalty-ball {
    transform: translate(-113px, -47px) scale(0.64) rotate(-160deg);
  }

  .penalty-scene[data-state="result"][data-result="save"][data-direction="centre"] .penalty-ball {
    transform: translate(48px, -41px) scale(0.66) rotate(150deg);
  }

  .penalty-scene[data-state="result"][data-result="save"][data-direction="right"] .penalty-ball {
    transform: translate(113px, -47px) scale(0.64) rotate(160deg);
  }

  .penalty-call {
    align-items: center;
    flex-direction: column;
    gap: 2px;
  }

  .penalty-call strong {
    font-size: 10px;
  }

  .penalty-ledgers {
    gap: 9px;
  }

  .penalty-ledgers > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .penalty-ledgers > div.away {
    align-items: flex-end;
  }
}

/* Reveal long matchup names without making every country move. */
.team h2.team-name {
  width: min(100%, 290px);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.team-name > span {
  display: block;
  width: max-content;
  min-width: 100%;
  text-align: center;
  transform: translateX(0);
  will-change: transform;
}

.team h2.team-name.is-long {
  font-size: clamp(19px, 2.15vw, 29px);
  letter-spacing: -0.9px;
}

.team-name.is-overflowing > span {
  min-width: 0;
  text-align: left;
  animation: team-name-pan var(--team-name-duration, 8s) cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes team-name-pan {
  0%,
  17% {
    transform: translateX(0);
  }

  44%,
  66% {
    transform: translateX(calc(-1 * var(--team-name-overflow, 0px)));
  }

  93%,
  100% {
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  .team h2.team-name.is-long {
    font-size: clamp(13px, 4vw, 18px);
    letter-spacing: -0.45px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-name.is-overflowing > span {
    max-width: 100%;
    overflow: hidden;
    animation: none;
    text-overflow: ellipsis;
  }
}

/* Timelines grow downwards without shifting the opposing team header. */
.matchup:has(.team-match-events:not([hidden])) {
  align-items: start;
}

.matchup:has(.team-match-events:not([hidden])) .team {
  justify-content: flex-start;
}

/* One-line fixture scorecards: flag, team, score − score, team, flag. */
.fixture {
  position: relative;
  display: flex;
  min-height: 68px;
  align-items: center;
  padding: 13px 14px 22px;
}

.fixture-scoreline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.fixture-team {
  display: grid;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 10px;
}

.fixture-team-home {
  grid-template-columns: 28px minmax(0, 1fr) 18px;
}

.fixture-team-away {
  grid-template-columns: 18px minmax(0, 1fr) 28px;
}

.fixture-team .flag {
  display: block;
  width: 28px;
  height: 18px;
}

.fixture-team .name {
  min-width: 0;
}

.fixture-team-away .name {
  text-align: right;
}

.fixture-team b {
  min-width: 18px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.fixture-separator {
  color: #566174;
  font-family: "DM Mono", monospace;
  font-size: 13px;
}

.fixture-meta {
  position: absolute;
  bottom: 7px;
  left: 50%;
  align-self: auto;
  font-size: 6px;
  letter-spacing: 0.55px;
  writing-mode: horizontal-tb;
  transform: translateX(-50%);
}

@media (max-width: 640px) {
  .board-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .fixture {
    min-height: 62px;
    padding-inline: 10px;
  }

  .fixture-scoreline {
    gap: 5px;
  }

  .fixture-team {
    gap: 5px;
    font-size: 8px;
  }

  .fixture-team-home {
    grid-template-columns: 23px minmax(0, 1fr) 15px;
  }

  .fixture-team-away {
    grid-template-columns: 15px minmax(0, 1fr) 23px;
  }

  .fixture-team .flag {
    width: 23px;
    height: 15px;
  }

  .fixture-team b,
  .fixture-separator {
    font-size: 10px;
  }

}

/* Compact fixture cards for the large early rounds. */
.fixture-grid:not(.bracket-mode) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.fixture-grid:not(.bracket-mode) .fixture {
  display: block;
  min-height: 112px;
  padding: 13px 15px 14px;
}

.fixture-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  color: #8793a6;
  font-size: 9px;
}

.fixture-card-head small {
  color: #5f6a7c;
  font-family: "DM Mono", monospace;
  font-size: 6px;
  letter-spacing: 0.55px;
}

.fixture-teams {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.fixture .fixture-team {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 8px;
  align-items: center;
  width: 100%;
  gap: 9px;
  min-width: 0;
  color: #798598;
  font-size: 11px;
}

.fixture .fixture-team .flag {
  display: block;
  width: 30px;
  height: 20px;
}

.fixture .fixture-team .name {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture .fixture-team b {
  display: flex;
  min-width: 18px;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  overflow: hidden;
  color: #9aa5b6;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture .fixture-team b small {
  color: inherit;
  font-size: 0.78em;
  font-weight: 500;
}

.fixture .fixture-team.winner {
  color: #f1f4f8;
}

.fixture .fixture-team.winner b {
  color: #f1f4f8;
}

.fixture .fixture-team.winner .name::after {
  content: none;
}

.fixture-winner-marker {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid transparent;
}

.fixture-team.winner .fixture-winner-marker {
  border-right-color: #f1f4f8;
}

.fixture-tbc-flag {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 4px;
  color: #657084;
  background: #202938;
  font-family: "DM Mono", monospace;
  font-size: 8px;
}

/* Connected World Cup-style bracket from the Round of 16 onward. */
.fixture-grid.bracket-mode {
  display: block;
  overflow: visible;
}

.load-more[hidden] {
  display: none;
}

.bracket-shell {
  overflow-x: auto;
  padding: 2px 3px 16px;
  scrollbar-color: #2a3546 transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.bracket-shell::-webkit-scrollbar {
  height: 6px;
}

.bracket-shell::-webkit-scrollbar-track {
  background: transparent;
}

.bracket-shell::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #3a475b;
}

.bracket-heads,
.bracket-canvas {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  column-gap: 40px;
  min-width: 920px;
}

.bracket-heads {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 42px;
  padding: 0;
  align-items: center;
  color: #8c98aa;
  background: #101620;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.bracket-heads span {
  padding: 0 12px;
}

.bracket-canvas {
  position: relative;
  grid-template-rows: repeat(16, 48px);
  padding-top: 16px;
  padding-bottom: 16px;
}

.fixture.bracket-fixture {
  z-index: 2;
  display: block;
  height: 74px;
  min-height: 0;
  align-self: center;
  padding: 10px 11px;
  overflow: visible;
}

.bracket-fixture .fixture-teams {
  gap: 7px;
}

.bracket-fixture .fixture-team {
  grid-template-columns: 25px minmax(0, 1fr) auto 7px;
  gap: 7px;
  font-size: 9px;
}

.bracket-fixture .fixture-team .flag {
  width: 25px;
  height: 16px;
}

.bracket-fixture .fixture-team b {
  font-size: 12px;
}

.bracket-fixture.placeholder {
  opacity: 0.46;
  cursor: default;
}

.bracket-fixture[data-connects="true"]::after {
  position: absolute;
  top: 50%;
  right: -20px;
  width: 20px;
  border-top: 1px solid #334052;
  content: "";
}

.bracket-connector {
  position: relative;
  z-index: 1;
  width: 20px;
  justify-self: end;
  margin-right: -20px;
  pointer-events: none;
}

.bracket-connector::before {
  position: absolute;
  top: var(--connector-inset);
  right: 0;
  bottom: var(--connector-inset);
  width: 20px;
  border-top: 1px solid #334052;
  border-right: 1px solid #334052;
  border-bottom: 1px solid #334052;
  content: "";
}

.bracket-connector::after {
  position: absolute;
  top: 50%;
  right: -20px;
  width: 20px;
  border-top: 1px solid #334052;
  content: "";
}

@media (max-width: 1100px) {
  .fixture-grid:not(.bracket-mode) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .fixture-grid:not(.bracket-mode) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Euro squad groups stay content-height and use flat broadcast-style dividers. */
body.retro-mode-active.retro-euro-2016-active #mainContent .retro-squad-view.is-compact-squad .retro-squad-groups {
  align-items: start;
}

body.retro-mode-active.retro-euro-2016-active #mainContent .retro-squad-view.is-compact-squad .retro-squad-position-group {
  align-self: start;
  height: auto;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-euro-2016-active #mainContent .retro-squad-view.is-compact-squad .retro-squad-position-group > h2 {
  min-height: 38px;
  margin: 0 0 4px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid #1cc7ee;
  border-radius: 0 !important;
  color: #f8fdff;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-euro-2016-active #mainContent .retro-squad-view.is-compact-squad .retro-squad-position-group > h2 b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  flex: 0 0 24px;
  border: 1px solid #ffed82;
  border-radius: 0;
  color: #020d32;
  background: #ffdc38;
  font: 900 11px/1 "DM Mono", monospace;
}

body.retro-mode-active.retro-euro-2016-active #mainContent .retro-squad-view.is-compact-squad .retro-squad-row,
body.retro-mode-active.retro-euro-2016-active #mainContent .retro-squad-view.is-compact-squad .retro-squad-row:nth-child(even) {
  border-right: 0;
  border-left: 0;
  border-radius: 0 !important;
}

/* Euro 2016 tournament archive: sharp, blue and visually tied to the simulator. */
.profile-tournament-history-card[data-history-theme="2016"] {
  --profile-history-accent: #ffdc38;
  --profile-history-surface: #063f91;
  border-color: rgba(111, 220, 249, 0.48);
  border-radius: 0;
  box-shadow: inset 4px 0 #1cc7ee;
}

.profile-tournament-history-card[data-history-theme="2016"] .profile-history-edition {
  border-radius: 0;
  background: #032b70;
}

#championSaveTournament[data-history-theme="2016"] {
  border: 1px solid #92ebff;
  border-radius: 0;
  color: #f8fdff;
  background: #0756aa;
  box-shadow: 0 5px 0 #032a6a;
}

#championSaveTournament[data-history-theme="2016"].is-saved {
  border-color: #ffdc38;
  color: #020d32;
  background: #ffdc38;
  box-shadow: 0 5px 0 #a98700;
}

.tournament-history-screen[data-history-theme="2016"] {
  --history-accent: #ffdc38;
  --history-accent-strong: #1cc7ee;
  --history-accent-ink: #020d32;
  --history-bg: #043878;
  --history-bg-deep: #020d32;
  --history-surface: rgba(3, 31, 88, 0.97);
  --history-surface-soft: rgba(7, 86, 170, 0.9);
  --history-line: rgba(111, 220, 249, 0.46);
  --history-text: #f8fdff;
  --history-muted: #bfeeff;
  background:
    radial-gradient(circle at 86% 8%, rgba(98, 219, 255, 0.28), transparent 27%),
    radial-gradient(circle at 12% 90%, rgba(0, 91, 196, 0.4), transparent 32%),
    repeating-radial-gradient(circle at 74% 28%, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #020c2d 0%, #043878 52%, #078fc4 100%);
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-header {
  border-color: rgba(111, 220, 249, 0.5);
  background: rgba(2, 13, 50, 0.96);
  backdrop-filter: none;
}

.tournament-history-screen[data-history-theme="2016"] :is(
  .tournament-history-back,
  .tournament-history-brand-mark,
  .tournament-history-hero,
  .tournament-history-summary article,
  .tournament-history-rounds,
  .tournament-history-match,
  .tournament-history-fixture,
  .tournament-history-champion-flag.country-flag,
  .tournament-history-match-flag.country-flag
) {
  border-radius: 0;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-back {
  border-color: rgba(146, 235, 255, 0.58);
  background: #032b70;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-brand-mark {
  border: 1px solid #92ebff;
  color: #020d32;
  background: #ffdc38;
  box-shadow: inset 0 -5px #1cc7ee;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-hero {
  border: 2px solid #1cc7ee;
  background: #031f58;
  box-shadow: 10px 10px 0 rgba(255, 220, 56, 0.28);
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-edition {
  background:
    linear-gradient(145deg, rgba(28, 199, 238, 0.18), transparent 58%),
    #043f91;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-champion {
  background:
    radial-gradient(circle at 42% 50%, rgba(28, 199, 238, 0.2), transparent 34%),
    linear-gradient(115deg, #052c72, #0756aa);
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-summary article {
  border-color: rgba(111, 220, 249, 0.48);
  background: #032b70;
  box-shadow: inset 0 3px #1cc7ee;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-summary article:nth-child(even) {
  background: #06458f;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-rounds,
.tournament-history-screen[data-history-theme="2016"] .tournament-history-match,
.tournament-history-screen[data-history-theme="2016"] .tournament-history-fixture {
  border-color: rgba(111, 220, 249, 0.48);
  background: #031f58;
  box-shadow: none;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-rounds button {
  border-color: rgba(111, 220, 249, 0.28);
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-rounds button.is-active,
.tournament-history-screen[data-history-theme="2016"] .tournament-history-fixture.is-selected {
  color: #f8fdff;
  background: #0756aa;
  box-shadow: inset 5px 0 #ffdc38;
}

/* Reverted: this mistakenly targeted tournament screens instead of the simulator menu. */
@media (width < 0px) {
/* Euro 2016 section artwork final cascade lock. */
body.retro-mode-active.retro-euro-2016-active {
  --e16-section-art:
    radial-gradient(circle at 88% 10%, rgba(111, 225, 255, 0.18), transparent 30%),
    radial-gradient(circle at 10% 96%, rgba(0, 116, 218, 0.22), transparent 34%),
    repeating-radial-gradient(circle at 92% 6%, transparent 0 19px, rgba(151, 235, 255, 0.055) 20px 21px, transparent 22px 38px),
    linear-gradient(145deg, rgba(8, 75, 151, 0.44), rgba(3, 31, 88, 0.96) 56%, rgba(2, 18, 61, 0.98));
  --e16-section-art-strong:
    radial-gradient(circle at 84% 14%, rgba(146, 235, 255, 0.25), transparent 27%),
    repeating-radial-gradient(circle at 88% 10%, transparent 0 25px, rgba(176, 242, 255, 0.07) 26px 27px, transparent 28px 48px),
    linear-gradient(128deg, rgba(7, 104, 188, 0.98), rgba(3, 42, 106, 0.98) 52%, rgba(2, 19, 64, 0.99));
}

body.retro-mode-active.retro-euro-2016-active .retro-tournament-heading {
  overflow: hidden;
  padding-left: 24px;
  border: 1px solid rgba(111, 220, 249, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% 14%, rgba(146, 235, 255, 0.2), transparent 24%),
    repeating-radial-gradient(circle at 86% 16%, transparent 0 24px, rgba(176, 242, 255, 0.06) 25px 26px, transparent 27px 44px),
    linear-gradient(112deg, rgba(3, 31, 88, 0.72), rgba(6, 92, 169, 0.36));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 16px 34px rgba(0, 9, 43, 0.2);
}

body.retro-mode-active.retro-euro-2016-active .retro-view-tabs {
  background:
    radial-gradient(circle at 76% 0%, rgba(28, 199, 238, 0.16), transparent 38%),
    repeating-linear-gradient(118deg, transparent 0 28px, rgba(146, 235, 255, 0.035) 29px 30px),
    rgba(2, 19, 64, 0.82);
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .match-stage,
  .round-board,
  .panel,
  .match-analysis,
  .standard-match-tactics,
  .story-card
),
body.retro-mode-active.retro-euro-2016-active :is(
  .retro-group-table,
  .retro-squad-view,
  .retro-lineups-view,
  .retro-match-lineups-panel,
  .retro-lineup-side,
  .retro-squad-position-group,
  .retro-lineup-tabs,
  .retro-manager-lineup,
  .retro-live-ratings-side
) {
  background: var(--e16-section-art);
  background-color: #031f58;
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .panel-heading,
  .match-analysis-heading,
  .retro-table-head,
  .retro-squad-heading,
  .retro-manager-lineup > header,
  .retro-live-ratings-side > header
),
body.retro-mode-active.retro-euro-2016-active :is(
  .retro-squad-position-group > h2,
  .retro-lineup-side header
) {
  background:
    radial-gradient(circle at 90% 20%, rgba(146, 235, 255, 0.18), transparent 34%),
    repeating-linear-gradient(118deg, transparent 0 24px, rgba(193, 247, 255, 0.045) 25px 26px),
    linear-gradient(90deg, rgba(7, 88, 167, 0.98), rgba(4, 50, 116, 0.98));
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .fixture,
  .retro-table-row,
  .retro-squad-row,
  .retro-lineup-side li,
  .retro-manager-player,
  .golden-boot-player
) {
  background-image:
    radial-gradient(circle at 96% 0%, rgba(146, 235, 255, 0.09), transparent 38%),
    linear-gradient(110deg, rgba(7, 91, 167, 0.14), transparent 48%);
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  #championStage,
  .penalty-stage,
  .match-penalty-overlay
) {
  background: var(--e16-section-art-strong);
  background-color: #031f58;
}

body.retro-mode-active.retro-euro-2016-active :is(
  .modal,
  .confirm-modal,
  .snapshot-modal,
  .achievement-unlock-modal
) {
  background:
    radial-gradient(circle at 94% 4%, rgba(146, 235, 255, 0.17), transparent 30%),
    repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, rgba(176, 242, 255, 0.05) 23px 24px, transparent 25px 42px),
    linear-gradient(145deg, rgba(6, 74, 146, 0.99), rgba(2, 17, 58, 0.99));
}

.tournament-history-screen[data-history-theme="2016"] :is(
  .tournament-history-hero,
  .tournament-history-summary article,
  .tournament-history-rounds,
  .tournament-history-match,
  .tournament-history-fixture
) {
  background-image:
    radial-gradient(circle at 90% 8%, rgba(146, 235, 255, 0.13), transparent 32%),
    repeating-radial-gradient(circle at 96% 2%, transparent 0 20px, rgba(176, 242, 255, 0.04) 21px 22px, transparent 23px 38px),
    linear-gradient(145deg, rgba(7, 78, 154, 0.28), rgba(3, 31, 88, 0.96));
}

@media (max-width: 700px) {
  body.retro-mode-active.retro-euro-2016-active .retro-tournament-heading {
    padding-left: 18px;
    background-size: auto, 240px 240px, auto;
  }

  body.retro-mode-active.retro-euro-2016-active #mainContent :is(
    .match-stage,
    .round-board,
    .panel,
    .match-analysis,
    .standard-match-tactics,
    .story-card
  ),
  body.retro-mode-active.retro-euro-2016-active :is(
    .retro-group-table,
    .retro-squad-view,
    .retro-lineups-view,
    .retro-match-lineups-panel,
    .retro-manager-lineup,
    .retro-live-ratings-side
  ) {
    background-size: auto, auto, 260px 260px, auto;
  }
}

}

@media (width < 0px) {
/* Euro 2016 section artwork: carry the simulator-card broadcast rings through every view. */
body.retro-mode-active.retro-euro-2016-active {
  --e16-section-art:
    radial-gradient(circle at 88% 10%, rgba(111, 225, 255, 0.18), transparent 30%),
    radial-gradient(circle at 10% 96%, rgba(0, 116, 218, 0.22), transparent 34%),
    repeating-radial-gradient(circle at 92% 6%, transparent 0 19px, rgba(151, 235, 255, 0.055) 20px 21px, transparent 22px 38px),
    linear-gradient(145deg, rgba(8, 75, 151, 0.44), rgba(3, 31, 88, 0.96) 56%, rgba(2, 18, 61, 0.98));
  --e16-section-art-strong:
    radial-gradient(circle at 84% 14%, rgba(146, 235, 255, 0.25), transparent 27%),
    repeating-radial-gradient(circle at 88% 10%, transparent 0 25px, rgba(176, 242, 255, 0.07) 26px 27px, transparent 28px 48px),
    linear-gradient(128deg, rgba(7, 104, 188, 0.98), rgba(3, 42, 106, 0.98) 52%, rgba(2, 19, 64, 0.99));
}

body.retro-mode-active.retro-euro-2016-active .retro-tournament-heading {
  overflow: hidden;
  padding-left: 24px;
  border: 1px solid rgba(111, 220, 249, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% 14%, rgba(146, 235, 255, 0.2), transparent 24%),
    repeating-radial-gradient(circle at 86% 16%, transparent 0 24px, rgba(176, 242, 255, 0.06) 25px 26px, transparent 27px 44px),
    linear-gradient(112deg, rgba(3, 31, 88, 0.72), rgba(6, 92, 169, 0.36));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 16px 34px rgba(0, 9, 43, 0.2);
}

body.retro-mode-active.retro-euro-2016-active .retro-view-tabs {
  background:
    radial-gradient(circle at 76% 0%, rgba(28, 199, 238, 0.16), transparent 38%),
    repeating-linear-gradient(118deg, transparent 0 28px, rgba(146, 235, 255, 0.035) 29px 30px),
    rgba(2, 19, 64, 0.82);
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .match-stage,
  .round-board,
  .panel,
  .match-analysis,
  .standard-match-tactics,
  .story-card
),
body.retro-mode-active.retro-euro-2016-active :is(
  .retro-group-table,
  .retro-squad-view,
  .retro-lineups-view,
  .retro-match-lineups-panel,
  .retro-lineup-side,
  .retro-squad-position-group,
  .retro-lineup-tabs,
  .retro-manager-lineup,
  .retro-live-ratings-side
) {
  background: var(--e16-section-art);
  background-color: #031f58;
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .panel-heading,
  .match-analysis-heading,
  .retro-table-head,
  .retro-squad-heading,
  .retro-manager-lineup > header,
  .retro-live-ratings-side > header
),
body.retro-mode-active.retro-euro-2016-active :is(
  .retro-squad-position-group > h2,
  .retro-lineup-side header
) {
  background:
    radial-gradient(circle at 90% 20%, rgba(146, 235, 255, 0.18), transparent 34%),
    repeating-linear-gradient(118deg, transparent 0 24px, rgba(193, 247, 255, 0.045) 25px 26px),
    linear-gradient(90deg, rgba(7, 88, 167, 0.98), rgba(4, 50, 116, 0.98));
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .fixture,
  .retro-table-row,
  .retro-squad-row,
  .retro-lineup-side li,
  .retro-manager-player,
  .golden-boot-player
) {
  background-image:
    radial-gradient(circle at 96% 0%, rgba(146, 235, 255, 0.09), transparent 38%),
    linear-gradient(110deg, rgba(7, 91, 167, 0.14), transparent 48%);
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  #championStage,
  .penalty-stage,
  .match-penalty-overlay
) {
  background: var(--e16-section-art-strong);
  background-color: #031f58;
}

body.retro-mode-active.retro-euro-2016-active .modal,
body.retro-mode-active.retro-euro-2016-active .confirm-modal,
body.retro-mode-active.retro-euro-2016-active .snapshot-modal,
body.retro-mode-active.retro-euro-2016-active .achievement-unlock-modal {
  background:
    radial-gradient(circle at 94% 4%, rgba(146, 235, 255, 0.17), transparent 30%),
    repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, rgba(176, 242, 255, 0.05) 23px 24px, transparent 25px 42px),
    linear-gradient(145deg, rgba(6, 74, 146, 0.99), rgba(2, 17, 58, 0.99));
}

.tournament-history-screen[data-history-theme="2016"] :is(
  .tournament-history-hero,
  .tournament-history-summary article,
  .tournament-history-rounds,
  .tournament-history-match,
  .tournament-history-fixture
) {
  background-image:
    radial-gradient(circle at 90% 8%, rgba(146, 235, 255, 0.13), transparent 32%),
    repeating-radial-gradient(circle at 96% 2%, transparent 0 20px, rgba(176, 242, 255, 0.04) 21px 22px, transparent 23px 38px),
    linear-gradient(145deg, rgba(7, 78, 154, 0.28), rgba(3, 31, 88, 0.96));
}

@media (max-width: 700px) {
  body.retro-mode-active.retro-euro-2016-active .retro-tournament-heading {
    padding-left: 18px;
    background-size: auto, 240px 240px, auto;
  }

  body.retro-mode-active.retro-euro-2016-active #mainContent :is(
    .match-stage,
    .round-board,
    .panel,
    .match-analysis,
    .standard-match-tactics,
    .story-card
  ),
  body.retro-mode-active.retro-euro-2016-active :is(
    .retro-group-table,
    .retro-squad-view,
    .retro-lineups-view,
    .retro-match-lineups-panel,
    .retro-manager-lineup,
    .retro-live-ratings-side
  ) {
    background-size: auto, auto, 260px 260px, auto;
  }
}

}

/* The retro squad screen lives outside #mainContent. */
body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-groups {
  align-items: start;
}

body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-position-group {
  align-self: start;
  height: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-position-group > h2 {
  min-height: 38px;
  margin: 0 0 4px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid #1cc7ee;
  border-radius: 0;
  color: #f8fdff;
  background: transparent;
  box-shadow: none;
}

body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-position-group > h2 b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  flex: 0 0 24px;
  border: 1px solid #ffed82;
  border-radius: 0;
  color: #020d32;
  background: #ffdc38;
  font: 900 11px/1 "DM Mono", monospace;
}

body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-row,
body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-row:nth-child(even) {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.retro-mode-active.retro-euro-2016-active {
  --e16-section-art:
    radial-gradient(circle at 88% 10%, rgba(111, 225, 255, 0.18), transparent 30%),
    radial-gradient(circle at 10% 96%, rgba(0, 116, 218, 0.22), transparent 34%),
    repeating-radial-gradient(circle at 92% 6%, transparent 0 19px, rgba(151, 235, 255, 0.055) 20px 21px, transparent 22px 38px),
    linear-gradient(145deg, rgba(8, 75, 151, 0.44), rgba(3, 31, 88, 0.96) 56%, rgba(2, 18, 61, 0.98));
  --e16-section-art-strong:
    radial-gradient(circle at 84% 14%, rgba(146, 235, 255, 0.25), transparent 27%),
    repeating-radial-gradient(circle at 88% 10%, transparent 0 25px, rgba(176, 242, 255, 0.07) 26px 27px, transparent 28px 48px),
    linear-gradient(128deg, rgba(7, 104, 188, 0.98), rgba(3, 42, 106, 0.98) 52%, rgba(2, 19, 64, 0.99));
}

body.retro-mode-active.retro-euro-2016-active #mainContent :is(
  .match-stage,
  .round-board,
  .panel,
  .match-analysis
),
body.retro-mode-active.retro-euro-2016-active :is(
  .retro-group-table,
  .retro-squad-view,
  .retro-lineups-view,
  .retro-manager-lineup
) {
  background: var(--e16-section-art);
  background-color: #031f58;
}

.tournament-history-screen[data-history-theme="2016"] :is(
  .tournament-history-hero,
  .tournament-history-summary article,
  .tournament-history-rounds,
  .tournament-history-match,
  .tournament-history-fixture
) {
  background-image:
    radial-gradient(circle at 90% 8%, rgba(146, 235, 255, 0.13), transparent 32%),
    repeating-radial-gradient(circle at 96% 2%, transparent 0 20px, rgba(176, 242, 255, 0.04) 21px 22px, transparent 23px 38px),
    linear-gradient(145deg, rgba(7, 78, 154, 0.28), rgba(3, 31, 88, 0.96));
}

body.retro-mode-active.retro-euro-2016-active .retro-squad-view.is-compact-squad .retro-squad-position-group {
  background: transparent;
}

.tournament-history-screen[data-history-theme="2016"] .tournament-history-fixture:active,
.profile-tournament-history-card[data-history-theme="2016"]:active {
  transform: scale(0.98);
}

/* Retro search stays above the bracket and inherits the active World Cup theme. */
.retro-mode-active #mainContent .round-board,
.retro-mode-active #mainContent .section-heading,
.retro-mode-active #mainContent .board-actions,
.retro-mode-active #mainContent .team-filter-control {
  overflow: visible;
}

.retro-mode-active #mainContent .section-heading {
  position: relative;
  z-index: 20;
}

.retro-mode-active #mainContent .team-filter-control {
  z-index: 30;
}

.retro-mode-active:not(.retro-2022-active) #mainContent .team-filter-control .search-result-popover {
  z-index: 40;
  overflow: hidden;
  border: 2px solid #f6d12a;
  border-radius: 10px;
  color: #fffce5;
  background: #075b40;
  box-shadow: 7px 8px 0 rgba(0, 72, 104, 0.52), 0 18px 38px rgba(0, 35, 25, 0.34);
  pointer-events: auto;
}

.retro-mode-active:not(.retro-2022-active) #mainContent .team-filter-control .search-result {
  border-bottom-color: rgba(246, 209, 42, 0.24);
  color: #fffce5;
  background: #075b40;
}

.retro-mode-active:not(.retro-2022-active) #mainContent .team-filter-control .search-result small {
  color: #cae6c9;
}

.retro-mode-active:not(.retro-2022-active) #mainContent .team-filter-control .search-result:hover {
  background: #08734d;
}

.retro-2018-active #mainContent .team-filter-control .search-result-popover {
  border-color: #e9c477;
  color: #fff4d6;
  background: #075f9f;
  box-shadow: 7px 8px 0 rgba(100, 9, 25, 0.58), 0 18px 38px rgba(44, 3, 12, 0.34);
}

.retro-2018-active #mainContent .team-filter-control .search-result {
  border-bottom-color: rgba(233, 196, 119, 0.3);
  color: #fff4d6;
  background: #075f9f;
}

.retro-2018-active #mainContent .team-filter-control .search-result small {
  color: #c5def1;
}

.retro-2018-active #mainContent .team-filter-control .search-result:hover {
  background: #0875bd;
}

.retro-mode-active #mainContent .fixture-grid.retro-group-match-history {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .retro-mode-active #mainContent .fixture-grid.retro-group-match-history {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .retro-mode-active #mainContent .fixture-grid.retro-group-match-history {
    grid-template-columns: 1fr;
  }

  .retro-mode-active #mainContent .team-filter-control .search-result-popover {
    right: 0;
    left: auto;
    width: min(100%, 320px);
  }
}

@media (max-width: 640px) {
  .fixture-grid:not(.bracket-mode) .fixture {
    min-height: 104px;
    padding: 12px;
  }

  .fixture-card-head {
    margin-bottom: 9px;
    font-size: 8px;
  }

  .fixture .fixture-team {
    grid-template-columns: 27px minmax(0, 1fr) auto 7px;
    gap: 7px;
    font-size: 10px;
  }

  .fixture .fixture-team .flag {
    width: 27px;
    height: 18px;
  }

  .fixture .fixture-team b {
    font-size: 13px;
  }

  .bracket-heads,
  .bracket-canvas {
    grid-template-columns: repeat(4, 180px);
    min-width: 840px;
  }
}

/* Dominant-foot penalty stance and clearer shootout results. */
.penalty-scene[data-foot="right"] .penalty-taker {
  left: calc(50% - 63px);
}

.penalty-scene[data-foot="left"] .penalty-taker {
  left: calc(50% + 38px);
}

.penalty-scene[data-state="flight"][data-foot="right"] .penalty-taker,
.penalty-scene[data-state="result"][data-foot="right"] .penalty-taker {
  transform: translate(16px, -3px) rotate(12deg);
}

.penalty-scene[data-state="flight"][data-foot="left"] .penalty-taker,
.penalty-scene[data-state="result"][data-foot="left"] .penalty-taker {
  transform: translate(-16px, -3px) rotate(-12deg);
}

.penalty-marks {
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 9px;
}

.penalty-mark {
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid #3b4659;
  border-radius: 50%;
  background: transparent;
}

.penalty-mark.goal {
  border-color: #39b86f;
  background: #39b86f;
  box-shadow: 0 0 8px rgba(57, 184, 111, 0.18);
}

.penalty-mark.miss {
  border-color: #df5a55;
  background: #df5a55;
  box-shadow: 0 0 8px rgba(223, 90, 85, 0.16);
}

/* Completed-round navigation. */
.sidebar {
  flex-direction: row;
}

.round-nav {
  height: 36px;
  align-items: center;
}

.round-link {
  min-height: 32px;
  align-items: center;
}

.history-round-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #b9c9f5;
  background: #1a2330;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.history-round-button[hidden] {
  display: none;
}

.history-round-button:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .history-round-button:hover {
    color: #fff;
    background: #202c3e;
  }
}

@media (max-width: 850px) {
  .sidebar {
    flex-direction: column;
  }

  .round-nav {
    height: auto;
    align-items: stretch;
  }

}

@media (min-width: 851px) {
  .round-nav {
    display: none;
  }
}

/* Golden Boot — compact enough to stay useful beside every round. */
.team-filter-control {
  position: relative;
  flex: 0 0 auto;
}

.team-filter-control.active .team-filter-search {
  display: none;
}

.team-filter-search {
  width: 180px;
  height: 34px;
}

.team-filter-chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: #e9eef8;
  background: #202a3a;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}

.team-filter-chip[hidden] {
  display: none;
}

.team-filter-chip:active {
  transform: scale(0.97);
}

.team-filter-check {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 4px;
  color: #0d1420;
  background: #78a0ff;
  font-size: 9px;
  font-weight: 900;
}

.team-filter-flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
}

.team-filter-clear {
  margin-left: 2px;
  color: #8f9bad;
  font-size: 14px;
  line-height: 1;
}

.team-filter-control .search-result-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  left: auto;
  width: 270px;
  transform-origin: top right;
}

.fixture-grid.team-journey-mode {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .fixture-grid.team-journey-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .round-board > .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .round-board .board-actions {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
    width: 100%;
  }

  .round-board .team-filter-control,
  .round-board .team-filter-search {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .team-filter-control,
  .team-filter-search {
    width: 100%;
  }

  .round-board .board-actions {
    grid-template-columns: 1fr auto;
  }

  .round-board .team-filter-control {
    display: block;
    grid-column: 1 / -1;
  }

  .team-filter-control .search-result-popover {
    right: auto;
    left: 0;
    width: min(280px, calc(100vw - 48px));
  }

  .fixture-grid.team-journey-mode {
    grid-template-columns: 1fr;
  }
}

.content > .round-board {
  margin-top: 0;
}

.golden-boot-panel .panel-heading {
  justify-content: center;
  text-align: center;
}

.golden-boot-panel .panel-heading span {
  color: #f2c45f;
  font-size: 10px;
  letter-spacing: 1.4px;
}

.golden-boot-list {
  display: grid;
}

.retro-live-table-head,
.retro-live-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 28px 28px;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}

.retro-live-table-head {
  min-height: 30px;
  color: #fff7cf;
  font-size: 8px;
  text-transform: uppercase;
}

.retro-live-table-row:last-child {
  border-bottom: 0;
}

.retro-live-table-row > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.retro-live-table-row > span > em {
  width: 12px;
  flex: 0 0 12px;
  color: #f6d12a;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-style: normal;
}

.retro-live-table-row strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-live-table-head b,
.retro-live-table-row > b {
  color: #fffce8;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-align: center;
}

.retro-live-table-row.qualification-place {
  background: rgba(246, 209, 42, 0.08);
}

.retro-live-table-flag,
.retro-live-table-flag img {
  width: 24px;
  height: 16px;
  flex: 0 0 24px;
  border-radius: 2px;
}

.golden-boot-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}

.golden-boot-row:last-child {
  border-bottom: 0;
}

.golden-boot-rank {
  color: #637086;
  font-family: "DM Mono", monospace;
  font-size: 11px;
}

.golden-boot-row.leader .golden-boot-rank,
.golden-boot-row.leader > b {
  color: var(--lime);
}

.golden-boot-player {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.golden-boot-player strong,
.golden-boot-player small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.golden-boot-player strong {
  color: #e6eaf1;
  font-size: 11px;
}

.golden-boot-player small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #788497;
  font-size: 9px;
}

.golden-boot-flag {
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  object-fit: cover;
}

.golden-boot-row > b {
  color: #eef2f8;
  font-family: "DM Mono", monospace;
  font-size: 16px;
  text-align: right;
}

.golden-boot-empty {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 9px;
  padding: 20px 14px;
  color: #707d90;
}

.golden-boot-empty span {
  color: #546176;
  font-family: "DM Mono", monospace;
  font-size: 9px;
}

.golden-boot-empty p {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.bug-report-form {
  position: relative;
  display: grid;
  gap: 16px;
}

.bug-report-modal {
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(760px, calc(100dvh - 32px));
  overflow-y: auto;
  border-radius: 12px;
}

.bug-report-modal .bug-report-form {
  padding: 18px;
}

.feedback-response-modal,
.feedback-admin-modal {
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  border-radius: 14px;
}

.feedback-response-card,
.feedback-admin-card {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 24px;
}

.feedback-response-card h2,
.feedback-admin-card h2 {
  margin: 0;
  padding-right: 38px;
  color: #f5f8ff;
  font-size: 21px;
  line-height: 1.25;
}

.feedback-response-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.feedback-response-message {
  margin: 0;
  color: #dce5f3;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.feedback-response-date {
  margin: -7px 0 0;
  color: #7e8ba0;
  font-size: 11px;
}

.feedback-admin-report {
  display: grid;
  gap: 10px;
  border: 1px solid #273346;
  border-radius: 10px;
  padding: 14px;
  color: #dce5f3;
  background: #0d1522;
  font-size: 12px;
  line-height: 1.5;
}

.feedback-admin-report p,
.feedback-admin-report blockquote {
  margin: 0;
}

.feedback-admin-report blockquote {
  border-left: 3px solid #5d7cff;
  padding-left: 11px;
  color: #f5f8ff;
  font-size: 14px;
  white-space: pre-wrap;
}

.feedback-admin-report small {
  overflow-wrap: anywhere;
  color: #7e8ba0;
}

.feedback-admin-login {
  width: 100%;
}

@media (max-width: 520px) {
  .feedback-response-card,
  .feedback-admin-card {
    padding: 20px 16px;
  }
}

.bug-report-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.bug-report-header {
  padding-right: 44px;
}

.bug-report-header h2 {
  margin: 0;
  color: #f5f8ff;
  font-size: 20px;
  line-height: 1.2;
}

.bug-report-header p {
  margin: 6px 0 0;
  color: #8a96aa;
  font-size: 12px;
  line-height: 1.5;
}

.bug-report-field,
.bug-report-screenshot-field {
  display: grid;
  gap: 7px;
  color: #cbd5e5;
  font-size: 12px;
  font-weight: 700;
}

.bug-report-field > small,
.bug-report-screenshot-field > span small {
  color: #7e8ba0;
  font-size: 10px;
  font-weight: 500;
}

.bug-report-select-wrap {
  position: relative;
}

.bug-report-select-wrap::after {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #8f9bb0;
  border-bottom: 2px solid #8f9bb0;
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.bug-report-select {
  width: 100%;
  min-height: 44px;
  appearance: none;
  border: 1px solid #273346;
  border-radius: 8px;
  padding: 0 38px 0 12px;
  color: #e8eef8;
  background: #101826;
  font: inherit;
  font-size: 13px;
  outline: 0;
}

.bug-report-select:focus {
  border-color: #5d7cff;
  box-shadow: 0 0 0 3px rgba(93, 124, 255, 0.16);
}

.bug-report-message {
  min-height: 128px;
  width: 100%;
  resize: vertical;
  border: 1px solid #273346;
  border-radius: 8px;
  padding: 12px;
  color: #e8eef8;
  background: #101826;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  outline: 0;
}

.bug-report-message::placeholder {
  color: #647187;
}

.bug-report-message:focus {
  border-color: #5d7cff;
  box-shadow: 0 0 0 3px rgba(93, 124, 255, 0.16);
}

.bug-report-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bug-report-identity legend {
  grid-column: 1 / -1;
  margin-bottom: 7px;
  padding: 0;
  color: #cbd5e5;
  font-size: 12px;
  font-weight: 700;
}

.bug-report-identity label {
  position: relative;
  display: flex;
  min-height: 66px;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #273346;
  border-radius: 9px;
  padding: 11px;
  color: #e8eef8;
  background: #101826;
  cursor: pointer;
}

.bug-report-identity label:has(input:checked) {
  border-color: #5d7cff;
  background: rgba(93, 124, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(93, 124, 255, 0.12);
}

.bug-report-identity label.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.bug-report-identity input {
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: #5d7cff;
}

.bug-report-identity span {
  display: grid;
  gap: 4px;
}

.bug-report-identity strong {
  font-size: 11px;
}

.bug-report-identity small {
  color: #7e8ba0;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
}

.bug-report-screenshot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bug-report-upload,
.bug-report-capture {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 11px;
  border: 1px dashed #3a4960;
  border-radius: 9px;
  padding: 11px 13px;
  color: #dbe4f2;
  background: rgba(16, 24, 38, 0.72);
  cursor: pointer;
}

.bug-report-capture {
  width: 100%;
  color: #dbe4f2;
  font: inherit;
  text-align: left;
}

.bug-report-upload:hover,
.bug-report-capture:hover:not(:disabled) {
  border-color: #5d7cff;
  background: rgba(93, 124, 255, 0.08);
}

.bug-report-capture:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.bug-report-upload-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: rgba(93, 124, 255, 0.14);
  font-size: 16px;
}

.bug-report-upload > span:nth-child(2),
.bug-report-capture > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.bug-report-upload strong,
.bug-report-capture strong {
  font-size: 11px;
}

.bug-report-upload small,
.bug-report-capture small {
  color: #7e8ba0;
  font-size: 9px;
  font-weight: 500;
}

.bug-report-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bug-report-upload:focus-within {
  border-color: #5d7cff;
  box-shadow: 0 0 0 3px rgba(93, 124, 255, 0.16);
}

.bug-report-capture:focus-visible {
  border-color: #5d7cff;
  box-shadow: 0 0 0 3px rgba(93, 124, 255, 0.16);
  outline: 0;
}

.bug-report-preview {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #273346;
  border-radius: 9px;
  padding: 8px;
  background: #101826;
}

.bug-report-preview[hidden] {
  display: none;
}

.bug-report-preview img {
  width: 52px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
}

.bug-report-preview div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.bug-report-preview strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bug-report-preview small {
  color: #7e8ba0;
  font-size: 9px;
  font-weight: 500;
}

.bug-report-preview button {
  border: 0;
  padding: 6px;
  color: #9eabc0;
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.bug-report-preview button:hover {
  color: #ffffff;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #bugReportModal :is(
  .bug-report-identity label,
  .bug-report-capture,
  .bug-report-upload,
  .bug-report-preview
) {
  border-color: #cbd4e1;
  color: #26344a;
  background: #f7f9fc;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #bugReportModal .bug-report-identity label:has(input:checked) {
  border-color: #7d9eff;
  background: #eef3ff;
  box-shadow: 0 0 0 2px rgba(93, 124, 255, 0.12);
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #bugReportModal .bug-report-identity label.is-disabled {
  border-color: #dbe1e9;
  color: #7d899b;
  background: #f1f3f6;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #bugReportModal :is(.bug-report-upload:hover, .bug-report-capture:hover:not(:disabled)) {
  border-color: #7d9eff;
  background: #eef3ff;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #bugReportModal .bug-report-upload-icon {
  background: #e7edff;
}

html.light-mode body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) #bugReportModal .bug-report-preview button:hover {
  color: #172033;
}

.bug-report-submit {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  font-size: 13px;
}

.bug-report-submit:disabled {
  cursor: wait;
  opacity: 0.6;
}

.bug-report-status {
  min-height: 14px;
  margin: 0;
  color: #8a96aa;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .bug-report-modal .bug-report-form {
    padding: 16px;
  }

  .bug-report-message {
    min-height: 116px;
  }

  .bug-report-identity {
    grid-template-columns: 1fr;
  }

  .bug-report-screenshot-actions {
    grid-template-columns: 1fr;
  }
}

/* Shareable match snapshots */
.snapshot-trigger:disabled {
  cursor: wait;
  opacity: 0.55;
}

.snapshot-card-button {
  position: absolute;
  z-index: 80;
  top: 16px;
  left: 20px;
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  pointer-events: auto;
  place-items: center;
  border: 1px solid #334156;
  border-radius: 8px;
  color: #c8d3e4;
  background: #182231;
  box-shadow: 0 2px 8px rgba(4, 9, 16, 0.22);
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.snapshot-card-button > * {
  pointer-events: none;
}

.snapshot-card-button[hidden] {
  display: none;
}

.snapshot-card-button:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .snapshot-card-button:hover {
    border-color: #4a5d78;
    color: #f1f5fb;
    background: #212d3f;
  }
}

.snapshot-modal {
  width: min(780px, calc(100vw - 28px));
}

.snapshot-modal form {
  padding: 22px;
}

.snapshot-modal-head {
  margin-bottom: 18px;
}

.snapshot-modal-head h2 {
  margin: 4px 0 0;
}

.snapshot-preview {
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid #2b3545;
  border-radius: 13px;
  background: #0b1018;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.snapshot-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

.snapshot-actions {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 0.9fr;
  gap: 9px;
  margin-top: 14px;
}

.snapshot-actions button {
  min-height: 42px;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.snapshot-actions button:active {
  transform: scale(0.97);
}

@media (max-width: 560px) {
  .snapshot-modal form {
    padding: 17px;
  }

  .snapshot-actions {
    grid-template-columns: 1fr;
  }
}

/* Prediction mode */
.prediction-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  min-height: 48px;
  padding: 8px 13px;
  border: 1px solid #2c3748;
  border-radius: 10px;
  color: #dce4f0;
  background: #1a2230;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.prediction-picker:hover {
  border-color: #466aa9;
  background: #1d2737;
}

.prediction-picker:active {
  transform: scale(0.97);
}

.prediction-picker-mark {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #3b4a61;
  border-radius: 50%;
  color: #86a8ff;
  background: #111823;
  font-family: "DM Mono", monospace;
  font-size: 14px;
}

.prediction-picker > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.prediction-picker small,
.prediction-result small {
  color: #7f94b8;
  font-family: "DM Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.prediction-picker strong {
  overflow: hidden;
  color: #edf2f8;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-picker-flag,
.prediction-picker-flag img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.prediction-modal form {
  width: min(620px, calc(100vw - 28px));
}

.prediction-search {
  width: 100%;
  margin: 18px 0 12px;
}

.prediction-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: min(470px, 58vh);
  overflow-y: auto;
  padding: 2px;
}

.prediction-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid #283345;
  border-radius: 10px;
  color: #dfe6f1;
  background: #171f2c;
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.prediction-option:hover,
.prediction-option.selected {
  border-color: #4b70b5;
  background: #1c2940;
}

.prediction-option:active {
  transform: scale(0.98);
}

.prediction-option .country-flag,
.prediction-option .country-flag img {
  width: 38px;
  height: 28px;
  border-radius: 5px;
}

.prediction-option span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.prediction-option strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-option small {
  color: #7f8ca0;
  font-size: 8px;
}

.prediction-option i {
  color: #7ba0ff;
  font-style: normal;
}

.prediction-clear {
  display: block;
  margin: 14px auto 0;
}

.prediction-clear[hidden] {
  display: none;
}

#storyStrip:has(.prediction-story:not([hidden])) {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 12px;
}

#storyStrip:has(.prediction-story:not([hidden])) > .story-card:not(.prediction-story) {
  display: none;
}

.prediction-story {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 58px;
  border-color: rgba(91, 133, 219, 0.3);
  background: #111a29;
}

.prediction-story span,
.prediction-story strong,
.prediction-story small {
  margin: 0;
}

.prediction-story.is-eliminated {
  opacity: 0.7;
}

.prediction-story.is-correct {
  border-color: rgba(58, 190, 118, 0.42);
}

.prediction-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(390px, calc(100vw - 56px));
  margin: 12px auto 4px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 112, 104, 0.32);
  border-radius: 11px;
  background: rgba(10, 16, 25, 0.78);
}

.prediction-result[hidden] {
  display: none;
}

.prediction-result.correct {
  border-color: rgba(59, 196, 119, 0.4);
}

.prediction-result .country-flag,
.prediction-result .country-flag img {
  width: 38px;
  height: 28px;
  border-radius: 5px;
}

.prediction-result > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.prediction-result strong {
  overflow: hidden;
  color: #eef3f8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-result b {
  color: #e27670;
  font-family: "DM Mono", monospace;
  font-size: 8px;
}

.prediction-result.correct b {
  color: #47c982;
}

/* Normal-match penalty presentation */
.match-stage {
  position: relative;
}

.match-penalty-overlay {
  position: absolute;
  inset: 49px 0 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 180px minmax(300px, 450px);
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: rgba(8, 13, 21, 0.94);
  backdrop-filter: blur(9px);
  transition: opacity 180ms ease-out;
}

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

.match-penalty-decision {
  display: grid;
  gap: 7px;
}

.match-penalty-decision span {
  color: #7c8ba1;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
}

.match-penalty-decision strong {
  color: #f3f6fa;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -1.8px;
}

.match-penalty-decision small {
  color: #9da9ba;
  font-size: 10px;
}

.match-penalty-scene {
  width: 100%;
  height: 200px;
  margin: 0;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

/* Keep the normal camera and make goalkeeper control explicit. */
.is-keeper-choice.is-awaiting-choice .penalty-scene::after {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 7;
  max-width: calc(100% - 20px);
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  color: #ffffff;
  background: rgba(7, 13, 21, 0.84);
  content: "YOUR TURN \00B7  CHOOSE WHERE TO DIVE";
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 0.55px;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .overview-toolbar {
    flex-wrap: wrap;
  }

  .overview-search {
    width: 100%;
    flex-basis: 100%;
    display: flex !important;
  }

  .prediction-picker,
  .start-tournament {
    flex: 1;
  }

  .match-penalty-overlay {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 15px;
  }

  .match-penalty-decision {
    justify-items: center;
    text-align: center;
  }

  .match-penalty-scene {
    max-width: 430px;
    height: 178px;
    margin: 0 auto;
  }

}



/* Desktop navigation balance: progress left, brand centred, deployment time right. */
@media (min-width: 851px) {
  .sidebar {
    position: sticky;
    justify-content: center;
    padding-inline: clamp(24px, 3vw, 48px);
  }

  .sidebar .brand {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }

  .sidebar .tournament-status {
    display: none;
  }

  .sidebar .last-updated {
    position: absolute;
    right: clamp(24px, 3vw, 48px);
    margin: 0;
    padding: 0;
    border: 0;
    color: #7f8a9c;
  }

  .sidebar .last-updated strong {
    color: #c9d1df;
  }

  body:not(.before-start) .topbar {
    min-height: 72px;
    padding: 16px clamp(24px, 3vw, 48px) 12px;
    justify-content: flex-end;
  }

  body:not(.before-start) .legacy-topbar-back:not([hidden]) {
    position: absolute;
    left: 24px;
    top: 16px;
    margin-right: 0;
  }

  .top-actions {
    margin-left: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 850px) {
  .sidebar .brand,
  .sidebar .tournament-status,
  .sidebar .last-updated {
    position: static;
    transform: none;
  }

  .sidebar .last-updated {
    margin: 0 4px;
    padding: 10px 4px 0;
    border: 0;
  }
}

@media (max-width: 520px) {
  .prediction-picker {
    min-width: 0;
  }

  .prediction-picker small {
    display: none;
  }

  .prediction-list {
    grid-template-columns: 1fr;
  }

  .match-penalty-overlay {
    inset: 45px 0 0;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-penalty-overlay {
    transition-duration: 80ms;
  }
}

/* Compact prediction badge beside Field. */
.prediction-top-control {
  gap: 7px;
  padding-inline: 9px;
}

.prediction-top-control[hidden] {
  display: none;
}

.prediction-top-control > span {
  color: #8794a8;
  font-family: "DM Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.65px;
}

.prediction-top-control .prediction-picker-mark {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 18px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  color: #88a9ff;
  background: #111823;
  font-family: "DM Mono", monospace;
  font-size: 9px;
}

.prediction-top-control .prediction-picker-flag,
.prediction-top-control .prediction-picker-flag img {
  width: 24px;
  height: 18px;
  border-radius: 3px;
}

.prediction-top-control.is-eliminated {
  opacity: 0.58;
}

.prediction-top-control.is-correct {
  border-color: rgba(57, 185, 114, 0.45);
}

/* Quiet legal footer: visible without competing with the tournament. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.before-start .site-footer {
  margin-top: clamp(72px, 8vw, 132px);
}

.footer-last-updated {
  display: inline-flex;
  align-items: baseline;
  justify-self: center;
  gap: 5px;
  color: #778397;
  font: 500 9px "DM Mono", monospace;
  white-space: nowrap;
}

.footer-last-updated strong {
  color: #b7c1d2;
  font-weight: 600;
}

.go-to-top {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: #dce6ff;
  background: #1b2637;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.go-to-top span {
  color: #78a0ff;
  font-size: 14px;
}

.round-board .go-to-top {
  display: flex;
  width: max-content;
  margin: 16px auto 0;
}

.site-footer-copy {
  display: grid;
  gap: 5px;
}

.site-footer-copy strong {
  color: var(--soft);
  font-size: 11px;
  letter-spacing: 0.7px;
}

.site-footer-copy span,
.site-footer-year {
  font-size: 10px;
  line-height: 1.5;
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer-meta {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 24px;
}

.site-footer-links a {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, transform 140ms var(--ease-out);
}

.donate-link {
  padding: 8px 12px;
  border-radius: 8px;
  color: #f3f7ff;
  background: #31558f;
}

.header-donate-link {
  border: 0;
  text-decoration: none;
}

.discord-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 245 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M104.4 104.5c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.3-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1Zm36.3 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.3-5 10.2-11.1 0-6.1-4.5-11.1-10.2-11.1Z'/%3E%3Cpath d='M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6C210 29.2 200.8 20 189.5 20Zm-38.9 130.7s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-26 .1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.8-2.8-1.8s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.8c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0-.1-8.4 14.4-30.6 15.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.discord-header-button {
  color: #8ea8ff;
}

.news-header-button {
  color: #8ea8ff;
}

.news-header-button[hidden] {
  display: none;
}

body.custom-tournament-mode-active #newsButton,
body.standard-mode-active #newsButton {
  display: none !important;
}

.news-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.news-icon::before,
.news-icon::after {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1.5px;
  content: "";
  background: currentColor;
}

.news-icon::before {
  top: 4px;
}

.news-icon::after {
  top: 8px;
}

.discord-header-button,
.online-discord-button {
  display: none;
}

.news-modal {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #2b3850;
  border-radius: 12px;
  background: #101722;
}

.news-modal-card {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.news-entry {
  display: grid;
  gap: 8px;
}

.news-entry + .news-entry {
  padding-top: 18px;
  border-top: 1px solid #28364c;
}

.news-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.news-update-label {
  color: #78a0ff;
  font-size: 11px;
  font-weight: 800;
}

.news-modal h2 {
  margin: 0;
  color: #f5f8ff;
  font-size: 22px;
}

.news-modal p {
  margin: 2px 0 0;
  color: #b3bfd0;
  font-size: 14px;
  line-height: 1.6;
}

.feature-announcement-modal {
  width: min(440px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  color: #f7f9fc;
  border: 0;
  border-radius: 20px;
  background: #111925;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.feature-announcement-modal::backdrop {
  background: rgba(4, 9, 16, 0.76);
  backdrop-filter: blur(5px);
}

.feature-announcement-modal[open] {
  animation: feature-announcement-in 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes feature-announcement-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.feature-announcement-accent {
  position: relative;
  display: grid;
  min-height: 152px;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #3867ff, #0647f5);
}

.feature-announcement-ucl .feature-announcement-accent {
  background:
    radial-gradient(circle at 50% 48%, rgba(108, 148, 255, 0.36), transparent 31%),
    linear-gradient(145deg, #153a8c 0%, #0b2259 54%, #06132f 100%);
}

[data-open-tournament-theme][hidden],
.tournament-theme-setting[hidden] {
  display: none !important;
}

.feature-announcement-2002 .feature-announcement-accent {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 210, 31, 0.24), transparent 34%),
    linear-gradient(145deg, #0a5c96 0%, #073d70 48%, #061d3d 100%);
}

.feature-announcement-2002-visual {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.feature-announcement-2002-visual img {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3));
}

.feature-announcement-2002-visual small {
  position: relative;
  z-index: 1;
  color: #ffd21f;
  font: 850 10px "DM Mono", monospace;
  letter-spacing: 0.18em;
}

.feature-announcement-2002-glow {
  position: absolute;
  width: 136px;
  height: 136px;
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 54px rgba(239, 35, 60, 0.24);
}

.feature-announcement-2002 .feature-announcement-label {
  color: #ef233c;
}

.feature-announcement-2002 .feature-announcement-button {
  color: #fff;
  background: #d71935;
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-2002 .feature-announcement-button:hover {
    background: #ef233c;
  }
}

.feature-announcement-ucl-visual {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.feature-announcement-ucl-visual img {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.28));
}

.feature-announcement-ucl-visual small {
  position: relative;
  z-index: 1;
  color: #c9d7ff;
  font: 850 10px "DM Mono", monospace;
  letter-spacing: 0.2em;
}

.feature-announcement-ucl-glow {
  position: absolute;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(178, 201, 255, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 52px rgba(71, 117, 255, 0.34);
}

.feature-announcement-ui-predictor {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(117, 216, 255, 0.34);
  background: #052f4b;
  box-shadow: 0 28px 90px rgba(0, 29, 48, 0.58);
}

.feature-announcement-ui-predictor::backdrop {
  background: rgba(1, 28, 45, 0.78);
}

.feature-announcement-ui-predictor .feature-announcement-accent {
  min-height: 172px;
  background:
    radial-gradient(circle at 24% 22%, rgba(118, 226, 255, 0.42), transparent 27%),
    radial-gradient(circle at 78% 76%, rgba(38, 120, 255, 0.44), transparent 32%),
    linear-gradient(145deg, #19a9dc 0%, #087da9 48%, #075b8f 100%);
}

.feature-announcement-ui-predictor .feature-announcement-accent::after {
  inset: auto -15% -72% 12%;
  height: 190px;
  background: rgba(178, 239, 255, 0.12);
}

.feature-announcement-ui-predictor-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.feature-announcement-ui-window,
.feature-announcement-predictor-board {
  position: relative;
  display: grid;
  width: 118px;
  height: 94px;
  padding: 15px;
  border: 1px solid rgba(224, 249, 255, 0.48);
  border-radius: 20px;
  background: rgba(4, 63, 91, 0.72);
  box-shadow: 0 14px 28px rgba(0, 35, 54, 0.26);
  backdrop-filter: blur(10px);
}

.feature-announcement-ui-window {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 8px 1fr;
  gap: 8px 5px;
}

.feature-announcement-ui-window i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aeeeff;
}

.feature-announcement-ui-window b {
  min-width: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(105, 207, 241, 0.94), rgba(31, 132, 187, 0.86));
}

.feature-announcement-ui-window b:nth-of-type(2) {
  background: linear-gradient(180deg, rgba(128, 155, 255, 0.96), rgba(55, 96, 199, 0.88));
}

.feature-announcement-ui-predictor-plus {
  color: #d9f7ff;
  font: 800 25px "DM Mono", monospace;
}

.feature-announcement-predictor-board {
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.feature-announcement-predictor-board > i {
  font-style: normal;
  font-size: 25px;
  filter: drop-shadow(0 6px 8px rgba(0, 28, 46, 0.32));
}

.feature-announcement-predictor-board > b {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.feature-announcement-predictor-board > b span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px 6px 4px 4px;
  color: #06324b;
  font: 800 9px "DM Mono", monospace;
  background: #9be9ff;
}

.feature-announcement-predictor-board > b span:first-child {
  height: 31px;
  background: #ffd36e;
}

.feature-announcement-ui-predictor .feature-announcement-content {
  gap: 0;
  background: linear-gradient(155deg, #063e5e, #042a43 78%);
}

.feature-announcement-ui-predictor p {
  color: #cceeff;
}

.feature-announcement-ui-predictor-points {
  display: grid;
  gap: 10px;
  margin: -4px 0 22px;
  padding: 0;
  list-style: none;
}

.feature-announcement-ui-predictor-points li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: #eefaff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.feature-announcement-ui-predictor-points li > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #06324b;
  background: #85e4ff;
}

.feature-announcement-ui-predictor .feature-announcement-button {
  color: #052f4b;
  background: linear-gradient(135deg, #8be8ff, #45c9f4);
  box-shadow: 0 10px 24px rgba(22, 180, 230, 0.2);
}

.feature-announcement-ui-predictor .feature-announcement-dismiss {
  color: #9fd4e8;
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-ui-predictor .feature-announcement-button:hover {
    background: linear-gradient(135deg, #b7f2ff, #67d8fa);
  }

  .feature-announcement-ui-predictor .feature-announcement-dismiss:hover {
    color: #fff;
  }
}

@media (max-width: 520px) {
  .feature-announcement-ui-predictor .feature-announcement-accent {
    min-height: 132px;
  }

  .feature-announcement-ui-predictor-visual {
    gap: 12px;
  }

  .feature-announcement-ui-window,
  .feature-announcement-predictor-board {
    width: 94px;
    height: 76px;
    padding: 11px;
    border-radius: 16px;
  }

  .feature-announcement-predictor-board > i {
    font-size: 19px;
  }

  .feature-announcement-predictor-board > b span {
    width: 18px;
    height: 17px;
  }

  .feature-announcement-predictor-board > b span:first-child {
    height: 23px;
  }

  .feature-announcement-ui-predictor .feature-announcement-content {
    padding: 22px;
  }
}

.feature-announcement-liga-portugal {
  width: min(540px, calc(100vw - 28px));
  border: 1px solid rgba(127, 176, 255, 0.42);
  background: #02132f;
}

.feature-announcement-liga-portugal .feature-announcement-accent {
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(127, 176, 255, 0.3), transparent 34%),
    linear-gradient(145deg, #0b3777, #031b40);
}

.feature-announcement-liga-portugal .feature-announcement-accent::before {
  position: absolute;
  inset: -68px auto auto -54px;
  width: 190px;
  height: 190px;
  content: "";
  border: 30px solid rgba(127, 176, 255, 0.11);
  border-radius: 50%;
}

.feature-announcement-liga-portugal .feature-announcement-accent::after {
  inset: auto -42px -92px auto;
  width: 230px;
  height: 230px;
  border: 34px solid rgba(154, 194, 255, 0.1);
  background: transparent;
}

.feature-announcement-liga-portugal-visual {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 190px;
  place-items: center;
}

.feature-announcement-liga-portugal-visual img {
  width: 142px;
  height: 162px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 16px 26px rgba(0, 9, 28, 0.5));
}

.feature-announcement-liga-portugal .feature-announcement-content {
  background:
    radial-gradient(circle at 92% 0, rgba(127, 176, 255, 0.15), transparent 32%),
    linear-gradient(155deg, #082e68, #02132f 76%);
}

.feature-announcement-liga-portugal .feature-announcement-button {
  color: #031b40;
  background: linear-gradient(135deg, #7fb0ff, #d5f1ff);
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-liga-portugal .feature-announcement-button:hover {
    background: linear-gradient(135deg, #94bdff, #e4f7ff);
  }
}

.feature-announcement-saudi-pro-league {
  width: min(540px, calc(100vw - 28px));
  border: 1px solid rgba(201, 246, 220, .48);
  background: #001d12;
}

.feature-announcement-saudi-pro-league .feature-announcement-accent {
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(148, 233, 185, .28), transparent 34%),
    linear-gradient(145deg, #086842, #005430 52%, #001d12);
}

.feature-announcement-saudi-pro-league .feature-announcement-accent::before {
  position: absolute;
  inset: -68px auto auto -54px;
  width: 190px;
  height: 190px;
  border: 30px solid rgba(201, 246, 220, .11);
  border-radius: 50%;
  content: "";
}

.feature-announcement-saudi-pro-league .feature-announcement-accent::after {
  inset: auto -42px -92px auto;
  width: 230px;
  height: 230px;
  border: 34px solid rgba(201, 246, 220, .09);
  background: transparent;
}

.feature-announcement-saudi-pro-league-visual {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 190px;
  place-items: center;
}

.feature-announcement-saudi-pro-league-visual img {
  width: 158px;
  height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0, 24, 14, .52));
}

.feature-announcement-saudi-pro-league .feature-announcement-content {
  background:
    radial-gradient(circle at 92% 0, rgba(148, 233, 185, .13), transparent 32%),
    linear-gradient(155deg, #00462a, #001d12 76%);
}

.feature-announcement-saudi-pro-league .feature-announcement-button {
  color: #002b19;
  background: linear-gradient(135deg, #e8fff2, #94e9b9);
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-saudi-pro-league .feature-announcement-button:hover {
    background: linear-gradient(135deg, #f4fff8, #b7f2d0);
  }
}

.feature-announcement-mls {
  width: min(540px, calc(100vw - 28px));
  border: 1px solid rgba(255, 220, 222, .5);
  background: #0b0305;
}

.feature-announcement-mls .feature-announcement-accent {
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .17), transparent 34%),
    linear-gradient(145deg, #e2232a, #a81019 55%, #001735);
}

.feature-announcement-mls .feature-announcement-accent::before {
  position: absolute;
  inset: -68px auto auto -54px;
  width: 190px;
  height: 190px;
  border: 30px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  content: "";
}

.feature-announcement-mls .feature-announcement-accent::after {
  inset: auto -42px -92px auto;
  width: 230px;
  height: 230px;
  border: 34px solid rgba(255, 255, 255, .09);
  background: transparent;
}

.feature-announcement-mls-visual {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 190px;
  place-items: center;
}

.feature-announcement-mls-visual img {
  box-sizing: border-box;
  width: 154px;
  height: 154px;
  padding: 5px;
  border-radius: 21px;
  object-fit: contain;
  background: rgba(255, 255, 255, .96);
  filter: drop-shadow(0 16px 26px rgba(0, 23, 53, .42));
}

.feature-announcement-mls .feature-announcement-content {
  background:
    radial-gradient(circle at 92% 0, rgba(226, 35, 42, .16), transparent 32%),
    linear-gradient(155deg, #2b0b10, #0b0305 76%);
}

.feature-announcement-mls .feature-announcement-button {
  color: #fff;
  background: linear-gradient(135deg, #ff7479, #e2232a 58%, #b3141d);
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-mls .feature-announcement-button:hover {
    background: linear-gradient(135deg, #ff8e92, #e2232a);
  }
}

.feature-announcement-latest-leagues {
  width: min(650px, calc(100vw - 28px));
  border: 1px solid rgba(255, 255, 255, .22);
  background: #08090b;
}

.feature-announcement-retro-ucl {
  width: min(650px, calc(100vw - 28px));
  border: 1px solid rgba(132, 170, 255, .38);
  background: #030d25;
}

.feature-announcement-retro-ucl .feature-announcement-accent {
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 46%, rgba(95, 133, 255, .42), transparent 29%),
    radial-gradient(circle at 75% 46%, rgba(133, 85, 255, .38), transparent 29%),
    linear-gradient(135deg, #102f7c, #07194d 52%, #13053e);
}

.feature-announcement-retro-ucl .feature-announcement-accent::before {
  position: absolute;
  inset: -36px auto auto calc(50% - 1px);
  width: 2px;
  height: 260px;
  background: rgba(255, 255, 255, .16);
  transform: rotate(12deg);
  content: "";
}

.feature-announcement-retro-ucl .feature-announcement-accent::after {
  display: none;
}

.feature-announcement-retro-ucl-visual {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 190px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-announcement-retro-ucl-visual span {
  display: grid;
  min-width: 0;
  padding: 16px;
  gap: 4px;
  place-items: center;
}

.feature-announcement-retro-ucl-visual img {
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .42));
}

.feature-announcement-retro-ucl-visual b {
  color: #fff;
  font-size: 18px;
  letter-spacing: .08em;
}

.feature-announcement-retro-ucl .feature-announcement-content {
  background:
    radial-gradient(circle at 0 0, rgba(61, 116, 255, .22), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(123, 65, 255, .2), transparent 36%),
    linear-gradient(155deg, #0b1b48, #030d25 76%);
}

.feature-announcement-retro-ucl-actions {
  display: grid;
  margin-top: 22px;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-announcement-retro-ucl-actions .feature-announcement-button {
  width: 100%;
  min-height: 50px;
  margin: 0;
}

.feature-announcement-retro-ucl :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.feature-announcement-latest-leagues .feature-announcement-accent {
  min-height: 190px;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(0, 84, 48, .98) 0 49.8%, rgba(18, 2, 4, .98) 50.2% 100%);
}

.feature-announcement-latest-leagues .feature-announcement-accent::before {
  position: absolute;
  inset: -80px auto auto calc(50% - 95px);
  width: 190px;
  height: 270px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .08);
  transform: rotate(12deg);
  content: "";
}

.feature-announcement-latest-leagues .feature-announcement-accent::after {
  display: none;
}

.feature-announcement-latest-leagues-visual {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 190px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
}

.feature-announcement-latest-league {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 190px;
  place-items: center;
}

.feature-announcement-latest-league img {
  width: 142px;
  height: 142px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .38));
}

.feature-announcement-latest-league-mls img {
  width: 132px;
  height: 132px;
}

.feature-announcement-latest-leagues .feature-announcement-content {
  background:
    radial-gradient(circle at 0 0, rgba(0, 84, 48, .22), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(226, 35, 42, .22), transparent 36%),
    linear-gradient(155deg, #17191c, #08090b 76%);
}

.feature-announcement-latest-league-actions {
  display: grid;
  margin-top: 22px;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-announcement-latest-league-actions .feature-announcement-button {
  width: 100%;
  min-height: 50px;
  margin: 0;
}

.feature-announcement-latest-league-actions .is-saudi {
  color: #002b19;
  background: linear-gradient(135deg, #e8fff2, #94e9b9);
}

.feature-announcement-latest-league-actions .is-mls {
  color: #fff;
  background: linear-gradient(135deg, #ff7479, #e2232a 58%, #b3141d);
}

.feature-announcement-latest-leagues :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-latest-league-actions .is-saudi:hover {
    background: linear-gradient(135deg, #f4fff8, #b7f2d0);
  }

  .feature-announcement-latest-league-actions .is-mls:hover {
    background: linear-gradient(135deg, #ff8e92, #e2232a);
  }
}

.feature-announcement-league-launch {
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 78, 114, 0.3);
  background: #130420;
}

.feature-announcement-league-launch .feature-announcement-accent {
  min-height: 164px;
  background:
    linear-gradient(90deg, rgba(8, 31, 92, 0.94) 0 33.333%, rgba(202, 20, 48, 0.92) 33.333% 66.666%, rgba(22, 2, 46, 0.96) 66.666%),
    #130420;
}

.feature-announcement-league-launch .feature-announcement-accent::after {
  display: none;
}

.feature-announcement-league-launch-visual {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 164px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-announcement-league-brand {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  padding: 18px 12px;
}

.feature-announcement-league-brand img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(35, 8, 25, 0.2));
}

.feature-announcement-league-brand-super-lig img {
  width: 94px;
  height: 94px;
}

.feature-announcement-league-brand small {
  color: #fff8f5;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-align: center;
}

.feature-announcement-league-launch .feature-announcement-content {
  gap: 0;
  background: linear-gradient(155deg, #200437, #10021d 74%);
}

.feature-announcement-league-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.feature-announcement-league-actions .feature-announcement-button {
  min-height: 48px;
}

.feature-announcement-league-actions .feature-announcement-league-button-eredivisie {
  color: #fff;
  background: linear-gradient(135deg, #1b4cad, #2a71e7);
}

.feature-announcement-league-actions .feature-announcement-league-button-super-lig {
  color: #fff;
  background: linear-gradient(135deg, #b10d2b, #e42142);
}

.feature-announcement-league-actions .feature-announcement-league-button-belgian {
  color: #190321;
  background: linear-gradient(135deg, #fe1940, #ff6a3d);
}

.feature-announcement-league-actions .feature-announcement-button:focus-visible,
.feature-announcement-league-launch .feature-announcement-dismiss:focus-visible {
  outline: 2px solid #fff4ee;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-league-actions .feature-announcement-league-button-eredivisie:hover {
    background: linear-gradient(135deg, #245bc2, #4186f3);
  }

  .feature-announcement-league-actions .feature-announcement-league-button-super-lig:hover {
    background: linear-gradient(135deg, #c91234, #ef3856);
  }

  .feature-announcement-league-actions .feature-announcement-league-button-belgian:hover {
    background: linear-gradient(135deg, #ff3658, #ff7b53);
  }
}

.feature-announcement-pitch-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.feature-announcement-pitch-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 11px;
}

.feature-announcement-pitch-preview h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.feature-announcement-pitch-preview p {
  margin: 8px 0 0;
  color: #cbbdd4;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .feature-announcement-retro-ucl .feature-announcement-accent,
  .feature-announcement-retro-ucl-visual {
    min-height: 136px;
  }

  .feature-announcement-retro-ucl-visual img {
    width: 86px;
    height: 86px;
  }

  .feature-announcement-retro-ucl-visual b {
    font-size: 15px;
  }

  .feature-announcement-retro-ucl-actions {
    grid-template-columns: 1fr;
  }

  .feature-announcement-latest-leagues .feature-announcement-accent,
  .feature-announcement-latest-leagues-visual,
  .feature-announcement-latest-league {
    min-height: 136px;
  }

  .feature-announcement-latest-league img {
    width: 104px;
    height: 104px;
  }

  .feature-announcement-latest-league-mls img {
    width: 96px;
    height: 96px;
  }

  .feature-announcement-latest-league-actions {
    grid-template-columns: 1fr;
  }

  .feature-announcement-mls .feature-announcement-accent,
  .feature-announcement-mls-visual {
    min-height: 142px;
  }

  .feature-announcement-mls-visual img {
    width: 112px;
    height: 112px;
    border-radius: 16px;
  }

  .feature-announcement-saudi-pro-league .feature-announcement-accent,
  .feature-announcement-saudi-pro-league-visual {
    min-height: 142px;
  }

  .feature-announcement-saudi-pro-league-visual img {
    width: 112px;
    height: 112px;
  }

  .feature-announcement-liga-portugal .feature-announcement-accent,
  .feature-announcement-liga-portugal-visual {
    min-height: 142px;
  }

  .feature-announcement-liga-portugal-visual img {
    width: 104px;
    height: 122px;
  }

  .feature-announcement-league-launch .feature-announcement-accent,
  .feature-announcement-league-launch-visual {
    min-height: 126px;
  }

  .feature-announcement-league-brand {
    gap: 6px;
    padding: 12px 8px;
  }

  .feature-announcement-league-brand img {
    width: 58px;
    height: 58px;
  }

  .feature-announcement-league-brand-super-lig img {
    width: 66px;
    height: 66px;
  }

  .feature-announcement-league-brand small {
    font-size: 9px;
  }

  .feature-announcement-league-launch .feature-announcement-content {
    padding: 22px;
  }

  .feature-announcement-league-launch p {
    margin-bottom: 18px;
  }

  .feature-announcement-league-actions,
  .feature-announcement-pitch-preview {
    grid-template-columns: 1fr;
  }

}

.feature-announcement-accent::after {
  position: absolute;
  inset: auto -20% -58% 16%;
  height: 150px;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(-8deg);
}

.feature-announcement-content {
  display: grid;
  padding: 28px;
}

.feature-announcement-label {
  margin-bottom: 9px;
  color: #65d5ad;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.feature-announcement-ucl .feature-announcement-label {
  color: #8fb2ff;
}

.feature-announcement-modal h2 {
  margin: 0;
  font-size: clamp(25px, 7vw, 31px);
  letter-spacing: -0.035em;
}

.feature-announcement-modal p {
  margin: 12px 0 24px;
  color: #b8c2d0;
  font-size: 15px;
  line-height: 1.55;
}

.feature-announcement-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: #061610;
  font: inherit;
  font-weight: 850;
  border: 0;
  border-radius: 12px;
  background: #65d5ad;
  cursor: pointer;
  transition: background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-announcement-ucl .feature-announcement-button {
  color: #fff;
  background: #244fae;
}

.feature-announcement-button:hover {
  background: #82e2bf;
}

@media (hover: hover) and (pointer: fine) {
  .feature-announcement-ucl .feature-announcement-button:hover {
    background: #315fc5;
  }
}
.feature-announcement-button:active,
.feature-announcement-dismiss:active {
  transform: scale(0.97);
}

.feature-announcement-dismiss {
  justify-self: center;
  margin-top: 14px;
  padding: 5px 10px;
  color: #8e9bae;
  font: inherit;
  font-size: 13px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-announcement-dismiss:hover {
  color: #d6dce5;
}

@media (prefers-reduced-motion: reduce) {
  .feature-announcement-modal[open] {
    animation: none;
  }
}

.discord-modal {
  position: relative;
  width: min(390px, calc(100vw - 40px));
  padding: 28px;
  border: 1px solid #2b3850;
  border-radius: 14px;
  background: #101722;
}

.discord-modal-card {
  display: grid;
  gap: 18px;
}

.discord-modal-card p {
  margin: 10px 0 0;
  color: #e7edf8;
  font-size: 14px;
  line-height: 1.6;
}

.discord-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.discord-join-button {
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}

.donate-modal {
  position: relative;
  width: min(430px, calc(100vw - 40px));
  padding: 0;
  border: 1px solid #2f3d55;
  border-radius: 14px;
  background: #101722;
}

.donate-modal-card {
  display: grid;
  gap: 14px;
  padding: 28px;
  text-align: left;
}

.donate-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.donate-modal-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #dbe8ff;
  background: #31558f;
  font-size: 20px;
  font-weight: 800;
}

.donate-modal h2 {
  margin: 4px 0 0;
  color: #f5f8ff;
  font-size: 24px;
  line-height: 1.1;
}

.donate-modal p {
  margin: 0;
  color: #aeb9ca;
  font-size: 14px;
  line-height: 1.65;
}

.donate-modal-link {
  justify-content: center;
  min-height: 46px;
  margin-top: 4px;
  text-decoration: none;
}

.site-footer-links a:active {
  transform: scale(0.97);
}

.header-donate-link:active {
  transform: scale(0.97);
}

.site-footer-links a:focus-visible,
.header-donate-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}

/* Landing mode selection */
.content[hidden] {
  display: none;
}

/* Icon Draft launcher and leaderboard category */
.mode-card.mode-card-icon-draft {
  order: 3;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(221, 184, 92, .32);
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 213, 112, .2), transparent 32%),
    linear-gradient(145deg, #151c2a, #0b101b 72%);
}

.mode-card-icon-draft::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(118deg, transparent 0 48%, rgba(255, 225, 144, .08) 49% 51%, transparent 52% 100%);
  pointer-events: none;
}

.mode-card-icon-draft .mode-card-copy {
  max-width: calc(100% - 78px);
}

.mode-card-icon-draft .mode-card-copy h3 {
  color: #fff5ce;
}

.mode-card-icon-draft .mode-card-copy p {
  color: #a9b3c4;
}

.icon-draft-mode-mark {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  width: 58px;
  height: 68px;
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(255, 224, 143, .52);
  border-radius: 16px 16px 12px 12px;
  color: #ffe59a;
  background: linear-gradient(150deg, rgba(76, 58, 23, .82), rgba(22, 18, 13, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 10px 22px rgba(0, 0, 0, .24);
  text-align: center;
}

.icon-draft-mode-mark b,
.icon-draft-mode-mark i {
  display: block;
  font-style: normal;
}

.icon-draft-mode-mark b {
  font: 900 17px/1 Manrope, sans-serif;
}

.icon-draft-mode-mark i {
  color: rgba(255, 239, 194, .72);
  font: 800 7px/1 "DM Mono", monospace;
  letter-spacing: .12em;
}

.icon-draft-mode-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #151006;
  background: linear-gradient(135deg, #f6d472, #bd8730);
  text-decoration: none;
}

.icon-draft-mode-launch:active {
  transform: scale(.97);
}

.home-leaderboard-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 9px;
  padding: 3px;
  border: 1px solid #263246;
  border-radius: 5px;
  background: #0c121b;
}

.home-leaderboard-tabs button {
  min-height: 27px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  color: #7f8ea3;
  background: transparent;
  cursor: pointer;
  font: 800 9px/1 Manrope, sans-serif;
  transition: color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.home-leaderboard-tabs button[aria-selected="true"] {
  color: #111722;
  background: #e5c56c;
}

.home-leaderboard-tabs button:active {
  transform: scale(.97);
}

.home-draft-row > strong:nth-child(3) {
  color: #f1d57d;
}

.home-draft-row .home-achievement-player {
  gap: 8px;
}

.home-draft-leaderboard-prompt {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 26px 10px;
  color: #8e9db1;
  text-align: center;
}

.home-draft-leaderboard-prompt p {
  margin: 0;
}

.home-draft-leaderboard-prompt button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(229, 197, 108, .5);
  border-radius: 4px;
  color: #f3dc99;
  background: rgba(229, 197, 108, .08);
  cursor: pointer;
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  .icon-draft-mode-launch:hover {
    filter: brightness(1.08);
  }

  .home-leaderboard-tabs button:not([aria-selected="true"]):hover {
    color: #d6deea;
    background: #172131;
  }
}

@media (max-width: 720px) {
  .mode-card-icon-draft {
    order: 2;
  }

  .mode-card-icon-draft .mode-card-copy {
    max-width: none;
  }

  .icon-draft-mode-mark {
    display: none;
  }

  .home-leaderboard-tabs button {
    min-height: 30px;
    padding-inline: 8px;
  }
}

.legacy-draft[hidden] {
  display: none;
}

.legacy-draft {
  display: grid;
  gap: 18px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 48px;
}

.legacy-draft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.legacy-draft-head h2 {
  margin: 5px 0 0;
  color: var(--text);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -1px;
}

.legacy-draft-body {
  display: grid;
  gap: 18px;
}

.legacy-nation-card,
.legacy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101722;
}

.legacy-nation-card span,
.legacy-summary span {
  color: #7f8da2;
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.legacy-nation-card strong,
.legacy-summary strong {
  display: block;
  margin-top: 5px;
  color: #eef4fb;
  font-size: 24px;
}

.legacy-nation-card small {
  color: #8d9aaf;
  font-size: 11px;
}

.legacy-lineup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.legacy-slot {
  display: grid;
  min-height: 86px;
  gap: 5px;
  padding: 13px;
  border: 1px solid #202b3a;
  border-radius: 8px;
  background: #121b28;
}

.legacy-slot.is-filled {
  border-color: rgba(64, 196, 160, 0.34);
  background: #10231f;
}

.legacy-slot span,
.legacy-player-card span {
  color: #8ba9ff;
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.legacy-slot strong,
.legacy-player-card strong {
  min-width: 0;
  overflow: hidden;
  color: #edf3fb;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-slot small,
.legacy-player-card small {
  color: #8996aa;
  font-size: 10px;
}

.legacy-offers {
  display: grid;
  gap: 12px;
}

.legacy-offers h3,
.legacy-tournament-round h3 {
  margin: 0;
  color: #dfe7f3;
  font-size: 15px;
}

.legacy-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.legacy-player-card {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid #253246;
  border-radius: 10px;
  background: #111a26;
}

.legacy-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.legacy-slot-actions button {
  min-height: 31px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #08110f;
  background: #8ce4ca;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.legacy-actions {
  display: flex;
  gap: 10px;
}

.legacy-tournament {
  display: grid;
  gap: 14px;
}

.legacy-tournament-round {
  display: grid;
  gap: 8px;
}

.legacy-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #121b28;
}

.legacy-result span:last-child {
  text-align: right;
}

.legacy-result .is-winner {
  color: #8ce4ca;
  font-weight: 900;
}

.legacy-setup-grid,
.legacy-draft-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(540px, 1.18fr);
  gap: 26px;
  align-items: start;
}

.legacy-setup-panel,
.legacy-left-panel,
.legacy-pitch-panel,
.legacy-draft-status,
.legacy-country-panel {
  border: 1px solid #263246;
  border-radius: 12px;
  background: #101722;
}

.legacy-setup-panel,
.legacy-left-panel,
.legacy-pitch-panel {
  padding: 22px;
}

.legacy-choice-grid,
.legacy-formation-choice {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.legacy-setup-panel-head,
.legacy-country-heading,
.legacy-setup-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.legacy-random-setup.secondary-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 9px;
}

.legacy-choice,
.legacy-formation-choice button,
.legacy-player-card {
  border: 1px solid #263246;
  border-radius: 10px;
  color: inherit;
  background: #121b28;
}

.legacy-choice,
.legacy-formation-choice button,
.legacy-player-card {
  cursor: pointer;
  transition: transform 140ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}

.legacy-choice {
  display: grid;
  gap: 5px;
  padding: 16px;
  text-align: left;
}

.legacy-choice.is-selected,
.legacy-formation-choice button.is-selected,
.legacy-player-card.is-selected {
  border-color: rgba(95, 140, 255, 0.68);
  background: #17243a;
}

.legacy-choice:active,
.legacy-formation-choice button:active,
.legacy-player-card:active,
.legacy-pitch-slot:active {
  transform: scale(0.985);
}

.legacy-choice strong {
  color: #f0f5fc;
  font-size: 18px;
}

.legacy-choice small {
  color: #8996aa;
  font-size: 11px;
}

.legacy-formation-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-formation-choice button {
  display: grid;
  min-height: 132px;
  place-items: center;
  gap: 8px;
  padding: 12px;
  color: #b7c3d5;
  font-size: 11px;
  font-weight: 900;
}

.legacy-formation-choice button strong {
  color: #dce6f5;
  font-size: 13px;
}

.legacy-formation-preview {
  display: grid;
  width: 74px;
  height: 88px;
  align-content: space-around;
  padding: 8px 7px;
  border: 1px solid rgba(126, 166, 219, 0.48);
  border-radius: 7px;
  background: #13243a;
}

.legacy-preview-line {
  display: flex;
  justify-content: space-around;
  gap: 3px;
}

.legacy-preview-line i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8ba9ff;
  box-shadow: 0 0 0 2px rgba(139, 169, 255, 0.12);
}

.legacy-country-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.legacy-country-heading h3 {
  margin: 7px 0 0;
  color: #eef4fb;
  font-size: 22px;
}

.legacy-country-tools {
  display: flex;
  gap: 9px;
}

.legacy-country-search input {
  width: min(260px, 36vw);
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #2a3850;
  border-radius: 8px;
  outline: none;
  color: #edf3fb;
  background: #0d1521;
  font: 700 11px "Manrope", sans-serif;
}

.legacy-country-search input:focus {
  border-color: rgba(95, 140, 255, 0.74);
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.10);
}

.legacy-country-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.legacy-country-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid #263246;
  border-radius: 9px;
  color: inherit;
  background: #121b28;
  cursor: pointer;
  text-align: left;
  transition: transform 140ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}

.legacy-country-card[hidden] {
  display: none;
}

.legacy-country-card:active {
  transform: scale(0.98);
}

.legacy-country-card.is-selected {
  border-color: rgba(95, 140, 255, 0.72);
  background: #17243a;
}

.legacy-country-card .country-flag,
.legacy-country-card .country-flag img {
  width: 34px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}

.legacy-country-card > span:not(.country-flag) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.legacy-country-card strong {
  overflow: hidden;
  color: #edf3fb;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-country-card small {
  color: #8492a7;
  font-size: 8px;
  line-height: 1.35;
}

.legacy-country-card > b {
  grid-column: 2;
  color: #8ba9ff;
  font: 800 8px "DM Mono", monospace;
  text-transform: uppercase;
}

.legacy-setup-start {
  padding-top: 18px;
  border-top: 1px solid #263246;
}

.legacy-setup-start > span {
  display: grid;
  gap: 4px;
}

.legacy-setup-start strong {
  color: #edf3fb;
  font-size: 16px;
}

.legacy-setup-start small {
  color: #8996aa;
  font-size: 10px;
}

.legacy-setup-start .primary-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.2);
  opacity: 0.52;
}

.legacy-draft-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}

.legacy-draft-status > div {
  padding: 17px;
  background: #121b28;
}

.legacy-left-panel > .legacy-draft-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legacy-status-flag {
  display: grid;
  place-items: center;
}

.legacy-status-flag .country-flag,
.legacy-status-flag .country-flag img {
  width: 54px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
}

.legacy-draft-status span {
  color: #8ba9ff;
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.legacy-draft-status strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #f0f5fc;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-left-panel {
  display: grid;
  height: 720px;
  max-height: 720px;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, #121827, #0f1522);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.legacy-complete-grid {
  align-items: start;
}

.legacy-complete-panel {
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
}

.legacy-complete-panel .legacy-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.legacy-complete-panel .legacy-actions button {
  width: 100%;
  min-height: 52px;
}

.legacy-helper {
  display: grid;
  gap: 5px;
  padding: 18px 22px;
  border-top: 1px solid #253047;
  border-bottom: 1px solid #253047;
  background: rgba(15, 22, 36, 0.78);
}

.legacy-helper strong {
  color: #f0f5fc;
  font-size: 18px;
  line-height: 1.25;
}

.legacy-helper small {
  color: #8c98aa;
  font-size: 11px;
  line-height: 1.6;
}

.legacy-left-panel .legacy-offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 10px 22px 22px;
  scrollbar-color: #2d3a58 transparent;
}

.legacy-randomiser {
  display: grid;
  padding: 14px 22px 20px;
  border: 0;
  border-radius: 0;
  background: #121b28;
}

.legacy-randomiser.has-respin {
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.48fr);
  gap: 10px;
}

.legacy-respin-button {
  min-width: 0;
  padding-inline: 14px;
  white-space: nowrap;
}

.legacy-respin-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.legacy-randomiser > span {
  color: #8ba9ff;
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.legacy-randomiser > strong {
  color: #f0f5fc;
  font: 800 56px "DM Mono", monospace;
  line-height: 1;
}

.legacy-randomiser > strong.is-spinning,
.legacy-draft-status strong.is-spinning {
  filter: blur(1.2px);
  opacity: 0.82;
}

.legacy-randomiser .primary-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.legacy-player-card {
  width: 100%;
  text-align: left;
}

.legacy-left-panel .legacy-player-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 18px 0;
  border-width: 0 0 1px;
  border-color: #222d43;
  border-radius: 0;
  background: transparent;
}

.legacy-left-panel .legacy-player-card:hover,
.legacy-left-panel .legacy-player-card.is-selected {
  background: rgba(95, 140, 255, 0.08);
}

.legacy-left-panel .legacy-player-card:disabled {
  cursor: not-allowed;
}

.legacy-left-panel .legacy-player-card.is-drafted {
  opacity: 0.42;
}

.legacy-player-card .legacy-position-list {
  display: block;
  min-width: 72px;
  padding-left: 2px;
  color: #8fc4ff;
  font: 800 13px "Manrope", sans-serif;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.legacy-active-session {
  display: flex;
  grid-column: 1 / -1;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 0;
  border-left: 2px solid #40c4a0;
  border-radius: 4px;
  color: #dfe8f5;
  background: #0a1519;
  font-family: "Manrope", sans-serif;
}

.legacy-active-session strong {
  font-size: 10px;
}

.legacy-active-session > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aab7c9;
  font-size: 9px;
  font-weight: 700;
}

.legacy-active-session .country-flag,
.legacy-active-session .country-flag img {
  width: 24px;
  height: 17px;
  border-radius: 3px;
  object-fit: cover;
}

.legacy-landing-settings :disabled {
  cursor: not-allowed;
}

.legacy-landing-picker select:disabled,
.legacy-landing-picker > button:disabled,
.legacy-landing-mode button:disabled:not(.active) {
  opacity: 0.48;
}

.legacy-player-info {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.legacy-rating-badge {
  display: flex;
  min-width: 48px;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  color: #67f08f;
  background: transparent;
}

.legacy-rating-badge small {
  color: #69c985;
  font: 800 8px "Manrope", sans-serif;
}

.legacy-rating-badge b {
  color: #67f08f;
  font-size: 25px;
  line-height: 1;
}

.legacy-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.legacy-stats span {
  padding: 0;
  border-radius: 0;
  color: #9aa6bb;
  background: transparent;
  font: 800 12px "Manrope", sans-serif;
  text-align: left;
}

.legacy-stats span b {
  color: #e2eaf5;
  font-size: inherit;
}

.legacy-pitch-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.legacy-pitch {
  position: relative;
  display: grid;
  height: 720px;
  min-height: 720px;
  align-content: space-between;
  gap: 16px;
  padding: 46px 54px;
  overflow: hidden;
  border: 4px solid rgba(90, 189, 128, 0.82);
  border-radius: 28px;
  background:
    repeating-linear-gradient(180deg, #0f8c4c 0 82px, #0a773f 82px 164px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 26px 90px rgba(0, 0, 0, 0.30);
}

.legacy-pitch-nation-flag {
  display: none;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  width: 62px;
  height: 42px;
  overflow: hidden;
  border: 2px solid rgba(221, 239, 228, 0.72);
  border-radius: 7px;
  background: rgba(5, 35, 22, 0.82);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

.legacy-pitch-nation-flag .country-flag,
.legacy-pitch-nation-flag .country-flag img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.legacy-pitch::before,
.legacy-pitch::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.legacy-pitch::before {
  inset: 50% 0 auto;
  height: 4px;
  background: rgba(219, 242, 228, 0.50);
}

.legacy-pitch::after {
  top: calc(50% - 86px);
  left: calc(50% - 86px);
  width: 172px;
  height: 172px;
  border: 4px solid rgba(219, 242, 228, 0.36);
  border-radius: 50%;
}

.legacy-pitch-line {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--slot-count), minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}

.legacy-pitch-line:first-child::before,
.legacy-pitch-line:last-child::before,
.legacy-pitch-line:first-child::after,
.legacy-pitch-line:last-child::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  content: "";
  transform: translateX(-50%);
}

.legacy-pitch-line:first-child::before,
.legacy-pitch-line:last-child::before {
  width: min(58%, 420px);
  height: 98px;
  border: 4px solid rgba(219, 242, 228, 0.38);
}

.legacy-pitch-line:first-child::before {
  top: -46px;
  border-top: 0;
}

.legacy-pitch-line:last-child::before {
  bottom: -46px;
  border-bottom: 0;
}

.legacy-pitch-line:first-child::after,
.legacy-pitch-line:last-child::after {
  width: min(30%, 210px);
  height: 48px;
  border: 4px solid rgba(219, 242, 228, 0.32);
}

.legacy-pitch-line:first-child::after {
  top: -46px;
  border-top: 0;
}

.legacy-pitch-line:last-child::after {
  bottom: -46px;
  border-bottom: 0;
}

.legacy-pitch-slot {
  position: relative;
  display: grid;
  justify-self: center;
  width: min(96px, 100%);
  height: auto;
  aspect-ratio: 1;
  min-height: 0;
  place-items: center;
  gap: 4px;
  padding: 8px;
  border: 4px solid rgba(213, 239, 222, 0.48);
  border-radius: 999px;
  color: rgba(231, 247, 237, 0.84);
  background: rgba(4, 57, 31, 0.56);
  cursor: pointer;
  text-align: center;
  transition: transform 140ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}

.legacy-pitch-slot:not(.is-filled) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.legacy-pitch-slot.can-accept {
  border-color: rgba(177, 226, 255, 0.95);
  background: rgba(19, 91, 63, 0.86);
  box-shadow: 0 0 0 7px rgba(119, 184, 255, 0.14);
}

.legacy-pitch-slot.can-accept.is-secondary {
  border-style: dashed;
  border-color: rgba(255, 211, 117, 0.94);
  box-shadow: 0 0 0 7px rgba(255, 211, 117, 0.11);
}

.legacy-pitch-slot.can-accept.is-out-of-position {
  border-style: dashed;
  border-color: rgba(255, 156, 139, 0.94);
  background: rgba(91, 60, 38, 0.78);
  box-shadow: 0 0 0 7px rgba(255, 156, 139, 0.11);
}

.legacy-pitch-slot.is-filled {
  border-color: #67d9b7;
  color: #f0f5fc;
  background: #0f966d;
  box-shadow: 0 5px 16px rgba(2, 35, 24, 0.28);
}

.legacy-pitch-slot.is-selected {
  border-color: rgba(95, 140, 255, 0.86);
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.12);
}

.legacy-pitch-slot .legacy-pitch-position {
  color: #d7f4df;
  font: 900 20px "Manrope", sans-serif;
  letter-spacing: 0;
}

.legacy-pitch-rating {
  color: #fff;
  font: 900 25px "Manrope", sans-serif;
  line-height: 1;
}

.legacy-pitch-filled-mark {
  color: #e9fff8;
  font: 900 21px "Manrope", sans-serif;
  line-height: 1;
}

.legacy-pitch-name {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  z-index: 3;
  max-width: 118px;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 6px;
  color: #f3f7fb;
  background: rgba(7, 15, 13, 0.92);
  font: 800 11px "Manrope", sans-serif;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

.legacy-pitch-year {
  position: absolute;
  left: 50%;
  top: -12px;
  z-index: 3;
  padding: 3px 6px;
  border: 1px solid rgba(178, 217, 255, 0.34);
  border-radius: 5px;
  color: #dbe8ff;
  background: #13233c;
  font: 800 11px "Manrope", sans-serif;
  line-height: 1;
  transform: translateX(-50%);
}

.legacy-pitch-slot.is-expert .legacy-pitch-position {
  font-size: 17px;
}

@keyframes legacyCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mode-select {
  padding: 26px 0 10px;
}

.before-start:not(.legacy-mode-active):not(.achievements-mode-active) #pageHeading {
  display: none;
}

.before-start:not(.legacy-mode-active) .topbar {
  min-height: 40px;
  padding-block: 16px 0;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.mode-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 340px;
  flex-direction: column;
  padding: clamp(24px, 2.5vw, 32px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #111823;
  box-shadow: none;
}

.mode-card[hidden] {
  display: none !important;
}

.mode-card:has(.landing-setting-info[open]) {
  z-index: 50;
  overflow: visible;
}

.mode-card-default {
  order: 3;
  grid-column: span 3;
  background: #121a27;
}

.mode-card-online {
  order: 7;
  grid-column: span 2;
  min-height: 210px;
  background: #0e151f;
}

.mode-card-legacy {
  order: 5;
  grid-column: span 2;
  min-height: 210px;
  background: #0e151f;
}

.mode-card-retro {
  order: 1;
  grid-column: span 3;
  min-height: 420px;
  --retro-accent: #fcc40c;
  --retro-accent-text: #151006;
  background: #121a27;
}

.mode-card-coming-soon {
  grid-column: span 2;
  min-height: 210px;
  background: #0e151f;
}

.mode-card-custom {
  order: 5;
  grid-column: span 2;
  min-height: 210px;
  background: #0e151f;
}

.mode-card-domestic-league {
  order: 2;
  grid-column: span 3;
  min-height: 420px;
  isolation: isolate;
  --premier-league-accent: #381d53;
  background:
    radial-gradient(circle at 92% 2%, rgba(255, 255, 255, .11), transparent 35%),
    var(--premier-league-accent);
}

.domestic-league-panel {
  display: contents;
}

.domestic-league-panel[hidden] {
  display: none !important;
}

.mode-card-domestic-league > :is(.mode-card-copy, .landing-settings, .mode-card-actions),
.mode-card-domestic-league .domestic-league-panel > :is(.mode-card-copy, .landing-settings, .mode-card-actions) {
  position: relative;
  z-index: 2;
}

.mode-card-domestic-league.is-la-liga-preview {
  border-color: rgba(255, 160, 133, .3);
  color: var(--ll-ink, #fff6f2);
  background:
    radial-gradient(circle at 88% 0, rgba(255, 150, 63, .28), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(242, 59, 135, .24), transparent 40%),
    linear-gradient(145deg, var(--ll-panel-raised, #48153a), var(--ll-panel, #35102d) 52%, var(--ll-paper, #21071b));
  box-shadow: 0 22px 52px rgba(24, 3, 18, .34);
}

.mode-card-domestic-league.is-ligue-1-preview {
  border-color: rgba(55, 201, 223, .38);
  color: var(--l1-ink, #f7fbff);
  background:
    radial-gradient(circle at 88% 0, rgba(55, 201, 223, .24), transparent 35%),
    radial-gradient(circle at 2% 100%, rgba(201, 255, 8, .12), transparent 42%),
    linear-gradient(145deg, var(--l1-panel-raised, #0e2d5f), var(--l1-panel, #0a214a) 54%, var(--l1-paper, #03102f));
  box-shadow: 0 22px 52px rgba(1, 8, 28, .42);
}

.mode-card-domestic-league.is-bundesliga-preview {
  border-color: rgba(255, 255, 255, .3);
  color: var(--bl-ink, #fff);
  background:
    radial-gradient(circle at 88% 0, rgba(239, 35, 52, .28), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(210, 5, 21, .24), transparent 40%),
    linear-gradient(145deg, var(--bl-panel-raised, #2b2b2b), var(--bl-panel, #1d1d1d) 52%, var(--bl-paper, #121212));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .4);
}

.mode-card-domestic-league.is-super-lig-preview,
.mode-card-domestic-league[data-domestic-league-preview="superLig"] {
  border-color: rgba(226, 25, 55, .48);
  color: var(--sl-ink, #f8faff);
  background:
    radial-gradient(circle at 8% 0, rgba(226, 25, 55, .3), transparent 38%),
    radial-gradient(circle at 94% 100%, rgba(69, 156, 255, .18), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .018) 18px 34px),
    linear-gradient(145deg, var(--sl-panel-raised, #25182f), var(--sl-panel, #0c1d34) 54%, var(--sl-paper, #06172b));
  box-shadow: 0 22px 52px rgba(2, 9, 19, .46);
}

.mode-card-domestic-league.is-eredivisie-preview,
.mode-card-domestic-league[data-domestic-league-preview="eredivisie"] {
  border-color: rgba(255, 49, 95, .58);
  color: var(--er-ink, #fff7fc);
  background:
    radial-gradient(circle at 88% 0, rgba(255, 49, 95, .28), transparent 36%),
    radial-gradient(circle at 2% 100%, rgba(155, 134, 255, .24), transparent 42%),
    linear-gradient(145deg, var(--er-panel-raised, #2b2373), var(--er-panel, #211a63) 54%, var(--er-canvas, #120c4a));
  box-shadow: 0 22px 52px rgba(7, 3, 42, .44);
}

.mode-card-domestic-league.is-belgian-pro-league-preview,
.mode-card-domestic-league[data-domestic-league-preview="belgianProLeague"] {
  border-color: rgba(254, 25, 64, .58);
  color: var(--bpl-ink, #fff8fa);
  background:
    radial-gradient(circle at 88% 0, rgba(254, 25, 64, .3), transparent 36%),
    radial-gradient(circle at 2% 100%, rgba(255, 90, 54, .22), transparent 42%),
    linear-gradient(145deg, var(--bpl-panel-raised, #2f0a49), var(--bpl-panel, #21043a) 54%, var(--bpl-canvas, #15012a));
  box-shadow: 0 22px 52px rgba(7, 1, 20, .48);
}

.mode-card-domestic-league.is-liga-portugal-preview,
.mode-card-domestic-league[data-domestic-league-preview="ligaPortugal"] {
  border-color: rgba(127, 176, 255, .58);
  color: var(--lp-ink, #f7f9ff);
  background:
    linear-gradient(118deg, rgba(127, 176, 255, .12) 0 16%, transparent 16% 84%, rgba(127, 176, 255, .08) 84%),
    linear-gradient(145deg, var(--lp-panel-raised, #0b3777), var(--lp-panel, #082e68) 54%, var(--lp-canvas, #031b40));
  box-shadow: 0 22px 52px rgba(0, 10, 30, .48);
}

.mode-card-domestic-league.is-saudi-pro-league-preview,
.mode-card-domestic-league[data-domestic-league-preview="saudiProLeague"] {
  border-color: rgba(201, 246, 220, .58);
  color: var(--spl-ink, #f6fff9);
  background:
    radial-gradient(circle at 88% 0, rgba(148, 233, 185, .2), transparent 36%),
    linear-gradient(145deg, var(--spl-panel-raised, #086842), var(--spl-flag-green, #005430) 54%, var(--spl-canvas-deep, #001d12));
  box-shadow: 0 22px 52px rgba(0, 24, 14, .5);
}

.mode-card-domestic-league.is-mls-preview,
.mode-card-domestic-league[data-domestic-league-preview="mls"] {
  border-color: rgba(255, 220, 222, .58);
  color: var(--mls-ink, #fff8f8);
  background:
    radial-gradient(circle at 88% 0, rgba(255, 116, 121, .22), transparent 36%),
    linear-gradient(145deg, var(--mls-red, #e2232a), var(--mls-red-deep, #a81019) 54%, var(--mls-canvas-deep, #0b0305));
  box-shadow: 0 22px 52px rgba(60, 2, 8, .5);
}

.mode-card-domestic-league.is-championship-preview {
  border-color: rgba(183, 154, 63, .72);
  color: #fff;
  background:
    radial-gradient(circle at 92% 0, rgba(255, 255, 255, .2), transparent 32%),
    radial-gradient(circle at 5% 100%, rgba(6, 27, 132, .3), transparent 42%),
    linear-gradient(145deg, #c3a84b, #a78c36 56%, #8f772f);
  box-shadow: 0 22px 52px rgba(25, 19, 3, .34);
}

.domestic-league-selectors {
  position: relative;
  z-index: 5;
  display: grid;
  width: min(230px, 100%);
  gap: 5px;
  margin: 8px 0 2px;
}

.domestic-league-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 1px;
  margin: 0;
  padding: 2px;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  border: 1px solid rgba(230, 210, 244, .3);
  border-radius: 5px;
  background: rgba(29, 10, 43, .58);
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
  pointer-events: auto;
  touch-action: manipulation;
}

.domestic-league-switch::-webkit-scrollbar {
  display: none;
}

.domestic-league-switch button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: rgba(246, 235, 255, .72);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  scroll-snap-align: start;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), color 160ms ease, background-color 160ms ease;
}

.domestic-league-switch button:active {
  transform: scale(.94);
}

.domestic-league-switch button:focus-visible,
.domestic-english-league-switch button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.domestic-league-switch button.active {
  color: #fff;
  background: #74409a;
}

.domestic-english-league-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 104px;
  min-height: 25px;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(230, 210, 244, .3);
  border-radius: 5px;
  background: rgba(29, 10, 43, .58);
}

.domestic-english-league-switch[hidden] {
  display: none !important;
}

.domestic-english-league-switch button {
  min-height: 21px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  color: rgba(246, 235, 255, .72);
  background: transparent;
  font: 900 9px "DM Mono", monospace;
  letter-spacing: .35px;
  cursor: pointer;
  touch-action: manipulation;
}

.domestic-english-league-switch button.active {
  color: #fff;
  background: #74409a;
}

.mode-card-domestic-league.is-championship-preview .domestic-league-switch {
  border-color: rgba(255, 255, 255, .46);
  background: rgba(6, 27, 132, .88);
}

.mode-card-domestic-league.is-championship-preview .domestic-english-league-switch {
  border-color: rgba(255, 255, 255, .46);
  background: rgba(6, 27, 132, .88);
}

.mode-card-domestic-league.is-championship-preview .domestic-english-league-switch button.active {
  color: #061b84;
  background: #fff;
  box-shadow: inset 0 0 0 1px #b79a3f;
}

.mode-card-domestic-league.is-championship-preview .domestic-league-switch button.active {
  color: #061b84;
  background: #fff;
  box-shadow: inset 0 0 0 1px #b79a3f;
}

.championship-heading {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.championship-brand-mark,
.championship-heading img {
  width: 62px;
  height: 76px;
  object-fit: contain;
}

.championship-heading h3,
.championship-heading p,
.championship-settings .landing-setting > span,
.championship-settings .landing-setting-heading > span,
.championship-settings .spectate-picker-copy strong {
  color: #fff;
}

.championship-brand-mark {
  align-self: start;
  margin-top: 18px;
}

.championship-heading p,
.championship-settings .spectate-picker-copy small {
  color: rgba(255, 255, 255, .78);
}

.championship-settings .segmented,
.championship-team-picker {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(6, 27, 132, .32);
}

.championship-settings .segmented button {
  color: rgba(255, 255, 255, .82);
}

.championship-settings .segmented button.active,
.championship-launch-button {
  color: #061b84 !important;
  background: #fff !important;
}

.championship-team-mark,
.championship-club-code,
.championship-asset-code {
  color: #fff;
  border-color: rgba(255, 255, 255, .46);
  background: #061b84;
}

.championship-install-button {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(6, 27, 132, .82);
}

.championship-install-button.is-installed {
  color: #061b84;
  border-color: #061b84;
  background: #fff;
}

.championship-asset-pack-modal .pl-asset-pack-shell {
  border-color: #b79a3f;
  background: #f8f3e3;
}

.championship-asset-pack-intro img {
  width: 68px;
  height: 84px;
  object-fit: contain;
}

.domestic-league-flag {
  display: block;
  width: 24px;
  height: 16px;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.domestic-league-flag.flag-england {
  background:
    linear-gradient(transparent 38%, #ce1124 38% 62%, transparent 62%),
    linear-gradient(90deg, transparent 38%, #ce1124 38% 62%, transparent 62%),
    #fff;
}

.domestic-league-flag.flag-spain {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.domestic-league-flag.flag-france {
  background: linear-gradient(90deg, #0055a4 0 33.333%, #fff 33.333% 66.666%, #ef4135 66.666%);
}

.domestic-league-flag.flag-italy {
  background: linear-gradient(90deg, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666%);
}

.domestic-league-flag.flag-germany {
  background: linear-gradient(#000 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666%);
}

.domestic-league-flag.flag-turkey {
  position: relative;
  background:
    radial-gradient(circle at 47% 50%, #e30a17 0 20%, transparent 21%),
    radial-gradient(circle at 39% 50%, #fff 0 27%, transparent 28%),
    #e30a17;
}

.domestic-league-flag.flag-turkey::after {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 6px;
  height: 6px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  content: "";
  transform: translate(-50%, -50%) rotate(10deg);
}

.domestic-league-flag.flag-netherlands {
  background: linear-gradient(#ae1c28 0 33.333%, #fff 33.333% 66.666%, #21468b 66.666%);
}

.domestic-league-flag.flag-belgium {
  background: linear-gradient(90deg, #000 0 33.333%, #fdda24 33.333% 66.666%, #ef3340 66.666%);
}

.domestic-league-flag.flag-portugal {
  background: linear-gradient(90deg, #046a38 0 40%, #da291c 40% 100%);
}

.domestic-league-flag.flag-saudi-arabia {
  position: relative;
  background: #005430;
}

.domestic-league-flag.flag-saudi-arabia::before {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 12px;
  height: 1px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px #fff, 0 4px #fff;
  content: "";
}

.domestic-league-flag.flag-saudi-arabia::after {
  position: absolute;
  right: 5px;
  bottom: 3px;
  width: 13px;
  height: 1px;
  border-radius: 999px 0 0 999px;
  background: #fff;
  box-shadow: -2px -1px 0 -0.25px #fff;
  content: "";
  transform: skewX(-18deg);
  transform-origin: right center;
}

.domestic-league-flag.flag-united-states {
  position: relative;
  background: repeating-linear-gradient(180deg, #b22234 0 2px, #fff 2px 4px);
}

.domestic-league-flag.flag-united-states::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 12px;
  height: 9px;
  border-radius: 2px 0 2px 0;
  background: #3c3b6e;
  content: "";
}

.domestic-league-flag.flag-united-states::after {
  position: absolute;
  top: 1px;
  left: 2px;
  color: #fff;
  content: "\00b7\00b7\00b7";
  font-size: 7px;
  letter-spacing: -1px;
  line-height: 1;
}

.mode-card-domestic-league.is-la-liga-preview .domestic-league-switch {
  border-color: rgba(255, 173, 140, .4);
  background: rgba(42, 10, 35, .78);
}

.mode-card-domestic-league.is-la-liga-preview .domestic-league-switch button {
  color: #e0b1c4;
}

.mode-card-domestic-league.is-la-liga-preview .domestic-league-switch button.active {
  color: #240719;
  background: linear-gradient(135deg, #f23b87 0%, #ff6b5f 52%, #ff963f 100%);
}

.mode-card-domestic-league.is-serie-a-preview .domestic-league-switch {
  border-color: rgba(57, 198, 255, .42);
  background: rgba(3, 20, 47, .8);
}

.mode-card-domestic-league.is-serie-a-preview .domestic-league-switch button {
  color: var(--sa-muted, #b8dcf3);
}

.mode-card-domestic-league.is-serie-a-preview .domestic-league-switch button.active {
  color: var(--sa-accent-ink, #031632);
  background: var(--sa-accent-gradient, linear-gradient(135deg, #126dff, #29c2ff 56%, #39c6ff));
}

.mode-card-domestic-league.is-ligue-1-preview .domestic-league-switch {
  border-color: rgba(55, 201, 223, .38);
  background: rgba(2, 13, 42, .78);
}

.mode-card-domestic-league.is-ligue-1-preview .domestic-league-switch button {
  color: var(--l1-muted, #9db4d7);
}

.mode-card-domestic-league.is-ligue-1-preview .domestic-league-switch button.active {
  color: var(--l1-accent-ink, #03102f);
  background: var(--l1-accent-gradient, linear-gradient(135deg, #c9ff08, #37c9df));
}

.mode-card-domestic-league.is-bundesliga-preview .domestic-league-switch {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(18, 18, 18, .82);
}

.mode-card-domestic-league.is-bundesliga-preview .domestic-league-switch button {
  color: var(--bl-muted, #cfcfcf);
}

.mode-card-domestic-league.is-bundesliga-preview .domestic-league-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, #d20515, #ef2334);
}

.mode-card-domestic-league.is-super-lig-preview .domestic-league-switch,
.mode-card-domestic-league[data-domestic-league-preview="superLig"] .domestic-league-switch {
  border-color: rgba(226, 25, 55, .52);
  background: rgba(6, 23, 43, .84);
}

.mode-card-domestic-league.is-super-lig-preview .domestic-league-switch button,
.mode-card-domestic-league[data-domestic-league-preview="superLig"] .domestic-league-switch button {
  color: var(--sl-muted, #b7c4d8);
}

.mode-card-domestic-league.is-super-lig-preview .domestic-league-switch button.active,
.mode-card-domestic-league[data-domestic-league-preview="superLig"] .domestic-league-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, #b80e2b, #e21937 58%, #ff4963);
  box-shadow: inset 0 0 0 1px rgba(255, 73, 99, .34);
}

.mode-card-domestic-league.is-eredivisie-preview .domestic-league-switch,
.mode-card-domestic-league[data-domestic-league-preview="eredivisie"] .domestic-league-switch {
  border-color: rgba(255, 49, 95, .52);
  background: rgba(18, 12, 74, .84);
}

.mode-card-domestic-league.is-eredivisie-preview .domestic-league-switch button,
.mode-card-domestic-league[data-domestic-league-preview="eredivisie"] .domestic-league-switch button {
  color: var(--er-muted, #c7bde4);
}

.mode-card-domestic-league.is-eredivisie-preview .domestic-league-switch button.active,
.mode-card-domestic-league[data-domestic-league-preview="eredivisie"] .domestic-league-switch button.active {
  color: var(--er-canvas, #120c4a);
  background: linear-gradient(135deg, #c51e49, #ff315f 58%, #ff5a7d);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 125, .34);
}

.mode-card-domestic-league.is-belgian-pro-league-preview .domestic-league-switch,
.mode-card-domestic-league[data-domestic-league-preview="belgianProLeague"] .domestic-league-switch {
  border-color: rgba(254, 25, 64, .52);
  background: rgba(21, 1, 42, .88);
}

.mode-card-domestic-league.is-belgian-pro-league-preview .domestic-league-switch button,
.mode-card-domestic-league[data-domestic-league-preview="belgianProLeague"] .domestic-league-switch button {
  color: var(--bpl-muted, #d4bfd9);
}

.mode-card-domestic-league.is-belgian-pro-league-preview .domestic-league-switch button.active,
.mode-card-domestic-league[data-domestic-league-preview="belgianProLeague"] .domestic-league-switch button.active {
  color: var(--bpl-accent-ink, #15012a);
  background: var(--bpl-gradient, linear-gradient(135deg, #fe1940 0%, #ff343e 58%, #ff5a36 100%));
  box-shadow: inset 0 0 0 1px rgba(255, 90, 54, .34);
}

.mode-card-domestic-league.is-liga-portugal-preview .domestic-league-switch,
.mode-card-domestic-league[data-domestic-league-preview="ligaPortugal"] .domestic-league-switch {
  border-color: rgba(127, 176, 255, .52);
  background: rgba(3, 27, 64, .88);
}

.mode-card-domestic-league.is-liga-portugal-preview .domestic-league-switch button,
.mode-card-domestic-league[data-domestic-league-preview="ligaPortugal"] .domestic-league-switch button {
  color: var(--lp-muted, #b9c9e5);
}

.mode-card-domestic-league.is-liga-portugal-preview .domestic-league-switch button.active,
.mode-card-domestic-league[data-domestic-league-preview="ligaPortugal"] .domestic-league-switch button.active {
  color: var(--lp-accent-ink, #031b40);
  background: var(--lp-gradient, linear-gradient(135deg, #fff, #9ac2ff));
  box-shadow: inset 0 0 0 1px rgba(127, 176, 255, .34);
}

.mode-card-domestic-league.is-saudi-pro-league-preview .domestic-league-switch,
.mode-card-domestic-league[data-domestic-league-preview="saudiProLeague"] .domestic-league-switch {
  border-color: rgba(201, 246, 220, .5);
  background: rgba(0, 29, 18, .88);
}

.mode-card-domestic-league.is-saudi-pro-league-preview .domestic-league-switch button,
.mode-card-domestic-league[data-domestic-league-preview="saudiProLeague"] .domestic-league-switch button {
  color: var(--spl-muted, #b8ddca);
}

.mode-card-domestic-league.is-saudi-pro-league-preview .domestic-league-switch button.active,
.mode-card-domestic-league[data-domestic-league-preview="saudiProLeague"] .domestic-league-switch button.active {
  color: var(--spl-accent-ink, #002b19);
  background: var(--spl-gradient, linear-gradient(135deg, #e8fff2, #94e9b9));
  box-shadow: inset 0 0 0 1px rgba(201, 246, 220, .36);
}

.mode-card-domestic-league.is-mls-preview .domestic-league-switch,
.mode-card-domestic-league[data-domestic-league-preview="mls"] .domestic-league-switch {
  border-color: rgba(255, 220, 222, .5);
  background: rgba(25, 3, 7, .9);
}

.mode-card-domestic-league.is-mls-preview .domestic-league-switch button,
.mode-card-domestic-league[data-domestic-league-preview="mls"] .domestic-league-switch button {
  color: var(--mls-muted, #e0b9bd);
}

.mode-card-domestic-league.is-mls-preview .domestic-league-switch button.active,
.mode-card-domestic-league[data-domestic-league-preview="mls"] .domestic-league-switch button.active {
  color: var(--mls-accent-ink, #230205);
  background: linear-gradient(135deg, #fff, #ffb7ba);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.mode-card-domestic-league .mode-card-copy {
  padding-right: 0;
}

.mode-card-domestic-league .mode-card-copy > div:last-child {
  min-width: 0;
}

body[data-desktop-mode-setup] .mode-card-domestic-league .domestic-league-selectors {
  display: none;
}

body[data-desktop-mode-setup] .mode-card-domestic-league .mode-card-copy {
  padding-right: 0;
}

.mode-card-premier-league {
  order: 2;
  grid-column: span 3;
  min-height: 420px;
  --premier-league-accent: #381d53;
  background:
    radial-gradient(circle at 92% 2%, rgba(255, 255, 255, 0.11), transparent 35%),
    var(--premier-league-accent);
}

.mode-card-premier-league .mode-card-actions {
  align-items: stretch;
  gap: 10px;
}

.mode-card-premier-league #startPremierLeagueSeasonButton {
  position: relative;
  color: #fff;
  background: #74409a;
  box-shadow: 0 10px 24px rgba(25, 7, 38, .3);
}

.mode-card-premier-league .premier-league-menu-restart {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(223, 190, 244, .48);
  border-radius: 5px;
  color: #f8efff;
  background: rgba(31, 11, 45, .38);
  font-weight: 800;
}

.mode-card-premier-league.is-season-started .premier-league-team-picker:disabled {
  cursor: not-allowed;
  opacity: .82;
}

.mode-card-premier-league.is-season-started [data-settings-scope="premier-league"] button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.mode-card-premier-league.is-season-started [data-settings-scope="premier-league"] button.active:disabled {
  opacity: 1;
}

@media (hover: hover) {
  .mode-card-premier-league #startPremierLeagueSeasonButton:hover {
    color: #fff;
    background: #8c55ad;
    box-shadow: 0 13px 28px rgba(25, 7, 38, .38);
  }

  .mode-card-premier-league .premier-league-menu-restart:hover {
    border-color: rgba(239, 211, 255, .76);
    color: #fff;
    background: rgba(111, 56, 143, .72);
  }
}

.mode-card-ucl {
  order: 4;
  grid-column: span 3;
  min-height: 340px;
  background:
    radial-gradient(circle at 86% 16%, rgba(104, 136, 255, .24), transparent 34%),
    linear-gradient(145deg, #111a31, #0b1020 68%);
}

.club-competition-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 3px;
  margin: 11px 0 3px;
  padding: 3px;
  border: 1px solid rgba(143, 178, 255, .25);
  border-radius: 6px;
  background: rgba(5, 12, 30, .58);
}

.club-competition-switch button {
  min-height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 4px;
  color: #8999b8;
  background: transparent;
  font: 800 11px "Manrope", sans-serif;
  cursor: pointer;
}

.club-competition-switch button.active {
  color: #fff;
  background: #244fae;
}

.mode-card-ucl.is-europa-mode {
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 109, 0, .3), transparent 31%),
    linear-gradient(122deg, transparent 64%, rgba(255, 102, 0, .16) 64% 67%, transparent 67%),
    linear-gradient(145deg, #17120f, #080908 72%);
}

.mode-card-ucl.is-europa-mode .ucl-mode-logo {
  filter: brightness(0) invert(1) drop-shadow(0 10px 20px rgba(255, 93, 0, .2));
}

.mode-card-ucl.is-europa-mode .mode-card-mobile-artwork img {
  filter: brightness(0) invert(1);
}

.mode-card-ucl.is-europa-mode .club-competition-switch {
  border-color: rgba(255, 116, 26, .42);
  background: rgba(0, 0, 0, .46);
}

.mode-card-ucl.is-europa-mode .club-competition-switch button.active {
  color: #17100b;
  background: #ff6900;
}

.mode-card-ucl.is-conference-mode {
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 14%, rgba(0, 241, 105, .22), transparent 32%),
    linear-gradient(145deg, #07150d, #030705 72%);
}

.mode-card-ucl.is-conference-mode .ucl-mode-logo,
.mode-card-ucl.is-conference-mode .mode-card-mobile-artwork img {
  filter: drop-shadow(0 12px 24px rgba(0, 241, 105, .18));
}

.mode-card-ucl.is-conference-mode .club-competition-switch {
  border-color: rgba(0, 241, 105, .36);
  background: rgba(0, 0, 0, .5);
}

.mode-card-ucl.is-conference-mode .club-competition-switch button.active {
  color: #031008;
  background: #00f169;
}

.conference-asset-pack-modal .pl-asset-pack-intro {
  background: linear-gradient(135deg, #07140d, #07512b);
}

.conference-asset-pack-modal .pl-asset-pack-intro img {
  filter: none;
}

.conference-asset-pack-modal .pl-asset-pack-badge.is-provisional {
  outline: 1px dashed rgba(0, 241, 105, .5);
  outline-offset: -2px;
}

.europa-coming-soon {
  display: grid;
  max-width: 470px;
  gap: 7px;
  margin-top: auto;
}

.europa-coming-soon[hidden] {
  display: none;
}

.europa-coming-soon > span {
  color: #ff7620;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.europa-coming-soon > strong {
  color: #fff;
  font-size: 16px;
}

.europa-coming-soon > p {
  margin: 0 0 8px;
  color: #b9aea7;
  font-size: 12px;
  line-height: 1.55;
}

.europa-coming-soon .mode-coming-soon-button {
  width: min(210px, 100%);
  border-color: rgba(255, 118, 32, .44);
  color: #ffb17d;
  background: rgba(76, 29, 5, .62);
}

.europa-asset-pack-intro img {
  filter: brightness(0) invert(1);
}

.europa-asset-pack-modal .pl-asset-pack-intro {
  background: linear-gradient(135deg, #25140b, #612400);
}

.europa-asset-pack-modal .pl-asset-pack-badge.is-provisional {
  outline: 1px dashed rgba(255, 112, 28, .5);
  outline-offset: -2px;
}

.mode-card-ucl .ucl-launch-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(143, 178, 255, .42);
  color: #fff;
  background: linear-gradient(135deg, #244fae, #102e70);
  box-shadow: 0 12px 28px rgba(3, 14, 43, .3);
  transition: background 180ms ease, border-color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.mode-card-ucl.is-europa-mode .ucl-launch-button {
  border-color: rgba(255, 116, 35, .58);
  color: #160a04;
  background: linear-gradient(116deg, #ef3d20 0 44%, #ff7a24 44% 100%);
  box-shadow: 0 12px 28px rgba(226, 52, 22, .28);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.mode-card-ucl.is-conference-mode .ucl-launch-button {
  border-color: rgba(0, 241, 105, .58);
  color: #031008;
  background: linear-gradient(116deg, #00c957, #00f169);
  box-shadow: 0 12px 28px rgba(0, 170, 74, .22);
}

.mode-card-ucl.is-conference-mode .premier-league-menu-restart {
  border-color: rgba(0, 241, 105, .34);
  color: #a8f5c8;
  background: rgba(3, 43, 22, .7);
}

.mode-card-ucl.is-europa-mode .premier-league-menu-restart {
  border-color: rgba(255, 112, 34, .38);
  color: #ffc5a0;
  background: rgba(51, 20, 8, .66);
}

@media (max-width: 720px) {
  .club-competition-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .club-competition-switch button {
    min-height: 38px;
    padding-inline: 9px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mode-card-ucl .ucl-launch-button:hover {
    border-color: rgba(183, 205, 255, .76);
    background: linear-gradient(135deg, #315fc5, #183b88);
  }
}

.mode-card-ucl .ucl-launch-button:active {
  transform: scale(.97);
}

.mode-card-ucl .premier-league-menu-restart {
  align-self: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(143, 178, 255, .34);
  border-radius: 5px;
  color: #e7edff;
  background: rgba(9, 30, 76, .54);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.mode-card-ucl .premier-league-menu-restart:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .mode-card-ucl .premier-league-menu-restart:hover {
    border-color: rgba(183, 205, 255, .68);
    background: rgba(24, 59, 136, .72);
  }
}

.mode-card-coming-soon .mode-card-copy {
  margin-bottom: 18px;
}

.mode-card-career {
  order: 5;
  grid-column: span 3;
  min-height: 210px;
  background: #0e151f;
}

.career-coming-soon-copy {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  margin: 0;
}

.career-coming-soon-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.career-coming-soon-title h3 {
  margin-bottom: 0;
}

.career-coming-soon-copy p {
  margin-top: 14px;
}

.mode-card-career-player .career-coming-soon-copy {
  height: auto;
  justify-content: flex-start;
}

.mode-card-career-player .mode-card-actions {
  margin-top: auto;
}

@media (max-width: 720px) {
  .mode-card-career {
    grid-column: 1 / -1;
  }
}

html.light-mode body.before-start .mode-card-career .mode-card-mobile-copy strong {
  color: #172033;
}

html.light-mode body.before-start .mode-card-career :is(
  .mode-card-mobile-copy small,
  .mode-card-mobile-chevron
) {
  color: #68758a;
}

.ucl-mode-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 0;
}

.ucl-mode-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.ucl-mode-heading h3 {
  margin-bottom: 6px;
}

.ucl-install-button {
  min-height: 30px;
  margin: 0 0 9px;
  padding: 0 11px;
  border: 1px solid rgba(119, 147, 236, .48);
  border-radius: 5px;
  color: #e8edff;
  background: rgba(22, 37, 76, .72);
  font: 800 10px "Manrope", sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ucl-install-button:active {
  transform: scale(0.97);
}

.ucl-install-button.is-installed {
  border-color: #8da9ff;
  color: #ffffff;
  background: #304d9a;
}

@media (hover: hover) and (pointer: fine) {
  .ucl-install-button:hover {
    border-color: #a9bdff;
    background: rgba(40, 64, 124, .92);
  }

  .ucl-install-button.is-installed:hover {
    background: #3d5eb6;
  }
}

.ucl-mode-heading p {
  max-width: 430px;
}

.ucl-landing-settings {
  grid-template-columns: 1fr;
  margin-bottom: 22px;
}

.ucl-team-picker {
  border-color: rgba(119, 147, 236, .32);
  background: rgba(10, 17, 36, .62);
}

.ucl-team-picker:hover {
  background: rgba(16, 27, 57, .78);
}

.ucl-team-mark img,
.ucl-neutral-mark img {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
}

.ucl-team-mark.is-club,
.ucl-club-code {
  display: grid;
  place-items: center;
  color: #dce5ff;
  background: #1a2a50;
  font: 800 10px/1 "DM Mono", monospace;
}

.ucl-club-code {
  width: 42px;
  height: 32px;
  flex: 0 0 42px;
  border: 1px solid rgba(124, 154, 247, .28);
  border-radius: 5px;
}

.ucl-club-badge {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.ucl-team-mark .ucl-club-badge {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
}

.ucl-picker-badge {
  justify-self: center;
}

.ucl-neutral-mark {
  overflow: hidden;
  background: #17233e;
}

/* UCL marks are transparent crests, not code tiles. Keep the home picker square so
   tall or wide artwork never gets cropped by the shared 44x34 flag treatment. */
.mode-card-ucl .ucl-team-picker .spectate-picker-mark {
  width: 46px;
  height: 46px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mode-card-ucl .ucl-team-picker .ucl-team-mark img {
  width: 46px;
  height: 46px;
  padding: 0;
  object-fit: contain;
}

.mode-card-ucl .ucl-team-picker .ucl-team-mark.is-club {
  color: inherit;
  background: transparent;
  font-size: 0;
}

.spectate-modal .ucl-neutral-mark {
  width: 38px;
  height: 38px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.spectate-modal .ucl-neutral-mark img,
.spectate-modal .ucl-picker-badge {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.legacy-setup-modal {
  width: min(620px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  color: #edf2fb;
  border: 1px solid #34435c;
  border-radius: 16px;
  background: #101824;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .7);
}

.legacy-setup-modal::backdrop {
  background: rgba(2, 7, 14, .82);
  backdrop-filter: blur(6px);
}

.legacy-setup-modal-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid rgba(135, 151, 184, .15);
}

.legacy-setup-modal-card > header span {
  color: #789cff;
  font: 900 9px/1.2 "DM Mono", monospace;
  letter-spacing: .15em;
}

.legacy-setup-modal-card > header h2 {
  margin: 6px 0 5px;
  font-size: clamp(23px, 5vw, 31px);
}

.legacy-setup-modal-card > header p {
  margin: 0;
  color: #8f9bb1;
  font-size: 12px;
}

.legacy-setup-modal-close {
  padding: 0 4px;
  color: #aab5c7;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

.legacy-setup-modal .legacy-landing-settings {
  margin: 0;
  padding: 24px 26px;
}

.legacy-setup-modal-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 26px;
  border-top: 1px solid rgba(135, 151, 184, .15);
  background: #121c2a;
}

.legacy-setup-modal-card > footer button {
  min-height: 46px;
  padding-inline: 18px;
}

.premier-league-heading {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 0;
}

.premier-league-heading img {
  width: 62px;
  height: 68px;
  object-fit: contain;
}

.premier-league-brand-mark {
  display: grid;
  width: 62px;
  height: 68px;
  place-items: center;
}

.premier-league-brand-mark > * {
  grid-area: 1 / 1;
}

.premier-league-brand-mark {
  align-self: start;
  margin-top: 18px;
}

.premier-league-heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.67);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.premier-league-heading h3 {
  margin-bottom: 0;
  color: #ffffff;
}

.premier-league-install-button {
  min-height: 32px;
  margin-top: 11px;
  padding: 0 12px;
  border: 1px solid rgba(190, 126, 221, 0.5);
  border-radius: 5px;
  color: #ffffff;
  background: rgba(76, 30, 99, 0.52);
  font: 800 10px "Manrope", sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.premier-league-install-button:active {
  transform: scale(0.97);
}

.premier-league-install-button.is-installed {
  border-color: #b77ad1;
  color: #ffffff;
  background: #72408c;
}

@media (hover: hover) and (pointer: fine) {
  .premier-league-install-button:hover {
    border-color: #c78fe0;
    background: rgba(102, 50, 127, 0.72);
  }

  .premier-league-install-button.is-installed:hover {
    background: #84509d;
  }
}

.premier-league-settings {
  margin-top: 18px;
}

.premier-league-settings .landing-setting > span,
.premier-league-settings .landing-setting-heading > span {
  color: rgba(255, 255, 255, 0.72);
}

.premier-league-settings .landing-setting-info summary {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
}

.premier-league-settings .landing-setting-info-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: #21102f;
}

.premier-league-settings .segmented,
.premier-league-team-picker {
  background: rgba(12, 5, 19, 0.42);
}

.premier-league-settings .segmented button {
  color: rgba(255, 255, 255, 0.68);
}

.premier-league-settings .segmented button.active {
  color: #ffffff;
  background: #81509b;
}

.premier-league-settings .landing-team-setting {
  grid-column: 1 / -1;
}

.premier-league-team-picker {
  border-color: rgba(255, 255, 255, 0.12);
}

.premier-league-team-picker .spectate-picker-copy strong {
  color: #ffffff;
}

.premier-league-team-picker .spectate-picker-copy small {
  color: rgba(255, 255, 255, 0.62);
}

.premier-league-team-mark,
.premier-league-club-code {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  background: #381d53;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 800;
}

.premier-league-club-code {
  width: 38px;
  height: 28px;
  border-radius: 4px;
}

.premier-league-club-badge {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.premier-league-coming-soon {
  display: flex;
  width: auto;
  min-width: 190px;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  background: #75418f;
  font-size: 12px;
  font-weight: 800;
  cursor: not-allowed;
}

.premier-league-coming-soon span {
  color: #dcb9eb;
  font-size: 17px;
  line-height: 1;
}

.pl-asset-pack-modal {
  width: min(680px, calc(100vw - 28px));
  max-width: 680px;
  border: 0;
  border-radius: 10px;
  color: #edf1f7;
  background: #150b20;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.pl-asset-pack-modal::backdrop {
  background: rgba(3, 6, 11, 0.78);
  backdrop-filter: blur(5px);
}

.pl-asset-pack-shell {
  padding: 24px;
}

.pl-asset-pack-modal .modal-head {
  margin-bottom: 18px;
}

.pl-asset-pack-modal .modal-head h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 24px;
}

.pl-asset-pack-modal .close-modal {
  background: rgba(255, 255, 255, 0.08);
}

.pl-asset-pack-intro {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #381d53;
}

.pl-asset-pack-intro img {
  width: 66px;
  height: 72px;
  object-fit: contain;
}

.pl-asset-pack-intro strong {
  display: block;
  color: #ffffff;
  font-size: 17px;
}

.pl-asset-pack-intro p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.pl-asset-pack-badges {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 0;
}

.pl-asset-pack-badge {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.pl-asset-pack-badge img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.pl-asset-pack-status {
  min-height: 18px;
  margin: 0 0 14px;
  color: #b9acc5;
  font-size: 11px;
}

.pl-asset-pack-status.is-success {
  color: #9ee6c4;
}

.pl-asset-pack-status.is-error {
  color: #ffb2bd;
}

.pl-asset-pack-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.pl-asset-pack-actions button {
  min-height: 44px;
  padding-inline: 18px;
}

.pl-asset-pack-actions .primary-button {
  color: #381d53;
  background: #ffffff;
}

.pl-asset-pack-actions .primary-button:active {
  transform: scale(0.97);
}

.pl-asset-pack-credit {
  display: block;
  margin-top: 14px;
  color: #766b80;
  font-size: 8px;
  line-height: 1.5;
}

/* EFL asset installer: keep the cream, navy and gold identity legible even
   when the site's global light theme is active. */
html.light-mode body .pl-asset-pack-modal.championship-asset-pack-modal,
body .pl-asset-pack-modal.championship-asset-pack-modal {
  border: 2px solid #b79a3f !important;
  color: #24345f !important;
  background: #f8f3e3 !important;
  box-shadow: 0 28px 90px rgba(3, 12, 54, .38) !important;
}

.championship-asset-pack-modal .pl-asset-pack-shell {
  color: #24345f;
  background: #f8f3e3;
}

html.light-mode body .championship-asset-pack-modal .modal-head h2,
.championship-asset-pack-modal .modal-head h2 {
  color: #061b84 !important;
}

html.light-mode body .championship-asset-pack-modal .close-modal,
.championship-asset-pack-modal .close-modal {
  border-color: rgba(6, 27, 132, .36) !important;
  color: #061b84 !important;
  background: #fffdf4 !important;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease;
}

.championship-asset-pack-modal .close-modal:active,
.championship-asset-pack-modal .pl-asset-pack-actions button:active {
  transform: scale(.97);
}

.championship-asset-pack-modal .pl-asset-pack-intro {
  border-color: rgba(216, 196, 118, .8);
  color: #fffdf4;
  background: #061b84;
}

html.light-mode body .championship-asset-pack-modal .pl-asset-pack-intro p,
.championship-asset-pack-modal .pl-asset-pack-intro p {
  color: #fffdf4 !important;
}

.championship-asset-pack-modal .championship-asset-code {
  border: 1px solid rgba(216, 196, 118, .78);
  color: #fff;
  background: #061b84;
  box-shadow: 0 4px 12px rgba(6, 27, 132, .16);
}

html.light-mode body .championship-asset-pack-modal .pl-asset-pack-status,
.championship-asset-pack-modal .pl-asset-pack-status {
  color: #4c566b !important;
}

.championship-asset-pack-modal .pl-asset-pack-status.is-success {
  color: #176044 !important;
}

.championship-asset-pack-modal .pl-asset-pack-status.is-error {
  color: #a12638 !important;
}

.championship-asset-pack-modal .pl-asset-pack-actions .text-button {
  color: #344463;
}

.championship-asset-pack-modal .pl-asset-pack-actions .primary-button {
  color: #fff;
  background: #061b84;
}

html.light-mode body .championship-asset-pack-modal .pl-asset-pack-credit,
.championship-asset-pack-modal .pl-asset-pack-credit {
  color: #54524b !important;
  font-size: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .championship-asset-pack-modal .close-modal:hover,
  .championship-asset-pack-modal .pl-asset-pack-actions .text-button:hover {
    color: #fff;
    background: #061b84 !important;
  }

  .championship-asset-pack-modal .pl-asset-pack-actions .primary-button:hover {
    background: #1737af;
  }
}

.championship-asset-pack-modal :is(button, .close-modal):focus-visible {
  outline: 3px solid #d8c476;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .pl-asset-pack-shell {
    padding: 18px;
  }

  .pl-asset-pack-badges {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pl-asset-pack-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .pl-asset-pack-actions button {
    width: 100%;
  }
}

.ucl-asset-pack-modal {
  color: #edf2ff;
  background: #0b1126;
}

.ucl-asset-pack-modal .pl-asset-pack-intro {
  background: #172c66;
}

.ucl-asset-pack-modal .pl-asset-pack-badge {
  background: rgba(113, 143, 229, .12);
}

.ucl-asset-pack-modal .pl-asset-pack-actions .primary-button {
  color: #12214c;
}

.ucl-asset-pack-modal .pl-asset-pack-credit {
  color: #7180a5;
}

.field-overview > .overview-intro,
.field-overview > .overview-toolbar,
.field-overview > .participant-sections {
  display: none !important;
}

.home-achievement-leaderboard {
  margin-top: 26px;
  padding: 24px 26px 18px;
  border-radius: 8px;
  background: #101722;
}

.home-achievement-leaderboard > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.home-achievement-leaderboard > header span {
  display: block;
  margin-bottom: 5px;
  color: #7ca2ff;
  font: 800 10px/1 "Manrope", sans-serif;
}

.home-achievement-leaderboard h2 {
  margin: 0;
  color: #f4f7fb;
  font-size: 23px;
}

.home-achievement-action {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  color: #dce7ff;
  background: #1a2638;
  cursor: pointer;
  font: 800 11px "Manrope", sans-serif;
}

.home-achievement-table {
  display: grid;
}

.home-achievement-row {
  display: grid;
  grid-template-columns: 54px minmax(170px, 1fr) 100px 110px;
  align-items: center;
  min-height: 54px;
  gap: 12px;
  padding: 0 10px;
  border-top: 1px solid #202c3d;
  color: #a5b3c6;
  font-size: 12px;
}

.home-achievement-row.is-heading {
  min-height: 32px;
  border: 0;
  color: #687990;
  font: 800 9px "Manrope", sans-serif;
  text-transform: uppercase;
}

.home-achievement-row.is-current {
  background: #17253a;
  box-shadow: inset 3px 0 #6f96ff;
}

body.before-start .home-achievement-row.is-all-achievements .home-achievement-player b {
  color: #ffe58a;
}

.home-achievement-row > strong {
  color: #f0f4fa;
  font-size: 13px;
}

.home-achievement-player {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.home-achievement-player b {
  overflow: hidden;
  color: #e6ecf5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-achievement-flag.country-flag {
  width: 34px;
  height: 23px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.home-achievement-player .profile-avatar-empty {
  width: 34px;
  font-size: 14px;
  text-align: center;
}

.home-achievement-own {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  padding: 14px 10px 0;
  border-top: 1px solid #2a3950;
}

.home-achievement-own[hidden] {
  display: none;
}

.home-achievement-own span {
  color: #8393a9;
  font-size: 11px;
}

.home-achievement-own strong {
  color: #f4f7fb;
  font-size: 15px;
}

.home-achievement-own b {
  color: #8eafff;
  font-size: 11px;
}

.home-achievement-empty {
  margin: 0;
  padding: 30px 10px;
  color: #7f8da0;
  text-align: center;
}

.home-achievement-modal {
  width: min(760px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 28px;
  border: 1px solid #2d4565;
  border-radius: 8px;
  background: #111b2a;
  color: #fff;
}

.home-achievement-modal::backdrop {
  background: rgba(3, 8, 16, .78);
}

.home-achievement-modal header {
  padding-right: 34px;
  margin-bottom: 20px;
}

.home-achievement-modal header p {
  margin: 8px 0 0;
  color: #9aa9bd;
  font-size: 12px;
}

.home-achievement-modal h2 {
  margin: 8px 0 0;
  color: #f4f7fb;
  font-size: 28px;
}

.home-achievement-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #99a7bc;
  font-size: 28px;
  cursor: pointer;
}

.home-achievement-modal-table {
  max-height: min(560px, calc(100vh - 190px));
  overflow: auto;
  border: 1px solid #202c3d;
  border-radius: 5px;
}

.home-achievement-modal-table .home-achievement-row {
  background: #101722;
}

.home-achievement-modal-table .home-achievement-row.is-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #17253a;
}

@media (min-width: 721px) {
  .field-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(250px, 29vw, 330px);
    align-items: start;
    gap: clamp(12px, 1.6vw, 20px);
    max-width: 1440px;
  }

  .field-overview > .mode-select {
    grid-column: 1;
    min-width: 0;
  }

  .home-achievement-leaderboard {
    position: sticky;
    top: 92px;
    grid-column: 2;
    grid-row: 1;
    margin-top: 26px;
    padding: 22px 18px 16px;
  }

  .home-achievement-leaderboard h2 {
    font-size: 20px;
  }

  .home-achievement-row {
    grid-template-columns: 32px minmax(0, 1fr) 48px 58px;
    min-height: 50px;
    gap: 8px;
    padding-inline: 4px;
    font-size: 10px;
  }

  .home-achievement-row > strong {
    font-size: 11px;
  }

  .home-achievement-player {
    gap: 0;
  }

  .home-achievement-own {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .home-achievement-own b {
    grid-column: 1 / -1;
  }
}

.achievement-country > b {
  margin-left: auto;
  color: #8eafff;
  font: 800 10px/1 "Manrope", sans-serif;
  white-space: nowrap;
}

.achievements-screen {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto 72px;
  padding: 42px 0 0;
}

.achievements-screen[hidden] {
  display: none;
}

.achievements-intro {
  max-width: 620px;
  margin-bottom: 22px;
}

.achievements-kicker,
.achievement-progress-copy span,
.achievement-unlock-kicker {
  color: #79a1ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.achievements-intro h1 {
  margin: 0 0 7px;
  color: #f5f7fb;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.08;
}

.achievements-intro p {
  margin: 0;
  color: #9eacc2;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.achievement-progress-panel {
  padding: 24px;
  background: #121c2b;
}

.achievement-year-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  background: #0b1320;
}

.achievement-year-tabs button {
  min-height: 46px;
  border: 0;
  color: #8f9db2;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.achievement-year-tabs button[aria-selected="true"] {
  color: #fff;
  background: #315fac;
}

.achievement-challenge-heading h2 {
  margin: 0 0 20px;
  color: #f5f7fb;
  font-size: 20px;
}

.achievement-progress-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.achievement-progress-copy > div {
  display: grid;
  gap: 7px;
}

.achievement-progress-copy strong {
  color: #f5f7fb;
  font-size: 30px;
}

.achievement-login-button,
.achievement-unlock-action {
  border: 0;
  background: #5f8cff;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.achievement-login-button {
  min-height: 44px;
  padding: 0 18px;
}

.achievement-progress-track {
  height: 7px;
  margin: 22px 0 28px;
  overflow: hidden;
  background: #202c3e;
}

.achievement-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: #4fd49a;
  transition: width 350ms ease;
}

.achievement-country-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.achievement-legacy-section {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 20px;
}

.achievement-legacy-section > p {
  max-width: 760px;
}

.achievement-legacy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.achievement-legacy-grid .achievement-country {
  min-width: 0;
}

.achievement-country {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px;
  background: #182437;
  opacity: .68;
}

.achievement-country.is-complete {
  background: #113129;
  opacity: 1;
}

.achievement-country-flag {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.achievement-country-flag.achievement-club-badge {
  object-fit: contain;
  border-radius: 0;
}

.achievement-country strong,
.achievement-country small {
  display: block;
  min-width: 0;
}

.achievement-country strong {
  overflow: hidden;
  color: #edf2fa;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-country small {
  margin-top: 4px;
  color: #8190a8;
  font-size: 12px;
}

.achievement-country.is-complete small {
  color: #57dba5;
}

.achievement-unlock-modal {
  width: min(440px, calc(100% - 32px));
  padding: 38px;
  border: 1px solid #2d4565;
  border-radius: 8px;
  background: #111b2a;
  color: #fff;
  text-align: center;
}

.achievement-unlock-modal::backdrop {
  background: rgba(3, 8, 16, .78);
}

.achievement-unlock-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #99a7bc;
  font-size: 28px;
  cursor: pointer;
}

.achievement-unlock-mark {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  place-items: center;
  border-radius: 50%;
  background: #183f34;
  color: #58dfa9;
  font-size: 32px;
}

.achievement-unlock-modal h2 {
  margin: 8px 0 10px;
  font-size: 30px;
}

.achievement-unlock-modal p {
  margin: 0 0 24px;
  color: #aeb9ca;
  line-height: 1.5;
}

.achievement-unlock-action {
  width: 100%;
  min-height: 52px;
}

.achievement-unlock-banner {
  position: fixed;
  top: 86px;
  left: 50%;
  z-index: 120;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  width: min(440px, calc(100% - 28px));
  min-height: 70px;
  padding: 12px 16px;
  border: 0;
  border-top: 3px solid #f6d12a;
  border-radius: 4px;
  color: #fffce8;
  background: #05613f;
  box-shadow: 0 12px 30px rgba(0, 34, 23, .34);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -18px);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.achievement-unlock-banner[hidden] {
  display: none;
}

.achievement-unlock-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.achievement-unlock-banner-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #06412e;
  background: #f6d12a;
  font-size: 18px;
}

.achievement-unlock-banner small,
.achievement-unlock-banner strong {
  display: block;
}

.achievement-unlock-banner small {
  margin-bottom: 3px;
  color: #f6d12a;
  font-size: 10px;
  font-weight: 900;
}

.achievement-unlock-banner strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-unlock-banner-arrow {
  color: #f6d12a;
  font-size: 28px;
}

.achievement-unlock-banner[data-achievement-theme="2016"] {
  border-top-color: #92ebff;
  color: #f2fbff;
  background:
    radial-gradient(circle at 92% 8%, rgba(146, 235, 255, .22), transparent 34%),
    linear-gradient(135deg, #0874bc, #032d75);
  box-shadow: 0 12px 30px rgba(0, 24, 72, .42);
}

.achievement-unlock-banner[data-achievement-theme="2016"] .achievement-unlock-banner-mark {
  color: #02143e;
  background: #92ebff;
}

.achievement-unlock-banner[data-achievement-theme="2016"] :is(
  small,
  .achievement-unlock-banner-arrow
) {
  color: #92ebff;
}

.achievement-unlock-modal[data-achievement-theme="2016"] {
  border-color: #1cc7ee;
  background:
    radial-gradient(circle at 94% 4%, rgba(146, 235, 255, .2), transparent 32%),
    linear-gradient(145deg, #0756aa, #021d58);
  box-shadow: 0 24px 58px rgba(0, 19, 68, .5);
}

.achievement-unlock-modal[data-achievement-theme="2016"] .achievement-unlock-mark {
  color: #02143e;
  background: #92ebff;
}

.achievement-unlock-modal[data-achievement-theme="2016"] p {
  color: #c7effb;
}

.achievement-unlock-modal[data-achievement-theme="2016"] .achievement-unlock-action {
  border-color: #92ebff;
  color: #02143e;
  background: #92ebff;
}

.achievement-unlock-banner[data-achievement-theme="2020"] {
  border-top-color: #b9dc18;
  color: #f1fdff;
  background:
    radial-gradient(circle at 92% 8%, rgba(185, 220, 24, .2), transparent 34%),
    linear-gradient(135deg, #087f8e, #023743);
  box-shadow: 0 12px 30px rgba(2, 55, 67, .46);
}

.achievement-unlock-banner[data-achievement-theme="2020"] .achievement-unlock-banner-mark {
  color: #073f49;
  background: #b9dc18;
}

.achievement-unlock-banner[data-achievement-theme="2020"] :is(
  small,
  .achievement-unlock-banner-arrow
) {
  color: #dff25c;
}

.achievement-unlock-modal[data-achievement-theme="2020"] {
  border-color: #b9dc18;
  background:
    radial-gradient(circle at 94% 4%, rgba(185, 220, 24, .16), transparent 32%),
    linear-gradient(145deg, #087f8e, #023743);
  box-shadow: 0 24px 58px rgba(2, 55, 67, .52);
}

.achievement-unlock-modal[data-achievement-theme="2020"] .achievement-unlock-mark {
  color: #073f49;
  background: #b9dc18;
}

.achievement-unlock-modal[data-achievement-theme="2020"] p {
  color: #c9f3f6;
}

.achievement-unlock-modal[data-achievement-theme="2020"] .achievement-unlock-action {
  border-color: #b9dc18;
  color: #073f49;
  background: #b9dc18;
}

.achievement-unlock-banner[data-achievement-theme="ucl"] {
  border-top-color: #f2c94c;
  color: #f4f7ff;
  background:
    radial-gradient(circle at 92% 4%, rgba(83, 151, 255, .28), transparent 36%),
    linear-gradient(135deg, #123a83, #061a4a);
  box-shadow: 0 14px 34px rgba(1, 9, 35, .52);
}

.achievement-unlock-banner[data-achievement-theme="ucl"] .achievement-unlock-banner-mark {
  color: #07152f;
  background: #f2c94c;
}

.achievement-unlock-banner[data-achievement-theme="ucl"] :is(
  small,
  .achievement-unlock-banner-arrow
) {
  color: #f5d46d;
}

.achievement-unlock-modal[data-achievement-theme="ucl"] {
  border-color: rgba(242, 201, 76, .62);
  border-top: 5px solid #f2c94c;
  color: #f4f7ff;
  background:
    radial-gradient(circle at 94% 2%, rgba(83, 151, 255, .24), transparent 36%),
    linear-gradient(145deg, #123a83, #061a4a);
  box-shadow: 0 28px 72px rgba(1, 9, 35, .58);
}

.achievement-unlock-modal[data-achievement-theme="ucl"]::backdrop {
  background: rgba(1, 7, 30, .82);
  backdrop-filter: blur(5px);
}

.achievement-unlock-modal[data-achievement-theme="ucl"] .achievement-unlock-mark {
  color: #07152f;
  background: #f2c94c;
  box-shadow: 0 0 0 6px rgba(242, 201, 76, .12), 0 10px 26px rgba(1, 9, 35, .32);
}

.achievement-unlock-modal[data-achievement-theme="ucl"] :is(
  .achievement-unlock-kicker,
  .achievement-unlock-close
) {
  color: #f5d46d;
}

.achievement-unlock-modal[data-achievement-theme="ucl"] p {
  color: #c7d9ff;
}

.achievement-unlock-modal[data-achievement-theme="ucl"] .achievement-unlock-action {
  border-color: #f2c94c;
  color: #07152f;
  background: #f2c94c;
  box-shadow: 0 5px 0 #b58b15;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), box-shadow 140ms ease;
}

.achievement-unlock-modal[data-achievement-theme="ucl"] .achievement-unlock-action:active {
  transform: translateY(2px) scale(.98);
  box-shadow: 0 2px 0 #b58b15;
}

.retro-achievements-modal {
  box-sizing: border-box;
  width: min(980px, calc(100% - 32px));
  height: min(760px, calc(100vh - 48px));
  height: min(760px, calc(100dvh - 48px));
  max-height: min(760px, calc(100vh - 48px));
  padding: 24px;
  overflow: auto;
  border: 0;
  border-top: 5px solid #f6d12a;
  border-radius: 6px;
  color: #fffce8;
  background:
    linear-gradient(145deg, rgba(4, 112, 64, .97), rgba(0, 70, 47, .98)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / cover;
  box-shadow: 12px 12px 0 rgba(0, 74, 174, .3), 0 28px 70px rgba(0, 30, 21, .6);
}

.retro-achievements-modal::backdrop {
  background: rgba(0, 35, 25, .78);
  backdrop-filter: blur(4px);
}

.retro-achievements-modal header {
  padding-right: 42px;
}

.retro-achievements-progress span {
  color: #f6d12a;
  font-size: 11px;
  font-weight: 900;
}

.retro-achievements-modal h2 {
  margin: 0 0 7px;
  color: #fffce8;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1;
}

.retro-achievements-modal header p {
  margin: 0;
  color: #dcebb5;
  font-weight: 700;
}

.retro-achievements-modal .achievement-year-tabs {
  margin: 22px 0 18px;
  background: rgba(0, 49, 35, .72);
}

.retro-achievements-modal .achievement-year-tabs button {
  color: #b9caaa;
}

.retro-achievements-modal .achievement-year-tabs button[aria-selected="true"] {
  color: #06412e;
  background: #f6d12a;
}

.retro-achievements-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  color: #fffce8;
  background: rgba(0, 67, 44, .78);
  font-size: 26px;
  cursor: pointer;
}

.retro-achievements-progress {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}

.retro-achievements-progress strong {
  color: #fffce8;
  font-size: 26px;
}

.retro-achievements-modal .achievement-progress-track {
  margin: 12px 0 20px;
  background: rgba(0, 49, 35, .72);
}

.retro-achievements-modal .achievement-progress-track span {
  background: #f6d12a;
}

.retro-achievements-modal .achievement-country-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.retro-achievements-modal .achievement-country {
  background: rgba(0, 67, 45, .72);
}

.retro-achievements-modal .achievement-country.is-complete {
  background: #084d38;
  box-shadow: inset 4px 0 #f6d12a;
}

.retro-achievements-modal .achievement-country small {
  color: #b8c9ae;
}

.retro-achievements-modal .achievement-country.is-complete small {
  color: #f6d12a;
}

@media (min-width: 821px) {
  .retro-achievements-modal {
    padding: 18px;
  }

  .retro-achievements-modal h2 {
    margin-bottom: 3px;
    font-size: 36px;
  }

  .retro-achievements-modal header p {
    font-size: 13px;
  }

  .retro-achievements-modal .achievement-year-tabs {
    margin: 14px 0 10px;
  }

  .retro-achievements-modal .achievement-year-tabs button {
    min-height: 40px;
  }

  .retro-achievements-progress {
    margin-top: 10px;
  }

  .retro-achievements-progress strong {
    font-size: 22px;
  }

  .retro-achievements-modal .achievement-progress-track {
    margin: 7px 0 10px;
  }

  .retro-achievements-modal .achievement-country-grid {
    gap: 6px;
  }

  .retro-achievements-modal .achievement-country {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    min-height: 52px;
    padding: 6px 8px;
  }

  .retro-achievements-modal .achievement-country-flag {
    width: 38px;
    height: 25px;
  }

  .retro-achievements-modal .achievement-country strong {
    font-size: 12px;
  }

  .retro-achievements-modal .achievement-country small {
    margin-top: 2px;
    font-size: 10px;
  }
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .achievement-unlock-modal {
  border: 0;
  border-top: 5px solid #f6d12a;
  border-radius: 6px;
  color: #fffce8;
  background:
    linear-gradient(145deg, rgba(5, 112, 62, .98), rgba(0, 55, 40, .99)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / cover;
  box-shadow: 10px 10px 0 rgba(0, 74, 174, .3), 0 28px 70px rgba(0, 31, 22, .58);
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .achievement-unlock-modal::backdrop {
  background: rgba(0, 35, 25, .78);
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .achievement-unlock-modal p {
  color: #dcebb5;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .achievement-unlock-action {
  color: #06412e;
  background: #f6d12a;
}

body.retro-2018-active .retro-achievements-modal {
  border-top-color: #f1d39a;
  color: #fff4d6;
  background:
    linear-gradient(145deg, rgba(10, 94, 158, .98), rgba(5, 58, 108, .98)),
    linear-gradient(160deg, #126ca9, #073b70);
  box-shadow: 12px 12px 0 rgba(122, 17, 31, .52), 0 28px 70px rgba(40, 4, 12, .62);
}

body.retro-2018-active .retro-achievements-modal::backdrop {
  background: rgba(54, 4, 14, .78);
}

body.retro-2018-active .retro-achievements-modal header p {
  color: #dceaff;
}

body.retro-2018-active .retro-achievements-modal .achievement-year-tabs {
  background: #073d70;
}

body.retro-2018-active .retro-achievements-modal .achievement-year-tabs button {
  color: #bad2ed;
}

body.retro-2018-active .retro-achievements-modal .achievement-year-tabs button[aria-selected="true"] {
  color: #fff4d6;
  background: #a51a16;
}

body.retro-2018-active .retro-achievements-modal .achievement-progress-track {
  background: #073d70;
}

body.retro-2018-active .retro-achievements-modal .achievement-progress-track span {
  background: #d4b26f;
}

body.retro-2018-active .retro-achievements-modal .achievement-country {
  background: rgba(5, 67, 121, .82);
}

body.retro-2018-active .retro-achievements-modal .achievement-country.is-complete {
  background: #741522;
  box-shadow: inset 4px 0 #d4b26f;
}

body.retro-2018-active .retro-achievements-modal .achievement-country.is-complete small {
  color: #f1d39a;
}

body.retro-2018-active .achievement-unlock-banner {
  border-top-color: #f1d39a;
  color: #fff4d6;
  background: #a51a16;
  box-shadow: 0 12px 30px rgba(62, 5, 13, .4);
}

body.retro-2018-active .achievement-unlock-banner-mark {
  color: #fff4d6;
  background: #0969aa;
}

body.retro-2018-active .achievement-unlock-banner small,
body.retro-2018-active .achievement-unlock-banner-arrow {
  color: #f1d39a;
}

body.retro-2018-active .achievement-unlock-modal {
  border: 0;
  border-top: 5px solid #f1d39a;
  border-radius: 6px;
  color: #fff4d6;
  background: linear-gradient(145deg, #126ca9, #073b70);
  box-shadow: 10px 10px 0 rgba(122, 17, 31, .52), 0 28px 70px rgba(40, 4, 12, .62);
}

body.retro-2018-active .achievement-unlock-modal p {
  color: #dceaff;
}

body.retro-2018-active .achievement-unlock-action {
  color: #fff4d6;
  background: #a51a16;
}

@media (max-width: 820px) {
  .achievement-country-grid,
  .achievement-legacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .retro-achievements-modal .achievement-country-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .achievement-unlock-banner {
    top: 70px;
  }

  .achievements-screen {
    width: calc(100% - 28px);
    padding-top: 40px;
  }

  .achievement-progress-panel {
    padding: 14px;
  }

  .achievement-progress-copy {
    align-items: stretch;
    flex-direction: column;
  }

  .achievement-country-grid,
  .achievement-legacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .retro-achievements-modal {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    padding: 12px;
  }

  .retro-achievements-modal .achievement-country-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .retro-achievements-modal h2 {
    margin-bottom: 3px;
    font-size: 22px;
    line-height: 1.05;
  }

  .retro-achievements-modal header p {
    font-size: 11px;
    line-height: 1.25;
  }

  .retro-achievements-modal .achievement-year-tabs {
    margin-block: 10px 8px;
  }

  .retro-achievements-progress {
    margin-top: 8px;
  }

  .retro-achievements-progress strong {
    font-size: 20px;
  }

  .retro-achievements-modal .achievement-progress-track {
    margin: 8px 0 12px;
  }

  .achievement-country {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    min-height: 56px;
    padding: 8px;
  }

  .achievement-country-flag {
    width: 34px;
    height: 23px;
  }

  .achievement-country strong {
    font-size: 12px;
  }

  .achievement-country small {
    margin-top: 2px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-unlock-banner {
    transition: opacity 120ms ease;
  }

  .domestic-league-switch button {
    transition: color 120ms ease, background-color 120ms ease;
  }

  .domestic-league-switch button:active {
    transform: none;
  }
}

.legacy-landing-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.legacy-landing-setting {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.legacy-landing-mode-setting {
  grid-column: 1 / -1;
}

.legacy-landing-setting > span {
  color: #778499;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.legacy-landing-mode {
  width: 100%;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  background: #0a111a;
}

.legacy-landing-mode button {
  min-width: 0;
  flex: 1;
  padding: 8px 6px;
  font-size: 8px;
}

.legacy-landing-picker {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: #0a111a;
}

.legacy-landing-picker select {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #dfe6f1;
  background: transparent;
  font: 800 10px "Manrope", sans-serif;
}

.legacy-landing-picker select option {
  color: #dfe6f1;
  background: #111722;
}

.legacy-landing-picker > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  color: #8ba9ff;
  background: #141e2d;
  cursor: pointer;
  font-size: 16px;
}

.legacy-landing-picker .country-flag,
.legacy-landing-picker .country-flag img {
  width: 32px;
  height: 23px;
  border-radius: 4px;
  object-fit: cover;
}

.legacy-landing-formation {
  grid-template-columns: 42px minmax(0, 1fr) 34px;
}

.legacy-landing-formation .legacy-formation-preview {
  width: 38px;
  height: 42px;
  padding: 3px;
  border-radius: 5px;
}

.legacy-landing-formation .legacy-preview-line i {
  width: 3px;
  height: 3px;
  box-shadow: none;
}

.mode-card-topline,
.mode-card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mode-card-topline {
  justify-content: flex-end;
}

.mode-status {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: #738095;
  font-family: "DM Mono", monospace;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.mode-status-live {
  border-color: rgba(95, 140, 255, 0.28);
  color: #8ba9ff;
  background: rgba(95, 140, 255, 0.08);
}

.mode-status-legacy {
  border-color: rgba(64, 196, 160, 0.32);
  color: #8ce4ca;
  background: rgba(64, 196, 160, 0.08);
}

.mode-card-copy {
  margin: 10px 0 24px;
}

.mode-card-copy h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(23px, 2.1vw, 30px);
  letter-spacing: 0;
  line-height: 1.15;
}

.mode-card-copy p {
  max-width: 570px;
  margin: 0;
  color: #a5afbf;
  font-size: 13px;
  line-height: 1.65;
}

.mode-availability {
  display: none;
}

.retro-desktop-card {
  display: none;
}

.retro-afcon-switch-button {
  display: block;
}

/* Compact desktop launcher cards. Setup controls live on the mode route instead. */
@media (min-width: 721px) {
  body.before-start:not([data-desktop-mode-setup]) .mode-card {
    min-height: 164px;
    padding: 22px 24px;
  }

  body.before-start:not([data-desktop-mode-setup]) :is(
    .mode-card-default,
    .mode-card-domestic-league,
    .mode-card-premier-league,
    .mode-card-ucl
  ) {
    min-height: 188px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-retro {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 154px;
    align-items: end;
    gap: 24px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card .landing-settings,
  body.before-start:not([data-desktop-mode-setup]) .mode-card .mode-card-copy p,
  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > :is(
    .legacy-restart-button,
    .premier-league-menu-restart,
    .custom-match-card-button
  ) {
    display: none !important;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-copy {
    margin: 0 0 18px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-retro .retro-mode-heading {
    margin: 0 !important;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-retro .mode-card-actions {
    width: auto;
    margin: 0;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-copy h3 {
    margin: 0;
    font-size: clamp(20px, 1.7vw, 25px);
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions {
    width: 100%;
    margin-top: auto;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > .start-tournament:first-child {
    min-width: 104px;
    min-height: 42px;
    padding: 0 20px;
    font-size: 0;
    transition: transform 140ms cubic-bezier(.23, 1, .32, 1), filter 180ms ease;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > .start-tournament:first-child::before {
    content: "Play";
    font-size: 12px;
    font-weight: 850;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > .start-tournament:first-child::after {
    content: "\2192";
    margin-left: 22px;
    font-size: 14px;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > .start-tournament:first-child > span {
    display: none;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-actions > .start-tournament:first-child:active {
    transform: scale(.97);
  }

  body.before-start:not([data-desktop-mode-setup]) .retro-mode-heading {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 16px;
  }

  body.before-start:not([data-desktop-mode-setup]) .retro-mode-heading img {
    width: 48px;
    height: 50px;
  }

  body.before-start:not([data-desktop-mode-setup]) .retro-mode-heading h3 {
    grid-column: 2;
  }

  body.before-start:not([data-desktop-mode-setup]) :is(.retro-competition-switch, .retro-year-switch) button {
    min-height: 28px;
    font-size: 10px;
  }

  body.before-start:not([data-desktop-mode-setup]) .retro-desktop-card {
    display: flex;
    grid-column: span 3;
    min-height: 188px;
  }

  body.before-start:not([data-desktop-mode-setup]) .retro-afcon-switch-button {
    display: block;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-ucl .ucl-mode-logo {
    display: none;
  }

  body.before-start:not([data-desktop-mode-setup]) .mode-card-ucl .ucl-mode-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .mode-card-domestic-league,
  .mode-card-premier-league { order: 1; }
  .mode-card-default { order: 2; }
  .mode-card-retro-wc { order: 3; }
  .mode-card-ucl { order: 4; }
  .mode-card-custom { order: 5; }
  .mode-card-legacy { order: 5; }
  .mode-card-online { order: 30; }
  .mode-card-career-player { order: 20; }
  .mode-card-career-manager { order: 21; }

  .mode-card-retro-edition {
    justify-content: flex-start;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
  }

  .mode-card-retro-euros {
    background:
      radial-gradient(circle at 82% 8%, rgba(199, 218, 58, .24), transparent 34%),
      linear-gradient(145deg, #087f8f, #05364d 72%);
  }

  .mode-card-retro-copa {
    background:
      linear-gradient(145deg, rgba(5, 30, 86, .62), rgba(7, 28, 73, .9)),
      url("./assets/copa-america-2024-bg-desktop.svg") center / cover;
  }

  .mode-card-retro-afcon {
    background:
      radial-gradient(circle at 82% 12%, rgba(255, 193, 39, .2), transparent 34%),
      linear-gradient(145deg, #174831, #081f18 76%);
  }

  .retro-edition-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px !important;
  }

  .retro-edition-heading img {
    width: 48px;
    height: 50px;
    object-fit: contain;
  }

  .retro-edition-wordmark {
    display: grid;
    width: 54px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    color: #ffc127;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
  }

  .retro-edition-years {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
  }

  .retro-edition-years :is(button, span) {
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    color: rgba(255, 255, 255, .78);
    background: rgba(0, 0, 0, .18);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
  }

  .retro-edition-years button.active {
    border-color: #fff;
    color: #092332;
    background: #fff;
  }

  .retro-edition-play {
    align-self: flex-start;
    min-width: 104px;
    min-height: 42px;
    margin-top: auto;
    padding: 0 20px;
  }

  .retro-edition-play span { margin-left: 22px; }

  .retro-edition-play:active { transform: scale(.97); }

  .retro-edition-play:disabled {
    border-color: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .46);
    background: rgba(255, 255, 255, .08);
    cursor: default;
  }

  body[data-desktop-mode-setup] .before-start:not(.legacy-mode-active):not(.achievements-mode-active) #pageHeading,
  body[data-desktop-mode-setup].before-start:not(.legacy-mode-active):not(.achievements-mode-active) #pageHeading {
    display: block;
  }

  body[data-desktop-mode-setup] .topbar {
    min-height: 108px;
    padding-top: 30px;
  }

  body[data-desktop-mode-setup] .field-overview > :is(
    .home-achievement-leaderboard,
    .home-editorial,
    .overview-intro,
    .overview-toolbar,
    .participant-sections
  ) {
    display: none !important;
  }

  body[data-desktop-mode-setup] .mode-select {
    min-height: calc(100vh - 230px);
    padding: 30px 0 80px;
  }

  body[data-desktop-mode-setup] .mode-grid {
    display: block;
  }

  body[data-desktop-mode-setup="standard"] .mode-grid > :not(.mode-card-default),
  body[data-desktop-mode-setup="retro"] .mode-grid > :not(.mode-card-retro),
  body[data-desktop-mode-setup="premierLeague"] .mode-grid > :not(.mode-card-domestic-league),
  body[data-desktop-mode-setup="laLiga"] .mode-grid > :not(.mode-card-domestic-league),
  body[data-desktop-mode-setup="serieA"] .mode-grid > :not(.mode-card-domestic-league),
  body[data-desktop-mode-setup="ligue1"] .mode-grid > :not(.mode-card-domestic-league),
  body[data-desktop-mode-setup="bundesliga"] .mode-grid > :not(.mode-card-domestic-league),
  body[data-desktop-mode-setup="ucl"] .mode-grid > :not(.mode-card-ucl) {
    display: none !important;
  }

  body[data-desktop-mode-setup] .mode-card {
    width: min(760px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(151, 174, 211, .18);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
  }

  body[data-desktop-mode-setup] .mode-card .landing-settings {
    margin-top: 8px;
  }

  body[data-desktop-mode-setup] .mode-card-actions {
    margin-top: 4px;
  }

  body[data-desktop-mode-setup="retro"] .main {
    background:
      radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
      #0b111a;
  }
}

.retro-mode-heading {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 0;
}

.retro-mode-heading img {
  width: 56px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(0);
  transition: transform 180ms ease, filter 180ms ease;
}

.retro-mode-heading div {
  min-width: 0;
}

.retro-mode-heading .retro-mode-title {
  display: contents;
}

.retro-mode-heading span {
  display: block;
  margin-bottom: 5px;
  color: #8e9bad;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.retro-mode-heading h3 {
  grid-column: 2;
  margin-bottom: 0;
  color: var(--text);
}

.retro-mode-title {
  display: grid;
  gap: 12px;
}

.retro-competition-switch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #202c3d;
  border-radius: 6px;
  background: #101925;
}

.retro-competition-switch button {
  min-height: 32px;
  border: 0;
  border-radius: 4px;
  color: #8996aa;
  background: transparent;
  font: 800 12px "Manrope", sans-serif;
  cursor: pointer;
}

.retro-competition-switch button.active {
  color: #ffffff;
  background: #26364c;
}

.retro-year-switch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
  gap: 3px;
  padding: 3px;
  border-radius: 6px;
  background: #0a111a;
}

.retro-year-switch[data-competition="euros"] {
  grid-template-columns: minmax(0, 1fr);
}

.retro-year-switch button {
  min-width: 0;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  color: #8996aa;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.retro-year-switch button.active {
  color: var(--retro-accent-text);
  background: var(--retro-accent);
}

.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] .retro-year-switch button.retro-98-menu-button {
  border: 1px solid rgba(194, 222, 187, 0.42);
  color: #f2f5df;
  background: linear-gradient(180deg, #5b7855, #2d4434);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 2px 0 rgba(21, 35, 26, 0.72);
  text-shadow: 0 1px rgba(17, 31, 22, 0.7);
}

.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] .retro-year-switch button.retro-98-menu-button:hover,
.mode-card-retro[data-retro-competition="wc"][data-retro-edition="1998"] .retro-year-switch button.retro-98-menu-button.active {
  border-color: #d8e5bf;
  color: #ffffff;
  background: linear-gradient(180deg, #769a6c, #3b5941);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.32), 0 2px 0 rgba(21, 35, 26, 0.72), 0 0 14px rgba(178, 216, 157, 0.2);
}

.landing-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.retro-landing-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.retro-landing-settings .landing-setting > span {
  color: #8c98ab;
}

.retro-landing-settings .landing-setting .segmented {
  background: #0a111a;
}

.retro-landing-settings .landing-setting .segmented button {
  color: #a8b3c4;
}

.retro-landing-settings .landing-setting .segmented button.active {
  color: var(--retro-accent-text);
  background: var(--retro-accent);
}

.retro-landing-settings .landing-team-setting {
  grid-column: 1 / -1;
}

.retro-team-picker:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: #0a111a;
}

.retro-team-picker .spectate-picker-copy strong {
  color: #edf2f8;
}

.retro-team-picker .spectate-picker-copy small {
  color: #8996aa;
}

.mode-card-retro[data-retro-competition="euros"] .retro-mode-heading img {
  object-fit: cover;
  object-position: center top;
  transform: translateY(4px);
}

.mode-card-retro[data-retro-competition="euros"] .retro-team-mark {
  border-color: color-mix(in srgb, var(--retro-accent) 55%, #2b3748);
  color: #ffffff;
  background: color-mix(in srgb, var(--retro-accent) 22%, #151d29);
}

.retro-team-mark {
  border: 1px solid #2b3748;
  color: #86a8ff;
  background: #151d29;
  font-size: 12px;
  font-weight: 800;
}

.retro-coming-soon {
  width: min(240px, 100%);
  min-height: 48px;
  color: var(--retro-accent-text);
  background: var(--retro-accent);
}

@media (min-width: 901px) and (max-width: 1500px) {
  .mode-card-default .landing-settings,
  .mode-card-retro .retro-landing-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .retro-year-switch {
    width: 100%;
  }

  .retro-year-switch button {
    min-width: 0;
    padding-inline: 3px;
    flex: 1;
    font-size: 10px;
  }
}

.retro-locked-control button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.retro-locked-control button.active:disabled {
  opacity: 1;
}

.standard-locked-control button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.standard-locked-control button.active:disabled {
  opacity: 1;
}

.mode-card-default.is-setup-locked .landing-setting-heading > span::after,
.mode-card-default.is-setup-locked .landing-team-setting > span::after {
  content: "\1F512";
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.72;
}

.mode-card-default.is-setup-locked .spectate-picker:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.mode-card-default.is-setup-locked .spectate-picker:disabled:active {
  transform: none;
}

.retro-start-button {
  color: var(--retro-accent-text);
  background: var(--retro-accent);
}

.retro-start-button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.retro-start-button:disabled {
  color: var(--retro-accent-text);
  background: var(--retro-accent);
  opacity: 0.62;
}

body.retro-mode-active {
  background: #080e16;
}

body.retro-mode-active #appShell {
  display: none;
}

.retro-tournament-screen[hidden] {
  display: none !important;
}

.retro-tournament-screen {
  min-height: 100vh;
  color: #edf2f8;
  background: #080e16;
}

.retro-screen-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  padding: 0 clamp(24px, 4vw, 64px);
  border-bottom: 1px solid #1d2938;
  background: rgba(8, 14, 22, 0.96);
}

.retro-screen-back,
.retro-screen-restart {
  width: fit-content;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  color: #9eabc0;
  background: #111a27;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.retro-screen-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.retro-screen-restart {
  justify-self: end;
}

.retro-screen-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.retro-screen-left {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.retro-screen-action {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #fff9d4;
  background: #086f45;
  box-shadow: 0 4px 0 #034d36;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
}

.retro-screen-action .account-avatar-icon {
  width: 20px;
  height: 20px;
}

.retro-screen-action .account-avatar-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.retro-screen-restart[hidden] {
  display: none !important;
}

.retro-screen-brand {
  display: inline-flex;
  grid-column: 2;
  text-decoration: none;
}

.retro-screen-brand .brand-mark {
  width: 48px;
  height: 48px;
}

.retro-tournament-main {
  position: relative;
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  padding: 58px 0 90px;
}

.retro-tournament-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.retro-tournament-heading > div:first-child > span {
  display: block;
  margin-bottom: 8px;
  color: #fcc40c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.retro-tournament-heading h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: 0;
  line-height: 1;
}

.retro-tournament-progress {
  display: grid;
  gap: 5px;
  text-align: right;
}

.retro-tournament-progress span {
  color: #718099;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.retro-tournament-progress strong {
  font-size: 16px;
}

.retro-view-tabs {
  display: flex;
  gap: 2px;
  width: 100%;
  margin-bottom: 24px;
  padding: 4px;
  border-radius: 7px;
  background: #0d1520;
}

.retro-view-tabs button {
  flex: 1;
  min-height: 46px;
  border: 0;
  border-radius: 5px;
  color: #7f8da3;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.retro-view-tabs button.active {
  color: #171102;
  background: #fcc40c;
}

.retro-match-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.retro-match-primary {
  min-width: 0;
}

.retro-match-stage {
  min-height: 500px;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 8px;
  background: #111925;
}

.retro-stage-label {
  display: block;
  margin-bottom: 42px;
  color: #8997ac;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-align: center;
  text-transform: uppercase;
}

.retro-match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.retro-match-team {
  min-width: 0;
  text-align: center;
}

.retro-stage-flag,
.retro-stage-flag img {
  width: clamp(90px, 10vw, 140px);
  height: clamp(60px, 7vw, 94px);
  margin: 0 auto;
  border-radius: 7px;
}

.retro-match-team h2 {
  min-height: 2.3em;
  margin: 18px auto 12px;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.retro-match-score {
  display: grid;
  align-self: center;
  gap: 7px;
  text-align: center;
}

.retro-match-score strong {
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.retro-match-score strong small {
  display: block;
  margin-top: 8px;
  color: #93a1b6;
  font-size: 12px;
}

.retro-match-score > span {
  color: #74839a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.retro-scorers {
  display: grid;
  gap: 5px;
  min-height: 48px;
  color: #aeb8c7;
  font-size: 12px;
}

.retro-scorers b {
  color: #7fa1ff;
}

.retro-no-scorers {
  color: #5f6c80;
}

.retro-stage-actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.retro-stage-actions button {
  min-width: 190px;
}

.retro-match-stats {
  width: min(560px, 100%);
  margin: 38px auto 0;
  padding-top: 20px;
  border-top: 1px solid #263447;
}

.retro-match-stats > div {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  align-items: center;
  min-height: 34px;
  font-size: 12px;
  text-align: center;
}

.retro-match-stats > div strong:first-child {
  text-align: left;
}

.retro-match-stats > div strong:last-child {
  text-align: right;
}

.retro-match-stats span {
  color: #718097;
}

.retro-active-fixtures {
  margin-top: 24px;
  padding: 26px;
  border-radius: 8px;
  background: #0e1621;
}

.retro-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.retro-section-heading h2 {
  margin: 0;
  font-size: 20px;
}

.retro-fixture-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.retro-fixture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 70px;
  padding: 10px 14px;
  border: 0;
  border-radius: 6px;
  color: #dfe5ee;
  background: #151e2b;
  font: inherit;
  cursor: pointer;
}

.retro-fixture.selected {
  background: #1b2a43;
  box-shadow: inset 3px 0 #fcc40c;
}

.retro-fixture > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-align: left;
}

.retro-fixture > span:last-child {
  flex-direction: row-reverse;
  text-align: right;
}

.retro-fixture strong {
  min-width: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.retro-fixture > b {
  min-width: 50px;
  font-size: 14px;
  text-align: center;
}

.retro-fixture > b small {
  display: block;
  font-size: 8px;
}

.retro-fixture-flag,
.retro-fixture-flag img {
  width: 36px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.retro-golden-boot {
  overflow: hidden;
  border-radius: 8px;
  background: #111925;
}

.retro-golden-boot > span {
  display: block;
  padding: 20px;
  color: #fcc40c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-align: center;
}

.retro-golden-boot > div {
  display: grid;
  grid-template-columns: 20px 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 10px 16px;
  border-top: 1px solid #243044;
}

.retro-golden-boot > div > b {
  color: #69778d;
  font-size: 11px;
}

.retro-golden-boot > div > span {
  display: grid;
  min-width: 0;
}

.retro-golden-boot strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.retro-golden-boot small {
  color: #718097;
  font-size: 10px;
}

.retro-golden-boot em {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
}

.retro-golden-boot > p {
  margin: 0;
  padding: 24px;
  color: #6f7d92;
  font-size: 12px;
  text-align: center;
}

.retro-boot-flag,
.retro-boot-flag img {
  width: 34px;
  height: 23px;
  border-radius: 3px;
}

.retro-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.retro-group-table {
  overflow: hidden;
  border-radius: 8px;
  background: #111925;
}

.retro-group-table h2 {
  margin: 0;
  padding: 18px;
  font-size: 17px;
}

.retro-table-head,
.retro-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 34px 34px;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 7px 14px;
  border-top: 1px solid #202c3d;
}

.retro-table-head {
  min-height: 34px;
  color: #718097;
  font-size: 9px;
  text-transform: uppercase;
}

.retro-table-row {
  position: relative;
  font-size: 11px;
}

.retro-table-row.qualified::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #fcc40c;
  content: "";
}

.retro-table-row > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.retro-table-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.retro-table-head b,
.retro-table-row > b {
  text-align: center;
}

.retro-table-flag,
.retro-table-flag img {
  width: 30px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.retro-squad-view {
  border-radius: 8px;
  background: #111925;
}

.retro-squad-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  border-bottom: 1px solid rgba(246, 209, 42, 0.32);
}

.retro-squad-heading > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.retro-squad-heading > div > span {
  display: grid;
  gap: 3px;
}

.retro-squad-heading small,
.retro-squad-heading label > span {
  color: rgba(255, 252, 232, 0.72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.retro-squad-heading label {
  display: grid;
  gap: 6px;
}

.retro-squad-heading select {
  min-width: 220px;
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 0;
  border-radius: 5px;
  color: #edf2f8;
  background: #0a111a;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.retro-squad-flag,
.retro-squad-flag img {
  width: 68px;
  height: 45px;
  border-radius: 5px;
}

.retro-squad-table {
  padding: 8px 24px 24px;
}

.retro-squad-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 52px);
  padding: 34px clamp(28px, 4vw, 64px) 46px;
}

.retro-squad-position-group {
  min-width: 0;
}

.retro-squad-position-group > h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin: 0 0 13px;
  padding: 0 0 9px;
  border-bottom: 2px solid rgba(246, 209, 42, 0.68);
  color: #f6d12a;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retro-squad-position-group > h2 b {
  color: rgba(255, 252, 232, 0.65);
  font-family: "DM Mono", monospace;
  font-size: 10px;
}

.retro-squad-list {
  display: grid;
}

.retro-squad-position-group .retro-squad-row {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 252, 232, 0.13);
}

.retro-squad-row {
  display: grid;
  grid-template-columns: 42px minmax(160px, 1fr) 60px minmax(180px, 1.2fr);
  gap: 16px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid #202c3d;
  font-size: 12px;
}

.retro-squad-row .retro-squad-number {
  align-self: start;
  padding-top: 3px;
  color: #f6d12a;
  font-family: "DM Mono", monospace;
  font-size: 10px;
}

.retro-squad-row > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.retro-squad-row strong {
  overflow-wrap: anywhere;
  color: #fffce8;
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 1.12;
}

.retro-squad-row small {
  overflow-wrap: anywhere;
  color: rgba(255, 252, 232, 0.62);
  font-size: clamp(9px, 0.68vw, 11px);
  font-weight: 700;
  line-height: 1.25;
}

.retro-squad-table-head {
  min-height: 38px;
  color: #68768b;
  font-size: 9px;
  text-transform: uppercase;
}

.retro-champion {
  display: grid;
  justify-items: center;
  min-height: 520px;
  padding: 80px 24px;
  border-radius: 8px;
  background: #111925;
  text-align: center;
}

.retro-champion > span {
  margin-top: 24px;
  color: #fcc40c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.retro-champion h2 {
  margin: 8px 0 0;
  font-size: clamp(38px, 6vw, 72px);
}

.retro-champion-flag,
.retro-champion-flag img {
  width: 180px;
  height: 120px;
  border-radius: 8px;
}

@media (max-width: 1080px) {
  .retro-match-layout {
    grid-template-columns: 1fr;
  }

  .retro-golden-boot {
    width: 100%;
  }

  .retro-groups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .retro-screen-header {
    min-height: 64px;
    padding: 0 14px;
  }

  .retro-screen-back {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .retro-screen-back span:last-child {
    display: none;
  }

  .retro-screen-restart {
    padding: 0 10px;
    font-size: 11px;
  }

  .retro-screen-brand .brand-mark {
    width: 42px;
    height: 42px;
  }

  .retro-tournament-main {
    width: calc(100% - 28px);
    padding: 32px 0 64px;
  }

  .retro-tournament-heading {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
  }

  .retro-tournament-progress {
    text-align: left;
  }

  .retro-view-tabs button {
    min-height: 42px;
    font-size: 12px;
  }

  .retro-match-stage {
    min-height: 0;
    padding: 28px 14px;
  }

  .retro-stage-label {
    margin-bottom: 30px;
  }

  .retro-match-teams {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    gap: 7px;
  }

  .retro-stage-flag,
  .retro-stage-flag img {
    width: 72px;
    height: 48px;
  }

  .retro-match-team h2 {
    min-height: 2.5em;
    margin-top: 12px;
    font-size: 18px;
  }

  .retro-match-score strong {
    font-size: 42px;
  }

  .retro-match-score strong small {
    font-size: 8px;
    white-space: normal;
  }

  .retro-scorers {
    font-size: 10px;
  }

  .retro-match-stats > div {
    grid-template-columns: 1fr 92px 1fr;
  }

  .retro-active-fixtures {
    padding: 18px 12px;
  }

  .retro-section-heading {
    align-items: flex-start;
  }

  .retro-section-heading h2 {
    font-size: 17px;
  }

  .retro-section-heading button {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 10px;
  }

  .retro-fixture-list {
    grid-template-columns: 1fr;
  }

  .retro-fixture {
    min-height: 64px;
    padding-inline: 10px;
  }

  .retro-groups-grid {
    grid-template-columns: 1fr;
  }

  .retro-squad-heading {
    display: grid;
    padding: 18px;
  }

  .retro-squad-heading select {
    width: 100%;
    min-width: 0;
  }

  .retro-squad-table {
    padding: 6px 14px 18px;
  }

  .retro-squad-row {
    min-height: 50px;
  }
}

@media (min-width: 721px) {
  body[data-desktop-mode-setup]:not(.retro-route-setup-active):not(.club-route-setup-active) #appShell {
    display: grid !important;
  }
}
.mode-card-community-workshop {
  order: 6;
  grid-column: span 2;
  min-height: 210px;
  background: #0e151f;
}

.mode-card-community-workshop h3 {
  color: #f5fff8;
}

.mode-card-community-workshop p {
  color: #a5afbf;
}

/* Championship identity pack: real club crests on a gold EFL surface. */
.championship-team-picker.has-team .championship-team-mark {
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.championship-team-mark img,
.championship-club-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html.light-mode body .pl-asset-pack-modal.championship-asset-pack-modal,
body .pl-asset-pack-modal.championship-asset-pack-modal {
  border-color: #fffdf4 !important;
  color: #07175f !important;
  background: linear-gradient(145deg, #d8c476, #b79a3f 64%, #9b7f2c) !important;
  box-shadow: 0 28px 90px rgba(3, 15, 76, .38) !important;
}

.championship-asset-pack-modal .pl-asset-pack-shell {
  color: #07175f !important;
  background: linear-gradient(145deg, #d8c476, #b79a3f 64%, #9b7f2c) !important;
}

html.light-mode body .championship-asset-pack-modal .modal-head h2,
.championship-asset-pack-modal .modal-head h2 {
  color: #061b84 !important;
}

.championship-asset-pack-modal .pl-asset-pack-intro {
  border-color: #fffdf4 !important;
  background: #061b84 !important;
  box-shadow: 0 12px 28px rgba(2, 14, 72, .2);
}

.championship-asset-pack-modal .championship-asset-badge {
  border: 1px solid rgba(6, 27, 132, .28);
  background: rgba(255, 253, 244, .94);
  box-shadow: 0 7px 18px rgba(52, 40, 3, .2);
}

.championship-asset-pack-modal .championship-asset-badge img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

html.light-mode body .championship-asset-pack-modal .pl-asset-pack-status,
.championship-asset-pack-modal .pl-asset-pack-status {
  color: #07175f !important;
}

.championship-asset-pack-modal .pl-asset-pack-status.is-success {
  color: #164c32 !important;
}

.championship-asset-pack-modal .pl-asset-pack-status.is-error {
  color: #78172b !important;
}

.championship-asset-pack-modal .pl-asset-pack-actions .text-button {
  color: #07175f !important;
}

.championship-asset-pack-modal .pl-asset-pack-actions .primary-button {
  border-color: #061b84 !important;
  color: #fffdf4 !important;
  background: #061b84 !important;
}

html.light-mode body .championship-asset-pack-modal .pl-asset-pack-credit,
.championship-asset-pack-modal .pl-asset-pack-credit {
  color: #18275f !important;
}

html.light-mode body .championship-asset-pack-modal .close-modal,
.championship-asset-pack-modal .close-modal {
  border-color: #061b84 !important;
  color: #061b84 !important;
  background: #fffdf4 !important;
}

@media (hover: hover) and (pointer: fine) {
  .championship-asset-pack-modal .pl-asset-pack-actions .primary-button:hover:not(:disabled) {
    border-color: #fffdf4 !important;
    background: #1737af !important;
  }

  .championship-asset-pack-modal :is(.close-modal, .pl-asset-pack-actions .text-button):hover {
    color: #fffdf4 !important;
    background: #061b84 !important;
  }
}

.championship-asset-pack-modal :is(button, .close-modal):focus-visible {
  outline: 3px solid #061b84 !important;
  outline-offset: 3px;
}

/* Brazil 2014: original watercolor treatment over the existing tournament layout. */
body.retro-mode-active {
  color: #173f35;
  background: #fff8e8 url("./assets/retro-2014/brazil-watercolor-bg.webp") center top / cover fixed no-repeat;
}

.retro-tournament-screen {
  min-height: 100vh;
  color: #173f35;
  background: rgba(255, 249, 232, 0.22);
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.retro-screen-header {
  border-bottom: 0;
  box-shadow: 0 8px 28px rgba(36, 109, 75, 0.12);
  background: rgba(255, 252, 241, 0.9);
  backdrop-filter: blur(14px) saturate(1.15);
}

.retro-screen-back,
.retro-screen-restart {
  border-radius: 999px;
  color: #176b4c;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 3px 0 rgba(20, 111, 77, 0.16);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}

.retro-screen-back:hover,
.retro-screen-restart:hover {
  background: #fff;
}

.retro-screen-back:active,
.retro-screen-restart:active,
.retro-tournament-screen button:active {
  transform: scale(0.97);
}

.retro-screen-brand .brand-mark {
  color: #fff;
  background: #168f5b;
  box-shadow: 0 5px 14px rgba(22, 143, 91, 0.25);
}

.retro-tournament-heading > div:first-child > span {
  color: #e05d4f;
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
}

.retro-tournament-heading h1 {
  color: #124d3b;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.82);
}

.retro-tournament-progress span {
  color: #4c7e6d;
}

.retro-tournament-progress strong {
  color: #124d3b;
}

.retro-view-tabs {
  gap: 5px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 30px rgba(34, 109, 76, 0.12);
  backdrop-filter: blur(10px);
}

.retro-view-tabs button {
  border-radius: 999px;
  color: #397361;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease, background-color 160ms ease;
}

.retro-view-tabs button:hover {
  color: #0f6145;
  background: rgba(22, 143, 91, 0.08);
}

.retro-view-tabs button:focus-visible {
  outline: 3px solid rgba(22, 137, 199, 0.42);
  outline-offset: 2px;
}

.retro-view-tabs button.active {
  color: #123a2f;
  background: #f6c945;
  box-shadow: 0 4px 12px rgba(197, 146, 10, 0.22);
}

.retro-match-stage,
.retro-active-fixtures,
.retro-golden-boot,
.retro-group-table,
.retro-squad-view,
.retro-lineups-view,
.retro-champion {
  position: relative;
  overflow: hidden;
  color: #173f35;
  background: rgba(255, 253, 245, 0.9);
  box-shadow: 0 18px 48px rgba(31, 103, 72, 0.13);
  backdrop-filter: blur(10px);
}

.retro-match-stage::before,
.retro-active-fixtures::before,
.retro-lineups-view::before,
.retro-champion::before {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, #168f5b 0 35%, #f6c945 35% 64%, #1689c7 64% 84%, #ef6a5b 84%);
  content: "";
}

.retro-stage-label {
  margin-bottom: 14px;
  color: #168f5b;
}

.retro-match-schedule {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 0 auto 30px;
  text-align: center;
}

.retro-match-schedule > span {
  display: grid;
  gap: 2px;
}

.retro-match-schedule b {
  color: #1c5b47;
  font-size: 12px;
}

.retro-match-schedule small {
  color: #6b8c7f;
  font-size: 10px;
  font-weight: 700;
}

.retro-stage-flag,
.retro-stage-flag img,
.retro-squad-flag,
.retro-squad-flag img,
.retro-lineup-flag,
.retro-lineup-flag img {
  box-shadow: 0 10px 22px rgba(22, 89, 62, 0.15);
}

.retro-match-team h2,
.retro-match-score strong {
  color: #123f32;
}

.retro-match-score > span,
.retro-scorers,
.retro-match-stats span,
.retro-no-scorers {
  color: #6d8a7f;
}

.retro-scorers b {
  color: #1689c7;
}

.retro-stage-actions .primary-button,
.retro-section-heading .secondary-button {
  border: 0;
  border-radius: 999px;
  color: #123a2f;
  background: #f6c945;
  box-shadow: 0 5px 0 #d4a821;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms ease;
}

.retro-stage-actions .primary-button:hover,
.retro-section-heading .secondary-button:hover {
  filter: brightness(1.04);
}

.retro-match-stats {
  border-top-color: rgba(29, 121, 82, 0.16);
}

.retro-section-heading h2,
.retro-group-table h2 {
  color: #12503c;
}

.retro-fixture {
  min-height: 92px;
  color: #244d40;
  background: rgba(238, 248, 230, 0.82);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}

.retro-fixture:hover {
  background: #f3f8dc;
}

.retro-fixture.selected {
  background: #fff2a9;
  box-shadow: inset 4px 0 #168f5b;
}

.retro-fixture-details {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  color: #678578;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.retro-fixture-details span:last-child {
  text-align: right;
}

.retro-golden-boot > span {
  color: #fff;
  background: #168f5b;
}

.retro-golden-boot > div,
.retro-table-head,
.retro-table-row,
.retro-squad-heading,
.retro-squad-row {
  border-color: rgba(30, 111, 77, 0.13);
}

.retro-golden-boot > div > b,
.retro-golden-boot small,
.retro-golden-boot > p,
.retro-table-head,
.retro-squad-heading small,
.retro-squad-heading label > span,
.retro-squad-row > b,
.retro-squad-row > span:last-child,
.retro-squad-table-head {
  color: #6c897e;
}

.retro-golden-boot em {
  color: #e25d4f;
}

.retro-table-row.qualified::before {
  background: #168f5b;
}

.retro-table-row.qualified {
  background: rgba(103, 190, 116, 0.1);
}

.retro-squad-heading select {
  color: #164b39;
  background: #edf6e6;
  box-shadow: inset 0 0 0 1px rgba(22, 143, 91, 0.16);
}

.retro-champion > span {
  color: #e05d4f;
}

.retro-lineups-view {
  border-radius: 8px;
  padding: 28px;
}

.retro-lineups-heading {
  display: grid;
  justify-items: center;
  margin-bottom: 24px;
  text-align: center;
}

.retro-lineups-heading > span {
  color: #168f5b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.retro-lineups-heading h2 {
  margin: 5px 0 14px;
  color: #124d3b;
  font-size: 30px;
}

.retro-lineups-heading .retro-match-schedule {
  margin-bottom: 0;
}

.retro-lineups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.retro-lineup-side {
  overflow: hidden;
  border-radius: 8px;
  background: rgba(238, 248, 230, 0.78);
}

.retro-lineup-side header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: #fff;
  background: #168f5b;
}

.retro-lineup-side:nth-child(2) header {
  background: #1689c7;
}

.retro-lineup-flag,
.retro-lineup-flag img {
  width: 56px;
  height: 37px;
  border-radius: 5px;
}

.retro-lineup-side header > span {
  display: grid;
}

.retro-lineup-side header small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 9px;
  font-weight: 900;
}

.retro-lineup-side header strong {
  font-size: 18px;
}

.retro-lineup-side ol {
  margin: 0;
  padding: 8px 16px 16px;
  list-style: none;
}

.retro-lineup-side li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
  min-height: 51px;
  border-bottom: 1px solid rgba(30, 111, 77, 0.12);
}

.retro-lineup-side li > b {
  color: #168f5b;
  text-align: center;
}

.retro-lineup-side li > span {
  display: grid;
  min-width: 0;
}

.retro-lineup-side li strong {
  font-size: 12px;
}

.retro-lineup-side li small {
  color: #718b80;
  font-size: 9px;
  overflow-wrap: anywhere;
}

.retro-lineup-side li em {
  color: #e05d4f;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 700px) {
  body.retro-mode-active {
    background-attachment: scroll;
  }

  .retro-view-tabs {
    border-radius: 8px;
  }

  .retro-view-tabs button {
    padding-inline: 5px;
    border-radius: 6px;
    font-size: 10px;
  }

  .retro-match-schedule {
    gap: 14px;
    margin-bottom: 24px;
  }

  .retro-match-schedule > span {
    max-width: 145px;
  }

  .retro-fixture-details {
    display: grid;
    gap: 2px;
  }

  .retro-fixture-details span:last-child {
    text-align: left;
  }

  .retro-lineups-view {
    padding: 20px 12px;
  }

  .retro-lineups-grid {
    grid-template-columns: 1fr;
  }
}

/* Brazil 2014 shared simulator skin: same Global Cup UI, painted tournament atmosphere. */
body.retro-mode-active {
  color: #f7f4cf;
  background:
    linear-gradient(rgba(3, 73, 42, 0.22), rgba(0, 49, 38, 0.48)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center top / cover fixed no-repeat;
}

.retro-mode-active .retro-tournament-screen {
  color: #f7f4cf;
  background:
    linear-gradient(180deg, rgba(2, 60, 35, 0.16), rgba(0, 43, 34, 0.54)),
    transparent;
}

.retro-mode-active .retro-screen-header {
  border-bottom: 5px solid #f4ce22;
  background: rgba(0, 83, 53, 0.88);
  box-shadow: 0 7px 0 rgba(0, 74, 174, 0.42), 0 15px 34px rgba(0, 35, 27, 0.3);
}

.retro-mode-active .retro-screen-back,
.retro-mode-active .retro-screen-restart,
.retro-mode-active .retro-screen-action {
  color: #fff9d4;
  background: #086f45;
  box-shadow: 0 4px 0 #034d36;
}

.retro-mode-active .retro-screen-back:hover,
.retro-mode-active .retro-screen-restart:hover,
.retro-mode-active .retro-screen-action:hover {
  color: #073e2c;
  background: #f6d326;
}

.retro-mode-active .retro-tournament-heading > div:first-child > span {
  color: #f9d62e;
  text-shadow: 0 2px #075b3e;
}

.retro-mode-active .retro-tournament-heading h1,
.retro-mode-active .retro-tournament-progress strong {
  color: #fff9d5;
  text-shadow: 0 3px 0 rgba(0, 62, 42, 0.55);
}

.retro-mode-active .retro-tournament-progress span {
  color: #bde99b;
}

.retro-mode-active .retro-view-tabs {
  position: relative;
  gap: 8px;
  padding: 8px;
  border-radius: 18px 6px 20px 8px;
  background: rgba(0, 91, 56, 0.9);
  box-shadow: 9px 9px 0 rgba(0, 68, 171, 0.38), 0 18px 42px rgba(0, 42, 29, 0.28);
}

.retro-mode-active .retro-view-tabs::before {
  position: absolute;
  inset: -10px 4% auto 2%;
  height: 13px;
  background: #f5ce23;
  clip-path: polygon(0 48%, 8% 18%, 23% 39%, 41% 3%, 64% 34%, 79% 8%, 100% 45%, 97% 76%, 71% 58%, 48% 94%, 27% 61%, 4% 83%);
  content: "";
}

.retro-mode-active .retro-view-tabs button {
  min-height: 48px;
  border-radius: 12px 4px 14px 6px;
  color: #d8efbf;
}

.retro-mode-active .retro-view-tabs button:hover {
  color: #fff7c5;
  background: rgba(20, 137, 82, 0.82);
}

.retro-mode-active .retro-view-tabs button.active {
  color: #06412e;
  background: #f6d12a;
  box-shadow: 0 5px 0 #d99a0d;
}

.retro-mode-active #mainContent {
  --surface: rgba(0, 74, 49, 0.91);
  --surface-raised: rgba(6, 102, 59, 0.94);
  --line: rgba(221, 242, 149, 0.25);
  color: #f8f5d5;
}

.retro-mode-active #mainContent .match-stage,
.retro-mode-active #mainContent .round-board,
.retro-mode-active #mainContent .panel,
.retro-mode-active #mainContent .match-analysis,
.retro-mode-active #mainContent .standard-match-tactics,
.retro-mode-active #mainContent .story-card {
  border-color: rgba(255, 225, 66, 0.28);
  color: #f8f5d5;
  background:
    linear-gradient(125deg, rgba(4, 113, 62, 0.94), rgba(0, 67, 52, 0.95)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / 1150px auto;
  box-shadow: 10px 10px 0 rgba(0, 68, 169, 0.28), 0 22px 48px rgba(0, 39, 28, 0.28);
}

.retro-mode-active #mainContent .match-stage {
  border-radius: 20px 7px 24px 9px;
}

.retro-mode-active #mainContent .round-board {
  border-radius: 12px 26px 10px 22px;
}

.retro-mode-active #mainContent .panel,
.retro-mode-active #mainContent .match-analysis,
.retro-mode-active #mainContent .standard-match-tactics {
  border-radius: 16px 5px 18px 7px;
}

.retro-mode-active #mainContent .match-stage::before,
.retro-mode-active #mainContent .round-board::before,
.retro-mode-active #mainContent .match-analysis::before {
  position: absolute;
  z-index: 0;
  inset: -7px 5% auto 2%;
  height: 13px;
  background: #f4cf25;
  clip-path: polygon(0 45%, 9% 16%, 22% 43%, 37% 5%, 56% 36%, 72% 8%, 89% 39%, 100% 20%, 98% 80%, 75% 59%, 53% 94%, 31% 61%, 8% 85%);
  content: "";
}

.retro-mode-active #mainContent .match-stage,
.retro-mode-active #mainContent .round-board,
.retro-mode-active #mainContent .match-analysis {
  position: relative;
}

.retro-mode-active #mainContent .match-stage > *,
.retro-mode-active #mainContent .round-board > *,
.retro-mode-active #mainContent .match-analysis > * {
  position: relative;
  z-index: 1;
}

.retro-mode-active #mainContent .stage-round,
.retro-mode-active #mainContent .panel-heading h2,
.retro-mode-active #mainContent .match-analysis-heading,
.retro-mode-active #mainContent .section-heading h2 {
  color: #f9d632;
  text-shadow: 0 2px rgba(0, 54, 38, 0.6);
}

.retro-mode-active #mainContent .team-name,
.retro-mode-active #mainContent .match-score,
.retro-mode-active #mainContent .score-separator,
.retro-mode-active #mainContent .champion-stage h2 {
  color: #fffce5;
}

.retro-mode-active #mainContent .event-live-clock strong,
.retro-mode-active #mainContent .live-clock,
.retro-mode-active #mainContent .fixture-team.winner .name,
.retro-mode-active #mainContent .fixture-team.winner b {
  color: #f8d32c;
}

.retro-mode-active #mainContent .primary-button,
.retro-mode-active #mainContent .play-button,
.retro-mode-active #mainContent .secondary-button,
.retro-mode-active #mainContent .live-control,
.retro-mode-active #mainContent .standard-tactic-buttons button.active {
  border: 0;
  border-radius: 14px 5px 16px 7px;
  color: #06412e;
  background: #f6d12a;
  box-shadow: 0 5px 0 #d79b0b;
}

.retro-mode-active #mainContent .standard-tactic-buttons button:not(.active),
.retro-mode-active #mainContent .text-button,
.retro-mode-active #mainContent .history-round-button {
  color: #dff0bf;
  background: rgba(3, 91, 55, 0.9);
}

.retro-mode-active #mainContent .match-analysis {
  background:
    linear-gradient(145deg, rgba(5, 116, 65, 0.97), rgba(0, 72, 46, 0.98)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / 1150px auto;
}

.retro-mode-active #mainContent .match-analysis-heading {
  min-height: 48px;
  border-bottom-color: rgba(249, 214, 50, 0.42);
}

.retro-mode-active #mainContent .match-analysis-heading strong {
  color: #fffce8;
  font-size: 16px;
  font-weight: 850;
  text-shadow: 0 2px 2px rgba(0, 40, 25, 0.72);
}

.retro-mode-active #mainContent .match-stats-grid {
  padding-block: 10px 12px;
  border-bottom-color: rgba(249, 214, 50, 0.28);
}

.retro-mode-active #mainContent .match-stat-row {
  min-height: 32px;
  color: #e3efc8;
  font-size: 10px;
  font-weight: 700;
}

.retro-mode-active #mainContent .match-stat-row b {
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0, 38, 24, 0.8);
}

.retro-mode-active #mainContent .match-stats-empty {
  grid-template-columns: 1fr;
  min-height: 72px;
}

.retro-mode-active #mainContent .match-stats-empty span {
  grid-column: 1;
  color: #f2f6d5;
  font-size: 11px;
  font-weight: 750;
}

.retro-mode-active #mainContent .standard-match-tactics {
  padding-top: 12px;
  background:
    linear-gradient(150deg, rgba(5, 112, 62, 0.97), rgba(0, 66, 43, 0.98)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / 1150px auto;
}

.retro-mode-active #mainContent .standard-match-tactics > span {
  margin-bottom: 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.15px;
  text-shadow: 0 2px 2px rgba(0, 38, 24, 0.85);
}

.retro-mode-active #mainContent .standard-tactic-buttons {
  border-color: rgba(249, 214, 50, 0.28);
  background: rgba(0, 57, 38, 0.7);
}

.retro-mode-active #mainContent .standard-tactic-buttons button:not(.active) {
  color: #f0f5cf;
  background: #075f3e;
}

.retro-mode-active #mainContent .standard-tactic-buttons button:hover:not(:disabled):not(.active) {
  color: #fff;
  background: #0b7949;
}

.retro-mode-active #mainContent .penalty-stage {
  border: 1px solid rgba(249, 214, 50, 0.38);
  border-radius: 20px 7px 24px 9px;
  color: #fffce8;
  background:
    linear-gradient(155deg, rgba(4, 119, 63, 0.98), rgba(0, 66, 44, 0.98)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / 1080px auto;
  box-shadow: 9px 9px 0 rgba(0, 66, 171, 0.32), 0 22px 42px rgba(0, 42, 28, 0.34);
}

.retro-mode-active #mainContent .penalty-stage-head {
  color: #f4e995;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.2px;
}

.retro-mode-active #mainContent .penalty-stage-head strong {
  color: #fffce8;
  text-shadow: 0 2px 2px rgba(0, 39, 25, 0.82);
}

.retro-mode-active #mainContent .penalty-stage-head strong i {
  color: #f6d12a;
}

.retro-mode-active #mainContent .penalty-stage-head strong b.score-pop {
  color: #f6d12a;
}

.retro-mode-active #mainContent .match-penalty-overlay {
  color: #fffce8;
  background:
    linear-gradient(135deg, rgba(3, 112, 60, 0.96), rgba(0, 69, 45, 0.97)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / 1080px auto;
  box-shadow: inset 0 4px 0 #f6d12a, inset 0 -3px 0 rgba(0, 66, 171, 0.48);
  backdrop-filter: blur(7px) saturate(1.08);
}

.retro-mode-active #mainContent .match-penalty-decision strong {
  color: #f6d12a;
  letter-spacing: 0;
  text-shadow: 0 2px 2px rgba(0, 39, 25, 0.82);
}

.retro-mode-active #mainContent .match-penalty-decision small {
  color: #fffce8;
  font-size: 12px;
  font-weight: 800;
}

.retro-mode-active #mainContent .match-penalty-scene,
.retro-mode-active #mainContent .standard-penalty-scene {
  border: 1px solid rgba(248, 235, 144, 0.28);
  border-radius: 15px 5px 17px 7px;
  background:
    linear-gradient(180deg, rgba(0, 87, 64, 0.08), rgba(0, 37, 29, 0.52)),
    repeating-linear-gradient(90deg, rgba(255, 248, 190, 0.045) 0 42px, transparent 42px 84px),
    linear-gradient(135deg, #19784c, #07563c);
  box-shadow: inset 0 0 46px rgba(0, 40, 29, 0.34);
}

.retro-mode-active #mainContent .match-penalty-scene::before,
.retro-mode-active #mainContent .standard-penalty-scene::before {
  border-color: rgba(255, 246, 198, 0.32);
}

.retro-mode-active #mainContent .match-penalty-scene .penalty-goal,
.retro-mode-active #mainContent .standard-penalty-scene .penalty-goal {
  border-color: #fff8cf;
  filter: drop-shadow(0 2px 0 rgba(0, 48, 34, 0.56));
}

.retro-mode-active #mainContent .match-penalty-scene .penalty-net,
.retro-mode-active #mainContent .standard-penalty-scene .penalty-net {
  opacity: 0.34;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, #fff8cf 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 18px, #fff8cf 18px 19px);
}

.retro-mode-active #mainContent .match-penalty-scene .penalty-keeper,
.retro-mode-active #mainContent .standard-penalty-scene .penalty-keeper {
  color: #f6c72b;
}

.retro-mode-active #mainContent .match-penalty-scene .penalty-taker,
.retro-mode-active #mainContent .standard-penalty-scene .penalty-taker {
  color: #e9f3dc;
}

.retro-mode-active #mainContent .match-penalty-targets button,
.retro-mode-active #mainContent .standard-penalty-targets button {
  border-color: #f8d42f;
  background: rgba(248, 212, 47, 0.2);
  box-shadow: 0 0 0 5px rgba(248, 212, 47, 0.09);
}

.retro-mode-active #mainContent .match-penalty-targets button:hover,
.retro-mode-active #mainContent .standard-penalty-targets button:hover {
  background: rgba(248, 212, 47, 0.4);
  transform: translate(-50%, -50%) scale(1.08);
}

.retro-mode-active #mainContent .match-penalty-scene[data-result="goal"],
.retro-mode-active #mainContent .standard-penalty-scene[data-result="goal"] {
  box-shadow: inset 0 0 0 999px rgba(246, 209, 42, 0.065);
}

.retro-mode-active #mainContent .match-penalty-scene[data-result="save"],
.retro-mode-active #mainContent .match-penalty-scene[data-result="wide"],
.retro-mode-active #mainContent .standard-penalty-scene[data-result="save"],
.retro-mode-active #mainContent .standard-penalty-scene[data-result="wide"] {
  box-shadow: inset 0 0 0 999px rgba(230, 92, 70, 0.07);
}

.retro-mode-active #mainContent .penalty-call strong {
  color: #fffce8;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 38, 24, 0.8);
}

.retro-mode-active #mainContent .penalty-call span {
  color: #dcebb5;
  font-weight: 750;
}

.retro-mode-active #mainContent .penalty-ledgers span {
  color: #f5f3d0;
  font-size: 9px;
  font-weight: 800;
}

.retro-mode-active #mainContent .penalty-mark {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(223, 239, 187, 0.42);
  background: rgba(0, 48, 35, 0.42);
}

.retro-mode-active #mainContent .penalty-mark.goal {
  border-color: #f6d12a;
  background: #f6d12a;
  box-shadow: 0 0 0 3px rgba(246, 209, 42, 0.1);
}

.retro-mode-active #mainContent .penalty-mark.miss {
  border-color: #f07862;
  background: #f07862;
}

.retro-mode-active #mainContent .fixture {
  min-height: 142px;
  border: 0;
  border-radius: 15px 5px 17px 7px;
  color: #edf6ce;
  background: rgba(0, 91, 55, 0.86);
  box-shadow: inset 0 0 0 1px rgba(237, 244, 154, 0.16);
}

.retro-mode-active #mainContent .fixture:hover,
.retro-mode-active #mainContent .fixture.selected {
  background: rgba(14, 124, 67, 0.96);
  box-shadow: inset 6px 0 #f5d12d, 6px 6px 0 rgba(0, 67, 173, 0.36);
}

.retro-mode-active #mainContent .fixture.bracket-fixture {
  height: 76px;
  min-height: 0;
  padding: 10px 11px;
  overflow: hidden;
  border-radius: 9px 3px 10px 4px;
  background: rgba(0, 82, 52, 0.94);
}

.retro-mode-active #mainContent .bracket-fixture .retro-standard-fixture-meta {
  display: none;
}

.retro-mode-active #mainContent .bracket-fixture.placeholder {
  opacity: 0.66;
}

.retro-mode-active #mainContent .bracket-heads {
  color: #f6d12a;
  background: #063f30;
}

.retro-mode-active #mainContent .bracket-connector::before,
.retro-mode-active #mainContent .bracket-connector::after,
.retro-mode-active #mainContent .bracket-fixture[data-connects="true"]::after {
  border-color: rgba(246, 209, 42, 0.48);
}

.retro-mode-active #mainContent .fixture-card-head,
.retro-mode-active #mainContent .match-stats-grid span,
.retro-mode-active #mainContent .plot-list p,
.retro-mode-active #mainContent .story-card p {
  color: #b9dba6;
}

.retro-mode-active #mainContent .match-stat-row span {
  color: #e5efc9;
}

.retro-mode-active #mainContent .match-stats-empty span {
  color: #fffce8;
}

.retro-mode-active #mainContent .golden-boot-empty span,
.retro-mode-active #mainContent .golden-boot-empty p {
  color: #fff;
}

.retro-mode-active #mainContent .golden-boot-row {
  border-bottom-color: rgba(246, 209, 42, 0.24);
}

.retro-mode-active #mainContent .golden-boot-rank,
.retro-mode-active #mainContent .golden-boot-row.leader .golden-boot-rank {
  color: #f6d12a;
}

.retro-mode-active #mainContent .golden-boot-player strong {
  color: #fff;
}

.retro-mode-active #mainContent .golden-boot-player small {
  color: #fff7cf;
}

.retro-mode-active #mainContent .golden-boot-row > b,
.retro-mode-active #mainContent .golden-boot-row.leader > b {
  color: #f6d12a;
}

.retro-mode-active #mainContent .champion-stage {
  border: 0;
  border-radius: 22px 8px 26px 10px;
  color: #fffce5;
  background:
    linear-gradient(145deg, rgba(4, 123, 66, 0.96), rgba(0, 76, 48, 0.97)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / cover;
  box-shadow: 12px 12px 0 rgba(0, 68, 169, 0.3), 0 24px 54px rgba(0, 43, 28, 0.3);
}

.retro-mode-active #mainContent .champion-stage .trophy,
.retro-mode-active #mainContent .champion-stage p {
  color: #f6d12a;
  text-shadow: 0 2px 2px rgba(0, 45, 28, 0.72);
}

.retro-mode-active #mainContent .champion-stage .flag-orb {
  border: 0;
  box-shadow: none;
}

.retro-mode-active #mainContent .champion-award {
  color: #fffce5;
  background: rgba(0, 70, 46, 0.72);
  box-shadow: inset 0 0 0 1px rgba(246, 209, 42, 0.3);
}

.retro-mode-active #mainContent .champion-award-copy small,
.retro-mode-active #mainContent .champion-award-copy small b {
  color: #fff7cf;
}

.retro-mode-active #mainContent .champion-section-label,
.retro-mode-active #mainContent .champion-place > b {
  color: #f6d12a;
}

.retro-mode-active #mainContent .champion-place {
  border-color: rgba(246, 209, 42, 0.34);
  border-radius: 12px 4px 14px 6px;
  color: #fffce5;
  background: rgba(0, 70, 46, 0.72);
}

.retro-mode-active #mainContent .champion-place.place-1 {
  border-color: rgba(246, 209, 42, 0.72);
  background: rgba(0, 92, 55, 0.9);
  box-shadow: inset 0 4px #f6d12a;
}

.retro-mode-active #mainContent .champion-place strong {
  color: #fffce5;
}

.retro-mode-active #mainContent .champion-place small {
  color: #fff7cf;
}

.retro-third-place-playoff {
  display: grid;
  grid-column: 4;
  grid-row: 11 / span 4;
  align-self: start;
  gap: 9px;
  min-width: 0;
  padding: 0 8px;
  color: #f6d12a;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.retro-third-place-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.retro-third-place-playoff .fixture {
  width: 100%;
  height: 74px;
  min-height: 0;
}

@media (max-width: 700px) {
  .retro-third-place-playoff {
    padding-inline: 4px;
  }
}

.retro-mode-active #mainContent .fixture-card-head {
  color: #e7efc8;
  font-weight: 750;
}

.retro-mode-active #mainContent .fixture-card-head small {
  color: #f6d12a;
  font-weight: 850;
}

.retro-mode-active #mainContent .fixture .fixture-team,
.retro-mode-active #mainContent .fixture .fixture-team .name,
.retro-mode-active #mainContent .fixture .fixture-team b {
  color: #fffce8;
}

.retro-mode-active #mainContent .fixture .fixture-team .name {
  font-weight: 750;
}

.retro-standard-fixture-meta {
  display: block;
  min-height: 26px;
  margin: 11px 0 -2px;
  padding-top: 8px;
  border-top: 1px solid rgba(233, 245, 164, 0.18);
  color: #f6d12a;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.retro-mode-active .retro-fixture-details {
  color: #f6d12a;
}

.retro-mode-active #mainContent .fixture-grid.retro-group-tables {
  display: block;
}

.retro-mode-active #mainContent .fixture-grid.retro-group-tables .retro-groups-grid {
  width: 100%;
}

body.retro-mode-active .modal,
body.retro-mode-active .confirm-modal {
  border: 1px solid rgba(249, 214, 50, 0.42);
  border-radius: 22px 7px 25px 10px;
  color: #fffce8;
  background:
    linear-gradient(145deg, rgba(5, 112, 62, 0.98), rgba(0, 55, 40, 0.99)),
    url("./assets/retro-2014/brazil-watercolor-stadium.webp") center / 980px auto;
  box-shadow: 10px 10px 0 rgba(0, 67, 173, 0.38), 0 28px 80px rgba(0, 31, 22, 0.58);
}

body.retro-mode-active .modal::backdrop,
body.retro-mode-active .confirm-modal::backdrop {
  background: rgba(0, 35, 25, 0.78);
  backdrop-filter: blur(4px);
}

body.retro-mode-active .confirm-modal .confirm-icon {
  color: #06412e;
  background: #f6d12a;
  box-shadow: 0 5px 0 #d79b0b;
}

body.retro-mode-active .confirm-modal h2,
body.retro-mode-active .modal h2 {
  color: #fffce8;
  text-shadow: 0 2px 2px rgba(0, 38, 24, 0.82);
}

body.retro-mode-active .confirm-modal p,
body.retro-mode-active .modal p {
  color: #dcebb5;
}

body.retro-mode-active .confirm-modal .primary-button,
body.retro-mode-active .confirm-modal .danger-button {
  border: 0;
  color: #06412e;
  background: #f6d12a;
  box-shadow: 0 5px 0 #d79b0b;
}

body.retro-mode-active .confirm-modal .secondary-button {
  border: 1px solid rgba(230, 241, 189, 0.3);
  color: #fffce8;
  background: rgba(4, 91, 56, 0.9);
}

body.retro-mode-active .modal .icon-button {
  border: 1px solid rgba(230, 241, 189, 0.28);
  color: #fffce8;
  background: rgba(4, 91, 56, 0.88);
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-option,
body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .bug-report-message {
  border-color: rgba(246, 209, 42, .24);
  color: #fffce8;
  background: rgba(0, 67, 45, .82);
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-keybind-list {
  border-color: rgba(246, 209, 42, 0.32);
  background: rgba(0, 55, 40, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 232, 0.04);
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-keybind-row strong {
  color: #fffce8;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-keybind-row small {
  color: #c7d9b9;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-keybind-button {
  border-color: rgba(246, 209, 42, 0.42);
  color: #06412e;
  background: #f6d12a;
  box-shadow: 0 3px 0 #d79b0b;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-keybind-button.is-listening {
  color: #fffce8;
  background: #0046ad;
  box-shadow: 0 3px 0 #003078;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-option:hover {
  background: rgba(8, 91, 55, .96);
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-option-copy strong,
body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .bug-report-message {
  color: #fffce8;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-option-copy small,
body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-note,
body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .bug-report-message::placeholder,
body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .bug-report-status {
  color: #c7d9b9;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-switch {
  background: #07523b;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-option[aria-pressed="true"] .settings-switch {
  background: #f6d12a;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .settings-option-icon {
  color: #f6d12a;
  background: #07523b;
}

body.retro-mode-active:not(.retro-2002-active):not(.retro-2006-active):not(.retro-2010-active):not(.retro-2018-active):not(.retro-2022-active) .bug-report-submit {
  color: #06412e;
  background: #f6d12a;
}

body.retro-mode-active.retro-2018-active .modal,
body.retro-mode-active.retro-2018-active .confirm-modal {
  border-color: rgba(241, 211, 154, .46);
  color: #fff4d6;
  background: linear-gradient(145deg, #126ca9, #073b70);
  box-shadow: 10px 10px 0 rgba(122, 17, 31, .5), 0 28px 70px rgba(40, 4, 12, .58);
}

body.retro-mode-active.retro-2018-active .modal::backdrop,
body.retro-mode-active.retro-2018-active .confirm-modal::backdrop {
  background: rgba(54, 4, 14, .78);
}

body.retro-mode-active.retro-2018-active .modal h2,
body.retro-mode-active.retro-2018-active .confirm-modal h2 {
  color: #fff4d6;
}

body.retro-mode-active.retro-2018-active .modal p,
body.retro-mode-active.retro-2018-active .confirm-modal p {
  color: #dceaff;
}

body.retro-mode-active.retro-2018-active .modal .icon-button,
body.retro-mode-active.retro-2018-active .settings-option,
body.retro-mode-active.retro-2018-active .bug-report-message {
  border-color: rgba(241, 211, 154, .22);
  color: #fff4d6;
  background: #07518c;
}

body.retro-mode-active.retro-2018-active .settings-keybind-list {
  border-color: rgba(241, 211, 154, 0.36);
  background: #073d70;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.045);
}

body.retro-mode-active.retro-2018-active .settings-keybind-row strong {
  color: #fff4d6;
}

body.retro-mode-active.retro-2018-active .settings-keybind-row small {
  color: #c3d8ee;
}

body.retro-mode-active.retro-2018-active .settings-keybind-button {
  border-color: rgba(241, 211, 154, 0.5);
  color: #fff4d6;
  background: #a51a16;
  box-shadow: 0 3px 0 #671018;
}

body.retro-mode-active.retro-2018-active .settings-keybind-button.is-listening {
  color: #07345f;
  background: #e9c477;
  box-shadow: 0 3px 0 #a87429;
}

body.retro-mode-active.retro-2018-active .settings-option:hover {
  background: #0963a3;
}

body.retro-mode-active.retro-2018-active .settings-option-copy strong,
body.retro-mode-active.retro-2018-active .bug-report-message {
  color: #fff4d6;
}

body.retro-mode-active.retro-2018-active .settings-option-copy small,
body.retro-mode-active.retro-2018-active .settings-note,
body.retro-mode-active.retro-2018-active .bug-report-message::placeholder,
body.retro-mode-active.retro-2018-active .bug-report-status {
  color: #c3d8ee;
}

body.retro-mode-active.retro-2018-active .settings-switch {
  background: #073d70;
}

body.retro-mode-active.retro-2018-active .settings-option[aria-pressed="true"] .settings-switch {
  background: #a51a16;
}

body.retro-mode-active.retro-2018-active .settings-option-icon {
  color: #f1d39a;
  background: #741522;
}

body.retro-mode-active.retro-2018-active .bug-report-submit,
body.retro-mode-active.retro-2018-active .discord-join-button,
body.retro-mode-active.retro-2018-active .donate-modal-link {
  color: #fff4d6;
  background: #a51a16;
}

body.retro-mode-active .snapshot-preview {
  border-color: rgba(246, 209, 42, 0.44);
  background: #064b37;
  box-shadow: 0 14px 36px rgba(0, 43, 29, 0.34);
}

body.retro-mode-active .snapshot-actions button {
  border: 1px solid rgba(246, 209, 42, 0.38);
  color: #fffce8;
  background: #087348;
  box-shadow: 0 4px 0 #034d36;
}

body.retro-mode-active .snapshot-actions button:hover {
  background: #0a8b50;
}

.retro-match-lineups-panel[hidden] {
  display: none !important;
}

.retro-match-lineups-panel {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(246, 209, 42, 0.38);
  border-radius: 14px 5px 16px 7px;
  color: #fffce8;
  background: rgba(0, 82, 52, 0.92);
  box-shadow: 0 14px 34px rgba(0, 42, 29, 0.24);
}

.retro-match-lineups-panel summary {
  padding: 16px 20px;
  color: #f6d12a;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  list-style-position: inside;
}

.retro-match-lineups-panel[open] summary {
  border-bottom: 1px solid rgba(246, 209, 42, 0.24);
}

.retro-match-lineups-panel > .retro-lineups-grid {
  padding: 10px;
}

.retro-match-lineups-panel .retro-lineup-side header {
  min-height: 48px;
  padding: 9px 12px;
}

.retro-match-lineups-panel .retro-lineup-flag,
.retro-match-lineups-panel .retro-lineup-flag img {
  width: 42px;
  height: 28px;
}

.retro-match-lineups-panel .retro-lineup-side header strong {
  font-size: 14px;
}

.retro-match-lineups-panel .retro-lineup-side ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  padding: 5px 10px 9px;
}

.retro-match-lineups-panel .retro-lineup-side li {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  min-height: 31px;
}

.retro-match-lineups-panel .retro-lineup-side li small,
.retro-match-lineups-panel .retro-lineup-side li em {
  display: none;
}

.retro-match-lineups-panel .retro-lineup-side li strong {
  font-size: 9px;
}

.retro-mode-active #mainContent .board-actions .history-round-button {
  border-color: rgba(246, 209, 42, 0.36);
  color: #fffce8;
  background: #087348;
}

@media (max-width: 640px) {
  .retro-match-lineups-panel > .retro-lineups-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

.retro-mode-active #mainContent .match-2d-pitch {
  border-color: rgba(255, 244, 174, 0.72);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 10%, transparent 10% 20%),
    #14884c;
}

.retro-mode-active #mainContent .match-commentary-feed {
  min-height: 44px;
  max-height: 44px;
  border-color: rgba(249, 216, 54, 0.42);
  color: #fff9d4;
  background: rgba(0, 55, 40, 0.82);
}

.retro-mode-active #mainContent .match-commentary-feed .commentary-line span,
.retro-mode-active #mainContent .match-commentary-feed.is-major .commentary-line span {
  color: #fff9d4;
  font-weight: 700;
}

.retro-mode-active #mainContent .flag-orb {
  box-shadow: none;
}

.retro-mode-active:not(.retro-2022-active) #mainContent .search {
  border-color: rgba(246, 209, 42, 0.34);
  color: #f6d12a;
  background: rgba(0, 67, 48, 0.86);
  box-shadow: 0 4px 0 rgba(0, 48, 35, 0.3);
}

.retro-mode-active:not(.retro-2022-active) #mainContent .search:focus-within {
  border-color: #f6d12a;
  background: rgba(0, 78, 51, 0.96);
  box-shadow: 0 0 0 3px rgba(246, 209, 42, 0.14);
}

.retro-mode-active:not(.retro-2022-active) #mainContent .search input {
  color: #fff;
  background: transparent;
}

.retro-mode-active:not(.retro-2022-active) #mainContent .search input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.retro-mode-active #mainContent .snapshot-trigger {
  color: #fff7c7;
  background: #075f43;
}

.retro-mode-active .retro-group-table,
.retro-mode-active .retro-squad-view,
.retro-mode-active .retro-lineups-view,
.retro-mode-active .retro-champion {
  color: #f8f4d1;
  background: rgba(0, 82, 53, 0.92);
  box-shadow: 10px 10px 0 rgba(0, 68, 173, 0.34), 0 20px 45px rgba(0, 42, 29, 0.3);
}

.retro-mode-active .retro-group-table h2,
.retro-mode-active .retro-lineups-heading h2,
.retro-mode-active .retro-squad-heading strong {
  color: #f7d229;
}

.retro-mode-active .retro-table-row,
.retro-mode-active .retro-squad-row,
.retro-mode-active .retro-lineup-side {
  color: #f5f2d4;
  background: rgba(7, 109, 62, 0.7);
}

.retro-mode-active .retro-squad-row {
  background: transparent;
}

.retro-mode-active .retro-squad-view {
  box-shadow: none;
}

@media (min-width: 701px) and (max-width: 1180px) {
  body.retro-mode-active {
    background:
      linear-gradient(180deg, rgba(2, 64, 37, 0.2), rgba(0, 47, 35, 0.42)),
      url("./assets/retro-2014/brazil-watercolor-ipad.webp") center top / cover fixed no-repeat;
  }

  .retro-mode-active .retro-tournament-main {
    width: min(100% - 24px, 1440px);
  }

  .retro-mode-active #mainContent .fixture {
    min-height: 132px;
  }

  .retro-squad-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 26px;
  }
}

@media (max-width: 700px) {
  body.retro-mode-active {
    background:
      linear-gradient(180deg, rgba(2, 64, 37, 0.18), rgba(0, 47, 35, 0.4)),
      url("./assets/retro-2014/brazil-watercolor-iphone.webp") center top / cover fixed no-repeat;
  }

  .retro-mode-active .retro-tournament-main {
    width: min(100% - 24px, 1440px);
  }

  .retro-mode-active #mainContent .fixture {
    min-height: 132px;
  }

  .retro-squad-groups {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 24px 20px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retro-mode-active * {
    background-attachment: scroll !important;
  }
}

.landing-setting {
  display: grid;
  gap: 9px;
}

.landing-setting-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8c98ab;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.landing-setting-info {
  position: relative;
}

.landing-setting-info summary {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #344055;
  border-radius: 50%;
  color: #a9b8cf;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  text-transform: none;
}

.landing-setting-info summary::-webkit-details-marker {
  display: none;
}

.landing-setting-info summary:hover,
.landing-setting-info summary:focus-visible {
  border-color: #5d88ef;
  color: #dbe7ff;
  outline: none;
}

.landing-setting-info-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -6px;
  z-index: 40;
  width: min(310px, calc(100vw - 40px));
  padding: 12px 14px;
  border: 1px solid #29364a;
  border-radius: 6px;
  color: #aab6c8;
  background: #0b121d;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  box-sizing: border-box;
}

.landing-setting-info-panel p {
  margin: 0;
}

.landing-setting-info-panel p + p {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #202b3b;
}

.landing-setting-info-panel strong {
  display: block;
  margin-bottom: 2px;
  color: #f3f6fb;
  font-size: 11px;
}

.landing-setting:nth-child(2) .landing-setting-info-panel {
  right: -6px;
  left: auto;
}

@media (max-width: 700px) {
  .landing-setting-info-panel,
  .landing-setting:nth-child(2) .landing-setting-info-panel {
    position: fixed;
    top: 50%;
    right: 18px;
    bottom: auto;
    left: 18px;
    width: auto;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    transform: translateY(-50%);
  }
}

.landing-setting > span {
  color: #8c98ab;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.landing-setting .segmented {
  width: 100%;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  background: #0a111a;
}

.landing-setting .segmented button {
  min-width: 0;
  flex: 1;
  padding: 10px 8px;
  font-size: 10px;
  white-space: nowrap;
}

.landing-team-setting {
  grid-column: 1 / -1;
}

.spectate-picker {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 64px;
  padding: 10px 13px;
  border: 0;
  border-radius: 6px;
  color: #dfe6f1;
  background: #0a111a;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.spectate-picker:active {
  transform: scale(0.985);
}

.spectate-picker-mark {
  display: grid;
  width: 44px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #2b3748;
  border-radius: 6px;
  color: #86a8ff;
  background: #151d29;
  font-family: "DM Mono", monospace;
  font-size: 16px;
}

.spectate-picker-flag,
.spectate-picker-flag img {
  width: 44px;
  height: 34px;
  border-radius: 5px;
}

.spectate-picker-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.spectate-picker-copy strong {
  overflow: hidden;
  color: #edf2f8;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spectate-picker-copy small {
  color: #8996aa;
  font-size: 10px;
}

.spectate-picker-arrow {
  color: #668bdc;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

.spectate-picker.has-team {
  background: #15233e;
}

.mode-card-actions {
  justify-content: flex-start;
  margin-top: auto;
}

.mode-card-actions .start-tournament {
  min-width: 190px;
  min-height: 48px;
  font-size: 12px;
}

.mode-card-actions .start-tournament:active {
  transform: scale(0.97);
}

.legacy-restart-button {
  min-height: 44px;
  padding-inline: 18px;
}

.sound-toggle-button[aria-pressed="false"] {
  color: #778397;
  background: #101722;
}

.sound-toggle-button[aria-pressed="false"] > span:first-child {
  color: #69758a;
}

.online-coming-soon {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  border: 0;
  border-radius: 6px;
  color: #677387;
  background: #151d29;
  font-size: 11px;
  font-weight: 800;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .before-start .spectate-picker:hover {
    background: #0d1622;
  }

  .before-start .legacy-landing-picker > button:not(:disabled):hover {
    background: #1a2638;
  }
}

.mode-status-online {
  border-color: rgba(95, 140, 255, 0.3);
  color: #91adff;
  background: rgba(95, 140, 255, 0.08);
}

.online-mode-actions {
  display: grid;
  grid-template-columns: minmax(170px, 220px);
  gap: 9px;
  margin-top: auto;
}

.online-mode-actions[hidden] {
  display: none !important;
}

.online-mode-actions button {
  min-height: 42px;
  transition: transform 140ms var(--ease-out), border-color 160ms ease, background-color 160ms ease;
}

.online-mode-actions button:active {
  transform: scale(0.97);
}

#joinOnlineRoomButton {
  width: min(100%, 220px);
  justify-content: space-between;
}

.online-mode-actions.has-active-room {
  grid-template-columns: minmax(170px, 220px);
}

.online-screen {
  position: fixed;
  z-index: 45;
  inset: 0;
  min-height: 100dvh;
  overflow-y: auto;
  color: #eef2f8;
  background:
    radial-gradient(circle at 78% 2%, rgba(66, 109, 210, 0.16), transparent 34%),
    radial-gradient(circle at 4% 92%, rgba(38, 92, 166, 0.1), transparent 30%),
    #080d15;
}

.online-screen[hidden] {
  display: none;
}

.online-screen-open {
  overflow: hidden;
}

.online-screen-topbar {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 0 clamp(18px, 4vw, 54px);
  background: rgba(8, 13, 21, 0.88);
  backdrop-filter: blur(18px);
}

.online-screen-back {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  color: #96a4b8;
  background: transparent;
  font: 800 8px "Manrope", sans-serif;
  letter-spacing: 0.2px;
  transition: transform 140ms var(--ease-out), color 150ms ease, background-color 150ms ease;
}

.online-screen-back span {
  color: #7fa2ff;
  font-size: 13px;
}

.online-screen-back:active {
  transform: scale(0.97);
}

.online-screen-brand {
  display: inline-flex;
  align-items: center;
  color: #e8edf5;
  text-decoration: none;
}

.online-screen-brand > span {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: transparent;
  background: url("./assets/256-teams-icon.svg") center / cover no-repeat;
}

.online-screen-brand strong {
  display: none;
}

.online-screen-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 8px;
}

.online-screen-action {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid #28364a;
  border-radius: 8px;
  color: #91adff;
  background: #111a28;
  font: 800 16px/1 Inter, sans-serif;
  text-decoration: none;
}

.online-screen-action:hover {
  color: #fff;
  background: #1a2639;
}

.online-screen-main {
  width: min(100%, 1440px);
  min-height: calc(100dvh - 72px);
  margin: 0 auto;
  padding: clamp(38px, 7vh, 72px) clamp(18px, 5vw, 58px) 54px;
}

.online-screen-heading {
  width: min(100%, 570px);
  margin: 0 auto 24px;
  text-align: center;
}

.online-screen-heading[hidden] {
  display: none;
}

.online-mode-picker {
  width: min(100%, 880px);
  margin: 0 auto;
}

.online-mode-picker[hidden] {
  display: none;
}

.online-picker-kicker {
  display: block;
  margin-bottom: 8px;
  color: #789cff;
  font: 800 9px "Manrope", sans-serif;
  letter-spacing: 1.2px;
}

.online-mode-picker .online-screen-heading {
  width: min(100%, 620px);
  margin-bottom: 26px;
}

.online-mode-picker .online-screen-heading p {
  margin: 8px 0 0;
  color: #7f8da2;
  font-size: 11px;
}

.online-mode-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.online-mode-option {
  display: grid;
  min-height: 250px;
  align-content: start;
  gap: 18px;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid #243248;
  border-radius: 14px;
  background: #0e1622;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.online-mode-option-draft {
  border-color: #30466e;
  background: #101a29;
}

.online-mode-option-mark {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #30466d;
  border-radius: 11px;
  color: #a9c0ff;
  background: #16233a;
  font: 800 14px "DM Mono", monospace;
}

.online-mode-option small {
  color: #7186ad;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.online-mode-option h2 {
  margin: 5px 0 8px;
  color: #f0f4fa;
  font-size: 21px;
}

.online-mode-option p {
  margin: 0;
  color: #8997aa;
  font-size: 10px;
  line-height: 1.65;
}

.online-mode-option > :last-child {
  align-self: end;
  justify-self: start;
  margin-top: auto;
  text-decoration: none;
}

@media (max-width: 700px) {
  .online-mode-picker-grid {
    grid-template-columns: 1fr;
  }

  .online-mode-option {
    min-height: 215px;
  }
}

.online-screen-heading h1 {
  margin: 8px 0 9px;
  color: #f5f7fa;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: -2.3px;
  line-height: 1.02;
}

.online-room-entry {
  display: grid;
  width: min(100%, 760px);
  margin-inline: auto;
  gap: clamp(22px, 4vw, 30px);
}

.online-matchmaking-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 4vw, 30px);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% -45%, rgba(255, 255, 255, 0.24), transparent 48%),
    linear-gradient(135deg, #426de7 0%, #3158ce 58%, #274ab8 100%);
  box-shadow: 0 18px 42px rgba(20, 46, 112, 0.24);
}

.online-matchmaking-card.is-searching {
  grid-template-columns: 1fr;
}

.online-matchmaking-copy {
  display: grid;
  gap: 7px;
}

.online-matchmaking-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 4vw, 29px);
  letter-spacing: -0.9px;
  line-height: 1;
}

.online-matchmaking-copy p {
  margin: 0;
  max-width: 380px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  line-height: 1.6;
}

.online-matchmaking-card > .primary-button {
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  color: #2448a8;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(20, 41, 94, 0.18);
  transition: transform 140ms var(--ease-out), box-shadow 160ms ease, background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .online-matchmaking-card > .primary-button:hover:not(:disabled) {
    background: #f4f7ff;
    box-shadow: 0 10px 24px rgba(20, 41, 94, 0.24);
  }
}

.online-matchmaking-card > .primary-button:active:not(:disabled) {
  transform: scale(0.97);
}

.online-matchmaking-card > .primary-button[hidden],
.online-matchmaking-queue[hidden],
.online-entry-options[hidden] {
  display: none !important;
}

.online-matchmaking-queue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding-top: 6px;
}

.online-matchmaking-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255, 255, 255, 0.24);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: online-matchmaking-spin 850ms linear infinite;
}

.online-matchmaking-queue > div {
  display: grid;
  gap: 3px;
}

.online-matchmaking-queue strong {
  color: #ffffff;
  font-size: 11px;
}

.online-matchmaking-queue small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
}

.online-matchmaking-queue button {
  min-height: 34px;
  color: #ffffff;
  background: rgba(13, 32, 82, 0.2);
}

.online-private-divider {
  display: grid;
  gap: 3px;
  margin-bottom: -12px;
}

.online-private-divider span {
  color: #d8e0eb;
  font-size: 12px;
  font-weight: 800;
}

.online-private-divider small {
  color: #65748a;
  font-size: 8px;
}

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

.online-name-field {
  width: min(100%, 390px);
  margin-inline: auto;
}

.online-entry-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.online-room-entry[hidden] {
  display: none;
}

.online-entry-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.online-entry-panel h2 {
  margin: 0 0 4px;
  color: #aeb9c9;
  font-size: 12px;
  letter-spacing: -0.35px;
}

.online-room-lobby {
  width: min(100%, 720px);
  margin-inline: auto;
}

.online-field {
  display: grid;
  gap: 8px;
}

.online-field > span {
  color: #8390a4;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.online-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  outline: 0;
  color: #f2f5f9;
  background: #121a26;
  font: 700 11px "Manrope", sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.online-field input:focus {
  box-shadow: 0 0 0 2px rgba(95, 140, 255, 0.55);
}

.online-field input::placeholder {
  color: #59667a;
}

.online-create-action {
  width: 100%;
  min-height: 48px;
}

.online-entry-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #677489;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.online-entry-divider::before,
.online-entry-divider::after {
  width: 1px;
  flex: 1;
  background: #252e3b;
  content: "";
}

.online-entry-panel > button {
  width: 100%;
  min-height: 48px;
}

.online-code-field input,
.online-room-code-panel strong {
  font-family: "DM Mono", monospace;
  letter-spacing: 4px;
}

.online-room-code-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(95, 140, 255, 0.07);
}

.online-room-code-panel > span {
  color: #8090aa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.online-room-code-panel strong {
  color: #f4f7fb;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.1;
}

.online-room-code-panel button {
  min-height: 28px;
  padding: 0 9px;
  color: #8facff;
  font-size: 8px;
}

.online-room-invite {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: min(100%, 460px);
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(143, 172, 255, 0.16);
}

.online-room-invite a {
  min-width: 0;
  overflow: hidden;
  color: #b9c9f5;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-lobby-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 10px;
}

.online-lobby-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.online-lobby-heading strong {
  color: #dfe6f0;
  font-size: 10px;
}

.online-lobby-heading small {
  color: #aab6c8;
  font: 700 13px "DM Mono", monospace;
  letter-spacing: -0.25px;
}

.online-lobby-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  width: min(100%, 390px);
  margin: 0 auto 18px;
  gap: 9px;
}

.online-lobby-name > button {
  min-height: 48px;
  padding-inline: 18px;
}

.online-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58a6ff;
  box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.1);
}

.online-member-list {
  display: grid;
  max-height: 260px;
  gap: 7px;
  overflow-y: auto;
}

.online-member {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #0d141e;
}

.online-member-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #a7beff;
  background: #18243a;
  font-size: 11px;
  font-weight: 800;
}

.online-member > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-member strong {
  overflow: hidden;
  color: #e9eef5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-member small {
  color: #6f7d91;
  font-size: 8px;
}

.online-member i {
  color: #7698ee;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.online-lobby-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0;
}

.online-lobby-controls button {
  min-width: 124px;
  min-height: 42px;
  padding-inline: 18px;
  font-size: 9px;
}

.online-lobby-controls button[hidden] {
  display: none;
}

.online-draft {
  padding-top: 18px;
}

.online-draft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.online-draft-head h3 {
  margin: 5px 0 0;
  color: #f1f4f8;
  font-size: clamp(18px, 4vw, 25px);
  line-height: 1.12;
}

.online-draft-progress {
  height: 4px;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #172130;
}

.online-draft-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #547ff1, #86a8ff);
  transition: width 220ms var(--ease-out);
}

.online-roulette {
  display: grid;
  min-height: 230px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(95, 140, 255, 0.15), transparent 34%),
    #0c131e;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  text-align: center;
}

.online-roulette-player {
  color: #8eabfb;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.online-roulette-flag {
  display: grid;
  width: 118px;
  height: 78px;
  margin: 5px 0 3px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  color: #71809a;
  background: #151f2e;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.26);
  font: 800 24px "DM Mono", monospace;
  transition: transform 180ms var(--ease-out), opacity 120ms ease, filter 150ms ease;
}

.online-roulette-flag .country-flag {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.online-roulette.is-spinning .online-roulette-flag {
  transform: scale(0.97);
  filter: saturate(0.88);
}

.online-roulette.is-revealed .online-roulette-flag {
  transform: scale(1.04);
}

.online-roulette > strong {
  color: #f2f5fa;
  font-size: clamp(18px, 3vw, 28px);
  letter-spacing: -0.7px;
}

.online-roulette > small {
  color: #6f7d91;
  font-size: 8px;
}

.online-draft-rosters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.online-draft-roster {
  padding: 13px;
  border-radius: 12px;
  background: #0d141e;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.online-draft-roster.is-current {
  background: #101927;
}

.online-draft-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.online-draft-roster-head > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-draft-roster-head strong {
  overflow: hidden;
  color: #e6ebf3;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-draft-roster-head small {
  color: #66758a;
  font-size: 7px;
}

.online-draft-roster-head i {
  color: #8ca9f8;
  font: 800 8px "DM Mono", monospace;
  font-style: normal;
}

.online-draft-roster-countries {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.online-roster-country {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  padding: 7px 4px;
  border-radius: 8px;
  background: #141d2a;
}

.online-roster-country > span {
  display: grid;
  width: 34px;
  height: 24px;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  color: #5f6c80;
  background: #1a2433;
  font: 700 7px "DM Mono", monospace;
}

.online-roster-country .country-flag {
  width: 100%;
  height: 100%;
}

.online-roster-country strong {
  width: 100%;
  overflow: hidden;
  color: #b9c5d6;
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.online-roster-country-name > span {
  padding-inline: 1px;
}

.online-roster-country.is-empty {
  opacity: 0.48;
}

.online-matches {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-top: 18px;
}

.online-matches[hidden],
.online-tactics[hidden],
.online-current-match[hidden],
.online-ready-panel[hidden],
.online-penalty-control[hidden] {
  display: none;
}

.online-match-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.online-match-head h3 {
  margin: 5px 0 0;
  color: #f2f5f9;
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: -1.1px;
}

.online-match-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.online-round-next {
  min-height: 36px;
  padding-inline: 18px;
  font-size: 10px;
}

.online-round-next:disabled,
.online-round-next.is-disabled {
  cursor: not-allowed;
  color: #768397;
  background: #263043;
  box-shadow: none;
  opacity: 0.78;
}

.online-round-next span {
  margin-left: 5px;
  font-size: 14px;
}

.online-active-team {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  gap: 12px;
  margin-bottom: 18px;
}

.online-active-team > .country-flag {
  width: 64px;
  height: 42px;
  border-radius: 7px;
}

.online-active-team > span {
  display: grid;
  gap: 2px;
}

.online-active-team small,
.online-active-team > span:not(:has(strong)) {
  color: #718097;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.55px;
}

.online-active-team strong {
  color: #eff3f8;
  font-size: 17px;
}

.online-countries-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.online-countries-heading > span {
  color: #a7b4c6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.65px;
}

.online-countries-heading small {
  color: #647287;
  font-size: 7px;
}

.online-active-team {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 0;
  gap: 6px;
  margin-bottom: 14px;
}

.online-owned-country {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  padding: 7px 6px;
  border-radius: 9px;
  background: #101823;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.online-owned-country .country-flag {
  width: 44px;
  height: 29px;
  border-radius: 5px;
}

.online-owned-country > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-owned-country strong {
  overflow: hidden;
  color: #e7edf5;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-owned-country small {
  color: #799bfa;
  font-size: 6px;
  font-weight: 700;
}

.online-owned-country.is-eliminated {
  border: 1px solid #111925;
  background: #080d14;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
  opacity: 0.72;
}

.online-owned-country.is-eliminated .country-flag {
  filter: grayscale(0.72) brightness(0.56) saturate(0.55);
  opacity: 0.72;
}

.online-owned-country.is-eliminated strong {
  color: #768294;
}

.online-owned-country.is-eliminated small {
  color: #566273;
}

.online-owned-country.is-champion {
  background: #14241d;
}

.online-owned-country.is-champion small {
  color: #83d4a6;
}

.online-tactics {
  display: grid;
  gap: 13px;
  margin-bottom: 20px;
  padding: 16px 0 18px;
  border-block: 1px solid #202a38;
}

.online-tactics-copy {
  display: grid;
  gap: 3px;
  text-align: center;
}

.online-tactics-copy > span {
  color: #70809a;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.online-tactics-copy strong {
  color: #e9eef5;
  font-size: 15px;
}

.online-tactics-copy p {
  margin: 0;
  color: #8390a4;
  font-size: 9px;
}

.online-tactics input[type="range"] {
  width: min(100%, 560px);
  margin-inline: auto;
  accent-color: #648cff;
}

.online-tactic-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 610px);
  margin-inline: auto;
  gap: 5px;
  color: #67758a;
  font-size: 7px;
  font-weight: 700;
  text-align: center;
}

.online-current-match {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  align-items: center;
  gap: 20px;
  min-height: 420px;
  margin-bottom: 14px;
  padding: 22px 36px 26px;
  border-radius: 16px;
  background: #0d141e;
}

.online-match-livebar {
  grid-row: 1;
}

.online-match-home-side {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.online-match-away-side {
  grid-column: 3;
  grid-row: 2 / span 2;
}

.online-match-score {
  grid-column: 2;
  grid-row: 3;
}

.online-live-controls {
  display: flex;
  position: static;
  grid-column: 2;
  justify-self: center;
  align-items: center;
  gap: 6px;
  transform: translateY(-5px);
}

.online-live-controls button[hidden] {
  display: none;
}

.online-live-controls .live-control {
  min-width: 48px;
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  color: #b8c9f8;
  background: #182234;
  font-size: 11px;
  font-weight: 800;
}

.online-live-controls .live-control:active {
  transform: scale(0.97);
}

.online-pause-countdown {
  min-width: 28px;
  color: #ffb0aa;
  font: 800 9px "DM Mono", monospace;
  text-align: center;
}

.online-pause-countdown[hidden] {
  display: none;
}

.online-match-livebar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  padding-left: 168px;
  color: #7fa2ff;
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 0.65px;
}

.online-card-round {
  position: static;
  grid-column: 1;
  justify-self: start;
  color: #aab7ce;
  font: 700 11px "DM Mono", monospace;
  letter-spacing: 1.4px;
}

.online-card-match-number {
  grid-column: 3;
  justify-self: end;
  color: #8696b0;
  font: 500 8px "DM Mono", monospace;
}

.online-match-livebar button {
  min-height: 28px;
  padding: 0 8px;
  color: #91adff;
  font-size: 8px;
}

.online-match-team {
  display: grid;
  justify-items: center;
  min-width: 0;
  gap: 9px;
  text-align: center;
}

.online-match-team > div:first-child {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 10px;
}

.online-match-team .country-flag {
  width: 112px;
  height: 74px;
  border-radius: 9px;
}

.online-match-team strong {
  color: #dfe6f0;
  font-size: clamp(19px, 3vw, 28px);
  letter-spacing: -0.8px;
}

.online-match-team strong.is-mine {
  color: #8ed7ae;
}

.online-match-score {
  max-width: 100%;
  overflow: hidden;
  color: #f5f7fa;
  font: 800 clamp(42px, 7vw, 64px) "DM Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-match-penalty-score {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: center;
  max-width: 100%;
  margin-bottom: -17px;
  overflow: hidden;
  color: #88a9ff;
  font: 800 9px "DM Mono", monospace;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-match-penalty-score[hidden] {
  display: none;
}

.online-match-clock {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  justify-items: center;
  align-self: center;
  gap: 2px;
  color: #7fa2ff;
}

.online-live-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7198ff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.9px;
}

.online-live-label[hidden] {
  display: none;
}

.online-live-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f4544c;
}

.online-match-clock strong {
  font: 800 24px "DM Mono", monospace;
  letter-spacing: -0.5px;
}

.online-match-clock small {
  color: #71809a;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.55px;
}

.online-team-scorers {
  display: grid;
  width: 100%;
  min-height: 64px;
  align-content: start;
  gap: 4px;
  margin-top: 4px;
}

.online-side-penalty-marks {
  justify-content: center;
  gap: 7px;
  min-height: 13px;
  margin-top: -3px;
}

.online-side-penalty-marks[hidden] {
  display: none;
}

.online-side-penalty-marks .penalty-mark {
  width: 12px;
  height: 12px;
}

.online-team-scorers .timeline-event {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  padding: 0;
  color: #cbd5e2;
  background: transparent;
  font-size: 12px;
}

.online-team-scorers .timeline-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-team-scorers .timeline-event b {
  color: #7899ef;
  font: 700 7px "DM Mono", monospace;
}

.online-team-scorers.is-away .timeline-event {
  justify-content: center;
}

.online-team-scorers.is-away .timeline-event span {
  text-align: right;
}

.online-match-events {
  display: grid;
  grid-column: 1 / -1;
  width: min(100%, 520px);
  max-height: 150px;
  margin: 8px auto 0;
  gap: 5px;
  overflow-y: auto;
}

.online-match-events[hidden] {
  display: none !important;
}

.online-match-event {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 7px;
  color: #8190a5;
  background: #121c29;
  font-size: 8px;
}

.online-match-event > span {
  color: #7899ef;
  font: 700 7px "DM Mono", monospace;
}

.online-match-event > strong {
  overflow: hidden;
  color: #cbd5e2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-match-event.is-missed > strong {
  color: #f19a9a;
}

.online-match-event.is-scored > strong {
  color: #8dd2aa;
}

.online-match-events-empty {
  color: #647287;
  font-size: 8px;
  text-align: center;
}

.online-match-presentation {
  display: grid;
  grid-column: 2 / -1;
  grid-row: 4;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.online-commentary-feed {
  min-height: 76px;
  max-height: none;
  padding: 12px 16px;
  text-align: center;
}

.online-commentary-feed .commentary-line span {
  font-size: 11px;
}

.online-match-stats {
  display: grid;
  align-content: start;
  overflow: hidden;
  border: 1px solid #26344a;
  border-radius: 8px;
  background: #0a111b;
}

.online-match-stats > strong {
  padding: 9px 12px;
  border-bottom: 1px solid #26344a;
  color: #dce5f2;
  font-size: 10px;
  text-align: center;
}

.online-match-stats-grid {
  display: grid;
  gap: 6px;
  padding: 9px 12px 11px;
}

.online-match-stat-row {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) minmax(74px, auto) minmax(32px, 1fr);
  align-items: center;
  gap: 8px;
  color: #71809a;
  font-size: 8px;
  text-align: center;
}

.online-match-stat-row b {
  color: #dce5f2;
  font: 700 9px "DM Mono", monospace;
}

.online-match-stat-row b:first-child { text-align: left; }
.online-match-stat-row b:last-child { text-align: right; }

.online-match-stat-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.online-ready-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 14px 0 20px;
  text-align: left;
}

.online-current-match > .online-tactics,
.online-current-match > .online-ready-panel,
.online-current-match > .online-penalty-control {
  grid-column: 1 / -1;
}

.online-current-match > .online-tactics {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 28px;
  width: 100%;
  margin: 8px 0 0;
  padding: 15px 0 4px;
  border-top: 1px solid #202a38;
  border-bottom: 0;
}

.online-current-match > .online-tactics .online-tactics-copy {
  grid-row: 1 / span 2;
  text-align: left;
}

.online-current-match > .online-tactics input,
.online-current-match > .online-tactics .online-tactic-labels {
  grid-column: 2;
  width: 100%;
}

.online-stage-action {
  justify-content: center;
  margin: 6px 0 0;
  text-align: center;
}

.online-stage-action .play-button {
  width: min(100%, 178px);
  min-height: 48px;
  border-radius: 10px;
  font-size: 11px;
}

.online-stage-action .play-button span {
  color: #fff;
}

.online-ready-panel > div {
  display: grid;
  max-width: 390px;
  gap: 3px;
}

.online-ready-panel strong {
  color: #e9eef5;
  font-size: 11px;
}

.online-ready-panel span {
  color: #7e8ba0;
  font-size: 8px;
}

.online-ready-panel button {
  min-width: 116px;
}

.online-penalty-control {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 12px 0 20px;
}

.online-penalty-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.online-penalty-head span {
  color: #7395ef;
  font: 800 8px "DM Mono", monospace;
  letter-spacing: 0.8px;
}

.online-penalty-head strong {
  color: #f2f5f9;
  font-size: 15px;
}

.online-penalty-scene {
  height: 250px;
  margin-top: 0;
}

.online-penalty-scene .penalty-goal {
  top: 32px;
  width: 330px;
  height: 142px;
}

.online-penalty-scene .penalty-keeper {
  transition-delay: 90ms;
}

.online-penalty-targets {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.online-penalty-targets button {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid #9bb7ff;
  border-radius: 50%;
  background: rgba(95, 140, 255, 0.16);
  box-shadow: 0 0 0 5px rgba(95, 140, 255, 0.07);
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
  transition: transform 140ms var(--ease-out), background-color 160ms ease, opacity 160ms ease;
}

.online-penalty-targets button:active {
  transform: translate(-50%, -50%) scale(0.9);
}

.online-penalty-targets [data-penalty-target="top-left"] { left: 16%; top: 19%; }
.online-penalty-targets [data-penalty-target="top-right"] { left: 84%; top: 19%; }
.online-penalty-targets [data-penalty-target="middle"] { left: 50%; top: 50%; }
.online-penalty-targets [data-penalty-target="bottom-left"] { left: 17%; top: 81%; }
.online-penalty-targets [data-penalty-target="bottom-right"] { left: 83%; top: 81%; }

.standard-penalty-targets [data-standard-penalty-target="top-left"] { left: 16%; top: 19%; }
.standard-penalty-targets [data-standard-penalty-target="top-right"] { left: 84%; top: 19%; }
.standard-penalty-targets [data-standard-penalty-target="middle"] { left: 50%; top: 50%; }
.standard-penalty-targets [data-standard-penalty-target="bottom-left"] { left: 17%; top: 81%; }
.standard-penalty-targets [data-standard-penalty-target="bottom-right"] { left: 83%; top: 81%; }

.match-penalty-targets [data-match-penalty-target="top-left"] { left: 16%; top: 19%; }
.match-penalty-targets [data-match-penalty-target="top-right"] { left: 84%; top: 19%; }
.match-penalty-targets [data-match-penalty-target="middle"] { left: 50%; top: 50%; }
.match-penalty-targets [data-match-penalty-target="bottom-left"] { left: 17%; top: 81%; }
.match-penalty-targets [data-match-penalty-target="bottom-right"] { left: 83%; top: 81%; }

.match-penalty-targets {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.match-penalty-overlay.is-awaiting-choice .match-penalty-targets {
  opacity: 1;
  pointer-events: auto;
}

.standard-penalty-targets {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.penalty-stage.is-awaiting-choice .standard-penalty-targets {
  opacity: 1;
  pointer-events: auto;
}

.online-penalty-scene:not([data-state="setup"]) .online-penalty-targets {
  pointer-events: none;
  opacity: 0;
}

.online-penalty-control.is-cpu-taking .online-penalty-targets {
  pointer-events: none;
  opacity: 0;
}

.online-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
  transform: translate(-120px, -130px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
  transform: translate(120px, -130px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
  transform: translate(0, -112px) scale(0.7);
}

.online-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
  transform: translate(-132px, -79px) scale(0.7);
}

.online-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
  transform: translate(132px, -79px) scale(0.7);
}

/* Standard and Legacy shootouts use the compact 224px goal. Keep successful
   shots visibly inside that net instead of reusing the larger online offsets. */
.standard-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
.standard-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
  transform: translate(-68px, -105px) scale(0.68);
}

.standard-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
.standard-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
  transform: translate(68px, -105px) scale(0.68);
}

.standard-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
.standard-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
  transform: translate(0, -85px) scale(0.7);
}

.standard-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
.standard-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
  transform: translate(-74px, -55px) scale(0.7);
}

.standard-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
.standard-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
  transform: translate(74px, -55px) scale(0.7);
}

/* The normal-match goal is narrower than the shootout goal. These coordinates
   land the ball directly beneath each visible target instead of collapsing all
   five choices into the generic left/centre/right flight path. */
.match-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
.match-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
  transform: translate(-68px, -125px) scale(0.68);
}

.match-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
.match-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
  transform: translate(68px, -125px) scale(0.68);
}

.match-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
.match-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
  transform: translate(0, -107px) scale(0.7);
}

.match-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
.match-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
  transform: translate(-74px, -77px) scale(0.7);
}

.match-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
.match-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
  transform: translate(74px, -77px) scale(0.7);
}

@media (max-width: 760px) {
  .match-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
  .match-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
    transform: translate(-58px, -108px) scale(0.68);
  }

  .match-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
  .match-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
    transform: translate(58px, -108px) scale(0.68);
  }

  .match-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
  .match-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
    transform: translate(0, -92px) scale(0.7);
  }

  .match-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
  .match-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
    transform: translate(-63px, -67px) scale(0.7);
  }

  .match-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
  .match-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
    transform: translate(63px, -67px) scale(0.7);
  }
}

@media (max-width: 640px) {
  .standard-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
  .standard-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
    transform: translate(-58px, -82px) scale(0.68);
  }

  .standard-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
  .standard-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
    transform: translate(58px, -82px) scale(0.68);
  }

  .standard-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
  .standard-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
    transform: translate(0, -65px) scale(0.7);
  }

  .standard-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
  .standard-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
    transform: translate(-63px, -39px) scale(0.7);
  }

  .standard-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
  .standard-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
    transform: translate(63px, -39px) scale(0.7);
  }
}

.online-penalty-feedback {
  min-height: 17px;
  color: #8491a5;
  font-size: 9px;
  text-align: center;
}

.online-round-matches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 22px;
}

.online-match-head .online-turn-pill[hidden] {
  display: none;
}

.online-penalty-tester-button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 9px;
}

.online-current-match.is-penalty-tester > .online-tactics {
  display: none;
}

.online-matches.is-penalty-tester .online-current-match {
  grid-column: 1 / -1;
}

.online-matches.is-penalty-tester .online-fixture-heading,
.online-matches.is-penalty-tester .online-my-matches,
.online-matches.is-penalty-tester .online-round-matches,
.online-matches.is-penalty-tester .online-match-actions {
  display: none;
}

.online-match-penalty-overlay {
  inset: 0;
  border-radius: 16px;
}

.online-centre-match {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 9px;
  padding: 16px 18px;
  border: 0;
  border-radius: 12px;
  color: #e6ebf3;
  background: #101823;
  text-align: left;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}

.online-centre-match.is-selected {
  background: #152033;
}

.online-centre-match.is-viewing-locked:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.online-centre-match:active {
  transform: scale(0.99);
}

.online-centre-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
  color: #8ca9dc;
  font-size: 14px;
  font-weight: 700;
}

.online-centre-head small {
  color: #78879f;
  font: 700 10px "DM Mono", monospace;
  letter-spacing: 0.65px;
}

.online-centre-head small.is-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #75a0ff;
}

.online-centre-head small.is-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f4544c;
}

.online-centre-team {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.online-centre-flag.country-flag {
  width: 42px;
  height: 28px;
  border-radius: 4px;
}

.online-centre-team strong {
  overflow: hidden;
  color: #e8edf4;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-centre-team strong.is-mine {
  color: #83d4a6;
}

.online-centre-team b {
  max-width: 48px;
  overflow: hidden;
  color: #eef2f7;
  font: 800 15px "DM Mono", monospace;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop online dashboard */
.online-matches {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.8fr);
  align-items: start;
  gap: 14px 24px;
}

.online-match-head,
.online-fixture-heading,
.online-round-matches,
.online-match-actions {
  grid-column: 1 / -1;
}

.online-match-head { grid-row: 1; }
.online-active-team { grid-column: 1; grid-row: 2; }
.online-current-match { grid-column: 1; grid-row: 3; }
.online-my-matches { grid-column: 2; grid-row: 2 / span 2; }
.online-fixture-heading { grid-row: 4; }
.online-round-matches { grid-row: 5; }
.online-match-actions { grid-row: 6; }

.online-my-matches-heading,
.online-fixture-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.online-my-matches-heading > span,
.online-fixture-heading > span {
  color: #a7b4c6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.65px;
}

.online-my-matches-heading small {
  color: #647287;
  font-size: 7px;
}

.online-my-matches {
  display: grid;
  max-height: 590px;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.online-round-matches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2px;
}

.online-match-filter {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: #101823;
}

.online-match-filter button {
  min-height: 29px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #74839a;
  background: transparent;
  font-size: 8px;
  font-weight: 800;
}

.online-match-filter button.is-active {
  color: #e8eef8;
  background: #23324a;
}

.online-match-list-empty {
  display: grid;
  min-height: 84px;
  place-items: center;
  border-radius: 11px;
  color: #6f7d91;
  background: #101823;
  font-size: 9px;
  text-align: center;
}

.online-current-match {
  grid-template-columns: 148px minmax(0, 1fr) auto minmax(0, 1fr);
}

.online-match-home-side {
  grid-column: 2;
}

.online-match-clock,
.online-match-score,
.online-match-penalty-score {
  grid-column: 3;
}

.online-match-clock {
  grid-row: 2;
  transform: translateY(-42px);
}

.online-match-score {
  grid-row: 2;
  align-self: center;
  transform: translateY(38px);
}

.online-match-penalty-score {
  grid-row: 2;
  align-self: center;
  margin-bottom: 0;
  transform: translateY(91px);
}

.online-match-away-side {
  grid-column: 4;
}

.online-current-match > .online-tactics {
  display: grid;
  grid-column: 1;
  grid-row: 2 / span 2;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-self: stretch;
  align-content: center;
  gap: 15px;
  margin: 0;
  padding: 8px 18px 8px 0;
  border-top: 0;
  border-right: 1px solid #202a38;
}

.online-current-match > .online-tactics .online-tactics-copy {
  grid-column: 1;
  grid-row: auto;
  text-align: left;
}

.online-current-match > .online-tactics input[hidden] {
  display: none;
}

.online-tactic-buttons {
  display: grid;
  gap: 5px;
}

.online-tactic-buttons button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #8997ab;
  background: #141e2b;
  font-size: 8px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), color 160ms ease, background-color 160ms ease;
}

.online-tactic-buttons button.is-active {
  color: #f1f5fb;
  background: #31558f;
}

.online-tactic-buttons button:active {
  transform: scale(0.98);
}

.online-tactic-buttons button:disabled {
  cursor: default !important;
  opacity: 0.72;
}

.online-current-match > .online-ready-panel {
  grid-column: 2 / -1;
}

.online-current-match > .online-penalty-control {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .online-matches {
    grid-template-columns: 1fr;
  }

  .online-match-head,
  .online-countries-heading,
  .online-active-team,
  .online-current-match,
  .online-my-matches-heading,
  .online-my-matches,
  .online-fixture-heading,
  .online-round-matches,
  .online-match-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .online-my-matches {
    max-height: none;
  }

  .online-round-matches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .online-current-match {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .online-live-controls {
    grid-column: 2;
  }

  .online-match-livebar { padding-left: 0; }

  .online-match-home-side { grid-column: 1; }
  .online-match-clock,
  .online-match-score { grid-column: 2; }
  .online-match-clock { grid-row: 2; transform: none; }
  .online-match-score { grid-row: 3; transform: none; }
  .online-match-away-side { grid-column: 3; }

  .online-current-match > .online-tactics,
  .online-match-presentation,
  .online-current-match > .online-ready-panel,
  .online-current-match > .online-penalty-control {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .online-current-match > .online-tactics {
    padding: 14px 0 0;
    border-top: 1px solid #202a38;
    border-right: 0;
  }

  .online-match-presentation {
    grid-template-columns: 1fr 1fr;
  }

  .online-current-match > .online-tactics .online-tactics-copy {
    text-align: center;
  }

  .online-tactic-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .online-tactic-buttons button {
    padding-inline: 5px;
    text-align: center;
  }

}

@media (max-width: 640px) {
  .online-match-presentation {
    grid-template-columns: 1fr;
  }
}

.online-fixture-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}

.online-fixture-heading > span {
  color: #9caabd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.65px;
}

.online-fixture-heading small {
  color: #647287;
  font-size: 7px;
}

.online-round-label {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: #718097;
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.online-round-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  color: #8794a7;
  background: #0e151f;
  font-size: 8px;
  text-align: left;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, opacity 160ms ease;
}

.online-round-match span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-round-match strong {
  color: #cdd6e2;
  font: 700 8px "DM Mono", monospace;
  white-space: nowrap;
}

.online-round-match.is-complete {
  opacity: 0.72;
}

.online-round-match.is-selected {
  color: #b8c8df;
  background: #18243a;
  opacity: 1;
}

.online-round-match.is-owned {
  color: #c5d2e5;
  background: #131e2d;
}

.online-round-match.is-owned strong {
  color: #8eabff;
}

.online-round-match.is-my-match {
  min-height: 78px;
  padding: 12px 14px;
  background: #121c2a;
}

.online-round-match .online-fixture-pair {
  display: grid;
  min-width: 0;
  gap: 6px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.online-fixture-team {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.online-fixture-team b {
  overflow: hidden;
  color: #dce4ee;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-fixture-pair > i {
  display: none;
}

.online-fixture-flag.country-flag {
  flex: 0 0 auto;
  width: 34px;
  height: 23px;
  border-radius: 4px;
}

.online-round-match:active {
  transform: scale(0.98);
}

.online-match-actions {
  margin-top: 18px;
}

.online-team-select-dialog {
  width: min(calc(100% - 28px), 540px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: #edf2f8;
  background: #101722;
}

.online-team-select-dialog::backdrop {
  background: rgba(3, 7, 12, 0.82);
  backdrop-filter: blur(7px);
}

.online-team-select-content {
  padding: clamp(24px, 5vw, 36px);
  text-align: center;
}

.online-team-select-content h2 {
  margin: 8px 0;
  font-size: clamp(23px, 5vw, 34px);
}

.online-team-select-content > p {
  margin: 0 0 20px;
  color: #8390a4;
  font-size: 9px;
}

.online-team-select-list {
  display: grid;
  gap: 8px;
}

.online-team-select-list button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  color: #e8edf4;
  background: #18212f;
  text-align: left;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}

.online-team-select-list button:active {
  transform: scale(0.98);
}

.online-team-select-list .country-flag {
  width: 48px;
  height: 32px;
  border-radius: 5px;
}

.online-team-select-list button > span {
  display: grid;
  gap: 2px;
}

.online-team-select-list strong { font-size: 11px; }
.online-team-select-list small { color: #718097; font-size: 8px; }

.online-turn-pill {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #a9c0ff;
  background: rgba(95, 140, 255, 0.1);
  font-size: 8px;
  font-weight: 800;
}

.online-turn-pill.is-waiting {
  color: #8490a2;
  background: #141b25;
}

.online-turn-pill.is-complete {
  color: #7fd3a6;
  background: rgba(70, 190, 130, 0.08);
}

.online-draft-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.online-draft-pick {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid #263142;
  border-radius: 11px;
  background: #0d141e;
}

.online-draft-pick-flag {
  display: grid;
  width: 38px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  color: #71809a;
  background: #182130;
  font: 800 12px "DM Mono", monospace;
}

.online-draft-pick-flag .country-flag,
.online-country-option > span:first-child .country-flag {
  width: 100%;
  height: 100%;
}

.online-draft-pick > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.online-draft-pick small {
  overflow: hidden;
  color: #718096;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-draft-pick strong {
  overflow: hidden;
  color: #e7edf5;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-draft-search input {
  width: 100%;
  min-height: 42px;
  margin-bottom: 9px;
  padding: 0 13px;
  border: 1px solid #293548;
  border-radius: 9px;
  outline: 0;
  color: #eef2f8;
  background: #0b111a;
  font: 700 9px "Manrope", sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.online-draft-search input:focus {
  border-color: #5f8cff;
  box-shadow: 0 0 0 3px rgba(95, 140, 255, 0.13);
}

.online-country-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 330px;
  gap: 6px;
  padding-right: 3px;
  overflow-y: auto;
}

.online-screen .online-country-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 460px;
}

.online-country-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 49px;
  padding: 7px 9px;
  border: 1px solid #242f3e;
  border-radius: 9px;
  color: inherit;
  background: #0d141e;
  text-align: left;
  transition: transform 130ms var(--ease-out), border-color 150ms ease, background-color 150ms ease;
}

.online-country-option:active:not(:disabled) {
  transform: scale(0.98);
}

.online-country-option > span:first-child {
  width: 34px;
  height: 25px;
  overflow: hidden;
  border-radius: 4px;
}

.online-country-option > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.online-country-option strong {
  overflow: hidden;
  color: #dfe6ef;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-country-option small {
  color: #6e7c91;
  font-size: 7px;
}

.online-country-option i {
  color: #82a3ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.online-country-option:disabled {
  cursor: default;
  opacity: 0.45;
}

.online-country-option:disabled i {
  color: #748094;
}

.online-draft-actions {
  margin-top: 12px;
}

.online-lobby-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.online-room-message {
  min-height: 18px;
  margin: 13px 0 0;
  color: #7898e8;
  font-size: 8px;
  line-height: 1.5;
}

.online-room-message:empty {
  display: none;
}

.online-room-message.is-error {
  color: #ff8b8b;
}

.online-screen button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.overview-toolbar-note {
  color: #68758a;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .mode-grid {
    grid-template-columns: 1fr;
  }

  .mode-card {
    grid-column: auto;
    min-height: 0;
  }

  .mode-card-retro {
    min-height: 0;
  }

  .online-screen .online-country-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-lineup,
  .legacy-offer-grid,
  .legacy-setup-grid,
  .legacy-draft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-draft-grid {
    grid-template-columns: 1fr;
  }

  .legacy-left-panel {
    height: auto;
    max-height: none;
  }

  .legacy-left-panel .legacy-offer-grid {
    max-height: 520px;
  }

  .legacy-draft-grid > .legacy-pitch-panel {
    order: -1;
  }

  .legacy-country-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .online-screen-topbar {
    grid-template-columns: 1fr auto 1fr;
    min-height: 54px;
    padding-inline: 16px;
  }

  .online-screen-brand {
    display: inline-flex;
    grid-column: 2;
    justify-self: center;
  }

  .online-screen-brand > span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: transparent;
    background: url("./assets/256-teams-icon.svg") center / cover no-repeat;
  }

  .online-screen-brand strong,
  .online-screen-local {
    display: none;
  }

  .online-screen-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    width: 100%;
    gap: 5px;
    pointer-events: none;
  }

  .online-screen-actions > * {
    pointer-events: auto;
  }

  #onlineSettingsButton {
    grid-column: 1;
  }

  #onlineBugReportButton {
    grid-column: 3;
  }

  .online-screen-actions > a {
    grid-column: 4;
  }

  .online-screen-action {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .online-screen-back {
    gap: 0;
    font-size: 0;
  }

  .online-screen-main {
    min-height: calc(100dvh - 54px);
    padding-top: 18px;
  }

  .online-screen-heading {
    margin-bottom: 20px;
  }

  .online-screen-heading h1 {
    letter-spacing: -1.4px;
  }

  .mode-select {
    padding-top: 18px;
  }

  .mode-card {
    min-height: 0;
    padding: 22px;
  }

  .mode-card-copy {
    margin: 20px 0 20px;
  }

  .mode-card-copy h3 {
    font-size: clamp(22px, 7vw, 29px);
  }

  .mode-card-copy p {
    font-size: 12px;
  }

  .landing-setting > span,
  .landing-setting .segmented button {
    font-size: 9px;
  }

  .landing-settings {
    grid-template-columns: 1fr;
  }

  .landing-team-setting {
    grid-column: auto;
  }

  .mode-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mode-card-actions .start-tournament {
    width: 100%;
  }

  .online-mode-actions {
    grid-template-columns: 1fr;
  }

  .legacy-draft {
    width: min(100%, calc(100% - 20px));
    gap: 10px;
    margin-bottom: 28px;
  }

  .legacy-complete-grid {
    gap: 10px;
  }

  .legacy-complete-panel {
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .legacy-complete-panel .legacy-actions button {
    min-height: 48px;
  }

  .legacy-draft-head,
  .legacy-nation-card,
  .legacy-summary,
  .legacy-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-lineup,
  .legacy-offer-grid,
  .legacy-setup-grid,
  .legacy-draft-grid {
    grid-template-columns: 1fr;
  }

  .legacy-formation-choice,
  .legacy-country-grid,
  .legacy-draft-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-draft-status > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .legacy-country-heading,
  .legacy-country-tools,
  .legacy-setup-start {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-country-search input {
    width: 100%;
  }

  .legacy-country-panel,
  .legacy-setup-panel {
    padding: 16px;
  }

  .legacy-country-card {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 82px;
    padding: 10px;
  }

  .legacy-country-card .country-flag,
  .legacy-country-card .country-flag img {
    width: 30px;
    height: 21px;
  }

  .legacy-formation-choice button {
    min-height: 120px;
  }

  .legacy-left-panel .legacy-player-card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 82px;
    padding-block: 12px;
  }

  .legacy-player-card .legacy-position-list {
    min-width: 0;
    padding-left: 0;
    font-size: 11px;
    line-height: 1.3;
  }

  .legacy-left-panel .legacy-offer-grid {
    max-height: 350px;
    padding: 6px 12px 12px;
  }

  .legacy-player-info {
    gap: 7px;
  }

  .legacy-left-panel .legacy-player-card strong {
    font-size: 13px;
  }

  .legacy-rating-badge {
    min-width: 44px;
    gap: 3px;
  }

  .legacy-rating-badge b {
    font-size: 22px;
  }

  .legacy-stats {
    gap: 4px 8px;
  }

  .legacy-stats span {
    font-size: 9px;
  }

  .legacy-left-panel > .legacy-draft-status > div {
    padding: 13px 14px;
  }

  .legacy-left-panel > .legacy-draft-status strong {
    font-size: 18px;
  }

  .legacy-randomiser {
    padding: 10px 14px 14px;
  }

  .legacy-randomiser .primary-button {
    min-height: 48px;
  }

  .legacy-randomiser.has-respin {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.7fr);
  }

  .legacy-helper {
    padding: 14px;
  }

  .legacy-helper strong {
    font-size: 14px;
  }

  .legacy-helper small {
    font-size: 9px;
  }

  .legacy-pitch {
    height: auto;
    min-height: 430px;
    padding: 28px 12px 36px;
    border-width: 3px;
    border-radius: 18px;
  }

  .legacy-pitch.legacy-pitch-5-lines {
    min-height: 480px;
  }

  .legacy-pitch.legacy-pitch-6-lines {
    min-height: 540px;
  }

  .legacy-pitch-line {
    gap: 8px;
  }

  .legacy-pitch-slot {
    width: min(58px, 100%);
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    padding: 7px;
    border-radius: 999px;
  }

  .legacy-pitch-slot .legacy-pitch-position {
    font-size: 15px;
  }

  .legacy-pitch-slot.is-filled .legacy-pitch-position {
    font-size: 8px;
  }

  .legacy-pitch-slot.is-expert .legacy-pitch-position {
    font-size: 14px;
  }

  .legacy-pitch-rating {
    font-size: 21px;
  }

  .legacy-pitch-name {
    top: calc(100% + 3px);
    max-width: 86px;
    padding: 3px 6px;
    font-size: 9px;
  }

  .legacy-pitch-year {
    top: -10px;
    padding: 2px 5px;
    font-size: 10px;
  }

  .online-entry-options {
    grid-template-columns: 1fr;
  }

  .online-matchmaking-card {
    grid-template-columns: 1fr;
  }

  .online-entry-divider {
    flex-direction: row;
  }

  .online-entry-divider::before,
  .online-entry-divider::after {
    width: auto;
    height: 1px;
  }

  .online-lobby-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .online-draft-picks,
  .online-country-list,
  .online-screen .online-country-list {
    grid-template-columns: 1fr;
  }

  .online-draft-rosters {
    grid-template-columns: 1fr;
  }

  .online-matches {
    padding-top: 0;
  }

  .online-match-head {
    align-items: center;
    margin-bottom: 10px;
  }

  .online-match-head .section-kicker {
    display: block;
    color: #7fa2ff;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 2.4px;
  }

  .online-match-head h3 {
    display: none;
  }

  .online-round-next {
    min-height: 44px;
    padding-inline: 20px;
  }

  .online-active-team {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 10px;
  }

  .online-owned-country {
    min-height: 72px;
    align-content: center;
    gap: 5px;
    padding: 6px 3px;
  }

  .online-owned-country .country-flag {
    width: min(100%, 46px);
    height: 30px;
  }

  .online-owned-country strong {
    font-size: 8px;
  }

  .online-roulette {
    min-height: 205px;
  }

  .online-current-match {
    gap: 9px;
    min-height: 260px;
    padding: 16px 10px;
  }

  .online-current-match > .online-tactics {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }

  .online-current-match > .online-tactics .online-tactics-copy {
    display: none;
  }

  .online-current-match.has-penalty-control > .online-tactics {
    display: none;
  }

  .online-current-match.has-penalty-control > .online-penalty-control {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #202a38;
  }

  .online-current-match > .online-tactics input,
  .online-current-match > .online-tactics .online-tactic-labels {
    grid-column: 1;
  }

  .online-match-clock strong {
    font-size: 15px;
  }

  .online-team-scorers .timeline-event {
    padding-inline: 5px;
    font-size: 7px;
  }

  .online-match-team .country-flag {
    width: 54px;
    height: 36px;
  }

  .online-match-team strong {
    font-size: 10px;
  }

  .online-ready-panel,
  .online-penalty-control {
    grid-template-columns: 1fr;
    flex-direction: column;
    text-align: center;
  }

  .online-ready-panel > div {
    text-align: center;
  }

  .online-penalty-copy {
    text-align: center;
  }

  .online-round-matches {
    grid-template-columns: 1fr;
  }

  .online-active-team {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .online-tactic-labels {
    font-size: 6px;
  }

  .online-tactic-buttons {
    grid-template-columns: 1fr;
  }

  .online-lobby-actions button {
    width: 100%;
  }

  .overview-toolbar-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-roulette-flag,
  .online-draft-progress span {
    transition-duration: 80ms;
  }

  .online-roulette.is-spinning .online-roulette-flag,
  .online-roulette.is-revealed .online-roulette-flag {
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .online-screen-back:hover {
    color: #dce5f2;
    background: rgba(126, 151, 194, 0.09);
  }

  .online-country-option:hover:not(:disabled) {
    border-color: #4769ad;
    background: #111a28;
  }

  .spectate-picker:hover {
    border-color: #466aa9;
    background: #111a27;
  }
}

/* Spectated team flow */
.spectate-modal {
  border: 0;
  border-radius: 8px;
  background: #111722;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.46);
}

.spectate-modal form {
  padding: 22px;
}

.spectate-modal .modal-head {
  align-items: center;
  margin-bottom: 18px;
}

.spectate-modal #spectateModalTitle {
  margin: 0;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
  text-align: left;
}

.spectate-modal .close-modal {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: #192230;
}

.spectate-modal .prediction-search {
  height: 46px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 6px;
  background: #0a111a;
  box-shadow: none;
}

.spectate-modal .prediction-search:focus-within {
  background: #0a111a;
  box-shadow: inset 0 0 0 2px #5f8cff;
}

.spectate-modal .spectate-list {
  gap: 4px;
  padding: 0 4px 0 0;
}

.spectate-modal .prediction-option {
  min-height: 54px;
  border: 0;
  border-radius: 6px;
  background: #171f2b;
  transition: background-color 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.spectate-modal .prediction-option.selected {
  background: #1a2942;
  box-shadow: inset 3px 0 #5f8cff;
}

@media (hover: hover) and (pointer: fine) {
  .spectate-modal .prediction-option:hover {
    background: #1b2533;
  }

  .spectate-modal .prediction-option.selected:hover {
    background: #1d2e4a;
  }
}

#spectateModal[data-club-competition] .prediction-option:focus-visible {
  outline: 2px solid #5f8cff;
  outline-offset: -2px;
}

@media (hover: none), (pointer: coarse) {
  #spectateModal[data-club-competition] .prediction-option:active {
    transform: none;
  }
}

.spectate-modal-copy {
  max-width: 520px;
  margin: 9px 0 0;
  color: #8994a6;
  font-size: 9px;
  line-height: 1.65;
}

/* Keep modal search visible on mobile */
.modal-search {
  display: flex !important;
}

.spectate-neutral-mark {
  display: grid;
  width: 38px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  color: #86a8ff;
  background: #202b3b;
  font-family: "DM Mono", monospace;
  font-size: 15px;
}

.stage-action.has-elimination-actions {
  padding: 0 24px 24px;
}

.stage-action > [hidden] {
  display: none;
}

.inline-elimination {
  width: min(100%, 560px);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #273142;
  text-align: center;
}

.inline-elimination h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(17px, 3vw, 21px);
  line-height: 1.15;
  letter-spacing: 0.08em;
}

.inline-elimination p {
  max-width: 430px;
  margin: 8px auto 0;
  color: #99a5b8;
  font-size: 10px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* The elimination decision belongs to the active World Cup's visual system. */
.retro-mode-active #mainContent .inline-elimination {
  border-top-color: rgba(246, 211, 42, 0.46);
}

.retro-mode-active #mainContent .inline-elimination h3 {
  color: #f9d632;
  text-shadow: 0 2px rgba(0, 54, 38, 0.62);
}

.retro-mode-active #mainContent .inline-elimination p {
  color: #dff0bf;
}

.retro-2010-active #mainContent .inline-elimination {
  border-top-color: rgba(255, 211, 79, 0.5);
}

.retro-2010-active #mainContent .inline-elimination h3 {
  color: var(--retro-2010-gold);
  text-shadow: 0 2px rgba(73, 30, 10, 0.55);
}

.retro-2010-active #mainContent .inline-elimination p {
  color: var(--retro-2010-muted);
}

.retro-2018-active #mainContent .inline-elimination {
  border-top-color: rgba(233, 196, 119, 0.58);
}

.retro-2018-active #mainContent .inline-elimination h3 {
  color: var(--retro-2018-gold);
  font-family: "Neucha", "Manrope", sans-serif;
  text-shadow: 0 2px rgba(61, 5, 18, 0.7);
}

.retro-2018-active #mainContent .inline-elimination p {
  color: #f3d9b4;
}

.retro-2022-active #mainContent .inline-elimination {
  border-top-color: var(--q22-line);
}

.retro-2022-active #mainContent .inline-elimination h3 {
  color: var(--q22-gold);
  text-shadow: none;
}

.retro-2022-active #mainContent .inline-elimination p {
  color: #c3aaa7;
}

.elimination-actions {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.elimination-actions button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  white-space: normal;
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    color 160ms ease,
    background-color 160ms ease;
}

.elimination-actions button:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .stage-action.has-elimination-actions {
    padding-inline: 14px;
  }

  .inline-elimination {
    padding-top: 17px;
  }

  .elimination-actions {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-footer-links a:hover {
    color: var(--text);
  }
}

@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 16px;
    padding-bottom: 28px;
  }

  .footer-last-updated {
    justify-self: start;
  }

  .site-footer-year {
    order: 3;
  }

  .site-footer-meta {
    display: grid;
    justify-self: start;
    gap: 12px;
  }

  .round-board .go-to-top {
    width: 100%;
    min-height: 46px;
  }
}

/* Unified header controls and a dismissible mobile rounds menu. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-new-tournament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.header-new-tournament > span:first-child {
  color: #78a0ff;
  font-size: 14px;
}

.header-restart-left {
  flex: 0 0 auto;
  color: #78a0ff;
}

.settings-option-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 8px;
  color: #86a8ff;
  background: #182234;
  font-size: 17px;
}

.menu-backdrop {
  display: none;
}

@media (min-width: 851px) {
  .sidebar .header-actions {
    position: absolute;
    left: clamp(24px, 3vw, 48px);
    right: clamp(24px, 3vw, 48px);
    margin: 0;
    pointer-events: none;
  }

  .sidebar .header-actions > * {
    pointer-events: auto;
  }

  .sidebar .header-actions #settingsButton {
    margin-right: 0;
  }

  .sidebar .header-actions #newsButton {
    margin-right: auto;
  }

  .sidebar .header-restart-left {
    position: absolute;
    left: clamp(24px, 3vw, 48px);
    width: 42px;
    min-width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
  }

  .sidebar .last-updated {
    right: calc(clamp(24px, 3vw, 48px) + 370px);
  }

  body:not(.before-start) .sidebar .header-actions {
    left: clamp(24px, 3vw, 48px);
  }

  body:not(.before-start) .sidebar .header-actions #settingsButton {
    margin-left: 54px;
  }
}

@media (max-width: 850px) {
  .before-start .sidebar .header-actions {
    position: absolute;
    inset: 0 12px;
    margin: 0;
    pointer-events: none;
  }

  .before-start .sidebar .header-actions > * {
    pointer-events: auto;
  }

  .before-start .sidebar .header-actions #settingsButton {
    margin-right: 0;
  }

  .before-start .sidebar .header-actions #newsButton {
    margin-right: auto;
  }
}

@media (min-width: 851px) and (max-width: 1180px) {
  .sidebar .last-updated {
    display: none;
  }
}

@media (max-width: 850px) {
  .sidebar,
  .sidebar.open {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    width: 100%;
    height: 64px;
    min-height: 64px;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    transform: none;
    box-shadow: none;
  }

  .sidebar .mobile-menu {
    display: grid;
    flex: 0 0 36px;
  }

  .sidebar .header-restart-left {
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    background: #182234;
    font-size: 20px;
  }

  .legacy-mode-active .sidebar .mobile-menu {
    display: none;
  }

  .legacy-mode-active .sidebar .legacy-header-back {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #8ba9ff;
    background: transparent;
    cursor: pointer;
    font-size: 24px;
  }

  .sidebar .brand {
    position: absolute;
    left: 50%;
    padding: 0;
    transform: translateX(-50%);
  }

  .sidebar .brand-copy,
  .sidebar .tournament-status,
  .sidebar .last-updated {
    display: none;
  }

  .sidebar .header-actions {
    display: flex;
    min-width: 0;
    margin-left: auto;
    gap: 4px;
  }

  body:not(.before-start) .sidebar .header-actions #settingsButton {
    position: absolute;
    top: 14px;
    left: 100px;
    z-index: 2;
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    background: #182234;
  }

  body:not(.before-start) .sidebar .header-actions #newsButton {
    position: absolute;
    top: 14px;
    left: 142px;
    z-index: 2;
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border-radius: 9px;
    background: #182234;
  }

  .sidebar .header-actions .utility-button,
  .sidebar .header-actions .icon-button,
  .sidebar .header-actions .header-donate-link,
  .sidebar .header-actions .header-new-tournament {
    position: relative;
    width: 34px;
    min-width: 34px;
    height: 36px;
    padding: 0;
    border-radius: 9px;
  }

  .sidebar .header-actions .utility-button > span:last-child,
  .sidebar .header-actions .header-donate-link > span:last-child,
  .sidebar .header-actions .header-new-tournament > span:last-child {
    display: none;
  }

  .sidebar .round-nav {
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 42;
    display: none;
    width: min(86vw, 320px);
    max-height: calc(100dvh - 64px);
    margin: 0;
    padding: 14px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 14px 0;
    background: #0e131c;
    box-shadow: 18px 22px 50px rgba(0, 0, 0, 0.34);
  }

  .sidebar.open .round-nav {
    display: grid;
  }

  .menu-backdrop:not([hidden]) {
    position: fixed;
    inset: 64px 0 0;
    z-index: 39;
    display: block;
    width: 100%;
    height: calc(100dvh - 64px);
    padding: 0;
    border: 0;
    background: rgba(4, 8, 14, 0.58);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  .topbar {
    position: relative;
    top: auto;
    z-index: 8;
    min-height: 92px;
    padding: 22px 15px 14px;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .legacy-mode-active .topbar {
    display: none;
  }

  body:not(.before-start) .topbar {
    display: none;
  }

  body:not(.before-start) .content {
    padding-top: 6px;
  }
}

@media (max-width: 430px) {
  .sidebar {
    padding-inline: 9px;
  }

  .sidebar .header-actions {
    gap: 2px;
  }
}

/* Mobile: side-by-side tactics and stats in a shared two-column grid */
@media (max-width: 700px) {
  body:not(.before-start) .insight-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body:not(.before-start) .insight-right > * {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  body:not(.before-start) .insight-right .match-analysis {
    margin: 0;
    order: 2;
  }

  body:not(.before-start) .insight-right .standard-match-tactics {
    order: 1;
  }
}

@media (max-width: 850px) {
  body:not(.before-start) .content {
    grid-template-areas:
      "stage"
      "next"
      "boot"
      "board";
  }
}

@media (max-width: 700px) {
  body:not(.before-start) .insight-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body:not(.before-start) .insight-right .standard-match-tactics {
    order: 1;
    grid-column: 1;
  }

  body:not(.before-start) .insight-right .match-analysis {
    order: 2;
    grid-column: 2;
  }

  body:not(.before-start) .insight-right.tactics-hidden .match-analysis {
    grid-column: 1 / -1;
  }

  body:not(.before-start) .insight-right .match-analysis,
  body:not(.before-start) .insight-right .standard-match-tactics {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  body:not(.before-start) .insight-right .match-stats-grid {
    min-width: 0;
    padding-inline: 7px;
  }

  body:not(.before-start) .insight-right .match-stat-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    font-size: 8px;
  }

  body:not(.before-start) .insight-right .match-stat-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body:not(.before-start) .insight-right .match-stat-row b {
    font-size: 9px;
  }
}

/* Live-match layout: round title outside card, commentary at top, score order in matchup */
.stage-column > .stage-topline {
  display: flex;
  justify-content: center;
  padding: 0 20px 14px;
  border-bottom: 0;
  color: #8a94a6;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-align: center;
}

/* Commentary inside card, compact width */
.match-stage .match-commentary-view {
  width: calc(100% - 48px);
  max-width: 600px;
  margin: 22px auto 18px;
}

/* Score zone inside matchup: timer above score above controls */
.matchup .score-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: auto;
  padding: 0;
}

/* Timer above score */
.matchup .event-live-clock:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Controls row under score */
.matchup .live-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: static;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .matchup .score-live-controls {
    display: grid !important;
    grid-template-columns: auto auto;
    width: max-content;
  }

  .matchup .score-live-controls > .pause-control {
    grid-column: 1;
    grid-row: 1;
  }

  .matchup .score-live-controls > #speedButton {
    grid-column: 2;
    grid-row: 1;
  }

  .matchup .score-live-controls > .skip-live-control {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Keep live controls out of the scorer lane on phones. Long scorer names sit
     below each club, so the controls need their own full-width row rather than
     sharing the narrow centre column. */
  body:not(.before-start) .match-stage.is-live:not(.is-shootout) .matchup {
    position: relative;
    min-height: 226px;
    padding-bottom: 82px;
  }

  body:not(.before-start) .match-stage.is-live:not(.is-shootout) .score-zone {
    position: static;
  }

  body:not(.before-start) .match-stage.is-live:not(.is-shootout) .score-live-controls:not([hidden]) {
    position: absolute !important;
    top: auto !important;
    right: 12px !important;
    bottom: 16px !important;
    left: 12px !important;
    display: flex !important;
    width: auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Left column tactics */
.insight-column .standard-match-tactics {
  width: 100%;
  margin: 0 0 18px;
}

.insight-column .standard-match-tactics .standard-tactic-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-column .standard-match-tactics .standard-tactic-buttons button {
  width: 100%;
  min-height: 36px;
  text-align: center;
}

@media (max-width: 640px) {
  .insight-column .standard-match-tactics .standard-tactic-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.insight-column .standard-match-tactics .standard-tactic-buttons button {
  flex: 1 1 auto;
  min-width: 0;
}

/* Stable layout: preserve space when live elements are hidden */
.match-stage .event-live-clock[hidden] {
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  min-height: 48px;
}

.match-stage .live-controls[hidden] {
  display: flex;
  justify-content: center;
  visibility: hidden;
  min-height: 34px;
}

.match-stage .result-note:not([hidden]) {
  min-height: 20px;
}

/* Online live match: mirror the default commentary-first presentation. */
.online-current-match {
  grid-template-columns: 210px minmax(0, 1fr) 124px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 20px;
  row-gap: 12px;
  min-height: 0;
  padding: 24px 36px 28px;
  border-radius: 8px;
}

.online-match-presentation {
  display: contents;
}

.online-commentary-feed {
  grid-column: 2 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 0 14px;
}

.online-commentary-feed .commentary-line span {
  font-size: 12px;
}

.online-match-livebar {
  grid-column: 2 / -1;
  grid-row: 1;
  min-height: 28px;
  padding-left: 0;
  grid-template-columns: 1fr;
  justify-items: center;
}

.online-card-round {
  grid-column: 1;
  justify-self: center;
  text-align: center;
}

.online-card-match-number {
  display: none !important;
}

.online-match-home-side,
.online-match-away-side {
  grid-row: 3;
  align-self: start;
  padding-top: 18px;
}

.online-match-home-side { grid-column: 2; }
.online-match-away-side { grid-column: 4; }

.online-match-centre {
  grid-column: 3;
  grid-row: 3;
  display: grid;
  min-width: 0;
  align-self: start;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding-top: 46px;
}

.online-match-centre > .online-match-clock,
.online-match-centre > .online-match-score,
.online-match-centre > .online-match-penalty-score {
  grid-column: 1;
  grid-row: auto;
  align-self: auto;
  transform: none;
}

.online-match-score {
  line-height: 1;
  transform: none;
}

.online-match-penalty-score {
  margin: 0;
  transform: none;
}

.online-live-controls {
  display: flex;
  grid-column: 3;
  grid-row: 4;
  width: 164px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  transform: none;
}

.online-live-controls .live-control {
  min-width: 54px;
  min-height: 32px;
  border-radius: 8px;
  color: #e4e9f1;
  background: #182234;
  font-size: 10px;
  transition: transform 140ms var(--ease-out), color 160ms ease, background-color 160ms ease;
}

.online-live-controls .live-control[aria-pressed="true"] {
  color: #fff;
  background: #31558f;
}

.online-pause-countdown {
  order: -1;
  flex: 0 0 100%;
  min-height: 18px;
  color: #f3b2ad;
  font: 800 8px/18px "DM Mono", monospace;
  letter-spacing: 0;
  text-align: center;
}

.online-match-stats {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  min-height: 142px;
  align-self: start;
  box-sizing: border-box;
}

.online-match-stats-grid {
  padding-inline: 6px;
}

.online-match-stat-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 3px;
}

.online-current-match > .online-tactics {
  grid-column: 1;
  grid-row: 4;
  align-self: stretch;
  align-content: start;
  gap: 12px;
  padding: 10px 0 0;
  border-right: 0;
}

.online-current-match > .online-tactics[hidden] {
  display: none !important;
}

.online-current-match > .online-tactics .online-tactics-copy > span,
.online-current-match > .online-tactics .online-tactics-copy > strong {
  display: none;
}

.online-current-match > .online-tactics .online-tactics-copy > p {
  display: block;
  margin: 0;
  color: #8b99af;
  font: 700 9px/1.3 "DM Mono", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}

.online-tactic-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 5px;
  border: 1px solid #26344a;
  border-radius: 8px;
  background: #0a111b;
}

.online-tactic-buttons button {
  min-height: 36px;
  padding: 7px 5px;
  border-radius: 5px;
  color: #8f9bb0;
  background: transparent;
  font: 700 9px/1.2 Inter, sans-serif;
  letter-spacing: 0;
  text-align: center;
  transition: transform 140ms var(--ease-out), color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.online-tactic-buttons button:hover:not(:disabled) {
  color: #f3f6fb;
  background: #172235;
}

.online-tactic-buttons button.is-active {
  color: #fff;
  background: #426fc8;
  box-shadow: 0 5px 16px rgba(66, 111, 200, 0.24);
}

@media (max-width: 900px) {
  .online-current-match {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(230px, 1fr) auto auto;
    padding: 18px 20px 22px;
  }

  .online-commentary-feed {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .online-match-livebar {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-left: 0;
  }

  .online-match-home-side,
  .online-match-away-side,
  .online-match-centre {
    grid-row: 3;
  }

  .online-match-home-side,
  .online-match-away-side {
    padding-top: 0;
  }

  .online-match-home-side { grid-column: 1 / 3; }
  .online-match-centre {
    grid-column: 3 / 5;
    align-self: center;
    padding-top: 0;
  }
  .online-match-away-side { grid-column: 5 / 7; }

  .online-live-controls {
    grid-column: 3 / 5;
    grid-row: 4;
  }

  .online-match-stats {
    grid-column: 4 / 7;
    grid-row: 5;
    min-width: 0;
    align-self: stretch;
    width: auto;
    max-width: 100%;
    position: relative;
    z-index: 1;
  }

  .online-match-stats-grid {
    padding-inline: 5px;
  }

  .online-match-stat-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 2px;
  }

  .online-current-match > .online-tactics {
    grid-column: 1 / 4;
    grid-row: 5;
    min-width: 0;
    align-content: start;
    padding: 0;
    border: 1px solid #26344a;
    border-radius: 8px;
    background: #0a111b;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    position: relative;
    z-index: 1;
  }

  .online-current-match > .online-tactics .online-tactics-copy {
    display: block;
    padding: 10px 5px;
    border-bottom: 1px solid #26344a;
    text-align: center;
  }

  .online-current-match > .online-tactics .online-tactics-copy strong,
  .online-current-match > .online-tactics .online-tactics-copy > span {
    display: none;
  }

  .online-current-match > .online-tactics .online-tactics-copy > p {
    display: block;
    margin: 0;
    font-size: 9px;
  }

  .online-tactic-buttons {
    grid-template-columns: 1fr;
    padding: 5px;
    border: 0;
    border-radius: 0;
  }

  .online-current-match.tactics-hidden .online-match-stats {
    grid-column: 1 / 7;
    grid-row: 5;
  }
}

@media (max-width: 640px) {
  .online-current-match {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(190px, 1fr) auto auto;
    min-height: 0;
    padding: 14px 10px 18px;
    column-gap: 8px;
  }

  .online-commentary-feed {
    min-height: 48px;
    max-height: 48px;
    padding-inline: 10px;
  }

  .online-commentary-feed .commentary-line span {
    font-size: 10px;
  }

  .online-match-home-side { grid-column: 1 / 3; }
  .online-match-centre { grid-column: 3 / 5; }
  .online-match-away-side { grid-column: 5 / 7; }

  .online-live-controls {
    grid-column: 3 / 5;
    width: 148px;
    justify-self: center;
  }

  .online-current-match > .online-tactics {
    grid-column: 1 / 4;
    grid-row: 5;
    min-width: 0;
    padding: 0;
    border: 1px solid #26344a;
    border-radius: 8px;
    background: #0a111b;
    overflow: hidden;
  }

  .online-current-match > .online-tactics .online-tactics-copy {
    display: block;
    padding: 10px 5px;
    border-bottom: 1px solid #26344a;
    text-align: center;
  }

  .online-current-match > .online-tactics .online-tactics-copy strong,
  .online-current-match > .online-tactics .online-tactics-copy > span {
    display: none;
  }

  .online-current-match > .online-tactics .online-tactics-copy > p {
    display: block;
    margin: 0;
    font-size: 9px;
  }

  .online-tactic-buttons {
    grid-template-columns: 1fr;
    padding: 5px;
    border: 0;
    border-radius: 0;
  }

  .online-match-stats {
    grid-column: 4 / 7;
    grid-row: 5;
    min-height: 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  .online-current-match.tactics-hidden .online-match-stats {
    grid-column: 1 / 7;
    grid-row: 5;
  }

  .online-match-stats-grid {
    padding-inline: 5px;
  }

  .online-match-stat-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 2px;
    font-size: 8px;
  }

  .online-match-team .country-flag {
    width: 64px;
    height: 42px;
  }

  .online-match-team strong {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .online-team-scorers .timeline-event {
    gap: 4px;
    padding-inline: 2px;
    font-size: 10px;
    line-height: 1.25;
  }

  .online-team-scorers .timeline-event b {
    font-size: 9px;
  }
}

/* Final online result and responsive layout overrides. */
.online-match-score {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Manrope, system-ui, sans-serif;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .online-match-sidebar > .online-tactics {
    grid-column: 1;
  }

  .online-match-sidebar > .online-match-stats {
    grid-column: 2;
  }

  .online-current-match.tactics-hidden .online-match-sidebar > .online-match-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .online-round-matches.is-all-matches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .online-round-matches.is-all-matches .online-centre-match {
    gap: 7px;
    padding: 11px 9px;
  }

  .online-round-matches.is-all-matches .online-centre-head {
    align-items: flex-start;
    gap: 5px;
    font-size: 9px;
  }

  .online-round-matches.is-all-matches .online-centre-head small {
    max-width: 58px;
    font-size: 7px;
    text-align: right;
    white-space: normal;
  }

  .online-round-matches.is-all-matches .online-centre-team {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .online-round-matches.is-all-matches .online-centre-flag.country-flag {
    width: 34px;
    height: 23px;
  }

  .online-round-matches.is-all-matches .online-centre-team strong {
    font-size: 10px;
  }

  .online-round-matches.is-all-matches .online-centre-team b {
    max-width: 30px;
    font-size: 12px;
  }
}

/* Final online shootout placement overrides the legacy full-width row. */
.online-current-match > .online-penalty-control,
.online-current-match > .online-ready-panel {
  grid-column: 2 / -1;
  grid-row: 4;
  align-self: start;
  justify-self: center;
  margin: 0;
}

.online-penalty-control {
  max-width: 520px;
}

.online-penalty-scene {
  height: 178px;
}

.online-penalty-scene .penalty-goal {
  top: 19px;
  width: 224px;
  height: 96px;
}

.online-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
  transform: translate(-68px, -105px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
  transform: translate(68px, -105px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
  transform: translate(0, -85px) scale(0.7);
}

.online-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
  transform: translate(-74px, -55px) scale(0.7);
}

.online-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
  transform: translate(74px, -55px) scale(0.7);
}

@media (max-width: 900px) {
  .online-current-match > .online-penalty-control,
  .online-current-match > .online-ready-panel {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

@media (max-width: 640px) {
  .online-penalty-control {
    width: min(100%, 430px);
    padding-top: 4px;
    border-top: 0;
  }

  .online-penalty-scene {
    height: 150px;
  }

  .online-penalty-scene .penalty-goal {
    width: min(190px, 78vw);
    height: 82px;
  }
}

/* Final responsive corrections: tablets keep desktop column order without sticky side panels. */
@media (min-width: 701px) and (max-width: 1180px) {
  body:not(.before-start) .content {
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) minmax(190px, 240px);
    grid-template-areas:
      "next stage boot"
      "board board board";
    gap: 18px;
  }

  body:not(.before-start) .insight-right {
    align-self: start;
    position: static;
    width: 100%;
    max-width: 100%;
  }

  body:not(.before-start) .insight-left {
    align-self: start;
    position: static;
  }

  body:not(.before-start) .insight-right .match-analysis,
  body:not(.before-start) .insight-right .standard-match-tactics,
  body:not(.before-start) .insight-right .plot-panel {
    min-width: 0;
    margin: 0;
  }

  body:not(.before-start) .insight-right .plot-panel {
    margin-top: 18px;
  }

  .fixture-grid:not(.bracket-mode) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Keep names and scorer lines readable when the tablet layout narrows the match card. */
@media (min-width: 701px) and (max-width: 1280px) {
  body:not(.before-start) .matchup {
    grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
    gap: 8px;
    padding: 18px 14px 20px;
  }

  body:not(.before-start) .team {
    min-width: 0;
    padding-inline: 4px;
    overflow: hidden;
  }

  body:not(.before-start) .team h2.team-name,
  body:not(.before-start) .team h2.team-name.is-long {
    width: 100%;
    max-width: 100%;
    font-size: clamp(15px, 1.7vw, 20px);
    line-height: 1.15;
    letter-spacing: 0;
  }

  body:not(.before-start) .team-match-events {
    width: 100%;
    margin-top: 14px;
  }

  body:not(.before-start) .team-match-events .timeline-event,
  body:not(.before-start) .team-match-events .event {
    gap: 4px;
    font-size: 8px;
  }
}

@media (max-width: 640px) {
  body:not(.before-start) .content {
    width: 100%;
    max-width: 100%;
    padding-inline: 14px;
    overflow: hidden;
  }

  .match-stage,
  .matchup,
  .team,
  .team-match-events,
  .shootout-summary {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .matchup {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 88px) minmax(0, 1fr);
    width: 100%;
    column-gap: 6px;
    overflow: hidden;
  }

  .team {
    overflow: hidden;
  }

  .team-name {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .team-match-events {
    width: 100%;
    margin-inline: 0;
  }

  .team-match-events .timeline-event,
  .team-match-events .event {
    max-width: 100%;
  }

  .shootout-summary {
    width: 100%;
    padding-inline: 0;
  }

  .shootout-summary-row {
    gap: 7px;
  }

  .team-match-events.away .shootout-summary,
  .team-match-events.away .timeline-event,
  .team-match-events.away .event {
    margin-left: 0;
    justify-self: stretch;
  }
}

/* Keep the live clock, score, and controls slightly higher at every screen size. */
.online-match-centre {
  position: relative;
  top: -14px;
}

/* Keep the online score centred between equal team columns without squeezing the card. */
@media (min-width: 901px) {
  .online-current-match {
    grid-template-columns: 210px minmax(0, 1fr) 124px minmax(0, 1fr);
  }

  .online-match-sidebar {
    position: relative;
    top: -52px;
  }

  .online-match-home-side {
    grid-column: 2;
  }

  .online-match-centre {
    grid-column: 3;
    left: -10px;
  }

  .online-match-away-side {
    grid-column: 4;
  }

  .online-commentary-feed {
    grid-column: 2 / -1;
  }

  .online-current-match > .online-ready-panel,
  .online-current-match > .online-penalty-control {
    grid-column: 2 / -1;
  }
}

/* Keep the four-column match presentation balanced on narrower desktop and iPad widths. */
@media (min-width: 901px) and (max-width: 1700px) {
  .online-current-match {
    grid-template-columns: minmax(160px, 190px) minmax(0, 1fr) 96px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 22px 24px;
  }

  .online-match-team .country-flag {
    width: 82px;
    height: 54px;
    border-radius: 7px;
  }

  .online-match-team strong {
    max-width: 100%;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .online-match-score {
    font-size: 48px;
  }

  .online-match-clock strong {
    font-size: 22px;
  }

  .online-match-centre {
    left: 0;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .online-matches {
    grid-template-columns: 1fr;
  }

  .online-match-head,
  .online-active-team,
  .online-current-match,
  .online-my-matches,
  .online-fixture-heading,
  .online-round-matches,
  .online-match-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .online-my-matches {
    max-height: 480px;
  }
}

@media (max-width: 900px) {
  .online-match-sidebar {
    grid-column: 1 / -1;
    grid-row: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: start;
  }

  .online-match-sidebar > .online-tactics,
  .online-match-sidebar > .online-match-stats {
    grid-row: 1;
    align-self: start;
    margin: 0;
  }

  .online-match-sidebar > .online-tactics {
    grid-column: 1;
  }

  .online-match-sidebar > .online-match-stats {
    grid-column: 2;
  }

  .online-current-match.tactics-hidden .online-match-sidebar > .online-match-stats {
    grid-column: 1 / -1;
  }
}

/* The controls are children of the centre grid; keep them in its only column. */
.online-match-centre > .online-live-controls {
  grid-column: 1;
  grid-row: auto;
}

@media (min-width: 901px) {
  .online-match-centre {
    left: -18px;
  }
}

.online-match-team strong.is-long-name {
  font-size: 20px;
  line-height: 1.15;
}

.online-match-team strong.is-very-long-name {
  font-size: 16px;
  line-height: 1.18;
}

@media (max-width: 900px) {
  .online-match-team strong.is-long-name {
    font-size: 13px;
  }

  .online-match-team strong.is-very-long-name {
    font-size: 11px;
  }
}

/* Keep top-corner attempts high but within the keeper's reachable range. */
.online-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
  transform: translate(-68px, -105px) scale(0.68);
}

.online-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
.online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
  transform: translate(68px, -105px) scale(0.68);
}

@media (max-width: 640px) {
  .online-penalty-scene[data-state="flight"][data-target="top-left"] .penalty-ball,
  .online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-left"] .penalty-ball {
    transform: translate(-58px, -82px) scale(0.68);
  }

  .online-penalty-scene[data-state="flight"][data-target="top-right"] .penalty-ball,
  .online-penalty-scene[data-state="result"][data-result="goal"][data-target="top-right"] .penalty-ball {
    transform: translate(58px, -82px) scale(0.68);
  }

  .online-penalty-scene[data-state="flight"][data-target="middle"] .penalty-ball,
  .online-penalty-scene[data-state="result"][data-result="goal"][data-target="middle"] .penalty-ball {
    transform: translate(0, -65px) scale(0.7);
  }

  .online-penalty-scene[data-state="flight"][data-target="bottom-left"] .penalty-ball,
  .online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-left"] .penalty-ball {
    transform: translate(-63px, -39px) scale(0.7);
  }

  .online-penalty-scene[data-state="flight"][data-target="bottom-right"] .penalty-ball,
  .online-penalty-scene[data-state="result"][data-result="goal"][data-target="bottom-right"] .penalty-ball {
    transform: translate(63px, -39px) scale(0.7);
  }
}

.online-spectator-picker {
  display: grid;
  gap: 4px;
}

.online-spectator-picker[hidden] {
  display: none;
}

.online-spectator-picker span {
  color: #7f8da4;
  font: 700 7px "DM Mono", monospace;
  text-transform: uppercase;
}

.online-spectator-picker select {
  min-width: 150px;
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid #2b3950;
  border-radius: 7px;
  color: #edf2fa;
  background: #111b29;
  font: 700 11px Manrope, sans-serif;
}

@media (max-width: 640px) {
  .online-spectator-picker select {
    min-width: 124px;
    max-width: 42vw;
  }
}
/* Palestine Challenge */
body.challenge-mode-active #appShell { display: none !important; }
body.profile-mode-active #appShell,
body.profile-mode-active #retroWorldCupScreen { display: none !important; }
.challenge-screen[hidden] { display: none !important; }
.profile-screen[hidden] { display: none !important; }

.palestine-flag-inline {
  display: inline-block;
  width: 28px;
  aspect-ratio: 2 / 1;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -.08em;
}

.challenge-title-flag { width: clamp(42px, 5vw, 68px); margin-right: 8px; }

.mode-card-challenge {
  order: 8;
  grid-column: span 3;
  background: #121a27;
}

.challenge-setting-lock { margin-left: 3px; font-size: 9px; }
.challenge-locked-control button:disabled { cursor: not-allowed; opacity: 0.42; }
.challenge-locked-control button.active:disabled { opacity: 1; }
.challenge-locked-team:disabled { cursor: not-allowed; opacity: 1; }
.challenge-locked-team:disabled:active { transform: none; }

.challenge-screen {
  min-height: 100vh;
  background: #080f18;
  color: #f4f7fc;
}

.challenge-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 92px;
  padding: 14px clamp(22px, 4vw, 68px);
  border-bottom: 1px solid #1d2b3d;
  background: rgba(8, 15, 24, 0.96);
}

.challenge-brand { grid-column: 2; }
.challenge-header .legacy-topbar-back { width: auto; min-width: 150px; justify-self: start; }
.challenge-account-button { grid-column: 3; justify-self: end; }
.challenge-main { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 90px; }

.challenge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  padding-bottom: 38px;
  border-bottom: 1px solid #233249;
}

.challenge-hero h1 { margin: 8px 0 12px; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; }
.challenge-hero p { max-width: 700px; margin: 0; color: #9eacc0; font-size: 18px; line-height: 1.55; }
.challenge-countdown > span { display: block; margin-bottom: 10px; color: #9eacc0; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.challenge-countdown > div { display: grid; grid-template-columns: repeat(4, auto); column-gap: 18px; align-items: baseline; }
.challenge-countdown strong { color: #fff; font: 700 30px/1 var(--mono); }
.challenge-countdown small { color: #6f819a; font-size: 10px; text-transform: uppercase; }

.challenge-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.challenge-prize { padding: 22px; border: 1px solid #25354b; border-radius: 8px; background: #101925; }
.challenge-prize span { display: block; color: #f2bf49; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.challenge-prize strong { display: block; margin-top: 8px; font-size: 16px; }

.challenge-dashboard-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #1d2b3d;
  border-bottom: 1px solid #1d2b3d;
}

.challenge-player-summary { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 12px; }
.challenge-player-summary div { padding: 16px 18px; background: #111b28; border-radius: 6px; }
.challenge-player-summary span, .challenge-locked-settings > span { display: block; color: #7f90a8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.challenge-player-summary strong { display: block; margin-top: 6px; font: 700 24px/1 var(--mono); }
.challenge-locked-settings { display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.challenge-locked-settings > strong { padding: 10px 12px; border: 1px solid #2a3a50; border-radius: 6px; font-size: 13px; }

.challenge-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr) auto; gap: 28px; align-items: center; min-height: 220px; padding: 34px 0; border-bottom: 1px solid #1d2b3d; }
.challenge-run h2, .challenge-scoring h2, .challenge-section-heading h2 { margin: 6px 0 8px; font-size: 28px; }
.challenge-run p { margin: 0; color: #94a4bb; }
.challenge-start-button { min-width: 210px; }
.challenge-match-result { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 20px; border: 1px solid #2b3d56; border-radius: 8px; background: #0c1520; }
.challenge-match-result .challenge-team { min-width: 0; text-align: center; }
.challenge-match-result .challenge-team img { display: block; width: 42px; margin: 0 auto 8px; }
.challenge-match-result .challenge-team strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.challenge-match-result .challenge-score { white-space: nowrap; font: 700 28px/1 var(--mono); }
.challenge-match-result small { display: block; margin-top: 6px; color: #7d8da4; }
.challenge-message { grid-column: 1 / -1; min-height: 20px; color: #ef6f72; font-size: 13px; }

.challenge-scoring { display: grid; grid-template-columns: .7fr 1.3fr; gap: 44px; padding: 44px 0; }
.challenge-scoring-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #243247; }
.challenge-scoring-grid div { padding: 22px; background: #0b141f; }
.challenge-scoring-grid strong, .challenge-scoring-grid span { display: block; }
.challenge-scoring-grid span { margin-top: 8px; color: #8fa0b7; line-height: 1.45; }

.challenge-data-section { padding-top: 24px; }
.challenge-tabs { display: grid; grid-template-columns: repeat(2, 1fr); padding: 5px; border: 1px solid #26374e; border-radius: 8px; }
.challenge-tabs button { min-height: 48px; border: 0; border-radius: 5px; background: transparent; color: #8596ae; font-weight: 800; }
.challenge-tabs button[aria-selected="true"] { background: #1a2d48; color: #fff; }
.challenge-section-heading { display: flex; justify-content: space-between; align-items: end; margin: 34px 0 18px; }
.challenge-section-heading h2 { margin-bottom: 0; }

.challenge-leaderboard { border: 1px solid #26374e; border-radius: 8px; overflow: hidden; }
.challenge-leaderboard-row { display: grid; grid-template-columns: 54px minmax(140px, 1.5fr) repeat(7, minmax(82px, .7fr)); align-items: center; min-height: 64px; padding: 0 18px; border-bottom: 1px solid #1d2b3d; }
.challenge-leaderboard-row:last-child { border-bottom: 0; }
.challenge-leaderboard-row.is-head { min-height: 48px; color: #74869f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.challenge-leaderboard-row.is-own { background: #14243a; box-shadow: inset 3px 0 #5d8dff; }
.challenge-leaderboard-row strong { color: #fff; }
.challenge-leaderboard-empty, .challenge-history-empty { padding: 38px; color: #8293aa; text-align: center; }
.challenge-own-rank { margin-top: 12px; padding: 16px 18px; border-left: 3px solid #5d8dff; background: #111c2a; }

.challenge-history { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.challenge-history-item { display: grid; gap: 12px; min-height: 170px; padding: 20px; border: 1px solid #25364d; border-radius: 8px; background: #101925; }
.challenge-history-item header { display: flex; justify-content: space-between; gap: 12px; }
.challenge-history-item header span { color: #5ed99d; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.challenge-history-item dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.challenge-history-item dt { color: #71839c; font-size: 10px; text-transform: uppercase; }
.challenge-history-item dd { margin: 3px 0 0; font-weight: 700; }

.challenge-auth-modal form { display: grid; gap: 16px; }
.challenge-auth-modal label span { display: block; margin-bottom: 7px; color: #8fa0b7; font-size: 12px; font-weight: 700; }
.challenge-auth-modal input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #2a3b53; border-radius: 6px; background: #0a131e; color: #fff; font: inherit; }
.challenge-auth-switch { justify-self: center; }
.challenge-auth-divider { display: flex; align-items: center; gap: 10px; color: #708198; font-size: 11px; text-transform: uppercase; }
.challenge-auth-divider::before, .challenge-auth-divider::after { content: ""; height: 1px; flex: 1; background: #26364d; }

.username-review-modal {
  width: min(470px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid #293a50;
  border-radius: 6px;
  color: #f4f7fc;
  background: #0d1723;
}

.username-review-modal::backdrop {
  background: rgba(2, 7, 12, .78);
}

.username-review-modal form {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.username-review-modal .modal-head {
  margin: 0;
}

.username-review-modal h2 {
  margin: 4px 0 0;
  font-size: 27px;
}

.username-review-modal p {
  margin: 0;
  color: #9aa9bd;
  line-height: 1.5;
}

.username-review-modal label > span {
  display: block;
  margin-bottom: 7px;
  color: #aebacd;
  font-size: 12px;
  font-weight: 800;
}

.username-review-modal input {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid #2b3c53;
  border-radius: 4px;
  color: #f5f8fd;
  background: #08111b;
  font: inherit;
}

.username-review-message {
  min-height: 20px;
  color: #e58c97 !important;
}

.username-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.username-review-actions .primary-button {
  min-height: 48px;
}

@media (max-width: 480px) {
  .username-review-modal form {
    padding: 22px;
  }

  .username-review-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .username-review-actions button {
    width: 100%;
  }
}
.challenge-provider-button,
.challenge-google-button { display: flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; transition: transform 140ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, background-color 160ms ease; }
.challenge-provider-button:active,
.challenge-google-button:active { transform: scale(.97); }
.challenge-discord-button { border-color: #6975e8; color: #fff; background: #5865f2; }
.challenge-discord-button .discord-provider-icon { display: grid; width: 24px; height: 24px; place-items: center; }
.challenge-discord-button .discord-provider-icon svg { display: block; width: 24px; height: 24px; }
.challenge-google-button .google-icon { display: grid; width: 22px; height: 22px; place-items: center; }
.challenge-google-button .google-icon svg { display: block; width: 22px; height: 22px; }
.challenge-provider-button:disabled,
.challenge-google-button:disabled { cursor: not-allowed; opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .challenge-discord-button:hover { border-color: #8490ff; background: #6875f5; }
}

.account-avatar-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.account-avatar-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Account profile */
.profile-screen {
  min-height: 100vh;
  background: #09111b;
  color: #f4f7fc;
}

.profile-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 92px;
  padding: 14px clamp(22px, 4vw, 68px);
  border-bottom: 1px solid #1d2b3d;
  background: rgba(8, 15, 24, 0.96);
}

.profile-brand {
  grid-column: 2;
}

.profile-header-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
}

.profile-header-actions .utility-button {
  min-width: 38px;
  border-radius: 5px;
}

.profile-header-actions .utility-button:hover,
.profile-header-actions .profile-current-button {
  color: #eef3fb;
  background: #151c26;
}

.profile-header-actions .account-avatar-icon {
  width: 17px;
  height: 17px;
}

.profile-header .legacy-topbar-back {
  width: auto;
  min-width: 150px;
  justify-self: start;
}

.profile-main {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: 52px 0 90px;
}

.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.profile-hero h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
}

.profile-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-community-inbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.profile-community-inbox[hidden] {
  display: none;
}

.profile-edit-toggle {
  min-width: 132px;
  border-radius: 4px;
}

.profile-signout-button {
  min-width: 112px;
  border-radius: 4px;
}

.profile-account-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 190px));
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid #263448;
  border-bottom: 1px solid #263448;
  background: transparent;
}

.profile-preview {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-preview span,
.profile-field > span {
  display: block;
  color: #8fa0b7;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-preview strong {
  display: block;
  color: #f2f6fb;
  font-size: 25px;
}

.profile-avatar-preview {
  display: grid;
  width: 104px;
  height: 68px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #111d2c;
}

.profile-avatar-flag.country-flag {
  width: 104px;
  height: 68px;
  border-radius: 4px;
}

.profile-avatar-flag.country-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-empty {
  color: #708198;
  font-size: 26px;
  font-weight: 800;
}

.profile-overview-stat {
  min-height: 68px;
  padding-left: 20px;
  border-left: 1px solid #2a3b51;
}

.profile-overview-stat strong {
  display: block;
  color: #f5f8fd;
  font: 800 28px/1 Manrope, sans-serif;
}

.profile-overview-stat span {
  display: block;
  margin-top: 8px;
  color: #93a3b8;
  font-size: 12px;
  font-weight: 700;
}

.profile-edit-panel,
.profile-achievements-section,
.profile-history-section {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile-edit-panel {
  margin-top: 28px;
  padding: 28px 0 6px;
  border-top: 1px solid #263448;
}

.profile-edit-panel[hidden] {
  display: none !important;
}

.profile-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-section-heading span {
  color: #6f9dff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.profile-section-heading h2 {
  margin: 4px 0 0;
  font-size: 23px;
}

.profile-section-heading > strong {
  color: #8eb0ff;
  font: 800 17px/1 Manrope, sans-serif;
}

.profile-form {
  display: grid;
  gap: 18px;
}

.profile-field input {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid #2a3b53;
  border-radius: 3px;
  background: #08111b;
  color: #fff;
  font: inherit;
}

.profile-country-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid #2a3b53;
  border-radius: 3px;
  background: #08111b;
}

.profile-country-search > span {
  color: #88a0c0;
}

.profile-country-search input {
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  max-height: 360px;
  gap: 8px;
  margin-top: 10px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #344765 #0c141f;
}

.profile-country-grid button {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  min-height: 54px;
  padding: 9px 10px;
  border: 0;
  border-radius: 2px;
  color: #d8e0ec;
  background: #101925;
  cursor: pointer;
  font: 800 12px Manrope, sans-serif;
}

.profile-country-grid button[aria-selected="true"] {
  background: #172845;
  box-shadow: inset 3px 0 #5d8dff;
}

.profile-country-flag.country-flag {
  width: 40px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 4px;
}

.profile-country-grid button span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-message {
  min-height: 20px;
  margin: 0;
}

.profile-message.is-success {
  color: #5ed99d;
}

.profile-actions {
  display: flex;
  gap: 10px;
}

.profile-actions button {
  min-width: 150px;
}

.profile-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(250px, .7fr);
  gap: 48px;
  margin-top: 42px;
}

.profile-achievements-section,
.profile-history-section {
  padding: 0;
}

.profile-achievement-years {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #263448;
  border-bottom: 1px solid #263448;
}

.profile-achievement-years article {
  padding: 18px 20px 20px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile-achievement-years article + article {
  padding-left: 20px;
  border-left: 1px solid #263448;
}

.profile-achievement-years article > span {
  color: #a8b5c7;
  font-size: 12px;
  font-weight: 800;
}

.profile-achievement-years article > strong {
  float: right;
  color: #f5f8fd;
  font-size: 13px;
}

.profile-achievement-years article > div {
  height: 3px;
  margin-top: 13px;
  overflow: hidden;
  background: #26364a;
}

.profile-achievement-years article i {
  display: block;
  width: 0;
  height: 100%;
  background: #5f8fff;
  transition: width 240ms ease;
}

.profile-achievement-years article:nth-child(2) i {
  background: #c32d34;
}

.profile-unlocked-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #263448;
}

.profile-unlocked-heading h3 {
  margin: 0;
  font-size: 16px;
}

.profile-unlocked-heading span {
  color: #8293aa;
  font-size: 11px;
  font-weight: 700;
}

.profile-unlocked-list {
  display: grid;
  gap: 0;
  max-height: 390px;
  overflow-y: auto;
  padding-right: 4px;
}

.profile-unlocked-achievement {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 72px;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #1f2c3d;
  background: transparent;
}

.profile-unlocked-flag.country-flag {
  width: 52px;
  height: 35px;
  border-radius: 4px;
}

.profile-unlocked-flag.achievement-club-badge {
  width: 52px;
  height: 46px;
  object-fit: contain;
}

.profile-unlocked-achievement span,
.profile-unlocked-achievement strong,
.profile-unlocked-achievement small,
.profile-unlocked-achievement time {
  min-width: 0;
}

.profile-unlocked-achievement strong,
.profile-unlocked-achievement small,
.profile-unlocked-achievement time {
  display: block;
}

.profile-unlocked-achievement strong {
  overflow: hidden;
  color: #f3f7fc;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-unlocked-achievement small {
  margin-top: 3px;
  color: #8395aa;
  font-size: 10px;
}

.profile-unlocked-achievement time {
  margin-top: 4px;
  color: #6f8097;
  font: 700 9px/1.35 "DM Mono", monospace;
}

.profile-unlocked-achievement b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 2px;
  background: #18513f;
  color: #75e3b1;
  font-size: 12px;
}

.profile-empty-state {
  margin: 0;
  padding: 28px 0;
  color: #8293a9;
  text-align: left;
  background: transparent;
}

/* Calm system typography for profile achievements and history. */
body.profile-mode-active :is(
  .profile-unlocked-heading,
  .profile-unlocked-list,
  .profile-history-heading,
  .profile-tournament-history
) {
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
}

body.profile-mode-active :is(.profile-unlocked-heading h2, .profile-history-heading h2) {
  font-family: inherit !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
}

body.profile-mode-active :is(.profile-unlocked-achievement strong, .profile-history-card-copy strong) {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.profile-mode-active :is(
  .profile-unlocked-achievement small,
  .profile-unlocked-achievement time,
  .profile-history-card-copy small,
  .profile-history-card-copy em,
  .profile-history-card-copy time
) {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.profile-mode-active :is(.profile-unlocked-achievement small, .profile-history-card-copy small) {
  font-size: 12px !important;
}

body.profile-mode-active :is(.profile-unlocked-achievement time, .profile-history-card-copy time) {
  font-size: 11px !important;
}

.profile-history-section {
  align-self: start;
  min-height: 220px;
  padding: 2px 0 0 30px;
  border-left: 1px solid #263448;
}

.profile-history-section h2 {
  margin: 16px 0 8px;
  font-size: 22px;
}

.profile-history-section p {
  margin: 0;
  color: #8d9db2;
  font-size: 13px;
  line-height: 1.65;
}

.profile-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 58px;
  padding-top: 26px;
  border-top: 1px solid #3a2930;
}

.profile-danger-zone h2 {
  margin: 0 0 6px;
  color: #f3f7fc;
  font-size: 18px;
}

.profile-danger-zone p {
  margin: 0;
  color: #8d9db2;
  font-size: 13px;
}

.profile-danger-zone .danger-button {
  min-width: 170px;
  flex: 0 0 auto;
  border-radius: 4px;
}

.profile-danger-zone .danger-button:disabled {
  cursor: default;
  opacity: .55;
}

.profile-delete-modal {
  width: min(540px, calc(100% - 28px));
  padding: 0;
  border: 1px solid #293a50;
  border-radius: 5px;
  color: #f4f7fc;
  background: #0d1723;
}

.profile-delete-modal::backdrop {
  background: rgba(2, 7, 12, .78);
}

.profile-delete-modal form,
.profile-delete-shell {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.profile-delete-modal .modal-head {
  margin: 0;
}

.profile-delete-modal h2 {
  margin: 4px 0 0;
  font-size: 27px;
}

.profile-delete-modal p {
  margin: 0;
  color: #9aa9bd;
  line-height: 1.55;
}

.profile-delete-modal label > span {
  display: block;
  margin-bottom: 7px;
  color: #aebacd;
  font-size: 12px;
  font-weight: 800;
}

.profile-delete-modal select,
.profile-delete-modal textarea {
  width: 100%;
  border: 1px solid #2b3c53;
  border-radius: 3px;
  color: #f5f8fd;
  background: #08111b;
  font: inherit;
}

.profile-delete-modal select {
  min-height: 50px;
  padding: 0 13px;
}

.profile-delete-modal textarea {
  resize: vertical;
  padding: 13px;
}

.profile-delete-confirm {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.profile-delete-confirm input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #d54e5a;
}

.profile-delete-confirm > span {
  margin: 0 !important;
  color: #c5cedb !important;
  font-weight: 600 !important;
  line-height: 1.45;
}

.profile-delete-message {
  min-height: 20px;
}

.profile-delete-modal .danger-button {
  min-height: 50px;
  border-radius: 4px;
}

.profile-delete-step {
  display: grid;
  gap: 18px;
}

.profile-delete-step[hidden] {
  display: none !important;
}

.profile-delete-loss-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 18px 16px 38px;
  border: 1px solid rgba(255, 169, 180, .22);
  border-radius: 12px;
  color: #f1dce1;
  background: rgba(105, 28, 45, .24);
  line-height: 1.45;
}

.profile-delete-permanent-note,
.profile-delete-final > strong {
  color: #ffbec8 !important;
  font-weight: 800;
}

.profile-delete-final > strong {
  font-size: 17px;
}

.profile-delete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-delete-actions button {
  min-height: 50px;
}

.profile-delete-actions .secondary-button {
  border: 1px solid rgba(190, 230, 244, .24);
  border-radius: 4px;
  color: #d9edf5;
  background: rgba(3, 54, 77, .5);
}

.profile-coming-soon {
  display: inline-flex;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #83a9ff;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 520px) {
  .before-start .sidebar .header-actions { gap: 2px; }
  .before-start .sidebar .header-actions .utility-button,
  .before-start .sidebar .header-actions .header-donate-link { width: 30px; min-width: 30px; }
}

/* Profile workspace revamp */
body.profile-mode-active,
body.profile-mode-active .profile-screen {
  color: #17201d;
  background: #f4f6f2;
}

.profile-header {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
  padding: 10px max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid #dfe5df;
  color: #17201d;
  background: rgba(250, 251, 248, .94);
  box-shadow: 0 8px 28px rgba(25, 37, 31, .05);
  backdrop-filter: blur(16px);
}

.profile-brand {
  color: #111714;
}

.profile-primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.profile-nav-link {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  color: #66716b;
  font: 750 12px/1 Manrope, sans-serif;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), color 160ms ease, background-color 160ms ease;
}

.profile-nav-link.is-active,
.profile-nav-link[aria-current="page"] {
  color: #15211c;
  background: #e7ece7;
}

.profile-nav-link:active,
.profile-header-actions .utility-button:active {
  transform: scale(.97);
}

.profile-header-actions {
  display: flex;
  grid-column: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.profile-header-actions .utility-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #dfe5df;
  border-radius: 11px;
  color: #56615b;
  background: #fff;
  box-shadow: none;
}

.profile-header-actions .utility-button > span:last-child {
  display: none;
}

.profile-header-actions .profile-current-button {
  color: #fff;
  border-color: #17201d;
  background: #17201d;
}

@media (hover: hover) and (pointer: fine) {
  .profile-nav-link:hover {
    color: #17201d;
    background: #edf1ed;
  }

  .profile-header-actions .utility-button:hover {
    color: #17201d;
    border-color: #c7d0c9;
    background: #f5f7f4;
  }

  .profile-header-actions .profile-current-button:hover {
    color: #fff;
    border-color: #17201d;
    background: #17201d;
  }
}

.profile-main {
  width: min(1180px, calc(100% - 48px));
  padding: 50px 0 80px;
}

.profile-hero {
  display: block;
  margin: 0 0 24px;
}

.profile-hero h1 {
  margin: 0;
  color: #17201d;
  font-size: clamp(36px, 5vw, 58px);
  line-height: .98;
  letter-spacing: -.055em;
}

.profile-hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #68736d;
  font-size: 14px;
  line-height: 1.6;
}

.profile-account-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, auto) auto;
  align-items: center;
  gap: 28px;
  padding: 28px;
  border: 1px solid #dde4dd;
  border-radius: 24px;
  color: #17201d;
  background: #fff;
  box-shadow: 0 18px 55px rgba(25, 37, 31, .07);
}

.profile-preview {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 18px;
}

.profile-avatar-preview,
.profile-avatar-flag.country-flag {
  width: 104px;
  height: 68px;
  border: 1px solid #dfe6df;
  border-radius: 15px;
  background: #edf2ed;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .72);
}

.profile-preview strong {
  overflow: hidden;
  color: #17201d;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-preview span {
  margin-top: 6px;
  color: #7a857f;
  font-size: 10px;
  letter-spacing: .08em;
}

.profile-achievement-total {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  min-width: 290px;
  gap: 8px;
  padding: 0;
  border: 0;
}

.profile-achievement-total > div {
  min-height: 86px;
  padding: 16px;
  border: 1px solid #e2e7e2;
  border-radius: 15px;
  background: #f5f7f4;
}

.profile-achievement-total span {
  color: #77827c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.profile-achievement-total > div > strong,
.profile-achievement-total strong {
  color: #17201d;
}

.profile-achievement-total strong:last-child,
.profile-achievement-total i {
  color: #97a19b;
}

.profile-hero-actions {
  display: grid;
  min-width: 126px;
  gap: 8px;
}

.profile-hero-actions button {
  min-height: 42px;
  border: 1px solid #dbe2dc;
  border-radius: 11px;
  box-shadow: none;
}

.profile-edit-toggle {
  color: #fff;
  border-color: #17201d !important;
  background: #17201d !important;
}

.profile-signout-button {
  color: #5f6a64;
  background: #f7f8f6 !important;
}

.profile-edit-panel {
  margin-top: 18px;
  padding: 28px;
  border: 1px solid #dde4dd;
  border-radius: 20px;
  color: #17201d;
  background: #fff;
  box-shadow: 0 16px 44px rgba(25, 37, 31, .06);
}

.profile-section-heading h2,
.profile-unlocked-heading h2,
.profile-history-heading h2,
.profile-danger-zone h2 {
  color: #17201d;
  letter-spacing: -.035em;
}

.profile-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  margin-top: 44px;
}

.profile-unlocked-heading {
  margin-bottom: 16px;
}

.profile-unlocked-heading h2 {
  font-size: 24px;
}

.profile-unlocked-heading p,
.profile-history-section > p,
.profile-danger-zone p {
  color: #6e7973;
}

.profile-unlocked-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 462px;
}

.profile-unlocked-achievement,
.profile-empty-state {
  border: 1px solid #e0e6e0;
  border-radius: 16px;
  color: #17201d;
  background: #fff;
  box-shadow: 0 8px 24px rgba(25, 37, 31, .04);
}

.profile-unlocked-achievement {
  min-height: 88px;
  padding: 14px;
}

.profile-unlocked-achievement strong {
  color: #17201d;
}

.profile-unlocked-achievement span,
.profile-unlocked-achievement time {
  color: #758079;
}

.profile-unlocked-achievement b {
  border-radius: 999px;
  color: #116444;
  background: #e1f4ea;
}

.profile-history-section {
  min-height: 0;
  padding: 24px;
  border: 1px solid #dfe5df;
  border-radius: 20px;
  color: #17201d;
  background: #fff;
  box-shadow: 0 14px 40px rgba(25, 37, 31, .06);
}

.profile-history-heading {
  align-items: center;
}

.profile-history-heading h2 {
  font-size: 22px;
}

.profile-history-heading > strong {
  padding: 6px 9px;
  border-radius: 999px;
  color: #50705f;
  background: #edf3ee;
}

.profile-tournament-history {
  scrollbar-color: #bdc8c0 #eef2ee;
}

.profile-legacy-achievements {
  margin-top: 38px;
}

.profile-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding: 24px;
  border: 1px solid #efd9da;
  border-radius: 18px;
  background: #fffafa;
}

.profile-danger-zone .danger-button {
  width: auto;
  min-width: 150px;
  border-radius: 11px;
}

@media (max-width: 900px) {
  .profile-header {
    grid-template-columns: auto 1fr;
  }

  .profile-primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: stretch;
    margin-top: 4px;
  }

  .profile-nav-link {
    flex: 1;
  }

  .profile-header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-account-overview {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-achievement-total {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .profile-hero-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .profile-header {
    min-height: 0;
    padding: 10px 14px 8px;
  }

  .profile-brand .brand-mark {
    transform: scale(.88);
    transform-origin: left center;
  }

  .profile-header-actions {
    gap: 3px;
  }

  .profile-header-actions .utility-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .profile-header-actions :is(#profileFeedbackButton, #profileDiscordButton) {
    display: none;
  }

  .profile-nav-link {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .profile-main {
    width: min(100% - 28px, 680px);
    padding: 34px 0 56px;
  }

  .profile-hero {
    margin-bottom: 18px;
  }

  .profile-hero h1 {
    font-size: 38px;
  }

  .profile-hero p {
    font-size: 12px;
  }

  .profile-account-overview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
  }

  .profile-preview,
  .profile-achievement-total,
  .profile-hero-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .profile-avatar-preview,
  .profile-avatar-flag.country-flag {
    width: 82px;
    height: 54px;
  }

  .profile-preview strong {
    font-size: 22px;
  }

  .profile-achievement-total {
    min-width: 0;
  }

  .profile-achievement-total > div {
    min-height: 78px;
  }

  .profile-hero-actions {
    grid-template-columns: 1fr 1fr;
  }

  .profile-dashboard-grid {
    margin-top: 34px;
  }

  .profile-unlocked-list {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .profile-history-section {
    padding: 20px;
  }

  .profile-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-danger-zone .danger-button {
    width: 100%;
  }
}

/* Simulator-blue profile palette */
body.profile-mode-active,
body.profile-mode-active .profile-screen {
  color: #f2f7fa;
  background:
    radial-gradient(circle at 12% 8%, rgba(70, 198, 239, .2), transparent 26%),
    radial-gradient(circle at 88% 34%, rgba(0, 77, 109, .22), transparent 30%),
    linear-gradient(155deg, #056b91 0%, #045d80 52%, #045572 100%);
  background-attachment: fixed;
}

body.profile-mode-active .profile-header {
  border-bottom-color: rgba(180, 229, 247, .18);
  color: #f4f9fb;
  background: rgba(4, 83, 113, .9);
  box-shadow: 0 8px 28px rgba(0, 38, 56, .16);
}

body.profile-mode-active .profile-brand,
body.profile-mode-active .profile-nav-link,
body.profile-mode-active .profile-header-actions .utility-button {
  color: #eef8fb;
}

body.profile-mode-active .profile-nav-link {
  background: transparent;
}

body.profile-mode-active .profile-nav-link.is-active,
body.profile-mode-active .profile-nav-link[aria-current="page"] {
  color: #fff;
  background: rgba(42, 174, 218, .45);
}

body.profile-mode-active .profile-header-actions .utility-button {
  border-color: rgba(190, 230, 244, .2);
  background: rgba(5, 72, 98, .5);
}

body.profile-mode-active .profile-header-actions .profile-current-button {
  color: #fff;
  border-color: rgba(132, 218, 246, .36);
  background: rgba(5, 56, 80, .72);
}

@media (hover: hover) and (pointer: fine) {
  body.profile-mode-active .profile-nav-link:hover,
  body.profile-mode-active .profile-header-actions .utility-button:hover {
    color: #fff;
    border-color: rgba(190, 230, 244, .34);
    background: rgba(25, 137, 178, .48);
  }
}

body.profile-mode-active .profile-hero h1,
body.profile-mode-active .profile-preview strong,
body.profile-mode-active .profile-achievement-total strong,
body.profile-mode-active :is(.profile-section-heading, .profile-unlocked-heading, .profile-history-heading, .profile-danger-zone) h2 {
  color: #fff;
}

body.profile-mode-active .profile-hero p,
body.profile-mode-active .profile-preview span,
body.profile-mode-active .profile-unlocked-heading p,
body.profile-mode-active .profile-history-section > p,
body.profile-mode-active .profile-danger-zone p {
  color: #c5e3ee;
}

body.profile-mode-active .profile-account-overview,
body.profile-mode-active .profile-edit-panel,
body.profile-mode-active .profile-history-section,
body.profile-mode-active :is(.profile-unlocked-achievement, .profile-empty-state) {
  border-color: rgba(170, 222, 240, .24);
  color: #eef8fb;
  background: rgba(4, 66, 93, .58);
  box-shadow: 0 18px 55px rgba(0, 37, 55, .17);
  backdrop-filter: blur(14px);
}

body.profile-mode-active :is(.profile-avatar-preview, .profile-avatar-flag.country-flag) {
  border-color: rgba(185, 228, 243, .26);
  background: rgba(3, 60, 86, .62);
  box-shadow: inset 0 0 0 4px rgba(165, 222, 241, .08);
}

body.profile-mode-active .profile-achievement-total > div {
  border-color: rgba(178, 226, 243, .18);
  background: rgba(3, 59, 84, .5);
}

body.profile-mode-active .profile-achievement-total span {
  color: #a8d5e5;
}

body.profile-mode-active .profile-achievement-total strong:last-child,
body.profile-mode-active .profile-achievement-total i {
  color: #9cc9d9;
}

body.profile-mode-active .profile-edit-toggle {
  color: #064763;
  border-color: #bcecff !important;
  background: #d9f4ff !important;
}

body.profile-mode-active .profile-signout-button {
  color: #d7edf5;
  border-color: rgba(185, 228, 243, .18) !important;
  background: rgba(3, 54, 77, .48) !important;
}

body.profile-mode-active .profile-field > span,
body.profile-mode-active .profile-form label > span {
  color: #d7edf5;
}

body.profile-mode-active :is(.profile-form input, .profile-country-search, .profile-country-option) {
  border-color: rgba(178, 226, 243, .2);
  color: #f5fbfd;
  background: rgba(3, 54, 77, .48);
}

body.profile-mode-active .profile-unlocked-achievement strong {
  color: #fff;
}

body.profile-mode-active .profile-unlocked-achievement span,
body.profile-mode-active .profile-unlocked-achievement time,
body.profile-mode-active .profile-empty-state {
  color: #b9dae6;
}

body.profile-mode-active .profile-unlocked-achievement b {
  color: #dff8ff;
  background: rgba(48, 171, 211, .25);
}

body.profile-mode-active .profile-unlocked-heading > strong {
  color: #d8f1f8;
  font: 700 13px/1.2 "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  padding: 8px 11px;
  border: 1px solid rgba(178, 226, 243, .2);
  border-radius: 999px;
  background: rgba(3, 54, 77, .48);
}

.profile-remaining-achievements {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 197, 92, .45);
  border-radius: 18px;
  color: #f8fbfc;
  background: linear-gradient(135deg, rgba(88, 58, 9, .56), rgba(4, 66, 93, .72));
}

.profile-remaining-achievements[hidden] {
  display: none;
}

.profile-remaining-summary,
.profile-remaining-achievement,
.profile-remaining-achievement > span {
  display: grid;
}

.profile-remaining-summary {
  gap: 3px;
}

.profile-remaining-summary strong,
.profile-remaining-achievement strong {
  color: #fff;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

.profile-remaining-summary span,
.profile-remaining-achievement small,
.profile-remaining-more {
  color: #cce4ed;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

.profile-remaining-list {
  display: grid;
  gap: 8px;
}

.profile-remaining-achievement {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 220, 145, .22);
  border-radius: 14px;
  background: rgba(2, 45, 65, .52);
}

.profile-remaining-achievement > span {
  gap: 2px;
  min-width: 0;
}

.profile-remaining-achievement b {
  color: #ffd77b;
  font: 800 14px/1 "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

.profile-remaining-more {
  margin: 2px 0 0;
  font-size: 12px;
}

body.profile-mode-active .profile-history-heading > strong {
  color: #d8f1f8;
  background: rgba(117, 204, 233, .16);
}

body.profile-mode-active .profile-tournament-history {
  scrollbar-color: rgba(148, 217, 240, .45) rgba(3, 54, 77, .45);
}

body.profile-mode-active .profile-danger-zone {
  border-color: rgba(255, 188, 199, .2);
  background: rgba(79, 37, 55, .34);
}

/* The account card is the profile's single visual introduction. */
body.profile-mode-active .profile-main {
  padding-top: 28px !important;
}

@media (max-width: 620px) {
  body.profile-mode-active .profile-main {
    padding-top: 20px !important;
  }
}

body.profile-mode-active .profile-header #profileDiscordButton {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .profile-screen *,
  .profile-screen *::before,
  .profile-screen *::after {
    transition-duration: 1ms !important;
  }
}

@media (max-width: 680px) {
  .profile-header {
    grid-template-columns: 1fr auto;
    min-height: 78px;
    padding: 10px 18px;
  }

  .profile-header .legacy-topbar-back {
    width: 48px;
    min-width: 48px;
    padding: 0;
  }

  .profile-header .legacy-topbar-back span:last-child,
  .profile-brand {
    display: none;
  }

  .profile-main {
    width: min(100% - 30px, 900px);
    padding-top: 28px;
  }

  .profile-hero {
    align-items: flex-start;
  }

  .profile-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-hero-actions button {
    min-width: 112px;
  }

  .profile-danger-zone {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .profile-danger-zone .danger-button {
    width: 100%;
  }

  .profile-delete-modal form,
  .profile-delete-shell {
    padding: 22px;
  }

  .profile-delete-actions {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    align-items: center;
  }

  .profile-country-grid {
    grid-template-columns: 1fr;
  }

  .profile-actions {
    flex-direction: column;
  }

  .profile-account-overview {
    grid-template-columns: 1fr 1fr;
    padding: 18px;
  }

  .profile-preview {
    grid-column: 1 / -1;
    padding-bottom: 16px;
    border-bottom: 1px solid #293a50;
  }

  .profile-overview-stat {
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .profile-overview-stat + .profile-overview-stat {
    padding-left: 14px;
    border-left: 1px solid #293a50;
  }

  .profile-overview-stat strong {
    font-size: 22px;
  }

  .profile-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .profile-achievements-section,
  .profile-history-section,
  .profile-edit-panel {
    padding-right: 0;
    padding-left: 0;
  }

  .profile-achievement-years {
    grid-template-columns: 1fr;
  }

  .profile-achievement-years article,
  .profile-achievement-years article + article {
    padding: 16px 0;
    border-left: 0;
  }

  .profile-achievement-years article + article {
    border-top: 1px solid #263448;
  }

  .profile-history-section {
    min-height: 0;
    padding-top: 28px;
    border-top: 1px solid #263448;
    border-left: 0;
  }

  .profile-unlocked-list {
    max-height: none;
  }
}

@media (max-width: 430px) {
  .profile-hero h1 {
    font-size: 29px;
  }

  .profile-edit-toggle {
    min-width: 108px;
    padding-inline: 12px;
  }

  .profile-avatar-preview,
  .profile-avatar-flag.country-flag {
    width: 82px;
    height: 54px;
  }

  .profile-preview strong {
    font-size: 21px;
  }

  .profile-unlocked-achievement {
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    padding-inline: 10px;
  }

  .profile-unlocked-flag.country-flag {
    width: 44px;
    height: 29px;
  }
}

.profile-screen .primary-button,
.profile-screen .secondary-button,
.profile-screen .legacy-topbar-back {
  border-radius: 4px;
  box-shadow: none;
}

.profile-screen button {
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), color 160ms ease, background-color 160ms ease;
}

.profile-screen button:active {
  transform: scale(.98);
}

/* Profile refresh */
.profile-screen {
  background: #0a0e14;
}

.profile-header {
  position: relative;
  min-height: 76px;
  padding: 10px max(24px, calc((100vw - 1080px) / 2));
  border-bottom: 0;
  background: #0a0e14;
}

.profile-main {
  width: min(1080px, calc(100% - 48px));
  padding: 38px 0 72px;
}

.profile-hero {
  margin-bottom: 20px;
}

.profile-hero > div:first-child > span {
  display: block;
  margin-bottom: 7px;
  color: #7399f8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-hero h1 {
  font-size: 40px;
  line-height: 1;
}

.profile-hero-actions button {
  min-height: 42px;
  border: 0;
  background: #151c26;
}

.profile-edit-toggle {
  color: #eef3fb;
}

.profile-signout-button {
  color: #9ca9ba;
}

.profile-account-overview {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  padding: 24px;
  border: 0;
  border-radius: 6px;
  background: #121821;
}

.profile-preview {
  gap: 18px;
}

.profile-avatar-preview,
.profile-avatar-flag.country-flag {
  width: 92px;
  height: 60px;
}

.profile-preview strong {
  font-size: 27px;
}

.profile-preview span {
  margin-top: 5px;
  color: #7f8b9b;
  font-size: 10px;
}

.profile-achievement-total {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, auto));
  min-width: 300px;
  gap: 24px;
  padding-left: 26px;
  border-left: 1px solid #242c37;
}

.profile-achievement-total span {
  display: block;
  color: #8d99a9;
  font-size: 11px;
  font-weight: 700;
}

.profile-achievement-total > div > strong {
  display: block;
  margin-top: 8px;
  color: #f3f6fa;
  font: 800 28px/1 Manrope, sans-serif;
}

.profile-achievement-total p {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 8px 0 0;
}

.profile-achievement-total strong {
  color: #f3f6fa;
  font: 800 28px/1 Manrope, sans-serif;
}

.profile-achievement-total strong:last-child,
.profile-achievement-total i {
  color: #687587;
  font-size: 17px;
  font-style: normal;
}

.profile-edit-panel {
  margin-top: 24px;
  padding: 26px;
  border: 0;
  border-radius: 6px;
  background: #111720;
}

.profile-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
  margin-top: 42px;
}

.profile-unlocked-heading {
  align-items: end;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.profile-unlocked-heading h2 {
  margin: 0;
  font-size: 22px;
}

.profile-unlocked-heading p {
  margin: 6px 0 0;
  color: #7f8b9b;
  font-size: 12px;
}

.profile-unlocked-heading span {
  color: #8aa9f8;
  font-size: 11px;
}

.profile-unlocked-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 420px;
  padding: 0;
}

.profile-unlocked-achievement {
  min-height: 78px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  padding: 12px;
  border: 0;
  border-radius: 5px;
  background: #121821;
}

.profile-unlocked-achievement b {
  width: auto;
  padding: 0 7px;
  border-radius: 3px;
  background: #172b4d;
  color: #8eafff;
  font-size: 9px;
  white-space: nowrap;
}

.profile-empty-state {
  grid-column: 1 / -1;
  padding: 28px 22px;
  border-radius: 5px;
  background: #121821;
}

.profile-history-section {
  min-height: 170px;
  padding: 22px;
  border: 0;
  border-radius: 6px;
  background: #111720;
}

.profile-history-section h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.profile-history-section p {
  color: #7f8b9b;
}

.profile-coming-soon {
  margin-top: 28px;
  color: #7197f5;
  text-transform: none;
}

.profile-danger-zone {
  margin-top: 48px;
  border-top-color: #282027;
}

@media (max-width: 800px) {
  .profile-header {
    grid-template-columns: 1fr auto;
    min-height: 70px;
    padding: 10px 18px;
  }

  .profile-header .legacy-topbar-back {
    min-width: 48px;
  }

  .profile-header .legacy-topbar-back span:last-child,
  .profile-brand {
    display: none;
  }

  .profile-header-actions {
    grid-column: 2;
  }

  .profile-header-actions .utility-button {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }

  .profile-header-actions .utility-button > span:last-child {
    display: none;
  }

  .profile-main {
    width: min(100% - 28px, 680px);
    padding-top: 26px;
  }

  .profile-hero h1 {
    font-size: 32px;
  }

  .profile-account-overview {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .profile-preview {
    grid-column: auto;
    padding-bottom: 0;
    border: 0 !important;
  }

  .profile-achievement-total {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 16px;
    padding: 18px 0 0;
    border: 0;
  }

  .profile-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 34px;
  }

  .profile-unlocked-list {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .profile-unlocked-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .profile-unlocked-heading > div {
    display: contents;
  }

  .profile-unlocked-heading h2 {
    grid-column: 1;
  }

  .profile-unlocked-heading p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .profile-unlocked-heading span {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
  }

  .profile-history-section {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .home-achievement-leaderboard {
    margin-top: 18px;
    padding: 20px 14px 14px;
  }

  .home-achievement-leaderboard > header {
    align-items: center;
  }

  .home-achievement-leaderboard h2 {
    font-size: 18px;
  }

  .home-achievement-row {
    grid-template-columns: 34px minmax(0, 1fr) 68px 68px;
    min-height: 50px;
    gap: 7px;
    padding-inline: 4px;
    font-size: 10px;
  }

  .home-achievement-row > strong {
    font-size: 11px;
  }

  .home-achievement-flag.country-flag {
    width: 28px;
    height: 19px;
  }

  .home-achievement-player {
    gap: 7px;
  }

  .home-achievement-own {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .home-achievement-own b {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .profile-header {
    padding-inline: 12px;
  }

  .profile-header-actions {
    gap: 2px;
  }

  .profile-header-actions .utility-button {
    width: 36px;
    min-width: 36px;
  }

  .profile-hero {
    align-items: flex-start;
  }

  .profile-hero-actions {
    gap: 6px;
  }

  .profile-hero-actions button {
    min-width: 96px;
    padding-inline: 10px;
  }

  .profile-preview strong {
    font-size: 22px;
  }

  .profile-avatar-preview,
  .profile-avatar-flag.country-flag {
    width: 76px;
    height: 50px;
  }
}

@media (max-width: 1000px) {
  .challenge-hero, .challenge-dashboard-band, .challenge-scoring { grid-template-columns: 1fr; }
  .challenge-countdown { justify-self: start; }
  .challenge-run { grid-template-columns: 1fr 1fr; }
  .challenge-run-copy { grid-column: 1 / -1; }
  .challenge-locked-settings { padding: 0; flex-wrap: wrap; }
  .challenge-leaderboard-row { grid-template-columns: 46px minmax(140px, 1.4fr) repeat(3, minmax(74px, .7fr)); }
  .challenge-leaderboard-row > :nth-child(n+6) { display: none; }
}

@media (max-width: 680px) {
  .challenge-prizes, .challenge-player-summary, .challenge-scoring-grid, .challenge-history { grid-template-columns: 1fr; }
  .challenge-header { grid-template-columns: 1fr auto; min-height: 78px; padding: 10px 18px; }
  .challenge-header .legacy-topbar-back { width: 48px; min-width: 48px; padding: 0; }
  .challenge-header .legacy-topbar-back span:last-child { display: none; }
  .challenge-brand { display: none; }
  .challenge-account-button { grid-column: 2; }
  .challenge-main { width: min(100% - 30px, 1320px); padding-top: 34px; }
  .challenge-hero { gap: 28px; }
  .challenge-hero h1 { font-size: 38px; }
  .challenge-countdown > div { grid-template-columns: repeat(4, 1fr); column-gap: 8px; }
  .challenge-countdown strong { font-size: 23px; }
  .challenge-countdown small { font-size: 8px; }
  .challenge-run { grid-template-columns: 1fr; }
  .challenge-match-result, .challenge-start-button { width: 100%; }
  .challenge-leaderboard { border: 0; overflow: visible; }
  .challenge-leaderboard-row { grid-template-columns: 34px minmax(0, 1fr) 68px; min-height: 58px; padding: 0 10px; border: 1px solid #26374e; border-bottom: 0; }
  .challenge-leaderboard-row:last-child { border-bottom: 1px solid #26374e; }
  .challenge-leaderboard-row > :nth-child(n+4) { display: none; }
  .challenge-leaderboard-row > :nth-child(3)::before { content: "PTS "; color: #71839b; font-size: 9px; }
}

/* Final Brazil 2014 presentation adjustments. */
.retro-mode-active .retro-tournament-heading > * {
  visibility: hidden;
  pointer-events: none;
}

.retro-match-lineups-panel .retro-lineup-side {
  border: 0;
  border-radius: 0;
  background: rgba(0, 65, 44, 0.46);
}

.retro-match-lineups-panel .retro-lineup-side:nth-child(2) header,
.retro-match-lineups-panel .retro-lineup-side header {
  background: rgba(0, 91, 55, 0.72);
}

.retro-match-lineups-panel .retro-lineup-side li {
  border-bottom: 0;
}

.retro-match-lineups-panel .retro-lineup-side li:nth-child(even) {
  background: rgba(255, 255, 255, 0.035);
}

.retro-match-lineups-panel .retro-lineup-side li > b,
.retro-match-lineups-panel .retro-lineup-side li em {
  color: #f6d12a;
}

.retro-match-lineups-panel .retro-lineup-side li strong {
  color: #fffce8;
}

.retro-mode-active .retro-match-lineups-panel {
  border: 0;
  border-radius: 8px 2px 10px 3px;
  background: rgba(0, 76, 48, 0.78);
  box-shadow: 7px 7px 0 rgba(0, 76, 174, 0.22);
}

.retro-mode-active .retro-match-lineups-panel summary,
.retro-mode-active .retro-match-lineups-panel[open] summary {
  border: 0;
}

.retro-mode-active #mainContent .result-note {
  color: #f6d12a;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 2px 2px rgba(0, 42, 28, 0.7);
}

.retro-mode-active #mainContent .team-match-events .timeline-event {
  color: #fffce8;
  font-weight: 800;
  line-height: 1.3;
}

.retro-mode-active #mainContent .team-match-events .timeline-event b {
  color: #f6d12a;
}

.retro-mode-active #mainContent .team-match-events .event {
  color: #e9f4cf;
  font-weight: 800;
  line-height: 1.3;
}

.retro-mode-active #mainContent .team-match-events,
.retro-mode-active #mainContent .team-match-events.away {
  width: min(100%, 210px);
  margin-inline: auto;
  text-align: center;
}

.retro-mode-active #mainContent .team-match-events .timeline-event,
.retro-mode-active #mainContent .team-match-events.away .timeline-event {
  justify-content: center;
}

.retro-mode-active #mainContent .team-match-events .timeline-event span {
  flex: 0 1 auto;
}

@media (min-width: 701px) and (max-width: 1280px) {
  body.retro-mode-active .content {
    grid-template-columns: minmax(150px, 195px) minmax(360px, 1fr) minmax(165px, 205px);
    grid-template-areas:
      "next stage boot"
      "board board board";
    gap: 12px;
    padding-inline: 10px;
  }

  body.retro-mode-active .insight-right,
  body.retro-mode-active .insight-left {
    position: static;
    width: 100%;
    max-width: 100%;
  }

  body.retro-mode-active .matchup {
    grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
    gap: 5px;
    padding-inline: 8px;
  }

  body.retro-mode-active .team {
    padding-inline: 5px;
  }

  body.retro-mode-active .flag-orb {
    width: clamp(66px, 7vw, 82px);
    height: clamp(43px, 4.6vw, 54px);
  }

  body.retro-mode-active .team h2.team-name,
  body.retro-mode-active .team h2.team-name.is-long {
    overflow: visible;
    white-space: normal;
    font-size: 18px;
    line-height: 1.12;
  }

  body.retro-mode-active .team-name > span,
  body.retro-mode-active .team-name.is-overflowing > span {
    width: auto;
    min-width: 0;
    overflow: visible;
    text-align: center;
    overflow-wrap: anywhere;
    animation: none;
    transform: none;
  }

  body.retro-mode-active .team-match-events .timeline-event,
  body.retro-mode-active .team-match-events .event {
    font-size: 10px;
    line-height: 1.35;
  }

  body.retro-mode-active #mainContent .team-match-events,
  body.retro-mode-active #mainContent .team-match-events.away {
    width: min(100%, 180px);
  }

  body.retro-mode-active .retro-match-lineups-panel .retro-lineup-side ol {
    grid-template-columns: 1fr;
  }

  body.retro-mode-active #mainContent .match-stats-grid {
    padding-inline: 7px;
  }

  body.retro-mode-active #mainContent .match-stat-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 3px;
    font-size: 10px;
  }

  body.retro-mode-active #mainContent .match-stat-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.retro-mode-active #mainContent .match-stat-row.match-stats-empty {
    grid-template-columns: 1fr;
  }

  body.retro-mode-active #mainContent .match-stat-row.match-stats-empty span {
    overflow-wrap: normal;
  }

  body.retro-mode-active #mainContent .match-stat-row b {
    font-size: 11px;
  }

  body.retro-mode-active #mainContent .golden-boot-row {
    grid-template-columns: 20px minmax(0, 1fr) 24px;
    gap: 6px;
    min-height: 58px;
    padding: 9px 8px;
  }

  body.retro-mode-active #mainContent .golden-boot-player strong {
    font-size: 11px;
  }

  body.retro-mode-active #mainContent .golden-boot-player small {
    gap: 4px;
    font-size: 8px;
  }

  body.retro-mode-active #mainContent .golden-boot-row > b {
    font-size: 15px;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  body.retro-mode-active .content {
    grid-template-columns: 145px minmax(330px, 1fr) 150px;
    gap: 8px;
    padding-inline: 6px;
  }

  body.retro-mode-active .team h2.team-name,
  body.retro-mode-active .team h2.team-name.is-long {
    font-size: 15px;
  }

  body.retro-mode-active #mainContent .match-stat-row {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    font-size: 9px;
  }

  body.retro-mode-active #mainContent .golden-boot-player strong {
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  .retro-mode-active .retro-tournament-heading {
    min-height: 104px;
  }

  body.retro-mode-active .insight-right,
  body.retro-mode-active #mainContent .match-analysis {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
  }

  .retro-match-lineups-panel > .retro-lineups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .retro-match-lineups-panel .retro-lineup-side ol {
    grid-template-columns: 1fr;
  }
}

/* Icon Draft account record */
.profile-icon-draft[hidden],
.profile-icon-draft-content[hidden],
.profile-icon-draft-auth[hidden],
.profile-icon-draft-status[hidden] {
  display: none;
}

.profile-icon-draft {
  margin-top: 24px;
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(222, 189, 102, .25);
  border-radius: 7px;
  background:
    radial-gradient(circle at 92% 0, rgba(231, 196, 99, .14), transparent 34%),
    linear-gradient(145deg, #141b27, #0d121b 74%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.profile-icon-draft-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.profile-icon-draft-header > div > span {
  display: block;
  margin-bottom: 7px;
  color: #d5b65e;
  font: 800 9px/1 "DM Mono", monospace;
  letter-spacing: .14em;
}

.profile-icon-draft-header h2,
.profile-icon-draft-header p {
  margin: 0;
}

.profile-icon-draft-header h2 {
  color: #f5f6f8;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.035em;
}

.profile-icon-draft-header p {
  margin-top: 7px;
  color: #8995a7;
  font-size: 12px;
}

.profile-icon-draft-play {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 15px;
  border: 1px solid rgba(232, 201, 116, .42);
  border-radius: 4px;
  color: #f1d888;
  background: rgba(220, 183, 84, .075);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), color 160ms ease, background-color 160ms ease;
}

.profile-icon-draft-play:active {
  transform: scale(.97);
}

.profile-icon-draft-status,
.profile-icon-draft-auth {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(148, 162, 183, .13);
  border-radius: 5px;
  color: #8e9aac;
  background: rgba(5, 9, 15, .32);
  font-size: 12px;
}

.profile-icon-draft-auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-icon-draft-auth p {
  margin: 0;
}

.profile-icon-draft-auth button {
  flex: 0 0 auto;
}

.profile-icon-draft-content {
  margin-top: 22px;
}

.profile-icon-draft-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid rgba(139, 153, 173, .15);
}

.profile-icon-draft-stats > div {
  min-width: 0;
  padding: 17px 18px;
  border-left: 1px solid rgba(139, 153, 173, .15);
}

.profile-icon-draft-stats > div:first-child {
  border-left: 0;
}

.profile-icon-draft-stats span,
.profile-icon-draft-stats strong {
  display: block;
}

.profile-icon-draft-stats span {
  color: #7f8b9c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-icon-draft-stats strong {
  margin-top: 7px;
  color: #f1d57d;
  font: 850 24px/1 Manrope, sans-serif;
}

.profile-icon-draft-grid {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 44px);
  margin-top: 28px;
}

.profile-icon-draft-grid > section {
  min-width: 0;
}

.profile-icon-draft-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-icon-draft-subheading h3 {
  margin: 0;
  color: #e9edf3;
  font-size: 15px;
}

.profile-icon-draft-subheading span {
  color: #778497;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-icon-draft-trophies,
.profile-icon-draft-history {
  display: grid;
  gap: 7px;
}

.profile-icon-draft-trophy {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid rgba(220, 185, 91, .14);
  border-radius: 5px;
  background: rgba(219, 181, 77, .045);
}

.profile-icon-draft-trophy > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(237, 206, 120, .25);
  border-radius: 50%;
  color: #f0d27d;
  background: rgba(239, 204, 108, .08);
  font-size: 17px;
}

.profile-icon-draft-trophy strong,
.profile-icon-draft-trophy time {
  display: block;
}

.profile-icon-draft-trophy strong {
  color: #e7ebf0;
  font-size: 11px;
}

.profile-icon-draft-trophy time {
  margin-top: 3px;
  color: #758194;
  font-size: 9px;
}

.profile-icon-draft-more,
.profile-icon-draft-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(141, 154, 174, .16);
  border-radius: 5px;
  color: #7e8999;
  background: rgba(5, 9, 15, .2);
  font-size: 11px;
  line-height: 1.55;
}

.profile-icon-draft-more {
  color: #bba667;
  text-align: center;
}

.profile-icon-draft-history {
  max-height: 510px;
  padding-right: 4px;
  overflow: auto;
  scrollbar-color: #394455 transparent;
}

.profile-icon-draft-history-card {
  padding: 13px;
  border: 1px solid rgba(139, 153, 173, .14);
  border-radius: 5px;
  background: rgba(6, 10, 17, .38);
}

.profile-icon-draft-history-card.is-win {
  border-color: rgba(222, 188, 94, .28);
  background: rgba(205, 166, 60, .055);
}

.profile-icon-draft-history-topline,
.profile-icon-draft-history-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-icon-draft-history-topline span {
  color: #ecd27f;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.profile-icon-draft-history-topline time,
.profile-icon-draft-history-card footer {
  color: #778496;
  font-size: 9px;
}

.profile-icon-draft-squad {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0;
}

.profile-icon-draft-squad > span {
  overflow: hidden;
  padding: 7px 6px;
  border-radius: 3px;
  color: #aab4c3;
  background: #171e29;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-icon-draft-squad b {
  margin-right: 4px;
  color: #f1d57d;
  font-size: 9px;
}

.profile-icon-draft-history-card footer {
  padding-top: 9px;
  border-top: 1px solid rgba(139, 153, 173, .1);
}

.profile-icon-draft-history-card footer strong {
  color: #aeb9c7;
  font-size: 9px;
}

html.light-mode body.profile-mode-active .profile-icon-draft {
  border-color: #ddc98f;
  background: linear-gradient(145deg, #fffdf7, #f5f1e7);
  box-shadow: 0 10px 28px rgba(61, 48, 15, .07);
}

html.light-mode body.profile-mode-active .profile-icon-draft :is(h2, h3, .profile-icon-draft-trophy strong) {
  color: #252619;
}

html.light-mode body.profile-mode-active .profile-icon-draft :is(.profile-icon-draft-header p, .profile-icon-draft-status, .profile-icon-draft-auth, .profile-icon-draft-empty) {
  color: #626858;
}

html.light-mode body.profile-mode-active .profile-icon-draft :is(.profile-icon-draft-trophy, .profile-icon-draft-history-card, .profile-icon-draft-squad > span) {
  border-color: #e5dcc2;
  color: #51594d;
  background: rgba(255, 255, 255, .72);
}

@media (hover: hover) and (pointer: fine) {
  .profile-icon-draft-play:hover {
    color: #fff0bd;
    background: rgba(220, 183, 84, .13);
  }
}

@media (max-width: 800px) {
  .profile-icon-draft-header {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .profile-icon-draft-play {
    align-self: flex-start;
  }

  .profile-icon-draft-grid {
    grid-template-columns: 1fr;
  }

  .profile-icon-draft-history {
    max-height: none;
  }
}

@media (max-width: 520px) {
  .profile-icon-draft {
    padding: 18px 14px;
  }

  .profile-icon-draft-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-icon-draft-stats > div:nth-child(3) {
    border-left: 0;
  }

  .profile-icon-draft-stats > div:nth-child(n + 3) {
    border-top: 1px solid rgba(139, 153, 173, .15);
  }

  .profile-icon-draft-squad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-icon-draft-auth {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Keep the profile workspace above legacy profile rules in this bundle. */
body.profile-mode-active,
body.profile-mode-active .profile-screen {
  color: #17201d;
  background: #f4f6f2;
}

body.profile-mode-active .profile-header {
  position: sticky;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 10px max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid #dfe5df;
  color: #17201d;
  background: rgba(250, 251, 248, .94);
  box-shadow: 0 8px 28px rgba(25, 37, 31, .05);
}

body.profile-mode-active .profile-brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

body.profile-mode-active .profile-primary-nav {
  grid-column: 2;
  grid-row: 1;
}

body.profile-mode-active .profile-header-actions {
  grid-column: 3;
  grid-row: 1;
}

body.profile-mode-active .profile-main {
  width: min(1180px, calc(100% - 48px));
  padding: 50px 0 80px;
}

body.profile-mode-active .profile-hero {
  display: block;
  margin: 0 0 24px;
}

body.profile-mode-active .profile-hero h1,
body.profile-mode-active .profile-preview strong,
body.profile-mode-active .profile-achievement-total strong,
body.profile-mode-active :is(.profile-section-heading, .profile-unlocked-heading, .profile-history-heading, .profile-danger-zone) h2 {
  color: #17201d;
}

body.profile-mode-active .profile-hero h1 {
  font-size: clamp(36px, 5vw, 58px);
}

body.profile-mode-active .profile-account-overview {
  grid-template-columns: minmax(0, 1fr) minmax(290px, auto) auto;
  gap: 28px;
  padding: 28px;
  border: 1px solid #dde4dd;
  border-radius: 24px;
  color: #17201d;
  background: #fff;
  box-shadow: 0 18px 55px rgba(25, 37, 31, .07);
}

body.profile-mode-active :is(.profile-avatar-preview, .profile-avatar-flag.country-flag) {
  width: 104px;
  height: 68px;
  border: 1px solid #dfe6df;
  border-radius: 15px;
  background: #edf2ed;
}

body.profile-mode-active .profile-achievement-total {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  min-width: 290px;
  gap: 8px;
  padding: 0;
  border: 0;
}

body.profile-mode-active .profile-achievement-total > div {
  min-height: 86px;
  padding: 16px;
  border: 1px solid #e2e7e2;
  border-radius: 15px;
  background: #f5f7f4;
}

body.profile-mode-active .profile-hero-actions {
  display: grid;
  min-width: 126px;
  gap: 8px;
}

body.profile-mode-active .profile-hero-actions button {
  min-height: 42px;
  border-radius: 11px;
}

body.profile-mode-active .profile-edit-panel,
body.profile-mode-active .profile-history-section,
body.profile-mode-active :is(.profile-unlocked-achievement, .profile-empty-state) {
  border: 1px solid #dfe5df;
  color: #17201d;
  background: #fff;
  box-shadow: 0 12px 36px rgba(25, 37, 31, .055);
}

body.profile-mode-active .profile-edit-panel,
body.profile-mode-active .profile-history-section {
  border-radius: 20px;
}

body.profile-mode-active :is(.profile-unlocked-achievement, .profile-empty-state) {
  border-radius: 16px;
}

body.profile-mode-active .profile-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  margin-top: 44px;
}

body.profile-mode-active .profile-unlocked-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 462px;
}

body.profile-mode-active .profile-unlocked-achievement b {
  color: #116444;
  background: #e1f4ea;
}

body.profile-mode-active .profile-history-section {
  min-height: 0;
  padding: 24px;
}

body.profile-mode-active .profile-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding: 24px;
  border: 1px solid #efd9da;
  border-radius: 18px;
  background: #fffafa;
}

body.profile-mode-active .profile-danger-zone .danger-button {
  width: auto;
  min-width: 150px;
}

@media (max-width: 900px) {
  body.profile-mode-active .profile-header {
    grid-template-columns: auto 1fr;
  }

  body.profile-mode-active .profile-brand {
    grid-column: 1;
    grid-row: 1;
  }

  body.profile-mode-active .profile-primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.profile-mode-active .profile-header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  body.profile-mode-active .profile-account-overview {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.profile-mode-active .profile-achievement-total {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.profile-mode-active .profile-hero-actions {
    grid-column: 2;
    grid-row: 1;
  }

  body.profile-mode-active .profile-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.profile-mode-active .profile-header {
    min-height: 0;
    padding: 10px 14px 8px;
  }

  body.profile-mode-active .profile-main {
    width: min(100% - 28px, 680px);
    padding: 34px 0 56px;
  }

  body.profile-mode-active .profile-hero h1 {
    font-size: 38px;
  }

  body.profile-mode-active .profile-account-overview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
  }

  body.profile-mode-active :is(.profile-preview, .profile-achievement-total, .profile-hero-actions) {
    grid-column: 1;
    grid-row: auto;
  }

  body.profile-mode-active :is(.profile-avatar-preview, .profile-avatar-flag.country-flag) {
    width: 82px;
    height: 54px;
  }

  body.profile-mode-active .profile-achievement-total {
    min-width: 0;
  }

  body.profile-mode-active .profile-hero-actions {
    grid-template-columns: 1fr 1fr;
  }

  body.profile-mode-active .profile-unlocked-list {
    grid-template-columns: 1fr;
    max-height: none;
  }

  body.profile-mode-active .profile-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  body.profile-mode-active .profile-danger-zone .danger-button {
    width: 100%;
  }
}

/* Final simulator-blue profile palette. Keep this after legacy profile rules. */
body.profile-mode-active,
body.profile-mode-active .profile-screen {
  color: #f2f7fa;
  background:
    radial-gradient(circle at 12% 8%, rgba(70, 198, 239, .2), transparent 26%),
    radial-gradient(circle at 88% 34%, rgba(0, 77, 109, .22), transparent 30%),
    linear-gradient(155deg, #056b91 0%, #045d80 52%, #045572 100%);
  background-attachment: fixed;
}

body.profile-mode-active .profile-header {
  border-bottom-color: rgba(180, 229, 247, .18);
  color: #f4f9fb;
  background: rgba(4, 83, 113, .9);
  box-shadow: 0 8px 28px rgba(0, 38, 56, .16);
}

body.profile-mode-active .profile-brand,
body.profile-mode-active .profile-nav-link,
body.profile-mode-active .profile-header-actions .utility-button {
  color: #eef8fb;
}

body.profile-mode-active .profile-nav-link {
  background: transparent;
}

body.profile-mode-active .profile-nav-link.is-active,
body.profile-mode-active .profile-nav-link[aria-current="page"] {
  color: #fff;
  background: rgba(42, 174, 218, .45);
}

body.profile-mode-active .profile-header-actions .utility-button {
  border-color: rgba(190, 230, 244, .2);
  background: rgba(5, 72, 98, .5);
}

body.profile-mode-active .profile-header-actions .profile-current-button {
  color: #fff;
  border-color: rgba(132, 218, 246, .36);
  background: rgba(5, 56, 80, .72);
}

@media (hover: hover) and (pointer: fine) {
  body.profile-mode-active .profile-nav-link:hover,
  body.profile-mode-active .profile-header-actions .utility-button:hover {
    color: #fff;
    border-color: rgba(190, 230, 244, .34);
    background: rgba(25, 137, 178, .48);
  }
}

body.profile-mode-active .profile-hero h1,
body.profile-mode-active .profile-preview strong,
body.profile-mode-active .profile-achievement-total strong,
body.profile-mode-active :is(.profile-section-heading, .profile-unlocked-heading, .profile-history-heading, .profile-danger-zone) h2 {
  color: #fff;
}

body.profile-mode-active .profile-hero p,
body.profile-mode-active .profile-preview span,
body.profile-mode-active .profile-unlocked-heading p,
body.profile-mode-active .profile-history-section > p,
body.profile-mode-active .profile-danger-zone p {
  color: #c5e3ee;
}

body.profile-mode-active .profile-account-overview,
body.profile-mode-active .profile-edit-panel,
body.profile-mode-active .profile-history-section,
body.profile-mode-active :is(.profile-unlocked-achievement, .profile-empty-state) {
  border-color: rgba(170, 222, 240, .24);
  color: #eef8fb;
  background: rgba(4, 66, 93, .58);
  box-shadow: 0 18px 55px rgba(0, 37, 55, .17);
  backdrop-filter: blur(14px);
}

body.profile-mode-active :is(.profile-avatar-preview, .profile-avatar-flag.country-flag) {
  border-color: rgba(185, 228, 243, .26);
  background: rgba(3, 60, 86, .62);
  box-shadow: inset 0 0 0 4px rgba(165, 222, 241, .08);
}

body.profile-mode-active .profile-achievement-total > div {
  border-color: rgba(178, 226, 243, .18);
  background: rgba(3, 59, 84, .5);
}

body.profile-mode-active .profile-achievement-total span,
body.profile-mode-active .profile-achievement-total strong:last-child,
body.profile-mode-active .profile-achievement-total i {
  color: #a8d5e5;
}

body.profile-mode-active .profile-edit-toggle {
  color: #064763;
  border-color: #bcecff !important;
  background: #d9f4ff !important;
}

body.profile-mode-active .profile-signout-button {
  color: #d7edf5;
  border-color: rgba(185, 228, 243, .18) !important;
  background: rgba(3, 54, 77, .48) !important;
}

body.profile-mode-active .profile-field > span,
body.profile-mode-active .profile-form label > span {
  color: #d7edf5;
}

body.profile-mode-active :is(.profile-form input, .profile-country-search, .profile-country-option) {
  border-color: rgba(178, 226, 243, .2);
  color: #f5fbfd;
  background: rgba(3, 54, 77, .48);
}

body.profile-mode-active .profile-unlocked-achievement strong {
  color: #fff;
}

body.profile-mode-active .profile-unlocked-achievement span,
body.profile-mode-active .profile-unlocked-achievement time,
body.profile-mode-active .profile-empty-state {
  color: #b9dae6;
}

body.profile-mode-active .profile-unlocked-achievement b {
  color: #dff8ff;
  background: rgba(48, 171, 211, .25);
}

body.profile-mode-active .profile-history-heading > strong {
  color: #d8f1f8;
  background: rgba(117, 204, 233, .16);
}

body.profile-mode-active .profile-tournament-history {
  scrollbar-color: rgba(148, 217, 240, .45) rgba(3, 54, 77, .45);
}

body.profile-mode-active .profile-danger-zone {
  border-color: rgba(255, 188, 199, .2);
  background: rgba(79, 37, 55, .34);
}