/**
 * YES Network Games Widget - Frontend Styles
 */

/* Widget Wrapper */
.yn-games-widget-wrapper {
    width: 100%;
    margin: 20px 0;
    overflow: hidden;
}

/* The container is always rendered (even with no live game) so games-widget.js can
   inject the Sportradar widget when a game starts on a page-cached page. Keep it hidden
   until JS sets the body.yn-has-live-game class, so no empty box shows when idle. */
body:not(.yn-has-live-game) .yn-games-widget-wrapper {
    display: none;
}

/* Error message for admins */
.yn-games-widget-error {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    color: #856404;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}

/* Loading state. Transparent so the dark scorebug panel shows through (the old #f5f5f5
   painted a light grey card inside the dark wrapper); faint white track with a blue
   spinner arc that reads on the dark background. */
.yn-games-widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: transparent;
    border-radius: 4px;
}

.yn-games-widget-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: yn-widget-spin 0.8s linear infinite;
}

@keyframes yn-widget-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Sportradar widget container */
.sr-widget {
    width: 100%;
    min-height: 100px;
}

/* ------------------------------------------------------------------------- *
 * Live scorebug (NBA + MLB scoreboards)
 *
 * The widget is used as a broadcast-style scorebug over dark video. Sportradar's
 * default theme is built for a white card: it paints white surface backgrounds
 * and near-black text (`.srt-base-1 { color: rgba(0,0,0,.82) }`). Dropped onto a
 * dark background that renders as invisible black-on-black text.
 *
 * The NBA scoreboard mostly inherits text colour from the `.sr-bb` root, so a
 * single override whitens it. The MLB scoreboard instead tags its wrapper with
 * `srt-base-1`, so its team names, scores, records, B/S/O labels and linescore
 * all pick up the dark theme colour and disappear. These rules force a readable
 * scorebug for BOTH sports without touching team-coloured crests or the
 * green/red ball & strike indicators, plus the panel + spacing that make the
 * scorebug look. (This supersedes the per-page custom CSS the demo relied on.)
 * ------------------------------------------------------------------------- */

/* Dark panel so white text is always legible over any video frame.
   border-box: the wrapper is width:100%, so content-box would ADD the 56px of
   horizontal padding to the container width — the panel then hangs past the
   viewport on mobile and the right edge of the scoreboard (the linescore's
   R/H/E totals) gets clipped off-screen. */
.yn-games-widget-wrapper {
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 16px;
    padding: 24px 28px;
}

.yn-games-widget-wrapper .sr-bb {
    font-size: 1.2rem;
}

/* Game time / stadium header is redundant for a live scorebug. */
.yn-games-widget-wrapper .sr-us-scoreboard-header {
    display: none !important;
}

/* Strip Sportradar's white surface fills so the dark panel shows through. */
.yn-games-widget-wrapper .sr-bb,
.yn-games-widget-wrapper .sr-bb [class*="srt-base-"],
.yn-games-widget-wrapper .sr-wwrap,
.yn-games-widget-wrapper .sr-loader__container,
.yn-games-widget-wrapper .sr-loader__overlay,
.yn-games-widget-wrapper [class*="scoreboard__wrapper"],
.yn-games-widget-wrapper .sr-scoreboardperiodtable__table-cell,
.yn-games-widget-wrapper .sr-scoreboardperiodtable__team,
.yn-games-widget-wrapper .sr-scoreboardperiodtable__divider-line {
    background-color: transparent !important;
    background-image: none !important;
}

/* Force all informational text to white. Targets the base/text theme tokens
   (and elements that inherit from them) plus the NBA scoreboard's own text
   classes — not the srt-fill-* crests or the srt-mlb-run-1 / srt-mlb-error-1
   ball & strike dots, which stay coloured. */
.yn-games-widget-wrapper .sr-bb,
.yn-games-widget-wrapper .sr-bb [class*="srt-base-"],
.yn-games-widget-wrapper .sr-bb [class*="srt-text-"],
.yn-games-widget-wrapper .sr-scoreboardperiodtable__team-name,
.yn-games-widget-wrapper .sr-scoreboardperiodtable__result,
.yn-games-widget-wrapper .sr-us-basketball-scoreboard__points,
.yn-games-widget-wrapper .sr-us-basketball-scoreboard__match-period,
.yn-games-widget-wrapper .sr-us-basketball-scoreboard__team-name,
.yn-games-widget-wrapper .sr-us-basketball-scoreboard__team-league-position {
    color: #fff !important;
    opacity: 1 !important;
}

