/* =========================================================
   PLAYERS PAGE
========================================================= */

.players-page {
    width: min(1480px, calc(100% - 40px));
    margin: 0 auto;
    padding: 22px 0 64px;
}


/* =========================================================
   HERO
========================================================= */

.players-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
    gap: 44px;
    align-items: end;
    padding: 24px 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.players-hero-copy {
    max-width: 850px;
}

.section-kicker,
.panel-kicker {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.62;
    font-weight: 700;
}

.players-hero h1 {
    margin: 8px 0 12px;
    max-width: 900px;
    font-size: clamp(38px, 3.7vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.players-hero h1 span {
    display: block;
    margin-top: 4px;
    opacity: 0.72;
}

.players-hero p {
    margin: 0;
    max-width: 730px;
    line-height: 1.5;
    opacity: 0.72;
    font-size: 15px;
}

.players-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    align-self: end;
}

.hero-stat {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.hero-stat-value {
    display: block;
    font-size: 21px;
    font-weight: 800;
}

.hero-stat-label {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    opacity: 0.55;
}


/* =========================================================
   CONTROLS
========================================================= */

.player-controls {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 0 18px;
}

.player-search-wrap {
    max-width: 540px;
}

.player-search,
.player-filter {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    outline: none;
}

.player-search:focus,
.player-filter:focus {
    border-color: rgba(255, 255, 255, 0.28);
}

.player-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.filter-row {
    display: flex;
    gap: 10px;
}

.player-filter {
    min-width: 150px;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.players-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}


/* =========================================================
   PLAYER LIST
========================================================= */

.player-list-panel,
.player-detail-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
}

.player-list-panel {
    position: sticky;
    top: 88px;
    overflow: hidden;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panel-heading h2 {
    margin: 4px 0 0;
    font-size: 19px;
}

.visible-player-count {
    font-size: 12px;
    opacity: 0.55;
}

.player-list {
    max-height: calc(100vh - 175px);
    overflow-y: auto;
}

.loading-state {
    padding: 22px 16px;
    opacity: 0.55;
    font-size: 14px;
}

.player-list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 15px;
    background: transparent;
    color: inherit;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    cursor: pointer;
    text-align: left;
}

.player-list-item:hover {
    background: rgba(255, 255, 255, 0.035);
}

.player-list-item.active {
    background: rgba(20, 178, 235, 0.09);
    border-left: 2px solid rgba(39, 214, 255, 0.8);
}

.player-list-main {
    min-width: 0;
}

.player-list-name {
    display: block;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-list-meta {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.56;
}

.player-list-projection {
    flex: 0 0 auto;
    text-align: right;
}

.player-list-projection strong {
    display: block;
    font-size: 17px;
}

.player-list-projection span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.48;
}


/* =========================================================
   PLAYER DETAIL
========================================================= */

.player-detail-panel {
    min-height: 650px;
    padding: 20px;
}

.empty-player-state {
    min-height: 610px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 40px;
}

.empty-player-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    margin-bottom: 14px;
    font-weight: 800;
}

.empty-player-state h2 {
    margin: 0 0 8px;
}

.empty-player-state p {
    max-width: 430px;
    margin: 0;
    opacity: 0.6;
    line-height: 1.55;
}


/* =========================================================
   DETAIL HEADER
========================================================= */

.player-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.player-identity {
    display: flex;
    gap: 15px;
    align-items: center;
}

.player-headshot-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
}

.player-headshot,
.player-headshot-fallback {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.player-headshot {
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
}

.player-headshot-fallback {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 800;
}

.player-team-line {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: 0.6;
}

.detail-name {
    margin: 5px 0 7px;
    font-size: 28px;
    letter-spacing: -0.02em;
}

.detail-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    background: rgba(255, 255, 255, 0.035);
}

.player-primary-projection {
    min-width: 175px;
    text-align: right;
}

.projection-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.13em;
    opacity: 0.5;
}

.detail-yards {
    display: block;
    margin-top: 5px;
    font-size: 40px;
    line-height: 1;
    color: rgb(39, 214, 255);
}

.projection-unit {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.58;
}

.projection-range {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.5;
}


/* =========================================================
   COMPARISON
========================================================= */

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.comparison-card {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.comparison-label,
.context-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.52;
}

.comparison-card strong {
    display: block;
    margin-top: 7px;
    font-size: 24px;
}

.comparison-sub {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.48;
}


/* =========================================================
   METRIC TABS
========================================================= */

.metric-tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 12px;
    flex-wrap: wrap;
}

.metric-tab {
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.metric-tab:hover {
    background: rgba(255, 255, 255, 0.04);
}

.metric-tab.active {
    border-color: rgba(39, 214, 255, 0.35);
    background: rgba(39, 214, 255, 0.09);
    color: rgb(98, 224, 255);
}


/* =========================================================
   CHART
========================================================= */

.player-chart-card {
    padding: 17px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
}

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

.chart-header h3 {
    margin: 4px 0 0;
    font-size: 19px;
}

.chart-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    opacity: 0.75;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.actual-dot {
    background: rgba(76, 153, 255, 0.9);
}

.projection-dot {
    background: rgba(39, 214, 255, 1);
}

.projection-chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-height: 245px;
    padding: 10px 12px 0;
}

.chart-column {
    flex: 1;
    min-width: 70px;
    text-align: center;
}

.chart-value {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.8);
}

.chart-column.projection-column .chart-value {
    color: rgb(39, 214, 255);
}

