.replay-body {
  background: var(--void);
  background-image: var(--grid);
  color: var(--paper);
  font-family: var(--sans);
}

.replay-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 5, 3, .96);
  backdrop-filter: blur(12px);
}

.replay-header-inner {
  width: min(100% - 32px, 1480px);
  min-height: 58px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.replay-brand {
  color: var(--paper);
  text-decoration: none;
  font: 800 15px/1 var(--mono);
  white-space: nowrap;
}

.replay-brand span { color: var(--acid); }
.replay-crumb { color: var(--muted); font: 650 11px/1 var(--mono); text-transform: uppercase; }
.replay-header .run-info { margin-left: auto; flex: 0 1 760px; min-width: 0; gap: 8px; }
.replay-header .run-selector {
  min-width: 0;
  max-width: 520px;
  height: 34px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--coal);
  color: var(--paper);
  font: 650 10px/1 var(--mono);
}

.replay-header .run-links { gap: 12px; }
.replay-header .run-links a {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cyan);
  font: 700 10px/1 var(--mono);
}

.replay-page { width: min(100% - 32px, 1480px); margin: 0 auto; padding: 34px 0 0; }
.run-intro { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.run-intro-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.run-kicker { color: var(--acid); font: 750 10px/1.4 var(--mono); text-transform: uppercase; }
.run-title { margin: 8px 0 5px; max-width: 900px; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: 0; }
.run-deck { margin: 0; color: var(--muted); font-size: 15px; }

.run-meta-ribbon {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  margin-top: 22px;
  border: 1px solid var(--line);
}

.run-meta-cell { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); }
.run-meta-cell:last-child { border-right: 0; }
.run-meta-label { margin-bottom: 7px; color: var(--muted); font: 700 8px/1 var(--mono); text-transform: uppercase; }
.run-meta-value,
.run-meta-ribbon .badge-pill {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--paper);
  font: 750 11px/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-meta-ribbon .badge-pill.running { color: var(--acid); background: none; }
.run-meta-ribbon .badge-pill.score { color: var(--acid); background: none; }

.replay-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.replay-stage { min-width: 0; border-right: 1px solid var(--line); }
.replay-stage .game-section { padding: 0; border: 0; border-radius: 0; background: var(--void); }
.replay-stage .game-header {
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.replay-stage .game-header h2 { color: var(--cyan); font: 750 10px/1 var(--mono); text-transform: uppercase; }
.replay-stage .game-status { color: var(--muted); font: 650 9px/1.35 var(--mono); text-align: right; }

.replay-stage #game-container { position: relative; min-height: 420px; background: #000; }
.replay-stage #game-canvas {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
.replay-stage .no-game-placeholder { height: auto; min-height: 420px; color: var(--muted); }
.replay-stage .no-game-placeholder span { display: none; }

.replay-controls {
  display: none;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--coal);
}
.replay-control-modes,
.replay-transport,
.replay-evidence-key { display: flex; align-items: center; min-width: 0; }
.replay-control-modes { width: 100%; border-bottom: 1px solid var(--line); }
.replay-control-modes .replay-view-toggle { flex: 1; }
.replay-control-modes .replay-glyphs { flex: 0 0 auto; }
.replay-transport { width: 100%; gap: 8px; padding: 10px 12px; }
.replay-evidence-key { width: 100%; padding: 8px 12px; border-top: 1px solid var(--line); }
.replay-controls button {
  min-width: 34px;
  width: 34px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
}
.replay-controls button:hover { background: var(--paper); color: var(--void); }
.replay-controls input[type="range"] { accent-color: var(--acid); }
.replay-step-label { color: var(--acid); font: 750 10px/1 var(--mono); }
.replay-view-toggle { display: flex; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; }
.replay-view-toggle button {
  flex: 1;
  width: auto;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font: 750 9px/1 var(--mono);
  text-transform: uppercase;
}
.replay-view-toggle button[data-active="true"] { background: rgba(217, 244, 91, .08); color: var(--acid); box-shadow: inset 0 -2px 0 var(--acid); }
.observer-level-select {
  height: 32px;
  margin: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--void);
  color: var(--paper);
}
.replay-glyphs { margin-left: auto; flex: 0 0 auto; }
.replay-glyphs button { flex: 0 0 auto; }
.replay-legend { color: var(--muted); font: 650 8px/1 var(--mono); letter-spacing: 0; }
.legend-swatch { width: 8px; height: 8px; border: 0; border-radius: 0; }

