body {
            /* background-image: url("/backdrop.jpg");*/
            background-color: #2c2a2e;
            min-height: 100vh;
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
            background-repeat: no-repeat; 
            margin: 0;
            padding: 15px;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
        }
        .container {
            max-width: 1000px; /* Width of the main table */        
        }
        .header-container {
            display: flex;
            align-items: center;            
            margin-bottom: 5px; /* Space below logo/title */
        }
        .site-logo {
            width: 90px; /* Adjust size as needed */
            height: 90px;
            margin-right: 10px; /* Space between logo and title */
        }
        .site-title {
            font-size: 2.5rem; /* Smaller than original 2rem */
            margin: 0; /* Remove default h1 margin */
        }
        .header-divider {
           border: 0;
           border-top: 1px solid #d3d3d3; /* Light grey line */
           margin: 10px 0; /* Space above and below the line */
        }
        #standings.tab-pane,
        #daily-scores.tab-pane {
            padding-top: 0; /* Remove padding-top entirely */
        }
        #players.tab-pane #roster.tab-pane #schedule.tab-pane{
            padding-top: 5px; /* Reduce padding-top from default 15px */
        }
        .accordion-header {
            background-color: #02001f;
        }
        .accordion-button {
            background-color: #4a4a4a; /* Dark grey */
            color: #ffffff; /* White text */
        }
        .accordion-button:not(.collapsed) {
            background-color: #5e5e5e; /* Slightly lighter grey when expanded */
            color: #ffffff;
        }
        .accordion-button:focus {
            box-shadow: none; /* Remove blue outline */
            border-color: #5e5e5e;
        }
        .player-bio {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 10px;
        }
        .bio-pic {
            width: 100%;  
            height: auto;          
            border-radius: 4px;            
        }
        .bio-details {
            text-align: left;
        }
        .bio-details p {
            margin: 0px 0;
            flex: 1;
        }
        .player-container {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .player-bio .flag-img {            
            width: 24px;
            height: 24px;
            vertical-align: middle;
        }
        .card {
            margin-bottom: 15px;
            border: none;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .card-body {
            padding-top: 5px; /* Reduce padding-top from default 16px to 5px */
        }
        h1 {
            font-size: 1.75rem;
        }
        h2 {
            font-size: 1.25rem;
        }
        h4 {
            font-size: 1rem;
        }
        h5 {
            font-size: 0.75rem;
        }
        .nav-item {
            font-size: 0.9em;
        }
        
        .form-select {
            font-size: 0.9em;
        }

        .tab-content,
        .tab-pane {
            background-color: transparent !important; /* Ensure the table container doesn’t override the transparency */
            padding-top: 5px;
        }
        .table {
            background-color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent white background */
            /* background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
            border-collapse: collapse; /* Related to above semi-transparent change */
            margin-bottom: 0;
            font-size: 0.85rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a slight shadow to improve readability */
        }
        /*.table td, .table th {*/
        .table th {
            background-color: transparent !important; /* Inherit the semi-transparent background from the table */
            color: #ffffff; /* Black text for readability; adjust if needed */
            /* color: #fff; /* White text for readability on dark background */
            /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle shadow for text */
            /*border: 1px solid #ddd; /* Keep borders visible */
            padding: 0.3rem;
        }
        .table td {
            padding: 0.4rem;
        }
        /* Adjust specific tables if needed for transparency*/
        #playersTable, #standingsTable, #dailyScoresTable, #rosterTable {
            background-color: rgba(255, 255, 255, 0.8); /* Match the table class */
        }               
        .table thead.table-dark {
           background-color: #02001f; /* Darker blue*/
           color: #1a1a1a; /* Dark text */
        }  
        .table-hover tbody tr:hover {
            background-color: #e9ecef;
            cursor: pointer;
        }
        /* Standings table header and data center alignment */     
        .scores-table th,
        .scores-table td {
            /* 1. Ensures everything is vertically centered */
            vertical-align: middle; 
        }
        .numeric-cell {
            /* 2. Ensures everything is horizontally centered (aligns header with data) */
            text-align: center;
        }

        .btn-sort {
            margin: 3px;
            font-size: 0.85rem;
            background-color: #FFB8AD;
            border-color: #FFB8AD;
            color: #343434; 
        }
        .btn-sort:hover {
            background-color: #FF715B; 
            border-color: #FF715B;
        }
        .team-logo {
            width: 25px;
            height: 25px;
            margin-right: 8px;
            vertical-align: middle;
        }
        .player-container {
            position: relative;
            display: inline-block;
            margin-right: 8px;
        }
        .player-headshot {
            width: 25px;
            height: 25px;
            vertical-align: middle;
        }
        .flag-img {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 12px;
            height: 12px;
        }
        .team-logo-player {
            width: 16px;
            height: 16px;
            margin-left: 1px;
            vertical-align: middle;
        }
        .spinner-border {
            margin: 0 auto;
            display: block;
        }
        .playoff-team td {
            background-color: #DDE3DD !important;
        }
        .table-hover .playoff-team:hover td {
            background-color: #D2DAD2 !important;
        }
        .wildcard-team td {
            background-color: #D7DEEA !important;
        }
        .table-hover .wildcard-team:hover td {
            background-color: #C9D3E3 !important;
        }
        .nav-link {
            color: #a0a0a0; /* Light grey for inactive tabs */
        }
        .nav-link:hover {
            color: #d0d0d0; /* Lighter grey on hover */
        }
        .nav-link.active {
            color: #FF715B; /* White for active tab (orange-red as a backup #FF715B*/
            background-color: #4a4a4a; /* Dark grey background for active tab */
        }
        .pos-column {
            width: 35px;
            text-align: center;
            vertical-align: middle;
        }
        /*
        .roster-column {
            flex: 1;
            padding: 15px;
            min-width: 0;
        }
        .roster-column h5 {
            margin-bottom: 15px;
            font-weight: bold;
            text-align: center;
        }
            */
        .player-box {
            margin-bottom: 15px;
            text-align: center;
        }
        .player-box img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-bottom: 5px;
        }
        .player-box p {
            margin: 0;
            font-size: 0.85rem;
        }
        .current-date-bold {
        font-weight: bold;
        }

        /* Playoff css */
        .playoff-bracket {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            gap: 8px; /* Small gap between rounds */
        }
        .round-column {
            flex: 1;
            padding: 6px;
            min-width: 140px;
        }
        .matchup {
            padding: 6px 8px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: #f9f9f9;
            margin-bottom: 12px;
            font-size: 0.95em;
        }
        .matchup .d-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .team-wins {
            font-weight: bold;
            min-width: 20px;
            text-align: center;
        }

        /* Team Schedule: scoped rows and an intentional narrow-screen layout. */
        #schedule { color: #212529; }
        #schedule .team-schedule-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 24px;
        }
        #schedule .team-schedule-layout section { min-width: 0; }
        #schedule .schedule-heading { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
        #schedule .schedule-record { font-size: .9rem; margin-bottom: 6px; font-weight: 600; }
        #schedule .last-games-list, #schedule .schedule-list {
            list-style: none;
            padding: 0;
            margin: 12px 0 0;
            border-top: 1px solid #dee2e6;
        }
        #schedule .schedule-game {
            display: grid;
            grid-template-columns: 34px 24px minmax(0, 50px) auto minmax(0, 50px) 24px;
            gap: 6px;
            align-items: center;
            justify-content: start;
            min-height: 48px;
            padding: 8px 0;
            border-bottom: 1px solid #dee2e6;
            font-size: .9rem;
            font-variant-numeric: tabular-nums;
        }
        #schedule .schedule-game img { width: 24px; height: 24px; object-fit: contain; }
        #schedule .schedule-abbrev { min-width: 0; overflow-wrap: anywhere; }
        #schedule .schedule-selected { font-weight: 800; }
        #schedule .schedule-score { display: flex; gap: 3px; white-space: nowrap; font-size: 1rem; }
        #schedule .schedule-result {
            border-radius: 5px;
            padding: 6px 0;
            text-align: center;
            font-size: .75rem;
            font-weight: 700;
            background: #e9ecef;
            color: #495057;
        }
        #schedule .won .schedule-result { background: #e4f2e8; color: #216437; }
        #schedule .lost .schedule-result { background: #fbe7e9; color: #a12635; }
        #schedule .otl .schedule-result { background: #fff0d4; color: #805400; }
        #schedule .schedule-upcoming { grid-template-columns: minmax(0, 110px) 24px 24px minmax(0, 60px); }
        #schedule .schedule-upcoming time { overflow-wrap: anywhere; }
        #schedule .schedule-venue { text-align: center; }
        #schedule .schedule-empty { margin: 12px 0 0; padding: 12px 0; color: #626970; font-size: .9rem; }
        #scheduleTeamSelect { min-height: 44px; }
        @media (max-width: 768px) {
            #schedule { padding-inline: 10px; }
        }
        @media (min-width: 600px) {
            #schedule .team-schedule-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
            #schedule #scheduleContent { border-left: 1px solid #dee2e6; padding-left: 20px; }
        }
        @media (min-width: 900px) {
            #schedule .team-schedule-layout { gap: 32px; }
            #schedule #scheduleContent { padding-left: 32px; }
            #schedule .schedule-game { gap: 8px; font-size: 1rem; }
        }

        /* Video thumbnails */
        .video-recap-block {
            height: 40px; /* Narrow height */
            display: flex;
            align-items: center;
            background-color: #f5f5f5; /* Match period header background */
            padding: 5px;
            margin-bottom: 10px;
            gap: 10px; /* Space between thumbnail and label */
        }

        .video-recap-block p {
            margin: 0;
            font-style: italic;
            color: #6c757d; /* Gray color for placeholder text */
        }

        .video-recap-link {
            display: inline-block;
            height: 30px; /* Fit within the block height, accounting for padding (40px - 2*5px) */
            width: 53px; /* Maintain 16:9 aspect ratio: 30px * (16/9) ≈ 53px */
        }

        .video-recap-link iframe {
            width: 100%;
            height: 100%;
            border: 1px solid #000; /* Match score rectangle border */
            border-radius: 4px; /* Match score rectangle rounded corners */
        }

        /* CSS for toggle buttons */   
        .toggle-btn-group {
            display: flex;
            justify-content: flex-start; /* align left */
            flex-wrap: wrap;
        }

        /* Make buttons look like they're part of a single switch group */
        .compact-toggle .toggle-btn {
            border: 1px solid #ccc;
            border-radius: 0;
            padding: 4px 10px;
            font-size: 0.85em;
            font-weight: 500;
            min-width: 100px;
            max-width: 100px;
            text-align: center;
            background-color: #e9ecef;
            color: #000;
            margin: 0; /* eliminate gaps */
        }

        .compact-toggle .toggle-btn:first-of-type {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .compact-toggle .toggle-btn:last-of-type {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .btn-check:checked + .toggle-btn {
            background-color: #FF715B !important;
            color: #fff;
            border-color: #FF715B;
        }

        .toggle-btn.disabled-label {
            background-color: #f1f1f1 !important;
            color: #aaa !important;
            pointer-events: none;
            border-color: #ccc;
        }
        /* Hamburger menu */
        #hamburgerIcon {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 26px;
            height: 20px;
            cursor: pointer;
            margin-left: auto;
            margin-top: 8px;
        }

        #hamburgerIcon .bar {
            height: 2px;
            background-color: black;
            border-radius: 2px;
        }

        /* Slide-in side menu */
        #sideMenu {
            position: fixed;
            top: 0;
            right: -250px; /* Hidden by default */
            width: 250px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0 5px rgba(0,0,0,0.3);
            padding: 20px;
            transition: right 0.3s ease;
            z-index: 1050;
        }

        #sideMenu.open {
            right: 0;
        }

        #closeMenuBtn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            line-height: 1;
            color: #000;
        }
       
        .live-status {
            display: flex;
            justify-content: center;
            margin-top: 5px; /* Small spacing between score/chevron row and live status */
        }

        /* Game Details Modal Styles */
        .team-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .team-info {
            display: flex;
            flex-direction: row; /* Align logo and abbrev on the same row */
            align-items: center;
            gap: 8px;
        }

        .team-home {
            justify-content: flex-start;
        }

        .team-away {
            justify-content: flex-end;
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .modal-title {
            margin: 0 8px;
            text-align: center;
        }
        .modal-dialog {
            margin: 1.75rem auto; /* Force horizontal centering */
        }
        .modal-content {
            overflow-y: auto; /* already there in Bootstrap */
            min-height: 300px; /* Optional */
        }
        .modal-body {
            overflow-x: auto;
            /* Force a fixed height scrollbar to appear even if not needed */
            scrollbar-gutter: stable;
        }

        /* Navigation arrow buttons in game details modal */
        .nav-arrow {
            background: none;
            border: none;
            font-size: 1.5em; /* Increased from 1.2em */
            cursor: pointer;
            padding: 0;
            margin: 0 10px; /* Add margin to move away from edges */
        }
        .nav-arrow-left, .nav-arrow-right {
            color: #333;
        }
        .nav-arrow:hover {
            color: #007bff;
        }
        /* Ensure consistent layout across views in Game Details */
        .view-content {
            padding: 0 10px; /* Consistent padding for all views */
            box-sizing: border-box;
        }
        .team-header {
            margin: 0; /* Remove any default margins */
            padding: 10px 0; /* Consistent padding */
        }

        /* Player dominance score coloring */
        .pds-value {
            font-weight: bold;
            text-align: center;
            color: white !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        }
        .table .pds-value.pds-blue {
            background-color: rgb(84, 84, 240);
        }
        .table .pds-value.pds-dark-green {
            background-color: rgb(2, 90, 2);
        }
        .table .pds-value.pds-light-green {
            background-color: rgb(4, 148, 4);
        }
        .table .pds-value.pds-black {
            background-color: rgb(75, 75, 75);
        }
        .table .pds-value.pds-light-orange {
            background-color: #fdad3d;
        }
        .table .pds-value.pds-dark-orange {
            background-color: #f08503;
        }
        .table .pds-value.pds-light-red {
            background-color: #fd2e2e;
        }
        .table .pds-value.pds-dark-red {
            background-color: darkred;
        }

        .game-result {
            font-size: 1.2em;
            font-weight: bold;
            color: #333;
            text-align: center;
            flex: 1; /* Takes remaining space to center itself */
        }

        .stat-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .stat-value {
            width: 80px;
            font-weight: bold;
        }

        .team-home.stat-value {
            text-align: left;
        }

        .team-away.stat-value {
            text-align: right;
        }

        .stat-center {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .stat-label {
            font-size: 0.9em;
            color: #333;
            text-align: center;
        }

        .stat-bar {
            display: flex;
            justify-content: center;
            width: 100%; /* Always full width of stat-center */
            height: 10px;
            margin: 0 10px; /* Margin on both ends */
            background-color: #e9ecef; /* Light gray background for the full bar */
        }

        .bar-home {
            background-color: #00244b; /* Blue for home team */
            height: 100%;
            transition: width 0.3s ease;
        }

        .bar-away {
            background-color: #FF715B; /* Red for away team */
            height: 100%;
            transition: width 0.3s ease;
        }

        /* Game recap play button disable */
        .video-recap-btn.disabled,
        .video-recap-btn.disabled svg,
        .video-recap-btn.disabled span {
            color: #6c757d; /* Grey color for text and icon */
            opacity: 0.5; /* Reduce opacity for a disabled look */
        }

        /* For player pictures */
        .image-container {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 100%;
        }
        .bio-hero {
            width: 100%;
            border-radius: 6px;
            object-fit: cover;
        }
        .bio-headshot {         
            opacity: 0;
            transform: translateY(10px);
            animation: fadeInUp 0.6s ease-out forwards;

            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 150px;
            height: auto;
            border: 3px solid white;
            border-radius: 50%;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* New styles for the Report modal */
        .report-modal-header {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 15px;
            }
            .report-modal-header .team-logo {
                width: 30px;
                height: 30px;
            }
            .report-modal-header .teams {
                font-weight: bold;
                font-size: 1.1em;
            }
            .report-modal-body {                
                line-height: 1.6;
                background-color: #f9f9f9;
                padding: 15px;
                border: 1px solid #ddd;
                border-radius: 5px;
            }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .video-recap-btn span {
            color: #333 !important; /* Override Safari's default link color */
        }

        /* Make adjacent buttons in the compact toggle appear as a single cluster. */
        .toggle-btn-group .btn + .btn { margin-left: 0; }
        .toggle-btn-group .btn + .btn.toggle-btn { border-left: 0; }

        /* Make adjacent buttons appear as a single cluster */
        .toggle-btn-group .btn + .btn { margin-left: 0; }
        .toggle-btn-group .btn + .btn.toggle-btn { border-left: 0; }

        /* Hover/focus parity for standalone "PDS" button styled like the radios */
        .toggle-btn:hover,
        .toggle-btn:focus {
            background-color: rgba(0,0,0,0.05);
            border-color: rgba(0,0,0,0.15);
        }

        /* Line up css for updateRoster / lineups function */
        /* Center everything for this feature */
        .lineups-header.center,
        .lineups-section.center,
        .section-title { text-align: center; }

        /* Section titles: a bit bigger, not bold */
            .section-title {
            font-size: 1.0rem;
            font-weight: 400;
            margin-bottom: 8px;
        }

        /* --- GRID LAYOUT: prevents wrap issues on mobile --- */
        /* Forwards: 3 columns; Defense: 2 columns; Goalie: 1 column */
        .line-row.centered {
            --pill-gap: 6px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--pill-gap);
            margin-bottom: 8px;
            justify-items: center;   /* center each pill in its cell */
        }
        .pair-row.centered {
            --pill-gap: 6px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--pill-gap);
            margin-bottom: 8px;
            justify-items: center;
        }
        .goalie-row.centered {
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            margin-bottom: 8px;
        }

        /* Player pill — compact and fluid width inside grid cell */
        .player-pill {
            display: flex;
            align-items: center;
            gap: 6px;                       /* tighter gap between image and text */
            background: #F2F2F2;          /* light grey */
            border-radius: 8px;
            padding: 3px 8px 6px 6px;       /* slightly less left padding */
            width: 100%;                    /* fill the grid cell */
            max-width: 220px;               /* optional upper bound so it doesn't get huge on desktop */
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

        /* Circular mug  */
        .pill-img-wrap {
            flex: 0 0 auto;
            width: 40px;                   
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            background: transparent;        /* keep transparency from NHL PNGs */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pill-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Number + Name stack — keep small sizes */
        .pill-meta { display: flex; flex-direction: column; align-items: flex-start; }
        .pill-number {
            font-weight: 500;               /* not bold */
            font-size: 0.9rem;
            line-height: 1.05;
            color: #111;
        }
        .pill-name {
            margin-top: 1.2px;                /* a touch tighter */
            font-size: 0.8rem;
            line-height: 1.1;
            font-weight: 400;
            color: #222;
        }

        .player-pill.empty-slot {
            visibility: hidden;      /* keeps width/height for alignment without showing content */
        }

        /* Section spacing */
        .lineups-section { margin-bottom: 14px; }
        .lines-vertical, .pairs-vertical, .goalie-row { margin-top: 6px; }

        /* --- RESPONSIVE TWEAKS --- */
        @media (min-width: 480px) {
        /* give pills a tiny bit more room on larger phones */
            .player-pill { padding: 6px 10px 6px 8px; }
        }

        @media (min-width: 768px) {
            /*.section-title { font-size: 1.0rem; }*/
            .pill-img-wrap { width: 44px; height: 44px; }
            /*.pill-number   { font-size: 0.8rem; }*/
            /*.pill-name     { font-size: 0.72rem; }*/
            .player-pill   { max-width: 300px; padding: 7px 12px; gap: 8px; }

            /* keep column counts the same on tablet/desktop */
            .line-row.centered  { --pill-gap: 10px; }
            .pair-row.centered  { --pill-gap: 10px; }
        }

        @media (min-width: 1200px) {
            .pill-img-wrap { width: 48px; height: 48px; }
            .player-pill   { max-width: 320px; }
        }

        /* Ultra-narrow safeguard: if viewport < 330px, allow 2 columns for forwards */
        @media (max-width: 329px) {
            .line-row.centered { grid-template-columns: repeat(2, 1fr); }
        }

        /* --- Fix long-name centering inside pills --- */
        .player-pill,
        .pill-meta,
        .pill-number,
        .pill-name {
            text-align: left;              /* win over ancestor 'text-align:center' */
        }
        .pill-meta {
            flex: 1;                       /* let text take remaining space */
            min-width: 0;                  /* allow wrapping instead of overflowing */
        }
        .pill-name {
            overflow-wrap: anywhere;       /* break between words if needed */
            word-break: normal;
            white-space: normal;           /* allow line break from F. to Lastname */
        }

        /* --- Make grid cells resilient on narrow screens --- */
        .line-row.centered {
          grid-template-columns: repeat(3, minmax(0, 1fr)); /* prevent squeeze oddities */
        }
        .pair-row.centered {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* --- Extra-condense on very small phones --- */
        @media (max-width: 380px) {
            .player-pill { padding: 5px 7px 5px 5px; gap: 4px; }
            .pill-img-wrap { width: 34px; height: 34px; }    /* a touch smaller mug */
            .line-row.centered { gap: 4px; }                 /* tighter grid gap */
        }

        /* Special-teams block */
        .spec-unit { margin-bottom: 10px; }
        .spec-title {
        text-align: center;
        font-size: 0.9rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 4px;
        }
        .unit-note { font-size: 0.8rem; color: #777; }

        /* Rows: centered, same gap approach as your existing layout */
        .spec-row.centered {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 6px;
        }

        /* If you prefer grid instead of flex, this also works:
        .spec-row.centered {
        display: grid;
        grid-auto-flow: column;
        justify-content: center;
        gap: 6px;
        }
        */

        /* END OF LINE UPS CSS */

        /* Team comparison CSS */
        .team-comparison-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 2px 8px;
            border-radius: 999px;
            background-color: #ffffff;
            font-size: 0.8rem;
        }
        .team-comparison-legend-color {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        .team-comparison-legend-remove {
            cursor: pointer;
            margin-left: 4px;
            font-weight: 600;
            opacity: 0.8;
        }
        .team-comparison-legend-remove:hover {
            opacity: 1;
        }

        /* Player comparison modal CSS*/
        .player-comparison-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 2px 8px;
            border-radius: 999px;
            background-color: #ffffff;
            font-size: 0.8rem;
        }
        .player-comparison-legend-color {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }
        .player-comparison-legend-remove {
            cursor: pointer;
            margin-left: 4px;
            font-weight: 600;
            opacity: 0.8;
        }
        .player-comparison-legend-remove:hover {
            opacity: 1;
        }
        #playerComparisonModal .btn-group .btn-outline-light {
            background-color: #f1f1f1;   /* subtle dark pill so they are always visible */
            border-color: #ccc;
            color: #aaa;
        }
        #playerComparisonModal .btn-group .btn-outline-light:not(.active) {
            opacity: 0.8;                /* slightly dim when not selected */
        }
        #playerComparisonModal .btn-group .btn-outline-light.active {
            background-color: #FF715B;   /* bright highlight for selected mode */
            color: #fff;
            border-color: #FF715B;
            opacity: 1;
        }

        /* Playoff Race modal */
        .playoff-race-meta {
            font-size: 0.8rem;
            color: #666;
        }

        .playoff-race-section {
            margin-bottom: 16px;
        }

        .playoff-race-card {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .playoff-race-cutline-card {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            height: 100%;
        }

        .playoff-race-cutline-title {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 4px;
        }

        .playoff-race-cutline-team {
            font-size: 1.1rem;
            font-weight: 700;
        }

        .playoff-race-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            background: #e9ecef;
            color: #333;
        }

        .playoff-race-badge.firmly_in { background: #d1e7dd; color: #0f5132; }
        .playoff-race-badge.bubble_in { background: #dbeafe; color: #1d4ed8; }
        .playoff-race-badge.bubble_out { background: #fde68a; color: #92400e; }
        .playoff-race-badge.outside_looking_in { background: #fce7f3; color: #9d174d; }
        .playoff-race-badge.long_shot { background: #e5e7eb; color: #374151; }
        .playoff-race-badge.eliminated { background: #fee2e2; color: #991b1b; }
        .playoff-race-badge.secured_in { background: #bbf7d0; color: #166534; }
        .playoff-race-badge.mathematically_eliminated { background: #fecaca; color: #991b1b; }        

        .playoff-race-team-header {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .playoff-race-team-header span {
            line-height: 1.2;
            font-size: 0.92rem;
            font-weight: 600;
        }

        .playoff-race-team-logo {
            width: 22px;
            height: 22px;
            object-fit: contain;
        }

        .playoff-race-team-name {
            font-weight: 600;
        }

        .playoff-race-mini {
            font-size: 0.8rem;
            color: #ffffff;
        }

        .playoff-race-expected-points {
            font-size: 0.8rem;
            color: #000000;            
        }

        .playoff-race-scenario {
            border-top: 1px solid #eee;
            padding-top: 8px;
            margin-top: 8px;
            font-size: 0.85rem;
        }

        .playoff-race-markdown h1,
        .playoff-race-markdown h2,
        .playoff-race-markdown h3,
        .playoff-race-markdown h4 {
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .playoff-race-markdown p,
        .playoff-race-markdown li {
            line-height: 1.5;
        }

        .playoff-race-empty {
            color: #777;
            font-style: italic;
        }

        .btn-playoff-race {
            background-color: #b8f2df;
            border-color: #9be7d0;
            color: #1f3b34;
        }

        .btn-playoff-race:hover,
        .btn-playoff-race:focus {
            background-color: #9fe8d3;
            border-color: #86dcc4;
            color: #17302a;
        }     
   
        /* Playoff Simulator */
        .playoff-sim-note {
            font-size: 0.82rem;
            color: #666;
            margin-bottom: 10px;
        }

        .playoff-sim-rotate-hint {
            display: none;
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 12px;
            text-align: center;
        }

        .playoff-sim-bracket {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 18px;
            align-items: stretch; /* Keeps all columns same height */
        }

        .playoff-sim-side {
            display: grid;
            grid-template-columns: repeat(3, 132px);
            gap: 8px;
            align-items: stretch;
        }

        .playoff-sim-side.west {
            justify-content: end;
        }

        .playoff-sim-side.east {
            justify-content: start;
        }

        .playoff-sim-side-header,
        .playoff-sim-final-header {
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #666;
            text-transform: uppercase;
            margin-bottom: 4px;
            text-align: center;
            width: 132px;
        }

        /* Updated: This centers the entire "Title + Cards" block vertically */
        .playoff-sim-round-col,
        .playoff-sim-center {
            display: flex;
            flex-direction: column;
            justify-content: center; 
            height: 100%;
            align-items: center;
        }

        .playoff-sim-round-title {
            font-size: 0.74rem;
            color: #666;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 6px;
            text-align: center;
            width: 132px;
        }

        /* Updated: List no longer grows; it stays tight to the title */
        .playoff-sim-series-list {
            display: flex;
            flex-direction: column;
            width: 132px;
            gap: 10px; /* Default gap for R1 */
            flex-grow: 0; 
        }

        /* R2 Alignment: A larger gap pushes the two cards to align with R1 pairs */
        .playoff-sim-round-col.round2 .playoff-sim-series-list {
            gap: 95px; 
        }

        .playoff-sim-series {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 8px 8px;
            width: 132px;
            min-width: 132px;
            max-width: 132px;
        }

        .playoff-sim-team-row {
            display: grid;
            grid-template-columns: 1fr 40px;
            gap: 6px;
            align-items: center;
            padding: 0px 0;
        }

        .playoff-sim-team-info {
            display: flex;
            align-items: center;
            justify-content: flex-start; 
            min-width: 0;
            padding-left: 4px;           
        }

        .playoff-sim-team-logo {
            width: 30px;
            height: 30px;
            object-fit: contain;
            flex: 0 0 auto;
            margin-right: 8px;
            transform: scale(1.5); /* Increases visual size by 50% without moving other elements */
        }

        .playoff-sim-team-label {
            font-weight: 600;
            font-size: 0.82rem;
            line-height: 1.1;
            min-width: 0;
            text-align: left;
        }

        .playoff-sim-team-label.unknown {
            color: #888;
            font-style: italic;
            font-weight: 500;
            text-align: center;
        }

        .playoff-sim-score {
            width: 40px;
        }

        .playoff-sim-score input {
            text-align: center;
            padding: 0.18rem 0.2rem;
            font-size: 0.78rem;
        }

        .playoff-sim-team-row.winner .playoff-sim-team-label,
        .playoff-sim-team-row.winner .playoff-sim-team-info {
            color: #0f5132;
            font-weight: 700;
        }

        .playoff-sim-series.invalid {
            border-color: #dc3545;
            box-shadow: 0 0 0 1px rgba(220,53,69,0.15);
        }

        .playoff-sim-error {
            color: #b02a37;
            font-size: 0.7rem;
            margin-top: 4px;
            text-align: center;
        }

        .playoff-sim-final-wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 132px;
            flex-grow: 0;
        }

        .playoff-sim-final {
            width: 132px;
            display: flex;
            justify-content: center;
        }

        .playoff-sim-final .playoff-sim-series {
            width: 132px;
            min-width: 132px;
            max-width: 132px;
        }

        /* Mobile / stack view */
        @media (max-width: 991px) {
            .playoff-sim-bracket {
                grid-template-columns: 1fr;
            }

            .playoff-sim-side {
                grid-template-columns: 1fr;
                justify-content: stretch;
            }

            .playoff-sim-center {
                order: 2;
                min-width: 0;
            }

            .playoff-sim-side.east {
                order: 3;
            }

            .playoff-sim-side.west {
                order: 1;
            }

            .playoff-sim-series,
            .playoff-sim-final,
            .playoff-sim-final .playoff-sim-series,
            .playoff-sim-side-header,
            .playoff-sim-round-title,
            .playoff-sim-final-header,
            .playoff-sim-series-list,
            .playoff-sim-final-wrap {
                width: 100%;
                min-width: 0;
                max-width: none;
            }

            .playoff-sim-round-col,
            .playoff-sim-center {
                height: auto;
                justify-content: flex-start;
            }
            
            .playoff-sim-series-list {
                gap: 10px !important; /* Reset R2 gap on mobile */
            }
        }

        @media (max-width: 768px) and (orientation: portrait) {
            .playoff-sim-rotate-hint {
                display: block;
            }
        }

        /* Ensure modal content is responsive */
        @media (max-width: 768px) {
            .stat-value {
                width: 60px;
                font-size: 0.85em;
            }

            .stat-label {
                font-size: 0.8em;
            }

            .stat-bar {
                margin: 0 5px; /* Smaller margin on mobile */
            }

            .team-abbrev {
                font-size: 0.85em;
            }

            .game-result {
                font-size: 1em;
            }
        }

        @media (max-width: 768px) {
            .pos-column {
                width: 25px;
            }
            .roster-column {
                padding: 10px;
            }
            .player-box {
                margin-bottom: 10px;    
            }
            .playoff-bracket {
                flex-direction: column;
            }
            .round-column {
                padding: 5px;
            }
            .matchup {
                margin-bottom: 10px;
            }
            .matchup .d-flex {
                font-size: 0.8rem;
            }
            .matchup img {
                width: 20px;
                height: 20px;
            }
            body {
                background-color: #EBEBEB;                
                padding: 0px !important;
            }
            .container {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0; /* optional: adds small side padding so content isn't flush against screen edge */                     
            }
            /* Adjust table padding and font size for mobile */
            .table td, .table th { 
                font-size: 0.75rem;
                white-space: nowrap;
                padding: 5px;
            }
            .bio-headshot { 
                width: 100px;
            }

            .nav-arrow {
                font-size: 1.2em; /* Slightly smaller on mobile, increased from 1em */
                padding: 0;
                margin: 0 5px; /* Smaller margin on mobile */
            }

            .modal-dialog {
                    margin: 1rem auto;
            }
            .modal-lg {
                max-width: 90%; /* Wider modal on mobile */
            }

        }
        /* Modal dialog width in landscape */
        @media (orientation: landscape) and (max-width: 900px) {
            .modal-lg {
                max-width: 95% !important;
            }
        }

        /* Ensure tables are scrollable on mobile */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }