/* Chile 1962 uses the France 1998 component geometry as a restrained
   newsreel treatment: weathered greys, faded print and quiet film texture. */

body.retro-mode-active.retro-1962-active,
body.retro-1962-setup-active,
.mode-card-retro[data-retro-tournament-edition="1962"],
.tournament-history-screen[data-history-theme="1962"],
.profile-tournament-history-card[data-history-theme="1962"],
#championSaveTournament[data-history-theme="1962"],
#achievementsScreen[data-achievement-theme="1962"],
#retroAchievementsModal[data-achievement-theme="1962"],
.achievement-unlock-banner[data-achievement-theme="1962"],
#achievementUnlockModal[data-achievement-theme="1962"] {
  --classic-primary: #666863;
  --classic-primary-light: #c5c3bb;
  --classic-primary-dark: #333532;
  --classic-action: #356976;
  --classic-action-light: #5f8a91;
  --classic-action-dark: #25474e;
  --classic-tertiary: #b89058;
  --classic-bg: #383a37;
  --classic-bg-deep: #171918;
  --classic-surface: #4b4e4a;
  --classic-surface-deep: #252825;
  --classic-text: #f0eee6;
  --classic-muted: #bdbbb2;
  --classic-line: rgba(240, 238, 230, .34);
  --classic-line-soft: rgba(240, 238, 230, .16);
  --classic-shadow: rgba(0, 0, 0, .5);
  --classic-pitch-a: #555a51;
  --classic-pitch-b: #62675d;
  --classic-match-radius-panel: 3px;
  --classic-match-radius-control: 2px;
  --classic-match-radius-card: 2px;
  --classic-match-clock: #d1ba7b;
  --classic-match-live: #e17368;
  --classic-match-positive: #83ad8d;
  --classic-match-negative: #c78378;
  --classic-match-score-pop: #75c6d8;
  --classic-match-pitch-line: rgba(240, 238, 230, .7);
  --classic-match-header-art: linear-gradient(180deg, #747670 0%, #484a46 48%, #292b28 51%, #1d1f1d 100%);
  --classic-match-panel-art: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px), linear-gradient(180deg, #3f423e, #222422 92%);
  --classic-match-card-art: linear-gradient(155deg, rgba(255, 255, 255, .08), transparent 34%), linear-gradient(180deg, #444742, #282a28);
  --classic-match-card-selected-art: linear-gradient(155deg, rgba(255, 255, 255, .16), transparent 38%), linear-gradient(180deg, #60625d, #343633);
  --classic-match-control-art: linear-gradient(180deg, #8b8c86, #555752 52%, #30322f 54%);
  --classic-match-control-hover-art: linear-gradient(180deg, #a9aaa3, #686a64 52%, #3d3f3b 54%);
  --classic-match-action-art: linear-gradient(180deg, #73746e, #494a46 52%, #252624 54%);
  --classic-match-major-art: linear-gradient(90deg, #242523, #4b4c48 68%, #8d8675);
  --classic-match-input: rgba(25, 27, 25, .94);
  --classic-match-backdrop: rgba(6, 7, 6, .84);
  --classic-match-control-shadow: #161715;
  --classic-card-art:
    linear-gradient(145deg, rgba(255, 255, 255, .09), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #555853 0%, #333532 54%, #1d1f1d 100%);
  --classic-body-art:
    radial-gradient(ellipse at 50% -8%, rgba(245, 243, 233, .14), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #464944 0%, #2b2d2a 52%, #151715 100%);
}

#achievementsScreen[data-achievement-theme="1962"],
#retroAchievementsModal[data-achievement-theme="1962"],
.achievement-unlock-banner[data-achievement-theme="1962"],
#achievementUnlockModal[data-achievement-theme="1962"] {
  --achievement-accent: var(--classic-match-clock);
  --achievement-accent-text: var(--classic-bg-deep);
  --achievement-surface: var(--classic-surface);
  --achievement-surface-deep: var(--classic-bg-deep);
  --achievement-tab-surface: rgba(23, 25, 24, .88);
  --achievement-card: rgba(75, 78, 74, .9);
  --achievement-card-complete: #5a5d57;
  --achievement-copy: var(--classic-text);
  --achievement-muted: var(--classic-muted);
  --achievement-points: var(--classic-match-clock);
  --achievement-shadow: var(--classic-shadow);
}

#achievementsScreen[data-achievement-theme="1962"],
#retroAchievementsModal[data-achievement-theme="1962"] {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: var(--classic-body-art) !important;
}

.achievement-unlock-banner[data-achievement-theme="1962"],
#achievementUnlockModal[data-achievement-theme="1962"] {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: var(--classic-body-art) !important;
}

#achievementUnlockModal[data-achievement-theme="1962"]::backdrop {
  background: var(--classic-match-backdrop) !important;
}

[data-achievement-theme="1962"] :is(.achievement-unlock-banner-mark, .achievement-unlock-mark),
#achievementUnlockModal[data-achievement-theme="1962"] .achievement-unlock-action {
  border-color: var(--classic-match-clock) !important;
  color: var(--classic-bg-deep) !important;
  background: var(--classic-match-clock) !important;
}

[data-achievement-theme="1962"] :is(.achievement-country img, .country-flag, .flag-orb) {
  filter: none !important;
}

body.retro-mode-active.retro-1962-active,
body.retro-1962-setup-active {
  --retro-98-blue: var(--classic-primary);
  --retro-98-deep: var(--classic-surface-deep);
  --retro-98-navy: var(--classic-bg-deep);
  --retro-98-red: var(--classic-action);
  --retro-98-silver: var(--classic-muted);
  --retro-98-chrome: var(--classic-primary-light);
  --retro-98-white: var(--classic-text);
  --retro-98-muted: var(--classic-muted);
  --r98-sage: var(--classic-primary-light);
  --r98-sage-light: var(--classic-primary-light);
  --r98-green: var(--classic-primary-dark);
  --r98-deep-green: var(--classic-surface-deep);
  --r98-forest: var(--classic-surface);
  --r98-forest-deep: var(--classic-surface-deep);
  --r98-burgundy: var(--classic-action-dark);
  --r98-pink: var(--classic-action);
  --r98-cream: var(--classic-text);
  --r98-muted: var(--classic-muted);
  --r98-chrome: var(--classic-muted);
  --retro-accent: var(--classic-primary);
  --retro-accent-text: var(--classic-text);
  --q22-ink: var(--classic-bg-deep);
  --q22-ink-soft: var(--classic-surface-deep);
  --q22-panel: var(--classic-surface);
  --q22-panel-soft: color-mix(in srgb, var(--classic-surface-deep) 92%, var(--classic-primary));
  --q22-wine: var(--classic-primary);
  --q22-wine-bright: var(--classic-primary-light);
  --q22-gold: var(--classic-match-clock);
  --q22-gold-soft: color-mix(in srgb, var(--classic-match-clock) 52%, var(--classic-text));
  --q22-cream: var(--classic-text);
  --q22-white: var(--classic-text);
  --q22-muted: var(--classic-muted);
  --q22-line: var(--classic-line);
  --q22-line-soft: var(--classic-line-soft);
  --q22-panel: var(--classic-surface);
  --q22-panel-deep: var(--classic-surface-deep);
  color: var(--classic-text) !important;
  background-color: var(--classic-bg-deep) !important;
  background-image: var(--classic-body-art) !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Edition browser and the compact simulator card. */
.competition-edition-tile.edition-wc-1962 {
  border-color: var(--edition-line, rgba(255, 255, 255, .22));
  color: #fff;
  background: var(--edition-art);
}

.competition-edition-tile.edition-wc-1962 {
  --edition-line: rgba(232, 230, 222, .42);
  --edition-art: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 28%), linear-gradient(145deg, #5a5d58, #343633 58%, #1b1d1b);
}

.competition-edition-tile.edition-wc-1962 .competition-edition-art img {
  width: 88%;
  height: 88%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .32));
}

.mode-card-retro[data-retro-tournament-edition="1962"] {
  border-color: var(--classic-line) !important;
  background: var(--classic-card-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 22px 56px var(--classic-shadow) !important;
}

.mode-card-retro[data-retro-tournament-edition="1962"]::after {
  border-color: color-mix(in srgb, var(--classic-action) 30%, transparent) !important;
}

.mode-card-retro[data-retro-tournament-edition="1962"] :is(h3, .landing-setting-heading > span, .landing-team-setting > span) {
  color: var(--classic-text) !important;
}

.mode-card-retro[data-retro-tournament-edition="1962"] :is(.retro-competition-switch, .retro-year-switch, .landing-segmented) {
  border-color: var(--classic-line-soft) !important;
  background: color-mix(in srgb, var(--classic-bg-deep) 76%, transparent) !important;
}

.mode-card-retro[data-retro-tournament-edition="1962"] :is(.retro-start-button:not(:disabled), .retro-year-switch button.active) {
  border-color: var(--classic-line) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-action-light), var(--classic-action) 54%, var(--classic-action-dark) 56%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 5px 0 var(--classic-action-dark) !important;
}

.mode-card-retro[data-retro-tournament-edition="1962"] .retro-mode-heading > img {
  width: 92px;
  height: 92px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px var(--classic-shadow));
}

/* Shared France 1998 geometry recast as Chile 1962 newsreel chrome. */
body.retro-mode-active.retro-1962-active .retro-tournament-screen,
body.retro-1962-setup-active .retro-tournament-screen {
  color: var(--classic-text) !important;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--classic-bg-deep) 74%, transparent)) !important;
}

