/* Achievement / Trophy Case Styling */
.detailed-awards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
    padding-top: 12px;
}

.award-winner-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.03);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: visible;
}

.award-winner-card:hover {
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-dark) !important;
}

.award-winner-card:hover .award-winner-name {
    color: var(--text-dark) !important;
}

/* Container for Awards - used to animate Show More */
.expandable-awards-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.expandable-awards-container.expanded {
    grid-template-rows: 1fr;
}

.expandable-awards-content {
    overflow: hidden;
    min-height: 0;
    display: flex; 
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0px; 
}

/* Spacing between the visible 5 and the animated overflow */
.expandable-awards-container.expanded .expandable-awards-content {
    padding-top: 12px;
}

.award-winner-card.hidden-award {
    display: none;
}

.AchievementIconWrapper {
    width: 64px;
    height: 64px;
    position: relative;
    flex-shrink: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.AchievementIconWrapper.fancy {
    width: 64px;
    height: 64px;
    margin-right: 12px;
}

.fancy-achievements-active .AchievementIconWrapper.fancy {
    width: 80px;
    height: 80px;
    margin-right: 20px;
}

.AchievementIconWrapper.bare {
    margin-right: 10px;
}

.AchievementIconGlowContainerRoot,
.AchievementIconGlowContainer,
.AchievementIconGlow {
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    pointer-events: none;
    border-radius: 50%; /* Force circular bounds for all glow layers to prevent square corners */
}

.AchievementIconGlowContainerRoot {
    -webkit-mask-image: 
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, white 5deg, transparent 10deg,
            transparent 15deg, white 20deg, transparent 25deg,
            transparent 30deg, white 35deg, transparent 40deg,
            transparent 45deg, white 50deg, transparent 55deg,
            transparent 60deg, white 65deg, transparent 70deg,
            transparent 75deg, white 80deg, transparent 85deg,
            transparent 90deg, white 95deg, transparent 100deg,
            transparent 105deg, white 110deg, transparent 115deg,
            transparent 120deg, white 125deg, transparent 130deg,
            transparent 135deg, white 140deg, transparent 145deg,
            transparent 150deg, white 155deg, transparent 160deg,
            transparent 165deg, white 170deg, transparent 175deg,
            transparent 180deg, white 185deg, transparent 190deg,
            transparent 195deg, white 200deg, transparent 205deg,
            transparent 210deg, white 215deg, transparent 220deg,
            transparent 225deg, white 230deg, transparent 235deg,
            transparent 240deg, white 245deg, transparent 250deg,
            transparent 255deg, white 260deg, transparent 265deg,
            transparent 270deg, white 275deg, transparent 280deg,
            transparent 285deg, white 290deg, transparent 295deg,
            transparent 300deg, white 305deg, transparent 310deg,
            transparent 315deg, white 320deg, transparent 325deg,
            transparent 330deg, white 335deg, transparent 340deg,
            transparent 345deg, white 350deg, transparent 355deg,
            transparent 360deg
        ),
        radial-gradient(circle at center, white 35%, transparent 70%);
    mask-image: 
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, white 5deg, transparent 10deg,
            transparent 15deg, white 20deg, transparent 25deg,
            transparent 30deg, white 35deg, transparent 40deg,
            transparent 45deg, white 50deg, transparent 55deg,
            transparent 60deg, white 65deg, transparent 70deg,
            transparent 75deg, white 80deg, transparent 85deg,
            transparent 90deg, white 95deg, transparent 100deg,
            transparent 105deg, white 110deg, transparent 115deg,
            transparent 120deg, white 125deg, transparent 130deg,
            transparent 135deg, white 140deg, transparent 145deg,
            transparent 150deg, white 155deg, transparent 160deg,
            transparent 165deg, white 170deg, transparent 175deg,
            transparent 180deg, white 185deg, transparent 190deg,
            transparent 195deg, white 200deg, transparent 205deg,
            transparent 210deg, white 215deg, transparent 220deg,
            transparent 225deg, white 230deg, transparent 235deg,
            transparent 240deg, white 245deg, transparent 250deg,
            transparent 255deg, white 260deg, transparent 265deg,
            transparent 270deg, white 275deg, transparent 280deg,
            transparent 285deg, white 290deg, transparent 295deg,
            transparent 300deg, white 305deg, transparent 310deg,
            transparent 315deg, white 320deg, transparent 325deg,
            transparent 330deg, white 335deg, transparent 340deg,
            transparent 345deg, white 350deg, transparent 355deg,
            transparent 360deg
        ),
        radial-gradient(circle at center, white 35%, transparent 70%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.AchievementIconGlowContainer {
    animation: glowRotateReverse 32s linear infinite;
    -webkit-mask-image: 
        conic-gradient(from 7deg at 50% 50%,
            transparent 0deg, rgba(255,255,255,0.4) 4deg, transparent 8deg,
            transparent 18deg, rgba(255,255,255,0.4) 22deg, transparent 26deg,
            transparent 36deg, rgba(255,255,255,0.4) 40deg, transparent 44deg,
            transparent 54deg, rgba(255,255,255,0.4) 58deg, transparent 62deg,
            transparent 72deg, rgba(255,255,255,0.4) 76deg, transparent 80deg,
            transparent 90deg, rgba(255,255,255,0.4) 94deg, transparent 98deg,
            transparent 108deg, rgba(255,255,255,0.4) 112deg, transparent 116deg,
            transparent 126deg, rgba(255,255,255,0.4) 130deg, transparent 134deg,
            transparent 144deg, rgba(255,255,255,0.4) 148deg, transparent 152deg,
            transparent 162deg, rgba(255,255,255,0.4) 166deg, transparent 170deg,
            transparent 180deg, rgba(255,255,255,0.4) 184deg, transparent 188deg,
            transparent 198deg, rgba(255,255,255,0.4) 202deg, transparent 206deg,
            transparent 216deg, rgba(255,255,255,0.4) 220deg, transparent 224deg,
            transparent 234deg, rgba(255,255,255,0.4) 238deg, transparent 242deg,
            transparent 252deg, rgba(255,255,255,0.4) 256deg, transparent 260deg,
            transparent 270deg, rgba(255,255,255,0.4) 274deg, transparent 278deg,
            transparent 288deg, rgba(255,255,255,0.4) 292deg, transparent 296deg,
            transparent 306deg, rgba(255,255,255,0.4) 310deg, transparent 314deg,
            transparent 324deg, rgba(255,255,255,0.4) 328deg, transparent 332deg,
            transparent 342deg, rgba(255,255,255,0.4) 346deg, transparent 350deg,
            transparent 360deg
        ),
        radial-gradient(circle at center, white 30%, transparent 75%);
    mask-image: 
        conic-gradient(from 7deg at 50% 50%,
            transparent 0deg, rgba(255,255,255,0.4) 4deg, transparent 8deg,
            transparent 18deg, rgba(255,255,255,0.4) 22deg, transparent 26deg,
            transparent 36deg, rgba(255,255,255,0.4) 40deg, transparent 44deg,
            transparent 54deg, rgba(255,255,255,0.4) 58deg, transparent 62deg,
            transparent 72deg, rgba(255,255,255,0.4) 76deg, transparent 80deg,
            transparent 90deg, rgba(255,255,255,0.4) 94deg, transparent 98deg,
            transparent 108deg, rgba(255,255,255,0.4) 112deg, transparent 116deg,
            transparent 126deg, rgba(255,255,255,0.4) 130deg, transparent 134deg,
            transparent 144deg, rgba(255,255,255,0.4) 148deg, transparent 152deg,
            transparent 162deg, rgba(255,255,255,0.4) 166deg, transparent 170deg,
            transparent 180deg, rgba(255,255,255,0.4) 184deg, transparent 188deg,
            transparent 198deg, rgba(255,255,255,0.4) 202deg, transparent 206deg,
            transparent 216deg, rgba(255,255,255,0.4) 220deg, transparent 224deg,
            transparent 234deg, rgba(255,255,255,0.4) 238deg, transparent 242deg,
            transparent 252deg, rgba(255,255,255,0.4) 256deg, transparent 260deg,
            transparent 270deg, rgba(255,255,255,0.4) 274deg, transparent 278deg,
            transparent 288deg, rgba(255,255,255,0.4) 292deg, transparent 296deg,
            transparent 306deg, rgba(255,255,255,0.4) 310deg, transparent 314deg,
            transparent 324deg, rgba(255,255,255,0.4) 328deg, transparent 332deg,
            transparent 342deg, rgba(255,255,255,0.4) 346deg, transparent 350deg,
            transparent 360deg
        ),
        radial-gradient(circle at center, white 30%, transparent 75%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.AchievementIconGlow {
    animation: glowRotate 16s linear infinite;
    border-radius: 50%;
}

@keyframes glowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes glowRotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.AchievementIcon {
    position: absolute;
    border-radius: 4px;
    background: transparent;
    color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: none; /* Disable transition to prevent "reset" visual popping */
    z-index: 10;
    overflow: hidden; /* Ensure images don't bleed out over the corners */
}

/* Scoped Coach Achievement Styles: Use black background and box-shadow for pixel-perfect fills */
.coach-profile-container .AchievementIcon {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 1px #000;
    background: #000;
}

/* For image-based achievements in coach profile, ensure they fill 1:1 behind the box-shadow border */
.coach-profile-container .AchievementIcon:has(img),
.coach-profile-container .AchievementIcon:has(.award-icon-img) {
    background: #000 !important;
}

.AchievementIcon.no-box-icon {
    border: none;
    background: transparent;
    box-shadow: none;
}

.coach-profile-container .AchievementIcon.bare,
.coach-profile-container .AchievementIcon.fancy {
    border: none;
    background: transparent;
}

.coach-profile-container .AchievementIcon.bare {
    width: 64px;
    height: 64px;
    top: 0;
    left: 0;
    font-size: 2.2rem;
}

.coach-profile-container .AchievementIcon.fancy {
    width: 64px;
    height: 64px;
    top: 0;
    left: 0;
    font-size: 2.225rem; /* Balanced size for fallback mode */
}

.fancy-achievements-active .coach-profile-container .AchievementIcon.fancy {
    width: 80px;
    height: 80px;
    font-size: 3rem;
}

.fancy-achievements-active .coach-profile-container .AchievementIconWrapper.fancy {
    width: 80px;
    height: 80px;
    margin-right: 20px;
    margin-top: -8px;
    margin-bottom: -8px;
}

.award-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.coach-profile-container .award-icon-img {
    object-fit: cover;
    border-radius: 4px !important;
}

.LegendaryAchievement .AchievementIconGlow {
    background: radial-gradient(
        rgba(255, 201, 109, 0.1) 0%,
        rgba(255, 201, 109, 0) 6%,
        rgba(255, 201, 109, 0.1) 10%,
        rgba(255, 184, 78, 0.7) 26%,
        rgba(255, 201, 109, 0.1) 35%,
        rgba(255, 184, 78, 0.7) 40%,
        rgba(255, 201, 109, 0.1) 60%,
        rgba(255, 184, 78, 0.7) 82%,
        rgba(255, 201, 109, 0.1) 100%
    );
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.LegendaryAchievement .AchievementIcon {
    box-shadow: 0 0 2px 1px rgba(255, 201, 109, 0.6),
                0 0 16px 3px rgba(255, 215, 0, 0.4);
}

.LegendaryAchievement .AchievementIcon.boxed:not(:has(img)):not(:has(.award-icon-img)) {
    background: linear-gradient(135deg, #1a1a1a 0%, #05080c 100%);
}

.EpicAchievement .AchievementIconGlow {
    background: radial-gradient(rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.7) 40%, rgba(156, 39, 176, 0.1) 100%);
}

.RareAchievement .AchievementIconGlow {
    background: radial-gradient(rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.7) 40%, rgba(33, 150, 243, 0.1) 100%);
}

.UncommonAchievement .AchievementIconGlow {
    background: radial-gradient(rgba(139, 195, 74, 0.1) 0%, rgba(139, 195, 74, 0.7) 40%, rgba(139, 195, 74, 0.1) 100%);
}

.CommonAchievement .AchievementIcon {
    color: #9ca3af;
}

.UncommonAchievement .AchievementIcon {
    color: #34d399;
}

.RareAchievement .AchievementIcon {
    color: #60a5fa;
}

.EpicAchievement .AchievementIcon {
    color: #c084fc;
}

.CommonAchievement .AchievementIconGlowContainerRoot,
.CommonAchievement .AchievementIconGlowContainer,
.CommonAchievement .AchievementIconGlow,
.UncommonAchievement .AchievementIconGlowContainerRoot,
.UncommonAchievement .AchievementIconGlowContainer,
.UncommonAchievement .AchievementIconGlow,
.RareAchievement .AchievementIconGlowContainerRoot,
.RareAchievement .AchievementIconGlowContainer,
.RareAchievement .AchievementIconGlow,
.EpicAchievement .AchievementIconGlowContainerRoot,
.EpicAchievement .AchievementIconGlowContainer,
.EpicAchievement .AchievementIconGlow {
    display: none;
}

/* Fancy Display Mode Tweaks */
.fancy-achievements-active .LegendaryAchievement.AchievementIconWrapper {
    width: 80px;
    height: 80px;
}

.fancy-achievements-active .LegendaryAchievement .AchievementIcon {
    width: 80px;
    height: 80px;
    font-size: 3rem;
}

.fancy-achievements-active .LegendaryAchievement.RareAchievement .AchievementIcon,
.fancy-achievements-active .LegendaryAchievement.EpicAchievement .AchievementIcon {
    /* Ensure sizing overrides if multiple classes exist, though they usually don't */
}

.fancy-achievements-active .award-winner-card:has(.LegendaryAchievement) {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
}

.fancy-achievements-active .award-winner-card:has(.EpicAchievement) {
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.1);
    border-color: rgba(192, 132, 252, 0.2);
}

.fancy-achievements-active .award-winner-card:has(.RareAchievement) {
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
}

.LegendaryAchievement .AchievementIconGlowContainerRoot,
.AchievementIconWrapper.fancy .AchievementIconGlowContainerRoot {
    display: block !important;
}

.AchievementIconWrapper.bare .AchievementIconGlowContainerRoot {
    display: block !important;
}

.award-winner-info {
    flex: 1;
    min-width: 0;
}

.award-winner-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.award-winner-meta {
    font-size: 0.85rem;
    color: var(--text-light);
}

.btn-show-more-awards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-dark);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-more-awards:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.btn-show-more-awards:active {
    background-color: #152a71 !important;
    border-color: #152a71 !important;
    color: white !important;
    transform: translateY(1px);
}

.btn-show-more-awards:focus,
.btn-show-more-awards:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn-show-more-awards {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-show-more-awards:hover i {
    color: white !important;
}

.btn-show-more-awards i {
    display: inline-block;
    transition: transform 0.2s ease;
}

.btn-show-more-awards[data-expanded="true"] i {
    transform: rotate(180deg);
}
/* Coach profile image and initial circle */
.coach-profile-pic {
    display: flex;
    flex-direction: column;
}
.coach-initial-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #003366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid #003366;
}
/* Reset and Base Styles */
:root {
    --border-radius-container: 8px;
    --border-radius-element: 4px;
    --border-color: #e0e0e0;
    --text-dark: #1f1f1f;
    --text-light: #6b6b6b;
    --primary-color: #1d3893;
}

/* Team stats header tweaks: smaller typography and inline logo */
.team-stats-header h4 {
    font-size: 1rem; /* slightly smaller than default */
    margin-bottom: 0;
    font-weight: 600;
}
team-header-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    padding: 4px;
    border: 1px solid rgba(0,0,0,0.06);
    display: inline-block;
    vertical-align: middle;
}

