/* Shared CSS for the replay layer (lib/replay.js). Imported by
   gallery/pages/human.html and gallery/pages/human-runs.html. */

.replay-board-wrap {
  background: #fff;
  border: 1px solid #dde;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.replay-board { display: block; }

.replay-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 0;
}
.replay-controls button {
  padding: 6px 12px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #fafafa;
  cursor: pointer;
  font-size: 0.85rem;
}
.replay-controls button:hover { background: #eef; }
.replay-controls .r-progress {
  font-size: 0.78rem;
  color: #666;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.replay-controls input.r-speed { width: 110px; }

.replay-status {
  text-align: center;
  font-size: 0.85rem;
  color: #444;
  padding: 4px 0;
}
.replay-status .r-pill {
  background: #1a1a2e; color: #fff;
  padding: 2px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 8px;
}
.replay-status .r-score { font-weight: 700; }
.replay-status .r-anh   { color: #c0392b; font-weight: 700; }
.replay-status .r-time  { color: #888; margin-left: 8px; }

.replay-dot-orig { fill: #4a90d9; stroke: #2266aa; stroke-width: 1; }
.replay-dot-new  { fill: #e87c1e; stroke: #a04000; stroke-width: 1; }
.replay-line-history { stroke: #4a90d9; stroke-width: 1.5; opacity: 0.18; fill: none; }
.replay-line-flash   { stroke: #c0392b; stroke-width: 3.5; opacity: 0.85; fill: none; }