/* The replay is a parent tool: it describes captured evidence and never drives a game session. */
.replay-launch { margin:4px 0 14px; }
.replay-dialog { position:fixed; inset:0; z-index:70; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:18px 10px; background:rgba(43,27,20,.62); }
.replay-dialog[hidden] { display:none; }
.replay-card { width:100%; max-width:920px; margin:auto; padding:18px; border:4px solid var(--ink); border-radius:24px; background:var(--paper); box-shadow:0 12px 0 rgba(43,27,20,.18); }
.replay-head { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.replay-head h2 { margin:0; font-size:24px; }
.replay-head p { margin:4px 0 0; color:var(--muted); font-weight:700; }
.replay-stage { position:relative; overflow:hidden; min-height:240px; margin:14px 0 10px; border:3px solid var(--ink); border-radius:18px; background:linear-gradient(#7fb7e8 0%,#cbe9f6 54%,#9bd08e 55%,#7dbf6a 100%); }
.replay-stage canvas { display:block; width:100%; height:auto; min-height:240px; touch-action:none; }
.replay-tap { position:absolute; left:-100px; top:-100px; width:24px; height:24px; margin:-12px 0 0 -12px; border:3px solid var(--ink); border-radius:50%; background:rgba(255,213,79,.86); box-shadow:0 0 0 5px rgba(255,255,255,.55); pointer-events:none; }
.replay-tap::after { content:''; position:absolute; inset:5px; border-radius:50%; background:var(--red); }
.replay-tap.accepted::after { background:var(--grass); }
.replay-context { position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px); padding:5px 9px; border-radius:9px; background:rgba(43,27,20,.82); color:#fff; font-size:12px; font-weight:800; text-transform:capitalize; pointer-events:none; }
.replay-controls, .replay-downloads, .replay-filter { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.replay-controls[hidden], .replay-downloads[hidden], .replay-filter[hidden], .replay-stage[hidden] { display:none; }
.replay-controls button, .replay-controls select, .replay-downloads button, .replay-filter button { font:800 14px ui-rounded, "SF Pro Rounded", system-ui, sans-serif; color:var(--ink); border:2px solid var(--ink); border-radius:10px; padding:7px 10px; background:#fff; }
.replay-controls button, .replay-downloads button, .replay-filter button { cursor:pointer; box-shadow:0 2px 0 rgba(43,27,20,.16); }
.replay-controls button:active, .replay-downloads button:active, .replay-filter button:active { transform:translateY(2px); box-shadow:none; }
.replay-controls output { min-width:78px; font-weight:900; font-variant-numeric:tabular-nums; }
.replay-scrub { flex:1 1 220px; accent-color:var(--grass); }
.replay-status { padding:9px 11px; border:2px solid var(--line); border-radius:12px; background:#fffdf8; color:var(--muted); font-size:13px; font-weight:700; }
.replay-status strong { color:var(--ink); }
.replay-timeline { max-height:250px; overflow:auto; margin-top:8px; border-top:2px solid var(--line); }
.replay-event { display:grid; grid-template-columns:72px 1fr; gap:8px; width:100%; padding:8px 4px; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; font:inherit; text-align:left; cursor:pointer; }
.replay-event:hover, .replay-event:focus { background:#eaf4fb; outline:none; }
.replay-event time { color:var(--muted); font-weight:900; font-variant-numeric:tabular-nums; }
.replay-event span { font-weight:700; overflow-wrap:anywhere; }
.replay-filter button[aria-pressed="true"] { background:#b9f2d8; }
.replay-empty { padding:30px 8px; color:var(--muted); font-weight:700; text-align:center; }
.replay-loading { min-height:84px; }
.replay-settings-link { display:block; width:max-content; max-width:100%; margin:0 auto 24px; color:var(--ink); font-weight:850; }
.replay-env { margin:8px 0; color:var(--muted); font-size:13px; font-weight:700; }
@media (max-width:560px) { .replay-card { padding:14px; } .replay-head h2 { font-size:20px; } .replay-stage, .replay-stage canvas { min-height:190px; } .replay-event { grid-template-columns:62px 1fr; } }