/* NBA scoreboard spacing / sizing. */
.yn-games-widget-wrapper .sr-us-basketball-scoreboard__match-period {
    font-size: 0.7em !important;
}
.yn-games-widget-wrapper .sr-scoreboardperiodtable__total-cell,
.yn-games-widget-wrapper .sr-scoreboardperiodtable__total-cell .sr-scoreboardperiodtable__result {
    font-size: 1.2rem !important;
    font-weight: normal !important;
}
.yn-games-widget-wrapper .sr-us-basketball-scoreboard__content {
    padding: 8px 0 16px;
}
.yn-games-widget-wrapper .sr-scoreboardperiodtable {
    padding: 16px 0 8px;
}
.yn-games-widget-wrapper .sr-scoreboardperiodtable__table-cell {
    padding: 8px 10px;
}
.yn-games-widget-wrapper .sr-scoreboardperiodtable__header-row th {
    padding-top: 12px;
    padding-bottom: 6px;
}

/* Outline the empty balls/strikes/outs circles so they read on the dark panel. */
.yn-games-widget-wrapper .sr-mlb-score-balls-strikes-outs__circle {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Recorded outs are painted with the theme's `srt-neutral-2` (near-black #1A1A1A), which is
   indistinguishable from an empty circle on the dark panel — balls get green (srt-mlb-run-1)
   and strikes red (srt-mlb-error-1), but outs have no accent colour of their own. Fill them
   solid white so the out count reads instantly. Class pairing confirmed from live MLB markup
   (empty circle = no theme class, recorded out = `srt-neutral-2`). */
.yn-games-widget-wrapper .sr-mlb-score-balls-strikes-outs__circle.srt-neutral-2 {
    background-color: #fff !important;
    border-color: #fff !important;
}

/* Show the base diamond even with no runners on. Live markup confirmed the bases are
   borderless CSS boxes (`sr-mlb-score-bases__base` rotated into diamonds) whose only visual
   is background-color — so the earlier border/outline overrides had nothing to paint. The
   empty state carries `srt-neutral-3` (near-black), which vanishes on the dark panel. Paint
   every base white so whatever occupied class Sportradar swaps in stays visible, then knock
   the confirmed empty state down to faint white so runners-on read at a glance. */
.yn-games-widget-wrapper .sr-mlb-score-bases__base {
    background-color: #fff !important;
}
.yn-games-widget-wrapper .sr-mlb-score-bases__base.srt-neutral-3 {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Linescore overlap fix (MLB). The MLB linescore uses a fixed-column scroller
   whose left offset is computed in JS; when the widget is measured off-screen
   that offset is wrong and the team-name column overlaps the inning numbers.
   Render the table in normal flow instead so the columns never collide. */
.yn-games-widget-wrapper .sr-us-table-cell__fixed-cell {
    position: static !important;
}
.yn-games-widget-wrapper .sr-us-table-scroller__inner {
    padding-left: 0 !important;
}
.yn-games-widget-wrapper .sr-us-table-scroller__overflow {
    overflow: visible !important;
}

/* Give the inning columns their own spacing. Sportradar normally sizes these
   via the scroller's JS measurement; since we've taken the scroller out of the
   layout, set the spacing here so the numbers never collapse together. */
.yn-games-widget-wrapper .sr-mlb-scoreboard-innings__data,
.yn-games-widget-wrapper .sr-mlb-scoreboard-innings__totals {
    padding-left: 0.45em !important;
    padding-right: 0.45em !important;
    min-width: 1.1em;
    text-align: center;
}

/* On the compact (small) layout, the abbreviated names plus all twelve number
   columns have to fit a phone-width panel, so shrink and tighten the inning
   cells. The linescore is a table-layout:fixed table whose column floor is
   this cell's min-width + padding, and the table stretches back to 100% of
   the panel when there's room — so these values only set the SMALLEST the
   columns may go. Sized so 9 innings + R/H/E + the team column fit a 320px
   viewport after the body/panel padding is taken out. */
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-mlb-scoreboard-innings__data,
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-mlb-scoreboard-innings__totals {
    font-size: 0.8em !important;
    padding-left: 0.2em !important;
    padding-right: 0.2em !important;
    min-width: 0.6em !important;
}

/* Compact/mobile layout: the fixed team column shows a short abbreviation ("NYY"). The large
   layout un-clips this cell (overflow:visible, above) to fit the full name; on the compact layout
   that same un-clip let "NYY" bleed over the 1st-inning column. Reserve a definite width for the
   abbreviation column and add a right gutter so inning 1 starts cleanly to its right. Classes
   confirmed from live MLB markup (sr-us-table-cell__fixed-container / __fixed-col); tune the
   min-width against a real ≤480px render. */
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-us-table-cell__fixed-container,
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-mlb-scoreboard-innings__fixed-col {
    min-width: 3.2em !important;
    padding-right: 0.5em !important;
}

/* Force the compact linescore to fit the panel. The linescore is a
   table-layout:fixed table whose natural width comes from Sportradar's JS
   measurement, not the container — on phones it ends up wider than the panel
   and the R/H/E columns fall off the right edge (the wrapper/viewport clips
   them). Fixed layout ignores content min-widths, so pin the table to the
   panel width and give the team column an explicit width; the twelve number
   columns then share the rest and always fit. */
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-us-table__table {
    width: 100% !important;
}
/* Explicit column plan for the fixed-layout table: the team column and the
   R/H/E totals get set widths (R/H/E slightly wider so a two-digit total
   doesn't run into its neighbour), and the nine inning columns split the
   remainder. nth-last-child keeps targeting R/H/E even in extra innings. */
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-us-table__table th.sr-us-table-cell__fixed-container {
    width: 3.3em !important;
}
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-us-table__table thead th:nth-last-child(-n+3) {
    width: 1.25em !important;
}
/* Slightly smaller team abbreviation and a tighter crest gap so crest + "WSH"
   fit the 3.3em column without bleeding into the 1st-inning digits. */
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-mlb-scoreboard-innings__teamcell {
    font-size: 0.8em !important;
}
.yn-games-widget-wrapper .sr-mlb-innings--small .sr-mlb-scoreboard-innings__crest-wrapper {
    margin-right: 4px !important;
}

/* The scroller's left/right chevrons are dead UI: the table is rendered in
   normal flow (position:static / overflow:visible above), so the arrows can't
   scroll anything — they only overlap the first and last linescore columns. */
.yn-games-widget-wrapper .sr-us-table-scroller__arrow,
.yn-games-widget-wrapper .sr-us-table-scroller__track,
.yn-games-widget-wrapper .sr-us-table-scroller__thumb-wrapper {
    display: none !important;
}

/* Drop the decorative rules Sportradar draws around the linescore: the
   full-width border above the header row (every thead th carries it) and the
   horizontal line overlays. */
.yn-games-widget-wrapper .sr-mlb-scoreboard-innings thead th {
    border-top: 0 !important;
}
.yn-games-widget-wrapper .sr-mlb-scoreboard-innings__line,
.yn-games-widget-wrapper .sr-mlb-scoreboard-innings__horizontal-lines {
    display: none !important;
}

/* Centre the linescore under the panel. The scroller reserves a left margin
   for the (now in-flow) fixed team column, which shoves the table off-centre;
   auto margins recentre it. */
.yn-games-widget-wrapper .sr-us-table-scroller__overflow {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Widen the linescore team-name column and drop its clip so the longer name
   ("New York Yankees") isn't cut off by the fixed cell's overflow:hidden.
   Only on the large layout (full names) — on the compact/mobile layout the
   column shows an abbreviation ("MIN"/"NYY") and must stay narrow, otherwise
   the reserved width pushes the inning columns off the panel. */
.yn-games-widget-wrapper .sr-us-table-cell__fixed-cell {
    overflow: visible !important;
}
.yn-games-widget-wrapper .sr-mlb-innings--large .sr-us-table-cell__fixed-container,
.yn-games-widget-wrapper .sr-mlb-innings--large .sr-mlb-scoreboard-innings__fixed-col {
    min-width: 12.5em !important;
}

/* Brighten the top/bottom-of-inning triangle; its default fill is near-black
   and disappears on the dark panel. */
.yn-games-widget-wrapper .sr-current-inning__icon {
    fill: rgba(255, 255, 255, 0.75) !important;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .yn-games-widget-wrapper {
        margin: 15px 0;
    }
}

@media screen and (max-width: 480px) {
    /* Slimmer panel padding: at phone widths the 28px gutters are ~15% of the
       viewport and were pushing the linescore's R/H/E columns off-screen. */
    .yn-games-widget-wrapper {
        margin: 10px 0;
        padding: 20px 14px;
    }
    
    .yn-games-widget-error {
        padding: 12px 15px;
        font-size: 13px;
    }
}