/* Page 95 (THE REPLAY, acted), on ../kit.css + fbkit.css + 40_fx.css + 92_eg.css (the pick box, the bar, the TODAY stage):
   the film players (the kill library's K58.View canvases), the key-frame strips, the version blocks. */
.rp-film { position: relative; overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; background: #05040A; aspect-ratio: 16 / 9; box-shadow: 4px 9px 0 var(--ink); }
.rp-film canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.rp-film__tag { position: absolute; z-index: 3; left: 12px; top: 10px; padding: 4px 9px 3px; border-radius: 8px; border: 2.5px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); font: 400 12.5px/1 var(--f-display); letter-spacing: .05em; box-shadow: 2px 3px 0 var(--ink); pointer-events: none; }
.rp-film__tag.is-far { background: var(--mint); }
.rp-film__t { position: absolute; z-index: 3; right: 12px; bottom: 10px; padding: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, .55); color: var(--cream-2); font: 700 11px/1.2 var(--f-body); letter-spacing: .08em; pointer-events: none; }
.rp-bar { position: relative; height: 8px; margin-top: 10px; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 2px solid var(--ink); overflow: hidden; }
.rp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--yellow), var(--pink)); }
.rp-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.rp-seg { display: inline-flex; padding: 3px; gap: 3px; border: 3px solid var(--ink); border-radius: 12px; background: #120F20; box-shadow: 2px 4px 0 var(--ink); }
.rp-seg button { min-height: 32px; padding: 3px 11px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--cream-2); font: 400 14px/1 var(--f-display); letter-spacing: .04em; }
.rp-seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.rp-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rp-strip figure { margin: 0; position: relative; border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; background: #05040A; aspect-ratio: 16 / 9; }
.rp-strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp-strip figcaption { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: var(--cream); font: 400 11px/1.1 var(--f-display); letter-spacing: .04em; }
.rp-ver { position: relative; margin-top: 28px; padding: 18px; border: 4px solid var(--ink); border-radius: 28px; background: radial-gradient(60% 80% at 10% 0%, rgba(242, 200, 72, .12), transparent 60%), linear-gradient(180deg, #332B5C, #211B3D 60%, #181330); box-shadow: 4px 9px 0 var(--ink); scroll-margin-top: 70px; transition: box-shadow .2s; }
.rp-ver.is-picked { box-shadow: 4px 9px 0 var(--ink), 0 0 0 5px var(--yellow); }
.rp-ver--today { background: linear-gradient(180deg, #2A2545, #1C1830); }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rp-beats { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: b; }
.rp-beats li { position: relative; padding-left: 30px; color: var(--cream-2); font-size: 14px; line-height: 1.4; counter-increment: b; }
.rp-beats li::before { content: counter(b); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 6px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); display: grid; place-items: center; font: 400 12px/1 var(--f-display); }
.rp-today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rp-today .eg-st { aspect-ratio: 100 / 44; border: 3px solid var(--ink); box-shadow: 2px 5px 0 var(--ink); }
@media (max-width: 900px) { .rp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-strip figure:nth-child(n+4) { display: none; } .rp-today { grid-template-columns: minmax(0, 1fr); } .rp-ver { padding: 13px; } }
.rp-hero__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }