.gameBoard {
  --ne: #c60c30;
  --sea: #69be28;
  margin: 24px 0 32px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--ne) 22%, transparent), transparent 32%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--sea) 20%, transparent), transparent 34%),
    color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
.gameBoardTop { padding: 14px 18px; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font: 600 10px/1.3 var(--font-mono); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.gameTeams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 25px 24px 20px; }
.gameTeam { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gameTeam:last-child { flex-direction: row-reverse; text-align: right; }
.gameTeam img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.gameTeam span { display: block; color: var(--color-text-subtle); font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.gameTeam strong { display: block; margin-top: 4px; color: var(--color-text-strong); font: 800 clamp(18px,3vw,27px)/1 var(--font-display); letter-spacing: -.025em; }
.gameAt { color: var(--color-text-subtle); font: 700 14px/1 var(--font-mono); }
.gameFacts { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--color-border); }
.gameFact { min-width: 0; padding: 13px 12px 15px; border-right: 1px solid var(--color-border); text-align: center; }
.gameFact:last-child { border-right: 0; }
.gameFact span { display: block; color: var(--color-text-subtle); font: 600 9px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.gameFact strong { display: block; margin-top: 5px; color: var(--color-text-strong); font: 700 14px/1.25 var(--font-display); }
.gameBoard figcaption { margin: 0; padding: 11px 16px; border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: 11px; line-height: 1.5; text-align: center; }
.gameBoard a, .dataViz a { color: var(--color-accent-strong); }

.dataViz { margin: 30px 0; padding: 21px; border: 1px solid var(--color-border); border-radius: 15px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.dataVizHead { margin-bottom: 18px; }
.dataVizKicker { color: var(--color-accent-strong); font: 600 10px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.dataVizTitle { margin: 4px 0 3px; color: var(--color-text-strong); font: 750 20px/1.2 var(--font-display); letter-spacing: -.015em; }
.dataVizSub { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.45; }
.dataViz figcaption { margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: 11.5px; line-height: 1.5; }

.pressureBars { display: grid; gap: 14px; }
.pressureRow { display: grid; grid-template-columns: 142px minmax(0,1fr) 58px; align-items: center; gap: 12px; }
.pressureRow .label { color: var(--color-text-muted); font: 600 12px/1.25 var(--font-sans); }
.pressureTrack { height: 14px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--color-border-strong) 72%, transparent); }
.pressureFill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c60c30, #ff5b67); box-shadow: 0 0 18px rgba(198,12,48,.22); }
.pressureRow:nth-child(2) .pressureFill { background: linear-gradient(90deg, #4c6f92, #91b2d0); }
.pressureRow:nth-child(3) .pressureFill { background: linear-gradient(90deg, #69be28, #b8f077); }
.pressureValue { color: var(--color-text-strong); font: 800 14px/1 var(--font-mono); text-align: right; }
.pressureNote { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.pressureChip { padding: 11px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: color-mix(in srgb, var(--color-surface-subtle) 80%, transparent); }
.pressureChip b { display: block; color: var(--color-text-strong); font: 800 21px/1 var(--font-display); }
.pressureChip span { display: block; margin-top: 5px; color: var(--color-text-subtle); font-size: 10.5px; line-height: 1.35; }

.deltaCard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; }
.deltaBox { padding: 17px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface-subtle) 75%, transparent); }
.deltaBox.fresh { border-color: color-mix(in srgb, #69be28 48%, var(--color-border)); background: color-mix(in srgb, #69be28 8%, var(--color-surface)); }
.deltaBox span { display: block; color: var(--color-text-subtle); font: 600 9px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.deltaBox strong { display: block; margin-top: 6px; color: var(--color-text-strong); font: 800 31px/1 var(--font-display); }
.deltaBox small { display: block; margin-top: 7px; color: var(--color-text-muted); font-size: 11px; line-height: 1.35; }
.deltaArrow { display: grid; place-items: center; color: #69be28; font: 800 25px/1 var(--font-display); }
.deltaGain { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, #69be28 14%, transparent); color: #8ee04f; font: 700 11px/1 var(--font-mono); }

.projectionRows { display: grid; gap: 10px; }
.projectionRow { display: grid; grid-template-columns: 154px minmax(0,1fr) 54px; align-items: center; gap: 11px; }
.projectionWho { min-width: 0; color: var(--color-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projectionWho b { color: var(--color-text-strong); }
.projectionTrack { height: 13px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--color-border-strong) 72%, transparent); }
.projectionFill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-strong)); }
.projectionRow.sea .projectionFill { background: linear-gradient(90deg, #005c5c, #69be28); }
.projectionRow.ne .projectionFill { background: linear-gradient(90deg, #7d0b25, #ef476f); }
.projectionPoints { color: var(--color-text-strong); font: 800 12px/1 var(--font-mono); text-align: right; }

.watchGrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 24px 0; }
.watchCard { padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface-subtle) 76%, transparent); }
.watchCard span { color: var(--color-accent-strong); font: 600 9px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.watchCard strong { display: block; margin: 6px 0 4px; color: var(--color-text-strong); font: 700 15px/1.25 var(--font-display); }
.watchCard p { margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }

@media (max-width: 700px) {
  .gameTeams { gap: 9px; padding: 22px 13px 18px; }
  .gameTeam { flex-direction: column; gap: 7px; text-align: center; }
  .gameTeam:last-child { flex-direction: column; text-align: center; }
  .gameTeam img { width: 60px; height: 60px; }
  .gameFacts { grid-template-columns: repeat(2,1fr); }
  .gameFact:nth-child(2) { border-right: 0; }
  .gameFact:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .pressureRow { grid-template-columns: 105px minmax(0,1fr) 50px; gap: 8px; }
  .pressureNote { grid-template-columns: 1fr; }
  .projectionRow { grid-template-columns: 116px minmax(0,1fr) 49px; gap: 8px; }
}

@media (max-width: 520px) {
  .gameTeam strong { font-size: 17px; }
  .deltaCard { grid-template-columns: 1fr; }
  .deltaArrow { transform: rotate(90deg); min-height: 18px; }
  .watchGrid { grid-template-columns: 1fr; }
  .dataViz { padding: 17px 14px; }
}