:root {
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 16px;
}
[hidden] { display: none !important; }
body { margin: 0; }
button, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--control-border); border-radius: 4px; min-height: 44px; padding: .6rem .8rem; }
button:hover, select:hover, summary:hover { background: var(--tint); }
button:active { transform: translateY(1px); background: var(--pressed); }
button:disabled, select:disabled { cursor: not-allowed; border-style: dashed; color: var(--muted); background: var(--tint); }
input[type="range"] { accent-color: var(--primary); min-height: 44px; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
header, footer { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .5rem max(1rem, calc((100% - 1440px) / 2)); font-size: .875rem; }
header { border-bottom: 1px solid var(--line); }
header a, footer a { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark { text-decoration: none; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
main { max-width: 1440px; margin: auto; padding: 1.5rem 1rem 3rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.12; letter-spacing: -.04em; margin-bottom: .6rem; }
h2 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -.025em; margin-bottom: .8rem; }
h3 { font-size: 1rem; line-height: 1.4; }
p { line-height: 1.6; }
body[data-homepage="true"] #game-description { font-size: .875rem; max-width: 75ch; }
.title-row { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.title-row p { color: var(--muted); margin-bottom: 0; }
.game-label { display: grid; gap: .35rem; font-size: .875rem; min-width: 0; }
select { width: 100%; min-width: 0; }
.replay-controls { padding: 1rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.transport { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; }
.transport-buttons { display: flex; gap: .5rem; }
.transport-buttons button { min-width: 44px; }
#play { min-width: 86px; background: var(--primary); color: var(--surface); border-color: var(--primary); }
#play:hover { background: var(--primary-hover); }
#play:disabled { background: var(--tint); color: var(--muted); border-color: var(--control-border); }
#step-label { flex-basis: 100%; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.result { margin: 0; color: var(--accent); font-size: .9375rem; }
.scrub-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1rem; font-size: .875rem; color: var(--muted); }
#scrub { display: block; width: 100%; margin: 0; }
.moment-nav { display: grid; gap: .5rem; align-items: center; font-size: .9375rem; }
.event-panel > a { display: inline-flex; min-height: 44px; align-items: center; }
.marker-context { color: var(--accent); margin: .6rem 0 0; }
.stage { display: grid; grid-template-areas: "board" "event" "players"; gap: 1.25rem; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.stage > * { min-width: 0; }
.event-panel { grid-area: event; }
.board-panel { grid-area: board; }
.player-panel { grid-area: players; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.section-heading h2 { margin: 0; }
.board-status { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1rem; margin: 0 0 1rem; }
.board-status div { display: flex; align-items: baseline; gap: .5rem; }
.board-status dt { color: var(--muted); font-size: .8125rem; }
.board-status dd { margin: 0; font-variant-numeric: tabular-nums; }
.board-viewport { overflow: auto; border-radius: 4px; }
.board-canvas { position: relative; width: 100%; container-type: inline-size; }
.board-canvas.enlarged { width: 1200px; min-width: 100%; }
.board-canvas img { display: block; width: 100%; height: auto; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board-card-panels { position: absolute; inset: 0; pointer-events: none; }
.board-card-panel { position: absolute; display: flex; flex-direction: column; overflow: hidden; padding: .4cqw .5cqw; border: .16cqw solid #6ea07b; color: #8bea9b; background: #020806; font-size: var(--card-font-size, 1.385cqw); font-weight: 700; line-height: 1.15; pointer-events: auto; }
.board-card-panel h3 { flex: none; font: inherit; font-weight: 800; margin: 0 0 .35em; }
.board-card-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: #8bea9b #020806; }
.board-card-panel h3, .board-card-scroll li, .board-card-scroll .card-label { white-space: nowrap; }
.board-card-scroll p { margin: 0 0 .35em; line-height: inherit; }
.board-card-scroll ul { list-style: none; padding: 0; margin: 0; }
.board-card-scroll li + li { margin-top: .15em; }
.board-card-scroll .card-group + .card-group { margin-top: 1em; }
.board-card-scroll:focus-visible { outline: 2px solid #8bea9b; outline-offset: -2px; }
.card-readout { max-height: 10rem; overflow: auto; overscroll-behavior: contain; }
#player-draws { white-space: pre-line; }
.board-key { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .75rem 0 1rem; font-size: .8125rem; }
.pawn-key { display: inline-block; border: 1px solid var(--ink); border-radius: 50%; width: 1.35rem; line-height: 1.25rem; text-align: center; margin-right: .35rem; color: #101426; }
.pawn-a { background: #a894ff; }
.pawn-b { background: #e97d44; }
.board-events { border: 1px solid var(--control-border); padding: .65rem .8rem; background: var(--surface); font-size: .9375rem; }
.latest-draws { margin: 1rem 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.latest-draws h3 { margin-bottom: .5rem; }
.latest-draws dl { margin: 0; display: grid; gap: .65rem; }
.latest-draws dt { font-size: .8125rem; color: var(--muted); margin-bottom: .2rem; }
.latest-draws dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.supply { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; font-size: .875rem; }
.supply h3 { font-size: .875rem; margin: 0; }
.supply dl { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; }
.supply dl div { display: flex; gap: .35rem; }
.supply dd { margin: 0; }
summary { min-height: 44px; padding: .75rem 3rem .75rem 0; line-height: 1.4; }
details { border-top: 1px solid var(--line); margin-top: 1rem; }
details p { margin: .5rem 0; }
.caption { font-size: .875rem; color: var(--muted); }
.city-list { display: grid; margin: .5rem 0; }
.city-list > div { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.city-list dt { font-weight: 600; }
.city-list dd { margin: .2rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.player-panel { min-width: 0; }
.event-meta { color: var(--muted); font-size: .875rem; margin-bottom: .5rem; }
.transcript { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.65; }
.agent-quote { background: var(--surface); border-inline-start: 3px solid var(--primary); padding: 1rem 1.25rem; }
.players { display: grid; gap: 1rem; }
.player { border-top: 1px solid var(--line); padding-top: .85rem; }
.player h3 { margin-bottom: .35rem; }
.player p { font-size: .875rem; margin-bottom: .35rem; }
.hand { color: var(--muted); }
.evidence-links { display: grid; }
.evidence-links a { min-height: 44px; display: flex; align-items: center; font-size: .875rem; }
.timeline-section, .plan-section { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
.timeline-section > p, .plan-section > p { max-width: 65ch; color: var(--muted); }
.charts { display: grid; gap: 1.5rem; }
.charts > section { min-width: 0; padding: 1rem 0; border-top: 1px solid var(--line); }
.chart-title { margin: 0 0 .5rem; }
.chart-value { display: block; min-height: 3rem; color: var(--accent); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.chart-control { display: block; width: 100%; height: 180px; cursor: pointer; border-radius: 2px; }
.chart-control:hover { background: var(--tint); }
.chart-control:active { outline: 2px solid var(--accent); }
.chart-control[aria-disabled="true"] { cursor: not-allowed; }
.chart-control[aria-disabled="true"]:hover { background: transparent; }
.chart-caption { font-size: .875rem; color: var(--muted); margin: .75rem 0 0; }
.series-key { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1rem; }
.series-key::before { content: ''; width: 1.2rem; border-top: 3px solid var(--primary); }
.series-key.outbreaks::before { border-top: 3px dashed var(--chart-secondary); }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; vertical-align: top; padding: .8rem .4rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
th:first-child { width: 70%; }
td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-actions { margin: 0; padding-left: 1.25rem; line-height: 1.55; }
.plan-actions li + li { margin-top: .35rem; }
.score-guide p { max-width: 75ch; }
.score-guide a { display: inline-flex; min-height: 44px; align-items: center; margin-right: 1.5rem; }
#load-state { padding: 1rem 0; }
#load-state a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .5rem; }
footer { border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 359px) {
  header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (min-width: 600px) {
  main { padding: 2rem 1.5rem 4rem; }
  #step-label { flex-basis: auto; }
  .moment-nav { grid-template-columns: auto minmax(0, 1fr); }
  .board-status { grid-template-columns: repeat(4, auto); }
  .city-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .players { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  header nav { margin-left: auto; }
  .title-row { grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); align-items: end; }
  .stage { grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); grid-template-areas: "board event" "board players"; grid-template-rows: auto 1fr; column-gap: 2rem; }
  .players { grid-template-columns: 1fr; }
  .event-panel { border-top: 2px solid var(--ink); padding-top: 1rem; }
  .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  button:active { transform: none; }
}