/* Season predictor and playoff simulator */

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

.primary-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #292929;
    border-radius: 10px;
    background: #111;
}

.nav-view-btn {
    padding: 7px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8b8b96;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.nav-view-btn:hover {
    color: #fff;
    background: #1d1d1d;
}

.nav-view-btn.active {
    color: #fff;
    background: #2c2b42;
    box-shadow: inset 0 0 0 1px rgba(124, 130, 255, 0.28);
}

#playerExplorer.hidden,
.season-predictor.hidden,
#standingsPredictorView.hidden,
#playoffPredictorView.hidden,
.predictor-actions.hidden {
    display: none;
}

.season-predictor {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.season-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(124, 130, 255, 0.32);
    border-radius: 18px;
    background:
        radial-gradient(circle at 82% 10%, rgba(122, 88, 214, 0.3), transparent 32%),
        linear-gradient(135deg, #16162a 0%, #101016 62%, #121219 100%);
}

.season-hero::after {
    content: '';
    position: absolute;
    right: -45px;
    bottom: -88px;
    width: 240px;
    height: 240px;
    border: 34px solid rgba(255, 255, 255, 0.028);
    border-radius: 50%;
}

.season-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: #a7abff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.season-hero h2 {
    margin-bottom: 8px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -0.035em;
}

.season-hero p {
    max-width: 680px;
    color: #a2a2ad;
    font-size: 14px;
    line-height: 1.55;
}

.season-hero-badge {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(9, 9, 15, 0.58);
    text-align: right;
}

.season-hero-badge strong {
    color: #fff;
    font-size: 22px;
}

.season-hero-badge span {
    margin-top: 2px;
    color: #888895;
    font-size: 11px;
}

.model-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 0.55fr)) minmax(260px, 2fr);
    border: 1px solid #292929;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
}

.model-strip-item,
.model-strip-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: 14px 18px;
    border-right: 1px solid #292929;
}

.model-strip-item span {
    font-size: 20px;
    font-weight: 800;
}

.model-strip-item small,
.model-strip-note span {
    color: #7d7d88;
    font-size: 11px;
}

.model-strip-note {
    border-right: 0;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.06), transparent);
}

.model-strip-note strong {
    margin-bottom: 3px;
    color: #a8e0b7;
    font-size: 13px;
}

.predictor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.predictor-view-toggle,
.predictor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.predictor-view-toggle {
    padding: 4px;
    border: 1px solid #292929;
    border-radius: 11px;
    background: #111;
}

.predictor-view-btn,
.predictor-btn {
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s, border-color 0.16s, background 0.16s;
}

.predictor-view-btn {
    padding: 9px 13px;
    background: transparent;
    color: #858590;
    font-size: 12px;
}

.predictor-view-btn.active {
    color: #fff;
    background: #29283e;
}

.predictor-btn {
    padding: 10px 13px;
    font-size: 12px;
}

.predictor-btn:hover {
    transform: translateY(-1px);
}

.predictor-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.predictor-btn.secondary {
    border: 1px solid #38384b;
    background: #181822;
}

.predictor-btn.secondary.active {
    border-color: #8186ff;
    background: #2b2a43;
}

.predictor-btn.ghost {
    border: 1px solid #2c2c2c;
    background: transparent;
    color: #898994;
}

.scenario-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid #282838;
    border-radius: 10px;
    background: #12121a;
    color: #aaaab6;
    font-size: 12px;
}

.scenario-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #8287ff;
    box-shadow: 0 0 0 4px rgba(130, 135, 255, 0.1);
}

.standings-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    color: #7d7d88;
    font-size: 11px;
}

.legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
}

