@font-face {
    font-family:'Open Sans';
    src:url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Open Sans';
    src:url('../fonts/OpenSans-Semibold.ttf') format('truetype');
    font-weight:600 800;
    font-style:normal;
    font-display:swap;
}

:root {
    color-scheme:light;
    --bg:#f2f5f7;
    --panel:#fff;
    --text:#182329;
    --muted:#596772;
    --line:#dde4e8;
    --soft:#e9eef2;
    --red:#bf1e2e;
    --link:#0d16aa;
    --hover:#f7f9fa;
}

:root[data-theme=dark] {
    color-scheme:dark;
    --bg:#090f13;
    --panel:#121b20;
    --text:#f2f5f7;
    --muted:#aab5bd;
    --line:#273239;
    --soft:#1b272f;
    --red:#ff8992;
    --link:#75baff;
    --hover:#1b272f;
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme=light]):not([data-theme=dark]) {
        color-scheme:dark;
        --bg:#090f13;
        --panel:#121b20;
        --text:#f2f5f7;
        --muted:#aab5bd;
        --line:#273239;
        --soft:#1b272f;
        --red:#ff8992;
        --link:#75baff;
        --hover:#1b272f;
    }
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.5 'Open Sans','Segoe UI',sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

a:hover {
    color:var(--link);
}

button,select,input {
    font:inherit;
    color:inherit;
}

button,select {
    cursor:pointer;
}

button {
    border:0;
}

a,button,select {
    touch-action:manipulation;
}

a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible {
    outline:3px solid var(--link);
    outline-offset:4px;
}

h1,h2,h3,p {
    margin:0;
}

h2 {
    font-size:18px;
    line-height:1.3;
}

h3 {
    font-size:17px;
    line-height:1.4;
}

button:disabled {
    cursor:wait;
    opacity:.6;
}

[hidden] {
    display:none!important;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.icon-library {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.icon {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}

.skip-link {
    position:fixed;
    left:16px;
    top:-70px;
    z-index:1100;
    background:var(--panel);
    padding:12px;
    border:2px solid var(--link);
    border-radius:6px;
}

.skip-link:focus {
    top:10px;
}

.icon-button {
    width:44px;
    height:44px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
}

.icon-button:hover {
    background:var(--hover);
}



.dashboard {
    max-width:1240px;
    padding:30px 24px 32px;
    margin:auto;
}

.dashboard-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:26px;
}

.eyebrow {
    font-size:11px;
    font-weight:600;
    letter-spacing:1.4px;
    color:var(--muted);
}

.dashboard-heading .eyebrow {
    margin-bottom:7px;
}

.dashboard h1 {
    font-size:32px;
    line-height:1.2;
    letter-spacing:-1px;
    font-weight:600;
}

.heading-description {
    color:var(--muted);
    font-size:13px;
}

.brand-dot {
    color:var(--red);
}

.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:24px;
    align-items:start;
}

.main-column,.side-column {
    display:grid;
    gap:25px;
    min-width:0;
}

.side-column {
    padding-top:38px;
    gap:18px;
}

.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px;
    min-height:25px;
}

.section-heading h2 {
    display:flex;
    align-items:center;
    gap:9px;
    letter-spacing:-.3px;
}

.section-heading>a {
    font-size:12px;
    color:var(--link);
    white-space:nowrap;
}

.section-heading>a:hover {
    text-decoration:underline;
}

.panel {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
}

.loading-state {
    min-height:165px;
    display:grid;
    place-items:center;
    color:var(--muted);
    font-size:13px;
    grid-column:1/-1;
}

.broadcast-content .loading-state {
    min-height:310px;
}

.home-feature {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    min-height:310px;
    padding:28px;
    border-radius:10px;
    color:#fff;
    background:#101522;
}

.broadcast-thumbnail {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

.home-feature:before {
    position:absolute;
    content:'';
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,#090f1380 0%,#090f1366 25%,#090f13e6 100%);
    pointer-events:none;
}

.broadcast-top,.broadcast-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
}

.broadcast-badge {
    font-size:11px;
    letter-spacing:1px;
    font-weight:600;
    border-radius:4px;
    padding:5px 9px;
    background:#0d16aa;
    color:#fff;
}

.broadcast-badge.is-live {
    background:#c91f2d;
}

.broadcast-top>p,.broadcast-bottom>p {
    color:#dfe5f4;
    font-size:12px;
}

.broadcast-top>p {
    text-align:right;
}

.broadcast-copy {
    max-width:650px;
}

.broadcast-copy>p {
    font-size:13px;
    color:#dfe5f4;
    margin-bottom:8px;
}

.broadcast-copy h3 {
    font-size:clamp(25px,2.8vw,36px);
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.7px;
    overflow-wrap:anywhere;
}

.home-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:11px 18px;
    min-height:44px;
    background:#bf1e2e;
    color:#fff;
    border-radius:7px;
    font-size:14px;
    font-weight:600;
}

.home-primary:hover {
    background:#a71827;
    color:#fff;
}

.home-primary .icon {
    width:20px;
}

.home-primary:focus-visible {
    outline-color:#fff;
}