/* Ensure only the top-most visual surface of the card keeps corner radius.
   Remove top-corner rounding from the header row / table that sits directly
   under the colored `card-header` so there isn't a double rounded effect. */
.team-stats-card .card-body,
.team-stats-card .card-body .table-responsive,
.team-stats-card .stats-input-table,
.team-stats-card .stats-input-table thead th {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Defensive: ensure the first/last header cells don't introduce rounding */
.team-stats-card .stats-input-table thead th:first-child,
.team-stats-card .stats-input-table thead th:last-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
/* Stats table density adjustments */
.stats-input-table th {
    font-size: 0.78rem;
    padding: 6px 8px;
}
.stats-input-table td input,
.stats-input-table td select {
    font-size: 0.84rem;
    padding: 0.28rem 0.4rem;
}

/* Responsive typography: fluidly scale headers, player names and inputs */
.team-stats-header h4 {
    font-size: clamp(0.92rem, 1.1vw, 1rem); /* slightly smaller, scales with viewport */
}

.stats-input-table thead th {
    font-size: clamp(0.70rem, 0.9vw, 0.82rem);
}

.stats-input-table td strong {
    display: inline-block; /* keep badge inline with name */
    font-size: clamp(0.75rem, 0.9vw, 0.86rem); /* player name size */
    line-height: 1.05;
    vertical-align: middle;
}

.stats-input-table td input,
.stats-input-table td select,
.stats-input-table td .form-select-sm {
    /* Prevent inputs from becoming too small on narrow viewports while keeping responsive scaling */
    font-size: clamp(0.80rem, 0.9vw, 0.88rem); /* raised min from 0.72rem to 0.80rem */
    padding: 0.18rem 0.32rem;
}

/* Small screens: slightly reduce sticky column width so names wrap less aggressively */
@media (max-width: 540px) {
    .sticky-col { min-width: 140px; max-width: 140px; }
}

/* Centering and reduced padding for a tighter, cleaner boxscore layout */
.team-stats-header {
    justify-content: flex-start; /* left-align logo + title */
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
}
.team-stats-header .team-header-logo {
    width: 34px;
    height: 34px;
    padding: 0; /* remove boxed padding */
    background: transparent; /* allow transparent logos */
    border: none;
    object-fit: contain;
}

/* Make table cells more compact and center numeric inputs */
.stats-input-table thead th {
    text-align: center;
    padding: 6px 6px;
}
.stats-input-table tbody td {
    padding: 2px 6px; /* reduce vertical padding for tighter rows */
    vertical-align: middle;
}
.stats-input-table td:first-child {
    text-align: left; /* keep player names left-aligned for readability */
    padding-left: 10px;
}
.stats-input-table td input, .stats-input-table td select {
    text-align: center;
}

/* Constrain Status (DNP) select so long labels don't expand the column.
   Use native browser arrow and allow truncation with ellipsis. */
.stats-input-table td .dnp-selector {
    width: 100% !important; /* constrained by the column width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding: 0.18rem 1.75rem 0.18rem 0.5rem; /* leave room for native arrow */
    box-sizing: border-box;
    /* Use native appearance so the browser arrow is shown */
    -webkit-appearance: menulist-button;
    appearance: menulist-button;
    background: initial;
}


/* Ensure the select itself uses box-sizing so width counts padding */
.stats-input-table td .dnp-selector,
.stats-input-table td .dnp-selector option {
    box-sizing: border-box;
}

/* (feed selector styles removed) */

/* Reduce card spacing around the stats blocks */
.card.mb-4 {
    margin-bottom: 0.9rem;
}

/* Slightly tighter badges and form controls */
.badge {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
}

.league-private-pill {
    background-color: #C8102E;
    color: #fff;
    text-transform: none;
    white-space: nowrap;
}

/* Recap badge loading animations */
.badge-loading {
    position: relative;
    padding-right: 1.6rem;
}
.badge-loading::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.65);
    border-top-color: transparent;
    transform: translateY(-50%);
    animation: badge-spin 1s linear infinite;
}
@keyframes badge-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.form-control, .form-select {
    padding: 0.28rem 0.4rem;
}

/* Ensure the submit button remains centered and compact */
.mb-5.text-center { margin-top: 0.6rem; margin-bottom: 1rem; }



/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Restore some basic padding for main container */
main.container {
    padding-left: 15px;
    padding-right: 15px;
}

*:focus {
    outline: none;
}

/* Mobile seasons link hidden by default (only shown inside mobile media query) */
.mobile-seasons-link { display: none !important; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/* Navigation Bar */
.navbar {
    background-color: #003366;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.nav-brand-section {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 60px; /* Match the desired height of the navbar */
}

.nav-logo {
    height: 100%; /* Fill the height of the brand section */
    width: auto;
    display: block;
    object-fit: contain;
    padding: 5px 0; /* Add a tiny bit of breathing room */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0;
}

.nav-menu li {
    border-right: 1px solid #00509e;
}

.nav-menu li:last-child {
    border-right: none;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.nav-menu a:hover {
    background-color: #00509e;
}

.navbar.advanced-navbar {
    background: linear-gradient(120deg, #041a3c 0%, #002e65 45%, #1b5fc9 100%);
    border-bottom: 4px solid #f5c518;
    padding: 0 2.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.navbar.advanced-navbar .btn {
    border-radius: 0.35rem;
}

.advanced-nav-grid {
    display: grid;
    /* 4 columns: Brand (left), Links (center), Meta (right), Account (far right) */
    grid-template-columns: auto minmax(0, 1200px) auto auto;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: 0;
    /* Visual scale of navbar content */
    transform: scale(0.8);
    transform-origin: center;
} 

.advanced-brand {
    display: flex;
    align-items: center;
    gap: 0rem;
    flex-wrap: nowrap;
    /* keep the brand block at the start of the left column */
    justify-self: start;
    padding-left: 0;
    margin-left: 0;
} 

.advanced-brand .nav-logo {
    height: 45px; /* reduced 25% from 60px */
    width: auto;
}

.advanced-page-label {
    text-transform: uppercase;
    letter-spacing: 0.22rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-left: -1.6rem; /* aggressively nudge left to sit adjacent to logo */
}

.advanced-page-label span {
    font-weight: 600;
}

.advanced-links-wrapper {
    /* Layout note: keep this wrapper flexible in the capped middle column so it
       can switch into an overlay when the hamburger menu is activated on
       smaller screens. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 0 1 auto;
    width: 100%;
    padding: 0;
    min-width: 0; /* allow shrinking to prevent overlap */
    justify-self: center;
    position: relative;
} 

/* When the `.nav-container` is used inside the center wrapper it brings
   horizontal padding from the global `.nav-container` rule. That padding
   slightly shifts the centered links to the right; override it here so
   center content is precisely aligned with the main page container. */
.advanced-links-wrapper > .nav-container {
    padding: 0;
    width: 100%;
    /* Match Bootstrap container widths so center nav aligns with page content
       at all breakpoints. Uses the same max-widths as Bootstrap 5.3. */
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 576px) {
    .advanced-links-wrapper > .nav-container { max-width: 540px; }
}
@media (min-width: 768px) {
    .advanced-links-wrapper > .nav-container { max-width: 720px; }
}
@media (min-width: 992px) {
    .advanced-links-wrapper > .nav-container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .advanced-links-wrapper > .nav-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .advanced-links-wrapper > .nav-container { max-width: 1320px; }
}

.advanced-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    /* center links horizontally within the wrapper */
    justify-content: center;
}

/* Nudge center nav left on wide viewports to visually align with content
   per design request. Uses a translate so the group shifts without changing
   layout flow. Adjust the percentage if you want a smaller/larger nudge. */
@media (min-width: 992px) {
    .advanced-links {
        transform: translateX(0%);
        transform-origin: center;
    }
}

/* Coach card override to ensure coach profile header appears as a standalone card */
.coach-card {
    display: block;
    width: 100%;
    background-color: #ffffff;
    padding: 28px;
    border-radius: var(--border-radius-container);
    box-shadow: 0 10px 30px rgba(11,22,40,0.06);
    margin: 20px 0;
}
.coach-card .team-header {
    display: grid; /* REQUIRED for grid properties to work */
    margin: 0; /* inner spacing controlled by card padding */
    /* Force three horizontal columns so the header stays side-by-side across the x-axis */
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: start; /* align items to top so columns are parallel */
    gap: 24px;
}

/* Ensure higher specificity in case a global .card rule exists */
body .coach-card {
    background-clip: padding-box;
}

/* Coach card detailed layout: large record, win pct, and centered columnar data */
.coach-card .team-record {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers content horizontally */
    justify-content: flex-start; /* align to top instead of vertical centering */
    padding: 8px 20px 4px 20px;
}
.coach-card .team-record-value {
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 700;
    color: #073b6b;
}
.coach-card .team-winpct {
    margin-top: 10px;
    color: #6c757d;
    font-size: 0.95rem;
}
.coach-card .team-points {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align to top */
    align-items: center; /* center horizontally */
    padding: 8px 20px 4px 20px;
    text-align: left;
}
.coach-card .team-points h3 { margin-bottom: 0.5rem; }
.coach-card .team-points p {
    margin: 6px 0;
    font-size: 1rem;
}
.coach-card .team-points p strong {
    display: inline-block;
    width: 140px;
    text-align: left;
    font-weight: 700;
}
.coach-card .team-coach {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align to top */
    align-items: center; /* center horizontally */
    padding: 8px 20px 4px 20px;
}

@media (max-width: 700px) {
    .coach-card .team-record-value { font-size: 2.25rem; }
    .coach-card .team-points p strong { width: 110px; }
}

.advanced-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    padding: 0.45rem 0.8rem;
    border-radius: 0.35rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.advanced-link:hover,
.advanced-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.advanced-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    justify-content: flex-end;
    align-items: flex-end;
    /* keep meta absolutely right inside the right column */
    justify-self: end;
    white-space: nowrap;
    padding-right: 0;
    margin-right: 0;
} 

.advanced-links {
    justify-content: center;
}

.advanced-meta-content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.advanced-logout {
    margin-left: auto;
    position: relative;
    top: 2px;
}

.advanced-logout-link {
    border-radius: 0.35rem;
    font-weight: 600;
}

/* Account button (circular initial) */
.advanced-account {
    margin-left: 0;
    margin-right: 0;
    position: relative;
    justify-self: end;
    padding-right: 0;
}

/* Tutorial launcher — transparent icon circle matching account button */
.tutorial-launcher-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.05rem;
    transition: color 0.2s;
}
.tutorial-launcher-btn:hover,
.tutorial-launcher-btn:active,
.tutorial-launcher-btn:focus {
    color: #fff;
    background: transparent;
    outline: none;
    box-shadow: none;
}

.advanced-account-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 0;
}

.advanced-account-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,51,102,0.15);
}

.account-initial {
    font-weight: 400; /* use normal weight for the initial */
    font-size: 1.1rem; /* slightly larger for better visibility */
}

.account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: white;
    color: #003366;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 6px 8px;
    min-width: 120px;
    z-index: 110;
}

.account-menu[hidden] { display: none; }

.account-menu-item {
    display: block;
    padding: 8px 10px;
    color: #003366;
    text-decoration: none;
    border-radius: 4px;
}

.account-menu-item:hover {
    background: #f1f5fb;
}

.source-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin-right: 0.35rem;
}

.source-badge {
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: #041a3c;
    margin-right: 0.25rem;
}

.season-picker {
    min-width: 150px;
}

.season-picker label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.15rem;
}

.season-picker .form-select {
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.92);
}

.advanced-post-btn {
    border-color: rgba(255, 255, 255, 0.6);
    color: #00152c;
    font-weight: 600;
}

.advanced-post-btn:hover {
    background-color: white;
}

.advanced-hamburger {
    display: none;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    padding: 0;
    color: white;
    font-weight: 600;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    text-transform: uppercase;
    cursor: pointer;
}

.advanced-hamburger-lines {
    position: relative;
    width: 26px;
    height: 22px;
}

.advanced-hamburger-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
    transform-origin: center;
}

.advanced-hamburger-lines span:nth-child(1) {
    top: 0;
}

.advanced-hamburger-lines span:nth-child(2) {
    top: calc(50% - 1.5px);
}

.advanced-hamburger-lines span:nth-child(3) {
    bottom: 0;
}

.advanced-hamburger.is-open .advanced-hamburger-lines span:nth-child(1) {
    top: calc(50% - 1.5px);
    transform: rotate(45deg);
}

.advanced-hamburger.is-open .advanced-hamburger-lines span:nth-child(2) {
    opacity: 0;
}

.advanced-hamburger.is-open .advanced-hamburger-lines span:nth-child(3) {
    top: calc(50% - 1.5px);
    transform: rotate(-45deg);
}

.advanced-hamburger-label {
    letter-spacing: 0.3em;
    font-size: 0.75rem;
}

.navbar-page-controls {
    display: flex;
    align-items: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.navbar-active-feeds {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.season-picker-inline {
    min-width: 160px;
}

.season-picker-inline label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.15rem;
}

.season-picker-inline .form-select {
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.92);
}

.navbar-post-btn {
    display: flex;
    align-items: center;
}

