/* ==========================================================================
   Custom Fonts
   ========================================================================== */
@font-face {
    font-family: 'Ignis et Glacies Sharp';
    src: url('Ignis et Glacies Sharp Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Global Reset and Base Styles
   ========================================================================== */

/* 1. PAINT THE CANVAS (Matches Manifest to fix "White Flash") */
html {
    background-color: #1a1a1a; /* Match manifest.json background */
    transition: background-color 0.3s;
    /* REMOVED 'height: 100%' - This allows the html to grow with the page */
}

html.dark-mode {
    background-color: #1a1a1d; /* Deep dark for Dark Mode */
}

/* 2. Standard Reset */
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    /* REMOVED 'height: 100%' - This fixes the background cut-off bug */
}

body {
    font-family: 'Nunito Sans', Arial, sans-serif;
    line-height: 1.6;
    
    /* 3. PAINT THE CONTENT (The actual app background) */
    background-color: #f4f4f4; /* Light Mode content background */
    color: #333;
    
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
    
    /* USE ONLY MIN-HEIGHT here. This ensures it fills the screen but grows with content. */
    min-height: 100vh; 
    overflow-x: hidden;
}

body.mobile-nav-open {
    overflow: hidden;
}

/* ==========================================================================
   Dark Mode Base Styles
   ========================================================================== */
html.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

html.dark-mode .container {
    background-color: #2a2a2a;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

html.dark-mode h1 { color: #64b5f6; }
html.dark-mode h2 { color: #bbb; }

html.dark-mode #indexContainer header p.description {
    color: #ccc;
}

html.dark-mode nav {
    background-color: #2a2a2a;
}

@media (min-width: 769px) {
    html.dark-mode nav ul.desktop-nav-links li a:hover,
    html.dark-mode nav ul.desktop-nav-links li a.active {
        background-color: #444;
        color: white;
    }
    html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content {
        background-color: #2a2a2a;
    }
    html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content a:hover {
        background-color: #383838;
    }
}

html.dark-mode #inputContainer input[type="text"],
html.dark-mode #inputContainer select#yearSelector {
    background-color: #252525;
    border-color: #444;
    color: #e0e0e0;
}

html.dark-mode #inputContainer input[type="text"]::placeholder {
    color: #777;
}

table.comparison-table {
    width: 95%; max-width: 1200px; margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border-radius: 0px;
    table-layout: fixed;
    font-size: 0.9em;
    border: 1px solid #ccc;
}

table.comparison-table th,
table.comparison-table td {
    padding: 8px;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

table.comparison-table thead th {
    background-color: #f0f0f0;
    font-weight: 600;
    color: #333;
    white-space: normal;
    position: -webkit-sticky;
    position: sticky;
    
    /* --- CHANGE THIS VALUE --- */
    top: 89px !important; /* Changed from 90px to 89px to close the gap */
    /* ------------------------ */
    
    z-index: 10;
    height: auto !important;
    min-height: 110px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    vertical-align: bottom !important;
}

table.comparison-table th.section-header {
    background-color: #e0e0e0;
    color: #333;
    text-align: left;
    font-weight: bold;
    padding: 8px 10px;
    border-top: 2px solid #c5c5c5;
}


table.comparison-table td {
    color: #333;
}

table.comparison-table tbody tr:hover td {
    background-color: #e9e9e9;
}
table.comparison-table tbody tr:hover th.section-header {
    background-color: #e0e0e0;
}

table.comparison-table td img {
    max-width: 24px;
    max-height: 24px;
    vertical-align: middle;
    display: inline-block;
}

table.comparison-table td.highlight-green-light {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}
table.comparison-table td.highlight-red-light {
    background-color: #f8d7da !important;
    color: #58151c !important;
}

html.dark-mode table.comparison-table {
    background-color: #2c2c2c;
    box-shadow: none;
    border-radius: 0px;
    border: 1px solid #555;
}

html.dark-mode table.comparison-table th,
html.dark-mode table.comparison-table td {
    border: 1px solid #555;
    color: #bdbdbd;
}

html.dark-mode table.comparison-table thead th {
    background-color: #383838;
    color: #e0e0e0;
}

html.dark-mode table.comparison-table th.section-header {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-top: 2px solid #484848;
}

html.dark-mode table.comparison-table tbody tr:hover td {
    background-color: #333333;
}
html.dark-mode table.comparison-table tbody tr:hover th.section-header {
    background-color: #3a3a3a;
}

.opponents-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
}

.opponent-tag {
    box-sizing: border-box;
    width: 65px;
    padding: 4px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    display: block;
}

.opponent-tag .round-number {
    font-weight: normal;
    margin-right: 4px;
    opacity: 0.8;
}

html.dark-mode table.comparison-table td.highlight-green-dark {
    background-color: #1a3e1a !important;
    color: #c8e6c9 !important;
}

html.dark-mode table.comparison-table td.highlight-red-dark {
    background-color: #4b1e1e !important;
    color: #ffcdd2 !important;
}

html.dark-mode .ranking-card {
    background-color: #2c2c2c;
}

html.dark-mode .ranking-card-front h3,
html.dark-mode .ranking-card-back h4,
html.dark-mode .ranking-card-back p {
    color: #e0e0e0;
}

html.dark-mode .ranking-card-back {
    background-color: #2c2c2c;
}

html.dark-mode .switch .slider {
    background-color: #484848;
}
html.dark-mode .switch .slider:before {
    background-color: #ccc;
}
html.dark-mode .switch input:checked + .slider {
    background-color: #2196F3;
}

html.dark-mode #hero {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

html.dark-mode #hero p {
    color: #ccc;
}

html.dark-mode #league-selection a {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0,0,0, 0.2);
}

html.dark-mode #league-selection a:hover {
    background-color: #383838;
    box-shadow: 0 6px 12px rgba(0,0,0, 0.25);
}

html.dark-mode #indexContainer .league-link,
html.dark-mode #league-selection a .league-link {
    color: #64b5f6;
}

html.dark-mode #indexContainer .league-link:hover,
html.dark-mode #league-selection a:hover .league-link {
    color: #80cfff;
}

html.dark-mode footer {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

html.dark-mode .mobile-footer-section h3 {
    color: #80cfff;
}

html.dark-mode .social-icons a {
    color: #e0e0e0;
}

html.dark-mode .social-icons a:hover {
    color: #bbb;
}

html.dark-mode .mobile-footer-section a {
    color: #e0e0e0;
}

html.dark-mode .mobile-footer-section a:hover {
    color: #bbb;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 15px 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    flex: 1 0 auto;
    box-sizing: border-box;
    position: relative;
}

h1,
h2 {
    text-align: center;
    transition: color 0.3s;
}

h1 {
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
    color: #007bff;
    font-size: 2em;
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
}

h2 {
    font-style: italic;
    color: #555;
    font-size: 1.3em;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
}

h3 {
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
    color: #555;
    font-size: 1em;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
}

p.description {
    text-align: center;
    padding: 10px 20px;
    margin-bottom: 20px;
    color: #666;
    transition: color 0.3s;
    box-sizing: border-box;
}

.page-info-icon {
    font-size: 0.7em;
    margin-left: 10px;
    color: #007bff;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.3s;
}

html.dark-mode .page-info-icon {
    color: #64b5f6;
}

.page-info-icon:hover {
    opacity: 0.7;
}

.container > h2 {
    display: block;
    text-align: center;
}

nav {
    background-color: #333;
    padding: 5px 0;
    margin-bottom: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* --- CHANGE START --- */
    position: sticky; /* Was relative */
    top: 0;           /* Sticks to the top */
    z-index: 1020;    /* High index to sit above content (below modals) */
    width: 100%;      /* Ensures full width */
    /* --- CHANGE END --- */
    
    height: 90px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

#nav-logo-link-desktop {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
    order: 1;
    z-index: 1003;
}

#nav-logo {
    max-height: 75px;
    width: auto;
    display: block;
    vertical-align: middle;
}

nav .hamburger {
    display: none;
}

nav .desktop-dark-mode-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    order: 3;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 10px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
}

input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

nav ul.desktop-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-grow: 1;
    order: 2;
}

nav ul.desktop-nav-links li {
    margin: 0;
    padding: 0;
    position: relative;
}

nav ul.desktop-nav-links li a {
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    display: block;
    white-space: nowrap;
    background-color: transparent;
}

nav ul.desktop-nav-links li.dropdown .dropbtn { padding-right: 25px; }
nav ul.desktop-nav-links li.dropdown .dropbtn .fa-caret-down {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
nav ul.desktop-nav-links li.dropdown:hover .dropbtn .fa-caret-down { transform: rotate(180deg); }

nav ul.desktop-nav-links li.dropdown .dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #333;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 0 0 5px 5px;
    padding: 5px 0;
}
html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content { background-color: #2a2a2a; }
nav ul.desktop-nav-links li.dropdown:hover .dropdown-content { display: block; }
nav ul.desktop-nav-links li.dropdown .dropdown-content a {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-radius: 0;
    white-space: nowrap;
}
nav ul.desktop-nav-links li.dropdown .dropdown-content a:hover { background-color: #555; }
html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content a:hover { background-color: #444; }
html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content a.active { background-color: #64b5f6; }

#inputContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px;
    gap: 10px;
}

#inputContainer .input-wrapper { width: 100%; display: flex; justify-content: center; box-sizing: border-box; }
#inputContainer .input-wrapper.year-wrapper { max-width: 200px; }
#inputContainer .input-wrapper.player-wrapper { max-width: 350px; }
#inputContainer .input-wrapper.button-wrapper { max-width: 300px; gap: 10px; }

#inputContainer input[type="text"],
#inputContainer select#yearSelector,
#inputContainer button {
    padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; margin: 0;
    text-align: center; width: 100%; font-size: 0.95em; transition: border-color .3s, background-color .3s, color .3s;
}
#inputContainer select#yearSelector {
    text-align: left; text-align-last: center; padding-left: 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-repeat: no-repeat; background-position: right 10px center; background-size: 1em; cursor: pointer;
}
#inputContainer select#yearSelector::ms-expand { display: none; }
#inputContainer input[type="text"]::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; pointer-events: none; width: 0; height: 0; }
#inputContainer input[type="text"]::-ms-clear { display: none; }
#inputContainer button { border: none; color: #fff; cursor: pointer; transition: background-color .3s; }
#inputContainer button#compareButton { background-color: #007bff; }
#inputContainer button#clearSelections { background-color: #6c757d; }
#inputContainer button#compareButton:hover { background-color: #0056b3; }
#inputContainer button#clearSelections:hover { background-color: #5a6268; }
#inputContainer .share-buttons { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

#playerDataContainer {
    margin-top: 20px;
    width: 100%;
    
    /* --- NEW FIX: Stops the auto-scroll from going too far --- */
    scroll-margin-top: 120px; /* 90px for Nav + 30px buffer space */
}

#playerDataContainer h2 { color: #007bff; }
html.dark-mode #playerDataContainer h2 { color: #64b5f6; }
#playerDataContainer p { text-align: center; }


table.comparison-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ranking-header { margin-top: 30px; text-align: center; }
.ranking-header h2 { margin-bottom: .3rem; }
.ranking-header p { font-size: .9em; color: #666; margin-top: 0; margin-bottom: 15px; }
html.dark-mode .ranking-header p { color: #aaa; }
.ranking-cards-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; padding: 0 10px; }

.ranking-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    transition: box-shadow .3s, transform .2s;
    width: 160px;
    aspect-ratio: 1/1;
    height: auto;
    box-sizing: border-box;
    cursor: pointer;
    perspective: 1000px;
}
.ranking-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
}
html.dark-mode .ranking-card {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
html.dark-mode .ranking-card:hover { box-shadow: 0 4px 8px rgba(255, 255, 255, .15); }

.ranking-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.ranking-card .ranking-card-inner.is-flipped {
    transform: rotateY(180deg);
}
.ranking-card-front,
.ranking-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    padding: 8px;
    box-sizing: border-box;
}

.ranking-card-front {
}

.ranking-card-front h3 {
    color: #333;
    margin: 0 0 5px;
    font-size: 1em;
    line-height: 1.2;
    transition: color .3s;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.ranking-card-front img {
    max-height: 80px;
    max-width: 80px;
    object-fit: contain;
    margin-top: 5px;
}
html.dark-mode .ranking-card-front h3 {
    color: #e0e0e0;
}

.ranking-card-back {
    transform: rotateY(180deg);
    font-size: 0.8em;
    padding: 15px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
html.dark-mode .ranking-card-back {
    background-color: #2c2c2c;
}
.ranking-card-back .projection-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
    display: block;
    font-size: 1.1em;
}

.ranking-card-back .projection-value {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

html.dark-mode .ranking-card-back .projection-label,
html.dark-mode .ranking-card-back .projection-value {
    color: #e0e0e0;
}
.ranking-card-back .opponent-logo {
    max-width: 35px;
    max-height: 35px;
    vertical-align: middle;
    margin: 0;
    display: block;
    padding-top: 5px;
}
.ranking-card-back .opponent-logo.bye-logo {
    content: url('bye-logo.png');
    max-width: 35px;
    max-height: 35px;
    padding-top: 5px;
}

.ranking-card > p {
    display: none;
}
.ranking-number {
    display: none;
}

.difficulty-red { color: #D32F2F !important; }
.difficulty-gold { color: #AF8700 !important; }
.difficulty-green { color: #388E3C !important; }

html.dark-mode .difficulty-red { color: #FF8A80 !important; }
html.dark-mode .difficulty-gold { color: #FFF176 !important; }
html.dark-mode .difficulty-green { color: #A5D6A7 !important; }

.metric-info-trigger { margin-left: 8px; color: #007bff; cursor: pointer; font-size: .9em; vertical-align: middle; }
html.dark-mode .metric-info-trigger { color: #64b5f6; }
.metric-info-trigger:hover { opacity: .7; }

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}
.modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}
.modal-content {
    position: relative;
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1001;
}
html.dark-mode .modal-content {
    background-color: #2c2c2c;
    color: #e0e0e0;
}
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}
html.dark-mode .modal-content h2 {
    color: #64b5f6;
}
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: 700;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}
html.dark-mode .modal-close-button {
    color: #777;
}
.modal-close-button:focus, .modal-close-button:hover {
    color: #333;
    text-decoration: none;
}
html.dark-mode .modal-close-button:focus,
html.dark-mode .modal-close-button:hover {
    color: #ccc;
}

.modal-metric-list div { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
html.dark-mode .modal-metric-list div { border-bottom-color: #444; }
.modal-metric-list div:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.modal-metric-list strong { display: block; color: #007bff; margin-bottom: 4px; }
html.dark-mode .modal-metric-list strong { color: #64b5f6; }
.modal-metric-list p { margin: 0; font-size: .9em; line-height: 1.5; color: #555; }
html.dark-mode .modal-metric-list p { color: #bbb; }


.player-stats-modal .player-stats-popup-content {
    background-color: #fff; color: #333; border-radius: 10px; padding: 25px; width: 90%; max-width: 550px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2); display: flex; flex-direction: column; max-height: 85vh;
}
html.dark-mode .player-stats-modal .player-stats-popup-content { background-color: #2c3e50; color: #ecf0f1; box-shadow: 0 5px 20px rgba(255, 255, 255, .1); }
.player-stats-modal .popup-header { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; }
html.dark-mode .player-stats-modal .popup-header { border-bottom-color: #4a627a; }
.player-stats-modal .popup-team-logo {
    width: var(--team-logo-size-table);
    height: var(--team-logo-size-table);
    object-fit: contain;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #f0f0f0;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
html.dark-mode .player-stats-modal .popup-team-logo { background-color: #34495e; box-shadow: 0 2px 4px rgba(255, 255, 255, .05); }
.player-stats-modal .popup-player-name-styled { font-size: 1.8em; font-weight: 700; margin: 0; color: #007bff; line-height: 1.2; }
html.dark-mode .player-stats-modal .popup-player-name-styled { color: #64b5f6; }
.player-stats-modal .popup-stats-list { overflow-y: auto; padding-right: 10px; }
.player-stats-modal .popup-stats-list div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: .95em; }
.player-stats-modal .popup-stats-list div:last-child { border-bottom: none; }
html.dark-mode .player-stats-modal .popup-stats-list div { border-bottom-color: #3e566d; }
.player-stats-modal .popup-stats-list strong { color: #555; font-weight: 600; margin-right: 10px; }
html.dark-mode .player-stats-modal .popup-stats-list strong { color: #bdc3c7; }
.player-stats-modal .popup-stats-list span.stat-value { font-weight: 500; color: #2c3e50; }
html.dark-mode .player-stats-modal .popup-stats-list span.stat-value { color: #ecf0f1; }

.page-info-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}

.page-info-modal-content {
    position: relative;
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    margin: auto;
    text-align: left;
    max-height: 80vh;
    overflow-y: auto;
}

html.dark-mode .page-info-modal-content {
    background-color: #2c2c2c;
    color: #e0e0e0;
}

.page-info-modal-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #007bff;
    text-align: center;
    font-size: 1.5em;
}

html.dark-mode .page-info-modal-content h3 {
    color: #64b5f6;
}
.page-info-modal-content p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}
.page-info-modal-content p:last-child {
    margin-bottom: 0;
}
html.dark-mode .page-info-modal-content p {
    color: #e0e0e0;
}
.page-info-modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}
html.dark-mode .page-info-modal-close-button {
    color: #777;
}
.page-info-modal-close-button:hover,
.page-info-modal-close-button:focus {
    color: #333;
    text-decoration: none;
}
html.dark-mode .page-info-modal-close-button:hover,
html.dark-mode .page-info-modal-close-button:focus {
    color: #ccc;
}

.top-right-info-icon-wrapper {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}

.container {
    position: relative;
}

.page-info-modal-content .page-info-icon {
    display: none;
}

.page-info-icon {
    font-size: 1.4em;
    color: #007bff;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.3s;
}

html.dark-mode .page-info-icon {
    color: #64b5f6;
}

.page-info-icon:hover {
    opacity: 0.7;
}

#matchupMatrixInfoModal .page-info-modal-content ul {
    list-style-type: none;
    padding-left: 0;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0;
}

#matchupMatrixInfoModal .page-info-modal-content ul li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
#matchupMatrixInfoModal .page-info-modal-content ul li span[class*="difficulty-display-bg-tier"] {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-block;
    line-height: 1.2;
    min-width: 120px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
}
html.dark-mode #matchupMatrixInfoModal .page-info-modal-content ul li span[class*="difficulty-display-bg-tier"] {
    border: 1px solid rgba(255,255,255,0.2);
}

.difficulty-display-bg-tier1 { background-color: #FFEBEE; color: #B71C1C; }
.difficulty-display-bg-tier2 { background-color: #FFCCBC; color: #BF360C; }
.difficulty-display-bg-tier3 { background-color: #FFE0B2; color: #E65100; }
.difficulty-display-bg-tier4 { background-color: #FFF9C4; color: #795548; }
.difficulty-display-bg-tier5 { background-color: #DCEDC8; color: #1B5E20; }
.difficulty-display-bg-tier6 { background-color: #C8E6C9; color: #1B5E20; }

html.dark-mode .difficulty-display-bg-tier1 { background-color: #6D2020; color: #FFCDD2; }
html.dark-mode .difficulty-display-bg-tier2 { background-color: #7D3A2A; color: #FFCCBC; }
html.dark-mode .difficulty-display-bg-tier3 { background-color: #854A00; color: #FFE0B2; }
html.dark-mode .difficulty-display-bg-tier4 { background-color: #756600; color: #FFF9C4; }
html.dark-mode .difficulty-display-bg-tier5 { background-color: #33691E; color: #DCEDC8; }
html.dark-mode .difficulty-display-bg-tier6 { background-color: #1B5E20; color: #C8E6C9; }


#shareButtonsContainer { display: none; margin-top: 25px; padding-bottom: 10px; text-align: center; }
#shareButtonsContainer .share-buttons { display: inline-flex; justify-content: center; flex-wrap: nowrap; gap: 15px; box-sizing: border-box; }
#shareButtonsContainer .share-buttons button {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    border-radius: 50%; margin: 0; border: none; cursor: pointer; font-size: 1.1em; color: #fff !important;
    transition: opacity .3s; box-sizing: border-box;
}
#shareButtonsContainer .share-buttons button:hover { opacity: .7; }
#generateLinkButton { background-color: #333 !important; }
#facebookShareButton { background-color: #1877f2 !important; }
#xShareButton { background-color: #000 !important; }
#redditShareButton { background-color: #ff4500 !important; }
#whatsappShareButton { background-color: #25d366 !important; }

#backToTop {
    position: fixed; bottom: 20px; right: 20px; background-color: #007bff; color: #fff; padding: 10px 15px;
    border: none; border-radius: 4px; cursor: pointer; display: none;
    transition: background-color .3s, opacity .3s, visibility .3s; z-index: 100; opacity: .8; font-size: 1.2em;
}
#backToTop:hover { background-color: #0056b3; opacity: 1; }
#loadingIndicator, .loading-matrix, .loading-captains, .loading-trends {
    text-align: center; margin-top: 20px; font-size: 1.2em; display: none; width: 100%; color: #555;
}
html.dark-mode #loadingIndicator,
html.dark-mode .loading-matrix,
html.dark-mode .loading-captains,
html.dark-mode .loading-trends {
    color: #bbb;
}

.no-matrix-message, .no-captains-message, .no-teams-message
{
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
}
html.dark-mode .no-matrix-message,
html.dark-mode .no-captains-message,
html.dark-mode .no-teams-message {
    color: #aaa;
}

.difficulty-tier-1 { background-color: #FFEBEE; color: #B71C1C; }
.difficulty-tier-2 { background-color: #FFCCBC; color: #BF360C; }
.difficulty-tier-3 { background-color: #FFE0B2; color: #E65100; }
.difficulty-tier-4 { background-color: #FFF9C4; color: #795548; }
.difficulty-tier-5 { background-color: #DCEDC8; color: #1B5E20; }
.difficulty-tier-6 { background-color: #C8E6C9; color: #1B5E20; }

html.dark-mode .difficulty-tier-1 { background-color: #6D2020; color: #FFCDD2; }
html.dark-mode .difficulty-tier-2 { background-color: #7D3A2A; color: #FFCCBC; }
html.dark-mode .difficulty-tier-3 { background-color: #854A00; color: #FFE0B2; }
html.dark-mode .difficulty-tier-4 { background-color: #756600; color: #FFF9C4; }
html.dark-mode .difficulty-tier-5 { background-color: #33691E; color: #DCEDC8; }
html.dark-mode .difficulty-tier-6 { background-color: #1B5E20; color: #C8E6C9; }

.comparison-table span[class^="difficulty-"] {
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: bold;
}

.afl-fantasy-logo, .afl-sc-logo {
    display: block;
    height: auto;
    margin: 3px auto 5px auto;
    box-sizing: border-box;
    max-width: 80px;
}

.afl-logo { display: block; margin: 20px auto; max-width: 200px; height: auto; }

#hero {
    text-align: center; padding: 40px 20px; background-color: #444; color: #fff; border-radius: 8px;
    margin-bottom: 30px; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); box-sizing: border-box; width: auto;
}
#hero h1 { color: #fff; margin-bottom: .5rem; }
#hero p { opacity: .9; }

#league-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 900px;
    margin: 30px auto 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}

.ranking-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    transition: box-shadow .3s, transform .2s;
    width: 160px;
    aspect-ratio: 1/1;
    height: auto;
    box-sizing: border-box;
    cursor: pointer;
    perspective: 1000px;
}

.ranking-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
}
html.dark-mode .ranking-card {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
html.dark-mode .ranking-card:hover { box-shadow: 0 4px 8px rgba(255, 255, 255, .15); }

.ranking-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.ranking-card .ranking-card-inner.is-flipped {
    transform: rotateY(180deg);
}
.ranking-card-front,
.ranking-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    padding: 8px;
    box-sizing: border-box;
}

.ranking-card-front {
}

.ranking-card-front img {
    max-height: 100px;
    max-width: 100px;
    object-fit: contain;
    margin-top: 5px;
}
html.dark-mode .ranking-card-front h3 {
    color: #e0e0e0;
}

.ranking-card-back {
    transform: rotateY(180deg);
    font-size: 0.8em;
    padding: 15px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
html.dark-mode .ranking-card-back {
    background-color: #2c2c2c;
}
.ranking-card-back .projection-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
    display: block;
    font-size: 1.1em;
}
.ranking-card-back .projection-value {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}
html.dark-mode .ranking-card-back .projection-label,
html.dark-mode .ranking-card-back .projection-value {
    color: #e0e0e0;
}
.ranking-card-back .opponent-logo {
    max-width: 35px;
    max-height: 35px;
    vertical-align: middle;
    margin: 0;
    display: block;
}
.ranking-card-back .opponent-logo.bye-logo {
    content: url('bye-logo.png');
    max-width: 35px;
    max-height: 35px;
    padding-top: 5px;
}

.ranking-card > p {
    display: none;
}
.ranking-number {
    display: none;
}

    #league-selection .ranking-card {
        width: 100%;
        height: 380px;
        box-sizing: border-box;
        overflow: hidden;
        aspect-ratio: auto;
        justify-self: center;
    }

    #league-selection .ranking-card-front,
    #league-selection .ranking-card-back {
        padding: 20px 15px;
    }

    #league-selection .ranking-card-front .league-logo {
        display: block;
        width: 250px !important;
        height: 250px !important;
        object-fit: contain;
        margin: auto auto 15px auto;
        flex-shrink: 0;
    }
    #league-selection .ranking-card-front {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #league-selection .ranking-card-front .league-link {
        font-size: 1.1em;
        font-weight: 600;
        text-decoration: none;
        color: #007bff;
        transition: color 0.3s;
        margin-top: 0;
        text-align: center;
        width: 100%;
    }

html.dark-mode #league-selection .ranking-card-front .league-link {
    color: #64b5f6;
}

#league-selection .league-card-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

#league-selection .league-card-link-list li {
    margin-bottom: 8px;
}
#league-selection .league-card-link-list li:last-child {
    margin-bottom: 0;
}

#league-selection .league-card-link-list a {
    display: block;
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
html.dark-mode #league-selection .league-card-link-list a {
    color: #64b5f6;
}

#league-selection .league-card-link-list a:hover,
#league-selection .league-card-link-list a:focus {
    background-color: #e0e0e0;
    color: #0056b3;
}
html.dark-mode #league-selection .league-card-link-list a:hover,
html.dark-mode #league-selection .league-card-link-list a:focus {
    background-color: #4a4a4a;
    color: #80cfff;
}


footer {
    display: block; padding: 10px 10px; margin-top: 10px; background-color: #333; color: #fff;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, .2); box-sizing: border-box; width: 100%; border-radius: 0;
    text-align: center; flex-shrink: 0; transition: background-color .3s, color .3s;
}
.footer-content-wrapper { display: block; max-width: 1200px; margin: 0 auto; padding: 10px 0; }
.mobile-footer-section { width: 90%; max-width: 500px; margin: 0 auto 20px; padding: 0; text-align: center; box-sizing: border-box; }
.mobile-footer-section:last-child { margin-bottom: 0; }
.mobile-footer-section h3 { margin-bottom: 10px; font-size: 1.1em; color: #64b5f6; font-weight: 700; transition: color .3s; }
.social-icons { margin-top: 8px; }
.social-icons a { color: #fff; margin: 0 10px; font-size: 1.5em; transition: color .3s; display: inline-block; }
.social-icons a:hover { color: #aaa; }
.mobile-footer-section p { margin: 8px 0; font-size: .9em; line-height: 1.5; }
.mobile-footer-section a { color: #fff; text-decoration: none; margin: 0 5px; transition: color .3s; }
.mobile-footer-section a:hover { text-decoration: underline; color: #bbb; }

#indexContainer #league-selection { max-width: 900px; margin: 30px auto 0 auto; }

#aflFantasyPlayerTrendsContainer > h1,
#aflFantasyPlayerTrendsContainer > h2,
#aflFantasyPlayerTrendsContainer > .afl-fantasy-logo,
#aflFantasyPlayerTrendsContainer > p.description {
    text-align: center;
}
#aflFantasyPlayerTrendsContainer > .afl-fantasy-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.metric-section {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background-color: #fff;
}
html.dark-mode .metric-section {
    background-color: #252525;
    border-color: #404040;
}

.metric-main-header {
    font-size: 1.5em;
    color: #007bff;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative; /* Required for the new line to work */
    border-bottom: none; /* Removes the old border method everywhere */
}

html.dark-mode .metric-main-header {
    color: #64b5f6;
    border-bottom-color: #64b5f6;
}
@media (max-width: 768px) {
    .metric-main-header { font-size: 1.5em; }
}

.accordion-header {
    background-color: #e0e0e0;
    color: #333;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    border: 1px solid #d0d0d0;
    text-align: center;
    outline: none;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    margin-bottom: 0;
    position: relative;
    box-sizing: border-box;
}
.accordion-header .accordion-indicator {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    transition: transform 0.3s ease;
}
.accordion-header.active .accordion-indicator {
    transform: translateY(-50%) rotate(45deg);
}
body:not(.dark-mode) .accordion-header:hover {
    background-color: #d5d5d5;
}
body:not(.dark-mode) .accordion-header.active {
    background-color: #cccccc;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
html.dark-mode .accordion-header {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}
html.dark-mode .accordion-header:hover {
    background-color: #4a4a4a;
}
html.dark-mode .accordion-header.active {
    background-color: #555;
}

.accordion-panel {
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #d0d0d0;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    margin-bottom: 10px;
}
.accordion-panel.active {
    padding: 20px 0 0;
}
html.dark-mode .accordion-panel {
    background-color: #2c2c2c;
    border-color: #555;
    color: #e0e0e0;
}
.accordion-panel .trend-table {
    margin-top: 0; 
    margin-bottom: 0;
}

.expand-collapse-controls {
    text-align: center;
    margin-bottom: 15px;
}
.expand-collapse-controls .button {
    background-color: #007bff;
    color: white; border: none;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.expand-collapse-controls .button:hover {
    background-color: #0056b3;
}
html.dark-mode .expand-collapse-controls .button {
    background-color: #64b5f6;
    color: #1a1a1a;
}
html.dark-mode .expand-collapse-controls .button:hover {
    background-color: #2196f3;
}

.trend-table {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    border-collapse: collapse;
    table-layout: fixed;
}
.trend-table th, .trend-table td {
    border: 1px solid #ddd;
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.trend-table thead th {
    background-color: #e8e8e8;
    color: #333;
    font-weight: bold;
    white-space: normal;
}
html.dark-mode .trend-table thead th {
    background-color: #383838;
    border-color: #555;
    color: #e0e0e0;
}

body:not(.dark-mode) .trend-table tbody tr:hover {
    background-color: #f0f0f0;
}

html.dark-mode .trend-table td {
    border-color: #555;
    color: #e0e0e0;
}
html.dark-mode .trend-table tbody tr:hover {
    background-color: #3a3a3a;
}
.trend-table td img {
    max-width: 30px;
    max-height: 30px;
    vertical-align: middle;
    display: inline-block;
}

table#captainsTable td img {
    width: var(--team-logo-size-table);
    height: var(--team-logo-size-table);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

table#captainsTable {
    table-layout: auto;
}

table#captainsTable th:first-child,
table#captainsTable td:first-child {
    width: 50px;
    min-width: 40px;
    max-width: 60px;
    white-space: nowrap;
}

table#captainsTable th:not(:first-child),
table#captainsTable td:not(:first-child) {
    width: auto;
}

.metric-main-header .info-icon {
    font-size: 0.8em;
    margin-left: 8px;
    color: #007bff;
    cursor: pointer;
    vertical-align: middle;
}
html.dark-mode .metric-main-header .info-icon {
    color: #64b5f6;
}

#togInfoModal .modal-content {
    max-width: 500px;
}
#togInfoModal ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}
#togInfoModal ul li {
    margin-bottom: 8px;
}

@media (min-width: 769px) {
    #injuryAccordionContainer {
      max-width: 800px;
      margin: 0 auto;
    }
}

.expand-collapse-controls {
    text-align: center;
    margin-bottom: 15px;
}
.expand-collapse-controls .button {
    background-color: #007bff;
    color: white; border: none;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.expand-collapse-controls .button:hover {
    background-color: #0056b3;
}
html.dark-mode .expand-collapse-controls .button {
    background-color: #64b5f6;
    color: #1a1a1a;
}
html.dark-mode .expand-collapse-controls .button:hover {
    background-color: #2196f3;
}

#injuryListContainerPage #inputContainer {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto 25px auto;
}

#comingSoonMessage {
    text-align: center;
    padding: 40px;
    font-style: italic;
    color: #666;
}
html.dark-mode #comingSoonMessage {
    color: #aaa;
}

.sort-button-container {
    text-align: center;
    margin-bottom: 20px;
}

#openSortModalButton {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    min-width: 250px;
}

#openSortModalButton:hover {
    background-color: #0056b3;
}

#openSortModalButton .fa-angle-down {
    margin-left: 8px;
}

html.dark-mode #openSortModalButton {
    background-color: #64b5f6;
    color: #1a1a1a;
}

html.dark-mode #openSortModalButton:hover {
    background-color: #2196f3;
}

#sortOptionsModal .modal-content {
    max-width: 400px;
    padding: 20px 25px 25px 25px;
    display: flex;
    flex-direction: column;
}

#sortOptionsModal .modal-content h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3em;
    color: #333;
}
html.dark-mode #sortOptionsModal .modal-content h3 {
    color: #64b5f6;
}

ul.sort-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}

ul.sort-options-list li a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #007bff;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
}

ul.sort-options-list li a:hover {
    background-color: #f0f0f0;
    color: #0056b3;
}

ul.sort-options-list li a.active-sort-option {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

html.dark-mode ul.sort-options-list li a {
    color: #64b5f6;
}

html.dark-mode ul.sort-options-list li a:hover {
    background-color: #383838;
    color: #80cfff;
}

html.dark-mode ul.sort-options-list li a.active-sort-option {
    background-color: #64b5f6;
    color: #1a1a1a;
}

.round-navigation {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.round-navigation .button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.round-navigation .button:hover:not(:disabled) {
    background-color: #0056b3;
}

.round-navigation .button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

html.dark-mode .round-navigation .button {
    background-color: #64b5f6;
    color: #1a1a1a;
}

html.dark-mode .round-navigation .button:hover:not(:disabled) {
    background-color: #2196f3;
}

html.dark-mode .round-navigation .button:disabled {
    background-color: #555;
    color: #888;
}

#matchupTable td, #matchupTable th {
    height: 45px;
    min-height: 45px;
    padding: 5px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#matchupTable td:first-child {
    text-align: center;
    padding-left: 5px;
}

#matchupTable td img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

#matchupTable thead th {
    height: 45px;
    min-height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container { width: 95%; padding: 15px; }
    h1 { font-size: 2em; margin-bottom: .1rem; }
    h2 { font-size: 1.2em; margin-top: .1rem; }
    .afl-fantasy-logo, .afl-sc-logo { max-width: 80px; margin-top: 3px; margin-bottom: 3px; }

    nav {
        justify-content: space-between;
        height: 85px;
        min-height: 85px;
    }
    #nav-logo-link-desktop {
        display: inline-block !important;
        order: 1;
        z-index: 1003;
    }
    #nav-logo { max-height: 60px; }
    nav ul.desktop-nav-links, nav .desktop-dark-mode-toggle { display: none !important; }

    nav .hamburger {
        display: block; font-size: 2.1em; cursor: pointer; color: #fff; z-index: 1002;
        background: none; border: none; padding: 5px; transition: opacity 0.3s ease-in-out; order: 3;
    }
    nav .hamburger.hidden { opacity: 0; pointer-events: none; }

.mobile-nav-slide-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: #2a2a2a;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-in-out;
    z-index: 1004;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}
    .mobile-nav-slide-panel.open { right: 0; }
    html.dark-mode .mobile-nav-slide-panel { background-color: #1c1c1c; border-left: 1px solid #333; }

    .mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background-color: #333;
        flex-shrink: 0;
        border-bottom: 1px solid #444;
    }
    html.dark-mode .mobile-nav-header { background-color: #252525; border-bottom-color: #383838; }
    .mobile-nav-close {
        font-size: 2.2em;
        color: #fff;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        line-height: 1;
    }
    .mobile-nav-close:hover { color: #ccc; }

    .mobile-nav-header .mobile-dark-mode-toggle .switch {
        margin: 0 0 0 8px;
    }

    ul.mobile-nav-links-container { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; }
    ul.mobile-nav-links-container li { border-bottom: 1px solid #444; }
    html.dark-mode ul.mobile-nav-links-container li { border-bottom-color: #383838; }
    ul.mobile-nav-links-container li:last-child { border-bottom: none; }
    ul.mobile-nav-links-container li a {
        display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
        color: #e0e0e0; text-decoration: none; font-size: 1.05em; transition: background-color 0.2s, color 0.2s;
    }
    ul.mobile-nav-links-container li a:hover { background-color: #404040; color: #fff; }
    html.dark-mode ul.mobile-nav-links-container li a:hover { background-color: #303030; }
    ul.mobile-nav-links-container li a .link-content { display: flex; align-items: center; justify-content: flex-end; text-align: right; flex-grow: 1; }
    .nav-link-icon-fa { margin-left: 12px; font-size: 1em; min-width: 18px; text-align: center; flex-shrink: 0; }
    .dropdown-toggle-symbol { margin-right: 15px; font-weight: bold; font-size: 1.1em; width: 18px; display: inline-block; text-align: center; flex-shrink: 0; }

    ul.mobile-nav-links-container li.dropdown .dropdown-content {
        list-style: none; padding: 0; margin: 0; background-color: rgba(0,0,0,0.15);
        max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out;
    }
    html.dark-mode ul.mobile-nav-links-container li.dropdown .dropdown-content { background-color: rgba(0,0,0,0.25); }
    ul.mobile-nav-links-container li.dropdown .dropdown-content.active { border-top: 1px solid #444; }
    html.dark-mode ul.mobile-nav-links-container li.dropdown .dropdown-content.active { border-top-color: #383838; }
    ul.mobile-nav-links-container li.dropdown .dropdown-content a {
        padding: 14px 20px 14px 40px; font-size: 0.95em; color: #ccc; justify-content: flex-end; text-align: right;
    }
    ul.mobile-nav-links-container li.dropdown .dropdown-content a:hover { background-color: #383838; color: #fff; }
    html.dark-mode ul.mobile-nav-links-container li.dropdown .dropdown-content a:hover { background-color: #282828; }

    .mobile-nav-footer {
        padding: 15px 20px;
        background-color: #333;
        border-top: 1px solid #444;
        margin-top: auto;
        flex-shrink: 0;
    }
    html.dark-mode .mobile-nav-footer { background-color: #252525; border-top-color: #383838; }
    .mobile-dark-mode-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #e0e0e0;
        font-size: 1em;
    }
    .mobile-dark-mode-toggle .switch {
        margin-left: 10px;
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 0;
    }


    #inputContainer button { padding: 10px 15px; }
    #league-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .ranking-card {
        width: 100%;
        max-width: 160px;
        aspect-ratio: 1/1;
        height: auto;
        justify-self: center;
    }

    #league-selection .ranking-card {
        width: 100%;
        max-width: 160px;
        height: 260px;
        justify-self: center;
        overflow: hidden;
    }

    #league-selection .ranking-card-front {
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .ranking-card-front img {
        max-height: 80px;
        max-width: 80px;
        object-fit: contain;
        margin-top: 5px;
    }
    #league-selection .ranking-card-front .league-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
        margin-top: 0;
    }

    #league-selection .ranking-card-front .league-link {
        font-size: 0.95em;
        margin-top: 0;
    }

    #league-selection .league-card-link-list a {
        font-size: 0.85em;
        padding: 3px 8px;
    }

    #navAFLWFantasyMobile .nav-link-icon-fa,
    #navAFLWFantasy .fa-female {
        color: hotpink;
    }

#navAFLWFantasyMobile .fa-female::before {
    content: "\f44e";
    font-weight: 900;
}

    #playerDataContainer {
        width: 100%;
        scroll-margin-top: 100px; /* 85px Mobile Nav + 15px buffer */
    }

    table.comparison-table {
        font-size: .75em;
        border-left: none;
        border-right: none;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
    table.comparison-table th,
    table.comparison-table td {
        padding: 6px 4px;
        border: 1px solid #ccc;
    }
    html.dark-mode table.comparison-table th,
    html.dark-mode table.comparison-table td {
        border: 1px solid #555;
    }

    table.comparison-table thead th:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
    }
    table.comparison-table thead th:first-child {
        border-right: none;
    }
    table.comparison-table thead th:last-child {
        border-left: none;
    }
    table.comparison-table thead th:first-child:last-child {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    html.dark-mode table.comparison-table thead th:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
    }
    html.dark-mode table.comparison-table thead th:first-child {
        border-right: none;
    }
    html.dark-mode table.comparison-table thead th:last-child {
        border-left: none;
    }
    html.dark-mode table.comparison-table thead th:first-child:last-child {
        border-left: 1px solid #555;
        border-right: 1px solid #555;
    }

    table.comparison-table th.section-header {
        text-align: left;
        padding-left: 10px;
    }


    table.comparison-table thead th {
        /* Adjusted to 84px to close the gap */
        top: 84px !important; 
        white-space: normal;
    }


    .ranking-cards-container { overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }

    .ranking-card-back {
        font-size: 0.75em;
    }
    .ranking-card-back .opponent-logo {
        max-width: 35px;
        max-height: 35px;
        padding-top: 5px;
    }
    .ranking-card-back .opponent-logo.bye-logo {
        max-width: 35px;
        max-height: 35px;
        padding-top: 5px;

    }

    .social-icons a { font-size: 1.6em; }
    .mobile-footer-section p { font-size: .9em; }
    #inputContainer { padding-left: 10px; padding-right: 10px; }

    .modal-content {
        padding: 20px;
        max-height: 85vh;
    }
    .modal-content h2 {
        font-size: 1.5em;
    }
    #sortOptionsModal .modal-content {
        max-width: 95%;
        padding: 15px;
    }
     #sortOptionsModal .modal-content h3 {
        font-size: 1.2em;
    }
    ul.sort-options-list li a {
        padding: 10px 12px;
        font-size: 0.95em;
    }

    .modal-close-button {
        font-size: 24px;
        top: 8px;
        right: 12px;
    }

    .trend-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 0.80em !important;
        border-collapse: collapse !important;
    }
    .trend-table thead { display: table-header-group !important; }
    .trend-table tbody { display: table-row-group !important; }
    .trend-table tr { display: table-row !important; }
    .trend-table th, .trend-table td { display: table-cell !important; }

    .form-table th,
    .form-table td {
        font-size: 0.75em;
        padding: 8px 4px;
    }
    .form-table th:first-child,
    .form-table td:first-child {
        min-width: 90px;
        max-width: 140px;
    }

    .form-table th:not(:first-child),
    .form-table td:not(:first-child) {
        width: 33.33%;
    }

    table#captainsTable {
        table-layout: auto !important;
    }

    table#captainsTable th:first-child,
    table#captainsTable td:first-child {
        width: 45px;
        min-width: 35px;
        max-width: 55px;
    }

    table#captainsTable th:not(:first-child),
    table#captainsTable td:not(:first-child) {
        width: auto;
    }


    #matchupTable thead th {
    }

    #matchupTable td:first-child {
        padding-left: 5px;
    }

    #matchupTable td img {
        max-width: 25px;
        max-height: 25px;
    }
    #matchupTable td:not(:first-child) {
        white-space: normal;
        line-height: 1.2;
    }


    .page-info-modal-content {
        max-width: 95%;
        padding: 20px 15px;
    }
    .page-info-modal-content p {
        font-size: 0.9em;
    }

    .round-navigation {
        flex-direction: row;
        gap: 8px;
    }
    .round-navigation .button {
        padding: 8px 12px;
        font-size: 0.85em;
        flex-grow: 1;
        min-width: 0;
    }

    #best22Container .player-card-b22-name {
        font-size: clamp(0.85em, 2.4vw, 0.9em);
    }
    #best22Container .player-card-b22-info {
        font-size: clamp(0.7em, 2vw, 0.75em);
    }
    #best22Container .player-card-b22-avg {
        font-size: clamp(0.9em, 2.8vw, 1em);
        padding: 2px 5px;
        top: 6px;
        left: 6px;
    }
    #best22Container .player-card-b22-img {
        width: 60px;
        height: 60px;
        margin: 30px auto 8px auto;
    }
}

