@charset "UTF-8";
/* ==========================================================================
   reportGrid modernization — layered on top of the legacy reportGrid.css
   stylesheet so changes can be isolated and rolled back independently.
   Wave A: card elevation, header redesign, Vegas strip, status pills,
           player row hover + ranking/projection coloring.
   ==========================================================================
   Color palette references:
   --rg-blue-dark : #1e3a8a   primary brand accent
   --rg-blue-soft : #f0f4ff   light blue surface (hover, accents)
   --rg-amber     : #b45309   expected / GTD status
   --rg-amber-bg  : #fef3c7
   --rg-green     : #16a34a   confirmed / good / increase
   --rg-green-bg  : #dcfce7
   --rg-red       : #dc2626   postponed / out / decrease
   --rg-red-bg    : #fef2f2
   --rg-gray-900  : #0f172a   primary text
   --rg-gray-600  : #475569   secondary text
   --rg-gray-400  : #94a3b8   muted text
   --rg-gray-100  : #f1f5f9   subtle dividers / surfaces
   ========================================================================== */

:root {
    --rg-blue-dark: #1e3a8a;
    --rg-blue: #2563eb;
    --rg-blue-soft: #f0f4ff;
    --rg-amber: #b45309;
    --rg-amber-bg: #fef3c7;
    --rg-amber-border: #fde68a;
    --rg-green: #16a34a;
    --rg-green-bg: #dcfce7;
    --rg-green-border: #a7f3d0;
    --rg-red: #dc2626;
    --rg-red-bg: #fef2f2;
    --rg-red-border: #fecaca;
    --rg-gray-900: #0f172a;
    --rg-gray-700: #334155;
    --rg-gray-600: #475569;
    --rg-gray-500: #64748b;
    --rg-gray-400: #94a3b8;
    --rg-gray-200: #e2e8f0;
    --rg-gray-100: #f1f5f9;
    --rg-gray-50: #f8fafc;
}

/* ── Page font baseline ──────────────────────────────────────────────────
   Use a clean system stack across the page; Heebo is fine but defaults
   are tighter and feel more modern. */
.module ng-controller {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Game card — elevated, rounded, hover lift ──────────────────────── */
.reportGridGameBox {
    background: #fff;
    border: 1px solid var(--rg-gray-200);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
    padding-bottom: 4px;
}
.reportGridGameBox:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 58, 138, 0.18);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(30, 58, 138, 0.05);
}

/* Confirmed-lineup visual treatment — three tiers driven by :has().
   1. Both teams confirmed  → whole card glows green (full lock-in)
   2. One team confirmed    → only that side's column is tinted green
   3. Neither confirmed     → default neutral card
   Hover state intensifies the same glow rather than swapping in the
   default blue, so the "confirmed" signal survives interaction. */

/* (1) BOTH confirmed — full-card glow + header tint */
.reportGridGameBox:has(.startingStatusLeft.lineupStatusConfirmed):has(.startingStatusRight.lineupStatusConfirmed) {
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow:
        0 0 0 1px rgba(22, 163, 74, 0.18),
        0 0 24px rgba(22, 163, 74, 0.10),
        0 1px 3px rgba(0,0,0,0.04);
}
.reportGridGameBox:has(.startingStatusLeft.lineupStatusConfirmed):has(.startingStatusRight.lineupStatusConfirmed):hover {
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow:
        0 0 0 1px rgba(22, 163, 74, 0.32),
        0 0 36px rgba(22, 163, 74, 0.20),
        0 10px 28px rgba(22, 163, 74, 0.18);
}
.reportGridGameBox:has(.startingStatusLeft.lineupStatusConfirmed):has(.startingStatusRight.lineupStatusConfirmed) .reportGridGameBoxHeader {
    background: linear-gradient(180deg, rgba(220, 252, 231, 0.5) 0%, #fff 100%);
}

/* (2a) ONLY away team (left) confirmed — tint the left column + edge stripe */
.reportGridGameBox:has(.startingStatusLeft.lineupStatusConfirmed):not(:has(.startingStatusRight.lineupStatusConfirmed)) .startersColLeft {
    background: rgba(220, 252, 231, 0.45) !important;
    box-shadow: inset 3px 0 0 rgba(22, 163, 74, 0.45);
}
.reportGridGameBox:has(.startingStatusLeft.lineupStatusConfirmed):not(:has(.startingStatusRight.lineupStatusConfirmed)) .leftTeamBoxInner {
    /* Subtle bump so the team header echoes the column tint */
    position: relative;
}
.reportGridGameBox:has(.startingStatusLeft.lineupStatusConfirmed):not(:has(.startingStatusRight.lineupStatusConfirmed)) .leftTeamBoxInner::before {
    content: '';
    position: absolute;
    inset: -6px -8px;
    background: rgba(220, 252, 231, 0.45);
    border-radius: 8px;
    z-index: -1;
}

/* (2b) ONLY home team (right) confirmed — tint the right column + edge stripe */
.reportGridGameBox:has(.startingStatusRight.lineupStatusConfirmed):not(:has(.startingStatusLeft.lineupStatusConfirmed)) .startersColRight {
    background: rgba(220, 252, 231, 0.45) !important;
    box-shadow: inset -3px 0 0 rgba(22, 163, 74, 0.45);
}
.reportGridGameBox:has(.startingStatusRight.lineupStatusConfirmed):not(:has(.startingStatusLeft.lineupStatusConfirmed)) .rightTeamBoxInner {
    position: relative;
}
.reportGridGameBox:has(.startingStatusRight.lineupStatusConfirmed):not(:has(.startingStatusLeft.lineupStatusConfirmed)) .rightTeamBoxInner::before {
    content: '';
    position: absolute;
    inset: -6px -8px;
    background: rgba(220, 252, 231, 0.45);
    border-radius: 8px;
    z-index: -1;
}

/* ── Game card header — soft top band with team color hints ──────────── */
.reportGridGameBoxHeader {
    padding: 18px 20px 6px;
    position: relative;
    background: linear-gradient(180deg, var(--rg-gray-50) 0%, #fff 100%);
    border-bottom: 1px solid var(--rg-gray-100);
}

/* Team header layout */
.teamBoxes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.leftTeamBoxInner,
.rightTeamBoxInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.rightTeamBoxInner {
    align-items: flex-end;
    text-align: right;
}

.startinglineup_team_logo {
    height: 44px !important;
    width: 44px;
    object-fit: contain;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--rg-gray-200);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.teamBoxNameRight, .teamBoxNameLeft {
    font-size: 20px;
    font-weight: 800;
    color: var(--rg-gray-900);
    letter-spacing: -0.018em;
    line-height: 1.15;
    margin-top: 4px;
}

.record {
    font-size: 12px;
    color: var(--rg-gray-500);
    font-weight: 500;
    margin-top: 1px;
}

/* ── Status pills — Expected / Confirmed / Postponed ─────────────────── */
.startingStatusLeft,
.startingStatusRight {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none !important;
    /* "Expected" default look — amber */
    background: var(--rg-amber-bg);
    color: var(--rg-amber);
    border: 1px solid var(--rg-amber-border);
}
.startingStatusLeft::before,
.startingStatusRight::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
    flex-shrink: 0;
}
.startingStatusLeft.lineupStatusConfirmed,
.startingStatusRight.lineupStatusConfirmed {
    background: var(--rg-green-bg);
    color: var(--rg-green) !important;
    border-color: var(--rg-green-border);
}
.startingStatusLeft.lineupStatusConfirmed::before,
.startingStatusRight.lineupStatusConfirmed::before {
    animation: rg-pulse 2s ease-in-out infinite;
    opacity: 1;
}
/* Pills carry their own explanatory tooltip — signal hover-for-info with the cursor. */
.startingStatusLeft,
.startingStatusRight { cursor: help; }
@keyframes rg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}

