body.mode-replay #hud, body.mode-replay #names, body.mode-replay #lobby, body.mode-replay #menu, body.mode-replay #hint { display: none !important; }

.rp { position: absolute; inset: 0; z-index: 30; pointer-events: none; color: #fff; font-family: var(--f-font);
  padding: calc(env(safe-area-inset-top) + var(--edge)) calc(env(safe-area-inset-right) + var(--edge)) calc(env(safe-area-inset-bottom) + var(--edge)) calc(env(safe-area-inset-left) + var(--edge));
  display: flex; flex-direction: column; justify-content: space-between; }
.rp > * { pointer-events: auto; }
.rp-top { display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.rp-top > * { pointer-events: auto; }
.rp-grow { flex: 1; }
.rp-info { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 9px; border-radius: 8px; background: var(--f-panel); box-shadow: inset 0 0 0 2px var(--f-line); max-width: 60%; }
.rp-info .f-title { font-size: max(calc(24 * var(--u)), 20px); color: var(--f-yellow); }
.rp-info .f-sub { font-size: max(calc(13 * var(--u)), 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp .f-close { background: var(--f-panel); }

.rp-trick { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + var(--edge) + 6px); transform: translateX(-50%); pointer-events: none; padding: 6px 18px; border-radius: 6px;
  background: var(--f-yellow); color: var(--f-ink); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(22 * var(--u)), 18px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); white-space: nowrap; }
.rp-trick[hidden] { display: none; }
.rp-trick.pop { animation: rp-pop 0.28s ease-out; }
@keyframes rp-pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.rp-bot { display: flex; align-items: center; gap: max(calc(12 * var(--u)), 10px); padding: 6px max(calc(10 * var(--u)), 8px); border-radius: 10px;
  background: var(--f-panel); box-shadow: inset 0 0 0 2px var(--f-line), 0 6px 18px rgba(0, 0, 0, 0.3); }
.rp-btn { flex: none; width: var(--f-tap); height: var(--f-tap); border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  background: var(--f-yellow); color: var(--f-ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18); }
.rp-btn:active { transform: translateY(2px); filter: brightness(0.92); }
.rp-btn svg { width: 56%; height: 56%; fill: currentColor; }
.rp-speed { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 2px var(--f-line); font-size: max(calc(17 * var(--u)), 15px); }
.rp-time { flex: none; min-width: 5.6em; text-align: center; font-size: max(calc(17 * var(--u)), 15px); font-variant-numeric: tabular-nums; }

.rp-bar { flex: 1; min-width: 0; height: var(--f-tap); display: flex; align-items: center; cursor: pointer; touch-action: none; padding: 0 10px; }
.rp-track { position: relative; width: 100%; height: max(8px, calc(8 * var(--u))); border-radius: 4px; background: rgba(255, 255, 255, 0.38); }
.rp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #fff; }
.rp-mark { position: absolute; top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--f-yellow); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; }
.rp-knob { position: absolute; top: 50%; width: max(22px, calc(22 * var(--u))); height: max(22px, calc(22 * var(--u))); transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(11, 18, 48, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); }
.rp.scrub .rp-knob { transform: translate(-50%, -50%) scale(1.25); }

.rpl-list { display: flex; flex-direction: column; gap: 8px; }
.rpl-note { margin: 0 0 4px; color: var(--f-dim); font-weight: 600; font-size: max(calc(13 * var(--u)), 12px); }
.rpl-empty { margin: 20px 0; text-align: center; color: var(--f-dim); font-family: var(--f-font); font-weight: 600; font-size: max(calc(17 * var(--u)), 15px); }
.rpl-row { display: flex; align-items: center; gap: max(calc(12 * var(--u)), 10px); padding: 8px 10px; border-radius: 10px; background: var(--f-panel); box-shadow: inset 0 0 0 2px var(--f-line); color: #fff; font-family: var(--f-font); }
.rpl-mode { flex: none; width: max(calc(104 * var(--u)), 88px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; align-self: stretch; border-radius: 6px; padding: 6px 4px; background: var(--r-rare); text-transform: uppercase; }
.rpl-mode.training { background: var(--r-free); }
.rpl-mode.duel { background: var(--r-legendary); }
.rpl-mode b { font-weight: 700; font-style: italic; font-size: max(calc(15 * var(--u)), 13px); }
.rpl-mode span { font-weight: 600; font-size: max(calc(12 * var(--u)), 12px); opacity: 0.9; }
.rpl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rpl-main > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpl-map { font-weight: 700; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 15px); }
.rpl-date { color: var(--f-dim); font-weight: 600; font-size: max(calc(13 * var(--u)), 12px); }
.rpl-best { font-weight: 600; font-size: max(calc(14 * var(--u)), 13px); color: #fff; }
.rpl-best b { color: var(--f-yellow); }
.rpl-stats { flex: none; display: flex; gap: max(calc(14 * var(--u)), 10px); }
.rpl-stats span { display: flex; flex-direction: column; align-items: center; }
.rpl-stats small { color: var(--f-dim); font-weight: 600; text-transform: uppercase; font-size: max(calc(12 * var(--u)), 12px); }
.rpl-stats b { font-weight: 700; font-size: max(calc(18 * var(--u)), 16px); }
.rpl-watch { flex: none; padding: 0 max(calc(16 * var(--u)), 12px); }
.rpl-watch svg { width: max(calc(18 * var(--u)), 16px); height: max(calc(18 * var(--u)), 16px); fill: currentColor; vertical-align: -3px; margin-right: 6px; }
.rpl-del { flex: none; min-width: var(--f-tap); height: var(--f-tap); border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center; padding: 0 8px;
  background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 2px var(--f-line); font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: 14px; }
.rpl-del svg { width: max(calc(24 * var(--u)), 22px); height: max(calc(24 * var(--u)), 22px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpl-del.arm { background: var(--f-red); }
@media (max-width: 900px) { .rpl-stats { display: none; } }