/* BlakeBot Baseball — public dashboard styles. */

:root {
    --bg: #050810;
    --bg-deep: #02040a;
    --surface: #0d131e;
    --surface-hi: #131b2b;
    --rule: rgba(255, 255, 255, 0.05);
    --rule-hi: rgba(255, 255, 255, 0.12);
    --text: #f5f9ff;
    --text-soft: #93a4bf;
    --text-mute: #5a6c87;
    --good: #22d36e;
    --bad: #ff4d5e;
    --warn: #ffb020;
    --hot: #ff5a3c;
    --accent: #00d4ff;
    --overlay-strong: rgba(0, 0, 0, 0.50);
    --overlay-medium: rgba(0, 0, 0, 0.42);
    --overlay-soft: rgba(0, 0, 0, 0.40);
    --logo-bg-grad-a: rgba(255, 255, 255, 1);
    --logo-bg-grad-b: rgba(238, 242, 247, 0.92);
    --logo-shadow-inset: rgba(255, 255, 255, 0.08);
    --logo-shadow-drop: rgba(0, 0, 0, 0.40);
    --team-bands-opacity: 0.55;
    --topbar-glow: rgba(0, 212, 255, 0.08);
    --hero-glow: rgba(0, 212, 255, 0.08);
    --accent-soft: rgba(0, 212, 255, 0.10);
    --accent-soft-2: rgba(0, 212, 255, 0.04);
    --accent-border: rgba(0, 212, 255, 0.18);
    --accent-border-strong: rgba(0, 212, 255, 0.30);
    --good-soft: rgba(34, 211, 110, 0.14);
    --good-glow: rgba(34, 211, 110, 0.30);
    --bad-soft: rgba(255, 77, 94, 0.08);
    --bad-border: rgba(255, 77, 94, 0.30);
    --warn-soft: rgba(255, 176, 32, 0.14);
    --warn-border: rgba(255, 176, 32, 0.36);
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --bg-deep: #ffffff;
        --surface: #ffffff;
        --surface-hi: #f7f9fc;
        --rule: rgba(20, 30, 50, 0.12);
        --rule-hi: rgba(20, 30, 50, 0.24);
        --text: #0a0e15;
        --text-soft: #4a5568;
        --text-mute: #8290a0;
        --good: #0a7a37;
        --bad: #c8273a;
        --warn: #a06800;
        --hot: #c8341a;
        --accent: #006ea0;
        --overlay-strong: rgba(255, 255, 255, 0.94);
        --overlay-medium: rgba(255, 255, 255, 0.92);
        --overlay-soft: rgba(255, 255, 255, 0.90);
        --logo-bg-grad-a: #ffffff;
        --logo-bg-grad-b: #f0f2f6;
        --logo-shadow-inset: rgba(20, 30, 50, 0.08);
        --logo-shadow-drop: rgba(20, 30, 50, 0.10);
        --team-bands-opacity: 0.18;
        --topbar-glow: rgba(0, 110, 160, 0.04);
        --hero-glow: rgba(0, 110, 160, 0.0);
        --accent-soft: rgba(0, 110, 160, 0.08);
        --accent-soft-2: rgba(0, 110, 160, 0.04);
        --accent-border: rgba(0, 110, 160, 0.24);
        --accent-border-strong: rgba(0, 110, 160, 0.40);
        --good-soft: rgba(10, 122, 55, 0.10);
        --good-glow: rgba(10, 122, 55, 0.20);
        --bad-soft: rgba(200, 39, 58, 0.06);
        --bad-border: rgba(200, 39, 58, 0.30);
        --warn-soft: rgba(160, 104, 0, 0.10);
        --warn-border: rgba(160, 104, 0, 0.36);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, var(--hero-glow), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
    font-feature-settings: "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
}
.mono { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.shell { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .shell { padding: 0 28px; } }

/* === Topbar === */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(90deg, var(--bg-deep) 0%, var(--bg) 50%, var(--bg-deep) 100%);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 4px 24px var(--topbar-glow);
}
.topbar-inner {
    max-width: 1320px; margin: 0 auto; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
@media (min-width: 720px) { .topbar-inner { padding: 16px 28px; } }
.brand {
    display: flex; align-items: center; gap: 12px;
    font-size: 1rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text); text-decoration: none;
}
.brand-mark {
    width: 34px; height: 30px;
    background: var(--accent); color: var(--bg-deep);
    display: grid; place-items: center;
    font-weight: 900; font-size: 0.78rem; letter-spacing: 0.04em;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}