.home-feature .text-link {
    color:#fff;
}

.broadcast-player {
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
    border-radius:10px;
    background:#000;
}

.player-back {
    margin-top:10px;
}

.dashboard-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.filter-group {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.filter {
    display:flex;
    gap:8px;
    align-items:center;
    padding-left:12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel);
    min-width:0;
}

.filter .icon {
    color:var(--muted);
    width:18px;
}

.filter select {
    height:44px;
    min-width:115px;
    max-width:220px;
    border:0;
    border-radius:8px;
    background:transparent;
    padding:0 10px 0 0;
    font-weight:600;
    font-size:13px;
}

.filter option {
    background:var(--panel);
}

.refresh-status {
    font-size:11px;
    color:var(--muted);
    margin-top:10px;
}

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

.side-column .score-grid {
    grid-template-columns:minmax(0,1fr);
}

.score-card {
    padding:13px 15px;
    display:block;
    min-width:0;
    transition:border-color .15s;
}

.score-card:hover {
    border-color:var(--link);
    color:var(--text);
}

.score-meta {
    display:flex;
    gap:8px;
    justify-content:space-between;
    font-size:11px;
    margin-bottom:10px;
    color:var(--muted);
    font-weight:600;
}

.score-meta>span:first-child {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.game-status {
    flex-shrink:0;
}

.game-status.is-live {
    color:var(--red);
}

.team-row {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:34px;
}

.team-name {
    font-size:13px;
    font-weight:600;
    overflow-wrap:anywhere;
}

.team-score {
    font-size:19px;
    font-weight:600;
    margin-left:auto;
    font-variant-numeric:tabular-nums;
}

.team-logo {
    position:relative;
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    flex-shrink:0;
    background:var(--soft);
    border-radius:6px;
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    overflow:hidden;
}

.team-logo img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    background:var(--panel);
}

.score-detail {
    border-top:1px solid var(--line);
    margin-top:10px;
    padding-top:9px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:11px;
}

.network-tag {
    font-weight:600;
    color:var(--red);
    white-space:nowrap;
}

.count-badge {
    font-size:11px;
    background:var(--soft);
    color:var(--muted);
    padding:3px 6px;
    border-radius:4px;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--link);
    background:none;
    padding:4px 0;
    font-size:13px;
    font-weight:600;
    min-height:44px;
}

.text-link:hover {
    text-decoration:underline;
}

.empty-state {
    grid-column:1/-1;
    padding:25px;
    text-align:center;
    min-height:165px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.empty-state>.icon {
    color:var(--muted);
    margin-bottom:4px;
}

.empty-state p {
    font-size:13px;
    color:var(--muted);
    max-width:390px;
}

.empty-state h3 {
    font-size:16px;
}

.home-follow {
    padding:24px;
}

.home-follow>.icon {
    color:var(--link);
    width:26px;
    height:26px;
    margin-bottom:14px;
}

.home-follow h2 {
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.5px;
}

.home-follow p {
    color:var(--muted);
    font-size:13px;
    margin:12px 0 18px;
}

.home-secondary {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    background:var(--soft);
    border:1px solid var(--line);
    padding:11px 12px;
    border-radius:7px;
    color:var(--link);
    font-weight:600;
    font-size:12px;
    min-height:44px;
}

.home-follow>.text-link {
    display:flex;
    justify-content:center;
    margin-top:4px;
    font-size:12px;
}

.home-explore {
    padding:20px 22px;
}

.home-explore h2 {
    font-size:16px;
    margin-bottom:6px;
}

.feature-row {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
}

.feature-row:last-child {
    border:0;
    padding-bottom:0;
}

.feature-row>.icon {
    color:var(--muted);
    width:20px;
}

.feature-row strong {
    font-size:13px;
    font-weight:600;
}

.feature-row>span:last-child {
    margin-left:auto;
    color:var(--muted);
    font-size:23px;
}

.home-podcast {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 4px;
}

.home-podcast>span:last-child {
    margin-left:auto;
}

.home-podcast strong,.home-podcast small {
    display:block;
}

.home-podcast strong {
    font-size:13px;
    font-weight:600;
}

.home-podcast small {
    font-size:12px;
    color:var(--muted);
    margin-top:3px;
}

.home-sponsors {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:30px;
    padding:20px 0 0;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:12px;
}

.home-sponsors a {
    color:var(--link);
    white-space:nowrap;
    padding:8px 0;
}

.site-footer {
    max-width:1192px;
    margin:0 auto;
    padding:25px 0 32px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    color:var(--muted);
    font-size:12px;
}

.site-footer>div {
    display:flex;
    align-items:center;
    gap:12px;
}

.site-footer strong {
    font-size:20px;
    letter-spacing:-.8px;
    color:var(--text);
}

.notice {
    margin-bottom:20px;
    padding:15px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
}

.notice a {
    text-decoration:underline;
}

@media(max-width:1100px) {
    .dashboard-grid {
        grid-template-columns:minmax(0,1fr) 270px;
        gap:20px;
    }
    .dashboard-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }
    .site-footer {
        margin:0 24px;
    }
    .home-feature {
        padding:24px;
    }
    .score-grid {
        grid-template-columns:minmax(0,1fr);
    }
}


