/* The vendor modules own the pitch and, for football, basketball and tennis, the statistics
   under it (since 2026-10-10): their menu (Statistika / Permbledhje …) and panels show 1:1
   with the original, and the match page leaves its own tabs for the same content out while
   they are on screen (LiveScout.statsTabs, Live._applyMdView). */
.live-scout-host { width: 100%; min-width: 0; overflow: hidden; background: #282828; color: #fff; }
.live-scout-host [class$="_ScoreboardContainer"] { display: none !important; }
/* The phone / tablet layouts (narrow, medium) have sticky parts of their own (the info row,
   the statistics under the menu): nothing above them may clip. */
.live-scout-host.live-scout-host-mobile { overflow: visible; }
/* The desktop panel (rhs) only — the phone / tablet layouts size their panels themselves
   ("Show more"):
   each statistics panel as tall as its own content; the carousel takes the height of the
   one in view (live-scout.js fitCarousel), not of the tallest. */
.live-scout-host .ml-MatchLiveModule-rhs .ml-MatchLiveCarousel { align-items: flex-start; }
/* bet365 caps the statistics of basketball (181px) and tennis (210px) and scrolls them inside:
   in its narrow column they sit in a fixed-height panel with a "show more" button, and only
   its wide layout (.ml-MatchLiveModule-wide) lifts the cap. Here they are part of the page:
   whole, as in the wide layout. */
.live-scout-host .ml-MatchLiveModule-rhs .ml18-StatsContainer_Main-scoreboard,
.live-scout-host .ml-MatchLiveModule-rhs .ml18-StatsContainer_Main-stats,
.live-scout-host .ml-MatchLiveModule-rhs .ml13-StatsContainer_Main-scoreboard,
.live-scout-host .ml-MatchLiveModule-rhs .ml13-StatsContainer_Main-stats { max-height: none; }
.live-scout-host > div { width: 100%; }
/* The video in front with the pitch module up in a layout with its own media button (the phone's;
   live.js _applyMediaView): the module's menu stays - its media button is the way back, its tabs
   bring the pitch back with them - and the video takes the pitch's place right under it. */
#page-live-match #live-md-scout.lmm-VideoFront .ml-MatchLiveModule:not(.ml-MatchLiveModule-rhs):not(.ml-MatchLiveModule-medium) > :not(.ml1-LocationEventsMenu):not(.ml-LocationEventsMenu) { display: none !important; }
/* The tablet layout (medium, live-scout.js TABLET): the video takes the pitch's left half, the
   module's statistics staying beside it. The pitch keeps its box, unseen, and the video is laid
   over it, under the module's 50px menu. */
#page-live-match #live-md-scout.lmm-VideoFront .ml-MatchLiveModule-medium [class*="_WrapperContainer"] > .ml-MatchLiveCarouselSlide { visibility: hidden; }
#page-live-match.lmm-on #lmm-zone-content:has(> #live-md-scout.lmm-VideoFront .ml-MatchLiveModule-medium) { display: grid; grid-template-columns: 1fr 1fr; }
#page-live-match.lmm-on #lmm-zone-content:has(> #live-md-scout.lmm-VideoFront .ml-MatchLiveModule-medium) > #live-md-scout { grid-area: 1 / 1 / 2 / 3; }
#page-live-match.lmm-on #lmm-zone-content:has(> #live-md-scout.lmm-VideoFront .ml-MatchLiveModule-medium) > #live-md-row { grid-area: 1 / 1; align-self: start; margin-top: 50px; z-index: 1; min-width: 0; }
/* The module's menu (pitch / video · Statistika · Përmbledhje) on the header's dark, 2026-10-21:
   football's module (ml1-), the other sports' (ml-), and the page's own bar where a sport's
   module has none (volleyball's, table tennis's: js/live.js _applyMdView). */
#page-live-match :is(.ml1-LocationEventsMenu, .ml-LocationEventsMenu, .live-md-view-tabs) { background: var(--bg-deep); }
/* The desktop panel (rhs): the video in the pitch's place (above it in the rail, css/style.css),
   the module's statistics bar and panel staying under it - only the pitch slide goes. */
#page-live-match #live-md-scout.lmm-VideoFront .ml-MatchLiveModule-rhs [class*="_WrapperContainer"] > .ml-MatchLiveCarouselSlide { display: none !important; }

/* The scout's message row, pinned under the header once the pitch has scrolled away
   (live-scout.js pinInfoRow). Position, left and width are set from the pitch. */
.live-scout-host.live-scout-pin {
    position: fixed;
    z-index: 95;
    display: none;
    pointer-events: none;
    background: var(--bg-deep);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--bg-deep) 70%, transparent);
}
.live-scout-host.live-scout-pin.is-on { display: block; }