@media (min-width: 769px) {
    .mobile-nav-slide-panel { display: none !important; }
    #nav-logo-link-desktop { display: inline-block !important; order: 1; }
    #nav-logo { max-height: 75px; }
    nav ul.desktop-nav-links { display: flex !important; order: 2; flex-grow: 1; margin: 0; justify-content: center; }
    nav .desktop-dark-mode-toggle { display: flex !important; order: 3; }
    nav .hamburger { display: none !important; }

    #inputContainer {
        display: grid;
        grid-template-columns: repeat(4, minmax(160px, 1fr));
        gap: 15px;
        align-items: center;
        justify-content: center;
        width: 95%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #inputContainer .input-wrapper { width: 100%; max-width: none; display: flex; justify-content: center; align-items: center; }
    #inputContainer .input-wrapper.year-wrapper { grid-column: 1 / -1; order: 1; justify-self: center; max-width: 200px; }
    #inputContainer .input-wrapper.year-wrapper select { width: 100%; }
    #inputContainer .input-wrapper.player-wrapper { order: 2; }
    #inputContainer .input-wrapper.player-wrapper input { width: 100%; }
    #inputContainer .input-wrapper.button-wrapper { grid-column: 1 / -1; order: 3; justify-self: center; max-width: 300px; gap: 10px; }
    #inputContainer .input-wrapper.button-wrapper button { flex: 1 1 auto; max-width: 140px; }
    #inputContainer .share-buttons { display: none !important; }

    table.comparison-table thead th:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
    }
    table.comparison-table thead th:first-child {
        border-right: none;
    }
    table.comparison-table thead th:last-child {
        border-left: none;
    }
    table.comparison-table thead th:first-child:last-child {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    html.dark-mode table.comparison-table thead th:not(:first-child):not(:last-child) {
        border-left: none;
        border-right: none;
    }
    html.dark-mode table.comparison-table thead th:first-child {
        border-right: none;
    }
    html.dark-mode table.comparison-table thead th:last-child {
        border-left: none;
    }
    html.dark-mode table.comparison-table thead th:first-child:last-child {
        border-left: 1px solid #555;
        border-right: 1px solid #555;
    }

    table.comparison-table th.section-header {
        text-align: left;
        padding-left: 10px;
    }

    #league-selection .ranking-card-front .league-logo {
        width: 250px !important;
        height: 250px !important;
        margin: auto;
    }

    #league-selection .ranking-card-front .league-link {
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

}

.blog-filter-container {
    text-align: center;
    margin-bottom: 30px;
    padding: 10px 0;
}

#leagueFilter {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    background-color: #fff;
    color: #333;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
}

#leagueFilter:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    outline: none;
}

html.dark-mode #leagueFilter {
    background-color: #252525;
    border-color: #444;
    color: #e0e0e0;
}

html.dark-mode #leagueFilter:focus {
    border-color: #64b5f6;
    box-shadow: 0 0 5px rgba(100, 181, 246, 0.2);
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 0 10px;
    justify-content: center;
    align-items: stretch;
}

.blog-post-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
}

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

html.dark-mode .blog-post-card {
    background-color: #2c2c2c;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

html.dark-mode .blog-post-card:hover {
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1);
}

.blog-post-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.blog-post-card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-post-card-content h3 {
    font-size: 1.2em;
    color: #007bff;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
}

html.dark-mode .blog-post-card-content h3 {
    color: #64b5f6;
}

.blog-post-card-content p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
    flex-grow: 1;
}

html.dark-mode .blog-post-card-content p {
    color: #bbb;
}

.blog-post-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    color: #888;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

html.dark-mode .blog-post-card-meta {
    color: #aaa;
    border-top-color: #444;
}

.blog-post-card-meta .league-logo-small {
    height: 24px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .blog-posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }

    .blog-post-card {
        height: auto;
    }

    .blog-post-card-image {
        height: 150px;
    }

    .blog-post-card-content {
        padding: 12px;
    }

    .blog-post-card-content h3 {
        font-size: 1.1em;
    }

    .blog-post-card-content p {
        font-size: 0.85em;
    }
}

.blog-post-container {
    padding-top: 15px;
}

.blog-post-container header {
    margin-bottom: 25px;
}

.blog-post-container header h1 {
    font-size: 2.5em;
    margin-bottom: 0.2rem;
    color: #007bff;
}

html.dark-mode .blog-post-container header h1 {
    color: #64b5f6;
}

.blog-post-container header p.description {
    font-size: 1.1em;
    color: #666;
    margin-top: 5px;
    text-align: center;
}

html.dark-mode .blog-post-container header p.description {
    color: #ccc;
}

.blog-content {
    line-height: 1.8;
    font-size: 1.05em;
    color: #333;
}

html.dark-mode .blog-content {
    color: #e0e0e0;
}

.blog-main-image {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.blog-content h2 {
    font-size: 1.8em;
    color: #333;
    margin-top: 35px;
    margin-bottom: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

html.dark-mode .blog-content h2 {
    color: #ddd;
    border-bottom-color: #444;
}

.blog-content h3 {
    font-size: 1.4em;
    color: #555;
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: left;
}

html.dark-mode .blog-content h3 {
    color: #bbb;
}

.blog-content p {
    margin-bottom: 1em;
}

.blog-content ul {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 1em;
}

.blog-content ul li {
    margin-bottom: 0.5em;
}

.share-buttons-post {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

html.dark-mode .share-buttons-post {
    border-top-color: #444;
}

.share-buttons-post h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 15px;
}

html.dark-mode .share-buttons-post h3 {
    color: #e0e0e0;
}

.share-buttons-post .share-buttons {
    display: inline-flex;
    justify-content: center;
    gap: 15px;
}

@media (max-width: 768px) {
    .blog-post-container header h1 {
        font-size: 2em;
    }

    .blog-post-container header p.description {
        font-size: 1em;
    }

    .blog-main-image {
        max-height: 250px;
        margin-bottom: 20px;
    }

    .blog-content {
        font-size: 1em;
    }

    .blog-content h2 {
        font-size: 1.5em;
        margin-top: 25px;
        margin-bottom: 10px;
    }

    .blog-content h3 {
        font-size: 1.2em;
        margin-top: 20px;
        margin-bottom: 8px;
    }
}

#best22Container > .afl-fantasy-logo {
    display: block;
    margin: 5px auto 8px auto;
    max-width: 80px;
}

#best22Container > h1 {
    text-align: center;
    color: #007bff;
    font-size: 1.8em;
    margin-top: 0.4rem;
    margin-bottom: 0.2rem;
}
html.dark-mode #best22Container > h1 {
    color: #64b5f6;
}

#best22Container > p.description {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 0.5rem;
    color: #666;
    font-size: 1.1em;
    transition: color 0.3s;
    box-sizing: border-box;
}
html.dark-mode #best22Container > p.description {
    color: #ccc;
}

.best22-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.position-group h2 {
    font-size: 1.8em;
    color: #333;
    text-align: left;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eee;
}

html.dark-mode .position-group h2 {
    color: #ddd;
    border-bottom-color: #444;
}

.player-cards-container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    justify-content: center;
    justify-items: center;
}

.player-card-b22 {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 140px;
    height: 180px;
    box-sizing: border-box;
}
html.dark-mode .player-card-b22 {
    background-color: #2e2e2e;
    border-color: #444;
    box-shadow: 0 2px 4px rgba(255,255,255,0.05);
}

.player-card-b22-avg {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1em;
    font-weight: bold;
    color: #007bff;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
html.dark-mode .player-card-b22-avg {
    color: #64b5f6;
    background-color: rgba(40, 40, 40, 0.85);
    box-shadow: 0 1px 2px rgba(255, 255, 255, .05);
}

.player-card-b22-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 30px auto 8px auto;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html.dark-mode .player-card-b22-img {
    background-color: #3a3a3a;
}
.player-card-b22-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.player-card-b22-details {
    margin-top: auto;
    padding-top: 3px;
    width: 100%;
}

.player-card-b22-name {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
    margin: 0 0 2px 0;
    line-height: 1.2;
    word-wrap: break-word;
}
html.dark-mode .player-card-b22-name {
    color: #e0e0e0;
}

.player-card-b22-info {
    font-size: 0.75em;
    color: #555;
    margin: 0;
    line-height: 1.2;
}
html.dark-mode .player-card-b22-info {
    color: #bbb;
}

.player-card-b22.placeholder {
    background-color: #efefef;
    border-style: dashed;
    color: #999;
    font-style: italic;
}
html.dark-mode .player-card-b22.placeholder {
    background-color: #252525;
    color: #777;
}

#honourableMentions {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #007bff;
}
html.dark-mode #honourableMentions {
    border-top-color: #64b5f6;
}
#honourableMentions h2 {
    text-align: center;
    font-size: 1.8em;
    color: #007bff;
    margin-bottom: 20px;
}
html.dark-mode #honourableMentions h2 {
    color: #64b5f6;
}
.honourable-mentions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.position-group-hm h3 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}
html.dark-mode .position-group-hm h3 {
    color: #ddd;
    border-bottom-color: #555;
}
#honourableMentions ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
#honourableMentions ul li {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 0.95em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
html.dark-mode #honourableMentions ul li {
    background-color: #2c2c2c;
    border-color: #444;
    color: #e0e0e0;
}
.mention-name {
    font-weight: 500;
}
.mention-avg {
    color: #007bff;
    font-weight: bold;
}
html.dark-mode .mention-avg {
    color: #64b5f6;
}

@media (min-width: 769px) {
    #defendersContainer,
    #forwardsContainer {
        grid-template-columns: repeat(3, 140px);
    }
    #midfieldersContainer {
        grid-template-columns: repeat(4, 140px);
    }
    #rucksContainer {
        grid-template-columns: repeat(2, 140px);
    }

    .honourable-mentions-grid {
       grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .honourable-mentions-grid {
       grid-template-columns: repeat(4, 1fr);
    }
}

.team-logo-small {
    --team-logo-size-table: 30px;

    width: var(--team-logo-size-table);
    height: var(--team-logo-size-table);
    object-fit: contain;
    vertical-align: middle;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.form-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.9em;
    table-layout: auto;
}

