/* B15 — the match centre (the Broadcast concept). Linked after gameplan.css: its tokens, fonts and
   the stadium. One unit, --u, scales everything: 1 % of the width on 16:9, held by the height on
   wider screens, so the HUD keeps its proportions from a landscape phone to a 4K monitor. Touch
   targets never drop under 44 px. Sharp edges, light plates, blue only for what is selected. */

.mc-root { position: fixed; inset: 0; z-index: 60; }
.in-match .career { visibility: hidden; }
.mc-rotate { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  .mc-rotate { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(242,244,247,.96); color: var(--ink-900); }
  .mc-rotate b { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; letter-spacing: .08em; }
  .mc-rotate span { font-size: 15px; }
}
.mc-stage {
  --u: min(1vw, 1.78vh);
  --kit: #c41e2b; --kit2: #1b1b1f;
  position: absolute; inset: 0; overflow: hidden; color: var(--ink-900);
  font-family: var(--font-ui); -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.mc-gl, .mc-tags { position: absolute; inset: 0; }
.mc-gl canvas { display: block; width: 100% !important; height: 100% !important; }
.mc-tags { pointer-events: none; }
.mc-num {
  position: absolute; left: 0; top: 0; font: 700 10px/1 var(--font-display); color: #fff; letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0,0,0,.35); white-space: nowrap; will-change: transform; transition: opacity .19s;
}
.mc-num.is-dark { color: var(--ink-900); text-shadow: none; }
.mc-carrier {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .25) calc(var(--u) * .6); background: rgba(16,21,31,.74); color: #fff;
  font: 700 max(11px, calc(var(--u) * .92)) var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; transition: opacity .19s var(--ease-std); will-change: transform;
}
.mc-carrier i { display: block; width: calc(var(--u) * .35); min-width: 3px; height: 1em; }
.mc-carrier::after { content: ""; position: absolute; left: 50%; top: 100%; border: calc(var(--u) * .35) solid transparent; border-top-color: rgba(16,21,31,.74); transform: translateX(-50%); }

.mc-kick { font: 700 max(10px, calc(var(--u) * .8)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.mc-crest { display: block; width: 100%; height: 100%; }
.mc-stage .press { transition: transform .13s var(--ease-out), background .19s, color .19s, box-shadow .19s; }
.mc-stage .press:active { transform: translateY(1px) scale(.97); }
.mc-stage button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.mc-stage button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* fast-forward chip */
.mc-top-right { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 2); display: flex; align-items: center; gap: calc(var(--u) * .8);
  opacity: 0; transition: opacity .34s var(--ease-std); }
.mc-stage[data-state="live"] .mc-top-right { opacity: 1; }
.mc-ff { display: grid; place-items: center; width: max(30px, calc(var(--u) * 3)); height: max(22px, calc(var(--u) * 2)); color: #fff; background: rgba(16,21,31,.6);
  opacity: 0; transform: translateX(6px); transition: opacity .19s, transform .26s var(--ease-out); }
.mc-ff svg { width: 60%; }
.mc-ff.is-on { opacity: 1; transform: none; }

/* transport */
.mc-transport { display: flex; box-shadow: var(--shadow-1); }
.mc-transport button {
  position: relative; display: grid; place-items: center; min-width: max(44px, calc(var(--u) * 3.3)); height: max(44px, calc(var(--u) * 3.2));
  padding: 0 calc(var(--u) * .9); background: var(--surface); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font: 700 max(13px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .06em; color: var(--ink-700);
}
.mc-transport button + button { border-left: 1px solid rgba(16,21,31,.08); }
.mc-transport button.is-on { background: var(--paper); color: var(--ink-900); }
.mc-transport button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
.mc-transport .mc-pause, .mc-transport .mc-tac { background: var(--ink-900); color: #fff; }
.mc-transport .mc-tac { text-transform: uppercase; letter-spacing: .08em; }
.mc-transport .mc-tac.is-on { background: var(--accent); }
.mc-transport .mc-tac.is-on::after { display: none; }
.mc-transport svg { width: max(12px, calc(var(--u) * 1.1)); height: max(12px, calc(var(--u) * 1.1)); }
.mc-transport button:hover:not(.is-on):not(.mc-pause):not(.mc-tac) { background: var(--surface-strong); }

/* --- momentum ----------------------------------------------------------------------------------- */
.mc-mom { position: absolute; left: 50%; bottom: calc(var(--u) * 2); width: calc(var(--u) * 52); transform: translate(-50%, 8px);
  padding: calc(var(--u) * .7) calc(var(--u) * 1); opacity: 0; transition: opacity .34s var(--ease-std), transform .46s var(--ease-out); }
.mc-stage[data-state="live"] .mc-mom { opacity: 1; transform: translate(-50%, 0); }
.mc-mom-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * .3); }
.mc-poss { display: flex; align-items: center; gap: calc(var(--u) * .6); font: 700 max(11px, calc(var(--u) * .95)) var(--font-display); letter-spacing: .06em; }
.mc-possbar { display: flex; width: calc(var(--u) * 9); height: max(3px, calc(var(--u) * .35)); }
.mc-possbar b { display: block; height: 100%; transition: width .6s var(--ease-out); }
.mc-possbar em { flex: 1; }
.mc-mom-box { position: relative; height: calc(var(--u) * 3.6); }
.mc-mom-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-pins { position: absolute; inset: 0; }
.mc-pin { position: absolute; transform: translate(-50%, -50%); width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); min-width: 12px; min-height: 12px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mc-pin svg { width: 72%; height: 72%; }
.mc-pin.is-card { border-radius: 0; width: calc(var(--u) * .8); height: calc(var(--u) * 1.1); min-width: 7px; min-height: 10px; background: #f2c200; }
.mc-pin.is-red { background: #d6272e; }
.mc-pin.is-save { width: calc(var(--u) * .6); height: calc(var(--u) * .6); min-width: 6px; min-height: 6px; background: rgba(16,21,31,.55); box-shadow: none; }

/* --- the lower third ---------------------------------------------------------------------------- */
.mc-toast { position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 2); display: flex; align-items: stretch; max-width: calc(var(--u) * 40);
  box-shadow: var(--shadow-2); opacity: 0; transform: translateX(-2rem); pointer-events: none; transition: opacity .26s var(--ease-std), transform .46s var(--ease-out); }
.mc-toast.is-show { opacity: 1; transform: none; }
/* A9: the commentary line, lower third above the momentum panel; one line at a time */
.mc-commentary { position: absolute; left: 50%; bottom: calc(var(--u) * 11.2); max-width: min(70%, calc(var(--u) * 64)); transform: translate(-50%, 6px);
  padding: calc(var(--u) * .65) calc(var(--u) * 1.4); background: var(--surface-strong); color: var(--ink-900); box-shadow: var(--shadow-2);
  border-left: max(3px, calc(var(--u) * .35)) solid var(--ink-300, #b8c0cc); font: 500 max(14px, calc(var(--u) * 1.32)) var(--font-ui);
  opacity: 0; pointer-events: none; transition: opacity .24s var(--ease-std), transform .38s var(--ease-out); }
.mc-commentary.is-show { opacity: 1; transform: translate(-50%, 0); }
.mc-commentary[data-tone="goal"] { border-left-color: #d6272e; font-weight: 700; }
.mc-commentary[data-tone="card"] { border-left-color: #f2c200; }
.mc-commentary[data-tone="chance"], .mc-commentary[data-tone="save"], .mc-commentary[data-tone="miss"] { border-left-color: var(--ink-700, #3a4250); }
.mc-t-min { display: grid; place-items: center; min-width: calc(var(--u) * 4.2); padding: 0 calc(var(--u) * .6); background: var(--ink-900); color: #fff; font: 700 max(15px, calc(var(--u) * 1.5)) var(--font-display); }
.mc-t-kit { width: max(4px, calc(var(--u) * .5)); }
.mc-t-body { background: var(--surface-strong); padding: calc(var(--u) * .6) calc(var(--u) * 1.3) calc(var(--u) * .7); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mc-t-kind { display: flex; align-items: center; gap: calc(var(--u) * .5); font: 700 max(10px, calc(var(--u) * .82)) var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); }
.mc-t-kind svg { width: 1.3em; height: 1.3em; }
.mc-t-line { font: 600 max(13px, calc(var(--u) * 1.3)) var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-card { display: inline-block; width: .7em; height: 1em; background: #f2c200; }
.mc-card.is-red { background: #d6272e; }

/* --- the tactics dock ---------------------------------------------------------------------------- */
.mc-dock { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 2 + max(44px, calc(var(--u) * 3.2)) + calc(var(--u) * .8)); width: calc(var(--u) * 31); min-width: 280px;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.3) calc(var(--u) * 1.3); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .26s var(--ease-std), transform .34s var(--ease-out); }
.mc-dock.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mc-dock h4 { margin: 0 0 calc(var(--u) * .5); display: flex; justify-content: space-between; font: 700 max(11px, calc(var(--u) * .85)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.mc-dock h4 span { color: var(--ink-900); letter-spacing: .06em; }
.mc-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .35); margin-bottom: calc(var(--u) * .5); }
.mc-chip { position: relative; min-height: max(40px, calc(var(--u) * 2.7)); background: var(--surface-2); font: 700 max(12px, calc(var(--u) * .98)) var(--font-display) !important; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-700) !important; padding: 0 calc(var(--u) * .3); }
.mc-chip:hover { background: var(--paper); }
.mc-chip.is-on { background: var(--paper); color: var(--ink-900) !important; box-shadow: var(--shadow-1); }
.mc-chip.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.mc-dock p { margin: 0 0 calc(var(--u) * 1); font: 500 max(12px, calc(var(--u) * .95)) var(--font-ui); color: var(--ink-500); min-height: 1.3em; }
.mc-dock .mc-note { margin: 0; padding-top: calc(var(--u) * .8); border-top: 1px solid rgba(16,21,31,.1); color: var(--ink-300); font-size: max(11px, calc(var(--u) * .85)); }

/* --- the goal sting ------------------------------------------------------------------------------ */
.mc-shutter { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mc-shutter.run { animation: mc-fl .6s ease-out; }
@keyframes mc-fl { 0% { opacity: .6; } 100% { opacity: 0; } }
.mc-sting { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; }
.mc-sting.run { opacity: 1; }
.mc-sweep { position: absolute; top: -20%; bottom: -20%; width: calc(var(--u) * 26); left: -40%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, var(--kit) 30%, var(--kit) 70%, transparent); opacity: .92; }
.mc-sweep.b { width: calc(var(--u) * 8); background: linear-gradient(90deg, transparent, var(--kit2) 40%, var(--kit2) 60%, transparent); }
.mc-sting.run .mc-sweep { animation: mc-sweep 1.25s var(--ease-out) forwards; }
.mc-sting.run .mc-sweep.b { animation-delay: .08s; }
@keyframes mc-sweep { from { left: -40%; } to { left: 130%; } }
.mc-word { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font: 700 calc(var(--u) * 13)/.8 var(--font-display); letter-spacing: .04em; color: #fff; text-transform: uppercase;
  text-shadow: 0 .4rem 2rem rgba(0,0,0,.25); opacity: 0; }
.mc-sting.run .mc-word { animation: mc-word 2.4s .25s var(--ease-out) forwards; }
@keyframes mc-word { 0% { opacity: 0; transform: scale(1.35); letter-spacing: .3em; } 18% { opacity: 1; transform: scale(1); letter-spacing: .04em; } 80% { opacity: 1; transform: scale(.98); } 100% { opacity: 0; transform: scale(.96); } }
.mc-who { position: absolute; left: 0; right: 0; top: calc(30% + var(--u) * 11.5); text-align: center; opacity: 0; }
.mc-who b { display: inline-block; background: var(--ink-900); color: #fff; font: 700 max(16px, calc(var(--u) * 1.9)) var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: calc(var(--u) * .3) calc(var(--u) * 1.4); }
.mc-who span { display: inline-block; background: #fff; color: var(--ink-900); font: 600 max(13px, calc(var(--u) * 1.3)) var(--font-ui); padding: calc(var(--u) * .55) calc(var(--u) * 1.2); }
.mc-sting.run .mc-who { animation: mc-who 2.3s .45s var(--ease-out) forwards; }
@keyframes mc-who { 0% { opacity: 0; transform: translateY(1rem); } 15% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
.mc-stage.is-stinging .mc-carrier { opacity: 0 !important; }

/* interstitial: kick-off, half-time */
.mc-inter { position: absolute; left: 0; right: 0; top: 40%; text-align: center; pointer-events: none; opacity: 0; }
.mc-inter span { display: inline-block; background: var(--ink-900); color: #fff; font: 700 max(20px, calc(var(--u) * 2.6)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: calc(var(--u) * .5) calc(var(--u) * 2.2); box-shadow: var(--shadow-2); }
.mc-inter.is-show { animation: mc-inter 1.9s var(--ease-out) forwards; }
@keyframes mc-inter { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* --- paused -------------------------------------------------------------------------------------- */
.mc-paused { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(242,244,247,.28); backdrop-filter: blur(6px) saturate(.8); -webkit-backdrop-filter: blur(6px) saturate(.8);
  opacity: 0; pointer-events: none; transition: opacity .26s var(--ease-std); }
.mc-paused.is-show { opacity: 1; pointer-events: auto; }
.mc-pz { width: calc(var(--u) * 30); min-width: 300px; background: rgba(255,255,255,.88); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow-2);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2); transform: translateY(10px); transition: transform .34s var(--ease-out); }
.mc-paused.is-show .mc-pz { transform: none; }
.mc-pz h3 { margin: calc(var(--u) * .3) 0 calc(var(--u) * 1.1); font: 700 max(26px, calc(var(--u) * 3.2))/.9 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.mc-pz button { display: flex !important; justify-content: space-between; align-items: center; width: 100%; min-height: max(44px, calc(var(--u) * 3.4)); padding: 0 calc(var(--u) * 1.1) !important;
  margin-top: calc(var(--u) * .4); background: var(--surface-2) !important; font: 700 max(14px, calc(var(--u) * 1.2)) var(--font-display) !important; letter-spacing: .07em; text-transform: uppercase; }
.mc-pz button span { font: 500 max(11px, calc(var(--u) * .9)) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-500); }
.mc-pz button:hover { background: var(--paper) !important; box-shadow: inset 3px 0 0 var(--accent); }
.mc-pz button.go { background: var(--ink-900) !important; color: #fff !important; }
.mc-pz button.go span { color: rgba(255,255,255,.7); }

/* --- full time ----------------------------------------------------------------------------------- */
.mc-ft { position: absolute; inset: 0; display: grid; justify-items: center; align-items: start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: rgba(242,244,247,.36); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-std); }
.mc-ft.is-show { opacity: 1; pointer-events: auto; }
/* 9 Oct 2026 (the user, on a phone: "I can't see the next button, so I'm stuck in the end game scene"): the card is centred
   when it fits (auto margins) and starts at the top and scrolls when it does not; Continue is pinned to the bottom edge. */
.mc-ftc { margin-block: auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); width: min(94vw, calc(var(--u) * 70)); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6);
  background: rgba(255,255,255,.9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow-2); animation: mc-rise .56s var(--ease-out); }
.mc-ft-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: calc(var(--u) * 2); width: 100%; }
.mc-ft-team { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); text-align: center; }
.mc-ft-crest { width: calc(var(--u) * 5); height: calc(var(--u) * 5.8); min-width: 34px; min-height: 40px; }
.mc-ft-team b { font: 700 max(16px, calc(var(--u) * 2))/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.mc-ft-team ul { list-style: none; margin: 0; padding: 0; font: 500 max(12px, calc(var(--u) * 1.05)) var(--font-ui); color: var(--ink-700); }
.mc-ft-team li b { font-size: 1em; margin-right: .3em; }
.mc-ft-team li small { color: var(--ink-500); }
.mc-ft-score { display: flex; flex-direction: column; align-items: center; }
.mc-ft-score { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1); font: 700 max(48px, calc(var(--u) * 8))/.86 var(--font-display); }
.mc-ft-score i { font-style: normal; color: var(--ink-300); font-size: .55em; align-self: center; }
.mc-ft-verdict { flex-basis: 100%; text-align: center; font: 700 max(12px, calc(var(--u) * 1)) var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); margin-top: calc(var(--u) * .6); }
.mc-ft-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .8) calc(var(--u) * 2.4); width: 100%; }
.mc-duel-lab { display: flex; justify-content: space-between; font: 700 max(13px, calc(var(--u) * 1.1)) var(--font-display); }
.mc-duel-lab span { font: 700 max(10px, calc(var(--u) * .78)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); align-self: center; }
.mc-duel-tr { display: flex; gap: 2px; height: max(3px, calc(var(--u) * .4)); margin-top: calc(var(--u) * .3); }
.mc-duel-tr b { display: block; transition: flex-grow .6s var(--ease-out); }
/* A1: the tactical analyst's findings on the full-time card ("What decided it") */
.mc-ft-analyst { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * .5); padding-top: calc(var(--u) * .4); border-top: 1px solid rgba(16, 21, 31, .1); }
.mc-ft-analyst ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .4); }
.mc-ft-analyst li { font: 500 max(13px, calc(var(--u) * 1.1))/1.35 var(--font-ui); color: var(--ink-700); padding-left: calc(var(--u) * 1); border-left: 3px solid var(--ink-900); }
.mc-continue { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; box-shadow: 0 0 0 8px rgba(255,255,255,.85), 0 6px 18px rgba(16,21,31,.25); min-width: calc(var(--u) * 16); min-height: max(46px, calc(var(--u) * 3.8)); background: var(--ink-900) !important; color: #fff !important; font: 700 max(15px, calc(var(--u) * 1.3)) var(--font-display) !important; letter-spacing: .12em; text-transform: uppercase; }

.mc-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80vw; padding: 16px 20px; background: #fff; box-shadow: var(--shadow-2); font: 600 15px var(--font-ui); display: none; }
.mc-error.is-show { display: block; }

/* --- landscape phones ---------------------------------------------------------------------------- */
@media (max-height: 520px) {
  .mc-stage { --u: min(1.05vw, 2.1vh); }
  .mc-mom { width: calc(var(--u) * 46); bottom: 8px; padding: 5px 8px; }
  .mc-mom-hd { margin-bottom: 2px; }
  .mc-toast { left: 8px; bottom: 8px; max-width: 34vw; }
  .mc-mom { left: auto; right: 8px; transform: none !important; width: 34vw; padding: 4px 6px; }
  .mc-mom .mc-kick { display: none; }
  .mc-mom-box { height: 22px; }
  .mc-dock { right: 8px; top: 62px; width: min(60vw, 360px); max-height: calc(100vh - 72px); overflow: auto; padding: 10px 12px; }
  .mc-dock p { margin-bottom: 6px; }
  .mc-top-right { right: 8px; top: 8px; gap: 6px; }
  .mc-ftc { padding: 12px 18px; gap: 8px; }
  .mc-ft-stats { gap: 6px 18px; }
  .mc-ft-analyst li { font-size: 12px; line-height: 1.3; }
  .mc-pz { padding: 12px 16px; }
  .mc-word { top: 24%; }
  .mc-who { top: calc(24% + var(--u) * 11.5); }
}
@media (min-width: 2200px) { .mc-stage { --u: min(1vw, 1.78vh); } }
@media (prefers-reduced-motion: reduce) { .mc-stage *, .mc-stage *::before, .mc-stage *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* --- the goal replay ------------------------------------------------------------------------------ */
.mc-replay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-std); }
.mc-stage.is-replay .mc-replay { opacity: 1; }
.mc-lb { position: absolute; left: 0; right: 0; height: 9%; background: #10151f; transform: scaleY(0); transition: transform .4s var(--ease-out); }
.mc-lb.is-top { top: 0; transform-origin: top; } .mc-lb.is-bottom { bottom: 0; transform-origin: bottom; }
.mc-stage.is-replay .mc-lb { transform: none; }
.mc-replay-tag { position: absolute; left: calc(var(--u) * 2); top: calc(9% + var(--u) * 1.2); display: flex; align-items: center; gap: .5em; padding: calc(var(--u) * .35) calc(var(--u) * 1); background: #fff; color: var(--ink-900);
  font: 700 max(13px, calc(var(--u) * 1.2)) var(--font-display); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--shadow-1); }
.mc-replay-tag::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #d6272e; }
.mc-replay-skip { position: absolute; right: calc(var(--u) * 2); bottom: calc(9% + var(--u) * 1.2); pointer-events: auto; min-height: 44px; padding: 0 calc(var(--u) * 1.4) !important; background: var(--surface-strong) !important;
  font: 700 max(13px, calc(var(--u) * 1.05)) var(--font-display) !important; letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--shadow-1); }
