/* ==========================================================================
   Perfect Game - advanced stats block on a player profile
   (Players/UCPlayerAdvancedStatsV2.ascx).
   Tokens and the class standing bars come from StatsLeaderboard.css.
   ========================================================================== */

/* ==========================================================================
   Player Advanced Stats V2.

   Styled from the Stats Leaderboard design system in
   css/Components/StatsLeaderboard.css. Tokens and the class standing bars come
   from that file; only the chrome specific to a profile is declared here.
   ========================================================================== */

/* The --lb-* tokens are declared in css/Components/StatsLeaderboard.css and reach
   this block through the same selector, so the two pages cannot drift. */
.advstats-v2 {
    font-family: var(--lb-body);
    color: var(--lb-dark);
}

    .advstats-v2 *,
    .advstats-v2 *::before,
    .advstats-v2 *::after {
        box-sizing: border-box;
    }

    .advstats-v2 ::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }

    .advstats-v2 ::-webkit-scrollbar-thumb {
        background: var(--lb-input);
        border-radius: 6px;
    }

@keyframes psFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Action cards - spray chart, advanced stats, DiamondKast+
   -------------------------------------------------------------------------- */

.advstats-v2 .batting-top-bar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    margin-bottom: 16px;
}

    .advstats-v2 .batting-top-bar > .dk-promo-card,
    .advstats-v2 .batting-top-bar > .spray-chart-wrap,
    .advstats-v2 .batting-top-bar > .advanced-stats-wrap {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
    }

.advstats-v2 .dk-promo-card a,
.advstats-v2 .spray-chart-wrap > a,
.advstats-v2 .advanced-stats-wrap > a {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.advstats-v2 .dk-promo-content,
.advstats-v2 .spray-chart-card,
.advstats-v2 .advanced-stats-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 54px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r);
    color: var(--lb-dark);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

    .advstats-v2 .dk-promo-content:hover,
    .advstats-v2 .spray-chart-card:hover,
    .advstats-v2 .spray-chart-card:focus,
    .advstats-v2 .advanced-stats-link:hover,
    .advstats-v2 .advanced-stats-link:focus {
        border-color: var(--lb-green);
        background: #f9f9f9;
        color: var(--lb-dark);
        text-decoration: none;
    }

.advstats-v2 .dk-promo-text {
    font-family: var(--lb-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-dark);
    white-space: nowrap;
}

.advstats-v2 .dk-promo-logo {
    max-height: 25px;
    max-width: 100%;
    width: auto;
}

.advstats-v2 .spray-chart-icon-wrap {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.advstats-v2 .spray-chart-icon,
.advstats-v2 .advanced-stats-icon {
    display: block;
    max-height: 32px;
    max-width: 36px;
    width: auto;
    height: auto;
}

.advstats-v2 .advanced-stats-icon {
    margin-right: 8px;
}

.advstats-v2 .spray-chart-label {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.advstats-v2 .spray-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-dark);
}

.advstats-v2 .spray-chart-sub {
    font-size: 11px;
    color: var(--lb-quiet);
}

.advstats-v2 .advanced-stats-link {
    font-size: 13px;
    font-weight: 600;
}