.form-table th,
.form-table td {
    padding: 10px 8px;
    border: 1px solid #ddd;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.form-table thead,
.form-table tbody {
    display: table-row-group;
}

.form-table tr {
    display: table-row;
}

.form-table th:first-child,
.form-table td:first-child {
    width: auto;
    min-width: 120px;
    max-width: 200px;
    text-align: center;
}

.form-table th:not(:first-child),
.form-table td:not(:first-child) {
    width: 25%;
    text-align: center;
}

.form-table thead th {
    background-color: #e8e8e8;
    color: #333;
    font-weight: bold;
}

.form-table tbody tr:hover td {
    background-color: #f0f0f0;
}

html.dark-mode .form-table th,
html.dark-mode .form-table td {
    border: 1px solid #555;
    color: #e0e0e0;
}

html.dark-mode .form-table thead th {
    background-color: #383838;
    color: #e0e0e0;
}

html.dark-mode .form-table tbody tr:hover td {
    background-color: #3a3a3a;
}

:root {
    --positive-diff-text: #0f5132;
    --negative-diff-text: #58151c;
}

html.dark-mode {
    --positive-diff-text: #c8e6c9;
    --negative-diff-text: #ffcdd2;
}

.positive-diff-text {
    color: var(--positive-diff-text);
}
.negative-diff-text {
    color: var(--negative-diff-text);
}

@media (max-width: 768px) {
    .form-table {
        font-size: 0.75em !important;
    }
    .form-table th,
    .form-table td {
        padding: 8px 4px;
    }

    .form-table th:first-child,
    .form-table td:first-child {
        min-width: 90px;
        max-width: 140px;
    }

    .form-table th:not(:first-child),
    .form-table td:not(:first-child) {
        width: 33.33%;
    }
}
.page-info-modal-content .modal-title-custom {
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
    color: #007bff;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}
html.dark-mode .page-info-modal-content .modal-title-custom {
    color: #64b5f6;
}

.page-info-modal-content .modal-subtitle-custom {
    font-family: 'Nunito Sans', Arial, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}
html.dark-mode .page-info-modal-content .modal-subtitle-custom {
    color: #e0e0e0;
}

.page-info-modal-content .modal-description-custom {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #333;
    text-align: justify;
    font-size: 0.95em;
}
html.dark-mode .page-info-modal-content .modal-description-custom {
    color: #e0e0e0;
}

.modern-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.modern-search-input {
    width: 100%;
    padding: 12px 20px 12px 40px;
    border-radius: 30px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    color: #333;
    font-size: 1em;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #aaa;
    transition: color 0.3s ease-in-out;
}

.modern-search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.modern-search-input:focus ~ .search-icon {
    color: #007bff;
}

html.dark-mode .modern-search-input {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

html.dark-mode .search-icon {
    color: #666;
}

html.dark-mode .modern-search-input:focus {
    border-color: #64b5f6;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

html.dark-mode .modern-search-input:focus ~ .search-icon {
    color: #64b5f6;
}

.select-container {
    text-align: center;
    margin: 20px auto 25px auto;
}

/* Replace the above block with this one */
/* In style.css */

/* This is the base (mobile) style with centered text */
.modern-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 12px 40px; /* Symmetrical padding for centered text */
    text-align: center;
    text-align-last: center;
    border: 1px solid #dcdcdc;
    border-radius: 30px;
    background-color: #fff;
    color: #333;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    min-width: 280px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1em;
    transition: all 0.3s ease-in-out;
}

/* This rule applies only to screens wider than 768px (desktop) */
@media (min-width: 769px) {
    .modern-select {
        /* FIX: Center text on desktop to match mobile */
        padding: 12px 40px; 
        text-align: center;
        text-align-last: center;
    }
}

.modern-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

html.dark-mode .modern-select {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html.dark-mode .modern-select:focus {
    border-color: #64b5f6;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

.accordion-panel .trend-table {
    table-layout: fixed; 
    width: 100%;
    border-left: none;
    border-right: none;
    border-spacing: 0;
}
.accordion-panel .trend-table th:first-child,
.accordion-panel .trend-table td:first-child {
    width: 40%; 
    border-left: none;
}
.accordion-panel .trend-table th:nth-child(2),
.accordion-panel .trend-table td:nth-child(2) {
    width: 20%;
}
.accordion-panel .trend-table th:nth-child(3),
.accordion-panel .trend-table td:nth-child(3) {
    width: 10%;
}
.accordion-panel .trend-table th:last-child,
.accordion-panel .trend-table td:last-child {
    width: 30%;
    border-right: none;
}
.accordion-panel .trend-table tbody tr:last-child td {
    border-bottom: none;
}

.player-cell-content {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center; 
    height: 100%; 
    padding: 4px 0;
    box-sizing: border-box;
}

.player-cell-content .team-logo-small {
    margin-bottom: 5px; 
}

/* ==========================================================================
   Player Trends Page Specific Styling
   ========================================================================== */
/* In style.css */

/* Center the search input container on pages where it's the only input */
#aflFantasyPlayerTrendsContainer #inputContainer,
#aflFantasyPlayerFormContainer #inputContainer,
#aflSuperCoachPlayerFormContainer #inputContainer {
    grid-template-columns: 1fr; /* This overrides the default 4-column grid */
    max-width: 450px;
    margin: 0 auto 25px auto;
}

/* Utility class to hide player rows during search */
.hide-row {
    display: none !important;
}

/* This removes the top padding from the accordion panel on the trends page */
#aflFantasyPlayerTrendsContainer .accordion-panel.active {
    padding-top: 0;
    padding-bottom: 0;
}

/* This removes the side borders and margins from the tables inside the trends page accordions */
#aflFantasyPlayerTrendsContainer .trend-table {
    margin-top: 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
}

/* This removes the bottom border from the last row to make it seamless */
#aflFantasyPlayerTrendsContainer .trend-table tbody tr:last-child td {
    border-bottom: none;
}

/* Overrides for Player Form pages to match style of other tables */
.form-table {
    margin-top: 0;
    margin-bottom: 0;
    font-size: inherit; /* Use default font size */
    border-left: none;
    border-right: none;
}

.form-table th,
.form-table td {
    padding: 4px 8px; /* Match padding of other tables */
}

.form-table tbody tr:last-child td {
    border-bottom: none; /* Make seamless with accordion */
}

@media (max-width: 768px) {
    .form-table, .form-table th, .form-table td {
        font-size: 0.8em !important; /* Match mobile font size of other tables */
    }
}
/* ==========================================================================
   Injury List Page Specific Styling
   ========================================================================== */
#injuryAccordionContainer .accordion-panel {
    padding: 0;
}

#injuryAccordionContainer .accordion-header {
    text-align: left;
    padding-left: 20px;
    display: flex;
    align-items: center;
}

#injuryAccordionContainer .accordion-indicator {
    margin-left: auto;
    position: static;
    transform: none !important;
}

/* ==========================================================================
   Team Trends Page Table Styling
   ========================================================================== */

#team-trends-table th,
#team-trends-table td {
    height: 45px; /* Sets a uniform height for all header and data cells */
    padding: 5px 8px; /* Adjusts padding for better vertical alignment */
}

/* ==========================================================================
   Homepage-Specific Styles (Scoped to #indexContainer)
   ========================================================================== */

/* New H2 Header on Homepage */
#indexContainer .league-select-header {
  font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
  color: #333;
  font-size: 1em;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0.1rem;
}

html.dark-mode #indexContainer .league-select-header {
  color: #e0e0e0;
}

/* Remove Flip Animation on Homepage ONLY */
#indexContainer #league-selection .ranking-card-inner {
  transform: none;
  transition: none;
  transform-style: flat;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

#indexContainer #league-selection .ranking-card .ranking-card-inner.is-flipped {
    transform: none;
}

#indexContainer #league-selection .ranking-card-back {
    display: none;
}

/* --- FINAL HOMEPAGE CARD STYLES (3D EFFECT) --- */
#indexContainer #league-selection .ranking-card {
    width: 250px;
    height: 250px;
    aspect-ratio: 1/1;
    cursor: pointer;
    perspective: none;
    background-color: #ffffff;
    border-radius: 8px;
    /* A more complex shadow to create depth and a "lifted" look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid #e9ecef; /* A subtle darker bottom border for a 3D edge */
    transition: all .2s ease-in-out; /* Transition all properties for a smoother hover */
    box-sizing: border-box;
    overflow: hidden;
}

#indexContainer #league-selection .ranking-card:hover {
    transform: translateY(-5px); /* A slightly larger lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 15px 25px rgba(0, 0, 0, 0.08);
}

html.dark-mode #indexContainer #league-selection .ranking-card {
    background-color: #3a3a3a;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.04), 0 10px 15px rgba(255, 255, 255, 0.04);
    border-bottom: 3px solid #2c2c2c; /* Darker bottom border for dark mode */
}

#indexContainer #league-selection .ranking-card-front {
    padding: 15px; /* REVERTED: A balanced padding */
    display: flex;
    flex-direction: column;
    justify-content: center; /* REVERTED: This properly centers the content */
    align-items: center;
    width: 100%;
    height: 100%;
}

#indexContainer #league-selection .ranking-card-front .league-logo {
    width: 110px !important;
    height: 110px !important;
    max-width: none;      /* THE FIX: Removes the 80px width limit */
    max-height: none;     /* THE FIX: Removes the 80px height limit */
    object-fit: flex;
    margin: 0 auto 10px auto;
    filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, 0.2));
}

html.dark-mode #indexContainer #league-selection .ranking-card-front .league-logo {
    /* The shadow in dark mode is a very subtle glow to make it stand out */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

#indexContainer #league-selection .ranking-card-front .league-link {
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s;
    text-align: center;
    line-height: 1.2;
}

html.dark-mode #indexContainer #league-selection .ranking-card-front .league-link {
    color: #64b5f6;
}

/* --- START: COPY AND REPLACE THE PREVIOUS MODAL LINK STYLES WITH THIS BLOCK --- */

/* NEW: Styles for the link container and individual links */
.league-modal-links-container .modal-tool-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border-radius: 50px; /* Fully rounded ends */
    margin-bottom: 10px;
    transition: background-color 0.2s;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}
html.dark-mode .league-modal-links-container .modal-tool-link {
    border-color: #444;
    background-color: #2c2c2c;
    color: #e0e0e0;
}
.league-modal-links-container .modal-tool-link:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}
html.dark-mode .league-modal-links-container .modal-tool-link:hover {
    background-color: #383838;
    border-color: #555;
}

/* Styles for the tool icons */
.modal-tool-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Styles for the tool text */
.modal-tool-text {
    flex-grow: 1; /* Allows text to expand */
    text-align: center; /* Horizontally centers the text */
    font-weight: 600;
    margin: 0 10px; /* Adds space between icon/arrow and the text */
}

/* NEW: Styles for the arrow button */
/* --- START: REPLACE THE OLD .modal-arrow-button RULES WITH THIS BLOCK --- */

/* NEW: Styles for the modern chevron */
.modal-arrow-button {
    font-size: 1.5em;
    color: #adb5bd; /* A subtle, modern grey */
    font-weight: 400; /* A slightly thinner weight */
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0;
    padding: 0 5px; /* Adds a little space */
}

html.dark-mode .modal-arrow-button {
    color: #899198; /* Lighter grey for dark backgrounds */
}

/* Add a modern hover effect */
.modal-tool-link:hover .modal-arrow-button {
    color: #0d6efd; /* Changes color to match your theme */
    transform: translateX(3px); /* Adds subtle movement */
}

html.dark-mode .modal-tool-link:hover .modal-arrow-button {
    color: #64b5f6;
}

/* --- END: REPLACEMENT BLOCK --- */

/* Responsive Layouts for Carousel and Grid on Homepage */
/* This ensures the desktop grid is visible on desktop */
@media (min-width: 769px) {
    #indexContainer .desktop-grid {
        display: grid;
        grid-template-columns: repeat(4, 250px);
        gap: 20px;
        justify-content: center;
        padding: 20px 0;
    }
    #indexContainer .mobile-carousel {
        display: none;
    }
    #indexContainer #league-selection {
        display: block;
        max-width: none;
        margin: 30px auto 0 auto;
        padding: 0;
    }
}

/* This ensures the mobile carousel is visible on mobile */
@media (max-width: 768px) {
    #indexContainer .desktop-grid {
        display: none;
    }
    #indexContainer .mobile-carousel {
        display: block;
    }
    #indexContainer #league-selection {
        padding: 0;
        margin-top: 0;
        display: block;
    }
}

/* Mobile Carousel Styles */
@media (max-width: 768px) {
    #indexContainer #league-selection {
        padding: 0;
        margin-top: 0;
        display: block;
    }
    #indexContainer .mobile-carousel {
        display: block;
    }
    #indexContainer .swiper {
        width: 100%;
        padding-top: 20px;
        /* Add padding to create space for the dots */
        padding-bottom: 60px;
    }
    #indexContainer .swiper-slide {
        background-position: center;
        background-size: cover;
        /* Make cards square */
        width: 200px;
        height: 200px;
    }
    #indexContainer .swiper-slide .ranking-card {
        width: 100%;
        height: 100%;
    }
    #indexContainer .swiper-slide .ranking-card-front .league-logo {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 10px;
    }
    #indexContainer .swiper-slide .ranking-card-front .league-link {
        font-size: 1em;
    }
    
    /* Hide the navigation arrows */
    #indexContainer .swiper-button-next, 
    #indexContainer .swiper-button-prev {
        display: none;
    }

    /* Style the pagination dots */
    #indexContainer .swiper-pagination {
        /* Position the dots below the carousel */
        bottom: 10px !important;
    }
    #indexContainer .swiper-pagination-bullet {
        background-color: #ccc;
        opacity: 1;
    }
    #indexContainer .swiper-pagination-bullet-active {
        background-color: #007bff;
    }
    html.dark-mode #indexContainer .swiper-pagination-bullet-active {
        background-color: #64b5f6;
    }
}
/* Desktop Grid Styles */
@media (min-width: 769px) {
    #indexContainer .mobile-carousel {
        display: none;
    }
    #indexContainer .desktop-grid {
        display: grid;
        grid-template-columns: repeat(4, 250px);
        gap: 20px;
        justify-content: center;
        padding: 20px 0;
    }
    #indexContainer #league-selection {
        display: block;
        max-width: none;
        margin: 30px auto 0 auto;
        padding: 0;
    }
}

/* --- Final Player Image Styles for Ranking Cards --- */

/* Style for the circular player headshot in a ranking card */
.ranking-card .player-headshot {
  width: 70px;
  height: 70px;
  border-radius: 50%; /* Makes the image circular */
  object-fit: cover;
  margin-bottom: 10px;
  background-color: #f0f0f0; /* Fallback color */
}

/* Style for the fallback team logo to match headshot size */
.ranking-card .team-logo-large {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

/* --- Best 22 Flip Card Styles (Final Version) --- */

/* The main container for perspective */
.player-card-container {
  background-color: transparent;
  width: 150px;
  height: 220px;
  perspective: 1000px;
  margin: 5px;
  font-family: 'Nunito Sans', sans-serif;
}

/* This element holds the front and back sides */
.player-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* This class is added by JavaScript when the card is clicked */
.player-card-container.is-flipped .player-card-inner {
  transform: rotateY(180deg);
}

/* Common styles for front and back */
.player-card-front, .player-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Style the front of the card */
.player-card-front {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #212529;
  padding: 10px;
  padding-top: 20px;
  justify-content: space-evenly;
}

/* --- Dark Mode Styles for Card Front --- */
html.dark-mode .player-card-front {
    background-color: #38404a;
    border-color: #495057;
    color: #f8f9fa;
}

.player-card-b22-avg {
    position: absolute;
    top: 8px;
    left: 8px;
    font-weight: bold;
    font-size: 1.1em;
    color: #007bff;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 3px 7px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

html.dark-mode .player-card-b22-avg {
    color: #64b5f6;
    background-color: rgba(40, 40, 40, 0.85);
}


.player-card-b22-img-container {
    width: 90px;
    height: 90px;
    margin: 0;
}

.player-card-b22-img-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

html.dark-mode .player-card-b22-img-container img {
    border-color: #495057;
}

.player-card-b22-details {
    text-align: center;
    margin-top: 10px;
}

.player-card-b22-name {
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.player-card-b22-info {
    font-size: 0.85em;
    color: #6c757d;
    margin: 4px 0 0 0;
}

html.dark-mode .player-card-b22-info {
    color: #adb5bd;
}

/* Style the back of the card */
.player-card-back {
  background-color: #343a40;
  color: white;
  border: 1px solid #495057;
  transform: rotateY(180deg);
  padding: 15px;
  justify-content: flex-start; 
}

.player-card-back::after {
    content: "";
    flex: 1; 
}

/* MODIFICATION: Targeting the H4 that contains the text directly */
.player-card-back .player-name-back h4 {
  margin: 0 0 5px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #6c757d;
  width: 100%;
  font-size: 1.0em; /* MODIFICATION: Reduced font size */
  font-weight: 700;
  text-align: center;
}

/* MODIFICATION: Resetting the container element to remove the second line */
.player-card-back .player-name-back {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 1em;
    font-weight: normal;
}

.player-card-back .player-stats {
    width: 100%;
    text-align: left;
}

.player-card-back .player-stats p {
  font-size: 0.9em; 
  margin: 4px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-card-back .player-stats span {
  font-weight: bold;
}

/* --- Flip Icon Styling --- */

/* 1. Base style for all flip icons */
.flip-icon {
    position: absolute;
    color: #adb5bd;
    font-size: 1rem;
}

/* 2. Positioning for Best 22 cards ONLY (TOP RIGHT) */
.player-card-container .flip-icon {
    top: 10px;
    right: 10px;
}

/* 3. Positioning for Player Comparison ranking cards ONLY (BOTTOM RIGHT) */
.ranking-card .flip-icon {
    bottom: 10px;
    right: 10px;
}

/* 4. Dark mode color override (remains the same) */
html.dark-mode .player-card-front .flip-icon,
html.dark-mode .ranking-card-front .flip-icon {
    color: #adb5bd;
}

/* --- Breakeven Page Round Number Styling --- */
   
.round-number-header {
    border-bottom: none;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.3em;
}

/* ==========================================================================
   Simple Fade-in Scale Modal Animation (Corrected)
   ========================================================================== */

/* Base state for the modal - hidden and ready for animation */
.page-info-modal {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}

/* When opening, make the modal visible and start the fade-in */
.page-info-modal.is-opening {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease-in-out;
    /* This ensures the modal always displays, overriding other styles */
    display: flex !important; 
}

/* The modal content starts slightly scaled down */
.page-info-modal .page-info-modal-content {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

/* When opening, scale the modal content up to its normal size */
.page-info-modal.is-opening .page-info-modal-content {
    transform: scale(1);
}

/* ==========================================================================
   Best 22 Page Fixes
   ========================================================================== */

/* Fixes the scrollbar issue when a modal is open */
body.modal-is-open {
    overflow: hidden;
}

/* Increases card spacing on desktop */
@media (min-width: 769px) {
    .player-cards-container {
        gap: 20px;
    }
}

/* Reduce padding under "SELECT LEAGUE" header on desktop */
@media (min-width: 769px) {
  #indexContainer #league-selection {
    margin-top: 15px;
  }
}

/* ==========================================================================
   Clickable Player Name Styles
   ========================================================================== */

/* This class will be applied to player names in tables */
.clickable-player-name {
    cursor: pointer;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
    transition: text-decoration 0.2s, color 0.2s;
}

.clickable-player-name:hover {
    text-decoration: underline;
    color: #0056b3;
}

html.dark-mode .clickable-player-name {
    color: #64b5f6;
}

html.dark-mode .clickable-player-name:hover {
    color: #82caff;
}

/* ==========================================================================
   Player Comparison Choice Modal
   ========================================================================== */

.comparison-choice-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
}

.choice-button {
    text-decoration: none;
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.choice-button:hover {
    text-decoration: none !important;
}

#fantasyCompareBtn {
    background-color: #007bff;
}
#fantasyCompareBtn:hover {
    background-color: #0056b3;
}

#supercoachCompareBtn {
    background-color: #e67e22;
}
#supercoachCompareBtn:hover {
    background-color: #d35400;
}

html.dark-mode #fantasyCompareBtn {
    background-color: #64b5f6;
    color: #1a1a1a !important;
}
html.dark-mode #fantasyCompareBtn:hover {
    background-color: #82caff;
}

html.dark-mode #supercoachCompareBtn {
    background-color: #f39c12;
    color: #1a1a1a !important;
}
html.dark-mode #supercoachCompareBtn:hover {
    background-color: #f1c40f;
}

/* ==========================================================================
   UNIFIED ACTIVE NAVIGATION LINK STYLES
   ========================================================================== */

/* Remove old, conflicting active styles first */
nav ul.desktop-nav-links li a.active,
nav ul li.dropdown a.dropbtn.active-parent,
ul.mobile-nav-links-container li a.active,
ul.mobile-nav-links-container li.dropdown .dropdown-content a.active,
ul.mobile-nav-links-container li.dropdown a.dropbtn.active-parent {
    background-color: transparent !important; /* Reset any inline or specific styles */
}

/* NEW: Light Mode Active Styles */
nav ul.desktop-nav-links li a.active,
nav ul.desktop-nav-links li.dropdown .dropdown-content a.active,
nav ul.desktop-nav-links li.dropdown a.dropbtn.active-parent,
ul.mobile-nav-links-container li a.active,
ul.mobile-nav-links-container li.dropdown .dropdown-content a.active,
ul.mobile-nav-links-container li.dropdown a.dropbtn.active-parent {
    background-color: #007bff !important;
    color: white !important;
}

/* NEW: Dark Mode Active Styles */
html.dark-mode nav ul.desktop-nav-links li a.active,
html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content a.active,
html.dark-mode nav ul.desktop-nav-links li.dropdown a.dropbtn.active-parent,
html.dark-mode ul.mobile-nav-links-container li a.active,
html.dark-mode ul.mobile-nav-links-container li.dropdown .dropdown-content a.active,
html.dark-mode ul.mobile-nav-links-container li.dropdown a.dropbtn.active-parent {
    background-color: #64b5f6 !important;
    color: #1a1a1a !important; /* Dark text for contrast on the light blue background */
}

/* Ensure hover is different from active */
nav ul.desktop-nav-links li a:hover {
    background-color: #555 !important;
    color: white !important;
}
html.dark-mode nav ul.desktop-nav-links li a:hover {
    background-color: #444 !important;
}
nav ul.desktop-nav-links li.dropdown .dropdown-content a:hover {
    background-color: #555 !important;
}
html.dark-mode nav ul.desktop-nav-links li.dropdown .dropdown-content a:hover {
    background-color: #444 !important;
}

/* --- Add this new section to the bottom of your style.css file --- */

/* Styles for the new table selector dropdown */
.table-selection {
    margin-bottom: 20px;
}

/* This class is used on your injury list page, so it will match the style */
.custom-select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 16px;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
}

.dark-mode .custom-select {
    background-color: #333;
    color: #fff;
    border-color: #555;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* Styles for sortable table headers in the Position Matrix */
.sortable {
    cursor: pointer;
}

.sortable .fa-sort-up,
.sortable .fa-sort-down {
    color: #007bff; /* Or your preferred highlight color */
}

/* Optional: Add a hover effect to sortable headers */
.trend-table th.sortable:hover {
    background-color: #f2f2f2;
}

.dark-mode .trend-table th.sortable:hover {
    background-color: #444;
}

/* --- Add this new section to the bottom of your style.css file --- */

/* Styles for the new Matrix Selector Dropdown */
.input-container {
    margin-bottom: 20px;
}

#matrixSelectorContainer {
    max-width: 350px; /* Limits the width of the dropdown container */
    margin-left: 0; /* Aligns to the left */
}

.input-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

html.dark-mode .input-container label {
    color: #e0e0e0;
}

/* --- Add this new section to the bottom of your style.css file --- */

/* Center and resize the matrix selector dropdown */
.matrix-selector-wrapper {
    max-width: 350px;
    margin: 0 auto 20px auto; /* This centers the container horizontally */
}

/* --- Add this to the bottom of style.css for the Matrix Dropdown --- */

/* This container centers the dropdown and manages spacing */
.input-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    align-items: center; /* This is the key property for centering */
}

/* This styles the select box itself within the container */
.input-container .custom-select {
    width: 100%;
    max-width: 400px; /* This controls the width */
}

/* === Add these styles to the bottom of your style.css file === */

#positionAccordionContainer .accordion-panel.active {
    padding-bottom: 0;
}

#positionAccordionContainer .trend-table {
    margin-top: 0;
    margin-bottom: 0;
    border-top: none; 
    border-left: none;
    border-right: none;
    border-collapse: collapse; 
    table-layout: fixed; /* <-- Add this line */
}

#positionAccordionContainer .trend-table tbody tr:last-child td {
    border-bottom: none; 
}

#positionAccordionContainer .round-navigation {
    padding-top: 10px; /* Adjusted padding for better look */
}

/* === Add this new block to the bottom of style.css === */

/* Explicitly sets column widths for the Position Matrix accordion tables */
#positionAccordionContainer .trend-table {
    width: 100%;
    table-layout: fixed;
}

/* Sets the width for the first column (Club) */
#positionAccordionContainer .trend-table th:first-child,
#positionAccordionContainer .trend-table td:first-child {
    width: 20%;
}

/* Sets the width for the other five columns (Rounds) */
#positionAccordionContainer .trend-table th:not(:first-child),
#positionAccordionContainer .trend-table td:not(:first-child) {
    width: 16%;
}

/* === Add this new block to the bottom of style.css === */

/* --- Mobile Accordion Fixes for Matchup Matrix --- */

/* 1. Uppercase and bold the titles to match the desired look */
#positionAccordionContainer .accordion-header {
    text-transform: uppercase;
    font-weight: 600;
}

/* 2. Add padding to round navigation buttons on mobile */
@media (max-width: 768px) {
    #positionAccordionContainer .round-navigation {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* === Add this new block to the bottom of style.css === */

/* Restores the correct 45px height to the Position Matrix table rows */
#positionAccordionContainer .trend-table th,
#positionAccordionContainer .trend-table td {
    height: 45px;
}

/* === Forceful override for VC Logo visibility === */
/*
 * This is a highly specific and forceful rule to ensure the VC logo
 * in the captains table is visible, overriding any potential conflicts.
*/
table#captainsTable td .vc-logo {
    display: inline-block !important; /* Force the image to be displayed */
    visibility: visible !important;   /* Force the image to be visible */
    height: 1.1em !important;         /* Force a specific height */
    width: auto !important;           /* Maintain aspect ratio */
    vertical-align: middle !important;/* Aligns the image with the text */
    margin-left: 8px !important;      /* Adds space after the player's name */
}

/* This is the style for the logo in the modal (already working) */
.vc-logo-inline {
    height: 1.2em;
    vertical-align: text-bottom;
    margin-right: 6px;
}

/* ==========================================================================
   UNIFIED MOBILE TABLE TEXT STYLES
   ========================================================================== */
@media (max-width: 768px) {
    /*
     * This rule targets the cells of both the 'Player Form' and 'Player Trends' tables
     * to ensure their text size and padding are consistent on mobile devices.
     */
    .form-table th,
    .form-table td,
    .trend-table th,
    .trend-table td {
        font-size: 1em !important; /* Standardizes the font size to be identical */
        padding: 8px 5px;             /* Creates balanced padding to prevent text wrapping */
    }

    /*
     * This rule ensures the first column (Player Name) in the 'Player Form' table
     * retains enough space to prevent names from spilling onto a new line.
     */
    .form-table td:first-child {
        min-width: 90px; /* Maintains minimum width for the player name column */
    }
}

/* In style.css */

/* Center the search input container on pages where it's the only input */
#aflFantasyPlayerTrendsContainer #inputContainer,
#aflFantasyPlayerFormContainer #inputContainer,
#aflSuperCoachPlayerFormContainer #inputContainer,
#aflwFantasyPlayerFormContainer #inputContainer { /* Add this line */
    grid-template-columns: 1fr; /* This overrides the default 4-column grid */
    max-width: 450px;
    margin: 0 auto 25px auto;
}

/* ==========================================================================
   FINAL UNIFIED CAPTAINS TABLE STYLES
   ========================================================================== */

/*
 * This rule targets the captains tables on all pages using their shared ID.
 * It enforces a fixed layout to ensure all column widths are respected.
*/
#captainsTable {
    table-layout: fixed !important; /* This is essential for fixed widths */
    width: 100%;
}

/* 1. Rank Column: Fixed Width */
#captainsTable th:nth-child(1),
#captainsTable td:nth-child(1) {
    width: 10%;
}

/* 2. Player Column: Fixed and Wide */
#captainsTable th:nth-child(2),
#captainsTable td:nth-child(2) {
    width: 42%; /* Wide enough for "N. Wanganeen-Milera" */
    text-align: left;
}

/* 3. Club Column: Fixed Width */
#captainsTable th:nth-child(3),
#captainsTable td:nth-child(3) {
    width: 16%;
}

/* 4. Versus Column: Fixed Width */
#captainsTable th:nth-child(4),
#captainsTable td:nth-child(4) {
    width: 16%;
}

/* 5. Avg Column: Fixed Width */
#captainsTable th:nth-child(5),
#captainsTable td:nth-child(5) {
    width: 16%;
}

/* ==========================================================================
   Captains Table Player Column Alignment
   ========================================================================== */

/*
 * This rule centers the text for the "Player" column and header
 * on all three captains pages.
*/
#captainsTable th:nth-child(2),
#captainsTable td:nth-child(2) {
    text-align: center !important; /* Forces center alignment */
}

/* ==========================================================================
   UNIFIED CAPTAINS TABLE ROW HEIGHTS
   ========================================================================== */

/*
 * This rule targets the header and data cells only within the captains tables
 * to ensure all rows have a consistent height across all three pages.
*/
#captainsTable th,
#captainsTable td {
    height: 45px;
}

/* --- New/Updated Styles for Coaches Choice Accordion --- */

.mobile-only {
    display: none;
}
.desktop-only {
    display: inline;
}

.coaches-choice-container {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    gap: 20px;
}

.coaches-choice-section {
    width: 45%;
    text-align: center;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default to 2 columns for mobile */
    gap: 15px;
    justify-items: center;
}

.player-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 120px;
}

.player-headshot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
}

.player-name {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.percentage-circle {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: conic-gradient(green var(--percentage), #eee 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.5s;
}

.percentage-circle::before {
    content: '';
    position: absolute;
    width: 55px;
    height: 55px;
    background: #fff;
    border-radius: 50%;
}

.percentage-text {
    position: relative;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
}

/* --- Media Queries for Responsive Layout --- */

@media (min-width: 769px) {
    .players-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for desktop */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: inline;
    }
    .coaches-choice-container {
        flex-direction: column;
        align-items: center;
    }
    .coaches-choice-section {
        width: 100%;
    }
}

/* START: AFLW Best 16 Page Styles */

/* This targets the card containers ONLY on the Best 16 page to fix the layout */
#best16Container .player-cards-container {
  display: block;
}

/* This creates the 3-up, 2-down rows for player cards and centers them */
.player-cards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Removes the bottom margin from the last row in a group */
.player-cards-container .player-cards-row:last-child {
    margin-bottom: 0;
}

/* This centers the Honourable Mentions groups */
.honourable-mentions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.position-group-hm {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}

/* START: Final AFLW Best 16 Title & Spacing Fix */

/* Matches the exact font size and margins from the Best 22 page H1 */
#best16Container > h1 {
    font-size: 1.8em;
    margin: 0.4rem 0 0.2rem;
}

/* Matches the exact font size, weight, and margins for the H2 subtitle */
#best16Container > h2 {
    font-size: 1.3em;
    font-weight: bold;
    font-style: italic;
    margin: 0.1rem 0 1.1rem; /* UPDATED to your new value */
}

/* Matches the exact margins for the logo */
#best16Container .afl-fantasy-logo {
    margin: 5px auto 8px auto;
}

/* END: Final AFLW Best 16 Title & Spacing Fix */

/* Match Player Projection Title font to Player Comparison Page Header*/
.ranking-header h2 {
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif;
    font-style: normal;
}

/* Best 22 Ownership Percentage */
.player-card-b22-owned {
    font-size: 0.8em;
    color: #666;
}

/* Fix for Best 22/16 "Owned" text color in dark mode */
.dark-mode .player-card-b22-owned {
    color: #C8E6C9; /* Light green for better visibility on dark backgrounds */
}

/* --- START: ADD THIS ENTIRE BLOCK TO THE END OF STYLE.CSS --- */

/* ==========================================================================
   Navigation Dropdown Icon Styles
   ========================================================================== */

/* 1. General style for the new navigation icons */
.nav-tool-icon {
    width: 20px;
    height: 20px;
    object-fit: contain; /* Prevents icons from stretching */
    flex-shrink: 0; /* Prevents icons from shrinking on small screens */
}

/* 2. Styles for DESKTOP dropdown links */
nav ul.desktop-nav-links li.dropdown .dropdown-content a {
    display: flex;
    align-items: center;
    gap: 12px; /* Creates space between the icon and the text */
}

/* 3. Styles for MOBILE dropdown links */
ul.mobile-nav-links-container li.dropdown .dropdown-content a {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* This aligns text and icon to the right */
    gap: 12px;                 /* This creates space between the text and icon */
    padding-right: 20px;
}

/* --- END: NEW CSS BLOCK --- */

/* --- START: PASTE THIS NEW BLOCK WHERE THE OLD .SWITCH STYLES WERE --- */

/* ==========================================================================
   New Dark Mode Toggle Styles
   ========================================================================== */

/* 1. The main container for the toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 10px;
}

/* Hide the default checkbox */
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* 2. The track of the slider */
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #f4f4f4;
    border-radius: 34px;
    transition: background-color 0.4s;
    border: 1px solid #ccc;
    
    /* Inactive icons on the track */
    background-repeat: no-repeat;
    background-position: left 8px center, right 8px center;
    background-size: 18px, 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3E%3C/path%3E%3C/svg%3E");
}

html.dark-mode .slider {
    background-color: #2a2a2a;
    border-color: #555;
}

/* 3. The sliding knob */
.slider:before {
    position: absolute;
    content: "";
    height: 28px;
    width: 28px;
    left: 2px;
    bottom: 2px;
    border-radius: 50%;
    background-color: #0d6efd;
    transition: transform 0.4s;
    
    /* Active icon inside the knob */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

/* 4. Icon state for Light Mode (unchecked) */
.slider:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E");
}

/* 5. Icon state for Dark Mode (checked) */
input:checked + .slider:before {
    transform: translateX(26px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- END: NEW CSS BLOCK --- */

/* 1. Set Lato as the default font for the entire site */
body {
  font-family: 'Nunito Sans', sans-serif;
}

/* 2. Set a different font for all header tags */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Ignis et Glacies Sharp', serif; /* Replace this with your chosen header font */

}

/* ==========================================================================
   Final - Simple & Modern Pulsing Dot Loader (Definitive Version)
   ========================================================================== */
.loading-dots {
  display: flex; /* This forces the horizontal alignment */
  justify-content: center;
  align-items: center;
  margin: 40px auto;
  gap: 10px;
  font-size: 0;
}

/* This helper class is used by JavaScript to hide the loader */
.loader-hidden {
    display: none !important;
}

.loading-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #007bff;
  animation: pulse 1.4s infinite ease-in-out both;
}

html.dark-mode .loading-dots .dot {
  background-color: #64b5f6;
}

/* Stagger the animation for each dot */
.loading-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

/* The pulsing animation */
@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.0);
    opacity: 1.0;
  }
}

/*
 * Final Corrected AFLW Fantasy Best 16 Flip Fix
 * This ensures the cards flip without affecting the layout.
 */
#best16Container .player-card-wrapper {
    perspective: 1000px;
}

#best16Container .player-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

#best16Container .player-card-container.is-flipped .player-card-inner {
    transform: rotateY(180deg);
}

#best16Container .player-card-front,
#best16Container .player-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

#best16Container .player-card-back {
    transform: rotateY(180deg);
    color: white;
    border: 1px solid #495057;
    transform: rotateY(180deg);
    padding: 15px;
    justify-content: flex-start;
}

.info-message {
    padding: 30px;
    background-color: #f0f0f0;
    border-radius: 8px;
    border: 1px solid #ccc;
    color: #333;
    font-size: 1.1em;
    line-height: 1.5;
    margin-top: 40px;
    text-align: center; /* Centers the text and icon */
    max-width: 600px;   /* Prevents it from being too wide */
    margin-left: auto;   /* Centers the container itself */
    margin-right: auto;  /* Centers the container itself */
}

/* Add this new rule for the icon */
.info-message .info-icon {
    font-size: 2.2em;
    margin-bottom: 15px;
    display: block; /* Allows margin-bottom to work correctly */
    color: #007bff; /* Blue icon color for light mode */
}

/* Add or update your dark mode styles with these */
html.dark-mode .info-message {
    background-color: #2c2c2c;
    border-color: #444;
    color: #eee;
}

html.dark-mode .info-message .info-icon {
    color: #64b5f6; /* Lighter blue for dark mode */
}

.info-message p {
    margin: 0;
}

/* Dark mode styling for the message */
html.dark-mode .info-message {
    background-color: #333;
    border-color: #555;
    color: #eee;
}

/* --- START: FINAL UNIFIED HEADER LINE STYLES --- */

/* 1. This is the BASE style for all page headers that have a blue line. */
/* It removes the old border method and prepares for the new line style. */
.metric-main-header {
    font-size: 1.5em;
    color: #007bff;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    border-bottom: none;
    font-style: normal !important; /* Ensures font is not italic */
}

/* 2. This creates the consistent FULL-WIDTH blue line for all headers. */
.metric-main-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; 
    height: 3px; 
    background-color: #007bff;
    border-radius: 2px;
}

/* 3. This rule OVERRIDES the line style for ONLY the Breakevens sections. */
#breakevensContainerPage #highest-be-section .metric-main-header::after,
#breakevensContainerPage #lowest-be-section .metric-main-header::after {
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
}

/* --- END: FINAL UNIFIED HEADER LINE STYLES --- */

/* --- START: Section Header Spacing Fix --- */

/* This rule targets only the headers inside a section box 
   (e.g., "Highest Breakevens") and removes the large space above them. */
.metric-section .metric-main-header {
    margin-top: 0;
}

/* --- END: Section Header Spacing Fix --- */

/* --- START: ADD THIS NEW BLOCK TO STYLE.CSS --- */

/* ==========================================================================
   Data Update Schedule Modal List Styles
   ========================================================================== */
.update-schedule-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}
.update-schedule-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.update-schedule-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.update-schedule-list img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 15px;
    flex-shrink: 0;
}
.update-schedule-list div {
    display: flex;
    flex-direction: column;
}
.update-schedule-list strong {
    font-weight: 600;
    color: #333;
}
.update-schedule-list span {
    color: #555;
    font-size: 0.9em;
}

/* Dark Mode styles for the new list */
html.dark-mode .update-schedule-list li {
    border-bottom-color: #444;
}
html.dark-mode .update-schedule-list strong {
    color: #e0e0e0;
}
html.dark-mode .update-schedule-list span {
    color: #bbb;
}

/* Fix for body background in dark mode */
html.dark-mode body {
    background-color: #1a1a1d; /* This is a dark gray, change if needed */
}

/* Dark mode adjustments for Matchup Matrix difficulty colors */

/* Tier 1: Hardest (Dark Red) */
html.dark-mode .difficulty-display-bg-tier1 {
    background-color: #6d2828;
    color: white;
}

/* Tier 2: Hard (Muted Dark Red) */
html.dark-mode .difficulty-display-bg-tier2 {
    background-color: #5a2d2d;
    color: white;
}

/* Tier 3: Average-Hard (Dark Orange) */
html.dark-mode .difficulty-display-bg-tier3 {
    background-color: #7b4a1d;
    color: white;
}

/* Tier 4: Average-Easy (Dark Gold) */
html.dark-mode .difficulty-display-bg-tier4 {
    background-color: #7a632c;
    color: white;
}

/* Tier 5: Easy (Muted Dark Green) */
html.dark-mode .difficulty-display-bg-tier5 {
    background-color: #3a5a3a;
    color: white;
}

/* Tier 6: Easiest (Dark Green) */
html.dark-mode .difficulty-display-bg-tier6 {
    background-color: #2c6b2c;
    color: white;
}

/* Player Comparison Table Highlighting */

/* Light Mode Styles */
.highlight-green-light {
    background-color: #d4edda !important;
    color: #155724 !important;
    font-weight: bold;
}
.highlight-red-light {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    font-weight: bold;
}

/* Dark Mode Styles */
.highlight-green-dark {
    background-color: #2c6b2c !important; /* Muted Dark Green */
    color: #ffffff !important;
    font-weight: bold;
}
.highlight-red-dark {
    background-color: #6d2828 !important; /* Muted Dark Red */
    color: #ffffff !important;
    font-weight: bold;
}

/* Style for hyperlinked player names in tables */

/* Base style for light mode */
.clickable-player-name {
    color: #0056b3;
    font-weight: bold;
    cursor: pointer;
}

/* Underline on hover for both modes */
.clickable-player-name:hover {
    text-decoration: underline;
}

/* MORE SPECIFIC dark mode rule */
html.dark-mode .trend-table .clickable-player-name,
html.dark-mode .form-table .clickable-player-name {
    color: #8ab4f8; /* A readable light blue */
}

/* Dark mode color for positive trend percentages in trends tables */
html.dark-mode #tog-section .trend-table td:nth-child(3),
html.dark-mode #cbas-section .trend-table td:nth-child(3),
html.dark-mode #kickins-section .trend-table td:nth-child(3) {
    color: #66bb6a; /* A readable light green */
    font-weight: bold;
}

/* Dark mode colors for Player Form percentage columns */

/* For the 'In Form' tables (% Increase) */
html.dark-mode .metric-section[id^="in-form-"] .form-table td:nth-child(4) {
    color: #66bb6a; /* A readable light green */
    font-weight: bold;
}

/* For the 'Out of Form' tables (% Decrease) */
html.dark-mode .metric-section[id^="out-of-form-"] .form-table td:nth-child(4) {
    color: #ef5350; /* A readable light red */
    font-weight: bold;
}

/* ==========================================================================
   DEFINITIVE Live Scores Styles V10
   ========================================================================== */

/* --- Page Headers (Day and Round) --- */

/* 1. Day Header (e.g., "Friday") */
.day-header {
    font-family: 'Ignis et Glacies Sharp', serif;
    text-align: center;
    /* Keep large top margin to separate days clearly */
    margin: 55px 0 15px 0;
    font-size: 1.6em;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 2px solid #eee;
}

/* 2. Round Number Header (e.g., "Round 1") */
.round-number-header {
    font-family: 'Ignis et Glacies Sharp', serif;
    text-align: center;
    font-size: 1.5em;
    color: #007bff;
    /* FIX: Reduced spacing above and below the Round Number */
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Dark Mode Overrides for Headers */
html.dark-mode .day-header { color: #e0e0e0; border-bottom-color: #444; }
html.dark-mode .round-number-header { color: #64b5f6; }
html.dark-mode #liveScoresContainer { color: #e0e0e0; }

/* --- Accordion Container and Header --- */
#liveScoresAccordionContainer .accordion {
    position: relative;
    margin-bottom: 35px; 
}

#liveScoresAccordionContainer .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 20px; 
    cursor: pointer;
    box-sizing: border-box; 
}

.team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1; 
    max-width: none; 
}

.team-logo-live {
    height: 70px;
    width: 70px;
    object-fit: contain;
}
.team-info .team-name { display: none; }

/* --- Game Status Indicator --- */
.game-status { 
    text-align: center; 
    padding: 0 5px; 
    /* Rigid width ensures vertical alignment across rows */
    flex: 0 0 240px; 
    width: 240px;
}
.game-status-details { font-size: 0.9em; color: #555; line-height: 1.4; }
.game-status-details .venue { font-style: italic; }
.status-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 1.1em; margin-top: 4px; text-transform: uppercase; }
.status-indicator.upcoming { color: #AF8700; }
.status-indicator.complete { color: #D32F2F; }
.status-indicator.live { color: #388E3C; }
.live-dot { width: 10px; height: 10px; background-color: #388E3C; border-radius: 50%; animation: pulse 1.5s infinite ease-in-out; }
html.dark-mode .game-status-details { color: #bbb; }
html.dark-mode .status-indicator.upcoming { color: #FFF176; }
html.dark-mode .status-indicator.complete { color: #FF8A80; }
html.dark-mode .status-indicator.live { color: #A5D6A7; }
html.dark-mode .live-dot { background-color: #A5D6A7; }

/* --- CRITICAL FIX: Override Global Accordion Padding --- */
#liveScoresAccordionContainer .accordion-panel.active {
    padding: 0 !important; 
}

/* --- Accordion Arrow (ARC TAB DESIGN) --- */
.accordion-toggle-arrow {
    position: absolute;
    bottom: -24px; 
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 24px;
    background-color: #007bff; 
    border: 1px solid #007bff; 
    border-top: none;
    border-radius: 0 0 40px 40px; 
    display: flex;
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    z-index: 20; 
    transition: background-color 0.3s, border-color 0.3s;
    clip-path: none; 
}

.accordion-toggle-arrow .fas {
    color: #ffffff; 
    font-size: 1.2em;
    transition: transform 0.3s ease;
    display: block !important; 
    margin-top: -2px; 
}

.accordion-toggle-arrow::before { content: none; }
.accordion-toggle-arrow:hover { 
    background-color: #0056b3; 
    border-color: #0056b3;
}
.accordion-header.active ~ .accordion-toggle-arrow .fas { transform: rotate(180deg); }

html.dark-mode .accordion-toggle-arrow { 
    background-color: #64b5f6; 
    border-color: #64b5f6; 
}
html.dark-mode .accordion-toggle-arrow:hover { 
    background-color: #2196F3; 
    border-color: #2196F3;
}
html.dark-mode .accordion-toggle-arrow .fas {
    color: #1a1a1a; 
}


/* --- Accordion Body Layout --- */
.live-game-body {
    display: flex;
    gap: 20px;
    padding: 0 15px 15px; 
    box-sizing: border-box;
    width: 100%;
}

.team-scores-container { 
    width: 50%; 
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    box-sizing: border-box;
    padding: 0 15px;
}

/* --- Player Score Grid & Headers --- */
.team-table-header { 
    text-align: center; 
    font-family: 'Ignis et Glacies Sharp', serif; 
    font-size: 1.2em; 
    color: #333; 
    margin: 0; 
    padding: 15px 0 10px 0; 
    border-bottom: 1px solid #eee;
    margin-left: 10px;
    margin-right: 10px;
}
html.dark-mode .team-table-header { color: #e0e0e0; border-bottom-color: #444; }

.live-score-grid { 
    border: 1px solid #e0e0e0; 
    border-radius: 6px; 
    overflow: hidden;
    padding: 0; 
    background-color: #fff;
    width: 100%;
    box-sizing: border-box; 
}
html.dark-mode .live-score-grid { border-color: #444; background-color: #2c2c2c; }

.live-grid-header, .live-player-row { display: flex; align-items: center; width: 100%; }
.live-grid-header { background-color: #f7f7f7; font-weight: 700; color: #555; font-size: 11px; padding: 8px 5px; }
html.dark-mode .live-grid-header { background-color: #333; color: #bbb; }

.live-player-row { font-size: 13px; border-top: 1px solid #e9e9e9; padding: 10px 5px; }
html.dark-mode .live-player-row { border-top-color: #3a3a3a; }
.live-player-row:hover { background-color: #f0f8ff; }
html.dark-mode .live-player-row:hover { background-color: #333d47; }

.live-cell { padding: 0 3px; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.live-icon-col { flex: 0 0 25px; }
.live-player-col { flex: 1 1 0; justify-content: flex-start; text-align: left; overflow: hidden; text-overflow: ellipsis; } 
.live-stat-col { flex: 0 0 30px; } 
.live-fp-col { flex: 0 0 40px; font-weight: 700; color: #007bff; }
.live-sc-col { flex: 0 0 40px; font-weight: 700; color: #28a745; }

a.player-name-link { text-decoration: none; color: #0056b3; font-weight: 600; }
.player-status-icon.star { color: #ffc107; }
.player-status-icon.fire { color: #dc3545; }
.live-grid-header .live-stat-col i.fa-clock { font-size: 1.2em; }
html.dark-mode .live-fp-col { color: #64b5f6; }
html.dark-mode .live-sc-col { color: #66bb6a; }
html.dark-mode a.player-name-link { color: #8ab4f8; }

/* --- Mobile Adjustments (FIXED) --- */
@media (max-width: 768px) {
    #liveScoresAccordionContainer .accordion-header { padding: 15px 5px; }
    
    /* FIX: Reduce the rigid width of the center block on mobile to fit screens */
    .game-status { 
        flex: 0 0 140px; 
        width: 140px;
    }
    
    /* FIX: Maintain 70px logo size on mobile as requested */
    .team-logo-live { 
        height: 70px; 
        width: 70px; 
    }
    
    .live-game-body { 
        flex-direction: column; 
        gap: 0; 
        padding: 5px 15px 15px 15px; 
    }
    
    .team-scores-container { 
        width: 100%; 
        margin-bottom: 25px; 
        padding-left: 5px; 
        padding-right: 5px; 
    }

    .live-game-body .team-scores-container:last-child {
        margin-bottom: 0;
    }

    .live-score-grid {
        width: 100%;
        border-radius: 6px; 
        border: 1px solid #e0e0e0;
    }
    html.dark-mode .live-score-grid { border-color: #444; }

    /* Symmetric padding for Team Names on mobile */
    .team-table-header {
        padding-top: 12px; 
        padding-bottom: 12px;
        margin: 0; 
        line-height: 1.2; 
    }

    /* Adjust SC column width for better spacing on mobile */
    .live-sc-col { flex-basis: 45px; } 
}

@media (max-width: 600px) {
    .live-grid-header { font-size: 9px; }
    .live-player-row { font-size: 11px; }
    .live-icon-col { flex-basis: 20px; }
    .live-player-col { min-width: 0; }
    .live-stat-col { flex-basis: 22px; }
    .live-fp-col { flex-basis: 28px; }
    /* Even more space for SC column on small mobile screens */
    .live-sc-col { flex-basis: 35px; } 
}

/* --- Column Visibility Logic --- */
#liveScoresContainer:not(.show-sc-scores):not(.show-nbl-scores) .live-sc-col { display: none !important; }
#liveScoresContainer.show-nbl-scores .live-fp-col { display: none !important; }
#liveScoresContainer.show-sc-scores .live-sc-col,
#liveScoresContainer.show-nbl-scores .live-sc-col { display: flex !important; }
#liveScoresContainer:not(.show-nbl-scores) .live-fp-col { display: flex !important; }

/* ==========================================================================
   Best 16 / Best 22 Injury Icon Styles
   ========================================================================== */

.injury-icon-best16 {
    display: inline-block;
    width: 16px; /* Slightly smaller for inline fit; adjust as needed */
    height: 16px;
    vertical-align: middle; /* Aligns with text baseline */
    margin-left: 5px; /* Spacing from the name; adjust as needed */
    margin-top: -2px; /* Optional: Fine-tune vertical alignment if text/icon misalign */
}

/* ==========================================================================
   TRENDS PAGE PLAYER MODAL BUTTON STYLES
   ========================================================================== */

/* Existing modal styles (ensure these are present) */
.page-info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    overflow: auto;
}

.page-info-modal[style*="display: flex"] {
    display: flex !important;
}

.page-info-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    transform: translateY(0);
}

html.dark-mode .page-info-modal-content {
    background-color: #333;
    color: #fff;
}

.page-info-modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #000;
    z-index: 10002;
}

html.dark-mode .page-info-modal-close-button {
    color: #fff;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.modal-button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* Specific styles for AFL Fantasy button */
#fantasyLink.modal-button {
    background-color: #007bff;
}

#fantasyLink.modal-button:hover {
    background-color: #0056b3;
}

html.dark-mode #fantasyLink.modal-button {
    background-color: #64b5f6;
}

html.dark-mode #fantasyLink.modal-button:hover {
    background-color: #2196F3;
}

/* Specific styles for SuperCoach button */
#supercoachLink.modal-button {
    background-color: #28a745; /* Green for SuperCoach */
}

#supercoachLink.modal-button:hover {
    background-color: #218838; /* Darker green on hover */
}

html.dark-mode #supercoachLink.modal-button {
    background-color: #34c759; /* Lighter green for dark mode */
}

html.dark-mode #supercoachLink.modal-button:hover {
    background-color: #2ba84a; /* Slightly darker green on hover */
}

/* Existing clickable player name styles */
.clickable-player-name {
    cursor: pointer;
    transition: background-color 0.2s;
}

.clickable-player-name:hover {
    background-color: #f0f0f0;
}

html.dark-mode .clickable-player-name:hover {
    background-color: #444;

}

/* ==========================================================================
   --- START: Final, Cleaned & Consolidated UI Code (v2) ---
   This version fixes the mobile navigation appearing on desktop.
   ========================================================================== */

/* 1. Universal Modal System
   -------------------------------------------------------------------------- */

.page-info-modal, .league-modal, [id$="Modal"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    height: 100% !important; width: 100% !important;
    background-color: transparent !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    visibility: hidden !important;
    opacity: 0 !important;
    transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s !important;
}
.page-info-modal.is-opening, .league-modal.is-opening, [id$="Modal"].is-opening {
    visibility: visible !important;
    opacity: 1 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition-delay: 0s !important;
}
.page-info-modal .page-info-modal-content,
.league-modal .league-modal-content {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.page-info-modal.is-opening .page-info-modal-content,
.league-modal.is-opening .league-modal-content {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* 2. Mobile-Only Navigation Layout (THE FIX)
   -------------------------------------------------------------------------- */
/* This entire section is now wrapped in a media query to target mobile only */
@media (max-width: 768px) {
    .mobile-nav-slide-panel {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    .mobile-nav-header, .mobile-nav-footer {
        flex-shrink: 0 !important;
    }

    ul.mobile-nav-links-container {
    flex-grow: 1 !important;
    overflow-y: auto !important; /* This re-enables scrolling */
    justify-content: flex-start !important; /* This aligns links to the top */
    padding-top: 0px; /* Adds some space at the top */
    padding-bottom: 20px; /* Adds some space at the bottom */
}

    ul.mobile-nav-links-container > li > a {
        padding-top: 15px !important; /* Normalizes row height */
        padding-bottom: 15px !important;
    }
}


/* 3. Global App-Like Enhancements & Utilities
   -------------------------------------------------------------------------- */

html, body { -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.container { animation: fadeIn 0.5s ease-out forwards; }
button, a.button, .ranking-card, .hamburger, .page-info-icon, .modal-tool-link, .choice-button, .clickable-player-name, ul.sort-options-list li a, #openSortModalButton, .round-navigation .button, #backToTop, #shareButtonsContainer .share-buttons button { transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
button:active, a.button:active, .ranking-card:active, .hamburger:active, .page-info-icon:active, .modal-tool-link:active, .choice-button:active, .clickable-player-name:active, ul.sort-options-list li a:active, #openSortModalButton:active, .round-navigation .button:active, #backToTop:active, #shareButtonsContainer .share-buttons button:active { transform: scale(0.97); transition-duration: 0.05s; }
::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #4a4a4a; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #555555; }
button, .hamburger, .page-info-icon, .accordion-header, .ranking-card, .player-card-container, .modal-arrow-button, .flip-icon { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .accordion-header:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.35) !important; }
html.dark-mode a:focus-visible, html.dark-mode button:focus-visible, html.dark-mode input:focus-visible, html.dark-mode select:focus-visible, html.dark-mode .accordion-header:focus-visible { box-shadow: 0 0 0 3px rgba(100, 181, 26, 0.4) !important; }

/* ==========================================================================
   --- END: Final, Cleaned & Consolidated UI Code ---

   ========================================================================== */
/* ==========================================================================
   --- Hide Scrollbars on Mobile for an App-Like Feel ---
   ========================================================================== */

/* This media query ensures these styles only apply to screens 768px or smaller */
@media (max-width: 768px) {
  /* This targets the scrollbar track and thumb on WebKit/Blink browsers (Chrome, Safari, etc.) */
  ::-webkit-scrollbar {
    display: none; /* Hides the scrollbar completely */
  }

  /* For Firefox, a different approach is needed */
  * {
    scrollbar-width: none; /* Hides the scrollbar in Firefox */
  }
}

/* ==========================================================================
   --- Swiper Carousel Flicker Fix ---
   ========================================================================== */

/* 1. Hide the carousel container by default */
.swiper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
}

/* 2. The Swiper library adds this class automatically when it's ready.
      This rule fades the carousel in smoothly. */
.swiper-initialized {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   --- Toast Notification System (Corrected) ---
   ========================================================================== */

/* This is the container that holds all the toast notifications */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}

/* This is the base style for a single toast message */
.toast {
    background-color: #333;
    color: #fff;
    padding: 12px 20px;
    border-radius: 25px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0;
    animation: toastIn 0.5s forwards; /* UPDATED NAME */
}

/* Styles for different types of toasts */
.toast.toast-success {
    background-color: #28a745;
}
.toast.toast-error {
    background-color: #dc3545;
}
.toast.toast-info {
    background-color: #007bff;
}

/* Dark mode adjustments */
html.dark-mode .toast {
    background-color: #f8f9fa;
    color: #212529;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}
html.dark-mode .toast.toast-success {
    background-color: #66bb6a;
}
html.dark-mode .toast.toast-error {
    background-color: #ef5350;
}
html.dark-mode .toast.toast-info {
    background-color: #64b5f6;
}

/* Animations with unique names to prevent conflicts */
@keyframes toastIn { /* UPDATED NAME */
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast.fade-out {
    animation: toastOut 0.5s forwards; /* UPDATED NAME */
}

@keyframes toastOut { /* UPDATED NAME */
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ==========================================================================
   --- Stats Toggle Switch ---
   ========================================================================== */
.toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 25px; /* Adds space above the table */
}

.toggle-label {
    font-weight: 600;
    font-size: 0.9em;
    color: #555;
}

html.dark-mode .toggle-label {
    color: #bbb;
}

.stat-toggle {
    width: 50px; /* Smaller than dark mode toggle */
    height: 28px;
    margin: 0;
}

.stat-toggle .slider:before {
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.stat-toggle input:checked + .slider:before {
    transform: translateX(22px);
}

/* Remove sun/moon icons from the stats toggle track */
.stat-toggle .slider {
    background-image: none !important;
}

/* This targets only the knob (which you already have but I'm including for completeness) */
.stat-toggle .slider:before {
    background-image: none !important;
}

/* ==========================================================================
   Breakevens Page - Player Column Alignment (Updated)
   ========================================================================== */

#breakevensContainerPage .player-cell-content {
    display: flex !important;
    flex-direction: column !important; /* Stacks logo above name */
    justify-content: center !important; /* Vertical centering */
    align-items: center !important; /* Horizontal centering */
    gap: 4px !important; /* Small gap between logo and name */
    height: 100% !important;
    padding: 4px 5px !important; /* Adjusted padding for better fit */
}

#breakevensContainerPage .player-cell-content .team-logo-small {
    margin-bottom: 0 !important; /* No bottom margin needed in column mode */
    max-width: 30px !important; /* Match Trends page size */
    max-height: 30px !important; /* Match Trends page size */
    vertical-align: middle; /* Ensure proper alignment */
    display: inline-block; /* Consistent with Trends page */
}

#breakevensContainerPage .player-cell-content span {
    white-space: nowrap; /* Prevent name wrapping */
    overflow: hidden; /* Hide overflow if name is too long */
    text-overflow: ellipsis; /* Add ellipsis for very long names */
    max-width: 100%; /* Ensure it fits within the cell */
}

/* Mobile Adjustments: Allow wrap if screen is too small, keep centering */
@media (max-width: 768px) {

    /* Adjust column widths on mobile */
    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(1),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(1) {
        width: 40%;
    }

    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(2),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(2) {
        width: 10%; /* Adjusted to 10% for more space */
    }

    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(3),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(3) {
        width: 25%; /* Increased to fit one more digit */
    }

    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(4),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(4) {
        width: 25%; /* Increased to fit one more digit */
    }
}

/* Desktop Adjustments (outside media query for screens > 768px) */
#breakevensContainerPage .accordion-panel .trend-table th:nth-child(2),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(2) {
    width: 10%; /* Adjusted to 10% for more space */
}

#breakevensContainerPage .accordion-panel .trend-table th:nth-child(3),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(3) {
    width: 25%; /* Increased to fit one more digit */
}

#breakevensContainerPage .accordion-panel .trend-table th:nth-child(4),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(4) {
    width: 25%; /* Increased to fit one more digit */
}

/* ==========================================================================
   Breakevens Page Header Logo
   ========================================================================== */
.metric-main-header .header-logo {
    height: 1.2em; /* Matches the font size of the header */
    width: auto;
    vertical-align: middle;
    margin-left: 10px;
    margin-bottom: 4px; /* Fine-tunes vertical alignment */
}

/* ==========================================================================
   Breakevens Page - View Toggle & Sortable Table
   ========================================================================== */

/* 1. Styles for the new view toggle switch */
#viewToggleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* 2. Styles for the sortable headers in the new table */
#allPlayersTable .sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Make space for the sort icon */
}

#allPlayersTable .sortable::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    content: "\f0dc"; /* Default sort icon (up and down) */
    color: #ccc;
    transition: color 0.2s;
}

html.dark-mode #allPlayersTable .sortable::after {
    color: #555;
}

#allPlayersTable .sortable:hover::after {
    color: #888;
}

#allPlayersTable .sortable.asc::after {
    content: "\f0de"; /* Up arrow */
    color: #007bff;
}

#allPlayersTable .sortable.desc::after {
    content: "\f0dd"; /* Down arrow */
    color: #007bff;
}

html.dark-mode #allPlayersTable .sortable.asc::after,
html.dark-mode #allPlayersTable .sortable.desc::after {
    color: #64b5f6;
}

/* 4. Style for the smaller position text under player names */
.player-cell-content .player-position {
    font-size: 0.8em;
    font-weight: normal;
    color: #555;
}

html.dark-mode .player-cell-content .player-position {
    color: #bbb;
}

/* ==========================================================================
   Breakevens Page - Search Box Centering Fix
   ========================================================================== */
#breakevensContainerPage #inputContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   Modern 'Load All' Button Style
   ========================================================================== */
.load-all-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 50px; /* Fully rounded corners */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* Subtle blue glow */
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 20px auto 10px auto; /* Adjusted margin */
}

.load-all-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px); /* Slight lift on hover */
}

html.dark-mode .load-all-btn {
    background-color: #64b5f6;
    color: #1a1a1a;
    box-shadow: 0 4px 10px rgba(100, 181, 246, 0.2);
}

html.dark-mode .load-all-btn:hover {
    background-color: #82caff;
}

/* Utility class to reliably hide view containers */
.hidden-view {
    display: none !important;
}

/* ==========================================================================
   Breakevens Page - All Players Table Mobile Widths
   ========================================================================== */

@media (max-width: 768px) {
    /* This ensures the table respects the column widths we set */
    #allPlayersTable {
        table-layout: fixed;
        width: 100%;
    }

    /* 1. Player Column (Wider) */
    #allPlayersTable th:nth-child(1),
    #allPlayersTable td:nth-child(1) {
        width: 35%;
    }

    /* 2. BE Column (Skinnier) */
    #allPlayersTable th:nth-child(2),
    #allPlayersTable td:nth-child(2) {
        width: 15%;
    }

    /* 3. Price Column */
    #allPlayersTable th:nth-child(3),
    #allPlayersTable td:nth-child(3) {
        width: 25%;
    }

    /* 4. Proj. Column */
    #allPlayersTable th:nth-child(4),
    #allPlayersTable td:nth-child(4) {
        width: 25%;
    }
}