@media(max-width:800px) {
    .dashboard {
        padding:24px 18px;
    }
    .dashboard-grid {
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }
    .side-column {
        padding-top:0;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .home-podcast {
        grid-column:1/-1;
    }
    .score-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .site-footer {
        margin:0 18px;
    }
}

@media(max-width:480px) {
    .dashboard {
        padding:22px 16px;
    }
    .dashboard h1 {
        font-size:28px;
    }
    .eyebrow {
        font-size:10px;
        letter-spacing:1px;
    }
    .heading-description {
        font-size:13px;
    }
    .home-feature {
        padding:22px;
        min-height:310px;
    }
    .broadcast-top {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }
    .broadcast-top>p {
        text-align:left;
    }
    .broadcast-bottom>p {
        display:none;
    }
    .broadcast-copy h3 {
        font-size:27px;
    }
    .filter-group {
        flex:1;
        gap:8px;
    }
    .filter {
        flex:1;
        padding-left:8px;
        gap:5px;
    }
    .filter select {
        min-width:0;
        width:100%;
        font-size:12px;
        padding-right:4px;
    }
    .filter .icon {
        width:16px;
    }
    .dashboard-toolbar {
        gap:8px;
    }
    .score-grid,.side-column {
        grid-template-columns:minmax(0,1fr);
    }
    .section-heading h2 {
        font-size:16px;
    }
    .section-heading>a {
        font-size:11px;
    }
    .home-sponsors {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .site-footer>div {
        flex-wrap:wrap;
    }
    .home-follow h2 br {
        display:none;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important;
        scroll-behavior:auto!important;
    }
}

/* Featured playoff entry stays above broadcasts on every screen size. */
.home-playoffs { display:flex; align-items:center; gap:20px; padding:24px; margin-bottom:28px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:10px; cursor:pointer; }
.home-playoffs-logo { display:flex; align-items:center; justify-content:center; width:180px; min-height:82px; padding:12px; flex-shrink:0; border-radius:8px; background:#102b43; }
.home-playoffs-logo img { display:block; width:100%; height:auto; }
.home-playoffs h2 { font-size:23px; margin:5px 0; letter-spacing:-.5px; }
.home-playoffs p:not(.eyebrow) { font-size:13px; color:var(--muted); }
.home-playoffs-action { display:flex; align-items:center; justify-content:center; gap:20px; min-height:46px; margin-left:auto; padding:12px 18px; border-radius:7px; background:#0d16aa; color:#fff; white-space:nowrap; font-size:13px; font-weight:600; }
.home-playoffs:hover, .home-playoffs:focus-visible { border-color:var(--red); color:var(--text); }
.home-playoffs:hover .home-playoffs-action { text-decoration:underline; text-underline-offset:3px; background:#1829c4; }
@media(max-width:700px) { .home-playoffs { flex-wrap:wrap; gap:14px; padding:20px; } .home-playoffs>div { flex:1; min-width:180px; } .home-playoffs h2 { font-size:20px; } .home-playoffs-action { width:100%; margin-left:0; } .home-playoffs-logo { width:160px; min-height:72px; } }

/* Upcoming Holiday Hoops follows the active playoffs, ahead of the broadcast feed. */
.home-holiday-hoops {
    display:grid;
    grid-template-columns:150px minmax(0,1fr) auto;
    align-items:center;
    gap:24px;
    padding:18px 24px;
    margin-bottom:28px;
    border:1px solid var(--line);
    border-left:4px solid #ff8a00;
    border-radius:10px;
    background:var(--panel);
    color:var(--text);
}
.home-holiday-hoops:hover {
    color:var(--text);
    border-color:#ff8a00;
}
.home-hoops-logo {
    display:block;
    padding:10px;
    border-radius:7px;
    background:#f7f4ed;
}
.home-hoops-logo img {
    display:block;
    width:100%;
    height:auto;
}
.home-hoops-copy h2 {
    font-size:22px;
    margin:5px 0;
    letter-spacing:-.5px;
}
.home-hoops-copy p:not(.eyebrow) {
    color:var(--muted);
    font-size:13px;
}
.home-hoops-action {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    min-height:46px;
    padding:12px 18px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--soft);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}
.home-holiday-hoops:hover .home-hoops-action {
    text-decoration:underline;
    text-underline-offset:3px;
}
@media(max-width:900px) {
    .home-holiday-hoops { grid-template-columns:130px minmax(0,1fr); gap:14px 20px; }
    .home-hoops-action { grid-column:2; justify-self:start; }
    .home-hoops-logo { grid-row:1 / 3; }
}
@media(max-width:480px) {
    .home-holiday-hoops { grid-template-columns:minmax(0,1fr); padding:20px; gap:14px; }
    .home-hoops-logo { grid-row:auto; width:160px; }
    .home-hoops-copy h2 { font-size:20px; }
    .home-hoops-action { grid-column:auto; justify-self:stretch; white-space:normal; }
}