/* Premier League broadcast scoreboard, during play and at full time. */
@font-face {
  font-family: "PL Broadcast";
  src: url("./assets/fonts/premier-league-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body.pl-broadcast-active.shared-live-match-layout-active #mainContent #matchStage.match-stage.is-live:not(.is-shootout) #matchup.matchup {
  display: none !important;
}
body.pl-broadcast-active.commentary-result-active #mainContent #matchStage #matchup { display: none !important; }
body.pl-broadcast-active.commentary-result-active #mainContent .pl-broadcast { margin-top: 28px; }
body.commentary-result-active #matchHighlightMode { display: none !important; }
body #mainContent .pl-broadcast {
  --pl-broadcast-purple: #37003c;
  --pl-broadcast-font: "PL Broadcast", "Manrope", sans-serif;
  width: min(380px, 100%);
  margin: 15px auto 8px;
  position: relative;
  z-index: 1;
  color: white;
  font-family: var(--pl-broadcast-font);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
  direction: ltr;
  text-align: center;
  isolation: isolate;
}
.pl-broadcast[hidden], .pl-broadcast [hidden] { display: none !important; }
.pl-broadcast-bar {
  --pl-score-half-width: 68px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 48px 40px 48px minmax(64px, 1fr);
  grid-template-rows: 46px;
  height: 46px;
  align-items: center;
  background: transparent;
  border-radius: 0;
}
.pl-broadcast-bar::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.22)),
    linear-gradient(90deg, var(--home-trim, #37003c) calc(50% - var(--pl-score-half-width)), #37003c calc(50% - 10px), #37003c calc(50% + 10px), var(--away-trim, #37003c) calc(50% + var(--pl-score-half-width)));
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 3px rgba(12, 0, 19, .2);
}
.pl-broadcast-team {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 38px;
  background: transparent;
  isolation: isolate;
  color: var(--ink);
  font-family: var(--pl-broadcast-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  -webkit-text-stroke: 1.3px currentColor;
  paint-order: stroke fill;
}
/* The home panel ends in two steps; its trim fills the score-facing side.
   Keep the fill clipped to that same edge so pale panels cannot bleed below it. */
.pl-broadcast-team::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 52%, rgba(0,0,0,.16)), var(--club);
  border-radius: 4px 0 0;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 50%, 100% 100%, 0 100%);
}
.pl-broadcast-team[data-part="awayName"]::before {
  background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 48%, rgba(255,255,255,.08)), var(--club);
  border-radius: 0 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 50%, 10px 50%);
}
.pl-broadcast-team::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10px;
  width: 21px;
  inset-block: 0;
  background: linear-gradient(90deg, transparent, #37003c 84px), var(--trim);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 52% 100%, 0 50%, 52% 50%);
}
.pl-broadcast-team[data-part="awayName"]::after {
  left: -10px;
  right: auto;
  background: linear-gradient(90deg, rgba(55,0,60,.24), transparent), var(--trim);
  clip-path: polygon(0 0, 48% 0, 100% 50%, 53% 50%, 100% 100%, 48% 100%);
}
.pl-broadcast-score {
  font: 700 60px/46px var(--pl-broadcast-font);
  letter-spacing: -.045em;
  color: white;
  z-index: 1;
  -webkit-text-stroke: 1.3px currentColor;
  paint-order: stroke fill;
  text-shadow: 0 2px 1px rgba(23,0,31,.28);
}
.pl-broadcast-score[data-part="homeScore"] { translate: 4px -6px; }
.pl-broadcast-score[data-part="awayScore"] { translate: -4px -6px; }
.pl-broadcast-score[data-digits="2"] { transform: scaleX(.62); }
.pl-broadcast-score[data-digits="3"] { transform: scaleX(.42); }
.pl-broadcast-lion { width: 56px; height: 68px; max-width: none; object-fit: contain; justify-self: center; translate: 0 -6px; z-index: 2; border: 0; box-shadow: none; }
.pl-broadcast-under { display: grid; grid-template-columns: 1fr 136px 1fr; align-items: start; margin-top: -4px; }
.pl-broadcast-clock {
  background: linear-gradient(#48024e, #2d0034);
  color: white;
  padding: 2px 5px 4px;
  border-radius: 0 0 6px 6px;
  font: 700 27px/1 var(--pl-broadcast-font);
  letter-spacing: -.02em;
  -webkit-text-stroke: .6px currentColor;
  paint-order: stroke fill;
  white-space: nowrap;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 2px 3px rgba(12,0,19,.2);
}
.pl-broadcast-reds { padding: 7px 10px; font-size: 13px; letter-spacing: 3px; color: #ff5068; }
.pl-broadcast-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-broadcast-goal { position: absolute; inset: 4px 0; z-index: 3; }
/* The normal digits are taller than the colour strip. Hide the underlying
   scorebar while its replacement is shown, including entry and exit frames. */
.pl-broadcast.is-celebrating .pl-broadcast-bar > :not(.pl-broadcast-goal) { visibility: hidden; }
.pl-broadcast-celebration {
  position: relative;
  display: grid;
  grid-template-columns: 96px 40px minmax(0, 1fr);
  grid-template-rows: 100%;
  align-items: center;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 48%, rgba(0,0,0,.12)), var(--club);
  color: var(--ink);
  border-radius: 0;
  animation: pl-broadcast-reveal 4.6s cubic-bezier(.22, 1, .36, 1) both;
}
.pl-broadcast-goal-code { font: 700 36px/1 var(--pl-broadcast-font); letter-spacing: -.025em; -webkit-text-stroke: 1.3px currentColor; paint-order: stroke fill; }
.pl-broadcast-goal-crest { width: 38px; height: 48px; object-fit: contain; position: relative; z-index: 2; }
.pl-broadcast-art { position: relative; height: 100%; overflow: hidden; }
.pl-broadcast-art svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: pl-broadcast-motif 4.6s ease-in-out both; }
.pl-broadcast-art b { display: grid; position: absolute; inset: 0; place-items: center; color: var(--ink); font: 700 34px/1 var(--pl-broadcast-font); letter-spacing: -.02em; -webkit-text-stroke: .55px currentColor; paint-order: stroke fill; animation: pl-broadcast-word 4.6s cubic-bezier(.22,1,.36,1) both; }
.pl-broadcast-projectile { animation: pl-broadcast-shot 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="rings"] .pl-broadcast-art b { color: transparent; -webkit-text-stroke: 1px #d9b66b; }
[data-motif="rings"] .pl-broadcast-art svg,
[data-motif="cherries"] .pl-broadcast-art svg,
[data-motif="devil"] .pl-broadcast-art svg { animation: pl-broadcast-pattern 4.6s ease-in-out both; }
[data-motif="gull"] .pl-broadcast-art svg, [data-motif="eagle"] .pl-broadcast-art svg { animation: pl-broadcast-flight 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="bee"] .pl-broadcast-art svg { animation: pl-broadcast-buzz 4.6s ease-in-out both; }
[data-motif="flag"] .pl-broadcast-art svg { animation: pl-broadcast-flag 4.6s ease-in-out both; }
[data-motif="flag"] .pl-broadcast-art b { color: #153e91; transform: rotate(6deg); }
[data-motif="ribbon"] .pl-broadcast-art b { color: #123454; font-size: 24px; letter-spacing: .12em; transform: rotate(4deg); }
[data-motif="ribbon"] .pl-broadcast-art svg { animation: pl-broadcast-ribbon 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="tower"] .pl-broadcast-art svg { animation: pl-broadcast-tower 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="cottage"] .pl-broadcast-art svg { animation: pl-broadcast-roof 4.6s ease-in-out both; }
[data-motif="tiger"] .pl-broadcast-art svg { animation: pl-broadcast-paw 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="horse"] .pl-broadcast-art svg { animation: pl-broadcast-gallop 4.6s ease-in-out both; }
[data-motif="rose"] .pl-broadcast-art svg { animation: pl-broadcast-rose 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="liverbird"] .pl-broadcast-art svg { animation: pl-broadcast-bird 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="moon"] .pl-broadcast-art { background: #274677; }
[data-motif="moon"] .pl-broadcast-art svg { animation: pl-broadcast-moon 4.6s ease-in-out both; }
[data-motif="moon"] .pl-broadcast-art b { color: white; text-shadow: 0 1px 3px #1b3256; }
[data-motif="stripes"] .pl-broadcast-art { background: white; }
[data-motif="stripes"] .pl-broadcast-art svg { animation: pl-broadcast-stripes 4.6s cubic-bezier(.22,1,.36,1) both; }
[data-motif="stripes"] .pl-broadcast-art b { color: white; mix-blend-mode: difference; letter-spacing: .24em; }
[data-motif="target"] .pl-broadcast-art b { color: transparent; -webkit-text-stroke: 1px var(--ink); }
[data-motif="cat"] .pl-broadcast-art svg { animation: pl-broadcast-eyes 4.6s ease-in-out both; }
[data-motif="cockerel"] .pl-broadcast-art svg { animation: pl-broadcast-cockerel 4.6s cubic-bezier(.22,1,.36,1) both; }
@keyframes pl-broadcast-reveal { 0% { clip-path: inset(0 100% 0 0); } 9%, 89% { clip-path: inset(-8px 0 -8px 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes pl-broadcast-word { 0%, 43% { opacity: 0; translate: 16px 0; } 55%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes pl-broadcast-motif { 0%, 8% { opacity: 0; transform: translateX(-35px); } 16%, 29% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateX(30px); } }
@keyframes pl-broadcast-shot { 0%, 20% { transform: translateX(-35px); opacity: 0; } 24% { opacity: 1; } 39%, 100% { transform: translateX(100px); opacity: 0; } }
@keyframes pl-broadcast-pattern { 0% { opacity: 0; transform: translateX(-20px); } 18%, 85% { opacity: 1; } 100% { transform: translateX(12px); opacity: 0; } }
@keyframes pl-broadcast-flight { 0%, 9% { transform: translate(-90px, 18px) scale(.7); opacity: 0; } 19%, 26% { transform: none; opacity: 1; } 43%, 100% { transform: translate(130px, -30px); opacity: 0; } }
@keyframes pl-broadcast-buzz { 0%, 8% { transform: translateX(-100px); opacity: 0; } 19% { transform: translate(-12px, -4px); opacity: 1; } 24% { transform: translate(3px, 3px); } 29% { transform: translate(-2px, -2px); opacity: 1; } 46%, 100% { transform: translateX(120px); opacity: 0; } }
@keyframes pl-broadcast-flag { 0%, 10% { transform: translateY(38px) rotate(-12deg); opacity: 0; } 29% { transform: rotate(5deg); opacity: 1; } 48%, 85% { transform: rotate(-3deg); opacity: 1; } 100% { opacity: 0; } }
@keyframes pl-broadcast-ribbon { 0%, 9% { transform: scaleX(0); } 29%, 87% { transform: scaleX(1); } 100% { opacity: 0; } }
@keyframes pl-broadcast-tower { 0%, 9% { transform: translateY(45px); opacity: 0; } 25%, 33% { transform: none; opacity: 1; } 50%, 100% { transform: translateY(45px); opacity: 0; } }
@keyframes pl-broadcast-roof { 0%, 11% { transform: translateY(35px); opacity: 0; } 23%, 38% { transform: none; opacity: 1; } 52%, 100% { transform: translateY(35px); opacity: 0; } }
@keyframes pl-broadcast-paw { 0%, 10% { transform: scale(2.8) rotate(-15deg); opacity: 0; } 22%, 29% { transform: scale(1); opacity: 1; } 47%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes pl-broadcast-gallop { 0%, 9% { transform: translateX(-90px); opacity: 0; } 21% { transform: translate(-8px, -4px); opacity: 1; } 27% { transform: translate(5px, 2px); } 45%, 100% { transform: translateX(160px); opacity: 0; } }
@keyframes pl-broadcast-rose { 0%, 9% { transform: scale(.2) rotate(-90deg); opacity: 0; } 24%, 31% { transform: none; opacity: 1; } 47%, 100% { transform: scale(.2) rotate(60deg); opacity: 0; } }
@keyframes pl-broadcast-bird { 0%, 9% { transform: translateY(25px) scale(.6); opacity: 0; } 21%, 33% { transform: scale(1.2); opacity: 1; } 49%, 100% { transform: translateY(-38px) scale(1.4); opacity: 0; } }
@keyframes pl-broadcast-moon { 0%, 10% { transform: translateY(45px); opacity: 0; } 35%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes pl-broadcast-stripes { 0%, 10% { transform: scaleY(0); } 25%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes pl-broadcast-eyes { 0%, 11% { opacity: 0; transform: scale(.8); } 24%, 35% { opacity: 1; transform: scale(1.05); } 48%, 100% { opacity: 0; } }
@keyframes pl-broadcast-cockerel { 0%, 9% { opacity: 0; transform: translateY(40px); } 20%, 31% { opacity: 1; transform: none; } 45%, 100% { opacity: 0; transform: translateY(-40px); } }
@media (max-width: 400px) {
  body #mainContent .pl-broadcast { width: min(336px, 100%); margin-block: 15px 8px; }
  .pl-broadcast-bar { --pl-score-half-width: 61px; grid-template-columns: minmax(52px,1fr) 43px 36px 43px minmax(52px,1fr); }
  .pl-broadcast-lion { width: 50px; height: 62px; }
  .pl-broadcast-team { font-size: 32px; }
  .pl-broadcast-goal-code { font-size: 30px; }
  .pl-broadcast-score { font-size: 56px; }
  .pl-broadcast-score[data-part="homeScore"] { translate: 3px -6px; }
  .pl-broadcast-score[data-part="awayScore"] { translate: -3px -6px; }
  .pl-broadcast-under { grid-template-columns: 1fr 122px 1fr; }
  .pl-broadcast-clock { font-size: 25px; }
  .pl-broadcast-celebration { grid-template-columns: 76px 36px minmax(0,1fr); }
}

/* The viewing switch belongs with navigation, leaving just the score and pitch. */
body.pl-broadcast-active #mainContent .pl-broadcast-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  width: 100%;
  margin: 0 0 12px;
}
body.pl-broadcast-active #mainContent .pl-broadcast-navigation #plLiveBackButton {
  margin: 0 !important;
  flex: 0 0 auto;
}
body.pl-broadcast-active #mainContent .pl-broadcast-navigation #matchHighlightMode {
  margin: 0 0 0 auto !important;
  width: auto !important;
  flex: 0 1 auto;
  border: 1px solid rgba(196,155,255,.24) !important;
  background: #24113f !important;
  box-shadow: none !important;
}
body.pl-broadcast-active #mainContent .pl-broadcast-navigation #matchHighlightMode button {
  min-height: 32px !important;
  padding-inline: 10px !important;
  color: #cec0de !important;
  font-size: 11px !important;
  white-space: nowrap;
}
body.pl-broadcast-active #mainContent .pl-broadcast-navigation #matchHighlightMode button[aria-pressed="true"] {
  color: white !important;
  background: #583080 !important;
}
body.pl-broadcast-active #mainContent .pl-broadcast-navigation #matchHighlightMode button:focus-visible {
  outline: 2px solid #d9bfff;
  outline-offset: 2px;
}
body.pl-broadcast-active #mainContent #matchStage .pl-broadcast-controls-moved { display: none !important; }
body.pl-broadcast-active #mainContent #matchStage.match-stage,
body.pl-broadcast-active #mainContent #matchPitchShell,
body.pl-broadcast-active #mainContent #match2dViewer,
body.pl-broadcast-active #mainContent #match2dPitch,
body.pl-broadcast-active #mainContent .authored-action-preview-controls.authored-test-match-controls {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
}
body.pl-broadcast-active #mainContent #matchStage.match-stage,
body.pl-broadcast-active #mainContent #matchPitchShell,
body.pl-broadcast-active #mainContent .authored-action-preview-controls.authored-test-match-controls {
  background: transparent !important;
}
body.pl-broadcast-active #mainContent #matchPitchShell { margin-block: 0 !important; }
body.pl-broadcast-active #mainContent #match2dViewer { padding-top: 0 !important; }
body.pl-broadcast-active #mainContent #match2dPitch { border-radius: 2px !important; }
@media (prefers-reduced-motion: reduce) {
  .pl-broadcast *, .pl-broadcast *::before, .pl-broadcast *::after { animation: none !important; transition: none !important; }
  .pl-broadcast-art svg { opacity: .15; }
  .pl-broadcast-art b { opacity: 1; translate: none; transform: none; }
}