:root {
    --bg-dark: #111827;
    --bg-light: #1f2937;
    --bg-lighter: #374151;
    --card-bg: #1e293b;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-purple: #8b5cf6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --accent-red: #ff0000;
    --danger-color: #ef4444;
    --border-color: #374151;
    --chart-bg: rgba(31, 41, 55, 0.8);
    --accent-color: var(--accent-blue);
    --tooltip-bg: rgba(17, 24, 39, 0.95);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ENABLE TEXT SELECTION EVERYWHERE - FIX FOR COPY ISSUE */
*,
*::before,
*::after {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Keep buttons/inputs non-selectable for better UX */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.tab-button,
.mistake-tab {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 16px;
    /* Improved base font size for mobile */
}

header {
    background-color: var(--bg-light);
    padding: 5px 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 200;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Hide everything by default until authenticated */
header,
.dashboard-container {
    display: none !important;
}

/* Show login screen by default */
.login-screen {
    display: flex !important;
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-container {
    padding: 1rem;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    display: flex;
}

/* Full-width layout for specific tabs */
.dashboard-container:has(#hero-no-g-tab.active),
.dashboard-container:has(#metagraph-tab.active) {
    max-width: 100%;
    padding: 0;
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 0.5rem;
        flex-direction: column;
    }
}

/* Side Menu Styles */
.side-menu {
    position: fixed;
    left: 0;
    top: 70px;
    bottom: 0;
    width: 60px;
    background-color: var(--bg-light);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    transition: width 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    z-index: 150;
}

.side-menu.expanded {
    width: 220px;
}

.menu-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-lighter);
    border: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 102;
}

.side-menu-tabs {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 10px;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
}

.side-menu .tab-button {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-align: left;
    white-space: nowrap;
    gap: 15px;
}

.side-menu .tab-button i {
    font-size: 1.2rem;
    min-width: 24px;
    text-align: center;
}

.side-menu .tab-button span {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.side-menu.expanded .tab-button span {
    opacity: 1;
    transform: translateX(0);
}

.side-menu .tab-button:hover {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
}

.side-menu .tab-button.active {
    background-color: var(--accent-blue);
    color: white;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 70px;
    transition: margin-left 0.3s ease;
    width: calc(100% - 70px);
}

.content-wrapper {
    width: 100%;
    padding-right: 10px;
}

/* Rest of CSS remains unchanged */

.server-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent-red);
}

.status-indicator.connected {
    background-color: var(--accent-green);
}

.settings-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.refresh-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.refresh-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-lighter);
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: var(--text-primary);
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--accent-green);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.reload-button {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
}

.reload-button:hover {
    background-color: #4589d0;
}

.status-message {
    font-size: 26px;
    color: var(--text-secondary);
}