body.retro-mode-active.retro-1962-active .retro-screen-header,
body.retro-1962-setup-active .retro-screen-header {
  border-bottom-color: var(--classic-line) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--classic-primary-light) 58%, #fff 12%), var(--classic-primary-dark) 36%, var(--classic-surface-deep) 38%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .34), 0 8px 22px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1962-active :is(.retro-main-section-switch, .retro-view-tabs),
body.retro-1962-setup-active .retro-main-section-switch {
  border-color: var(--classic-line) !important;
  background: color-mix(in srgb, var(--classic-bg-deep) 78%, transparent) !important;
}

body.retro-mode-active.retro-1962-active :is(.retro-main-section-switch a.is-active, .retro-view-tabs button.active),
body.retro-1962-setup-active .retro-main-section-switch a.is-active {
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-action-light), var(--classic-action) 54%, var(--classic-action-dark) 56%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .36), 0 2px 0 var(--classic-action-dark) !important;
}

body.retro-mode-active.retro-1962-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart),
body.retro-1962-setup-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: color-mix(in srgb, var(--classic-surface) 72%, transparent) !important;
}

/* Direct-route setup matches the other World Cup setup screens: navigation
   moves straight into the controls without a second, oversized title card. */
body.retro-1962-setup-active .retro-route-setup-identity {
  display: none !important;
}

body.retro-1962-setup-active .retro-route-setup-controls {
  border-color: var(--classic-line) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--classic-primary) 38%, transparent), var(--classic-surface) 44%, var(--classic-surface-deep) 76%, color-mix(in srgb, var(--classic-action) 35%, var(--classic-surface-deep))) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .26), inset 0 -1px var(--classic-bg-deep), 0 22px 50px var(--classic-shadow) !important;
}

body.retro-1962-setup-active .retro-route-setup-controls .landing-setting {
  border-color: var(--classic-line-soft) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--classic-surface) 92%, #fff 5%), color-mix(in srgb, var(--classic-surface-deep) 92%, transparent)) !important;
}

body.retro-1962-setup-active .retro-route-setup-controls :is(.landing-setting-heading > span, .landing-team-setting > span) {
  color: var(--classic-text) !important;
}

body.retro-route-setup-active:is(.retro-1962-setup-active) :is(
  .retro-tournament-heading, .retro-view-tabs, #mainContent
) {
  display: none !important;
}

body.retro-1962-setup-active .retro-route-setup-controls :is(.landing-setting-info summary, .segmented) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-muted) !important;
  background: color-mix(in srgb, var(--classic-bg-deep) 72%, transparent) !important;
}

body.retro-1962-setup-active .retro-route-setup-controls :is(.segmented button.active, .retro-inline-achievement-filter[aria-pressed="true"], .retro-inline-team-option.is-selected) {
  border-color: var(--classic-line) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-action-light), var(--classic-action) 54%, var(--classic-action-dark) 56%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 2px 0 var(--classic-action-dark) !important;
}

body.retro-1962-setup-active :is(.retro-inline-achievement-filter, .retro-inline-team-option) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--classic-surface) 88%, #fff 4%), var(--classic-surface-deep)) !important;
}

body.retro-1962-setup-active :is(.retro-inline-team-option small, .retro-inline-team-count) {
  color: var(--classic-muted) !important;
}

body.retro-1962-setup-active .retro-start-button:not(:disabled) {
  border-color: var(--classic-line) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-action-light), var(--classic-action) 52%, var(--classic-action-dark) 55%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 5px 0 var(--classic-action-dark), 0 10px 22px var(--classic-shadow) !important;
}

/* Keep the tournament header compact, matching the other World Cup modes. */
body.retro-mode-active.retro-1962-active .retro-tournament-screen .retro-tournament-heading {
  display: none !important;
}

/* Cards, tables, bracket and match surfaces. */
body.retro-mode-active.retro-1962-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: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background-color: var(--classic-surface-deep) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .13), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--classic-surface) 92%, #fff 5%), color-mix(in srgb, var(--classic-surface-deep) 96%, transparent)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 14px 34px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1962-active :is(.primary-button, #mainContent .primary-button, .snapshot-actions button) {
  border-color: var(--classic-line) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-action-light), var(--classic-action) 48%, var(--classic-action-dark) 51%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .45), 0 5px 0 var(--classic-action-dark), 0 9px 20px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.round-heading, .round-title, .bracket-round-heading, .bracket-round-title, .bracket-round-header, .bracket-header, .bracket-column > h3),
body.retro-mode-active.retro-1962-active :is(.retro-group-table h2, .retro-section-heading) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(90deg, var(--classic-primary-dark), var(--classic-surface) 68%, var(--classic-action-dark)) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.bracket-card, .bracket-match, .third-place-card) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--classic-surface) 92%, #fff 6%), var(--classic-surface-deep)) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.bracket-connector::before, .bracket-connector::after, .bracket-line) {
  border-color: var(--classic-line) !important;
  background: var(--classic-line) !important;
}

body.retro-mode-active.retro-1962-active :is(.retro-table-head, .retro-table-row, .retro-match-schedule, .retro-fixture-details, .match-meta, .fixture-meta),
body.retro-mode-active.retro-1962-active #mainContent :is(.champion-stage p, .champion-stage small) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent .retro-group-table .retro-table-head {
  background-color: var(--classic-surface-deep) !important;
  background-image: none !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent .retro-group-table .retro-table-row {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-muted) !important;
  background-color: #343733 !important;
  background-image: none !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent .retro-group-table .retro-table-row:nth-child(even) {
  background-color: #2d302d !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent .retro-group-table .retro-table-row > span strong {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1962-active .retro-table-row.qualified,
body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent .retro-group-table .retro-table-row.qualified {
  border-left-color: var(--classic-primary-light) !important;
  background: var(--classic-match-card-selected-art) !important;
  box-shadow: inset 4px 0 var(--classic-primary-light) !important;
}

body.retro-mode-active.retro-1962-active :is(.retro-view-tabs button, .retro-filter-row button, .retro-group-controls button, .retro-squad-tabs button) {
  color: var(--classic-muted) !important;
  background: color-mix(in srgb, var(--classic-bg-deep) 72%, transparent) !important;
}

body.retro-mode-active.retro-1962-active :is(.retro-view-tabs button.active, .retro-filter-row button.active, .retro-group-controls button.active, .retro-squad-tabs button.active) {
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-primary-light), var(--classic-primary) 52%, var(--classic-primary-dark) 54%) !important;
}

body.retro-mode-active.retro-1962-active :is(input, select, .team-filter-control, .search-control) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: color-mix(in srgb, var(--classic-bg-deep) 86%, transparent) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.match-commentary-view, .match-commentary-feed, .commentary-bar, .commentary-feed, .live-commentary, .match-commentary) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(90deg, var(--classic-surface-deep), color-mix(in srgb, var(--classic-primary) 56%, var(--classic-surface-deep)), color-mix(in srgb, var(--classic-action) 42%, var(--classic-surface-deep))) !important;
}

body.retro-mode-active.retro-1962-active #mainContent .match-commentary-feed .commentary-line {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: color-mix(in srgb, var(--classic-surface-deep) 78%, transparent) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.standard-match-tactics, .standard-tactic-buttons) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(150deg, var(--classic-surface), var(--classic-surface-deep) 66%, color-mix(in srgb, var(--classic-action) 25%, var(--classic-surface-deep))) !important;
}

body.retro-mode-active.retro-1962-active #mainContent .standard-tactic-buttons button {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--classic-surface) 90%, #fff 7%), var(--classic-surface-deep)) !important;
}

body.retro-mode-active.retro-1962-active #mainContent .standard-tactic-buttons button.active {
  border-color: var(--classic-line) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--classic-action-light), var(--classic-action)) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.penalty-scene, .match-penalty-scene, .standard-penalty-scene, .retro-manager-pitch, .lineup-pitch, .match-2d-pitch) {
  border-color: var(--classic-line) !important;
  background-color: var(--classic-pitch-a) !important;
  background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), repeating-linear-gradient(90deg, var(--classic-pitch-a) 0 12.5%, var(--classic-pitch-b) 12.5% 25%) !important;
  box-shadow: inset 0 0 36px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button {
  border-color: var(--classic-text) !important;
  background: color-mix(in srgb, var(--classic-action) 34%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--classic-primary) 24%, transparent) !important;
}

body.retro-mode-active.retro-1962-active #mainContent .shootout-summary-row.missed i {
  background: var(--classic-action) !important;
}

body.retro-mode-active.retro-1962-active :is(.snapshot-modal, .snapshot-modal form),
body.retro-mode-active.retro-1962-active #mainContent .champion-stage {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--classic-primary) 56%, var(--classic-surface)), var(--classic-surface-deep) 62%, color-mix(in srgb, var(--classic-action) 38%, var(--classic-surface-deep))) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .32), 0 22px 54px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1962-active #mainContent .champion-stage :is(.champion-content, .champion-podium, .champion-place, .champion-award, .champion-extra-awards > *, .prediction-result, .award-card, .final-standing, .champion-action-card) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--classic-surface) 88%, #fff 5%), var(--classic-surface-deep)) !important;
}

body.retro-mode-active.retro-1962-active #mainContent .champion-stage .champion-award-mark {
  color: var(--classic-action-light) !important;
}

/* Complete classic match presentation. Chile 1962 keeps the compact France
   1998 information architecture while every visible match state is repainted
   through weathered newsreel chrome after the legacy guards. */
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .stage-column, .match-stage, .match-analysis, .round-board, .panel,
  .retro-match-lineups-panel, .retro-manager-lineup, .retro-live-ratings-side,
  .standard-match-tactics, .penalty-stage, .match-penalty-overlay, .spoiler-panel,
  .match-pitch-shell, .match-2d-viewer
) {
  border-color: var(--classic-line) !important;
  border-radius: var(--classic-match-radius-panel) !important;
  color: var(--classic-text) !important;
  background-color: var(--classic-surface-deep) !important;
  background-image: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 14px 30px var(--classic-shadow) !important;
}