/* ── Center game-time column ─────────────────────────────────────────── */
.centerBoxInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
}
.at_symbol {
    font-size: 10px;
    font-weight: 600;
    color: var(--rg-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
.gamedate {
    font-size: 15px;
    font-weight: 700;
    color: var(--rg-gray-900);
    letter-spacing: -0.01em;
}

/* ── Vegas line strip — a styled betting card spanning the matchup ───── */
.teamOddsBar {
    margin-top: 4px;
}
.teamOddsInfo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--rg-blue-soft);
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: 8px 14px;
    height: auto;
}
.teamOddsInfoLeft { justify-content: flex-start; }
.teamOddsInfoRight {
    justify-content: flex-end;
    border-left: 1px solid #dbeafe;
    padding-left: 12px;
}
.teamSpread .teamBoxOddsLeft,
.teamOddsInfoRight .vegasou {
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--rg-blue-dark);
    letter-spacing: -0.01em;
}
.teamOddsInfoLeft::before {
    content: 'SPREAD';
    font-size: 9px;
    font-weight: 700;
    color: var(--rg-gray-400);
    letter-spacing: 0.1em;
    margin-right: 8px;
    align-self: center;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.teamOddsInfoRight::before {
    content: 'O/U';
    font-size: 9px;
    font-weight: 700;
    color: var(--rg-gray-400);
    letter-spacing: 0.1em;
    margin-right: 8px;
    align-self: center;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Hide the legacy "173.5 O/U" suffix-style; the prefix label is enough */
.vegasou {
    /* keep the value, the prefix label handles the "O/U" descriptor */
}
.oddsBar { display: none; }

/* Layout the spread/OU rows so the value sits next to the info icon */
.teamOddsInfoLeft,
.teamOddsInfoRight {
    display: flex;
    align-items: center;
}
.teamSpread {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.teamOddsInfoRight .vegasou {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Reusable info icon ────────────────────────────────────────────────
   A small italic "i" in a circle that hosts the tooltip. Replaces the
   pattern of attaching tooltips to value text, which was both
   undiscoverable AND prone to viewport-edge cut-off at the top of
   cards (Vegas spread was the worst offender). Tooltips on these icons
   should set data-placement="bottom" so they open downward and stay
   inside the card. */
.rg-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--rg-gray-200);
    color: var(--rg-gray-600);
    font: italic 700 9px/1 Georgia, "Times New Roman", serif;
    cursor: help;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    vertical-align: middle;
    flex-shrink: 0;
}
.rg-info::before { content: "i"; transform: translateY(0.5px); }
.rg-info:hover,
.rg-info:focus {
    background: var(--rg-blue);
    color: #fff;
    transform: scale(1.08);
    outline: none;
}
/* Slightly muted variant for use inside saturated/colored containers */
.rg-info.is-onlight {
    background: rgba(255,255,255,0.7);
    color: var(--rg-gray-700);
}
.rg-info.is-onlight:hover { background: #fff; color: var(--rg-blue-dark); }

/* Tooltip body container — pushed below the bootstrap default so it
   never crowds the icon and reads cleanly. */
.tooltip { font-size: 14px !important; }
.tooltip-inner {
    max-width: 300px;
    padding: 10px 12px;
    font-size: 14px !important;
    line-height: 1.45;
    text-align: left;
}

/* ── Starters layout polish ────────────────────────────────────────────
   Tightened padding + gap because the player rows have several fixed-
   width columns and need every horizontal pixel for the player name. */
.startersRow {
    padding: 10px 12px 10px !important;
    gap: 8px;
}
.startersColLeft,
.startersColRight {
    width: 50% !important;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.startersColLeft  { padding-right: 0 !important; }
.startersColRight { padding-left: 0 !important; }

/* ── Player rows — hover state, hierarchy, premium feel ──────────────── */
.playerRow {
    box-shadow: none !important;
    border-bottom: 1px solid var(--rg-gray-100);
    transition: background 0.12s ease;
    border-radius: 6px;
}
.playerRow:last-child { border-bottom: none; }
.playerRow:hover {
    background: var(--rg-blue-soft);
    cursor: pointer;
}
.innerPlayerRow {
    align-items: center;
    padding: 7px 6px !important;
    gap: 5px !important;
}

/* ── Reveal-on-hover: salary + projection ─────────────────────────────
   At rest, the player row shows only position + name + rank chip — the
   name gets maximum room and rarely truncates. Hovering the game card
   slides salary and projection back in (with width animation), name
   shrinks to make room. Rank chip is pinned to the right edge with
   margin-left: auto so the ghost-gap between hidden columns doesn't
   leave dead space between the name and the rank when at rest. */
.reportGridGameBox .salary,
.reportGridGameBox .projection {
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: width 0.22s ease, opacity 0.22s ease,
                padding 0.22s ease, margin 0.22s ease;
    flex-shrink: 0;
}
.reportGridGameBox:hover .salary,
.reportGridGameBox:focus-within .salary,
.reportGridGameBox:hover .projection,
.reportGridGameBox:focus-within .projection {
    opacity: 1;
}
.reportGridGameBox:hover .salary,
.reportGridGameBox:focus-within .salary {
    width: 44px !important;
    min-width: 44px !important;
}
.reportGridGameBox:hover .projection,
.reportGridGameBox:focus-within .projection {
    width: 36px !important;
    min-width: 36px !important;
}
/* Pin the rank chip to the right edge so the gap left behind by hidden
   salary/projection doesn't show as dead space between name and rank. */
.reportGridGameBox .rankingOuter {
    margin-left: auto !important;
}
.reportGridGameBox:hover .rankingOuter,
.reportGridGameBox:focus-within .rankingOuter {
    margin-left: 0 !important;
    transition: margin-left 0.22s ease;
}

.playername .pn-full,
.playername .pn-short {
    pointer-events: none;
}

/* Player-name swap: show the longer "FullName" at rest (when there's
   horizontal room because salary/projection are hidden), and the
   shortened "Name" on card hover (when those columns slide in and
   horizontal space tightens). Falls back to Name in both states if
   FullName isn't populated server-side. */
.reportGridGameBox .pn-short { display: none; }
.reportGridGameBox:hover .pn-full,
.reportGridGameBox:focus-within .pn-full { display: none; }
.reportGridGameBox:hover .pn-short,
.reportGridGameBox:focus-within .pn-short { display: inline; }

/* Player name — keep it 14px (bumped from 13) and let the name area win
   the flex shrink fight against the injury chip / salary so long names
   don't get nuked to "C. Cl..." min-width: 0 + flex: 1 1 0 forces the
   name area to absorb available space first. */
.playerNameArea {
    flex: 1 1 0 !important;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.playername {
    font-size: 14px;
    font-weight: 500;
    color: var(--rg-gray-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.playerRow:hover .playername {
    color: var(--rg-blue-dark);
}

/* Position chip — polished little badge. The legacy stylesheet sets
   `color: <hue> !important` on each known position (.position_Baseball_SP
   etc.) but DOESN'T provide a fallback for positions like "DH" — and the
   chips are designed to be colored TEXT on a light tile, not white on a
   colored tile. So we give the tile a subtle gray surface and use a dark
   gray text fallback for unknown positions (DH etc.); the sport-specific
   !important colors override the fallback for everything else. */
.position {
    width: 22px !important;
    height: 22px;
    min-width: 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    color: var(--rg-gray-700);
    background: var(--rg-gray-50);
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

/* Salary, projection, ranking — all fixed-width and right-aligned so
   their LEFT edges line up across rows, regardless of content width
   ("$11.7k" vs "$9k", "8.4k" vs "10.7k", etc.). Without fixed widths,
   each row's columns shift independently and chips zig-zag vertically. */
.salary {
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--rg-gray-500);
    letter-spacing: -0.03em;
    flex-shrink: 0;
    width: 44px !important;
    min-width: 44px;
    padding-right: 0 !important;
    margin-left: 0 !important;
    text-align: right;
    white-space: nowrap;
}

/* Projection — primary actionable number, larger + bolder */
.projection {
    font-size: 14px !important;
    font-weight: 700;
    color: var(--rg-gray-900) !important;
    width: 36px !important;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-right: 0 !important;
}

/* ── Matchup ranking chip — solid-color premium chips with white text.
   The legacy stylesheet uses very pale backgrounds (#D1FAE5, #FEE2E2) with
   colored text that's hard to read at 11px. Override with saturated solids
   and a tier-color border for depth. Selectors are written with .playerRow
   ancestor so they don't accidentally collide with other ranking chips on
   the page. */
/* Ranking column gets a fixed footprint so chips line up vertically
   across all rows, then center the chip inside. */
.rankingOuter {
    flex-shrink: 0;
    float: none !important;
    width: 28px !important;
    min-width: 28px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rankingOuter > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.playerRow .opposingRankGreen {
    background: #16a34a !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
.playerRow .opposingRankRed {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
}
/* Neutral / yellow tier — looks like ordinary text. A neutral matchup
   isn't actionable info, so we let it fade into the row instead of
   competing visually with green (good) and red (bad). */
.playerRow .opposingRankYellow {
    background: transparent !important;
    color: var(--rg-gray-600) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.playerRow .opposingRankEmpty {
    background: transparent !important;
    color: var(--rg-gray-400) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.playerRow .opposingRankBlank {
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
}

/* Injury indicator inline with player name — ultra-compact so the row's
   tight horizontal budget can still fit the full name. No border, tight
   padding, small font; the saturated fill carries the signal. */
.injury {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--rg-red);
    color: #fff;
    border: none;
    text-transform: uppercase;
    line-height: 1.5;
    flex-shrink: 0;
    height: 14px;
}
/* Injuries section at the bottom can afford a slightly larger chip
   since it's not competing for row space. */
.injuryFooter {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--rg-red);
    color: #fff;
    border: none;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ── Injuries area ──────────────────────────────────────────────────────
   Each injured player is now a self-contained pill (name + status chip
   bundled together) with a soft gray surface. The two team columns
   wrap their pills independently so the layout adapts to any number
   of injuries per side without uneven flow.
   ────────────────────────────────────────────────────────────────────── */
.injuriesHeader {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rg-gray-400);
    margin: 4px 16px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rg-gray-100);
}

.injuriesRow {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    padding: 0 16px 14px;
}

/* Override the legacy "width: 50%; display: inline-block" so each
   team column becomes a proper flex container that wraps its pills. */
.injuriesCol {
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 !important;
    align-content: flex-start;
}

/* Each injured player = one pill containing name + status chip. */
.innerInjuriesCol {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px !important;
    background: var(--rg-gray-50);
    border: 1px solid var(--rg-gray-200);
    border-radius: 100px;
    font-size: 12px;
    transition: background 0.12s ease, border-color 0.12s ease;
    cursor: pointer;
}
.innerInjuriesCol:hover {
    background: var(--rg-blue-soft);
    border-color: #bfdbfe;
}

.playerNameInjury {
    max-width: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--rg-gray-900) !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: visible;
}
.innerInjuriesCol:hover .playerNameInjury {
    color: var(--rg-blue-dark) !important;
}

/* Status chip inside the injury pill — compact, no extra margin since
   the parent flex-gap handles spacing. Use span.injuryFooter for higher
   specificity than the legacy "span.injuryFooter { color: #EF4444 }"
   rule, which otherwise wins and makes red text on red background
   illegible. */
span.injuryFooter,
.innerInjuriesCol .injuryFooter {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 7px !important;
    margin-left: 0 !important;
    border-radius: 100px !important;
    background: var(--rg-red) !important;
    color: #fff !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.55 !important;
}

/* ── Page hero (SEO-rich + editorial-style) ───────────────────────────
   Centered editorial layout:
     [live count pill]
     {Sport} STARTING LINEUPS    <-- huge H1 with accent on activity
       for June 4, 2026          <-- date as smaller subtitle line
     <muted lead paragraph>
     Thursday, June 4 · ● Live data    <-- meta footer
   The H1 keeps both the sport name and the long date in a single
   heading for SEO; the "for {date}" line is a span inside the H1 so
   crawlers index the full phrase. */
.rg-hero {
    text-align: center;
    margin: 60px auto 36px; /* top padding clears the floating chat chip overlay */
    padding: 0 16px;
    max-width: 880px;
}

/* Top status pill — orange-red gradient, white pulsing dot, count of
   games today. Adds "Live ·" prefix when at least one game is in
   progress (ScoreStatus == 2). */
.rg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #fb7c4d 0%, #ea580c 100%);
    color: #fff;
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.32);
    margin-bottom: 22px;
}
.rg-hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: rg-live-pulse 1.4s ease-in-out infinite;
}
.rg-hero-badge-live { font-weight: 900; }

/* H1 — oversized, centered, with accent highlight on "Starting Lineups".
   The accent uses a faint background swipe behind the text so the
   phrase pops as a colored highlighter mark, matching the editorial
   style of the reference design. */
.module__title__text,
.rg-hero-title {
    display: block !important;
    font-size: 52px;
    font-weight: 900;
    color: var(--rg-gray-900);
    letter-spacing: -0.028em;
    line-height: 1.05;
    margin: 0 0 16px;
    padding: 0;
    text-align: center;
}
/* Kill the gradient bar from earlier hero styling — centered design
   doesn't need it. */
.module__title__text::before,
.rg-hero-title::before { content: none !important; display: none !important; }

.rg-hero-accent {
    color: #ea580c;
    background: linear-gradient(180deg, transparent 62%, rgba(249, 115, 22, 0.20) 62%);
    padding: 0 2px;
}

.rg-hero-for {
    display: block;
    font-size: 0.42em;
    font-weight: 700;
    color: var(--rg-gray-500);
    letter-spacing: -0.005em;
    margin-top: 10px;
    line-height: 1.3;
}

/* Lead paragraph — muted gray, centered text + auto-margin, capped
   width for a nice line-rag. !important on width/margin/text-align
   because some legacy parent style was widening the paragraph to its
   container's full width (and parking it left of the title); locking
   the constraints here forces the paragraph to render as a centered
   600px-wide block independent of the parent's layout. */
.rg-hero-lead {
    display: block !important;
    width: auto !important;
    margin: 0 auto !important;
    max-width: 600px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: var(--rg-gray-500) !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-wrap: auto;
}

/* Inline meta on the "for {date}" line — separator + live data chip.
   They live inside .rg-hero-for so the whole subtitle reads as one
   compound line: "for June 4, 2026 · ● Live data". */
.rg-hero-meta-sep {
    display: inline-block;
    margin: 0 8px;
    color: var(--rg-gray-300);
    font-weight: 700;
    vertical-align: middle;
}
.rg-hero-updated {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rg-green);
    font-weight: 700;
    vertical-align: middle;
}
.rg-hero-updated-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rg-green);
    animation: rg-live-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .rg-hero { margin-bottom: 24px; padding: 0 12px; }
    .module__title__text,
    .rg-hero-title { font-size: 34px; }
    .rg-hero-for   { font-size: 0.5em; }
    .rg-hero-lead  { font-size: 14px; }
    .rg-hero-meta  { font-size: 12px; }

    /* Cards: legacy CSS hard-codes width: 500px + 40px side margins, AND
       legacy mobile rules use the deprecated `max-device-width` query that
       modern iOS Safari ignores, so the desktop sizing leaks through and
       overflows the viewport. Force the card to fit, kill the min-width
       constraint that flex items inherit, and clip any internal overflow. */
    .reportGridGameBox {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 16px 0 !important;
        flex: 0 0 100% !important;
        overflow: hidden !important;
    }
    .reportGridGameBoxes {
        padding: 0 8px;
        gap: 12px;
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Bring the team name down so two-word names like "San Francisco Giants"
       and "Chicago Cubs" don't blow out the 1fr columns. Add ellipsis as a
       safety net if the column still can't fit the name. */
    .teamBoxNameRight,
    .teamBoxNameLeft {
        font-size: 16px;
        line-height: 1.15;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-word;
    }
    .leftTeamBoxInner,
    .rightTeamBoxInner {
        /* Legacy hard-codes width: 180px on both columns — that alone
           guarantees the header is >=400px wide regardless of viewport.
           Force them fluid. */
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        gap: 3px;
        overflow: hidden;
    }
    .startinglineup_team_logo { height: 36px !important; width: 36px; }
    .teamBoxes {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .reportGridGameBoxHeader { padding: 14px 14px 12px !important; }
    /* Player rows: cap the row to the card width so a long player name
       or chip can't force the parent wider than the viewport. */
    .startersColLeft,
    .startersColRight { min-width: 0 !important; max-width: 50%; overflow: hidden; }
    .innerPlayerRow { min-width: 0; max-width: 100%; }
}
@media (max-width: 480px) {
    .module__title__text,
    .rg-hero-title { font-size: 28px; letter-spacing: -0.02em; }
    .rg-hero-badge { font-size: 10px; padding: 6px 12px; }

    /* Phone-specific: tighter still. Team name down to 14px, smaller logo,
       compress the spread/OU strip so info icons stay on the same row. */
    .teamBoxNameRight,
    .teamBoxNameLeft { font-size: 14px; }
    .reportGridGameBoxHeader { padding: 12px 10px 10px !important; }
    .teamOddsInfo { padding: 6px 10px; }
    .startersRow { padding: 8px 8px 8px !important; gap: 4px; }
    .innerPlayerRow { padding: 6px 4px !important; gap: 4px !important; }
    .playername { font-size: 13px; }
    .at_symbol { font-size: 10px; }
    .gamedate, .live-status, .final-status { font-size: 14px; }
}

/* Wider games container so cards have breathing room */
.reportGridGameBoxes {
    gap: 8px;
}

/* ── User-preference toggles (segmented controls) ───────────────────── */
.rg-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0 0 24px;
    padding: 0 16px;
}
.rg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--rg-gray-100);
    border-radius: 100px;
    padding: 3px;
    box-shadow: inset 0 0 0 1px var(--rg-gray-200);
}
.rg-toggle-label {
    display: inline-block;
    padding: 0 8px 0 12px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rg-gray-500);
}
.rg-toggle button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rg-gray-600);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
    white-space: nowrap;
}
.rg-toggle button:hover {
    color: var(--rg-gray-900);
}
.rg-toggle button.is-active {
    background: #fff;
    color: var(--rg-blue-dark);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(30, 58, 138, 0.1);
}

