/* The live match page on phones and tablets (≤980px, js/live-mobile.js): bet365's mobile event
   page — BettingPlatform.API/mobile-event-css, its sheets 1:1 under /vendor/live-scout/mobile/css.
   This file only joins them to the page: our brand colours on their BRAND variables, what of the
   desktop page steps aside, the header and the pitch / video zone sticky under the site's header,
   and the few states our data needs. The bet365 sheets load after this one (with the page), so
   every rule carries the page's id. Above 980px only bet365's match header (and the follow bell
   ending the statistics bar) is drawn from it: the rules without .lmm-on. */

/* Desktop: the pitch / video zone's wrappers (index.html) have no box — the rail is what it
   always was. On a phone they are bet365's sticky zone. */
.lmm-Wrap { display: contents; }

/* BRAND (mobile-event-css README, "Branding"): the site's prices, picks and green. The greys
   are bet365's own. Where the header and the zone stick: under the fixed site header, and under
   the account-verification banner when it shows. The prematch match page's markets are a theme
   root of their own (js/live-mobile.js frame): the same colours. */
#page-live-match.lmm-Root,
#md-markets.lmm-Root {
    --color-yellowFFDF1B: var(--accent-odds);
    --color-yellow1: var(--accent-odds);
    --color-greyE4: var(--odd-selected-bg);
    --color-green126E51: var(--odd-selected-ink);
    --color-green28FFBB: var(--accent-green);
    --color-green3: var(--accent-green);
    --color-green189970-75p: var(--accent-teal);
    --color-grey2: var(--bg-primary);
    --lmm-top: var(--header-height);
    --lmm-comp-h: 58px;
    --lmm-crumb-h: 51px;
}
body.has-verify-banner #page-live-match.lmm-Root { --lmm-top: calc(var(--header-height) + 44px); }

/* The desktop page's own score bar steps aside for bet365's header on every width (its minute
   and periods stay in the page: the header's status line reads them); on a phone the category
   strip too. The market search's bar stays: the tabs' search opens it, under them. */
#page-live-match #live-md-detail-top,
#page-live-match.lmm-on .md-categories-wrapper { display: none !important; }

/* Until bet365's sheets are in (js/live-mobile.js apply): drawn without them, the header, the
   market tabs and the markets showed as raw lists for a moment (a page opened straight on a
   match, or back from idle). */
#page-live-match.lmm-pending .lmm-Header,
#page-live-match.lmm-pending.lmm-on #lmm-tabs,
#page-live-match.lmm-pending.lmm-on #live-md-markets { display: none !important; }

/* Edge to edge and without gaps between the blocks, as bet365's page. */
body:has(#page-live-match.lmm-on.active) .content { padding-left: 0; padding-right: 0; padding-top: 0; }
/* The footer's negative sides answer .content's padding, off here: it stood 10px past the
   screen's edge, and the page could move sideways by that much. */
body:has(#page-live-match.lmm-on.active) .site-footer { margin-left: 0; margin-right: 0; }
#page-live-match.lmm-on .live-md-cols { gap: 0; --md-col-gap: 0px; }

/* The match header: first, pinned under the site's header - fixed, not sticky: a sticky one left
   with its column once the page reached the footer. Its room in the column is its measured
   height (--lmm-head-h, js/live-mobile.js). */
#page-live-match.lmm-on #lmm-header {
    order: 0;
    position: fixed;
    top: var(--lmm-top);
    left: 0;
    right: 0;
    z-index: 37;
}
/* (.live-md-cols: on a phone the main column and the rail are display: contents - its items.) */
#page-live-match.lmm-on .live-md-cols { padding-top: var(--lmm-head-h, calc(var(--lmm-comp-h) + var(--lmm-crumb-h))); }
/* Sports without the pitch module: the minute / period under the score. */
#page-live-match .lmm-Status {
    padding: 6px 10px 6px;
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

/* The header of design "Live match header" (2026-10-21), on every width: the competition over
   the score with a round back button beside it. On a desktop the clock with them and the
   switch's ⌄ in green right after the names; on a phone a band running on from the site
   header's green, the switch a round ☰, the whole header pinned while the page scrolls under
   it. bet365's buttons are masks of themselves: ours draw the icon in ::before and the circle
   on the button. */
#page-live-match .lmm-Header {
    --lmm-ico-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E");
    --lmm-ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h14'/%3E%3C/svg%3E");
}
#page-live-match .lmm-Comp {
    box-sizing: border-box;
    height: var(--lmm-comp-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 68px;
    background: var(--color-grey2);
    color: var(--text-secondary);
    font-size: 15px;
}
#page-live-match .lmm-CompName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-live-match .lmm-CompClock {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-deep);
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#page-live-match .lmm-CompClock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-red); }
#page-live-match .lmm-CompClock[hidden] { display: none; }
#page-live-match .lmm-Header .ipe-EventHeaderBreadcrumb { padding-left: 45px; }
#page-live-match .lmm-Header .ipe-EventHeaderBreadcrumb-noeventswitcher { padding-left: 10px; }
#page-live-match .lmm-Header .ipe-EventHeaderBreadcrumb_BackButton {
    position: absolute;
    left: 12px;
    top: calc((var(--lmm-comp-h) - 0px) / 2 - var(--lmm-comp-h));   /* in the middle of the competition's row */
    z-index: 1;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    -webkit-mask: none;
    mask: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--bg-primary);
}
#page-live-match .lmm-Header .ipe-EventHeaderBreadcrumb_BackButton:hover { background-color: var(--bg-tertiary); }
#page-live-match .lmm-Header .ipe-EventHeaderBreadcrumb_BackButton::before,
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderMatchButton::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: var(--text-primary);
    -webkit-mask: var(--lmm-ico-back) center / contain no-repeat;
    mask: var(--lmm-ico-back) center / contain no-repeat;
}
/* Desktop: the names and the ⌄ one group in the middle. */
#page-live-match:not(.lmm-on) .lmm-Header .ipe-EventHeaderBreadcrumb { justify-content: center; padding-left: 36px; }
#page-live-match:not(.lmm-on) .lmm-Header .ipe-EventHeaderBreadcrumb-noeventswitcher { padding-left: 10px; }
#page-live-match:not(.lmm-on) .lmm-Header .ipe-EventHeaderBreadcrumb_Scoreboard { flex: 0 1 auto; }
/* bet365's names share the row (flex: 1 from nothing): in a row as wide as they are, a name
   broke onto two lines. Each its own width, wrapping only when the column is too narrow. */
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_TeamContainer, .lsb-ScoreBasedScoreboard_TeamContainer) { flex: 0 1 auto; }
/* The design's sizes, a step smaller (2026-10-21) - names 20px, score 36px under a 3px line in
   the team's colour, the competition's row 48px - scaled to
   the header's width (the main column is ~400px on a 1000px screen) so a long name still fits
   beside the score; bet365's are 13px / 22px in a 50px box. */
#page-live-match:not(.lmm-on) .lmm-Header { container-type: inline-size; --lmm-comp-h: 48px; }
#page-live-match:not(.lmm-on) .lmm-Header .lsb-LiteScoreboardModule { height: auto; }
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_TeamName, .lsb-ScoreBasedScoreboard_TeamName) {
    font-size: clamp(15px, 3.4cqi, 20px);
    line-height: 1.2;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 2.4em;
}
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_TeamScore, .lsb-ScoreBasedScoreboard_TeamScore) {
    font-size: clamp(26px, 6cqi, 36px);
    line-height: 1;
    font-weight: 800;
}
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_Team1ScoreContainer, .lsb-ScoreBasedScoreboardAggregate_Team2ScoreContainer, .lsb-ScoreBasedScoreboard_TeamScoreContainer) {
    height: auto;
    padding: 8px 6px 6px;
    /* !important: the team's line is the scoreboard's inline border (js/live-mobile.js), 2px. */
    border-bottom-width: 3px !important;
}
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_TeamContainer, .lsb-ScoreBasedScoreboard_TeamContainer) { height: auto; }
/* A two-leg tie's aggregate (js/live-mobile.js scoreboard): bet365's 12px / 11px, in step. */
#page-live-match:not(.lmm-on) .lmm-Header .lsb-ScoreBasedScoreboardAggregate_AggregateScore { font-size: clamp(12px, 2.4cqi, 15px); line-height: 1.4; }
#page-live-match:not(.lmm-on) .lmm-Header .lsb-ScoreBasedScoreboardAggregate_AggregateText { font-size: clamp(11px, 2cqi, 13px); }
#page-live-match:not(.lmm-on) .lmm-Header .lsb-ScoreBasedScoreboardAggregate_Team1ScoreContainer:first-child { margin-right: 8px; }
#page-live-match:not(.lmm-on) .lmm-Header .lsb-ScoreBasedScoreboard_TeamScoreContainer:first-child { margin-right: 8px; }
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_Team1Container, .lsb-ScoreBasedScoreboard_Team1Container) { padding-right: 12px; }
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-ScoreBasedScoreboardAggregate_Team2Container, .lsb-ScoreBasedScoreboard_Team2Container) { padding-left: 12px; }
/* Tennis, volleyball, table tennis, cricket - two rows, a name and its sets each: in proportion
   with football's, bet365's 13px up to 18px, the set columns widening with it. */
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-TennisScoreboard, .lsb-SetBasedScoreboard) {
    height: auto;
    min-height: 50px;
    padding: 6px 0;
    font-size: clamp(14px, 2.9cqi, 18px);
    line-height: 1.5;
}
#page-live-match:not(.lmm-on) .lmm-Header :is([class*="_TeamsWrapper"], [class*="lsb-TennisDefaultScores"], [class*="lsb-StandardSetScoreType"], [class*="lsb-CricketScoreType"]) {
    font-size: inherit;
    line-height: inherit;
}
#page-live-match:not(.lmm-on) .lmm-Header :is(.lsb-TennisDefaultScores_SetsWrapper, .lsb-TennisDefaultScores_SetGroup, [class*="lsb-StandardSetScoreType_"]) > div { min-width: 1.7em; text-align: center; }
#page-live-match:not(.lmm-on) .lmm-Header .ipe-EventHeaderMatchButton { align-self: center; }
#page-live-match:not(.lmm-on) .lmm-Header .ipe-EventHeaderMatchButton,
#page-live-match:not(.lmm-on) .lmm-Header .ipe-EventHeaderMatchButton:hover {
    width: 36px;
    background-color: var(--accent-green);
    -webkit-mask-size: 14px 8px;
    mask-size: 14px 8px;
}
/* Phone: the band, and the switch a round ☰. */
/* The band runs on from the site header's foot, which is --header-bg flat (css/b365.css
   --hm-background). */
#page-live-match.lmm-on .lmm-Header .ipe-InPlayEventViewModule { background: linear-gradient(180deg, var(--header-bg) 0%, var(--bg-deep) 100%); }
#page-live-match.lmm-on .lmm-Comp,
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderBreadcrumb,
#page-live-match.lmm-on .lmm-Header .lsb-LiteScoreboardModule { background: transparent; }
#page-live-match.lmm-on .lmm-Comp { color: var(--text-primary); height: 30px; }
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderBreadcrumb { padding-left: 48px; }
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderBreadcrumb-noeventswitcher { padding-left: 10px; }
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderBreadcrumb_BackButton {
    border-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
    background-color: rgba(var(--bg-deep-rgb), .3);
}
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderMatchButton,
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderMatchButton:hover {
    flex: none;
    align-self: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    display: grid;
    place-items: center;
    -webkit-mask: none;
    mask: none;
    border-radius: 50%;
    background: none;   /* bet365's grey5 / grey8 filled the whole circle once the mask was off */
}
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderMatchButton::before {
    -webkit-mask-image: var(--lmm-ico-menu);
    mask-image: var(--lmm-ico-menu);
}
/* No switch (one match live in the sport): no ☰ / ⌄ either - it did nothing and pushed the
   score off centre. */
