* { margin: 0; padding: 0; box-sizing: border-box; }

/* Modern Header Styles */
/* --- Design tokens: one dark surface system --- */
:root {
    --bg: #0b0d10;
    --surface: #14171c;
    --surface-2: #1b1f26;
    --surface-3: #232a33;
    --border: #2a303a;
    --border-soft: #21262e;
    --text: #f2f4f7;
    --muted: #9aa4b2;
    --faint: #6b7280;
    --accent: #6366f1;
    --accent-hi: #818cf8;
    --accent-soft: rgba(99, 102, 241, 0.16);
    --good: #22c55e;
    --good-soft: rgba(34, 197, 94, 0.15);
    --bad: #ef4444;
    --bad-soft: rgba(239, 68, 68, 0.15);
    --warn: #f59e0b;
    --gold: #eab308;
    --radius: 12px;
    --radius-sm: 8px;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(17, 20, 25, 0.85);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 1.5rem;
    /* Standalone iOS: the sticky header sits under the notch without
       this. calc() + the 0px fallback keeps a normal browser tab
       (insets are 0 there) byte-for-byte unchanged. */
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
    transition: border-color 0.3s ease;
}

.app-header.scrolled {
    border-bottom-color: var(--accent);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

/* The app's own mark, in place of the football emoji it replaced.
   Inline SVG rather than one of the PNGs in assets/pwa/: it stays
   crisp at every density, costs no extra request, and needs no
   separate asset per header size. Sized in em so it tracks the title
   through the responsive font-size steps below, and flex: none so a
   narrow viewport squeezes the words rather than the logo. */
.app-mark {
    height: 1.9em;
    width: auto;
    flex: none;
    overflow: visible;
}

.week-badge {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.week-number {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}

.week-dates {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.live-indicator {
    display: none;
    align-items: center;
    gap: 0.5rem;
    background: rgba(239, 68, 68, 0.9);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    animation: pulse 2s infinite;
}

.live-indicator.active {
    display: inline-flex;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: blink 1.5s infinite;
}

.live-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Mobile responsive header */
@media (max-width: 640px) {
    .app-header {
        padding: 0.75rem;
    }

    .header-content {
        gap: 0.5rem;
    }

    .app-title {
        font-size: 1.25rem;
    }

    .week-badge {
        padding: 0.25rem 0.5rem;
    }

    .week-number {
        font-size: 0.875rem;
    }

    .week-dates {
        display: none;
    }

    .week-dates-mobile {
        display: block;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
        margin-top: 0.5rem;
        width: 100%;
    }
}

/* 320px — the smallest viewport this app targets, and the only one
   where the mark does not fit as drawn. Measured there: the header row
   has 264px of content width, of which the wordmark takes 147px, the
   week badge 63px and the two gaps 24px — leaving about 30px for a
   logo. The mark is 1.61x as wide as it is tall (its viewBox is
   100x62), so at 1.9em it wanted 61px and pushed "Monday Miracle" onto
   two lines, where the square emoji it replaced had fit on one.
   Trimming the type one step and the mark to 1.6em puts the row back
   to 253px and restores the single-line header. The cutoff is 340px so
   every current phone (360, 390, 393, 402, 430) keeps the full-size
   mark; only 320px pays for it. */
@media (max-width: 340px) {
    .app-title {
        font-size: 1.05rem;
    }

    .app-mark {
        height: 1.6em;
    }
}

@media (min-width: 641px) {
    .week-dates-mobile {
        display: none;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .app-header {
        padding: 1.25rem 1.5rem;
    }

    .app-title {
        font-size: 1.75rem;
    }

    .week-badge {
        padding: 0.5rem 1rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .app-header {
        padding: 1.5rem 2rem;
    }

    .header-content {
        gap: 1rem;
    }

    .app-title {
        font-size: 2rem;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    min-height: 100vh;
    padding: 16px;
    /* Standalone iOS: without this the last deck row sits under the
       home-indicator bar. calc() + 0px fallback keeps a normal
       browser tab (no insets) at the original 16px. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    color: var(--text);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Connection toolbar — replaces the old white tagline + auth cards */
.auth-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 4px 18px;
}

.conn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--good-soft);
    color: var(--good);
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.conn-chip.off {
    background: var(--surface-2);
    color: var(--muted);
    border-color: var(--border);
}

.button {
    background: var(--accent);
    color: white;
    border: 1px solid transparent;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
}

.button:hover {
    background: var(--accent-hi);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-soft);
}

/* Secondary = neutral outline (NOT red — red is reserved for root-against) */
.button.secondary {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}
.button.secondary:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--surface-3);
    box-shadow: none;
}

/* --- Verdict strip: answer-first summary --- */
.verdict-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.verdict-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: 2px;
}
.verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
}
.verdict-pill.for { border-color: rgba(34, 197, 94, 0.4); }
.verdict-pill.against { border-color: rgba(239, 68, 68, 0.4); }
.verdict-pill.conflict { border-color: rgba(245, 158, 11, 0.55); }
.verdict-pill.game { border-color: rgba(79, 143, 247, 0.5); }
.verdict-pill.game .verdict-dir,
.verdict-pill.game .verdict-pts { color: #4f8ff7; }
.verdict-pill.conflict .verdict-dir,
.verdict-pill.conflict .verdict-pts { color: var(--warn); }

/* --- Games to Watch (the game lens) --- */
.slate-section { margin: 16px 0 6px; }
.slate-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; color: var(--muted); font-size: 0.72rem; }
.slate-legend .legend-item { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* League tag — muted chrome, never green/red/amber (color = signal only). */
.lg { font-weight: 700; font-size: 0.69rem; letter-spacing: 0.05em; color: #8b93a7; font-style: normal; }
.slate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.game-card { background: var(--surface-2, #171e2e); border: 1px solid var(--border, #2a3348); border-radius: 12px; padding: 13px 14px; }
.game-card.heat-warm { border-color: rgba(245, 158, 11, 0.55); }
.game-card.heat-hot { border-color: rgba(239, 68, 68, 0.7); box-shadow: 0 0 16px rgba(239, 68, 68, 0.12); }
.game-card.is-live { border-color: rgba(34, 197, 94, 0.7); animation: slatePulse 2.2s infinite; }
@keyframes slatePulse {
    0%, 100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.3); }
}
.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.game-matchup { font-weight: 700; font-size: 0.94rem; }
.game-when { display: block; color: var(--muted); font-size: 0.69rem; margin-top: 1px; }
.game-verdict { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.game-verdict.for { color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.5); }
.game-verdict.against { color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.5); }
.game-verdict.contested { color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.55); }
.stake-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.06); margin: 10px 0 5px; }
.stake-for { background: #22c55e; }
.stake-against { background: #ef4444; }
.stake-nums { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.p-for { color: #22c55e; }
.p-against { color: #ef4444; }
.slate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.slate-player { font-size: 0.875rem; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.slate-entries { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 10px; row-gap: 1px; }
.entry { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.entry .num { font-size: 0.81rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
/* Conflict: amber lives on the border/wash, never on text. */
.slate-row.conflict-row { background: rgba(245, 158, 11, 0.07); border-left: 3px solid #f59e0b; padding-left: 7px; margin-left: -7px; border-radius: 3px; }
.slate-more { color: var(--muted); font-size: 0.76rem; padding-top: 4px; }
.slate-finals { margin-top: 10px; }
.slate-final-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.8rem; padding: 4px 2px; opacity: 0.75; }

/* --- Lens pills + swipe pager: Games / Conflicts / Root For / Root Against.
   One screen at a time on mobile (swipe or tap a pill); on wide screens the
   three player columns sit side by side. Edge chevrons are colored by the
   screen they lead to (blue games, amber conflicts, green for, red against). */
.lens-pills { display: flex; gap: 6px; margin: 14px 0 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lens-pills::-webkit-scrollbar { display: none; }
.lens-pill { flex: 0 0 auto; border-radius: 999px; padding: 6px 13px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; background: transparent; cursor: pointer; border: 1px solid var(--border); color: var(--muted); }
.lens-pill.active.scores { color: #8b7cf6; border-color: rgba(139, 124, 246, 0.65); background: rgba(139, 124, 246, 0.1); }
.lens-pill.active.games { color: #4f8ff7; border-color: rgba(79, 143, 247, 0.65); background: rgba(79, 143, 247, 0.1); }
.lens-pill.active.conflict { color: #f59e0b; border-color: rgba(245, 158, 11, 0.65); background: rgba(245, 158, 11, 0.1); }
.lens-pill.active.for { color: #22c55e; border-color: rgba(34, 197, 94, 0.65); background: rgba(34, 197, 94, 0.1); }
.lens-pill.active.against { color: #ef4444; border-color: rgba(239, 68, 68, 0.65); background: rgba(239, 68, 68, 0.1); }
.lens-pill.active.played { color: #94a3b8; border-color: rgba(148, 163, 184, 0.65); background: rgba(148, 163, 184, 0.12); }
.lens-pill.active.show { color: #2dd4bf; border-color: rgba(45, 212, 191, 0.65); background: rgba(45, 212, 191, 0.12); }
.lens-wrap { position: relative; }
.lens-pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lens-pager::-webkit-scrollbar { display: none; }
.lens-panel { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; padding: 2px 2px 8px; }
@media (min-width: 980px) {
    .lens-panel.panel-players { flex: 0 0 33.3333%; padding: 2px 8px 8px; }
}
/* Chevrons pin to the VIEWPORT edges (fixed), vertically centered on the
   screen — absolute centering on the panel put them thousands of px
   below the fold on tall columns. A soft backdrop keeps them legible
   over any card; JS shows them only while the deck is on screen. */
.lens-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 32px; height: 64px; display: none; align-items: center; justify-content: center; border: 1px solid var(--border); background: rgba(10, 14, 24, 0.72); border-radius: 12px; cursor: pointer; z-index: 60; font-size: 27px; font-weight: 700; line-height: 1; opacity: 0.85; padding: 0; }
.lens-arrow:hover { opacity: 1; }
/* Fixed to the viewport, so in standalone iOS these need the side
   safe-area insets or they land under the rounded-corner/notch
   edges; calc() + 0px fallback leaves normal browser tabs unchanged. */
.lens-arrow.left { left: calc(4px + env(safe-area-inset-left, 0px)); }
.lens-arrow.right { right: calc(4px + env(safe-area-inset-right, 0px)); }

/* Once a guide is on screen (body.guide-active), mobile collapses the
   connection toolbar behind a Menu button in the header and squeezes
   the This Week strip to one swipeable row — the deck takes center
   stage. Desktop keeps everything visible. */
.menu-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }

/* Start hero — the pre-generate launch screen: connection state up
   top, ONE obvious primary action, everything else quiet. Once a
   guide is on screen it collapses behind the header Menu button
   (all widths — the deck is the show). */
.start-hero { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 4px 28px; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero-chips .conn-chip { cursor: pointer; }
.hero-cta { font-size: 1.05rem; padding: 15px 22px; width: 100%; max-width: 430px; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 28px rgba(102, 126, 234, 0.35); }
.hero-secondary { width: 100%; max-width: 430px; }
.hero-hint { color: var(--muted); font-size: 0.85rem; max-width: 430px; }
.hero-links { display: flex; gap: 22px; margin-top: 4px; }
.linklike { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.82rem; padding: 4px; }
.linklike:hover { color: var(--text); }
.signin-card { margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; width: 100%; max-width: 400px; text-align: left; }
body.guide-active #topControls { display: none; }
body.guide-active #topControls.open { display: flex; }
body.guide-active #menuToggle { display: inline-flex; }

/* Reload restore: the cached guide paints instantly, so this pill is the
   only sign that the live scores are still on their way (and the only
   place we admit it when they never arrived). */
.guide-refresh { display: none; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); background: rgba(10, 14, 24, 0.93); color: var(--muted); font-size: 0.78rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.guide-refresh.on { display: flex; }
.guide-refresh::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); animation: blink 1.2s ease-in-out infinite; }
.guide-refresh.stale { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); }
.guide-refresh.stale::before { background: var(--warn); animation: none; }

@media (max-width: 768px) {
    body.guide-active .verdict-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 8px 10px; margin-bottom: 10px; }
    body.guide-active .verdict-strip::-webkit-scrollbar { display: none; }
    body.guide-active .verdict-label { display: none; }
    body.guide-active .verdict-pill { padding: 4px 10px; flex: 0 0 auto; }
    body.guide-active .verdict-name { font-size: 0.8rem; white-space: nowrap; }
    body.guide-active .verdict-pts { font-size: 0.8rem; }
    body.guide-active .verdict-dir { font-size: 0.62rem; white-space: nowrap; }
}

/* --- Player lens columns (compact cards: one row per league + the game) --- */
.pp-head { display: flex; align-items: baseline; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; padding: 2px 2px 8px; }
.pp-head.scores { color: #8b7cf6; }
.pp-head.conflict { color: #f59e0b; }
.pp-head.for { color: #22c55e; }
.pp-head.against { color: #ef4444; }
.pp-head.played { color: #94a3b8; }
.pp-head.show { color: #2dd4bf; }

/* --- THE SHOW: builder + episode player (teal) --- */
.show-intro { color: var(--muted); font-size: 0.82rem; margin: 2px 2px 12px; }
.show-disabled { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.4); color: var(--warn); border-radius: 10px; padding: 12px 14px; font-size: 0.85rem; }
.seg-pick { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2, #171e2e); border: 1px solid var(--border, #2a3348); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; cursor: pointer; }
.seg-pick input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: #2dd4bf; }
.seg-pick.on { border-color: rgba(45, 212, 191, 0.55); background: rgba(45, 212, 191, 0.06); }
.seg-title { font-weight: 700; font-size: 0.92rem; }
.seg-kind { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; }
.seg-kind.conflict { color: #f59e0b; border: 1px solid rgba(245,158,11,0.5); }
.seg-kind.bench { color: #22c55e; border: 1px solid rgba(34,197,94,0.5); }
.seg-kind.game { color: #4f8ff7; border: 1px solid rgba(79,143,247,0.5); }
.seg-kind.custom { color: #2dd4bf; border: 1px solid rgba(45,212,191,0.5); }
.seg-detail { color: var(--muted); font-size: 0.76rem; margin-top: 2px; }
.show-custom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 10px 0; }
.show-custom select { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 0.85rem; }
.show-custom .vs { color: var(--muted); font-weight: 700; font-size: 0.8rem; }
.show-add { background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 0.8rem; width: 100%; }
.show-record { display: block; width: 100%; margin-top: 14px; background: #2dd4bf; color: #06251f; border: none; border-radius: 12px; padding: 15px; font-size: 1.02rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 26px rgba(45, 212, 191, 0.28); }
.show-record:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.show-onair { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: #ef4444; margin: 4px 2px 12px; }
.show-onair .dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: blink 1.4s infinite; }
.seg-heading { display: flex; align-items: baseline; gap: 8px; margin: 16px 2px 8px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; color: #2dd4bf; }
.line { padding: 7px 2px; border-top: 1px solid rgba(255,255,255,0.05); animation: lineIn 0.3s ease; }
@keyframes lineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.line .who { font-weight: 800; font-size: 0.7rem; letter-spacing: 0.05em; }
.line.rex .who { color: #4f8ff7; }
.line.vera .who { color: #f472b6; }
.line.research { color: var(--muted); font-style: italic; font-size: 0.8rem; }
.line.research .who { color: #94a3b8; }
.line .say { font-size: 0.92rem; line-height: 1.4; margin-top: 1px; }
.line.now { background: rgba(45, 212, 191, 0.07); border-radius: 6px; }
.verdict-card { background: var(--surface-2, #171e2e); border: 1px solid rgba(45,212,191,0.5); border-radius: 12px; padding: 13px 15px; margin: 10px 2px 4px; }
.verdict-call { font-size: 1.05rem; font-weight: 800; color: #2dd4bf; }
.verdict-head { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.verdict-body { font-size: 0.86rem; line-height: 1.45; margin-top: 6px; }
.act-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 6px; }
.act { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.act.act-for { color: #22c55e; border: 1px solid rgba(34,197,94,0.5); }
.act.act-against { color: #ef4444; border: 1px solid rgba(239,68,68,0.5); }
.act.act-watch { color: #f59e0b; border: 1px solid rgba(245,158,11,0.5); }
.act-what { font-size: 0.88rem; font-weight: 600; overflow-wrap: break-word; }
.act-why { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 400; margin-top: 1px; }
.verdict-head .conf { color: #2dd4bf; font-weight: 800; }
.fmt-tag { margin-left: 8px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; color: #2dd4bf; border: 1px solid rgba(45,212,191,0.5); border-radius: 999px; padding: 2px 8px; }
.pp-count { color: var(--muted); font-weight: 700; }
.pp-sub { font-size: 0.7rem; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.pp-card { background: var(--surface-2, #171e2e); border: 1px solid var(--border, #2a3348); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; }
.pp-card.conflict { border-left: 3px solid #f59e0b; }
.pp-card.for { border-left: 3px solid #22c55e; }
.pp-card.against { border-left: 3px solid #ef4444; }
.pp-card.played { border-left: 3px solid #94a3b8; }
/* Played screen: a slim game header groups each game's player cards
   (matchup left, LIVE/FINAL right), newest game first. */
.played-game-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 2px 6px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.pp-head + .played-game-head { margin-top: 2px; }
.pp-card.flash { animation: ppFlash 1.4s ease; }
@keyframes ppFlash {
    0% { background: rgba(255, 255, 255, 0.14); }
    100% { background: var(--surface-2, #171e2e); }
}
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.pp-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; overflow-wrap: break-word; }
.pp-total { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.pp-total.conflict { color: #f59e0b; }
.pp-meta { color: var(--muted); font-size: 0.72rem; margin-top: 2px; }
.pp-live { color: #22c55e; font-weight: 700; }
/* Banked-so-far, shown before the arrow to the updated projection.
   Muted and lighter so the eye lands on where the number is HEADING,
   with the actual available right next to it. */
.pp-now { color: var(--muted); font-weight: 600; opacity: 0.85; }
.pp-arrow { color: var(--muted); opacity: 0.6; margin: 0 3px; font-weight: 400; }
/* The pair needs more room than a lone figure, and must be free to
   wrap onto a second line on a narrow phone rather than overflow. */
.pp-row .num { min-width: 5ch; }
.pp-row .num:has(.pp-arrow) { min-width: 11ch; }
.stake-nums .pp-now, .pp-total .pp-now { font-size: 0.92em; }
.pp-rows { margin-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 4px 0; }
.pp-row + .pp-row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.pp-league { color: var(--muted); font-size: 0.78rem; overflow-wrap: break-word; }
.pp-row .num { font-size: 0.83rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
.pp-empty { color: var(--muted); font-size: 0.85rem; padding: 14px 4px; }
.pp-more { display: block; width: 100%; text-align: center; background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 10px; padding: 8px; cursor: pointer; font-size: 0.78rem; }

/* League Scores screen: responsive card grid inside its deck panel. */
.scores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.verdict-dir {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.verdict-pill.for .verdict-dir { color: var(--good); }
.verdict-pill.against .verdict-dir { color: var(--bad); }
.verdict-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.verdict-pts {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.verdict-pill.for .verdict-pts { color: var(--good); }
.verdict-pill.against .verdict-pts { color: var(--bad); }

/* --- Win-probability bar (two-sided: you vs opponent) --- */
.winbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 10px;
}
.winbar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--bad-soft);
    overflow: hidden;
}
.winbar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--good);
    transition: width 0.6s ease;
}
.winbar-fill.low { background: var(--bad); }
.winbar-pct {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- Restrained card hover elevation --- */
.league-score-card, .player-impact-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.league-score-card:hover, .player-impact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ESPN Modal Styles */
.tab-button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-button:hover {
    background: #e5e5e5;
}

.tab-button.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

kbd {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}

.win-probability {
    margin-top: 8px;
}

.scenario {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.scenario:last-child {
    border-bottom: none;
}

.status {
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    background: #f0fff4;
    border-left: 4px solid #48bb78;
    color: #22543d;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #718096;
}

.spinner {
    border: 3px solid #e2e8f0;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .hero { font-size: 2em; }
    .rooting-guide {
        grid-template-columns: 1fr;
    }
}

/* Dark Theme Split-View Styles */
.main-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start; /* panels size to content, no towering empty space */
}

/* League Scores Section */
.scores-section {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
    color: #fff;
}

.league-score-card {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #2a2a2a;
}

.league-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* PERSISTENT block on purpose. displayRootingGuide emits the markup
   below but injects no <style> of its own — it only replaces
   #rooting-display — so rules that live inside displayRootingMeter's
   injected stylesheet are undefined on the default dashboard. These
   three have to sit here, where every renderer sees them.

   They are a PAIR, and both renderers emit both elements: .league-name
   is the flex row, .league-name-text is the only thing in it allowed
   to shrink. Giving .league-name min-width:0 without an inner
   .league-name-text to clip just lets the name overflow its box and
   paint over whatever sits beside it. */
.league-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* One line, always: only the NAME gives way. A long league name used to
   push the badge onto a second line, which made that card's header
   taller than its neighbours' and knocked the whole grid row out of
   alignment. */
.league-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-badge {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.4;
}
.platform-badge.espn { background: #cd4447; }
.platform-badge.yahoo { background: #7849F7; }
.platform-badge.imported { background: #00A86B; }

.win-high {
    background: #00A86B;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.win-medium {
    background: #FFA500;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.win-low {
    background: #DC143C;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.team {
    text-align: center;
}

.team.mine {
    border: 2px solid #00A86B;
    background: rgba(0, 168, 107, 0.1);
    border-radius: 8px;
    padding: 12px;
}

.team.opponent {
    border: 2px solid #444;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 12px;
}

.team-name {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.team-score {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.team-projected {
    font-size: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.vs {
    font-size: 12px;
    color: #666;
}

.point-differential {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

.differential-value {
    font-weight: 600;
    color: #fff;
}

.differential-value.winning {
    color: #00A86B;
}

.differential-value.losing {
    color: #DC143C;
}

/* Players Impact Section */
.players-section {
    background: #0a0a0a;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #333;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.player-impact-card {
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #2a2a2a;
    overflow: hidden;
    transition: all 0.3s ease;
}

.player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0f0f0f;
    border-bottom: 1px solid #2a2a2a;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.player-details {
    font-size: 12px;
    color: #999;
}

.rooting-indicator {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Clear rooting recommendations */
.rooting-strong-for {
    background: #00A86B;
    color: white;
    font-weight: 600;
}

.rooting-for {
    background: #4ade80;
    color: #14532d;
}

.rooting-strong-against {
    background: #DC143C;
    color: white;
    font-weight: 600;
}

.rooting-against {
    background: #f87171;
    color: #450a0a;
}

.rooting-neutral {
    background: #a3a3a3;
    color: white;
}

    .rooting-conflict {
        background: #f59e0b;
        color: #451a03;
        font-weight: 700;
    }

.confidence {
    font-size: 18px;
}

/* League Impacts Table */
.league-impacts {
    padding: 0;
}

.impact-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr;
    padding: 10px 16px;
    border-bottom: 1px solid #2a2a2a;
    font-size: 13px;
    align-items: center;
    color: #fff;
}

.impact-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.impact-header {
    background: #0f0f0f;
    font-weight: 600;
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.league-col {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ownership-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.ownership-mine {
    background: rgba(0, 168, 107, 0.2);
    color: #00A86B;
    border: 1px solid #00A86B;
}

.ownership-opp {
    background: rgba(220, 20, 60, 0.2);
    color: #DC143C;
    border: 1px solid #DC143C;
}

.win-prob {
    text-align: center;
}

.points-impact {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

.points-positive {
    color: #00A86B;
}

.points-negative {
    color: #DC143C;
}

.points-neutral {
    color: #999;
}

.starting-status {
    text-align: center;
    font-size: 11px;
}

.starting-yes {
    color: #00A86B;
}

/* Player Stats Summary */
.player-summary {
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    background: #0f0f0f;
    border-top: 1px solid #2a2a2a;
}

.summary-stat {
    text-align: center;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.stat-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Mobile Responsive for Split View */
@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 1fr;
    }

    .players-section {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .impact-row {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .projected-pts {
        display: none;
    }
}

/* --- PWA: install hint + score-alert settings --- */
.mm-install-hint {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.mm-install-actions { display: flex; gap: 14px; flex-shrink: 0; }

.mm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.72);
    overflow-y: auto;
    /* Standalone mode puts the sheet under the notch otherwise. */
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.mm-modal-card {
    max-width: 30rem;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
}
.mm-modal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.mm-modal-head h2 { font-size: 1.15rem; margin: 0; }
.mm-alert-lead {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 6px 0 16px;
}
.mm-alert-note {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 10px;
}
.mm-alert-steps {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
    padding-left: 1.2rem;
}
.mm-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    cursor: pointer;
}
.mm-alert-row:last-child { border-bottom: 0; }
.mm-alert-row small {
    display: block;
    color: var(--faint);
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.4;
}
.mm-alert-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}
.mm-alert-main {
    border-bottom: 1px solid var(--border);
    padding-bottom: 13px;
    margin-bottom: 4px;
}
.mm-alert-group { margin: 14px 0; }
.mm-alert-label {
    color: var(--faint);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.mm-alert-quiet {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 2.1;
}
.mm-modal select {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13.5px;
}
.mm-alert-group > select { width: 100%; }
.mm-alert-status {
    min-height: 1.2em;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12.5px;
}