/**
 * Score crawl
 *
 * A slim bar: sponsor block pinned at one end, a label, and a track of
 * scores that crawls past. Colours and height arrive as custom properties
 * on the bar (set from Score Crawl → Appearance); anything unset falls back
 * to the design tokens.
 *
 * The crawl is a CSS animation on .sc-run, which score-crawl.js duplicates
 * once so the loop is seamless and whose duration it sets from the track's
 * width and the chosen speed, so the pace is constant however many items
 * there are. With reduced motion, or no JS, the track simply scrolls.
 *
 * @package WEEU830
 * @since   2.46.0
 */

.weeu-score-crawl {
    --sc-bg-fallback: var(--color-dark-surface, #1a1a1a);
    --sc-text-fallback: #ffffff;
    --sc-accent-fallback: var(--color-primary, #F80000);

    display: flex;
    align-items: stretch;
    height: var(--sc-height, 44px);
    background: var(--sc-bg, var(--sc-bg-fallback));
    color: var(--sc-text, var(--sc-text-fallback));
    font-family: var(--font-primary, 'Lexend', sans-serif);
    font-size: var(--font-size-sm, 14px);
    line-height: 1;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.weeu-score-crawl.sc-font-xs { font-size: var(--font-size-xs, 12px); }
.weeu-score-crawl.sc-font-base { font-size: var(--font-size-base, 16px); }

/* Placed automatically, it is full-bleed whatever the page's container. */
.weeu-score-crawl.sc-placed-after_header,
.weeu-score-crawl.sc-placed-below_hero {
    width: 100%;
}

/* Under a page banner: the hero carries the gap that separates it from
   the content below; when the bar follows it, that gap moves to the bar so
   the two sit flush and the content keeps its spacing. The home page
   carousel has no gap of its own, so the bar is flush there already. */
.weeu-page-hero:has(+ .weeu-score-crawl) {
    margin-bottom: 0;
}

.weeu-page-hero + .weeu-score-crawl {
    margin-bottom: 36px;
}

@media (max-width: 768px) {
    .weeu-page-hero + .weeu-score-crawl {
        margin-bottom: 32px;
    }
}

/* ---- Sponsor block ---- */

.weeu-score-crawl .sc-sponsor {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--sc-sponsor-bg, #ffffff);
    color: var(--sc-sponsor-text, #1a1a1a);
    text-decoration: none;
    max-width: 40%;
    min-width: 0;
    overflow: hidden;
}

.weeu-score-crawl a.sc-sponsor:hover,
.weeu-score-crawl a.sc-sponsor:focus {
    color: var(--sc-sponsor-text, #1a1a1a);
    text-decoration: none;
    opacity: 0.9;
}

.weeu-score-crawl .sc-sponsor-prefix {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
    white-space: nowrap;
}

.weeu-score-crawl .sc-sponsor-logo {
    display: block;
    height: calc(var(--sc-height, 44px) - 12px);
    width: auto;
    max-width: min(220px, 100%);
    object-fit: contain;
}

.weeu-score-crawl .sc-sponsor-name {
    font-weight: 700;
    white-space: nowrap;
}

/* An Ad Campaigns unit in the sponsor block: the "Advertisement" label is
   dropped (the lead-in is the disclosure), the reserved height and margins
   the unit carries for in-page slots are undone, and the creative scales to
   the bar. A rotator stacks units in the same spot as it does elsewhere. */
.weeu-score-crawl .sc-sponsor .weeu-ad,
.weeu-score-crawl .sc-sponsor .weeu-ad-rotator {
    display: inline-flex;
    align-items: center;
    margin: 0;
    max-width: none;
    height: 100%;
}

.weeu-score-crawl .sc-sponsor .weeu-ad-rotator .weeu-ad {
    display: none;
}

.weeu-score-crawl .sc-sponsor .weeu-ad-rotator .weeu-ad.weeu-ad-active {
    display: inline-flex;
}

.weeu-score-crawl .sc-sponsor .weeu-ad .weeu-ad-label {
    display: none;
}

.weeu-score-crawl .sc-sponsor .weeu-ad .weeu-ad-creative {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    height: 100%;
}

.weeu-score-crawl .sc-sponsor .weeu-ad .weeu-ad-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.weeu-score-crawl .sc-sponsor .weeu-ad img {
    display: block;
    width: auto;
    height: calc(var(--sc-height, 44px) - 12px);
    max-width: min(240px, 100%);
    object-fit: contain;
}

/* ---- Label ---- */

.weeu-score-crawl .sc-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85em;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.weeu-score-crawl.sc-sponsor-right .sc-label {
    border-right: 0;
    border-left: 0;
}

/* ---- Track ---- */

.weeu-score-crawl .sc-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

/* Fade the ends so items slide in and out rather than popping.

   Drawn as two overlays rather than a mask on this element. A mask
   forces the track into a composited layer that Safari rasterises
   with whole-device-pixel snapping, and a 1px separator at a
   fractional offset rounds away to nothing inside it -- which is
   why separators went missing there and not in Chrome. The bar's
   background is solid, so fading to it looks identical. */
.weeu-score-crawl .sc-viewport::before,
.weeu-score-crawl .sc-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none;
}

.weeu-score-crawl .sc-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--sc-bg, var(--sc-bg-fallback)) 0, transparent 100%);
}

.weeu-score-crawl .sc-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--sc-bg, var(--sc-bg-fallback)) 0, transparent 100%);
}