@media (max-width: 1340px) {
    /* Reduce horizontal padding on the advanced navbar for medium and below
       so content has more room; breakpoint increased from 1024px to 1340px. */
    /* Tighten vertical spacing so navbar has balanced top/bottom padding */
     .navbar.advanced-navbar { padding: 0.35rem 1.25rem; }

     /* When the Last Games widget attaches it sets an inline body padding-top.
        Dynamic calculation in JS should handle this. */
     body.attach-last-games { padding-top: 46px; }

    /* Hide inline season picker on small/hamburger layouts and show a mobile-only Seasons link */
    .season-picker-inline { display: none !important; }
    /* `.mobile-seasons-link` is hidden globally; the rule below makes it visible on mobile only. */
    /* Mobile-only Seasons link: display as "Season" (singular) on mobile.
       Hide the original inline text (font-size:0) and render the desired
       label via ::after so we don't need HTML changes. */
    .advanced-links .mobile-seasons-link {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        padding: 0.45rem 0.8rem;
        border-radius: 0.35rem;
        background: transparent;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 600;
        font-size: 0; /* hide original text node */
    }
    .advanced-links .mobile-seasons-link::after {
        content: "Season";
        font-size: 1rem;
        font-weight: 600;
        color: inherit;
    }
    .advanced-links .mobile-seasons-link:hover { 
        background: rgba(255, 255, 255, 0.15); 
        color: white; 
    }

    .navbar.advanced-navbar {
        padding-top: 0rem; /* baseline: no vertical padding */
        padding-bottom: 0rem; /* baseline: no vertical padding */
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Remove all vertical padding/margins from navbar children at mobile so closed state is flush */
    .navbar.advanced-navbar,
    .navbar.advanced-navbar .nav-container,
    .navbar.advanced-navbar .advanced-nav-grid,
    .navbar.advanced-navbar .advanced-brand,
    .navbar.advanced-navbar .advanced-brand .nav-brand-section,
    .navbar.advanced-navbar .advanced-links-wrapper,
    .navbar.advanced-navbar .advanced-links,
    .navbar.advanced-navbar .nav-menu,
    .navbar.advanced-navbar .nav-menu a {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Ensure nav links don't force extra height on mobile */
    .navbar.advanced-navbar .nav-menu a {
        height: auto !important;
        line-height: normal !important;
    }
    /* Last games widget positioning handled by JavaScript */
    .advanced-nav-grid {
        display: grid;
        grid-template-columns: 1fr auto;
          /* Keep a single-row grid (brand + account) so no extra row reserves space. */
          grid-template-areas: "brand account";
        text-align: center;
        /* reduce bottom padding to remove uneven spacing on mobile */
        padding-bottom: 0rem; /* eliminated extra bottom padding */
        align-items: center;
        width: 100%;
        gap: 0.5rem;
        transform: none;
    }
    .advanced-brand {
        grid-area: brand;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        /* Removed transforms to fix stacking context issues; 
           child elements are sized down explicitly instead. */
    }
    .advanced-brand .nav-brand-section {
        flex: 0 1 auto;
        padding-top: 0rem;
        padding-bottom: 0rem;
        display: flex;
        align-items: center;
    }
    .advanced-brand .nav-logo {
        height: 34px; /* Reduced from 42px (approx 0.8 scale) */
    }
    .advanced-page-label {
        justify-self: start;
        letter-spacing: 0.25rem;
        font-size: 0.65rem; /* Reduced from 0.78rem */
        margin-left: -1rem; /* Adjust negative margin for smaller scale */
    }
    .advanced-links-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 80vw;
        padding: 85px 1rem 1rem;
        pointer-events: none;
        visibility: hidden;
        transform: translateX(-100%);
        /* Transition transform and delay visibility so it stays visible while sliding out */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
        z-index: 95;
        background: rgba(4, 20, 72, 0.98);
        box-shadow: 2px 0 15px rgba(0,0,0,0.3);
    }
    .advanced-links-wrapper.open {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        /* Instant visibility on open, animate transform */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
    }
    .advanced-links {
        display: none;
        width: 100%;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        background: transparent;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    .advanced-links.open {
        display: flex;
        padding-bottom: 0;
    }
    .advanced-hamburger {
        display: inline-flex !important;
        order: -1;
        margin-right: 0.5rem;
        flex-shrink: 0;
        z-index: 102;
        position: relative; /* Ensure z-index applies */
        transform: scale(0.85); /* Slightly smaller icon */
    }

    /* Account icon on mobile: mirrored with hamburger on left */
    .advanced-account {
        grid-area: account;
        margin-left: 0;
        padding-right: 0.25rem;
        z-index: 90; /* Below menu overlay (95), so it gets covered */
        position: relative; 
        top: 0;
        right: 0;
        justify-self: end;
        /* Removed transform; sized btn instead */
    }

    .advanced-account-btn {
        width: 38px; /* Reduced from 44px */
        height: 38px;
        line-height: 38px;
        font-size: 0.9rem;
    }

    @media (max-width: 380px) {
        .advanced-account {
            padding-right: 0rem; /* remove padding on very small screens for max flushness */
        }
        .advanced-account-btn {
            width: 36px;
            height: 36px;
        }
        .account-initial { font-size: 0.85rem; }
    }

    @media (max-width: 450px) {
        .advanced-hamburger-label {
            display: none;
        }
        .advanced-page-label {
            display: none;
        }
    }
    .advanced-links.open .advanced-link {
        justify-content: center;
    }
    .advanced-meta {
        display: none; /* hide meta on mobile to remove residual gap */
    }
    .advanced-meta-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        width: 100%;
    }
    .navbar-page-controls {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    .season-picker-inline {
        width: 100%;
        max-width: 280px;
    }
    .advanced-logout {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
}

/* Last Games Widget */
.last-games-widget {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-container);
    padding: 12px 0;
    margin: 0 auto 20px;
    overflow-x: visible;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    white-space: normal;
    position: sticky;
    /* top value set dynamically by JavaScript */
    z-index: 50;
    width: min(100%, 1160px);
    box-sizing: border-box;
    min-height: 120px;
    flex-shrink: 0;
    /* Smoothly transition when JS repositions the widget */
    transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease, opacity 120ms ease;
}

.last-games-widget-shell {
    position: relative;
}

.last-games-week-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
    padding: 0 10px 6px;
    min-height: 28px;
}

.last-games-week-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.last-games-week-current-label {
    color: #111;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.last-games-week-current-range {
    color: #8a8f98;
    font-size: 0.78rem;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.last-games-week-side {
    color: #8a8f98;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    min-height: 1em;
}

.last-games-week-side-prev {
    text-align: left;
}

.last-games-week-side-next {
    text-align: right;
}

.last-games-week-nav-link {
    color: #8a8f98;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.15;
}

.last-games-week-side-prev .last-games-week-nav-link + .last-games-week-nav-link {
    margin-left: 6px;
}

.last-games-week-side-next .last-games-week-nav-link + .last-games-week-nav-link {
    margin-left: 6px;
}

.last-games-week-nav-link:hover {
    color: #3c4654;
    text-decoration: underline;
}

.last-games-week-nav-link.is-disabled,
.last-games-week-nav-link[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
    text-decoration: none;
}

.week-nav-edge-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: rgba(255, 255, 255, 0.95);
    color: #243041;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.last-games-widget:hover .week-nav-edge-btn,
.last-games-widget:focus-within .week-nav-edge-btn {
    opacity: 1;
    pointer-events: auto;
}

.week-nav-edge-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.week-nav-edge-btn:disabled {
    opacity: 0;
    pointer-events: none;
}

.week-nav-edge-prev {
    left: -8px;
}

.week-nav-edge-next {
    right: -8px;
}

.week-nav-edge-btn i {
    font-size: 1rem;
    line-height: 1;
}

/* When attached, the widget is fixed under the navbar and aligned to the page container.
   JavaScript will set explicit left/width/top values for precise alignment; the class
   is a visual helper and ensures the widget is removed from normal flow. */

/* When attached, the widget is fixed under the navbar and aligned to the page container.
   JavaScript will set explicit left/width/top values for precise alignment; the class
   is a visual helper and ensures the widget is removed from normal flow. */
.last-games-widget.attached {
    position: fixed !important;
    margin-top: 0 !important;
    /* left/right intentionally omitted so JS can set precise left/width values */
    z-index: 60;
}


@media (max-width: 1200px) {
    .last-games-widget {
        width: 100%;
    }
}

.last-games-widget::-webkit-scrollbar {
    display: none;
}

.last-games-widget .game-card {
    flex-shrink: 0;
    white-space: normal;
}

.games-list {
    display: flex;
    gap: 15px;
    padding: 0 10px;
    width: 100%;
    margin: 0 auto;
}

.week-games-rail {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    white-space: nowrap;
    scroll-snap-type: x proximity;
}

.week-games-rail::-webkit-scrollbar {
    display: none;
}

.week-games-rail .game-card {
    scroll-snap-align: start;
}

/* Player page recent-games (vertical list, full-width cards) */
.player-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-games-list .game-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-element);
    padding: 2px 2px;
    width: 100%;
    min-width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.player-games-list .game-matchup {
    display: flex;
    gap: 8px;
    align-items: center;
}

.player-games-list .team-name, .player-games-list .team-name.opp {
    font-weight: 700;
    color: #003366;
}

.game-card .game-date {
    font-size: 0.85rem;
    color: #666;
}

.game-card .game-result {
    display: flex;
    align-items: center;
    gap: 8px;
}

.game-card .watch-link {
    font-size: 0.8rem;
}

.game-card .team-logo-mini {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.game-card .team-score {
    font-weight: 700;
}

.game-card .result-badge.win {
    background-color: #28a745;
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.game-card .result-badge.loss {
    background-color: #dc3545;
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.game-card .game-action {
    border-top: none;
    padding-top: 0;
}

/* Original horizontal .game-card styles kept for Last Games widget usage */
.game-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-element);
    padding: 2px 2px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Split the game card into two clickable regions:
   - top area (boxscore): fills the card and can be an anchor with class `.boxscore-link`
   - bottom area (watch/twitch): fixed row that contains `.watch-link` anchor
   HTML should place an anchor with `.boxscore-link` wrapping the top content
   and an anchor with `.watch-link` inside a `.card-bottom` element. */
.game-card {
    overflow: hidden;
}

.game-card > a,
.game-card > .card-top {
    display: block;
    text-decoration: none;
    color: inherit;
}

.game-card > a.boxscore-link,
.game-card > .card-top {
    flex: 1 1 auto; /* fill available vertical space */
    padding: 2px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.game-card > .card-bottom,
.game-card > a.twitch-link {
    flex: 0 0 auto;
    border-top: 1px solid #f0f0f0;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.game-card .watch-link,
.game-card a.twitch-link {
    color: #6441a5; /* Twitch purple */
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.game-card a.boxscore-link:hover .team-abbr,
.game-card a.boxscore-link:hover .team-score {
    text-decoration: underline;
}

@media (max-width: 420px) {
    .last-games-widget { 
        min-height: 100px;
        /* Positioning handled by JavaScript */
    }
    .last-games-week-header {
        grid-template-columns: auto 1fr auto;
        column-gap: 6px;
        padding: 0 8px 6px;
    }
    .last-games-week-side {
        font-size: 0.72rem;
    }
    .last-games-week-current-label {
        font-size: 0.84rem;
    }
    .last-games-week-current-range {
        font-size: 0.72rem;
    }
    .last-games-week-nav-link {
        font-size: 0.72rem;
    }
    .week-nav-edge-btn {
        width: 30px;
        height: 30px;
    }
    .week-nav-edge-prev { left: -6px; }
    .week-nav-edge-next { right: -6px; }
    .last-games-widget .game-card { min-width: 140px; }
}

@media (max-width: 768px) {
    .last-games-widget .game-card {
        min-width: 8rem;
        max-width: 9rem;
    }
}

/* NBA.com ScoreStripGame styling for Last Games Widget */
.last-games-widget .game-card {
    border: 0.5px solid #daddde;
    background-color: #fff;
    color: #000;
    min-width: 10rem;
    max-width: 12rem;
    min-height: 80px;
    padding: 3px 2px;
    height: 100%;
    justify-content: space-between;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in 0s;
    opacity: 1;
}

/* Slightly reduce icon and text sizes inside the Last Games widget (~5%) */
.last-games-widget .team-logo-mini {
    /* 28px * 0.95 ≈ 26.6px -> round to 27px */
    width: 27px;
    height: 27px;
}
.last-games-widget .team-score,
.last-games-widget .team-name,
.last-games-widget .team-abbr {
    font-size: 0.95em; /* slightly smaller than surrounding content */
}

/* Reserve score width so single-digit scores don't change layout */
.last-games-widget .team-score {
    min-width: 4ch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.last-games-widget .watch-link {
    font-size: 0.76rem; /* 0.8rem * 0.95 ≈ 0.76rem */
}
.last-games-widget .watch-link i,
.last-games-widget .watch-link svg {
    display: inline-block;
    transform: scale(0.95);
    transform-origin: center;
}

.game-status {
    font-size: 0.7rem;
    font-weight: bold;
    color: #d00;
    text-transform: uppercase;
}

.game-status-preview {
    color: #0d6efd;
}

.boxscore-date-line {
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: 1rem;
}

.boxscore-meta-line {
    font-size: 0.98rem;
}

.boxscore-meta-line .boxscore-arena-link,
.boxscore-meta-line .boxscore-arena-link a {
    font-size: 1rem;
}

@media (max-width: 576px) {
    .boxscore-date-line {
        font-size: 0.94rem;
    }

    .boxscore-meta-line,
    .boxscore-meta-line .boxscore-arena-link,
    .boxscore-meta-line .boxscore-arena-link a {
        font-size: 0.9rem;
    }
}

.game-matchup {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.team-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.team-logo-mini {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.team-abbr {
    font-weight: 600;
    color: #333;
}

.team-score {
    font-weight: 600;
    color: #666;
}

/* Box Score header (larger, recent-games-like layout) */
.boxscore-header {
    gap: 20px;
}

.boxscore-header .team-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.boxscore-header .team-score-large {
    font-size: 2.93rem; /* ~30% larger */
}

.boxscore-header .game-status {
    font-weight: 700;
    color: #d00;
    text-transform: uppercase;
    font-size: 1.2rem; /* ~30% larger */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-logo-lg {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.team-name {
    font-size: 28px;
    font-weight: 800;
    color: #222;
    text-align: center;
}

.team-score-large {
    min-width: 110px; /* increased to keep spacing with larger font */
    text-align: center;
    font-size: 4.55rem; /* ~30% larger */
}

.team-score-large.winner {
    color: #111;
    font-weight: 900;
}

.team-score-large.loser {
    color: #8a8a8a;
    font-weight: 700;
}

.boxscore-header {
    justify-content: center;
    gap: 60px;
    padding: 16px 20px;
}

/* Reduce vertical space for the FINAL SCORE header only; keep some bottom padding */
.card-header.boxscore-card-header {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
}

@media (max-width: 576px) {
    .boxscore-header .team-score-large {
        font-size: 2.1rem; /* ~30% larger */
    }
    .boxscore-header .team-abbr {
        font-size: 0.9rem;
    }
    .team-logo-lg {
        width: 40px;
        height: 40px;
    }
    .team-name {
        font-size: 18px;
    }
}

.team-score.winner {
    color: #000;
    font-weight: 800;
}

.game-action {
    border-top: 1px solid #eee;
    padding-top: 6px;
    text-align: center;
}

.watch-link {
    font-size: 0.75rem;
    color: #6441a5; /* Twitch Purple */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.watch-link:hover {
    text-decoration: none;
    color: #503484;
}

/* Season and Simple header styles */
.season-header, .simple-header {
    background-color: white;
    border-bottom: 3px solid #003366;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.season-header h1 {
    color: #003366;
    margin: 0 0 8px 0;
}

.season-nav {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.simple-header h1 {
    color: #003366;
    margin: 0;
}

.game-teams {
    font-size: 0.95em;
    margin-bottom: 8px;
    text-align: center;
}

.team-name {
    display: block;
    font-weight: bold;
    color: #003366;
}

.score-separator {
    display: block;
    font-size: 0.8em;
    color: #999;
    margin: 5px 0;
}

.game-score-values {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 8px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}

.score {
    font-size: 1.5em;
    font-weight: bold;
    color: #003366;
}

.home-score {
    color: #28a745;
}

.game-date {
    font-size: 0.85em;
    color: #666;
    text-align: center;
}

.no-games {
    color: #999;
    font-style: italic;
    text-align: center;
}

/* Flash Messages */
.flash-messages {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 20px;
}

.alert {
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: var(--border-radius-element);
    border-left: 4px solid;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-left-color: #dc3545;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left-color: #17a2b8;
}

/* Container and Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: 60vh;
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border-radius: var(--border-radius-container);
    overflow: hidden;
}

thead {
    background-color: #003366;
    color: white;
}

th {
    padding: 12px;
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

td {
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

th:last-child, td:last-child {
    border-right: none;
}

tbody tr:hover {
    background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Leader Cards */
.leader-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.leader-card {
    background-color: white;
    border-radius: var(--border-radius-container);
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    container-type: inline-size;
}

.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Container-query scaling for homepage leader cards */
@container (max-width: 220px) {
    .leader-card-value {
        font-size: 1.8em;
    }
    .leader-card-title,
    .leader-card-player {
        font-size: 0.85em;
    }
}

@container (max-width: 170px) {
    .leader-card-value {
        font-size: 1.4em;
        margin: 6px 0;
    }
    .leader-card-title,
    .leader-card-player {
        font-size: 0.78em;
        margin-bottom: 4px;
    }
}

.leader-card-title {
    color: #003366;
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 10px;
}

.leader-card-value {
    font-size: 2.5em;
    color: #003366;
    font-weight: bold;
    margin: 10px 0;
}

.leader-card-player {
    color: #666;
    font-size: 0.95em;
    margin: 10px 0;
}

.leader-card-team {
    color: #999;
    font-size: 0.85em;
    margin-bottom: 10px;
}

.view-all-btn {
    background-color: #003366;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: var(--border-radius-element);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.view-all-btn:hover {
    background-color: #00509e;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #003366;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-element);
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1em;
}

/* Team Banner (shared) */
.team-banner {
    padding: 0;
    margin: 0;
    text-align: center;
    position: relative;
    overflow: hidden; /* Contain background elements */
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.team-banner::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url('images/ico.png');
    background-repeat: repeat;
    background-size: 70px;
    opacity: 0.08;
    filter: grayscale(100%);
    z-index: 0;
    pointer-events: none;
    transform: rotate(-15deg);
}

.team-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 20px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.team-banner-logo {
    height: 85%; /* relative to banner height */
    width: auto;
    max-height: 250px;
    object-fit: contain;
    /* show logo in full color (no global opacity) but keep it behind content */
    opacity: 1; /* ensure logo colors render fully */
    /* boost watermark contrast slightly so logos with similar colors remain readable */
    filter: brightness(1.08) contrast(1.08) saturate(1.12) drop-shadow(0 2px 6px rgba(0,0,0,0.12));
    position: absolute;
    left: 2%; /* 2% away from left edge for symmetry */
    top: 50%;
    transform: translateY(-50%);
    z-index: 0; /* behind content */
    pointer-events: none;
    transition: all 0.3s ease;
}

@media (max-width: 1280px) {
    .team-banner { min-height: 240px; }
    .team-banner-logo { left: 20px; }
}

/* Rating badges: white text + black drop shadow (applies to roster and player pages) */
.ovr-badge-large,
.hero-ovr-badge,
.stat.ovr-stat,
.val-badge,
.group-badge {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.85) !important;
    z-index: 3; /* ensure badges sit above overlays */
}

/* Hero-only rotating glow for Superstar tiers */
.superstar-glow-element {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(248, 213, 149, 0.8) 40deg,
        rgba(248, 213, 149, 0.4) 80deg,
        transparent 120deg,
        rgba(248, 213, 149, 0.6) 200deg,
        rgba(248, 213, 149, 0.3) 280deg,
        transparent 360deg
    );
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
    animation: superstarRotate 22s linear infinite;
    right: var(--hero-edge-offset);
    top: 50%;
    transform: translateY(-50%);
}

@keyframes superstarRotate {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

.player-hero .hero-ovr-badge.superstar-glow {
    position: relative;
    z-index: 1;
}

/* Player name styling */
.player-hero-name,
.player-name-box h1 {
    color: #FFFFFF;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.85);
    z-index: 3; /* ensure names appear above any background overlays */
    position: relative;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Centered captain badge under player meta (compact) */
.captain-badge-centered {
    display: inline-block;
    margin: 8px auto 0 auto;
    background: #D4AF37 !important; /* gold */
    color: #FFFFFF !important;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    text-align: center;
    /* match roster badge visual: white highlight above + soft dark shadow */
    box-shadow: 0 -2px 6px rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.12) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.95) !important;
}
.captain-badge-centered i { font-size: 0.85rem; margin-right: 6px; opacity: 1; color: #FFFFFF; }

/* Captain action button (Make/Remove Captain) */
.btn-captain {
    background: #D4AF37 !important; /* gold */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--border-radius-element) !important;
    font-weight: 700 !important;
    box-shadow: 0 -2px 6px rgba(255,255,255,0.16), 0 6px 18px rgba(0,0,0,0.14) !important;
}

/* Small captain badge used in rosters */
.captain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #D4AF37;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
    box-shadow: 0 -2px 6px rgba(255,255,255,0.18), 0 6px 14px rgba(0,0,0,0.12);
    text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

/* Hero-specific captain badge variant */
.captain-badge-hero {
    background: #D4AF37;
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 -2px 6px rgba(255,255,255,0.18), 0 6px 14px rgba(0,0,0,0.12);
    text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.player-hero-details { text-align: center; }
.captain-player-centered {
    display: inline-flex !important;
    margin: 8px auto 0 auto !important;
    background: #FFD700 !important;
    background-color: #FFD700 !important;
    background-image: none !important;
    color: #000000 !important; /* ensure black text on player page */
    position: relative !important;
    z-index: 80 !important;
    padding: 6px 12px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* standard dark shadow for the pill */
    text-shadow: 0 1px 0 #FFFFFF !important; /* crisp white bottom drop shadow for the text */
    overflow: visible !important;
}

.captain-player-centered i { color: #d35400 !important; margin-right: 6px; }
/* Ensure responsive scaling */
@media (max-width: 992px) {
    .team-banner { min-height: 200px; }
    .team-banner-logo { left: 15px; }
}

@media (max-width: 768px) {
    .team-banner { min-height: 160px; padding: 40px 20px; }
    .team-banner-content { padding-left: 0 !important; }
    .team-banner-logo { 
        height: 60px !important; 
        width: 60px !important; 
        left: 10px !important; 
        top: 10px !important; 
        transform: none !important;
    }
}

.team-banner-name {
    color: white;
    margin: 0;
    font-size: 2.5rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
    text-decoration: none;
    border-bottom: none;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    text-align: center;
}

.team-banner-wordmark {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, 0.55));
    transform: none;
    image-rendering: auto;
    position: relative;
    z-index: 2;
}

.team-banner-wordmark.wordmark-no-shadow {
    filter: none;
}

.team-banner-wordmark-wrap {
    width: min(92vw, 560px);
    height: 140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    overflow: visible;
}

@media (max-width: 992px) {
    .team-banner-wordmark-wrap {
        width: min(90vw, 460px);
        height: 120px;
    }
}

@media (max-width: 430px) {
    .team-banner-wordmark-wrap {
        width: min(88vw, 300px);
        height: 88px;
    }
}

@media (max-width: 375px) {
    .team-banner-wordmark-wrap {
        width: min(88vw, 280px);
        height: 80px;
    }
}

.btn:hover {
    background-color: #00509e;
}



.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Google Sign-In Button */
.btn-google {
    display: inline-block;
    background: #dd4b39;
    color: white;
    padding: 12px 20px;
    border-radius: var(--border-radius-element);
    text-decoration: none;
    font-weight: bold;
    margin: 10px 10px 10px 0;
    transition: background 0.3s;
}
.btn-google:hover {
    background: #c23321;
}

/* Discord Sign-In Button */
.btn-discord {
    display: inline-block;
    background: #5865F2;
    color: white;
    padding: 12px 20px;
    border-radius: var(--border-radius-element);
    text-decoration: none;
    font-weight: bold;
    margin: 10px 10px 10px 0;
    transition: background 0.3s;
}
.btn-discord:hover {
    background: #4752C4;
}

/* Forms */
.styled-form {
    background-color: white;
    padding: 20px;
    border-radius: var(--border-radius-container);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 20px auto;
}

.styled-form label {
    display: block;
    margin: 15px 0 5px 0;
    font-weight: bold;
    color: #333;
}

form input,
form textarea,
form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-element);
    font-family: inherit;
    font-size: 1em;
}

form textarea {
    resize: vertical;
    min-height: 120px;
}

form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 5px rgba(0, 51, 102, 0.3);
}

form input[type="submit"] {
    background-color: #003366;
    color: white;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

form input[type="submit"]:hover {
    background-color: #00509e;
}

/* Links */
a {
    color: #003366;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

/* Headings */
h1, h2, h3 {
    color: #003366;
    margin: 20px 0 10px 0;
}

h1 {
    font-size: 2.5em;
    border-bottom: 3px solid #003366;
    padding-bottom: 10px;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.3em;
}

/* Footer */
.footer {
    background-color: #003366;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 3px solid #00509e;
    flex-shrink: 0;
}
.footer p, .footer a, .footer small {
    color: white !important;
}
.footer a:visited {
    color: white !important;
}
.footer a:hover {
    color: #cce0ff !important;
    text-decoration: underline;
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    gap: 10px;
}

.tab-button {
    background-color: white;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 1em;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tab-button.active {
    color: #003366;
    border-bottom-color: #003366;
    font-weight: bold;
}

.tab-button:hover {
    color: #003366;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-menu.active {
        max-height: 400px;
    }

    .nav-menu li {
        border-right: none;
        border-bottom: 1px solid #00509e;
    }

    .game-score {
        min-width: 100%;
    }

    table {
        font-size: 0.9em;
    }

    th, td {
        padding: 8px;
    }

    /* Mobile: hide the visible scrollbar for tab strip while keeping horizontal swipe */
    .player-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar visually while keeping functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }
    .player-tabs::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
        height: 0; /* collapse scrollbar height */
    }

    .leader-cards {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    .container {
        padding: 10px;
    }
}
/* Authentication Pages */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
    background: linear-gradient(135deg, #003366 0%, #005fa3 100%);
}

.auth-card {
    background: white;
    border-radius: var(--border-radius-container);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.auth-card h1 {
    color: #003366;
    margin-bottom: 10px;
    text-align: center;
    font-size: 2em;
}

.auth-card .subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.95em;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: #003366;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.form-control {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-element);
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.form-errors {
    color: #d32f2f;
    font-size: 0.85em;
    margin-top: 5px;
}

.form-errors span {
    display: block;
    margin-top: 3px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-element);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #003366;
    color: white;
}

.btn-primary:hover {
    background-color: #00509e;
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

.divider {
    text-align: center;
    color: #999;
    margin: 30px 0;
    font-size: 0.9em;
}

.oauth-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-oauth {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    font-weight: 600;
}

.btn-oauth:hover {
    background-color: #efefef;
    border-color: #999;
}

.oauth-icon {
    margin-right: 10px;
    font-size: 1.1em;
}

.btn-google {
    border-color: #4285f4;
}

.btn-google:hover {
    background-color: #f5f5f5;
}

.btn-discord {
    border-color: #5865f2;
}

.btn-discord:hover {
    background-color: #f5f5f5;
}

.auth-footer {
    text-align: center;
    margin-top: 25px;
    color: #666;
    font-size: 0.95em;
}

.auth-footer a {
    color: #003366;
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: none;
}

@media (max-width: 600px) {
    .auth-card {
        padding: 30px 20px;
    }

    .auth-card h1 {
        font-size: 1.6em;
    }
}

/* Update Rating Button */
.btn-update-rating {
    background: #28a745 !important; /* green */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--border-radius-element) !important;
    font-weight: 600 !important;
    box-shadow: 0 -2px 6px rgba(255,255,255,0.16), 0 4px 12px rgba(0,0,0,0.14) !important;
    transition: all 0.3s ease !important;
}

.btn-update-rating:hover {
    background: #218838 !important;
    transform: translateY(-1px);
    box-shadow: 0 -2px 8px rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.18) !important;
}

.btn-update-rating:active {
    transform: translateY(0);
    box-shadow: 0 -1px 4px rgba(255,255,255,0.16), 0 2px 8px rgba(0,0,0,0.14) !important;
}

.btn-update-rating i {
    margin-right: 6px;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.hidden {
    display: none;
}


/* Playoff Cutoff Line */
.playoff-cutoff td {
    border-bottom: 2px solid #ff0303 !important;
}

/* Standings Colors */
.streak-win, .diff-pos {
    color: #0eb459 !important;
}

.streak-loss, .diff-neg {
    color: #ff0303 !important;
}

/* Stat Cell Styles */
.nba-standings-table thead th:not(.team-col):not(.rank-col),
.stat-cell {
    font-family: 'Consolas', monospace;
    text-align: center;
}

.stat-cell.bold {
    font-weight: bold;
    color: #000;
}

/* Standings Table Styles (Migrated from standings.html) */
.standings-container {
    background-color: white;
    border-radius: var(--border-radius-container);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow-x: auto;
    padding: 20px;
}

.nba-standings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nba-standings-table thead th {
    background-color: #f8f9fa;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    padding: 12px 10px;
    text-align: center;
    border-bottom: 2px solid #dee2e6;
}

.nba-standings-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #333;
    vertical-align: middle;
}

.nba-standings-table tbody tr:hover {
    background-color: #f9f9f9;
}

.rank-col {
    width: 40px;
    color: #666;
    font-weight: bold;
}

.team-col {
    text-align: left !important;
    min-width: 200px;
}

/* Responsive Team Names */
.short-team-name {
    display: none;
}

@media (max-width: 768px) {
    .full-team-name {
        display: none;
    }
    .short-team-name {
        display: inline;
    }
    .team-col {
        min-width: 120px !important;
    }
    .nba-standings-table thead th,
    .nba-standings-table tbody td {
        padding: 8px 4px;
        font-size: 0.8rem;
    }
}

.team-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-logo-small {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Ensure recent games opponent logo keeps a fixed size and doesn't scale with viewport */
.stats-table .opp-logo,
.opp-cell .opp-logo {
    width: 30px;
    height: 30px;
    max-width: none;
    object-fit: contain;
    display: inline-block;
}

/* Center the OPP and RESULT columns without touching other columns */
#recentGamesTable th:nth-child(2),
#recentGamesTable td:nth-child(2),
#recentGamesTable th:nth-child(3),
#recentGamesTable td:nth-child(3) {
    text-align: center;
}

/* Center content inside OPP cell */
.opp-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

@media (max-width: 420px) {
    .stats-table .opp-logo,
    .opp-cell .opp-logo { width: 20px; height: 20px; }
}

.status-indicator {
    font-weight: bold;
    font-size: 0.9em;
    margin-right: 4px;
}

.status-x, .status-y, .status-w, .status-z {
    color: #000;
}

.status-e {
    color: #dc3545;
}

.standings-legend {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #666;
}

.standings-legend p {
    margin: 5px 0;
    display: flex;
    align-items: center;
}

.team-cell a {
    color: #003366;
    text-decoration: none;
    font-weight: 600;
}

.team-cell a:hover {
    text-decoration: none;
}

.clinched-indicator {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

/* Final fixes applied at EOF to override template/inline styles */
/* Restore breathing room between sections */
.card.mb-4 {
    margin-bottom: 1.25rem !important;
    margin-top: 0.6rem !important;
}

/* Remove excess bottom padding inside table cells and normalize heights */
.stats-input-table td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.stats-input-table td input[type="number"],
.stats-input-table td input[type="text"] {
    height: 28px !important;
    padding: 0.08rem 0.18rem !important;
}
.stats-input-table td .form-select,
.stats-input-table td .form-select-sm {
    height: 32px !important;
    padding: 0.12rem 0.4rem !important;
}

/* Ensure table container doesn't add extra padding at bottom */
.table-responsive {
    padding-bottom: 0 !important;
}

/* Tweak sticky column visuals if shadow creates perceived gap */
.sticky-col {
    box-shadow: none !important;
    border-right: 1px solid #e9ecef !important;
}


/* -- Boxscore column & spacing overrides (final tweaks) -- */
/* Player sticky column: 160px */
.sticky-col {
    min-width: 160px !important;
    max-width: 160px !important;
}

/* Status column (2nd column): fixed 94px for predictable layout */
.stats-input-table thead th:nth-child(2),
.stats-input-table tbody td:nth-child(2) {
    min-width: 94px !important;
    max-width: 94px !important;
    width: 94px !important;
    /* Allow inner select to use padding for arrow-safe area */
}

/* Stat columns (3rd and after): allow small flexible width but ensure 2 digits visible */
.stats-input-table thead th:nth-child(n+3),
.stats-input-table tbody td:nth-child(n+3) {
    min-width: 52px;
    max-width: 72px;
}

/* Numeric input boxes: fixed compact width to avoid clipping */
.stats-input-table td input[type="number"],
.stats-input-table td input[type="text"] {
    width: 52px !important;
    min-width: 44px;
    box-sizing: border-box;
    padding: 0.12rem 0.18rem;
    height: 30px; /* fixed height to avoid extra vertical space */
    line-height: 1;
}

/* Ensure horizontal scrolling on small viewports */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Remove extra bottom padding only for team stats tables */
.team-stats-card .card-body {
    padding-bottom: 0 !important;
}
.table {
    margin-bottom: 0 !important;
}

/* Restore breathing between sections and normalize row heights */
.mb-5.text-center { margin-bottom: 0.25rem !important; margin-top: 0.5rem; }
.card.mb-4 { margin-bottom: 1.6rem !important; margin-top: 0.6rem !important; }
.table-responsive { padding-bottom: 0 !important; }
.card hr.my-4 { margin: 0.9rem 0 !important; }

/* Base card spacing: only cards with class="card" and no extra classes */
.card:not([class*=" "]) {
    margin-bottom: 1.5rem;
}

/* Restore symmetric vertical spacing for cards and team banners to match top/bottom rhythm */
.card {
    margin-top: 0.6rem; /* matches other card top spacing */
    margin-bottom: 1.5rem; /* ensures bottom spacing for cards with extra classes */
}

.team-banner {
    margin-top: 0.6rem;
    margin-bottom: 1.5rem;
}

/* Tighten td vertical spacing while removing perceived bottom gap */
.stats-input-table tbody td {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    vertical-align: middle;
}

/* Prevent margin-collapsing on player pages so hero and cards keep their top/bottom spacing.
   Use `display: flow-root` to create a new block formatting context without introducing scrollbars on small screens. */
.nba-player-container,
.profile-layout,
.tab-content-wrapper {
    display: flow-root; /* establishes a new block formatting context and preserves margins */
    /* Prevent horizontal scrolling that sometimes appears on mobile while allowing vertical flow */
    overflow-x: hidden;
    overflow-y: visible;
}


/* Bootstrap Icons small visual tweaks */
.icon-box{
  display:inline-flex;
  width:1em;
  height:1em;
  align-items:center;
  justify-content:center;
  line-height:1;
  flex:0 0 auto;
}

.icon-box .bi{
  line-height:1;
}


/* Debugging helpers — opt-in by adding ?ui-debug=1 to the URL. */
/* Ensure inputs/selects don't add extra bottom spacing */
.stats-input-table td input[type="number"],
.stats-input-table td input[type="text"],
.stats-input-table td .form-select,
.stats-input-table td .form-select-sm {
    margin: 0 !important;
    padding: 0.08rem 0.18rem !important;
    height: 28px !important;
    line-height: 1 !important;
}

/* Cap row height to keep table compact */
.stats-input-table tbody tr {
    max-height: 44px;
}

/* Upload row: keep badge, select and file input on one line on wider viewports
   but allow wrapping on small screens. Ensure badge is vertically centered. */
.upload-row {
    align-items: center;
}
.upload-row > .col-auto,
.upload-row > .col-md-4,
.upload-row > .col {
    display: flex;
    align-items: center;
}
.upload-row .badge {
    margin: 0; /* remove stray margins */
    align-self: center;
}

/* Prevent overflow by allowing the file input column to shrink; ensure selects don't push button off */
.upload-row .upload-file-col {
    min-width: 0; /* allow flex children to shrink */
}
.upload-row .team-select {
    min-width: 120px;
    max-width: none;
}

/* At large desktops ensure controls remain on one line */
@media (min-width: 1200px) {
    .upload-row { flex-wrap: nowrap; }
}

/* Make the file column flexible and ensure button doesn't overlap */
.upload-row .upload-file-col {
    flex: 1 1 auto;
}
.upload-row > .col-auto.d-flex.align-items-center {
    flex: 0 0 auto;
}

/* Make team select and file input share equal width and scale together */
.upload-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.upload-row .team-select,
.upload-row .upload-file-col {
    flex: 1 1 0;
    min-width: 0; /* allow shrinking */
    max-width: none;
}
.upload-row .team-select { margin-right: 0; }
.upload-row .upload-file-col input[type="file"],
.upload-row .team-select {
    width: 100%;
}

/* On very small screens stack controls full width */
@media (max-width: 575.98px) {
    .upload-row { flex-wrap: wrap; }
    .upload-row .team-select,
    .upload-row .upload-file-col { flex-basis: 100%; }
    .upload-row > .col-auto.d-flex.align-items-center { width: 100%; justify-content: flex-end; }
}

/* Team column: badge above select, stack vertically */
/* Scope this to only the OCR/Upload section to avoid breaking tables */
.upload-row .team-col {
    display: flex;
    flex-direction: column;
}
.team-col .badge-above {
    align-self: flex-start;
}
.team-col .team-select {
    width: 100%;
}

/* If wrapping occurs on narrow viewports keep button below with spacing */
@media (max-width: 767px) {
    .upload-row { gap: 0.5rem; }
    .upload-row .col-auto.d-flex.align-items-center { width: 100%; justify-content: flex-end; }
    .upload-row .col-auto.d-flex.align-items-center .btn { width: auto; }
}


/* OCR card: match bottom padding to top padding for visual balance */
.ocr-card .card-body {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Increase bottom padding for quarter-length form control in modals/overlays
   to vertically align the box (targets the simulation modal input and similar) */
.modal .input-group .form-control,
.ocr-card .input-group .form-control {
    padding-bottom: 0.6rem !important;
    padding-top: 0.4rem !important;
}

/* If the input is disabled (as in the simulation modal) ensure visual alignment */
.modal .input-group .form-control[disabled],
.ocr-card .input-group .form-control[disabled] {
    padding-bottom: 0.55rem !important;
    color: #495057; /* keep muted text color */
}

/* Keep the two boxscore cards visually grouped while increasing space elsewhere */
.team-stats-card {
    margin-bottom: 0.35rem !important; /* keep tight under each team card */
    margin-top: 0.35rem !important;
}
.team-stats-card + .team-stats-card {
    margin-top: 0.15rem !important; /* very small gap between the two stats cards */
    margin-bottom: 0.6rem !important; /* ensure group has a little breathing room after second card */
}

/* For any other consecutive cards, keep larger spacing */
.card.mb-4:not(.team-stats-card) + .card.mb-4:not(.team-stats-card) {
    margin-top: 1rem !important;
}

/* Stats Page Container */
.stats-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Stats and General Tabs Styling */
.stats-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #dee2e6;
    background: #ffffff;
    padding: 0 10px;
}

.stats-tab {
    padding: 12px 24px;
    text-decoration: none;
    color: #6c757d;
    font-weight: 500;
    border-radius: 0;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: -1px;
    font-size: 0.95rem;
    cursor: pointer;
}

.stats-tab:hover {
    color: #003366;
}

.stats-tab.active {
    color: #003366;
    border-bottom-color: #003366;
    font-weight: 700;
}

/* Team Stats Page Styles */
.team-stats-container {
    background-color: white;
    padding: 20px;
    margin-bottom: 30px;
    overflow-x: auto;
}

.stats-card .team-stats-container {
    border-radius: 0;
    box-shadow: none;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.stats-type-select {
    padding: 8px 16px;
    border-radius: var(--border-radius-element);
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
    transition: all 0.2s ease;
}

.stats-type-select:hover {
    border-color: #003366;
    background-color: #fff;
}

.stats-type-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,51,102,0.1);
}

.nba-team-stats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: var(--border-radius-element);
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.nba-team-stats-table thead th {
    background-color: #f8f9fa;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    padding: 12px 20px 12px 10px; /* Increased right padding for arrow */
    text-align: center;
    border-bottom: 2px solid #dee2e6;
    position: relative;
}

.nba-team-stats-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.nba-team-stats-table thead th.sortable:hover {
    background-color: #e9ecef;
}

/* Sort indicators */
.nba-team-stats-table thead th.sortable::after {
    content: '↑'; /* Default space reserve or muted icon */
    position: absolute;
    right: 8px;
    opacity: 0;
    font-size: 0.8em;
    transition: opacity 0.2s ease;
}

.nba-team-stats-table thead th.sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
    color: #003366;
}

.nba-team-stats-table thead th.sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
    color: #003366;
}

.nba-team-stats-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #333;
    font-size: 0.95em;
}

.nba-team-stats-table tbody tr:hover {
    background-color: #f9f9f9;
}

.nba-team-stats-table .stat-bold {
    font-weight: bold;
    color: #000;
}

.stats-legend {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.85em;
    color: #666;
}

.stats-legend h4 {
    color: #003366;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.stats-legend p {
    margin: 5px 0;
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .nba-team-stats-table {
        font-size: 0.85em;
    }
    
    .nba-team-stats-table thead th,
    .nba-team-stats-table tbody td {
        padding: 8px 6px;
    }
}

@media (max-width: 768px) {
    .team-stats-container {
        padding: 15px;
        overflow-x: scroll;
    }
    
    .nba-team-stats-table {
        font-size: 0.8em;
        min-width: 800px;
    }
}


/* Scorecard Styles Added by Agent */

.season-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.nav-link {
    color: #003366;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.nav-link:hover {
    border-bottom-color: #003366;
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.standings-table thead {
    background-color: #003366;
    color: white;
}

.standings-table th {
    padding: 12px;
    text-align: left;
    font-weight: bold;
}

.standings-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}

.standings-table tbody tr:hover {
    background-color: #f9f9f9;
}

.rank {
    font-weight: bold;
    color: #003366;
    width: 50px;
    text-align: center;
}

.unclaimed-badge {
    background-color: #ffcccc;
    color: #c00;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bold;
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.team-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    container-type: inline-size;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.team-card-header {
    padding: 15px;
    /* background-color set inline */
}

.team-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.team-card-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.team-card-header h3 {
    margin: 0;
    font-size: 1.3em;
    line-height: 1.2;
}

.team-card-header h3 a {
    text-decoration: none;
    /* color and text-shadow set inline */
}

.team-card-body {
    padding: 15px;
}

.team-card-body p {
    margin: 10px 0;
    font-size: 0.95em;
}

.team-card-footer {
    padding: 12px 15px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}

/* Container-query scaling for team cards */
@container (max-width: 220px) {
    .team-card-header {
        padding: 10px;
    }
    .team-card-logo {
        width: 38px;
        height: 38px;
    }
    .team-card-header h3 {
        font-size: 1.05em;
    }
    .team-card-body,
    .team-card-footer {
        padding: 10px;
    }
    .team-card-body p {
        font-size: 0.85em;
        margin: 6px 0;
    }
}

.btn-small {
    flex: 1;
    padding: 8px 12px;
    background-color: #003366;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.btn-small:hover {
    background-color: #00509e;
}

.btn-claim-small {
    background-color: #ff9800;
}

.btn-claim-small:hover {
    background-color: #e68900;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.schedule-item {
    background-color: white;
    border: 1px solid #eee;
    padding: 8px 0;
    border-radius: 4px;
    margin-bottom: 15px;
}

.game-tv-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.game-tv-row.scorecard {
    display: grid;
    /* 5 Columns: [Away Team] [Score L] [Center] [Score R] [Home Team] */
    /* Give teams fixed width to prevent text length from shifting everything */
    grid-template-columns: 130px 60px 170px 60px 130px;
    column-gap: 0; 
    align-items: center;
    justify-items: center;
    /* Removed flex: 0 0 700px to allow card-wrapper to control the split */
    width: 100%;
    margin: 0;
}

.game-tv-row.scorecard .team-tv-col {
    width: 85px;
    flex-shrink: 0;
}

.game-tv-row.scorecard .score-v2 {
    width: 75px;
    flex-shrink: 0;
}

.game-tv-row.scorecard .game-center-v2 {
    /* matches pregame text width/btn width to prevent clipping */
    width: 120px;
    flex-shrink: 0;
}


/* --- CONSOLIDATED SCHEDULE CARD CSS --- */

/* 1. Base Scorecard Components */
.team-tv-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.team-logo-v2 { width: 60px; height: 60px; object-fit: contain; margin-bottom: 5px; }
.team-name-v2 { font-weight: 700; color: #444; text-decoration: none; font-size: clamp(0.85rem, 1.0vw + 0.5rem, 1.05rem); }
.team-name-v2:hover { text-decoration: underline; }

.score-v2 {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: #222;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
    box-sizing: border-box;
}
.score-v2.winner { color: #000; }
.score-v2.loser { color: #888; }
.score-v2:empty::after { content: '\00a0'; }

.game-center-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    text-align: center;
}
.game-status-v2 { font-weight: 900; font-size: clamp(0.85rem, 1.0vw + 0.4rem, 1.0rem); margin-bottom: 8px; color: #444; letter-spacing: 1px; }
.game-status-v2.final { color: #cc0000; }
.game-status-date, .game-status-time { font-size: 0.85rem; color: #444; }
.series-status {
    font-size: 0.8rem;
    font-weight: 800;
    color: #444;
    margin-top: 8px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}
.team-record { font-size: clamp(0.9rem, 1.2vw + 0.5rem, 1.3rem); color: #222; margin-top: 6px; font-weight: 700; line-height: 1; }

.btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    color: white;
    margin-top: 6px;
    height: 28px;
    min-width: 100px;
    box-sizing: border-box;
} 
.btn-v2-recap { background-color: #157347; }
.btn-v2-recap:hover { background-color: #13603a; }
.btn-v2-report { background-color: #ff9800; }
.btn-v2-report:hover { background-color: #e68900; }

.btn-v2 .btn-label-short { display: none; }

@media (max-width: 430px) {
    .btn-v2 {
        min-width: 84px;
        height: 24px;
        padding: 1px 6px;
        font-size: 0.60rem;
    }
    .btn-v2 .btn-label-full { display: none; }
    .btn-v2 .btn-label-short { display: inline; }
}
/* 2. Layout Wrapper (Desktop) - Modeled on Original but with Updated Widths */
.schedule-list-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0;
}

.schedule-card-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start; /* Changed from space-between to eliminate phantom gaps */
    gap: 0;
    padding: 0;
    width: 100%;
    background: #fff;
    /* border handled by schedule-item container */
} 

.game-tv-row.scorecard {
    flex: 0 0 420px;
    width: 420px;
    display: grid;
    grid-template-columns: 80px 70px 100px 70px 80px;
    column-gap: 0px; 
    align-items: center;
    padding: 12px 5px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
}

.game-tv-row.scorecard .team-tv-col:first-child,
.game-tv-row.scorecard .team-tv-col:last-child { align-items: center; text-align: center; }
.game-tv-row.scorecard .score-v2 { min-width: 0; }
.game-tv-row.scorecard .game-center-v2 { min-width: 0; }
.playoff-badge {
    display: block;
    max-width: 90px;
    height: auto;
    margin: 0 auto 2px auto;
}
.playoff-badge.finals-badge { max-width: 110px; }
.playoff-badge.vibrant-gold { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); animation: gold-pulse 8s infinite ease-in-out; }

.playoff-round-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.25px;
    line-height: 1.05;
    margin-bottom: 4px;
}
.playoff-badge-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6px;
}

.if-necessary-tag {
    font-size: 0.68rem;
    font-weight: 800;
    color: #9c6b00;
    background: #fff6e0;
    border: 1px solid #e6c98f;
    border-radius: 4px;
    padding: 2px 6px;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

@keyframes gold-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); }
    50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.7)); }
}

.leaders-wrap {
    flex: 0 0 430px !important; /* Reduced width to accommodate recap frame growth */
    width: 430px !important;
    display: flex;
    align-items: center;
    padding: 12px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
}

.recap-wrap {
    flex: 0 0 330px;
    width: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px; /* Match leaders-wrap padding exactly */
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
}

.recap-header { text-align: center; width: 100%; margin-bottom: 6px; margin-top: 0; font-size:0.9rem; font-weight:900; text-transform:uppercase; }

.recap-card {
    display: block;
    width: 100%; /* Fills available space after 12px padding on each side = 306px */
    height: 175px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: #f6f6f6;
    margin: 0;
    position: relative;
    transition: transform 0.2s ease;
}

.preview-card {
    cursor: pointer;
}

.preview-card:hover {
    /* Container scaling disabled - logos animate internally instead */
}

.recap-img-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; }
.recap-img-wrap img { width:100%; height:100%; object-fit: cover; display: block; }

.recap-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
}

.recap-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

/* Playoff series expanders */
.series-wrapper {
    border: 0;
    background: transparent;
    margin-bottom: 12px;
    overflow: visible;
    padding: 0;
}
.series-games { padding: 0; }

.series-toggle.series-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    color: #444;
}
.series-toggle.series-status:focus { outline: 2px solid #999; outline-offset: 2px; }
.status-caret-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #e6e6e6;
    flex-shrink: 0;
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
}
.status-caret-box i { font-size: 0.8rem; transition: transform 0.2s ease; color: #444; }
.series-wrapper.open .status-caret-box i { transform: rotate(180deg); }
.series-extra-card { transition: max-height 0.25s ease; }

/* Diagonal Split for Preview */
.diagonal-split {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.away-diagonal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 65% 0, 35% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 50%;
    z-index: 1;
    overflow: hidden;
}

.home-diagonal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(65% 0, 100% 0, 100% 100%, 35% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 50%;
    z-index: 0;
    overflow: hidden;
}

.recap-logo-bg-diagonal {
    position: absolute;
    width: 220px;
    height: 220px;
    object-fit: contain;
    opacity: 0.14;
    filter: grayscale(0.05) drop-shadow(0 3px 8px rgba(0,0,0,0.35));
    pointer-events: none;
}

.recap-logo-diagonal {
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    position: relative;
    z-index: 2;
}

.preview-card:hover .recap-logo-diagonal {
    transform: scale(1.15);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.8));
}

.preview-card:hover .away-diagonal .recap-logo-diagonal {
    transform: scale(1.05) translateX(-5px);
}

.preview-card:hover .home-diagonal .recap-logo-diagonal {
    transform: scale(1.05) translateX(5px);
}

.recap-play { display: none; }

.key-player-split {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.key-player-half {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--team-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}

.team-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    opacity: 0.15;
    z-index: 1;
}

.team-logo-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.key-player-img {
    width: 150%; /* Adjusted to 150% for optimal display without head cutoff */
    height: 150%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.recap-card:hover .key-player-img {
    transform: scale(1.02) translateY(0px);
}

.key-player-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.key-player-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.center-logo {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%) scale(0.9);
    transform-origin: top center;
    width: 60px;
    z-index: 3;
    /* Use the logo itself as a mask so the shine follows the logo shape */
    -webkit-mask-image: url("/static/images/logo_sm.png");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/static/images/logo_sm.png");
    mask-size: contain;
    mask-repeat: no-repeat;
}

.center-logo::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 150%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.6) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 4;
}

