:root {
  color-scheme: dark;
  --purple: #241773; --purple-bright: #7565df; --accent-bright: #b3a7ff;
  --ink: #e7e5ee; --muted: #aaa6b6; --quiet: #777381; --page: #000; --card: #100f16;
  --inner: #0b0a10; --line: rgba(215, 207, 231, .16); --success: #6be3a7; --danger: #ff858d; --warning: #b3a7ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; color: var(--ink); background: var(--page); font-size: 13px; line-height: 1.5; }
button, input, select { font: inherit; }
.site-shell { width: min(1440px, 100%); margin: 0 auto; padding: 18px; }
.team-header { min-height: 150px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; padding: 28px clamp(24px, 4vw, 54px); background: linear-gradient(90deg, rgba(5, 4, 10, .94) 0%, rgba(5, 4, 10, .7) 46%, rgba(5, 4, 10, .12) 100%), url("./assets/baltimore-ravens-header-background.png") right center / cover no-repeat, var(--card); }
.brand { min-width: 0; color: #fff; display: flex; align-items: center; gap: 20px; text-decoration: none; }
.brand img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 12px 22px #0009); }
.brand h1 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3.2rem); line-height: 1.05; letter-spacing: -.045em; }
.desktop-nav { position: relative; min-height: 66px; margin-top: 14px; border-radius: 8px; background: var(--card); display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; }
.desktop-nav::before { content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #241773 0%, #7565df 26%, #c2b9ff 50%, #7565df 74%, #241773 100%); pointer-events: none; }
.desktop-nav a { position: relative; color: #d4d0dc; display: grid; place-items: center; padding: 14px; font-weight: 750; text-decoration: none; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a.active { color: #fff; background: #191621; }
.desktop-nav a.active::after { content: ""; position: absolute; right: 32%; bottom: 9px; left: 32%; height: 2px; background: var(--accent-bright); }
.mobile-nav { display: none; margin-top: 14px; border-radius: 8px; background: var(--card); overflow: hidden; }
.mobile-nav summary { min-height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; }
.mobile-nav nav { display: grid; }
.mobile-nav a { color: var(--muted); padding: 13px 20px; text-decoration: none; }
.mobile-nav a.active { color: #fff; background: #191621; }
.page-intro { min-height: 74px; margin-top: 14px; border-radius: 8px; background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; }
.page-intro > div { min-width: 0; display: flex; align-items: center; gap: 18px; }
.page-intro h2, .panel h2 { margin: 0; color: #fff; font-size: 1.55rem; letter-spacing: -.025em; }
.page-intro > div > h2 { flex: 0 0 auto; padding-right: 18px; border-right: 1px solid #686471; }
.page-intro p { margin: 0; color: var(--muted); }
.status-pill { flex: 0 0 auto; border-radius: 999px; color: #d6cffb; background: rgba(91, 75, 196, .18); padding: 7px 12px; font-weight: 800; }
.page-intro > .status-pill { display: none; }
.breaking-details { margin-top: 14px; border-radius: 8px; overflow: hidden; background: var(--card); }
.breaking-details > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 8px; }
.breaking-details header span, .panel-heading span { color: var(--accent-bright); font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.breaking-details h2 { margin: 0; color: #fff; font-size: 1.2rem; }
.breaking-details button { width: 34px; height: 34px; border: 1px solid #62599a; border-radius: 50%; color: var(--muted); background: #ffffff05; cursor: pointer; font-size: 1.35rem; }
.breaking-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 24px 20px; }
.breaking-item { min-width: 0; min-height: 108px; border-radius: 7px; color: inherit; background: #17161d; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 16px 10px 8px; text-decoration: none; }
.breaking-item > img { width: 62px; height: 82px; object-fit: contain; object-position: center bottom; }
.breaking-copy { min-width: 0; }
.breaking-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.breaking-details .breaking-meta span { color: var(--accent-bright); letter-spacing: 0; text-transform: none; }
.breaking-meta time { color: #d7d3df; font-size: .75rem; font-weight: 750; }
.breaking-item b { display: block; margin-bottom: 4px; color: #fff; }
.breaking-item p { margin: 0; color: var(--muted); }
.breaking-item:hover { background: #1d1a26; }
.game-selector { margin-top: 14px; border-radius: 8px; background: var(--card); padding: 8px; }
.game-selector-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.game-selector button { position: relative; min-height: 64px; overflow: hidden; border: 0; border-radius: 7px; color: var(--ink); background: #191721; display: grid; align-content: center; gap: 4px; padding: 9px 12px; text-align: left; cursor: pointer; }
.game-selector button::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #736d7c; }
.game-selector button.completed::before { background: var(--success); }
.game-selector button.completed.loss::before { background: var(--danger); }
.game-selector button.completed.tie::before { background: var(--accent-bright); }
.game-selector button.live::before { background: var(--warning); }
.game-selector button.active { background: #242030; box-shadow: inset 0 0 0 1px #62599a; }
.selector-date { color: #9892a3; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.selector-matchup { min-width: 0; color: #fff; display: flex; align-items: center; gap: 5px; font-weight: 850; white-space: nowrap; }
.selector-matchup img { width: 18px; height: 18px; object-fit: contain; }
.selector-matchup > span:not(.result-badge):not(.score-separator) { color: #9db3ca; font-size: .74rem; }
.result-badge { min-width: 21px; border-radius: 4px; padding: 1px 5px; color: #fff; background: #55515d; font-size: .7rem; line-height: 18px; text-align: center; }
.result-badge.win { color: #80efbd; background: #124936; }
.result-badge.loss { color: #ff9ca3; background: #4c2028; }
.result-badge.tie, .live-badge { color: #d9d1ff; background: #392e78; }
.selector-matchup .opponent-watermark { width: 32px; height: 32px; margin-left: auto; opacity: .16; }
.score-separator { color: var(--quiet); }
.loading-copy, .empty-copy { width: 100%; margin: 0; color: var(--muted); padding: 22px; text-align: center; }
.game-card { margin-top: 14px; border-radius: 8px; overflow: hidden; background: var(--card); }
.scoreboard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; padding-top: 15px; background: #000; }
.scoreboard::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; border-radius: 7px 7px 0 0; background: linear-gradient(90deg, var(--left-team-color) 0 calc(50% - 3px), transparent calc(50% - 3px) calc(50% + 3px), var(--right-team-color) calc(50% + 3px) 100%); }
.score-team { min-width: 0; display: flex; align-items: center; gap: 16px; padding: 24px; }
.score-team.left { justify-content: flex-end; text-align: right; background: linear-gradient(90deg, color-mix(in srgb, var(--team-color) 56%, #101016), #0b0a10 100%); }
.score-team.right { justify-content: flex-start; text-align: left; background: linear-gradient(270deg, color-mix(in srgb, var(--team-color) 56%, #101016), #0b0a10 100%); }
.score-team img { width: 68px; height: 68px; object-fit: contain; }
.score-team strong { display: block; color: #fff; font-size: 1.05rem; }
.score-team span { color: var(--muted); }
.score-team-info { min-width: 0; }
.team-score { color: #fff; font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.game-state { min-width: 170px; background: #0b0a10; display: grid; place-items: center; align-content: center; padding: 18px 28px; text-align: center; }
.game-state strong { color: #fff; font-size: 1.15rem; text-transform: uppercase; }
.game-state span { color: var(--muted); }
.game-info-bar { min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; color: #e0dde7; background: #0b0a10; padding: 10px 22px; }
.game-info-bar b { color: var(--accent-bright); }
.game-info-bar i { width: 1px; height: 17px; background: #696474; }
.quarter-board { border: 0; padding: 15px 24px; overflow-x: auto; }
.quarter-board table { width: min(100%, 680px); margin: 0 auto; border-collapse: collapse; }
.quarter-board th, .quarter-board td { min-width: 44px; padding: 6px 9px; text-align: center; font-weight: 800; }
.quarter-board thead th { color: var(--quiet); font-size: .7rem; text-transform: uppercase; }
.quarter-board tbody th { color: #fff; text-align: left; }
.quarter-board tbody td:last-child { color: var(--accent-bright); }
.dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panel { min-width: 0; border-radius: 8px; overflow: hidden; background: var(--card); }
.panel-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 22px; }
.panel-heading h2 { margin-top: 2px; font-size: 1.2rem; }
.player-panel { grid-column: 1 / -1; }
.probability { padding: 4px 22px 24px; }
.probability-labels { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 9px; color: #fff; font-weight: 850; }
.probability-track { height: 16px; border-radius: 999px; overflow: hidden; background: #30303a; display: flex; }
.probability-ravens { background: linear-gradient(90deg, var(--purple), var(--purple-bright)); }
.probability-opponent { flex: 1; background: #5f626c; }
.scoring-list { margin: 0; padding: 0 22px 22px; list-style: none; }
.scoring-play { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.scoring-play img { width: 36px; height: 36px; object-fit: contain; }
.scoring-play p { margin: 0; color: var(--muted); }
.scoring-play strong { color: #fff; }
.score-chip { color: var(--accent-bright); font-weight: 900; white-space: nowrap; }
.team-toggle, .stat-toggle { display: flex; gap: 4px; border-radius: 999px; background: #24212d; padding: 4px; }
.team-toggle button, .stat-toggle button { border: 0; border-radius: 999px; color: #aaa4b5; background: transparent; padding: 7px 12px; cursor: pointer; font-weight: 800; }
.team-toggle button.active, .stat-toggle button.active { color: #fff; background: #100e16; }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td { border-top: 1px solid var(--line); padding: 11px 22px; }
.comparison-table th { color: var(--muted); font-weight: 650; text-align: center; }
.comparison-table td { color: #fff; font-weight: 850; text-align: right; }
.comparison-table td:last-child { text-align: left; }
.comparison-table td.selected { color: var(--accent-bright); }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 22px 22px; }
.metric { border-radius: 7px; background: var(--inner); padding: 16px; }
.metric span { color: var(--quiet); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.metric strong { display: block; margin-top: 8px; color: #fff; font-size: 1.25rem; }
.player-stats-wrap { overflow-x: auto; }
.player-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.player-table th, .player-table td { padding: 11px 18px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.player-table th { color: var(--quiet); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.player-table th:first-child, .player-table td:first-child { text-align: left; }
.player-table td:first-child { color: #fff; font-weight: 800; }
.team-section-row td { color: var(--accent-bright) !important; background: #0c0b11; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer { min-height: 64px; margin-top: 14px; border-radius: 8px; color: var(--quiet); background: var(--card); display: flex; align-items: center; justify-content: center; padding: 16px 24px; }
.site-footer nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.site-footer a { color: #8fa5bd; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent-bright); text-decoration: none; }
.site-footer a + a::before { content: "·"; margin-right: 10px; color: #514c59; }
.legal-disclaimer-card { margin-top: 14px; border-radius: 8px; color: var(--muted); background: var(--card); padding: clamp(24px, 4vw, 46px); }
.legal-disclaimer-card h3 { margin: 28px 0 7px; color: #fff; font-size: 1.08rem; }
.legal-disclaimer-card h3:first-child { margin-top: 0; }
.legal-disclaimer-card p { max-width: 1050px; margin: 0; line-height: 1.75; }
@media (max-width: 1050px) {
  .game-selector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scoreboard { grid-template-columns: 1fr; }
  .game-state { grid-row: 1; }
  .score-team.left, .score-team.right { justify-content: center; text-align: left; }
}
@media (max-width: 760px) {
  .site-shell { padding: 10px; }
  .team-header { min-height: 128px; padding: 22px; background-position: 62% center; }
  .brand img { width: 66px; height: 66px; }
  .brand h1 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .page-intro > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .page-intro > div > h2 { padding-right: 0; border-right: 0; }
  .breaking-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .player-panel { grid-column: auto; }
  .game-selector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-team { padding: 18px; }
  .score-team img { width: 50px; height: 50px; }
  .team-score { font-size: 2rem; }
  .game-info-bar { justify-content: flex-start; }
  .game-info-bar i { display: none; }
  .comparison-heading, .player-heading { align-items: flex-start; flex-direction: column; }
  .metrics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) { .game-selector-grid { grid-template-columns: 1fr; } .brand { gap: 12px; } .brand img { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }