MediaWiki:Common.css: Difference between revisions

Latest revision as of 13:53, 31 May 2026

/* Hide the "From eSportsAmaze" tagline under the title */
#siteSub, 
.page-header__tagline {display: none !important;}


/* Hide for everyone (Visitors) */
#ca-viewsource,
#ca-viewsource-sticky-header,
#ca-history, 
#ca-edit,
#n-recentchanges, 
#t-specialpages,
#p-tb,
#p-cactions,
#citizen-page-more-dropdown,
#ca-ve-edit-sticky-header,
#ca-history-sticky-header,
.citizen-header__item.citizen-drawer,
.mw-portlet-cactions,
.page-actions-menu {
    display: none !important;
}

/* Hide magic words that leak into the UI */
.mw-parser-output:contains("__NOCACHE__") {
    /* This is hard to target via CSS alone, so we generally hide the container if possible, 
       but better to just hide the text specifically if wrapped. 
       Since we can't easily target raw text, we will ensure it doesn't break layout */
}
/* ALTERNATIVE: If the wiki simply prints it, wrap it in a hidden div on the page */


/* ==========================================================
   GLOBAL THEME VARIABLES (Button-Aware + System Fallback)
   ========================================================== */

/* 1. DEFAULT (Light Mode Base) */
:root {
    /* Backgrounds */
    --bg-page: #ffffff;
    --bg-card: #f8f9fa;
    --bg-header: #f1f5f9;  /* Light Gray Header */
    --bg-hover: #f8fafc;
    
    /* Text */
    --text-main: #202122;
    --text-header: #1e293b; /* Dark Blue-Gray */
    --text-muted: #475569;
    
    /* Borders & Dividers */
    --border-main: #cbd5e1;
    --border-light: #e2e8f0;
    --border-thick: #a2a9b1;

    /* Infobox Specifics */
    --infobox-bg: #f9f9f9;
    --infobox-header-bg: #ff9900;
    --infobox-header-text: #000000;
    --infobox-label: #4a4a4a;

    /* Table Specifics */
    --bg-table-header: #00509d;  /* Deep Navy Blue (Esports Standard) */
    --text-table-header: #E6FAFC; /* White Text */
    --bg-table-row: #e5e5e5;      /* White Row Background */

    /* Tabs Variables (Light Mode) */
    --tab-bg-active: #ffffff;
    --tab-bg-inactive: #f1f5f9;
    --tab-border-active: #007bff;

    /* CUSTOM HEADER (Adaptive) */
    --hero-bg: linear-gradient(135deg, #f8f9fa 0%, #ced4da 100%);
/* Updated for Dark Navy Background */
--hero-text: #1e293b;                 /* Pure white for the Title */
--hero-link: #f8f9fa;                 /* Light Slate Gray for Breadcrumbs */
--hero-link-hover: #ced4da;           /* White glow on hover */
--hero-border: #00509d;               /* A sharper Red (Ruby) to match the dark blue */
--hero-shadow: rgba(0, 0, 0, 0.4);    /* Deeper shadow for more depth on dark */
}


/* 2. FORCE DARK MODE (Matches button "night" or "dark") */
html.skin-theme-client-pref-night,
html.skin-citizen-dark,
html[class*="night"] {
    /* Backgrounds */
    --bg-page: #202122;
    --bg-card: #2a2a2a;
    --bg-header: #333333;  /* Dark Header */
    --bg-hover: #3a3a3a;
    
    /* Text */
    --text-main: #ffffff;
    --text-header: #e2e8f0; /* Light Gray Text */
    --text-muted: #cbd5e1;
    
    /* Borders & Dividers */
    --border-main: #444444;
    --border-light: #555555;
    --border-thick: #666666;

    /* Infobox Specifics */
    --infobox-bg: #202122;
    --infobox-header-bg: #333333;
    --infobox-header-text: #ffffff;
    --infobox-label: #dddddd;

    /* Table Specifics */
    --bg-table-header: #191919;  /* Lighter Slate Blue */
    --text-table-header: #E5E5E5; /* Bright White-Gray */
    --bg-table-row: #2a2a2a;      /* Matches Card Background */

    /* Tabs Variables (Dark Mode) */
    --tab-bg-active: #202122;    
    --tab-bg-inactive: #333333;  
    --tab-border-active: #007bff;

    /* CUSTOM HEADER (Adaptive) */
    --hero-bg: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
/* Updated for Dark Navy Background */
--hero-text: #ffffff;                 /* Pure white for the Title */
--hero-link: #3A3A3A;                 /* Light Slate Gray for Breadcrumbs */
--hero-link-hover: #ffffff;           /* White glow on hover */
--hero-border: #ef4444;               /* A sharper Red (Ruby) to match the dark blue */
--hero-shadow: rgba(0, 0, 0, 0.4);    /* Deeper shadow for more depth on dark */
    
    /* Invert Black Icons to White */
    .dark-invert img { filter: invert(1); }
}

/* 3. FORCE LIGHT MODE (Matches button "day" or "light") */
html.skin-theme-client-pref-day,
html.skin-citizen-light,
html[class*="day"] {
    --bg-page: #ffffff !important;
    --bg-card: #ffffff !important;
    --bg-header: #f1f5f9 !important;
    --bg-hover: #f8fafc !important;
    --text-main: #202122 !important;
    --text-header: #1e293b !important;
    --text-muted: #475569 !important;
    --border-main: #cbd5e1 !important;
    --border-light: #e2e8f0 !important;
    --border-thick: #a2a9b1 !important;
    --infobox-bg: #f9f9f9 !important;
    --infobox-header-bg: #ff9900 !important;
    --infobox-header-text: #000000 !important;
    --infobox-label: #4a4a4a !important;
    --bg-table-header: #00509d !important;
    --text-table-header: #E6FAFC !important;
    --bg-table-row: #e5e5e5 !important;
    --tab-bg-active: #ffffff !important;
    --tab-bg-inactive: #f1f5f9 !important;
    --tab-border-active: #007bff !important;
    .dark-invert img { filter: none !important; }
}

/* 4. AUTO MODE (System Settings Fallback) */
@media (prefers-color-scheme: dark) {
    html:not(.skin-theme-client-pref-day):not([class*="day"]) {
        /* --- Standard Dark Theme Variables --- */
        --bg-page: #202122;
        --bg-card: #2a2a2a;
        --bg-header: #333333;
        --bg-hover: #3a3a3a;
        --text-main: #ffffff;
        --text-header: #e2e8f0;
        --text-muted: #cbd5e1;
        --border-main: #444444;
        --border-light: #555555;
        --border-thick: #666666;
        --infobox-bg: #202122;
        --infobox-header-bg: #333333;
        --infobox-header-text: #ffffff;
        --infobox-label: #dddddd;
        --bg-table-header: #00509d !important;
        --text-table-header: #E6FAFC !important;
        --bg-table-row: #2a2a2a !important;
        --tab-bg-active: #202122;
        --tab-bg-inactive: #333333;
        --tab-border-active: #007bff;

        /* --- HERO HEADER (Copied from Force Dark Mode) --- */
        --hero-bg: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
        --hero-text: #ffffff;          /* White Title */
        --hero-link: #3A3A3A;          /* Dark Grey Breadcrumbs */
        --hero-link-hover: #ffffff;    /* White Hover */
        --hero-border: #ef4444;        /* Red Border */
        --hero-shadow: rgba(0, 0, 0, 0.4);

        /* --- INVERT BLACK ICONS --- */
        .dark-invert img { filter: invert(1); }

        /* --- LOGO TOGGLES (Crucial for Infoboxes) --- */
        .logo-lightmode { display: none !important; }
        .logo-darkmode { display: block !important; }
        
        /* --- STANDINGS LOGO TOGGLES --- */
        .logo-light { display: none !important; }
        .logo-dark { display: inline-block !important; }
    }
}



/* ==========================================================
   1. GENERAL TYPOGRAPHY & LAYOUT
   ========================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-bottom: none; 
    font-weight: 600;
    color: var(--text-main);
}

h2 {
    border-bottom: 2px solid var(--border-light); 
    padding-bottom: 5px;
    margin-top: 1.5em;
}

/* ==========================================================
   2. STANDARD WIKITABLES & MODERN FLAT TABLES (Unified)
   ========================================================== */
table.wikitable,
table.flat-table {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-thick);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%; 
    border-radius: 6px;
    overflow: hidden; 
    margin: 1em 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

table.wikitable > tr > th, 
table.wikitable > * > tr > th,
table.flat-table th {
    background-color: var(--bg-header) !important;
    color: var(--text-header) !important;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--border-thick) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
}

table.wikitable > tr > td, 
table.wikitable > * > tr > td,
table.flat-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-muted);
}

table.wikitable > tr:last-child > td,
table.flat-table tr:last-child td {
    border-bottom: none !important;
}

table.wikitable > tr:hover > td,
table.flat-table tr:hover td {
    background-color: var(--bg-hover) !important;
}

/* ==========================================================
   3a. LEGACY INFOBOX (Keep for now)
   ========================================================== */
.infobox {
    float: right;
    clear: right;
    width: 300px;
    background-color: var(--infobox-bg);
    border: 1px solid var(--border-thick);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    margin: 0 0 1em 1em;
    font-size: 90%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.infobox-header {
    background-color: var(--infobox-header-bg);
    color: var(--infobox-header-text);
    text-align: center;
    font-weight: bold;
    padding: 12px 8px;
    font-size: 110%;
}
.infobox-image {
    text-align: center;
    padding: 15px 0;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
}
.infobox-data-container { padding: 8px; }
.infobox-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    padding: 6px 0;
}
.infobox-row:last-child { border-bottom: none; }
.infobox-label {
    font-weight: 700;
    color: var(--infobox-label);
    width: 40%;
    padding-left: 5px;
}
.infobox-data {
    width: 60%;
    text-align: right;
    padding-right: 5px;
    color: var(--text-muted);
}

/* ==========================================================
   3b. MODERN FLAT INFOBOX (Fixed Design)
   ========================================================== */
.flat-infobox {
    width: 320px;
    float: right;
    clear: right;
    margin: 0 0 20px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08); /* Slightly deeper shadow */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    position: relative;
}

/* 1. Header & Image */
.fib-header {
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-table-header); /* FIX: Uses Deep Blue Theme Color */
    color: #ffffff; /* FIX: White text for contrast */
}

.fib-title {
    font-size: 1.15em;
    font-weight: 700; /* FIX: Reduced from 800 (Too Heavy) */
    color: #ffffff; /* Force white text */
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

.fib-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    background: var(--bg-card); /* Reset background for image area */
    border-bottom: 1px solid var(--border-light);
}
.fib-image img {
    max-width: 180px;
    height: auto;
}

/* 2. Key Stats Grid (2 Columns) */
.fib-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.fib-cell {
    background: var(--bg-card);
    padding: 12px 10px; /* More breathing room */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fib-label-sm {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.fib-value-sm {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-main);
}

/* 3. Main Data List */
.fib-list {
    padding: 15px 20px;
}
.fib-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px; /* Increased spacing */
    font-size: 0.9em;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
}
.fib-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fib-label { color: var(--text-muted); font-weight: 600; }
.fib-data { color: var(--text-main); font-weight: 600; text-align: right; max-width: 60%; line-height: 1.3;}

/* 4. Prize Pool Section (Fixed Color) */
.fib-prize {
    text-align: center;
    padding: 15px;
    background: var(--bg-hover);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.fib-prize-val {
    font-family: 'Consolas', monospace;
    font-size: 1.5em;
    font-weight: 700;
    /* FIX: Changed from Neon Green to Professional Dark Green */
    color: #0d9488; /* Teal/Sea Green looks premium */
    letter-spacing: -0.5px;
}

/* 5. Navigation Footer (Fixed Arrows) */
.fib-nav {
    display: flex;
    border-top: 1px solid var(--border-light);
}
.fib-nav-btn {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-header);
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between arrow and text */
}
.fib-nav-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.fib-nav-btn.prev { border-right: 1px solid var(--border-light); }

/* ==========================================================
   6. SOCIAL ICONS (File Upload Method)
   ========================================================== */
.fib-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
}

/* Style the images inside the link */
.fib-socials img {
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    display: block;
}

.fib-socials img:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Remove default external link icon for these images */
.fib-socials a.external {
    background-image: none !important;
    padding-right: 0 !important;
}

/* ==========================================================
   4. TEAM CARDS & PARTICIPANTS GRID
   ========================================================== */
.participant-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

.team-card, .flat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-main);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
    overflow: hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: transform 0.2s ease-in-out;
}
.team-card { width: 150px; }
.flat-card { width: 220px; }

.team-card:hover, .flat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.team-card-header, .flat-card-header {
    background-color: var(--bg-header);
    color: var(--text-header); 
    padding: 12px;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid var(--border-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    height: 180px;           
    gap: 8px;
}

.team-card-players, .flat-card-body {
    padding: 8px 12px;
    font-size: 0.95em;
    color: var(--text-muted);
    line-height: 1.6em;
}

.player-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.player-row:last-child { border-bottom: none; }

/* Player Card Header (Images) */
.player-card-header {
    background-color: var(--bg-header);
    color: var(--text-header);
    height: 180px; 
    border-bottom: 2px solid var(--border-main);
    padding: 0; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}
.player-card-header img {
    height: 100% !important; 
    width: auto !important;  
    max-width: 100%;         
    object-fit: contain;        
    object-position: top center; 
}

/* ==========================================================
   5. MODERN TEAM HISTORY TABLE
   ========================================================== */
.modern-history-table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-top: 10px;
    background-color: var(--bg-card);
}
.modern-history-table thead th {
    background-color: #222; 
    color: #fff;
    text-align: center;
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    border-bottom: 3px solid #ff4444; 
}
.modern-history-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
}
.modern-history-table tbody tr:hover { background-color: var(--bg-hover); }

/* ==========================================================
   6. UTILITY: AUTO-RANK & MOBILE
   ========================================================== */
.auto-rank table { counter-reset: row-rank; }
.auto-rank tbody tr { counter-increment: row-rank; }
.auto-rank td:first-child::before {
    content: counter(row-rank);
    font-weight: bold;
    color: var(--text-muted);
}
.auto-rank td:first-child { text-align: center; width: 30px; }

.custom-standings { counter-reset: team-rank; }
.custom-standings tr.rank-row { counter-increment: team-rank; }
.custom-standings tr.rank-row td:first-child::before {
    content: counter(team-rank);
    font-weight: bold;
    color: var(--text-muted);
}

@media screen and (max-width: 720px) {
    .nomobile { display: none; }
    .infobox { float: none; width: auto; margin: 1em 0; }
}

.team-logo a.new {display: none;}

/* Main Page Grid System */
.mp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.mp-column-left { flex: 2; min-width: 300px; }
.mp-column-right { flex: 1; min-width: 250px; }

/* Game Selection Cards */
.game-card {
    background: var(--bg-card); 
    color: var(--text-main);
    border: 1px solid var(--border-light);
    border-left: 5px solid #ff4d4d;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.game-card:hover {
    transform: translateY(-3px);
    background-color: var(--bg-hover);
}