#page-live-match .lmm-Header .ipe-EventHeaderBreadcrumb-noeventswitcher > .ipe-EventHeaderMatchButton { display: none; }
/* Tennis: the names and the sets one group in the middle, as football's names round its score
   (bet365's names ran flex: 1 up to the ☰ and left the sets in its corner); a long name ends in
   bet365's ellipsis instead of pushing the sets. */
#page-live-match .lmm-Header .lsb-TennisScoreboard { justify-content: center; }
#page-live-match .lmm-Header .lsb-TennisScoreboard_TeamsWrapper { flex: 0 1 auto; }
#page-live-match.lmm-on .lmm-Header .lsb-TennisScoreboard { padding: 0 8px; }
/* Basketball, ice hockey, handball…: bet365 gives their score 700, football's 900 - one weight. */
#page-live-match .lmm-Header .lsb-ScoreBasedScoreboard_TeamScore { font-weight: 900; }
/* Volleyball, table tennis, cricket: names and scores one block in the middle, as tennis; inside
   it the names (bet365's flex: 1) still give way first, the scores never. */
#page-live-match .lmm-Header .lsb-SetBasedScoreboard { justify-content: center; }
#page-live-match .lmm-Header .lsb-SetBasedScoreboard_TeamScoreWrapper { flex: 0 1 auto; }
/* Phone: the minute / set line on the band, not a lighter strip across its foot, its clock in
   tabular figures (centred, it jittered every second); the band's hairline goes under it, not
   between the score and its line. */
#page-live-match.lmm-on .lmm-Header .lmm-Status {
    background: transparent;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--color-white10p);
}
#page-live-match.lmm-on .lmm-Header .ipe-EventHeaderBreadcrumb:has(+ .lmm-Status:not([hidden])) { border-bottom-color: transparent; }
/* The market tabs' chosen pill white, its name dark (bet365's own, over the site's green). */
#page-live-match .ipe-GridHeader_Indicator { background-color: var(--text-primary); }

/* The pitch / video zone, sticky under the header (svm's own top is 0: ours is set here). */
#page-live-match.lmm-on .lmm-Wrap { display: block; }
#page-live-match.lmm-on #lmm-zone {
    order: 3;
    position: sticky;
    top: calc(var(--lmm-top) + var(--lmm-head-h, calc(var(--lmm-comp-h) + var(--lmm-crumb-h))));
    z-index: 35;
}
/* The statistics bar's swipe (js/live.js _wireMdSwipe) slides the zone and the panel a whole
   width out and in. .live-md-side clips them on the desktop; here it is display: contents (no
   box: its overflow-x: clip does nothing), and the pane slid out made the page wider than the
   screen - the page moved left and right with it. The column clips them instead: clip, not
   hidden - no scroll container, so the header and the zone stay sticky. */
#page-live-match.lmm-on .live-md-cols { overflow-x: clip; }
#page-live-match.lmm-on .lmm-Zone_TabViewContainer { display: flex; flex-direction: column; }
/* The page's own statistics and summary (volleyball's, table tennis's, ice hockey's, cricket's,
   and football's with its video in front) on the surface the pitch modules draw theirs on -
   football's, tennis's, basketball's - not a lighter card under the bar. */
#page-live-match.lmm-on #live-md-summary {
    background: var(--bg-primary);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* ...in their colours: each side's own (LiveSports.colours), bet365's grey for the figures, and
   what leads - a period's total, the set in play - in their yellow (tennis's sets, the header's
   score), not the site's green. */