.recap-card:hover .center-logo::after,
.preview-card:hover .center-logo::after {
    animation: logo-shine 1s ease-in-out;
}

@keyframes logo-shine {
    0% { left: -150%; }
    100% { left: 150%; }
}

.center-logo img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* 3. Leaders Components */
.leaders-v2 { width: 100%; }
.leaders-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 8px;
}
.leaders-stats-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(28px, 44px));
    gap: 12px;
    font-weight: 700;
    color: #666;
    font-size: 0.85rem;
    justify-content: end;
    text-align: right;
} 
.leader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    gap: 8px;
    min-width: 0;
} 
.leader-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 0; overflow: hidden; }
.leader-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #eee; border: 1px solid #ddd; flex-shrink: 0; }
.leader-name { font-weight: 700; color: #222; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Leader card (stats page) has 3 children: rank / info / stat — needs grid */
.leader-card .leader-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 60px;
    column-gap: 8px;
}
.leader-sub { font-size: 0.8rem; color: #666; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(28px, 44px));
    gap: 12px;
    min-width: 110px;
    justify-content: end;
    font-weight: 700;
    color: #222;
    text-align: right;
    flex-shrink: 0;
}
/* Scoped to game_components leader rows only — stats page leader-stat
   has its own flex layout and must NOT have a fixed width or the
   stat value overflows leftward into the player photo. */