.legend-dot.playoff { background: #6fcf97; }
.legend-dot.playin { background: #f2c94c; }
.legend-dot.lottery { background: #555; }

.standings-help {
    margin-left: auto;
}

.conference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.conference-card,
.team-context-card,
.bracket-section,
.finals-card {
    border: 1px solid #282828;
    border-radius: 14px;
    background: #111;
}

.conference-card {
    overflow: hidden;
}

.conference-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #272727;
}

.conference-heading > div {
    display: flex;
    flex-direction: column;
}

.conference-heading span {
    color: #777783;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.conference-heading strong {
    margin-top: 2px;
    font-size: 15px;
}

.conference-tag {
    padding: 5px 7px;
    border-radius: 6px;
    font-weight: 800;
}

.conference-tag.east { color: #96b6ff; background: rgba(64, 115, 255, 0.12); }
.conference-tag.west { color: #f5a6a6; background: rgba(236, 80, 80, 0.12); }

.standings-table-wrap {
    overflow-x: auto;
}

.standings-table {
    width: 100%;
    min-width: 545px;
    border-collapse: collapse;
    table-layout: fixed;
}

.standings-table th {
    padding: 9px 7px;
    color: #686873;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: right;
    text-transform: uppercase;
}

.standings-table th:nth-child(1) { width: 42px; text-align: center; }
.standings-table th:nth-child(2) { width: 180px; text-align: left; }
.standings-table th:nth-child(3) { width: 52px; }
.standings-table th:nth-child(4) { width: 60px; }
.standings-table th:nth-child(5) { width: 92px; }
.standings-table th:nth-child(6) { width: 62px; }

.standings-row {
    border-top: 1px solid #202020;
    transition: background 0.14s;
}

.standings-row:hover,
.standings-row.selected {
    background: #17171d;
}

.standings-row td {
    position: relative;
    height: 48px;
    padding: 6px 7px;
    color: #c8c8d0;
    font-size: 11px;
    text-align: right;
}

.standings-row td:first-child {
    text-align: center;
}

.standings-row.playoff td:first-child::before,
.standings-row.playin td:first-child::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    border-radius: 2px;
}

.standings-row.playoff td:first-child::before { background: #6fcf97; }
.standings-row.playin td:first-child::before { background: #f2c94c; }

.seed-number {
    color: #7c7c87;
    font-weight: 750;
}

.team-context-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.team-context-button > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.team-context-button strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-context-button small {
    color: #656570;
    font-size: 9px;
}

.team-mark,
.bracket-team-code {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 31px;
    height: 27px;
    border: 1px solid color-mix(in srgb, var(--team-color) 60%, #333);
    border-radius: 6px;
    background: color-mix(in srgb, var(--team-color) 17%, #121212);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}

.record-cell {
    color: #777781 !important;
}

.projection-cell strong {
    color: #fff;
    font-size: 13px;
}

.wins-delta {
    display: block;
    font-size: 8px;
}

.wins-delta.up { color: #6fcf97; }
.wins-delta.down { color: #ef7777; }

.wins-input {
    width: 48px;
    padding: 5px 4px;
    border: 1px solid #5f63b5;
    border-radius: 6px;
    outline: none;
    background: #1c1c2d;
    color: #fff;
    font: inherit;
    font-weight: 750;
    text-align: center;
}

.wins-input:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.16);
}

.strength-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.strength-cell span {
    width: 20px;
    color: #a0a0aa;
}

.strength-cell i {
    width: 36px;
    height: 4px;
    overflow: hidden;
    border-radius: 3px;
    background: #28282d;
}

.strength-cell b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #667eea, #a17de0);
}

.odds-pill {
    display: inline-flex;
    min-width: 39px;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 999px;
    background: #1e1e27;
    color: #c7c7d0;
    font-size: 10px;
    font-weight: 750;
}

.team-context-card {
    margin-top: 14px;
    overflow: hidden;
}

.team-context-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    border-bottom: 1px solid #282828;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.07), transparent 45%);
}

.team-context-logo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid color-mix(in srgb, var(--team-color) 65%, #333);
    border-radius: 12px;
    background: color-mix(in srgb, var(--team-color) 18%, #111);
    font-size: 13px;
    font-weight: 900;
}

.team-context-heading > div:nth-child(2) span {
    color: #767681;
    font-size: 10px;
}

.team-context-heading h3 {
    margin-top: 2px;
    font-size: 18px;
}

.team-context-projection {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    text-align: right;
}

.team-context-projection span {
    color: #777781;
    font-size: 9px;
    text-transform: uppercase;
}

.team-context-projection strong {
    margin-top: 2px;
    font-size: 16px;
}

.team-context-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

.factor-panel,
.news-panel {
    padding: 18px 20px;
}

.factor-panel {
    border-right: 1px solid #282828;
}

.factor-panel h4,
.news-panel h4 {
    font-size: 12px;
}

.factor-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 12px 0 15px;
}

.factor-metrics > div {
    display: flex;
    flex-direction: column;
    padding: 9px;
    border: 1px solid #26262c;
    border-radius: 8px;
    background: #15151a;
}

.factor-metrics span {
    color: #70707a;
    font-size: 8px;
    text-transform: uppercase;
}

.factor-metrics strong {
    margin-top: 3px;
    font-size: 13px;
    text-transform: capitalize;
}

.confidence-high { color: #6fcf97; }
.confidence-medium { color: #f2c94c; }
.confidence-low { color: #ef7777; }

.factor-bars {
    display: grid;
    gap: 7px;
}

.factor-row {
    display: grid;
    grid-template-columns: 92px 1fr 34px;
    align-items: center;
    gap: 8px;
    color: #8b8b95;
    font-size: 9px;
}

.factor-row i {
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: #29292f;
}

.factor-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #667eea, #9b78d0);
}

.factor-row strong {
    color: #a9a9b3;
    text-align: right;
}

.factor-panel p {
    margin-top: 12px;
    color: #70707a;
    font-size: 10px;
    line-height: 1.45;
}

.news-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}

.news-panel-heading span {
    color: #686873;
    font-size: 9px;
}

.team-news-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 0;
    border-top: 1px solid #242429;
    color: #fff;
    text-decoration: none;
}

.team-news-item:hover strong {
    color: #aeb2ff;
}

.team-news-item span {
    color: #676772;
    font-size: 8px;
    text-transform: uppercase;
}

.team-news-item strong {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.no-team-news {
    padding: 12px 0;
    color: #777781;
    font-size: 10px;
    line-height: 1.45;
}

.playoff-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.playoff-summary > div {
    display: flex;
    flex-direction: column;
    padding: 13px 15px;
    border: 1px solid #292929;
    border-radius: 10px;
    background: #111;
}

.playoff-summary span {
    color: #71717b;
    font-size: 9px;
    text-transform: uppercase;
}

.playoff-summary strong {
    margin-top: 3px;
    font-size: 13px;
}

.nba-seed-editor:empty { display: none; }

.nba-seed-editor {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(124, 130, 255, .28);
    border-radius: 12px;
    background: #111117;
}

.nba-seed-editor-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
}

.playoff-summary .champion-summary {
    border-color: rgba(191, 157, 69, 0.38);
    background: linear-gradient(135deg, rgba(191, 157, 69, 0.12), #111);
}

.bracket-conferences {
    display: grid;
    gap: 14px;
}

.bracket-section {
    overflow: hidden;
}

.bracket-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #282828;
}

.bracket-heading span {
    font-size: 14px;
    font-weight: 750;
}

.bracket-heading small {
    color: #6f6f79;
    font-size: 9px;
}

.bracket-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 10px;
    padding: 13px;
    overflow-x: auto;
}

.bracket-round {
    min-width: 190px;
}

.bracket-round h4 {
    margin-bottom: 7px;
    color: #70707a;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.bracket-series-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.series-card {
    overflow: hidden;
    border: 1px solid #29292f;
    border-radius: 9px;
    background: #15151a;
}

.series-label {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #24242a;
    color: #787882;
    font-size: 8px;
    text-transform: uppercase;
}

.series-label small {
    color: #55555f;
    font-size: 7px;
}

.bracket-team {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 39px;
    padding: 5px 7px;
    border: 0;
    border-top: 1px solid #202026;
    background: transparent;
    color: #8c8c96;
    text-align: left;
}

.bracket-team:disabled {
    opacity: 1;
}

.bracket-team:not(:disabled) {
    cursor: pointer;
}

.bracket-team:not(:disabled):hover {
    background: #222232;
}

.bracket-team.winner {
    background: rgba(102, 126, 234, 0.09);
    color: #fff;
}

.bracket-team-code {
    width: 28px;
    height: 24px;
    font-size: 8px;
}

.bracket-team-name {
    overflow: hidden;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-team-probability {
    color: #74747e;
    font-size: 8px;
    text-align: right;
}

.bracket-team small {
    grid-column: 2 / 4;
    margin-top: -5px;
    color: #898dff;
    font-size: 7px;
}

.finals-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(260px, 1.2fr);
    gap: 18px;
    align-items: center;
    margin-top: 14px;
    padding: 20px;
    border-color: rgba(191, 157, 69, 0.35);
    background: radial-gradient(circle at 20% 0%, rgba(191, 157, 69, 0.13), transparent 38%), #111;
}

.finals-copy > span {
    color: #cbb472;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.finals-copy h3 {
    margin: 5px 0 6px;
    font-size: 21px;
}

.finals-copy p {
    color: #74747e;
    font-size: 10px;
    line-height: 1.45;
}

.finals-series .series-card {
    border-color: rgba(191, 157, 69, 0.3);
}

.bracket-edit-hint {
    margin-top: 9px;
    color: #70707a;
    font-size: 10px;
    text-align: center;
}

.predictor-sources {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border-top: 1px solid #242424;
    color: #6f6f79;
    font-size: 9px;
    line-height: 1.45;
}

.predictor-sources strong {
    color: #9c9ca6;
}

.model-sources {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.model-sources a {
    padding: 4px 7px;
    border: 1px solid #2c2c33;
    border-radius: 5px;
    color: #888cdb;
    text-decoration: none;
}

.model-sources a:hover {
    border-color: #6569a8;
    color: #b7baff;
}

@media (max-width: 900px) {
    .header {
        align-items: flex-start;
        gap: 12px;
    }

    .header-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

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

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

    .factor-panel {
        border-right: 0;
        border-bottom: 1px solid #282828;
    }

    .predictor-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .predictor-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 650px) {
    .app {
        padding: 14px;
    }

    .header {
        flex-wrap: wrap;
    }

    .header-actions {
        margin-left: auto;
    }

    .primary-nav {
        width: max-content;
    }

    .season-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .season-hero-badge {
        min-width: 0;
        text-align: left;
    }

    .model-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .model-strip-item {
        min-height: 62px;
        padding: 11px;
    }

    .model-strip-note {
        grid-column: 1 / -1;
        min-height: 58px;
        border-top: 1px solid #292929;
    }

    .standings-help {
        width: 100%;
        margin-left: 0;
    }

    .team-context-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .team-context-projection {
        width: 100%;
        margin-left: 58px;
        text-align: left;
    }

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

    .playoff-summary {
        grid-template-columns: 1fr;
    }

    .finals-card {
        grid-template-columns: 1fr;
    }

    .predictor-sources {
        align-items: flex-start;
        flex-direction: column;
    }

    .model-sources {
        justify-content: flex-start;
    }
}