.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .stats-overview {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .stats-overview {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .stat-card {
        padding: 1rem 0.75rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

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

.stat-card {
    background-color: var(--card-bg);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    opacity: 0.7;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 5px;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.expanded-stats {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expanded-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.expanded-stat-label {
    color: var(--text-muted);
}

.expanded-stat-value {
    font-weight: 600;
}

.positive-value {
    color: var(--success-color);
}

.negative-value {
    color: var(--danger-color);
}

/* The hero-detail card later in this file redefines .stat-value color, which
   silently wins over .positive-value / .negative-value for the main stats cards.
   Scope to .stats-overview and bump specificity so the cards stay green/red. */
.stats-overview .stat-value.positive-value { color: var(--success-color) !important; }
.stats-overview .stat-value.negative-value { color: var(--danger-color) !important; }

.stat-value .stat-count {
    font-size: 0.45em;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 6px;
    vertical-align: middle;
}

/* Inline mini bars inside expanded stat rows + total-games progress bar */
.stat-bar {
    display: inline-block;
    width: 70px;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    overflow: hidden;
}
.stat-bar-fill {
    display: block;
    height: 100%;
    background: currentColor;
    opacity: 0.85;
    transition: width 0.25s ease;
}
.stat-progress {
    margin-top: 6px;
    height: 6px;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    overflow: hidden;
}
.stat-progress-fill {
    height: 100%;
    background: var(--success-color);
    opacity: 0.85;
    transition: width 0.25s ease;
}

/* Opponents-breakdown card — compact list of top opponents w/ split W/L bar */
#opponentsBreakdownCard {
    padding: 14px 14px 12px;
    /* Span two grid columns so the bar column actually has room to breathe. */
    grid-column: span 2;
}
@media (max-width: 768px) {
    #opponentsBreakdownCard { grid-column: span 1; }
}
#opponentsBreakdownCard .stat-label { margin-bottom: 8px; }
.opponents-breakdown { display: block; width: 100%; }
.opp-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    width: 100%;
    margin-bottom: 4px;
}
.opp-row .opp-name  { min-width: 0; }
.opp-row .opp-bar-track { min-width: 0; width: 100%; }
.opp-row .opp-wr    { min-width: 0; }
.opp-row .opp-count { color: var(--text-muted); font-weight: 500; margin-left: 3px; }
.opp-row .opp-name {
    color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    text-align: left;
}
.opp-row .opp-wr { text-align: right; }
.opp-row .opp-bar-track {
    height: 12px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    min-width: 0;
    position: relative;
}
.opp-row .opp-bar {
    height: 12px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    min-width: 4px;
}
.opp-row .opp-loss { background: #b91c1c; min-height: 12px; }
.opp-row .opp-win  { background: #16a34a; min-height: 12px; }
.opp-row .opp-wr { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.opp-row .opp-wr.positive-value { color: var(--success-color); }
.opp-row .opp-wr.negative-value { color: var(--danger-color); }
.opponents-breakdown .opp-empty { font-size: 0.75rem; color: var(--text-muted); padding: 6px 0; }

.streak-badge {
    background-color: var(--accent-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    display: inline-block;
    margin-top: 5px;
}

.scrims-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    height: calc(100vh - 250px);
    min-height: 500px;
}

.scrims-list {
    width: 100%;
    background-color: var(--bg-light);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.section-header {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    margin-bottom: 0.5rem;
    color: var(--accent-blue);
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

.filter-select {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.3rem;
    font-size: 0.8rem;
    flex: 1;
    min-width: 150px;
}

/* Opponent Filter Searchable Dropdown */
.opponent-filter-container {
    position: relative;
    flex: 1;
    min-width: 150px;
}

.opponent-search-input {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    width: 100%;
    box-sizing: border-box;
}

.opponent-search-input::placeholder {
    color: var(--text-muted);
}

.opponent-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
}

.opponent-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 0.25rem;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.opponent-checkbox-list {
    padding: 0.5rem;
}

.opponent-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.opponent-checkbox-item:hover {
    background-color: var(--bg-dark);
}

.opponent-checkbox-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--accent-blue);
}

.opponent-checkbox-item label {
    cursor: pointer;
    flex: 1;
    font-size: 0.8rem;
    user-select: none;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 150px;
}

.date-filter-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 10px;
}

.date-filter-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.date-filter-item label {
    color: #eee;
    font-size: 14px;
    white-space: nowrap;
}

.date-filter-input {
    background-color: #2a2a2a;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
}

.date-filter-input:focus {
    border-color: #6d9feb;
    outline: none;
}

.filter-group-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
}

.multi-select {
    position: relative;
}

.multi-select-selected {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.3rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 2px;
    display: none;
}

.multi-select.active .multi-select-dropdown {
    display: block;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
}

.multi-select-option:hover {
    background-color: rgba(88, 166, 255, 0.1);
}

.multi-select-option.selected {
    background-color: rgba(88, 166, 255, 0.2);
}

.multi-select-option img {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    object-fit: cover;
}

.filter-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.filter-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 12px;
    color: #eee;
    white-space: nowrap;
}

.filter-badge img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.badge-remove-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-remove-btn:hover {
    color: #ff6b6b;
}

/* Advanced Filters collapsible */
.adv-filters-toggle-row { margin: 6px 0 0 0; }

.adv-filters-btn {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.adv-filters-btn:hover { opacity: 0.85; }

.adv-toggle-icon { transition: transform 0.25s ease; }

.adv-filters-btn.active .adv-toggle-icon { transform: rotate(180deg); }

.adv-filters-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 4px 0;
    align-items: center;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.filter-clear-btn {
    background-color: #6d9feb;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.filter-clear-btn:hover {
    background-color: #5a8adc;
}

.filter-draftboards-btn {
    background-color: #059669;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    display: none;
}
.filter-draftboards-btn:hover {
    background-color: #047857;
}

.filter-export-btn {
    background-color: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    display: none;
}
.filter-export-btn:hover {
    background-color: #6d28d9;
}

/* Only show on Match History tab */
.dashboard-container:has(#match-history-tab.active) .filter-draftboards-btn,
.dashboard-container:has(#match-history-tab.active) .filter-export-btn {
    display: inline-block;
}


.scrims-list-container {
    overflow-y: auto;
    flex-grow: 1;
}

/* ==================== Match History Mobile Toggle ==================== */
.mh-mobile-toggle { display: none; }

/* ==================== New table styles ==================== */
.match-history-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    width: 100%;
}

/* Mobile: sidebar above matches */
@media (max-width: 768px) {
    .match-history-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .stats-sidebar {
        order: 1;
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .stats-sidebar-top,
    .stats-sidebar-bottom,
    .stats-sidebar-pairs {
        max-height: none !important;
        overflow-y: visible !important;
    }

    .matches-table-container {
        order: 2;
    }

    .matches-mobile-cards {
        order: 3;
    }

    /* Mobile toggle bar — Match History only.
       #mh-mobile-toggle lives in .content-wrapper so it's a sibling of every
       tab-content; without this guard it bleeds onto Draft Layout / Just 8th 9th /
       Team Analysis (each of which has its OWN in-iframe mobile toggle) and
       you see two stacked Filters/Draft/Stats bars on mobile. */
    .dashboard-container:has(#match-history-tab.active) #mh-mobile-toggle {
        display: flex;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        margin-bottom: 0.75rem;
    }
    .dashboard-container:not(:has(#match-history-tab.active)) #mh-mobile-toggle {
        display: none !important;
    }

    .mh-toggle-btn {
        flex: 1;
        padding: 10px 0;
        background: rgba(255, 255, 255, 0.04);
        border: none;
        color: #94a3b8;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.2s, color 0.2s;
    }

    .mh-toggle-btn.active {
        background: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
    }

    /* Draft mode (default): hide filters + stats sidebar */
    body.mh-draft-view #global-filters-section,
    body.mh-draft-view .stats-overview { display: none; }
    body.mh-draft-view #stats-sidebar { display: none !important; }

    /* Filters mode: hide stats overview, draft cards, stats sidebar */
    body.mh-filters-view .stats-overview { display: none; }
    body.mh-filters-view #scrimsList { display: none; }

    /* Stats mode: hide filters + draft cards, show stats sidebar only */
    body.mh-stats-view #global-filters-section,
    body.mh-stats-view .stats-overview { display: none; }
    body.mh-stats-view #matches-mobile-cards,
    body.mh-stats-view .matches-table-container { display: none !important; }
}

.matches-table-container {
    overflow-x: auto;
}

.stats-sidebar {
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    position: sticky;
    top: 20px;
    align-self: start;
    overflow-x: hidden;
}

.stats-sidebar-top {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.stats-sidebar-bottom {
    max-height: 385px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 4px;
}

.stats-sidebar-pairs {
    max-height: 360px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 4px;
}

/* Draft Stage Picks/Bans sections in sidebar */
.sidebar-draft-stage-section {
    max-height: 360px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
    padding-top: 12px;
    padding-right: 4px;
}

.sidebar-draft-stage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.sidebar-draft-stage-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9ca3af;
    text-align: center;
    padding: 3px 2px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.sidebar-draft-stage-table th:first-child {
    text-align: left;
}

.sidebar-draft-stage-table th.stage-group-header {
    font-size: 0.65rem;
    color: #6b7280;
    border-bottom: none;
    padding: 2px 2px;
}

.sidebar-draft-stage-table th.sortable {
    cursor: pointer;
}

.sidebar-draft-stage-table th.sortable:hover {
    color: #e2e8f0;
}

.sidebar-draft-stage-table th.sort-asc::after {
    content: ' ▲';
    font-size: 0.6rem;
}

.sidebar-draft-stage-table th.sort-desc::after {
    content: ' ▼';
    font-size: 0.6rem;
}

.sidebar-draft-stage-table td {
    padding: 3px 3px;
    text-align: center;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    font-size: 0.78rem;
    color: #d1d5db;
}

.sidebar-draft-stage-table td.hero-cell {
    text-align: left;
    padding: 2px 3px;
}

.sidebar-draft-stage-table .wr-high {
    color: #10b981;
    font-weight: 600;
}

.sidebar-draft-stage-table .wr-low {
    color: #ef4444;
}

.sidebar-draft-stage-table .wr-mid {
    color: #9ca3af;
}

.sidebar-draft-stage-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.sidebar-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sidebar-stats-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.sidebar-stats-table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.2s;
}

.sidebar-stats-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-stats-table th.sortable::after {
    content: "⇅";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.5;
}

.sidebar-stats-table th.sortable.sort-asc::after {
    content: "↑";
    opacity: 1;
    color: var(--accent-green);
}

.sidebar-stats-table th.sortable.sort-desc::after {
    content: "↓";
    opacity: 1;
    color: var(--accent-blue);
}

.sidebar-stats-table td {
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.sidebar-stats-table td.hero-cell {
    text-align: left;
}

.matches-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-darker);
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
}

.matches-table thead {
    background-color: var(--bg-darker);
    color: var(--text-secondary);
}

.matches-table th {
    text-align: left;
    padding: 10px;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.matches-table th:nth-child(1) {
    width: 15%;
}

.matches-table th:nth-child(2) {
    width: 38%;
}

.matches-table th:nth-child(3) {
    width: 38%;
}

.matches-table th:nth-child(4) {
    width: 9%;
}

.matches-table tbody {
    font-size: 0.9rem;
}

.match-row {
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.match-row td {
    padding: 8px;
    vertical-align: middle;
}

.match-row:hover {
    background-color: var(--bg-light);
}

.match-row.selected {
    background-color: rgba(88, 166, 255, 0.1);
}

/* Series divider line between different series groups (like draft layout) */
.match-row.series-end td {
    border-bottom: 2px solid rgba(251, 146, 60, 0.4) !important;
    padding-bottom: 12px !important;
}

.league-cell {
    padding: 15px 10px;
    vertical-align: middle !important;
}

.ticket-icon {
    width: 32px;
    height: 32px;
    background-color: #333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-icon img {
    width: 20px;
    height: 20px;
}

.match-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tournament-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.tournament-name a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s;
}

.tournament-name a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.match-mobile-league a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s;
}

.match-mobile-league a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.result-label[onclick] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.result-label[onclick]:hover {
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
}

.result-cell {
    padding: 15px 10px;
    vertical-align: middle !important;
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-label {
    font-weight: 600;
    font-size: 1rem;
}

.match-row.win .result-label {
    color: var(--accent-green);
}

.match-row.loss .result-label {
    color: var(--accent-red);
}

.match-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.match-id {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.duration-cell {
    padding: 15px 10px;
    text-align: center;
    font-weight: 500;
    font-family: monospace;
    font-size: 1.1rem;
    vertical-align: middle !important;
}

.draft-cell {
    padding: 15px 5px;
    vertical-align: middle !important;
}

.stats-cell {
    padding: 15px 10px;
    vertical-align: middle !important;
}

.pick-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pick-stats-table th {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.pick-stats-table th:first-child {
    text-align: left;
    padding-left: 6px;
}

.pick-stats-table td {
    padding: 5px 2px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.pick-stats-table td:first-child {
    text-align: left;
    padding-left: 6px;
}

.pick-stats-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.stats-hero-img {
    width: 28px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
}

.no-stats {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.team-draft {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 5px;
}

.winning-team {
    background-color: rgba(63, 185, 80, 0.15);
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.3);
    padding: 8px;
    border-left: 3px solid var(--accent-green);
    width: fit-content;
}

.team-info {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.team-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.team-side {
    padding: 2px 6px;
    font-size: 0.75rem;
    border-radius: 4px;
    background-color: var(--bg-light);
}

.team-side.radiant {
    color: var(--accent-green);
}

.team-side.dire {
    color: var(--accent-red);
}

.pick-order {
    padding: 2px 6px;
    font-size: 0.75rem;
    border-radius: 4px;
    background-color: var(--bg-light);
}

.draft-heroes-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compact-picks {
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    flex-wrap: wrap;
    max-width: 420px;
}

.compact-bans {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
    max-width: 380px;
}

.draft-hero-compact {
    width: 50px;
    height: 40px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #444;
}

.draft-hero-compact.pick {
    width: 61px;
    margin: 0 2px;
}

.draft-hero-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.draft-hero-compact.ban img {
    filter: grayscale(70%) brightness(1.2);
    opacity: 1;
}

.draft-hero-compact .pick-number {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.7rem;
    padding: 1px 4px;
    font-weight: 550;
}

.compact-picks .draft-hero-compact .pick-number {
    color: rgba(126, 255, 143, 1);
    /* Light green */
}

.compact-bans .draft-hero-compact .pick-number {
    color: rgba(255, 126, 126, 1);
    /* Light red */
}

/* Adjust the original scrim item styles */
.scrim-item {
    display: flex;
    padding: 0.8rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.scrim-item:hover {
    transform: translateY(-2px);
}

.scrim-item.selected {
    border: 1px solid var(--accent-blue);
}

.scrim-item.win {
    border-left: 4px solid var(--accent-green);
}

.scrim-item.loss {
    border-left: 4px solid var(--accent-red);
}

.scrim-date {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.scrim-teams {
    margin: 0.4rem 0;
    font-weight: 600;
}

.your-team {
    color: var(--accent-green);
}

.vs {
    margin: 0 0.4rem;
    color: var(--text-secondary);
}

.opponent-team {
    color: var(--accent-yellow);
}

.scrim-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-badge {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.result-badge.win {
    background-color: var(--accent-green);
    color: white;
}

.result-badge.loss {
    background-color: var(--accent-red);
    color: white;
}

.scrim-detail {
    width: 100%;
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    overflow-y: auto;
}

/* New match detail styles */
.match-detail-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.match-title {
    display: flex;
    flex-direction: column;
}

.match-title h2 {
    font-size: 1.8rem;
    margin: 0;
}

.match-title h2.win {
    color: var(--accent-green);
}

.match-title h2.loss {
    color: var(--accent-red);
}

.match-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.match-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.match-meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meta-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.meta-value {
    font-size: 1rem;
    font-weight: 500;
}

.draft-teams {
    display: flex;
    gap: 30px;
}

.draft-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.team-name {
    font-size: 1.2rem;
    font-weight: 600;
}

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

.draft-columns {
    display: flex;
    gap: 20px;
}

.draft-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.draft-column h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.hero-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background-color: var(--bg-lighter);
    border-radius: 6px;
}

.hero-item.ban {
    opacity: 1;
}

.hero-image {
    width: 55px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image .pick-number {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.7rem;
    padding: 1px 4px;
    font-weight: 600;
}

.hero-item.ban .hero-image img {
    filter: grayscale(70%) brightness(1.2);
}

/* Adjust existing styles */
h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4rem;
    color: var(--accent-blue);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.select-message,
.loading-message {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.player-performance,
.draft-analysis {
    margin-top: 2rem;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.player-card {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    align-items: center;
}

.player-hero {
    width: 50px;
    height: 50px;
    margin-right: 0.8rem;
}

.player-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.player-name {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.player-hero-name {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.draft-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.draft-section {
    flex: 1;
}

.draft-section h4 {
    color: var(--accent-blue);
    margin: 0 0 0.8rem 0;
    font-size: 1rem;
}

.draft-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.draft-hero {
    width: 70px;
    text-align: center;
}

.draft-hero img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.3rem;
}

.draft-hero.ban img {
    opacity: 1;
    filter: grayscale(70%) brightness(1.2);
}

.hero-name {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.error-container {
    padding: 1rem;
    background-color: rgba(248, 81, 73, 0.1);
    border: 1px solid var(--accent-red);
    border-radius: 6px;
    color: var(--accent-red);
}

/* Mobile-optimized header */
@media (max-width: 768px) {
    header {
        padding: 0.4rem 0.75rem;
        flex-wrap: nowrap;
        align-items: center;
    }

    header h1 {
        display: none;
    }

    .header-right {
        margin-top: 0;
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* Icon-only compact buttons in header */
    header .reload-button {
        min-height: unset;
        padding: 5px 7px;
        font-size: 0;
        border-radius: 5px;
    }

    header .reload-button i {
        font-size: 15px;
    }

    /* Hide "Last updated" text */
    header .status-message {
        display: none;
    }

    /* Hide status label text, keep dot */
    header .server-status span {
        display: none;
    }

    /* Hide user name/email, keep avatar */
    #user-details {
        display: none !important;
    }

    /* Smaller user avatar */
    #user-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    /* Compact user-info gap */
    .user-info {
        gap: 6px !important;
    }
}

/* Enhanced Side Menu Mobile Responsiveness */
/* Mobile menu toggle - always floating */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background-color: rgba(30, 30, 47, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(56, 64, 96, 0.8);
    color: var(--text-primary);
    font-size: 1.4rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background-color: var(--accent-blue);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

/* Keyframe animation for the menu button pulse */
@keyframes menuButtonPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 6px 25px rgba(74, 144, 226, 0.4);
        transform: scale(1.05);
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        animation: menuButtonPulse 2s ease-in-out infinite;
    }

    .mobile-menu-toggle:hover {
        animation: none;
        /* Stop pulsing on hover */
    }

    .side-menu {
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        z-index: 10000;
    }

    .side-menu.expanded {
        transform: translateX(0);
    }

    .side-menu.mobile-open {
        transform: translateX(0);
        width: 280px;
    }

    .side-menu .menu-toggle-btn {
        display: none;
        /* Hide the internal menu toggle on mobile */
    }

    .side-menu .tab-button {
        padding: 16px 15px;
        font-size: 1.1rem;
    }

    .side-menu .tab-button span {
        opacity: 1;
        transform: translateX(0);
    }

    .side-menu-tabs {
        margin-top: 75px;
        /* Push tabs below the fixed hamburger button (50px height at top: 20px) */
        max-height: calc(100vh - 85px);
        overflow-y: auto;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }

    .main-content.menu-open {
        transform: translateX(280px);
    }

    /* Mobile menu overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 140;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* Enhanced Table Responsiveness */
.matches-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.matches-table {
    min-width: 800px;
    /* Minimum width for horizontal scroll */
}

/* Mobile Card Layout for Matches */
@media (max-width: 768px) {
    .matches-table-container {
        overflow: visible;
    }

    .matches-table {
        display: none;
        /* Hide table on mobile */
    }

    /* Show mobile card layout instead */
    .matches-mobile-cards {
        display: block;
        padding: 10px;
        gap: 12px;
    }

    .match-mobile-card {
        background: var(--bg-light);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        border-left: 4px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .match-mobile-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .match-mobile-card.win {
        border-left-color: var(--accent-green);
    }

    .match-mobile-card.loss {
        border-left-color: var(--accent-red);
    }

    .match-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .match-mobile-result {
        font-weight: bold;
        font-size: 1rem;
        padding: 6px 12px;
        border-radius: 6px;
        text-transform: uppercase;
    }

    .match-mobile-result.win {
        background: var(--accent-green);
        color: white;
    }

    .match-mobile-result.loss {
        background: var(--accent-red);
        color: white;
    }

    .match-mobile-duration {
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .match-mobile-info {
        margin-bottom: 12px;
    }

    .match-mobile-league {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .match-mobile-league button {
        outline: none;
    }

    .match-mobile-league button:focus {
        outline: 2px solid var(--accent-blue);
        outline-offset: 2px;
        border-radius: 2px;
    }

    .match-mobile-league button:hover {
        color: var(--accent-blue);
    }

    .match-mobile-date a {
        outline: none;
    }

    .match-mobile-date a:focus {
        outline: 2px solid var(--accent-blue);
        outline-offset: 2px;
        border-radius: 2px;
    }

    .match-mobile-date a:hover {
        color: #4fc3f7;
        text-decoration: underline;
    }

    .match-mobile-date {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .match-mobile-teams {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .match-mobile-team {
        background: transparent;
        border: none;
        padding: 12px 0;
    }

    .match-mobile-team.winning-team {
        background: rgba(76, 175, 80, 0.1);
        border: 1px solid var(--accent-green);
        border-radius: 8px;
        padding: 8px;
    }

    .match-mobile-team-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .match-mobile-team-name {
        font-weight: 600;
        font-size: 0.95rem;
    }

    .match-mobile-team-info {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .match-mobile-team-side {
        font-size: 0.8rem;
        padding: 3px 8px;
        border-radius: 4px;
        background: var(--bg-light);
    }

    .match-mobile-pick-order {
        font-size: 0.8rem;
        padding: 3px 8px;
        border-radius: 4px;
        background: var(--bg-light);
        color: var(--text-secondary);
    }

    .match-mobile-team-side.radiant {
        color: var(--accent-green);
        background: rgba(76, 175, 80, 0.15);
    }

    .match-mobile-team-side.dire {
        color: var(--accent-red);
        background: rgba(244, 67, 54, 0.15);
    }

    .match-mobile-picks {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .match-mobile-bans {
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
    }

    .match-mobile-hero {
        width: 43px;
        height: 32px;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        border: 1px solid var(--border-color);
    }

    .match-mobile-picks .match-mobile-hero {
        width: 58px;
        height: 32px;
        /* Same height as bans */
    }

    .match-mobile-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .match-mobile-hero.ban img {
        filter: grayscale(70%) brightness(1.2);
        opacity: 1;
    }

    .match-mobile-hero .pick-number {
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        font-size: 0.65rem;
        padding: 1px 3px;
        font-weight: 500;
    }

    .match-mobile-picks .match-mobile-hero .pick-number {
        color: var(--accent-green);
    }

    .match-mobile-bans .match-mobile-hero .pick-number {
        color: var(--accent-red);
    }
}

/* Desktop - keep table visible */
@media (min-width: 769px) {
    .matches-mobile-cards {
        display: none;
    }
}

/* iPhone 13 Pro Max and similar large phones */
@media (max-width: 480px) and (min-width: 415px) {
    .match-mobile-hero {
        width: 44px;
        height: 32px;
    }

    .match-mobile-picks .match-mobile-hero {
        width: 60px;
        height: 32px;
    }

    .match-mobile-picks {
        gap: 4px;
    }

    .match-mobile-bans {
        gap: 3px;
    }
}

@media (max-width: 414px) {
    .match-mobile-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .match-mobile-team.winning-team {
        padding: 1px;
    }

    .match-mobile-hero {
        width: 40px;
        height: 28px;
    }

    .match-mobile-picks .match-mobile-hero {
        width: 52px;
        height: 28px;
        /* Same height as bans */
    }

    .match-mobile-picks {
        gap: 3px;
    }

    .match-mobile-bans {
        gap: 2px;
    }

    .match-mobile-team {
        padding: 10px;
    }
}

/* Mobile-Optimized Filter Controls */
@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select,
    .multi-select-selected {
        width: 100%;
        min-height: 44px;
        /* Touch-friendly height */
        font-size: 1rem;
    }

    .multi-select-dropdown {
        max-height: 60vh;
        overflow-y: auto;
    }

    .multi-select-option {
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .multi-select-option img {
        margin-right: 12px;
    }
}

@media (max-width: 1200px) {
    .players-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .scrims-container {
        flex-direction: column;
        height: auto;
    }

    .scrims-list,
    .scrim-detail {
        width: 100%;
    }

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

    .draft-teams {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .settings-bar {
        flex-direction: column;
        gap: 1rem;
    }

    .players-grid {
        grid-template-columns: 1fr;
    }

    .draft-columns {
        flex-direction: column;
    }

    .match-meta {
        grid-template-columns: 1fr;
    }
}

/* Tab Navigation */
.tab-container {
    margin-bottom: 1rem;
}

.tab-navigation {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.tab-button {
    background-color: var(--bg-lighter);
    color: var(--text-secondary);
    border: none;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-right: 4px;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.tab-button:hover {
    background-color: var(--bg-light);
    color: var(--text-primary);
}

.tab-button.active {
    background-color: var(--accent-blue);
    color: white;
    position: relative;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-blue);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Draft Analysis Styles */
.draft-analysis-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0.5rem;
}

.team-analysis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.analysis-card {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.analysis-card h3 {
    margin-top: 0;
    color: var(--accent-blue);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.8rem;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
}

.hero-stats-container {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.hero-stats-container::-webkit-scrollbar {
    width: 6px;
}

.hero-stats-container::-webkit-scrollbar-track {
    background: var(--bg-darker);
    border-radius: 4px;
}

.hero-stats-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

/* Add hover effect on rows */
.hero-stats-table tbody tr {
    transition: background-color 0.2s ease;
}

.hero-stats-table tbody tr:hover {
    background-color: rgba(88, 166, 255, 0.1);
}

.hero-stats-table {
    width: 100%;
    border-collapse: collapse;
}

.hero-stats-table th,
.hero-stats-table td {
    padding: 0.7rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.hero-stats-table th:first-child,
.hero-stats-table td:first-child {
    width: 45%;
}

.hero-stats-table th:nth-child(2),
.hero-stats-table td:nth-child(2) {
    width: 15%;
}

.hero-stats-table th:nth-child(3),
.hero-stats-table td:nth-child(3) {
    width: 40%;
}

.hero-stats-table th {
    color: var(--text-secondary);
    font-weight: 500;
}

.hero-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-item-row img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
}

.win-rate-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-lighter);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.win-rate-fill {
    height: 100%;
    background-color: var(--accent-green);
    border-radius: 4px;
}

.win-rate-cell {
    position: relative;
}

.win-rate-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.winrate-value {
    font-weight: 500;
}

.winrate-games {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.hero-pair {
    display: flex;
    align-items: center;
}

.hero-pair-images {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-pair-images img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    border: 2px solid var(--bg-light);
}

.hero-pair-images img:nth-child(2) {
    margin-left: 0;
}

.hero-pair-names {
    margin-left: 8px;
}

@media (max-width: 992px) {
    .team-analysis {
        grid-template-columns: 1fr;
    }
}

/* Hero Filter Styles */
.hero-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.match-badge-filter-container {
    min-width: 200px;
    flex: 0 0 200px;
}

.match-badge-filter-container .hero-filter-group {
    min-width: 200px;
    width: 100%;
}

.match-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #1d4ed8;
    color: #dbeafe;
    border: 1px solid #2563eb;
    gap: 6px;
}

.match-tag-pill.empty {
    background: #1f2937;
    color: #9ca3af;
    border-color: #374151;
}

.match-tag-pill.clickable {
    cursor: pointer;
}

.match-badges-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.match-badges-inline.under-actions {
    margin-top: 6px;
    justify-content: center;
}

.match-badges-inline.mobile {
    margin-top: 8px;
}

.match-tag-edit-btn {
    background: #1f2937;
    border: 1px solid #374151;
    color: #d1d5db;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    text-transform: lowercase;
}

.match-tag-edit-btn:hover {
    background: #374151;
    border-color: #4b5563;
}

.match-tag-remove-btn {
    background: transparent;
    border: none;
    color: #bfdbfe;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.match-tag-remove-btn:hover {
    color: #ffffff;
}

.view-cell-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.match-badge-picker {
    position: fixed;
    z-index: 2500;
    min-width: 220px;
    max-width: 280px;
    background: #111827;
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.match-badge-picker-title {
    font-size: 12px;
    font-weight: 700;
    color: #93c5fd;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-badge-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 170px;
    overflow-y: auto;
}

.match-badge-choice-btn {
    border: 1px solid #2563eb;
    background: #0b1220;
    color: #dbeafe;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.match-badge-choice-btn:hover {
    background: #1e3a8a;
}

.match-badge-choice-btn.added {
    border-color: #374151;
    background: #1f2937;
    color: #9ca3af;
    cursor: not-allowed;
}

.match-badge-picker-empty {
    color: #9ca3af;
    font-size: 12px;
}

.match-badge-picker-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.match-badge-picker-btn {
    background: #1f2937;
    border: 1px solid #374151;
    color: #e5e7eb;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
}

.match-badge-picker-btn.primary {
    background: #2563eb;
    border-color: #1d4ed8;
}

.match-badge-picker-btn.active {
    background: #92400e;
    border-color: #b45309;
    color: #fde68a;
}

.match-badge-choice-btn.editable {
    border-color: #b45309;
    background: #1c1006;
    color: #fde68a;
    cursor: pointer;
}

.match-badge-choice-btn.editable:hover {
    background: #292010;
}

.hero-filter-group {
    position: relative;
    min-width: 200px;
}

.hero-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
}

.hero-filter-header label {
    color: #eee;
    font-size: 14px;
    margin: 0;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: #eee;
    cursor: pointer;
    padding: 0;
}

.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    max-height: 400px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    z-index: 10;
    display: none;
    flex-direction: column;
    margin-top: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.multi-select-dropdown.show {
    display: flex;
}

.dropdown-search {
    padding: 10px;
    border-bottom: 1px solid #444;
}

.hero-search {
    width: 100%;
    background-color: #1a1a1a;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
}

.multi-select-options {
    overflow-y: auto;
    max-height: 300px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.multi-select-option:hover {
    background-color: #3a3a3a;
}

.multi-select-option.selected {
    background-color: #2c3e50;
}

.multi-select-option img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.dropdown-actions {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #444;
}

.select-all-btn,
.clear-btn {
    background-color: #3a3a3a;
    color: #eee;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

.select-all-btn:hover,
.clear-btn:hover {
    background-color: #4a4a4a;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.filter-clear-btn {
    background-color: #6d9feb;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.filter-clear-btn:hover {
    background-color: #5a8adc;
}

/* Hero Analysis Overlay */
.analysis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    padding: 20px;
    backdrop-filter: blur(6px);
}

.analysis-overlay.active {
    display: block;
    opacity: 1;
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--bg-color-darker);
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.overlay-header h2 {
    color: var(--text-color);
    margin: 0;
    font-size: 24px;
}

.filtered-indicator {
    font-size: 14px;
    color: var(--text-color-secondary);
    font-weight: normal;
}

.overlay-close-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.overlay-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.overlay-content {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-analysis-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

.hero-analysis-card {
    background-color: var(--bg-color-darker);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.hero-analysis-header {
    display: flex;
    padding: 15px;
    background: linear-gradient(to right, var(--bg-color-darker), var(--bg-color));
    border-bottom: 1px solid var(--border-color);
}

.hero-analysis-image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-analysis-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-analysis-summary {
    flex: 1;
}

.hero-analysis-summary h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: var(--text-color);
}

.hero-stats-summary {
    display: flex;
    gap: 15px;
}

.hero-stat-item {
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
}

.stat-value.positive {
    color: var(--accent-green);
}

.stat-value.negative {
    color: var(--accent-red);
}

.stat-label {
    font-size: 12px;
    color: var(--text-color-secondary);
    margin-top: 4px;
}

.hero-analysis-details {
    display: flex;
    flex-direction: column;
    padding: 15px;
    gap: 20px;
}

.analysis-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analysis-section h4 {
    margin: 0;
    color: var(--text-color);
    font-size: 16px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.synergy-list,
.counter-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.synergy-item,
.counter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-color);
    padding: 8px;
    border-radius: 6px;
    flex: 1;
    min-width: 120px;
}

.synergy-item img,
.counter-item img {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    object-fit: cover;
}

.synergy-stats,
.counter-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.synergy-name,
.counter-name {
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.synergy-data,
.counter-data {
    display: flex;
    gap: 8px;
    align-items: center;
}

.synergy-winrate,
.counter-winrate {
    font-weight: bold;
    font-size: 14px;
}

.synergy-winrate.positive,
.counter-winrate.positive {
    color: var(--accent-green);
}

.synergy-winrate.negative,
.counter-winrate.negative {
    color: var(--accent-red);
}

.synergy-record,
.counter-record {
    color: var(--text-color-secondary);
    font-size: 12px;
}

.position-chart {
    background-color: var(--bg-color);
    border-radius: 4px;
    padding: 10px;
}

.position-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.position-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.position-label {
    width: 50px;
    color: #ffffff;
    font-size: 14px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.position-bar-container {
    flex: 1;
    height: 24px;
    /* darker bluish tone so white text outside the bar stands out */
    background-color: #223042;
    border-radius: 4px;
    overflow: visible;
    /* allow text to flow outside bar */
}

.position-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    /* text inside bar */
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    white-space: nowrap;
    /* prevent wrapping; allow overflow */
    font-size: 12px;
    padding: 0 10px;
    transition: width 0.3s ease;
    min-width: 5%;
}

.no-data {
    color: var(--text-color-secondary);
    font-style: italic;
    padding: 10px;
    text-align: center;
    background-color: var(--bg-color);
    border-radius: 4px;
}

.no-heroes-message {
    color: var(--text-color-secondary);
    font-style: italic;
    padding: 20px;
    text-align: center;
    font-size: 16px;
}

/* Make result label clickable */
.result-label {
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.result-label:hover {
    transform: translateY(-2px);
}

.result-label::after {
    content: "📊";
    position: absolute;
    right: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.result-label:hover::after {
    opacity: 1;
}

/* Hero Library Styles */
.hero-library-container {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-library-header {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-library-header h3 {
    margin-top: 0;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.hero-library-header p {
    margin: 0;
    color: var(--text-secondary);
}

.hero-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.hero-card {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.hero-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.hero-card-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.hero-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-card-title {
    flex-grow: 1;
}

.hero-card-title h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.hero-card-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.hero-card-stat {
    display: flex;
    flex-direction: column;
}

.hero-card-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.hero-card-stat-value.positive {
    color: var(--accent-green);
}

.hero-card-stat-value.negative {
    color: var(--accent-red);
}

.hero-card-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hero-card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-card-section {
    margin-top: 0.5rem;
}

.hero-card-section h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4rem;
}

/* Enhanced Hero Library Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }

    .hero-card {
        padding: 1rem;
    }

    .hero-card-img {
        width: 50px;
        height: 50px;
    }

    .hero-card-title h4 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-library-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .hero-card {
        padding: 0.75rem;
    }

    .hero-card-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .hero-card-stats {
        justify-content: center;
        gap: 0.5rem;
    }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 576px) {
    .hero-library-grid {
        grid-template-columns: 1fr;
    }
}

/* Draft Sequence Tab Styles */
.draft-sequence-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.draft-sequence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.draft-sequence-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}

.draft-sequence-table-container {
    overflow-x: auto;
    max-width: 100%;
    background-color: #1e1e2f;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

.draft-sequence-table {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
    font-size: 14px;
}

.draft-sequence-table thead th {
    background-color: #283046;
    padding: 10px;
    text-align: center;
    border: 1px solid #384060;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Freeze the first column (Hero column) */
.draft-sequence-table thead th:first-child,
.draft-sequence-table tbody td:first-child {
    position: sticky;
    left: 0;
    background-color: #283046;
    z-index: 15;
    border-right: 2px solid #384060;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}

.draft-sequence-table tbody td:first-child {
    background-color: #1e1e2f;
    font-weight: 500;
}

/* Ensure the first header cell has higher z-index for proper layering */
.draft-sequence-table thead th:first-child {
    z-index: 20;
}

.draft-sequence-table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.2s;
}

.draft-sequence-table th.sortable:hover {
    background-color: #374060;
}

.draft-sequence-table th.sortable::after {
    content: "⇅";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.5;
}

.draft-sequence-table th.sortable.sort-asc::after {
    content: "↑";
    opacity: 1;
    color: var(--accent-green);
}

.draft-sequence-table th.sortable.sort-desc::after {
    content: "↓";
    opacity: 1;
    color: var(--accent-blue);
}

.draft-sequence-table thead tr:first-child th {
    background-color: #283046;
}

.draft-sequence-table thead tr:nth-child(2) th {
    background-color: #232b3e;
}

.draft-sequence-table tbody td {
    padding: 8px;
    text-align: center;
    border: 1px solid #384060;
}

.draft-sequence-table tbody tr:hover {
    background-color: #303550;
}

.hero-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    text-align: left;
}

.hero-cell img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.loading-message {
    text-align: center;
    padding: 20px;
    color: #a0a0b0;
    font-style: italic;
}

.win-rate-positive {
    color: #66bb6a;
}

.win-rate-negative {
    color: #ef5350;
}

.win-rate-neutral {
    color: #e0e0e0;
}

.rank-top {
    background-color: rgba(102, 187, 106, 0.2);
}

.stage-section {
    border-left: 2px solid #384060;
}

/* Sortable column styling */
.sortable-col {
    transition: background-color 0.2s;
}

.sortable-col.positive {
    color: var(--accent-green);
}

.sortable-col.negative {
    color: var(--accent-red);
}

.sortable-col.neutral {
    color: var(--warning-color);
}

.hero-image-container {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-image-container:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Team tendencies modal */
.team-name-clickable {
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.team-name-clickable:hover {
    color: var(--accent-color);
}

.tournament-name-clickable {
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.tournament-name-clickable:hover {
    color: var(--accent-color);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 1200px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.close-modal {
    color: var(--text-secondary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: var(--text-primary);
}

.tendencies-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tendencies-section {
    flex: 1;
    min-width: 300px;
}

.tendencies-section h3 {
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.tendencies-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.tendency-slot {
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
    border: 1px solid var(--border-color);
}

.tendency-slot h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--accent-color);
    font-size: 14px;
}

.tendency-heroes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tendency-hero {
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
}

.tendency-hero-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.tendency-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tendency-hero-stats {
    margin-left: 10px;
    flex-grow: 1;
}

.tendency-hero-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.tendency-hero-data {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
}

.tendency-hero-data .games {
    opacity: 0.8;
}

.tendency-hero-data .win-rate {
    font-weight: bold;
}

.tendency-hero-data .win-rate.positive {
    color: var(--accent-green);
}

.tendency-hero-data .win-rate.negative {
    color: var(--accent-red);
}

.no-data {
    padding: 10px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

.pick-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.pick-stat {
    padding: 2px 5px;
    border-radius: 3px;
    background-color: var(--bg-dark);
}

/* Win Rate Trends Component */
.trends-container {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.trends-container h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.trends-chart-container {
    height: 300px;
    margin-bottom: 2rem;
}

.opponent-trends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.opponent-trend-card {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 1rem;
    transition: transform 0.2s;
    border-left: 4px solid var(--text-secondary);
}

.opponent-trend-card:hover {
    transform: translateY(-3px);
}

.opponent-trend-card.improving {
    border-left-color: var(--accent-green);
}

.opponent-trend-card.declining {
    border-left-color: var(--accent-red);
}

.opponent-trend-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opponent-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.opponent-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.opponent-stats .stat-value {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.opponent-stats .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.trend-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.trend-icon {
    font-size: 1.2rem;
}

.trend-icon.improving {
    color: var(--accent-green);
}

.trend-icon.declining {
    color: var(--accent-red);
}

.trend-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Win Condition Analysis Component */
.analysis-container {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.analysis-container h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.analysis-container h4 {
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem;
    font-size: 1.1rem;
}

.analysis-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.duration-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.duration-card {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.duration-card h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
    text-align: center;
}

.duration-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.win-rate-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border: 3px solid var(--accent-red);
}

.win-rate-circle.positive {
    border-color: var(--accent-green);
}

.win-rate-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-primary);
}

.game-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.hero-timing-table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

.hero-timing-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.hero-timing-table th,
.hero-timing-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.hero-timing-table th {
    color: var(--text-secondary);
    font-weight: normal;
    background-color: var(--bg-lighter);
    position: sticky;
    top: 0;
    z-index: 1;
}

.hero-timing-table tbody tr:hover {
    background-color: var(--bg-lighter);
}

.hero-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.win-rate {
    font-weight: 500;
}

.win-rate.positive {
    color: var(--accent-green);
}

.win-rate.negative {
    color: var(--accent-red);
}

.insufficient-data {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

.best-timing {
    font-weight: 500;
    position: relative;
    padding-left: 18px;
}

.best-timing::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--text-secondary);
}

.best-timing.short::before {
    background-color: var(--accent-green);
}

.best-timing.medium::before {
    background-color: var(--accent-blue);
}

.best-timing.long::before {
    background-color: var(--accent-red);
}

@media (max-width: 992px) {
    .duration-cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .opponent-trends {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 576px) {

    .duration-cards,
    .opponent-trends {
        grid-template-columns: 1fr;
    }

    .trends-chart-container {
        height: 250px;
    }
}

/* Win Rate Trend Analysis Tab Styles */
.trend-analysis-container {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.trend-analysis-container .analysis-section {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Additional styling for trend analysis tab */
#trend-analysis-tab .analysis-section h3 {
    color: var(--accent-blue);
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

#trend-analysis-tab .analysis-section h4 {
    color: var(--text-primary);
    margin: 1.5rem 0 1rem;
    font-size: 1.2rem;
}

/* Media queries for responsive design */
@media (max-width: 992px) {
    .trend-analysis-container {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .trend-analysis-container {
        padding: 0.5rem;
    }
}

/* Hero Combinations Analysis Tab Styles */
.combo-analysis-container {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.combo-analysis-container .analysis-section {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 1.5rem;
}

.filter-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.combo-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combo-filter label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.combo-select {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
}

.analyze-btn {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
    margin-left: auto;
}

.analyze-btn:hover {
    background-color: #4589d0;
}

.hero-combo-trends-container {
    background-color: var(--bg-lighter);
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 300px;
}

.hero-combo-trends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.combo-card {
    background-color: var(--bg-dark);
    border-radius: 6px;
    padding: 1rem;
    border-left: 4px solid var(--accent-blue);
}

.combo-heroes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.combo-heroes img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.combo-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.combo-record {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.combo-winrate {
    font-size: 1.1rem;
    font-weight: 600;
}

.combo-winrate.positive {
    color: var(--accent-green);
}

.combo-winrate.negative {
    color: var(--accent-red);
}

.combo-trend {
    display: flex;
    margin-top: 0.5rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.combo-trend-icon {
    margin-right: 0.5rem;
}

.strategy-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.strategy-section {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 1.2rem;
}

.strategy-section h4 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.strategy-heroes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.strategy-hero-card {
    background-color: var(--bg-dark);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.strategy-hero-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.strategy-hero-name {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.strategy-hero-winrate {
    font-size: 1rem;
    font-weight: 600;
}

.strategy-hero-winrate.positive {
    color: var(--accent-green);
}

.strategy-hero-winrate.negative {
    color: var(--accent-red);
}

.strategy-hero-games {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sequence-chart-container {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 1.2rem;
    margin-bottom: 2rem;
    height: 300px;
}

.synergy-container {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 1.2rem;
    overflow-x: auto;
}

.synergy-table {
    width: 100%;
    border-collapse: collapse;
}

.synergy-table th,
.synergy-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.synergy-table th {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

.hero-combination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-combination img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
}

.synergy-winrate {
    font-weight: 600;
}

.synergy-winrate.positive {
    color: var(--accent-green);
}

.synergy-winrate.negative {
    color: var(--accent-red);
}

.trend-arrow {
    font-size: 1.2rem;
}

.trend-arrow.up {
    color: var(--accent-green);
}

.trend-arrow.down {
    color: var(--accent-red);
}

.trend-arrow.neutral {
    color: var(--text-secondary);
}

.best-with {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.best-with img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
}

@media (max-width: 992px) {
    .strategy-container {
        grid-template-columns: 1fr;
    }

    .hero-combo-trends {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .filter-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .analyze-btn {
        margin-left: 0;
        width: 100%;
    }

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

/* Draft Simulator Styles */
.simulator-container {
    padding: 1.5rem;
}

.simulator-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: var(--bg-lighter);
    padding: 1rem;
    border-radius: 8px;
}

.simulator-team-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toggle-container {
    display: flex;
    align-items: center;
    background-color: var(--bg-dark);
    border-radius: 20px;
    padding: 0.25rem;
}

.toggle-label {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.toggle-label.active {
    background-color: var(--accent-blue);
    color: white;
}

.toggle-switch-custom {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    visibility: hidden;
}

.simulator-btn {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.simulator-btn:hover {
    background-color: var(--bg-darker);
}

.simulator-btn.primary {
    background-color: var(--accent-blue);
    color: white;
}

.simulator-btn.primary:hover {
    background-color: #4589d0;
}

.draft-simulator-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 8px;
}

.simulator-team {
    background-color: var(--bg-lighter);
    border-radius: 8px;
    padding: 1rem;
}

.simulator-team h4 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.simulator-picks {
    margin-bottom: 1.5rem;
}

.simulator-heroes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.simulator-pick-slot {
    width: 80px;
    height: 60px;
    background-color: var(--bg-dark);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
}

.simulator-pick-slot:hover {
    background-color: var(--bg-darker);
}

.simulator-pick-slot.filled {
    cursor: default;
}

.simulator-pick-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.simulator-pick-slot .remove-hero {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.simulator-pick-slot:hover .remove-hero {
    opacity: 1;
}

.simulator-position-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0.5rem;
}

.position-indicator {
    width: 80px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.simulator-bans h5 {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-align: center;
}

.simulator-ban-slot {
    width: 50px;
    height: 36px;
    background-color: var(--bg-dark);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
}

.simulator-ban-slot:hover {
    background-color: var(--bg-darker);
}

.simulator-ban-slot.filled img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    filter: grayscale(100%) brightness(0.7);
}

.simulator-draft-sequence {
    display: flex;
    align-items: center;
}

.draft-steps-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.draft-step-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-step {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-dark);
}

.draft-step.completed {
    background-color: var(--accent-green);
}

.draft-step.current {
    background-color: var(--accent-blue);
}

.draft-current-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.current-step-highlight {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent-blue);
}

.current-step-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.hero-picker-container {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.hero-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-search-box input {
    background-color: var(--bg-darker);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    width: 250px;
}

.hero-search-box input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.hero-role-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.role-filter-btn {
    background-color: var(--bg-darker);
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.role-filter-btn:hover {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
}

.role-filter-btn.active {
    background-color: var(--accent-blue);
    color: white;
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 1rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    background-color: var(--bg-lighter);
    border-radius: 6px;
}

.hero-grid-item {
    width: 80px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.hero-grid-item:hover {
    transform: translateY(-3px);
}

.hero-grid-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.hero-grid-item .hero-name {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.simulator-results {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    min-height: 200px;
}

.results-placeholder,
.recommendations-placeholder {
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
    padding: 2rem 0;
}

.win-prediction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.prediction-gauge {
    width: 200px;
    height: 200px;
    position: relative;
}

.gauge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--accent-green) 0% var(--value),
            var(--accent-red) var(--value) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-inner {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--bg-lighter);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prediction-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.prediction-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.prediction-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prediction-factors {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prediction-factor {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background-color: var(--bg-lighter);
    border-radius: 4px;
}

.factor-label {
    color: var(--text-secondary);
}

.factor-value {
    font-weight: 500;
}

.factor-value.positive {
    color: var(--accent-green);
}

.factor-value.negative {
    color: var(--accent-red);
}

.factor-value.neutral {
    color: var(--text-primary);
}

.hero-recommendations {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 8px;
}

.hero-recommendations h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.recommendations-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.recommendation-card {
    background-color: var(--bg-lighter);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.recommendation-card:hover {
    transform: translateY(-3px);
}

.recommendation-image {
    width: 60px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
}

.recommendation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommendation-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.recommendation-hero {
    font-size: 0.9rem;
    font-weight: 500;
}

.recommendation-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.recommendation-winrate {
    font-weight: 600;
}

.recommendation-winrate.positive {
    color: var(--accent-green);
}

.recommendation-winrate.negative {
    color: var(--accent-red);
}

.recommendation-reason {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

@media (max-width: 1200px) {
    .draft-simulator-board {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .simulator-draft-sequence {
        order: -1;
        margin-bottom: 1rem;
    }

    .draft-steps-container {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .draft-step-indicators {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .simulator-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .simulator-team-selector {
        width: 100%;
        justify-content: space-between;
    }

    .hero-picker-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-search-box input {
        width: 100%;
    }

    .hero-role-filters {
        width: 100%;
        justify-content: space-between;
    }

    .win-prediction {
        flex-direction: column;
    }
}

/* New styles for draft turn indicators */
.simulator-team-header {
    border-bottom: 2px solid transparent;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.simulator-team-header.active-turn {
    border-bottom: 2px solid var(--accent-green);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(63, 185, 80, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(63, 185, 80, 0);
    }
}

.next-slot {
    position: relative;
    box-shadow: 0 0 0 2px var(--accent-green);
    animation: slot-pulse 1.5s infinite;
}

@keyframes slot-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.7);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(63, 185, 80, 0.4);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.7);
    }
}

.step-number {
    font-size: 0.8em;
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: 5px;
}

.slot-order {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--accent-blue);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 2;
}

.simulator-pick-slot.filled,
.simulator-ban-slot.filled {
    position: relative;
}

.current-step-text {
    display: flex;
    align-items: center;
    background-color: var(--bg-lighter);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.current-step-text strong {
    color: var(--accent-blue);
    margin-right: 5px;
}

/* Add styling for filter notes */
.filter-note {
    background-color: var(--bg-lighter);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 4px;
    margin: 8px 0 15px 0;
    font-size: 0.9rem;
    display: inline-block;
    border-left: 3px solid var(--accent-blue);
}

/* Ensure the loading message has consistent styling */
.loading-message {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.recommendations-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    background-color: var(--bg-lighter);
    border-radius: 8px;
    margin-top: 15px;
}

/* Add styling for no-data message */
.no-data {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    font-style: italic;
    background-color: var(--bg-lighter);
    border-radius: 8px;
}

/* Player Performance Tab Styles */
.player-performance-container {
    padding: 20px 0;
}

.player-filters {
    margin-bottom: 20px;
}

.player-filter,
.match-type-filter {
    display: inline-block;
    margin-right: 15px;
}

.player-select,
.match-type-select {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    min-width: 150px;
    font-size: 14px;
}

.player-stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.player-overview {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.player-stat-card {
    background-color: var(--bg-lighter);
    border-radius: 8px;
    padding: 15px;
    flex: 1;
    min-width: 180px;
    text-align: center;
}

.player-name-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.player-name-header h3 {
    margin: 0;
    color: var(--accent-blue);
}

.player-position {
    background-color: var(--bg-lighter);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.player-stat-title {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.player-stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-primary);
}

.player-stat-value.positive {
    color: var(--accent-green);
}

.player-stat-value.negative {
    color: var(--accent-red);
}

.player-hero-comparison {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 20px;
}

.player-hero-comparison h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.player-performance-table-container {
    overflow-x: auto;
    margin-top: 10px;
}

.player-performance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.player-performance-table th,
.player-performance-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.player-performance-table thead th {
    background-color: var(--bg-lighter);
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--text-secondary);
    font-weight: normal;
}

.player-performance-table tbody tr:hover {
    background-color: var(--bg-lighter);
}

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

.hero-cell img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.recommendation-cell {
    color: var(--text-secondary);
}

.recommendation-cell.positive {
    color: var(--accent-green);
}

.recommendation-cell.negative {
    color: var(--accent-red);
}

.recommendation-cell.neutral {
    color: var(--text-secondary);
}

.player-recommendations {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 20px;
}

.player-recommendations h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.player-insights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.insight-card {
    background-color: var(--bg-lighter);
    border-radius: 8px;
    padding: 15px;
    border-left: 3px solid var(--accent-blue);
}

.insight-card.positive {
    border-left-color: var(--accent-green);
}

.insight-card.negative {
    border-left-color: var(--accent-red);
}

.insight-card.neutral {
    border-left-color: var(--accent-yellow);
}

.insight-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.insight-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.insights-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    background-color: var(--bg-lighter);
    border-radius: 8px;
}

@media (max-width: 992px) {
    .player-filters .filter-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .player-filter,
    .match-type-filter {
        margin-bottom: 10px;
    }

    .player-stats-container {
        grid-template-columns: 1fr;
    }

    .player-performance-table th,
    .player-performance-table td {
        padding: 8px 5px;
        font-size: 13px;
    }
}

/* Hero Tier Tab Styles */
.player-hero-tiers {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.player-tier-row {
    display: flex;
    gap: 20px;
}

.player-tier-card,
.tier-legend-card {
    background-color: var(--bg-lighter);
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tier-container {
    margin-top: 12px;
}

.player-name {
    color: var(--accent-color);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.tier-group {
    margin-bottom: 16px;
}

.tier-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.tier-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
    margin-right: 8px;
    color: var(--bg-color);
}

.s-tier {
    background-color: #FF9500;
    /* Orange/Gold */
}

.a-tier {
    background-color: #34C759;
    /* Green */
}

.b-tier {
    background-color: #007AFF;
    /* Blue */
}

.c-tier {
    background-color: #8E8E93;
    /* Gray */
}

.tier-name {
    font-weight: bold;
}

.tier-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tier-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--lighter-bg);
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
    gap: 6px;
    cursor: default;
    user-select: none;
}

.tier-hero-img-wrap {
    position: relative;
    width: 64px;
    height: 36px;
}

.tier-hero-img {
    width: 64px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.tier-hero-ban-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    background: linear-gradient(to bottom right, transparent 45%, #ef4444 45%, #ef4444 55%, transparent 55%);
    opacity: 0.85;
    pointer-events: none;
}

.tier-hero-banned .tier-hero-img {
    filter: grayscale(80%) brightness(0.7);
}

.tier-hero-banned .tier-hero-ban-overlay {
    display: block;
}

.tier-hero-info {
    display: flex;
    flex-direction: column;
}

.tier-hero-name {
    font-weight: 500;
    line-height: 1.2;
}

.tier-hero-stats {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.win-rate {
    color: var(--success-color);
}

/* Hero Bubbles Tab */
.hero-bubbles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 6px;
}

.hero-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease;
}

.hero-bubble:hover {
    transform: scale(1.05);
}

.hero-bubble-img-wrap {
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--lighter-bg);
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    box-sizing: border-box;
}

.hero-bubble-img-wrap.win-rate-high   { border-color: #4caf50; box-shadow: 0 0 8px rgba(76, 175, 80, 0.5); background: transparent; }
.hero-bubble-img-wrap.win-rate-good   { border-color: #8bc34a; box-shadow: 0 0 8px rgba(139, 195, 74, 0.5); background: transparent; }
.hero-bubble-img-wrap.win-rate-medium { border-color: #ffeb3b; box-shadow: 0 0 8px rgba(255, 235, 59, 0.5); background: transparent; }
.hero-bubble-img-wrap.win-rate-low    { border-color: #f44336; box-shadow: 0 0 8px rgba(244, 67, 54, 0.5); background: transparent; }

#hero-bubbles-tab .player-tier-card {
    background-color: var(--bg-lighter);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 4px;
}

#hero-bubbles-tab .player-name {
    text-align: center;
}

#hero-bubbles-tab .player-tier-row {
    gap: 14px;
}

@media (max-width: 768px) {
    #hero-bubbles-tab .player-tier-row,
    #hero-tier-tab .player-tier-row {
        flex-direction: column;
        gap: 10px;
    }
    #hero-bubbles-tab .player-tier-card,
    #hero-tier-tab .player-tier-card {
        padding: 12px;
    }
    #hero-bubbles-tab .hero-bubbles-grid {
        justify-content: center;
    }
}

.hero-bubble-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-bubble-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.hero-bubble-stats .win-rate {
    font-weight: 600;
    font-size: 12px;
}

.hero-bubble-games {
    font-size: 10px;
}

/* Hero Tier Filter Section */
.hero-tier-filter-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.hero-tier-filter-section .filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-tier-filter-section .filter-info {
    font-size: 0.9em;
    color: var(--text-muted);
    font-style: italic;
}

.tier-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tier-definition {
    display: flex;
    align-items: center;
}

.tier-description {
    margin-left: 12px;
}

.no-heroes-message {
    background-color: var(--lighter-bg);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Hero Draft History Overlay */
.hero-history-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.hero-history-overlay.active {
    opacity: 1;
    visibility: visible;
}

.hero-history-content {
    background-color: var(--bg-color);
    border-radius: 10px;
    width: 90%;
    max-width: 1200px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

.hero-history-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
    z-index: 1;
}

.hero-history-icon {
    width: 120px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.hero-history-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-history-title {
    flex-grow: 1;
}

.hero-history-title h2 {
    margin: 0 0 5px 0;
    color: var(--accent-color);
    font-size: 1.8rem;
}

.hero-history-title .hero-stats {
    display: flex;
    gap: 15px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.hero-stat-value.positive {
    color: var(--success-color);
}

.hero-stat-value.negative {
    color: var(--danger-color);
}

.hero-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hero-history-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
    transition: color 0.2s;
}

.hero-history-close:hover {
    color: var(--accent-color);
}

.hero-history-body {
    padding: 20px;
}

.hero-history-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.hero-history-tab {
    padding: 20px 90px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.hero-history-tab.active {
    color: var(--accent-color);
}

.hero-history-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
}

.hero-history-tab-content {
    display: none;
}

.hero-history-tab-content.active {
    display: block;
}

.match-history-table {
    width: 100%;
    border-collapse: collapse;
}

.match-history-table th:nth-child(5),
.match-history-table td:nth-child(5),
.match-history-table th:nth-child(6),
.match-history-table td:nth-child(6) {
    min-width: 280px;
}

.hero-history-overlay .team-heroes {
    flex-wrap: nowrap;
}

.hero-history-overlay .overlay-hero-pick {
    flex-shrink: 1;
    width: 64px;
    min-width: 0;
}

.hero-history-overlay .overlay-hero-pick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}

.match-history-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}

.match-history-table td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 52px;
    vertical-align: middle;
}

.match-id-cell {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.match-history-table tr:last-child td {
    border-bottom: none;
}

.match-history-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.match-history-row {
    cursor: pointer;
}

.match-history-result {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.8rem;
}

.match-history-result.win {
    background-color: rgba(63, 185, 80, 0.2);
    color: var(--success-color);
}

.match-history-result.loss {
    background-color: rgba(248, 81, 73, 0.2);
    color: var(--danger-color);
}

.match-history-team {
    display: flex;
    align-items: center;
}

.team-side {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-right: 8px;
}

.team-side.radiant {
    background-color: rgba(63, 185, 80, 0.15);
    color: #66bb6a;
}

.team-side.dire {
    background-color: rgba(248, 81, 73, 0.15);
    color: #ef5350;
}

.pick-order {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    margin-left: 8px;
}

.team-heroes {
    display: flex;
    gap: 4px;
    align-items: center;
}

.team-heroes img {
    width: 48px;
    height: 27px;
    border-radius: 4px;
    margin: 0 1px;
    object-fit: cover;
}

.team-heroes img.selected-hero {
    border: 2px solid var(--accent-color);
    transform: scale(1.1);
}

.overlay-hero-pick {
    position: relative;
    width: 64px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.overlay-hero-pick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}

.overlay-hero-pick .pick-number {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(126, 255, 143, 1);
    font-size: 0.65rem;
    padding: 1px 3px;
    font-weight: 550;
    line-height: 1.2;
}

.overlay-hero-pick.selected-hero-wrap {
    outline: 2px solid #f59e0b;
}

.hero-counter-table {
    width: 100%;
    margin-top: 15px;
}

.hero-counter-section {
    margin-bottom: 25px;
}

.hero-counter-section h3 {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

.counter-heroes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.counter-hero-card {
    background-color: var(--lighter-bg);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter-hero-img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.counter-hero-name {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 5px;
    text-align: center;
}

.counter-hero-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter-winrate {
    font-weight: 600;
}

.counter-winrate.positive {
    color: var(--success-color);
}

.counter-winrate.negative {
    color: var(--danger-color);
}

.no-matches-message {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.match-id-cell {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.team-heroes.ban-heroes img {
    width: 30px;
    height: 24px;
    opacity: 0.7;
    filter: grayscale(40%);
    border: 1px solid rgba(255, 0, 0, 0.4);
}

.ban-hero {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    filter: grayscale(40%);
    border: 1px solid rgba(255, 0, 0, 0.4);
}

.no-bans {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Team Profiles Styles */
.team-profiles-container {
    padding: 20px;
}

.team-filter-section {
    margin-bottom: 20px;
}

.team-profile-select {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-color);
    width: 300px;
    font-size: 1rem;
}

.team-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.team-profile-header h3 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1.8rem;
}

.team-profile-stats {
    display: flex;
    gap: 30px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-stat-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.team-profile-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.profile-section {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profile-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.wide-section {
    grid-column: span 3;
}

.profile-hero-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.profile-hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--bg-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.profile-hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.profile-hero-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
}

.profile-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero-name {
    margin-top: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.profile-hero-stat {
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-hero-stat.positive {
    color: var(--success-color);
}

.profile-hero-stat.negative {
    color: var(--danger-color);
}

.tendency-section {
    margin-bottom: 15px;
}

.tendency-section h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.tendency-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tendency-hero {
    display: flex;
    align-items: center;
    background-color: var(--bg-color);
    border-radius: 5px;
    padding: 5px 10px;
}

.tendency-hero-img {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
}

.tendency-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tendency-hero-info {
    margin-left: 8px;
}

.tendency-hero-name {
    font-size: 0.9rem;
}

.tendency-hero-stat {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.profile-combinations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.combo-card {
    display: flex;
    align-items: center;
    background-color: var(--bg-color);
    border-radius: 5px;
    padding: 8px 12px;
}

.combo-heroes {
    display: flex;
    align-items: center;
}

.combo-heroes img {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    margin-right: 3px;
}

.combo-stats {
    margin-left: auto;
    text-align: right;
}

.combo-record {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.combo-winrate {
    font-size: 0.9rem;
    font-weight: 600;
}

.combo-winrate.positive {
    color: var(--success-color);
}

.combo-winrate.negative {
    color: var(--danger-color);
}

.team-matches-container {
    overflow-x: auto;
}

.team-matches-table {
    width: 100%;
    border-collapse: collapse;
}

.team-matches-table th,
.team-matches-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.team-matches-table th {
    background-color: var(--bg-color);
    color: var(--text-muted);
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1;
}

.team-matches-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.team-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.team-heroes img {
    width: 30px;
    height: 30px;
    border-radius: 3px;
}

.strategy-block {
    margin-bottom: 15px;
}

.strategy-block h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--text-color);
}

.strategy-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.strategy-hero-card {
    display: flex;
    align-items: center;
    background-color: var(--bg-color);
    border-radius: 5px;
    padding: 5px 10px;
}

.strategy-hero-img {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    overflow: hidden;
}

.strategy-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.strategy-hero-info {
    margin-left: 8px;
}

.strategy-hero-name {
    font-size: 0.9rem;
}

.strategy-hero-reason {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.strategy-notes {
    background-color: var(--bg-color);
    border-radius: 5px;
    padding: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.strategy-note-item {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.strategy-note-item:before {
    content: "•";
    position: absolute;
    left: 5px;
    color: var(--accent-color);
}

@media (max-width: 1200px) {
    .team-profile-sections {
        grid-template-columns: repeat(2, 1fr);
    }

    .wide-section {
        grid-column: span 2;
    }

    .profile-hero-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .team-profile-sections {
        grid-template-columns: 1fr;
    }

    .wide-section {
        grid-column: span 1;
    }

    .team-profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-profile-stats {
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
    }

    .profile-hero-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .profile-combinations {
        grid-template-columns: 1fr;
    }
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.yg-stats {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stat-value {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Hero Matchup Matrix Styles */
.hero-matrix-container {
    margin-top: 20px;
    background-color: var(--bg-light);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-matrix-header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.hero-matrix-header h3 {
    color: var(--accent-blue);
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.hero-matrix-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.matrix-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.matrix-controls .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.matrix-controls label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.matrix-controls .search-input {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 200px;
}

.matrix-controls .search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.matrix-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.legend-color.high-win {
    background-color: #4caf50;
}

.legend-color.neutral-win {
    background-color: #ffeb3b;
}

.legend-color.low-win {
    background-color: #f44336;
}

.legend-color.insufficient {
    background-color: #616161;
}

.matrix-description {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 10px;
    background-color: var(--bg-darker);
    border-radius: 6px;
    border-left: 4px solid var(--accent-blue);
}

.matrix-container {
    overflow-x: auto;
    max-width: 100%;
    position: relative;
}

.hero-matrix {
    display: grid;
    position: relative;
    margin-top: 10px;
}

.matrix-cell {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.2s ease;
}

.matrix-cell:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.matrix-hero-cell {
    background-color: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    z-index: 5;
}

.matrix-hero-cell.row-header {
    left: 0;
}

.matrix-hero-cell.col-header {
    top: 0;
}

.matrix-hero-cell.corner {
    left: 0;
    top: 0;
    z-index: 15;
    background-color: var(--bg-darker);
}

.matrix-hero-img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
}

.matrix-value-cell {
    position: relative;
}

.matrix-value-cell.win-rate-70-100 {
    background-color: rgba(76, 175, 80, 0.9);
}

.matrix-value-cell.win-rate-60-70 {
    background-color: rgba(76, 175, 80, 0.7);
}

.matrix-value-cell.win-rate-55-60 {
    background-color: rgba(76, 175, 80, 0.5);
}

.matrix-value-cell.win-rate-50-55 {
    background-color: rgba(255, 235, 59, 0.6);
}

.matrix-value-cell.win-rate-45-50 {
    background-color: rgba(255, 152, 0, 0.6);
}

.matrix-value-cell.win-rate-40-45 {
    background-color: rgba(244, 67, 54, 0.5);
}

.matrix-value-cell.win-rate-30-40 {
    background-color: rgba(244, 67, 54, 0.7);
}

.matrix-value-cell.win-rate-0-30 {
    background-color: rgba(244, 67, 54, 0.9);
}

.matrix-value-cell.insufficient-data {
    background-color: rgba(97, 97, 97, 0.5);
    color: var(--text-secondary);
}

.matrix-tooltip {
    position: absolute;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.9rem;
    z-index: 100;
    width: 200px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.matrix-value-cell:hover .matrix-tooltip {
    opacity: 1;
}

.matrix-tooltip-heroes {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.matrix-tooltip-heroes img {
    width: 25px;
    height: 25px;
    border-radius: 3px;
}

.matrix-tooltip-vs {
    margin: 0 5px;
    color: var(--text-secondary);
}

.matrix-tooltip-hero-name {
    font-weight: bold;
    color: var(--text-primary);
}

.matrix-tooltip-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.matrix-tooltip-stat {
    display: flex;
    justify-content: space-between;
}

.matrix-tooltip-label {
    color: var(--text-secondary);
}

.matrix-tooltip-value {
    font-weight: bold;
}

.matrix-tooltip-value.positive {
    color: var(--accent-green);
}

.matrix-tooltip-value.negative {
    color: var(--accent-red);
}

/* Responsive adjustments for the matrix */
@media (max-width: 992px) {
    .matrix-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .matrix-controls .filter-group {
        width: 100%;
    }

    .matrix-controls .search-input {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .matrix-cell {
        width: 35px;
        height: 35px;
        font-size: 0.75rem;
    }

    .matrix-hero-img {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 576px) {
    .matrix-cell {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .matrix-hero-img {
        width: 20px;
        height: 20px;
    }
}

/* Separated Charts Container Styles */
.separated-charts-container {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.chart-container.half-width {
    flex: 1;
    min-width: 0;
    background-color: rgba(30, 30, 40, 0.5);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-container h4 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    color: #e0e0e0;
    font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .separated-charts-container {
        flex-direction: column;
    }
}

.chart-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #888;
    font-style: italic;
    background-color: rgba(30, 30, 40, 0.3);
    border-radius: 8px;
    text-align: center;
}

/* Scrim Analysis Tab Styles */
.scrim-analysis-container {
    padding: 1.5rem;
    width: 100%;
}

.scrim-analysis-header {
    margin-bottom: 2rem;
    text-align: center;
}

.scrim-analysis-header h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--accent-color);
}

.scrim-analysis-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.summary-stats {
    display: flex;
    justify-content: space-between;
    margin: 1.5rem 0;
    flex-wrap: wrap;
    gap: 15px;
}

.stat-summary-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    flex: 1;
    min-width: 200px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-summary-card h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.stat-summary-card .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.stat-trend {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trend-up {
    color: var(--positive-color);
}

.trend-down {
    color: var(--negative-color);
}

.trend-neutral {
    color: var(--text-secondary);
}

.chart-container-split {
    display: flex;
    margin-top: 1.5rem;
    gap: 20px;
}

.chart-half {
    flex: 1;
    min-width: 0;
}

.top-items-list {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

.opponent-item {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem;
    border-bottom: 1px solid var(--border-color);
}

.opponent-item:last-child {
    border-bottom: none;
}

.opponent-name {
    font-weight: bold;
}

.opponent-stats {
    display: flex;
    gap: 10px;
}

.opponent-games,
.opponent-winrate {
    white-space: nowrap;
}

.correlation-metrics {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 15px;
}

.correlation-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1.2rem;
    flex: 1;
    min-width: 230px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.correlation-card h4 {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    color: var(--accent-color);
}

.correlation-value {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
}

.correlation-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.practice-vs-tournament-container {
    margin-top: 2rem;
}

.practice-vs-tournament-container h4 {
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.unused-heroes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1rem;
}

.unused-hero-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(33.33% - 10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.unused-hero-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
}

.unused-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unused-hero-info {
    flex: 1;
}

.unused-hero-name {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.unused-hero-stats {
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
}

.unused-hero-games {
    color: var(--text-secondary);
}

.unused-hero-winrate {
    font-weight: bold;
}

.unused-hero-winrate.positive {
    color: var(--positive-color);
}

.schedule-container {
    margin-top: 1.5rem;
    height: 300px;
}

.schedule-insights {
    margin-top: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1.2rem;
}

.insight-item {
    margin-bottom: 0.8rem;
    padding-left: 20px;
    position: relative;
}

.insight-item:last-child {
    margin-bottom: 0;
}

.insight-item:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

@media (max-width: 992px) {
    .chart-container-split {
        flex-direction: column;
    }

    .correlation-metrics {
        flex-direction: column;
    }

    .unused-hero-card {
        width: calc(50% - 10px);
    }
}

@media (max-width: 576px) {
    .summary-stats {
        flex-direction: column;
    }

    .unused-hero-card {
        width: 100%;
    }
}

/* React Draft Simulator Styles */
.react-app-container {
    width: 100%;
    min-height: 800px;
    margin: 20px 0;
    background-color: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#draft-simulator-iframe {
    width: 100%;
    height: 800px;
    border: none;
    overflow: hidden;
}

/* Add this CSS at the end of the file to override earlier styles */

/* Full-width draft simulator */
#draft-simulator-tab {
    padding: 0;
    margin: 0;
    height: auto;
    min-height: 100vh;
    width: 100%;
    overflow: visible;
}

#draft-simulator-iframe {
    width: 100%;
    height: 100vh;
    min-height: 1200px;
    /* Increased to accommodate all draft boxes */
    border: none;
    overflow: visible;
    margin: 0;
    padding: 0;
}

/* Team Summary Styles */
.team-summary-container {
    padding: 20px;
    width: 100%;
}

.team-summary-search {
    margin-bottom: 20px;
}

.team-summary-search .search-input {
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #222;
    color: #eee;
    font-size: 14px;
}

.team-summary-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.team-card {
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.team-card-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.team-card-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.team-card-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.team-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
}

.team-card-stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.team-card-stat-label {
    font-size: 12px;
    color: #999;
}

.team-card-section {
    margin-bottom: 15px;
}

.team-card-section-title {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.team-card-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.team-card-hero {
    display: flex;
    align-items: center;
    background: #333;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}

.team-card-hero-img {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 5px;
}

.team-card-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-hero-name {
    font-size: 12px;
    color: #eee;
}

.team-card-hero-stat {
    font-size: 11px;
    color: #999;
    margin-left: 5px;
}

.team-card-pairs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.team-card-pair {
    display: flex;
    align-items: center;
    background: #333;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}

.team-card-pair-heroes {
    display: flex;
    align-items: center;
}

.team-card-pair-hero {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 3px;
}

.team-card-pair-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-pair-stats {
    font-size: 11px;
    color: #999;
    margin-left: 5px;
}

.team-card-pair-winrate {
    font-weight: bold;
    margin-right: 3px;
}

.team-card-pair-winrate.positive {
    color: #4caf50;
}

.team-card-pair-winrate.negative {
    color: #f44336;
}

/* Meta Graph Compiled Styles */
.meta-graph-container {
    width: 100%;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.meta-graph-header {
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-lighter), var(--bg-light));
    border-bottom: 1px solid var(--border-color);
}

.meta-graph-header h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 600;
}

.meta-graph-header p {
    color: var(--text-secondary);
    margin: 0;
}

.meta-graph-controls {
    padding: 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.control-row {
    display: flex;
    gap: 20px;
    align-items: end;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.control-row:last-child {
    margin-bottom: 0;
}

.meta-graph-controls .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}

.meta-graph-controls .filter-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.meta-graph-controls .filter-select {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 0.9rem;
}

.meta-graph-controls .filter-select[multiple] {
    height: 80px;
}

.canvas-container {
    position: relative;
    width: 100%;
    height: 900px;
    background: #1a1a2e;
    border: 2px solid #444;
    overflow: hidden;
}

#metaCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

#metaCanvas:active {
    cursor: grabbing;
}

.info-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    width: 250px;
    max-height: 300px;
    overflow-y: auto;
}

.selection-info,
.graph-stats {
    margin-bottom: 15px;
}

.selection-info:last-child,
.graph-stats:last-child {
    margin-bottom: 0;
}

.info-panel h4 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

.selection-info div,
.graph-stats div {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.controls-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

.control-hint {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.control-hint:last-child {
    margin-bottom: 8px;
}

.reset-button,
.refresh-button {
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reset-button:hover,
.refresh-button:hover {
    background: #2563eb;
}

.meta-graph-legend {
    padding: 20px;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

.meta-graph-legend h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.legend-items {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-line {
    width: 30px;
    height: 3px;
    border-radius: 2px;
}

.legend-line.cross-counter {
    background-color: #4CAF50;
}

.legend-line.ban-signal {
    background-color: #FF9800;
}

.legend-line.late-counter {
    background-color: #F44336;
}

.legend-item span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.filter-info {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 5px;
}

/* Meta Graph Bottom Panel */
.meta-graph-bottom-panel {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
}

.selection-info-box,
.controls-info-box,
.graph-stats-box {
    flex: 1;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
}

.selection-info-box h4,
.controls-info-box h4,
.graph-stats-box h4 {
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-size: 1rem;
    font-weight: 600;
}

.selection-info-box #meta-selection-details {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.control-hints {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.control-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.controls-info-box .reset-button {
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.controls-info-box .reset-button:hover {
    background: var(--accent-blue-dark);
}

.graph-stats-box #meta-stats-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.graph-stats-box #meta-stats-details>div {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.graph-stats-box #meta-stats-details span {
    color: var(--accent-blue);
    font-weight: 600;
}

/* End Team Summary Styles */

/* Tournament Stats Styles */
.tournament-stats-container {
    padding: 20px;
}

.tournament-section {
    margin-bottom: 40px;
}

.tournament-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: #ddd;
}

.tournament-section .analysis-description {
    color: #aaa;
    margin-bottom: 20px;
    font-size: 14px;
}

.tournament-progression-stats {
    margin-top: 20px;
}

.tournament-gantt-chart {
    margin-top: 20px;
    overflow-x: auto;
}

/* Add to existing styles */

/* Multiselect styles */
select[multiple] {
    height: auto;
    min-height: 100px;
}

select[multiple] option {
    padding: 5px;
}

/* Hold Ctrl/Cmd to select multiple options */
#opponentFilter {
    margin-bottom: 10px;
}

#opponentFilter:after {
    content: "Hold Ctrl/Cmd to select multiple";
    display: block;
    font-size: 0.8em;
    margin-top: 5px;
    color: #666;
}

/* Mobile: Simplify tournament and opponent filters */
@media (max-width: 768px) {

    /* Make opponent multi-select appear as single-line dropdown on mobile */
    #opponentFilter {
        height: 44px !important;
        overflow: hidden;
    }

    #opponentFilter:after {
        display: none;
        /* Hide the multi-select hint on mobile */
    }

    /* Make tournament filter more compact */
    #tournamentNameFilter {
        height: 44px !important;
    }
}

/* ===============================================
   COMPREHENSIVE MOBILE RESPONSIVE ENHANCEMENTS
   =============================================== */

/* Enhanced Mobile Touch Targets and Accessibility */
@media (max-width: 768px) {

    /* Enhanced button styles for touch */
    .tab-button,
    .filter-clear-btn,
    .reload-button,
    .simulator-btn,
    .analyze-btn,
    .overlay-close-btn,
    .hero-history-close,
    .close-modal {
        min-height: 44px;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 1rem;
        transition: all 0.2s ease;
    }

    /* Override touch target for compact header buttons */
    header .reload-button {
        min-height: unset;
        padding: 5px 7px;
        font-size: 0;
        border-radius: 5px;
    }

    header .reload-button i {
        font-size: 15px;
    }

    /* Enhanced form elements */
    input[type="text"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 12px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background-color: var(--bg-light);
        color: var(--text-primary);
    }

    /* Enhanced modal and overlay responsiveness */
    .modal-content,
    .hero-history-content,
    .analysis-overlay .overlay-content {
        width: 95vw;
        max-width: none;
        max-height: 90vh;
        margin: 5vh auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    /* Enhanced navigation for mobile */
    .tab-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tab-navigation::-webkit-scrollbar {
        display: none;
    }

    .tab-button {
        min-width: 120px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Enhanced chart responsiveness */
    .chart-container {
        margin-bottom: 1rem;
    }

    .chart-container-split {
        flex-direction: column;
    }

    .chart-half {
        width: 100%;
        margin-bottom: 1rem;
    }

    .separated-charts-container {
        flex-direction: column;
    }

    .chart-container.half-width {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Enhanced matrix for mobile */
    .matrix-container {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hero-matrix {
        min-width: 600px;
    }

    .matrix-cell {
        min-width: 40px;
        min-height: 40px;
        font-size: 0.7rem;
    }

    .matrix-hero-img {
        width: 30px;
        height: 30px;
    }

    /* Enhanced draft analysis for mobile */
    .team-analysis {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .analysis-card {
        padding: 1rem;
    }

    .hero-stats-container {
        max-height: 300px;
    }

    /* Enhanced player performance for mobile */
    .player-filters {
        flex-direction: column;
        gap: 0.75rem;
    }

    .player-stats-container {
        grid-template-columns: 1fr;
    }

    .player-performance-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .player-performance-table {
        min-width: 500px;
    }

    /* Enhanced scrim analysis for mobile */
    .summary-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .correlation-metrics {
        grid-template-columns: 1fr;
    }

    .correlation-card {
        padding: 1rem;
    }

    /* Enhanced tournament stats mobile layout */
    .tournament-stats-container {
        padding: 0.5rem;
    }

    .tournament-gantt-chart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Very small screens (320px - 360px) */
@media (max-width: 360px) {
    body {
        font-size: 14px;
    }

    header {
        padding: 0.5rem;
    }

    h1 {
        font-size: 1rem;
    }

    .dashboard-container {
        padding: 0.25rem;
    }

    .stat-card {
        padding: 0.75rem 0.5rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .matches-table {
        font-size: 0.7rem;
        min-width: 400px;
    }

    .hero-matrix {
        min-width: 500px;
    }

    .matrix-cell {
        min-width: 35px;
        min-height: 35px;
        font-size: 0.6rem;
    }

    .matrix-hero-img {
        width: 25px;
        height: 25px;
    }

    /* Smaller hero grids for very small screens */
    .hero-library-grid,
    .profile-hero-grid,
    .unused-heroes-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.25rem;
    }

    .hero-card {
        padding: 0.5rem;
        min-height: auto;
    }

    .hero-card-img {
        width: 40px;
        height: 40px;
    }

    .hero-card-title h4 {
        font-size: 0.9rem;
    }
}

/* Touch-specific improvements for devices without hover */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .tab-button:hover,
    .hero-card:hover,
    .match-row:hover,
    .scrim-item:hover,
    .multi-select-option:hover,
    .recommendation-card:hover,
    .strategy-hero-card:hover {
        background-color: inherit;
        transform: none;
        box-shadow: inherit;
    }

    /* Add active states for touch feedback */
    .tab-button:active,
    .hero-card:active,
    .filter-clear-btn:active,
    .reload-button:active,
    .analyze-btn:active {
        background-color: var(--bg-lighter);
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Enhanced touch targets */
    .hero-grid-item,
    .hero-card,
    .profile-hero-card,
    .tier-hero,
    .strategy-hero-card,
    .multi-select-option {
        min-height: 44px;
        padding: 8px;
    }

    /* Better spacing for touch navigation */
    .hero-grid {
        gap: 12px;
    }

    /* Larger tap targets for hero items */
    .draft-hero-compact,
    .hero-item {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Landscape orientation optimizations for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .side-menu {
        top: 50px;
    }

    header {
        padding: 0.5rem 1rem;
    }

    .stats-overview {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .dashboard-container {
        padding: 0.5rem 1rem;
    }

    /* Adjust modals for landscape */
    .modal-content,
    .hero-history-content,
    .analysis-overlay .overlay-content {
        max-height: 85vh;
        margin: 7.5vh auto;
    }
}

/* High DPI / Retina display optimizations */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {

    /* Ensure images and icons remain crisp on high DPI displays */
    .hero-card-img img,
    .matrix-hero-img img,
    .draft-hero-compact img,
    .hero-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode specific mobile improvements */
@media (max-width: 768px) and (prefers-color-scheme: dark) {

    /* Ensure good contrast for mobile dark mode */
    .text-secondary {
        color: #e5e7eb;
    }

    /* Better focus indicators for mobile */
    input:focus,
    select:focus,
    button:focus {
        outline: 2px solid var(--accent-blue);
        outline-offset: 2px;
    }
}

/* Print styles for mobile (if needed) */
@media print {

    .side-menu,
    .menu-toggle-btn,
    .settings-bar,
    .filter-controls {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .dashboard-container {
        padding: 0 !important;
    }
}

/* Collapsible Stage 1 Details Styles */
.collapsible-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.collapsible-row:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.collapsible-header {
    padding: 12px 16px;
    background-color: rgba(59, 130, 246, 0.05);
    border-bottom: 1px solid var(--border-color);
}

.collapsible-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--accent-blue);
}

.expand-icon {
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.2s ease;
    min-width: 20px;
    text-align: center;
}

.expand-text {
    font-size: 14px;
}

/* Detailed mode styles for inline table modification */
.draft-sequence-table.detailed-mode {
    /* Add any special styling for detailed mode */
}

.draft-sequence-table.detailed-mode .collapsible-row {
    background-color: rgba(59, 130, 246, 0.1);
}

.draft-sequence-table.detailed-mode th:nth-child(7) {
    background-color: rgba(59, 130, 246, 0.1);
}

.draft-sequence-table.detailed-mode th:nth-child(8),
.draft-sequence-table.detailed-mode th:nth-child(9),
.draft-sequence-table.detailed-mode th:nth-child(10),
.draft-sequence-table.detailed-mode th:nth-child(11) {
    background-color: rgba(59, 130, 246, 0.05);
}

@media (max-width: 768px) {
    .expand-text {
        font-size: 13px;
    }

    .draft-sequence-table.detailed-mode th:nth-child(8),
    .draft-sequence-table.detailed-mode th:nth-child(9),
    .draft-sequence-table.detailed-mode th:nth-child(10),
    .draft-sequence-table.detailed-mode th:nth-child(11) {
        font-size: 12px;
        padding: 8px 4px;
    }
}

/* ====================================
   Rank Data Tab Styles
   ==================================== */

.rank-data-container {
    padding: 20px;
    max-width: 100%;
    overflow-x: auto;
}

.rank-filter-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-filter-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.rank-filter-controls .filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-filter-controls label {
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
}

.rank-date-input {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.rank-date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(0, 0, 0, 0.4);
}

.date-info-text {
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
}

.rank-main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.rank-players-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    min-width: 0;
}

.rank-former-players-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-top: 16px;
    margin-bottom: 4px;
}

.rank-former-players-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: calc(80% - 5px);
}

.rank-player-column {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-player-former {
    opacity: 0.7;
    border-color: rgba(255, 255, 255, 0.06);
}

.rank-player-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.rank-player-header h3 {
    font-size: 13px;
    margin: 0 0 6px 0;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-player-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.rank-player-stats-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rank-player-stats .games-count {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

.rank-player-stats .win-rate {
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.rank-player-stats-pills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 100%;
}

.rank-stat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    width: 100%;
    max-width: 110px;
}

.rank-stat-pill.wk {
    background: rgba(100, 160, 255, 0.2);
    border-color: rgba(100, 160, 255, 0.4);
    color: #6ba3ff;
}

.rank-stat-pill.day {
    background: rgba(255, 165, 80, 0.2);
    border-color: rgba(255, 165, 80, 0.4);
    color: #ffb366;
}

.rank-stat-pill .stat-delta {
    font-size: 10px;
    font-weight: 600;
}

.rank-hero-list {
    max-height: 900px;
    overflow-y: auto;
}

.hero-stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    transition: background 0.2s;
}

.hero-stat-row:hover {
    background: rgba(0, 0, 0, 0.3);
}

.hero-image-cell {
    position: relative;
    width: 50px;
    height: 50px;
}

.hero-image-cell img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.new-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #10b981;
    color: white;
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 700;
}

.hero-stats-cell {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
}

.hero-stats-cell .games-count {
    color: #fff;
    font-size: 16px;
}

.hero-stats-cell .win-rate {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}

.win-rate-high {
    background: rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

.win-rate-good {
    background: rgba(139, 195, 74, 0.3);
    color: #8bc34a;
}

.win-rate-medium {
    background: rgba(255, 235, 59, 0.3);
    color: #ffeb3b;
}

.win-rate-low {
    background: rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.rank-flex-check {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.flex-check-header h3 {
    font-size: 18px;
    margin: 0 0 15px 0;
    color: #fff;
    text-align: center;
}

.flex-check-table-wrapper {
    max-height: 600px;
    overflow-y: auto;
}

.flex-check-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.flex-check-table thead {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.flex-check-table th {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: #3b82f6;
    font-weight: 600;
}

.flex-check-table th.subheader {
    font-size: 11px;
    color: #aaa;
}

.flex-check-table td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.flex-check-table .hero-name-cell {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flex-check-table .hero-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}

.flex-check-table .no-data {
    color: #666;
    font-style: italic;
}

.rank-insights-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-insights-section h3 {
    font-size: 20px;
    margin: 0 0 20px 0;
    color: #fff;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.insight-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-card h4 {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: #3b82f6;
}

.insight-content {
    color: #ddd;
    font-size: 14px;
    line-height: 1.6;
}

.insight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 13px;
}

.insight-item strong {
    color: #3b82f6;
}

.insight-player-name {
    margin-bottom: 8px;
    color: #3b82f6;
}

.insight-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insight-hero-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.insight-hero-chip:hover {
    background: rgba(0, 0, 0, 0.5);
}

.insight-hero-img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.insight-hero-name {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
}

.insight-hero-stats {
    color: #aaa;
    font-size: 11px;
}

.insight-flex-trend {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.insight-flex-details {
    flex: 1;
}

.insight-flex-meta {
    color: #aaa;
    font-size: 11px;
    margin-top: 4px;
}

.no-data {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.error-message {
    color: #f44336;
    text-align: center;
    padding: 40px;
    font-size: 16px;
}

/* Responsive adjustments */

@media (max-width: 1200px) {
    .rank-players-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1400px) and (min-width: 1201px) {
    .rank-players-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .rank-players-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-grid {
        grid-template-columns: 1fr;
    }

    .rank-filter-controls {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Admin Panel Styles */

/* ===========================
   Issues Page Styles (Main Tab)
   =========================== */

.issues-page-container {
    padding: 20px;
    max-width: 1800px;
    margin: 0 auto;
}

.issues-page-header {
    margin-bottom: 24px;
}

.issues-page-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 8px;
}

.issues-page-header p {
    font-size: 14px;
    color: #9e9e9e;
}

/* Filters */
.issues-page-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: #252d36;
    border-radius: 8px;
    flex-wrap: wrap;
}

.issues-page-filter-select {
    flex: 1;
    min-width: 150px;
    padding: 10px 14px;
    background: #2d3842;
    border: 1px solid #3d4852;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.issues-page-filter-select:hover,
.issues-page-filter-select:focus {
    border-color: #4a9eff;
    outline: none;
}

.issues-page-add-issue-btn {
    padding: 10px 20px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.issues-page-add-issue-btn:hover {
    background: #059669;
}

.issues-page-refresh-btn {
    padding: 10px 20px;
    background: #4a9eff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.issues-page-refresh-btn:hover {
    background: #3a8eef;
}

/* Match Selection Overlay */
.match-selection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.match-selection-modal {
    background: #1e2730;
    border-radius: 12px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.match-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #2d3748;
}

.match-selection-header h3 {
    margin: 0;
    font-size: 20px;
    color: #fff;
}

.match-selection-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}

.match-selection-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.match-selection-filters {
    padding: 15px 20px;
    border-bottom: 1px solid #2d3748;
}

.match-selection-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Match cards in selection overlay use the same styles as match history */
.match-selection-list .match-mobile-card {
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.match-selection-list .match-mobile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Issues Table */
.issues-page-content {
    background: #1e2730;
    border-radius: 8px;
    padding: 20px;
}

.issues-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.issues-match-section {
    background: #252d36;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2d3842;
}

.issues-match-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #2d3842;
    border-bottom: 2px solid #3d4852;
}

.issues-match-title {
    font-size: 18px;
    font-weight: 700;
    color: #4a9eff;
}

.issues-match-meta {
    font-size: 13px;
    color: #9e9e9e;
    flex: 1;
}

.issues-match-count {
    font-size: 13px;
    color: #e0e0e0;
    background: rgba(74, 158, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
}

/* Table Styles */
.issues-table {
    width: 100%;
    border-collapse: collapse;
}

.issues-table thead th {
    background: #1a1f28;
    color: #9e9e9e;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #3d4852;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.issues-table tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid #2d3842;
    vertical-align: top;
}

.issues-table tbody tr:last-child td {
    border-bottom: none;
}

.issue-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Column Widths */
.col-draft {
    width: 30%;
    min-width: 335px;
}

.col-coach-notes {
    width: 18%;
    min-width: 110px;
}

.col-issue {
    width: 24%;
}

.col-photo {
    width: 28%;
    min-width: 200px;
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Specific height limits for different views */
.issues-match-section .col-photo,
.severity-subsection .col-photo {
    max-height: 350px;
}

.category-match-section .col-photo {
    max-height: 650px;
}

/* Draft Board Compact */
.draft-board-compact {
    background: #1a1f28;
    border-radius: 6px;
    padding: 12px;
}

.draft-result {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.draft-result.win {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.draft-result.loss {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.draft-teams-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.draft-team-compact {
    background: #252d36;
    padding: 8px;
    border-radius: 4px;
}

.draft-team-name {
    font-size: 12px;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.side-badge {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 600;
}

.side-badge.radiant {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.side-badge.dire {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pick-badge {
    font-size: 10px;
    color: #9e9e9e;
}

.draft-heroes-compact,
.draft-bans-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 4px;
}

.no-draft {
    color: #9e9e9e;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* Issue Details */
.issue-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issue-header-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.issue-player {
    font-weight: 700;
    font-size: 14px;
    color: #4a9eff;
}

.issue-time {
    font-size: 13px;
    color: #10b981;
    font-weight: 600;
}

.issue-impact {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 3px;
}

.issue-impact.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.issue-impact.high {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.issue-impact.medium {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.issue-impact.low {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.issue-status {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 3px;
    margin-left: auto;
}

.issue-status.status-active {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.issue-status.status-acknowledged {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.issue-status.status-addressed {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.issue-status.status-resolved {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.issue-category {
    font-size: 12px;
    color: #9e9e9e;
    font-weight: 600;
}

.issue-description {
    font-size: 15px;
    color: #e0e0e0;
    line-height: 1.6;
}

.issue-phase {
    font-size: 11px;
    color: #9e9e9e;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

/* Coach Notes */
.col-coach-notes {
    font-size: 15px;
    color: #e0e0e0;
    line-height: 1.7;
    padding: 12px;
}

/* Editable fields */
.editable-field {
    cursor: pointer;
    transition: background 0.2s;
    padding: 8px;
    border-radius: 4px;
}

.editable-field:hover {
    background: rgba(74, 158, 255, 0.1);
    border: 1px dashed #4a9eff;
}

/* Photo Preview */
.photo-preview {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    overflow: visible;
    transition: transform 0.2s;
    max-height: 300px;
}

.photo-preview:hover {
    transform: scale(1.02);
}

.photo-preview img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.photo-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
}

.photo-preview:hover .photo-delete-btn {
    display: flex;
}

.photo-delete-btn:hover {
    background: rgba(239, 68, 68, 1);
}

.photo-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.no-photo {
    color: #9e9e9e;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

/* ==================== Analytics Dashboard Pivot Table Styles ==================== */

.pivot-table-container {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #2d3842;
    border-radius: 8px;
    background: #1a1f28;
    max-width: 100%;
}

.pivot-table-container::-webkit-scrollbar {
    height: 10px;
}

.pivot-table-container::-webkit-scrollbar-track {
    background: #1a1f28;
}

.pivot-table-container::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 5px;
}

.pivot-table-container::-webkit-scrollbar-thumb:hover {
    background: #5a6578;
}

.pivot-table-container .detailed-pivot-table {
    border-collapse: collapse;
    margin: 0;
    width: auto;
    min-width: 100%;
}

.pivot-table-container .detailed-pivot-table th,
.pivot-table-container .detailed-pivot-table td {
    height: 40px;
    vertical-align: middle;
    padding: 8px 12px;
    border: 1px solid #2d3842;
}

/* Sticky first column (Player) */
.pivot-sticky-left {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #1e2730 !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
    min-width: 100px;
    white-space: nowrap;
}

/* Sticky last column (Total) */
.pivot-sticky-right {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #1e2730 !important;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
}

/* Header cells in sticky columns need higher z-index */
thead .pivot-sticky-left,
thead .pivot-sticky-right,
tfoot .pivot-sticky-left,
tfoot .pivot-sticky-right {
    z-index: 4;
}

/* Ensure tournament columns have minimum width for readability */
.pivot-header-category {
    min-width: 120px;
    max-width: 150px;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.3;
    height: auto !important;
    padding: 6px 8px !important;
}

.pivot-header-player,
.pivot-header-total {
    height: auto !important;
    vertical-align: middle;
}

.pivot-cell {
    min-width: 50px;
    white-space: nowrap;
    text-align: center;
}

/* Multi-select highlight for pivot cells */
.pivot-cell-selected-multi {
    outline: 3px solid #3b82f6 !important;
    outline-offset: -3px;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
    position: relative;
}

.pivot-cell-selected-multi::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #3b82f6;
    pointer-events: none;
}

/* Category × Tournament matrix: vertically scrollable, 10 rows visible */
.pivot-category-scrollable {
    max-height: calc(10 * 40px + 120px); /* 10 data rows + header + footer */
    overflow-y: auto;
}

.pivot-category-scrollable::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

.pivot-category-scrollable::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}

.pivot-category-scrollable thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.pivot-category-scrollable tfoot {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* ==================== Insights Card Styles ==================== */

.insights-card {
    background: #1a1f28;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.insights-card h3 {
    color: #e2e8f0;
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
}

.insights-card.full-width {
    grid-column: 1 / -1;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.insight-section {
    background: #1e293b;
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insight-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.insight-section h4 {
    color: #e2e8f0;
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.insight-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-section li {
    padding: 12px 0;
    border-bottom: 1px solid #334155;
}

.insight-section li:last-child {
    border-bottom: none;
}

.insight-section li>div:first-child {
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.insight-section li>div:nth-child(2) {
    color: #cbd5e0;
    font-size: 14px;
}

.insight-section li>div:nth-child(3) {
    color: #94a3b8;
    font-size: 13px;
    margin-top: 4px;
}

/* ==================== Analytics Dashboard Timeline & Breakdowns ==================== */

/* Breakdowns Grid */
.breakdowns-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0;
}

.breakdown-card {
    background: #1a1f28;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.breakdown-card h3 {
    color: #e2e8f0;
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
}

.breakdown-card.full-width {
    grid-column: 1 / -1;
}

/* Aggregated Timeline Grid */
.agg-tl-wrapper {
    border-radius: 8px;
    overflow: hidden;
    background: #0d1b2a;
    border: 1px solid #1e3a5f;
}

.agg-tl-header {
    display: grid;
    grid-template-columns: 10fr 10fr 15fr 25fr;
}

.agg-tl-hdr {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 10px 8px;
    border-right: 1px solid #1e3a5f;
    border-bottom: 2px solid #1e3a5f;
    background: #0a1520;
}

.agg-tl-hdr:last-child {
    border-right: none;
}

.agg-tl-bars {
    display: grid;
    grid-template-columns: 10fr 10fr 15fr 25fr;
    height: 110px;
}

.agg-tl-bar {
    position: relative;
    border-right: 1px solid #1e3a5f;
    overflow: hidden;
    min-height: 0;
}

.agg-tl-bar:last-child {
    border-right: none;
}

.agg-tl-laning {
    background: rgba(16, 185, 129, 0.04);
}

.agg-tl-early {
    background: rgba(234, 179, 8, 0.03);
}

.agg-tl-mid {
    background: rgba(249, 115, 22, 0.04);
}

.agg-tl-late {
    background: rgba(239, 68, 68, 0.05);
}

.agg-bubble {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border: 2px solid transparent;
}

.agg-bubble:hover {
    transform: translateY(-50%) scale(1.2);
    z-index: 10;
    border-color: #fff;
}

.agg-bubble.critical {
    background: radial-gradient(circle at 30% 30%, #fca5a5, #ef4444);
    color: #fff;
    border-color: #dc2626;
}

.agg-bubble.high {
    background: radial-gradient(circle at 30% 30%, #fdba74, #f97316);
    color: #fff;
    border-color: #ea580c;
}

.agg-bubble.medium {
    background: radial-gradient(circle at 30% 30%, #fcd34d, #fbbf24);
    color: #1f2937;
    border-color: #f59e0b;
}

.agg-bubble.low {
    background: radial-gradient(circle at 30% 30%, #6ee7b7, #10b981);
    color: #fff;
    border-color: #059669;
}

/* Admin-only content visibility */
.admin-only {
    display: none !important;
}

/* Show admin-only tab buttons when user is admin */
body.is-admin .tab-button.admin-only {
    display: flex !important;
}

/* Admin panel tab — only for panel admins (subset of admins) */
.panel-only { display: none !important; }
body.is-panel-admin .tab-button.panel-only {
    display: flex !important;
}

/* Show admin-only tab content ONLY when it's also active */
body.is-admin .tab-content.admin-only.active {
    display: block !important;
}

/* Show admin-only widgets (like AI chat) when user is admin */
body.is-admin .ai-chat-widget.admin-only {
    display: block !important;
}

/* Show admin-only header buttons when user is admin */
body.is-admin .reload-button.admin-only {
    display: flex !important;
}


/* --- New Match History Layout Styles --- */

.matches-table-container {
    overflow-x: auto;
}

.league-cell .stacked-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
}

.draft-cell-merged {
    padding: 8px 12px;
    vertical-align: middle !important;
}

.draft-board-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.draft-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.draft-team-row:hover {
    background: rgba(0, 0, 0, 0.3);
}

.draft-heroes-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dr-picks {
    display: flex;
    gap: 4px;
}

.dr-bans {
    display: flex;
    gap: 4px;
    opacity: 0.85;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.dr-hero-img img {
    width: 48px;
    height: 27px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dr-ban-img {
    position: relative;
}

.dr-ban-img img {
    width: 32px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    filter: grayscale(80%);
}

.dr-ban-img .ban-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom right, transparent 45%, #ef4444 45%, #ef4444 55%, transparent 55%);
    opacity: 0.8;
}

.stats-cell-sidebar {
    padding: 8px 12px;
    vertical-align: top !important;
    width: 320px;
}

.stats-sidebar-container {
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
}

.mini-stats-table {
    width: 100%;
    margin-top: 5px;
}

.mini-stats-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.mini-stats-table td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    text-align: center;
}

.mini-stats-table td.hero-cell {
    text-align: left;
    width: 40px;
}

.mini-hero-img {
    width: 36px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
}

.wr-high {
    color: #10b981;
    font-weight: 700;
}

.wr-mid {
    color: #fbbf24;
}

.wr-low {
    color: #ef4444;
    font-weight: 700;
}

.stats-toggle-controls {
    background: var(--bg-dark);
    padding: 3px;
    border-radius: 6px;
    display: flex;
}

.stats-toggle-btn {
    transition: all 0.2s;
    font-weight: 600;
}

.stats-toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

/* Match Viewer Overlay Styles */
.match-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.match-viewer-modal {
    background: var(--bg-dark);
    border-radius: 12px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

.match-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.match-viewer-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.match-viewer-header h3 a {
    color: #3498db;
    text-decoration: none;
    transition: all 0.2s ease;
}

.match-viewer-header h3 a:hover {
    color: #5dade2;
    text-decoration: underline;
}

.match-viewer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    transition: color 0.2s;
}

.match-viewer-close:hover {
    color: var(--danger-color);
}

.match-viewer-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.match-viewer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    gap: 15px;
}

.match-viewer-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.match-viewer-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--danger-color);
}

.match-viewer-teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.match-viewer-team {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 12px;
}

/* Mobile - Stack Match Viewer vertically */
@media (max-width: 768px) {
    .match-viewer-draft {
        flex-direction: column !important;
    }

    .match-viewer-teams {
        grid-template-columns: 1fr !important;
    }

    .match-viewer-modal {
        max-width: 100%;
        max-height: 95vh;
        margin: 10px;
    }
}

/* Match Viewer WON/LOST button focus states */
.match-viewer-draft button:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* View Button in Match History */
.match-view-btn {
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.match-view-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.match-view-btn:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.match-mobile-export-btn,
.match-mobile-draft-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 5px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.match-mobile-export-btn:hover { background: #1b6ca8; color: #fff; border-color: #1b6ca8; }
.match-mobile-draft-btn:hover  { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* Adjusted match history row styles */
.match-row .draft-cell {
    padding: 6px 8px;
}

.match-row .team-draft {
    max-width: none;
}

.match-row .draft-heroes-compact {
    gap: 2px;
}

/* Compact draft hero images */
.match-row .draft-heroes-compact .hero-pick img,
.match-row .draft-heroes-compact .hero-ban img {
    width: 36px !important;
    height: 36px !important;
}

.match-row .team-info {
    gap: 6px;
    margin-bottom: 4px;
}

.match-row .team-info .team-name {
    font-size: 13px;
}

.match-row .team-info .team-side,
.match-row .team-info .pick-order {
    font-size: 10px;
    padding: 2px 6px;
}

/* View button cell */
.view-cell {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 8px !important;
    text-align: center;
    vertical-align: middle !important;
}

/* Reduce draft cell width to make room for view button */
.match-row .draft-cell {
    width: auto !important;
    max-width: 380px;
}

/* Pro Meta Draft (prometadraft) Styles */
.prometadraft-container {
    width: 100%;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.prometadraft-header {
    padding: 20px;
    background: linear-gradient(135deg, #1a237e, #283593);
    border-bottom: 1px solid var(--border-color);
}

.prometadraft-header h3 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 600;
}

.prometadraft-header p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.prometadraft-controls {
    padding: 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.prometadraft-controls .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}

.prometadraft-controls .filter-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.prometadraft-controls .filter-select,
.prometadraft-controls .filter-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 0.9rem;
}

.prometadraft-controls .filter-select[multiple] {
    height: 80px;
}

#pmd-canvas-container {
    position: relative;
    width: 100%;
    height: 900px;
    background: #0a0a0f;
    border: 2px solid #333;
    overflow: hidden;
}

#pmdCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

#pmdCanvas:active {
    cursor: grabbing;
}

.prometadraft-bottom-panel {
    display: flex;
    gap: 20px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.prometadraft-legend {
    padding: 20px;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

.prometadraft-legend h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.prometadraft-legend h5 {
    color: var(--text-secondary);
    margin: 15px 0 10px;
    font-size: 0.95rem;
}

.legend-colors {
    margin-top: 15px;
}

.legend-colors div {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 5px 0;
}

/* Download button styling */
.download-button {
    background: linear-gradient(135deg, #1a237e, #283593);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.download-button:hover {
    background: linear-gradient(135deg, #283593, #3949ab);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 35, 126, 0.3);
}

.download-button i {
    font-size: 1rem;
}

/* ==========================================================================
   METAGRAPH TAB STYLES
   Hero Meta Graph - Counter visualization tool
   All classes prefixed with 'mg-' to avoid conflicts
   ========================================================================== */

/* Main container */
.mg-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);
    overflow: hidden;
}

/* Metagraph tab: use full width */
#metagraph-tab {
    margin-right: -10px;
    margin-left: -10px;
    width: calc(100% + 20px);
}

/* Header */
.mg-header {
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 15px;
    border-bottom: 2px solid #c9302c;
    box-shadow: 0 2px 10px rgba(201, 48, 44, 0.3);
}

.mg-header h1 {
    color: #c9302c;
    font-size: 1.4em;
    margin-bottom: 8px;
    text-align: center;
    text-shadow: 0 0 10px rgba(201, 48, 44, 0.5);
}

.mg-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mg-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mg-input-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-compact-btn {
    padding: 6px 12px;
    background: rgba(201, 48, 44, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.3s ease;
}

.mg-compact-btn:hover {
    background: rgba(201, 48, 44, 1);
    transform: translateY(-1px);
}

.mg-compact-dropdown {
    min-width: 120px;
    max-width: 150px;
    padding: 6px 8px;
    border: 1px solid #444;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-size: 12px;
}

.mg-compact-dropdown option {
    background: #1a1a2e;
    color: #e0e0e0;
}

.mg-compact-input {
    min-width: 100px;
    max-width: 120px;
    padding: 6px 8px;
    border: 1px solid #444;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-size: 12px;
}

.mg-counters-text {
    color: #c9302c;
    font-weight: bold;
    font-size: 16px;
}

.mg-delete-btn {
    background: linear-gradient(45deg, #dc3545, #c82333) !important;
}

.mg-delete-btn:hover {
    background: linear-gradient(45deg, #c82333, #dc3545) !important;
}

/* Patch Controls */
.mg-patch-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Meta Controls */
.mg-meta-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}

.mg-meta-toggle-btn {
    padding: 8px 16px;
    background: rgba(147, 112, 219, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}

.mg-meta-toggle-btn:hover {
    background: rgba(147, 112, 219, 1);
}

.mg-meta-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(26, 26, 46, 0.95);
    border: 2px solid #9370db;
    border-radius: 8px;
    padding: 15px;
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mg-meta-panel.hidden {
    display: none;
}

.mg-meta-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 15px;
    max-height: 250px;
    overflow-y: auto;
}

.mg-meta-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    font-size: 12px;
}

.mg-meta-checkbox-item input[type="checkbox"] {
    accent-color: #9370db;
}

.mg-meta-checkbox-item label {
    color: #e0e0e0;
    cursor: pointer;
    user-select: none;
}

.mg-meta-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid #444;
    padding-top: 10px;
}

.mg-meta-btn {
    background: rgba(147, 112, 219, 0.8) !important;
}

.mg-meta-btn:hover {
    background: rgba(147, 112, 219, 1) !important;
}

/* Meta View Controls */
.mg-meta-view-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mg-meta-view-btn {
    padding: 6px 10px;
    background: rgba(100, 149, 237, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mg-meta-view-btn:hover {
    background: rgba(100, 149, 237, 1.0);
    transform: translateY(-1px);
}

.mg-meta-view-btn.active {
    background: rgba(65, 105, 225, 1.0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Meta Save Controls */
.mg-meta-save-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mg-analyze-btn {
    background: rgba(255, 193, 7, 0.8) !important;
    color: #000 !important;
}

.mg-analyze-btn:hover {
    background: rgba(255, 193, 7, 1) !important;
}

/* Main Content */
.mg-main-content {
    flex: 1;
    position: relative;
    padding: 0;
    overflow: hidden;
    width: 100%;
    min-height: 0;
}

/* Canvas Container */
.mg-canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: radial-gradient(circle at center, #1b1b24 0%, #0b0b12 100%);
    overflow: hidden;
}

#metagraphCanvas {
    display: block;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f0f 100%);
    cursor: grab;
    width: 100%;
    height: 100%;
}

#metagraphCanvas:active {
    cursor: grabbing;
}

/* Canvas Controls */
.mg-canvas-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mg-zoom-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mg-zoom-controls button {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 48, 44, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.mg-zoom-controls button:hover {
    background: rgba(201, 48, 44, 1);
}

.mg-canvas-info {
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #ccc;
    text-align: center;
}

/* Analysis Modal */
.mg-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.mg-modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 0;
    border: 2px solid #c9302c;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(201, 48, 44, 0.5);
}

.mg-modal-header {
    padding: 20px;
    border-bottom: 2px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px 10px 0 0;
}

.mg-modal-header h2 {
    color: #c9302c;
    margin: 0;
    font-size: 20px;
}

.mg-close-btn {
    background: none !important;
    border: none !important;
    color: #c9302c !important;
    font-size: 28px !important;
    cursor: pointer;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.mg-close-btn:hover {
    background: rgba(201, 48, 44, 0.2) !important;
}

.mg-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    color: #e0e0e0;
}

.mg-analysis-section {
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #c9302c;
}

.mg-analysis-section h3 {
    color: #c9302c;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .mg-control-row {
        flex-wrap: wrap;
    }

    .mg-meta-view-controls {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .mg-header h1 {
        font-size: 1.4em;
    }

    .mg-controls {
        gap: 6px;
    }

    .mg-canvas-container {
        min-height: 400px;
    }

    .mg-meta-panel {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 400px;
    }

    /* Horizontal scroll toolbar — match Hero No G pattern so controls stay on one row */
    .mg-control-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mg-control-row::-webkit-scrollbar {
        display: none;
    }
    .mg-control-row > * {
        flex-shrink: 0;
    }
    .mg-input-section,
    .mg-patch-controls,
    .mg-meta-controls,
    .mg-meta-view-controls,
    .mg-meta-save-controls {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
}

/* ===== Issue Review Mode ===== */
.issue-review-overlay {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.review-mode-btn:hover {
    background: #059669 !important;
    transform: translateY(-2px);
    transition: all 0.2s;
}

.review-container {
    color: #e5e7eb;
}

.review-container h3 {
    color: #10b981;
    margin: 10px 0;
    font-size: 16px;
}

.detail-card {
    background: #1a1f28;
    padding: 15px;
    border-radius: 8px;
}

.detail-card p {
    margin: 5px 0;
    color: #d1d5db;
}

.review-photos img:hover {
    opacity: 0.8;
    transition: opacity 0.2s;
}

/* Ensure draft boards render correctly */
.review-draft-section .draft-board-compact {
    margin: 0 auto;
}

/* ==================== Analytics Dashboard Mobile Styles ==================== */

/* Issue Gallery - Mobile: stack everything vertically */
@media (max-width: 768px) {

    .gallery-issue-info,
    .analytics-gallery-header .gallery-issue-info {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
        padding: 0 !important;
    }

    .gallery-issue-meta {
        flex: none !important;
        width: 100% !important;
    }

    .gallery-draft-boards,
    .gallery-draft-boards-inner {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        flex: none !important;
    }

    .gallery-draft-boards>div,
    .gallery-draft-boards-inner>div {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .analytics-gallery-header {
        padding: 8px !important;
        max-height: 32vh !important;
        overflow-y: auto !important;
    }

    .mistake-issue-gallery-header {
        padding: 8px !important;
        max-height: 32vh !important;
        overflow-y: auto !important;
    }

    /* Side nav buttons (Prev/Next Issue & Game) overlap the video controls
       on mobile and capture touches — hide; bottom bar already has navigation. */
    .gallery-side-nav,
    .issue-nav-btn.prev-issue,
    .issue-nav-btn.next-issue {
        display: none !important;
    }

    /* Shrink gallery draft hero tiles so video gets more vertical room */
    .gallery-draft-boards img,
    .gallery-draft-boards-inner img {
        height: 24px !important;
    }

    /* Gallery video: fill available space; the side nav margins are pointless
       now that those buttons are hidden, and inline-flex was leaving the
       <video> at intrinsic size (huge black borders). */
    .fs-gallery-image-container {
        margin: 0 !important;
        padding: 6px !important;
    }

    .fs-gallery-video-wrapper {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .fs-gallery-video-wrapper[style*="display: none"] {
        display: none !important;
    }

    .fs-gallery-video {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
    }

    .gallery-draft-team-name,
    .gallery-draft-boards .draft-team-name,
    .gallery-draft-boards-inner .draft-team-name {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .gallery-draft-boards,
    .gallery-draft-boards-inner {
        gap: 6px !important;
    }
}

/* Mobile: Horizontal scrollable tabs and stacked panels */
@media (max-width: 768px) {

    /* Issues view tabs - horizontal scroll */
    .issues-view-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }

    .issues-view-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .issues-view-tabs::-webkit-scrollbar-thumb {
        background: #4a5568;
        border-radius: 2px;
    }

    .issues-view-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Stack "By Severity" and "By Category" vertically in drill-down panel */
    .pivot-breakdown-panels {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px !important;
    }

    /* Player x Tournament Matrix - smaller fonts and better scrolling */
    .pivot-table-container {
        -webkit-overflow-scrolling: touch;
    }

    .pivot-table-container .detailed-pivot-table {
        font-size: 13px;
    }

    .pivot-table-container .detailed-pivot-table th,
    .pivot-table-container .detailed-pivot-table td {
        padding: 10px 12px;
        height: 44px;
        min-width: 44px;
    }

    .pivot-header-category {
        min-width: 100px;
        max-width: 120px;
        font-size: 11px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        white-space: nowrap;
        padding: 10px 6px !important;
        height: auto !important;
        max-height: 140px;
    }

    .pivot-cell {
        min-width: 44px;
        font-size: 13px;
        cursor: pointer;
        text-align: center;
        padding: 8px 6px !important;
    }

    .pivot-sticky-left {
        font-size: 12px;
        min-width: 90px !important;
        white-space: nowrap;
    }

    .pivot-sticky-right {
        font-size: 12px;
        min-width: 50px;
    }

    /* Make breakdown bars more tappable on mobile */
    .breakdown-bar-item {
        min-height: 60px;
        padding: 12px !important;
    }

    .breakdown-bar-item:active {
        background: #2d4a6f !important;
        transform: scale(0.98);
    }

    /* Pivot details box mobile adjustments */
    .pivot-details-box {
        max-height: 80vh;
        overflow-y: auto;
    }

    .pivot-details-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start !important;
    }

    .pivot-details-header h4 {
        font-size: 14px !important;
    }

    /* Issue gallery header adjustments */
    .mistake-issue-gallery-header {
        padding: 10px 12px !important;
    }

    /* Smaller navigation buttons on mobile */
    .issue-nav-btn.prev-issue,
    .issue-nav-btn.next-issue {
        width: 45px !important;
        height: 80px !important;
        font-size: 16px !important;
    }

    .issue-nav-btn.prev-issue {
        left: 50px !important;
    }

    .issue-nav-btn.next-issue {
        right: 50px !important;
    }

    /* Pivot details list items */
    .pivot-detail-item {
        padding: 12px !important;
    }

    .pivot-detail-meta {
        flex: none !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    /* Rule-card instance row: meta is inline-styled flex:0 0 220px next to
       the draft container — stack them on mobile so the draft has room. */
    .pivot-detail-item > div[style*="display: flex"][style*="gap: 20px"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .pivot-detail-item .pivot-detail-meta[style*="flex: 0 0 220px"] {
        flex: none !important;
        width: 100% !important;
    }
    .pivot-detail-item [id^="rule-card-draft-"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .pivot-detail-screenshots img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Video thumbnails: fill full mobile width */
    .pivot-detail-screenshots {
        gap: 8px !important;
    }

    .pivot-screenshot.is-video,
    .pivot-screenshot.video-thumbnail,
    .pivot-screenshot {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        max-height: none !important;
        aspect-ratio: auto;
    }

    .pivot-screenshot.is-video video,
    .pivot-screenshot.video-thumbnail video,
    .pivot-screenshot video {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 56vw !important;
        height: auto !important;
        display: block;
        object-fit: cover;
    }

    /* The rule-card video thumbnail wrapper is inline with no explicit
       height — give it a definite aspect ratio so it doesn't collapse
       and so the play-button overlay sits correctly. */
    .pivot-screenshot.video-thumbnail {
        aspect-ratio: 16 / 9 !important;
        overflow: hidden;
        border-radius: 6px;
    }

    /* Stack the two team draft boards vertically on mobile */
    .pivot-cell-draft {
        flex-direction: column !important;
        max-width: 100% !important;
    }
    .pivot-cell-draft > div {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Inline-styled mini hero tiles (renderMiniHero) — override min-width so they shrink */
    .pivot-cell-draft div[style*="min-width: 52px"],
    .pivot-cell-draft div[style*="min-width: 36px"] {
        min-width: 0 !important;
    }
    /* And the pick/ban rows themselves should be allowed to shrink */
    .pivot-cell-draft div[style*="display: flex"] {
        min-width: 0 !important;
        flex-wrap: nowrap;
    }

    /* Timeline Distribution - Mobile Optimizations */
    .timeline-match-label {
        width: 100px !important;
        font-size: 10px !important;
        padding: 6px 8px !important;
    }

    .timeline-match-bar {
        height: 35px !important;
    }

    .timeline-phase-label {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }

    .timeline-dot {
        width: 10px !important;
        height: 10px !important;
        border-width: 1px !important;
    }

    .timeline-dot:hover {
        transform: translate(-50%, -50%) scale(2) !important;
    }

    .detailed-timeline {
        max-height: 400px;
    }

    /* Breakdowns Grid - Stack on Mobile */
    .breakdowns-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .breakdown-card {
        padding: 14px !important;
    }

    .breakdown-card h3 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    /* Issues page filters/buttons — keep within viewport, smaller controls */
    .issues-page-container {
        padding: 0 4px;
    }

    .issues-page-header h3 {
        font-size: 16px;
    }
    .issues-page-header p {
        font-size: 12px;
    }

    .issues-page-filters {
        gap: 6px !important;
        padding: 8px !important;
        margin-bottom: 12px !important;
    }

    .issues-page-filters > * {
        flex: 0 1 auto !important;
    }

    .issues-page-filter-select {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 6px 8px !important;
        font-size: 12px !important;
        box-sizing: border-box;
    }

    .issues-page-filters button,
    .issues-page-add-issue-btn,
    .issues-page-refresh-btn,
    .issues-page-export-btn,
    .issues-page-batch-status-btn,
    .issues-page-filter-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .issues-page-filters label {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .issues-page-filters label span {
        font-size: 11px !important;
    }

    .issues-page-content {
        padding: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .issues-match-section-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .issues-match-title {
        font-size: 14px;
    }

    .issues-match-meta,
    .issues-match-count {
        font-size: 11px;
    }

    .issues-table thead th {
        font-size: 10px;
        padding: 6px 4px;
        letter-spacing: 0.2px;
    }

    .issues-table tbody td {
        padding: 8px 4px;
        font-size: 12px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .pivot-breakdown-panels {
        padding: 8px !important;
    }

    .pivot-header-category {
        min-width: 80px;
        max-width: 100px;
        font-size: 10px;
        max-height: 120px;
    }

    .pivot-cell {
        min-width: 40px;
        font-size: 12px;
        text-align: center;
        padding: 6px 4px !important;
    }

    .pivot-table-container .detailed-pivot-table th,
    .pivot-table-container .detailed-pivot-table td {
        padding: 8px 10px;
        height: 40px;
        min-width: 40px;
    }

    .pivot-sticky-left {
        min-width: 80px !important;
        font-size: 11px;
        white-space: nowrap;
    }

    .pivot-sticky-right {
        min-width: 40px;
        font-size: 11px;
    }

    /* Timeline - Very small screens */
    .timeline-match-label {
        width: 80px !important;
        font-size: 9px !important;
        padding: 4px 6px !important;
    }

    .timeline-match-bar {
        height: 30px !important;
    }

    .timeline-phase-label {
        font-size: 8px !important;
        padding: 1px 2px !important;
    }

    .timeline-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .detailed-timeline {
        max-height: 300px;
    }

    /* Hide game navigation buttons on very small screens */
    .mistake-issue-gallery-main>button[style*="Previous"][style*="Game"],
    .mistake-issue-gallery-main>button[style*="Next"][style*="Game"] {
        display: none !important;
    }

    .issue-nav-btn.prev-issue {
        left: 0 !important;
        border-radius: 0 6px 6px 0 !important;
    }

    .issue-nav-btn.next-issue {
        right: 0 !important;
        border-radius: 6px 0 0 6px !important;
    }

    .gallery-draft-boards>div>div,
    .gallery-draft-boards-inner>div {
        padding: 4px 6px !important;
    }

    /* Smaller hero images in gallery draft */
    .gallery-draft-boards img,
    .gallery-draft-boards-inner img {
        height: 36px !important;
    }
}

/* ============================================================================
   Hero No G Tab - Full Screen Layout
   ========================================================================== */

/* Hide all filters and stats when Hero No G tab or Issues tab is active */
.dashboard-container:has(#hero-no-g-tab.active) #global-filters-section,
.dashboard-container:has(#hero-no-g-tab.active) .stats-overview,
.dashboard-container:has(#metagraph-tab.active) #global-filters-section,
.dashboard-container:has(#metagraph-tab.active) .stats-overview,
.dashboard-container:has(#issues-tab.active) #global-filters-section,
.dashboard-container:has(#issues-tab.active) .stats-overview,
.dashboard-container:has(#calendar-tab.active) #global-filters-section,
.dashboard-container:has(#calendar-tab.active) .stats-overview,
.dashboard-container:has(#scrimmeta-tab.active) #global-filters-section,
.dashboard-container:has(#scrimmeta-tab.active) .stats-overview,
.dashboard-container:has(#hero-pick-slot-tab.active) #global-filters-section,
.dashboard-container:has(#hero-pick-slot-tab.active) .stats-overview,
.dashboard-container:has(#pick-sequence-tab.active) #global-filters-section,
.dashboard-container:has(#pick-sequence-tab.active) .stats-overview,
.dashboard-container:has(#counter-finder-tab.active) #global-filters-section,
.dashboard-container:has(#counter-finder-tab.active) .stats-overview,
.dashboard-container:has(#just89-mh-tab.active) #global-filters-section,
.dashboard-container:has(#just89-mh-tab.active) .stats-overview,
.dashboard-container:has(#timeline-tab.active) #global-filters-section,
.dashboard-container:has(#timeline-tab.active) .stats-overview {
    display: none !important;
}

/* Scrim Meta Draft — canvas layout */
#scrimmeta-tab {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}
.scrimmeta-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--card-bg, #1a2035);
    border-bottom: 1px solid var(--border-color, #333);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.scrimmeta-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}
#scrimmeta-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
    touch-action: none;
}

#hero-no-g-tab {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
}

#hero-no-g-tab iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* ── Multi-team: YG team tab visibility ─────────────────────────────────────── */

/* When team-yg is active, hide all tabs except the 8 YG tabs */
body.team-yg .tab-button:not([data-tab="match-history"]):not([data-tab="draft-layout"]):not([data-tab="team-analysis"]):not([data-tab="just89"]):not([data-tab="issues"]):not([data-tab="rank-data"]):not([data-tab="hero-tier"]):not([data-tab="hero-no-g"]) {
    display: none !important;
}

/* Allow YG users (non-admin) to see the issues tab */
body.team-yg .tab-button[data-tab="issues"] {
    display: flex !important;
}
body.team-yg .tab-content.admin-only#issues-tab.active {
    display: block !important;
}

/* Subtle header accent so admins always know which team they're viewing */
body.team-yg header {
    background: linear-gradient(135deg, #1a3a2a 0%, #1e5c3a 100%) !important;
}

/* Myanmar — full-access team (all tabs), distinct header accent (amber/red) */
body.team-myanmar header {
    background: linear-gradient(135deg, #5c1a1a 0%, #8a3a1e 100%) !important;
}

/* Team toggle select option color fix (dark selects render white-on-white on some OS) */
#team-toggle-select option {
    background: #1e3c72;
    color: white;
}
/* ─────────────────────────────────────────────────────────────────────────────── */

/* Hide All Issues nav buttons on mobile portrait */
@media (max-width: 768px) and (orientation: portrait) {
    #tab-all-issues .mistake-nav-bar {
        display: none;
    }
}