/* ==========================================================================
   --- START: NBL-Specific Mobile Matchup Matrix Multi-Game Cell Fix (V3) ---
   ========================================================================== */

/* This targets only the NBL matrix container on screens 768px or smaller */
@media (max-width: 768px) {
    /* This rule is now more specific to override any conflicts */
    #nblMatchupMatrixContainer .opponent-tag {
        width: 55px !important; /* Adjusted from 60px */
        padding: 2px !important;
        font-size: 0.75em !important;
    }
    
    #nblMatchupMatrixContainer .opponents-container {
        gap: 2px !important;
        padding: 2px 0 !important;
    }
}

/* --- END: NBL-Specific Mobile Matchup Matrix Multi-Game Cell Fix (V3) --- */

/* This makes the accordion padding specific to the NBL Matrix page */
#nblMatchupMatrixContainer .accordion-panel.active {
    padding: 20px 15px 15px;
}

/* In style.css */

/* This targets the input container ONLY on the NBL SuperCoach form page */
#nblSuperCoachPlayerFormContainer #inputContainer {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto 25px auto;
}

/* ==========================================================================
   --- NBL Captains Versus Logo Container (High Specificity Fix) ---
   ========================================================================== */

/* This more specific selector ensures these styles take priority */
#captainsTable .versus-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Default 5px gap for mobile */
}

/* This rule ensures the logos inside the container are displayed inline */
#captainsTable .versus-logo-container .team-logo-small {
    display: inline-block;
    margin: 0;
}

/* Media query for desktop screens, also using the specific selector */
@media (min-width: 769px) {
    #captainsTable .versus-logo-container {
        gap: 3px !important; /* Smaller 3px gap + !important flag to guarantee it applies */
    }
}

.opponent-logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    min-height: 35px; /* Ensures consistent card height even with a single logo */
}

.opponent-logos-container .opponent-logo {
    max-width: 35px;
    max-height: 35px;
}

/* ==========================================================================
   --- NBL Starting 5 Centered Layout Styles ---
   ========================================================================== */

/* This targets the card containers ONLY on the Starting 5 page */
#best22Container .player-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This is the key for horizontal centering */
    gap: 20px; /* This creates a consistent gap between cards */

}

/* ==========================================================================
   --- Player Comparison Header Styles ---
   ========================================================================== */

.player-header-cell {
    vertical-align: top !important; /* Align content to the top */
    padding-top: 10px !important;
    padding-bottom: 8px !important;
}

.player-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px; /* Space between name and image */
}

.player-header-name {
    display: block;
    font-size: 1.1em;
    line-height: 1.2;
    /* For truncation */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-headshot-table,
.team-logo-table-header {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.player-headshot-table {
    border-radius: 50%;
    object-fit: cover;
    background-color: #f0f0f0;
}

html.dark-mode .player-headshot-table {
    background-color: #3a3a3a;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .player-header-cell {
        padding-top: 8px !important;
        padding-bottom: 6px !important;
        /* Ensure text overflow works on mobile table */
        max-width: 25vw; /* Each player column is ~25% of the viewport width */
    }

    .player-header-content {
        gap: 6px;
    }

    .player-header-name {
        font-size: 1em; /* Slightly smaller on mobile */
    }

    .player-headshot-table,
    .team-logo-table-header {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   Captains Table Headshot Styles
   ========================================================================== */

/* Style the cell containing the player name and headshot */
#captainsTable .player-cell-with-headshot {
    text-align: center; /* Center align content */
    vertical-align: middle; /* Vertically center content */
    padding-top: 5px; /* Add some padding */
    padding-bottom: 5px;
}

/* Container for the name and VC logo */
#captainsTable .player-name-line {
    display: block; /* Ensure it takes full width */
    margin-bottom: 5px; /* Space between name and headshot */
    line-height: 1.2; /* Adjust line height if needed */
    font-weight: bold; /* Keep name bold */
}

/* Style for the headshot image */
#captainsTable .captain-headshot-table {
    width: 40px; /* Adjust size as needed */
    height: 40px;
    border-radius: 50%; /* Make it circular */
    object-fit: cover; /* Ensure image covers the circle nicely */
    display: block; /* Make it a block element */
    margin: 0 auto; /* Center the image horizontally */
    background-color: #f0f0f0; /* Light background for loading/fallback */
}

/* Dark mode background for headshot */
html.dark-mode #captainsTable .captain-headshot-table {
    background-color: #3a3a3a;
}

/* Ensure VC logo aligns well */
#captainsTable .vc-logo {
    height: 0.9em; /* Slightly smaller to fit better */
    vertical-align: middle;
    margin-left: 4px;
}

/* Adjust cell height if necessary */
#captainsTable td {
    height: auto; /* Allow height to adjust */
    min-height: 75px; /* Ensure a minimum height for consistency */
}

/* ==========================================================================
   Captains Table - Rank Cell with VC Logo Styling
   ========================================================================== */

/* Style the first cell (rank cell) */
#captainsTable .rank-cell-with-logo {
    text-align: center;      /* Center content horizontally */
    vertical-align: middle;  /* Center content vertically */
    padding-top: 5px;        /* Add padding */
    padding-bottom: 5px;
    /* Use Flexbox to stack items vertically */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Center items horizontally within the flex column */
    justify-content: center; /* Center items vertically within the flex column */
    min-height: 75px;        /* Ensure consistent height with player cell */
}

/* Style the rank number container */
#captainsTable .rank-number {
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.2;
    display: block; /* Make it a block */
}

/* Style the VC logo specifically within the rank cell */
#captainsTable .vc-logo-rank {
    height: 1.5em; /* Make it slightly larger */
    width: auto;
    display: block; /* Make it a block */
    margin-top: 4px; /* Space between number and logo */
}

/* Remove margin from the old inline VC logo (if any styles existed) */
#captainsTable .player-name-line .vc-logo {
    margin-left: 0;
}

/* ==========================================================================
   Captains Table - Player Name Link Styling Override
   ========================================================================== */

/* Target the link specifically within the player cell */
#captainsTable .player-cell-with-headshot .clickable-player-name-link {
    text-decoration: none; /* Remove underline */
    color: #007bff;        /* Set default blue color */
    font-weight: bold;
    display: inline-block; /* Ensure it behaves like the name text */
    transition: color 0.2s;
}

/* Override visited link color */
#captainsTable .player-cell-with-headshot .clickable-player-name-link:visited {
    color: #007bff; /* Keep it blue even after visiting */
}

/* Add underline ONLY on hover */
#captainsTable .player-cell-with-headshot .clickable-player-name-link:hover {
    text-decoration: underline;
    color: #0056b3; /* Optional: Darker blue on hover */
}

/* Dark mode link colors within the captains table player cell */
html.dark-mode #captainsTable .player-cell-with-headshot .clickable-player-name-link {
    color: #64b5f8; /* Lighter blue for dark mode */
}

html.dark-mode #captainsTable .player-cell-with-headshot .clickable-player-name-link:visited {
    color: #64b5f8; /* Keep light blue */
}

html.dark-mode #captainsTable .player-cell-with-headshot .clickable-player-name-link:hover {
    color: #8ab4f8; /* Optional: Slightly different blue on hover */
}

/* ==========================================================================
   AFL Fantasy Top 100 / PODs Page Specific Styles (Consolidated & Fixed)
   ========================================================================== */

/* Styles for Percentage Change Arrows/Emoji */
.positive-change,
.negative-change,
.top-pod-highlight {
    display: inline-flex; /* Use flexbox to align number and icon */
    align-items: center;  /* Vertically center icon with number */
    gap: 4px;             /* Add a small space between number and icon */
    white-space: nowrap;  /* Prevent wrapping */
}

/* Green arrow for positive change */
.positive-change .fas {
    color: #28a745;
}
html.dark-mode .positive-change .fas {
    color: #66bb6a;
}

/* Red arrow for negative change */
.negative-change .fas {
    color: #dc3545;
}
html.dark-mode .negative-change .fas {
    color: #ef5350;
}

/* Fire emoji for Top PODs */
.top-pod-highlight::after {
    content: '🔥';
    margin-left: 0; /* MODIFIED: Set to 0. The 4px 'gap' will now handle spacing. */
    font-size: 1.1em;
    line-height: 1;
}

/* Position Filter Styles (Ensure it looks good centered) */
#positionFilterContainer {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* General Player Cell content styling (logo, name, position) */
.player-cell-content {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center; 
    height: 100%; 
    padding: 4px 0;
    box-sizing: border-box;
}

.player-cell-content .team-logo-small {
    margin-bottom: 5px; 
    max-width: 30px;
    max-height: 30px;
}

.player-cell-content .player-position {
    font-size: 0.8em;
    font-weight: normal;
    color: #555;
}

html.dark-mode .player-cell-content .player-position {
    color: #bbb;
}

/* --- START: NEW RULE TO FIX TRUNCATION --- */
/* This targets the <div> wrapping the name and position */
.player-cell-content > div {
    width: 100%;     /* Forces the div to fill the cell */
    min-width: 0;    /* Prevents flexbox from expanding it */
    text-align: center; /* Keeps the position centered */
}
/* --- END: NEW RULE TO FIX TRUNCATION --- */

/* Player Column Alignment (Centered) */
#top100Container .trend-table th:first-child,
#podsContainer .trend-table th:first-child {
    text-align: center;
    padding-left: 5px;
}
#top100Container .trend-table td:first-child,
#podsContainer .trend-table td:first-child {
    padding-left: 5px;
}
#top100Container .trend-table td:first-child .player-cell-content,
#podsContainer .trend-table td:first-child .player-cell-content {
    align-items: center;
    text-align: center;
}


/* Center the search input on this page */
#top100ContainerPage #inputContainer {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto 25px auto;
}

/* --- START: Sortable Header Arrows (Breakevens Style) --- */
/* This targets sortable headers ONLY within these two containers */
#top100Container .trend-table .sortable,
#podsContainer .trend-table .sortable {
    position: relative;
    cursor: pointer;
    /* padding-right: 20px; */ /* MODIFIED: Removed padding to reclaim space */
}

/* MODIFIED: This rule now hides the pseudo-element entirely */
#top100Container .trend-table .sortable::after,
#podsContainer .trend-table .sortable::after {
    display: none; 
}
/* --- END: Sortable Header Arrows --- */


/* --- START: Player Name Truncation Fix --- */
/* This class should be added to the <span> containing the player's name */
.player-cell-content .player-name-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* Ensures it respects the width of the cell */
    width: 100%;    /* Forces it to be constrained by the cell */
}

/* On mobile, the cell itself is narrow, so this ensures it fits */
@media (max-width: 768px) {
    #top100Container .trend-table td:first-child,
    #podsContainer .trend-table td:first-child {
        /* This is the key: it forces the cell to not expand
           past its calculated 'width' from the table-layout */
        max-width: 0;
        min-width: 0;
    }
}
/* --- END: Player Name Truncation Fix --- */

/* ==========================================================================
   --- START: Breakevens Page Column Width, Truncation, & Overflow Fixes (v9) ---
   ========================================================================== */

/* 1. Colors for Projected Price Text (Used by Breakevens & Trends) */
:root {
    --positive-diff-text: #0f5132; /* Dark Green */
    --negative-diff-text: #58151c; /* Dark Red */
}

/* Dark Mode Color Definition - Using Trends page successful colors */
html.dark-mode {
    --positive-diff-text: #66bb6a; /* Light Green */
    --negative-diff-text: #ef5350; /* Light Red */
}

/* Base rules for Breakevens and Trends pages (all tables that use these classes) */
.positive-diff-text {
    color: var(--positive-diff-text) !important;
    font-weight: bold;
}
.negative-diff-text {
    color: var(--negative-diff-text) !important;
    font-weight: bold;
}

/* 2. Force Truncation on Player Name Span */
.player-cell-content .player-name-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; 
    width: 100%; 
}

/* 3. Constrain the inner div, allowing the span to truncate */
#breakevensContainerPage .player-cell-content > div {
    width: 100%;
    min-width: 0; /* This is the key fix for flexbox */
    text-align: center;
}

/* 4. Force Single Line (no wrap) on all NUMERIC cells */
#breakevensContainerPage .trend-table td:not(:first-child) {
    white-space: nowrap;
}

/* 5. Allow headers to wrap and stay centered */
#breakevensContainerPage .trend-table th {
    white-space: normal;
    vertical-align: middle;
    overflow: hidden; 
}

/* 6. Apply overflow/truncation ONLY to the player cell */
#breakevensContainerPage .trend-table td:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle; 
}

/* 7. Hide Sort Arrows from "All Players" Table Headers */
#allPlayersTable .sortable {
    padding-right: 5px; 
}

#allPlayersTable .sortable::after {
    display: none !important; 
    content: none !important;
}

/* 8. Apply table-layout: fixed to ALL tables on this page */
#allPlayersTable,
#breakevensContainerPage .accordion-panel .trend-table {
    table-layout: fixed;
    width: 100%;
}

/* 9. By Position Table Column Widths (Desktop) */
#breakevensContainerPage .accordion-panel .trend-table th:nth-child(1),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(1) {
    width: 30%; /* Player */
}
#breakevensContainerPage .accordion-panel .trend-table th:nth-child(2),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(2) {
    width: 15%; /* BE */
}
#breakevensContainerPage .accordion-panel .trend-table th:nth-child(3),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(3) {
    width: 20%; /* Price */
}
#breakevensContainerPage .accordion-panel .trend-table th:nth-child(4),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(4) {
    width: 15%; /* Proj. Price */
}
#breakevensContainerPage .accordion-panel .trend-table th:nth-child(5),
#breakevensContainerPage .accordion-panel .trend-table td:nth-child(5) {
    width: 20%; /* Proj. Score */
}

/* 10. NEW: Set a uniform font size for all cells in these tables */
#breakevensContainerPage .trend-table th,
#breakevensContainerPage .trend-table td {
    font-size: 0.9em;
}


/* 11. Mobile-Specific Widths & Truncation Helper */
@media (max-width: 768px) {
    /* Helper to force truncation in fixed-layout tables on mobile */
    #top100Container .trend-table td:first-child,
    #podsContainer .trend-table td:first-child,
    #breakevensContainerPage .trend-table td:first-child {
        max-width: 0;
        min-width: 0;
    }

    /* --- All Players Table Column Widths (Mobile) - UPDATED --- */
    #allPlayersTable th:nth-child(1),
    #allPlayersTable td:nth-child(1) {
        width: 30%; /* Player */
    }
    #allPlayersTable th:nth-child(2),
    #allPlayersTable td:nth-child(2) {
        width: 10%; /* BE */
    }
    #allPlayersTable th:nth-child(3),
    #allPlayersTable td:nth-child(3) {
        width: 25%; /* Price */
    }
    #allPlayersTable th:nth-child(4),
    #allPlayersTable td:nth-child(4) {
        width: 23%; /* Proj. Price */
    }
    #allPlayersTable th:nth-child(5),
    #allPlayersTable td:nth-child(5) {
        width: 12%; /* Proj. Score */
    }

    /* --- By Position Table Column Widths (Mobile) - UPDATED --- */
    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(1),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(1) {
        width: 30%; /* Player */
    }
    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(2),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(2) {
        width: 10%; /* BE */
    }
    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(3),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(3) {
        width: 25%; /* Price */
    }
    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(4),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(4) {
        width: 23%; /* Proj. Price */
    }
    #breakevensContainerPage .accordion-panel .trend-table th:nth-child(5),
    #breakevensContainerPage .accordion-panel .trend-table td:nth-child(5) {
        width: 12%; /* Proj. Score */
    }
}

/* --- END: Breakevens Page Column Width, Truncation, & Overflow Fixes (v9) --- */

/* ==========================================================================
   --- START: AFL Player Trends Page (New Layout) ---
   ========================================================================== */

/* --- Page Header & Control Spacing --- */
#aflFantasyPlayerTrendsContainer .page-subtitle-spaced {
    margin-bottom: 25px !important;
}

/* Toggle Container (Used for All Players / By Position) */
#aflFantasyPlayerTrendsContainer .toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px auto 25px auto;
}

/* 🎯 UNIFIED SIZE: Player Trends labels now match Breakevens labels (0.9em) */
#aflFantasyPlayerTrendsContainer .toggle-label {
    font-size: 0.9em; 
    font-weight: 600;
    color: #555;
}

html.dark-mode #aflFantasyPlayerTrendsContainer .toggle-label {
    color: #bbb;
}

/* Toggle Switch (Non-Icon Style) */
#aflFantasyPlayerTrendsContainer .stat-toggle {
    width: 50px;
    height: 28px;
    margin: 0;
}

#aflFantasyPlayerTrendsContainer .stat-toggle .slider:before {
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
}

#aflFantasyPlayerTrendsContainer .stat-toggle input:checked + .slider:before {
    transform: translateX(22px);
}

#aflFantasyPlayerTrendsContainer #playerSearchContainer {
    margin-bottom: 25px;
}

/* --- Modern Segmented Radio Buttons (ToG/CBA/KI) --- */
#aflFantasyPlayerTrendsContainer #metric-radio-group {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 25px auto;
    border: 2px solid #007bff; /* Border from outer container */
    border-radius: 30px;
    overflow: hidden;
    padding: 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

html.dark-mode #aflFantasyPlayerTrendsContainer .metric-radio-group {
    border-color: #64b5f6;
    background-color: #2a2a2a;
}


#aflFantasyPlayerTrendsContainer #metric-radio-group input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

#aflFantasyPlayerTrendsContainer #metric-radio-group label {
    flex: 1;
    padding: 10px 15px;
    text-align: center;
    font-size: 0.9em;
    font-weight: 600;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    /* Add separators */
    border-right: 1px solid #007bff;
}

/* Remove border from the last label */
#aflFantasyPlayerTrendsContainer #metric-radio-group label:last-of-type {
    border-right: none;
}

html.dark-mode #aflFantasyPlayerTrendsContainer .metric-radio-group label {
    color: #64b5f6;
    border-right-color: #64b5f6;
}

/* Checked state */
#aflFantasyPlayerTrendsContainer #metric-radio-group input[type="radio"]:checked + label {
    background-color: #007bff;
    color: #fff;
}

html.dark-mode #aflFantasyPlayerTrendsContainer .metric-radio-group input[type="radio"]:checked + label {
    background-color: #64b5f6;
    color: #1a1a1a;
}

/* Hover state (for non-checked labels) */
#aflFantasyPlayerTrendsContainer #metric-radio-group input[type="radio"]:not(:checked) + label:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

html.dark-mode #aflFantasyPlayerTrendsContainer .metric-radio-group input[type="radio"]:not(:checked) + label:hover {
    background-color: rgba(100, 181, 246, 0.1);
}

/* --- All Players Table Styling --- */
#aflFantasyPlayerTrendsContainer #allPlayersView .trend-table {
    display: table;
    table-layout: fixed; 
    width: 100%;
    margin-top: 0;
}

/* --- FIX 1: Center All Table Headers & Remove Icon Padding --- */
#aflFantasyPlayerTrendsContainer #allPlayersTable th {
    text-align: center !important;
    vertical-align: middle;
    padding: 8px 10px; /* Uniform padding */
    white-space: normal;
}

#aflFantasyPlayerTrendsContainer #allPlayersTable .sortable {
    cursor: pointer;
    position: relative;
    padding: 8px 10px; /* Reset padding and remove right padding compensation */
}

/* Hide the pseudo-element icon entirely */
#aflFantasyPlayerTrendsContainer #allPlayersTable .sortable::after,
#aflFantasyPlayerTrendsContainer #allPlayersTable .sortable.asc::after,
#aflFantasyPlayerTrendsContainer #allPlayersTable .sortable.desc::after {
    content: none !important;
}

/* --- FIX 2: Add Bottom Border to the Table --- */
#aflFantasyPlayerTrendsContainer #allPlayersTable {
    border-bottom: 1px solid #ddd;
}
html.dark-mode #aflFantasyPlayerTrendsContainer #allPlayersTable {
    border-bottom: 1px solid #555;
}


/* --- Player Cell Content (SCOPED) --- */
#aflFantasyPlayerTrendsContainer .player-cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 4px 5px;
    box-sizing: border-box;
}

#aflFantasyPlayerTrendsContainer .player-cell-content .team-logo-small {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
}

#aflFantasyPlayerTrendsContainer .player-cell-content > div {
    width: 100%;
    min-width: 0; 
    text-align: center;
}

#aflFantasyPlayerTrendsContainer .player-name-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

#aflFantasyPlayerTrendsContainer .player-position {
    font-size: 0.8em;
    font-weight: normal;
    color: #555;
}

html.dark-mode #aflFantasyPlayerTrendsContainer .player-position {
    color: #bbb;
}

/* --- Clickable Player Name (SCOPED) --- */
#aflFantasyPlayerTrendsContainer .clickable-player-name {
    cursor: pointer;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
    transition: text-decoration 0.2s, color 0.2s;
}

#aflFantasyPlayerTrendsContainer .clickable-player-name:hover {
    text-decoration: underline;
    color: #0056b3;
}

html.dark-mode #aflFantasyPlayerTrendsContainer .clickable-player-name {
    color: #64b5f6;
}

html.dark-mode #aflFantasyPlayerTrendsContainer .clickable-player-name:hover {
    color: #82caff;
}

/* --- Dark Mode Red/Green Text FIX --- */
html.dark-mode #aflFantasyPlayerTrendsContainer .positive-diff-text {
    color: #66bb6a !important; 
    font-weight: bold;
}
html.dark-mode #aflFantasyPlayerTrendsContainer .negative-diff-text {
    color: #ef5350 !important; 
    font-weight: bold;
}


/* --- Mobile-specific table layouts --- */
@media (max-width: 768px) {
    /* All Players Table Column Widths */
    #aflFantasyPlayerTrendsContainer #allPlayersTable th:nth-child(1),
    #aflFantasyPlayerTrendsContainer #allPlayersTable td:nth-child(1) {
        width: 40%; /* Player */
    }
    #aflFantasyPlayerTrendsContainer #allPlayersTable th:nth-child(2),
    #aflFantasyPlayerTrendsContainer #allPlayersTable td:nth-child(2) {
        width: 30%; /* Avg (L5) */
    }
    #aflFantasyPlayerTrendsContainer #allPlayersTable th:nth-child(3),
    #aflFantasyPlayerTrendsContainer #allPlayersTable td:nth-child(3) {
        width: 30%; /* % Diff */
    }

    /* Force truncation in player cell on mobile */
    #aflFantasyPlayerTrendsContainer #allPlayersTable td:first-child {
        max-width: 0;
        min-width: 0;
    }
}

/* --- Load More Button (SCOPED) --- */
#aflFantasyPlayerTrendsContainer .load-all-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 20px auto 10px auto;
}

#aflFantasyPlayerTrendsContainer .load-all-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

html.dark-mode #aflFantasyPlayerTrendsContainer .load-all-btn {
    background-color: #64b5f6;
    color: #1a1a1a;
    box-shadow: 0 4px 10px rgba(100, 181, 246, 0.2);
}

html.dark-mode #aflFantasyPlayerTrendsContainer .load-all-btn:hover {
    background-color: #82caff;
}

/* --- Hide/Show Elements --- */
.hidden-view {
    display: none !important;
}

/* ==========================================================================
   --- END: AFL Player Trends Page (New Layout) ---
   ========================================================================== */

/* ==========================================================================
   GENERIC Segmented Radio Button Styles (Final Corrected Version)
   ========================================================================== */
.segmented-control {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 25px auto;
    border: 2px solid #007bff;
    border-radius: 30px;
    overflow: hidden; /* Important for clean, rounded edges */
    padding: 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

html.dark-mode .segmented-control {
    border-color: #64b5f6;
    background-color: #2a2a2a;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control label {
    flex: 1;
    padding: 10px 15px;
    text-align: center;
    font-size: 0.9em;
    font-weight: 600;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    
    /* CORE GAP FIX: Use a border and negative margin to force overlap */
    border-right: 1px solid #007bff; 
    margin-right: -1px; /* Pulls the next label one pixel over the border */
    position: relative; /* Ensures the active label stacks correctly */
    z-index: 1;
    
    /* Clean up conflicting margin/radius */
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.segmented-control label:last-of-type {
    border-right: none;
    margin-right: 0;
}

html.dark-mode .segmented-control label {
    color: #64b5f6;
    border-right-color: #64b5f6;
}

/* Checked state */
.segmented-control input[type="radio"]:checked + label {
    background-color: #007bff;
    color: #fff;
    z-index: 2; /* Make sure the active label is on top */
}

html.dark-mode .segmented-control input[type="radio"]:checked + label {
    background-color: #64b5f6;
    color: #1a1a1a;
}

/* Hover state */
.segmented-control input[type="radio"]:not(:checked) + label:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

html.dark-mode .segmented-control input[type="radio"]:not(:checked) + label:hover {
    background-color: rgba(100, 181, 246, 0.1);
}

/* ==========================================================================
   --- START: Player Form Pages (New Layout) ---
   ========================================================================== */

/* --- Page Header & Control Spacing --- */
.player-form-layout .page-subtitle-spaced {
    margin-bottom: 25px !important;
}

/* Toggle Container (Used for All Players / By Position) */
.player-form-layout .toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px auto 25px auto;
}

.player-form-layout .toggle-label {
    font-size: 0.9em; 
    font-weight: 600;
    color: #555;
}

html.dark-mode .player-form-layout .toggle-label {
    color: #bbb;
}

/* Toggle Switch (Non-Icon Style) */
.player-form-layout .stat-toggle {
    width: 50px;
    height: 28px;
    margin: 0;
}

.player-form-layout .stat-toggle .slider:before {
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
}

.player-form-layout .stat-toggle input:checked + .slider:before {
    transform: translateX(22px);
}

/* --- All Players Table Styling --- */
/* Use the .trend-table class from your Trends page */
.player-form-layout #allPlayersView .trend-table {
    display: table;
    table-layout: fixed; 
    width: 100%;
    margin-top: 0;
}

