/* Board elements match public/game.html, scoped to the admin replay viewer. */
.replay-stage {
  --p0: #7c5cff; --p1: #ff5c8a; --accent3: #5cffb8;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(180px, 1fr);
  align-items: start; gap: 18px; margin: 24px 0 12px;
}
.replay-stage .board-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.replay-stage .player-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: #12121a; border: 1px solid rgba(130,100,255,.2);
  border-radius: 9px; transition: border-color .2s, box-shadow .2s;
}
.replay-stage .player-banner.p0 { border-left: 3px solid var(--p0); }
.replay-stage .player-banner.p1 { border-left: 3px solid var(--p1); }
.replay-stage .player-banner.active { border-color: var(--accent3); box-shadow: 0 0 12px rgba(92,255,184,.2); }
.replay-stage .banner-name { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; }
.replay-stage .p0 .banner-name, .replay-stage .pt.p0 { color: #a18aff; }
.replay-stage .p1 .banner-name, .replay-stage .pt.p1 { color: #ff85a7; }
.replay-stage .banner-pieces { display: flex; gap: 5px; flex-wrap: wrap; }
.replay-stage .pc { display: flex; align-items: center; gap: 4px; background: #1a1a28; border-radius: 5px; padding: 3px 6px; font-size: 12px; }
.replay-stage .pc img { width: 15px; height: 15px; object-fit: contain; }
.replay-stage .banner-turn { color: var(--accent3); font-size: 12px; font-weight: 600; }
.replay-stage .status-msg { color: #b8c5ef; text-align: center; font-size: 13px; margin: 0; min-height: 20px; }
.replay-stage .chess-wrap {
  display: grid; width: 100%; aspect-ratio: 1;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  grid-template-rows: 22px minmax(0, 1fr) 22px;
}
.replay-stage .col-strip { display: grid; grid-template-columns: repeat(var(--board-size,9), minmax(0,1fr)); }
.replay-stage .row-strip { display: grid; grid-template-rows: repeat(var(--board-size,9), minmax(0,1fr)); }
.replay-stage .clabel { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #9a92b4; font-weight: 700; }
.replay-stage .game-board {
  display: grid; grid-template-columns: repeat(var(--board-size,9), minmax(0,1fr));
  grid-template-rows: repeat(var(--board-size,9), minmax(0,1fr));
  gap: 2px; padding: 3px; min-width: 0; min-height: 0;
  background: rgba(100,80,220,.15); border: 1.5px solid rgba(100,80,220,.3);
  border-radius: 8px; user-select: none;
}
.replay-stage .cell { border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; min-height: 0; }
.replay-stage .light-sq { background: #1e1e32; }
.replay-stage .dark-sq { background: #141422; }
.replay-stage .home-p0 { background: rgba(124,92,255,.22); box-shadow: inset 0 0 10px rgba(124,92,255,.3); }
.replay-stage .home-p1 { background: rgba(255,92,138,.22); box-shadow: inset 0 0 10px rgba(255,92,138,.3); }
.replay-stage .last-from { outline: 1px dashed rgba(161,138,255,.85); outline-offset: -2px; }
.replay-stage .last-to { outline: 2px solid rgba(92,255,184,.8); outline-offset: -2px; }
.replay-stage .home-icon { position: absolute; top: 1px; right: 2px; font-size: 10px; color: #ffd700; pointer-events: none; }
.replay-stage .piece { width: 82%; height: 82%; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; color: white; font-size: 12px; }
.replay-stage .piece img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); pointer-events: none; }
.replay-stage .piece.p0 { background: radial-gradient(circle at 35% 35%,rgba(124,92,255,.7),rgba(40,20,120,.9)); border: 1.5px solid rgba(124,92,255,.8); box-shadow: 0 2px 8px rgba(124,92,255,.5); }
.replay-stage .piece.p1 { background: radial-gradient(circle at 35% 35%,rgba(255,92,138,.7),rgba(120,20,60,.9)); border: 1.5px solid rgba(255,92,138,.8); box-shadow: 0 2px 8px rgba(255,92,138,.5); }
.replay-sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.replay-stage .sidebar-card { background: #12121a; border: 1px solid rgba(130,100,255,.2); border-radius: 10px; padding: 14px; }
.replay-stage .sidebar-title { border-left: 3px solid var(--p0); padding-left: 7px; font-size: 11px; letter-spacing: 1px; color: #ad99ff; margin-bottom: 14px; font-weight: 700; }
.replay-stage .stats-row { display: flex; justify-content: space-around; text-align: center; gap: 8px; }
.replay-stage .stat-val { color: #b9a7ff; font-size: 24px; font-weight: 800; }
.replay-stage .stat-lbl { color: #a7a1ba; font-size: 10px; margin-top: 4px; }
.replay-stage .log-entries { max-height: 410px; overflow-y: auto; scrollbar-width: thin; }
.replay-stage .log-entry { color: #c2bad7; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; padding: 8px 0; overflow-wrap: anywhere; }
.replay-stage .pt { font-weight: 700; }
.replay-stage .log-empty { color: #a7a1ba; font-size: 13px; }
@media(max-width: 750px) {
  .replay-stage { grid-template-columns: minmax(0,1fr); }
  .replay-stage .board-col { max-width: 560px; width: 100%; margin: auto; }
  .replay-stage .log-entries { max-height: 220px; }
}
@media(max-width: 430px) {
  .replay-stage .chess-wrap { grid-template-columns: 16px minmax(0,1fr) 16px; grid-template-rows: 16px minmax(0,1fr) 16px; }
  .replay-stage .player-banner { padding: 8px; gap: 6px; }
  .replay-stage .banner-name { flex-basis: 100%; }
  .replay-stage .clabel { font-size: 8px; }
}

.replay-stage button.log-entry { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); border-radius: 0; min-height: 0; cursor: pointer; font: inherit; font-size: 12px; color: #c2bad7; padding: 8px 0; }
.replay-stage button.log-entry:hover, .replay-stage button.log-entry:focus-visible { color: #fff; background: rgba(255,255,255,.06); }
.replay-keys { margin: 4px 0 10px; font-size: 12px; }