/* «ПОВТОР» (ui/replay.js): the highlight player over the results. The world under it is the game canvas playing the
   clip; this is only the frame: a camera corner frame, rec + the moment's line on top, the transport at the bottom.
   Style «Эфир»: flat plates, 1.5 px lines, amber = the action (the hero's ring, the moment's mark), magenta rec. */
#replay{position:absolute;inset:0;z-index:16;pointer-events:none;color:var(--ink);font-family:var(--mono)}
#replay[hidden]{display:none}
body.rpon>:not(#game):not(#replay):not(.fx):not(script){visibility:hidden!important}   /* the results, the HUD, the sticks: away while a clip plays */
#replay .rp-frame{--cc:rgba(255,181,71,.8);--cl:44px;position:absolute;inset:calc(12px + var(--safe-t)) calc(12px + var(--safe-r,0px)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l,0px))}
#replay::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(7,5,11,.55) 100%)}
#replay.slow::before{background:radial-gradient(ellipse at center,transparent 50%,rgba(7,5,11,.7) 100%)}
.rp-top,.rp-bot{position:absolute;left:calc(24px + var(--safe-l,0px));right:calc(24px + var(--safe-r,0px));pointer-events:auto}
.rp-top{top:calc(22px + var(--safe-t));display:flex;align-items:center;gap:14px;padding:8px 10px 8px 14px;background:rgba(7,5,11,.82);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--amber)}
.rp-top .rec{flex:none;color:var(--red,#ff4d5e)}
.rp-tx{flex:1;min-width:0;font:600 clamp(16px,2vw,22px)/1.15 var(--disp);letter-spacing:.06em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-n{flex:none}
.rp-x{flex:none;display:inline-flex;align-items:center;gap:8px;height:var(--tap);padding:0 10px;background:none;border:var(--bw) solid var(--line2);color:var(--ink);cursor:pointer}
.rp-x svg{width:18px;height:18px}
.rp-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;background:rgba(7,5,11,.86);border:var(--bw) solid var(--line);color:var(--amber)}
.rp-bot{bottom:calc(22px + var(--safe-b));display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:rgba(7,5,11,.82);border:var(--bw) solid var(--line)}
.rp-bar{position:relative;height:18px;cursor:pointer}
.rp-bar::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--line2)}
.rp-fill{position:absolute;left:0;top:7px;height:4px;width:0;background:var(--amber);box-shadow:0 0 8px rgba(255,181,71,.6)}
.rp-mark{position:absolute;top:1px;width:3px;height:16px;margin-left:-1.5px;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.rp-row{display:flex;align-items:center;gap:10px}
.rp-b{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);background:none;border:var(--bw) solid var(--line2);color:var(--amber);cursor:pointer}
.rp-b:disabled{opacity:.35;cursor:default}
.rp-b svg{width:22px;height:22px}
.rp-t{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.rp-slow{padding:3px 7px;background:var(--mag);color:var(--bg)}
.rp-b[hidden]{display:none}
.rp-sp{margin-left:auto;display:flex;gap:10px}
.rp-spd{width:auto;min-width:var(--tap);padding:0 10px;font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.rp-cam.on{background:var(--amber);color:var(--bg);border-color:var(--amber)}
/* a whole round: its moments on the bar (ui/replay.js start) — tap one: 5 s before it */
.rp-mks{position:absolute;inset:0;pointer-events:none}
.rp-mk{position:absolute;top:-6px;width:22px;height:30px;margin-left:-11px;padding:0;background:none;border:0;cursor:pointer;pointer-events:auto}
.rp-mk::after{content:"";position:absolute;left:9px;top:6px;width:4px;height:18px;background:var(--mag);box-shadow:0 0 6px var(--mag)}
.rp-mk:hover::after,.rp-mk:focus-visible::after{background:#fff}
#replay.full .rp-bar{height:22px}
/* the results' moment line with a clip: a button (ui/show.js) */
.sh-mom button.logln{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;border:0;border-left:2px solid var(--amber);min-height:var(--tap)}
.sh-mom button.logln:hover,.sh-mom button.logln:focus-visible{background:rgba(255,181,71,.12);outline:none}
.sh-mom .pl{flex:none;display:inline-flex;width:22px;height:22px;color:var(--amber)} .sh-mom .pl svg{width:100%;height:100%}
@media (max-width:900px){
  .rp-top{gap:8px;padding:6px 6px 6px 10px} .rp-top .rec{display:none} .rp-x kbd{display:none}
  .rp-bot{padding:8px} .rp-b{width:52px;height:52px}
}
@media (max-width:520px){
  .rp-row{gap:6px} .rp-b{width:44px;height:44px} .rp-b svg{width:20px;height:20px} .rp-again{display:none} .rp-sp{gap:6px}
  .rp-t{margin-left:2px;font-size:12px} .rp-spd{min-width:44px;padding:0 6px}
}