.leaders-v2 .leader-stat { width: 40px; text-align: right; }


/* 4. Responsive Rules (Modeled on Original but Updated for Widths) */

@media (max-width: 1200px) {
    /* TABLET / SMALL LAPTOP: Vertical Stack (Requested: "convert to vertical stack at tablet view") */
    /* Since 420+460+300 = 1180px, it barely fits 1200px. Safer to stack or wrap earlier. */
    
    .schedule-card-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    
    .game-tv-row.scorecard {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        /* Keep scorecard layout horizontal */
        grid-template-columns: 1fr 70px 100px 70px 1fr; 
    }

    .leaders-wrap {
        width: 100% !important;
        flex: 0 0 auto !important;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 12px 18px;
    }

    .recap-wrap {
        width: 100%;
        flex: 0 0 auto;
        padding: 15px;
    }
    
    /* Ensure recap card is well-sized in stack mode */
    .recap-card, .recap-img-wrap, .recap-placeholder {
        width: 100% !important;
        max-width: 320px; /* Cap width for better look */
        height: auto !important;
        aspect-ratio: 16/9;
    }
}

@media (max-width: 768px) {
    /* MOBILE */
    .game-tv-row.scorecard {
        grid-template-columns: 1fr 60px 100px 60px 1fr;
    }
    .score-v2 { font-size: 2.2rem; }
    .btn-v2 { min-width: 85px; }
    .leader-row { padding: 8px 0; }
}