.mc-stage.is-replay .mc-sb, .mc-stage.is-replay .mc-top-right, .mc-stage.is-replay .mc-mom, .mc-stage.is-replay .mc-toast, .mc-stage.is-replay .mc-carrier { opacity: 0 !important; pointer-events: none; }

/* half-time card */
.mc-ht { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.mc-ht.is-show { animation: mc-ht 2.8s var(--ease-out) forwards; }
@keyframes mc-ht { 0% { opacity: 0; transform: translate(-50%, -46%); } 12% { opacity: 1; transform: translate(-50%, -50%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -52%); } }
.mc-htc { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.6) calc(var(--u) * 3); background: rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-2); min-width: 280px; }
.mc-ht-line { display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.mc-ht-crest { width: max(30px, calc(var(--u) * 3.6)); height: max(35px, calc(var(--u) * 4.2)); }
.mc-ht-line b { font: 700 max(36px, calc(var(--u) * 5))/.86 var(--font-display); }
.mc-ht-line b i { font-style: normal; color: var(--ink-300); margin: 0 .1em; }
.mc-ht-stats { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.mc-ht-stats span { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(var(--u) * 1.2); align-items: center; font: 700 max(10px, calc(var(--u) * .8)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.mc-ht-stats span b { font: 700 max(14px, calc(var(--u) * 1.2)) var(--font-display); color: var(--ink-900); letter-spacing: 0; }
.mc-ht-stats span b:first-child { text-align: right; }


/* =====================================================================================================
   B15 round 2 -- the European Super League's broadcast identity (the user: "elegant and representative
   of the highest level of football", from the Premier League and Champions League examples).
   ===================================================================================================== */
.mc-stage { --esl-midnight: #081650; --esl-violet: #1641b8; --esl-gold: #c9a45c; }
.esl-emblem { display: block; width: 100%; height: 100%; }

/* --- the scoreboard: two kit slabs, the score either side of the league's emblem, the clock beneath --- */
.mc-sb { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 1.8); display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 6px 14px rgba(8, 12, 30, .28)); opacity: 0; transform: translateY(-8px); transition: opacity .34s var(--ease-std), transform .46s var(--ease-out); }
.mc-stage[data-state="live"] .mc-sb, .mc-stage[data-state="full-time"] .mc-sb { opacity: 1; transform: none; }
.mc-sb-row { display: flex; align-items: stretch; height: max(30px, calc(var(--u) * 3.3)); }
.mc-sb-team { position: relative; display: grid; place-items: center; min-width: max(66px, calc(var(--u) * 8.6)); overflow: hidden; }
.mc-sb-team.is-home { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.mc-sb-team b { position: relative; font: 700 max(17px, calc(var(--u) * 2.05))/1 var(--font-display); letter-spacing: .07em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mc-sb-team.is-light b { color: var(--esl-midnight); text-shadow: none; }
.mc-sb-score { position: relative; display: flex; align-items: center; gap: max(30px, calc(var(--u) * 4.4)); padding: 0 max(8px, calc(var(--u) * 1));
  background: linear-gradient(180deg, #1a2150, var(--esl-midnight)); }
.mc-sb-score .mc-digit { font: 700 max(24px, calc(var(--u) * 2.9))/1 var(--font-display); color: #fff; min-width: .62em; text-align: center; }
.mc-sb-emblem { position: absolute; left: 50%; top: 50%; width: max(38px, calc(var(--u) * 4.6)); height: max(38px, calc(var(--u) * 4.6)); transform: translate(-50%, -54%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.mc-sb-clock { display: flex; align-items: center; gap: 4px; margin-top: -1px; padding: 0 max(10px, calc(var(--u) * 1.1));
  height: max(22px, calc(var(--u) * 2.3)); background: linear-gradient(180deg, var(--esl-violet), #221763); clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); min-width: max(84px, calc(var(--u) * 10)); justify-content: center; }
.mc-sb-clock b { font: 700 max(14px, calc(var(--u) * 1.5)) var(--font-display); color: #fff; letter-spacing: .06em; }
.mc-sb-clock i { display: none; font: 700 max(11px, calc(var(--u) * 1.1)) var(--font-display); font-style: normal; color: var(--esl-midnight); background: var(--esl-gold); padding: 0 .35em; }
.mc-sb-clock i.is-on { display: inline-block; }

/* --- the pre-match: the team cards, then the match-up --- */
.mc-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4);
  background: rgba(233, 237, 245, .42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: opacity .46s var(--ease-std); }
.mc-stage:not([data-state="intro"]) .mc-intro { opacity: 0; pointer-events: none; }
.mc-intro-stage { display: grid; place-items: center; width: min(94vw, calc(var(--u) * 78)); }
.mc-intro-foot { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.mc-intro-dots { display: flex; gap: 6px; }
.mc-intro-dots i { width: 22px; height: 3px; background: rgba(13, 18, 51, .22); transition: background .26s; }
.mc-intro-dots i.is-on { background: var(--esl-violet); }
.mc-intro-bar { width: calc(var(--u) * 12); min-width: 90px; height: 3px; background: rgba(16,21,31,.1); }
.mc-intro-bar b { display: block; width: 0; height: 100%; background: var(--esl-midnight); transition: width .3s var(--ease-out); }
.mc-intro-next { min-height: 44px; padding: 0 calc(var(--u) * 1.8) !important; background: var(--surface-strong) !important; font: 700 max(14px, calc(var(--u) * 1.2)) var(--font-display) !important; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-1); }
.mc-stage[data-intro="1"] .mc-intro-next { display: none; }
.mc-kickoff { min-width: calc(var(--u) * 15); min-height: max(46px, calc(var(--u) * 3.8)); background: linear-gradient(180deg, var(--esl-violet), var(--esl-midnight)) !important; color: #fff !important;
  font: 700 max(15px, calc(var(--u) * 1.4)) var(--font-display) !important; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(13,18,51,.35); }
.mc-kickoff:disabled { opacity: .35; cursor: default; }
.mc-stage[data-intro="0"] .mc-kickoff { display: none; }

/* a team card, in the example's composition: the crest and the facts on the left, the club's bar and its eleven on a pale pitch on the right */
.mc-tc { display: grid; grid-template-columns: minmax(150px, 20%) 1fr; gap: calc(var(--u) * 1.2); width: 100%; animation: mc-card-in .6s var(--ease-out); }
@keyframes mc-card-in { from { opacity: 0; transform: translateX(3%); } to { opacity: 1; transform: none; } }
.mc-tc-side { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.mc-tc-crest { display: grid; place-items: center; aspect-ratio: 1; background: #fff; box-shadow: var(--shadow-1); padding: 12%; }
.mc-tc-crest .mc-crest { width: 78%; height: auto; }
.mc-tc-meta { margin: 0; display: grid; gap: 2px; }
.mc-tc-meta dt { margin-top: calc(var(--u) * .5); padding: calc(var(--u) * .35) calc(var(--u) * .8); background: var(--esl-midnight); color: #fff;
  font: 700 max(10px, calc(var(--u) * .85)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.mc-tc-meta dd { margin: 0; padding: calc(var(--u) * .45) calc(var(--u) * .8); background: rgba(255,255,255,.92); font: 700 max(14px, calc(var(--u) * 1.35)) var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.mc-tc-main { display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow-2); }
.mc-tc-head { display: flex; align-items: center; gap: calc(var(--u) * 1); height: max(40px, calc(var(--u) * 4.4)); padding: 0 calc(var(--u) * 1.2);
  background: linear-gradient(90deg, var(--esl-midnight), var(--esl-violet)); position: relative; overflow: hidden; }
.mc-tc-emblem { position: relative; z-index: 2; width: max(30px, calc(var(--u) * 3.2)); height: max(30px, calc(var(--u) * 3.2)); flex: none; }
.mc-tc-head b { position: relative; z-index: 2; font: 700 max(22px, calc(var(--u) * 2.8))/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.mc-tc-pitch { --sphere: max(28px, calc(var(--u) * 4.1)); position: relative; height: min(74vh, calc(var(--u) * 50)); background: linear-gradient(180deg, #eceef1, #e2e5ea); }
.mc-tc-lines { position: absolute; inset: 2.5% 3%; width: 94%; height: 95%; stroke: rgba(40, 50, 70, .28); stroke-width: .35; vector-effect: non-scaling-stroke; }
.mc-tc-lines * { vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.mc-tc-player { position: absolute; width: 0; height: 0; animation: mc-drop .5s var(--ease-out) backwards; }
@keyframes mc-drop { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
.mc-tc-player .sphere { cursor: default; }
.mc-tc-name { position: absolute; left: 0; top: calc(var(--sphere) * .62); transform: translateX(-50%); white-space: nowrap; padding: 2px calc(var(--u) * .7);
  background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.18); font: 700 max(11px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .04em; color: var(--esl-midnight); }

/* the match-up */
.mc-mu { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  background: rgba(255,255,255,.9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow-2); animation: mc-rise .56s var(--ease-out); min-width: min(92vw, calc(var(--u) * 60)); }
.mc-mu-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mc-mu-emblem { width: max(48px, calc(var(--u) * 6)); height: max(48px, calc(var(--u) * 6)); }
.mc-mu-brand span { font: 700 max(13px, calc(var(--u) * 1.1)) var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--esl-midnight); }
.mc-mu-brand small { font: 600 max(11px, calc(var(--u) * .9)) var(--font-ui); color: var(--ink-500); }
.mc-mu-line { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.mc-mu-team { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); width: calc(var(--u) * 20); text-align: center; }
.mc-mu-crest { width: calc(var(--u) * 7); height: calc(var(--u) * 8); min-width: 44px; min-height: 50px; }
.mc-mu-team b { font: 700 max(18px, calc(var(--u) * 2.3))/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.mc-mu-v { font: 700 max(16px, calc(var(--u) * 1.6)) var(--font-display); color: var(--esl-gold); text-transform: uppercase; }

/* --- the pause, the half-time and full-time cards, branded --- */
.mc-pz-brand, .mc-card-brand { display: flex; align-items: center; gap: 8px; }
.mc-pz-emblem, .mc-card-emblem { width: max(26px, calc(var(--u) * 2.6)); height: max(26px, calc(var(--u) * 2.6)); flex: none; }
.mc-pz { border-top: 4px solid var(--esl-violet); }
.mc-htc, .mc-ftc { border-top: 4px solid var(--esl-violet); }

@media (max-height: 520px) {
  .mc-sb { left: 8px; top: 6px; }
  .mc-intro { gap: 6px; }
  .mc-intro-stage { width: 94vw; }
  .mc-tc { grid-template-columns: 22% 1fr; gap: 8px; }
  .mc-tc-crest { padding: 8%; }
  .mc-tc-meta dt { margin-top: 2px; font-size: 9px; padding: 2px 6px; }
  .mc-tc-meta dd { font-size: 12px; padding: 2px 6px; }
  .mc-tc-head { height: 32px; }
  .mc-tc-head b { font-size: 18px; }
  .mc-tc-pitch { height: calc(100vh - 96px); --sphere: 22px; }
  .mc-intro-foot { position: absolute; left: 3vw; bottom: 8px; width: 21vw; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .mc-intro-bar { display: none; }
  .mc-stage[data-intro="1"] .mc-intro-foot { position: static; }
  .mc-tc-name { font-size: 9.5px; padding: 1px 4px; }
  .mc-mu { padding: 12px 20px; gap: 8px; }
  .mc-intro-next, .mc-kickoff { min-height: 40px; }
}

/* the substitution lower third's arrows */
.mc-subicon { display: inline-flex; flex-direction: column; gap: 1px; }
.mc-subicon em { display: block; width: 0; height: 0; border: 4px solid transparent; }
.mc-subicon em:first-child { border-bottom-color: #2f9e63; border-top-width: 0; }
.mc-subicon em:last-child { border-top-color: #d6272e; border-bottom-width: 0; }

/* =====================================================================================================
   B15b round 4 -- the scoreboard with a little depth (the user: "looks nice but slightly more 3D"):
   a slab tilted back a few degrees, lit along its top edge, with a darker underside for thickness and a
   soft sheen; the league's crest stands proud of the bar.
   ===================================================================================================== */
.mc-sb { perspective: 900px; filter: drop-shadow(0 8px 16px rgba(8, 12, 30, .32)) drop-shadow(0 2px 3px rgba(8, 12, 30, .25)); }
.mc-sb-row, .mc-sb-clock { transform: rotateX(9deg); transform-origin: 50% 100%; }
.mc-sb-row { position: relative; box-shadow: 0 max(3px, calc(var(--u) * .32)) 0 #070a1e; }
.mc-sb-row::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 52%, rgba(0,0,0,.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.35); }
.mc-sb-team b, .mc-sb-score .mc-digit { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); }
.mc-sb-team.is-light b { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.mc-sb-score { box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(255,255,255,.12); }
.mc-sb-emblem { z-index: 4; width: max(40px, calc(var(--u) * 4.9)); height: max(40px, calc(var(--u) * 4.9)); transform: translate(-50%, -52%) translateZ(12px);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(241,217,154,.6)); }
.mc-sb-clock { position: relative; box-shadow: 0 max(2px, calc(var(--u) * .22)) 0 #150d45; }
.mc-sb-clock::after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }

/* =====================================================================================================
   B15b round 4 -- the line-ups (the user: "need a huge improvement, and a bit 3D"). A broadcast team
   sheet: the club and its XI on the stadium on the left, the shape on a turf pitch tilted back in 3D
   on the right, the pieces standing on it and dropping in line by line. Then the match-up: the two
   clubs' panels angle in from either side and meet at the league's crest.
   ===================================================================================================== */
.mc-stage[data-intro="0"] .mc-intro-stage, .mc-stage[data-intro="1"] .mc-intro-stage { width: min(96vw, calc(var(--u) * 96)); }
.mc-ls { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: calc(var(--u) * 2.2); align-items: center; width: 100%; }
.mc-ls-info { display: flex; flex-direction: column; gap: calc(var(--u) * .9); min-width: 0; animation: mc-ls-in .6s var(--ease-out) backwards; }
@keyframes mc-ls-in { from { opacity: 0; transform: translateX(-5%); } to { opacity: 1; transform: none; } }
.mc-ls-kicker { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.mc-ls-emblem { width: max(26px, calc(var(--u) * 2.9)); height: max(26px, calc(var(--u) * 2.9)); flex: none; }
.mc-ls-kicker span { font: 700 max(12px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--esl-midnight); }
.mc-ls-kicker em { font: 600 max(11px, calc(var(--u) * .95)) var(--font-ui); font-style: normal; color: var(--ink-500); }
.mc-ls-club { display: flex; align-items: center; gap: calc(var(--u) * 1.1); }
.mc-ls-crest { flex: none; width: max(40px, calc(var(--u) * 6.2)); height: max(46px, calc(var(--u) * 7.2)); filter: drop-shadow(0 6px 10px rgba(16,24,40,.25)); }
.mc-ls-crest .mc-crest { width: 100%; height: 100%; }
.mc-ls-club h2 { margin: 0; font: 700 clamp(26px, calc(var(--u) * 4.6), 84px)/.88 var(--font-display); letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink-900); text-shadow: 0 2px 0 rgba(255,255,255,.6); text-wrap: balance; }
.mc-ls-tags { display: flex; gap: 2px; }
.mc-ls-tags span { display: flex; flex-direction: column; gap: 1px; padding: calc(var(--u) * .45) calc(var(--u) * .9); background: rgba(255,255,255,.9); box-shadow: var(--shadow-1); }
.mc-ls-tags span:first-child { background: var(--esl-midnight); }
.mc-ls-tags small { font: 700 max(9px, calc(var(--u) * .72)) var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); }
.mc-ls-tags b { font: 700 max(14px, calc(var(--u) * 1.4))/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-900); }
.mc-ls-tags span:first-child small { color: rgba(255,255,255,.6); }
.mc-ls-tags span:first-child b { color: #fff; }
.mc-ls-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mc-ls-list li { display: grid; grid-template-columns: 2.3em 1fr auto; align-items: center; gap: calc(var(--u) * .5); height: max(21px, calc(var(--u) * 2.3));
  padding: 0 calc(var(--u) * .9) 0 calc(var(--u) * .6); background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 3px 0 0 var(--k1); animation: mc-li-in .45s var(--ease-out) backwards; animation-delay: calc(260ms + var(--i) * 45ms); }
@keyframes mc-li-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.mc-ls-list b { font: 700 max(13px, calc(var(--u) * 1.3)) var(--font-display); text-align: right; color: var(--k1); }
.mc-ls.is-light .mc-ls-list b { color: var(--ink-900); }
.mc-ls-list span { font: 600 max(12px, calc(var(--u) * 1.08)) var(--font-ui); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-ls-list i { font: 700 max(10px, calc(var(--u) * .82)) var(--font-display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }

.mc-ls-stage { display: grid; place-items: center; height: min(80vh, calc(var(--u) * 54)); perspective: calc(var(--u) * 100); perspective-origin: 50% -10%; }   /* straight on: symmetric, the far end narrower in perspective */
.mc-ls-pitch { --tilt: 48deg; --sphere: max(24px, calc(var(--u) * 3.5)); position: relative; height: 96%; aspect-ratio: 68 / 88; transform-style: preserve-3d;
  transform: rotateX(var(--tilt)); transform-origin: 50% 100%;
  /* B19: the board is a Blender render (blender/lineup-board): the Game Plan's turf recipe, exact markings, lit */
  background: var(--board) center / 100% 100% no-repeat, #449c52;
  box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 46px 90px rgba(6,26,14,.42), 0 12px 24px rgba(6,26,14,.3); animation: mc-pitch-in 1.25s var(--ease-out) backwards; }
@keyframes mc-pitch-in { from { opacity: 0; transform: rotateX(78deg) translateY(10%); } to { opacity: 1; transform: rotateX(var(--tilt)); } }
.mc-ls-lines { position: absolute; inset: 2.5% 3%; width: 94%; height: 95%; fill: none; stroke: rgba(255,255,255,.95); }
.mc-ls-lines * { vector-effect: non-scaling-stroke; stroke-width: 2px; }
.mc-ls-pitch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,240,.07), rgba(255,255,240,0) 45%, rgba(0,20,8,.1)); }   /* light falling across the tilt */
.mc-ls-spot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none; }
.mc-ls-spot::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--sphere) * 1.05); height: calc(var(--sphere) * .8); transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(6,26,14,.5), rgba(6,26,14,0)); animation: mc-shadow-in .85s var(--ease-out) backwards; animation-delay: var(--d); }
@keyframes mc-shadow-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%); } }
.mc-ls-stage { position: relative; }
.mc-ls-players { position: absolute; inset: 0; pointer-events: none; --sphere: max(24px, calc(var(--u) * 3.5)); }
.mc-ls-player { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.mc-ls-up { position: absolute; left: 0; top: 0; animation: mc-ls-drop .88s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: var(--d); }
@keyframes mc-ls-drop { from { opacity: 0; transform: translateY(calc(var(--sphere) * -2.4)); } to { opacity: 1; transform: none; } }
.mc-ls-up .sphere { top: calc(var(--sphere) * -.42); cursor: default; }
.mc-ls-name { position: absolute; left: 0; top: calc(var(--sphere) * .2); transform: translateX(-50%); white-space: nowrap;   /* the Game Plan's names: white, straight on the grass */
  font: 600 max(11px, calc(var(--sphere) * .33)) var(--font-display); letter-spacing: .05em; text-transform: capitalize; line-height: 1.1;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .55); }


@media (max-height: 520px) {
  .mc-ls { grid-template-columns: 44% 1fr; gap: 10px; }
  .mc-ls-info { gap: 4px; }
  .mc-ls-kicker em { display: none; }
  .mc-ls-crest { width: 30px; height: 35px; }
  .mc-ls-club h2 { font-size: 22px; }
  .mc-ls-tags span { padding: 2px 6px; }
  .mc-ls-tags small { font-size: 8px; }
  .mc-ls-tags b { font-size: 11px; }
  .mc-ls-list { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .mc-ls-list li { height: 17px; grid-template-columns: 1.8em 1fr auto; padding: 0 5px 0 3px; }
  .mc-ls-kicker { display: none; }
  .mc-ls-list b, .mc-ls-list span { font-size: 10.5px; }
  .mc-ls-list i { font-size: 8.5px; }
  .mc-ls-stage { height: calc(100vh - 70px); }
  .mc-ls-pitch, .mc-ls-players { --sphere: 20px; }
  .mc-ls-name { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-ls-info, .mc-ls-list li, .mc-ls-pitch, .mc-ls-up, .mc-ls-spot::before { animation: none !important; }
}

/* =====================================================================================================
   B15b round 4 -- one game, not pages (the user): the broadcast wipe between the Dashboard, the match
   and the Game Plan; the pause panel rising in; the pre-match lifting away at kick-off.
   ===================================================================================================== */
.esl-wipe { position: fixed; inset: 0; z-index: 2000; pointer-events: all; overflow: hidden; }
.esl-wipe-panel, .esl-wipe-gold { position: absolute; top: -10%; bottom: -10%; left: -30%; width: 160%; transform: translateX(-110%) skewX(-12deg); }
.esl-wipe-gold { background: linear-gradient(90deg, #9a7536, #ead39b 45%, #c9a45c); transition: transform .42s cubic-bezier(.7, 0, .3, 1); }
.esl-wipe-panel { background: radial-gradient(120% 90% at 50% 40%, #1641b8, #0c2272 55%, #081650); transition: transform .42s cubic-bezier(.7, 0, .3, 1) .06s; }
.esl-wipe-mark { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%) scale(.7); opacity: 0;
  transition: opacity .25s ease .3s, transform .5s cubic-bezier(.22, 1, .36, 1) .3s; }
.esl-wipe-emblem { width: clamp(72px, 11vmin, 150px); height: clamp(72px, 11vmin, 150px); filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.esl-wipe-mark span { font: 700 clamp(12px, 1.6vmin, 20px) "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #f1d99a; }
.esl-wipe.is-in .esl-wipe-panel, .esl-wipe.is-in .esl-wipe-gold { transform: translateX(0) skewX(-12deg); }
.esl-wipe.is-in .esl-wipe-mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.esl-wipe.is-out .esl-wipe-panel { transform: translateX(110%) skewX(-12deg); transition-delay: 0s; }
.esl-wipe.is-out .esl-wipe-gold { transform: translateX(110%) skewX(-12deg); transition-delay: .07s; }
.esl-wipe.is-out .esl-wipe-mark { opacity: 0; transform: translate(-50%, -50%) scale(1.15); transition: opacity .2s ease, transform .35s ease; }

/* the pause: the stadium dims and blurs as the panel rises in, its buttons following */
.mc-paused { backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); transition: opacity .26s var(--ease-std), backdrop-filter .4s var(--ease-std), -webkit-backdrop-filter .4s var(--ease-std); }
.mc-paused.is-show { backdrop-filter: blur(6px) saturate(.8); -webkit-backdrop-filter: blur(6px) saturate(.8); }
.mc-pz { transform: translateY(28px) scale(.97); opacity: 0; transition: transform .44s var(--ease-out), opacity .3s var(--ease-std); border-top: 4px solid var(--esl-gold); }
.mc-paused.is-show .mc-pz { transform: none; opacity: 1; }
.mc-pz > * { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease-std), transform .4s var(--ease-out); }
.mc-paused.is-show .mc-pz > * { opacity: 1; transform: none; }
.mc-paused.is-show .mc-pz > :nth-child(1) { transition-delay: .06s; }
.mc-paused.is-show .mc-pz > :nth-child(2) { transition-delay: .1s; }
.mc-paused.is-show .mc-pz > :nth-child(3) { transition-delay: .15s; }
.mc-paused.is-show .mc-pz > :nth-child(4) { transition-delay: .2s; }

/* kick-off: the pre-match lifts away toward the camera as the camera sweeps down */
.mc-intro { transition: opacity .45s var(--ease-std), transform .6s var(--ease-out), filter .45s var(--ease-std); }
.mc-stage:not([data-state="intro"]) .mc-intro { transform: scale(1.06) translateY(-2%); filter: blur(4px); }
/* the full-time report rises in the same way */
.mc-ft .mc-ftc { animation: mc-ft-rise .6s var(--ease-out) backwards; }
@keyframes mc-ft-rise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .esl-wipe { display: none; }
  .mc-pz, .mc-pz > *, .mc-intro, .mc-ft .mc-ftc { transition: none !important; animation: none !important; }
}

/* B19: the arrival -- the broadcast's opening shots before the line-ups (Arrival.ts). Letterbox bars, a lower third
   on the league's sharp plates (a white kicker, the ground's name on ink, the fixture on white), the replay's skip. */
.mc-arrival { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .34s var(--ease-std), visibility 0s linear .34s; }
.mc-stage[data-state="arrival"] .mc-arrival { opacity: 1; visibility: visible; transition: opacity .34s var(--ease-std); }
.mc-stage[data-state="arrival"] .mc-arrival .mc-lb { transform: none; }
.mc-stage[data-state="arrival"]:not(.is-walkout) .mc-tags { opacity: 0; }   /* A3: the walk-out shows the shirt numbers */
.mc-arr-cap { position: absolute; left: calc(var(--u) * 2.4); bottom: calc(9% + var(--u) * 2); display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; transform: translateY(10px); transition: opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.mc-arr-cap.is-show { opacity: 1; transform: none; }
.mc-arr-kick { display: flex; align-items: center; gap: .55em; background: #fff; color: var(--ink-500); padding: calc(var(--u) * .35) calc(var(--u) * 1);
  font: 700 max(11px, calc(var(--u) * .85)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.mc-arr-emblem { width: 1.5em; height: 1.5em; }
.mc-arr-name { background: var(--ink-900); color: #fff; font: 700 max(24px, calc(var(--u) * 3.2)) var(--font-display); letter-spacing: .05em; text-transform: uppercase;
  line-height: 1; padding: calc(var(--u) * .45) calc(var(--u) * 1.2) calc(var(--u) * .4); box-shadow: var(--shadow-2); }
.mc-arr-sub { background: var(--surface-strong); color: var(--ink-900); font: 600 max(13px, calc(var(--u) * 1.15)) var(--font-ui); padding: calc(var(--u) * .5) calc(var(--u) * 1.2); }
.mc-arr-fixture { display: flex; align-items: stretch; box-shadow: var(--shadow-2); }
.mc-arr-team { display: flex; align-items: center; gap: .6em; background: var(--ink-900); color: #fff; padding: calc(var(--u) * .5) calc(var(--u) * 1.2);
  font: 700 max(18px, calc(var(--u) * 2.1)) var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.mc-arr-team .mc-crest { width: 1.35em; height: 1.55em; }
.mc-arr-fixture i { display: grid; place-items: center; background: #fff; color: var(--ink-500); font: 700 max(14px, calc(var(--u) * 1.3)) var(--font-display);
  font-style: normal; text-transform: uppercase; padding: 0 calc(var(--u) * .8); }


/* =====================================================================================================
   A4 (ADR-062) -- the score bug in the league's blue (the user: "blue like the UCL", from the UCL bug and B15's own):
   one row -- the league's seal, each club's crest and name (no kit chips: the user found them useless), one white
   score plate on a gold line, the clock in the deepest blue with the
   bar's cut end. B15b's slab is kept: tilted back, lit along the top, a hard underside that follows the cut.
   ===================================================================================================== */
.mc-sb { --h: max(34px, calc(var(--u) * 3.4)); }
.mc-sb-row { height: var(--h); align-items: stretch; box-shadow: none; filter: drop-shadow(0 max(3px, calc(var(--u) * .3)) 0 #050d33); }
.mc-sb-row > span { position: relative; display: flex; align-items: center; }
.mc-sb-league { width: calc(var(--h) * 1.08); justify-content: center; background: linear-gradient(150deg, #3a73f0 0%, #1641b8 48%, #0c2272 100%); box-shadow: inset -2px 0 0 var(--esl-gold); }
.mc-sb-seal { display: block; width: 80%; height: 80%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.mc-sb-team { gap: calc(var(--h) * .2); padding: 0 calc(var(--h) * .3); min-width: 0; overflow: visible; background: linear-gradient(180deg, #1d3fa6 0%, #11308e 46%, #0b2172 100%); }
.mc-sb-team b { font: 700 calc(var(--h) * .43)/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.35); padding-top: 1px; }
.mc-sb-team.is-light b { color: #fff; }
.mc-sb-crest { display: block; height: calc(var(--h) * .74); flex: none; }
.mc-sb-crest::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--h) * 1.15); height: calc(var(--h) * 1.15); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 160, 255, .3), rgba(120, 160, 255, 0)); }
.mc-sb-crest .mc-crest, .mc-sb-crest svg { position: relative; display: block; height: 100%; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.mc-sb-score { gap: 0; padding: 0 calc(var(--h) * .06); overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f1f4fc 55%, #dce4f5 100%); box-shadow: inset 0 calc(var(--h) * -.05) 0 var(--esl-gold); }
.mc-sb-score .mc-digit { font: 700 calc(var(--h) * .66)/1 var(--font-display); color: #0c2272; width: calc(var(--h) * .74); min-width: 0; text-align: center; text-shadow: none; padding-bottom: calc(var(--h) * .04); }
.mc-sb-sep { width: 1px; align-self: stretch; margin: calc(var(--h) * .22) 0; background: rgba(12, 34, 114, .22); }
.mc-sb-emblem { display: none; }
.mc-sb-clock { gap: calc(var(--h) * .14); height: auto; min-width: 0; margin: 0; padding: 0 calc(var(--h) * .52) 0 calc(var(--h) * .34); transform: none;
  background: linear-gradient(180deg, #11297e 0%, #0a1c5e 55%, #081650 100%); clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * .28) 100%, 0 100%); box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.mc-sb-clock::after { display: none; }
.mc-sb-clock b { font: 700 calc(var(--h) * .43)/1 var(--font-display); color: #fff; letter-spacing: .05em; padding-top: 1px; }
.mc-sb-clock i { font: 700 calc(var(--h) * .3)/1 var(--font-display); color: #0c2272; background: var(--esl-gold); padding: calc(var(--h) * .06) calc(var(--h) * .1) calc(var(--h) * .04); }
.mc-sb-row::after { clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * .28) 100%, 0 100%); }
/* a goal: the new number rolls down into the plate, gold, and settles navy */
@media (prefers-reduced-motion: no-preference) { .mc-sb-score .mc-digit.flip { animation: mc-sb-roll .72s cubic-bezier(.2, .9, .25, 1.12); } }
@keyframes mc-sb-roll { 0% { transform: translateY(-70%); opacity: 0; color: #9a7536; } 35% { opacity: 1; } 70% { color: #9a7536; } 100% { transform: none; opacity: 1; color: #0c2272; } }

/* A4 (ADR-062): the line-up's kit tag -- the shirt worn today beside the formation and the styles */
.mc-ls-tags .mc-ls-kit { flex-direction: row; align-items: center; gap: calc(var(--u) * .5); padding-left: calc(var(--u) * .45); }
.mc-ls-tags .mc-ls-kit > span { display: flex; flex-direction: column; gap: 1px; padding: 0; background: none; box-shadow: none; }
.mc-ls-tags .mc-ls-kit .sphere { --sphere: max(26px, calc(var(--u) * 2.7)); margin: 0 calc(var(--u) * .2) calc(var(--u) * .25); }


/* =====================================================================================================
   A9 (the user, 5 October: "no gameplay in between the highlights ... a cut and then on to the next one"):
   the transition between highlights -- the league's wipe (the broadcast wipe's gold edge and midnight panel,
   the sting's skewed sweep) carried in from the left by the view, frame by frame from the reel's tick, with
   the minute card over it: the next highlight's minute, the score, one line of context. A red card from a
   foul outside any chance gets its own card first. The score bug, the controls, the toasts and the
   commentary stay above it; the clock jumps to the highlight's minute under the cover.
   ===================================================================================================== */
.mc-tr { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; --tr-x: -112%; --tr-gold: -105%;
  --tr-night: #081650; --tr-navy: #0c2272; --tr-royal: #1641b8; --tr-gold-c: #c9a45c; --tr-ice: #e7edfa; }
.mc-tr.is-on { visibility: visible; }
.mc-tr-panel, .mc-tr-gold { position: absolute; top: -12%; bottom: -12%; left: -30%; width: 160%; will-change: transform; }
.mc-tr-gold { background: linear-gradient(90deg, #9a7536, #ead39b 45%, var(--tr-gold-c)); transform: translateX(var(--tr-gold)) skewX(-12deg); }
.mc-tr-panel { transform: translateX(var(--tr-x)) skewX(-12deg);
  background:
    linear-gradient(100deg, transparent 0 38%, rgba(231,237,250,.05) 38% 39%, transparent 39% 61%, rgba(231,237,250,.04) 61% 62%, transparent 62%),
    radial-gradient(120% 90% at 50% 40%, var(--tr-royal), var(--tr-navy) 55%, var(--tr-night)); }
.mc-tr-body { position: absolute; inset: 0; display: grid; place-items: center; }
.mc-tr-body [data-i] { opacity: 0; will-change: transform, opacity; }
.mc-stage.is-tr .mc-carrier, .mc-stage.is-tr .mc-mom { opacity: 0 !important; }

/* the minute card */
.mc-tr-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.1); color: var(--tr-ice); text-align: center; }
.mc-tr-kick { display: flex; align-items: center; gap: calc(var(--u) * .8); font: 700 max(12px, calc(var(--u) * 1.15))/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--tr-gold-c); }
.mc-tr-emblem { width: max(30px, calc(var(--u) * 3.4)); height: max(30px, calc(var(--u) * 3.4)); filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.mc-tr-min { font: 700 max(64px, calc(var(--u) * 10.5))/.86 var(--font-display); letter-spacing: .01em; color: var(--tr-ice); text-shadow: 0 6px 22px rgba(3,8,40,.55); }
.mc-tr-min i { font-style: normal; color: var(--tr-gold-c); margin-left: .02em; }
.mc-tr-score { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.mc-tr-score b { font: 700 max(17px, calc(var(--u) * 2.1))/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tr-ice); white-space: nowrap; }
.mc-tr-score em { font: 700 max(22px, calc(var(--u) * 2.6))/1 var(--font-display); font-style: normal; color: var(--tr-navy); min-width: 1.25em; padding: .14em .18em .1em; text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4fc 55%, #dce4f5 100%); box-shadow: inset 0 -3px 0 var(--tr-gold-c); }
.mc-tr-score em + em { margin-left: calc(var(--u) * -.85); border-left: 1px solid rgba(12, 34, 114, .22); }
.mc-tr-crest { display: block; width: max(26px, calc(var(--u) * 2.9)); height: max(30px, calc(var(--u) * 3.4)); flex: none; }
.mc-tr-crest svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.mc-tr-ctx { display: flex; align-items: center; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * .2); padding: calc(var(--u) * .45) calc(var(--u) * 1.3) calc(var(--u) * .45) calc(var(--u) * .9);
  font: 600 max(14px, calc(var(--u) * 1.55))/1.1 var(--font-ui); color: var(--tr-ice); background: rgba(3, 10, 48, .38); box-shadow: inset 0 -2px 0 var(--tr-gold-c); }
.mc-tr-ctx i { width: max(4px, calc(var(--u) * .4)); align-self: stretch; }

/* a red card outside any chance */
.mc-tr-red { display: flex; align-items: center; gap: calc(var(--u) * 2.4); color: var(--tr-ice); }
.mc-tr-redcard { display: block; width: max(54px, calc(var(--u) * 6.4)); height: max(76px, calc(var(--u) * 9)); rotate: -9deg;
  background: linear-gradient(160deg, #f0353d 0%, #d01e28 55%, #a3111a 100%); box-shadow: 0 14px 32px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); }
.mc-tr-red-txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .9); }
.mc-tr-red-txt b { font: 700 max(36px, calc(var(--u) * 5.4))/.9 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--tr-ice); text-shadow: 0 6px 22px rgba(3,8,40,.55); }
.mc-tr-club { display: flex; align-items: center; gap: calc(var(--u) * .8); font: 600 max(14px, calc(var(--u) * 1.6))/1 var(--font-ui); color: var(--tr-ice); }

@media (max-height: 520px) {
  .mc-tr-min { font-size: max(52px, calc(var(--u) * 9)); }
  .mc-tr-card { gap: calc(var(--u) * .8); }
}
@media (prefers-reduced-motion: reduce) { .mc-tr-body [data-i] { opacity: 1; transform: none !important; } }

/* --- A5: knockout matches -- the aggregate and the shootout under the score bug, the shootout card, the result line --- */
.mc-sb-ko { display: flex; align-items: stretch; height: calc(var(--h, 34px) * .62); margin-top: max(3px, calc(var(--u) * .3)); align-self: center;
  filter: drop-shadow(0 max(2px, calc(var(--u) * .22)) 0 #050d33); }
.mc-sb-ko[hidden] { display: none; }
.mc-sb-ko > span { display: flex; align-items: center; gap: calc(var(--h, 34px) * .2); padding: 0 calc(var(--h, 34px) * .32);
  font: 700 calc(var(--h, 34px) * .36)/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #1d3fa6 0%, #11308e 46%, #0b2172 100%); }
.mc-sb-agg { box-shadow: inset 0 calc(var(--h, 34px) * -.05) 0 var(--esl-gold); }
.mc-sb-agg + .mc-sb-pens { border-left: 1px solid rgba(255,255,255,.18); }
.mc-sb-pens b { padding: 0 calc(var(--h, 34px) * .12); color: #0c2272; background: linear-gradient(180deg, #ffffff 0%, #dce4f5 100%); align-self: stretch; display: grid; place-items: center; }
.mc-pens { display: inline-flex; gap: max(3px, calc(var(--u) * .28)); align-items: center; }
.mc-pens i { display: block; width: max(7px, calc(var(--u) * .62)); height: max(7px, calc(var(--u) * .62)); border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(255,255,255,.35); }
.mc-pens i.is-goal { background: var(--esl-gold, #c9a45c); border-color: var(--esl-gold, #c9a45c); }
.mc-pens i.is-miss { background: transparent; border-color: #ff5a62; }
.mc-tr-pens { display: flex; gap: calc(var(--u) * 6); justify-content: center; }
.mc-tr-pens .mc-pens { gap: max(5px, calc(var(--u) * .5)); }
.mc-tr-pens .mc-pens i { width: max(12px, calc(var(--u) * 1.15)); height: max(12px, calc(var(--u) * 1.15)); border-width: 2px; border-color: rgba(231,237,250,.4); }
.mc-tr-pens .mc-pens i.is-goal { background: var(--tr-gold-c); border-color: var(--tr-gold-c); }
.mc-tr-pens .mc-pens i.is-miss { border-color: #ff5a62; }
.mc-ft-ko { flex-basis: 100%; text-align: center; font: 600 max(12px, calc(var(--u) * 1))/1.35 var(--font-ui); color: var(--ink-700); margin-top: calc(var(--u) * .4); }

/* =====================================================================================================
   A7 -- a European Super Cup tie is the cup's broadcast, not the league's (the user: "not the trophy, not the colors,
   nothing"): the score bug's badge slot carries the Chalice plate, its slabs and clock go deep teal edged in silver,
   the score plate sits on a silver line; the kickers' badge is the cup's (MatchCentreView.mark); the wipe sweeps teal.
   ===================================================================================================== */
.mc-stage.is-cup { --esl-midnight: #083c42; --esl-violet: #0f5c63; --esl-gold: #c9d1d6; }
.mc-stage.is-cup .mc-sb-row { filter: drop-shadow(0 max(3px, calc(var(--u) * .3)) 0 #04272b); }
.mc-stage.is-cup .mc-sb-league { background: linear-gradient(150deg, #2a8f96 0%, #0f5c63 50%, #083c42 100%); box-shadow: inset -2px 0 0 #c9d1d6; }
.mc-stage.is-cup .mc-sb-team { background: linear-gradient(180deg, #16707a 0%, #0f5c63 46%, #0b4a50 100%); }
.mc-stage.is-cup .mc-sb-crest::before { background: radial-gradient(closest-side, rgba(150, 230, 220, .28), rgba(150, 230, 220, 0)); }
.mc-stage.is-cup .mc-sb-score { background: linear-gradient(180deg, #ffffff 0%, #f1f6f6 55%, #dde8e9 100%); box-shadow: inset 0 calc(var(--h) * -.05) 0 #8c9aa3; }
.mc-stage.is-cup .mc-sb-score .mc-digit { color: #0f5c63; }
.mc-stage.is-cup .mc-sb-sep { background: rgba(15, 92, 99, .22); }
.mc-stage.is-cup .mc-sb-clock { background: linear-gradient(180deg, #0d5258 0%, #0a454b 55%, #083c42 100%); }
.mc-stage.is-cup .mc-sb-clock i { color: #083c42; background: #c9d1d6; }
@media (prefers-reduced-motion: no-preference) { .mc-stage.is-cup .mc-sb-score .mc-digit.flip { animation-name: mc-sb-roll-cup; } }
@keyframes mc-sb-roll-cup { 0% { transform: translateY(-70%); opacity: 0; color: #5fd1c4; } 35% { opacity: 1; } 70% { color: #2a8f96; } 100% { transform: none; opacity: 1; color: #0f5c63; } }
.esl-wipe.is-cup .esl-wipe-gold { background: linear-gradient(90deg, #8c9aa3, #eef2f4 45%, #c9d1d6); }
.esl-wipe.is-cup .esl-wipe-panel { background: radial-gradient(120% 90% at 50% 40%, #18737a, #0f5c63 55%, #083c42); }
.esl-wipe.is-cup .esl-wipe-mark span { color: #e3f1f0; }