.advstats-v2 .advanced-stats-link-inner {
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Tab chrome - 3px underline, green rail on the active tab
   -------------------------------------------------------------------------- */

.advstats-v2 .tab-container {
    margin-bottom: 0;
}

.advstats-v2 .tab-buttons {
    display: flex;
    gap: 0;
    border-bottom: 3px solid var(--lb-line);
    align-items: flex-end;
}

.advstats-v2 .tab-button {
    font-family: var(--lb-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 18px;
    min-height: 44px;
    cursor: pointer;
    border: 1px solid var(--lb-line);
    border-bottom: 3px solid transparent;
    border-radius: var(--lb-r) var(--lb-r) 0 0;
    margin-bottom: -3px;
    margin-left: -1px;
    background: var(--lb-bg);
    color: var(--lb-mute);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background-color .18s, color .18s;
}

    .advstats-v2 .tab-button:hover {
        background: #eef0f2;
        color: var(--lb-dark);
        text-decoration: none;
    }

    .advstats-v2 .tab-button.active,
    .advstats-v2 .tab-button.active:hover {
        background: var(--lb-dark);
        color: #fff;
        border-color: var(--lb-line);
        border-bottom-color: var(--lb-green);
    }

.advstats-v2 .tab-content {
    display: none;
}

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

/* --------------------------------------------------------------------------
   Filter bar - attached panel under the tab strip
   -------------------------------------------------------------------------- */

.advstats-v2 .filter-section {
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-top: 0;
    border-radius: 0;
    padding: 14px;
    margin-bottom: 0;
}

.advstats-v2 .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.advstats-v2 .sv2-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

    /* Source order is label, control, info button. Pulling the info button back
   up beside the label leaves the control a line of its own. */
    .advstats-v2 .sv2-filter-row > .sv2-info-icon {
        order: 1;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .advstats-v2 .sv2-filter-row > .sv2-segmented {
        order: 2;
        flex: 0 0 100%;
    }

.advstats-v2 .sv2-filter-label {
    font-family: var(--lb-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-mute);
    margin: 0;
}

/* The segmented control is defined once in Stats.Shared.css. */

.advstats-v2 input[type="radio"],
.advstats-v2 input[type="checkbox"] {
    accent-color: var(--lb-green);
}

/* --------------------------------------------------------------------------
   Split by - chips sit open on the panel, no dropdown
   -------------------------------------------------------------------------- */

.advstats-v2 .grouping-selector {
    position: relative;
    display: block;
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-top: 0;
    border-radius: 0;
    padding: 14px;
    margin-bottom: 0;
}

.advstats-v2 .split-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.advstats-v2 .split-head-label {
    font-family: var(--lb-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-mute);
}

.advstats-v2 .split-summary {
    font-size: 12px;
    color: var(--lb-quiet);
}

.advstats-v2 .grouping-dropdown {
    display: block;
    position: static;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.advstats-v2 .grouping-dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 10px 0 0;
}

/* Each category is a chip strip. The checkbox behind each chip is what the
   server still reads, so it stays in the DOM with no box of its own. */
.advstats-v2 .grouping-category {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

.advstats-v2 .grouping-category-label {
    flex: 0 0 100%;
    font-family: var(--lb-head);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lb-faint);
    border: 0;
    padding: 0;
    margin-bottom: 1px;
}

.advstats-v2 .grouping-option {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
}

    .advstats-v2 .grouping-option input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
        margin: 0;
    }

    .advstats-v2 .grouping-option label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 7px 12px;
        min-height: 40px;
        border: 1px solid var(--lb-input);
        border-radius: 20px;
        background: #fff;
        color: var(--lb-mute);
        font-family: var(--lb-body);
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .18s, color .18s, border-color .18s;
    }

        .advstats-v2 .grouping-option label:hover {
            border-color: var(--lb-green);
            color: var(--lb-green-dk);
        }

    .advstats-v2 .grouping-option input[type="checkbox"]:checked + label:hover,
    .advstats-v2 .grouping-option.is-on label:hover {
        background: var(--lb-green-dk);
        border-color: var(--lb-green-dk);
        color: #fff;
    }

    .advstats-v2 .grouping-option input[type="checkbox"]:checked + label,
    .advstats-v2 .grouping-option.is-on label {
        background: var(--lb-green);
        border-color: var(--lb-green);
        color: #fff;
    }

        .advstats-v2 .grouping-option input[type="checkbox"]:checked + label::after,
        .advstats-v2 .grouping-option.is-on label::after {
            content: '\2713';
            font-size: 12px;
            opacity: 0.9;
        }

    .advstats-v2 .grouping-option input[type="checkbox"]:focus-visible + label {
        outline: 2px solid var(--lb-green);
        outline-offset: 2px;
    }

    .advstats-v2 .grouping-option input[type="checkbox"]:disabled + label,
    .advstats-v2 .grouping-option.is-locked label,
    .advstats-v2 .grouping-option input[type="checkbox"]:disabled + label:hover,
    .advstats-v2 .grouping-option.is-locked label:hover {
        color: var(--lb-faint);
        border-color: var(--lb-line);
        background: var(--lb-panel);
        cursor: not-allowed;
    }

        .advstats-v2 .grouping-option.is-locked label::after {
            content: none;
        }


/* Coverage badge on a split option. The counts come from the server; which of the three
   states a count falls into is decided in the code-behind, not by the API. */
.advstats-v2 .split-coverage {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.7;
    white-space: nowrap;
}

.advstats-v2 .grouping-option[data-coverage-state="thin"] label {
    border-color: #b26b00;
    color: #b26b00;
}

    .advstats-v2 .grouping-option[data-coverage-state="thin"] label:hover {
        border-color: #8a5300;
        color: #8a5300;
    }

.advstats-v2 .grouping-option[data-coverage-state="thin"] .split-coverage {
    opacity: 1;
}

.advstats-v2 .grouping-option[data-coverage-state="none"] label,
.advstats-v2 .grouping-option[data-coverage-state="none"] label:hover {
    color: var(--lb-faint);
    border-color: var(--lb-line);
    background: var(--lb-panel);
    cursor: not-allowed;
}

/* A checked split keeps the green pill even when its coverage reads thin. */
.advstats-v2 .grouping-option.is-on[data-coverage-state="thin"] label {
    background: var(--lb-green);
    border-color: var(--lb-green);
    color: #fff;
}

.advstats-v2 .grouping-lock {
    display: inline;
    margin-left: 2px;
}

    .advstats-v2 .grouping-lock a {
        font-family: var(--lb-head);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--lb-quiet);
        text-decoration: none;
    }

        .advstats-v2 .grouping-lock a:hover {
            color: var(--lb-green-dk);
            text-decoration: underline;
        }

    .advstats-v2 .grouping-lock i {
        margin-right: 2px;
    }