/* ── Always-show-details override ─────────────────────────────────────
   When the user toggles "Always show", the games container gets the
   .rg-always-details class. Restore the hidden salary/projection
   columns to their normal widths + visibility, undo the rank chip's
   right-pinning, and flip the player-name swap to show the short Name
   permanently (matches the "decision mode" the hover state shows). */
.reportGridGameBoxes.rg-always-details .salary {
    width: 44px !important;
    min-width: 44px !important;
    opacity: 1 !important;
}
.reportGridGameBoxes.rg-always-details .projection {
    width: 36px !important;
    min-width: 36px !important;
    opacity: 1 !important;
}
.reportGridGameBoxes.rg-always-details .rankingOuter {
    margin-left: 0 !important;
}
.reportGridGameBoxes.rg-always-details .pn-full { display: none !important; }
.reportGridGameBoxes.rg-always-details .pn-short { display: inline !important; }

/* ==========================================================================
   Wave B — Mini Reports cards + skeleton loading
   ========================================================================== */

/* ── Mini Reports section title ──────────────────────────────────────── */
.module__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--rg-gray-900);
    letter-spacing: -0.015em;
    padding: 0 4px;
    margin: 0 0 18px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.module__title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 22px;
    background: linear-gradient(180deg, #4f46e5, #7c3aed);
    border-radius: 4px;
}