@media (max-width: 440px) {
    /* SMALL MOBILE */
    .schedule-item,
    .schedule-card-wrapper,
    .game-tv-row.scorecard {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .game-tv-row.scorecard {
        grid-template-columns: minmax(0, 1fr) 44px minmax(76px, 84px) 44px minmax(0, 1fr);
        padding: 10px 2px;
    }
    .score-v2 { font-size: 1.6rem; }
    .game-center-v2 { min-width: 0; padding: 0 2px; }
    .game-tv-row.scorecard .team-tv-col,
    .game-tv-row.scorecard .game-center-v2 {
        min-width: 0;
        width: 100%;
    }
    .team-logo-v2 { width: 45px; height: 45px; }
    .team-record { display: none; }

    /* Standings sticky columns superseded by two-pane DOM split — see
       .standings-grid-shell CSS and initTwoPaneStandings() in base.html. */
    .leader-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        min-width: 90px;
        width: 90px;
    }
    .leaders-v2 .leader-stat { width: auto; } /* scoped — see above */

    /* Align "PTS / REB / AST" header labels with the actual stat number
       columns below. The header column was 150px but mobile stat cells
       are only 3 × 30px + 2 × 6px gap = 102px — causing the labels to
       visually float over the player photo area. */
    .leaders-header {
        grid-template-columns: minmax(0, 1fr) 90px;
        font-size: clamp(0.66rem, 2.2vw, 0.74rem);
    }
    .leaders-stats-header {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        width: 90px;
        min-width: 90px;
        font-size: clamp(0.58rem, 1.9vw, 0.66rem);
    }
    .leaders-stats-header span {
        min-width: 0;
        width: auto;
    }
    .leaders-v2 .leader-name { font-size: clamp(0.70rem, 2.5vw, 0.78rem); }
    .leaders-v2 .leader-sub { font-size: clamp(0.56rem, 1.9vw, 0.64rem); }
    .leaders-v2 .leader-stat { font-size: clamp(0.72rem, 2.3vw, 0.82rem); }
    .leader-img { width: 32px; height: 32px; }

    /* Prevent team names from wrapping inside the narrow scorecard columns
       (~88px each at 375px viewport). Wrapping makes the scorecard very
       tall and pushes the TOP PLAYERS section far down the screen. */
    .team-name-v2 {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }
    .team-logo-v2 { width: 40px; height: 40px; }
}

/* ============================================================================
   SUBROW FLUSH - Remove rounded corners from table headers that sit under
   card headers to prevent visual gaps from double-rounded corners.
   Apply to <thead>, <tr>, or wrapper elements that are direct children of
   card-body and need to sit flush against a rounded card-header above.
   ============================================================================ */