/* Chips post back on click, so the old chip list, add button, apply button and
   pending hint have nothing left to do. Kept in the markup for the server. */
.advstats-v2 .grouping-chips-container,
.advstats-v2 .add-grouping-btn,
.advstats-v2 .pending-changes-hint,
.advstats-v2 .btn-apply-groupings,
.advstats-v2 .grouping-controls-hidden {
    display: none !important;
}

.advstats-v2 .grouping-dropdown-footer {
    display: none;
}

.advstats-v2 .btn-clear-groupings {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lb-green-dk);
    text-decoration: underline;
    padding: 2px 4px;
}

    .advstats-v2 .btn-clear-groupings:hover {
        color: var(--lb-green);
    }

/* --------------------------------------------------------------------------
   Year accordion
   -------------------------------------------------------------------------- */

.advstats-v2 .year-accordion {
    margin-top: 18px;
}

.advstats-v2 .year-accordion-header {
    width: 100%;
    text-align: left;
    background: var(--lb-dark);
    border: 0;
    border-left: solid 5px var(--lb-green);
    border-radius: 0;
    color: #fff;
    padding: 10px 15px;
    min-height: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color .18s;
}

    .advstats-v2 .year-accordion-header:hover {
        background: #4a4a4a;
    }

    .advstats-v2 .year-accordion-header .year-label {
        font-family: var(--lb-head);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .advstats-v2 .year-accordion-header .year-note {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
    }

    .advstats-v2 .year-accordion-header .ps-spacer {
        flex: 1;
    }

    .advstats-v2 .year-accordion-header i {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.75);
        transition: transform .25s;
    }

    .advstats-v2 .year-accordion-header.collapsed i {
        transform: rotate(-90deg);
    }

.advstats-v2 .year-accordion-content {
    padding: 14px;
    border: 1px solid var(--lb-line);
    border-top: 0;
    background: #fff;
}

/* --------------------------------------------------------------------------
   Category heading - #f0f0f0 bar with a green left rule
   -------------------------------------------------------------------------- */

.advstats-v2 .stats-category {
    margin-bottom: 20px;
}

    .advstats-v2 .stats-category:last-child {
        margin-bottom: 0;
    }

.advstats-v2 .category-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--lb-panel);
    border: 0;
    border-left: 3px solid var(--lb-green);
    padding: 8px 12px;
    font-family: var(--lb-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--lb-dark);
}

