/* Shared live match chrome
   This file is intentionally loaded after every competition skin. Themes keep
   control of colour; this component owns the cross-mode score and mobile
   playback geometry. */

#skipLiveButton.is-confirming-skip {
  border-color: var(--shared-live-accent, currentColor) !important;
  color: var(--shared-live-accent-text, #ffffff) !important;
  background: var(--shared-live-accent, #6d5dfc) !important;
}

/* Full-time cards use their established scorer layout, but retain enough
   vertical room for lowercase descenders in club names such as Stuttgart. */
body #matchStage.match-stage.pl-full-time .team h2.team-name {
  line-height: 1.16 !important;
  padding-block: 0 !important;
}

body #matchStage.match-stage.pl-full-time .team h2.team-name > span {
  line-height: inherit !important;
  padding-block: 0.08em !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup.matchup {
  --match-score-centre-width: clamp(98px, 8.5vw, 112px);
  --match-score-badge-size: clamp(44px, 4.4vw, 54px);
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--match-score-centre-width) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(6px, 1vw, 12px) !important;
  min-height: 104px !important;
  box-sizing: border-box;
  padding: 14px clamp(14px, 3vw, 30px) !important;
  overflow: visible !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup > .team {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 76px !important;
  height: auto !important;
  grid-template-rows: 76px auto auto;
  align-items: center !important;
  align-self: start !important;
  gap: 4px 8px !important;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup > .team-home {
  grid-template-columns: minmax(0, 1fr) var(--match-score-badge-size);
  text-align: right !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup > .team-away {
  grid-template-columns: var(--match-score-badge-size) minmax(0, 1fr);
  text-align: left !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .seed {
  display: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team-home > .team-name {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team-home > .flag-orb {
  grid-column: 2;
  grid-row: 1;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team-away > .flag-orb {
  grid-column: 1;
  grid-row: 1;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team-away > .team-name {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name,
body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name.is-long {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: inherit;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: clamp(18px, 2.15vw, 29px) !important;
  font-weight: 780 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.045em !important;
  text-align: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-block: 0 !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name > span,
body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name.is-overflowing > span {
  display: block !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  animation: none !important;
  transform: none !important;
  line-height: inherit !important;
  padding-block: 0.04em !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .flag-orb {
  width: var(--match-score-badge-size) !important;
  height: var(--match-score-badge-size) !important;
  min-width: 0 !important;
  flex: none !important;
  place-self: center;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(24px, 2.8vw, 32px) !important;
  transform: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .flag-orb > .pl-club-flag {
  display: grid !important;
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  place-self: center;
  place-items: center;
  line-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .flag-orb > .pl-club-flag img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
  margin: auto !important;
  padding: 1px !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .flag-orb .country-flag:not(.pl-club-flag) {
  width: calc(var(--match-score-badge-size) - 4px) !important;
  height: calc((var(--match-score-badge-size) - 4px) * 0.66) !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .flag-orb .country-flag:not(.pl-club-flag) img {
  object-fit: cover !important;
}

/* The score speed control owns two independent clocks. The popover is fixed
   to the viewport so moving the controls into the pitch footer cannot clip it. */
.live-speed-popover {
  --live-speed-origin-x: 50%;
  position: fixed !important;
  z-index: 10020;
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  padding: 12px;
  max-height: calc(100vh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--shared-live-border, rgba(140, 163, 201, 0.34));
  border-radius: 12px;
  color: #f8fafc;
  background: color-mix(in srgb, var(--shared-live-surface, #0b1424) 94%, #ffffff 6%);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.97);
  transform-origin: var(--live-speed-origin-x) 0;
  transition: opacity 150ms ease, transform 170ms cubic-bezier(0.23, 1, 0.32, 1);
}

.live-speed-popover[data-instant="true"] {
  transition: none !important;
}

.live-speed-popover[data-placement="above"] {
  transform: translateY(5px) scale(0.97);
  transform-origin: var(--live-speed-origin-x) 100%;
}

.live-speed-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.live-speed-popover[hidden] {
  display: none !important;
}

.live-speed-popover h3 {
  margin: 0;
  color: #ffffff;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.live-speed-setting {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.live-speed-setting > span {
  overflow: hidden;
  color: color-mix(in srgb, #f8fafc 70%, var(--shared-live-accent, #4f7cff));
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-speed-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.live-speed-options button {
  min-width: 0;
  min-height: 36px;
  padding: 0 3px;
  border: 1px solid color-mix(in srgb, var(--shared-live-border, #315a8e) 80%, transparent);
  border-radius: 8px;
  color: #e7edf7;
  background: color-mix(in srgb, var(--shared-live-panel, #15233b) 94%, transparent);
  font: 750 0.67rem/1 "Manrope", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms ease, background-color 150ms ease;
  touch-action: manipulation;
}

.live-speed-options button:active,
#speedButton.live-speed-trigger:active {
  transform: scale(0.97) !important;
}

.live-speed-options button:is(.is-selected, [aria-checked="true"]) {
  border-color: var(--shared-live-accent, #4f7cff);
  color: var(--shared-live-accent-text, #ffffff);
  background: var(--shared-live-accent, #4f7cff);
}

.live-speed-options button:focus-visible,
#speedButton.live-speed-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shared-live-accent, #4f7cff) 62%, #ffffff);
  outline-offset: 2px;
}

#speedButton.live-speed-trigger {
  white-space: nowrap;
  transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1), filter 150ms ease;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .live-speed-options button:hover:not([aria-checked="true"]) {
    border-color: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 68%, #ffffff 32%);
    background: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 16%, var(--shared-live-panel, #15233b));
  }

  #speedButton.live-speed-trigger:hover {
    filter: brightness(1.08);
  }
}

@media (max-width: 360px) {
  .live-speed-setting {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-speed-popover,
  .live-speed-options button,
  #speedButton.live-speed-trigger {
    transition: none !important;
  }

  .live-speed-popover,
  .live-speed-popover[data-placement="above"] {
    transform: none;
  }
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .discipline,
body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .team-match-events {
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .discipline {
  grid-row: 2;
  margin: 0 !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .discipline:empty {
  display: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team > .team-match-events {
  position: static !important;
  inset: auto !important;
  grid-row: 3;
  margin: 0 !important;
  transform: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live #matchup .team > .team-match-events[hidden] {
  display: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team-home > :is(.discipline, .team-match-events) {
  justify-items: end;
  text-align: right;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team-away > :is(.discipline, .team-match-events) {
  justify-items: start;
  text-align: left;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup > .score-zone {
  position: static !important;
  display: grid !important;
  width: var(--match-score-centre-width) !important;
  min-width: 0 !important;
  min-height: 76px !important;
  grid-template-columns: 1fr;
  grid-template-rows: 18px 42px 18px auto auto;
  grid-template-areas:
    "match-phase"
    "match-score"
    "match-clock"
    "match-controls"
    "match-note";
  align-content: start !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center;
  gap: 1px 5px !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #eventLiveClock.event-live-clock:not([hidden]) {
  display: contents !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #livePhase {
  position: static !important;
  grid-area: match-phase;
  justify-self: center;
  margin: 0 !important;
  color: inherit;
  font-size: clamp(11px, 0.9vw, 14px) !important;
  font-weight: 800;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
  white-space: nowrap;
  transform: none !important;
  opacity: 0.72;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .scoreline {
  grid-area: match-score;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  align-self: center !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: clamp(6px, 1vw, 10px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .match-score {
  min-width: 0 !important;
  color: inherit;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: clamp(34px, 3.6vw, 42px) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: -0.075em !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .score-separator {
  color: inherit !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: clamp(20px, 2.1vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1;
  opacity: 0.68 !important;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #liveClock.score-match-clock {
  position: static !important;
  grid-area: match-clock;
  display: block;
  justify-self: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: clamp(14px, 1.65vw, 18px) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  font-weight: 650;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  transform: none !important;
  opacity: 0.82;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .score-live-controls {
  grid-area: match-controls;
}

body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .result-note {
  grid-area: match-note;
}

/* In the shared pitch layout the playback group is re-parented into the
   management footer. Some older national/retro skins absolutely position the
   Skip wrapper, so reset that wrapper at every viewport width rather than
   leaving the desktop control pinned over the pitch. */
body.shared-live-match-layout-active #match2dViewer #plPitchManagement #skipControl.skip-live-control {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  order: 3 !important;
  width: auto;
  margin: 0 !important;
  transform: none !important;
}

body.shared-live-match-layout-active #match2dViewer #plPitchManagement #skipControl.skip-live-control[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup.matchup {
    --match-score-centre-width: clamp(78px, 23vw, 94px);
    --match-score-badge-size: clamp(30px, 8.5vw, 36px);
    grid-template-columns: minmax(0, 1fr) var(--match-score-centre-width) minmax(0, 1fr) !important;
    gap: clamp(4px, 1.5vw, 8px) !important;
    min-height: 86px !important;
    padding: 10px clamp(6px, 2.5vw, 12px) !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup > .team {
    min-height: 62px !important;
    grid-template-rows: 62px auto auto;
    gap: 3px 5px !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name,
  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name.is-long {
    display: -webkit-box !important;
    max-height: 2.42em;
    font-size: clamp(11px, 3.4vw, 15px) !important;
    line-height: 1.16 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name > span,
  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name.is-overflowing > span {
    white-space: normal !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup > .score-zone {
    min-height: 62px !important;
    grid-template-rows: 14px 34px 15px auto auto;
    gap: 1px 3px !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #livePhase {
    font-size: 9.5px !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .match-score {
    font-size: clamp(27px, 8vw, 33px) !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .score-separator {
    font-size: clamp(17px, 5.2vw, 20px) !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #liveClock.score-match-clock {
    font-size: clamp(12px, 3.7vw, 14px) !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management:not([hidden]) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "controls controls"
      "allowances substitutions" !important;
    align-items: center !important;
    gap: 10px 8px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 10px 2px 2px !important;
    transform: none !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #eventControls.score-live-controls:not([hidden]) {
    position: static !important;
    inset: auto !important;
    grid-area: controls !important;
    width: min(100%, 380px) !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1.18fr) !important;
    grid-template-areas: "pause speed skip" !important;
    align-items: stretch !important;
    justify-self: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #pauseLiveButton {
    grid-area: pause !important;
    order: initial !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #speedButton {
    grid-area: speed !important;
    order: initial !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #skipControl.skip-live-control:not([hidden]) {
    position: static !important;
    inset: auto !important;
    grid-area: skip !important;
    order: initial !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #skipControl.skip-live-control[hidden] {
    display: none !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(#pauseLiveButton, #speedButton, #skipLiveButton) {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #speedButton {
    padding-inline: 4px !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-allowances {
    grid-area: allowances !important;
    min-width: 0;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px !important;
    font-size: 11px !important;
    line-height: 1.2;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-make-subs {
    grid-area: substitutions !important;
    min-width: 88px;
    min-height: 44px !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
}

@media (max-width: 370px) {
  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup.matchup {
    --match-score-centre-width: 74px;
    --match-score-badge-size: 28px;
    gap: 3px !important;
    padding-inline: 5px !important;
  }

  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name,
  body:not(.before-start) #matchStage.match-stage.is-live:not(.is-shootout) #matchup .team h2.team-name.is-long {
    font-size: 10px !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #eventControls.score-live-controls:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.12fr) !important;
    gap: 6px !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(#pauseLiveButton, #speedButton, #skipLiveButton),
  body.shared-live-match-layout-active #match2dViewer .pl-pitch-make-subs {
    font-size: 11px !important;
  }

  body.shared-live-match-layout-active #match2dViewer .pl-pitch-allowances {
    gap: 2px 7px !important;
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(.live-control, .pl-pitch-make-subs) {
    transition: none !important;
  }
}

/* Final shared management skin.
   This stylesheet is loaded after every competition stylesheet so an older
   World Cup or domestic skin cannot leak purple/brown controls into the
   authored live-match UI. Structure stays shared; only these runtime theme
   tokens change per competition. */
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) {
  --shared-live-scroll-track: color-mix(in srgb, #0b1220 88%, var(--shared-live-accent, #4f7cff) 12%);
  --shared-live-scroll-thumb: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 78%, #ffffff 22%);
  --shared-live-row: color-mix(in srgb, var(--shared-live-panel, #18233a) 84%, var(--shared-live-surface, #10182b));
  --shared-live-row-hover: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 17%, var(--shared-live-panel, #18233a));
  /* Mixing a little of the dark competition surface into the accent keeps
     white UCL text above 4.5:1 without muting brighter domestic palettes. */
  --shared-live-control-primary: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 82%, var(--shared-live-surface, #10182b));
  --shared-live-control-secondary: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 22%, var(--shared-live-panel, #18233a));
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
  #pauseLiveButton,
  #speedButton,
  #skipLiveButton,
  #plPitchMakeSubsButton
) {
  border: 1px solid color-mix(in srgb, var(--shared-live-accent, #4f7cff) 56%, var(--shared-live-border, #315a8e)) !important;
  color: #ffffff !important;
  background: var(--shared-live-control-secondary) !important;
  box-shadow: none !important;
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease !important;
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
  #pauseLiveButton,
  #plPitchMakeSubsButton
) {
  color: var(--shared-live-accent-text, #ffffff) !important;
  background: var(--shared-live-control-primary) !important;
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #speedButton[aria-expanded="true"] {
  border-color: var(--shared-live-accent, #4f7cff) !important;
  background: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 34%, var(--shared-live-panel, #18233a)) !important;
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management #skipLiveButton.is-confirming-skip,
body.shared-live-match-layout-active #liveSpeedPopover .live-speed-options button:is(.is-selected, [aria-checked="true"]) {
  border-color: var(--shared-live-accent, #4f7cff) !important;
  color: var(--shared-live-accent-text, #ffffff) !important;
  background: var(--shared-live-control-primary) !important;
}

body.shared-live-match-layout-active #liveSpeedPopover {
  border-color: var(--shared-live-border, #315a8e) !important;
  color: #f8fafc !important;
  background: color-mix(in srgb, var(--shared-live-surface, #10182b) 94%, #ffffff 6%) !important;
}

body.shared-live-match-layout-active #liveSpeedPopover .live-speed-options button:not([aria-checked="true"]) {
  border-color: color-mix(in srgb, var(--shared-live-border, #315a8e) 80%, transparent) !important;
  color: #e7edf7 !important;
  background: color-mix(in srgb, var(--shared-live-panel, #18233a) 94%, transparent) !important;
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
  #pauseLiveButton,
  #speedButton,
  #skipLiveButton,
  #plPitchMakeSubsButton
):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shared-live-accent, #4f7cff) 68%, #ffffff) !important;
  outline-offset: 2px !important;
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
  #pauseLiveButton,
  #speedButton,
  #skipLiveButton,
  #plPitchMakeSubsButton
):active:not(:disabled) {
  transform: scale(0.97) !important;
}

body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
  #pauseLiveButton,
  #speedButton,
  #skipLiveButton,
  #plPitchMakeSubsButton
):disabled {
  cursor: not-allowed !important;
  opacity: 0.46 !important;
}

@media (hover: hover) and (pointer: fine) {
  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
    #pauseLiveButton,
    #speedButton,
    #skipLiveButton,
    #plPitchMakeSubsButton
  ):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--shared-live-accent, #4f7cff) 76%, #ffffff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shared-live-accent, #4f7cff) 28%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.shared-live-match-layout-active #match2dViewer .pl-pitch-management :is(
    #pauseLiveButton,
    #speedButton,
    #skipLiveButton,
    #plPitchMakeSubsButton
  ) {
    transition: none !important;
  }
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel {
  --q22-ink: color-mix(in srgb, var(--shared-live-surface) 82%, #000000) !important;
  --q22-ink-soft: color-mix(in srgb, var(--shared-live-panel) 72%, var(--shared-live-surface)) !important;
  --q22-panel: var(--shared-live-surface) !important;
  --q22-panel-soft: var(--shared-live-panel) !important;
  --q22-wine: var(--shared-live-accent) !important;
  --q22-wine-bright: var(--shared-live-scroll-thumb) !important;
  --q22-line: var(--shared-live-border) !important;
  --q22-line-soft: color-mix(in srgb, var(--shared-live-border) 68%, transparent) !important;
  --q22-gold: var(--shared-live-accent) !important;
  --q22-gold-soft: color-mix(in srgb, var(--shared-live-accent) 25%, #ffffff) !important;
  border-color: var(--shared-live-border) !important;
  color: #f8fafc !important;
  background: var(--shared-live-surface) !important;
  color-scheme: dark;
}

/* PL management uses lavender for small labels on plum. The saturated purple
   remains the selected-control fill, not low-contrast bench-number text. */
body.premier-league-edition:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel {
  --q22-gold: #d9b6ed !important;
  --q22-cream: #d8c7eb !important;
}

body.premier-league-edition:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) :is(
  #prematchLineupButton,
  #retroMatchLineupsPanel button,
  #retroMatchLineupsPanel select,
  #retroMatchLineupsPanel summary
):focus-visible {
  outline: 2px solid #d9b6ed !important;
  outline-offset: 2px !important;
}

body.shared-live-match-layout-active :is(
  .pl-pitch-commentary-mount .match-commentary-feed,
  #retroMatchLineupsPanel.is-pitch-overlay .retro-pitch-substitution-header,
  #retroMatchLineupsPanel.is-pitch-overlay .retro-lineup-tabs,
  #retroMatchLineupsPanel.is-pitch-overlay .retro-manager-lineup,
  #retroMatchLineupsPanel.is-pitch-overlay .retro-manager-layout
) {
  border-color: var(--shared-live-border) !important;
  color: #f8fafc !important;
  background: var(--shared-live-panel) !important;
}

body.shared-live-match-layout-active .pl-pitch-commentary-mount .match-commentary-feed {
  background: color-mix(in srgb, var(--shared-live-accent) 18%, var(--shared-live-panel)) !important;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel :is(
  .retro-manager-player,
  .retro-manager-mode-select,
  [data-retro-manager-formation]
) {
  border-color: color-mix(in srgb, var(--shared-live-border) 78%, transparent) !important;
  color: #f8fafc !important;
  background: var(--shared-live-row) !important;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-lineup-tabs button {
  border-color: var(--shared-live-border) !important;
  color: color-mix(in srgb, #f8fafc 72%, var(--shared-live-accent)) !important;
  background: var(--shared-live-panel) !important;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-lineup-tabs button.active {
  border-color: var(--shared-live-accent) !important;
  color: var(--shared-live-accent-text) !important;
  background: var(--shared-live-accent) !important;
  box-shadow: inset 0 -2px color-mix(in srgb, var(--shared-live-accent-text) 40%, transparent) !important;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel > .retro-lineups-grid,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-player-list,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-mode-select,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel [data-retro-manager-formation] {
  scrollbar-color: var(--shared-live-scroll-thumb) var(--shared-live-scroll-track) !important;
  scrollbar-width: thin;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel > .retro-lineups-grid::-webkit-scrollbar,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-player-list::-webkit-scrollbar,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-mode-select::-webkit-scrollbar,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel [data-retro-manager-formation]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel > .retro-lineups-grid::-webkit-scrollbar-track,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-player-list::-webkit-scrollbar-track,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-mode-select::-webkit-scrollbar-track,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel [data-retro-manager-formation]::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--shared-live-scroll-track) !important;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel > .retro-lineups-grid::-webkit-scrollbar-thumb,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-player-list::-webkit-scrollbar-thumb,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-mode-select::-webkit-scrollbar-thumb,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel [data-retro-manager-formation]::-webkit-scrollbar-thumb {
  border: 2px solid var(--shared-live-scroll-track) !important;
  border-radius: 999px;
  background: var(--shared-live-scroll-thumb) !important;
}

body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel > .retro-lineups-grid::-webkit-scrollbar-corner,
body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-player-list::-webkit-scrollbar-corner {
  background: var(--shared-live-scroll-track) !important;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.shared-live-match-layout-active, .shared-prematch-lineup-active) #retroMatchLineupsPanel .retro-manager-player:hover:not(:disabled) {
    border-color: var(--shared-live-accent) !important;
    color: #ffffff !important;
    background: var(--shared-live-row-hover) !important;
    box-shadow: inset 3px 0 var(--shared-live-accent) !important;
  }
}

/* Penalties use the live 105:68 pitch as their viewport. Both regulation
   kicks and shootouts are mounted into #match2dPitch by the presentation
   layer, so changing competition skins or device width cannot resize them. */
.match-2d-pitch > .match-penalty-overlay,
.match-2d-pitch > .penalty-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  isolation: isolate;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage)[hidden] {
  display: none !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) > .penalty-scene {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

body.shared-live-match-layout-active #match2dPitch > .match-penalty-overlay .match-penalty-decision {
  position: absolute !important;
  top: 3.5% !important;
  left: 50% !important;
  z-index: 8 !important;
  display: flex !important;
  width: max-content;
  max-width: calc(100% - 20px);
  min-height: 30px;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--shared-live-border, #315a8e) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shared-live-surface, #081421) 88%, transparent) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
  text-align: center;
  transform: translateX(-50%);
}

body.shared-live-match-layout-active #match2dPitch > .match-penalty-overlay .match-penalty-decision strong {
  font-size: clamp(0.72rem, 2.2vw, 1rem) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
}

body.shared-live-match-layout-active #match2dPitch > .match-penalty-overlay .match-penalty-decision small {
  overflow: hidden;
  font-size: clamp(0.62rem, 1.8vw, 0.82rem) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-stage-head,
body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-call,
body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-ledgers {
  position: absolute !important;
  right: clamp(8px, 2.5%, 16px) !important;
  left: clamp(8px, 2.5%, 16px) !important;
  z-index: 8 !important;
}

body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-stage-head {
  top: 3.5% !important;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--shared-live-border, #315a8e) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shared-live-surface, #081421) 88%, transparent);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
}

body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-call {
  top: 55% !important;
  bottom: auto !important;
  min-height: 20px;
  margin: 0 !important;
  pointer-events: none;
}

body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-ledgers {
  bottom: 2.5% !important;
  margin: 0 !important;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--shared-live-border, #315a8e) 60%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--shared-live-surface, #081421) 82%, transparent);
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-goal {
  top: 17% !important;
  left: 50% !important;
  width: clamp(190px, 46%, 330px) !important;
  height: clamp(82px, 33%, 142px) !important;
  transform: translateX(-50%) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-ball {
  top: 80% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition:
    left var(--penalty-flight-duration, 540ms) cubic-bezier(0.77, 0, 0.175, 1),
    top var(--penalty-flight-duration, 540ms) cubic-bezier(0.77, 0, 0.175, 1),
    transform var(--penalty-flight-duration, 540ms) cubic-bezier(0.77, 0, 0.175, 1) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-taker {
  top: 79% !important;
  bottom: auto !important;
  left: 58% !important;
  color: var(--penalty-taker-kit, #dce4f0) !important;
  transform: translate(-50%, -50%) !important;
  transition:
    left var(--penalty-kicker-duration, 300ms) cubic-bezier(0.23, 1, 0.32, 1),
    top var(--penalty-kicker-duration, 300ms) cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--penalty-kicker-duration, 300ms) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--penalty-fade-duration, 200ms) ease !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  color: var(--penalty-keeper-kit, #f3a65e) !important;
  transform: none !important;
  transition: transform var(--penalty-dive-duration, 520ms) cubic-bezier(0.77, 0, 0.175, 1) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-shirt-number {
  position: absolute;
  top: 14px;
  left: 7px;
  z-index: 4;
  display: grid;
  width: 12px;
  height: 10px;
  place-items: center;
  color: var(--penalty-taker-number, #111827);
  font: 800 5px/1 Manrope, sans-serif;
  pointer-events: none;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-keeper .penalty-shirt-number {
  color: var(--penalty-keeper-number, #111827);
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"]) .penalty-taker {
  top: 76% !important;
  left: 52% !important;
  opacity: 0.78 !important;
  transform: translate(-50%, -50%) rotate(-12deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-target="top-left"] .penalty-ball {
  top: 23% !important;
  left: 35% !important;
  transform: translate(-50%, -50%) scale(0.68) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-target="top-right"] .penalty-ball {
  top: 23% !important;
  left: 65% !important;
  transform: translate(-50%, -50%) scale(0.68) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-target="middle"] .penalty-ball {
  top: 34% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-target="bottom-left"] .penalty-ball {
  top: 45% !important;
  left: 35% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-target="bottom-right"] .penalty-ball {
  top: 45% !important;
  left: 65% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="flight"][data-target="wide-left"] .penalty-ball,
body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="flight"][data-direction="wide-left"] .penalty-ball {
  top: 28% !important;
  left: 19% !important;
  transform: translate(-50%, -50%) scale(0.7) rotate(-38deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="flight"][data-target="wide-right"] .penalty-ball,
body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="flight"][data-direction="wide-right"] .penalty-ball {
  top: 28% !important;
  left: 81% !important;
  transform: translate(-50%, -50%) scale(0.7) rotate(38deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="result"][data-result="wide"][data-direction="wide-left"] .penalty-ball {
  top: 54% !important;
  left: 4% !important;
  transform: translate(-50%, -50%) scale(0.64) rotate(-155deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="result"][data-result="wide"][data-direction="wide-right"] .penalty-ball {
  top: 54% !important;
  left: 96% !important;
  transform: translate(-50%, -50%) scale(0.64) rotate(155deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="result"][data-result="save"][data-target$="left"] .penalty-ball {
  top: 57% !important;
  left: 25% !important;
  transform: translate(-50%, -50%) scale(0.64) rotate(-150deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="result"][data-result="save"][data-target$="right"] .penalty-ball {
  top: 57% !important;
  left: 75% !important;
  transform: translate(-50%, -50%) scale(0.64) rotate(150deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene[data-state="result"][data-result="save"][data-target="middle"] .penalty-ball {
  top: 57% !important;
  left: 59% !important;
  transform: translate(-50%, -50%) scale(0.66) rotate(145deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-keeper-target="top-left"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translate(-68px, -18px) rotate(-64deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-keeper-target="bottom-left"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translate(-68px, 2px) rotate(-64deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-dive="left"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translate(-68px, -6px) rotate(-64deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-keeper-target="top-right"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translate(68px, -18px) rotate(64deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-keeper-target="bottom-right"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translate(68px, 2px) rotate(64deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-dive="right"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translate(68px, -6px) rotate(64deg) !important;
}

body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-keeper-target="middle"] .penalty-keeper,
body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) .penalty-scene:is([data-state="flight"], [data-state="result"])[data-dive="centre"] .penalty-keeper {
  top: auto !important;
  bottom: 4px !important;
  left: calc(50% - 13px) !important;
  transform: translateY(-10px) scale(1.06) !important;
}

@media (max-width: 520px) {
  body.shared-live-match-layout-active #match2dPitch > .match-penalty-overlay .match-penalty-decision {
    top: 2.5% !important;
    gap: 5px;
    min-height: 26px;
    padding: 4px 7px;
  }

  body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-stage-head {
    top: 2.5% !important;
    min-height: 26px;
    padding: 4px 6px;
  }

  body.shared-live-match-layout-active #match2dPitch > .penalty-stage .penalty-ledgers {
    padding: 4px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.shared-live-match-layout-active #match2dPitch > :is(.match-penalty-overlay, .penalty-stage) :is(.penalty-ball, .penalty-keeper, .penalty-taker) {
    transition-duration: 100ms !important;
  }
}