.player-form-layout #allPlayersTable th {
    text-align: center !important;
    vertical-align: middle;
    padding: 8px 10px;
    white-space: normal;
}

.player-form-layout #allPlayersTable .sortable {
    cursor: pointer;
    position: relative;
    padding: 8px 10px;
}

/* Hide the pseudo-element icon entirely */
.player-form-layout #allPlayersTable .sortable::after,
.player-form-layout #allPlayersTable .sortable.asc::after,
.player-form-layout #allPlayersTable .sortable.desc::after {
    content: none !important;
}

.player-form-layout #allPlayersTable {
    border-bottom: 1px solid #ddd;
}
html.dark-mode .player-form-layout #allPlayersTable {
    border-bottom: 1px solid #555;
}


/* --- Player Cell Content (SCOPED) --- */
.player-form-layout .player-cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 4px 5px;
    box-sizing: border-box;
}

.player-form-layout .player-cell-content .team-logo-small {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
}

.player-form-layout .player-cell-content > div {
    width: 100%;
    min-width: 0; 
    text-align: center;
}

.player-form-layout .player-name-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.player-form-layout .player-position {
    font-size: 0.8em;
    font-weight: normal;
    color: #555;
}

html.dark-mode .player-form-layout .player-position {
    color: #bbb;
}

/* --- Clickable Player Name (SCOPED) --- */
.player-form-layout .clickable-player-name {
    cursor: pointer;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
    transition: text-decoration 0.2s, color 0.2s;
}

.player-form-layout .clickable-player-name:hover {
    text-decoration: underline;
    color: #0056b3;
}

html.dark-mode .player-form-layout .clickable-player-name {
    color: #64b5f6;
}

html.dark-mode .player-form-layout .clickable-player-name:hover {
    color: #82caff;
}

/* --- Dark Mode Red/Green Text FIX --- */
html.dark-mode .player-form-layout .positive-diff-text {
    color: #66bb6a !important; 
    font-weight: bold;
}
html.dark-mode .player-form-layout .negative-diff-text {
    color: #ef5350 !important; 
    font-weight: bold;
}


/* --- Mobile-specific table layouts --- */
/* Note: This is a 4-column layout for Form, vs 3-column for Trends */
@media (max-width: 768px) {
    .player-form-layout #allPlayersTable th:nth-child(1),
    .player-form-layout #allPlayersTable td:nth-child(1) {
        width: 40%; /* Player */
    }
    .player-form-layout #allPlayersTable th:nth-child(2),
    .player-form-layout #allPlayersTable td:nth-child(2) {
        width: 20%; /* Season Avg */
    }
    .player-form-layout #allPlayersTable th:nth-child(3),
    .player-form-layout #allPlayersTable td:nth-child(3) {
        width: 20%; /* 5 Game Avg */
    }
    .player-form-layout #allPlayersTable th:nth-child(4),
    .player-form-layout #allPlayersTable td:nth-child(4) {
        width: 20%; /* % Diff */
    }

    /* Force truncation in player cell on mobile */
    .player-form-layout #allPlayersTable td:first-child {
        max-width: 0;
        min-width: 0;
    }
}

/* --- Load More Button (SCOPED) --- */
.player-form-layout .load-all-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 20px auto 10px auto;
}

.player-form-layout .load-all-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

html.dark-mode .player-form-layout .load-all-btn {
    background-color: #64b5f6;
    color: #1a1a1a;
    box-shadow: 0 4px 10px rgba(100, 181, 246, 0.2);
}

html.dark-mode .player-form-layout .load-all-btn:hover {
    background-color: #82caff;
}

/* Note: The .segmented-control styles are already generic
   and do not need to be scoped to .player-form-layout 
   as long as they are in your main stylesheet.
*/

/* --- START: Live Score Column Visibility & Alignment (FINAL) --- */

/* 1. Universal Alignment: Headers and Data Cells */
/* These styles ensure the header text is centered and the data fields are visually centered. */
.live-fp-col, 
.live-sc-col,
.live-stat-col {
    text-align: center !important; 
}

/* 2. Fix for Centering: Add flex properties to FP and SC columns to center content (headers/numbers) */
.live-fp-col,
.live-sc-col {
    display: flex;
    align-items: center; 
    justify-content: center;
}

/* 3. Base Rule: Hide SC Column for AFLW (when neither AFL nor NBL is selected) */
#liveScoresContainer:not(.show-sc-scores):not(.show-nbl-scores) .live-sc-col {
    display: none !important;
}

/* 4. Rule to Hide FP Column for NBL only */
#liveScoresContainer.show-nbl-scores .live-fp-col {
    display: none !important; 
}

/* 5. Ensure AFL/NBL always forces SC to display (overrides Base Rule 3) */
#liveScoresContainer.show-sc-scores .live-sc-col,
#liveScoresContainer.show-nbl-scores .live-sc-col {
    display: flex !important;
}

/* 6. Ensure AFL/AFLW always forces FP to display (overrides Base Rule 2) */
#liveScoresContainer:not(.show-nbl-scores) .live-fp-col {
    /* This applies to AFL (show-sc-scores) and AFLW (base state) */
    display: flex !important;
}


/* --- END: Live Score Column Visibility & Alignment (FINAL) --- */

/* ==========================================================================
   FANCY LIVE SCORES (Ticket Style) - V3.0 (UPDATED)
   ========================================================================== */

/* --- Page Headers --- */
.day-header {
    font-family: 'Ignis et Glacies Sharp', serif;
    text-align: left;
    margin: 30px 0 15px 0;
    font-size: 1.3em;
    color: #333;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    padding-left: 5px;
}
.round-number-header {
    font-family: 'Ignis et Glacies Sharp', serif;
    text-align: center;
    font-size: 1.5em;
    color: #007bff;
    margin-top: 15px;
    margin-bottom: 10px; 
}
html.dark-mode .day-header { color: #e0e0e0; border-bottom-color: #444; }
html.dark-mode .round-number-header { color: #64b5f6; }

/* --- Card Container --- */
#liveScoresAccordionContainer .accordion {
    margin-bottom: 50px;  /* INCREASED from 25px */
    position: relative;
    background-color: transparent;
}

/* --- The Header (The Visible Ticket) --- */
#liveScoresAccordionContainer .accordion-header {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 0; 
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    overflow: visible; 
    z-index: 2; 
}

html.dark-mode #liveScoresAccordionContainer .accordion-header {
    background-color: #2c2c2c;
    border-color: #444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- 1. Top "Time" Tab --- */
.match-time-strip {
    background-color: #0047ab; 
    color: #fff;
    font-weight: bold;
    font-size: 0.95em;
    padding: 6px 25px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- 2. Main Match Row (Logo - Score - Favicon - Score - Logo) --- */
.match-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    min-height: 120px; /* Ensure height for bigger logos */
}

.match-team-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically center logos */
}

/* DESKTOP: Logos twice as big */
.team-logo-fancy {
    width: 110px; /* Approx 2x current */
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* --- UPDATED DESKTOP STYLES (Larger Scores) --- */

.match-center-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Widened to 200px to fit larger text */
    flex: 0 0 200px !important;       
    width: 200px !important;          
    gap: 10px !important;
}

.score-dash {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    flex: 0 0 65px !important;        
    width: 65px !important;
    
    font-size: 1.2em !important;      
    font-weight: 700 !important;      
    text-align: center !important;
    padding: 0 !important;
    
    /* --- FIX START: Explicit Colors --- */
    color: #333333 !important; /* Dark Grey for Light Mode */
    /* --- FIX END --- */
}

/* Add this right after to handle Dark Mode */
html.dark-mode .score-dash {
    color: #e0e0e0 !important; /* Light Grey for Dark Mode */
}

.center-favicon {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain;
    margin: 0 !important;
}

/* --- 3. Bottom Details (Venue & Status) --- */
.match-details-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0 20px 0; 
    width: 100%;
    text-align: center;
}

.venue-text {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
}
html.dark-mode .venue-text { color: #aaa; }

.status-text-simple {
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-text-simple.live { color: #28a745; }
.status-text-simple.upcoming { color: #f39c12; }
.status-text-simple.complete { color: #dc3545; }

/* --- 4. The Drop Down Arrow --- */
.accordion-toggle-arrow {
    position: absolute;
    bottom: -14px; 
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 28px;
    background-color: #007bff; 
    border-radius: 0 0 15px 15px; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9em;
    z-index: 5;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.accordion-toggle-arrow:hover { background-color: #0056b3; }
.accordion-toggle-arrow i { transition: transform 0.3s ease; }
.accordion-header.active .accordion-toggle-arrow i { transform: rotate(180deg); }

/* --- Accordion Body (Table) --- */
#liveScoresAccordionContainer .accordion-panel {
    background-color: #fff;
    margin-top: -10px; 
    padding-top: 0; /* Removed top padding to let toggle handle spacing */
    border-radius: 0 0 12px 12px;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    z-index: 1;
}
html.dark-mode #liveScoresAccordionContainer .accordion-panel {
    background-color: #2c2c2c;
    border-color: #444;
}

.live-game-body {
    padding: 10px;
}

/* --- WAITING MESSAGE (Centered, Caps, Stadium Font) --- */
.waiting-message-styled {
    text-align: center;
    text-transform: uppercase;
    color: #666;
    font-size: 0.9em;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: 600;
}
html.dark-mode .waiting-message-styled { color: #aaa; }

/* --- HIDE TABLE HEADERS ("PLAYER") --- */
.live-grid-header .live-player-col {
    color: transparent; /* Hide text but keep spacing */
}

/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 768px) {
    /* 1. Logos back to original size on mobile */
    .team-logo-fancy {
        width: 60px;
        height: 60px;
    }

    /* 2. Center Icon Size (Keep same as desktop/prev) */
    .center-favicon {
        width: 35px;
        height: 35px;
    }

    /* 3. Reduce padding to bring table closer to edge */
    .live-game-body {
        padding: 10px 5px; /* Less side padding */
    }
    
    .live-player-row {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    /* Fix header padding to match rows on mobile for alignment */
    .live-grid-header {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* 4. Truncate Player Names */
    .live-player-col {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90px; /* Force truncation */
    }
}

/* --- TABLE WIDTH & TRUNCATION FIX (CSS GRID VERSION V3 - NO LINES) --- */

/* 1. The Container Body - 50/50 Split on Desktop */
#liveScoresAccordionContainer .live-game-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    width: 100% !important;
    padding: 10px 0 !important;
    gap: 20px !important; /* Adds space between tables on desktop */
    box-sizing: border-box;
}

/* 2. The Team Columns - Clean Container */
#liveScoresAccordionContainer .team-scores-container {
    width: auto !important;
    max-width: 100% !important;
    border-right: none !important; 
    box-sizing: border-box;
    overflow: hidden; 
    display: block; 
}

/* 3. The Player Column - Flex Parent for Text */
#liveScoresAccordionContainer .live-player-col {
    flex: 1;        
    min-width: 0;   /* CRITICAL: Allows container to shrink smaller than text */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    padding-right: 5px; 
}

/* 4. The Text Span - Truncation Logic */
#liveScoresAccordionContainer .truncated-name {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds the '...' */
}

/* --- Mobile Override - Stack Vertically --- */
@media (max-width: 768px) {
    #liveScoresAccordionContainer .live-game-body {
        grid-template-columns: 1fr !important; /* Single column */
        gap: 0 !important; 
        padding: 5px 0 !important;
    }
    
    #liveScoresAccordionContainer .team-scores-container {
        border-right: none;
        border-bottom: none; /* REMOVED THE LINE */
        margin-bottom: 25px; /* Just use whitespace to separate teams */
        padding-bottom: 0;
    }
    
    /* Remove margin from the bottom team so it sits flush */
    #liveScoresAccordionContainer .team-scores-container:last-child {
        margin-bottom: 0;
    }
    
    /* Optional: Ensure names have enough width to truncate properly on small screens */
    #liveScoresAccordionContainer .truncated-name {
        max-width: 100%;
    }
}

/* --- START: Live Score Pulsing Text --- */
@keyframes textPulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.status-text-simple.live {
    color: #28a745;
    animation: textPulse 1.5s infinite;
}

html.dark-mode .status-text-simple.live {
    color: #A5D6A7;
}

/* --- Toggle Display Logic --- */
/* Default: Show Gen, Hide Qtr */
.view-mode-qtr .table-gen { display: none !important; }
.view-mode-qtr .table-qtr { display: block !important; }

/* Toggle positioned at top of accordion body */
.live-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    /* ADDED: Padding top so it doesn't bunch up against the arrow */
    padding-top: 25px; 
    padding-bottom: 10px;
    background-color: #fff; 
    position: relative;
    z-index: 10;
    border-bottom: none; /* Ensure no border */
}

html.dark-mode .live-toggle-container {
    background-color: #2c2c2c;
}

.live-toggle-container .toggle-label {
    font-size: 0.8em;
    font-weight: 600;
    color: #555;
}

html.dark-mode .live-toggle-container .toggle-label {
    color: #bbb;
}

/* --- Mobile Alignment Fixes --- */
@media (max-width: 768px) {
    /* Reduce space between stadium and team scores */
    .match-details-row {
        padding-bottom: 15px; /* Reduced from 25px */
    }
    .match-main-row {
        padding-bottom: 0; /* Ensure no extra padding */
    }
    
    /* Header Alignment */
    .live-grid-header .live-stat-col,
    .live-grid-header .live-fp-col,
    .live-grid-header .live-sc-col {
        text-align: center;
        justify-content: center;
    }
    
    /* Ensure Data cells match */
    .live-stat-col {
        justify-content: center;
        text-align: center;
        padding: 0 2px; /* Tight padding */
    }
}

/* --- Desktop Logo Horizontal Centering --- */
@media (min-width: 769px) {
    .match-team-col {
        flex: 1; /* Take up all available space */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center horizontally */
        justify-content: center; /* Center vertically */
    }
    
    .team-logo-fancy {
        margin: 0 auto; /* Force centering */
        display: block;
    }
    
    /* Ensure scores don't push logos out */
    .match-center-col {
        flex: 0 0 auto;
        min-width: 120px; /* Reserve space for score */
    }
}

/* --- Modal Styles --- */
.comparison-choice-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.choice-button {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    min-width: 120px;
    text-align: center;
}

.fantasy-btn { background-color: #007bff; color: white; }
.fantasy-btn:hover { background-color: #0056b3; }

.sc-btn { background-color: #28a745; color: white; }
.sc-btn:hover { background-color: #218838; }

.clickable-live-player {
    cursor: pointer;
    color: #0056b3;
    text-decoration: none;
    font-weight: 600;
}
.clickable-live-player:hover {
    text-decoration: underline;
}

html.dark-mode .clickable-live-player {
    color: #8ab4f8;
}

.player-status-icon.fire { color: #dc3545; font-size: 1.1em; }
.player-status-icon.star { color: #ffc107; font-size: 1.1em; }

/* ==========================================================================
   --- Final Spacing, Color & Alignment Adjustments (V13) ---
   ========================================================================== */

/* 1. Red Text for Quarterly Headers */
.qtr-header-text {
    color: #dc3545 !important;
    font-weight: 800 !important;
}

/* 2. Close Gap: Team Scores <-> Stadium Name */
.match-main-row {
    min-height: 90px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

.match-details-row {
    padding-top: 2px !important;
    padding-bottom: 15px !important;
}

/* 3. Close Gap: Toggle <-> Team Name Headers */
.live-toggle-container {
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
}

.team-table-header {
    padding-top: 5px !important;
    margin-top: 5px !important;
}

/* 4. CRITICAL FIX: Arrow Cut-Off */
#liveScoresAccordionContainer .accordion,
#liveScoresAccordionContainer .accordion-header,
#liveScoresAccordionContainer .match-details-row {
    overflow: visible !important;
    z-index: auto;
}

.accordion-toggle-arrow {
    z-index: 100 !important; 
}

/* 5. FIXED: Waiting Message Gap */
/* Increases top padding so the text doesn't hit the blue arrow */
.waiting-message-styled {
    padding: 45px 20px 20px 20px !important; 
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    text-transform: uppercase;
    color: #666;
    font-size: 0.9em;
    font-weight: 600;
}
html.dark-mode .waiting-message-styled { color: #aaa; }

/* ==========================================================================
   --- DESKTOP SPECIFIC LAYOUT (Min-Width 769px) ---
   ========================================================================== */
@media (min-width: 769px) {
    /* Side-by-side Grid Layout */
    #liveScoresAccordionContainer .live-game-body {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        padding: 10px 0 !important;
        gap: 20px !important;
        box-sizing: border-box;
    }

    #liveScoresAccordionContainer .team-scores-container {
        width: auto !important; 
        max-width: 100% !important;
        border-right: none !important; 
        overflow: hidden; 
        display: block;
        margin: 0 !important;
    }

    /* Desktop Logo Stability */
    .match-center-col {
        flex: 0 0 140px !important;
        width: 140px !important;
        justify-content: center;
        gap: 5px !important;
    }

    .score-dash {
        flex: 0 0 40px !important;
        width: 40px !important;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* ==========================================================================
   --- MOBILE SPECIFIC LAYOUT (Max-Width 768px) ---
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Tighter spacing for main header row */
    .match-main-row {
        min-height: 80px !important;
        align-items: center !important; 
    }
    
    /* 2. Vertical Stack Layout */
    #liveScoresAccordionContainer .live-game-body {
        display: block !important;
        width: 100% !important;
        padding: 10px 5px !important;
    }

    .team-scores-container {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    .team-scores-container:last-child {
        margin-bottom: 0 !important;
    }

    /* 3. Mobile Score Spacing & Vertical Logo Alignment */
    .match-center-col {
        flex: 0 0 150px !important;       /* Increased from 120px */
        width: 150px !important;          
        min-width: 150px !important; 
        
        display: flex !important;         
        flex-direction: row !important;   /* CRITICAL: Fixes vertical stacking */
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;              /* Smaller gap to fit on mobile */
    }
    
    .score-dash {
        flex: 0 0 45px !important;        /* Increased from 30px */
        width: 45px !important;
        
        font-size: 1.1em !important; 
        font-weight: 700 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important; 
    }

    .center-favicon {
        width: 30px !important; 
        height: 30px !important;
    }

    /* 4. Data Columns Alignment */
    .live-cell {
        padding: 0 1px !important;
    }

    /* Player Name: Grows to fill space */
    .live-grid-header .live-player-col,
    .live-player-row .live-player-col {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important; 
    }

    /* Stats Columns: Fixed widths */
    .live-grid-header .live-stat-col,
    .live-player-row .live-stat-col {
        flex: 0 0 23px !important;
        width: 23px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* FP Column */
    .live-grid-header .live-fp-col,
    .live-player-row .live-fp-col {
        flex: 0 0 28px !important;
        width: 28px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* SC Column */
    .live-grid-header .live-sc-col,
    .live-player-row .live-sc-col {
        flex: 0 0 30px !important;
        width: 30px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Icon Column */
    .live-grid-header .live-icon-col,
    .live-player-row .live-icon-col {
        flex: 0 0 18px !important;
        width: 18px !important;
    }
}

/* ==========================================================================
   Desktop Captains Table - Larger Images V3 (Refined Layout)
   ========================================================================== */
@media (min-width: 769px) {

    /* 1. HEADSHOTS: Scaled down to 60px (Matched to Logo Size) */
    #captainsTable .captain-headshot-table {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        margin-top: 8px; /* Adds space between name and image */
        margin-bottom: 4px;
    }

    /* 2. TEAM LOGOS: Kept at 60px */
    #captainsTable .team-logo,
    #captainsTable .team-logo-small {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    /* 3. PADDING: Increased for breathing room */
    #captainsTable tbody td {
        height: auto !important; 
        padding: 15px 5px !important; /* More vertical padding so items aren't cramped */
        vertical-align: middle !important;
    }

    /* 4. RANK COLUMN BORDER FIX */
    /* We must reset this to 'table-cell' to fix the broken borders/backgrounds caused by 'flex' */
    #captainsTable .rank-cell-with-logo {
        display: table-cell !important; 
        vertical-align: middle !important;
    }

    /* Center the content inside the rank cell manually since we removed flex */
    #captainsTable .rank-cell-with-logo .rank-number {
        margin: 0 auto;
        display: block;
    }
    #captainsTable .rank-cell-with-logo .vc-logo-rank {
        margin: 4px auto 0 auto;
        display: block;
    }

    /* 5. Player Name Spacing */
    #captainsTable .player-name-line {
        margin-bottom: 6px; /* Push name slightly further from the headshot */
        font-size: 1.05em;  /* Slight readability bump */
    }
}

/* ==========================================================================
   Desktop Override: Larger Images for Comparison, Matrix, Trends, Form, Injury & Top 100
   ========================================================================== */
@media (min-width: 769px) {

    /* --- 1. Player Comparison Pages (Header Images) --- */
    .comparison-table .player-headshot-table,
    .comparison-table .team-logo-table-header {
        width: 70px !important;
        height: 70px !important;
        object-fit: cover;
    }

    /* --- 2. Universal Small Logos (50px) --- */
    /* FIXED: Scoped .accordion-header img to #injuryAccordionContainer only */
    .team-logo-small,            
    #team-trends-table img,      
    #injuryAccordionContainer .accordion-header img {      
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    /* --- 3. Matchup Matrix Pages (50px) --- */
    #matchupTable img,
    [id$="MatchupTable"] img { 
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    /* --- 4. Row Height Adjustments --- */
    #matchupTable td, 
    [id$="MatchupTable"] td {
        height: auto !important;
        min-height: 60px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #team-trends-table td {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* FIXED: Scoped to Injury List */
    #injuryAccordionContainer .accordion-header {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

/* ==========================================================================
   Mobile Override: Larger Images (Logos & Headshots)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Unlock Row Heights */
    .trend-table td,
    .form-table td,
    table.comparison-table td,
    #matchupTable td,
    [id$="MatchupTable"] td,
    #team-trends-table td {
        height: auto !important;
        min-height: 60px !important; 
    }

    /* 2. Player Comparison: Header Headshots/Logos */
    .player-headshot-table,
    .team-logo-table-header {
        width: 55px !important;
        height: 55px !important;
        object-fit: cover;
    }

    /* 3. General Club Logos */
    .team-logo-small,
    .player-cell-content .team-logo-small {
        width: 45px !important;
        height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
        margin-bottom: 4px !important;
    }

    /* 4. Matchup Matrix & Team Trends */
    #matchupTable img,
    [id$="MatchupTable"] img,
    #team-trends-table img { 
        width: 45px !important;
        height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
    }

    /* 5. Injury List (Accordion Header Logos) - FIXED SCOPE */
    /* This ensures it ONLY affects Injury List, not Live Scores */
    #injuryAccordionContainer .accordion-header img {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ==========================================================================
   Breakevens Page - Player Column Alignment (FIXED & RESIZED)
   ========================================================================== */

/* 1. Container for Logo + Name */
#breakevensContainerPage .player-cell-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    /* Increased padding to fit larger logos */
    padding: 8px 5px !important; 
    gap: 6px !important;
}

/* 2. Team Logo - Base Styles */
#breakevensContainerPage .player-cell-content .team-logo-small {
    vertical-align: middle !important;
    display: inline-block !important;
    object-fit: contain !important;
    margin-bottom: 4px !important;
}

/* --- DESKTOP: 50px Logos & Standard Font --- */
@media (min-width: 769px) {
    #breakevensContainerPage .player-cell-content .team-logo-small {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important; /* Prevent shrinking */
        max-width: 50px !important;
        max-height: 50px !important;
    }
    
    /* Ensure rows grow tall enough & RESTORE FONT SIZE */
    #breakevensContainerPage .trend-table td,
    #breakevensContainerPage .trend-table th {
        height: auto !important;
        min-height: 70px !important;
        font-size: 1em !important; /* <--- This fixes the small text on desktop */
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        vertical-align: middle !important;
    }
}

/* --- MOBILE: 45px Logos & Compact Font --- */
@media (max-width: 768px) {
    #breakevensContainerPage .player-cell-content .team-logo-small {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important; /* Prevent shrinking */
        max-width: 45px !important;
        max-height: 45px !important;
    }

    /* Ensure rows grow tall enough */
    #breakevensContainerPage .trend-table td,
    #breakevensContainerPage .trend-table th {
        height: auto !important;
        min-height: 65px !important;
        font-size: 0.9em !important; /* Keep mobile text compact */
    }
}

/* ==========================================================================
   Breakevens Page - Mobile Width Expansion
   ========================================================================== */
@media (max-width: 768px) {
    /* Reduce the padding of the container holding the accordions.
       This allows the accordions (and the tables inside them) to expand 
       closer to the edge of the screen, giving columns more breathing room.
    */
    #breakevensContainerPage .metric-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}

/* Single Table Toggle Logic */
.accordion-panel-content-wrapper.view-mode-qtr .col-gen {
    display: none !important;
}
.accordion-panel-content-wrapper.view-mode-qtr .col-qtr {
    display: flex !important; /* or table-cell depending on your layout */
}

/* ==========================================================================
   --- Matchup Matrix First Column Fix (Dot Removal & Centering) ---
   ========================================================================== */

/* 1. Target the first column (Club Logo) of all Matrix tables */
#matchupTable td:first-child,
[id$="MatchupTable"] td:first-child {
    font-size: 0 !important;       /* CRITICAL: This hides the stray dot/dash text */
    line-height: 0 !important;     /* Collapses line height to prevent spacing issues */
    text-align: center !important; /* Ensures the logo is perfectly centered */
}

/* 2. Target the Logo Image within that cell to remove the "push" */
#matchupTable td:first-child img,
[id$="MatchupTable"] td:first-child img {
    margin: 0 !important;          /* Removes the global 'margin-right: 5px' */
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   KO-FI INTEGRATION (Buttons, Nav, Modal & Fixes)
   ========================================================================== */

/* --- 1. Compact Button Styles (Global - Desktop & Mobile) --- */
.kofi-button-styled {
    background-color: #007bff;
    color: #fff !important;
    display: inline-flex; /* Use inline-flex for centering */
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border-radius: 50px;
    
    /* SIZE & SHAPE FIXES */
    height: 34px; /* Exact match to Dark Mode Toggle */
    padding: 0 15px; /* Padding on sides only */
    box-sizing: border-box;
    
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    line-height: 1; /* Reset line-height to let Flexbox center it */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}

.kofi-button-styled:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

html.dark-mode .kofi-button-styled {
    background-color: #64b5f6;
    color: #1a1a1a !important;
}
html.dark-mode .kofi-button-styled:hover {
    background-color: #82caff;
}

/* --- 2. Icon & Animation --- */
.kofi-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    animation: kofi-wiggle 3s infinite;
}

.kofi-cup-img {
    height: 14px !important;
    width: auto !important;
    display: block;
    margin: 0 !important;
}

@keyframes kofi-wiggle {
    0% { transform: rotate(0) scale(1); }
    60% { transform: rotate(0) scale(1); }
    75% { transform: rotate(0) scale(1.12); }
    80% { transform: rotate(0) scale(1.12); }
    84% { transform: rotate(-10deg) scale(1.12); }
    88% { transform: rotate(10deg) scale(1.12); }
    92% { transform: rotate(-10deg) scale(1.12); }
    96% { transform: rotate(10deg) scale(1.12); }
    100% { transform: rotate(0) scale(1); }
}

/* --- 3. Navigation Containers --- */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 15px;
}

.mobile-kofi-item {
    display: flex;
    justify-content: center;
    padding: 15px 0;
    background-color: transparent;
}

/* Mobile Visibility Logic */
@media (max-width: 768px) {
    .nav-right-group { display: none !important; }
    .kofi-button-styled { width: auto; min-width: 120px; }
}

@media (min-width: 769px) {
    .mobile-kofi-item { display: none !important; }
}

/* --- 4. Desktop Grid Alignment Fix (Centers Links) --- */
@media (min-width: 769px) {
    nav {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 100%;
        align-items: center;
        height: 90px;
    }

    #nav-logo-link-desktop {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin-right: 0;
    }

    nav ul.desktop-nav-links {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        white-space: nowrap;
    }

    .nav-right-group {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        margin-left: 0 !important;
        width: auto;
    }
}

/* ==========================================================================
   KO-FI INTEGRATION (Buttons, Nav, Modal & Fixes)
   ========================================================================== */