.brand .baseball-tag { color: var(--text-soft); font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.logout-form { margin: 0; padding: 0; display: inline-flex; }
.logout-btn {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-mute); font: inherit; font-size: 1rem; padding: 4px 8px;
    line-height: 1; transition: color 120ms;
}
.logout-btn:hover { color: var(--bad); }
.live-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--good-soft); color: var(--good);
    font-size: 0.7rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.1em;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.live-pill::before {
    content: ""; width: 7px; height: 7px;
    border-radius: 50%; background: var(--good);
    animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.topbar-time {
    font-size: 0.78rem; color: var(--text-soft);
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 700;
}
@media (max-width: 480px) { .topbar-time { display: none; } }

/* === Section nav === */
.section-nav {
    border-bottom: 1px solid var(--rule);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: var(--bg-deep);
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 16px;
    display: flex; gap: 0;
}
@media (min-width: 720px) { .section-nav-inner { padding: 0 28px; } }
.nav-btn {
    background: transparent; border: 0; color: var(--text-mute);
    font-family: inherit; font-size: 0.84rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 14px 18px; border-bottom: 3px solid transparent;
    cursor: pointer; transition: color 120ms, border-color 120ms;
    white-space: nowrap; text-decoration: none; display: inline-block;
}
.nav-btn:hover { color: var(--text-soft); }
.nav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* === Hero (index) === */
.hero { padding: 28px 0 12px; position: relative; }
.hero h1 {
    font-size: 1.9rem; font-weight: 900; line-height: 1;
    letter-spacing: -0.03em; text-transform: uppercase;
}
@media (min-width: 720px) { .hero h1 { font-size: 2.8rem; } }
.hero h1 .accent { color: var(--accent); }
.hero .sub { margin-top: 12px; color: var(--text-soft); font-size: 0.96rem; max-width: 540px; }

/* === KPI === */
.kpi-row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
    margin: 22px 0 32px;
    background: var(--surface); border: 1px solid var(--rule-hi);
}
@media (min-width: 720px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.kpi {
    padding: 16px 18px;
    border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.kpi:nth-child(2n) { border-right: 0; }
.kpi:nth-child(n+3) { border-bottom: 0; }
@media (min-width: 720px) {
    .kpi:nth-child(2n) { border-right: 1px solid var(--rule); }
    .kpi:nth-child(4n) { border-right: 0; }
    .kpi:nth-child(n+3) { border-bottom: 0; }
}
.kpi .label {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-mute); font-weight: 800;
}
.kpi .value {
    font-size: 1.7rem; font-weight: 900; margin-top: 4px;
    letter-spacing: -0.02em; line-height: 1.05; text-transform: uppercase;
}
@media (min-width: 720px) { .kpi .value { font-size: 1.9rem; } }
.kpi .value.good { color: var(--good); }
.kpi .value.accent { color: var(--accent); }
.kpi .sub { margin-top: 4px; font-size: 0.76rem; color: var(--text-mute); }

/* === Section head === */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 32px 0 16px; gap: 12px;
}
.section-head h2 {
    font-size: 1rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--text); position: relative; padding-left: 14px;
}
.section-head h2::before {
    content: ""; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 4px; height: 18px; background: var(--accent);
}
.section-head .meta {
    font-size: 0.78rem; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* === Logo chip === */
.logo-chip {
    width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--logo-bg-grad-a), var(--logo-bg-grad-b) 70%);
    display: grid; place-items: center; overflow: hidden;
    box-shadow: inset 0 0 0 2px var(--logo-shadow-inset), 0 4px 12px var(--logo-shadow-drop);
    flex-shrink: 0;
}
.logo-chip img { width: 78%; height: 78%; object-fit: contain; display: block; }