.advstats-v2 .category-note {
    font-family: var(--lb-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lb-quiet);
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.advstats-v2 .stats-table-container {
    overflow-x: auto;
    border: 1px solid var(--lb-line);
    border-top: 0;
    background: #fff;
}

    .advstats-v2 .stats-table-container.scrollable {
        max-height: 600px;
        overflow-y: auto;
    }

.advstats-v2 .stat-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--lb-body);
    font-size: 13.5px;
    background: #fff;
}

    .advstats-v2 .stat-table thead tr {
        background: var(--lb-dark);
    }

    .advstats-v2 .stat-table th {
        background: var(--lb-dark);
        color: rgba(255, 255, 255, 0.72);
        font-family: var(--lb-head);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        line-height: 1.2;
        padding: 11px 8px;
        text-align: right;
        border: 0;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 4;
    }

        .advstats-v2 .stat-table th.group-label {
            text-align: left;
            border-left: 3px solid var(--lb-green);
            position: sticky;
            left: 0;
            z-index: 5;
        }

    .advstats-v2 .stat-table td {
        padding: 10px 8px;
        text-align: right;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--lb-dark);
        font-variant-numeric: tabular-nums;
        border-bottom: 1px solid var(--lb-line-soft);
        white-space: nowrap;
    }

        .advstats-v2 .stat-table td.group-label {
            text-align: left;
            font-weight: 600;
            font-variant-numeric: normal;
            background: #fff;
            border-left: 3px solid var(--lb-green);
            position: sticky;
            left: 0;
            z-index: 2;
        }

    .advstats-v2 .stat-table tbody tr:nth-child(even) {
        background: #fbfcfd;
    }

        .advstats-v2 .stat-table tbody tr:nth-child(even) td.group-label {
            background: #fbfcfd;
        }

    .advstats-v2 .stat-table tbody tr:hover {
        background: #f4f9f5;
    }

        .advstats-v2 .stat-table tbody tr:hover td.group-label {
            background: #f4f9f5;
        }

    /* Best value in the column. Only meaningful once a split puts more than one
   row in the table, so the script adds it there and nowhere else. */
    .advstats-v2 .stat-table td.is-best {
        color: var(--lb-green);
        font-weight: 700;
        background: rgba(64, 168, 76, 0.07);
    }

.advstats-v2 .stat-highlight {
    font-weight: 700;
    color: var(--lb-green);
}

/* Sortable headers */
.advstats-v2 .stat-table th.sortable {
    cursor: pointer;
    user-select: none;
}

    .advstats-v2 .stat-table th.sortable:hover {
        background: #4a4a4a;
        color: #fff;
    }

    .advstats-v2 .stat-table th.sortable .sort-icon {
        display: inline-block;
        margin-left: 3px;
        font-size: 10px;
        opacity: 0.35;
        vertical-align: middle;
    }

    .advstats-v2 .stat-table th.sortable.sort-asc,
    .advstats-v2 .stat-table th.sortable.sort-desc {
        background: rgba(64, 168, 76, 0.22);
        color: #fff;
    }

        .advstats-v2 .stat-table th.sortable.sort-asc .sort-icon,
        .advstats-v2 .stat-table th.sortable.sort-desc .sort-icon {
            opacity: 1;
            color: #fff;
        }

/* --------------------------------------------------------------------------
   Mobile cards
   -------------------------------------------------------------------------- */

.advstats-v2 .mobile-stats-cards {
    display: none;
}

.advstats-v2 .desktop-stats-tables {
    display: block;
}

.advstats-v2 .stats-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: 3px solid var(--lb-line);
    border-radius: var(--lb-r);
    margin-bottom: 10px;
    overflow: hidden;
}

.advstats-v2 .stats-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    background: var(--lb-bg);
    border-bottom: 1px solid #e2e2e2;
}

.advstats-v2 .stats-card-split {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lb-dark);
    padding-left: 0;
    border-left: 0;
}

/* One 4-column grid for the whole card so tiles flow continuously and any
   blank cells land at the end instead of mid-card. */
.advstats-v2 .stats-card-body {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-right: -1px;
}

.advstats-v2 .stats-card-row {
    display: contents;
}

.advstats-v2 .stats-card-stat {
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    padding: 9px 4px;
    border-top: 1px solid var(--lb-line-soft);
    border-right: 1px solid var(--lb-line-soft);
}

.advstats-v2 .stats-card-value {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lb-dark);
    font-variant-numeric: tabular-nums;
}

.advstats-v2 .stats-card-label {
    font-family: var(--lb-head);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-quiet);
    margin-bottom: 2px;
}

.advstats-v2 .stats-card-row.secondary .stats-card-value {
    font-size: 13px;
    font-weight: 600;
}

.advstats-v2 .mobile-sort-bar {
    display: none;
    padding: 10px 12px;
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-top: 0;
    align-items: center;
    gap: 8px;
}

    .advstats-v2 .mobile-sort-bar label {
        font-family: var(--lb-head);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--lb-mute);
        white-space: nowrap;
        margin: 0;
    }

    .advstats-v2 .mobile-sort-bar select {
        flex: 1;
        font-family: var(--lb-body);
        font-size: 14px;
        padding: 10px 12px;
        min-height: 44px;
        border: 1px solid var(--lb-input);
        border-radius: var(--lb-r);
        background: #fff;
        color: var(--lb-dark);
        cursor: pointer;
    }