/* --- 1. Compact Button Styles (Global) --- */
.kofi-button-styled {
    background-color: #007bff;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border-radius: 50px;
    height: 34px;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}

.kofi-button-styled:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

html.dark-mode .kofi-button-styled {
    background-color: #64b5f6;
    color: #1a1a1a !important;
}
html.dark-mode .kofi-button-styled:hover {
    background-color: #82caff;
}

.kofi-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    animation: kofi-wiggle 3s infinite;
}

.kofi-cup-img {
    height: 14px !important;
    width: auto !important;
    display: block;
    margin: 0 !important;
}

@keyframes kofi-wiggle {
    0% { transform: rotate(0) scale(1); }
    60% { transform: rotate(0) scale(1); }
    75% { transform: rotate(0) scale(1.12); }
    80% { transform: rotate(0) scale(1.12); }
    84% { transform: rotate(-10deg) scale(1.12); }
    88% { transform: rotate(10deg) scale(1.12); }
    92% { transform: rotate(-10deg) scale(1.12); }
    96% { transform: rotate(10deg) scale(1.12); }
    100% { transform: rotate(0) scale(1); }
}

/* --- 3. Navigation Containers --- */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 15px;
}

/* Mobile Visibility Logic */
@media (max-width: 768px) {
    .nav-right-group { display: none !important; }
}

/* Desktop Visibility */
@media (min-width: 769px) {
    /* Grid Nav Alignment */
    nav {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 100%;
        align-items: center;
        height: 90px;
    }
    #nav-logo-link-desktop { grid-column: 1; margin-right: 0; justify-self: start; }
    nav ul.desktop-nav-links { grid-column: 2; justify-self: center; width: auto !important; margin: 0 !important; }
    .nav-right-group { grid-column: 3; justify-self: end; margin-left: 0 !important; }
    
    /* Hide mobile specific elements */
    .mobile-nav-toggle-container { display: none !important; }
}

/* ==========================================================================
   5. KO-FI INTEGRATION (Buttons, Nav, Modal & Fixes) - FIXED
   ========================================================================== */

/* --- SHARED MODAL STYLES --- */
#kofiModal {
    z-index: 10001;
    background-color: rgba(0, 0, 0, 0.6);
}
.kofi-modal-content {
    border-radius: 12px;
    position: relative;
}
.kofi-close-btn {
    position: absolute;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    font-weight: bold;
    cursor: pointer;
    z-index: 10005;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* --- DESKTOP SPECIFIC --- */
@media (min-width: 769px) {
    #kofiModal {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    #kofiModal .kofi-modal-content {
        background-color: #fff !important;
        width: 400px !important;
        height: 725px !important;
        max-height: 90vh;
        overflow: visible !important;
        padding: 0 !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    }
    .kofi-modal-content iframe {
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }
    .kofi-close-btn {
        top: -15px;
        right: -15px;
        background-color: #fff !important;
        color: #333 !important;
        border: 2px solid #fff;
    }
    html.dark-mode .kofi-close-btn {
        background-color: #333 !important;
        color: #fff !important;
        border-color: #444;
    }
}

/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 768px) {

    /* --- 1. Main Nav Layout --- */
    nav {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-left: 15px;
        padding-right: 15px;
    }

    #nav-logo-link-desktop {
        order: 0 !important;
        margin-right: 0;
        display: block !important;
        flex-grow: 0;
    }

    nav .hamburger {
        order: 1 !important;
        margin-left: 0;
        display: block !important;
    }

    /* --- 2. Slide-out Panel (Jitter & Scrollbar Fix) --- */
    .mobile-nav-slide-panel {
        /* 1. Force scroll mechanism to exist to prevent layout jump */
        overflow-y: scroll !important; 
        -webkit-overflow-scrolling: touch;
        
        /* 2. Hide the scrollbar visually */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE 10+ */
        
        /* 3. Reserve border space in both modes to prevent 1px shift */
        border-left: 1px solid transparent;
    }
    
    /* Hide Webkit Scrollbar (Chrome/Safari) */
    .mobile-nav-slide-panel::-webkit-scrollbar { 
        display: none;
        width: 0;
        background: transparent;
    }
    
    html.dark-mode .mobile-nav-slide-panel {
        border-left: 1px solid #333;
    }

    /* --- 3. Slide-out Header Layout --- */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        /* PADDING FIX: 
           11px Right Padding aligns the center of the 34px button 
           perfectly with the icons in the list below. */
        padding: 10px 12.5px 10px 20px; 
        
        height: 60px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    /* Close (X) Button */
    .mobile-nav-close {
        margin: 0;
        margin-right: auto; /* Anchors X to left */
        padding: 0;
        width: 20px;
        font-size: 2.4em;
        line-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 4px;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Right Group */
    .mobile-header-right {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0;
        height: 100%; /* Ensures full height for vertical centering */
    }

    /* Ko-fi Button */
    .mobile-header-btn.kofi-button-styled {
        margin: 0;
        border: 1px solid rgba(255,255,255,0.2);
        font-size: 0.8em;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .mobile-header-btn .kofi-cup-img {
        height: 14px !important;
    }

    /* Round Theme Button */
    .mobile-theme-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background-color: #f4f4f4;
        cursor: pointer;
        padding: 0;
        margin: 0;
        flex-shrink: 0;
        
        /* Flex ensures the SVG icon is perfectly centered */
        display: flex; 
        align-items: center;
        justify-content: center;
        
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E");
        transition: background-color 0.3s, border-color 0.3s;
    }

    /* Dark Mode Styles */
    html.dark-mode .mobile-theme-btn {
        background-color: #333;
        border-color: #555;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3E%3C/path%3E%3C/svg%3E");
    }

    .mobile-kofi-item { display: none !important; }

    /* --- 4. MODAL FIXES --- */
    #kofiModal {
        display: block !important;
        position: fixed !important;
        inset: 0;
        width: 100%; height: 100%;
        z-index: 10001 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background-color: rgba(0,0,0,0.85) !important;
        padding: 0;
    }

    #kofiModal .kofi-modal-content {
        position: relative !important;
        width: 85% !important;
        max-width: 350px !important;
        margin: 60px auto 40px auto !important;
        transform: none !important;
        overflow: visible !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .kofi-modal-content iframe {
        display: block !important;
        width: 100% !important;
        height: 725px !important;
        background-color: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
        pointer-events: auto !important;
    }

    .kofi-close-btn {
    position: absolute !important;
    
    /* Moves the button to hang just off the top-right corner */
    top: -1px !important; 
    right: -1px !important; 
    
    width: 36px !important;
    height: 36px !important;
    background-color: #fff !important;
    color: #333 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    font-weight: bold;
    z-index: 10025 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

    html.dark-mode .kofi-modal-content iframe {
        background-color: #2c2c2c !important;
    }
    html.dark-mode .kofi-close-btn {
        background-color: #444 !important;
        color: #fff !important;
        border-color: #444 !important;
    }
}

/* Ensure toggle is hidden on desktop */
@media (min-width: 769px) {
    .mobile-nav-toggle-container { display: none !important; }
}

/* PWA Banner Styles */
.pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%); /* Hidden initially */
    width: 90%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    padding: 15px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #eee;
}

.pwa-banner.show {
    transform: translateX(-50%) translateY(0);
}

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

.pwa-logo {
    width: 50px;
    height: 50px;
    border-radius: 10px; /* Slight rounding for app icon look */
    object-fit: cover;
}

.pwa-text {
    display: flex;
    flex-direction: column;
}

.pwa-text strong {
    font-size: 1.05em;
    color: #333;
}

.pwa-text span {
    font-size: 0.85em;
    color: #666;
}

.pwa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.pwa-btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9em;
}

.pwa-btn-text {
    background: none;
    border: none;
    color: #666;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
}

/* Dark Mode Support */
html.dark-mode .pwa-banner {
    background-color: #2c2c2c;
    border-color: #444;
}
html.dark-mode .pwa-text strong { color: #fff; }
html.dark-mode .pwa-text span { color: #bbb; }
html.dark-mode .pwa-btn-text { color: #aaa; }

/* Position the Metric Info Icon in the top left */
table.comparison-table thead th:first-child .metric-info-trigger {
    position: absolute;
    top: 8px;
    left: 8px;
    margin: 0; /* Resets previous margin */
    font-size: 1.2em; /* Optional: Makes it slightly easier to tap */
}

/* ==========================================================================
   FINAL SYSTEM OVERRIDES V11 (Specific Link Targeting)
   Add this to the very bottom of style.css
   ========================================================================== */

/* --- 1. MODERN TABLE STYLING (Global) --- */
table.comparison-table,
.trend-table, 
.form-table,
#captainsTable, 
#matchupTable,
#team-trends-table,
#allPlayersTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: #fff !important;
    margin: 20px auto !important;
    width: 98%;
    max-width: 1200px;
}

/* --- 2. ACCORDION RESET (Flush Fit) --- */
.accordion-panel table.comparison-table,
.accordion-panel .trend-table,
.accordion-panel .form-table,
.accordion-panel table {
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

/* --- 3. CELL STYLING (Horizontal Lines) --- */
table th, table td {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 10px 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* --- 4. HEADER STYLING (Desktop Defaults) --- */
table thead th {
    background-color: #ffffff !important;
    color: #555 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.85em !important; 
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

/* --- 5. STICKY HEADER LOGIC (Comparison Only) --- */
table.comparison-table:not(.accordion-panel table) thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 89px !important; 
    z-index: 20; 
    height: auto !important; 
    min-height: 110px !important; 
    vertical-align: bottom !important;
    padding-bottom: 10px !important;
}

/* Disable sticky for others */
.accordion-panel table thead th,
.trend-table thead th,
.form-table thead th,
#captainsTable thead th,
#matchupTable thead th,
#team-trends-table thead th,
#allPlayersTable thead th {
    position: static !important;
    top: auto !important;
    height: 45px !important;
    min-height: 0 !important;
    vertical-align: middle !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    box-shadow: none !important;
}

/* --- 6. DARK MODE OVERRIDES --- */
html.dark-mode table.comparison-table,
html.dark-mode .trend-table, 
html.dark-mode .form-table,
html.dark-mode #captainsTable, 
html.dark-mode #matchupTable,
html.dark-mode #team-trends-table,
html.dark-mode #allPlayersTable {
    background-color: #252525 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html.dark-mode .accordion-panel table,
html.dark-mode .accordion-panel .trend-table,
html.dark-mode .accordion-panel .form-table {
    background-color: transparent !important;
    box-shadow: none !important;
}
/* Borders & Text */
html.dark-mode table th, html.dark-mode table td {
    border-bottom: 1px solid #333 !important;
    color: #e0e0e0 !important;
}
/* Headers */
html.dark-mode table thead th {
    background-color: #2c2c2c !important;
    color: #fff !important;
    border-bottom: 2px solid #444 !important;
}
/* Hover */
html.dark-mode tbody tr:hover td {
    background-color: #333333 !important;
}
tbody tr:hover td {
    background-color: #f8f9fa !important;
}

/* --- 7. NUCLEAR BLUE LINKS FIX (Precise Targeting) --- */

/* Group A: Tables where 1st Column = Player Name (FORCE BLUE) */
.trend-table td:first-child,
.form-table td:first-child,
#allPlayersTable td:first-child,
#top100Container table td:first-child,
#podsContainer table td:first-child,
#breakevensContainerPage table td:first-child {
    color: #3391ff !important; 
    font-weight: 600 !important;
    cursor: pointer;
}

/* Group B: Captains Table (2nd Column = Player, 1st Column = Rank) */
#captainsTable td:nth-child(2) {
    color: #3391ff !important; 
    font-weight: 600 !important;
    cursor: pointer;
}
/* Explicitly reset Captains Rank column (1st) to standard text color */
#captainsTable td:first-child {
    color: inherit !important; /* Inherits dark/light text color */
    font-weight: normal !important;
    cursor: default !important;
}
/* Ensure Dark Mode inherits correctly for Rank */
html.dark-mode #captainsTable td:first-child {
    color: #e0e0e0 !important;
}

/* Group C: Injury Tables (NO BLUE LINKS) */
/* Explicitly force standard text color for Injury tables */
#injuryListContainerPage table td:first-child,
#injuryAccordionContainer table td:first-child {
    color: inherit !important;
    font-weight: normal !important;
    cursor: default !important;
}
/* Injury Dark Mode Override */
html.dark-mode #injuryListContainerPage table td:first-child,
html.dark-mode #injuryAccordionContainer table td:first-child {
    color: #e0e0e0 !important;
}

/* Apply Blue to all forced elements in Dark Mode */
html.dark-mode .trend-table td:first-child,
html.dark-mode .form-table td:first-child,
html.dark-mode #allPlayersTable td:first-child,
html.dark-mode #top100Container table td:first-child,
html.dark-mode #podsContainer table td:first-child,
html.dark-mode #breakevensContainerPage table td:first-child,
html.dark-mode #captainsTable td:nth-child(2) {
    color: #3391ff !important;
}