/* === Best Edges Today === */
.edges-explainer {
    margin: 0 0 14px; padding: 12px 14px;
    background: var(--accent-soft-2); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent);
    color: var(--text-soft); font-size: 0.84rem; line-height: 1.55;
}
.edges-explainer strong { color: var(--text); font-weight: 700; }
.edges-explainer .accent { color: var(--accent); font-weight: 700; }
.edges-list { display: grid; gap: 8px; }
.edges-row {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
    transition: background 120ms;
    text-decoration: none; color: inherit;
}
.edges-row:hover { background: var(--surface-hi); }
.edges-rank {
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-size: 0.84rem; font-weight: 900; color: var(--accent);
    flex: 0 0 32px;
}
.edges-matchup {
    flex: 1 1 280px; min-width: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.edges-team-side { display: flex; align-items: center; gap: 8px; }
.edges-team-side .logo-chip { width: 32px; height: 32px; flex-shrink: 0; }
.edges-team-side .code {
    font-weight: 900; text-transform: uppercase; font-size: 1rem;
    letter-spacing: 0.02em; color: var(--text-mute); line-height: 1;
}
.edges-team-side.fave .code { color: var(--good); text-shadow: 0 0 10px var(--good-glow); }
.edges-team-side.fave .logo-chip {
    box-shadow: inset 0 0 0 2px var(--good), 0 0 14px var(--good-glow), 0 4px 12px var(--logo-shadow-drop);
}
.edges-at { color: var(--text-mute); font-size: 0.84rem; font-style: italic; font-weight: 700; }
.edges-time {
    color: var(--text-mute); font-size: 0.74rem;
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-weight: 700; margin-left: 4px;
}
.edges-fave-tag {
    margin-left: auto;
    font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--good);
    padding: 3px 8px; background: var(--good-soft); border: 1px solid var(--good);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.edges-cell {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; min-width: 70px;
}
.edges-cell .label {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-mute); font-weight: 800;
}
.edges-cell .v {
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-weight: 800; font-size: 0.94rem; color: var(--text); line-height: 1.1;
}
.edges-cell .v.edge-pos { color: var(--good); }