.advstats-v2 .mobile-sort-dir-btn {
    font-family: var(--lb-head);
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid var(--lb-input);
    border-radius: var(--lb-r);
    background: #fff;
    color: var(--lb-dark);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

    .advstats-v2 .mobile-sort-dir-btn:hover {
        border-color: var(--lb-green);
        color: var(--lb-green-dk);
    }

/* --------------------------------------------------------------------------
   Class standing
   -------------------------------------------------------------------------- */

.advstats-v2 .ps-pct {
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

    .advstats-v2 .ps-pct:empty {
        display: none;
    }

    /* The bars themselves are the leaderboard's .lb-pct block, read straight out of
   StatsLeaderboard.css. Only the box they sit in belongs to this page. */


/* The profile scopes this rule, so an unscoped width in the shared sheet would lose to it.
   It has to be stated here at the same specificity to hold the place line on one line. */
.advstats-v2 .ps-pct .lb-pct-val {
    width: 160px;
}

@media (max-width: 575px) {
    .advstats-v2 .ps-pct .lb-pct {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .advstats-v2 .ps-pct .lb-pct-track {
        order: 3;
        flex: 1 1 100%;
    }

    .advstats-v2 .ps-pct .lb-pct-val {
        width: auto;
        flex: 1;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Subscription teaser
   -------------------------------------------------------------------------- */

.advstats-v2 .subscription-overlay {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

    .advstats-v2 .subscription-overlay .subscription-overlay-content {
        filter: blur(6px);
        -webkit-filter: blur(6px);
        pointer-events: none;
        user-select: none;
    }

.advstats-v2 .subscription-overlay-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: calc(100% - 32px);
    max-width: 560px;
}

    .advstats-v2 .subscription-overlay-cta .subscription-message {
        margin: 0;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    }

/* .subscription-message itself lives in StatsLeaderboard.css so the leaderboard,
   the stats hub and this control all read one definition. */

.advstats-v2 .loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* --------------------------------------------------------------------------
   Empty, error and footer
   -------------------------------------------------------------------------- */

.advstats-v2 .sv2-empty,
.advstats-v2 .sv2-error {
    margin-top: 18px;
}

.advstats-v2 .ps-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--lb-r);
}

.advstats-v2 .ps-foot-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.advstats-v2 .ps-foot-link {
    font-family: var(--lb-head);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: 1px solid var(--lb-input);
    color: var(--lb-dark);
    padding: 11px 16px;
    border-radius: 7px;
    text-decoration: none;
}

    .advstats-v2 .ps-foot-link:hover {
        border-color: var(--lb-green);
        color: var(--lb-green);
        text-decoration: none;
    }

.advstats-v2 .btn-apply-filters {
    font-family: var(--lb-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--lb-green);
    color: #fff;
    border: 0;
    padding: 12px 18px;
    min-height: 44px;
    border-radius: var(--lb-r);
    cursor: pointer;
    transition: background-color .18s;
}

    .advstats-v2 .btn-apply-filters:hover {
        background: var(--lb-green-dk);
    }
/* Spray Chart Styles */
/* The modal renders outside the .advstats-v2 wrapper, so its rules key off .spray-modal. */
.PercentGrid {
    width: 100%;
    position: absolute;
}

    .PercentGrid td {
        width: 7.79%;
        text-align: center;
        font-size: 17px;
        height: 24px;
        font-weight: bold;
    }

.PercentLabel {
    z-index: 200;
    position: relative;
    background-color: White;
    opacity: 0.8;
    border-radius: 5%;
    padding: 1px 2px;
    font-size: 15px;
    border-bottom: #bdbdbd solid 1px;
    animation: fadein 2s;
    color: #333;
    font-family: Arial !important;
}

.PercentLabelHighlight {
    z-index: 200;
    position: relative;
    background-color: White;
    opacity: 0.8;
    border-radius: 5%;
    padding: 1px 2px;
    font-size: 15px;
    border-bottom: #06d42b solid 1px;
    animation: fadein 2s;
    color: #06d42b;
    font-family: Arial !important;
}

.spray-modal .spray-control {
    padding: 2px;
    display: inline-block;
    font-size: 11px;
}

.spray-modal .spray-control-title {
    font-size: 13px;
    font-weight: bold;
    display: block;
    color: #333;
    font-family: Arial;
    margin-bottom: 5px;
}

.spray-modal .MaxColor {
    stroke: #80d686 !important;
    fill: #80d686 !important;
    animation: fadein 5s;
}

.spray-modal .SecondColor {
    stroke: #bbeabe !important;
    fill: #bbeabe !important;
    animation: fadein 7s;
}

.spray-modal .ResetColor {
    stroke: transparent !important;
    fill: transparent !important;
    animation: fadein 5s;
}

.spray-modal .cls-1, .spray-modal .cls-10, .spray-modal .cls-2, .spray-modal .cls-3,
.spray-modal .cls-4, .spray-modal .cls-5, .spray-modal .cls-6, .spray-modal .cls-7,
.spray-modal .cls-8, .spray-modal .cls-9 {
    fill: transparent;
    stroke: transparent;
    stroke-linejoin: round;
    stroke-width: 4px;
    fill-rule: evenodd;
}

.spray-modal .cls-1 {
    filter: url(/css/Components/#filter);
}

.spray-modal .cls-2 {
    filter: url(/css/Components/#filter-2);
}

.spray-modal .cls-3 {
    filter: url(/css/Components/#filter-3);
}

.spray-modal .cls-4 {
    filter: url(/css/Components/#filter-4);
}

.spray-modal .cls-5 {
    filter: url(/css/Components/#filter-5);
}

.spray-modal .cls-6 {
    filter: url(/css/Components/#filter-6);
}

.spray-modal .cls-7 {
    filter: url(/css/Components/#filter-7);
}

.spray-modal .cls-8 {
    filter: url(/css/Components/#filter-8);
}

.spray-modal .cls-9 {
    filter: url(/css/Components/#filter-9);
}

.spray-modal .cls-10 {
    filter: url(/css/Components/#filter-10);
}

/* Modal Overlay */
.spray-modal.modaloverlay {
    display: none;
}

.spray-modal.modaloverlayActive {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    top: 0;
    left: 0;
    display: block;
}

.spray-modal.modalTarget {
    display: none;
}

.spray-modal.modalTargetActive {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    display: block;
}

.spray-modal .spray-chart-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

    .spray-modal .spray-chart-filters .filter-col {
        flex: 1;
        min-width: 100px;
    }

.spray-modal .spray-chart-header {
    text-align: center;
    margin-bottom: 15px;
}

    .spray-modal .spray-chart-header h4 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 5px 0;
        color: #333;
    }

    .spray-modal .spray-chart-header .player-info {
        font-size: 14px;
        color: #666;
    }

.spray-modal .spray-field-container {
    position: relative;
    width: 350px;
    margin: 0 auto;
}

.spray-modal .divFadein {
    display: block;
    width: 350px;
    min-height: 245px;
    padding-top: 0px;
    overflow: visible;
    z-index: 1000;
    position: relative;
    margin-top: -265px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Narrow - table becomes cards, filters stack
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 991px) {
    .advstats-v2 .mobile-stats-cards {
        display: block;
    }

    .advstats-v2 .desktop-stats-tables {
        display: none;
    }

    .advstats-v2 .mobile-sort-bar {
        display: flex;
    }
}

@media (max-width: 859px) {
    .advstats-v2 .tab-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .advstats-v2 .tab-buttons::-webkit-scrollbar {
            display: none;
        }

    .advstats-v2 .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 14px;
    }

    .advstats-v2 .filter-row {
        flex-direction: column;
        gap: 14px;
    }

    .advstats-v2 .sv2-filter-row {
        width: 100%;
    }

    .advstats-v2 .sv2-segmented {
        display: flex;
        width: 100%;
    }

        .advstats-v2 .sv2-segmented label {
            flex: 1 1 0;
            justify-content: center;
            padding: 9px 8px;
            font-size: 12.5px;
        }

    .advstats-v2 .grouping-dropdown-grid {
        flex-direction: column;
        gap: 14px;
    }

    .advstats-v2 .year-accordion-header .year-label {
        font-size: 16px;
    }

    .advstats-v2 .year-accordion-content {
        padding: 12px;
    }

    .advstats-v2 .batting-top-bar > .dk-promo-card,
    .advstats-v2 .batting-top-bar > .spray-chart-wrap,
    .advstats-v2 .batting-top-bar > .advanced-stats-wrap {
        flex: 1 1 100%;
    }

    .advstats-v2 .ps-foot-link {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .advstats-v2 .stats-card-body {
        grid-template-columns: repeat(3, 1fr);
    }
}