/* Keep the score and teams on one restrained surface without nested cards. */
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-column {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stage {
  border: 1px solid var(--classic-line) !important;
  border-radius: var(--classic-match-radius-panel) !important;
  background-color: var(--classic-surface-deep) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--classic-surface) 76%, var(--classic-surface-deep)),
    var(--classic-surface-deep) 82%
  ) !important;
  box-shadow: 0 12px 24px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) [hidden],
body.retro-1962-setup-active [hidden] {
  display: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .stage-column, .match-stage, .match-analysis, .round-board, .panel,
  .fixture-grid, .standard-match-tactics, .retro-match-lineups-panel
)::before,
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .stage-column, .match-stage, .match-analysis, .round-board, .panel,
  .fixture-grid, .standard-match-tactics, .retro-match-lineups-panel
)::after {
  content: none !important;
  display: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-topline {
  position: relative;
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 4px 10px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--classic-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-topline::before {
  display: none !important;
  content: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.stage-round, .match-number) {
  border: 0 !important;
  color: var(--classic-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-round {
  position: static !important;
  inset: auto !important;
  width: 100%;
  text-align: center;
  transform: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.panel-heading, .match-analysis-heading, .section-heading) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-header-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .panel-heading span, .panel-heading strong, .match-analysis-heading strong,
  .section-heading h2, .section-heading h3, .section-heading strong
) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .matchup {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: transparent !important;
}

/* Completed matches keep the score, flags and scorer lists in the optical
   centre of the result panel instead of pinning the whole result to its top. */
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stage.is-finished .matchup {
  align-content: center !important;
  align-items: center !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stage.is-finished .matchup > .team {
  justify-content: center !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stage.is-finished .score-zone {
  align-self: center !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stage.is-finished .scoreline {
  transform: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .matchup > .team {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--classic-text) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .team-name {
  color: var(--classic-text) !important;
  text-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-score, .score-separator) {
  color: var(--classic-text) !important;
  text-shadow: 0 2px 6px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-score.score-pop {
  color: var(--classic-match-score-pop) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.seed, .discipline, .team-match-events, .event-side) {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.country-flag, .retro-lineup-flag) {
  box-shadow: 0 3px 8px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .matchup :is(.flag-orb, .country-flag) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.event-live-clock, .score-live-clock, #eventLiveClock) {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--classic-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.event-live-clock, .score-live-clock) > span,
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.event-live-clock, .score-live-clock) > span i {
  color: var(--classic-match-live) !important;
  border-color: var(--classic-match-live) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.event-live-clock, .score-live-clock) > span i {
  background: var(--classic-match-live) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--classic-match-live) 20%, transparent), 0 0 9px var(--classic-match-live) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.event-live-clock strong, .score-live-clock strong, #liveClock) {
  color: var(--classic-match-clock) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--classic-match-clock) 42%, transparent) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.event-live-clock small, .score-live-clock small, #livePhase) {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .result-note {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--classic-match-clock) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep Snapshot in its familiar position: a compact camera control at the
   top-left of the match or champion card. */
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #snapshotButton:not([hidden]) {
  position: absolute !important;
  inset: 16px auto auto 20px !important;
  z-index: 6;
  display: inline-grid !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  place-items: center;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #snapshotButton svg {
  display: block !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-action {
  border: 0 !important;
  border-top: 1px solid var(--classic-line-soft) !important;
  border-radius: 0 0 var(--classic-match-radius-panel) var(--classic-match-radius-panel) !important;
  background: color-mix(in srgb, var(--classic-surface-deep) 86%, transparent) !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .secondary-button, .live-control, .text-button, .history-round-button,
  .retro-lineup-tabs button, .match-highlight-mode button, .match-pitch-toggle
) {
  border: 1px solid var(--classic-line) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-control-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 4px 0 var(--classic-match-control-shadow) !important;
  clip-path: none !important;
  transition: transform 140ms cubic-bezier(.2, .8, .2, 1), filter 140ms ease, border-color 140ms ease !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .primary-button, .play-button, .stage-action > button, .snapshot-card-button,
  .standard-tactic-buttons button.active, .retro-lineup-tabs button.active
) {
  border: 1px solid var(--classic-line) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: #fff !important;
  background: var(--classic-match-action-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 4px 0 var(--classic-action-dark), 0 8px 18px var(--classic-shadow) !important;
  clip-path: none !important;
  transition: transform 140ms cubic-bezier(.2, .8, .2, 1), filter 140ms ease, border-color 140ms ease !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .live-control[aria-pressed="true"], .text-button[aria-pressed="true"],
  .history-round-button[aria-pressed="true"], .match-highlight-mode button.active
) {
  border-color: var(--classic-text) !important;
  background: var(--classic-match-action-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 2px 0 var(--classic-action-dark) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(button, input, select):focus-visible {
  outline: 3px solid var(--classic-match-clock) !important;
  outline-offset: 2px !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(button, input, select):disabled {
  filter: saturate(.35) !important;
  opacity: .58 !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent button:active:not(:disabled) {
  transform: scale(.97) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
    .secondary-button, .live-control, .text-button, .history-round-button,
    .match-highlight-mode button, .match-pitch-toggle
  ):hover:not(:disabled) {
    border-color: var(--classic-text) !important;
    background: var(--classic-match-control-hover-art) !important;
    filter: brightness(1.05) !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
    .primary-button, .play-button, .stage-action > button, .snapshot-card-button,
    .retro-lineup-tabs button.active
  ):hover:not(:disabled) {
    border-color: #fff !important;
    background: var(--classic-match-action-art) !important;
    filter: brightness(1.13) !important;
  }
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-analysis :is(.match-stats-grid, .match-stat-row) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: transparent !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stat-row :is(b, span) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stat-row span {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-stats-empty {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-live-table-head {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-header-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-live-table-row {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background-color: color-mix(in srgb, var(--classic-surface-deep) 82%, transparent) !important;
  background-image: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-live-table-row.qualification-place {
  border-left-color: var(--classic-match-live) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--classic-primary) 44%, transparent), color-mix(in srgb, var(--classic-surface-deep) 82%, transparent)) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-live-table-row :is(strong, b, span, em) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #fixtureGrid.fixture-grid {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture {
  border: 1px solid var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-card-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 7px 16px var(--classic-shadow) !important;
  clip-path: none !important;
  transition: transform 140ms cubic-bezier(.2, .8, .2, 1), border-color 140ms ease, filter 140ms ease !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture.selected {
  border-color: var(--classic-match-clock) !important;
  background: var(--classic-match-card-selected-art) !important;
  box-shadow: inset 4px 0 var(--classic-action), 0 8px 18px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture-card-head {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-muted) !important;
  background: color-mix(in srgb, var(--classic-bg-deep) 52%, transparent) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture-card-head :is(span, small) {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture-team :is(.name, b) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture-team.winner :is(.name, b) {
  color: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture-winner-marker {
  border-color: transparent transparent transparent var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-standard-fixture-meta {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-muted) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .fixture:hover {
    border-color: var(--classic-line) !important;
    background: var(--classic-match-card-selected-art) !important;
    filter: brightness(1.06) !important;
    transform: translateY(-2px) !important;
  }
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.team-filter-control, .team-filter-search, #teamSearch, input, select) {
  border-color: var(--classic-line) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
  box-shadow: inset 0 1px 5px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(input, select)::placeholder {
  color: var(--classic-muted) !important;
  opacity: .8;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.team-filter-control, .round-board) .search-result-popover {
  border: 1px solid var(--classic-line) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: 0 14px 30px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .search-result-popover :is(button, .search-result) {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .search-result-popover :is(button, .search-result):is(:focus-visible, .selected) {
  color: #fff !important;
  background: var(--classic-match-action-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .match-commentary-view, .match-commentary-feed, .commentary-bar,
  .commentary-feed, .live-commentary, .match-commentary
) {
  border: 1px solid var(--classic-line) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-commentary-feed:is(.is-major, .is-goal) {
  border-color: var(--classic-match-clock) !important;
  color: #fff !important;
  background: var(--classic-match-major-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-commentary-feed.is-goal-flashing {
  border-color: var(--goal-flash-color, var(--classic-match-clock)) !important;
  color: var(--goal-flash-text-color, #fff) !important;
  background: var(--goal-flash-color, var(--classic-match-major-art)) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-commentary-feed .commentary-line {
  border-color: var(--classic-line-soft) !important;
  color: inherit !important;
  background: color-mix(in srgb, var(--classic-match-input) 82%, transparent) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-commentary-feed .commentary-line :is(span, strong, small, b) {
  color: inherit !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.team-match-events, .event-side) {
  border: 0 !important;
  color: var(--classic-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .team-match-events :is(
  .event, .timeline-event, .timeline-event.goal-event,
  .timeline-event.red-event, .timeline-event.injury-event
) {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--classic-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .discipline-card {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-match-tactics {
  border-radius: var(--classic-match-radius-panel) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 12px 26px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-match-tactics > span {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-header-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-tactic-buttons {
  border: 1px solid var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-card) !important;
  background: var(--classic-match-input) !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-tactic-buttons button:not(.active) {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-control-art) !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-match-tactics > small {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-muted) !important;
  background: color-mix(in srgb, var(--classic-action-dark) 34%, var(--classic-match-input)) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-tactic-buttons button:hover:not(:disabled):not(.active) {
    border-color: var(--classic-text) !important;
    background: var(--classic-match-control-hover-art) !important;
  }
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .standard-tactic-buttons button.active {
  border-color: #f0eee6 !important;
  color: #171918 !important;
  background: linear-gradient(180deg, #f0eee6, #b9b6aa) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-match-lineups-panel {
  overflow: hidden;
  border-radius: var(--classic-match-radius-panel) !important;
  background: var(--classic-match-panel-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-match-lineups-panel > summary {
  border-bottom: 1px solid var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-header-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-lineup-workspace, .retro-lineups-grid, .retro-manager-layout, .retro-manager-section) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background-color: transparent !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .retro-lineup-tabs, .retro-manager-lineup, .retro-live-ratings-side,
  .retro-manager-player, .retro-live-rating-row, .player-card,
  .bench-player, .lineup-player, .lineup-player-card
) {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-card-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-manager-lineup, .retro-live-ratings-side) > header,
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-lineup-side header {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-header-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .retro-manager-lineup header strong, .retro-live-ratings-side header strong,
  .retro-manager-section-title strong, .retro-manager-player strong,
  .retro-live-rating-row strong
) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .retro-manager-lineup header small, .retro-live-ratings-side header small,
  .retro-manager-section-title span, .retro-formation-badge, .retro-manager-player b
) {
  color: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-player:is(.is-selected, .is-drop-target, .is-preview-out) {
  border-color: var(--classic-match-clock) !important;
  background: var(--classic-match-card-selected-art) !important;
  box-shadow: inset 4px 0 var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-player.is-bench {
  background: var(--classic-match-input) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-pitch {
  border-color: var(--classic-match-pitch-line) !important;
  border-radius: var(--classic-match-radius-card) !important;
  background-color: var(--classic-pitch-a) !important;
  background-image: linear-gradient(90deg, transparent 49.75%, var(--classic-match-pitch-line) 49.75% 50.25%, transparent 50.25%), repeating-linear-gradient(90deg, var(--classic-pitch-a) 0 12.5%, var(--classic-pitch-b) 12.5% 25%) !important;
  box-shadow: inset 0 0 36px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-pitch::before,
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-pitch::after,
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-pitch-halfway, .retro-pitch-circle) {
  border-color: var(--classic-match-pitch-line) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player {
  color: var(--classic-text) !important;
  text-shadow: 0 1px 4px var(--classic-bg-deep) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player b {
  border-color: var(--classic-text) !important;
  color: #fff !important;
  background: var(--classic-primary) !important;
  box-shadow: 0 2px 6px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player i {
  color: var(--classic-bg-deep) !important;
  background: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player:is(.is-selected, .is-drop-target) b {
  border-color: var(--classic-match-clock) !important;
  color: var(--classic-bg-deep) !important;
  background: var(--classic-text) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--classic-match-clock) 30%, transparent) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player.is-preview-in :is(b, i) {
  border-color: var(--classic-match-positive) !important;
  background: var(--classic-match-positive) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player.is-missing :is(b, i) {
  border-color: var(--classic-match-negative) !important;
  color: #fff !important;
  background: var(--classic-action-dark) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-player.is-injured :is(b, i) {
  border-color: var(--classic-match-clock) !important;
  color: var(--classic-bg-deep) !important;
  background: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-pitch-player small.is-up, .retro-live-rating-row > i.is-up) {
  color: var(--classic-match-positive) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-pitch-player small.is-down, .retro-live-rating-row > i.is-down) {
  color: var(--classic-match-negative) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-live-rating-row > b.is-excellent, .retro-pitch-player i.is-excellent) {
  border-color: var(--classic-match-positive) !important;
  color: var(--classic-match-positive) !important;
  background: color-mix(in srgb, var(--classic-match-positive) 16%, var(--classic-bg-deep)) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-live-rating-row > b.is-good, .retro-pitch-player i.is-good) {
  border-color: color-mix(in srgb, var(--classic-match-positive) 72%, var(--classic-text)) !important;
  color: color-mix(in srgb, var(--classic-match-positive) 72%, var(--classic-text)) !important;
  background: color-mix(in srgb, var(--classic-match-positive) 12%, var(--classic-bg-deep)) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-live-rating-row > b.is-average, .retro-pitch-player i.is-average) {
  border-color: var(--classic-match-clock) !important;
  color: var(--classic-match-clock) !important;
  background: color-mix(in srgb, var(--classic-match-clock) 14%, var(--classic-bg-deep)) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.retro-live-rating-row > b.is-poor, .retro-pitch-player i.is-poor) {
  border-color: var(--classic-match-negative) !important;
  color: var(--classic-match-negative) !important;
  background: color-mix(in srgb, var(--classic-match-negative) 14%, var(--classic-bg-deep)) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-sub-counter {
  border-color: var(--classic-line) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-pitch-sub-counter.is-pending {
  border-color: var(--classic-match-clock) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--classic-match-clock) 20%, transparent) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-stage, .match-penalty-overlay) {
  border-radius: var(--classic-match-radius-panel) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 18px 38px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-stage-head, .match-penalty-decision, .penalty-call, .penalty-ledgers) {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-stage-head {
  background: var(--classic-match-header-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-stage-head :is(span, strong, strong b, strong i),
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-penalty-decision, .penalty-call, .penalty-ledgers) :is(strong, span, small, b) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-stage-head strong b.score-pop {
  color: var(--classic-match-score-pop) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-scene, .match-penalty-scene, .standard-penalty-scene) {
  border-color: var(--classic-match-pitch-line) !important;
  border-radius: var(--classic-match-radius-card) !important;
  background-color: var(--classic-pitch-a) !important;
  background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), repeating-linear-gradient(90deg, var(--classic-pitch-a) 0 12.5%, var(--classic-pitch-b) 12.5% 25%) !important;
  box-shadow: inset 0 0 34px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-goal, .penalty-net) {
  border-color: var(--classic-match-pitch-line) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-keeper, .penalty-taker) :is(i, b) {
  border-color: var(--classic-text) !important;
  background: var(--classic-primary) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-ball {
  border-color: var(--classic-bg-deep) !important;
  background: var(--classic-text) !important;
  box-shadow: 0 2px 5px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 2px solid var(--classic-text) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--classic-action) 36%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--classic-primary) 28%, transparent) !important;
  clip-path: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button:is(:focus-visible, [aria-pressed="true"]) {
  border-color: var(--classic-match-clock) !important;
  background: var(--classic-action) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--classic-match-clock) 42%, transparent) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button:hover:not(:disabled) {
    border-color: var(--classic-match-clock) !important;
    background: var(--classic-action) !important;
  }
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-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: 1px solid var(--classic-line) !important;
  border-radius: 50% !important;
  background: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-mark.goal, .shootout-summary-row.scored i) {
  border-color: var(--classic-match-positive) !important;
  background: var(--classic-match-positive) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-mark.miss, .shootout-summary-row.missed i) {
  border-color: var(--classic-match-negative) !important;
  background: var(--classic-match-negative) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-mark.pending {
  border-color: var(--classic-line) !important;
  background: transparent !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-stage:is(.is-awaiting-choice, .is-keeper-choice) {
  border-color: var(--classic-match-clock) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 0 0 3px color-mix(in srgb, var(--classic-match-clock) 20%, transparent), 0 18px 38px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .penalty-stage.is-paused {
  filter: saturate(.58) brightness(.78) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .shootout-summary-row {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .spoiler-panel {
  border-color: var(--classic-match-clock) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 4px 0 var(--classic-action), 0 14px 30px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .spoiler-panel :is(.spoiler-icon, strong) {
  color: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .spoiler-panel p {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #matchPitchShell {
  --shared-live-accent: #aaa89f;
  --shared-live-accent-text: #1b1c1a;
  --shared-live-surface: #1b1d1b;
  --shared-live-panel: #363834;
  --shared-live-border: rgba(240, 238, 230, .28);
  --match-pitch-accent: #aaa89f;
  --match-pitch-accent-text: #1b1c1a;
  --match-pitch-surface: #1b1d1b;
  --match-pitch-panel: #363834;
  --match-pitch-border: rgba(240, 238, 230, .28);
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-pitch-shell-header, .match-2d-toolbar, .match-2d-footer, .match-pitch-playback) {
  border-color: var(--classic-line-soft) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .match-highlight-mode,
  .authored-action-preview-controls.authored-test-match-controls,
  .authored-action-preview-commentary
) {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .authored-action-preview-commentary:is([data-type="goal"], [data-emphasis="goal"], .is-goal-flashing) {
  border-color: var(--classic-match-clock) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-major-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(
  .authored-test-match-timeline-progress,
  .authored-test-match-timeline-half,
  .authored-test-match-timeline-full
) {
  background: var(--classic-primary-light) !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .authored-test-match-timeline-playhead {
  border-color: var(--classic-surface-deep) !important;
  background: var(--classic-text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--classic-primary-light) 34%, transparent) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-pitch-shell-title, .match-pitch-shell-title strong, .match-2d-event, .match-2d-toolbar span, .match-pitch-playback span, .match-pitch-playback b) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-2d-toolbar small, .match-pitch-playback small, .match-pitch-pause-label) {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-2d-pitch {
  border-color: var(--classic-match-pitch-line) !important;
  border-radius: var(--classic-match-radius-card) !important;
  background-color: var(--classic-pitch-a) !important;
  background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), repeating-linear-gradient(90deg, var(--classic-pitch-a) 0 12.5%, var(--classic-pitch-b) 12.5% 25%) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-2d-event {
  border-color: var(--classic-line) !important;
  background: var(--classic-match-major-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-pitch-speed button {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-control-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .match-pitch-speed button[aria-pressed="true"] {
  border-color: var(--classic-match-clock) !important;
  background: var(--classic-match-action-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 2px 0 var(--classic-match-control-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #matchPitchShell :is(
  #eventControls .live-control,
  #eventControls .live-speed-options button,
  .pl-pitch-make-subs
) {
  border: 1px solid var(--classic-line) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-control-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 4px 0 var(--classic-match-control-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #matchPitchShell :is(
  #eventControls .live-control[aria-pressed="true"],
  #eventControls .live-speed-options button:is([aria-checked="true"], .is-selected)
) {
  border-color: var(--classic-text) !important;
  background: var(--classic-match-action-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 2px 0 var(--classic-match-control-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #matchPitchShell .live-speed-popover {
  border-color: var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: 0 12px 28px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #matchPitchShell #matchHighlightMode button {
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 3px 0 var(--classic-match-control-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent #matchPitchShell #matchHighlightMode button:is(.active, [aria-pressed="true"]) {
  border-color: var(--classic-text) !important;
  background: var(--classic-match-action-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 2px 0 var(--classic-match-control-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage {
  border-color: var(--classic-line) !important;
  border-radius: var(--classic-match-radius-panel) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 22px 48px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage .trophy {
  color: var(--classic-text) !important;
  background: var(--classic-match-header-art) !important;
  font-size: clamp(15px, 1.5vw, 20px) !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 4px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage :is(.champion-content, .champion-podium, .champion-place, .champion-award, .champion-extra-awards > *, .prediction-result, .award-card, .final-standing, .champion-action-card) {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-card-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage .champion-place {
  border-color: var(--classic-line-soft) !important;
  background: linear-gradient(180deg, #4a4d48, #2b2d2a) !important;
  box-shadow: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage .champion-place.place-1 {
  border-color: var(--classic-line) !important;
  background: linear-gradient(180deg, #5a5c57, #31332f) !important;
  box-shadow: inset 0 3px var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage .champion-place > b {
  color: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage :is(h2, h3, strong, b, span) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage :is(p, small) {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-stage .champion-award-mark {
  color: #fff !important;
  background: var(--classic-action) !important;
}

/* This edition begins at the quarter-finals, so it only needs eight bracket
   rows. Third place shares the final column directly beneath the final. */
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .bracket-canvas {
  grid-template-rows: repeat(8, 48px) !important;
  padding-bottom: 12px !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-third-place-playoff {
  grid-column: 3 !important;
  grid-row: 5 / span 3 !important;
  align-self: start;
  gap: 8px;
  padding: 28px 0 0 !important;
  color: var(--classic-match-clock) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .champion-save-button {
  border-color: var(--classic-line) !important;
  border-radius: var(--classic-match-radius-control) !important;
  color: #fff !important;
  background: var(--classic-match-action-art) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) :is(.snapshot-modal, .confirm-modal),
body.retro-mode-active.retro-1998-active:is(.retro-1962-active) :is(.snapshot-modal, .confirm-modal) form {
  border-color: var(--classic-line) !important;
  border-radius: var(--classic-match-radius-panel) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 28px 68px var(--classic-shadow) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) :is(.snapshot-modal, .confirm-modal)::backdrop {
  background: var(--classic-match-backdrop) !important;
  backdrop-filter: blur(5px);
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) .snapshot-modal :is(.snapshot-modal-head, .snapshot-preview) {
  border-color: var(--classic-line-soft) !important;
  border-radius: var(--classic-match-radius-card) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-input) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #snapshotModalKicker {
  display: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) :is(.snapshot-modal, .confirm-modal) :is(h2, h3, strong) {
  color: var(--classic-text) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) :is(.snapshot-modal, .confirm-modal) p {
  color: var(--classic-muted) !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) :is(.snapshot-modal, .confirm-modal) :is(button, .close-modal) {
  border-radius: var(--classic-match-radius-control) !important;
  clip-path: none !important;
}

body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #snapshotModal .close-modal {
  border: 1px solid var(--classic-line) !important;
  color: var(--classic-text) !important;
  background: var(--classic-match-control-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 3px 0 var(--classic-match-control-shadow) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #snapshotModal .close-modal:hover {
    border-color: var(--classic-text) !important;
    background: var(--classic-match-control-hover-art) !important;
  }
}

@media (max-width: 760px) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) .retro-screen-header {
    flex-wrap: nowrap !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-topline {
    min-height: 0;
    padding: 0 2px 8px;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .stage-round {
    font-size: 10px !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.score-live-controls, .skip-live-control, .shootout-skip-control) {
    flex-wrap: wrap !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .live-control {
    min-height: 44px !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.match-penalty-targets, .standard-penalty-targets) button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent :is(.penalty-marks i, .shootout-summary-row i, .penalty-score-dot, .kick-result-marker) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

@media (max-width: 520px) {
  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "stage"
      "next"
      "boot"
      "board" !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .matchup > .team {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.retro-mode-active.retro-1998-active:is(.retro-1962-active) #mainContent .retro-manager-section.is-bench {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--classic-line-soft) !important;
    border-left: 0 !important;
  }
}

body.retro-mode-active.retro-1962-active .euro-2020-road > header img {
  box-sizing: border-box;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

/* Final newsreel treatment: weathered chrome, clear content and fewer nested boxes. */
body.retro-1962-setup-active,
body.retro-mode-active.retro-1962-active {
  color-scheme: dark;
  font-family: "Arial Narrow", "Franklin Gothic Medium", "Segoe UI", sans-serif;
}

body.retro-mode-active.retro-1962-active .retro-screen-header,
body.retro-1962-setup-active .retro-screen-header {
  background: linear-gradient(180deg, #666862, #343633 54%, #232522 56%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 1px 0 rgba(0, 0, 0, .72) !important;
}

body.retro-mode-active.retro-1962-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart),
body.retro-1962-setup-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart) {
  border-color: rgba(240, 238, 230, .28) !important;
  background: rgba(20, 22, 20, .22) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
}

body.retro-mode-active.retro-1962-active :is(.retro-view-tabs, .retro-main-section-switch)::before,
body.retro-mode-active.retro-1962-active :is(.retro-view-tabs, .retro-main-section-switch)::after {
  display: none !important;
  content: none !important;
}

body.retro-mode-active.retro-1962-active .retro-back-to-modes,
body.retro-1962-setup-active .retro-back-to-modes {
  border-color: rgba(240, 238, 230, .32) !important;
  color: var(--classic-text) !important;
  background: linear-gradient(180deg, #777972, #484a46 54%, #292b28 56%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 2px 0 #20211f !important;
}

/* Let the tournament action row own the back button's height so the view tabs
   can never overlap it at compact widths. */
body.retro-mode-active.retro-1962-active .retro-saved-tournament-actions {
  min-height: 40px;
  margin-bottom: 16px;
}

body.retro-mode-active.retro-1962-active .retro-saved-tournament-actions .retro-back-to-modes {
  position: static !important;
}

body.retro-mode-active.retro-1962-active .euro-2020-road > header img,
.tournament-history-screen[data-history-theme="1962"] .tournament-history-edition-logo,
.profile-tournament-history-card[data-history-theme="1962"] .profile-history-edition img {
  border-radius: 2px !important;
  filter: none !important;
}

body.retro-mode-active.retro-1962-active #mainContent :is(.round-heading, .round-title, .panel-heading, .section-heading) {
  letter-spacing: .035em;
  text-shadow: none !important;
}

body.retro-1962-setup-active .retro-route-setup-controls {
  border-radius: 3px !important;
  background: var(--classic-match-panel-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 14px 34px rgba(0, 0, 0, .32) !important;
}

body.retro-1962-setup-active .retro-route-setup-controls .landing-setting,
body.retro-1962-setup-active .retro-route-setup-controls :is(.landing-setting-info summary, .segmented) {
  border-radius: 2px !important;
  background: rgba(8, 9, 8, .16) !important;
  box-shadow: none !important;
}

body.retro-1962-setup-active :is(.retro-inline-achievement-filter, .retro-inline-team-option) {
  border-radius: 3px !important;
  background: rgba(14, 15, 14, .2) !important;
  box-shadow: none !important;
}

body.retro-1962-setup-active .retro-inline-team-option.is-selected {
  border-color: rgba(246, 243, 233, .76) !important;
  color: #1d1f1d !important;
  background: linear-gradient(180deg, #dedbd1, #aaa9a1) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 2px 0 #666862 !important;
}

body.retro-1962-setup-active .retro-inline-team-option.is-selected strong {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
}

body.retro-1962-setup-active :is([role="img"][aria-label$=" flag"], .country-flag, .retro-table-flag, .retro-squad-flag, .retro-lineup-flag, .flag-orb),
body.retro-mode-active.retro-1962-active :is([role="img"][aria-label$=" flag"], .country-flag, .retro-table-flag, .retro-squad-flag, .retro-lineup-flag, .flag-orb) {
  filter: none !important;
}

body.retro-1962-setup-active .retro-start-button:not(:disabled),
body.retro-mode-active.retro-1962-active :is(.primary-button, #mainContent .primary-button, .snapshot-actions button) {
  border-color: rgba(240, 238, 230, .4) !important;
  background: var(--classic-match-action-art) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 3px 0 #20211f, 0 8px 18px rgba(0, 0, 0, .24) !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent :is(
  .panel-heading, .match-analysis-heading, .section-heading
) {
  background: var(--classic-match-header-art) !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent :is(
  .match-score, .score-separator, .team-name
) {
  text-shadow: none !important;
}

body.retro-mode-active.retro-1998-active.retro-1962-active #mainContent :is(
  .fixture, .bracket-card, .bracket-match, .third-place-card,
  .match-analysis, .standard-match-tactics, .retro-match-lineups-panel
) {
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* Saved tournament, profile and champion-save surfaces inherit the same
   edition tokens without depending on an active simulator body class. */
.tournament-history-screen[data-history-theme="1962"] {
  --history-accent: var(--classic-primary-light);
  --history-accent-strong: var(--classic-primary);
  --history-accent-ink: var(--classic-bg-deep);
  --history-bg: var(--classic-bg);
  --history-bg-deep: var(--classic-bg-deep);
  --history-surface: color-mix(in srgb, var(--classic-surface-deep) 94%, transparent);
  --history-surface-soft: color-mix(in srgb, var(--classic-surface) 78%, transparent);
  --history-line: var(--classic-line-soft);
  --history-text: var(--classic-text);
  --history-muted: var(--classic-muted);
  background: var(--classic-body-art);
}

.tournament-history-screen[data-history-theme="1962"] .tournament-history-edition-logo {
  box-sizing: border-box;
  width: min(150px, 76%);
  height: 130px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px var(--classic-shadow));
}

.profile-tournament-history-card[data-history-theme="1962"] {
  --profile-history-accent: var(--classic-primary-light);
  --profile-history-surface: var(--classic-surface-deep);
  border-color: var(--classic-line-soft);
  box-shadow: inset 3px 0 var(--classic-action);
}

.profile-tournament-history-card[data-history-theme="1962"] .profile-history-edition {
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid var(--classic-line);
  background: #fff;
}

.profile-tournament-history-card[data-history-theme="1962"] .profile-history-edition img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#championSaveTournament[data-history-theme="1962"] {
  border: 1px solid var(--classic-line);
  border-radius: 5px;
  color: var(--classic-text);
  background: linear-gradient(180deg, var(--classic-action), var(--classic-action-dark));
  box-shadow: 0 5px 0 var(--classic-action-dark);
}

#championSaveTournament[data-history-theme="1962"].is-saved {
  color: var(--classic-text);
  background: linear-gradient(180deg, var(--classic-primary), var(--classic-primary-dark));
  box-shadow: 0 5px 0 var(--classic-primary-dark);
}

@media (hover: hover) and (pointer: fine) {
  body.retro-mode-active.retro-1962-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart):hover,
  body.retro-1962-setup-active .retro-screen-header :is(.retro-screen-action, .retro-screen-restart):hover {
    border-color: var(--classic-text) !important;
    background: color-mix(in srgb, var(--classic-action) 58%, var(--classic-surface-deep)) !important;
  }

  body.retro-1962-setup-active .retro-inline-team-option:not(:disabled):hover {
    border-color: var(--classic-line) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--classic-primary) 38%, var(--classic-surface)), var(--classic-surface-deep)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 8px 18px var(--classic-shadow) !important;
    transform: translateY(-2px);
  }
}

body.retro-1962-setup-active :is(button, a),
body.retro-mode-active.retro-1962-active :is(button, a) {
  transition: color 160ms cubic-bezier(.22, 1, .36, 1), border-color 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms cubic-bezier(.22, 1, .36, 1), transform 120ms cubic-bezier(.22, 1, .36, 1);
}

body.retro-1962-setup-active button:active,
body.retro-mode-active.retro-1962-active button:active {
  transform: scale(.97);
}

@media (max-width: 720px) {
  body.retro-mode-active.retro-1962-active,
  body.retro-1962-setup-active {
    background-attachment: scroll !important;
  }

}

@media (max-width: 480px) {
  body.retro-1962-setup-active .retro-route-setup {
    padding-top: 60px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.retro-1962-setup-active *,
  body.retro-mode-active.retro-1962-active * {
    transition-duration: .01ms !important;
  }
}