/* === Game cards === */
.games-grid {
    display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.game-card {
    background: var(--surface); border: 1px solid var(--rule);
    position: relative; overflow: hidden;
    transition: transform 160ms, border-color 160ms;
    cursor: pointer; text-decoration: none; color: inherit; display: block;
}
.game-card:hover { border-color: var(--rule-hi); transform: translateY(-2px); }
.game-card.is-postponed { opacity: 0.78; }
.game-card.is-postponed .gc-team-bands { opacity: 0.35; }
.gc-team-bands {
    position: absolute; top: 0; left: 0; right: 0; height: 90px; z-index: 0; overflow: hidden;
}
.gc-team-bands::before, .gc-team-bands::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 60%;
    opacity: var(--team-bands-opacity); filter: saturate(1.2);
}
.gc-team-bands::before {
    left: -10%;
    background: linear-gradient(135deg, var(--away-color, #2d3a4f) 0%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
.gc-team-bands::after {
    right: -10%;
    background: linear-gradient(225deg, var(--home-color, #c9462c) 0%, transparent 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.gc-card-inner { position: relative; z-index: 1; padding: 16px 18px; }
.gc-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px;
}
.status-pill {
    font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 900; padding: 4px 10px;
    background: var(--overlay-soft); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: var(--text);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.status-pill.lineups-confirmed { color: var(--good); }
.status-pill.lineups-expected { color: var(--warn); }
.status-pill.pregame { color: var(--text-mute); }
.status-pill.postponed { color: var(--bad); }
.status-pill.suspended { color: var(--warn); }
.status-pill.delayed { color: var(--warn); }
.status-pill.live { color: var(--hot); }
.status-pill.final { color: var(--text-mute); }
.aux-badge {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 900;
    padding: 4px 8px; background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-border-strong);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    margin-right: 6px;
}
.gc-time {
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-size: 0.78rem; font-weight: 700; color: var(--text);
    background: var(--overlay-strong); padding: 4px 8px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gc-teams { display: grid; gap: 4px; margin: 0 0 16px; }
.gc-team {
    display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--overlay-medium);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-left: 4px solid var(--team-color, #555);
}
.gc-team.fave { background: var(--accent-soft); border-left-color: var(--accent); }
.team-info { min-width: 0; }
.team-info .name {
    font-weight: 900; font-size: 1rem;
    text-transform: uppercase; letter-spacing: 0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1;
}
.team-info .meta { margin-top: 2px; font-size: 0.74rem; color: var(--text-soft); font-weight: 600; }
.team-prob {
    font-weight: 900; font-size: 1.7rem; letter-spacing: -0.02em;
    color: var(--text-mute); line-height: 1;
}
.gc-team.fave .team-prob { color: var(--accent); text-shadow: 0 0 12px rgba(0, 212, 255, 0.45); }
.gc-meta {
    padding: 12px 0 0; border-top: 1px solid var(--rule);
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 0.78rem;
}
.gc-meta .pitcher .label {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-mute); font-weight: 800;
}
.gc-meta .pitcher .name {
    margin-top: 2px; font-weight: 800; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.name-full { display: none; }
.name-abbr { display: inline; }
@media (min-width: 720px) { .name-full { display: inline; } .name-abbr { display: none; } }
.gc-meta .pitcher .stats {
    margin-top: 2px; color: var(--text-mute);
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums; font-size: 0.72rem;
}
.gc-markets { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.gc-markets-label {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-mute); font-weight: 800; margin-bottom: 8px;
}
.gc-markets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.market-tile {
    padding: 10px 12px;
    background: var(--overlay-medium);
    border-left: 3px solid var(--team-color, #555);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.market-tile.has-edge {
    background: var(--accent-soft); border-left-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
.market-tile-team {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-mute); font-weight: 800; margin-bottom: 6px;
}
.market-tile.has-edge .market-tile-team { color: var(--accent); }
.market-tile-team .star { font-size: 0.6rem; color: var(--accent); }
.market-tile-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 3px; line-height: 1.3;
}
.market-tile-row .label {
    color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 0.62rem; font-weight: 700;
}
.market-tile-row .v {
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-weight: 800; color: var(--text); font-size: 0.82rem;
}
.market-tile-row .v.edge-pos { color: var(--good); }
.market-tile-row .v.edge-neg { color: var(--text-mute); font-weight: 600; }
.gc-banner {
    margin-top: 12px; padding: 12px 14px;
    border: 1px solid var(--bad-border); background: var(--bad-soft); color: var(--bad);
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
}
.gc-tap-hint {
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule);
    text-align: center; color: var(--text-mute);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
    font-weight: 800; transition: color 120ms;
}
.gc-tap-hint::after { content: " →"; }
.game-card:hover .gc-tap-hint { color: var(--accent); }

/* === Detail page === */
.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 22px 0 6px; color: var(--text-soft);
    font-size: 0.84rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    text-decoration: none; transition: color 120ms;
}
.back-link:hover { color: var(--accent); }
.back-link .arrow { font-size: 1.1rem; line-height: 1; }
.game-hero {
    margin-top: 14px; background: var(--surface);
    border: 1px solid var(--rule); position: relative; overflow: hidden;
}
.game-hero-bands {
    position: absolute; top: 0; left: 0; right: 0; height: 200px; z-index: 0; overflow: hidden;
}
.game-hero-bands::before, .game-hero-bands::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 60%;
    opacity: var(--team-bands-opacity); filter: saturate(1.2);
}
.game-hero-bands::before {
    left: -10%;
    background: linear-gradient(135deg, var(--away-color, #2d3a4f) 0%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
.game-hero-bands::after {
    right: -10%;
    background: linear-gradient(225deg, var(--home-color, #c9462c) 0%, transparent 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.game-hero-inner { position: relative; z-index: 1; padding: 22px; }
@media (min-width: 720px) { .game-hero-inner { padding: 28px 32px; } }
.game-hero-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px;
}
.hero-time-venue {
    margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 0.78rem; color: var(--text-soft); font-weight: 700;
}
.hero-time-venue .v {
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums; color: var(--text);
}
.matchup {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
}
@media (max-width: 540px) { .matchup { gap: 10px; } }
.team-block {
    display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0;
    padding: 12px;
    background: var(--overlay-medium);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 4px solid var(--team-color, #555);
}
.team-block.fave { background: var(--accent-soft); border-top-color: var(--accent); }
.team-block .logo-chip-lg {
    width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--logo-bg-grad-a), var(--logo-bg-grad-b) 70%);
    display: grid; place-items: center; overflow: hidden;
    box-shadow: inset 0 0 0 3px var(--logo-shadow-inset), 0 6px 18px var(--logo-shadow-drop);
    flex-shrink: 0;
}
.team-block.fave .logo-chip-lg {
    box-shadow: inset 0 0 0 3px var(--good), 0 0 18px var(--good-glow), 0 6px 18px var(--logo-shadow-drop);
}
.team-block .logo-chip-lg img { width: 78%; height: 78%; object-fit: contain; }
.team-block .name {
    font-weight: 900; font-size: 1.05rem;
    text-transform: uppercase; letter-spacing: 0.02em;
    text-align: center; line-height: 1.1;
}
@media (min-width: 720px) { .team-block .name { font-size: 1.4rem; } }
.team-block .meta {
    font-size: 0.74rem; color: var(--text-soft); font-weight: 600;
    text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
}
.team-block .prob {
    font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em;
    color: var(--text-mute); margin-top: 2px;
}
@media (min-width: 720px) { .team-block .prob { font-size: 3.6rem; } }
.team-block.fave .prob { color: var(--good); text-shadow: 0 0 16px var(--good-glow); }
.matchup-divider {
    font-style: italic; color: var(--text-mute); font-size: 1.1rem;
    font-weight: 700; letter-spacing: 0.1em;
}
.win-prob-bar {
    margin-top: 18px; height: 6px;
    background: var(--overlay-medium); overflow: hidden; display: flex;
    border: 1px solid var(--rule);
}
.win-prob-bar .away-fill { background: var(--away-color, #4a6c8a); }
.win-prob-bar .home-fill { background: var(--home-color, #c9462c); }

section.detail-section { margin-top: 28px; }
.markets-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .markets-grid { grid-template-columns: 1fr 1fr; } }
.market-card {
    background: var(--surface); border: 1px solid var(--rule);
    padding: 18px 20px; display: grid; gap: 14px;
    border-left: 4px solid var(--team-color, #555);
}
.market-card.has-edge {
    border-left-color: var(--good);
    box-shadow: inset 0 0 0 1px var(--good-soft);
}
.market-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.market-card-head .team-tag {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.market-card-head .team-tag .logo-chip { width: 36px; height: 36px; flex-shrink: 0; }
.market-card-head .team-tag .code {
    font-weight: 900; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.02em;
}
.market-card-head .team-tag .full {
    font-size: 0.78rem; color: var(--text-soft); font-weight: 600; margin-top: 2px;
}
.market-card .edge-tag {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 900;
    padding: 5px 9px; background: var(--good-soft); color: var(--good); border: 1px solid var(--good);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.market-numbers {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border: 1px solid var(--rule);
}
.market-number {
    padding: 10px 12px; border-right: 1px solid var(--rule);
}
.market-number:last-child { border-right: 0; }
.market-number .label {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-mute); font-weight: 800;
}
.market-number .v {
    margin-top: 4px;
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-weight: 800; font-size: 1.1rem;
}
.market-number .v.edge-pos { color: var(--good); }
.market-number .v.edge-neg { color: var(--text-mute); font-weight: 600; }

.pitchers-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .pitchers-grid { grid-template-columns: 1fr 1fr; } }
.pitcher-card {
    background: var(--surface); border: 1px solid var(--rule);
    padding: 18px 20px; border-left: 4px solid var(--team-color, #555);
}
.pitcher-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pitcher-portrait {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--surface-hi); overflow: hidden; flex-shrink: 0;
    border: 2px solid var(--rule-hi);
}
.pitcher-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pitcher-meta { min-width: 0; flex: 1; }
.pitcher-meta .name { font-size: 1.1rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; }
.pitcher-meta .sub {
    margin-top: 4px; font-size: 0.74rem; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}
.pitcher-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule);
}
.pitcher-stat { padding: 10px 12px; border-right: 1px solid var(--rule); }
.pitcher-stat:last-child { border-right: 0; }
.pitcher-stat .label {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-mute); font-weight: 800;
}
.pitcher-stat .v {
    margin-top: 4px;
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-weight: 800; font-size: 1.05rem;
}
.pitcher-recent {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule);
    font-size: 0.78rem; color: var(--text-soft);
}
.pitcher-recent strong { color: var(--text); }

.lineups-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .lineups-grid { grid-template-columns: 1fr 1fr; } }
.lineup-card {
    background: var(--surface); border: 1px solid var(--rule);
    border-left: 4px solid var(--team-color, #555);
}
.lineup-card-head {
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--rule);
}
.lineup-card-head .team-tag { display: flex; align-items: center; gap: 10px; }
.lineup-card-head .logo-chip { width: 32px; height: 32px; flex-shrink: 0; }
.lineup-card-head .name {
    font-weight: 900; text-transform: uppercase; font-size: 0.96rem; letter-spacing: 0.02em;
}
.lineup-card-head .role {
    font-size: 0.7rem; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; font-weight: 700;
}
.lineup-row {
    display: grid; grid-template-columns: 24px 36px minmax(0, 1fr) auto;
    gap: 10px; align-items: center; padding: 8px 16px;
    border-bottom: 1px solid var(--rule);
}
.lineup-row:last-child { border-bottom: 0; }
.lineup-row .bo {
    font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
    font-weight: 900; color: var(--text-mute); font-size: 0.84rem;
}
.lineup-row .portrait {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface-hi); overflow: hidden; border: 1px solid var(--rule-hi);
}
.lineup-row .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lineup-row .player-name {
    font-weight: 700; font-size: 0.9rem; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em;
}
.lineup-row .pos {
    font-family: "SF Mono", monospace; font-size: 0.7rem; font-weight: 800;
    color: var(--text-mute); padding: 3px 7px; border: 1px solid var(--rule-hi); letter-spacing: 0.06em;
}
.lineup-row.starter { background: var(--accent-soft-2); }
.lineup-row.starter .pos { color: var(--accent); border-color: var(--accent); }
.lineup-empty {
    padding: 18px 16px; color: var(--text-mute);
    text-align: center; font-size: 0.84rem; font-style: italic;
}

.conditions-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
    background: var(--surface); border: 1px solid var(--rule);
}
@media (min-width: 720px) { .conditions-grid { grid-template-columns: repeat(4, 1fr); } }
.condition-cell {
    padding: 14px 16px;
    border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.condition-cell:nth-child(2n) { border-right: 0; }
.condition-cell:nth-child(n+3) { border-bottom: 0; }
@media (min-width: 720px) {
    .condition-cell:nth-child(2n) { border-right: 1px solid var(--rule); }
    .condition-cell:nth-child(4n) { border-right: 0; }
    .condition-cell { border-bottom: 0; }
}
.condition-cell .label {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-mute); font-weight: 800;
}
.condition-cell .v { margin-top: 4px; font-weight: 900; font-size: 1.05rem; letter-spacing: -0.01em; }
.condition-cell .sub { margin-top: 2px; font-size: 0.74rem; color: var(--text-mute); }

.footer {
    margin-top: 48px; padding: 22px 0 32px;
    border-top: 1px solid var(--rule);
    color: var(--text-mute); font-size: 0.76rem;
    text-align: center; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Empty state for no games today */
.no-games {
    padding: 40px 20px; text-align: center;
    background: var(--surface); border: 1px solid var(--rule);
    color: var(--text-soft);
}

/* Stale-data indicator (quotes >60s old or model signal older than expected) */
.stale-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    padding: 3px 7px;
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn-border);
    margin-left: 6px;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.stale-chip::before { content: "⚠"; font-size: 0.7rem; }

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 3px 9px;
    background: rgba(255, 90, 60, 0.16);
    color: var(--hot);
    border: 1px solid var(--hot);
    margin-left: 6px;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.live-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hot);
    box-shadow: 0 0 6px var(--hot);
    animation: pulse 1.4s infinite;
}

/* === Live ESPN-style scoreboard tile (inning, score, win-prob in meta) === */
.gc-inning {
    font-family: "SF Mono", "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
    background: var(--overlay-strong);
    padding: 4px 9px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gc-inning .inning-arrow { color: var(--hot); font-size: 0.78rem; line-height: 1; }

/* Live team rows: scoreboard feel — bigger score, the model's expected
   winner gets the same green glow as the +EV pick on Best Edges. */
.gc-teams-live .gc-team { padding: 12px 12px; }
.gc-teams-live .team-prob {
    font-family: "SF Mono", "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    color: var(--text);
}
.gc-teams-live .gc-team.fave {
    background: var(--good-soft);
    border-left-color: var(--good);
}
.gc-teams-live .gc-team.fave .team-prob {
    color: var(--good);
    text-shadow: 0 0 12px var(--good-glow);
}
.gc-teams-live .gc-team.fave .name { color: var(--good); }
.gc-teams-live .gc-team .meta {
    font-family: "SF Mono", "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--text-mute);
}
.gc-teams-live .gc-team.fave .meta {
    color: var(--good);
    opacity: 0.85;
}
.market-tile.is-stale {
    outline: 1px dashed var(--warn-border);
    outline-offset: -3px;
}

/* Final-game card variant: scores in the prob slot, no markets, post-mortem note */
.game-card.is-final .gc-team-bands { opacity: calc(var(--team-bands-opacity) * 0.4); }
.game-card.is-final .team-prob {
    color: var(--text);
    font-weight: 900;
}
.game-card.is-final .gc-team.winner .team-prob {
    color: var(--good);
    text-shadow: 0 0 12px var(--good-glow);
}
.game-card.is-final .gc-team.winner .name { color: var(--good); }
.gc-meta-final {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-size: 0.78rem;
    color: var(--text-soft);
    text-align: center;
}
.gc-meta-final strong { color: var(--text); font-weight: 700; }

/* Caption shown on live cards while in-game model is disabled — clarifies
   that the % displayed is the last *pregame* inference and when it ran. */
.gc-pregame-caption {
    margin-top: 12px;
    padding: 9px 12px;
    background: var(--surface-hi);
    border-left: 3px solid var(--accent);
    color: var(--text-soft);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gc-pregame-caption strong { color: var(--text); font-weight: 700; }
.gc-pregame-caption .caption-tag {
    margin-left: auto;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
    padding: 3px 8px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}