/* Fallback Link Classes */
.clickable-player-name, a.player-name-link, .clickable-live-player { color: #3391ff !important; text-decoration: none; font-weight: 600; }
.clickable-player-name:hover, a.player-name-link:hover, .clickable-live-player:hover { text-decoration: underline; color: #0056b3 !important; }
html.dark-mode .clickable-player-name:hover, html.dark-mode a.player-name-link:hover, html.dark-mode .clickable-live-player:hover { color: #64b5f6 !important; }

/* --- 8. OTHER TWEAKS --- */
/* Metric Icon */
table thead th:first-child { position: relative !important; }
.metric-info-trigger { position: absolute !important; top: 3px !important; left: 5px !important; margin: 0 !important; z-index: 25; font-size: 1.4rem !important; }

/* Injury Accordion Focus */
#injuryAccordionContainer .accordion-header:focus { box-shadow: none !important; outline: none !important; border-color: #d0d0d0 !important; }

/* Matrix Colors */
.difficulty-tier-1, td.difficulty-tier-1, div.difficulty-tier-1 { background-color: #FFEBEE !important; color: #B71C1C !important; }
.difficulty-tier-2, td.difficulty-tier-2, div.difficulty-tier-2 { background-color: #FFCCBC !important; color: #BF360C !important; }
.difficulty-tier-3, td.difficulty-tier-3, div.difficulty-tier-3 { background-color: #FFE0B2 !important; color: #E65100 !important; }
.difficulty-tier-4, td.difficulty-tier-4, div.difficulty-tier-4 { background-color: #FFF9C4 !important; color: #795548 !important; }
.difficulty-tier-5, td.difficulty-tier-5, div.difficulty-tier-5 { background-color: #DCEDC8 !important; color: #1B5E20 !important; }
.difficulty-tier-6, td.difficulty-tier-6, div.difficulty-tier-6 { background-color: #C8E6C9 !important; color: #1B5E20 !important; }

/* Dark Mode Matrix */
html.dark-mode table tbody tr td.difficulty-tier-1, html.dark-mode div.difficulty-tier-1 { background-color: #6D2020 !important; color: #FFCDD2 !important; border-color: #6D2020 !important; }
html.dark-mode table tbody tr td.difficulty-tier-2, html.dark-mode div.difficulty-tier-2 { background-color: #7D3A2A !important; color: #FFCCBC !important; border-color: #7D3A2A !important; }
html.dark-mode table tbody tr td.difficulty-tier-3, html.dark-mode div.difficulty-tier-3 { background-color: #854A00 !important; color: #FFE0B2 !important; border-color: #854A00 !important; }
html.dark-mode table tbody tr td.difficulty-tier-4, html.dark-mode div.difficulty-tier-4 { background-color: #756600 !important; color: #FFF9C4 !important; border-color: #756600 !important; }
html.dark-mode table tbody tr td.difficulty-tier-5, html.dark-mode div.difficulty-tier-5 { background-color: #33691E !important; color: #DCEDC8 !important; border-color: #33691E !important; }
html.dark-mode table tbody tr td.difficulty-tier-6, html.dark-mode div.difficulty-tier-6 { background-color: #1B5E20 !important; color: #C8E6C9 !important; border-color: #1B5E20 !important; }

/* Captains Circles */
.percentage-circle { width: 55px !important; height: 55px !important; border-radius: 50%; background: conic-gradient(#28a745 var(--percentage), #e0e0e0 0); position: relative; display: flex; justify-content: center; align-items: center; animation: popInCircle 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; transform: scale(0); margin: 5px auto; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.percentage-circle::before { content: ""; position: absolute; width: 42px; height: 42px; background-color: #333; border-radius: 50%; z-index: 1; }
.percentage-text { position: relative; z-index: 2; font-size: 0.85em !important; font-weight: 800 !important; color: #fff !important; }
@keyframes popInCircle { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
html.dark-mode .percentage-circle { background: conic-gradient(#00e676 var(--percentage), #444 0); box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
html.dark-mode .percentage-circle::before { background-color: #333 !important; }
html.dark-mode .coaches-choice-container h2, html.dark-mode .coaches-choice-container h3, html.dark-mode .coaches-choice-container h4, html.dark-mode .coaches-choice-section, html.dark-mode .coaches-choice-container .player-name { color: #e0e0e0 !important; }

/* --- 9. MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
    table.comparison-table:not(.accordion-panel table) thead th {
        top: 84px !important;
    }
    table thead th { font-size: 0.8em !important; }
    #team-trends-table thead th { font-size: 0.75em !important; }
    
    /* Accordion & Breakevens Header Sizes */
    .accordion-panel table thead th,
    #breakevensContainerPage .trend-table thead th,
    #allPlayersTable thead th { 
        font-size: 0.7em !important; 
        padding: 8px 2px !important;
        white-space: normal !important;
        line-height: 1.1 !important;
    }
}

/* ==========================================================================
   UNIFIED PLAYER AVERAGE BOXES (Fixed Size Desktop & Mobile)
   Add to bottom of style.css
   ========================================================================== */

.player-card-b22-avg {
    /* 1. Positioning */
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 5 !important;

    /* 2. Fixed Sizing */
    /* Sets a consistent shape regardless of screen size */
    min-width: 36px !important; 
    height: 24px !important;
    padding: 0 4px !important; /* Horizontal padding only */
    border-radius: 4px !important;

    /* 3. Perfect Centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 4. Typography (Fixed size - No scaling) */
    font-size: 0.95em !important; /* Standard readable size */
    font-weight: 800 !important;
    line-height: 1 !important;
    
    /* 5. Visuals */
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #007bff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Dark Mode Override */
html.dark-mode .player-card-b22-avg {
    background-color: rgba(40, 40, 40, 0.95) !important;
    color: #64b5f6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Mobile Specific Override to prevent shrinking */
@media (max-width: 768px) {
    .player-card-b22-avg {
        font-size: 0.95em !important; /* Forces same size as desktop */
        top: 6px !important;  /* Slightly tighter to corner on small screens */
        left: 6px !important;
    }
}

/* ==========================================================================
   MODERN PLAYER CARD OVERRIDES (Trading Card Style + Color Fixes)
   Add to bottom of style.css
   ========================================================================== */

/* 1. Card Shape, Depth & Light Mode Colors */
.player-card-b22,
.player-card-front,
.player-card-back {
    background-color: #ffffff !important;
    color: #333333 !important; /* Ensures text is visible on white */
    border: none !important;
    border-radius: 16px !important;
    /* "Elevation" Shadow */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: visible !important;
}

/* 2. Hover Effect (Lift Up) */
.player-card-container:hover .player-card-front,
.player-card-b22:hover {
    transform: translateY(-7px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12) !important;
}

/* 3. Player Name (Force Blue Link Color) */
.player-card-b22-name,
.player-card-b22-name a {
    color: #007bff !important; /* Standard Blue */
    text-decoration: none !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    margin-top: 8px !important;
    cursor: pointer !important;
}
.player-card-b22-name:hover,
.player-card-b22-name a:hover {
    text-decoration: underline !important;
    color: #0056b3 !important;
}

/* 4. Image Styling (Pop Effect) */
.player-card-b22-img-container img,
.player-card-b22-img img {
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    border-radius: 50% !important;
}

/* 5. Info / Position Text (Subtle) */
.player-card-b22-info {
    font-size: 0.75em !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- DARK MODE OVERRIDES --- */

/* Dark Card Background & Text */
html.dark-mode .player-card-b22,
html.dark-mode .player-card-front,
html.dark-mode .player-card-back {
    background-color: #2c2c2c !important;
    color: #ffffff !important; /* Ensures text is visible on dark */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Dark Mode Hover Shadow */
html.dark-mode .player-card-container:hover .player-card-front,
html.dark-mode .player-card-b22:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.6) !important;
}

/* Dark Mode Player Name (Lighter Blue) */
html.dark-mode .player-card-b22-name,
html.dark-mode .player-card-b22-name a {
    color: #64b5f6 !important;
}
html.dark-mode .player-card-b22-name:hover,
html.dark-mode .player-card-b22-name a:hover {
    color: #8ab4f8 !important;
}

/* Dark Mode Image Ring */
html.dark-mode .player-card-b22-img-container img,
html.dark-mode .player-card-b22-img img {
    border-color: #444 !important;
}

/* Dark Mode Info Text */
html.dark-mode .player-card-b22-info {
    color: #aaa !important;
}

/* Fix for Card Back Stats Visibility */
/* Forces all text inside the card back to inherit the card's color */
.player-card-back h4, 
.player-card-back p, 
.player-card-back span, 
.player-card-back div {
    color: inherit !important;
}

/* ==========================================================================
   UNIFIED HEADSHOT STYLES (Pop & Shadow Effect)
   Targets: Player Comparison, Captains Table, Coaches Choice
   Add to bottom of style.css (Replace previous separate headshot blocks)
   ========================================================================== */

.player-headshot-table,
#captainsTable .captain-headshot-table,
.player-headshot {
    /* 1. The "Pop" Ring (White Border) */
    border: 3px solid #ffffff !important;
    
    /* 2. The Shadow (Depth) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    
    /* 3. Background (Prevents transparency issues) */
    background-color: #f9f9f9 !important;
    
    /* 4. Shape */
    border-radius: 50% !important;
    
    /* 5. Ensure object fit */
    object-fit: cover !important;
}

/* Dark Mode Overrides */
html.dark-mode .player-headshot-table,
html.dark-mode #captainsTable .captain-headshot-table,
html.dark-mode .player-headshot {
    /* Match the dark card ring color */
    border-color: #444 !important;
    background-color: #333 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   MODERN ACCORDION OVERRIDES (Card Style - SNAPPY FIX)
   Replaces previous Accordion Overrides
   ========================================================================== */

/* --- 1. HEADER STYLING (Closed State) --- */
.accordion-header:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: #ffffff !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 20px 25px !important; /* Maintained "Fatter" sizing */
    font-weight: 800 !important;
    font-size: 1em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03) !important;
    
    /* FIX: Only animate colors/shadows, NOT layout (margin/transform) */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
    
    margin-bottom: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* --- 2. HOVER EFFECT --- */
.accordion-header:not(#liveScoresAccordionContainer .accordion-header):hover {
    /* Removed translateY to prevent layout jitter */
    box-shadow: 0 6px 12px rgba(0,0,0,0.08) !important;
    border-color: #007bff !important;
    color: #007bff !important;
}

/* --- 3. ACTIVE (OPEN) STATE --- */
.accordion-header.active:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-color: #007bff !important;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 0 !important; /* Snaps flush instantly */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}

.accordion-header.active:not(#liveScoresAccordionContainer .accordion-header):hover {
    color: #ffffff !important;
}

/* --- 4. PANEL STYLING (Content) --- */
.accordion-panel:not(#liveScoresAccordionContainer .accordion-panel) {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03) !important;
    margin-bottom: 15px !important;
    overflow: hidden;
}

/* --- 5. DARK MODE OVERRIDES --- */
html.dark-mode .accordion-header:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}
html.dark-mode .accordion-header:not(#liveScoresAccordionContainer .accordion-header):hover {
    border-color: #64b5f6 !important;
    color: #64b5f6 !important;
    background-color: #333 !important;
}
html.dark-mode .accordion-header.active:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: #64b5f6 !important;
    color: #1a1a1a !important;
    border-color: #64b5f6 !important;
}
html.dark-mode .accordion-header.active:not(#liveScoresAccordionContainer .accordion-header):hover {
    color: #1a1a1a !important;
}
html.dark-mode .accordion-panel:not(#liveScoresAccordionContainer .accordion-panel) {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
}

/* ==========================================================================
   ACCORDION TABLE COLUMN SPACING (Even Distribution)
   Add to bottom of style.css
   ========================================================================== */

/* Desktop Only: Force even column widths for tables inside accordions */
@media (min-width: 769px) {
    .accordion-panel table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* Targets all header and data cells inside accordion tables */
    .accordion-panel table th,
    .accordion-panel table td {
        width: 1%; /* This trick forces cells to share available space equally */
        /* If you have specific columns that need to be wider (like Player Name),
           you can override this specific rule for the first-child below */
    }
    
    /* Optional: If the first column (Player Name) needs to be slightly wider, 
       uncomment the lines below: */
    /*
    .accordion-panel table th:first-child,
    .accordion-panel table td:first-child {
        width: 30% !important; 
    }
    */
}

/* ==========================================================================
   ACCORDION FONT UPDATE (Match Page Headers)
   Add to bottom of style.css
   ========================================================================== */

.accordion-header {
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif !important;
    letter-spacing: 1px !important; /* Adds a little breathing room for this font */
    font-weight: normal !important; /* This font is naturally bold, so we reset weight */
}

/* ==========================================================================
   ACCORDION ICON FIX (Revert to Standard Font)
   Add to bottom of style.css
   ========================================================================== */

.accordion-indicator {
    /* Force the symbol to use a standard, clean font */
    font-family: 'Nunito Sans', Arial, sans-serif !important; 
    
    /* Visual tweaks to make it look sharp */
    font-weight: 400 !important; /* Normal weight usually looks cleaner for + */
    font-size: 1.4em !important; /* Make it slightly larger */
    line-height: 1 !important;
    opacity: 0.8; /* Slightly soften it */
}

/* ==========================================================================
   INJURY PAGE FONT SIZE TWEAK V4 (Larger Text + Matching Icon)
   Add to bottom of style.css
   ========================================================================== */

@media (min-width: 769px) {
    /* 1. Increase Container Padding for a "Fatter" look */
    #injuryAccordionContainer .accordion-header {
        padding: 20px 25px !important;
    }

    /* 2. Target the TEAM NAME TEXT specifically */
    #injuryAccordionContainer .accordion-header span:nth-of-type(1) {
        font-size: 1.4em !important; /* Larger text */
        font-weight: 600 !important;
        letter-spacing: 1px !important;
    }

    /* 3. Scale up the Team Logo */
    #injuryAccordionContainer .accordion-header img {
        width: 45px !important;
        height: 45px !important;
        margin-right: 15px !important;
    }

    /* 4. Scale up the Plus/Minus Indicator to match */
    #injuryAccordionContainer .accordion-header .accordion-indicator {
        font-size: 1.8em !important; /* Increased to match the visual weight of the text */
        font-weight: 400 !important; /* Keep it crisp */
        margin-left: auto !important; /* Ensure it stays to the right */
    }
}

/* ==========================================================================
   3D TEAM LOGO EFFECT (Static Shadow - No Bounce)
   Applies a permanent drop shadow to team logos for depth, but removes movement.
   ========================================================================== */

/* --- 1. Generic & Shared Classes --- */
.team-logo-small,              /* Trends, Form, Breakevens Tables */
.team-logo-table-header,       /* Player Comparison Headers */
.team-logo-live,               /* Live Scores (Mobile/Standard) */
.team-logo-fancy,              /* Live Scores (Desktop Ticket Style) */
.popup-team-logo,              /* Player Stats Popups */
.opponent-logo,                /* Ranking Card Backs */
.league-logo,                  /* Homepage League Selection */

/* --- 2. Specific Page Containers --- */
#injuryAccordionContainer .accordion-header img, /* Injury Page Headers */
#matchupTable img,             /* Matchup Matrix (Team View) */
#positionAccordionContainer img, /* Matchup Matrix (Position View) */
#team-trends-table img,        /* Team Trends Page (All Leagues) */
#captainsTable img,            /* Captains Page (All Leagues) */
#honourableMentions img,       /* Best 22/16/Starting 5 Mentions */
.player-card-front img,        /* Best 22/16/Starting 5 Player Cards */

/* --- 3. Table Classes (Covers most data pages) --- */
.trend-table img,              /* Player Trends, Top 100, PODs, Captains, Breakevens */
.form-table img,               /* Player Form (All Leagues) */
.comparison-table img,         /* Player Comparison (All Leagues) */

/* --- 4. Safety Catches (Ensures dynamic content is caught) --- */
#top100Container img,          /* Top 100 Lists */
#podsContainer img,            /* PODs Lists */
#cash-cows-section img         /* Breakevens Cash Cows Accordions */
{
    /* Creates a realistic shadow that follows the logo's shape */
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.35));
    
    /* Removed: transition & transform properties (No Bounce) */
}

/* --- DARK MODE: Adjusted Shadows --- */
/* Deeper shadow for better contrast against dark grey backgrounds */
html.dark-mode .team-logo-small,
html.dark-mode .team-logo-table-header,
html.dark-mode .team-logo-live,
html.dark-mode .team-logo-fancy,
html.dark-mode .popup-team-logo,
html.dark-mode .opponent-logo,
html.dark-mode .league-logo,
html.dark-mode #injuryAccordionContainer .accordion-header img,
html.dark-mode #matchupTable img,
html.dark-mode #positionAccordionContainer img,
html.dark-mode #team-trends-table img,
html.dark-mode #captainsTable img,
html.dark-mode .trend-table img,
html.dark-mode .form-table img,
html.dark-mode .comparison-table img,
html.dark-mode #honourableMentions img,
html.dark-mode .player-card-front img,
html.dark-mode #top100Container img,
html.dark-mode #podsContainer img,
html.dark-mode #cash-cows-section img
{
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.9));
}

/* ==========================================================================
   CUSTOM SELECT DROPDOWN V9 (Dual Target: League & Position)
   Targets: #leagueSelector AND #positionFilter
   1. Desktop: Shows Fancy UI, Hides Native
   2. Mobile: Shows Native, Hides Fancy UI
   ========================================================================== */

/* --- DESKTOP ONLY (Fancy Mode) --- */
@media (min-width: 769px) {
    
    /* 1. Hide Native Selects */
    #leagueSelector,
    #positionFilter {
        display: none !important;
    }

    /* 2. Clean Up Parent Containers */
    .select-container,
    .custom-select-wrapper,
    .custom-select,
    .input-container { /* Added input-container for Top 100 pages */
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* 3. The Wrapper */
    .custom-select-wrapper {
        position: relative;
        user-select: none;
        width: 100%; /* Let parent control width */
        max-width: 280px; /* Default max-width */
        margin: 0 auto;
        display: block !important;
        z-index: 50;
    }
    
    /* Specific width override for Position Filter if needed */
    #positionFilterContainer .custom-select-wrapper {
        max-width: 100%; /* Fill the flex container */
    }

    /* 4. The Trigger (The Pill Button) */
    .custom-select-trigger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important; 
        height: 48px !important;
        box-sizing: border-box !important;
        background-color: #fff;
        border: 1px solid #dcdcdc !important;
        border-radius: 30px !important;
        padding: 0 35px;
        font-size: 1em;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* Arrow Icon */
    .custom-select-trigger::after {
        content: '\f107'; 
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s;
        color: #333;
    }

    /* Open State */
    .custom-select.open .custom-select-trigger {
        border-color: #007bff !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .custom-select.open .custom-select-trigger::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* 5. The Dropdown List */
    .custom-options {
        position: absolute;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 4px;
        background: #fff;
        border: 1px solid #dcdcdc !important;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 100;
        overflow: hidden;
    }

    .custom-select.open .custom-options {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* 6. The Options */
    .custom-option {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 0.95em;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        text-align: center;
    }
    
    .custom-option:last-child { border-bottom: none; }
    
    .custom-option:hover {
        background-color: #f0f8ff;
        color: #007bff;
    }
    
    .custom-option.selected {
        background-color: #007bff;
        color: #fff;
    }

    /* 7. Dark Mode Desktop */
    html.dark-mode .custom-select-trigger {
        background-color: #2a2a2a;
        border-color: #444 !important;
        color: #e0e0e0;
    }
    html.dark-mode .custom-select-trigger::after { color: #e0e0e0; }
    html.dark-mode .custom-select.open .custom-select-trigger { border-color: #64b5f6 !important; }
    
    html.dark-mode .custom-options {
        background-color: #2c2c2c;
        border-color: #444 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    html.dark-mode .custom-option { color: #e0e0e0; border-bottom-color: #333; }
    html.dark-mode .custom-option:hover { background-color: #383838; color: #64b5f6; }
    html.dark-mode .custom-option.selected { background-color: #64b5f6; color: #1a1a1a; }
}

/* --- MOBILE ONLY: Native Select Restoration --- */
@media (max-width: 768px) {
    
    /* 1. Show the Wrapper */
    .custom-select-wrapper { 
        display: block !important; 
        width: 100% !important;
        margin: 0 auto 25px auto !important;
    }

    /* 2. Hide the Fancy UI Elements */
    .custom-select {
        display: none !important;
    }

    /* 3. Force Show & Style Native Selects */
    #leagueSelector,
    #positionFilter {
        display: block !important; /* Override JS inline style */
        width: 100%; 
        max-width: 280px; 
        margin: 0 auto; 
        padding: 12px 40px; 
        height: 48px;
        border-radius: 30px; 
        border: 1px solid #dcdcdc; 
        background-color: #fff; 
        color: #333;
        font-size: 1em; 
        font-weight: 600; 
        text-align: center; 
        text-align-last: center;
        appearance: none; 
        -webkit-appearance: none;
        
        /* Add custom arrow */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat; 
        background-position: right 20px center; 
        background-size: 16px 12px;
    }
    
    /* Dark Mode Mobile */
    html.dark-mode #leagueSelector,
    html.dark-mode #positionFilter {
        background-color: #2a2a2a; 
        border-color: #444; 
        color: #e0e0e0;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
}

/* ==========================================================================
   TOP 100 MOBILE LAYOUT FIX V4 (Balanced Spacing)
   1. Width: 280px Pill
   2. Spacing: Reduces bottom margin to visually center between Radio & Search
   Add to very bottom of style.css
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. THE CONTAINER */
    #positionFilterContainer {
        width: 100% !important;
        max-width: 100% !important;
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* SPACING FIX: */
        /* We rely on the Radio Button's existing 25px bottom-margin for the top gap. */
        /* We set a smaller margin-bottom here (12px) to balance the visual weight */
        margin-top: 0 !important; 
        margin-bottom: 0px !important; 
        padding: 0 !important;
    }

    /* 2. THE PILL (Native Select) */
    #positionFilter {
        display: block !important;
        
        /* WIDTH: 280px */
        width: 280px !important; 
        
        /* HEIGHT: 48px (Match Search Box) */
        height: 48px !important; 
        
        /* Text */
        padding: 0 30px !important; 
        text-align: center !important;
        text-align-last: center !important;
        font-size: 0.95em !important;
        font-weight: 600 !important;
        
        /* Visuals */
        border-radius: 50px !important; 
        border: 1px solid #dcdcdc !important;
        background-color: #fff !important;
        color: #333 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        
        /* Arrow */
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 20px center !important;
        background-size: 12px 12px !important;
    }
    
    /* 3. Dark Mode */
    html.dark-mode #positionFilter {
        background-color: #2a2a2a !important;
        border-color: #444 !important;
        color: #e0e0e0 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    }
}

/* ==========================================================================
   FINAL MODERN ACCORDION OVERRIDES (Wrapper Card Style - No Jump)
   Replaces previous Accordion & Injury Font blocks
   ========================================================================== */

/* --- 1. THE CARD CONTAINER (The Wrapper) --- */
/* This holds the shape, shadow, and spacing. It stays static. */
.accordion {
    background-color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    border: 1px solid #e0e0e0 !important;
    margin-bottom: 15px !important; /* Constant spacing between items */
    overflow: hidden !important; /* Clips the header/panel to rounded corners */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover on the whole card */
.accordion:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
    border-color: #007bff !important;
}

/* --- 2. THE HEADER (Title Bar) --- */
.accordion-header:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: transparent !important; /* Uses wrapper bg */
    color: #333 !important;
    border: none !important;
    border-radius: 0 !important; /* Wrapper handles corners */
    padding: 20px 25px !important;
    margin: 0 !important; /* ZERO MARGIN = NO JUMPING */
    box-shadow: none !important;
    
    /* Font Styles (Ignis Font) */
    font-family: 'Ignis et Glacies Sharp', Impact, sans-serif !important;
    font-weight: normal !important;
    letter-spacing: 1px !important;
    
    /* Layout */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* Speed up the color change */
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* --- 3. ACTIVE STATE (Open Header) --- */
.accordion-header.active:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: #007bff !important;
    color: #ffffff !important;
    /* Add a divider line between header and panel */
    border-bottom: 1px solid rgba(0,0,0,0.1) !important; 
}

/* --- 4. THE PANEL (Content Slide) --- */
.accordion-panel:not(#liveScoresAccordionContainer .accordion-panel) {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    /* Smooth Height Animation */
    transition: max-height 0.3s ease-out !important;
}

/* --- 5. DARK MODE OVERRIDES --- */
html.dark-mode .accordion {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

html.dark-mode .accordion:hover {
    border-color: #64b5f6 !important;
}

html.dark-mode .accordion-header:not(#liveScoresAccordionContainer .accordion-header) {
    color: #e0e0e0 !important;
}

html.dark-mode .accordion-header.active:not(#liveScoresAccordionContainer .accordion-header) {
    background-color: #64b5f6 !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
}

/* --- 6. INJURY PAGE SPECIFICS (Large Text & Icons) --- */
/* This merges your font size request so it works with the new structure */
@media (min-width: 769px) {
    /* Target Team Name Text */
    #injuryAccordionContainer .accordion-header span:nth-of-type(1) {
        font-size: 1.4em !important;
        font-weight: 600 !important;
    }
    /* Target Team Logo */
    #injuryAccordionContainer .accordion-header img {
        width: 45px !important;
        height: 45px !important;
        margin-right: 15px !important;
    }
    /* Target Plus/Minus Icon */
    #injuryAccordionContainer .accordion-header .accordion-indicator {
        font-size: 1.8em !important;
        margin-left: auto !important;
    }
}

/* --- 7. ACCORDION ICON FONT FIX (Standard Font) --- */
.accordion-indicator {
    font-family: 'Nunito Sans', Arial, sans-serif !important; 
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* ==========================================================================
   LIVE SCORES ISOLATION FIX (Remove Blue Ring & Bulge)
   Add to very bottom of style.css
   ========================================================================== */

/* --- 1. NEUTRALIZE THE BLUE RING & LIFT --- */
/* Forces the live score card to stay static and grey on hover */
#liveScoresAccordionContainer .accordion:hover {
    border-color: #e0e0e0 !important; /* Keep standard grey border */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; /* Keep standard shadow (no lift) */
    transform: none !important; /* Stop the "Jump" effect */
}

/* --- 2. REMOVE THE "BULGE" (Excess Bottom Space) --- */
/* Tightens the panel content so it doesn't look bloated when open */
#liveScoresAccordionContainer .accordion-panel {
    padding-bottom: 5px !important; /* Reduces bottom padding drastically */
    margin-bottom: 0 !important;
    min-height: 0 !important; /* Prevents it from forcing a large height */
}

/* --- 3. HEADER TEXT RESET --- */
/* Ensures the text doesn't turn blue on hover */
#liveScoresAccordionContainer .accordion-header:hover {
    color: #333 !important; 
}

/* --- 4. DARK MODE CORRECTIONS --- */
html.dark-mode #liveScoresAccordionContainer .accordion:hover {
    border-color: #444 !important; /* Dark grey border */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

html.dark-mode #liveScoresAccordionContainer .accordion-header:hover {
    color: #e0e0e0 !important;
}

/* Increase gap between Live Scores tickets */
#liveScoresAccordionContainer .accordion {
    margin-bottom: 25px !important; /* Increased from 15px to 25px */
}

/* ==========================================================================
   MASTER ACCORDION CONTROLS (Global V15 - Absolute Positioning)
   1. Uses Position: Absolute to force icon to vertical center (Ignores Font)
   2. High Specificity to fix "Disappearing Minus" on Injury Page
   3. "Nuclear" Reset for Button Push/Jump effects
   ========================================================================== */

/* --- 1. HEADER CONTAINER --- */
.accordion-header {
    position: relative !important; /* Establishes anchor for the icon */
    display: block !important; /* Simple block behavior */
    width: 100% !important;
    text-align: left !important;
    padding-right: 60px !important; /* Make room for the icon on the right */
    
    /* Lock height and margins to prevent jumping */
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    transform: none !important;
}

/* Kill the "Push" effect on click */
.accordion-header:active, 
.accordion-header:focus {
    transform: none !important;
    padding-top: 20px !important; /* Force keep original padding */
    padding-bottom: 20px !important;
}

/* Text Color on Hover */
.accordion-header:not(.active):hover {
    color: #333 !important;
}

/* --- 2. WRAPPER CARD STABILITY --- */
.accordion:hover, .accordion:active {
    transform: none !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    border-color: #e0e0e0 !important;
}

/* --- 3. ACTIVE STATE (OPEN) --- */
.accordion-header.active {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* --- 4. THE ICON (ABSOLUTE POSITIONING) --- */
.accordion-indicator {
    /* Break out of the text flow completely */
    position: absolute !important;
    right: 20px !important; /* Distance from right edge */
    top: 50% !important;    /* Dead center vertical */
    
    /* Center the pivot point */
    transform-origin: center center !important;
    /* Move up by 50% of its own height to be perfectly centered */
    transform: translateY(-50%) !important; 
    
    width: 24px !important;
    height: 24px !important;
    
    /* Clear text styles */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* The Horizontal Line */
.accordion-indicator::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
    /* Center inside the 24px box */
    top: 11px; 
    left: 5px;
    transition: background-color 0.2s;
}

/* The Vertical Line */
.accordion-indicator::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 14px;
    background-color: #333;
    border-radius: 2px;
    /* Center inside the 24px box */
    top: 5px; 
    left: 11px;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.2s;
}

/* --- 5. ICON ANIMATION (ON THE SPOT) --- */

/* Rotate the whole icon container AND keep the vertical centering */
.accordion-header.active .accordion-indicator {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Flatten the vertical line to make a Minus */
.accordion-header.active .accordion-indicator::after {
    transform: rotate(90deg) !important;
}

/* --- 6. COLOR OVERRIDES (High Specificity) --- */

/* Force White Lines when Active (Fixes disappearing minus) */
/* We use ID selectors to beat the Injury Page specificity */
body .accordion-header.active .accordion-indicator::before,
body .accordion-header.active .accordion-indicator::after,
#injuryAccordionContainer .accordion-header.active .accordion-indicator::before,
#injuryAccordionContainer .accordion-header.active .accordion-indicator::after {
    background-color: #ffffff !important;
}

/* --- 7. DARK MODE --- */

/* Wrapper */
html.dark-mode .accordion:hover {
    border-color: #444 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

/* Text (Closed) */
html.dark-mode .accordion-header:not(.active) {
    color: #e0e0e0 !important;
}
html.dark-mode .accordion-header:not(.active):hover {
    color: #ffffff !important;
}

/* Background (Open) */
html.dark-mode .accordion-header.active {
    background-color: #64b5f6 !important;
    color: #1a1a1a !important;
}

/* Icon Lines (Closed) -> White */
html.dark-mode .accordion-indicator::before,
html.dark-mode .accordion-indicator::after {
    background-color: #e0e0e0 !important;
}

/* Icon Lines (Open) -> Dark */
html.dark-mode .accordion-header.active .accordion-indicator::before,
html.dark-mode .accordion-header.active .accordion-indicator::after {
    background-color: #1a1a1a !important;
}

/* ==========================================================================
   INJURY PAGE EXEMPTION (Revert to Flexbox Alignment)
   Restores natural alignment for Injury headers with Logos
   ========================================================================== */

/* 1. Revert Header to Flexbox Mode */
#injuryAccordionContainer .accordion-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Uses Flex to vertically center the icon */
    padding-right: 25px !important; /* Restore standard padding (don't need space for absolute icon) */
}

/* 2. Revert Icon to Relative Positioning */
#injuryAccordionContainer .accordion-indicator {
    position: relative !important; /* Put it back in the text flow */
    top: auto !important;
    right: auto !important;
    margin-left: auto !important; /* Push it to the far right */
    
    /* Remove the "TranslateY" used for absolute centering */
    transform: none !important; 
}

/* 3. Adjust Animation for Relative State */
/* We only want to rotate, not translate, because Flexbox is holding it in place */
#injuryAccordionContainer .accordion-header.active .accordion-indicator {
    transform: rotate(180deg) !important;
}

/* 4. Ensure Lines remain centered inside the icon box */
/* The global V15 rules for ::before and ::after still apply here, 
   keeping the + shape perfect inside the 24px box. */

/* ==========================================================================
   FINAL SYSTEM PATCH V2 (Blue Leak Overlap)
   ========================================================================== 

/* --- 2. BLUE LEAK FIX (The "Overlap" Technique) --- */

/* This targets the tables inside the Matrix/Form accordions */
.accordion-panel table,
.accordion-panel .trend-table {
    border-collapse: collapse !important; 
    border-spacing: 0 !important;
    border: none !important;
    width: 100% !important;
    background-color: #ffffff !important;
    
    /* THE FIX: Pull the table UP by 1 pixel to cover the blue seam */
    margin-top: -1px !important; 
    position: relative !important;
    z-index: 5 !important; /* Ensure table sits ON TOP of the header border */
}

/* Ensure Table Header has a solid top "Lid" */
.accordion-panel table thead th {
    border-top: 1px solid #ffffff !important; 
    background-color: #ffffff !important;
    box-shadow: none !important; 
    border-radius: 0 !important;
}

/* Dark Mode Leak Fix */
html.dark-mode .accordion-panel table,
html.dark-mode .accordion-panel .trend-table {
    background-color: #2c2c2c !important;
}
html.dark-mode .accordion-panel table thead th {
    background-color: #2c2c2c !important;
    border-top: 1px solid #2c2c2c !important;
}

/* ==========================================================================
   LIVE SCORES IMMUNITY SHIELD V6 (Flexbox Restoration)
   Fixes "Time Drop" & "Squashed Layout" by restoring Flex Column
   Add to the VERY BOTTOM of style.css
   ========================================================================== */

/* 1. RESET THE WRAPPER (Spacing & Hover) */
#liveScoresAccordionContainer .accordion {
    /* Restore the large gap between tickets */
    margin-bottom: 40px !important; 
    
    /* Kill the Global "Card" styles on the wrapper (The Header has the border in Live Scores) */
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* Kill Hover Movement */
    transform: none !important;
}

#liveScoresAccordionContainer .accordion:hover {
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 2. RESET THE HEADER (Layout Fix) */
#liveScoresAccordionContainer .accordion-header,
#liveScoresAccordionContainer .accordion-header.active {
    /* CRITICAL: RESTORE FLEX COLUMN LAYOUT */
    /* This fixes the "Squashed" horizontal layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* CRITICAL: REMOVE PADDING */
    /* This fixes the "Time Drop". 0 padding lets the Blue Bar touch the top/sides. */
    padding: 0 !important; 
    padding-right: 0 !important; /* Explicitly override the global 60px padding */
    
    /* Visuals */
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    
    /* Ensure the blue time strip is visible */
    overflow: visible !important;
}

/* 3. HOVER STATE (Visuals) */
#liveScoresAccordionContainer .accordion-header:hover {
    /* Keep the text color standard */
    color: #333 !important; 
    /* Allow a slight shadow increase if desired, but no color change */
    box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important;
    border-color: #ddd !important;
}

/* 4. RESET THE INDICATOR (Use the Blue Tab Arrow, not the Global Icon) */
/* Hide the Global "+" Icon lines */
#liveScoresAccordionContainer .accordion-header::before,
#liveScoresAccordionContainer .accordion-header::after,
#liveScoresAccordionContainer .accordion-indicator {
    display: none !important;
    content: none !important;
}

/* 5. DARK MODE RESETS */
html.dark-mode #liveScoresAccordionContainer .accordion-header,
html.dark-mode #liveScoresAccordionContainer .accordion-header.active {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    color: inherit !important;
}
html.dark-mode #liveScoresAccordionContainer .accordion {
    background-color: transparent !important;
    border: none !important;
}

/* ==========================================================================
   MATCHUP MATRIX HEADER MODERNISATION (Target Style: White + Blue Line)
   ========================================================================== */

/* 1. Reset the Header Cells (td inside thead) */
#matchupTable thead td,
#positionAccordionContainer table thead td {
    /* Visual Reset - Make it White */
    background-color: #ffffff !important;
    color: #333333 !important;
    
    /* Typography - Match "IN FORM" style */
    font-family: 'Nunito Sans', Arial, sans-serif !important; 
    font-weight: 800 !important;      /* Extra Bold */
    text-transform: uppercase !important;
    font-size: 0.85em !important;     /* Slightly smaller, punchy text */
    letter-spacing: 0.5px !important;
    
    /* Layout */
    height: 50px !important;
    padding: 10px 5px !important;
    vertical-align: middle !important;
    text-align: center !important;
    
    /* The Blue Accent Line */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid #007bff !important; /* The Blue Pop */
    
    /* Remove old shadows */
    box-shadow: none !important;
}

/* 2. Specific Width for the First Column (Logo) */
#matchupTable thead td:first-child,
#positionAccordionContainer table thead td:first-child {
    width: 60px !important;
    text-align: center !important;
    border-bottom: 3px solid #007bff !important;
}

/* 3. Dark Mode Support */
html.dark-mode #matchupTable thead td,
html.dark-mode #positionAccordionContainer table thead td {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
    border-bottom: 3px solid #64b5f6 !important; /* Lighter blue for dark mode */
}

/* 4. Round the top corners of the table container so the header fits */
#matchupTable,
#positionAccordionContainer table {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    border-collapse: separate !important; /* Required for border-radius */
}

/* ==========================================================================
   MOBILE MATRIX HEADER FIX (Reduce Height)
   Add to the very bottom of style.css
   ========================================================================== */

@media (max-width: 768px) {
    #matchupTable thead td,
    #positionAccordionContainer table thead td {
        height: 35px !important;       /* Reduced from 50px to 35px */
        padding: 4px 2px !important;   /* Tighter padding */
        font-size: 0.75em !important;  /* Ensure text remains compact */
        line-height: 1.2 !important;   /* Better vertical alignment */
    }
}

/* ==========================================================================
   MATRIX HEADER FIX (Hide "Club" Text)
   Add to the very bottom of style.css
   ========================================================================== */

#matchupTable thead td:first-child,
#positionAccordionContainer table thead td:first-child {
    font-size: 0 !important;        /* Hides the text by shrinking it */
    color: transparent !important;  /* Makes the text invisible */
    line-height: 0 !important;      /* Removes any vertical spacing caused by text */
}

/* ==========================================================================
   Mobile Nav Custom Logos - Fixed Alignment
   ========================================================================== */
.nav-mobile-logo {
    height: 27px;
    width: auto;
    object-fit: contain;

    /* SWITCHED to Margin: Use margin to push the logo right. 
       Adjust '12px' to whatever pixel value you need for alignment. */
    margin-left: 10px; 
    margin-right: -5px; /* Adds a clean gap between the logo and the text "Home" */
    
    /* RESET Padding & Box Sizing: prevents the logo box from getting too wide */
    padding-left: 0; 
    box-sizing: border-box;

    flex-shrink: 0;
    
    /* Rounded Corners */
    border-radius: 4px;

    /* Vertical Alignment */
    display: inline-block;
    vertical-align: middle;
    transform: translateY(0px); 

    /* Styling */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

/* ==========================================================================
   FEEDBACK MODAL STYLES (List Layout)
   ========================================================================== */

.feedback-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Space between buttons */
    margin-top: 10px;
    margin-bottom: 10px;
}

.feedback-option-btn {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Slightly rounded corners like the image */
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 1em;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
}

/* Icon styling */
.feedback-option-btn i {
    width: 30px; /* Fixed width for alignment */
    text-align: center;
    margin-right: 15px;
    font-size: 1.1em;
    color: #666;
    transition: color 0.2s;
}

/* Hover Effect - Mimics a "Selected" state */
.feedback-option-btn:hover {
    border-color: #007bff;
    background-color: #f0f8ff; /* Very light blue background */
    color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-decoration: none;
}

.feedback-option-btn:hover i {
    color: #007bff;
}

/* Dark Mode Adjustments */
html.dark-mode .feedback-option-btn {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html.dark-mode .feedback-option-btn i {
    color: #aaa;
}

html.dark-mode .feedback-option-btn:hover {
    background-color: #333;
    border-color: #64b5f6;
    color: #64b5f6;
}

html.dark-mode .feedback-option-btn:hover i {
    color: #64b5f6;
}

/* --- NBL STARTER STYLING (Refined Small Badge) --- */

/* 1. Reset the text style (Clean look) */
.player-name-link.bold-starter {
    font-weight: 600 !important;      /* Semi-bold */
    text-decoration: none !important; /* No underline */
    border-bottom: none !important;   /* No border */
    color: inherit !important;        /* Keep standard link color */
}

/* 2. Create the Smaller "S" Circle Badge */
.player-name-link.bold-starter::after {
    content: "S";           
    
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* SIZE TWEAK: Reduced to 13px to match text height */
    width: 13px;  
    height: 13px; 
    
    /* Colors */
    background-color: #555; /* Dark Grey background */
    color: #fff;            /* White text */
    border-radius: 50%;     
    
    /* Typography */
    font-size: 8.5px;       /* Tiny but readable 'S' */
    font-weight: 800;       
    font-family: sans-serif;
    line-height: 1;
    
    /* Positioning */
    margin-left: 5px;       /* Tighter spacing to the name */
    position: relative;
    top: -1px;              /* Slight lift to align with lowercase letters */
}

/* Dark Mode: Invert colors */
html.dark-mode .player-name-link.bold-starter::after {
    background-color: #ddd; /* Light Grey circle */
    color: #222;            /* Dark text */
}

/* --- WAITING FOR TIP OFF SCREEN (Corrected Center & Color) --- */

/* 1. HIDE TABLES & SPACERS & FORCE WRAPPER TO COLLAPSE */
#nbl-games-container .accordion-panel-content-wrapper.waiting-mode .live-game-body, 
#nbl-games-container .accordion-panel-content-wrapper.waiting-mode .toggle-container,
#nbl-games-container .accordion-panel-content-wrapper.waiting-mode .team-scores-container,
#nbl-games-container .accordion-panel-content-wrapper.waiting-mode .nbl-spacer {
    display: none !important;
}

/* Force the wrapper to lose its height so it wraps tightly around our overlay */
#nbl-games-container .accordion-panel-content-wrapper.waiting-mode {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
}

/* 2. ENABLE THE OVERLAY */
#nbl-games-container .accordion-panel-content-wrapper.waiting-mode .waiting-overlay {
    display: flex !important; 
}

/* 3. STYLE & ALIGN THE OVERLAY */
#nbl-games-container .waiting-overlay {
    display: none;
    justify-content: center; 
    align-items: center;     
    text-align: center;      
    
    /* ALIGNMENT FIX: */
    /* Increased top padding to 45px to push text down away from chevron */
    /* Kept bottom padding at 35px to balance the whitespace */
    padding: 45px 0 15px 0;         
    
    margin: 0; 
    
    /* TEXT STYLE FIX: */
    /* Changed to #666 (Dark Grey) - darker than original but softer than black */
    color: #666666;          
    font-weight: 600;        
    letter-spacing: 0.5px;   
    font-size: 0.85rem;      
    text-transform: uppercase; 
    
    background: transparent; 
    border-radius: 0;        
    box-shadow: none;        
    
    position: relative;      
    z-index: 5;    
    
    height: auto !important;
    min-height: 0 !important;
}

/* Dark Mode Adjustment */
body.dark-mode #nbl-games-container .waiting-overlay,
.dark-mode #nbl-games-container .waiting-overlay {
    color: #bbbbbb; 

}

/* --- LIVE SCORES TRUNCATION FIX (All Leagues) --- */
/* Targeted specifically to #liveScoresAccordionContainer to protect other tables */

/* 1. Force the Name Column to handle hidden overflow */
#liveScoresAccordionContainer .live-player-col {
    overflow: hidden;
    white-space: nowrap;
    /* Optional: Max-width helps trigger truncation earlier on small screens */
    max-width: 140px; 
}

/* 2. Configure the Name Link to truncate text with '...' */
#liveScoresAccordionContainer .player-name-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    position: relative; /* Creates a boundary for the absolute badge */
    padding-right: 0;
}

/* 3. Special Handling for Starters (Make room for the badge) */
#liveScoresAccordionContainer .player-name-link.bold-starter {
    /* Add padding on the right so the text dots (...) don't overlap the badge */
    padding-right: 18px; 
}

/* 4. Pin the "S" Badge to the right side */
#liveScoresAccordionContainer .player-name-link.bold-starter::after {
    position: absolute;
    right: 0;
    top: 50%;
    /* Perfect vertical centering */
    transform: translateY(-50%);
    /* Reset the margins since we are using absolute positioning now */
    margin-left: 0; 
    margin-top: -1px; /* Keep that tiny visual lift you liked */
}