#page-live-match.lmm-on .lmst-pb-bar-h { background: var(--team-home); }
#page-live-match.lmm-on .lmst-pb-bar-a { background: var(--team-away); }
#page-live-match.lmm-on .lmst-pb-val { color: var(--color-greyCC); }
#page-live-match.lmm-on .lmst-pb-val.is-lead { color: var(--text-primary); }
#page-live-match.lmm-on .lmst-pb-total .lmst-pb-val { color: var(--text-primary); }
#page-live-match.lmm-on .lmst-pb-total .lmst-pb-val.is-lead { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lvs-pb-cur th,
#page-live-match.lmm-on .lvs-pb-cur td { color: inherit; }
#page-live-match.lmm-on .lvs-pb-cur th { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-bat { color: var(--color-yellowFFDF1B); }

/* Cricket's statistics as the modules draw theirs (tennis's results, football's statistics):
   flat on the zone's surface in their type - 11px labels, 14px bold figures, #ccc - the side
   batting marked as tennis marks the server, its dot yellow, the other's grey. They were cards
   of a lighter grey with a green edge and green scores. */
#page-live-match.lmm-on .lmst-ck { gap: 10px; }
#page-live-match.lmm-on .lmst-ck-innings { gap: 0; }
#page-live-match.lmm-on .lmst-ck-inn {
    padding: 7px 4px;
    background: none;
    border-left: 0;
    border-radius: 0;
}
#page-live-match.lmm-on .lmst-ck-inn-team { font-size: 14px; font-weight: 700; color: var(--text-primary); }
#page-live-match.lmm-on .lmst-ck-inn-team::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 9px 2px 0;
    border-radius: 50%;
    background: var(--color-grey4F);
    vertical-align: middle;
}
#page-live-match.lmm-on .lmst-ck-inn-live .lmst-ck-inn-team::before { background: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-inn-score,
#page-live-match.lmm-on .lmst-ck-inn-live .lmst-ck-inn-score { font-size: 14px; font-weight: 700; color: var(--text-primary); }
#page-live-match.lmm-on .lmst-ck-inn-live .lmst-ck-inn-score { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-live { gap: 16px; padding: 0 4px; }
#page-live-match.lmm-on .lmst-ck-col { padding: 0; background: none; border-radius: 0; }
#page-live-match.lmm-on .lmst-ck-hdr,
#page-live-match.lmm-on .lmst-ck-meta {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-greyCC);
}
#page-live-match.lmm-on .lmst-ck-bat-name,
#page-live-match.lmm-on .lmst-ck-bowl-row { font-size: 13px; color: var(--color-greyCC); }
#page-live-match.lmm-on .lmst-ck-bat-rb { font-size: 13px; color: var(--color-greyCC); }
#page-live-match.lmm-on .lmst-ck-strike { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-target {
    padding: 8px 4px 2px;
    background: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-greyCC);
}
#page-live-match.lmm-on #live-md-media-switch { order: -1; }
/* Scrolled into the markets, the zone shrinks to 60% in the top right corner, as bet365's
   PartiallyStickyVideoManager does (svm…_Video-scaled: scale(.6) from that corner), so the odds
   show beside and under it; a tap on it (its mask) or the top of the page brings it back whole
   (js/live-mobile.js zoneScroll). */
#page-live-match.lmm-on #lmm-zone > .svm-PartiallyStickyVideoManager_Mask { z-index: 60; }
#page-live-match.lmm-on #lmm-zone > .svm-PartiallyStickyVideoManager_Mask[hidden] { display: none; }
#page-live-match.lmm-on #live-md-scout {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* The live-matches list (inplay-switcher, from the header's ⌄ / names) is bet365's full-screen
   modal: over the site's header and bottom bar too, as it is there — its own z-index (62) is
   under them here. It mounts on <body>, hence the two-element prefix to outrank its sheet. */
html body .ipn-EventViewNavigationFloat { z-index: 1000; }
/* Its BRAND colours (inplay-switcher README, "Stilimi"): the competition names in the site's
   green, the scores and the serve dot in its yellow. */
