.death-replay { width: 100%; margin-top: 12px; text-align: left; color: var(--text); }
.death-replay [hidden] { display: none !important; }
.death-replay .death-replay-open { min-height: 44px; padding: 8px 0; border: 0; color: var(--dim); font: 500 13px var(--font-ui); background: transparent; box-shadow: none; }
.death-replay-open:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.death-replay-panel { padding: 14px 0; border-block: 1px solid var(--line); }
.death-replay-summary { margin: 0 0 10px; font: 600 15px/1.4 var(--font-ui); color: var(--text); }
.death-replay canvas { display: block; width: 100%; height: auto; max-height: 310px; object-fit: contain; background: #08121c; }
.death-replay input[type=range] { display: block; width: 100%; min-height: 40px; margin: 0; padding: 0; accent-color: var(--cyan); cursor: pointer; }
.death-replay-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.death-replay-actions .mbtn { min-height: 44px; flex: 1; font: 600 12px var(--font-ui); padding: 10px 14px; }
.death-replay-note { margin: 10px 0 0; color: var(--dim); font: 12px/1.5 var(--font-ui); }
.death-replay :is(button,input):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 600px) { .death-replay canvas { max-height: 230px; } }
@media (prefers-reduced-motion: reduce) { .death-replay * { animation: none !important; transition: none !important; } }

#death-threats { margin: 6px 0 0; font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--dim); }
#death-threats[hidden] { display: none; }