.mce {
    --mce-ink: var(--mc-ink, #0f172a);
    --mce-muted: var(--mc-muted, #475569);
    --mce-border: var(--mc-border, #dfe5ed);
    color: var(--mce-ink);
    background: #fff;
    border: 1px solid var(--mce-border);
    border-radius: 16px;
    padding: 1.5rem;
    min-width: 0;
    container-type: inline-size;
}
.mce [hidden] { display: none !important; }
.mce button, .mce select, .mce summary { font: inherit; }
.mce button { cursor: pointer; }
.mce button:focus-visible, .mce select:focus-visible, .mce summary:focus-visible, .mce__period:focus-visible {
    outline: 3px solid #447fbb;
    outline-offset: 3px;
}
.mce__intro { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.3rem; }
.mce__eyebrow { color: #526b84; font-size: .69rem; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; margin: 0 0 .45rem; }
.mce__intro h2 { font-size: 1.55rem; line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.mce__description { color: var(--mce-muted); font-size: .87rem; line-height: 1.6; margin: .55rem 0 0; max-width: 37rem; }
.mce__total { display: grid; text-align: right; flex: 0 0 auto; padding-top: .12rem; }
.mce__total strong { font-size: 1.8rem; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.mce__total span { color: var(--mce-muted); font-size: .72rem; white-space: nowrap; margin-top: .2rem; }
.mce__notice { border: 1px solid #e4c880; border-left: 4px solid #ac781b; border-radius: 8px; background: #fff9e9; color: #634c22; padding: .8rem 1rem; margin-bottom: 1.1rem; font-size: .81rem; line-height: 1.55; }
.mce__notice strong { font-size: .84rem; }
.mce__notice p { margin: .25rem 0 0; }
.mce__controls { margin-bottom: 1.25rem; }
.mce__quarters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--mce-border); border-radius: 10px; padding: 4px; gap: 4px; background: #f4f6f9; }
.mce__quarter { min-height: 63px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .24rem; border: 1px solid transparent; border-radius: 7px; color: var(--mce-muted); background: transparent; padding: .45rem; }
.mce__quarter strong { font-size: .92rem; }
.mce__quarter span { font-size: .7rem; line-height: 1.25; }
.mce__quarter:hover { background: #e7edf4; }
.mce__quarter[aria-selected="true"] { color: #fff; background: var(--mc-accent, #0b2240); border-color: var(--mc-accent, #0b2240); }
.mce__quarter--missing:not([aria-selected="true"]) span { color: #946c25; }
.mce__filters { display: flex; gap: .8rem; justify-content: space-between; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.mce__filter-buttons { display: inline-flex; gap: .25rem; padding: 3px; border-radius: 8px; background: #eef2f6; }
.mce__filter-buttons button { border: 1px solid transparent; border-radius: 6px; padding: .45rem .8rem; min-height: 36px; color: var(--mce-muted); background: transparent; font-size: .78rem; font-weight: 650; }
.mce__filter-buttons button[aria-pressed="true"] { background: #fff; border-color: #d7e0e9; color: var(--mce-ink); }
.mce__filter-buttons button:hover { color: var(--mce-ink); }
.mce__team-filter { display: flex; align-items: center; gap: .5rem; color: var(--mce-muted); font-size: .74rem; }
.mce__team-filter select { color: var(--mce-ink); border: 1px solid #d7e0e9; background: #fff; border-radius: 7px; padding: .5rem 1.6rem .5rem .65rem; max-width: 13rem; font-size: .78rem; min-height: 38px; }
.mce__period { scroll-margin-top: 1rem; }
.mce__period-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.1rem 0 .8rem; }
.mce__period-heading h3 { margin: 0; font-size: .93rem; }
.mce__period-heading h3 span { font-size: .74rem; color: var(--mce-muted); font-weight: 450; margin-left: .2rem; }
.mce__result-count { font-size: .73rem; color: var(--mce-muted); margin: 0; text-align: right; }
.mce__plays, .mce__actions { list-style: none; margin: 0; padding: 0; }
.mce__plays { position: relative; }
.mce__play { --mce-side: #708196; --mce-side-text: #fff; position: relative; padding-left: 37px; padding-bottom: 13px; min-width: 0; }
.mce__play--home { --mce-side: var(--mc-home, #0b2240); --mce-side-text: var(--mc-home-text, #fff); }
.mce__play--away { --mce-side: var(--mc-away, #52657c); --mce-side-text: var(--mc-away-text, #fff); }
.mce__play::before { position: absolute; content: ''; left: 12px; top: 0; bottom: 0; width: 2px; background: #dce4ec; }
.mce__play:first-child::before { top: 23px; }
.mce__play:last-child::before { bottom: calc(100% - 24px); }
.mce__marker { position: absolute; left: 0; top: 15px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: #f4f6f9; border: 1px solid #d1dbe5; border-radius: 50%; color: #61758a; font-size: .61rem; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 1; }
.mce__play--scoring .mce__marker { background: var(--mce-side); border-color: var(--mce-side); color: var(--mce-side-text); }
.mce__card { --mce-clock-width: 42px; --mce-node-width: 64px; --mce-flow-axis: 74px; border: 1px solid var(--mce-border); border-left: 4px solid var(--mce-side); border-radius: 12px; background: #fff; padding: 0 1rem .65rem; min-width: 0; overflow: hidden; }
.mce__flow { min-width: 0; }
.mce__flow-hint { font-size: .68rem; color: #62768a; margin: .75rem 0 .2rem; text-align: center; }
.mce__play-heading { display: flex; justify-content: space-between; gap: .6rem; align-items: center; margin: 0 -1rem .15rem; padding: .8rem 1rem; flex-wrap: wrap; border-bottom: 1px solid #e6ecf2; background: #f4f7fa; }
.mce__play-identity { display: flex; gap: .35rem .4rem; align-items: center; min-width: 0; flex-wrap: wrap; }
.mce__team-dot { background: var(--mce-side); width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.mce__play-identity strong { font-size: .78rem; }
.mce__play-number { color: var(--mce-muted); font-size: .7rem; border-left: 1px solid #cbd7e3; padding-left: .5rem; margin-left: .1rem; }
.mce__play-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.mce__clock { color: #53667c; font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mce__outcome { color: #53667c; font-size: .64rem; font-weight: 650; border: 1px solid #dce4ec; border-radius: 5px; background: #f7f9fb; padding: .2rem .42rem; line-height: 1.2; }
.mce__outcome--goal, .mce__outcome--behind { background: var(--mce-side); color: var(--mce-side-text); border-color: var(--mce-side); }
.mce__actions { display: block; }
.mce__action { --mce-node: #718398; --mce-node-text: #fff; position: relative; display: grid; grid-template-columns: var(--mce-clock-width) var(--mce-node-width) minmax(0, 1fr); min-width: 0; padding: .25rem 0 1.55rem; min-height: 91px; align-items: center; }
.mce__action--home { --mce-node: var(--mc-home, #0b2240); --mce-node-text: var(--mc-home-text, #fff); }
.mce__action--away { --mce-node: var(--mc-away, #52657c); --mce-node-text: var(--mc-away-text, #fff); }
.mce__action-time { display: grid; justify-items: start; gap: .2rem; padding-right: 4px; align-self: center; }
.mce__action-clock { font-size: .7rem; color: #425b74; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mce__action-number { font-size: .56rem; color: #97a5b5; font-variant-numeric: tabular-nums; }
.mce__jersey-node { display: grid; place-items: center; align-self: start; height: 65px; width: var(--mce-node-width); position: relative; z-index: 1; }
.mce__jersey { width: 58px; height: 64px; object-fit: contain; display: block; }
/* The same team-coloured silhouette used in Match Centre lineups is the fallback. */
.mce__jersey-fallback { position: relative; display: grid; place-items: center; width: 43px; height: 45px; color: var(--mce-node-text); background: var(--mce-node); clip-path: polygon(25% 0, 40% 7%, 60% 7%, 75% 0, 100% 18%, 83% 36%, 75% 29%, 75% 100%, 25% 100%, 25% 29%, 17% 36%, 0 18%); }
.mce__jersey-fallback::before { content: ''; position: absolute; top: 6px; left: 24%; width: 52%; height: 2px; background: currentColor; }
.mce__jersey-fallback > span { padding-top: 9px; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mce__ball-node { display: grid; place-items: center; height: 46px; width: 46px; background: #f3f6f9; border: 1px solid #d7e1eb; border-radius: 50%; color: #a56437; }
.mce__ball-node svg { width: 28px; height: 33px; }
.mce__action-copy { min-width: 0; padding: .25rem 0 .2rem .85rem; }
.mce__action-topline { display: flex; align-items: baseline; gap: .25rem .6rem; flex-wrap: wrap; }
.mce__action-topline strong { font-size: .9rem; font-weight: 750; line-height: 1.35; letter-spacing: -.015em; }
.mce__action-team { display: inline-flex; gap: .3rem; align-items: center; font-size: .61rem; color: #6d7f91; }
.mce__action-team i { display: block; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--mce-node); }
.mce__action-label { display: block; font-size: .8rem; line-height: 1.5; color: #294159; margin-top: .2rem; }
.mce__action-description { display: block; font-size: .69rem; line-height: 1.5; color: #708194; margin-top: .08rem; }
.mce__action--score .mce__action-label { font-weight: 750; }
.mce__flow-arrow { position: absolute; left: calc(var(--mce-flow-axis) - 1px); bottom: 2px; width: 2px; height: 21px; background: var(--mce-node, #8296aa); }
.mce__flow-arrow::after { position: absolute; content: ''; left: -4px; bottom: -1px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--mce-node, #8296aa); }
.mce__bookend { position: relative; display: grid; grid-template-columns: var(--mce-clock-width) var(--mce-node-width) minmax(0, 1fr); align-items: center; min-height: 63px; padding: .5rem 0; }
.mce__bookend-node { grid-column: 2; justify-self: center; display: grid; place-items: center; width: 26px; height: 26px; background: #e9eff5; border: 1px solid #b8c8d8; border-radius: 50%; color: #71859a; font-size: .53rem; font-weight: 800; }
.mce__bookend > div { min-width: 0; padding-left: .85rem; display: flex; gap: .4rem .65rem; align-items: baseline; flex-wrap: wrap; }
.mce__bookend-caption { color: #8191a3; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.mce__bookend strong { font-size: .76rem; color: #475f77; font-weight: 650; }
.mce__bookend--start { padding-bottom: 1.2rem; }
.mce__bookend--start .mce__bookend-node { width: 13px; height: 13px; border: 3px solid var(--mce-side); background: #fff; }
.mce__bookend--start::after { content: ''; position: absolute; left: calc(var(--mce-flow-axis) - 1px); bottom: 4px; width: 2px; height: 15px; background: #95a7b9; }
.mce__bookend--start::before { content: ''; position: absolute; left: calc(var(--mce-flow-axis) - 5px); bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #95a7b9; }
.mce__bookend--finish { min-height: 47px; padding: 0 0 .2rem; }
.mce__bookend--score .mce__bookend-node { background: var(--mce-side); color: var(--mce-side-text); border: 0; font-size: .73rem; width: 32px; height: 32px; }
.mce__bookend--score strong { background: var(--mce-side); color: var(--mce-side-text); border-radius: 5px; padding: .28rem .55rem; font-size: .8rem; }
.mce__bridge { position: relative; display: grid; grid-template-columns: var(--mce-clock-width) var(--mce-node-width) minmax(0, 1fr); align-items: start; min-height: 58px; padding-bottom: 23px; }
.mce__bridge-node { display: grid; place-items: center; grid-column: 2; justify-self: center; width: 28px; height: 28px; background: #eef3f8; border: 1px dashed #aebed0; border-radius: 50%; color: #526d87; font-size: 1.15rem; line-height: 1; }
.mce--enhanced .mce__play:not(.is-expanded) .mce__action--extra { display: none !important; }
.mce .mce__expand { display: inline-flex; justify-self: start; align-items: center; gap: .4rem; background: #edf3f9; border: 1px solid #dce6f0; border-radius: 5px; color: #325d89; font-weight: 650; font-size: .7rem; min-height: 30px; padding: .35rem .6rem; margin-left: .85rem; text-align: left; line-height: 1.4; }
.mce__expand::after { content: '+'; font-size: .95rem; line-height: 1; }
.mce__expand[aria-expanded="true"]::after { content: '−'; }
.mce__expand:hover { text-decoration: underline; }
.mce__empty, .mce__unavailable { background: #f6f8fb; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 2rem 1.2rem; text-align: center; }
.mce__empty h4, .mce__unavailable h3 { margin: 0 0 .5rem; font-size: .98rem; }
.mce__empty p, .mce__unavailable p { color: var(--mce-muted); font-size: .83rem; line-height: 1.6; max-width: 32rem; margin: 0 auto; }
.mce__empty-symbol { display: block; margin-bottom: .8rem; font-size: 1.3rem; color: #728398; }
.mce__empty button { border: 1px solid #c9d6e4; background: #fff; color: #244b73; border-radius: 7px; padding: .6rem .9rem; font-size: .78rem; margin-top: .85rem; }
.mce__more { padding: .3rem 0 1rem 37px; display: flex; justify-content: center; gap: .7rem; align-items: center; }
.mce__more button, .mce__quarter-nav button { background: #fff; color: #304f70; border: 1px solid #cbd6e1; border-radius: 7px; padding: .55rem .85rem; min-height: 38px; font-size: .76rem; font-weight: 650; }
.mce__more button:hover, .mce__quarter-nav button:not(:disabled):hover { background: #f0f4f8; border-color: #91a7be; }
.mce__more span { color: var(--mce-muted); font-size: .71rem; }
.mce__quarter-nav { display: flex; justify-content: space-between; gap: .6rem; align-items: center; border-top: 1px solid var(--mce-border); padding-top: 1rem; margin-top: .4rem; }
.mce__quarter-nav > span { color: var(--mce-muted); font-size: .75rem; }
.mce__quarter-nav button:disabled { color: #98a4b2; background: #f7f9fb; border-color: #e2e8f0; cursor: default; }
.mce__about { color: var(--mce-muted); font-size: .76rem; margin-top: 1.2rem; border-top: 1px solid var(--mce-border); padding-top: .95rem; }
.mce__about summary { cursor: pointer; color: #415974; font-weight: 650; padding: .2rem 0; }
.mce__about p { max-width: 50rem; margin: .6rem 0 0; line-height: 1.65; }
/* A wide card is one unbroken left-to-right path. Opening its middle switches
   to a complete vertical path, so no action disappears past a horizontal edge. */
@container (min-width: 760px) {
    .mce--enhanced .mce__play:not(.is-expanded) .mce__flow { display: grid; grid-template-columns: 68px minmax(0, 1fr) 76px; gap: 0; align-items: start; padding: 1rem 0 .65rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__actions { display: flex; align-items: flex-start; justify-content: space-around; min-width: 0; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; min-height: 0; padding: 0 .45rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__jersey-node { order: 0; align-self: center; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-time { order: 1; display: flex; justify-content: center; gap: .3rem; align-items: baseline; padding: 0; margin: .22rem 0 .38rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-copy { order: 2; padding: 0 .2rem; text-align: center; width: 100%; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-topline { display: block; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-topline strong { font-size: .81rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-team { display: flex; justify-content: center; margin-top: .18rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-label { font-size: .73rem; margin-top: .45rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__action-description { font-size: .65rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__flow-arrow { left: auto; right: -10px; top: 31px; bottom: auto; width: 20px; height: 2px; z-index: 2; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__flow-arrow::after { left: auto; right: -1px; top: -4px; bottom: auto; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--mce-node, #8296aa); border-right: 0; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend { display: flex; flex-direction: column; padding: 0; min-height: 0; text-align: center; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend-node { margin: 19px 0 22px; flex-shrink: 0; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend--start .mce__bookend-node { margin: 25px 0 28px; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend--score .mce__bookend-node { margin: 16px 0 19px; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend > div { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 0 .2rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend strong { font-size: .69rem; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend--start::after { left: auto; right: -10px; top: 31px; bottom: auto; width: 20px; height: 2px; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bookend--start::before { left: auto; right: -11px; top: 27px; bottom: auto; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #95a7b9; border-right: 0; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bridge { flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__bridge-node { margin: 18px 0 20px; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__expand { margin: 0 4px; padding: .3rem; width: calc(100% - 8px); font-size: .64rem; justify-content: center; text-align: center; }
    .mce--enhanced .mce__play:not(.is-expanded) .mce__expand::after { display: none; }
    .mce__play.is-expanded .mce__flow { max-width: 600px; margin-inline: auto; }
}
@media (max-width: 700px) {
    .mce { padding: 1rem; border-radius: 12px; }
    .mce__intro { gap: 1rem; }
    .mce__intro h2 { font-size: 1.3rem; }
    .mce__total strong { font-size: 1.4rem; }
    .mce__total span { font-size: .65rem; }
    .mce__description { font-size: .8rem; }
    .mce__quarter { min-height: 60px; }
    .mce__quarter span { font-size: .62rem; }
    .mce__filters { align-items: stretch; }
    .mce__team-filter { flex: 1 1 auto; justify-content: flex-end; }
    .mce__team-filter select { max-width: 12rem; }
    .mce__play { padding-left: 28px; }
    .mce__play::before { left: 9px; }
    .mce__marker { width: 21px; height: 21px; top: 16px; font-size: .56rem; }
    .mce__card { --mce-clock-width: 31px; --mce-node-width: 49px; --mce-flow-axis: 55.5px; padding: 0 .6rem .65rem; }
    .mce__play-heading { gap: .4rem; margin: 0 -.6rem .15rem; padding: .6rem; }
    .mce__play-meta { width: 100%; justify-content: space-between; }
    .mce__action { min-height: 86px; }
    .mce__jersey-node { height: 60px; }
    .mce__jersey { width: 46px; height: 58px; }
    .mce__jersey-fallback { width: 35px; height: 39px; }
    .mce__action-copy { padding-left: .5rem; }
    .mce__action-topline strong { font-size: .8rem; }
    .mce__action-team { font-size: .57rem; }
    .mce__action-label { font-size: .73rem; }
    .mce__action-description { font-size: .64rem; }
    .mce__action-clock { font-size: .61rem; }
    .mce__action-number { font-size: .51rem; }
    .mce__bookend > div { padding-left: .5rem; gap: .2rem .45rem; }
    .mce__bookend strong { font-size: .7rem; }
    .mce .mce__expand { margin-left: .5rem; font-size: .65rem; padding: .3rem .45rem; }
    .mce__period-heading { gap: .5rem; }
    .mce__period-heading h3 span { display: block; margin: .2rem 0 0; font-size: .67rem; }
    .mce__result-count { font-size: .67rem; }
    .mce__more { padding-left: 28px; flex-wrap: wrap; }
    .mce__quarter-nav button { font-size: .7rem; padding: .5rem .6rem; }
    .mce__quarter-nav > span { font-size: .68rem; }
}
@media (max-width: 400px) {
    .mce__total { display: none; }
    .mce__team-filter { justify-content: space-between; }
    .mce__filter-buttons { flex: 1; }
    .mce__filter-buttons button { flex: 1; }
    .mce__play { padding-left: 0; }
    .mce__play::before, .mce__marker { display: none; }
}