html body .ipe-EventHeaderFlyout {
    --color-green3: var(--accent-green);
    --color-yellow1: var(--accent-odds);
}

/* The market tabs, right above the markets; the search's bar between them when it is open. */
#page-live-match.lmm-on #lmm-tabs { order: 5; }
/* Early in the page, drawn under the zone: Chrome kept them in place when the zone's height
   changed (the video taking the court's place) by scrolling the page that much - and past 48px
   the zone shrank to its corner (js/live-mobile.js zoneScroll). The strip and the markets are
   out of scroll anchoring already (css/style.css). */
#page-live-match.lmm-on #lmm-tabs { overflow-anchor: none; }
#page-live-match.lmm-on #live-md-search-bar,
#page-live-match.lmm-on #live-md-markets { order: 6; }
/* The search, in the 50px bet365 keeps on the right for its match alerts. */
#page-live-match.lmm-on .lmm-Search {
    width: 50px;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
}
#page-live-match.lmm-on.allow-hover .lmm-Search:hover { color: var(--text-primary); }
#page-live-match.lmm-on .lmm-Search:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -2px; }

/* The match's follow bell, ending the statistics bar on screen (js/live-mobile.js bell): after
   the pitch module's scroller, or after the page's own tabs. */
#page-live-match .lmm-StatsBell {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    padding: 0 8px 0 4px;
}
#page-live-match .lmm-StatsBell .push-bell { color: var(--text-secondary); }
/* The desktop: at the end of the pitch module's statistics bar, or of the page's own tabs. */
#page-live-match:not(.lmm-on) .lmm-StatsBell { margin-left: auto; }
/* The page's own tabs centre on the whole bar, as the pitch module's do, not in the room left
   of the bell: a spacer the bell's width opens the bar (giving way when the tabs need the room)
   and the free space goes either side of the tabs. */
#page-live-match .live-md-view-tabs:has(> .lmm-StatsBell)::before {
    content: "";
    flex: 0 1 42px;
    min-width: 0;
}
#page-live-match:not(.lmm-on) .live-md-view-tabs > :first-child { margin-left: auto; }
/* The tabs keep their one line; the spacer is what gives. */
#page-live-match .live-md-view-tabs > * { flex-shrink: 0; white-space: nowrap; }
/* The media button opening the bar on a phone (live.js _pitchButtonInBar), where bet365's module
   has its own: the same button - its icons (me-mediabutton.css: grey, the one in front in
   colour), in its grey box with rounded corners when there is a video to switch to; the pitch's
   icon alone without one, as football's. */
#page-live-match .live-md-view-media {
    display: flex;
    align-items: center;
    align-self: center;
    height: 30px;
    border-radius: var(--media-switch-radius);
    overflow: hidden;
}
#page-live-match .live-md-view-media-video { background: var(--media-switch-bg); }
#page-live-match .live-md-view-media-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
#page-live-match .live-md-view-media-btn:not(.me-MediaButtonLoader) { width: 45px; height: 30px; }
#page-live-match .live-md-view-media-btn.active:not(.me-MediaButtonLoader) { color: var(--text-primary); }
#page-live-match .live-md-view-media-btn:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -2px; }
/* The page's own statistics bar on a phone: more tabs than fit (players, lineups, …) scroll
   sideways under it, the bell staying at the end. It reads as the pitch modules' menu (bet365's
   LocationEventsMenu, football's on this page): 50px on the page's ground, the names 13px in
   white at 80%, the open one bold and white over a 2px line 9px above the bar's foot. */