.decision-panel { min-width: 0; background: var(--coal); }
.decision-head { padding: 16px; border-bottom: 1px solid var(--line); }
.decision-head .run-kicker { margin-bottom: 6px; }
.decision-head h3 { margin: 0; font-size: 20px; }
.decision-panel .agent-actions-list { max-height: 720px; gap: 0; overflow-y: auto; }
.decision-panel .agent-action-item {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.decision-panel .agent-action-item .step-num { color: var(--acid); font: 700 8px/1 var(--mono); }
.decision-panel .agent-action-item .intent { color: var(--paper); font-size: 13px; line-height: 1.45; }
.decision-panel .agent-action-item .keys { color: var(--cyan); font-size: 9px; }
.decision-panel .agent-action-item .keys .key { background: none; padding: 0; }

.replay-page .dashboard-row {
  grid-template-columns: 1.25fr .75fr;
  gap: 0;
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.replay-page .chart-panel,
.replay-page .stats-panel {
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: var(--void);
}
.replay-page .chart-panel { border-right: 1px solid var(--line); }
.replay-page .chart-panel h3,
.replay-page .stats-panel h3 { color: var(--acid); font: 750 10px/1 var(--mono); text-transform: uppercase; }
.replay-page .chart-container { height: 250px; }
.replay-page .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); }
.replay-page .stat-card { padding: 12px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--coal); }
.replay-page .stat-card:nth-child(4n) { border-right: 0; }
.replay-page .stat-card .label { color: var(--muted); font: 700 8px/1 var(--mono); }
.replay-page .stat-card .value { color: var(--paper); font: 750 18px/1.2 var(--mono); }
.replay-page .stat-card .value.healthy { color: var(--acid); }
.replay-page .stat-card .value.warning { color: var(--amber); }
.replay-page .stat-card .value.critical { color: var(--signal); }
.replay-page .stat-card.score-card { grid-column: auto; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--coal); }
.replay-page .stat-card.score-card .value { color: var(--acid); font-size: 18px; }
.replay-page .milestones { border-top-color: var(--line); }
.replay-page .milestone-badge { border-radius: 0; background: rgba(217, 244, 91, .08); color: var(--acid); }

.replay-footer {
  width: min(100% - 32px, 1480px);
  margin: 40px auto 0;
  padding: 24px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 650 9px/1.5 var(--mono);
  text-align: left;
}
.replay-footer a { margin-left: 18px; color: var(--cyan); }

@media (max-width: 980px) {
  .replay-workspace { grid-template-columns: 1fr; }
  .replay-stage { border-right: 0; }
  .decision-panel { border-top: 1px solid var(--line); }
  .decision-panel .agent-actions-list { max-height: 340px; }
  .replay-page .dashboard-row { grid-template-columns: 1fr; }
  .replay-page .chart-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .run-meta-ribbon { grid-template-columns: repeat(3, 1fr); }
  .run-meta-cell:nth-child(3) { border-right: 0; }
  .run-meta-cell:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .replay-header-inner, .replay-page, .replay-footer { width: min(100% - 24px, 1480px); }
  .replay-header-inner { flex-wrap: wrap; padding: 12px 0; }
  .replay-header .run-info { flex: 1 0 100%; }
  .replay-header .run-selector { max-width: none; }
  .replay-header .run-links { display: none !important; }
  .replay-page { padding-top: 26px; }
  .run-intro-grid { grid-template-columns: 1fr; gap: 12px; }
  .run-title { font-size: 38px; }
  .run-meta-ribbon { grid-template-columns: 1fr 1fr; }
  .run-meta-cell { border-top: 1px solid var(--line); }
  .run-meta-cell:nth-child(-n+2) { border-top: 0; }
  .run-meta-cell:nth-child(2n) { border-right: 0; }
  .run-meta-cell:last-child { grid-column: 1 / -1; }
  .replay-control-modes { align-items: stretch; flex-wrap: wrap; }
  .replay-control-modes .replay-view-toggle:first-child { flex: 1 0 100%; border-bottom: 1px solid var(--line); }
  .replay-glyphs { margin-left: 0; }
  .replay-view-toggle button { padding-inline: 8px; font-size: 8px; }
  .replay-transport { flex-wrap: wrap; }
  .replay-transport input[type="range"] { order: 4; flex-basis: 100%; }
  .replay-evidence-key { overflow-x: auto; }
  .replay-stage #game-container, .replay-stage .no-game-placeholder { min-height: 210px; }
  .replay-page .stats-grid { grid-template-columns: 1fr 1fr; }
  .replay-page .stat-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .replay-page .stat-card:nth-child(2n) { border-right: 0; }
}