/* Generic reusable class for any subrow that needs flush corners */
.subrow-flush,
.subrow-flush th,
.subrow-flush td,
.subrow-flush > tr > th,
.subrow-flush > tr > td {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Card-based tables: remove corner radius from thead sitting under card-header */
.card .card-body .table-responsive,
.card .card-body .table-responsive .table,
.card .card-body .table-responsive .table thead,
.card .card-body .table-responsive .table thead.table-light,
.card .card-body .table-responsive .table thead tr,
.card .card-body .table-responsive .table thead th,
.card .card-body .table,
.card .card-body .table thead,
.card .card-body .table thead.table-light,
.card .card-body .table thead tr,
.card .card-body .table thead th {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Bootstrap 5 table-light override - targets the specific bg color class */
.table > thead.table-light,
.table > thead.table-light > tr,
.table > thead.table-light > tr > th,
thead.table-light,
thead.table-light > tr,
thead.table-light > tr > th {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* First and last cells in header rows - ensure no corner radius leaks through */
.card .card-body .table thead th:first-child,
.card .card-body .table thead th:last-child,
thead.table-light tr th:first-child,
thead.table-light tr th:last-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Override Bootstrap's :first-child/:last-child radius on table cells */
.table > :not(caption) > * > *,
.card .table > :not(caption) > * > * {
    border-radius: 0 !important;
}

/* Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px 0;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-consent-text {
    flex: 1;
    min-width: 200px;
    font-size: 14px;
    line-height: 1.4;
}

.cookie-consent-text a {
    color: #007bff;
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-consent-buttons .btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
}

.cookie-consent-buttons .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.cookie-consent-buttons .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

@media (max-width: 768px) {
    .cookie-consent-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cookie-consent-buttons {
        justify-content: center;
    }
}

/* Footer Disclaimer */
.footer .disclaimer-text {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 12px;
    line-height: 1.4;
    text-align: center;
}

.footer .disclaimer-text p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .footer .disclaimer-text {
        font-size: 0.75rem;
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ============================================================
   MOBILE RESPONSIVENESS — iPhone / Tablet Pass (March 2026)
   Breakpoint tiers aligned with site nav collapse (1340px):
     ≤ 992px  tablet portrait
     ≤ 768px  mobile landscape / small tablets (Bootstrap md)
     ≤ 576px  large phones portrait (Bootstrap sm)
     ≤ 430px  compact phones — iPhone 14 standard, SE
   All rules use max-width and are invisible to desktop.
   ============================================================ */

/* --- iOS form input zoom prevention ---
   iOS Safari auto-zooms any focused input with font-size < 16px,
   throwing the entire page layout out of position. */
@media (max-width: 768px) {
    input,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --- Sticky first column inside .table-responsive ---
   position: sticky works inside overflow-x: auto (Bootstrap
   .table-responsive). Explicit backgrounds prevent content
   from bleeding through striped rows as the table scrolls.
   Excluded from .two-pane-active (standings): those use DOM-split
   frozen panes instead, where sticky is not needed. */
@media (max-width: 768px) {
    .table-responsive:not(.two-pane-active) table thead th:first-child,
    .table-responsive:not(.two-pane-active) table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #fff;
        will-change: transform;
    }

    /* Bootstrap striped rows */
    .table-responsive:not(.two-pane-active) .table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* Bootstrap dark thead */
    .table-responsive:not(.two-pane-active) table thead.table-dark th:first-child,
    .table-responsive:not(.two-pane-active) .thead-dark th:first-child {
        background-color: #212529;
        color: #fff;
    }

    /* Light thead (fallback) */
    .table-responsive:not(.two-pane-active) table thead:not(.table-dark) th:first-child {
        background-color: #f8f9fa;
    }
}

/* --- Controls toolbar wrapping ---
   Flex toolbars with border-left separators overflow the viewport
   at narrow widths, making the page body wider than the screen —
   the root cause of elements appearing to "float off screen". */
@media (max-width: 768px) {
    .stats-header,
    .stats-controls-row,
    .filter-toolbar,
    .controls-row {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }

    /* The inner left group (season select + toggle switches) */
    .stats-header > div:first-child {
        flex-wrap: wrap;
        row-gap: 6px;
        width: 100%;
    }

    /* Border-left separator toggles become top-border rows when wrapped */
    #qualifiedToggleContainer,
    #advancedToggleContainer {
        border-left: none !important;
        border-top: 1px solid #ddd;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-top: 6px;
        width: 100%;
    }

    /* AVERAGES / TOTALS toggle moves to its own full-width row */
    .stats-header .stat-mode-toggle {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --- Last-games widget nav tap targets ---
   iOS HIG minimum is 44×44px; buttons shrink to 30×30 at 420px. */
@media (max-width: 430px) {
    .week-nav-edge-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* --- Coach profile header stack ---
   .team-header has !important on 3-column grid; override per tier. */
@media (max-width: 992px) {
    .coach-card .team-header {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 600px) {
    .coach-card .team-header {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

/* --- stats-table-container overflow safety ---
   player_detail.html defines this in a page <style> block;
   ensure it takes effect across all mobile viewports site-wide. */
@media (max-width: 768px) {
    .stats-table-container {
        overflow-x: auto;
    }
}

/* --- Schedule: calendar prev/next tap targets --- */
@media (max-width: 768px) {
    #calendar-dropdown .btn-sm.p-0 {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Admin nav tabs: horizontal scroll on mobile ---
   Prevents the tab strip from wrapping onto two lines. */
@media (max-width: 768px) {
    .admin-tabs-scrollable {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .admin-tabs-scrollable .nav-item {
        flex-shrink: 0;
    }
}

/* --- Achievement badge icons: reduce size on mobile ---
   AchievementIconWrapper is hardcoded 64px with no media query;
   at narrow widths this squeezes the award text column. */
@media (max-width: 768px) {
    .AchievementIconWrapper {
        width: 48px !important;
        height: 48px !important;
        margin-right: 8px;
    }
    .coach-profile-container .AchievementIcon.bare,
    .coach-profile-container .AchievementIcon.fancy {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.6rem !important;
    }
    .fancy-achievements-active .coach-profile-container .AchievementIcon.fancy {
        width: 56px !important;
        height: 56px !important;
        font-size: 2rem !important;
    }
}

@media (max-width: 430px) {
    .AchievementIconWrapper {
        width: 44px !important;
        height: 44px !important;
        margin-right: 6px;
    }
    .coach-profile-container .AchievementIcon.bare,
    .coach-profile-container .AchievementIcon.fancy {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.55rem !important;
    }
    .fancy-achievements-active .coach-profile-container .AchievementIcon.fancy {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.85rem !important;
    }
    .award-winner-desc {
        font-size: 0.78em !important;
        line-height: 1.2 !important;
    }
    .award-winner-name {
        font-size: 0.88em !important;
    }
}

/* =============================================================================
   TWO-PANE FROZEN STANDINGS — iOS Safari safe frozen column
   JavaScript in base.html (initTwoPaneStandings) splits each
   .table-responsive > .nba-standings-table into:
     • .standings-frozen-pane  — rank + team columns, overflow hidden
     • .standings-scroll-pane  — all stat columns, overflow-x auto
   The wrapper gets .two-pane-active so other sticky rules skip it.
   is-expanded toggling still works: the class is on .table-responsive
   and cascades through the shell to the scroll table's expanded-cols.
   The two-pane split is a Safari iOS workaround only — non-iOS browsers
   use native position:sticky and never receive .two-pane-active.
   ============================================================================= */

/* Standings table wrapper — renders flat on the page background with no
   card container. Corner clipping is no longer needed here because
   border-collapse:separate on .nba-standings-table already prevents border
   bleed, and the two-pane panes clip via clip-path on their own containers. */
.standings-table-responsive {
    background: transparent;
}
.standings-table-responsive.two-pane-active {
    background: transparent;
    box-shadow: none;
}

/* Column dividers on standings tables — controlled by the 'standings_show_col_lines'
   admin toggle. Only active in standard (non-split) layout; the @media (max-width:440px)
   block has its own scoped rules for the .standings-scroll-pane. */
body.standings-col-lines-on .standings-table-responsive:not(.two-pane-active) .nba-standings-table th,
body.standings-col-lines-on .standings-table-responsive:not(.two-pane-active) .nba-standings-table td {
    border-right: 1px solid #eff2f5;
}
body.standings-col-lines-on .standings-table-responsive:not(.two-pane-active) .nba-standings-table th:last-child,
body.standings-col-lines-on .standings-table-responsive:not(.two-pane-active) .nba-standings-table td:last-child {
    border-right: none;
}

@media (max-width: 768px) {
    .table-responsive.two-pane-active {
        overflow: visible !important;
    }

    .standings-grid-shell {
        display: grid;
        /* JS measures the frozen pane and sets this explicitly */
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
        overflow: hidden;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        align-items: start;
        column-gap: 0;
    }

    .standings-frozen-pane {
        overflow: hidden;
        /* Keep the frozen pane visually flush with the scroll pane.
           The divider is drawn on the scroll table cells so it cannot
           extend below the final synced row. */
        box-shadow: none;
        position: relative;
        z-index: 1;
        width: auto;
        min-width: 0;
    }

    .standings-scroll-pane {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        background: #fff;
        touch-action: pan-x;
    }

    /* Both inner tables: separate border model so thead sticky works
       correctly (collapsed borders break sticky on iOS). */
    .standings-frozen-pane .nba-standings-table,
    .standings-scroll-pane .nba-standings-table {
        border-collapse: separate;
        border-spacing: 0;
        margin-bottom: 0;
        box-shadow: none;
        border-radius: 0;
        background: #fff;
    }

    .standings-frozen-pane .nba-standings-table {
        width: max-content;
        min-width: max-content;
    }

    .standings-scroll-pane .nba-standings-table {
        /* Grow to fit all stat columns regardless of pane width */
        width: max-content;
        min-width: max-content;
    }

    /* Sticky header row inside each pane */
    .standings-frozen-pane .nba-standings-table thead th,
    .standings-scroll-pane .nba-standings-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* Row heights are synchronized by JS (base.html) per row pair.
       Keep cells auto-height here to avoid clipping team/logo content. */
    .standings-frozen-pane .nba-standings-table th,
    .standings-frozen-pane .nba-standings-table td,
    .standings-scroll-pane .nba-standings-table th,
    .standings-scroll-pane .nba-standings-table td {
        box-sizing: border-box;
        border-right: none !important;
        border-bottom: 1px solid #eff2f5 !important;
        vertical-align: middle;
        line-height: 1.2;
    }

    /* Keep playoff cutoff perfectly level across both panes. */
    .standings-table-responsive.two-pane-active .nba-standings-table tbody tr.playoff-cutoff td {
        border-bottom-color: transparent !important;
        box-shadow: inset 0 -2px 0 #ff0303;
    }

    /* Draw the split seam from the frozen pane side only so it never
       overhangs into empty space below the final synced row. */
    .standings-frozen-pane .nba-standings-table thead th:last-child,
    .standings-frozen-pane .nba-standings-table tbody td:last-child {
        border-right: 1px solid #e5e7eb !important;
    }
}

/* iPhone-only pane corner symmetry:
   left pane = rounded left, flat right;
   right pane = flat left, rounded right. */
@media (max-width: 440px) {
    .standings-grid-shell {
        border-radius: 0;
        overflow: hidden;
        background: transparent;
        /* Remove the 768px drop-shadow so it doesn't leak into the margin
           gap between conference table sections on iPhone. */
        box-shadow: none;
    }
    .standings-frozen-pane,
    .standings-scroll-pane,
    .standings-frozen-pane .nba-standings-table,
    .standings-scroll-pane .nba-standings-table,
    .standings-frozen-pane .nba-standings-table th,
    .standings-frozen-pane .nba-standings-table td,
    .standings-scroll-pane .nba-standings-table th,
    .standings-scroll-pane .nba-standings-table td {
        border-radius: 0 !important;
    }

    /* Outer shape: left pane rounded left, right pane rounded right.
       clip-path is used on both panes because Safari iOS does not reliably
       clip border-radius when overflow-x:auto is set, and applying radius to
       individual corner cells caused a double-rounding "overshoot" artefact.
       The blanket border-radius:0 rule above already zeroes all cell radii. */
    .standings-frozen-pane {
        border-radius: 12px 0 0 12px;
        overflow: hidden;
        clip-path: inset(0 round 12px 0 0 12px);
    }
    .standings-scroll-pane {
        border-radius: 0 12px 12px 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        clip-path: inset(0 round 0 12px 12px 0);
    }

    /* Seam divider between the two panes */
    .standings-frozen-pane .nba-standings-table thead th:last-child,
    .standings-frozen-pane .nba-standings-table tbody td:last-child {
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #e5e7eb;
    }

    /* Standings page parity + requested spacing tweak:
       in the split right pane, first two columns are W and L. */
    .standings-table-responsive.two-pane-active .standings-scroll-pane .nba-standings-table th:nth-child(1),
    .standings-table-responsive.two-pane-active .standings-scroll-pane .nba-standings-table td:nth-child(1),
    .standings-table-responsive.two-pane-active .standings-scroll-pane .nba-standings-table th:nth-child(2),
    .standings-table-responsive.two-pane-active .standings-scroll-pane .nba-standings-table td:nth-child(2) {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* The pane div's own background can leave a sub-pixel white fringe at the
       clip-path curved corners on iOS Safari. The table inside already paints
       #fff so rows stay white; making the pane container transparent eliminates
       the compositing artefact. */
    .standings-scroll-pane {
        background: transparent;
    }

    /* Restore the visible header underline that the shared th/td rule overrides */
    .standings-scroll-pane .nba-standings-table thead th {
        border-bottom: 2px solid #dee2e6 !important;
    }
    /* Frozen pane: match the scroll pane's thicker header underline */
    .standings-frozen-pane .nba-standings-table thead th {
        border-bottom: 2px solid #dee2e6 !important;
    }
    /* Column dividers — controlled by admin toggle (standings-col-lines-on) */
    body.standings-col-lines-on .standings-scroll-pane .nba-standings-table th,
    body.standings-col-lines-on .standings-scroll-pane .nba-standings-table td {
        border-right: 1px solid #eff2f5 !important;
    }
    body.standings-col-lines-on .standings-scroll-pane .nba-standings-table th:last-child,
    body.standings-col-lines-on .standings-scroll-pane .nba-standings-table td:last-child {
        border-right: none !important;
    }
}