/* Battle replay player: HD-2D stage, captions, banner, controls and the accessible battle log. */
.battle-replay { display: grid; gap: .75rem; outline: none; }
.battle-replay:focus-visible { box-shadow: 0 0 0 3px var(--focus, #f0c674); border-radius: 10px; }
.battle-replay__stage { position: relative; border-radius: 10px; overflow: hidden; background: #1b1a22; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.battle-replay__canvas { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.battle-replay__caption {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%); padding: .35rem 1.1rem; border-radius: 999px;
  font: 600 clamp(.85rem, 1.6vw, 1.15rem) / 1.2 "Cinzel", Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
  color: #f6ecd2; background: linear-gradient(180deg, rgb(28 22 30 / .85), rgb(28 22 30 / .65)); border: 1px solid rgb(240 210 150 / .35);
  opacity: 0; pointer-events: none;
}
.battle-replay__caption.is-visible { animation: replay-caption 3.2s ease forwards; }
.battle-replay__banner {
  position: absolute; inset: auto 0 9% 0; display: grid; justify-items: center; gap: .2rem; opacity: 0; pointer-events: none;
  color: #fbf3dc; text-shadow: 0 2px 0 #2a1d14, 0 0 18px rgb(0 0 0 / .6);
}
.battle-replay__banner strong { font: 700 clamp(1.2rem, 3vw, 2.2rem) / 1.1 "Cinzel", Georgia, serif; letter-spacing: .06em; }
.battle-replay__banner span { font: italic 500 clamp(.85rem, 1.6vw, 1.1rem) / 1.2 Georgia, serif; opacity: .9; }
.battle-replay__banner.is-visible { animation: replay-banner 4.5s ease forwards; }
.battle-replay__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.battle-replay__controls button, .battle-replay__controls select {
  font: inherit; padding: .4rem .8rem; border-radius: 8px; border: 1px solid var(--line, #5b4a3a); background: var(--panel, #2a2230); color: var(--ink, #f3ead7); cursor: pointer;
}
.battle-replay__controls button[aria-pressed="true"] { background: var(--accent, #7a2e2e); }
.battle-replay__controls input[type="range"] { flex: 1 1 12rem; accent-color: var(--accent, #b0413e); }
.battle-replay__log {
  max-height: 14rem; overflow: auto; margin: 0; padding: .6rem 1rem .6rem 2.2rem; border-radius: 10px;
  background: var(--panel, #221c28); color: var(--ink, #eadfca); font: .92rem/1.45 Georgia, serif;
}
.battle-replay__log li.is-turning-point { color: var(--gold, #f2cf7a); font-weight: 600; }
@keyframes replay-caption { 0% { opacity: 0; transform: translate(-50%, -6px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes replay-banner { 0% { opacity: 0; transform: scale(.96); } 12%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .battle-replay__caption.is-visible, .battle-replay__banner.is-visible { animation: none; opacity: 1; }
}