/* Ad boards round the pitch / court: the domain's own logo (/img/logo.svg, served per
   host by Services/BrandFeatures.cs). The vendor sheets left football's board as
   url("") — which resolves to the stylesheet itself, so the board showed nothing —
   and wrote "BAST" as text into tennis and basketball.
   Football and basketball tile the logo along the board: the tile is wider than the
   logo, and an SVG drawn into a box of another shape keeps its proportions centred
   (preserveAspectRatio), so each logo gets space either side. Tennis draws one logo
   per panel. Two classes here, one in the vendor rule: these win whatever loads last. */
.live-scout-host .ml1-AdBoardsSection_BoardLogo,
.live-scout-host .ml18-Adboard_Inner {
    background-image: var(--ls-board-logo, url("/img/logo.svg"));
    background-repeat: repeat-x;
    background-size: 64px 9px;
    background-position: 0 50%;
    /* The boards scroll. The vendor's moveLogo slides 0% -> 100% of the room LEFT OVER
       beside one tile across 120s: on a board barely wider than a tile that is ~1px a
       second, which reads as frozen (and basketball had no animation at all). Moving
       exactly one tile per loop is seamless — tile N lands where tile N+1 started. */
    animation: ls-board-scroll 2.4s linear infinite;
}
@keyframes ls-board-scroll {
    from { background-position: 0 50%; }
    to   { background-position: -64px 50%; }
}
/* Reduced motion (also what Windows reports with "Animation effects" off): the boards
   still scroll — they are meant to — but at a third of the speed, a slow drift. */
@media (prefers-reduced-motion: reduce) {
    .live-scout-host .ml1-AdBoardsSection_BoardLogo,
    .live-scout-host .ml18-Adboard_Inner { animation-duration: 7.2s; }
}
/* Ice hockey's boards are drawn as tennis's (one logo per panel); its sheet carries bet365's. */
.live-scout-host .ml13-AdBoardsSection_BoardLogo::before,
.live-scout-host .ml13-AdBoardsSection_BoardLogo::after,
.live-scout-host .ml17-AdBoardsSection_BoardLogo::before,
.live-scout-host .ml17-AdBoardsSection_BoardLogo::after {
    background-image: var(--ls-board-logo, url("/img/logo.svg"));
    background-size: auto 62%;
}
/* Football's goalscorers over the pitch (live-scout.js goalscorers): one row per goal beside
   its side's score, in bet365's white on the overlay's shade. */
.live-scout-host .ml1-GoalscorersOverlay .ls-Scorer {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-whiteFF);
    white-space: nowrap;
}
/* ...and the pitch quiet under them: no ball, player, attack cone or zone (throw-in, corner,
   free kick), as on bet365. */
.live-scout-host .ls-ScorersOpen .ml1-XYBlob,
.live-scout-host .ls-ScorersOpen .ml1-MatchLiveSoccerModule_AnimationsContainer,
.live-scout-host .ls-ScorersOpen .ml1-MatchLiveSoccerModule_ConeContainer { visibility: hidden; }
/* Football's new score across the pitch (live-scout.js scoreUpdate): the score alone, with the
   clock, the scout's line and the scorers' pill out of the way until it has gone. */
.live-scout-host .ls-ScoreUpdating > .ml1-SoccerClock,
.live-scout-host .ls-ScoreUpdating > .ml1-MatchLiveSoccerModule_EventsInfoRow,
.live-scout-host .ls-ScoreUpdating > .ml1-GoalscorersSubMenu { visibility: hidden; }
/* Cricket's menu: without the feed's ball-by-ball record or scorecard the module has no Stats or
   Scorecard tab, and its media button is the page's (live.js _pitchButtonInBar) - the row would
   be empty but for the pitch's icon, under the page's own bar (Statistika · Përmbledhje). */
.live-scout-host[data-scout-sport="cricket"] .ml3-LocationEventsMenuCricket { display: none; }
/* Volleyball's older module on a phone (ml91, narrow): its court alone, as football's pitch. Its
   second view - the statistics wheels a tap or a swipe on the court brought in (ml-SwipeContainer,
   translateX by view) - is what the page's own Statistika holds, and the page's swipe goes from
   the court to that tab and back; brought in, the court could no longer be swiped back to. The
   view the module still picks moves nothing. */
.live-scout-host[data-scout-sport="volleyball"] .ml-MatchLiveModule-narrow .ml-SwipeContainer > .ml-SwipeContainer_Child {
    transform: none !important;
}
.live-scout-host[data-scout-sport="volleyball"] .ml-MatchLiveModule-narrow .ml-SwipeContainer > .ml-SwipeContainer_Child:not(:first-child) {
    visibility: hidden;
}