/* Site frame: retain the old Arena's table / action feed / results hierarchy. */
.app-header { min-height: 76px; display: flex; align-items: center; padding: 0 max(var(--page-gutter), calc((100% - var(--page-max))/2 + var(--page-gutter))); gap: 24px; border-bottom: 1px solid var(--line); background: #12171d; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; letter-spacing: 1px; white-space: nowrap; }
.brand strong { color: var(--accent); }
.brand-mark { width: 36px; height: 40px; display: grid; place-items: center; border: 1px solid #e2be8066; border-radius: 9px; background: #e2be800c; }
.brand-mark svg { width: 23px; height: 26px; fill: var(--accent); }
.site-nav { display: flex; align-self: stretch; gap: 22px; align-items: stretch; }
.site-nav a, .site-nav button { display: flex; align-items: center; min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 0 3px; background: none; font-size: 15px; font-weight: 650; color: var(--muted); }
.site-nav .nav-current { color: var(--text); border-bottom-color: var(--accent); }
.site-nav a:hover, .site-nav button:hover { color: white; }
.site-nav + .language-button { margin-left: auto; }
.header-status { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9eabb9; flex: none; }
.status-dot.connected { background: #89c9ad; box-shadow: 0 0 0 3px #89c9ad12; }
.status-dot.offline { background: var(--danger); }
main { max-width: var(--page-max); padding: 24px var(--page-gutter); margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading .eyebrow { font-size: 14px; margin-bottom: 8px; color: var(--accent); }
.page-subtitle { margin-top: 9px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.mode-pill { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: #1d242c; border: 1px solid #34404c; border-radius: 6px; font-size: 14px; color: #c8d0da; white-space: nowrap; }
.mode-separator { color: #697784; margin: 0 2px; }
.arena-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: var(--layout-gap); align-items: stretch; }
.watch-column, .watch-sidebar, .results-area, .results-band>* { min-width: 0; }
.watch-column { display: grid; gap: var(--layout-gap); }
.watch-sidebar { display: flex; flex-direction: column; gap: var(--layout-gap); }
.watch-tabs { display: none; }
.panel { border: 1px solid #333d49; background: #1a222c; border-radius: var(--panel-radius); overflow: hidden; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel>.section-heading { min-height: var(--heading-height); padding: 20px var(--panel-inset); align-items: flex-start; }
.panel>.section-heading>div { min-width: 0; }
.panel>.section-heading h2 { line-height: 24px; }
.panel-kicker { color: #adbdcd; font-size: 14px; font-weight: 650; }
.panel-empty { color: #b5c2cf; font-size: 15px; line-height: 1.7; padding: 10px 0 20px; }
.panel-footnote { color: #aebdcd; line-height: 1.6; padding: 14px var(--panel-inset); font-size: 14px; background: #151e27; }

/* Action feed and live overview. */
.activity-panel { display: flex; flex-direction: column; min-height: 0; }
.activity-panel .section-heading { border-bottom: 1px solid #303b47; flex: none; }
#activity-history { margin: auto var(--panel-inset) 20px; justify-content: space-between; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; font-size: 14px; }
.activity-panel .eyebrow { font-size: 14px; letter-spacing: .4px; margin-top: 6px; line-height: 18px; }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-event { display: flex; align-items: flex-start; gap: 10px; padding: 16px var(--panel-inset); border-bottom: 1px solid #ffffff0a; }
.activity-event:first-child { background: #ffffff05; }
.activity-event>div { flex: 1; min-width: 0; }
.feed-marker { width: 30px; height: 32px; background: #2a3542; color: var(--seat-color); border-left: 2px solid var(--seat-color); border-radius: 5px; display: grid; place-items: center; font-size: 15px; font-weight: 750; flex: none; }
.feed-street { color: #adbdcd; font-size: 14px; display: block; margin-bottom: 4px; }
.activity-event p { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.feed-sequence { margin-left: auto; padding-top: 2px; font-size: 14px; color: #9eafbf; }
.feed-empty { color: #aabbca; padding: 24px var(--panel-inset); font-size: 15px; line-height: 1.6; }
.overview-numbers { display: grid; grid-template-columns: 1fr 1fr; margin: 0 var(--panel-inset); padding-bottom: 14px; gap: 14px; }
.overview-numbers>div { display: flex; flex-direction: column; gap: 6px; }
.overview-numbers>div+div { border-left: 1px solid var(--line); padding-left: 18px; }
.overview-numbers strong { font-size: 32px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
.overview-numbers span { color: #b5c0cd; font-size: 14px; line-height: 1.4; }
.overview-note { color: #a9bacb; font-size: 14px; line-height: 1.6; padding: 0 var(--panel-inset) 16px; }
.overview-row { border-top: 1px solid #323e4a; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px var(--panel-inset); font-size: 14px; }
.overview-row>span { color: #aebccc; flex: none; }
.overview-row strong { overflow-wrap: anywhere; min-width: 0; font-weight: 650; text-align: right; }

/* Completed results, distinct from the current stack. */
.results-area { margin-top: var(--layout-gap); display: grid; gap: var(--layout-gap); }
.metrics-band { display: flex; align-items: center; gap: 20px; padding: 20px var(--panel-inset); justify-content: space-between; border: 1px solid #34414e; border-radius: var(--panel-radius); background: #18212a; }
.metrics-band strong { color: var(--accent); font-size: 16px; flex: none; }
.metrics-band p { color: #b8c5d2; font-size: 14px; line-height: 1.7; }
.results-band { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: var(--layout-gap); align-items: stretch; }
.table-lineup { padding: 0 var(--panel-inset); }
.lineup-panel, .last-hand-panel { display: flex; flex-direction: column; }
.lineup-panel>.panel-footnote { margin-top: auto; }
.lineup-player { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px 150px; align-items: center; gap: 16px; min-height: 80px; padding: 14px 0; border-top: 1px solid #303b47; }
.lineup-number { width: 30px; height: 34px; background: #25313d; border-left: 3px solid var(--seat-color); border-radius: 5px; display: grid; place-items: center; color: var(--seat-color); font-size: 16px; font-weight: 750; }
.lineup-identity { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lineup-identity strong { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.45; }
.lineup-identity small { font-size: 14px; line-height: 1.45; color: #aebdcd; }
.lineup-total { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 0; }
.lineup-total small { font-size: 14px; color: #aebdcd; }
.lineup-chips, .lineup-net { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup-player.is-acting .lineup-identity small { color: var(--accent); }
#last-hand-result { padding: 0 var(--panel-inset); }
.last-hand-panel .eyebrow { font-size: 14px; letter-spacing: .6px; margin-top: 6px; line-height: 18px; }
.last-hand-winner { color: #e9cf9e; font-size: 17px; line-height: 1.6; margin-bottom: 18px; overflow-wrap: anywhere; }
.net-heading, .net-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.net-heading { color: #aebdcd; font-size: 14px; padding-bottom: 8px; }
.net-row { border-top: 1px solid #303b47; padding: 11px 0; font-size: 15px; }
.net-row>span { min-width: 0; overflow-wrap: anywhere; }
.net-row strong { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#last-hand-replay { margin: auto var(--panel-inset) 20px; width: calc(100% - 2 * var(--panel-inset)); }
#last-hand-result { padding-bottom: 20px; flex: 1; }

/* One full-width chart with local visibility controls and exact data beneath it. */
.chart-panel .section-heading { flex-wrap: wrap; }
#chart-empty { margin: 0 var(--panel-inset); padding: 12px 0; font-size: 15px; line-height: 1.6; color: #b7c5d3; }
#run-chart { margin: 10px var(--panel-inset) 20px; min-width: 0; }
#run-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: #354352; stroke-width: 1; }
.chart-zero { stroke: #718191; stroke-dasharray: 4 4; }
.chart-tick, .chart-axis-title { fill: #bdcad7; font-family: var(--font); font-size: 14px; }
.chart-axis-title { font-weight: 650; }
.chart-series { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#chart-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 14px; padding: 0 var(--panel-inset) 20px; }
.chart-legend-item { display: grid; grid-template-columns: 18px 18px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 44px; padding: 8px 10px; border: 1px solid #3d4c5d; border-radius: 7px; cursor: pointer; background: #18212b; }
.chart-legend-item:hover { background: #253241; }
.chart-legend-item input { margin: 0; padding: 0; width: 18px; height: 18px; accent-color: var(--accent); }
.chart-legend-item>span:last-child { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.chart-swatch { width: 18px; height: 3px; background: var(--seat-color); }
.chart-records { border-top: 1px solid #3b4856; }
.chart-records>summary { min-height: 52px; padding: 16px 20px; font-size: 15px; font-weight: 650; }
.chart-records>summary span { color: var(--accent); padding-left: 10px; font-variant-numeric: tabular-nums; }
.chart-records table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.chart-records caption { text-align: left; padding: 4px 20px 14px; color: #b4c4d3; line-height: 1.5; }
.chart-records th, .chart-records td { padding: 12px 20px; border-top: 1px solid #344150; text-align: left; vertical-align: top; }
.chart-records th:first-child { width: 135px; }
.chart-records thead { color: #b4c4d3; }
.chart-records .button { padding: 9px 12px; font-size: 14px; width: 100%; }
.chart-hand-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px 20px; }
.chart-hand-values>span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.chart-hand-values>span>span { overflow-wrap: anywhere; min-width: 0; line-height: 1.5; }
.chart-hand-values strong { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* History owns its run headings; the drawer itself stays in controls.css. */
.history-run+.history-run { margin-top: 16px; border-top: 1px solid #465666; padding-top: 12px; }
.history-run>h3 { display: flex; justify-content: space-between; gap: 12px; padding: 9px; font-size: 15px; color: var(--accent); }
.history-run>h3 span { color: #b9c7d5; font-size: 14px; font-weight: 500; }
.history-panel .history-street { font-size: 14px; letter-spacing: .4px; }
.history-panel .hand-summary strong, .history-panel .hand-summary>span { font-size: 14px; line-height: 1.5; }
.history-panel .history-event { overflow-wrap: anywhere; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; border-top: 1px solid #2b3541; margin-top: 32px; padding-top: 20px; color: #a4b3c3; font-size: 14px; line-height: 1.6; }
.site-footer>span { min-width: 0; overflow-wrap: anywhere; }
.site-footer>span:first-child { font-weight: 650; letter-spacing: 1px; }
.benchmark-main { max-width: 1120px; }
.benchmark-empty { margin-top: 26px; padding: 40px; background: #1a222c; border: 1px solid #3e4c5b; border-radius: 12px; }
.benchmark-empty p { color: #b9c8d6; line-height: 1.8; font-size: 16px; margin: 18px 0; }
.benchmark-details { margin-top: 30px; }
.benchmark-details>h2 { margin-bottom: 16px; }
.benchmark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.benchmark-grid article { min-width: 0; padding: 20px var(--panel-inset); }
.benchmark-grid h3 { font-size: 17px; line-height: 1.5; color: var(--accent); }
.benchmark-grid p { margin-top: 12px; color: #b9c8d6; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }

/* Card 06 run records: header, replay bar, usage and the side panel. Recorded text wraps and scrolls in place. */
.record-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; margin-bottom: var(--layout-gap); padding: 20px var(--panel-inset); border: 1px solid #34414e; border-radius: var(--panel-radius); background: #18212a; }
.record-header>div { min-width: 0; }
.record-state { font-size: 18px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.record-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.record-facts>div { display: flex; gap: 8px; min-width: 0; }
.record-facts dt { color: #aebdcd; flex: none; }
.record-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.record-notes { margin: 10px 0 0; padding-left: 18px; color: #e9cf9e; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.record-notes:empty { display: none; }
.record-header-actions { display: flex; flex-direction: column; gap: 8px; }
.record-hint { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; color: #b8c5d2; font-size: 14px; line-height: 1.6; }
.record-link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent); font-size: 14px; text-decoration: underline; }
.record-scope-label { margin: 0 var(--panel-inset) 12px; color: var(--accent); font-size: 14px; font-weight: 650; }
.record-replay { flex: 2; display: grid; gap: 10px; min-width: 0; }
.record-replay-buttons, .record-replay-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.record-replay-meta { justify-content: space-between; font-size: 14px; }
.record-replay-end { color: #e9cf9e; font-size: 14px; line-height: 1.5; }
.record-replay-end:empty { display: none; }
#record-speed button[aria-pressed="true"] { background: #d7b77e; border-color: #f0d3a1; color: #221c13; font-weight: 650; }
.lineup-config, .feed-decision { align-self: flex-start; min-height: 44px; padding: 6px 0; color: var(--accent); }
.record-usage-body { padding: 0 var(--panel-inset) 20px; }
.record-usage-body h3 { margin: 16px 0 8px; font-size: 15px; }
.record-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.record-panel .record-facts { display: grid; }
.record-panel .hand-summary>span { white-space: normal; overflow-wrap: anywhere; }
.record-section { padding: 16px 0; border-bottom: 1px solid #ffffff14; }
.record-section h3 { margin-bottom: 10px; color: var(--accent); font-size: 15px; }
.record-section h4 { margin: 12px 0 6px; color: #c8d4df; font-size: 14px; }
.record-outcome { font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.record-text { max-height: 50vh; overflow: auto; margin: 4px 0; padding: 10px 12px; border: 1px solid #3c4a59; border-radius: 7px; background: #11171e; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.record-note, .record-missing { margin: 6px 0; color: #b5c2cf; font-size: 14px; line-height: 1.6; }
.record-input summary { min-height: 44px; padding: 10px 0; font-weight: 650; }
.record-detail-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.record-chain { width: 100%; margin: 0; padding-left: 18px; font-size: 14px; }
.record-run-row { border-bottom: 1px solid #ffffff0f; padding: 4px 0; }
.record-run-row p { padding: 0 9px; color: #b7c5d3; font-size: 14px; }
.record-mode #settings-open, .record-mode #empty-table, .record-mode .view-label, .record-mode #view-select, .record-mode #seat-select, .record-mode #export-link,
.record-mode #bet-controls, .record-mode #action-buttons, .record-mode #refresh-table, .record-mode .metrics-band, .record-mode .site-footer>span+span { display: none !important; }
.record-blocked .watch-tabs, .record-blocked .arena-layout, .record-blocked .results-area { display: none !important; }

@media (min-width: 1251px) {
  .watch-column, .watch-sidebar { display: contents; }
  .table-shell { grid-column: 1; grid-row: 1; }
  .activity-panel { grid-column: 2; grid-row: 1; }
  .action-dock { grid-column: 1; grid-row: 2; }
  .overview-panel { grid-column: 2; grid-row: 2; }
}
@media (max-width: 1250px) {
  .arena-layout { grid-template-columns: minmax(0, 1fr); }
  .watch-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); align-items: stretch; }
  .results-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lineup-player { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .lineup-identity { grid-column: 2 / -1; }
  .lineup-total { align-items: flex-start; }
  .lineup-total:nth-child(3) { grid-column: 2; }
}
@media (max-width: 900px) {
  .app-header { padding: 0 var(--page-gutter); gap: 18px; flex-wrap: wrap; }
  .header-status { margin-left: 0; }
  #settings-open { margin-left: auto; }
  .results-band { grid-template-columns: minmax(0, 1fr); }
  .metrics-band { align-items: flex-start; flex-direction: column; gap: 8px; }
  .mode-pill { max-width: 180px; white-space: normal; flex-wrap: wrap; }
  .mode-separator { display: none; }
}
@media (max-width: 700px) {
  main { padding-top: 20px; }
  .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px var(--page-gutter); gap: 8px 16px; }
  .app-header>.brand { grid-column: 1; grid-row: 1; }
  .app-header>.language-button { grid-column: 2; grid-row: 1; margin-left: 0; justify-self: end; }
  .header-status { grid-column: 1; grid-row: 2; min-height: 32px; }
  #settings-open { grid-column: 2; grid-row: 2; margin-left: 0; }
  .brand { font-size: 16px; }
  .brand-mark { width: 28px; height: 32px; }
  .brand-mark svg { width: 19px; height: 23px; }
  .site-nav { order: 3; grid-column: 1 / -1; gap: 20px; flex-wrap: wrap; }
  .site-nav a, .site-nav button { font-size: 14px; }
  .page-heading { margin: 0 0 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .page-heading h1 { font-size: 28px; letter-spacing: -.4px; }
  .page-heading .eyebrow { font-size: 14px; letter-spacing: .7px; }
  .page-subtitle { font-size: 14px; }
  .mode-pill { max-width: 100%; padding: 9px 12px; gap: 8px; }
  .watch-tabs { display: flex; gap: 8px; padding: 0 0 14px; }
  .watch-tabs button { min-height: 44px; flex: 1; padding: 10px 16px; font-size: 15px; font-weight: 650; color: #b8c7d6; border: 1px solid #445262; border-radius: 7px; background: #1a2430; }
  body[data-watch-tab="action"] .watch-tabs [data-watch-tab="action"], body[data-watch-tab="results"] .watch-tabs [data-watch-tab="results"] { color: #172029; background: var(--accent); border-color: var(--accent); }
  .arena-layout, .watch-sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); }
  body[data-watch-tab="results"] .watch-sidebar { display: none; }
  body:not([data-watch-tab="results"]) .results-area { display: none; }
  .panel>.section-heading { padding-top: 20px; padding-bottom: 20px; }
  .activity-event { padding: 14px 16px; }
  .table-lineup { padding: 0 16px; }
  .panel-footnote { padding: 14px 16px; }
  .lineup-player { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .lineup-number { grid-column: 1; grid-row: 1; align-self: start; }
  .lineup-identity { grid-column: 1 / -1; grid-row: 1; padding-left: 44px; }
  .lineup-total:nth-child(3) { grid-column: 1; }
  .lineup-chips, .lineup-net { font-size: 18px; }
  .chart-records th, .chart-records td { padding: 12px 10px; }
  .chart-records th:first-child { width: 90px; }
  .chart-records .button { padding: 9px 6px; white-space: normal; }
  .chart-records>summary, .chart-records caption { padding-left: 16px; padding-right: 16px; }
  #run-chart { margin-left: 16px; margin-right: 16px; }
  #chart-legend { padding-left: 16px; padding-right: 16px; }
  .site-footer { margin: 24px 0 0; align-items: flex-start; }
  .site-footer>span:last-child { max-width: 190px; text-align: right; }
  .benchmark-empty { padding: 24px 20px; }
  .benchmark-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* A record reads source and hand, table, replay bar, then the action / this-run tabs (RFC §4.4). */
  .record-header { grid-template-columns: minmax(0, 1fr); }
  .record-mode main { display: flex; flex-direction: column; gap: var(--layout-gap); }
  .record-mode .page-heading, .record-mode .record-header, .record-mode .results-area, .record-mode .site-footer { margin: 0; }
  .record-mode .arena-layout { display: contents; }
  .record-mode .watch-column { order: 1; }
  .record-mode .watch-tabs { order: 2; padding: 0; }
  .record-mode .watch-sidebar, .record-mode .results-area, .record-mode .site-footer { order: 3; }
}