/* Box Score Specific Styles - PHL Theme Integration */

/* Compact Navigation Styles */
.breadcrumb-nav .breadcrumb-item a {
    color: var(--phl-orange, #ef7b00);
    text-decoration: none;
}

.breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--phl-steel);
    text-decoration: underline;
}

/* Clickable Header Styles */
.clickable-header {
    cursor: pointer;
    user-select: none;
}

.clickable-header:hover {
    color: var(--phl-steel) !important;
}

/* Combined Navigation Dropdown */
.combined-nav-dropdown {
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    left: 50% !important; /* Center horizontally relative to the dropdown parent */
    transform: translateX(-50%) !important; /* Adjust to truly center */
    top: 100% !important; /* Position below the header */
    right: auto !important; /* Override Bootstrap default */
}

.season-grid, .week-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.season-item, .week-item {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.header-navigation {
    text-align: center;
    position: relative; /* Ensure dropdown positioning is relative to this container */
}

.header-navigation .dropdown {
    display: inline-block; /* Keep dropdown inline but establish positioning context */
    position: relative;
}

.btn-phl-secondary {
    background-color: var(--phl-secondary, var(--phl-muted));
    border-color: var(--phl-secondary, var(--phl-muted));
    color: white;
}

.btn-phl-secondary:hover {
    background-color: var(--phl-steel);
    border-color: var(--phl-steel);
}

.btn-outline-phl-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Team Quick Navigation */
.team-quick-nav {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.team-quick-nav a {
    color: var(--phl-orange, #ef7b00);
    text-decoration: none;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.team-quick-nav a:hover {
    background-color: rgba(239, 123, 0, 0.1);
    text-decoration: none;
}

.team-quick-nav .current-matchup {
    color: var(--phl-muted);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.team-quick-nav .current-matchup:hover {
    background-color: rgba(108, 117, 125, 0.1);
}

/* Week navigation dropdown */
.week-nav-dropdown {
    min-width: 150px;
    max-height: 300px;
    overflow-y: auto;
}

/* Hide opponent info on smaller screens */
.team-quick-nav .opponent-info {
    display: inline;
}

@media (max-width: 768px) {
    .team-quick-nav .opponent-info {
        display: none;
    }
    
    /* On small screens, show only arrows and current week dropdown */
    .team-quick-nav {
        font-size: 0.7rem;
        gap: 0.1rem;
    }
    
    .team-quick-nav a {
        padding: 0.05rem 0.15rem;
        font-size: 0.7rem;
    }
    
    .team-quick-nav .current-matchup {
        padding: 0.05rem 0.15rem;
        font-size: 0.7rem;
    }
    
    /* Make owner names smaller and prevent overflow */
    .team-owner-nickname {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
    }
    
    /* Make team names smaller on mobile */
    .team-name-full {
        display: none; /* Hide full team names on mobile */
    }
    
    .team-name-abv {
        font-size: 0.8rem;
    }
    
    /* Hide week numbers in navigation arrows on mobile - show only symbols */
    .team-quick-nav a[title="Previous week"] {
        font-size: 0;
    }
    
    .team-quick-nav a[title="Previous week"]:before {
        content: "←";
        font-size: 0.75rem;
    }
    
    .team-quick-nav a[title="Next week"] {
        font-size: 0;
    }
    
    .team-quick-nav a[title="Next week"]:after {
        content: "→";
        font-size: 0.75rem;
    }
}

/* Extra small screens - ultra compact navigation */
@media (max-width: 480px) {
    .team-quick-nav {
        font-size: 0.65rem;
        gap: 0.05rem;
    }
    
    .team-quick-nav a {
        padding: 0.025rem 0.1rem;
        font-size: 0.65rem;
    }
    
    .team-quick-nav .current-matchup {
        padding: 0.025rem 0.1rem;
        font-size: 0.65rem;
    }
    
    .team-owner-nickname {
        font-size: 0.6rem !important;
        max-width: 50px;
    }
    
    /* Hide week numbers in navigation arrows on very small screens - show only symbols */
    .team-quick-nav a[title="Previous week"] {
        font-size: 0;
    }
    
    .team-quick-nav a[title="Previous week"]:before {
        content: "←";
        font-size: 0.8rem;
    }
    
    .team-quick-nav a[title="Next week"] {
        font-size: 0;
    }
    
    .team-quick-nav a[title="Next week"]:after {
        content: "→";
        font-size: 0.8rem;
    }
    
    /* Adjust header dropdown positioning on smaller screens */
    .combined-nav-dropdown {
        left: 10px !important; /* Offset from left edge on mobile */
        transform: none !important; /* Remove centering transform */
        right: 10px !important; /* Also set right constraint */
        width: calc(100vw - 20px) !important; /* Full width minus margins */
        max-width: 350px !important; /* But not too wide */
    }
}

/* Responsive Bracket/Win-Probability Button Text — same shrink treatment for both */
@media (max-width: 768px) {
    .bracket-text::before {
        content: "Bracket";
    }

    .chart-text::before {
        content: "Chart";
    }

    .bracket-text,
    .chart-text {
        font-size: 0; /* Hide original text */
    }
}

@media (min-width: 769px) {
    .bracket-text,
    .chart-text {
        font-size: inherit; /* Show original text */
    }
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .team-quick-nav {
        text-align: center;
        font-size: 0.75rem;
        justify-content: center;
    }
    
    .breadcrumb-nav {
        text-align: center;
    }
    
    .season-selector-only {
        min-width: 70px;
    }
}

/* Position Badge Styles - Half-Bubble Design */
.position-badge {
    position: relative;
    z-index: 2147483647 !important; /* Match maximum z-index used by position slots to ensure badges appear above score boxes */
    display: inline-block;
    background: var(--bs-primary, #0d6efd);
    color: white;
    padding: 0px 4px 2px 4px; /* No top padding, extra bottom padding */
    border-radius: 0 0 6px 6px; /* Only bottom corners rounded for half-bubble */
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    min-width: 20px;
    text-align: center;
    margin: 0;
}

.position-team-info {
    padding-top: 1px; /* Minimal top padding since badges start at top */
    padding-bottom: 4px;
    line-height: 1.3;
    overflow: visible;
}

/* ULTRA-AGGRESSIVE inline layout for player info on medium+ screens */
@media (min-width: 768px) {
    .player-info {
        gap: 0 !important; /* No gap between name and position info */
        display: block !important; /* Force block to control layout */
    }
    
    .position-team-info {
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important; /* FORCE inline display */
        white-space: nowrap !important;
    }
    
    /* Position badge MUST be inline */
    .position-badge {
        margin-left: 0.3rem !important;
        margin-right: 0.3rem !important;
        display: inline !important; /* FORCE inline display */
        vertical-align: baseline !important;
        white-space: nowrap !important;
    }
    
    /* FORCE player name container to be inline-block with everything on same line */
    .player-name {
        display: inline !important; /* Change to inline for ultimate control */
        white-space: nowrap !important; /* FORCE no wrapping */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    /* FORCE all player name children to be inline */
    .player-name > *,
    .player-name .position-badge,
    .player-name small,
    .player-name .position-team-info {
        display: inline !important; /* FORCE everything inline */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        vertical-align: baseline !important;
    }
    
    /* FORCE team info to be inline */
    .player-name small {
        margin-left: 0.2rem !important;
        display: inline !important;
    }
    
    /* Override any flex or block display that might be inherited */
    .team-1-player .player-name,
    .team-2-player .player-name {
        display: inline !important;
        flex-direction: row !important;
        align-items: baseline !important;
    }
    
    /* Force team info containers to be inline */
    .team-1-player .position-team-info,
    .team-2-player .position-team-info {
        display: inline !important;
        margin-left: 0.3rem !important;
    }
}

/* Ensure player rows have adequate space for half-bubbles */
.player-name {
    min-height: auto !important; /* Let it be natural height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0; /* No padding */
    padding-bottom: 0;
    line-height: 1.2; /* Tighter line height */
}

/* Weekly Matchups Header - Match grid alignment */
.weekly-matchups-header {
    max-width: 1400px; /* Match the grid max-width */
    margin-left: auto;
    margin-right: auto;
}

/* Weekly Matchups Grid — equal rows only: 8x1 (very wide), 4x2, or 2x4 */
.weekly-matchups-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 1400px; /* Match main content max-width to prevent extending beyond box score table */
    margin-left: auto;
    margin-right: auto;
}

/* Try to fit all 8 matchups on very wide screens - Shrink fonts to prevent cramping */
@media (min-width: 1400px) {
    .weekly-matchups-grid {
        grid-template-columns: repeat(8, 1fr); /* All 8 matchups in one row on very wide screens */
        gap: 0.75rem; /* Slightly tighter gap to maximize space */
    }
    
    /* Shrink all text in 8-across layout to prevent overlapping/wrapping */
    .weekly-matchups-grid .matchup-card {
        font-size: 0.85rem; /* Scale down base font size */
    }
    
    .weekly-matchups-grid .team-abv {
        font-size: 0.85rem; /* Smaller team abbreviations */
    }
    
    .weekly-matchups-grid .playoff-seed {
        font-size: 0.6rem; /* Smaller playoff seeds */
        padding: 0.1rem 0.2rem;
        min-width: 1rem;
    }
    
    .weekly-matchups-grid .matchup-card .owner-name,
    .weekly-matchups-grid .matchup-card .owner-record {
        font-size: 0.48rem !important; /* Even smaller owner info */
    }
    
    .weekly-matchups-grid .score {
        font-size: 0.9rem; /* Smaller scores */
        min-width: 2rem;
        padding: 0.2rem 0.3rem;
    }
    
    .weekly-matchups-grid .win-pct {
        font-size: 0.7rem; /* Smaller win percentages */
    }
    
    .weekly-matchups-grid .game-type {
        font-size: 0.55rem; /* Smaller game type text */
    }
    
    .weekly-matchups-grid .actions .btn-xs {
        font-size: 0.55rem; /* Smaller action buttons */
        padding: 0.1rem 0.25rem;
    }
}

/* 4 columns through the desktop range (no 6-col band — 8 matchups must
   land in equal rows) */
@media (min-width: 768px) and (max-width: 1399px) {
    .weekly-matchups-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Ensure 2 columns on smaller tablets */
@media (min-width: 576px) and (max-width: 767px) {
    .weekly-matchups-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Minimum 2 columns on mobile (never fewer than 2) */
@media (max-width: 575px) {
    .weekly-matchups-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Clickable Card Links */
.matchup-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.matchup-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Individual Matchup Cards - Compact Design */
.matchup-card {
    background: white;
    border: 2px solid var(--phl-gray-light, var(--phl-line));
    border-radius: 6px;
    padding: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

.matchup-card-link:hover .matchup-card {
    border-color: var(--phl-blue, #4682b4);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.matchup-card.current-matchup {
    border-color: var(--phl-orange, #ef7b00);
    background-color: #fff8f5;
    box-shadow: 0 4px 8px rgba(239, 123, 0, 0.2);
}

/* Team Rows (Top and Bottom Teams) */
.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
}

.team-row.bottom-team {
    border-top: 1px solid var(--phl-line-soft);
    margin-top: 0.25rem;
    padding-top: 0.375rem;
}

.team-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.125rem;
}

/* Team Header (Playoff Seed + Team Abbreviation) */
.team-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.playoff-seed {
    background: var(--phl-blue, #4682b4);
    color: white;
    padding: 0.15rem 0.3rem; /* Slightly bigger base padding */
    border-radius: 3px;
    font-size: 0.8rem; /* Bigger base size to match larger screens */
    font-weight: 500;
    min-width: 1.5rem; /* Slightly wider base */
    text-align: center;
    line-height: 1;
}

/* Responsive playoff seed scaling - match team name scaling ratio */
@media (max-width: 991px) {
    .playoff-seed {
        font-size: 0.65rem; /* Scale down similar to team name ratio (about 19% reduction) */
        padding: 0.125rem 0.25rem;
        min-width: 1.25rem;
    }
}

@media (max-width: 768px) {
    .playoff-seed {
        font-size: 0.6rem; /* Further scale down for smaller screens */
        padding: 0.1rem 0.2rem;
        min-width: 1rem;
    }
}

@media (max-width: 576px) {
    .playoff-seed {
        font-size: 0.55rem; /* Even smaller for mobile */
        padding: 0.08rem 0.15rem;
        min-width: 0.9rem;
    }
}

.team-abv {
    font-size: 1rem;
    font-weight: 700;
    color: var(--phl-orange, #ef7b00);
}

/* Owner Details (Owner Name + Record) */
.owner-details {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Make owner name and record exactly the same - override global styles */
.weekly-matchups-grid .matchup-card .owner-name,
.weekly-matchups-grid .matchup-card .owner-record {
    font-size: 0.55rem !important;
    color: var(--phl-muted);
    font-weight: 400 !important;
    line-height: 1.2;
    margin-bottom: 0;
}

/* Score Section */
.score-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.375rem;
    border-radius: 4px;
    background: var(--phl-surface);
    color: var(--phl-text);
    position: relative; /* Required for z-index to work */
    z-index: 4 !important; /* Low z-index so score elements appear below slot badges (10000) and position badges (9999) */
}

.score.winner {
    background: var(--phl-win);
    color: white;
}

.score.loser {
    background: var(--phl-loss);
    color: white;
}

/* Win Percentage and Win Indicator */
.win-indicator {
    text-align: center;
    min-width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.win-pct {
    font-size: 0.8rem;
}

.current-pct {
    color: var(--phl-blue, #4682b4);
    font-weight: 600;
}

.initial-pct {
    color: var(--phl-muted);
    font-weight: 400;
}

/* Green check mark for winners */
.win-indicator .fas.fa-check-circle {
    font-size: 1rem;
    color: var(--phl-win);
}

/* Larger scores and win% on wider screens */
@media (min-width: 992px) {
    .score {
        font-size: 1.2rem;
        min-width: 2.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .win-indicator {
        min-width: 3rem;
    }
    
    .win-pct {
        font-size: 0.9rem;
    }
    
    .win-indicator .fas.fa-check-circle {
        font-size: 1.2rem;
    }
}

/* Matchup Footer (Game Type and Actions) */
.matchup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.375rem;
    padding: 0.375rem 0.25rem 0.25rem;
    margin: 0.375rem -0.5rem -0.5rem;
    border-top: 1px solid var(--phl-line);
    border-radius: 0 0 4px 4px;
    transition: background-color 0.3s ease;
}

/* Championship Bracket - Gold Background */
.matchup-footer.championship-bracket {
    background-color: var(--phl-row-franchise);
    border-top-color: #ffdb99;
}

/* Biggest Loser Bracket - Light Red/Pink Background */
.matchup-footer.loser-bracket {
    background-color: var(--phl-row-ineligible);
    border-top-color: #ffb3b3;
}

/* Consolation Bracket - Neutral (no special styling) */
.matchup-footer.consolation-bracket {
    /* Default styling, no special background */
}

.game-type {
    font-size: 0.65rem;
    color: var(--phl-muted);
    font-weight: 500;
}

.actions .btn-xs {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

/* Score Update */
.score-update {
    background: var(--phl-blue, #4682b4);
    color: white;
    padding: 0.375rem;
    margin-top: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-align: center;
}

/* Box Score Header */
.box-score-header {
    background: white;
    border: 2px solid var(--phl-gray-light, var(--phl-line));
    border-radius: 8px;
    padding: 1rem; /* Reduced from 1.5rem */
    margin-bottom: 0.5rem; /* Reduced from 0.75rem */
    max-width: 1400px; /* Prevent over-stretching on very wide screens */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .box-score-header {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .box-score-header {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
}

/* Team Comparison - Equal width teams with top alignment */
.team-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1.5rem;
    margin-bottom: 0.5rem; /* Further reduced from 1rem */
    position: relative;
    padding: 0.25rem 0; /* Further reduced from 0.5rem */
}

/* Keep grid layout on tablets but adjust spacing */
@media (max-width: 991px) {
    .team-comparison {
        gap: 1rem;
        grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
    }
}

/* Adjust for narrow screens - tighter spacing but maintain layout */
@media (max-width: 768px) {
    .team-comparison {
        gap: 0.75rem;
        grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
        padding: 0.5rem 0;
    }
}

/* Very narrow screens - minimum spacing */
@media (max-width: 576px) {
    .team-comparison {
        gap: 0.5rem;
        grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    }
}

.team {
    text-align: center;
    max-width: 200px;
    justify-self: center;
    line-height: 1.2; /* Tighter line height for team info */
}

.team.team-1 {
    justify-self: end;
}

.team.team-2 {
    justify-self: start;
}

.team-name {
    font-size: 1.2rem; /* Reduced back for more compact view */
    font-weight: 700;
    color: var(--phl-orange, #ef7b00);
    margin-bottom: 0.1rem; /* Minimal bottom margin */
    line-height: 1.1; /* Tighter line height */
    word-wrap: break-word;
    hyphens: auto;
}

/* Ensure both full and abbreviated team names are orange */
.team-name-full,
.team-name-abv {
    color: var(--phl-orange, #ef7b00) !important;
}

/* Hide full team name on narrow screens */
.team-name-full {
    display: block;
}

.team-name-abv {
    display: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--phl-orange, #ef7b00);
}

/* Show abbreviated team name on narrow screens */
@media (max-width: 991px) {
    .team-name-full {
        display: none;
    }
    
    .team-name-abv {
        display: block;
    }
    
    .team-owner-nickname {
        font-size: 0.75rem;
    }
}

.team-owner-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* No gap for tighter spacing */
}

.team-owner-nickname {
    font-size: 0.85rem; /* Reduced from 0.9rem */
    font-weight: 500;
    color: var(--phl-muted);
    margin: 0;
    line-height: 1.2; /* Tighter line height */
}

.team-owner-nickname a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.team-owner-nickname a:hover {
    color: var(--phl-orange, #ef7b00);
}

.team-abbreviation {
    font-size: 0.8rem;
    color: var(--phl-muted);
    font-weight: 400;
}

/* Matchup Center - No background, inline with teams, top aligned */
.matchup-center {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0.25rem; /* Reduced from 0.5rem */
    align-self: start; /* Ensure it aligns to top in grid */
}

/* Ensure matchup center stays centered in grid */
@media (max-width: 991px) {
    .matchup-center {
        gap: 0.2rem;
    }
}

@media (max-width: 768px) {
    .matchup-center {
        gap: 0.15rem;
        min-width: 140px;
    }
}

@media (max-width: 576px) {
    .matchup-center {
        min-width: 120px;
        gap: 0.15rem;
    }
}

/* Main Scores - Centered */
.scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.scores .score {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem; /* Reduced for more compact view */
    font-weight: 700;
    background: var(--phl-orange, #ef7b00);
    color: white;
    padding: 0.4rem 0.7rem; /* Reduced padding */
    border-radius: 6px;
    min-width: 3.8rem; /* Reduced min-width */
    text-align: center;
    position: relative;
    z-index: 3 !important; /* Low z-index so matchup scores appear below slot badges (10000) and position badges (9999) */
}

/* Reduce score size on smaller screens */
@media (max-width: 991px) {
    .scores .score {
        font-size: 1.5rem;
        min-width: 3.5rem;
        padding: 0.4rem 0.6rem;
    }
    
}

@media (max-width: 768px) {
    .scores .score {
        font-size: 1.4rem;
        min-width: 3.25rem;
        padding: 0.375rem 0.55rem;
    }
    
    
    .vs {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .scores .score {
        font-size: 1.2rem;
        min-width: 2.75rem;
        padding: 0.3rem 0.45rem;
    }
    
    
    .vs {
        font-size: 0.9rem;
    }
}

/* Winner checkmark positioned on top corner of score box */
.scores .score {
    position: relative; /* Enable absolute positioning for checkmark */
}

.winner-checkmark {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    color: var(--phl-win);
    font-size: 1.3rem; /* Increased from 1rem */
    font-weight: bold;
    background: white;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Responsive scaling for winner checkmark */
@media (max-width: 991px) {
    .winner-checkmark {
        font-size: 1.1rem; /* Increased from 0.9rem */
        top: -0.35rem;
        right: -0.35rem;
    }
}

@media (max-width: 768px) {
    .winner-checkmark {
        font-size: 0.9rem; /* Increased from 0.8rem */
        top: -0.25rem;
        right: -0.25rem;
    }
}

@media (max-width: 576px) {
    .winner-checkmark {
        font-size: 0.8rem; /* Increased from 0.75rem */
        top: -0.2rem;
        right: -0.2rem;
    }
}

/* VS Separator */
.vs {
    font-size: 1.3rem;
    color: var(--phl-muted);
    font-weight: 600;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Projected Scores - Centered */
.live-scores, .initial-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .live-scores, .initial-scores {
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .live-scores, .initial-scores {
        gap: 0.375rem;
    }
}

.proj-score {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--phl-blue, #4682b4);
    min-width: 3rem;
    text-align: center;
}

@media (max-width: 768px) {
    .proj-score {
        font-size: 1rem;
        min-width: 2.5rem;
    }
}

@media (max-width: 576px) {
    .proj-score {
        font-size: 0.9rem;
        min-width: 2.25rem;
    }
}

.proj-label {
    font-size: 0.7rem;
    color: var(--phl-blue, #4682b4);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    background: rgba(70, 130, 180, 0.1);
    border-radius: 3px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .proj-label {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .proj-label {
        font-size: 0.6rem;
        padding: 0.15rem 0.3rem;
    }
}

.initial-scores .proj-score,
.initial-scores .proj-label {
    color: var(--phl-muted);
}

.initial-scores .proj-label {
    background: rgba(108, 117, 125, 0.1);
}

/* Optimal Scores Styling - Purple for past weeks */
.optimal-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.optimal-scores .proj-score,
.optimal-scores .proj-label {
    color: var(--phl-steel-deep); /* Purple color matching position change styling */
}

.optimal-scores .proj-label {
    background: rgba(139, 79, 149, 0.1); /* Light purple background */
}

@media (max-width: 768px) {
    .optimal-scores {
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .optimal-scores {
        gap: 0.375rem;
    }
}

/* Home Field Advantage (HFA) Styling - Simple Layout */
.hfa-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.hfa-score {
    color: var(--phl-orange, #ef7b00);
    font-size: 1.1rem; /* Match proj-score base size */
    font-weight: 600;
    min-width: 3rem; /* Match proj-score width */
    text-align: center;
}

.hfa-label {
    background: var(--phl-orange, #ef7b00);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    border: 1px solid #c15a00;
}

/* Responsive adjustments for HFA - Match proj-score sizing */
@media (max-width: 768px) {
    .hfa-scores {
        gap: 0.5rem;
    }
    
    .hfa-score {
        font-size: 1rem; /* Match proj-score at this breakpoint */
        min-width: 2.5rem; /* Match proj-score width */
    }
    
    .hfa-label {
        font-size: 0.65rem; /* Match proj-label at this breakpoint */
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .hfa-scores {
        gap: 0.375rem;
    }
    
    .hfa-score {
        font-size: 0.9rem; /* Match proj-score at this breakpoint */
        min-width: 2.25rem; /* Match proj-score width */
    }
    
    .hfa-label {
        font-size: 0.6rem; /* Match proj-label at this breakpoint */
        padding: 0.15rem 0.3rem;
    }
}

/* Win Probability Bars - Live and Initial */
.win-probability {
    margin-top: 0.5rem; /* Reduced from 1rem */
    width: 100%;
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0.15rem; /* Reduced from 0.25rem */
}

/* Live Win Percentage Bar - Blue */
.live-win-pct-bar {
    display: flex;
    height: 2rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--phl-line);
    background: var(--phl-surface);
}

.live-team-1-pct, .live-team-2-pct {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    transition: all 0.5s ease;
    min-width: 4rem;
}

.live-team-1-pct.leader, .live-team-2-pct.leader {
    background: var(--phl-blue, #4682b4);
}

.live-team-1-pct.trailing, .live-team-2-pct.trailing {
    background: var(--phl-steel-bright); /* Lighter shade of PHL blue for trailing team */
}

.live-team-2-pct {
    flex-grow: 1;
}

/* Initial Win Percentage Bar - Gray */
.initial-win-pct-bar {
    display: flex;
    height: 2rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--phl-line);
    background: var(--phl-surface);
}

.initial-team-1-pct, .initial-team-2-pct {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    transition: all 0.5s ease;
    min-width: 4rem;
}

.initial-team-1-pct.leader, .initial-team-2-pct.leader {
    background: var(--phl-muted); /* Dark gray for leader */
}

.initial-team-1-pct.trailing, .initial-team-2-pct.trailing {
    background: var(--phl-faint); /* Light gray for trailing team */
}

.initial-team-2-pct {
    flex-grow: 1;
}

.pct-label {
    font-size: 0.85rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .pct-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .pct-label {
        font-size: 0.7rem;
    }
}

.win-pct-section {
    margin-bottom: 0.1rem; /* Reduced from 0.25rem */
}

.win-pct-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--phl-muted);
    margin-bottom: 0.1rem; /* Reduced from 0.25rem */
    text-align: left;
}

/* Lineup View Selector - AGGRESSIVE single line forcing */
.lineup-view-selector {
    text-align: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-top: 1px solid var(--phl-line);
    font-size: 0.8rem !important; /* Smaller font to ensure fit */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important; /* Reduced gap */
    min-height: 2rem !important; /* Shorter height */
    flex-wrap: nowrap !important; /* FORCE no wrapping */
    white-space: nowrap !important; /* FORCE no text wrapping */
    overflow: hidden !important; /* Hide overflow instead of wrapping */
}

.form-check-inline {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important; /* Force inline-flex for tighter packing */
    align-items: center !important;
    flex-shrink: 0 !important; /* Prevent radio buttons from shrinking */
    white-space: nowrap !important;
    min-width: auto !important;
}

.lineup-view-selector .form-check-label {
    font-size: 0.8rem !important; /* Smaller font */
    line-height: 1.1 !important;
    padding-left: 0.4rem !important;
    margin-bottom: 0 !important;
    display: inline-flex !important; /* Force inline */
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* AGGRESSIVE label forcing for single line */
.lineup-view-selector label.fw-bold {
    font-size: 0.8rem !important; /* Smaller font */
    margin-bottom: 0 !important;
    margin-right: 0.75rem !important; /* Reduced spacing */
    line-height: 1.1 !important;
    display: inline-flex !important; /* Force inline */
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* Prevent label from shrinking */
    min-width: auto !important;
}

.lineup-view-selector .form-check-input {
    margin-top: 0;
    margin-right: 0.5rem;
}

/* Override Bootstrap mt-3 spacing for lineup view selector */
.lineup-view-selector.mt-3 {
    margin-top: 0.05rem !important; /* Further reduced from 0.1rem */
}

/* Minimize space between lineup view selector and player table */
.lineup-view-selector + .box-score-table,
.box-score-table {
    margin-top: 0.1rem !important; /* Further reduced from 0.25rem */
}

/* Remove any bottom margin from lineup view selector */
.lineup-view-selector {
    margin-bottom: 0 !important;
    padding-bottom: 0.05rem; /* Minimal padding */
}

/* ULTRA-aggressive spacing after lineup view section */
.lineup-view-selector + * {
    margin-top: 0.05rem !important; /* Even more reduced */
}

/* FORCE single line layout with ultra-aggressive CSS */
.lineup-view-selector {
    position: relative !important;
    z-index: 1 !important;
}

/* Prevent ANY possibility of wrapping */
.lineup-view-selector * {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Force horizontal layout even with insufficient space */
@media (min-width: 576px) {
    .lineup-view-selector {
        min-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE */
    }
    
    .lineup-view-selector::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
}

/* Remove any default spacing from the lineupViewForm div */
#lineupViewForm {
    margin: 0;
    padding: 0;
}

/* Compact the entire lineup view selector section */
.lineup-view-selector {
    padding-top: 0.02rem; /* Further reduced from 0.05rem */
    padding-bottom: 0.02rem; /* Further reduced from 0.05rem */
    line-height: 1.0; /* Even tighter line height */
}

.form-check-input:checked {
    background-color: var(--phl-orange, #ef7b00);
    border-color: var(--phl-orange, #ef7b00);
}

/* Box Score Table */
.box-score-table {
    background: white;
    border: 2px solid var(--phl-gray-light, var(--phl-line));
    border-radius: 8px;
    overflow-x: auto; /* Only clip horizontal overflow, allow vertical overflow for badges */
    overflow-y: visible; /* Allow badges to overflow vertically */
    max-width: 1400px; /* Prevent over-stretching on very wide screens */
    margin: 0 auto; /* Center the table */
}

/* Player Rows - Always side by side, never wrap */
.player-row {
    display: grid;
    grid-template-columns: 2fr 90px auto 90px 2fr; /* Restore slot column - Player1, Score1, Slot, Score2, Player2 */
    align-items: start; /* Align to top instead of center */
    padding: 0.2rem 1rem !important; /* Much tighter vertical padding */
    border-bottom: 1px solid var(--phl-line);
    transition: background-color 0.3s ease;
    min-height: 2.5rem !important; /* Much smaller minimum height */
    min-width: 0; /* Allow grid items to shrink */
    overflow: visible; /* Ensure position badges are never clipped */
}

/* Adjust grid layout for narrow screens to give more space to player info.
   Slot column drops out here too (matches the .position-slot / .position-divider
   breakpoint below) so the freed-up width goes to names and scores instead of
   sitting empty under the floating position-label pill. */
@media (max-width: 768px) {
    .player-row {
        grid-template-columns: 1fr 80px 80px 1fr; /* Player1, Score1, Score2, Player2 - no slot column */
        grid-column-gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        min-height: 3.5rem;
        position: relative;
    }
}

@media (max-width: 576px) {
    .player-row {
        grid-template-columns: 1fr 70px 70px 1fr; /* Player1, Score1, Score2, Player2 - no slot column */
        grid-column-gap: 0.5rem; /* Small gap between columns */
        padding: 0.5rem 0.5rem;
        min-height: 3rem;
        position: relative;
    }
}

.player-row {
    position: relative; /* Create positioning context for position slots like bench-divider does */
}

.player-row:hover {
    background-color: var(--phl-surface);
    z-index: 1; /* Low z-index so hover effect appears below position slots and score boxes */
}

.player-row:last-child {
    border-bottom: none;
}

.player-row.recent-change {
    background-color: var(--phl-gold-soft);
    border-left: 4px solid var(--phl-gold);
}

/* Additional responsive adjustments for readability */
@media (max-width: 768px) {
    .player-name {
        font-size: 0.8rem;
    }
    
    .player-details {
        font-size: 0.7rem;
    }
    
    .player-info {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .player-name {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .player-details {
        font-size: 0.65rem;
        line-height: 1.2;
    }
    
    .player-info {
        font-size: 0.7rem;
    }
    
    /* Make score text smaller too */
    .player-score {
        font-size: 0.8rem;
    }
    
    .actual-points,
    .projections {
        font-size: 0.75rem;
    }
    
    /* Make player stat descriptions (team/position) much smaller */
    .player-details small {
        font-size: 0.6rem !important;
        line-height: 1.1;
    }
    
    /* Make position badges smaller too */
    .position-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }
    
    /* Make player status badges match position badge size on mobile */
    .player-status {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }
    
    /* Simplify stats display on smallest screens - hide detailed stats, keep only game status.
       Overridden by #mobileStatsToggle below when the user opts in via "Show Stats". */
    .player-details small:not(.fw-bold) {
        display: none !important; /* Hide player stats (non-bold elements) */
    }

    .box-score-table:has(#mobileStatsToggle:checked) .player-details small:not(.fw-bold) {
        display: block !important;
        white-space: normal;
    }
    
    .proj-badge {
        padding: 0.08rem 0.12rem; /* Even smaller padding to fit side by side */
        font-size: 0.5rem; /* Smaller font size */
        flex-shrink: 0; /* Prevent shrinking that could cause wrapping */
        white-space: nowrap; /* Prevent text wrapping inside badges */
    }
    
    /* AGGRESSIVE mobile lineup selector - STILL force single line where possible */
    .lineup-view-selector {
        font-size: 0.7rem !important; /* Even smaller on mobile */
        gap: 0.4rem !important;
        padding: 0.4rem 0.25rem !important;
        flex-wrap: nowrap !important; /* FORCE single line even on mobile initially */
        overflow-x: auto !important; /* Allow horizontal scroll if needed */
        overflow-y: hidden !important;
        min-height: 1.8rem !important;
    }
    
    .lineup-view-selector label.fw-bold {
        font-size: 0.7rem !important;
        margin-right: 0.5rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important; /* Don't let label shrink */
    }
    
    .lineup-view-selector .form-check-label {
        font-size: 0.7rem !important;
        padding-left: 0.3rem !important;
    }
    
    .form-check-inline {
        flex-shrink: 0 !important; /* Don't let radio buttons shrink */
        min-width: auto !important;
    }
}

/* Team Player Info - Allow text to shrink */
.team-1-player, .team-2-player {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0; /* Allow flex items to shrink below their content size */
    overflow: hidden; /* Hide overflow text */
}

.team-1-player {
    text-align: right;
}

.team-2-player {
    text-align: left;
}

.player-name {
    font-weight: 600;
    font-size: 1.05rem; /* Keep base size for wide screens */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* More aggressive font scaling for medium screens (tablets/small laptops) */
@media (min-width: 768px) and (max-width: 1199px) {
    .player-name {
        font-size: 0.9rem; /* More aggressive reduction for medium screens */
    }
    
    .player-details {
        font-size: 0.75rem; /* More aggressive reduction for medium screens */
    }
    
    .position-badge {
        font-size: 0.65rem; /* More aggressive reduction for medium screens */
        padding: 0.15rem 0.4rem;
    }
}

/* On narrow screens - STILL try to keep inline but allow fallback */
@media (max-width: 767px) {
    .team-1-player, .team-2-player {
        gap: 0.1rem !important;
    }
    
    .player-name {
        white-space: nowrap !important; /* STILL try to prevent wrapping */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.1 !important;
        font-size: 0.75rem !important;
        display: block !important;
        max-width: 100% !important;
    }
    
    .player-details {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
    }
    
    /* STILL try to keep position and team inline, but smaller */
    .player-name .position-badge {
        margin-left: 0.2rem !important;
        margin-right: 0.2rem !important;
        display: inline !important;
        font-size: 0.6rem !important;
        padding: 0.1rem 0.25rem !important;
    }
    
    .player-name small {
        display: inline !important;
        margin-left: 0.1rem !important;
        font-size: 0.65rem !important;
    }
    
    /* Only fall back to separate line if absolutely necessary */
    .position-team-info {
        display: inline !important; /* Try inline first */
        margin-top: 0 !important;
        margin-left: 0.2rem !important;
    }
    
    .team-1-player .position-team-info {
        text-align: left !important; /* Change to left for inline flow */
    }
    
    .team-2-player .position-team-info {
        text-align: left !important;
    }
}

.player-name a {
    color: var(--phl-orange, #ef7b00);
    text-decoration: none;
}

.player-name a:hover {
    text-decoration: underline;
}

.player-status {
    background: var(--phl-loss); /* Red background like Bootstrap danger */
    color: white;
    padding: 0.2rem 0.5rem; /* Same padding as position badge */
    border-radius: 3px;
    font-size: 0.75rem; /* Same size as position badge */
    font-weight: 600;
    margin-left: 0.5rem;
}

.player-details {
    font-size: 0.8rem; /* Reduced for more breathing room */
    color: var(--phl-muted);
    line-height: 1.2; /* Slightly more line height for readability */
    margin-top: 0 !important; /* No top margin */
    padding-top: 0 !important;
}

/* Player Scores */
.player-score {
    text-align: center;
    padding: 0.2rem 0.5rem !important; /* Much tighter vertical padding */
    background: var(--phl-surface);
    border-radius: 4px;
    margin: 0 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;
    align-self: center; /* Center the score box itself in the grid row */
}

/* Make actual points and projections more compact */
.actual-points {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.projections {
    line-height: 1 !important;
    margin-top: 0.1rem !important; /* Tiny gap between actual and projections */
    padding: 0 !important;
}

/* Game Status Based Player Score Styling */
.player-score.game-completed {
    background: #d6d8db; /* Darker gray for completed games */
    color: var(--phl-orange, #ef7b00);
}

.player-score.game-completed .points {
    color: var(--phl-orange, #ef7b00) !important;
}

.player-score.game-live {
    background: var(--phl-blue, #4682b4);
    color: white;
}

.player-score.game-live .points {
    color: white !important; /* Live game points should be white */
}

.player-score.game-upcoming {
    background: var(--phl-surface);
    color: var(--phl-orange, #ef7b00);
}

.player-score.game-upcoming .points {
    color: var(--phl-orange, #ef7b00) !important;
}

/* On narrow screens, adjust score layout for 4-column grid */
@media (max-width: 576px) {
    .player-score {
        padding: 0.375rem 0.25rem;
        margin: 0; /* Remove margin since we're using grid gap */
        font-size: 0.9rem;
    }
    
    .player-score .points {
        font-size: 1rem !important;
    }
    
    .proj-points {
        gap: 0.1rem !important; /* Reduced gap to create more space */
        font-size: 0.75rem !important; /* Make Live and Initial projections smaller to fit side by side */
        flex-wrap: nowrap !important; /* Force projections to stay on same line */
        justify-content: center !important; /* Center the badges */
    }
}

/* Fix projection stacking on medium mobile screens (577px-768px) */
@media (max-width: 768px) and (min-width: 577px) {
    .proj-points {
        flex-wrap: nowrap !important; /* Force projections to stay on same line */
        gap: 0.15rem !important; /* Slightly larger gap than smallest screens */
        justify-content: center !important;
    }
    
    .proj-badge {
        padding: 0.1rem 0.2rem; /* Slightly larger than smallest screens but still compact */
        font-size: 0.6rem; /* Slightly larger font than smallest screens */
        flex-shrink: 0; /* Prevent shrinking */
        white-space: nowrap; /* Prevent text wrapping */
    }
}

.player-score .points {
    display: block;
    font-size: 1.15rem; /* Reduced from 1.25rem for more compact display */
    font-weight: 700;
    color: var(--phl-orange, #ef7b00);
}

.player-score .proj-points {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Projected Points Badges */
.proj-badge {
    padding: 0.15rem 0.3rem; /* Increased padding */
    border-radius: 3px;
    font-size: 0.7rem; /* Increased from 0.65rem */
    font-weight: 500;
    color: white;
}

.proj-badge.initial {
    background: var(--phl-muted); /* Gray for initial projections */
}

.proj-badge.live {
    background: #7ba3c7; /* Lighter PHL blue for live projections so it doesn't blend with blue score box */
}

/* Optional stat-line reveal, mobile only (pairs with the display:none rule
   under .player-details small:not(.fw-bold) at the 576px breakpoint).
   Same quiet form-switch treatment as "Keepers Only" on Offseason Home. */
.mobile-stats-toggle {
    display: none;
}

@media (max-width: 576px) {
    .mobile-stats-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0 0.6rem;
    }

    .mobile-stats-toggle .form-check-label {
        font-size: 0.7rem;
        color: var(--phl-muted);
    }
}

/* Position Slot - Fixed width for consistency */
.position-slot {
    text-align: center;
    background: var(--phl-orange, #ef7b00);
    color: white;
    padding: 0.75rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    width: 80px;
    min-width: 80px;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;
    align-self: center; /* Center the slot itself in the grid row */
    position: relative; /* Back to normal grid positioning for desktop */
    z-index: 1000; /* High z-index to win over score boxes */
}


/* Hide the inline grid slot column at the same breakpoint the player-row grid
   drops it (768px) — the .position-divider / .position-label floating pill
   takes over as the position indicator from here down. */
@media (max-width: 768px) {
    .position-slot {
        display: none !important;
    }
}


/* Blank slot styling - completely invisible */
.position-slot.blank-slot {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    visibility: hidden; /* Make completely invisible while maintaining layout space */
    /* Keep the width for layout consistency */
}

/* Position badge for player names */
.position-badge {
    position: relative; /* Required for z-index to work */
    background: var(--phl-gray-dark, var(--phl-muted));
    color: white;
    padding: 0.2rem 0.5rem; /* Increased padding */
    border-radius: 3px;
    font-size: 0.75rem; /* Increased from 0.7rem */
    font-weight: 600;
    margin-left: 0.5rem;
    z-index: 2147483647 !important; /* Match maximum z-index used by position slots to ensure badges appear above score boxes */
}

/* Comprehensive fix for position badge z-index - ensure badges always appear above slot badges and score boxes */
.position-badge,
.player-name .position-badge,
span.position-badge {
    position: relative !important;
    z-index: 2147483647 !important; /* Match maximum z-index used by position slots to ensure badges appear above score boxes */
}

/* Position Section Dividers for narrow screens */
.position-divider {
    border-top: 2px solid var(--phl-line);
    position: relative;
    margin-top: 0;
    padding-top: 0;
}

/* Hide position dividers on wider screens (matches .position-slot breakpoint) */
@media (min-width: 769px) {
    .position-divider {
        display: none;
    }
}

/* Position bubble labels for narrow screens */
.position-label {
    position: absolute;
    top: -0.4rem; /* Reduced from -0.6rem to prevent cutoff at top of screen */
    left: 50%;
    transform: translateX(-50%);
    background: var(--phl-orange, #ef7b00);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 1000; /* High z-index to appear above score boxes */
}

/* Bench Section Styling - Replace normal border with orange */
.bench-divider {
    border-top: 3px solid var(--phl-orange, #ef7b00);
    position: relative;
    margin-top: 0; /* Remove extra margin */
    padding-top: 0; /* Remove extra padding */
}

.bench-label {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--phl-gray-dark, var(--phl-muted)); /* Changed from orange to gray */
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading .player-row {
    background: var(--phl-surface);
}

/* Responsive Adjustments - Mobile (2 columns minimum) */
@media (max-width: 576px) {
    .weekly-matchups-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .matchup-card {
        padding: 0.3rem;
    }
    
    .team-row {
        padding: 0.25rem 0;
    }
    
    .team-row.bottom-team {
        margin-top: 0.125rem;
        padding-top: 0.25rem;
    }
    
    .team-header {
        gap: 0.25rem;
    }
    
    .team-abv {
        font-size: 0.85rem;
    }
    
    .owner-details {
        gap: 0.125rem;
    }
    
    .weekly-matchups-grid .matchup-card .owner-name,
    .weekly-matchups-grid .matchup-card .owner-record {
        font-size: 0.5rem !important;
        font-weight: 400 !important;
        line-height: 1.2;
    }
    
    .score {
        font-size: 0.95rem;
        min-width: 2rem;
        padding: 0.125rem 0.25rem;
    }
    
    .win-pct {
        min-width: 2rem;
        font-size: 0.75rem;
    }
    
    .playoff-seed {
        font-size: 0.6rem;
        min-width: 0.9rem;
        padding: 0.125rem 0.125rem;
    }
    
    .matchup-footer {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
    }
    
    .game-type {
        font-size: 0.55rem;
        line-height: 1.2;
    }
    
    .actions .btn-xs {
        font-size: 0.55rem;
        padding: 0.125rem 0.25rem;
    }
    
    .box-score-header {
        padding: 1rem;
    }
    
    .scores .score {
        font-size: 1.4rem;
        min-width: 3rem;
    }
}

/* Print Styles */
@media print {
    .weekly-matchups-grid {
        display: block;
    }
    
    .matchup-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .box-score-table {
        border: 1px solid #000;
    }
    
    .player-row {
        border-bottom: 1px solid #000;
    }
}

/* Position Change Indicators for Individual Player Score Boxes in Optimal Lineup View */
.player-score.position-change {
    border: 3px solid var(--phl-steel-deep) !important; /* Purple border for lineup position changes */
    border-radius: 6px;
    background-color: rgba(139, 79, 149, 0.08); /* Light purple background for better visibility */
}

/* Ensure consistent border radius for position change score boxes */
.player-score.position-change .actual-points,
.player-score.position-change .projections {
    border-radius: 3px;
}

/* Live Update Visual Feedback */
.live-update-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live-update-indicator i {
    color: var(--phl-orange, #ef7b00);
}

.live-update-indicator.demo-mode {
    background: rgba(139, 69, 19, 0.9); /* Brown background for demo mode */
    border-left: 4px solid #ffa500; /* Orange left border */
}

.live-update-indicator.demo-mode i {
    color: #ffa500; /* Orange flask icon */
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Score Update Animation - PHL Theme */
.score-updated {
    animation: scoreFlash 0.8s ease-out;
    background: var(--phl-blue, #4682b4) !important;
    color: white !important;
    border: 2px solid var(--phl-blue, #4682b4) !important;
    font-weight: 700 !important;
}

.points-updated {
    animation: pointsFlash 0.8s ease-out;
    background: var(--phl-blue, #4682b4) !important; /* Keep blue background */
    color: #ef7b00 !important; /* Orange text for point change */
    border: 2px solid var(--phl-blue, #4682b4) !important; /* Blue border */
    font-weight: 700 !important;
}

/* Weekly matchups score update styling */
.matchup-score-updated {
    animation: matchupScoreFlash 0.8s ease-out;
    background: var(--phl-blue, #4682b4) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

/* Team score update styling */
.team-score-updated {
    animation: teamScoreFlash 0.8s ease-out;
    background: var(--phl-blue, #4682b4) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

/* Keyframes for weekly matchups score updates */
@keyframes matchupScoreFlash {
    0% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1.05);
    }
    50% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1.02);
    }
    100% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1);
    }
}

/* Keyframes for team score updates */
@keyframes teamScoreFlash {
    0% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1.05);
    }
    50% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1.02);
    }
    100% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1);
    }
}

@keyframes scoreFlash {
    0% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1.05);
    }
    50% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1.02);
    }
    100% {
        background: var(--phl-blue, #4682b4) !important;
        color: white !important;
        transform: scale(1);
    }
}

@keyframes pointsFlash {
    0% {
        background: var(--phl-blue, #4682b4) !important; /* Keep blue background */
        color: #ef7b00 !important; /* Orange text for point change */
        transform: scale(1.1);
        font-weight: 800;
    }
    25% {
        background: var(--phl-blue, #4682b4) !important; /* Keep blue background */
        color: #ef7b00 !important; /* Keep orange text */
        transform: scale(1.05);
    }
    50% {
        background: var(--phl-blue, #4682b4) !important; /* Keep blue background */
        color: #ef7b00 !important; /* Keep orange text */
        transform: scale(1.02);
    }
    75% {
        background: var(--phl-blue, #4682b4) !important; /* Keep blue background */
        color: #ef7b00 !important; /* Keep orange text */
        transform: scale(1.01);
    }
    100% {
        background: var(--phl-blue, #4682b4) !important; /* Keep blue background */
        color: white !important; /* End with white text for actual points */
        transform: scale(1);
        font-weight: 700;
    }
}

/* Demo Mode Controls */
#demoModeToggle {
    padding: 0.75rem;
    background: rgba(248, 249, 250, 0.8);
    border-radius: 6px;
    border: 1px dashed var(--phl-line);
}

#demoModeToggle .form-check-label {
    cursor: pointer;
}

#demoModeToggle .fas.fa-flask {
    color: var(--phl-orange, #ef7b00);
}

#demoControls .btn {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
}

#demoControls .btn .fas {
    margin-right: 0.25rem;
}

/* Demo mode animations - more dramatic for testing */
.score-updated.demo-mode {
    animation: demoScoreFlash 1s ease-out;
}

.points-updated.demo-mode {
    animation: demoPointsFlash 1.2s ease-out;
}

@keyframes demoScoreFlash {
    0% {
        background: rgba(255, 165, 0, 0.4);
        transform: scale(1.08);
        border-color: #ffa500;
    }
    25% {
        background: rgba(255, 165, 0, 0.3);
        transform: scale(1.05);
    }
    50% {
        background: rgba(255, 165, 0, 0.2);
        transform: scale(1.02);
    }
    100% {
        background: rgba(255, 165, 0, 0.1);
        transform: scale(1);
        border-color: #ffa500;
    }
}

@keyframes demoPointsFlash {
    0% {
        background: rgba(255, 165, 0, 0.3);
        transform: scale(1.15);
        color: #ff8c00 !important;
        font-weight: 900 !important;
    }
    33% {
        background: rgba(255, 165, 0, 0.2);
        transform: scale(1.08);
        color: #ffa500 !important;
    }
    66% {
        background: rgba(255, 165, 0, 0.1);
        transform: scale(1.03);
        color: #ff8c00 !important;
    }
    100% {
        background: rgba(255, 165, 0, 0.05);
        transform: scale(1);
        color: #ffa500 !important;
        font-weight: 700 !important;
    }
}

/* Mobile adjustments for live update indicator */
@media (max-width: 768px) {
    .live-update-indicator {
        top: 10px;
        right: 10px;
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    #demoModeToggle {
        padding: 0.5rem;
    }
    
    #demoControls .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 576px) {
    .live-update-indicator {
        top: 8px;
        right: 8px;
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
        gap: 0.375rem;
    }
}

/* Enhanced Demo Mode Toggle Styling */
#demoModeToggle {
    transition: all 0.3s ease;
}

#demoModeToggle:hover {
    border-color: #007bff !important;
    background: #e7f3ff !important;
}

/* Active demo mode styling */
#demoModeToggle.demo-active {
    border-color: #ffa500 !important;
    background: linear-gradient(135deg, var(--phl-gold-soft) 0%, var(--phl-gold-soft) 100%) !important;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}

#demoModeToggle.demo-active .form-check-label {
    color: var(--phl-warn);
    animation: pulse 2s ease-in-out infinite;
}

/* Demo controls styling */
#demoControls {
    padding: 0.75rem;
    border: 1px solid #ffa500;
    border-radius: 6px;
    background: rgba(255, 165, 0, 0.1);
    animation: slideInDown 0.3s ease-out;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.8; 
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Win Probability Chart (D3) */
.wp-frame {
    background: var(--phl-card);
    border: 1px solid var(--phl-line);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem 1rem;
}

.wp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wp-eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--phl-muted);
}

.wp-subtitle {
    font-size: 13px;
    color: var(--phl-muted);
    margin-top: 3px;
    max-width: 46ch;
}

.wp-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--phl-muted);
}

.wp-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.wp-legend-swatch {
    width: 14px;
    height: 2px;
    display: inline-block;
}

.wp-legend-swatch--live {
    background: var(--phl-steel);
}

.wp-legend-swatch--initial {
    background-image: repeating-linear-gradient(to right, var(--phl-faint) 0 4px, transparent 4px 7px);
}

.wp-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wp-btn {
    border: 1px solid var(--phl-line);
    background: #fff;
    color: var(--phl-muted);
}

.wp-btn:hover {
    background: var(--phl-line-soft);
    color: var(--phl-ink);
}

.wp-state {
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-body {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.wp-chart {
    flex: 1 1 68%;
    min-width: 0;
    position: relative;
}

.wp-events {
    flex: 0 0 30%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--phl-line-soft);
    padding-left: 1rem;
}

.wp-tabs {
    display: flex;
    border: 1px solid var(--phl-line);
    border-radius: 999px;
    padding: 2px;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.wp-tab {
    border: none;
    background: transparent;
    padding: 0.3rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--phl-muted);
    border-radius: 999px;
}

.wp-tab.active {
    background: var(--phl-ink);
    color: #fff;
}

.wp-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    max-height: 420px;
}

.wp-events-empty {
    font-size: 0.8125rem;
    color: var(--phl-faint);
    padding: 0.5rem 0;
}

.wp-event-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.wp-event-row:hover,
.wp-event-row.active {
    background: var(--phl-line-soft);
}

.wp-event-time {
    color: var(--phl-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wp-event-label {
    color: var(--phl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-event-delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.wp-delta-pos {
    color: var(--phl-win);
}

.wp-delta-neg {
    color: var(--phl-loss);
}

.wp-source {
    font-size: 11px;
    color: var(--phl-faint);
    margin-top: 0.75rem;
}

/* D3-rendered chart elements */
.wp-svg {
    font-family: var(--font-ui);
}

.wp-axis text {
    font-size: 11px;
    fill: var(--phl-muted);
    font-variant-numeric: tabular-nums;
}

.wp-axis path,
.wp-axis line {
    stroke: var(--phl-line);
}

.wp-line {
    fill: none;
    stroke-width: 2;
}

.wp-line--live {
    stroke-width: 2.5;
}

.wp-callout-text {
    font-size: 12px;
    font-weight: 600;
    fill: var(--phl-ink);
}

.wp-callout-delta {
    font-size: 11px;
    font-weight: 700;
    fill: var(--phl-muted);
}

.wp-tooltip {
    position: absolute;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--phl-line);
    border-radius: 6px;
    box-shadow: var(--shadow-card);
    padding: 8px 10px;
    font-size: 12px;
    pointer-events: none;
    min-width: 170px;
}

.wp-tooltip-time {
    font-weight: 600;
    color: var(--phl-text);
    margin-bottom: 4px;
}

.wp-tooltip-row--live {
    color: var(--phl-steel);
}

.wp-tooltip-row--initial {
    color: var(--phl-faint);
}

.wp-tooltip-event {
    font-size: 11px;
    color: var(--phl-muted);
    margin: 4px 0;
}

.wp-tooltip-divider {
    border: none;
    border-top: 1px solid var(--phl-line-soft);
    margin: 6px 0;
}

/* Chart card transitions */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

/* COMPACT BOX SCORE PAGE - MINIMIZE ALL VERTICAL SPACING */

/* Target Bootstrap spacing classes that add excessive margins */
.row.mb-3 {
    margin-bottom: 0.5rem !important; /* Reduced from default Bootstrap mb-3 (1rem) */
}

.row.mb-4 {
    margin-bottom: 0.75rem !important; /* Reduced from default Bootstrap mb-4 (1.5rem) */
}

.row.mb-5 {
    margin-bottom: 1rem !important; /* Reduced from default Bootstrap mb-5 (3rem) */
}

.row.mt-4 {
    margin-top: 0.75rem !important; /* Reduced from default Bootstrap mt-4 (1.5rem) */
}

/* Minimize spacing in the main box score container row */
.container-fluid > .row {
    margin-bottom: 0.5rem !important;
}

/* Target the Weekly Matchups Grid to reduce bottom margin */
.weekly-matchups-grid {
    margin-bottom: 1rem !important; /* Reduced from 2rem */
}

/* Reduce spacing for the box score header wrapper */
.box-score-header.mb-4 {
    margin-bottom: 0.5rem !important; /* Override the mb-4 class */
}

/* Minimize spacing around win probability sections */
.win-probability.mt-3 {
    margin-top: 0.25rem !important; /* Reduced from Bootstrap mt-3 (1rem) */
}

/* Target any div with mt-3 class within box score sections */
.box-score-header .mt-3 {
    margin-top: 0.25rem !important;
}

/* Ensure the win probability chart section doesn't add excessive top margin */
.container.mt-5 {
    margin-top: 1.5rem !important; /* Reduced from Bootstrap mt-5 (3rem) */
}

/* Reduce spacing between score elements */
.scores {
    gap: 0.75rem; /* Reduced from 1rem */
}

/* Compact the HFA scores section */
.hfa-scores {
    margin-top: 0.25rem; /* Reduced from 0.5rem */
    gap: 0.5rem; /* Reduced from 0.75rem */
}

/* Reduce gap between live and initial win percentage bars */
.win-probability > div:not(:last-child) {
    margin-bottom: 0.1rem !important;
}

/* Ensure there's minimal space between the team comparison and win probability sections */
.team-comparison + .win-probability,
.team-comparison + div > .win-probability {
    margin-top: 0.25rem !important;
}

/* Force the lineup view selector and box score table to be closer */
.box-score-table {
    margin-top: 0.1rem !important;
}

/* If there's a parent container around the lineup selector and table, minimize its spacing */
div:has(.lineup-view-selector) + div:has(.box-score-table) {
    margin-top: 0 !important;
}

/* CRITICAL: Target the specific structure causing the gap */
/* The lineup view selector is inside the box-score-header, followed by a closing </div> */
/* Then there's a new div containing the box-score-table */
.box-score-header + * {
    margin-top: 0.1rem !important; /* Minimize space after header */
}

/* Target the div that contains the box-score-table specifically */
div:has(> .box-score-table) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* More specific targeting - if there's a row containing the table */
.row:has(.box-score-table) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ultra-specific targeting for the container structure */
.container-fluid .row .col-12:has(.box-score-table) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Alternative approach - target elements immediately after lineup selector */
.lineup-view-selector ~ * {
    margin-top: 0.1rem !important;
}

/* Target any divs that follow the box-score-header */
.box-score-header ~ div {
    margin-top: 0.1rem !important;
}

/* Ensure no margin on table container rows */
.row:has(.table-responsive) {
    margin-top: 0 !important;
}

/* Target any Bootstrap row that contains the box score table */
.row > .col-12 > .box-score-table {
    margin-top: 0 !important;
}

/* Target any containers that might be adding space between sections */
.container-fluid > .row > .col-12 > * {
    margin-bottom: 0.5rem !important;
}

.container-fluid > .row > .col-12 > *:last-child {
    margin-bottom: 0 !important;
}

/* Chart responsive behavior */
@media (max-width: 768px) {
    .wp-body {
        flex-direction: column;
    }

    .wp-events {
        border-left: none;
        border-top: 1px solid var(--phl-line-soft);
        padding-left: 0;
        padding-top: 0.75rem;
        max-width: none;
    }

    .wp-state {
        height: 300px;
    }

    .wp-legend {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    /* Mobile specific spacing reductions */
    .row.mb-3 {
        margin-bottom: 0.25rem !important;
    }
    
    .row.mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    .row.mb-5 {
        margin-bottom: 0.75rem !important;
    }
    
    .container.mt-5 {
        margin-top: 1rem !important;
    }
}

@media (max-width: 576px) {
    .card-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .wp-legend {
        order: 2;
    }

    .wp-controls {
        order: 1;
        align-self: flex-end;
    }
    
    /* Only allow wrapping on very small screens as absolute last resort */
    .lineup-view-selector {
        font-size: 0.65rem !important; /* Even smaller font */
        gap: 0.3rem !important;
        padding: 0.3rem 0.2rem !important;
        flex-direction: row !important; /* STILL try row first */
        flex-wrap: nowrap !important; /* FORCE no wrap initially */
        justify-content: flex-start !important;
        overflow-x: auto !important; /* Horizontal scroll if needed */
        min-height: 1.5rem !important;
    }
    
    .lineup-view-selector label.fw-bold {
        font-size: 0.65rem !important;
        margin-right: 0.4rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .lineup-view-selector .form-check-label {
        font-size: 0.65rem !important;
        padding-left: 0.25rem !important;
    }
    
    .form-check-inline {
        flex-shrink: 0 !important;
        min-width: auto !important;
    }
    
    /* Fallback: Only if the above doesn't work, allow column layout */
    .lineup-view-selector.force-column {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.3rem !important;
    }
}

/* NUCLEAR OPTION - Override everything for lineup view */
.lineup-view-selector,
.lineup-view-selector > *,
.lineup-view-selector .form-check,
.lineup-view-selector .form-check-inline,
.lineup-view-selector label {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Ultra-aggressive single line enforcement */
@media (min-width: 577px) {
    .lineup-view-selector {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .lineup-view-selector > * {
        flex-shrink: 0 !important;
        min-width: auto !important;
    }
}

/* Force shrink fonts aggressively if needed on medium screens */
@media (min-width: 577px) and (max-width: 991px) {
    .lineup-view-selector {
        font-size: 0.75rem !important;
    }
    
    .lineup-view-selector label.fw-bold {
        font-size: 0.75rem !important;
    }
    
    .lineup-view-selector .form-check-label {
        font-size: 0.75rem !important;
    }
}

/* NUCLEAR OPTION - Override everything for player names on medium+ screens */
@media (min-width: 768px) {
    .player-name,
    .player-name > *,
    .player-name .position-badge,
    .player-name small,
    .player-name .position-team-info,
    .position-team-info,
    .position-team-info > * {
        display: inline !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        vertical-align: baseline !important;
        line-height: 1.2 !important;
    }
    
    /* Force containers to not wrap */
    .team-1-player,
    .team-2-player {
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    /* Force player details to be inline */
    .player-details,
    .player-details > * {
        display: inline !important;
        margin-left: 0.3rem !important;
    }
}
/* ============================================================
   SPEC LARGE MATCHUP CARD (.mc-hero) — PHL-Design-System.html §06
   Replaces the old .team-comparison hero. Appended last so these
   rules win over the legacy hero styles above.
   ============================================================ */

/* Old hero chrome off: the card itself is now the container */
.box-score-header {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.mc-hero {
    max-width: 760px;
    margin: 0 auto;
    background: var(--phl-card);
    border: 1px solid var(--phl-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(23, 34, 46, 0.12), 0 1px 3px rgba(23, 34, 46, 0.08);
}

/* Ink header bar: round/week title + status pill */
.mc-hero .mc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--phl-ink);
    padding: 8px 18px;
}

.mc-hero .mc-head .title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.mc-hero .mc-head .pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    color: #fff;
    flex-shrink: 0;
}

.mc-hero .mc-head .pill.final { background: var(--phl-orange); }
.mc-hero .mc-head .pill.live { background: var(--phl-win); }
.mc-hero .mc-head .pill.proj { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); }

/* Body: side / VS / side */
.mc-hero .mc-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 12px;
    padding: 18px 18px 8px;
}

.mc-hero .mc-side {
    text-align: center;
    min-width: 0;
}

.mc-hero .mc-side .team-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

/* Team identity: crest sits beside the name/owner/score cluster. Team 1
   reads image-then-text (left edge in); Team 2 mirrors (text-then-image,
   right edge in) so both crests face outward toward the card's edges —
   same mirrored convention as .p-id.mirror in the player rows. */
.mc-hero .mc-side-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mc-hero .mc-side-inner.mirror {
    flex-direction: row-reverse;
}

.mc-hero .mc-side-text {
    min-width: 0;
    text-align: left;
}

.mc-hero .mc-side-inner.mirror .mc-side-text {
    text-align: right;
}

.mc-hero .mc-side-text .team-line {
    justify-content: flex-start;
}

.mc-hero .mc-side-inner.mirror .team-line {
    justify-content: flex-end;
}

/* Team identity placeholder — swap for real logo images per team later */
.mc-hero .team-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--phl-surface);
    border: 1px solid var(--phl-line);
    font-size: 30px;
    line-height: 1;
}

.mc-hero .mc-side.l .team-mark {
    opacity: 0.55;
}

.mc-hero .team-name-full,
.mc-hero .team-name-abv {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.15;
    color: var(--phl-ink) !important;
}

.mc-hero .owner-line {
    font-size: 12px;
    margin-top: 1px;
}

.mc-hero .owner-line a { color: var(--phl-muted); }
.mc-hero .owner-line a:hover { color: var(--phl-orange); }

.mc-hero .mc-side .score {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--phl-ink);
    margin: 8px 0 6px;
}

/* Loser side fades; winner stays ink (spec) */
.mc-hero .mc-side.l .score,
.mc-hero .mc-side.l .team-name-full,
.mc-hero .mc-side.l .team-name-abv { color: var(--phl-faint) !important; }
.mc-hero .mc-side.l .owner-line a { color: var(--phl-faint); }

.mc-hero .mc-vs {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--phl-faint);
    padding-top: 34px;
}

.mc-hero .team-quick-nav {
    margin-top: 4px;
}

/* Secondary score rows (HFA / LIVE / OPTIMAL / INITIAL) */
.mc-hero .mc-subscores {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 18px 14px;
}

.mc-hero .mc-subscores:empty { padding: 0 0 6px; }

/* Gold champion footer */
.mc-hero .mc-champ {
    background: var(--phl-gold-soft, #FBF3DC);
    color: var(--phl-gold, #C9971C);
    border-top: 1px solid var(--phl-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 12px;
}

/* Win-probability bars: spec slim pills, orange favored / steel other */
.win-probability {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.live-win-pct-bar,
.initial-win-pct-bar {
    height: 20px;
    border-radius: 999px;
    border: none;
}

.live-team-1-pct.leader, .live-team-2-pct.leader { background: var(--phl-orange); }
.live-team-1-pct.trailing, .live-team-2-pct.trailing { background: var(--phl-steel, #4682B4); }

.initial-win-pct-bar { height: 14px; }

.pct-label {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

.initial-win-pct-bar .pct-label { font-size: 9.5px; }

/* Lineup selector aligns with the card width */
.lineup-view-selector {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .mc-hero .mc-side .score { font-size: 34px; }
    .mc-hero .mc-body { padding: 14px 10px 6px; gap: 8px; }
    .mc-hero .mc-vs { padding-top: 28px; }
    .mc-hero .mc-head .title { font-size: 16px; }
    .mc-hero .team-mark { width: 44px; height: 44px; font-size: 24px; margin-bottom: 6px; }
}

@media (max-width: 576px) {
    .mc-hero .mc-side .score { font-size: 28px; }
    .mc-hero .team-name-full, .mc-hero .team-name-abv { font-size: 16px; }
    .mc-hero .team-mark { width: 36px; height: 36px; font-size: 20px; margin-bottom: 4px; }
}

/* ============================================================
   Player identity block inside lineup rows (player-row proposal)
   T1 mirrors (avatar beside its score column), T2 normal.
   ============================================================ */
.team-1-player .p-id.mirror,
.team-2-player .p-id { justify-content: flex-start; }

.team-1-player .player-details,
.team-2-player .player-details { margin-top: 1px; }

/* Narrow screens: identity stays tight, avatar shrinks instead of disappearing */
@media (max-width: 576px) {
    .player-row .p-id .avatar { width: 22px; height: 22px; font-size: 8px; }
}

/* ============================================================
   LINEUP MIDDLE CLEANUP (design-system pass)
   Scores: Rajdhani numerals, game status carried by color
   (final = ink, live = steel, upcoming = faint), no boxes.
   Slots: quiet position-hue chips instead of orange blocks.
   Appended last — wins over the legacy rules above.
   ============================================================ */

.player-score,
.player-score.game-completed,
.player-score.game-live,
.player-score.game-upcoming {
    background: transparent;
    border-radius: 0;
    margin: 0;
}

.player-score .points {
    font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.player-score.game-completed .points { color: var(--phl-ink) !important; }
.player-score.game-live .points { color: var(--phl-steel, #4682B4) !important; }
.player-score.game-upcoming .points { color: var(--phl-faint) !important; }

/* Projection figures: quiet tabular text, no chips */
.proj-badge {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.proj-badge.initial { color: var(--phl-faint); }
.proj-badge.live { color: var(--phl-steel, #4682B4); }

/* Optimal-view position change: steel ring instead of the thick border box */
.player-score.position-change {
    border: none !important;
    box-shadow: inset 0 0 0 2px var(--phl-steel-deep);
    border-radius: 6px;
    background: rgba(46, 91, 138, 0.05) !important;
}

/* Slot column: small chip on the position hue; combo slots get the outline style */
.position-slot {
    background: transparent;
    color: inherit;
    width: 64px;
    min-width: 64px;
    padding: 0;
    z-index: 1;
}
.position-slot .slot-name {
    display: inline-block;
    min-width: 44px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pos-flex, #8A94A0);
}
.position-slot.slot-qb .slot-name { background: var(--pos-qb); }
.position-slot.slot-rb .slot-name { background: var(--pos-rb); }
.position-slot.slot-wr .slot-name { background: var(--pos-wr); }
.position-slot.slot-te .slot-name { background: var(--pos-te); }
.position-slot.slot-k .slot-name { background: var(--pos-k); }
.position-slot.slot-dst .slot-name { background: var(--pos-dst); }
.position-slot.slot-wrte .slot-name,
.position-slot.slot-flex .slot-name,
.position-slot.slot-rbwrte .slot-name {
    background: #fff;
    color: var(--phl-muted);
    border: 1px solid var(--phl-faint);
}

@media (max-width: 768px) {
    .position-slot { width: 52px; min-width: 52px; }
    .position-slot .slot-name { min-width: 40px; padding: 2px 5px; font-size: 9.5px; }
}

/* Mobile position bubbles + bench divider: ink, not orange */
.position-label {
    background: var(--phl-ink-2);
    letter-spacing: 0.06em;
}
.bench-divider { border-top: 2px solid var(--phl-ink); }
.bench-label { background: var(--phl-ink-2); }

/* Hero fixes: dropdown must escape the card, week-nav centers under each side */
.mc-hero { overflow: visible; }
.mc-hero .mc-head { border-radius: 9px 9px 0 0; }
.mc-hero .mc-champ { border-radius: 0 0 9px 9px; }
.mc-hero .team-quick-nav { justify-content: center; }

/* Empty slot cells paint nothing (some non-bench rows have no slot name) */
.position-slot .slot-name:empty { display: none; }

/* Status letter is a red letter, not a red chip (legacy rule painted bg = text color) */
.player-row .pstatus.player-status {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--phl-loss) !important;
    font-weight: 700;
}

/* Hero sub-score labels (LIVE / OPTIMAL / INITIAL / HFA): quiet uppercase, no chip */
.mc-hero .proj-label,
.mc-hero .hfa-label {
    background: transparent !important;
    border: none !important;
    padding: 0;
    color: var(--phl-faint);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: none;
}
.mc-hero .live-scores .proj-label { color: var(--phl-steel, #4682B4); }

/* Lineup view label on the L4 kicker register */
.lineup-view-selector label.fw-bold {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px !important;
    color: var(--phl-muted);
}

/* ============================================================
   GAME-STATE CELL TINTS + BENCH ROWS
   Not started = gray tint · live = steel tint (pulses gently) ·
   final = plain white with ink numeral. Bench rows sit on the
   surface gray below the divider.
   ============================================================ */

.player-score { border-radius: 6px; }

/* Not started: light gray cell, so "nothing yet" reads at a glance */
.player-score.game-upcoming {
    background: var(--phl-line-soft);
}

/* Live: steel-tinted cell with a soft breathing glow */
.player-score.game-live {
    background: var(--phl-row-divwinner, #DCE8F6);
    box-shadow: inset 0 0 0 1px var(--phl-steel-bright, #5A9FD4);
    animation: live-cell-pulse 2.4s ease-in-out infinite;
}
.player-score.game-live .proj-badge.initial { color: var(--phl-muted); }

@keyframes live-cell-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px var(--phl-steel-bright, #5A9FD4); }
    50% { box-shadow: inset 0 0 0 1px rgba(90, 159, 212, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
    .player-score.game-live { animation: none; }
}

/* Completed keeps the plain white cell — the absence of tint means final */
.player-score.game-completed { background: transparent; }

/* Optimal-view position-change ring stacks on top of any state tint */
.player-score.position-change.game-live {
    box-shadow: inset 0 0 0 2px var(--phl-steel-deep);
    animation: none;
}

/* Bench rows: below-the-line surface gray */
.player-row.bench-row { background: var(--phl-surface); }
.player-row.bench-row:hover { background: var(--phl-line-soft); }
.player-row.bench-row .position-slot { visibility: hidden; }

/* ============================================================
   LINEUP VIEW SEGMENTED CONTROL + WEEK-NAV DROPDOWN + PROJ STATS
   ============================================================ */

/* Segmented control: hidden radios, steel-outline segments, orange active */
#lineupViewForm { display: flex; align-items: center; justify-content: center; gap: 10px; }
#lineupViewForm .lv-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--phl-muted);
}
.seg-control {
    display: inline-flex;
    border: 1px solid var(--phl-steel);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.seg-control input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.seg-control label {
    padding: 4px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--phl-steel-deep);
    background: #fff;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    border-left: 1px solid var(--phl-line);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.seg-control label:first-of-type { border-left: none; }
.seg-control label:hover { background: var(--phl-surface); }
.seg-control input:checked + label { background: var(--phl-orange); color: #fff; }
.seg-control input:focus-visible + label { outline: 2px solid var(--phl-orange); outline-offset: -2px; }

/* Re-center the lineup view row: legacy rules above (from the pre-spec radio
   control) leave .lineup-view-selector as inline-flex/flex-start, which pulls
   the segmented control to the left instead of centering it. This wins last. */
.lineup-view-selector {
    display: flex !important;
    justify-content: center !important;
}

/* Week-nav dropdown: spec card look, tight tabular items */
.week-nav-dropdown {
    border: 1px solid var(--phl-line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(23, 34, 46, 0.12);
    padding: 4px 0;
    min-width: 170px;
}
.week-nav-dropdown .dropdown-item {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--phl-text);
    padding: 5px 14px;
    font-variant-numeric: tabular-nums;
}
.week-nav-dropdown .dropdown-item:hover {
    background: var(--phl-surface);
    color: var(--phl-orange-deep);
}

/* Projected stat lines (game not started): italic, slightly fainter */
.player-details .proj-stats {
    font-style: italic;
    color: var(--phl-faint) !important;
}

/* Phone-width lineup rows: badge comes off (slot bubbles carry position),
   names get the space back and may wrap to two lines instead of truncating */
@media (max-width: 576px) {
    .player-row .p-id .pos-badge { display: none; }
    .player-row .p-id { gap: 6px; }
    .player-row .p-id .pname {
        font-size: 12px;
        white-space: normal;
        line-height: 1.15;
    }
}