#page-live-match.lmm-on .live-md-view-tabs {
    justify-content: flex-start;
    gap: 0;
    height: 50px;
    padding-left: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-deep);   /* as the pitch modules' menu (css/live-scout.css) */
    border-bottom: 0;
}
#page-live-match.lmm-on .live-md-view-tab {
    position: relative;
    height: 50px;
    padding: 0 10px;
    border-bottom: 0;
    color: var(--ml-menu-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 43px;
}
#page-live-match.lmm-on .live-md-view-tab.active {
    color: var(--text-primary);
    font-weight: 700;
}
#page-live-match.lmm-on .live-md-view-tab.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 2px;
    background: var(--text-primary);
}
#page-live-match.lmm-on .live-md-view-media { margin: 0 10px; }
#page-live-match.lmm-on .live-md-view-tabs:has(> .lmm-StatsBell) { padding-left: 0; }
#page-live-match.lmm-on .live-md-view-tabs::-webkit-scrollbar { display: none; }
/* The tabs in the middle, as the pitch modules' menu (football's): of the whole bar, or of
   what the bell leaves of it. The bell is there only where the browser can notify (an iPhone's
   Safari tab cannot): the first tab alone kept an auto margin, and without the bell the tabs
   stood against the bar's right edge. Overflowing, the margins give way and the bar scrolls. */
#page-live-match.lmm-on .live-md-view-tabs > :first-child { margin-left: auto; }
#page-live-match.lmm-on .live-md-view-tabs > button.live-md-view-tab:last-of-type { margin-right: auto; }
#page-live-match.lmm-on .live-md-view-tabs > .lmm-StatsBell {
    position: sticky;
    right: 0;
    align-self: stretch;
    /* background: var(--bg-primary); */
}

/* The market grid: bet365's groups, in place of the desktop list's own box. */
#page-live-match.lmm-on #live-md-markets {
    display: block;
    margin: 0;
    padding: 0 0 var(--gutter, 10px);
    gap: 0;
    border: 0;
    border-radius: 0;
}
/* bet365's groups off the live phone page too (js/live-mobile.js markets / frame): the live page
   on the desktop, the prematch match page on every width. One block, the groups one under the
   other as on the phone, in place of the list's gaps; as tall as its groups, not the phone
   page's screen-high grid. */
#page-live-match:not(.lmm-on) .md-markets.gl-MarketGrid,
#page-match-detail .md-markets.gl-MarketGrid {
    display: block;
    min-height: 0;
    padding: 5px 0 var(--gutter, 10px);
    gap: 0;
}
/* Until bet365's sheets are in (js/live-mobile.js waitForSheets): drawn without them, the groups
   showed as raw lists for a moment. */
