:root {
  --bg: #0a0e17;
  --panel: #111726;
  --card: #161d2e;
  --card-2: #1b2438;
  --line: #243049;
  --text: #eef2f8;
  --muted: #8b97ad;
  --me: #22c55e;
  --me-soft: rgba(34, 197, 94, 0.16);
  --opp: #f43f5e;
  --opp-soft: rgba(244, 63, 94, 0.16);
  --gold: #fbbf24;
  --gold-soft: rgba(251, 191, 36, 0.18);
  --live: #22c55e;
  --qb: #ef4444; --rb: #22c55e; --wr: #3b82f6; --te: #f59e0b; --k: #a855f7; --def: #64748b;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, #1a2340 0%, var(--bg) 60%); }
img { max-width: 100%; }
h2 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h2 small { text-transform: none; letter-spacing: 0; font-size: 13px; color: #6b7891; font-weight: 400; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* Top bar ------------------------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sep { opacity: 0.4; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #64748b; display: inline-block; }
.live-dot.on { background: var(--live); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: pulse 1.6s infinite; }
.live-dot.err { background: var(--opp); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.actions { display: flex; gap: 8px; }
.icon-btn { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 12px; letter-spacing: 0.04em; text-transform: none; }
.icon-btn:hover { background: var(--card-2); }

/* Scoreboard ----------------------------------------------------------------- */
.scoreboard { margin: 4px 22px 0; padding: 22px 28px 18px; background: linear-gradient(180deg, #151d31, #111726); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "me scores opp" "proj proj proj" "status status status"; align-items: center; gap: 10px 20px; }
.team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.team.me { grid-area: me; }
.team.opp { grid-area: opp; justify-content: flex-end; text-align: right; }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--card-2); border: 3px solid var(--line); flex: none; }
.team.me .avatar { border-color: var(--me); }
.team.opp .avatar { border-color: var(--opp); }
.tname { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.tmeta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.scores { grid-area: scores; display: flex; align-items: center; gap: 22px; }
.score { font-size: 72px; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; min-width: 150px; text-align: center; transition: transform 0.25s; }
.score.me { color: var(--me); text-shadow: 0 0 30px rgba(34, 197, 94, 0.35); }
.score.opp { color: var(--opp); text-shadow: 0 0 30px rgba(244, 63, 94, 0.35); }
.score.bump { animation: bump 0.6s ease; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }
.vs { color: var(--muted); font-size: 18px; text-transform: uppercase; letter-spacing: 0.2em; }
.race { grid-area: proj; display: grid; gap: 8px; margin-top: 4px; }
.race-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.race-bar { height: 16px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; display: flex; }
.race-scored, .race-remaining { height: 100%; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.race-row.me .race-scored { background: linear-gradient(90deg, #16a34a, var(--me)); border-radius: 999px 0 0 999px; }
.race-row.opp .race-scored { background: linear-gradient(90deg, #be123c, var(--opp)); border-radius: 999px 0 0 999px; }
.race-row.me .race-remaining { background: repeating-linear-gradient(-45deg, rgba(34, 197, 94, 0.42) 0 6px, rgba(34, 197, 94, 0.14) 6px 12px); }
.race-row.opp .race-remaining { background: repeating-linear-gradient(-45deg, rgba(244, 63, 94, 0.42) 0 6px, rgba(244, 63, 94, 0.14) 6px 12px); }
.race-nums { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 330px; }
.race-nums b { color: var(--text); font-size: 14px; }
.race-nums .plus, .race-nums .eq { opacity: 0.6; }
.race-row.me .race-nums b.tocome { color: var(--me); }
.race-row.opp .race-nums b.tocome { color: var(--opp); }
.race-key { font-size: 11px; color: #6b7891; text-align: center; letter-spacing: 0.02em; }
.race-key .k { display: inline-block; width: 22px; height: 9px; border-radius: 3px; vertical-align: middle; margin: 0 4px 0 10px; }
.race-key .k.solid { background: #94a3b8; }
.race-key .k.striped { background: repeating-linear-gradient(-45deg, rgba(148, 163, 184, 0.7) 0 4px, rgba(148, 163, 184, 0.2) 4px 8px); }
.status-line { grid-area: status; text-align: center; font-size: 16px; color: var(--text); }
.status-line strong { color: var(--gold); }

/* Layout --------------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; padding: 6px 22px 40px; max-width: 1800px; }
.panel.feed { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.panel.feed h2 { margin-top: 26px; }
#feed { overflow-y: auto; padding-right: 4px; flex: 1; }
.feed-empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

/* Player cards ---------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.cards.compact { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { --team: #334; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 12px; overflow: hidden; transition: box-shadow 0.4s, border-color 0.4s, transform 0.3s; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--team); }
.card.state-in { border-color: rgba(34, 197, 94, 0.35); }
.card.state-post { opacity: 0.5; filter: grayscale(0.9); background: #10141f; border-color: #1c2334; transition: opacity 0.3s, filter 0.3s; }
.card.state-post:hover { opacity: 0.95; filter: grayscale(0.2); }
.card.state-post .pts .num, .card.state-post.side-me .pts .num, .card.state-post.side-opp .pts .num { color: var(--muted); }
.card.state-post .game-pill.final { background: #1c2334; color: #6b7891; }
.card.state-pre .pts .num { color: var(--muted); }
.card.has-ball { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5), 0 0 24px rgba(34, 197, 94, 0.25); }
.card.red-zone { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.8), 0 0 28px rgba(244, 63, 94, 0.45); animation: redzone 1.2s ease-in-out infinite; }
@keyframes redzone { 0%, 100% { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.6), 0 0 18px rgba(244, 63, 94, 0.3); } 50% { box-shadow: 0 0 0 2px rgba(244, 63, 94, 1), 0 0 34px rgba(244, 63, 94, 0.6); } }
.card.flash-up { animation: flashUp 2.2s ease-out; }
.card.flash-down { animation: flashDown 2.2s ease-out; }
.card.flash-td { animation: flashTd 4s ease-out; }
@keyframes flashUp { 0% { background: rgba(34, 197, 94, 0.45); transform: scale(1.03); } 100% { background: var(--card); transform: scale(1); } }
@keyframes flashDown { 0% { background: rgba(244, 63, 94, 0.45); transform: scale(1.02); } 100% { background: var(--card); transform: scale(1); } }
@keyframes flashTd { 0% { background: rgba(251, 191, 36, 0.6); transform: scale(1.06); box-shadow: 0 0 60px rgba(251, 191, 36, 0.8); } 100% { background: var(--card); transform: scale(1); } }
.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.pos-badge { font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; color: #fff; font-size: 12px; }
.pos-QB .pos-badge { background: var(--qb); } .pos-RB .pos-badge { background: var(--rb); color: #052e16; } .pos-WR .pos-badge { background: var(--wr); } .pos-TE .pos-badge { background: var(--te); color: #1c1400; } .pos-K .pos-badge { background: var(--k); } .pos-DEF .pos-badge { background: var(--def); }
.pos-name { color: var(--muted); font-weight: 600; }
.slot-tag { color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: 11px; letter-spacing: 0.05em; }
.game-pill { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--card-2); color: var(--muted); white-space: nowrap; }
.game-pill.live { background: rgba(34, 197, 94, 0.18); color: var(--live); }
.game-pill.live::before { content: "●"; margin-right: 6px; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.game-pill.final { background: var(--card-2); color: var(--muted); }
.game-pill.pre { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
.card-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.photo { position: relative; width: 84px; height: 84px; flex: none; }
.photo .head { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; background: linear-gradient(180deg, var(--card-2), var(--team)); border: 3px solid var(--team); }
.photo .initials { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 26px; background: var(--team); color: #fff; border: 3px solid var(--team); }
.photo .jersey { position: absolute; left: -10px; bottom: -6px; min-width: 34px; height: 30px; padding: 0 7px; border-radius: 9px; background: var(--team); color: var(--team-text, #fff); font-weight: 900; font-size: 16px; letter-spacing: -0.02em; display: grid; place-items: center; border: 2px solid var(--card); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; }
.compact .photo .jersey { min-width: 28px; height: 24px; font-size: 13px; left: -8px; bottom: -5px; }
.name-num { color: var(--muted); font-weight: 800; font-size: 0.78em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.photo .tlogo { position: absolute; right: -6px; bottom: -4px; width: 34px; height: 34px; object-fit: contain; background: #0b1020; border-radius: 50%; padding: 3px; border: 1px solid var(--line); }
.compact .photo, .compact .photo .head, .compact .photo .initials { width: 58px; height: 58px; }
.compact .photo .initials { font-size: 18px; }
.compact .photo .jersey { position: absolute; left: -10px; bottom: -6px; min-width: 34px; height: 30px; padding: 0 7px; border-radius: 9px; background: var(--team); color: var(--team-text, #fff); font-weight: 900; font-size: 16px; letter-spacing: -0.02em; display: grid; place-items: center; border: 2px solid var(--card); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; }
.compact .photo .jersey { min-width: 28px; height: 24px; font-size: 13px; left: -8px; bottom: -5px; }
.name-num { color: var(--muted); font-weight: 800; font-size: 0.78em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.photo .tlogo { width: 26px; height: 26px; }
.info { min-width: 0; }
.name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact .name { font-size: 16px; }
.sub { color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gameinfo { font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gameinfo .opp-logo { width: 18px; height: 18px; object-fit: contain; }
.gameinfo .gscore { font-variant-numeric: tabular-nums; font-weight: 600; }
.gameinfo .gclock { color: var(--muted); }
.stat { font-size: 13px; color: #c7d0e0; margin-top: 5px; }
.compact .stat { font-size: 12px; }
.injury { color: var(--gold); font-size: 12px; font-weight: 600; margin-top: 3px; }
.pts { text-align: right; min-width: 72px; }
.pts .num { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.compact .pts .num { font-size: 26px; }
.pts .proj { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.pts .tocome { font-size: 11px; color: #93c5fd; margin-top: 2px; white-space: nowrap; font-weight: 600; }
.card-foot { margin-top: 10px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ball { background: var(--me-soft); color: var(--me); padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.ball .ico { display: inline-block; animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.rz { background: var(--opp-soft); color: #fda4af; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; }
.lastplay { color: var(--muted); font-size: 12px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.float { position: absolute; right: 16px; top: 34px; font-weight: 900; font-size: 26px; pointer-events: none; animation: floatUp 1.8s ease-out forwards; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); z-index: 2; }
.float.up { color: var(--me); } .float.down { color: var(--opp); } .float.td { color: var(--gold); font-size: 32px; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }

/* Head-to-head ------------------------------------------------------------------ */
.h2h { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.h2h h2.me { border-left: 4px solid var(--me); padding-left: 10px; }
.h2h h2.opp { border-left: 4px solid var(--opp); padding-left: 10px; }
.cards-col { display: grid; gap: 14px; }
.card { will-change: transform; }
.card.side-me .pts .num { color: var(--me); }
.card.side-opp .pts .num { color: var(--opp); }
.card.side-opp.has-ball { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.5), 0 0 24px rgba(244, 63, 94, 0.2); }
.card.side-opp .ball { background: var(--opp-soft); color: #fda4af; }
.card.side-opp .card-top { background: linear-gradient(90deg, rgba(244, 63, 94, 0.06), transparent); margin: -12px -14px 10px; padding: 10px 14px 0; }
.card.empty { display: grid; place-items: center; color: var(--muted); min-height: 120px; }
.alerts { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.alert { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 8px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.alert img { width: 24px; height: 24px; object-fit: contain; }
.alert-label { font-weight: 800; }
.alert-team { color: inherit; opacity: 0.85; }
.alert-team::after { content: ":"; }
.alert b { color: var(--text); }
.alert-dd { color: var(--muted); font-weight: 500; font-size: 12px; }
.alert.me { background: var(--me-soft); color: var(--me); border-color: rgba(34, 197, 94, 0.35); }
.alert.opp { background: var(--opp-soft); color: #fda4af; border-color: rgba(244, 63, 94, 0.35); }
.alert.hot { animation: blink 1.4s infinite; }
.alert.me.hot { box-shadow: 0 0 18px rgba(34, 197, 94, 0.35); }
.alert.opp.hot { box-shadow: 0 0 18px rgba(244, 63, 94, 0.35); }
.pos-mini { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 4px; color: #fff; margin-left: 4px; vertical-align: 1px; }
.pos-mini.pos-QB { background: var(--qb); } .pos-mini.pos-RB { background: var(--rb); color: #052e16; } .pos-mini.pos-WR { background: var(--wr); } .pos-mini.pos-TE { background: var(--te); color: #1c1400; } .pos-mini.pos-K { background: var(--k); } .pos-mini.pos-DEF { background: var(--def); }
.feed-filters { display: flex; gap: 6px; margin-bottom: 10px; }
.feed-filters button { background: var(--card); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.feed-filters button.on { background: var(--card-2); color: var(--text); border-color: #3b4a6b; }
#feed[data-filter="me"] .event:not(.side-me):not(.side-bench) { display: none; }
#feed[data-filter="opp"] .event:not(.side-opp) { display: none; }

/* Around the league ------------------------------------------------------------ */
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.other { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: 14px; }
.o-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; color: var(--muted); }
.o-row + .o-row { border-top: 1px solid var(--line); }
.o-row.lead { color: var(--text); }
.o-row img, .o-blank { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--card-2); display: block; }
.o-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-pts { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; }
.o-row.lead .o-pts { color: var(--gold); }

/* Feed ---------------------------------------------------------------------------- */
.event { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; font-size: 14px; }
.event.side-me { border-left-color: var(--me); }
.event.side-opp { border-left-color: var(--opp); }
.event.side-bench { border-left-color: #475569; opacity: 0.85; }
.event.side-game { border-left-color: #64748b; }
.event.level-td { background: linear-gradient(90deg, var(--gold-soft), var(--card)); border-color: rgba(251, 191, 36, 0.5); }
.event.level-big { background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), var(--card)); }
.event.level-bad { background: linear-gradient(90deg, var(--opp-soft), var(--card)); }
.event.new { animation: slideIn 0.6s cubic-bezier(.2,.8,.2,1); }
@keyframes slideIn { 0% { opacity: 0; transform: translateX(30px) scale(0.98); } 100% { opacity: 1; transform: none; } }
.event .e-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--card-2); border: 2px solid var(--line); }
.event .e-photo.logo { object-fit: contain; padding: 4px; }
.event .e-text { line-height: 1.35; }
.event .e-text b { font-weight: 800; }
.event .e-num { color: var(--muted); font-weight: 700; font-size: 12px; }
.event .e-meta { color: var(--muted); font-size: 11px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.event .e-tag { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.event.side-me .e-tag { color: var(--me); } .event.side-opp .e-tag { color: var(--opp); } .event.side-bench .e-tag, .event.side-game .e-tag { color: #94a3b8; }
.event .e-delta { font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.event .e-delta.up { color: var(--me); } .event .e-delta.down { color: var(--opp); } .event .e-delta.zero { color: var(--muted); font-size: 13px; font-weight: 600; }
.event.level-td .e-delta.up { color: var(--gold); }

/* Toast / celebration ------------------------------------------------------------ */
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50; background: #1f2937; border: 1px solid var(--line); color: var(--text); padding: 12px 20px; border-radius: 14px; font-size: 16px; font-weight: 700; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; animation: toastIn 0.4s cubic-bezier(.2,.8,.2,1); max-width: 90vw; }
.toast img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; }
.toast.good { border-color: var(--me); } .toast.bad { border-color: var(--opp); } .toast.big { border-color: #3b82f6; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, -20px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
.celebration { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 8, 15, 0.82); backdrop-filter: blur(6px); animation: fadeIn 0.3s; cursor: pointer; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.celebration-inner { display: flex; align-items: center; gap: 34px; padding: 34px 48px; border-radius: 28px; background: linear-gradient(135deg, #1f2937, #0f172a); border: 2px solid var(--gold); box-shadow: 0 0 80px rgba(251, 191, 36, 0.45); animation: pop 0.6s cubic-bezier(.2,1.4,.3,1); max-width: 92vw; }
.celebration.opp .celebration-inner { border-color: var(--opp); box-shadow: 0 0 80px rgba(244, 63, 94, 0.4); }
.celebration.bench .celebration-inner { border-color: #64748b; box-shadow: 0 0 40px rgba(100, 116, 139, 0.3); }
@keyframes pop { 0% { transform: scale(0.6) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.celebration-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: top; border: 5px solid var(--gold); background: var(--card-2); animation: bounce 0.9s ease-in-out infinite; }
.celebration.opp .celebration-photo { border-color: var(--opp); animation: none; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.celebration-title { font-size: 76px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--gold); text-shadow: 0 0 30px rgba(251, 191, 36, 0.6); animation: shake 0.5s ease-in-out 2; }
.celebration.opp .celebration-title { color: var(--opp); text-shadow: 0 0 30px rgba(244, 63, 94, 0.5); font-size: 54px; }
.celebration.bench .celebration-title { color: #94a3b8; text-shadow: none; font-size: 48px; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.celebration-name { font-size: 34px; font-weight: 800; margin-top: 10px; }
.celebration-sub { font-size: 20px; color: #cbd5e1; margin-top: 6px; }
.celebration-logo { width: 110px; height: 110px; object-fit: contain; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 45; }

/* Help modal ------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(5, 8, 15, 0.7); display: grid; place-items: center; padding: 20px; }
.modal-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; font-size: 15px; line-height: 1.5; }
.modal-card h3 { margin: 0 0 8px; font-size: 24px; }
.modal-card h4 { margin: 22px 0 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.modal-close { position: absolute; top: 14px; right: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 50%; width: 34px; height: 34px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.help-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.help-item b { display: block; font-size: 14px; margin-bottom: 3px; }
.help-item .pos-badge { margin-right: 6px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; margin-right: 6px; }
.chip.good { background: var(--me-soft); color: var(--me); } .chip.bad { background: var(--opp-soft); color: var(--opp); } .chip.td { background: var(--gold-soft); color: var(--gold); } .chip.live { background: rgba(34, 197, 94, 0.18); color: var(--live); }

/* Responsive ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .panel.feed { position: static; max-height: none; }
  #feed { max-height: 60vh; }
}
@media (max-width: 900px) {
  .h2h { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top { padding: 10px 14px; font-size: 11px; }
  .icon-btn { padding: 6px 10px; font-size: 11px; }
  .scoreboard { margin: 4px 12px 0; padding: 16px 14px; grid-template-columns: 1fr; grid-template-areas: "scores" "me" "opp" "proj" "status"; }
  .team.opp { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
  .scores { justify-content: center; }
  .score { font-size: 54px; min-width: 110px; }
  .tname { font-size: 20px; }
  .layout { padding: 6px 12px 40px; gap: 14px; }
  .race-row { grid-template-columns: 1fr; gap: 4px; }
  .race-nums { min-width: 0; white-space: normal; font-size: 12px; }
  .cards, .cards.compact { grid-template-columns: 1fr; }
  .celebration-inner { flex-direction: column; text-align: center; gap: 16px; padding: 24px; }
  .celebration-title { font-size: 46px; }
  .celebration-photo { width: 120px; height: 120px; }
  .celebration-logo { display: none; }
}