.chart-bar-track {
    position: relative;
    height: 185px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-bar {
    width: min(56px, 72%);
    min-height: 3px;
    border-radius: 9px 9px 3px 3px;
    background: linear-gradient(
        180deg,
        rgba(76, 153, 255, 0.92),
        rgba(36, 92, 160, 0.62)
    );
    box-shadow: 0 8px 22px rgba(40, 105, 180, 0.12);
}

.chart-bar.projection {
    background: linear-gradient(
        180deg,
        rgb(39, 214, 255),
        rgb(0, 136, 190)
    );
    box-shadow: 0 9px 24px rgba(0, 190, 255, 0.2);
}

.chart-label {
    margin-top: 9px;
    min-height: 30px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.56);
}

.chart-column.projection-column .chart-label {
    color: rgba(39, 214, 255, 0.95);
}

.chart-range {
    position: absolute;
    width: 10px;
    border-radius: 999px;
    background: rgba(39, 214, 255, 0.16);
    border: 1px solid rgba(39, 214, 255, 0.42);
    left: 50%;
    transform: translateX(-50%);
}

.chart-range-cap {
    position: absolute;
    width: 22px;
    height: 1px;
    background: rgba(39, 214, 255, 0.8);
    left: 50%;
    transform: translateX(-50%);
}

.chart-market-line {
    position: absolute;
    left: 8px;
    right: 8px;
    border-top: 1px dashed rgba(255, 210, 90, 0.85);
    pointer-events: none;
    z-index: 4;
}

.chart-market-label {
    position: absolute;
    right: 4px;
    transform: translateY(-21px);
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 220, 110, 1);
    background: rgba(15, 28, 40, 0.9);
}


/* =========================================================
   COMPONENT MODEL
========================================================= */

.component-section {
    margin-top: 18px;
}

.section-heading-small h3 {
    margin: 4px 0 12px;
    font-size: 19px;
}

.component-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    gap: 9px;
    align-items: stretch;
}

.component-card {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
}

.component-card span {
    display: block;
    font-size: 11px;
    opacity: 0.52;
}

.component-card strong {
    display: block;
    margin-top: 8px;
    font-size: 22px;
}

.component-card small {
    display: block;
    margin-top: 5px;
    opacity: 0.45;
}

.component-final {
    background: rgba(39, 214, 255, 0.055);
    border-color: rgba(39, 214, 255, 0.14);
}

.component-final strong {
    color: rgb(39, 214, 255);
}

.component-arrow {
    display: grid;
    place-items: center;
    opacity: 0.35;
    font-size: 20px;
}


/* =========================================================
   CONTEXT
========================================================= */