.gl-MarketGrid.lmm-grid-pending { visibility: hidden; }
/* Player props (Player Assists, goalscorers…): the player, his line ("Over 0.5") as a label
   of its own that reads apart from the name, and the price at the row's end. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-PlayerList .gl-ParticipantBorderless_Handicap {
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    white-space: nowrap;
}
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-PlayerList .gl-ParticipantBorderless_Odds { margin-left: auto; padding-left: 10px; }
/* His shirt before his name (LiveScorers.discs). */
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-PlayerList .lsc-Disc { --lsc-disc: 32px; margin-right: 10px; }
/* A group with its teams in the header (the goalscorers, js/live-mobile.js playerList): the
   name on the header's first line with the star and the arrow, the teams on a line of their
   own under it. Beside two team names the name had no room left - "S h..", or nothing at all. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .sip-MarketGroupButton.lmm-HasBar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 50px auto;
    height: auto;
}
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-HasBar > .sip-MarketGroupButton_Text { grid-row: 1; grid-column: 1; }
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-HasBar > .gl-ButtonBar {
    grid-row: 2;
    grid-column: 1 / -1;
    height: 30px;
    margin-bottom: 8px;
    padding-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-HasBar > .gl-ButtonBar::-webkit-scrollbar { display: none; }
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-HasBar > .gl-ButtonBar > .gl-ButtonBar_ButtonHitArea { flex: 0 0 auto; }
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-HasBar > .sip-FavouriteButton { grid-row: 1; }
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-HasBar::after { grid-row: 1; }
/* A table row with no price for a column keeps its height. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Gap { pointer-events: none; }
/* The cells and headers are divs that act as buttons: a keyboard focus shows. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .gl-Participant_General:focus-visible,
:is(#live-md-markets, #md-markets).gl-MarketGrid .sip-MarketGroupButton:focus-visible,
#page-live-match.lmm-on .ipe-GridHeaderTabLink:focus-visible,
#page-live-match.lmm-on [class*="ipe-EventHeaderBreadcrumb_"]:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: -2px;
}

/* Three outcomes a row (1 X 2 and the like, gl-Market_General-cn3): each outcome's name over
   its price, both centred, as bet365's own app draws them. The names start at the top, the
   prices end on one line at the bottom whatever the names' length, and a long name has the
   cell's whole width (two lines at most) instead of being squeezed beside its price. A
   handicap stays on the name's line; a suspended cell's padlock takes the price's. On every
   width, the desktop's live and prematch pages too: side by side, a long team name broke
   mid-word in a narrow column. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .gl-ParticipantBorderless.gl-Market_General-cn3,
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Stacked .gl-ParticipantBorderless {
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    row-gap: 2px;
    height: auto;
    min-height: 52px;
    padding: 7px 6px;
    text-align: center;
}
:is(#live-md-markets, #md-markets).gl-MarketGrid .gl-Market_General-cn3 .gl-ParticipantBorderless_Name,
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Stacked .gl-ParticipantBorderless_Name { max-width: 100%; }
:is(#live-md-markets, #md-markets).gl-MarketGrid .gl-Market_General-cn3 .gl-ParticipantBorderless_Odds,
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Stacked .gl-ParticipantBorderless_Odds {
    flex: 0 0 100%;
    padding-left: 0;
}
:is(#live-md-markets, #md-markets).gl-MarketGrid .gl-ParticipantBorderless_Suspended.gl-Market_General-cn3::after,
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Stacked .gl-ParticipantBorderless_Suspended::after {
    flex: 0 0 100%;
    -webkit-mask-position: center;
    mask-position: center;
}
/* The combos drawn a row of sides at a time (MarketConfig.oddsUnderLabel, js/live-mobile.js
   sideGrid): the pick whole, over as many lines as it takes - cut at two, "RKS Rakow
   Czestochowa | 0-1" lost the "0-1" that tells the picks of a column apart. A row's cells
   are as tall as its longest pick (bet365's row wraps and stretches), so the prices still
   end on one line. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Stacked .gl-ParticipantBorderless_Name {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    max-height: none;
}
/* A correct score's picks (js/live-mobile.js correctScore, the only named cells under a column
   header) centred under their column's name, as the header is - from the left they read off it. */
:is(#live-md-markets, #md-markets).gl-MarketGrid .gl-Market_General-columnheader > .gl-ParticipantBorderless { justify-content: center; }
/* A score or a goals range in a pick's name keeps its line (js/live-mobile.js cell). */
:is(#live-md-markets, #md-markets).gl-MarketGrid .lmm-Keep { white-space: nowrap; }
/* The disc: the shirt in today's colours, its number on the chest. */
.lsc-Disc { --lsc-disc: 52px; position: relative; flex: none; width: var(--lsc-disc); height: var(--lsc-disc); border-radius: 50%; background: var(--scorers-disc); display: flex; align-items: center; justify-content: center; }
.lsc-Disc.is-none { background: none; }
.lsc-Shirt, .lsc-Art { width: 74%; height: 74%; }
.lsc-Art { object-fit: contain; }
.lsc-ShirtBody { fill: var(--lsc-shirt, var(--bg-lightg)); stroke: var(--bg-deep); stroke-opacity: .4; stroke-width: .6; }
.lsc-ShirtTrim { fill: var(--lsc-trim, var(--bg-deep)); }
.lsc-No { position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--lsc-disc) * .31); font-weight: 800; line-height: 1; letter-spacing: -.5px; color: var(--text-primary); text-shadow: 0 0 2px var(--bg-deep); }
.lsc-Disc.is-light .lsc-No { color: var(--bg-deep); text-shadow: none; }