.gridBoxesCont {
    margin-top: 56px !important;
}

/* ── Mini Report card — modern card with header strip ────────────────── */
.gridBox {
    background: #fff;
    border: 1px solid var(--rg-gray-200);
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
    min-width: 380px;
}
.gridBox:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 58, 138, 0.15);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(30, 58, 138, 0.04) !important;
}

/* Header strip — gray-50 background with bottom divider + icon space */
.gridBoxHeader {
    padding: 14px 18px !important;
    background: linear-gradient(180deg, var(--rg-gray-50) 0%, #fff 100%);
    border-bottom: 1px solid var(--rg-gray-100);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--rg-gray-900) !important;
    letter-spacing: -0.005em;
    line-height: 1.3 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gridBoxHeader > a.boxLink {
    color: var(--rg-blue-dark) !important;
    font-weight: 700 !important;
    text-decoration: none;
}
.gridBoxHeader > a.boxLink::after {
    content: '→';
    margin-left: 6px;
    font-weight: 500;
    opacity: 0.6;
    transition: transform 0.18s, opacity 0.18s;
    display: inline-block;
}
.gridBoxHeader > a.boxLink:hover::after {
    opacity: 1;
    transform: translateX(3px);
}

/* Per-type header icons via data-type on .gridBox — emoji is concise,
   no extra HTTP request, and reads as a friendly visual cue. */
.gridBox[data-type="1"] .gridBoxHeader::before { content: "🚑"; }
.gridBox[data-type="2"] .gridBoxHeader::before { content: "💲"; }
.gridBox[data-type="3"] .gridBoxHeader::before { content: "🏆"; }
.gridBox[data-type="4"] .gridBoxHeader::before { content: "🛡️"; }
.gridBox[data-type="5"] .gridBoxHeader::before { content: "🔥"; }
.gridBox[data-type="6"] .gridBoxHeader::before { content: "⚔️"; }
.gridBox[data-type="8"] .gridBoxHeader::before { content: "🤝"; }
.gridBox[data-type="9"] .gridBoxHeader::before { content: "⚠️"; }
.gridBox[data-type="10"] .gridBoxHeader::before { content: "💤"; }
.gridBox[data-type="11"] .gridBoxHeader::before { content: "⏱️"; }
.gridBox[data-type="12"] .gridBoxHeader::before { content: "🏃"; }
.gridBox[data-type] .gridBoxHeader::before {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

/* Body — pad evenly, scrollable, hover-able rows */
.gridBoxBody {
    padding: 8px 18px 14px !important;
    max-height: 360px !important;
}

/* Generic rows — readable spacing + subtle hover */
.gridBoxRow {
    min-height: auto !important;
    line-height: 1.5 !important;
    padding: 8px 8px !important;
    margin: 0 -8px;
    box-shadow: none !important;
    border-radius: 6px;
    border-bottom: 1px solid var(--rg-gray-100);
    transition: background 0.12s ease;
    gap: 8px;
}
.gridBoxRow:last-child { border-bottom: none; }
.gridBoxRow:hover { background: var(--rg-gray-50); }

.gridDataGenericRow {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rg-gray-700) !important;
    margin-left: 4px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
}

/* Salary-change glyphicon → modern up/down chip via attribute trick.
   Legacy renders <span class="glyphicon glyphicon-arrow-up"> or down;
   we hide the legacy icon and replace with a colored chip using
   pseudo-elements so the chip color signals direction at a glance. */
.gridBox[data-type="2"] .glyphicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
    margin-right: 6px;
    color: transparent !important;
    position: relative;
    flex-shrink: 0;
}
.gridBox[data-type="2"] .glyphicon::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 12px;
}
.gridBox[data-type="2"] .glyphicon-arrow-up {
    background: var(--rg-green);
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
.gridBox[data-type="2"] .glyphicon-arrow-up::before { content: '↑'; }
.gridBox[data-type="2"] .glyphicon-arrow-down {
    background: var(--rg-red);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
}
.gridBox[data-type="2"] .glyphicon-arrow-down::before { content: '↓'; }

/* Perfect Lineup trophy icons — polished with subtle amber drop shadow */
.gridBox[data-type="3"] .gridBoxRow img {
    width: 20px !important;
    height: 20px !important;
    filter: drop-shadow(0 1px 1px rgba(180, 83, 9, 0.25));
}

/* Generic tables (back-to-back, pace, well-rested, etc.) — modernize */
.genericTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.genericTable thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rg-gray-400);
    padding: 8px 6px;
    border-bottom: 1px solid var(--rg-gray-200);
    background: var(--rg-gray-50);
}
.genericTable tbody td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--rg-gray-100);
    color: var(--rg-gray-700);
    font-weight: 500;
}
.genericTable tbody tr:hover td { background: var(--rg-gray-50); }
.genericTable tbody tr:last-child td { border-bottom: none; }
.genericTable .bold { font-weight: 700; color: var(--rg-gray-900); }
.genericTable .italics { font-style: italic; }
.genericTable .boldRed { color: var(--rg-red); font-weight: 700; }
.genericTable .boldGreen { color: var(--rg-green); font-weight: 700; }
.genericTable .sortableColumn { cursor: pointer; }
.genericTable .sortableColumn:hover { color: var(--rg-blue-dark); }
.boxHeading {
    font-size: 10px !important;
    font-style: italic;
    color: var(--rg-gray-400) !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

/* Team-color dots inside data rows — polish with rounded edges + gap */
.divTeamColors,
.divTeamColorsAssist,
.divTeamColorsB2B {
    display: inline-flex !important;
    gap: 2px;
    margin-right: 8px;
    flex-shrink: 0;
}
.divTeamColor {
    width: 8px !important;
    height: 16px !important;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* Inline divs inside rows — keep inline behavior but inherit modern fonts */
.divInline,
.assistWrapper {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 1.5;
}
.pnameNoLimit {
    display: inline-block;
    color: var(--rg-gray-900);
    font-weight: 600;
}
.pnameNoLimit a {
    color: var(--rg-blue-dark) !important;
    text-decoration: none;
}
.pnameNoLimit a:hover { text-decoration: underline; }

/* ── Skeleton loading cards ───────────────────────────────────────────
   Show 4 shimmering placeholder game cards while data is being fetched
   instead of just a blank page with a ripple. Gives users immediate
   visual scaffolding of where content will appear. */
.rg-skeleton-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}
.rg-skeleton-card {
    width: 500px;
    max-width: 600px;
    flex: 1 1 auto;
    margin: 10px 20px 50px 20px;
    background: #fff;
    border: 1px solid var(--rg-gray-200);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    padding: 18px 20px;
    box-sizing: border-box;
}
.rg-skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.rg-skeleton-team {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.rg-skeleton-team.right { align-items: flex-end; }
.rg-skeleton-bar {
    background: linear-gradient(90deg, var(--rg-gray-100) 0%, #f7f8fa 50%, var(--rg-gray-100) 100%);
    background-size: 200% 100%;
    animation: rg-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}
.rg-skeleton-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}
.rg-skeleton-bar.name   { width: 110px; height: 18px; }
.rg-skeleton-bar.record { width: 36px;  height: 12px; }
.rg-skeleton-bar.center { width: 60px;  height: 22px; }
.rg-skeleton-bar.vegas  { width: 100%; height: 38px; border-radius: 10px; margin-bottom: 14px; }
.rg-skeleton-rows { display: flex; gap: 14px; }
.rg-skeleton-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rg-skeleton-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.rg-skeleton-row > .rg-skeleton-bar.pos   { width: 22px; height: 22px; border-radius: 5px; }
.rg-skeleton-row > .rg-skeleton-bar.pn    { flex: 1; height: 14px; }
.rg-skeleton-row > .rg-skeleton-bar.num   { width: 32px; height: 14px; }
@keyframes rg-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hide the legacy ripple — skeleton cards replace it visually */
#queryAnim .rippleanim {
    display: none;
}

/* ==========================================================================
   Wave C — Liveness: live indicator, countdown chip, stagger fade-in
   ========================================================================== */

/* Stagger entry — each game card fades in with a small delay so the page
   arrives smoothly rather than popping. Previously also used translateY,
   but that left a GPU compositor layer on every card and caused text
   inside player rows to fail to repaint after scroll on Windows Chrome
   (rows showed empty until hovered). Opacity-only avoids the layer. */
.reportGridGameBox {
    opacity: 0;
    animation: rg-card-in 0.45s ease-out forwards;
}
.reportGridGameBox:nth-child(1)  { animation-delay:   0ms; }
.reportGridGameBox:nth-child(2)  { animation-delay:  60ms; }
.reportGridGameBox:nth-child(3)  { animation-delay: 120ms; }
.reportGridGameBox:nth-child(4)  { animation-delay: 180ms; }
.reportGridGameBox:nth-child(5)  { animation-delay: 240ms; }
.reportGridGameBox:nth-child(6)  { animation-delay: 280ms; }
.reportGridGameBox:nth-child(7)  { animation-delay: 320ms; }
.reportGridGameBox:nth-child(8)  { animation-delay: 360ms; }
.reportGridGameBox:nth-child(n+9){ animation-delay: 400ms; }

@keyframes rg-card-in {
    to { opacity: 1; }
}

/* Mini Reports cards stagger in too, but with shorter delays so they
   don't compound on top of the game-card stagger. */
.gridBox {
    opacity: 0;
    animation: rg-card-in 0.35s ease-out forwards;
    animation-delay: 500ms;
}
.gridBox:nth-child(1) { animation-delay: 500ms; }
.gridBox:nth-child(2) { animation-delay: 560ms; }
.gridBox:nth-child(3) { animation-delay: 620ms; }
.gridBox:nth-child(n+4){ animation-delay: 680ms; }

/* Respect motion preferences — disable stagger for users with
   reduced-motion enabled. */
@media (prefers-reduced-motion: reduce) {
    .reportGridGameBox,
    .gridBox {
        opacity: 1;
        animation: none;
    }
}

/* ── LIVE indicator — pulse dot + label, top-right corner overlay ─────
   LIVE theme uses #FF9900 (vivid orange) — distinct from red (which is
   reserved for injuries / "out" status) and from green/blue (used for
   confirmed/final). Easy to triage at a glance: orange-glowing card =
   game in progress. */
.reportGridGameBox.is-live {
    border-color: rgba(255, 153, 0, 0.45);
    box-shadow:
        0 0 0 1px rgba(255, 153, 0, 0.22),
        0 0 28px rgba(255, 153, 0, 0.16),
        0 1px 3px rgba(0,0,0,0.04);
}
.reportGridGameBox.is-live:hover {
    border-color: rgba(255, 153, 0, 0.6);
    box-shadow:
        0 0 0 1px rgba(255, 153, 0, 0.38),
        0 0 40px rgba(255, 153, 0, 0.24),
        0 10px 28px rgba(255, 153, 0, 0.2);
}
.reportGridGameBox.is-live .reportGridGameBoxHeader {
    background: linear-gradient(180deg, rgba(255, 234, 200, 0.55) 0%, #fff 100%);
}
/* Live state — badge stacked over the current score, mirroring the
   .final-status layout so the center column has a consistent shape
   regardless of game state (upcoming / live / final). */
.live-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
/* Live badge — pulsing orange pill with the LIVE label. */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 100px;
    background: #FF9900;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.38);
}
.live-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: rg-live-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
/* Live score — matches the final-score visual scale but in orange so
   the user instantly registers "this number is changing." */
.live-score {
    font-size: 22px;
    font-weight: 800;
    color: #FF9900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.live-score-sep {
    color: rgba(255, 153, 0, 0.5);
    margin: 0 5px;
    font-weight: 500;
}
@keyframes rg-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.6); }
}

/* Delayed game (ScoreEnteredStatus == 2) — amber glow + DELAYED pill.
   Distinct from "Expected" (which is about lineup confirmation) and from
   "Live" (game in progress). Delayed = game should have started but
   hasn't; the original game time still shows below the badge. */
.reportGridGameBox.is-delayed {
    border-color: rgba(180, 83, 9, 0.35);
    box-shadow:
        0 0 0 1px rgba(180, 83, 9, 0.16),
        0 0 22px rgba(180, 83, 9, 0.11),
        0 1px 3px rgba(0,0,0,0.04);
}
.reportGridGameBox.is-delayed:hover {
    border-color: rgba(180, 83, 9, 0.55);
    box-shadow:
        0 0 0 1px rgba(180, 83, 9, 0.3),
        0 0 32px rgba(180, 83, 9, 0.2),
        0 10px 26px rgba(180, 83, 9, 0.16);
}
.reportGridGameBox.is-delayed .reportGridGameBoxHeader {
    background: linear-gradient(180deg, var(--rg-amber-bg) 0%, #fff 100%);
}
.delayed-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 100px;
    background: var(--rg-amber);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.28);
    margin-bottom: 2px;
}

/* Final / Completed game — dropped the heavy 0.78 opacity dim that
   washed out the whole card; final games are still useful (verifying
   actual fantasy output, who actually played) so we keep them legible.
   The prominent FINAL badge + the score below it carry the "this game
   is done" signal, with a subtle slate-tinted border for at-a-glance
   triage across the page. */