.context-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.context-card {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.context-card strong {
    display: block;
    margin-top: 7px;
    font-size: 20px;
}

.context-card small {
    display: block;
    margin-top: 4px;
    opacity: 0.46;
}


/* =========================================================
   INSIGHT
========================================================= */

.player-insight-card {
    margin-top: 18px;
    padding: 16px 17px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.player-insight-card p {
    margin: 8px 0 0;
    line-height: 1.55;
    opacity: 0.75;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.player-list::-webkit-scrollbar {
    width: 7px;
}

.player-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .players-hero {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .players-hero-meta {
        max-width: 650px;
    }

    .players-layout {
        grid-template-columns: 300px minmax(0, 1fr);
    }

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

    .component-arrow {
        display: none;
    }

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


@media (max-width: 820px) {

    .players-page {
        width: min(100% - 24px, 1480px);
        padding-top: 14px;
    }

    .players-hero h1 {
        font-size: clamp(34px, 8vw, 52px);
    }

    .player-controls {
        grid-template-columns: 1fr;
    }

    .player-search-wrap {
        max-width: none;
    }

    .filter-row {
        width: 100%;
    }

    .player-filter {
        flex: 1;
        min-width: 0;
    }

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

    .player-list-panel {
        position: static;
    }

    .player-list {
        max-height: 420px;
    }
}


@media (max-width: 620px) {

    .players-hero {
        padding-top: 18px;
    }

    .players-hero h1 {
        font-size: 35px;
        line-height: 1.02;
    }

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

    .filter-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .player-detail-panel {
        padding: 14px;
    }

    .player-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .player-primary-projection {
        text-align: left;
    }

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

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

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

    .projection-chart {
        gap: 5px;
        padding-left: 0;
        padding-right: 0;
    }

    .chart-column {
        min-width: 48px;
    }

    .chart-bar-track {
        height: 165px;
    }

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


@media (max-width: 430px) {

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

    .player-identity {
        align-items: flex-start;
    }

    .detail-name {
        font-size: 24px;
    }

    .hero-stat {
        min-width: 0;
    }
}

/* =========================================================
   INTERPRETABILITY + TEAM IDENTITY UPGRADE
========================================================= */

.player-list-item {
    position: relative;
    border-left: 2px solid color-mix(in srgb, var(--team-primary, #27d6ff) 28%, transparent);
    box-shadow:
        inset 10px 0 24px color-mix(in srgb, var(--team-primary, #27d6ff) 4%, transparent);
    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.player-list-item::after {
    content: "";
    position: absolute;
    inset: 5px 4px 5px auto;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        var(--team-primary, #27d6ff),
        var(--team-secondary, #ffffff)
    );
    opacity: 0.24;
}

.player-list-item:hover {
    border-left-color: color-mix(in srgb, var(--team-primary, #27d6ff) 72%, white 8%);
    box-shadow:
        inset 16px 0 34px color-mix(in srgb, var(--team-primary, #27d6ff) 8%, transparent),
        0 0 18px color-mix(in srgb, var(--team-primary, #27d6ff) 7%, transparent);
    transform: translateX(1px);
}

.player-list-item.active {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--team-primary, #27d6ff) 16%, transparent),
            color-mix(in srgb, var(--team-secondary, #ffffff) 4%, transparent) 55%,
            transparent
        );
    border-left: 3px solid var(--team-primary, #27d6ff);
    box-shadow:
        inset 18px 0 40px color-mix(in srgb, var(--team-primary, #27d6ff) 11%, transparent),
        0 0 26px color-mix(in srgb, var(--team-primary, #27d6ff) 11%, transparent);
}

.player-list-item.active::after {
    opacity: 0.72;
}

.player-list-team-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--team-primary, #27d6ff) 38%, transparent);
    background: color-mix(in srgb, var(--team-primary, #27d6ff) 10%, transparent);
    color: color-mix(in srgb, var(--team-secondary, #ffffff) 45%, white 55%);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.player-detail-panel {
    position: relative;
    border-color: color-mix(in srgb, var(--team-primary, #27d6ff) 28%, rgba(255,255,255,0.08));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--team-primary, #27d6ff) 5%, transparent),
        0 0 42px color-mix(in srgb, var(--team-primary, #27d6ff) 7%, transparent);
}

.player-detail-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 22px;
    right: 22px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--team-primary, #27d6ff) 22%,
        var(--team-secondary, #ffffff) 72%,
        transparent
    );
    opacity: 0.5;
    pointer-events: none;
}

.player-headshot-wrap {
    border-radius: 50%;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--team-primary, #27d6ff) 48%, transparent),
        0 0 24px color-mix(in srgb, var(--team-primary, #27d6ff) 16%, transparent);
}

.detail-team {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--team-primary, #27d6ff) 40%, transparent);
    background: color-mix(in srgb, var(--team-primary, #27d6ff) 10%, transparent);
    color: color-mix(in srgb, var(--team-secondary, #ffffff) 38%, white 62%);
    opacity: 1;
    font-weight: 800;
}

.player-primary-projection {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--team-primary, #27d6ff) 20%, rgba(255,255,255,0.08));
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--team-primary, #27d6ff) 9%, transparent),
            rgba(255,255,255,0.015)
        );
}

.detail-yards {
    color: rgb(39, 214, 255);
    text-shadow: 0 0 22px rgba(39, 214, 255, 0.12);
}

.badge {
    position: relative;
}

.detail-confidence::after {
    content: "workload";
    margin-left: 5px;
    opacity: 0.48;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- Benchmark interpretation ---------- */

.benchmark-explainer {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.015);
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255,255,255,0.54);
}

.benchmark-explainer strong {
    flex: 0 0 auto;
    color: rgba(255,255,255,0.74);
}

/* ---------- Chart interpretation ---------- */

.player-chart-card {
    overflow: hidden;
}

.chart-header {
    align-items: flex-start;
}

.chart-title-sub {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.48);
}

.projection-chart {
    border-top: 1px solid rgba(255,255,255,0.045);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.008),
            transparent
        );
}

.chart-column {
    position: relative;
}

.chart-column.projection-column {
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            rgba(39,214,255,0.035),
            transparent 78%
        );
}

.chart-bar-track {
    z-index: 2;
}

.chart-reference-line {
    position: absolute;
    left: 10px;
    right: 10px;
    border-top: 1px dashed rgba(255,255,255,0.22);
    pointer-events: none;
    z-index: 1;
}

.chart-reference-line.last3 {
    border-top-style: dotted;
    border-top-color: rgba(180, 205, 255, 0.36);
}

.chart-reference-label {
    position: absolute;
    left: 2px;
    transform: translateY(-18px);
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(11,20,29,0.88);
    color: rgba(255,255,255,0.56);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.chart-interpretation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.065);
}

.chart-readout {
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    background: rgba(255,255,255,0.018);
}

.chart-readout-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.46);
}

.chart-readout strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: rgba(255,255,255,0.84);
}

.chart-readout-main {
    color: rgb(39, 214, 255) !important;
}

.chart-readout-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255,255,255,0.48);
}

.chart-range {
    z-index: 3;
}

.chart-range::after {
    content: "historical uncertainty";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(8, 23, 32, 0.92);
    color: rgba(91, 224, 255, 0.76);
    font-size: 9px;
    opacity: 0;
    transition: opacity 140ms ease;
    pointer-events: none;
}

.projection-column:hover .chart-range::after {
    opacity: 1;
}

/* ---------- Projection build ---------- */

.component-card {
    position: relative;
    overflow: hidden;
}

.component-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.12),
        transparent
    );
}

.component-card small {
    line-height: 1.35;
}

.component-final {
    box-shadow: inset 0 0 28px rgba(39,214,255,0.025);
}

/* ---------- Context + explanations ---------- */

.context-card {
    background: rgba(255,255,255,0.012);
}

.player-insight-card {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--team-primary, #27d6ff) 5%, transparent),
            rgba(255,255,255,0.018)
        );
    border-color: color-mix(in srgb, var(--team-primary, #27d6ff) 16%, rgba(255,255,255,0.08));
}

.player-insight-card h3 {
    margin: 5px 0 12px;
    font-size: 19px;
}

.detail-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-reasons li {
    position: relative;
    min-height: 70px;
    padding: 12px 12px 12px 36px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.018);
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    line-height: 1.45;
}

.detail-reasons li::before {
    content: attr(data-icon);
    position: absolute;
    left: 11px;
    top: 11px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--team-primary, #27d6ff) 36%, transparent);
    background: color-mix(in srgb, var(--team-primary, #27d6ff) 9%, transparent);
    color: rgba(255,255,255,0.72);
    font-size: 9px;
    font-weight: 800;
}

.detail-reasons li strong {
    color: rgba(255,255,255,0.9);
}

.model-read-divider {
    height: 1px;
    margin: 14px 0 12px;
    background: rgba(255,255,255,0.065);
}

.player-insight-card .detail-summary {
    margin-top: 0;
}

.confidence-explainer {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.confidence-explainer-title {
    flex: 0 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
}

.confidence-explainer-text {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255,255,255,0.47);
}

/* ---------- Metric tabs ---------- */

.metric-tab.active {
    border-color: color-mix(in srgb, var(--team-primary, #27d6ff) 42%, rgba(39,214,255,0.25));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--team-primary, #27d6ff) 12%, rgba(39,214,255,0.06)),
            rgba(39,214,255,0.04)
        );
}

/* ---------- Responsive additions ---------- */

@media (max-width: 900px) {
    .benchmark-explainer,
    .confidence-explainer {
        display: block;
    }

    .benchmark-explainer strong,
    .confidence-explainer-title {
        display: block;
        margin-bottom: 4px;
    }

    .detail-reasons {
        grid-template-columns: 1fr;
    }

    .chart-interpretation {
        grid-template-columns: 1fr;
    }

    .chart-readout-note {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .player-primary-projection {
        width: 100%;
        text-align: left;
    }

    .chart-reference-label {
        display: none;
    }
}
/* Chart marks share the SVG coordinate system, including the reference lines. */
.projection-chart {
    display: block;
    padding: 0;
    min-height: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: #315370 transparent;
}
.forecast-svg { display: block; width: 100%; min-width: 0; height: auto; }
.axis-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.axis-tick { fill: #95aabd; font: 11px Inter, sans-serif; }
.forecast-reference { stroke-width: 1.5; fill: none; }
.forecast-reference.season { stroke: #d8e2ec; }
.forecast-reference.last3 { stroke: #b39af1; stroke-dasharray: 2 5; }
.forecast-reference.market { stroke: #f5cf76; stroke-dasharray: 7 5; }
.projection-lane { fill: rgba(39,214,255,.045); }
.actual-bar { fill: #428ee1; }
.projected-bar { fill: #27d6ff; }
.forecast-value { fill: #d9e6f0; font: 700 12px Inter, sans-serif; }
.upcoming .forecast-value, .upcoming .forecast-week { fill: #66e4ff; }
.forecast-week { fill: #a6b8c8; font: 11px Inter, sans-serif; }
.forecast-whisker { stroke: #a4f0ff; stroke-width: 2; }
.chart-legend { flex-wrap: wrap; gap: 10px 16px; font-size: 11px; }
.legend-whisker { width: 9px; height: 15px; border-top: 1px solid #a4f0ff; border-bottom: 1px solid #a4f0ff; position: relative; }
.legend-whisker::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; border-left: 1px solid #a4f0ff; }
.chart-reference-key { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.reference-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 7px 9px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; font-size: 11px; color: #acbdcc; }
.reference-chip strong { color: #e1ebf3; font-variant-numeric: tabular-nums; }
.reference-chip i { width: 15px; border-top: 2px solid #d8e2ec; margin-right: 2px; }
.reference-chip.last3 i { border-top: 2px dotted #b39af1; }
.reference-chip.market i { border-top: 2px dashed #f5cf76; }
.chart-data-table { font-size: 12px; color: #b4c5d5; }
.chart-data-table summary { padding: 6px 0; cursor: pointer; width: fit-content; }
.chart-table-wrap { overflow-x: auto; }
.chart-data-table table { width: 100%; border-collapse: collapse; margin: 10px 0; text-align: left; }
.chart-data-table th, .chart-data-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.09); }
.chart-data-table td { text-align: right; font-variant-numeric: tabular-nums; }
.chart-data-table caption { text-align: left; margin: 5px 8px; color: #8fa6b9; }
.chart-readout-note { color: #a2b5c5; }
.chart-readout-note > strong { display: block; color: #cfdeeb; margin-bottom: 5px; }
.chart-readout-note p { margin: 6px 0 0; line-height: 1.6; }
.reason-category { display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .1em; color: #8ca6b9; font-size: 9px; font-weight: 700; }
.detail-reasons li > strong { display: block; font-size: 13px; line-height: 1.4; }
.detail-reasons li p { margin: 6px 0 0; line-height: 1.6; color: #b0c1cf; }
.detail-confidence::after { content: none; }
.player-insight-card { margin-bottom: 18px; }
.player-detail-panel { min-width: 0; }
.player-identity > div:last-child { min-width: 0; }
.detail-name, .player-list-name { overflow-wrap: anywhere; }
.player-list-item:focus-visible, .metric-tab:focus-visible, summary:focus-visible,
.player-search:focus-visible, .player-filter:focus-visible { outline: 2px solid #27d6ff; outline-offset: 3px; }
/* Cyan marks selection consistently while team colors supply the smaller accents. */
.player-list-item.active { border-left: 3px solid #27d6ff; box-shadow: inset 3px 0 16px rgba(39,214,255,.08), 0 0 20px rgba(var(--team-rgb, 39,214,255),.08); }
.metric-tab.active { border-color: #27d6ff; background: rgba(39,214,255,.09); }

/* Explicit fallback for browsers without color-mix support. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .player-list-item { border-left: 2px solid var(--team-primary, #27d6ff); box-shadow: inset 10px 0 24px rgba(var(--team-rgb, 39,214,255),.04); }
    .player-list-item:hover { border-left-color: var(--team-primary, #27d6ff); box-shadow: 0 0 18px rgba(var(--team-rgb, 39,214,255),.1); }
    .player-list-item.active { border-left: 3px solid #27d6ff; background: rgba(var(--team-rgb, 39,214,255),.10); box-shadow: inset 3px 0 16px rgba(39,214,255,.08); }
    .player-list-team-pill, .detail-team { color: #e1e9f1; border: 1px solid rgba(var(--team-rgb, 39,214,255),.5); background: rgba(var(--team-rgb, 39,214,255),.12); }
    .player-detail-panel { border-color: rgba(var(--team-rgb, 39,214,255),.5); box-shadow: 0 0 32px rgba(var(--team-rgb, 39,214,255),.09); }
    .player-headshot-wrap { box-shadow: 0 0 0 2px rgba(var(--team-rgb, 39,214,255),.5), 0 0 24px rgba(var(--team-rgb, 39,214,255),.12); }
    .player-primary-projection, .player-insight-card { border-color: rgba(var(--team-rgb, 39,214,255),.3); background: rgba(var(--team-rgb, 39,214,255),.04); }
    .detail-reasons li::before { border: 1px solid rgba(var(--team-rgb, 39,214,255),.5); background: rgba(var(--team-rgb, 39,214,255),.12); }
}
@media (max-width: 620px) {
    .player-chart-card { padding: 12px; }
    .chart-reference-key { flex-direction: column; align-items: flex-start; }
    .chart-header { gap: 12px; }
    .detail-badges { flex-wrap: wrap; }
    .benchmark-explainer, .confidence-explainer { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
    .player-list-item { transition: none; }
    .player-list-item:hover { transform: none; }
}

/* Stronger team identity and readable abbreviation badges */
.player-list-item,
.player-detail-panel {
    --team-edge: var(--team-primary, #27d6ff);
    --team-badge-edge: #a6bacb;
}

@supports (color: color-mix(in srgb, red, white)) {
    .player-list-item,
    .player-detail-panel {
        --team-edge: color-mix(in srgb, var(--team-primary, #27d6ff) 72%, white 28%);
        --team-badge-edge: color-mix(in srgb, var(--team-secondary, #ffffff) 65%, white 35%);
    }
}

.player-list-meta,
.player-team-line {
    opacity: 1;
    color: #a8b9c9;
}

.player-list-team-pill,
.detail-team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 8px;
    border: 1px solid var(--team-badge-edge);
    border-radius: 7px;
    background: rgba(var(--team-rgb, 39, 214, 255), .38);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    box-shadow: 0 0 12px rgba(var(--team-rgb, 39, 214, 255), .35);
    opacity: 1;
}

.detail-team {
    min-width: 48px;
    padding: 5px 10px;
    font-size: 14px;
    border-width: 2px;
}

.player-list-item {
    margin: 6px 8px;
    width: calc(100% - 16px);
    border: 1px solid var(--team-edge);
    border-left: 3px solid var(--team-edge);
    border-radius: 10px;
    background: rgba(var(--team-rgb, 39, 214, 255), .08);
    box-shadow: 0 0 13px rgba(var(--team-rgb, 39, 214, 255), .18);
}

.player-list-item::after {
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    opacity: .9;
}

.player-list-item:hover {
    border-color: var(--team-edge);
    background: rgba(var(--team-rgb, 39, 214, 255), .16);
    box-shadow: 0 0 20px rgba(var(--team-rgb, 39, 214, 255), .30);
}

.player-list-item.active {
    border: 1px solid var(--team-edge);
    border-left: 4px solid #27d6ff;
    background: linear-gradient(90deg, rgba(39, 214, 255, .11), rgba(var(--team-rgb, 39, 214, 255), .16));
    box-shadow: 0 0 18px rgba(var(--team-rgb, 39, 214, 255), .32);
}

.player-detail-panel {
    border: 2px solid var(--team-edge);
    box-shadow: 0 0 32px rgba(var(--team-rgb, 39, 214, 255), .28), inset 0 0 24px rgba(var(--team-rgb, 39, 214, 255), .05);
}

.player-detail-panel::before {
    height: 4px;
    opacity: 1;
}

.player-headshot-wrap {
    box-shadow: 0 0 0 2px var(--team-edge), 0 0 24px rgba(var(--team-rgb, 39, 214, 255), .40);
}

.player-chart-card {
    margin-bottom: 18px;
}

/* Readable native dropdown menus on the dark Players page */
.player-filter {
    color-scheme: dark;
    background-color: #102232;
    color: #f4f8ff;
}

.player-filter option {
    background-color: #102232;
    color: #f4f8ff;
}


/* POCKET_SIGNAL_MARKET_COLOR_V1 */
.comparison-card .comparison-market-yards.market-below { color: #ff6b75; }
.comparison-card .comparison-market-yards.market-above { color: #44e2a8; }
.comparison-card .comparison-market-yards.market-equal { color: #d8e5ef; }


/* POCKET_SIGNAL_MARKET_COLOR_V1 */
/* POCKET_SIGNAL_GAP_COLOR_V2 */
.comparison-card .comparison-market-yards,
.comparison-card .comparison-market-yards.market-below,
.comparison-card .comparison-market-yards.market-above,
.comparison-card .comparison-market-yards.market-equal { color: #e1ebf3; }
.comparison-card .comparison-gap.gap-negative { color: #ff6b75; }
.comparison-card .comparison-gap.gap-positive { color: #44e2a8; }
.comparison-card .comparison-gap.gap-neutral { color: #d8e5ef; }


/* QB passing view: explicit availability, independent companion forecasts. */
[hidden] { display: none !important; }
.projection-data-status {
    color: #b8cbdc; font-size: 0.86rem; line-height: 1.65;
    margin: -8px 0 22px; padding: 12px 16px;
    border: 1px solid rgba(130, 173, 205, .22); border-radius: 12px;
    background: rgba(14, 31, 46, .82);
}
.qb-availability-notice {
    margin: 0 0 22px; padding: 14px 16px; border-radius: 12px;
    border: 1px solid rgba(241, 192, 93, .45); background: rgba(111, 78, 22, .16);
    color: #f3dca6; font-size: .9rem; line-height: 1.65;
}
.player-qb-detail .component-arrow { display: none; }
.player-qb-detail .component-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qb-model-note { color: #aebfd0; font-size: .85rem; line-height: 1.7; margin: 14px 0 0; }
@media (max-width: 900px) {
    .player-qb-detail .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .player-qb-detail .component-grid { grid-template-columns: 1fr; }
    .qb-availability-notice { padding: 12px; }
}


/* Keep local file refreshes distinct from source report timestamps. */
.qb-data-freshness {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; margin: -6px 0 22px;
}
.qb-data-freshness > div {
    min-width: 0; padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(135, 174, 202, .2); background: rgba(255,255,255,.025);
}
.qb-data-freshness span {
    display: block; color: #9fb6c9; text-transform: uppercase;
    letter-spacing: .07em; font-size: .64rem; font-weight: 700;
}
.qb-data-freshness strong {
    display: block; margin-top: 6px; color: #dce7f0;
    font-size: .78rem; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere;
}
.qb-data-freshness > p {
    grid-column: 1 / -1; margin: 0; color: #a4b8c8; font-size: .73rem; line-height: 1.6;
}
@media (max-width: 620px) {
    .qb-data-freshness { grid-template-columns: 1fr; }
}


/* RB forecasts are independent stats; no multiplication arrows. */
.player-rb-detail .component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player-rb-detail .component-card { min-width: 0; }
@media (max-width: 900px) {
    .player-rb-detail .component-grid { grid-template-columns: 1fr; }
}

/* Reading improvements reuse the existing cards, typography, and team theme. */
.player-update-time { margin: -6px 0 16px; color: #a4b8c8; font-size: .76rem; line-height: 1.6; }
.projection-details { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(135,174,202,.2); border-radius: 12px; background: rgba(255,255,255,.025); }
.projection-details > summary { color: #dce7f0; cursor: pointer; font-size: .85rem; font-weight: 600; }
.projection-details[open] > summary { margin-bottom: 18px; }
.projection-details .qb-data-freshness { margin: 0 0 14px; }
.projection-details p { color: #aebfd0; font-size: .8rem; line-height: 1.7; }
.projection-details .confidence-explainer { margin-top: 12px; }
.chart-window-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.player-detail .component-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.player-rb-detail .component-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width: 900px) { .player-detail .component-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 420px) { .player-detail .component-grid { grid-template-columns: 1fr; } }

/* Compact Players header; player cards and team styling stay unchanged. */
.players-hero { grid-template-columns: minmax(0,1.2fr) minmax(390px,.8fr); gap: 30px; align-items: center; }
.players-hero h1 { font-size: clamp(34px,3.1vw,49px); line-height: 1.06; letter-spacing: -.035em; max-width: 700px; }
.players-hero h1 span { display: inline; opacity: .72; }
.players-hero p.players-projection-note { margin-top: 12px; font-size: 12px; line-height: 1.65; color: #a4b8c8; opacity: 1; max-width: 680px; }
.hero-update-time { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
@media(max-width: 1100px) { .players-hero { grid-template-columns: 1fr; gap: 20px; } }
@media(max-width: 620px) {
    .players-hero h1 { font-size: 34px; }
    .players-hero-meta { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .players-hero-meta .hero-stat { padding: 11px 9px; }
    .players-hero-meta .hero-stat-value { font-size: 17px; }
    .players-hero-meta .hero-update-time { font-size: 12px; }
    .players-hero-meta .hero-stat-label { font-size: 10px; line-height: 1.4; }
    .filter-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Market-gap controls use the existing dropdown and team-card styles. */
.market-gap-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; margin-top: 18px; border: 1px solid rgba(39,214,255,.2); border-radius: 14px; background: rgba(39,214,255,.035); }
.market-gap-intro h2 { margin: 0; font-size: 17px; line-height: 1.45; color: #e1ebf3; }
.market-gap-intro p { margin: 5px 0 0; font-size: 13px; line-height: 1.65; color: #a4b8c8; }
.market-gap-shortcut { flex: 0 0 auto; padding: 11px 15px; border: 1px solid rgba(39,214,255,.55); border-radius: 10px; background: rgba(39,214,255,.08); color: #70e6ff; font: inherit; font-size: 13px; cursor: pointer; }
.market-gap-shortcut:hover { background: rgba(39,214,255,.15); }
.market-gap-shortcut:focus-visible { outline: 2px solid #27d6ff; outline-offset: 3px; }
@media(max-width: 620px) { .market-gap-intro { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px; } .market-gap-intro h2 { font-size: 16px; } }
.player-controls { grid-template-columns: minmax(220px,.8fr) minmax(0,1.8fr); }
.filter-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.filter-row.is-gap-sort { grid-template-columns: repeat(4,minmax(0,1fr)); }
.filter-row .player-filter { min-width: 0; }
.filter-row .player-filter[hidden], .market-sort-note[hidden] { display: none; }
.market-sort-note { grid-column: 1 / -1; margin: -6px 0 0; color: #a4b8c8; font-size: 12px; line-height: 1.6; }
.player-list-projection .list-market-gap.gap-positive { color: #44e2a8; }
.player-list-projection .list-market-gap.gap-negative { color: #ff6b75; }
.player-list-projection .list-market-gap.gap-neutral { color: #d8e5ef; }
@media(max-width: 1100px) { .player-controls { grid-template-columns: minmax(0,1fr); } }
@media(max-width: 620px) {
    .filter-row, .filter-row.is-gap-sort { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* POCKET_SIGNAL_PLAYER_BOARD_GLOW_V1 */
.players-page .player-list-panel {
    border: 1px solid rgba(39, 214, 255, .68);
    box-shadow:
        0 0 0 1px rgba(39, 214, 255, .07),
        0 0 19px rgba(15, 195, 235, .16),
        0 0 38px rgba(15, 195, 235, .055),
        inset 0 1px 0 rgba(125, 237, 255, .07);
}
.players-page .player-list-panel .panel-heading {
    border-bottom-color: rgba(39, 214, 255, .23);
    background: linear-gradient(110deg, rgba(39, 214, 255, .055), transparent);
}

/* POCKET_SIGNAL_PLAYER_BROWSING_CSS_V1 */
.players-page.ps-browsing-enhanced .players-hero {
    gap: 28px;
    padding: 14px 0 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
}
.players-page.ps-browsing-enhanced .players-hero h1 {
    margin: 6px 0 10px;
    font-size: clamp(32px, 3.15vw, 49px);
    line-height: 1.08;
}
.players-page.ps-browsing-enhanced .players-hero h1 span { display: inline; margin: 0; }
.players-page.ps-browsing-enhanced .players-intro { font-size: 14px; }
.players-page.ps-browsing-enhanced .players-projection-note { margin-top: 8px; font-size: 11px; line-height: 1.6; }
.players-page.ps-browsing-enhanced .players-hero-meta { gap: 9px; align-items: stretch; }
.players-page.ps-browsing-enhanced .hero-stat { padding: 12px; }
.players-page.ps-browsing-enhanced .hero-stat-value { font-size: 19px; }
.players-page.ps-browsing-enhanced .hero-stat-label { font-size: 11px; line-height: 1.4; }
.players-page.ps-browsing-enhanced .hero-update-time { font-size: 13px; line-height: 1.45; }
.players-page.ps-browsing-enhanced .hero-update-time > span { display: block; white-space: nowrap; }
.players-page.ps-browsing-enhanced .market-gap-intro { margin-top: 14px; padding: 12px 16px; gap: 18px; }
.players-page.ps-browsing-enhanced .market-gap-intro > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 3px 18px;
    min-width: 0;
}
.players-page.ps-browsing-enhanced .market-gap-intro h2 { grid-column: 1 / -1; font-size: 15px; }
.players-page.ps-browsing-enhanced .market-gap-intro p { font-size: 12px; margin: 0; }
.players-page.ps-browsing-enhanced .market-gap-intro p:has(#playerGapResultsLink) { margin: 0 !important; }
.players-page.ps-browsing-enhanced #playerGapResultsLink { white-space: nowrap; font-size: 11px; }
.players-page.ps-browsing-enhanced .market-gap-shortcut { flex: 0 0 auto; padding: 10px 13px; font-size: 12px; }
.ps-browsing-shortcuts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 17px 0 0; }
.ps-position-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.ps-browse-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 8px 15px; border-radius: 9px;
    border: 1px solid rgba(160,190,215,.21); background: rgba(255,255,255,.025);
    color: #b4c5d5; font: inherit; font-size: 12px; font-weight: 650;
    cursor: pointer;
}
.ps-browse-button:hover { border-color: rgba(39,214,255,.48); color: #e3f8ff; }
.ps-browse-button.is-active { color: #6ae7ff; background: rgba(39,214,255,.10); border-color: #27d6ff; box-shadow: inset 0 0 14px rgba(39,214,255,.035); }
.ps-browse-button:focus-visible, .ps-favorite-button:focus-visible { outline: 2px solid #68e7ff; outline-offset: 3px; }
.ps-watchlist-note { flex-basis: 100%; margin: 0; color: #9eb5c7; font-size: 11px; line-height: 1.5; }
.ps-watchlist-note[hidden] { display: none; }
.ps-position-dropdown-replaced { display: none !important; }
.players-page.ps-browsing-enhanced .player-controls { padding-top: 12px; gap: 12px; }
.players-page.ps-browsing-enhanced .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.players-page.ps-browsing-enhanced .filter-row.is-gap-sort { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-player-row { position: relative; display: flow-root; min-width: 0; }
.ps-player-row .player-list-projection { padding-right: 29px; }
.ps-favorite-button {
    position: absolute; z-index: 2; top: 12px; right: 10px;
    display: grid; place-items: center; width: 28px; height: 30px;
    padding: 0; border: 0; border-radius: 6px; background: transparent;
    color: #8ba2b7; font-size: 22px; line-height: 1; cursor: pointer;
}
.ps-favorite-button:hover { color: #8cefff; background: rgba(39,214,255,.075); }
.ps-favorite-button.is-saved { color: #5be3ff; text-shadow: 0 0 10px rgba(39,214,255,.25); }
.ps-watchlist-empty p { margin: 0 0 15px; line-height: 1.6; }
.ps-watchlist-empty { opacity: 1; color: #a7bdcf; }
.ps-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
    .players-page.ps-browsing-enhanced .players-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .players-page.ps-browsing-enhanced .players-hero-meta { max-width: 620px; }
    .players-page.ps-browsing-enhanced .market-gap-intro > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .players-page.ps-browsing-enhanced .players-hero h1 { font-size: 34px; }
    .players-page.ps-browsing-enhanced .hero-stat { padding: 10px 8px; }
    .players-page.ps-browsing-enhanced .hero-stat-value { font-size: 17px; }
    .players-page.ps-browsing-enhanced .hero-update-time { font-size: 11px; }
    .players-page.ps-browsing-enhanced .hero-stat-label { font-size: 10px; }
    .players-page.ps-browsing-enhanced .market-gap-intro { flex-direction: row; align-items: center; gap: 12px; }
    .players-page.ps-browsing-enhanced .market-gap-intro p:not(:has(a)) { display: none; }
    .players-page.ps-browsing-enhanced .market-gap-shortcut { max-width: 125px; white-space: normal; }
    .ps-browsing-shortcuts { gap: 9px; }
    .ps-position-buttons { gap: 5px; }
    .ps-browse-button { padding: 8px 12px; }
    .ps-watchlist-filter { font-size: 11px; }
    .players-page.ps-browsing-enhanced .filter-row.is-gap-sort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .players-page.ps-browsing-enhanced .filter-row.is-gap-sort #gapMetricFilter { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
 .players-page.ps-browsing-enhanced .market-gap-intro { flex-wrap: wrap; }
}
@media (pointer: coarse) {
 .ps-favorite-button { width: 44px; height: 44px; top: 7px; right: 8px; }
 .ps-player-row .player-list-projection { padding-right: 42px; }
}

/* POCKET_SIGNAL_BRIGHT_HEADER_V1 */
.players-page .players-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom-color: rgba(39, 214, 255, .27);
}
.players-page .players-hero > * {
    position: relative;
    z-index: 1;
}

/* Broad ambient light, behind the text and clipped to the header. */
.players-page .players-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: -45% -12% -35% -14%;
    background:
        radial-gradient(ellipse at 25% 42%, rgba(12, 201, 240, .16), transparent 53%),
        radial-gradient(ellipse at 73% 66%, rgba(30, 118, 235, .09), transparent 45%);
    opacity: .85;
    animation: ps-header-ambient 15s ease-in-out infinite alternate;
}
@keyframes ps-header-ambient {
    from { transform: translate3d(-1%, -1%, 0); opacity: .65; }
    to { transform: translate3d(3%, 2%, 0); opacity: 1; }
}

/* One brief signal pass, followed by a long quiet interval. */
.players-page .players-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: -25%;
    bottom: 0;
    width: 23%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #23d8ff 48%, #bcf7ff 65%, transparent);
    box-shadow: 0 -2px 12px rgba(39, 214, 255, .3);
    opacity: 0;
    animation: ps-header-signal 18s ease-in-out 1s infinite;
}
@keyframes ps-header-signal {
    0%, 10% { transform: translate3d(0, 0, 0); opacity: 0; }
    14% { opacity: .9; }
    32%, 100% { transform: translate3d(560%, 0, 0); opacity: 0; }
}

.players-page .players-hero .section-kicker {
    color: #62e7ff;
    opacity: 1;
    text-shadow: 0 0 16px rgba(39, 214, 255, .2);
}
.players-page .players-hero h1 { color: #f1f8ff; }
.players-page .players-hero h1 span {
    opacity: 1;
    color: #68e5ff;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .players-page .players-hero h1 span {
        background-image: linear-gradient(105deg, #e5fbff 0%, #8beaff 42%, #27d6ff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 13px rgba(39, 214, 255, .13));
    }
}
.players-page .players-hero .players-intro { color: #c5d8e9; opacity: .95; }

/* Keep the update-time card quieter than the count and week. */
.players-page .players-hero .hero-stat {
    border-color: rgba(66, 214, 247, .28);
    background: linear-gradient(145deg, rgba(36, 143, 185, .09), rgba(15, 30, 47, .35));
    box-shadow: inset 0 1px 0 rgba(133, 236, 255, .055), 0 0 16px rgba(14, 186, 225, .055);
}
.players-page .players-hero .hero-stat:nth-child(-n+2) {
    border-color: rgba(66, 214, 247, .43);
    box-shadow: inset 0 1px 0 rgba(133, 236, 255, .075), 0 0 19px rgba(14, 186, 225, .09);
}
.players-page .players-hero #playerCount,
.players-page .players-hero .hero-stat .slate-week {
    color: #82eaff;
    text-shadow: 0 0 13px rgba(39, 214, 255, .17);
}
.players-page .players-hero .hero-stat-label { opacity: .78; }

@media (max-width: 620px) {
    .players-page .players-hero::before {
        background: radial-gradient(ellipse at 30% 40%, rgba(12, 201, 240, .13), transparent 65%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .players-page .players-hero::before {
        animation: none;
        transform: none;
        opacity: .8;
    }
    .players-page .players-hero::after {
        animation: none;
        transform: none;
        left: 0;
        width: 100%;
        opacity: .22;
    }
}

/* PS_HEADER_BORDER_FIX_V1 */
.players-page .players-hero {
    overflow: visible;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.players-page .players-hero::after {
    content: none;
    animation: none;
    box-shadow: none;
}
.players-page .players-hero::before {
    inset: 0;
    animation: none;
    transform: none;
    opacity: .8;
}

/* PS_HEADER_SOFT_GLOW_V2 */
.players-page .players-hero::before {
    inset: 0;
    background: radial-gradient(
        ellipse at 38% 45%,
        rgba(39, 214, 255, .14) 0%,
        rgba(39, 214, 255, .055) 42%,
        transparent 72%
    );
    -webkit-mask-image: linear-gradient(
        to right, transparent, black 10%, black 85%, transparent
    );
    mask-image: linear-gradient(
        to right, transparent, black 10%, black 85%, transparent
    );
    animation: none;
    transform: none;
}

/* PS_PLAYER_MATCHUPS_V1 */
.ps-matchup-context {display:grid;gap:14px;margin:18px 0;min-width:0}
.ps-matchup-panel {padding:18px;border:1px solid rgba(39,214,255,.25);border-radius:14px;background:linear-gradient(135deg,rgba(39,214,255,.045),rgba(255,255,255,.018));box-shadow:0 0 15px rgba(39,214,255,.035)}
.ps-matchup-panel h3 {margin:5px 0 14px;font-size:19px;color:#edf6ff}
.ps-matchup-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ps-matchup-stat {display:flex;flex-direction:column;gap:7px;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.025);min-width:0}
.ps-matchup-stat small {font-size:11px;line-height:1.4;color:#a9bac9}
.ps-matchup-stat strong {color:#39d8f4;font-size:22px;line-height:1.2}
.ps-matchup-stat span,.ps-matchup-panel p {color:#a9bac9;font-size:12px;line-height:1.65}
.ps-matchup-panel p {margin:12px 0}
.ps-matchup-panel a {color:#39d8f4;font-size:12px}
.ps-matchup-panel details {font-size:11px;color:#a9bac9;margin-top:10px}
.ps-matchup-panel summary {cursor:pointer}
@media(max-width:600px){.ps-matchup-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ps-matchup-panel{padding:14px}.ps-matchup-stat strong{font-size:19px}}