.section-header {
    border-bottom: 2px solid #ff4d4d;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

/* Sidebar List Styling */
.mp-sidebar-list ol { padding-left: 20px; margin-top: 5px; }
.mp-sidebar-list li {
    margin-bottom: 8px;
    font-size: 0.95em;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.mp-sidebar-list .mw-newpages-time,
.mp-sidebar-list .mw-newpages-history,
.mp-sidebar-list .mw-userlink,
.mp-sidebar-list .mw-usertoollinks,
.mp-sidebar-list .mw-newpages-length {
    display: none !important;
}

/* Plain Links */
.plainlinks a.external {
    background: none !important;
    padding-right: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
}
.social-card a.external {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* ==========================================================
   TEAM CARD ROSTER OVERLAY
   ========================================================== */
.team-card { position: relative; }
.team-card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    transition: opacity 0.3s ease;
    padding: 10px;
    box-sizing: border-box;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.team-card:hover .team-card-overlay { opacity: 1; }
.team-card-overlay ul {
    list-style: none;
    padding: 0; margin: 0;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.4em;
}
.team-card-overlay li {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 2px 0;
}
.team-card-overlay li:last-child { border-bottom: none; }

.img-fit img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box; 
}

/* ==========================================================
   ROSTER CARD: PC & MOBILE
   ========================================================== */
.roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
}

/* PC STYLES */
.roster-card {
    width: 175px; 
    height: 250px !important;
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.roster-header {
    height: 48px;
    flex: 0 0 48px; 
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.header-content { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.roster-logo { width: 36px; height: 36px; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
.roster-logo img { width: 100%; height: 100%; object-fit: contain; }
.roster-name { font-weight: 800; font-size: 0.8em; text-align: center; line-height: 1.1; color: var(--text-header); }

.roster-subheader {
    height: 22px;
    flex: 0 0 22px; 
    background-color: var(--bg-hover);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
}

.roster-content-rows { flex: 1; display: flex; flex-direction: column; width: 100%; }
.roster-players-inner, .roster-staff-inner { display: contents; }
.roster-row {
    flex: 1; width: 100%;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.8em; font-weight: 600;
    color: var(--text-main);
    padding: 0 2px;
}
.roster-row.staff {
    background-color: var(--bg-hover);
    color: var(--text-muted);
    font-size: 0.75em; font-weight: normal;
}
.roster-content-rows > :last-child > :last-child { border-bottom: none; }

/* MOBILE OVERRIDE */
@media screen and (max-width: 720px) {
    .roster-card {
        width: 100%; height: auto !important;
        display: grid; grid-template-columns: 1fr 1fr 1fr;
        border-radius: 8px; 
        border: 1px solid var(--border-light);
        margin-bottom: 15px; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .roster-content-rows { display: contents; }
    .roster-header {
        grid-column: 1 / 3; grid-row: 1; height: 50px;
        flex: none; justify-content: flex-start;
        padding-left: 15px; font-size: 1.1em; border-bottom: none;
    }
    .roster-name { text-align: left; }
    .roster-staff-inner {
        display: flex; grid-column: 3 / 4; grid-row: 1; height: 50px;
        background-color: var(--bg-header);
        border-left: 1px solid var(--border-light);
        align-items: center; justify-content: center;
        flex-direction: row; flex-wrap: wrap;
        font-size: 0.8em; padding: 0 4px; z-index: 2;
    }
    .roster-row.staff {
        flex: none; width: auto; border: none; background: transparent; padding: 0; margin: 0;
    }
    .roster-row.staff + .roster-row.staff::before { content: ", "; margin-right: 3px; }
    .roster-subheader {
        grid-column: 1 / 4; grid-row: 2; height: 25px; flex: none;
        background-color: var(--bg-hover);
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
    }
    .roster-players-inner {
        grid-column: 1 / 4; display: flex; flex-wrap: wrap; width: 100%;
    }
    .roster-row.player {
        height: 40px; display: flex; align-items: center; justify-content: center; 
        border-right: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        box-sizing: border-box; flex: none;
    }
    .count-4 .roster-row.player { width: 50%; }
    .count-4 .roster-row.player:nth-child(2n) { border-right: none; }
    .count-5 .roster-row.player:nth-child(-n+3) { width: 33.333%; }
    .count-5 .roster-row.player:nth-child(3) { border-right: none; }
    .count-5 .roster-row.player:nth-child(n+4) { width: 50%; }
    .count-5 .roster-row.player:nth-child(5) { border-right: none; }
    .count-6 .roster-row.player { width: 33.333%; }
    .count-6 .roster-row.player:nth-child(3n) { border-right: none; }
    .count-3 .roster-row.player, .count-2 .roster-row.player, .count-1 .roster-row.player { width: 33.333%; }
    .count-3 .roster-row.player:last-child { border-right: none; }
    .roster-players-inner { border-bottom: none; }
    .roster-card > :last-child, .roster-players-inner > :last-child { border-bottom: none; }
}

/* Filter Buttons */
.filter-group {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; align-items: center;
}
.filter-label { font-weight: bold; margin-right: 5px; color: var(--text-header); }
.filter-btn {
    padding: 6px 12px;
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    user-select: none;
    transition: all 0.2s;
}
.filter-btn:hover { background-color: #e2e6ea !important; }
.filter-btn.active {
    background-color: #0056b3 !important;
    color: #ffffff !important;
    border-color: #004494 !important;
    font-weight: bold;
}
.standings-system { display: flex; flex-direction: column; gap: 10px; }
.filterable-content[style*="display:none"],
.filterable-content[style*="display: none"] {
    display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important;
}
.standings-wrapper .filter-group { margin-bottom: 8px; }

/* Mobile Only */
.mobile-only {display: none !important;}
@media screen and (max-width: 720px) { .mobile-only { display: inline-block !important; } }

/* ==========================================================
   MATCH STANDINGS CARDS (Light/Dark Mode Aware)
   ========================================================== */
.match-card-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px; 
    font-family: 'Segoe UI', sans-serif;
    counter-reset: team-rank;
}
.match-card-row td {
    background-color: var(--bg-card);
    color: var(--text-main);
    padding: 10px;
    vertical-align: middle;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.match-card-row td:first-child {
    border-radius: 8px 0 0 8px;
    border-left: 1px solid var(--border-light);
}
.match-card-row td:last-child {
    border-radius: 0 8px 8px 0;
    border-right: 1px solid var(--border-light);
}
.rank-cell {
    border-left: 5px solid #eab308 !important;
    text-align: center;
    font-weight: bold;
    color: var(--text-main);
    min-width: 30px;
}
.rank-cell::before { content: "#" counter(team-rank); font-size: 14px; font-weight: 800; }
.match-card-row { counter-increment: team-rank; }
.match-card-row[style*="display:none"],
.match-card-row[style*="display: none"] { counter-increment: none; }

.team-cell { text-align: left; font-weight: 600; }
.team-cell a { color: var(--text-main); text-decoration: none; }
.grp-cell, .map-cell, .pts-cell, .data-cell { text-align: center; color: var(--text-muted); }
.trophy-cell { text-align: center; font-size: 1.2em; }
.standings-table .total-cell {
    display: table-cell; vertical-align: middle !important; text-align: center !important;
    font-weight: 800; font-size: 1.1em;
    color: var(--text-header);
    background-color: var(--bg-hover);
    width: 70px; border-radius: 0 6px 6px 0;
}
.standings-table td { vertical-align: middle !important; text-align: center; }
.standings-table .team-cell { text-align: left !important; }

.match-card-table tr:first-child {
    background-color: var(--bg-header) !important;
    color: var(--text-muted) !important;
}
.match-card-table th { color: var(--text-muted) !important; border: none !important; }

/* Qualification Borders */
.rank-cell { border-left: 5px solid #3b82f6 !important; }
.match-card-row:first-child .rank-cell { border-left-color: #eab308 !important; }
.qual-yes .rank-cell { border-left-color: #22c55e !important; }
.qual-no .rank-cell { border-left-color: #ef4444 !important; opacity: 0.6; }
.qual-mid .rank-cell { border-left-color: #3b82f6 !important; }
.qual-grey .rank-cell { border-left-color: #94a3b8 !important; }

a.new, a.new:visited { color: var(--text-main, #202122) !important; text-decoration: none !important; }
a.new:hover { color: var(--text-main, #202122) !important; text-decoration: underline !important; cursor: text; }

/* Theme Toggle Logos */
.logo-darkmode { display: none !important; }
html.skin-theme-client-pref-night .logo-darkmode,
html.skin-citizen-dark .logo-darkmode,
html[class*="night"] .logo-darkmode { display: block !important; }
html.skin-theme-client-pref-night .logo-lightmode,
html.skin-citizen-dark .logo-lightmode,
html[class*="night"] .logo-lightmode { display: none !important; }

.match-card-row { list-style-type: none !important; list-style: none !important; }
.match-card-row::marker { content: none !important; display: none !important; }


/* ==========================================================
   STANDINGS V2 (Floating Card Design)
   ========================================================== */
.standings-wrapper {
    overflow-x: auto; width: 100%; margin-bottom: 20px; padding-bottom: 10px;
}
.standings-card-table {
    width: 100%; border-collapse: separate; border-spacing: 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-width: 1000px;
}
.standings-card-table th {
    background: var(--bg-header); color: var(--text-muted);
    font-size: 0.8em; text-transform: uppercase; padding: 10px;
    font-weight: 700; border: none; text-align: center;
}
.standings-row td {
    background-color: var(--bg-card); color: var(--text-main);
    padding: 0 10px; height: 50px; vertical-align: middle;
    border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
    white-space: nowrap; text-align: center;
}
.standings-row td:first-child {
    border-left: 1px solid var(--border-light);
    border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
.standings-row td:last-child {
    border-right: 1px solid var(--border-light);
    border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}

/* Sticky Columns */
.sticky-col { position: sticky; z-index: 10; background-color: var(--bg-card); }
.standings-card-table th.sticky-col { background-color: var(--bg-header); z-index: 11; }
.sticky-1 { 
    left: 0; width: 50px; min-width: 50px; max-width: 50px; /* Widened by 10px */
    border-right: 1px solid var(--border-light) !important; text-align: center;
    font-size: 0.9em; /* Shrunk text slightly */
}
.sticky-2 { 
    left: 50px; width: 250px; min-width: 250px; max-width: 250px; /* Shifted 10px right */
    text-align: left !important; box-shadow: 2px 0 5px rgba(0,0,0,0.05); 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-3 { 
    left: 300px; width: 60px; /* Base shifted right */
    border-left: 1px solid var(--border-light) !important; 
    box-shadow: 4px 0 5px -2px rgba(0,0,0,0.1); 
    font-weight: 900; font-size: 1.1em; color: #0056b3;
}

/* Qualification Colors */
.standings-row td.qual-q { border-left: 5px solid #28a745 !important; }
.standings-row td.qual-q2 { border-left: 5px solid #007bff !important; }
.standings-row td.qual-q3 { border-left: 5px solid #6f42c1 !important; }
.standings-row td.qual-e { border-left: 5px solid #dc3545 !important; }
.standings-row td.qual-d { border-left: 5px solid #343a40 !important; }
.standings-row td.qual-n { border-left: 5px solid #adb5bd !important; }
.standings-row td.qual-default { border-left: 5px solid var(--border-light) !important; }

/* Cell Specifics */
.team-name-cell {
    display: flex; align-items: center; gap: 10px;
    border: none !important; border-top: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
}
.team-name-cell img { display: block; }
.team-name-cell span { font-weight: 600; font-size: 0.95em; color: var(--text-main); }
.total-points-cell {
    font-weight: 800; font-size: 1em; color: #0056b3; background-color: var(--bg-hover) !important;
}
.match-cell { color: var(--text-muted); text-align: center; padding: 0 6px; background: none !important; }
.match-cell sub { color: #999; margin-left: 2px; font-size: 0.7em; }
.match-win { color: #b45309; font-weight: 900; background: none !important; }
.high-score { background-color: transparent !important; color: #155724; background: none !important; }
.dim-text { color: #e0e0e0; }

.logo-dark { display: none !important; }
.logo-light { display: inline-block !important; }
html.skin-theme-client-pref-night .logo-dark,
html.skin-citizen-dark .logo-dark { display: inline-block !important; }
html.skin-theme-client-pref-night .logo-light,
html.skin-citizen-dark .logo-light { display: none !important; }

/* Mobile Standings */
@media screen and (max-width: 768px) {
    .pc-only { display: none !important; }
    .mobile-only { display: table-cell !important; }
    .standings-card-table { min-width: auto !important; width: max-content; }
    .sticky-1 { 
        left: 0; width: 40px; min-width: 40px; max-width: 40px; /* Widened by 10px */
        border-right: 1px solid var(--border-light) !important; z-index: 10 !important; 
        font-size: 0.85em; /* Shrunk text slightly */
    }
    .sticky-2 { 
        left: 40px; width: 100px; min-width: 100px; max-width: 100px; /* Shifted 10px right */
        text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        box-shadow: 2px 0 5px rgba(0,0,0,0.05); z-index: 10 !important;
    } 
    th.mobile-only, td.mobile-only {
        width: 30px; min-width: 30px; max-width: 30px; padding: 0 2px !important; box-sizing: border-box;
    }
    .sticky-3 { 
        left: 140px; width: 45px; min-width: 45px; max-width: 45px; /* Shifted 10px right */
        border-left: 1px solid var(--border-light) !important; background-color: var(--bg-hover) !important;
        z-index: 10 !important; box-shadow: 4px 0 5px -2px rgba(0,0,0,0.1); 
    }
    .standings-row td { height: 40px; font-size: 0.85em; }
    .team-name-cell img { width: 18px !important; height: auto; }
}

.standings-legend {
    display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; padding: 0 5px; font-family: 'Segoe UI', sans-serif; font-size: 0.9em;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-color { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-text { color: var(--text-muted); font-weight: 600; }
.legend-color.qual-q { background-color: #28a745; }
.legend-color.qual-q2 { background-color: #007bff; }
.legend-color.qual-q3 { background-color: #6f42c1; }
.legend-color.qual-e { background-color: #dc3545; }
.legend-color.qual-d { background-color: #343a40; }
.legend-color.qual-n { background-color: #adb5bd; }

/* ==========================================================
   MATCH SCHEDULE STYLES
   ========================================================== */
.schedule-card {
    background-color: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 8px; margin-bottom: 15px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--text-main);
}
.schedule-header {
    background-color: var(--bg-header); padding: 12px 15px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background 0.2s;
}
.schedule-header:hover { background-color: var(--bg-hover); }
.schedule-title { font-weight: 700; font-size: 1.1em; color: var(--text-header); }
.schedule-date { color: var(--text-muted); font-size: 0.9em; }
.schedule-table {
    width: 100%; border-collapse: collapse; font-size: 0.95em; background-color: var(--bg-card);
}
.schedule-table th {
    text-align: left; padding: 10px 15px; color: var(--text-muted); font-size: 0.85em;
    text-transform: uppercase; border-bottom: 2px solid var(--border-light); background-color: var(--bg-card);
}
.schedule-row td { padding: 12px 15px; border-bottom: 1px solid var(--border-light); color: var(--text-main); }
.schedule-row:last-child td { border-bottom: none; }
.col-match { font-weight: bold; width: 50px; color: var(--text-header); }
.col-time { font-family: monospace; font-weight: 600; width: 100px; color: var(--text-muted); }
.col-winner { color: #22c55e; font-weight: 600; }
.map-badge {
    display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.85em;
    font-weight: 600; color: #fff; background: #666; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.map-erangel { background: #568c2c; }
.map-miramar { background: #d48e4a; }
.map-sanhok, .map-rondo { background: #4a9e85; }
.map-vikendi { background: #5b8db8; }

.schedule-card.schedule-complete { opacity: 0.75; border-color: var(--border-light); }
.schedule-card.schedule-complete .schedule-header { background-color: var(--bg-hover); color: var(--text-muted); }
.status-badge {
    display: inline-block; background-color: #adb5bd; color: #fff; font-size: 0.7em;
    padding: 2px 6px; border-radius: 4px; margin-left: 10px; text-transform: uppercase; font-weight: 600; vertical-align: middle;
}
.schedule-card.schedule-complete:hover { opacity: 1; transition: opacity 0.3s ease; }

/* ==========================================================
   MODERN PRIZE POOL & AWARDS
   ========================================================== */
.prize-section-grid {
    display: grid; grid-template-columns: 2fr 1.2fr; gap: 25px; margin-top: 20px; align-items: start;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.prize-header {
    font-size: 1.1em; font-weight: 700; color: var(--text-header);
    margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px;
    border-left: 4px solid var(--border-thick); padding-left: 10px;
}
.prize-list {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 12px; padding: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.prize-row {
    display: flex; align-items: center; gap: 15px; padding: 12px 10px;
    border-bottom: 1px solid var(--border-light); transition: background 0.2s, transform 0.2s;
    border-radius: 6px; font-size: 0.95em;
}
.prize-row:last-child { border-bottom: none; }
.prize-row:hover { background-color: var(--bg-hover); transform: translateX(4px); }
.pz-rank {
    width: 40px; min-width: 40px; white-space: nowrap; font-weight: 700;
    color: var(--text-muted); text-align: center; font-size: 0.9em;
}
.rank-1 .pz-rank { font-size: 1.2em; }
.rank-2 .pz-rank, .rank-3 .pz-rank { font-size: 1.0em; }
.pz-team {
    flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-main);
}
.pz-team img { height: 24px; width: auto; object-fit: contain; }
.pz-info {
    text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.pz-prize {
    font-family: 'Consolas', 'Monaco', monospace; font-weight: 700;
    color: var(--text-main); background: var(--bg-header); padding: 2px 8px;
    border-radius: 4px; font-size: 0.9em;
}
.pz-seed {
    font-size: 0.75em; background: #007bff; color: #fff; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase; font-weight: 600; display: inline-block;
}

.pz-seed a {
    color: #ffffff !important;
    text-decoration: none;
}
.pz-seed a:hover {
    text-decoration: underline;
    color: #ffffff !important;
}

.award-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 10px; border-bottom: 1px solid var(--border-light);
}
.award-info { display: flex; flex-direction: column; gap: 2px; }
.award-name { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.award-winner { font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
.award-winner img { height: 24px !important; width: auto !important; object-fit: contain; }
.award-prize {
    font-family: 'Consolas', 'Monaco', monospace; font-weight: 700;
    color: var(--text-main); background: var(--bg-header); padding: 2px 8px;
    border-radius: 4px; font-size: 0.9em;
}
.prize-show-more {
    width: 100%; text-align: center; padding: 10px; background: var(--bg-header);
    color: var(--text-muted); font-weight: 600; cursor: pointer; border-radius: 0 0 12px 12px;
    font-size: 0.9em; margin-top: -10px; border: 1px solid var(--border-light);
    border-top: none; transition: background 0.2s; user-select: none;
}
.prize-show-more:hover { background: var(--bg-hover); color: var(--text-main); }
.prize-show-more.mw-collapsed { display: none !important; }
.prize-empty {
    text-align: center; padding: 30px; color: var(--text-muted);
    background: var(--bg-card); border: 2px dashed var(--border-light); border-radius: 12px;
}

@media screen and (max-width: 768px) { .prize-section-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   TOURNAMENT LIST STYLES
   ========================================================== */
   
.tournament-list-wrapper {    display: flex;    flex-direction: column;    gap: 10px; /* Space between cards */    margin-top: 20px;}
.tourney-row {    display: flex; 	align-items: center; 	gap: 15px; 	padding: 12px 15px; 	margin-bottom: 8px;    background: var(--bg-card); 	border: 1px solid var(--border-light);    border-radius: 8px; 	box-shadow: 0 2px 4px rgba(0,0,0,0.02);    transition: transform 0.2s, 	box-shadow 0.2s;	color: var(--text-main) !important;    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
.tourney-row:hover {    transform: translateX(4px); 	box-shadow: 0 4px 8px rgba(0,0,0,0.05);    background: var(--bg-hover); border-color: #cbd5e1;}
.tr-date {    width: 110px; font-size: 0.85em; font-weight: 600; color: var(--text-muted);    font-family: 'Consolas', monospace; text-align: center; background: var(--bg-header);    border-color: var(--border-light) !important; padding: 6px 4px; border-radius: 4px; line-height: 1.2;}
.tr-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tr-name { font-weight: 700; font-size: 1.05em; color: var(--text-main); line-height: 1.2;}
.tr-name a { color: var(--text-main); text-decoration: none; }
.tr-name a:hover { color: #007bff; }
.tr-org {    font-size: 0.75em; color: var(--text-muted); text-transform: uppercase;    letter-spacing: 0.5px; font-weight: 700; margin-top: 2px; }
.tr-winner {    width: 180px; display: flex; align-items: center; gap: 8px; font-weight: 600;    font-size: 0.9em; color: var(--text-main);}
.tr-winner .tr-logo img { height: 24px; width: auto; object-fit: contain; }
.tr-prize { 
    /* Box Model */
    min-width: 120px; 
    padding: 6px 12px;
    border-radius: 6px; 
    margin-left: auto; 
    
    /* Colors & Border */
    background: var(--bg-header) !important;
    border: 1px solid var(--border-light);
    
    /* Typography */
    font-family: 'Consolas', 'Monaco', monospace; 
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-header) !important;
    text-align: center; 
    white-space: nowrap; 
    line-height: 1.2;
}
.tr-compact { padding: 8px 12px; }
.tr-compact .tr-date { width: 90px; font-size: 0.8em; }
.tr-name-row {    display: flex;    align-items: center;    flex-wrap: wrap;    gap: 5px;}
.tier-badge {    font-size: 0.7em !important;    padding: 2px 6px !important;    vertical-align: middle;}
.tr-event-logo-col {    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; margin-right: 15px;}
.tr-event-logo-col img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ==========================================================
   MOBILE RESPONSE: FLAT INFOBOX (FORCE 100% WIDTH)
   ========================================================== */
@media screen and (max-width: 768px) {
    /* Tournament List Tweaks */
    .tourney-row { flex-wrap: wrap; padding: 12px; }
    .tr-winner { display: none; }
    .tr-date { width: 100%; margin-right: 0; margin-bottom: 10px; display: flex; justify-content: center; }
    .tr-prize { margin-top: 5px; width: 100%; min-width: auto; }

    /* FLAT INFOBOX 100% WIDTH FIX */
    .flat-infobox {
        width: 100% !important;
        min-width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   PAGE LAYOUT: TOURNAMENT DASHBOARD
   ========================================================== */

/* 1. Hero Header */
.esports-header {
    background: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
    color: white;
    padding: 30px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 80, 157, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.eh-title {
    font-size: 2em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.eh-subtitle {
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 5px;
    font-weight: 500;
}

/* ==========================================================
   PAGINATION BUTTONS
   ========================================================== */
.pagination-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    clear: both;
}

.page-btn {
    display: inline-block;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.page-btn a {
    display: block;
    padding: 10px 24px;
    color: #334155 !important;
    text-decoration: none !important;
}

.page-btn:hover {
    background: #00509d;
    border-color: #00509d;
    transform: translateY(-2px);
}

.page-btn:hover a {
    color: white !important;
}

/* ==========================================================
   FINAL FIXED HEADER (LEFT PINNED & VERTICALLY CENTERED)
   ========================================================== */

/* THE TEXT (Title & Breadcrumbs) */
.mw-body-header .firstHeading,
#mw-content-subtitle,
.mw-body-header #contentSub,
.mw-body-header .subpages {
    color: var(--hero-text) !important; /* All header text forced to white */

}

/* TITLE SPECIFIC */
.mw-body-header .firstHeading {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

/* BREADCRUMBS BOX (The Tag Look) */
#mw-content-subtitle,
.mw-body-header #contentSub,
.mw-body-header .subpages {
    display: inline-block !important;
    background: var(--hero-link) !important;
    font-size: 0.7rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px !important;
    border-radius: 4px;
    margin-top: 6px !important;
}

/* ALL ICONS & ACTION BUTTONS */
.mw-body-header .citizen-page-actions-list-item a,
.mw-body-header .citizen-page-actions-list-item button,
.mw-body-header .mw-ui-icon,
.mw-body-header .citizen-page-actions-list-item__label {
    color: var(--hero-text) !important;
    fill: var(--hero-text) !important;
    opacity: 1 !important;
}

/* MOBILE FIX */
@media screen and (max-width: 768px) {
    .mw-body-header .firstHeading { font-size: 0.9rem !important; 
    align-items: center !important; 
    align-content: center !important;
text-align:center !important;}
}

/* Alternative: If you want to keep other sub-content but ONLY hide the redirect line */
.mw-redirectedfrom {
    display: none !important;
}

/* ==========================================================
   TEAM PAGE: HERO ROSTER GRID (Independent Styles)
   ========================================================== */

/* The Grid Container */
.hero-roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    margin-top: 15px;
}

/* The Individual Player Card */
.hero-player-card {
    width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-player-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    border-color: var(--hero-border);
}

/* Card Image Area (Top) */
/* 1. The Square Box */
.hero-card-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: linear-gradient(to bottom, var(--bg-header) 0%, var(--bg-card) 100%);
    overflow: hidden;
    position: relative;
    /* Remove flex alignment, we will handle it in the img tag */
    display: block !important; 
    padding: 10px !important; 
    box-sizing: border-box !important;
}

/* 2. The Image (Forced to be a Square Block) */
.hero-card-image img {
    /* Step 1: Force the <img> tag to be the exact size of the box */
    width: 100% !important;
    height: 100% !important;
    
    /* Step 2: Use internal rendering to scale the pixels */
    object-fit: contain !important;  /* Shrink photo until fully visible */
    
    /* Step 3: Align the pixels to the bottom */
    object-position: bottom center !important; 
    
    /* Reset other properties */
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.hero-player-card:hover .hero-card-image img {
    transform: scale(1.05);
}

/* Card Info Area (Bottom) */
.hero-card-body {
    padding: 12px 10px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Role Badge */
.hero-role-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Player ID */
.hero-player-id {
    font-weight: 800;
    font-size: 1.15em;
    color: var(--text-header);
    line-height: 1.1;
    margin-bottom: 4px;
}

.hero-player-id a {
    color: inherit;
    text-decoration: none;
}

/* Real Name */
.hero-player-name {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.2;
}

/* Flag */
.hero-player-flag {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85em;
    color: var(--text-muted);
}

.hero-player-flag img {
    width: 18px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    border: none !important;
    margin-right: 4px !important;
}

/* MOBILE: 2 Cards per row */
@media screen and (max-width: 768px) {
    .hero-player-card {
        width: calc(50% - 8px); 
    }
}


/* ==========================================================
   MODERN FLAT DATA TABLE (For Former Players/History)
   ========================================================== */

.flat-data-table {
    /* CHANGED: width: 100% -> width: auto */
    width: auto !important; 
    
    /* ADDED: Ensures it fills the space next to infobox without dropping */
    min-width: 50%; 
    display: table;
    
    border-collapse: separate; 
    border-spacing: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px; 
    
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-top: 15px;
    margin-bottom: 20px; /* Add breathing room at bottom */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ensure it doesn't touch the text */
.flat-data-table + .flat-data-table {
    margin-top: 20px;
}

/* Header Row */
.flat-data-table th {
    background-color: var(--bg-header) !important; /* Light gray header */
    color: var(--text-muted) !important;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 15px 20px;
    border-bottom: 2px solid var(--border-light);
    text-align: left;
}

/* Data Rows */
.flat-data-table td {
    padding: 15px 20px; /* Spacious padding */
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    font-size: 0.95em;
    vertical-align: middle;
    transition: background 0.2s;
}

/* Row Hover Effect */
.flat-data-table tr:hover td {
    background-color: var(--bg-hover);
}

/* Remove border from last row */
.flat-data-table tr:last-child td {
    border-bottom: none;
}

/* Typography Specifics */
.flat-data-table .t-id {
    font-weight: 700;
    color: var(--text-header);
    font-size: 1.05em;
}

.flat-data-table .t-role {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-header);
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: 600;
    border: 1px solid var(--border-light);
}

.flat-data-table .t-date {
    font-family: 'Consolas', monospace;
    color: var(--text-muted);
    font-size: 0.9em;
}

/* Mobile: Horizontal Scroll if needed */
@media screen and (max-width: 768px) {
    .flat-data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================
   ACHIEVEMENTS TABLE (Trophy Case)
   ========================================================== */
.achievements-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.achievements-table th {
    background-color: var(--bg-header);
    color: var(--text-muted);
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid var(--border-light);
}

.achievements-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    font-size: 0.95em;
    vertical-align: middle;
}
.achievements-table tr:hover td { background-color: var(--bg-hover); }

/* RANK BADGES */
.ac-place { width: 60px; text-align: center; }
.place-badge {
    display: inline-block; padding: 4px 0; width: 40px; text-align: center;
    border-radius: 4px; color: #fff; font-weight: 800; font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.place-1 { background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%); color: #785c00; border: 1px solid #eec900; }
.place-2 { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); color: #555; border: 1px solid #ccc; }
.place-3 { background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%); color: #fff; border: 1px solid #b36b29; }
.place-def { background: var(--bg-header); color: var(--text-muted); border: 1px solid var(--border-light); }

/* PRIZE MONEY */
.ac-prize {
    font-family: 'Consolas', monospace;
    font-weight: 700;
    color: #059669; /* Money Green */
    text-align: right;
}

/* ==========================================================
   ACHIEVEMENTS TABLE UPDATES & TIER BADGES
   ========================================================== */

/* Date Column */
.ac-date {
    font-family: 'Consolas', monospace;
    color: var(--text-muted);
    font-size: 0.85em;
    white-space: nowrap;
}


/* ==========================================================
   MASTER TIER COLOR SYSTEM (Unified & Forced)
   ========================================================== */

:root {
    /* 1. DEFINE YOUR COLORS HERE */
    /* Change these hex codes to whatever you want, and it will update EVERYWHERE */
    --tier-s-color: #d32f2f; /* Red */
    --tier-a-color: #00509d; /* Blue */
    --tier-b-color: #0d9488; /* Teal */
    --tier-c-color: #64748b; /* Gray */
    --tier-d-color: #475569; /* Slate */
}

/* 2. TEAM PAGE BADGES (Backgrounds) */
.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    min-width: 40px;
    background-color: var(--tier-d-color) !important; /* Default fallback */
    color: #fff !important;
}

/* We use specific chaining (.tier-badge.tier-x) to be "stronger" than other styles */
.tier-badge.tier-s { background-color: var(--tier-s-color) !important; }
.tier-badge.tier-a { background-color: var(--tier-a-color) !important; }
.tier-badge.tier-b { background-color: var(--tier-b-color) !important; }
.tier-badge.tier-c { background-color: var(--tier-c-color) !important; }
.tier-badge.tier-def { background-color: var(--tier-d-color) !important; }

/* 3. TOURNAMENT PAGE STRIPS (Left Borders) */
.tourney-row {
    border-left: 5px solid var(--border-light); /* Default fallback */
}

.row-tier-s { border-left-color: var(--tier-s-color) !important; }
.row-tier-a { border-left-color: var(--tier-a-color) !important; }
.row-tier-b { border-left-color: var(--tier-b-color) !important; }
.row-tier-c { border-left-color: var(--tier-c-color) !important; }

/* ==========================================================
   DATABASE LISTS (Players & Teams)
   ========================================================== */

.db-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.db-row {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.db-row:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    background: var(--bg-hover);
    border-color: #cbd5e1;
}

/* Columns */
.db-img {
    width: 60px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
.db-img img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.db-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.db-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}
.db-title a { color: inherit; text-decoration: none; }

.db-subtitle {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 2px;
}

.db-meta {
    margin-right: 20px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Badges */
.role-badge, .status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

/* Role Colors (Matches Module:Team) */
.role-igl     { background-color: #eab308; } /* Gold */
.role-entry   { background-color: #f97316; } /* Orange */
.role-assault { background-color: #3b82f6; } /* Blue */
.role-frag    { background-color: #3b82f6; } /* Blue (Variant) */
.role-support { background-color: #22c55e; } /* Green */
.role-scout   { background-color: #14b8a6; } /* Teal */
.role-filter  { background-color: #14b8a6; } /* Teal (New) */
.role-snip    { background-color: #ef4444; } /* Red */
.role-coach   { background-color: #a855f7; } /* Purple */
.role-manager { background-color: #1f2937; } /* Black */
.role-def     { background-color: #64748b; } /* Grey (Default) */

/* Status Colors */
.status-active   { background-color: #16a34a; } /* Green */
.status-inactive { background-color: #dc2626; } /* Red */

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .db-row { flex-wrap: wrap; }
    .db-meta { width: 100%; margin: 10px 0 0 75px; justify-content: flex-start; }
    .db-status { margin-left: 75px; margin-top: 5px; }
}




/* ==========================================================
   FORMAT MODULE STYLES (Closed Timeline & Collapsible)
   ========================================================== */

/* 1. VERTICAL TIMELINE */
.fmt-timeline {
    /* FIX 1: Creates a safe block context (stops Infobox overlap) WITHOUT clipping dots */
    display: flow-root; 
    margin: 20px 0;
}

.fmt-node {
    position: relative;
    margin-bottom: 20px;
    /* FIX 2: Create space inside the node for the dot/line */
    padding-left: 30px; 
}

/* THE LINE (Connects the dots) */
.fmt-node::before {
    content: '';
    position: absolute;
    /* FIX 3: Position relative to the new padding */
    left: 4px; /* Centers with the 10px marker (0 + 5px center - 1px width) */
    top: 0;
    bottom: -20px;
    width: 2px;
    background: var(--border-light);
    z-index: 0;
}

/* FIRST NODE: Start line at the dot's center */
.fmt-node:first-child::before {
    top: 20px; 
    /* bottom: -20px is inherited, so it connects downwards correctly */
}

/* LAST NODE: Stop line at the dot's center */
.fmt-node:last-child::before {
    top: 0;        /* Connects from the previous node */
    bottom: auto;  /* Do not extend downwards */
    height: 20px;  /* Stop exactly at the dot center */
}

/* THE DOT (Marker) */
.fmt-marker {
    position: absolute;
    left: 0; /* Sits comfortably in the padding area */
    top: 15px;
    width: 10px;
    height: 10px;
    background: #ff4d4d;
    border: 3px solid var(--bg-card);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-light);
    z-index: 1;
}

/* CONTENT BOX */
.fmt-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    overflow: hidden;
    position: relative; 
    z-index: 2;
}

/* HEADER (Clickable) */
.fmt-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    background: var(--bg-card);
}

.fmt-header-row:hover {
    background: var(--bg-hover);
}

.fmt-title-wrap {
    display: flex;
    flex-direction: column;
}

.fmt-stage-title {
    font-weight: 700;
    color: var(--text-header);
    font-size: 1.1em;
}

.fmt-meta-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fmt-date {
    color: var(--text-muted);
    font-size: 0.85em;
    font-family: 'Consolas', monospace;
    background: var(--bg-header);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

.fmt-toggle-icon {
    color: var(--text-muted);
    font-size: 0.8em;
    transition: transform 0.2s;
}

/* Rotate icon when active */
.mw-collapsed .fmt-toggle-icon {
    transform: rotate(-90deg);
}

/* DESCRIPTION (Hidden by default) */
.fmt-desc {
    padding: 0 15px 15px 15px;
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-main);
    border-top: 1px solid var(--border-light);
    margin-top: 0;
}

.fmt-desc.mw-collapsed {
    padding: 0;
    border-top: none;
}

/* Multi-Level Bullets */
.fmt-desc ul { margin: 5px 0 5px 20px; padding: 0; list-style-type: disc; }
.fmt-desc ul ul { margin-top: 4px; margin-bottom: 4px; margin-left: 20px; list-style-type: circle; }
.fmt-desc li { margin-bottom: 4px; }


/* 2. POINTS DISTRIBUTION (Compact Vertical) */
.fmt-points-container {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px;
    margin: 15px 0;
    overflow: hidden;
    max-width: 500px; /* Prevents stretching */
}

.fmt-points-header {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    font-size: 0.8em;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.5px;
}

.fmt-points-columns { display: flex; gap: 10px; }
.fmt-points-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.fmt-pt-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-header); padding: 5px 10px;
    border-radius: 4px; border: 1px solid var(--border-light);
}

.fmt-pt-rank-v { font-size: 0.85em; color: var(--text-muted); font-weight: 600; }
.fmt-pt-val-v { font-size: 1em; font-weight: 800; color: var(--text-main); }

/* TOP 3 HIGHLIGHTING (Light Mode) */
.row-top3 { background: #fffbeb; border-color: #fcd34d; }
.row-top3 .fmt-pt-val-v { color: #d97706; }

/* DARK MODE FIXES */
html.skin-theme-client-pref-night .row-top3,
html.skin-citizen-dark .row-top3,
html[class*="night"] .row-top3 {
    background: rgba(234, 179, 8, 0.15) !important; 
    border-color: #a16207 !important; 
}
html.skin-theme-client-pref-night .row-top3 .fmt-pt-val-v,
html.skin-citizen-dark .row-top3 .fmt-pt-val-v,
html[class*="night"] .row-top3 .fmt-pt-val-v {
    color: #facc15 !important; 
}

.row-zero { opacity: 0.7; }

.fmt-kill-box {
    margin-top: 10px; text-align: center; font-size: 0.85em;
    color: var(--text-main); background: var(--bg-hover);
    padding: 4px 10px; border-radius: 4px; border: 1px dashed var(--border-light);
}

@media screen and (max-width: 600px) {
    .fmt-points-container { max-width: 100%; }
    .fmt-points-columns { flex-direction: column; }
    .fmt-header-row { flex-wrap: wrap; }
    .fmt-meta-wrap { margin-left: auto; }
}

/* 3. MAP SCHEDULE */
.fmt-maps-container {
    margin: 15px 0;
}
.fmt-maps-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.fmt-map-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Map Colors */
.map-erangel { background-color: #568c2c; }
.map-miramar { background-color: #d48e4a; }
.map-sanhok  { background-color: #4a9e85; }
.map-vikendi { background-color: #5b8db8; }
.map-rondo   { background-color: #00d26a; } /* Vibrant Green for Rondo */
.map-tbd     { background-color: #64748b; }

/* ==========================================================
   TALENT MODULE (Horizontal Text Only)
   ========================================================== */

.talent-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between different rows (e.g. Hosts vs Casters) */
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.talent-row {
    display: flex;
    align-items: center; /* Vertically align text center */
    gap: 15px; /* Gap between Header and Pills */
}

.talent-header {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* FIX: Keeps alignment neat. Adjust width if your role names are long */
    min-width: 140px; 
    text-align: right; /* Looks cleaner pointing to the pills */
    flex-shrink: 0;    /* Prevents header from shrinking */
}

.talent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Space between individual pills */
}

/* THE PILL */
.talent-pill {
    background: var(--bg-header);
    border: 1px solid var(--border-light);
    border-radius: 4px; /* Soft rectangle */
    padding: 4px 12px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.2s;
}

.talent-pill a {
    color: var(--text-main);
    text-decoration: none;
}

.talent-pill:hover {
    border-color: var(--text-link);
    background: var(--bg-hover);
    color: var(--text-link);
    transform: translateY(-1px);
}

.talent-pill:hover a {
    color: var(--text-link);
}

/* MOBILE RESPONSIVENESS */
@media screen and (max-width: 600px) {
    .talent-row {
        flex-direction: column; /* Stack them */
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 10px;
        border-bottom: 1px dashed var(--border-light);
        padding-bottom: 10px;
    }
    .talent-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    .talent-header {
        text-align: left;
        min-width: auto;
    }
}



/* ==========================================================
   CITIZEN SKIN: FORCE FULL WIDTH
   ========================================================== */

/* 1. Force the layout variable to always be 100% (Full) */
:root {
    --citizen-page-width: 100% !important;
    --citizen-max-page-width: 100% !important;
    --width-layout: 100% !important;
}

/* 2. Hide "Standard" and "Wide" buttons in the Preference Drawer */
/* This targets the 'Width' section and hides the first two options */
.citizen-drawer__section:has(> .citizen-drawer__header:contains("Width")) .citizen-chip:nth-child(1),
.citizen-drawer__section:has(> .citizen-drawer__header:contains("Width")) .citizen-chip:nth-child(2) {
    display: none !important;
}

/* FALLBACK: If :has() isn't supported by some browsers, target by value attributes if possible */
/* Usually Citizen inputs use values 0 (Standard), 1 (Wide), 2 (Full) */
.citizen-drawer input[value="0"] + label,
.citizen-drawer input[value="1"] + label,
.citizen-drawer input[value="standard"] + label,
.citizen-drawer input[value="wide"] + label {
    display: none !important;
}

/* ==========================================================
   INTERACTIVE CALENDAR MODULE (Modern & Responsive)
   ========================================================== */
.esports-calendar-container {
    display: flex;
    gap: 30px;
    margin: 20px 0; /* CHANGED: 'auto' to '0' to align left */
    max-width: 900px; /* Slightly wider to fill the space nicely */
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 20px -4px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.calendar-left {
    flex: 1;
    min-width: 300px;
    max-width: 400px; /* Keeps the grid tight */
}

.calendar-right {
    flex: 1;
    min-width: 300px;
    background: var(--bg-page);
    border-left: 2px solid var(--border-light); /* Sleek divider instead of full box */
    padding-left: 25px;
    max-height: 450px;
    overflow-y: auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cal-month-year {
    font-weight: 800;
    font-size: 1.1em;
    color: var(--text-header);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fix 5: Visible, stylized buttons */
.cal-prev, .cal-next {
    background: var(--bg-header);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
.cal-prev:hover, .cal-next:hover {
    background: var(--text-main);
    color: var(--bg-page);
}

.calendar-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    font-size: 0.75em;
    color: var(--text-muted);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.calendar-grid-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    color: var(--text-main);
    cursor: default;
    border: 2px solid transparent;
    position: relative;
    
    /* CRITICAL FIXES FOR OVERFLOW: */
    min-width: 0; 
    overflow: hidden; 
    box-sizing: border-box;
}

.cal-day.empty { background: transparent; border: none; }

/* Dark Mode Safe Event Days */
.cal-day.has-events {
    background: var(--bg-header);
    border: 2px solid var(--border-light);
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.2s;
}

.cal-day.has-events:hover {
    border-color: #00509d;
    transform: translateY(-2px);
}

.cal-day.active {
    background: #00509d !important;
    color: white !important;
    border-color: #00509d !important;
    box-shadow: 0 4px 10px rgba(0, 80, 157, 0.4);
}

/* Stage name under the date */
.cal-day-stage {
    font-size: 0.55em;
    line-height: 1.2;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Fill the container safely */
    padding: 0 4px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 2px;
}
.cal-day.active .cal-day-stage { opacity: 1; color: #e2e8f0; }

/* Details Panel Typography */
.cal-stage-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #ff4d4d; /* Red accent */
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.cal-stage-header-wrap:first-child { margin-top: 0; }

.cal-stage-header {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--text-header);
    margin: 0;
}

.cal-stream-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cal-stream-btn {
    background: #ef4444; /* YouTube Red */
    color: white !important;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
    line-height: 1;
}
.cal-stream-btn:hover { 
    background: #dc2626; 
    transform: translateY(-1px); 
}

.cal-match-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9em;
}
.cal-match-row:last-child { border-bottom: none; }

.cal-m-time {
    font-family: 'Consolas', monospace;
    font-weight: 700;
    color: var(--text-muted);
    width: 85px; /* Wide enough to fit "10:30 AM" */
    flex-shrink: 0;
}

.cal-m-info { flex: 1; }
.cal-m-teams { font-weight: 700; color: var(--text-main); font-size: 1.05em; }

/* Dark Mode safe maps */
.cal-m-map { color: var(--text-main); font-weight: 700; font-size: 1.05em; }

.cal-m-group { 
    font-size: 0.8em; 
    color: var(--text-muted); 
    background: var(--bg-header); 
    padding: 3px 8px; 
    border-radius: 4px; 
    margin-left: 8px;
    font-weight: 600;
}


/* Mobile View: Ensure the left column can shrink perfectly */
@media screen and (max-width: 768px) {
    .esports-calendar-container { flex-direction: column; padding: 15px; gap: 15px;}
    .calendar-right { border-left: none; border-top: 2px solid var(--border-light); padding-left: 0; padding-top: 15px; }
    .calendar-left { max-width: 100%; min-width: 0; } /* Let it shrink on small phones */
}

/* ==========================================================
   PC STICKY COLUMNS EXTENSION (GRP, M, WWCD, PLACE, ELIMS, PTS)
   ========================================================== */
@media screen and (min-width: 769px) {
    /* 1. Make the new PC columns sticky */
    .pc-sticky-1, .pc-sticky-2, .pc-sticky-3, .pc-sticky-4, .grp-sticky {
        position: sticky;
        z-index: 10;
        background-color: var(--bg-card);
    }
    
    /* 2. Give headers higher z-index and background so scrolling text hides under them */
    .standings-card-table th.pc-sticky-1,
    .standings-card-table th.pc-sticky-2,
    .standings-card-table th.pc-sticky-3,
    .standings-card-table th.pc-sticky-4,
    .standings-card-table th.grp-sticky {
        background-color: var(--bg-header);
        z-index: 11;
    }

    /* 3. DEFAULT OFFSETS (NO GROUP COLUMN) */
    /* TEAM column now ends at 300px (50px + 250px) */
    .pc-sticky-1 { left: 300px; width: 40px; min-width: 40px; text-align: center; } /* M */
    .pc-sticky-2 { left: 340px; width: 60px; min-width: 60px; text-align: center; } /* WWCD */
    .pc-sticky-3 { left: 400px; width: 60px; min-width: 60px; text-align: center; } /* PLACE */
    .pc-sticky-4 { left: 460px; width: 60px; min-width: 60px; text-align: center; } /* ELIMS */
    .standings-card-table:not(.has-group-col) .sticky-3 { left: 520px !important; } /* PTS */

    /* 4. OVERRIDE OFFSETS (WITH GROUP COLUMN) */
    /* GRP gets 50px width, so we shift everything else +50px */
    .grp-sticky { left: 300px; width: 50px; min-width: 50px; text-align: center; }
    .has-group-col .pc-sticky-1 { left: 350px; }
    .has-group-col .pc-sticky-2 { left: 390px; }
    .has-group-col .pc-sticky-3 { left: 450px; }
    .has-group-col .pc-sticky-4 { left: 510px; }
    .has-group-col .sticky-3 { left: 570px !important; }

    /* 5. Edge formatting */
    .sticky-2 { box-shadow: none !important; } /* Remove shadow from TEAM */
    .sticky-3 { 
        box-shadow: 4px 0 5px -2px rgba(0,0,0,0.1) !important; /* Add shadow to PTS */
        border-right: 1px solid var(--border-light); 
    }
}

/* ==========================================================
   MODERN GROUP DRAW
   ========================================================== */
.modern-group-draw {
    display: inline-block !important; 
    max-width: 100%; 
    overflow-x: auto;
    margin: 15px 0;
    border-radius: 8px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
    border: 1px solid var(--border-light);
    background-color: var(--bg-card);
}

table.sharp-table {
    border-collapse: collapse !important;
    width: auto !important; 
    table-layout: fixed !important; 
    margin: 0 !important;
    background-color: transparent;
    border: none; 
}

table.sharp-table .distinct-main-header {
    background-color: var(--bg-table-header) !important;
    color: var(--text-table-header) !important;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.95em; 
    font-weight: 800;
    padding: 12px; /* Increased */
    border-bottom: 2px solid var(--border-thick);
    letter-spacing: 0.5px;
}

table.sharp-table .distinct-group-header {
    background-color: #dbeafe; 
    color: var(--text-header); 
    text-align: center;
    font-weight: 700;
    padding: 10px 12px; /* Increased */
    border-bottom: 2px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    text-transform: uppercase;
    font-size: 0.8em; /* Slight bump for readability */
    width: 200px !important; 
}

html.skin-theme-client-pref-night table.sharp-table .distinct-group-header,
html.skin-citizen-dark table.sharp-table .distinct-group-header,
html[class*="night"] table.sharp-table .distinct-group-header {
    background-color: #1e293b; 
    color: #e2e8f0;
}

table.sharp-table .distinct-group-header:last-child {
    border-right: none;
}

table.sharp-table td {
    padding: 6px 12px !important; /* Increased padding */
    line-height: 1.2 !important; 
    height: 45px !important; /* 1.5x height (was 30px) */
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    vertical-align: middle;
    background-color: var(--bg-card);
    color: var(--text-main);
    font-size: 0.85em; /* Slight text bump to match new height */
    transition: background 0.2s;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

table.sharp-table td:last-child {
    border-right: none;
}
table.sharp-table tr:last-child td {
    border-bottom: none;
}
table.sharp-table tr:hover td {
    background-color: var(--bg-hover);
}

.team-cell-flex {
    display: flex;
    align-items: center;
    gap: 10px; /* Slight bump for breathing room */
    font-weight: 600;
}

img.team-logo {
    width: 22px !important; /* Bumped from 18px to look balanced in a 45px row */
    height: auto !important;
    display: block;
}

.team-cell-flex a {
    color: var(--text-main);
    text-decoration: none;
}
.team-cell-flex a:hover {
    color: #007bff;
}

/* Kills invisible MediaWiki paragraph margins inside the table */
table.sharp-table th *,
table.sharp-table td * {
    margin: 0 !important;
}

/* ==========================================================
   MOBILE: MODERN GROUP DRAW
   ========================================================== */
@media screen and (max-width: 768px) {
    .modern-group-draw {
        -webkit-overflow-scrolling: touch;
        margin: 10px 0;
        display: block !important; 
    }

    table.sharp-table .distinct-group-header {
        width: 140px !important; 
        padding: 8px 10px !important;
    }

    table.sharp-table td {
        padding: 4px 8px !important;
        height: 36px !important; /* 1.5x height for mobile (was 24px) */
        font-size: 0.8em !important;
    }
    
    img.team-logo {
        width: 16px !important; /* Bumped from 14px */
    }
}

/* Kills invisible MediaWiki paragraph/div margins inside the table */
table.sharp-table th *,
table.sharp-table td * {
    margin: 0 !important;
}

.standings-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; font-size: 0.9em; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-color { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legend-text { color: var(--text-muted); font-weight: 600; }
.legend-color.qual-q  { background-color: #28a745; }
.legend-color.qual-q2 { background-color: #007bff; }
.legend-color.qual-q3 { background-color: #6f42c1; }
.legend-color.qual-e  { background-color: #dc3545; }
.legend-color.qual-d  { background-color: #343a40; }
.legend-color.qual-n  { background-color: #adb5bd; }



/* ── MAIN TABS: Segmented Control ── */
.espa-tabs-wrapper { position: relative; }

.espa-tabs {
    display: flex;
    background: var(--bg-header);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    width: 100%;
}
.espa-tab {
    flex: 1; display: flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 12px;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    border-radius: 7px;
    text-decoration: none !important;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}
.espa-tab a { color: inherit; text-decoration: none !important; }
.espa-tab:hover:not(.active) {
    color: var(--text-main);
    background: var(--bg-hover);
}
.espa-tab.active {
    color: #fff;
    background: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.25);
}

/* ── MOBILE DROPDOWN ── */
.espa-tabs-mobile { display: none; position: relative; }

.espa-dropdown-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 42px; padding: 0 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.2s;
}
.espa-dropdown-trigger:hover,
.espa-dropdown-trigger.open { border-color: #007bff; }
.espa-dropdown-trigger.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.espa-trigger-left { display: flex; align-items: center; gap: 8px; }
.espa-active-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #007bff; flex-shrink: 0;
}
.espa-chevron {
    font-size: 11px; color: var(--text-muted);
    transition: transform 0.25s ease;
}
.espa-dropdown-trigger.open .espa-chevron { transform: rotate(180deg); }

.espa-dropdown-menu {
    display: none; position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid #007bff; border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden; z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.espa-dropdown-menu.open { display: block; }
.espa-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    font-size: 14px; font-weight: 500;
    color: var(--text-main);
    text-decoration: none !important;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}
.espa-dropdown-item a { color: inherit; text-decoration: none !important; }
.espa-dropdown-item:last-child { border-bottom: none; }
.espa-dropdown-item:hover { background: var(--bg-hover); }
.espa-dropdown-item.active {
    color: #007bff; font-weight: 700;
    background: rgba(0,123,255,0.08);
}
.espa-item-check {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--border-main);
    flex-shrink: 0; display: flex;
    align-items: center; justify-content: center;
    font-size: 9px;
}
.espa-dropdown-item.active .espa-item-check {
    background: #007bff; border-color: #007bff; color: #fff;
}

/* ── SUB TABS: Scrollable pills ── */
.espa-subtabs {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
}
.espa-subtabs::-webkit-scrollbar { display: none; }
.espa-subpill {
    flex-shrink: 0; display: flex;
    align-items: center; justify-content: center;
    height: 30px; padding: 0 14px; border-radius: 50px;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
}
.espa-subpill a { color: inherit; text-decoration: none !important; }
.espa-subpill:hover:not(.active) {
    border-color: #007bff; color: #007bff;
}
.espa-subpill.active {
    background: #007bff; color: #fff;
    border-color: #007bff;
    box-shadow: 0 2px 6px rgba(0,123,255,0.25);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .espa-tabs { display: none; }
    .espa-tabs-mobile { display: block; }
}



/* ═══════════════════════════════════════════════════════
   PLAYER DASHBOARD v2.1 — 6 fixes
   ═══════════════════════════════════════════════════════ */

.pd-dashboard {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-light);
  font-family: inherit; margin-bottom: 20px;
  /* CSS variables — light mode defaults */
  --pd-card:        var(--bg-card);
  --pd-page:        var(--bg-page);
  --pd-border:      var(--border-light);
  --pd-text:        var(--text-main);
  --pd-muted:       var(--text-muted);
  --pd-link:        #0056cc;       /* light mode links */
  --pd-header-bg:   var(--bg-header);
  --pd-left-width:  300px;         /* FIX 2: wider left bar */
}

/* ── FIX 1 + 6: Dark mode — white links + all badge/prize overrides ── */
html.skin-citizen-dark .pd-dashboard,
html.skin-theme-client-pref-night .pd-dashboard,
html[class*="night"] .pd-dashboard {
  --pd-link: #e2e8f0;              /* white-ish links, easy to read */
}
html.skin-citizen-dark .place-1,
html.skin-theme-client-pref-night .place-1 { background: rgba(251,191,36,.15); color: #fbbf24; }
html.skin-citizen-dark .place-2,
html.skin-theme-client-pref-night .place-2 { background: rgba(148,163,184,.1);  color: #94a3b8; }
html.skin-citizen-dark .place-3,
html.skin-theme-client-pref-night .place-3 { background: rgba(217,119,6,.12);   color: #d97706; }
html.skin-citizen-dark .pd-prize-val,
html.skin-theme-client-pref-night .pd-prize-val { color: #4ade80; }
html.skin-citizen-dark .pd-result-q,
html.skin-theme-client-pref-night .pd-result-q { background: rgba(34,197,94,.15);  color: #4ade80; }
html.skin-citizen-dark .pd-result-e,
html.skin-theme-client-pref-night .pd-result-e { background: rgba(239,68,68,.15);  color: #f87171; }
html.skin-citizen-dark .pd-award-badge,
html.skin-theme-client-pref-night .pd-award-badge { background: rgba(139,92,246,.2); color: #a78bfa; }

/* ══ HERO ══ */
.pd-hero {
  display: flex;
  align-items: center;           /* FIX 5: vertically center all hero items */
  gap: 24px;
  padding: 28px 36px;
  background: linear-gradient(135deg, #1a2744 0%, #0f1f3d 100%);
  position: relative; overflow: hidden; flex-wrap: wrap;
}
.pd-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0,123,255,.12) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,.08) 0%, transparent 50%);
}
.pd-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}

/* FIX 5: Photo — circular, vertically centered with name */
.pd-hero-photo {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; color: #fff;
  flex-shrink: 0; position: relative; z-index: 1;
  border: 3px solid rgba(255,255,255,.2);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-family: 'Barlow Condensed', sans-serif;
  align-self: center;            /* ensure vertical center */
}
.pd-hero-photo img,
.pd-hero-photo .pd-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

.pd-hero-info {
  flex: 1; position: relative; z-index: 1; min-width: 160px;
  align-self: center;            /* FIX 5 */
}
.pd-hero-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px; font-weight: 900; color: #fff;
  letter-spacing: .02em; line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pd-hero-realname { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 5px; font-weight: 500; }
.pd-hero-tags { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.pd-tag { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pd-tag-role { background: rgba(99,102,241,.25); color: #a5b4fc; border: 1px solid rgba(99,102,241,.4); }
.pd-tag-game { background: rgba(16,185,129,.2);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); }

.pd-rank-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 8px; margin-top: 11px;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
}
.pd-rank-chip span { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .07em; }
.pd-rank-chip b    { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; color: #fbbf24; }

.pd-hero-right {
  position: relative; z-index: 1;
  text-align: right; margin-left: auto;
  align-self: center;            /* FIX 5 */
}
.pd-earnings-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 3px; }
.pd-earnings-val   { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.pd-earnings-breakdown { display: flex; gap: 18px; margin-top: 7px; justify-content: flex-end; }
.pd-earn-sub-label { font-size: 10px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; }
.pd-earn-sub-val   { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6); margin-top: 2px; }

/* ══ BODY ══ */
.pd-body { display: grid; grid-template-columns: var(--pd-left-width) 1fr; } /* FIX 2 */

/* ══ LEFT ══ */
.pd-left { padding: 20px 18px; border-right: 1px solid var(--pd-border); background: var(--pd-card); }
.pd-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pd-muted); margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--pd-border);
}
.pd-section-gap { margin-top: 20px; }
.pd-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--pd-border);
  font-size: 13px; gap: 8px;
}
.pd-info-row:last-of-type { border-bottom: none; }
.pd-info-label { color: var(--pd-muted); font-weight: 500; flex-shrink: 0; }
.pd-info-val   { color: var(--pd-text);  font-weight: 600; text-align: right; }

/* FIX 1: Links — light uses blue, dark uses near-white */
.pd-info-val a,
.pd-info-val a:visited,
.pd-team-name a,
.pd-team-name a:visited,
.pd-tourn-table a,
.pd-tourn-table a:visited { color: var(--pd-link); text-decoration: none; font-weight: 600; }

/* Current team */
.pd-current-team { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pd-current-team-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.pd-current-team-name { font-weight: 700; color: var(--pd-link); }

/* FIX 3: Social icons bigger */
.pd-socials { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pd-socials img,
.pd-socials .social-img { width: 32px !important; height: 32px !important; }

/* Team history */
.pd-team-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-bottom: 1px solid var(--pd-border);
}
.pd-team-row:last-child { border-bottom: none; }

/* FIX 4: Team logo light/dark switching */
.pd-team-logo-light { display: inline-block; }
.pd-team-logo-dark  { display: none; }
html.skin-citizen-dark .pd-team-logo-light,
html.skin-theme-client-pref-night .pd-team-logo-light { display: none; }
html.skin-citizen-dark .pd-team-logo-dark,
html.skin-theme-client-pref-night .pd-team-logo-dark  { display: inline-block; }

.pd-team-logo-img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.pd-team-logo-fb  {
  width: 24px; height: 24px; border-radius: 4px;
  background: var(--pd-header-bg); display: flex; align-items: center;
  justify-content: center; font-size: 8px; font-weight: 800;
  color: var(--pd-muted); flex-shrink: 0;
}
.pd-team-name  { font-size: 13px; font-weight: 600; color: var(--pd-text); flex: 1; }
.pd-team-dates { font-size: 11px; color: var(--pd-muted); white-space: nowrap; }

/* ══ RIGHT ══ */
.pd-right { padding: 20px 22px; background: var(--pd-page); }
.pd-prize-section { margin-bottom: 22px; }
.pd-table-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pd-text); margin-bottom: 9px;
  padding-left: 9px; border-left: 3px solid #007bff;
}
.pd-tourn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-tourn-table th {
  background: var(--pd-card); padding: 8px 10px; text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pd-muted); border-bottom: 2px solid var(--pd-border);
}
.pd-tourn-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--pd-border);
  color: var(--pd-text); background: var(--pd-card); vertical-align: middle;
}
.pd-tourn-table tr:last-child td { border-bottom: none; }
.pd-tourn-table tr:hover td { filter: brightness(.97); }

.pd-place-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  font-weight: 800; font-size: 13px;
  font-family: 'Barlow Condensed', sans-serif;
}
.place-1     { background: #fef3c7; color: #b45309; }
.place-2     { background: #f1f5f9; color: #475569; }
.place-3     { background: #fdf6ee; color: #92400e; }
.place-other { background: var(--pd-header-bg); color: var(--pd-muted); }

.pd-result-q    { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #dcfce7; color: #15803d; }
.pd-result-e    { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #fef2f2; color: #dc2626; }
.pd-prize-val   { font-weight: 700; color: #15803d; }
.pd-award-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #ede9fe; color: #6d28d9; }
.pd-date-cell   { font-size: 12px; color: var(--pd-muted); white-space: nowrap; }
.pd-empty       { font-style: italic; color: var(--pd-muted); padding: 10px 0; font-size: 13px; }

.pd-stats-placeholder {
  margin-top: 4px; padding: 16px;
  background: var(--pd-card); border-radius: 9px;
  border: 2px dashed var(--pd-border);
  text-align: center; color: var(--pd-muted); font-size: 13px;
}
.pd-stats-placeholder b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--pd-text); }

/* ── Teammates ── */
.pd-teammate-name { font-size: 13px; font-weight: 600; color: var(--pd-text); flex: 1; }
.pd-teammate-name a,
.pd-teammate-name a:visited { color: var(--pd-link); text-decoration: none; }
.pd-teammate-count { font-size: 11px; color: var(--pd-muted); white-space: nowrap; }

/* ══ MOBILE ══ */
@media (max-width: 900px) {
  .pd-body { grid-template-columns: 1fr; }
  .pd-left  { border-right: none; border-bottom: 1px solid var(--pd-border); }
}
@media (max-width: 600px) {
  /* Hero: photo + name side by side, earnings drops to its own full-width row below */
  .pd-hero  { padding: 16px; gap: 14px; flex-wrap: wrap; }
  .pd-hero-name { font-size: 28px; }
  .pd-hero-photo { width: 80px; height: 80px; font-size: 28px; }
  /* Earnings: breakdown LEFT, total RIGHT */
  .pd-hero-right {
    width: 100%; margin-left: 0; order: 3;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
  }
  /* breakdown naturally sits on the left as first child */
  .pd-earnings-breakdown {
    flex-direction: column; gap: 4px;
    margin-top: 0; order: 1;
  }
  .pd-earn-sub-label { font-size: 9px; }
  .pd-earn-sub-val   { font-size: 12px; margin-top: 0; }
  /* total wrapper pushed to the right */
  .pd-earnings-total { order: 2; text-align: right; }
  .pd-earnings-label { font-size: 9px; margin-bottom: 2px; }
  .pd-earnings-val   { font-size: 22px; line-height: 1; white-space: nowrap; }
  /* Tables scroll horizontally instead of overflowing */
  .pd-right { padding: 14px; overflow-x: auto; }
  .pd-tourn-table { min-width: 480px; }
  .pd-left  { padding: 14px; }
  .pd-dashboard { --pd-left-width: 100%; }
}

/* ==============================================================
   TEAM DASHBOARD  (td- prefix)
   ============================================================== */

/* ── Inherits all --pd- variables from .pd-dashboard ─────────── */
/* Light mode: --pd-card = var(--bg-card), --pd-border = var(--border-light) */
/* Dark mode:  --bg-card = #2a2a2a, --text-main = #ffffff, etc.              */

.td-dashboard {
    --td-left-width: 280px;
    font-family: inherit;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
    margin-bottom: 24px;
}

/* ── Hero — always dark, regardless of skin ── */
.td-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #1a2744 0%, #0f1f3d 100%);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.td-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(0,123,255,.1) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(99,102,241,.07) 0%, transparent 50%);
    pointer-events: none;
}
.td-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}

.td-hero-logo {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    padding: 8px; box-sizing: border-box;
}
.td-hero-logo img { width: 100%; height: 100%; object-fit: contain; }

.td-hero-info { position: relative; z-index: 1; flex: 1; min-width: 0; }

.td-hero-name {
    font-size: 36px; font-weight: 900;
    color: #ffffff !important;          /* always white — hero is always dark */
    letter-spacing: .01em; line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    margin-bottom: 8px;
}

/* Earnings — right of hero */
.td-hero .pd-hero-right {
    position: relative; z-index: 1;
    text-align: right; margin-left: auto;
}
/* Force white inside hero regardless of skin */
.td-hero .pd-earnings-label { color: rgba(255,255,255,.7) !important; }
.td-hero .pd-earnings-val   { color: #ffffff !important; }

/* ── Body layout ── */
.td-body {
    display: grid;
    grid-template-columns: var(--td-left-width) 1fr;
}

/* Left panel — uses skin bg/text vars */
.td-left {
    padding: 20px 18px;
    border-right: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
}

/* Right panel */
.td-right {
    padding: 20px 20px 24px;
    background: var(--bg-card);
    color: var(--text-main);
    overflow-x: auto;
}

.td-section-gap { margin-top: 28px; }

/* ── Roster — uses existing hero-player-card CSS ── */
.td-right .hero-roster-grid { margin-top: 10px; gap: 12px; }
.td-right .hero-player-card { width: 148px; }

/* ── Former Players — year headers + tables ── */
.td-year-header {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
}
/* First year header needs less top margin */
.td-year-header:first-of-type { margin-top: 8px; }

.td-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px; font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.td-former-table { width: 100%; }

/* ── Achievements — Place/Award column wider ── */
.td-place-col {
    min-width: 120px;
    width: 140px;
}

/* Ensure award badge doesn't get clipped */
.td-place-col .pd-award-badge {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

/* ── Dark mode explicit overrides ── */
/* These cover cases where var() fallback isn't enough */
html.skin-citizen-dark .td-dashboard,
html.skin-theme-client-pref-night .td-dashboard,
html[class*="night"] .td-dashboard {
    border-color: var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
}
html.skin-citizen-dark .td-left,
html.skin-theme-client-pref-night .td-left,
html[class*="night"] .td-left,
html.skin-citizen-dark .td-right,
html.skin-theme-client-pref-night .td-right,
html[class*="night"] .td-right {
    background: var(--bg-card);
    color: var(--text-main);
}
html.skin-citizen-dark .td-year-header,
html.skin-theme-client-pref-night .td-year-header,
html[class*="night"] .td-year-header {
    color: var(--text-muted);
    border-color: var(--border-light);
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .td-body { grid-template-columns: 1fr; }
    .td-left {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
}
@media (max-width: 600px) {
    .td-hero { padding: 16px; gap: 14px; }
    .td-hero-name { font-size: 24px; }
    .td-hero-logo { width: 56px; height: 56px; }
    .td-hero .pd-hero-right {
        width: 100%; margin-left: 0; order: 3;
        text-align: left;
        border-top: 1px solid rgba(255,255,255,.12);
        padding-top: 10px;
    }
    .td-right { padding: 14px; }
    .td-right .hero-player-card { width: calc(50% - 6px); }
    .td-dashboard { --td-left-width: 100%; }
}


/* ==============================================================
   BGMI HUB  (hub- prefix)
   ============================================================== */

/* ── Root wrapper ── */
.hub-root {
    font-family: inherit;
    color: var(--text-main);
    max-width: 1200px;
    margin: 0 auto;
}

/* ════ HERO ══════════════════════════════════════════════════════ */
.hub-hero {
    background: linear-gradient(135deg, #0a0f1e 0%, #0d1b3e 50%, #091229 100%);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
    border: 1px solid rgba(99,102,241,.3);
    box-shadow: 0 0 60px rgba(99,102,241,.15), 0 0 120px rgba(0,0,0,.4);
}
/* Animated gradient orbs */
.hub-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(99,102,241,.2) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 20%, rgba(14,165,233,.15) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 90%, rgba(251,191,36,.08) 0%, transparent 40%);
    pointer-events: none;
}
/* Subtle grid pattern overlay */
.hub-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.hub-hero-inner {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 48px 40px;
    flex-wrap: wrap;
}

.hub-hero-left { flex: 1; min-width: 260px; }

.hub-hero-game-tag {
    display: inline-block;
    font-size: 11px; font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #818cf8;
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 4px;
    padding: 3px 10px;
    margin-bottom: 16px;
}

.hub-hero-title {
    font-size: 72px !important;
    font-weight: 900 !important;
    line-height: .95 !important;
    color: #ffffff !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 0 40px rgba(99,102,241,.5), 0 4px 20px rgba(0,0,0,.5) !important;
    margin: 0 0 8px !important;
    border: none !important;
}

.hub-hero-full {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hub-hero-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.65);
    max-width: 440px;
}

/* Stat cards */
.hub-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex-shrink: 0;
}

.hub-stat-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: background .2s, border-color .2s;
    min-width: 130px;
}
.hub-stat-card:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(99,102,241,.4);
}
.hub-stat-icon {
    font-size: 24px;
    margin-bottom: 6px;
    display: block;
}
.hub-stat-val {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 4px;
}
.hub-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.5);
}

/* ════ SECTION SHELL ═════════════════════════════════════════════ */
.hub-section {
    margin-bottom: 40px;
}

.hub-section-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border-light);
    position: relative;
}
/* Accent left bar */
.hub-section-header::before {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: linear-gradient(90deg, #6366f1, #0ea5e9);
}

.hub-section-hl {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hub-section-icon { font-size: 22px; }
.hub-section-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    letter-spacing: -.01em !important;
    margin: 0 !important;
    border: none !important;
}
.hub-section-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.hub-sub-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.hub-sub-title-gap { margin-top: 28px; }

/* ════ TOURNAMENT CARDS ══════════════════════════════════════════ */
.hub-tourn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.hub-tourn-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hub-tourn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-color: #6366f1;
}
.hub-tourn-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #6366f1, #0ea5e9);
    opacity: 0;
    transition: opacity .2s;
}
.hub-tourn-card:hover::before { opacity: 1; }

.hub-tourn-tier {
    position: absolute;
    top: 10px; right: 10px;
}

.hub-tourn-logo {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover, rgba(0,0,0,.04));
    border-radius: 10px;
    padding: 6px; box-sizing: border-box;
}
.hub-tourn-logo img { width: 100%; height: 100%; object-fit: contain; }

.hub-tourn-info { flex: 1; min-width: 0; }

.hub-tourn-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
    padding-right: 48px; /* avoid tier badge overlap */
}
.hub-tourn-name a { color: var(--text-main); text-decoration: none; }
.hub-tourn-name a:hover { color: #6366f1; }

.hub-tourn-dates {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.hub-tourn-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.hub-tourn-prize { color: #4ade80; }
.hub-tourn-loc   {}

/* LIVE badge */
.hub-live-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    padding: 2px 6px;
    border-radius: 4px;
    animation: hub-pulse 1.5s infinite;
}
@keyframes hub-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}

/* Recent results table */
.hub-results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}
.hub-results-table tr th {
    background: var(--bg-header, var(--bg-card));
    color: var(--text-muted);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}
.hub-results-table tr td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    vertical-align: middle;
}
.hub-results-table tr:last-child td { border-bottom: none; }
.hub-results-table tr:hover td { background: var(--bg-hover, rgba(0,0,0,.03)); }

/* ════ TEAM GRID ═════════════════════════════════════════════════ */
.hub-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.hub-team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    cursor: pointer;
}
.hub-team-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.1);
    border-color: #6366f1;
}

.hub-team-rank {
    position: absolute;
    top: 8px; left: 8px;
    font-size: 10px; font-weight: 900;
    color: #fbbf24;
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.3);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: .04em;
}

.hub-team-logo {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.hub-team-logo img { width: 100%; height: 100%; object-fit: contain; }

.hub-team-name {
    font-size: 13px; font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
    margin-bottom: 3px;
}
.hub-team-name a { color: inherit; text-decoration: none; }
.hub-team-name a:hover { color: #6366f1; }

.hub-team-tag {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ════ RANKINGS ══════════════════════════════════════════════════ */
.hub-rankings { }

.hub-rank-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hub-rank-col-title {
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.hub-rank-table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}
.hub-rank-table tr th {
    background: var(--bg-header, var(--bg-card));
    color: var(--text-muted);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}
.hub-rank-table tr td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    vertical-align: middle;
}
.hub-rank-table tr:last-child td { border-bottom: none; }
.hub-rank-table tr:hover td { background: var(--bg-hover, rgba(0,0,0,.03)); }
.hub-rank-table a { color: var(--text-main); text-decoration: none; font-weight: 700; }
.hub-rank-table a:hover { color: #6366f1; }

.hub-rank-num {
    font-size: 14px;
    text-align: center;
    width: 40px;
    color: var(--text-muted);
}
.hub-rank-badge {
    display: inline-block;
    font-size: 11px; font-weight: 800;
    color: var(--text-muted);
    letter-spacing: .04em;
}
.hub-rank-team { color: var(--text-muted) !important; font-weight: 500 !important; }
.hub-rank-team a { color: var(--text-muted) !important; font-weight: 500 !important; }

/* ════ MOBILE ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hub-hero-inner  { padding: 32px 24px; gap: 28px; }
    .hub-hero-title  { font-size: 52px !important; }
    .hub-hero-stats  { grid-template-columns: repeat(2,1fr); }
    .hub-rank-cols   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .hub-hero-inner  { padding: 24px 16px; }
    .hub-hero-title  { font-size: 40px !important; }
    .hub-hero-stats  { grid-template-columns: repeat(2,1fr); gap: 8px; }
    .hub-stat-card   { padding: 12px; }
    .hub-stat-val    { font-size: 18px; }
    .hub-tourn-grid  { grid-template-columns: 1fr; }
    .hub-team-grid   { grid-template-columns: repeat(3, 1fr); }
    .hub-rank-cols   { grid-template-columns: 1fr; }
}




.responsive-banner img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto;
}

/* Hide mobile banner by default on large screens */
.banner-mobile {
display: none;
}
.banner-desktop {
display: block;
}

/* Switch them when the screen is 768px or smaller (Mobile) */
@media screen and (max-width: 768px) {
.banner-desktop {
display: none !important;
}
.banner-mobile {
display: block !important;
}
}


/* Esports Amaze Forum Discuss Button */
.ea-forum-discuss {
margin-top: 20px;
margin-bottom: 20px;
}
.ea-forum-discuss a {
display: inline-block;
background-color: var(--color-surface-2, #2a2a2a);
color: var(--color-base, #ffffff) !important;
padding: 10px 16px;
border-radius: 4px;
font-family: var(--font-heading, inherit);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none !important;
transition: background-color 0.2s ease;
}
.ea-forum-discuss a:hover {
background-color: var(--color-primary, #4a4a4a);
}

/* ==========================================================
   STATISTICS TABLES V5 (Perfect Spacing, Player UI & Sticky Fixes)
   ========================================================== */

/* 1. HEATMAP COLORS */
:root, html.skin-theme-client-pref-day, html.skin-citizen-light, html[class*="day"] {
    --heatmap-good: 0, 123, 255;  
    --heatmap-bad: 220, 38, 38;   
}
html.skin-theme-client-pref-night, html.skin-citizen-dark, html[class*="night"] {
    --heatmap-good: 56, 189, 248; 
    --heatmap-bad: 248, 113, 113; 
}
@media (prefers-color-scheme: dark) {
    html:not(.skin-theme-client-pref-day):not([class*="day"]) {
        --heatmap-good: 56, 189, 248;
        --heatmap-bad: 248, 113, 113;
    }
}

/* 2. TABLE LAYOUT & SPACING (The 100% Trick) */
.stats-card-table {
    width: 100% !important;
    border-spacing: 0 8px !important;
    table-layout: auto !important; 
}

/* Data Columns - Shrink-wrap */
.stats-card-table .stat-col {
    width: 1% !important; 
    min-width: 100px !important;
    text-align: center !important;
    white-space: nowrap;
}

/* Team/Player Column - Force it to eat all empty space */
.stats-card-table .stat-team {
    width: 100% !important;  /* CHANGED: Forces max stretching */
    min-width: 220px !important;
    max-width: none !important; 
    text-align: left !important;
    padding-left: 15px !important; /* Adds a nice breathing gap from the left border */
}

/* 3. STICKY COLUMNS DEFINITION */
.stats-card-table .sticky-col {
    position: sticky !important;
    z-index: 10;
    background-color: var(--bg-card);
}
.stats-card-table th.sticky-col {
    background-color: var(--bg-header);
    z-index: 11;
}

/* Rank (#) Column */
.stats-card-table .sticky-1 {
    left: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-right: 1px solid var(--border-light) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Team Name Column (Team Stats) */
.stats-card-table .sticky-2 {
    left: 40px !important; 
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* Team Logo Column (Player Stats) */
.stats-card-table .sticky-logo {
    left: 40px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    text-align: center !important;
    padding: 0 !important;
    border-right: 1px solid var(--border-light) !important;
}

/* Center the logo inside the cell */
.stats-card-table .sticky-logo .team-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Player Name Column (Player Stats) */
.stats-card-table .sticky-player {
    left: 100px !important; /* 40px + 50px */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* 4. VISUAL FIXES & TYPOGRAPHY */
.player-name-txt {
    font-weight: 700;
    font-size: 1em; /* Larger player name */
}

.stats-card-table th.headerSort {
    padding-right: 20px !important;
}
.stats-card-table .standings-row td[style*="background-color"] {
    background-clip: padding-box;
}
.stats-card-table .team-name-cell div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Forces them to pin to the left */
    text-align: left !important; /* Forces the text to align left */
    width: 100%;
}

/* 5. MOBILE TWEAKS (Tighter Layout, 33% Sticky Width & Gap Fixes) */
@media screen and (max-width: 768px) {
    /* Tighten vertical spacing */
    .stats-card-table {
        border-spacing: 0 4px !important; 
    }
    .stats-card-table .standings-row td {
        padding: 6px 4px !important; 
    }

    /* Shrink Rank Column */
    .stats-card-table .sticky-1 {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        font-size: 0.9em;
    }

    /* FIX: Slide the Team column over so it perfectly touches the 30px Rank column */
    .stats-card-table .sticky-2 {
        left: 30px !important; 
    }

    /* Shrink Team Column */
    .stats-card-table .stat-team {
        width: 115px !important;
        min-width: 115px !important;
        max-width: 115px !important;
        padding-left: 8px !important; 
    }

    /* Font Size & Ellipsis Safety Net (For Team Names) */
    .stats-card-table .mobile-only {
        display: block !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px; 
        font-size: 0.8em !important; 
    }

    /* Font Size & Ellipsis Safety Net (For Player Names) */
    .player-name-txt {
        font-size: 0.9em !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }

    /* FIX: Slide the Player Logo column over so it perfectly touches the 30px Rank column */
    .stats-card-table .sticky-logo {
        left: 30px !important; /* Matches sticky-1 width */
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }
    
    /* FIX: Player Name column sits after 30px Rank + 38px Logo */
    .stats-card-table .sticky-player {
        left: 68px !important; 
        width: 95px !important;
        min-width: 95px !important;
        max-width: 95px !important;
    }
}



/* ==========================================================
   TOURNAMENT RECORDS BOX (3-Column Layout)
   ========================================================== */
.rec-wrapper {
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 12px; margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rec-header {
    background: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
    color: #ffffff; padding: 12px 20px; font-size: 1.1em;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}
html.skin-citizen-dark .rec-header, html.skin-theme-client-pref-night .rec-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* OVERALL LEADERS BANNER */
.rec-banner {
    display: flex; background: var(--bg-hover); border-bottom: 2px solid var(--border-light);
}
.rec-ban-item {
    flex: 1; padding: 15px 20px; border-right: 1px solid var(--border-light);
    display: flex; flex-direction: column; justify-content: center;
}
.rec-ban-item:last-child { border-right: none; }
.rec-ban-lbl { font-size: 0.75em; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rec-ban-val { font-size: 1.2em; font-weight: 800; color: var(--text-main); }
.rec-ban-val a { color: var(--text-main); text-decoration: none; }
.rec-ban-stat { font-family: 'Consolas', monospace; font-size: 0.9em; font-weight: 700; color: #00509d; margin-top: 2px; }
html.skin-citizen-dark .rec-ban-stat, html.skin-theme-client-pref-night .rec-ban-stat { color: #38bdf8; }

/* DYNAMIC COLUMNS GRID */
.rec-grid { display: grid; gap: 0; }
.rec-grid.cols-1 { grid-template-columns: 1fr; }
.rec-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.rec-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.rec-col { padding: 20px; border-right: 1px solid var(--border-light); }
.rec-col:last-child { border-right: none; }
.rec-col-title {
    font-size: 0.85em; font-weight: 800; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px;
    border-bottom: 2px solid var(--border-light); padding-bottom: 6px;
}

/* RECORD CARDS */
.rec-box {
    display: flex; align-items: center; background: var(--bg-hover);
    border: 1px solid var(--border-light); padding: 10px 15px;
    border-radius: 8px; margin-bottom: 10px; transition: transform 0.2s;
}
.rec-box:hover { transform: translateX(4px); border-color: #007bff; }
.rec-icon { font-size: 1.5em; margin-right: 15px; }
.rec-info { flex: 1; }
.rec-title { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.rec-name { font-size: 1em; color: var(--text-main); line-height: 1.1; }
.rec-name a { color: var(--text-main); text-decoration: none; }
.rec-val {
    font-size: 1.4em; font-weight: 900; color: #00509d;
    font-family: 'Consolas', monospace; text-align: right; line-height: 1;
}
html.skin-citizen-dark .rec-val, html.skin-theme-client-pref-night .rec-val { color: #38bdf8; }
.rec-val span { display: block; font-size: 0.4em; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
.rec-dim { font-size: 0.8em; color: var(--text-muted); font-weight: 600; }

/* DAILY LIST */
.rec-day-list { display: flex; flex-direction: column; gap: 8px; }
.rec-day-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 15px; background: var(--bg-hover);
    border-radius: 6px; border-left: 4px solid #00509d;
}
html.skin-citizen-dark .rec-day-row, html.skin-theme-client-pref-night .rec-day-row { border-left-color: #38bdf8; }
.rec-day-name { font-weight: 800; font-size: 0.9em; color: var(--text-main); border-bottom: 1px dashed var(--border-light); padding-bottom: 4px; margin-bottom: 2px; }
.rec-day-stats { font-size: 0.85em; font-weight: 600; line-height: 1.4; color: var(--text-main); display: flex; flex-direction: column; gap: 2px; }
.rec-day-stats a { color: var(--text-main); text-decoration: none; }

/* MOBILE */
@media screen and (max-width: 900px) {
    .rec-grid { grid-template-columns: 1fr; }
    .rec-col { border-right: none; border-bottom: 1px solid var(--border-light); }
    .rec-banner { flex-direction: column; }
    .rec-ban-item { border-right: none; border-bottom: 1px solid var(--border-light); }
}
/* ==========================================================
   TOP 5 MINI LEADERBOARDS
   ========================================================== */
.rec-top5-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.rec-top5-header {
    display: flex;
    align-items: center;
    background: var(--bg-header);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
}
.rec-top5-header .rec-icon {
    font-size: 1.1em;
    margin-right: 8px;
}
.rec-top5-header .rec-title {
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
}
.rec-top5-list {
    display: flex;
    flex-direction: column;
}
.rec-top5-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9em;
}
.rec-top5-item:last-child {
    border-bottom: none;
}
.rec-top5-rank {
    width: 24px;
    font-weight: 800;
    color: var(--text-muted);
    font-size: 0.95em;
}
.rec-top5-item:nth-child(1) .rec-top5-rank { color: #d97706; } /* Gold */
.rec-top5-item:nth-child(2) .rec-top5-rank { color: #94a3b8; } /* Silver */
.rec-top5-item:nth-child(3) .rec-top5-rank { color: #b45309; } /* Bronze */

.rec-top5-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-top5-name a { color: var(--text-main); text-decoration: none; }
.rec-top5-val {
    font-weight: 800;
    color: #00509d;
    font-family: 'Consolas', monospace;
    text-align: right;
}
html.skin-citizen-dark .rec-top5-val, html.skin-theme-client-pref-night .rec-top5-val { color: #38bdf8; }


/* ==========================================================
   A-Z DIRECTORY LISTS (Players & Teams)
   ========================================================== */
.dir-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-top: 15px;
}

/* The Sticky A-Z Filter Bar */
.dir-index {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 25px;
    position: sticky;
    top: 70px; /* <--- CHANGED: Increased from 10px to 70px to clear the site header */
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.dir-letter-btn {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--bg-header);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}
.dir-letter-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-main) !important;
    font-weight: 700;
    text-decoration: none !important;
}
.dir-letter-btn:hover {
    background: #007bff;
    border-color: #007bff;
    transform: translateY(-2px);
}
.dir-letter-btn:hover a {
    color: #ffffff !important;
}

/* Alphabet Headers */
.dir-section-title {
    border-bottom: 2px solid var(--border-light);
    color: #00509d;
    margin-top: 30px;
    padding-bottom: 5px;
    font-weight: 800;
    font-size: 1.5em;
    scroll-margin-top: 140px; /* <--- CHANGED: Increased to account for the lowered sticky bar */
}
html.skin-citizen-dark .dir-section-title, html.skin-theme-client-pref-night .dir-section-title {
    color: #38bdf8;
}

/* Multi-Column List */
.dir-list {
    column-count: 3; /* Splits the list into 3 columns on PC */
    column-gap: 30px;
    list-style-type: none;
    padding: 0;
    margin: 15px 0 0 0;
}
.dir-list li {
    margin-bottom: 10px;
    font-size: 1em;
    break-inside: avoid; /* Prevents a name from being split in half across columns */
}
.dir-muted {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-left: 6px;
}
.dir-muted a {
    color: inherit;
    text-decoration: none;
}
.dir-muted a:hover {
    text-decoration: underline;
}

/* Responsive Rules */
@media screen and (max-width: 900px) {
    .dir-list { column-count: 2; }
}
@media screen and (max-width: 600px) {
    .dir-list { column-count: 1; }
    .dir-letter-btn { width: 28px; height: 28px; font-size: 0.9em; }
}

/* ==========================================================
   DYNAMIC RANK COUNTER (Fixes Sorting Numbers)
   ========================================================== */
.stats-card-table {
    counter-reset: stat-row;
}
.stats-card-table .standings-row {
    counter-increment: stat-row;
}
.stats-card-table .dyn-rank::before {
    content: counter(stat-row);
}

/* ==========================================================
   RANKINGS TABLE (Clean, Native Layout - No Sticky Hacks)
   ========================================================== */
.rk-table-wrapper {
    overflow-x: auto;
    margin-bottom: 20px;
}

.rk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rk-table th {
    background: var(--bg-header);
    color: var(--text-muted);
    font-size: 11px; 
    font-weight: 700;
    text-transform: uppercase; 
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.rk-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-main);
    vertical-align: middle;
}

.rk-table tr:last-child td { border-bottom: none; }
.rk-table tr:hover td { background: var(--bg-hover); }

/* Typography */
.rk-center { text-align: center !important; }
.rk-right { text-align: right !important; }
.rk-num { font-family: 'Consolas', monospace; font-weight: 600; color: var(--text-muted); }
.rk-total { font-family: 'Consolas', monospace; font-weight: 900; color: #00509d; font-size: 1.15em; }

html.skin-citizen-dark .rk-table .rk-total, 
html.skin-theme-client-pref-night .rk-table .rk-total { 
    color: #38bdf8; 
}

/* Flex Container for Logo + Names inside standard <td> */
.rk-flex-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rk-name-col { font-weight: 800; font-size: 1.05em; line-height: 1.2; }
.rk-name-col a { color: var(--text-main); text-decoration: none; }
.rk-name-col a:hover { color: #007bff; }
.rk-sub-name { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-top: 2px; }
.rk-sub-name a { color: var(--text-muted); text-decoration: none; }

/* -----------------------------------------
   DYNAMIC RANK COUNTER (Fixes Sorting Numbers)
   ----------------------------------------- */
.rk-table { counter-reset: rk-rank; }
.rk-table .rk-data-row { counter-increment: rk-rank; }
.rk-table .rk-rank-cell::before { 
    content: counter(rk-rank); 
    font-weight: 800; 
    color: var(--text-muted); 
}

/* -----------------------------------------
   SAFE TOP 3 HIGHLIGHTS 
   ----------------------------------------- */
.rk-gold td { background-color: rgba(234, 179, 8, 0.1) !important; }
.rk-gold .rk-rank-cell::before { color: #d97706; font-size: 1.3em; }

.rk-silver td { background-color: rgba(148, 163, 184, 0.1) !important; }
.rk-silver .rk-rank-cell::before { color: #64748b; font-size: 1.2em; }

.rk-bronze td { background-color: rgba(217, 119, 6, 0.1) !important; }
.rk-bronze .rk-rank-cell::before { color: #b45309; font-size: 1.1em; }

html.skin-citizen-dark .rk-gold .rk-rank-cell::before { color: #fcd34d; }
html.skin-citizen-dark .rk-silver .rk-rank-cell::before { color: #cbd5e1; }
html.skin-citizen-dark .rk-bronze .rk-rank-cell::before { color: #fbbf24; }

html.skin-citizen-dark .rk-gold td, html[class*="night"] .rk-gold td { background-color: rgba(234, 179, 8, 0.1) !important; }
html.skin-citizen-dark .rk-silver td, html[class*="night"] .rk-silver td { background-color: rgba(148, 163, 184, 0.1) !important; }
html.skin-citizen-dark .rk-bronze td, html[class*="night"] .rk-bronze td { background-color: rgba(217, 119, 6, 0.1) !important; }

/* ==========================================================
   COMPACT OVERVIEW MODE (For side-by-side Rankings)
   ========================================================== */
.rk-compact th, .rk-compact td { 
    padding: 8px 10px !important; /* Tighter padding saves horizontal space */
}

.rk-compact .rk-name-col { 
    font-size: 1em !important; /* Slightly smaller name so it fits beautifully */
}

.rk-compact .team-logo-wrapper img {
    width: 20px !important; /* Slightly smaller logo for compact view */
    height: auto !important;
}


/* ==========================================================
   STICKY HEADERS (Vertical Scrolling Window)
   ========================================================== */

/* 1. Turn the wrapper into a scrollable window */
.rk-table-wrapper {
    max-height: 75vh; /* Table will not exceed 75% of the user's screen height */
    overflow-y: auto; /* Enables vertical scrolling */
}

/* 2. Remove 'overflow: hidden' from the table so the sticky header can grab onto the wrapper */
.rk-table {
    overflow: visible !important; 
}

/* 3. Stick the headers to the top */
.rk-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20; /* Keeps header above the scrolling rows */
    background-color: var(--bg-header) !important; /* Ensure it stays opaque */
    
    /* Use an inner shadow to fake the border, as normal borders sometimes glitch when sticky */
    box-shadow: inset 0 -2px 0 var(--border-light) !important;
    border-bottom: none !important;
}

/* Optional: Add a subtle drop shadow to the header when you scroll down */
.rk-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.rk-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-thick);
    border-radius: 4px;
}


/* ==========================================================
   RANKINGS CTA BANNER (Home Page Redirect)
   ========================================================== */
.rankings-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
    border-radius: 12px;
    padding: 24px 30px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0, 80, 157, 0.2);
    flex-wrap: wrap;
    gap: 20px;
}

/* Dark Mode Adaptation */
html.skin-citizen-dark .rankings-cta,
html.skin-theme-client-pref-night .rankings-cta,
html[class*="night"] .rankings-cta {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.rankings-cta-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rankings-cta-icon {
    font-size: 2.5em;
    background: rgba(255, 255, 255, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
}

.rankings-cta-text h3 {
    margin: 0 0 5px 0 !important;
    font-size: 1.4em !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rankings-cta-text p {
    margin: 0;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

/* The Button */
.rankings-cta-btn a {
    display: inline-block;
    background: #0ea5e9; /* Vibrant Light Blue */
    color: #ffffff !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.rankings-cta-btn a:hover {
    background: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4);
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .rankings-cta {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .rankings-cta-content {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================================
   TABS FIX: Make entire box clickable (Stretched Link)
   ========================================================== */

/* 1. Make sure all tab containers act as the boundary for the link */
.espa-tab, 
.espa-dropdown-item, 
.espa-subpill, 
.tournament-tabs > div {
    position: relative !important;
}

/* 2. Create the invisible overlay that stretches the link */
.espa-tab a::after, 
.espa-dropdown-item a::after, 
.espa-subpill a::after, 
.tournament-tabs > div a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* 3. Ensure the text itself doesn't force underlines when hovering the empty space */
.espa-tab a, 
.espa-dropdown-item a, 
.espa-subpill a, 
.tournament-tabs > div a {
    text-decoration: none !important;
}





/* 1. Ensure the sticky headers have a solid background so text doesn't overlap */
.stats-card-table th {
    background-color: var(--bg-header);
    
}

/* 2. Same for the left sticky columns (Rank, Team, Player) if you scroll horizontally */
.stats-card-table .sticky-col {
    background-color: var(--bg-card);
}

/* 3. Optional: Give the table its own vertical scroll box */
.stats-wrapper {
    max-height: 80vh; /* Limits table height to 80% of the screen height */
    overflow-y: auto; /* Adds a scrollbar when the table gets too long */
}



/* ==========================================================
   FINAL STICKY Z-INDEX OVERRIDE (Fixes Mobile Header Overlap)
   ========================================================== */

/* 1. Force all sticky top headers to stay above standard data */
table.stats-card-table th,
table.standings-card-table th {
    z-index: 20 !important;
}

/* 2. Force the Left-pinned DATA rows to stay below headers */
table.stats-card-table td.sticky-col,
table.standings-card-table td.sticky-col,
table td.sticky-1, 
table td.sticky-2, 
table td.sticky-logo, 
table td.sticky-player {
    z-index: 10 !important;
}

/* 3. Force the CORNER HEADERS (Left + Top overlap) to be the absolute highest */
table.stats-card-table th.sticky-col,
table.standings-card-table th.sticky-col,
table th.sticky-1, 
table th.sticky-2, 
table th.sticky-logo, 
table th.sticky-player {
    z-index: 30 !important;
}