.reportGridGameBox.is-final {
    opacity: 1;
    border-color: rgba(30, 41, 59, 0.18);
    box-shadow:
        0 0 0 1px rgba(30, 41, 59, 0.06),
        0 0 18px rgba(30, 41, 59, 0.05),
        0 1px 3px rgba(0,0,0,0.04);
}
.reportGridGameBox.is-final:hover {
    border-color: rgba(30, 41, 59, 0.32);
    box-shadow:
        0 0 0 1px rgba(30, 41, 59, 0.12),
        0 8px 22px rgba(30, 41, 59, 0.10),
        0 0 24px rgba(30, 41, 59, 0.08);
}
.reportGridGameBox.is-final .reportGridGameBoxHeader {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.7) 0%, #fff 100%);
}

/* Final-state block in the center column = badge stacked on top of
   the actual final score. */
.final-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.final-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 100px;
    background: linear-gradient(180deg, #5BB0E8 0%, #48A0DC 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(72, 160, 220, 0.32);
}
.final-score {
    font-size: 22px;
    font-weight: 800;
    color: var(--rg-gray-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.final-score-sep {
    color: var(--rg-gray-400);
    margin: 0 5px;
    font-weight: 500;
}

/* "Starts soon" hint — small chip when the game starts within the
   next hour. Wired up via ng-class on the gametime element. */
.starts-soon-chip {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 7px;
    background: var(--rg-amber-bg);
    color: var(--rg-amber);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--rg-amber-border);
}

/* ==========================================================================
   Wave D — Sport-specific polish + premium CTA card
   ========================================================================== */

/* ── Weather header / slices — modern strip ────────────────────────────
   The cshtml renders the 7 hourly forecasts across 3 sibling sections —
   slices 0-1 at top level, slices 2-4 wrapped in .gameWeatherSlices,
   slices 5-6 at top level again. That nesting broke even distribution.
   Fix: give .weatherSlices a flex layout AND use `display: contents` on
   the .gameWeatherSlices wrapper so its inner slices become first-class
   flex children of the parent, giving every hour an equal-width column. */
.weatherHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    /* --ppd-risk is set per-game via ng-style (0-100). The gradient ramps
       left-to-right and the *whole strip* gets progressively redder as risk
       climbs. At 0% risk this resolves to the original blue-soft tone. */
    --ppd-risk: 0;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--rg-blue-soft), #fff5f5 calc(var(--ppd-risk) * 1%)) 0%,
        color-mix(in srgb, var(--rg-blue-soft), #fecaca calc(var(--ppd-risk) * 1%)) 55%,
        color-mix(in srgb, var(--rg-blue-soft), #f87171 calc(var(--ppd-risk) * 1%)) 100%
    );
    border-top:    1px solid color-mix(in srgb, #dbeafe, #f87171 calc(var(--ppd-risk) * 1%));
    border-bottom: 1px solid color-mix(in srgb, #dbeafe, #f87171 calc(var(--ppd-risk) * 1%));
    transition: background 0.3s ease, border-color 0.3s ease;
}
/* Make the PPD RISK badge readable on the darker side of the gradient. */
.weatherHeader .postponeChanceText { text-shadow: 0 1px 0 rgba(255,255,255,0.55); }
.weatherHeader .gameTemperature {
    font-size: 16px;
    font-weight: 800;
    color: var(--rg-gray-900);
}
.weatherHeaderIcon { display: inline-flex; }

.weatherSlices {
    display: flex !important;
    flex-direction: row;
    gap: 6px;
    padding: 14px 14px 16px;
    flex-wrap: nowrap;
    align-items: stretch;
    background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
    border-top: 1px solid var(--rg-gray-100);
}

/* The legacy wrapper for slices 2-4 — flatten so all 7 hours share
   the same flex parent and distribute evenly. */
.gameWeatherSlices { display: contents !important; }

/* Each hour = mini-card column: time → icon → temp → wind icon → wind */
.weatherSlice,
.weatherSlice3,
.weatherSlices > div[class*="weatherSlice"] {
    flex: 1 1 0 !important;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 4px;
    margin: 0 !important;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--rg-gray-100);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
    font-size: 11px;
    text-align: center;
    position: relative; /* anchor for the GAMETIME label on middle slices */
}
.weatherSlice:hover,
.weatherSlice3:hover {
    background: var(--rg-blue-soft);
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

/* Middle 3 hours — centered around game start time. The legacy cshtml
   wraps these in .gameWeatherSlices (slices 2-4 of the 7-slice strip).
   Highlight with a soft blue tint, slightly bluer border, and a 3px
   blue bottom underline so users can instantly see which forecasts
   matter during the game window. Selector still works under
   display: contents — only box generation is suppressed; DOM tree
   (and descendant selectors) are intact. */
.gameWeatherSlices > .weatherSlice,
.gameWeatherSlices > .weatherSlice3 {
    background: linear-gradient(180deg, var(--rg-blue-soft) 0%, #fff 70%) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
    border-bottom: 3px solid var(--rg-blue) !important;
}
.gameWeatherSlices > .weatherSlice:hover,
.gameWeatherSlices > .weatherSlice3:hover {
    background: linear-gradient(180deg, #dbeafe 0%, var(--rg-blue-soft) 70%) !important;
    border-color: var(--rg-blue) !important;
    border-bottom-color: var(--rg-blue-dark) !important;
}
/* Tiny "GAMETIME" label above the first middle slice so the highlight
   isn't just visual decoration — gives the row meaning at a glance.
   Positioned absolutely so it doesn't disturb the flex sizing. */
.gameWeatherSlices > .weatherSlice:first-child::before,
.gameWeatherSlices > .weatherSlice3:first-child::before {
    content: 'GAMETIME';
    position: absolute;
    top: -16px;
    left: 0;
    font-size: 9px;
    font-weight: 800;
    color: var(--rg-blue-dark);
    letter-spacing: 0.12em;
    background: var(--rg-blue-soft);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-bottom: none;
    padding: 2px 6px;
    border-radius: 6px 6px 0 0;
    pointer-events: none;
}
/* Move .weatherSlices padding-top up to make room for the label */
.weatherSlices {
    padding-top: 26px !important;
}

/* Time row */
.sliceDate {
    font-size: 10px;
    font-weight: 700;
    color: var(--rg-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Icon row — uniform sizing across slices and within the header */
.weatherImage {
    width: 28px !important;
    height: 28px !important;
}
.iconSlice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

/* Temp + precipitation cluster */
.precipTemp {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}
.tempSlice {
    font-size: 15px !important;
    font-weight: 800;
    color: var(--rg-gray-900);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* Precipitation chip — only shows when > 5% per the legacy ng-if */
.precipitationChanceClassLow,
.precipitationChanceClassMid,
.precipitationChanceClassHigh,
.precipTemp > div[class*="precipitation"] {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    background: var(--rg-blue-soft);
    color: var(--rg-blue-dark);
    border: 1px solid #dbeafe;
}

/* Wind direction icon */
.windDirectionSlice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.stadiumDirImage {
    width: 40px !important;
    height: 40px !important;
    opacity: 0.7;
}

/* Wind speed text */
.windSpeedSlice {
    font-size: 10px;
    color: var(--rg-gray-500);
    font-weight: 600;
    line-height: 1;
}

.spacer { display: none; }

.weatherPostponedCont {
    padding: 12px 16px;
    text-align: center;
}
.weatherPostponed {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    padding: 6px 18px !important;
    border-radius: 100px !important;
    background: var(--rg-red-bg) !important;
    color: var(--rg-red) !important;
    border: 1px solid var(--rg-red-border);
    box-shadow: none !important;
    font-size: 12px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* "PPD RISK" label + the % value sit side-by-side as a single visual
   unit. The weatherHeader gradient now carries the risk signal, so the
   text is neutral and shares a baseline. */
.weatherHeader .postponeChanceText {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--rg-gray-900) !important;
    letter-spacing: 0.08em;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/* Strip the legacy colored-pill treatment (green / yellow / red) from
   the chance % — the value is just dark inline text at the same baseline
   as the label. Overrides legacy reportGrid.css `div.postponeChanceXxx`. */
.weatherHeader .postponeChanceGreen,
.weatherHeader .postponeChanceYellow,
.weatherHeader .postponeChanceRed {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--rg-gray-900) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    vertical-align: baseline !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* ── Hockey line indicators — colored numbered chip with badge feel ── */
.hockeyLine {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 18px;
    border-radius: 4px;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-width: 2px !important;
    margin-right: 4px !important;
    background: #fff;
}
.hockeyPosition {
    width: 22px !important;
    text-align: center;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--rg-gray-700) !important;
}
.powerPlay {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    color: var(--rg-amber);
    text-transform: uppercase;
    margin-left: 4px;
    letter-spacing: 0.04em;
}

/* ── Premium CTA card — at the bottom for non-premium users ──────────── */
.subscribeContainer {
    background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 50%, #7c3aed 100%);
    border-radius: 20px;
    padding: 32px 24px;
    margin: 40px 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(30, 58, 138, 0.18);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.subscribeContainer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 60%);
    transform: rotate(-15deg);
    pointer-events: none;
}
.subscribeContainer .subscribe:first-child {
    margin-bottom: 12px;
    position: relative;
}
.subscribeContainer .subscribe:first-child img {
    height: 28px !important;
    width: auto !important;
    filter: brightness(0) invert(1); /* legacy logo is dark; invert to white */
}
.subscribeContainer .subscribe:nth-child(2) {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    position: relative;
}
.subscribeContainer .subscribeSmall {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto 22px;
    position: relative;
}
.subscribeContainer .subscribeRed {
    color: #fbbf24 !important;
    font-weight: 800;
    margin: 0 4px;
}
.subscribeContainer .subscribe:last-child {
    position: relative;
}
.subscribeContainer .subscribeButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: #fff;
    color: var(--rg-blue-dark);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 100px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    transition: transform 0.15s ease, box-shadow 0.18s ease;
    cursor: pointer;
}
.subscribeContainer .subscribeButton::after {
    content: '→';
    transition: transform 0.18s ease;
}
.subscribeContainer .subscribeButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}
.subscribeContainer .subscribeButton:hover::after {
    transform: translateX(4px);
}
.subscribeContainer a { text-decoration: none; }