.weeu-score-crawl .sc-track {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
}

.weeu-score-crawl .sc-run {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 48px; /* the gap between the loop's end and its restart */
    white-space: nowrap;
}

/* Animating: the js sets --sc-duration and adds .is-crawling once the run
   is duplicated. Both copies move together as one track. */
.weeu-score-crawl.is-crawling .sc-track {
    animation: weeu-sc-crawl var(--sc-duration, 40s) linear infinite;
    /* On the track, which is the element that moves. On .sc-run it
       promoted both copies to layers of their own for nothing. */
    will-change: transform;
}

/* Pause under a pointer that can hover — a touch screen's tap would
   otherwise count as a hover that never ends and freeze the crawl — and
   under keyboard focus (focus-visible), not the focus a tap leaves behind
   on a score link. */
@media (hover: hover) {
    .weeu-score-crawl.is-crawling:not(.no-pause):hover .sc-track {
        animation-play-state: paused;
    }
}

.weeu-score-crawl.is-crawling:has(:focus-visible) .sc-track {
    animation-play-state: paused;
}

@keyframes weeu-sc-crawl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Nothing to crawl (the empty note, or reduced motion): sit still. */
.weeu-score-crawl.is-static .sc-viewport::before,
.weeu-score-crawl.is-static .sc-viewport::after {
    display: none;
}

/* ---- Items ---- */

.weeu-score-crawl .sc-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
}

.weeu-score-crawl .sc-item-link {
    color: inherit;
    text-decoration: none;
}

.weeu-score-crawl .sc-item-link:hover,
.weeu-score-crawl .sc-item-link:focus {
    color: inherit;
    text-decoration: none;
}

.weeu-score-crawl .sc-item-link:hover .sc-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.weeu-score-crawl .sc-sep {
    display: inline-block;
    width: 1px;
    min-width: 1px;
    height: calc(var(--sc-height, 44px) * 0.5);
    margin: 0 16px;
    background: currentColor;
    opacity: 0.25;
    flex: 0 0 auto;
}

/* Same line, no layer: an opacity under 1 makes each separator a
   composited layer of its own, and there is one between every pair
   of games. Folding the 25% into the colour paints the same hairline
   with nothing to composite. */
@supports (background: color-mix(in srgb, currentColor 25%, transparent)) {
    .weeu-score-crawl .sc-sep {
        background: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 1;
    }
}

.weeu-score-crawl .sc-tag {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    white-space: nowrap;
}

.weeu-score-crawl .sc-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--sc-accent, var(--sc-accent-fallback));
    color: #fff;
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.weeu-score-crawl .sc-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: weeu-sc-pulse 1.4s ease-in-out infinite;
}

@keyframes weeu-sc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.weeu-score-crawl .sc-matchup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.weeu-score-crawl .sc-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.weeu-score-crawl .sc-logo {
    width: calc(var(--sc-height, 44px) * 0.5);
    height: calc(var(--sc-height, 44px) * 0.5);
    object-fit: contain;
    flex: 0 0 auto;
}

.weeu-score-crawl .sc-name {
    font-weight: 600;
}

.weeu-score-crawl .sc-score {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.weeu-score-crawl .sc-score.is-winner {
    color: var(--sc-accent, var(--sc-accent-fallback));
}

.weeu-score-crawl .is-final .sc-team:not(.is-winner) .sc-name,
.weeu-score-crawl .is-final .sc-score:not(.is-winner) {
    opacity: 0.75;
}

.weeu-score-crawl .sc-dash,
.weeu-score-crawl .sc-at {
    opacity: 0.6;
    font-weight: 400;
}

.weeu-score-crawl .sc-at {
    font-size: 0.85em;
    text-transform: lowercase;
}

.weeu-score-crawl .sc-detail {
    font-size: 0.8em;
    opacity: 0.75;
    white-space: nowrap;
    padding-left: 2px;
}

.weeu-score-crawl .is-live .sc-detail {
    opacity: 1;
    font-weight: 600;
}

.weeu-score-crawl .sc-item.is-empty {
    opacity: 0.8;
    padding-left: 16px;
}

/* ---- Small screens: sponsor prefix and label give way to the scores ---- */

@media (max-width: 782px) {
    .weeu-score-crawl .sc-sponsor {
        padding: 0 10px;
        gap: 6px;
        max-width: 45%;
    }

    .weeu-score-crawl .sc-sponsor-prefix {
        display: none;
    }

    .weeu-score-crawl .sc-sponsor-logo {
        max-width: 140px;
    }

    .weeu-score-crawl .sc-label {
        display: none;
    }
}

/* ---- Reduced motion ----
   Only when Score Crawl → Appearance says to honour it: the crawl holds
   still (the items simply sit in the bar). Otherwise a device's
   reduce-motion setting is ignored and the scores roll for everyone;
   there is never a scrollbar. */
@media (prefers-reduced-motion: reduce) {
    .weeu-score-crawl.sc-respect-motion.is-crawling .sc-track {
        animation: none;
    }

    .weeu-score-crawl.sc-respect-motion .sc-viewport::before,
    .weeu-score-crawl.sc-respect-motion .sc-viewport::after {
        display: none;
    }

    .weeu-score-crawl.sc-respect-motion .sc-live-dot {
        animation: none;
    }
}

@media print {
    .weeu-score-crawl {
        display: none;
    }
}