/* REPLAY (js/ui/replay.js): the watch bar, the Replays screen and the replay lines on the results and pause screens.
 * A pale steel grey-blue (the ghost's own tone), never a reserved hue: not the enemy's magenta, your fire's cyan and mint,
 * reward gold, the charge red or capture violet. */
.rp-bar{position:fixed;z-index:6;left:50%;bottom:calc(14px + var(--sb));transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:8px 10px 8px 14px;border-radius:14px;border:1px solid rgba(216,224,240,.35);background:rgba(8,10,22,.84);box-shadow:0 8px 28px rgba(0,0,0,.45);zoom:var(--ui);max-width:calc(100vw - 24px)}
body:not([data-screen="none"]) .rp-bar{display:none}
.rp-tag{font:10px/1 var(--pix);letter-spacing:.08em;color:#d8e0f0}
.rp-time{min-width:104px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;color:var(--dim)}
.rp-speed{display:flex;gap:4px}
.rp-bar .chip{min-height:32px;padding:0 10px}
.rp-bar .chip[aria-pressed="true"]{color:var(--ink);border-color:#d8e0f0;background:rgba(216,224,240,.12)}

.rp-box{width:min(100%,620px);text-align:left}
.rp-box h2{text-align:center}
.rp-box h3{margin-top:16px}
.rp-box .note{margin-top:6px}
.rp-box .btns .chip{min-height:44px;padding:0 18px;font-size:15px}
.rp-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.rp-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.02)}
.rp-ship{flex:none;width:auto;height:30px}
.rp-what{flex:1;min-width:0;display:grid;gap:3px}
.rp-what b{font-size:15px;color:var(--ink)}
.rp-what span{font-size:13px;color:var(--dim)}
.rp-what small{font-size:12px;color:var(--faint)}
.rp-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.rp-badge{display:inline-block;margin-left:8px;padding:3px 6px;border-radius:6px;border:1px solid rgba(216,224,240,.45);font:8px/1 var(--pix);letter-spacing:.06em;color:#d8e0f0;vertical-align:2px}
.rp-badge.dim{border-color:var(--line);color:var(--dim)}
.rp-msg{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,176,61,.5);background:rgba(255,176,61,.08);color:var(--orange)!important;font-size:14px;line-height:1.4}
.rp-note{margin:0!important;font-size:14px;color:#c4cde0!important;text-align:center}
.rp-row-acts{margin-top:2px}

@media (max-width:560px){
  .rp-row{flex-wrap:wrap}
  .rp-acts{width:100%;justify-content:flex-start}
  .rp-bar{gap:6px;padding:6px 8px 6px 10px;bottom:calc(10px + var(--sb))}
  .rp-time{min-width:0;font-size:12px}
  .rp-bar .chip{min-height:30px;padding:0 8px}
}