.rr-replay-modal { position: fixed; inset: 0; z-index: 160; background: #070d1bd9; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.rr-replay-modal[hidden] { display: none !important; }
.rr-replay-sheet { width: min(100%, 760px); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 22px; padding: clamp(16px, 4vw, 28px); background: var(--panel, #f9fafc); color: var(--ink, #162333); border: 1px solid var(--line, #a6b2c5); box-shadow: 0 20px 70px #0008; }
.replay-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.replay-heading h2 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.replay-disclosure { color: var(--muted, #536173); line-height: 1.5; font-size: .82rem; border-bottom: 1px solid var(--line, #a6b2c5); padding-bottom: 16px; }
.replay-library { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.replay-library li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px; background: var(--bg, #ecf1f6); border: 1px solid var(--line, #a6b2c5); border-radius: 14px; }
.replay-library li > div { flex: 1 1 220px; min-width: 0; }
.replay-library b, .replay-library span, .replay-library small { display: block; overflow-wrap: anywhere; }
.replay-library span { margin: 5px 0; font-size: .82rem; }
.replay-library small { color: var(--muted, #536173); }
.replay-empty { padding: 32px 16px; text-align: center; }
.rr-replay-sheet .btn, .rr-replay-sheet .select { min-height: 48px; }
.replay-toolbar, .replay-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.replay-toolbar .btn { flex: 1 1 130px; }
.replay-stage { display: grid; place-items: center; margin: 16px 0; background: #0c1525; padding: 16px; border-radius: 16px; color: #e8eff9; }
.replay-stage canvas { display: block; width: min(100%, 240px); height: auto; aspect-ratio: 12 / 22; border: 1px solid #678197; border-radius: 4px; }
.replay-stage p { font-size: .82rem; text-align: center; margin: 12px 0 0; }
.replay-controls label { display: flex; align-items: center; gap: 8px; }
.replay-controls output { font-variant-numeric: tabular-nums; font-size: .85rem; }
#replay-player { display: block; width: 100%; margin-top: 8px; }
#replay-scrub { display: block; width: 100%; height: 48px; accent-color: var(--accent, #0e8aa6); }
.replay-timeline-title { font-size: 1rem; margin-top: 22px; }
.replay-timeline { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; display: grid; gap: 8px; }
.replay-timeline .btn { display: flex; width: 100%; text-align: left; white-space: normal; gap: 16px; align-items: center; }
.replay-timeline time { font-variant-numeric: tabular-nums; color: var(--muted, #536173); flex-shrink: 0; }
.replay-timeline span { overflow-wrap: anywhere; }
.replay-timeline [aria-current] { border-color: var(--accent, #0e8aa6); background: color-mix(in srgb, var(--accent, #0e8aa6) 10%, var(--panel, #f9fafc)); }
.replay-warning { padding: 12px; border: 1px solid var(--accent, #0e8aa6); border-radius: 12px; font-size: .85rem; }
@media (max-width: 380px) { .rr-replay-modal { padding: 8px; } .rr-replay-sheet { max-height: calc(100dvh - 16px); padding: 14px; } .replay-controls { gap: 8px; } .replay-controls > .btn { flex: 1 1 90px; } }