/* S4L match replay (replay.js): map in the main column, controls under it, players + kill feed on the side. */
.rp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rp[aria-busy="true"], .rp:has(> .rp-state) { display: block; }
.rp-state { color: var(--text2); }
.rp-err p { margin: 0 0 4px; color: var(--text); }
.rp-main { min-width: 0; }
.rp-map .s4lmap { max-height: max(320px, calc(100vh - 250px)); }  /* map + controls fit one screen */
/* enlarged (replay.js setBig): the replay fills the browser window; the map takes the height left by the controls */
.rp.rp-big { position: fixed; inset: 0; z-index: 900; margin: 0; padding: 12px; background: var(--bg); overflow-y: auto; grid-template-columns: minmax(0, 1fr) 360px; }
.rp-big .rp-main { display: flex; flex-direction: column; height: calc(100dvh - 24px); }  /* map = what the dock leaves */
.rp-big .rp-map { flex: 1; min-height: 0; }
.rp-big .rp-map .s4lmap { aspect-ratio: auto; height: 100%; max-height: none; }
.rp-big .rp-note { display: none; }  /* the legends: back under the map when not enlarged; the options stay */
.rp-big .rp-teams { max-height: 45vh; }
@media (max-width: 900px) { .rp.rp-big .rp-main { height: auto; } .rp.rp-big .rp-map .s4lmap { height: 70dvh; } }

/* controls */
.rp-dock, .rp-bar { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.rp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rp-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.rp-btns svg { width: 18px; height: 18px; fill: currentColor; }
.rp-play { min-width: 104px; }
.rp-ib { padding: 0 10px; min-height: 36px; }
.rp-time { font-variant-numeric: tabular-nums; color: var(--text2); font-size: 15px; white-space: nowrap; }
.rp-time b { color: var(--text); }
.rp-speed { margin-left: auto; }
.rp-speed button { min-width: 44px; font-variant-numeric: tabular-nums; }
.rp-scrub { position: relative; padding-top: 12px; }
.rp-range { width: 100%; margin: 0; accent-color: var(--accent); height: 24px; cursor: pointer; }
.rp-marks { position: absolute; left: 8px; right: 8px; top: 0; height: 12px; pointer-events: none; }
.rp-mk { position: absolute; bottom: 0; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--text3); opacity: .55; }
.rp-mk.k-knock { background: var(--knock); }
.rp-mk.tm { height: 9px; opacity: .9; background: #E9D5A0; }
.rp-mk.me { height: 12px; width: 3px; margin-left: -1.5px; opacity: 1; background: var(--accent); box-shadow: 0 0 0 1px #000; }
.rp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; }
.rp-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.rp-chk input { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.rp-layers { position: relative; }
.rp-layers summary { cursor: pointer; color: var(--text2); }
.rp-lyr { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0 2px; }
.rp-note { margin: 0; color: var(--text3); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.rp-note > span:first-child { color: var(--text2); flex-basis: 100%; }
.rp-lg { display: inline-flex; align-items: center; gap: 6px; }
.rp-lg i { display: inline-block; flex: none; font-style: normal; }
.rp-lg-gap { width: 20px; border-top: 2px dashed var(--text2); }
.rp-lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text2); }
.rp-lg-kn { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--knock); }
.rp-lg-x { color: var(--danger); font-weight: 800; font-size: 12px; line-height: 1; }
.rp-lg-veh { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #E2E8F0; }

/* fullscreen only: play / pause + clock inside the map (the controls below are out of reach there) */
.rp-ov { display: none; position: absolute; left: 10px; bottom: 10px; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 10px; background: rgba(20, 28, 38, .92); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.s4lmap:fullscreen .rp-ov, .s4lmap--full .rp-ov { display: flex; }
.rp-ovb { width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
.rp-ovb svg { width: 20px; height: 20px; fill: currentColor; }
.rp-nf[aria-disabled="true"] { opacity: .45; cursor: default; }

/* v4 HUD on the map (top left; the map's buttons are top right): alive · teams, zone timer, latest knocks / kills */
.rp-hud { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 76px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; font-size: 13px; line-height: 1.35; }
.rp-hst { margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(11, 16, 22, .84); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rp-hst[hidden] { display: none; }
.rp-hn, .rp-hz { display: block; }
.rp-hz { color: var(--text2); }
.rp-hz:empty, .rp-hpl:empty { display: none; }
.rp-hpl { display: block; color: var(--text2); }
.rp-hwarn { display: block; color: var(--danger); font-weight: 700; }  /* phase 5+ outside the blue circle */
.rp-hwarn:empty { display: none; }
/* v8 blue zone tick over a player: red, dark halo (paint-order) so it reads on any map */
.rp-zd { font: 800 11px system-ui, sans-serif; fill: #FF5A5A; paint-order: stroke; stroke: rgba(0, 0, 0, .9); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }  /* the selected player's named area (telemetry zone ids) */
.rp-kf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 3px; }  /* newest on top, as in game */
.rp-kf li { padding: 3px 8px; border-radius: 6px; background: rgba(11, 16, 22, .8); font-size: 12px; overflow-wrap: anywhere; }
.rp-kf .rp-es { color: var(--text3); }
.rp-kf .rp-ei { color: var(--danger); font-size: 10px; }
.rp-kf .k-knock .rp-ei { color: var(--knock); }

/* side: players (collapsible) + synced kill feed */
.rp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rp-sel > summary { cursor: pointer; padding: 12px 16px; font-weight: 650; font-size: 15px; }
.rp-selin { padding: 0 12px 12px; }
.rp-find { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; margin-bottom: 8px; }
/* position: relative = the containing block of the .sr state spans, so the scroller clips them (else they stretch the page) */
.rp-teams { position: relative; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.rp-team { border: 1px solid transparent; border-radius: 8px; padding: 4px; }
.rp-team.on { border-color: rgba(242, 181, 68, .5); background: rgba(242, 181, 68, .06); }
.rp-th { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text3); padding: 2px 6px; text-transform: uppercase; letter-spacing: .04em; }
.rp-rk { color: var(--text2); text-transform: none; font-variant-numeric: tabular-nums; }
.rp-th i, .rp-who i, .rp-sw { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.rp-pl { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rp-pl:hover { background: var(--raised); }
.rp-pl[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--accent); }
.rp-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tag { color: var(--text3); font-weight: 600; }  /* [clan] before the name */
.rp-tag-s4l { color: var(--accent); }
.rp-bot { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; border-radius: 4px; background: #33404D; color: #C9D3DD; }  /* ai.* players */  /* not .me: style.css styles a global .me */
.rp-st { width: 12px; flex: none; text-align: center; font-size: 11px; line-height: 1; color: var(--text3); }
.rp-st::before { content: "○"; }
.rp-pl[data-s="alive"] .rp-st::before { content: "●"; color: var(--positive); }
.rp-pl[data-s="kn"] .rp-st::before { content: "◆"; color: var(--knock); }
.rp-pl[data-s="dead"] .rp-st::before { content: "✕"; color: var(--danger); }
.rp-pl[data-s="dead"] .rp-pn { color: var(--text3); text-decoration: line-through; text-decoration-color: rgba(240, 120, 120, .6); }
/* v4 leaderboard: HP bar + number (the state word when knocked / eliminated), heal / boost just used */
.rp-hp { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text2); }
.rp-hp b { min-width: 22px; text-align: right; font-weight: 600; }
.rp-hpb { width: 44px; height: 6px; border-radius: 3px; background: #26313D; overflow: hidden; display: inline-block; }
.rp-hpb i { display: block; height: 100%; background: var(--positive); }
.rp-hpb i.md { background: #E9C25A; }
.rp-hpb i.lo { background: var(--danger); }
.rp-pl[data-s="dead"] .rp-hpb, .rp-pl[data-s="kn"] .rp-hpb { display: none; }
.rp-pl[data-s="kn"] .rp-hp b { color: var(--knock); }
.rp-pl[data-s="dead"] .rp-hp b { color: var(--text3); font-weight: 400; }
.rp-pl[data-s="dead"] { opacity: .7; }
.rp-team.out .rp-th { opacity: .6; }
.rp-use { flex: none; display: inline-flex; }
.rp-dm { flex: none; margin-left: auto; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }  /* damage dealt so far */
.rp-dm:empty { display: none; }
.rp-dm:not(:empty) + .rp-hp { margin-left: 8px; }  /* an empty .rp-dm: the HP keeps margin-left: auto (right edge) */
.rp-ui { width: 12px; height: 12px; }
.rp-ui.h { fill: #62C14A; }
.rp-ui.b { fill: #F5D03B; }
/* the selected player's card */
.rp-card { padding: 10px 14px; font-size: 13px; color: var(--text2); }
.rp-card[hidden] { display: none; }
.rp-card p { margin: 2px 0 0; }
.rp-ch { display: flex; align-items: center; gap: 8px; margin: 0 0 4px !important; font-size: 14px; color: var(--text); }
.rp-card .rp-hp b { min-width: 0; }
.rp-card .rp-hp.down b { color: var(--text3); }
.rp-out { color: #8FB8F5; }
.rp-feedbox { padding: 12px 0 4px; }
.rp-feedbox h3 { font-size: 15px; padding: 0 16px 8px; }
.rp-feed { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; position: relative; overscroll-behavior: contain; }
.rp-ev + .rp-ev { border-top: 1px solid #1E2935; }
.rp-evb { display: grid; grid-template-columns: 42px 14px minmax(0, 1fr); gap: 6px; width: 100%; padding: 7px 14px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; align-items: baseline; }
.rp-evb:hover { background: var(--raised); }
.rp-et { color: var(--text3); font-variant-numeric: tabular-nums; }
.rp-ei { color: var(--danger); font-size: 11px; }
.k-knock .rp-ei { color: var(--knock); }
.rp-eb { min-width: 0; overflow-wrap: anywhere; }
.rp-who { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.rp-env { font-style: italic; color: var(--text2); }
.rp-arrow { color: var(--text3); }
.rp-es { display: block; color: var(--text3); font-size: 12px; }
.rp-fut { opacity: .42; }
.rp-now .rp-evb { background: rgba(242, 181, 68, .1); box-shadow: inset 3px 0 0 var(--accent); }

/* map overlay (map units; marker groups are screen px through .s4m-s / --k from map.css) */
.rp-blue { fill: rgba(37, 99, 235, .17); stroke: #3B82F6; stroke-width: 2; }
.rp-white { fill: none; stroke: #fff; stroke-width: 2; stroke-opacity: .95; }
.rp-red { fill: rgba(240, 120, 120, .2); stroke: #F07878; stroke-width: 1.5; stroke-dasharray: 4 3; }
.rp-pline { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 7 5; }
.rp-plane-ic { fill: #fff; stroke: #000; stroke-width: 1; }
.rp-zones, .rp-plane, .rp-trails, .rp-deaths, .rp-pkgs { pointer-events: none; }
.rp-tr { fill: none; stroke-width: 1.7; stroke-opacity: .7; stroke-linejoin: round; stroke-linecap: round; }
.rp-tr.s4l { stroke-width: 2; stroke-opacity: .95; }  /* S4L members, also when someone else is selected */
/* the path older than RECENT_S (replay.js): faint for the lobby, clearer for S4L and the selected team */
.rp-tro { fill: none; stroke-width: 1; stroke-opacity: .22; stroke-linejoin: round; stroke-linecap: round; }
.rp-tro.s4l, .rp-tro.team { stroke-width: 1.6; stroke-opacity: .4; }
.rp-tr.team { stroke-width: 2; stroke-opacity: 1; }
.rp-trc { fill: none; stroke: #0B1016; stroke-opacity: .6; stroke-width: 3.8; stroke-linejoin: round; stroke-linecap: round; }  /* casing under .team / .s4l */
.rp-tr.rp-gap { stroke-dasharray: 3 4; stroke-opacity: .55; }
.rp-tr.rp-gap.team { stroke-opacity: .75; }
.rp-dot { stroke: #0B1016; stroke-width: 1.2; }
.rp-p.team .rp-dot { stroke: #fff; stroke-width: 1.2; }
.rp-p.sel .rp-dot { stroke: #fff; stroke-width: 2.6; transform: scale(1.45); }
.rp-p.kn .rp-dot { fill: #0B1016; stroke: var(--knock); stroke-width: 2.6; }
.rp-p.gap .rp-dot { opacity: .6; }  /* between samples across a gap: where they are is a guess */
.rp-veh { fill: none; stroke: none; }
/* estimated facing (replay.js facingAt); the dark rim keeps a light colour (yellow) readable on pale roofs and sand */
.rp-cone { fill-opacity: .45; stroke: #0B1016; stroke-opacity: .75; stroke-width: 1.2; stroke-linejoin: round; pointer-events: none; }
.rp-cone.aim { fill-opacity: .7; }
.rp-p.team .rp-cone { fill-opacity: .6; }
.rp-p.team .rp-cone.aim { fill-opacity: .85; }
.rp-p.veh .rp-veh { fill: rgba(11, 16, 22, .55); stroke: #E2E8F0; stroke-width: 1.4; }
.rp-nm { display: none; font: 600 11px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .9); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.rp-p.nm .rp-nm { display: inline; }
.rp-nmt { fill: #B0BDC9; }  /* [clan] in a map label; S4L gold (.rp-tag-s4l sets color, SVG text needs fill) */
.rp-nmt.rp-tag-s4l { fill: var(--accent); }
.rp-p.sel .rp-nm { font-weight: 800; font-size: 12px; }
.rp-dx { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.rp-dx-h { fill: none; stroke: #000; stroke-opacity: .8; stroke-width: 4.6; stroke-linecap: round; }
.s4lmap .rp-dm.team .s4m-s { transform: scale(calc(var(--k, 1) * 1.35)); }
.rp-pkg.fall { opacity: .55; }

/* shots layer (SPEC 39). Strokes are screen px on the map (map.css: non-scaling-stroke); colour = the shooter's team
   through the element's `color` (replay.js); "me" = the selected team (drawn on top, brighter, thicker) */
.rp-shots { pointer-events: none; }
.rp-ht { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.rp-ht.me { stroke-width: 2.2; }
.rp-ht.kn, .rp-ht.kl { stroke-width: 2; }
.rp-ht.me.kn, .rp-ht.me.kl { stroke-width: 3; }
.rp-ht.db:not(.kl) { stroke-dasharray: 2 3; stroke-opacity: .55; }  /* the victim was already knocked */
.rp-ht.bm { stroke-dasharray: 0 5; stroke-width: 2.6; }               /* explosive: a dotted "damage from" link */
.rp-ht.me.bm { stroke-width: 3.4; }
.rp-ht.vh { stroke-dasharray: 9 3 2 3; }                              /* run over / crash */
.rp-ht.tk { stroke: var(--danger); stroke-dasharray: 6 3; }
.rp-ht.h { stroke: #0B1016; stroke-opacity: .6; stroke-width: 3.4; }  /* casing under each tracer: not a trail */
.rp-ht.h.me, .rp-ht.h.kn, .rp-ht.h.kl { stroke-width: 4.4; }
.rp-ht.h.me.kn, .rp-ht.h.me.kl { stroke-width: 5.2; }
.rp-ht.h.bm { stroke-width: 4.8; }
.rp-ht.h.me.bm { stroke-width: 5.6; }
.rp-hi circle, .rp-hi path, .rp-mf path { fill: none; stroke-linecap: round; }
.rp-hi-r { stroke: currentColor; stroke-width: 1.4; }
.rp-hi.me .rp-hi-r { stroke-width: 2; }
.rp-hi.db .rp-hi-r { stroke: var(--knock); stroke-dasharray: 2 2; }
.rp-hi.bm .rp-hi-r { stroke-dasharray: 2 2.5; }
.rp-hi.tk .rp-hi-r { stroke: var(--danger); }
.rp-hi-o, .rp-hi-b { display: none; }
/* hit damage at the victim (replay.js IMPACT): white, headshot gold, knock / finishing hit in their colours; dark halo */
.rp-dmg { font: 800 12px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .9); stroke-width: 3px; stroke-linejoin: round; }
.rp-hi.hd .rp-dmg { fill: var(--accent); }
.rp-hi.kn .rp-dmg { fill: var(--knock); }
.rp-hi.kl .rp-dmg { fill: var(--danger); }
.rp-hi.hd .rp-hi-o { display: inline; stroke: #fff; stroke-width: 1.5; }                 /* headshot */
.rp-hi.kn .rp-hi-b, .rp-hi.kl .rp-hi-b { display: inline; stroke: var(--knock); stroke-width: 2.2; }  /* knock */
.rp-hi.kl .rp-hi-b { stroke: var(--danger); }                                           /* finishing hit */
.rp-mf-h { stroke: #0B1016; stroke-width: 3.2; stroke-opacity: .55; }  /* muzzle flash: rays around the shooter */
.rp-mf-r { stroke: #FFE58A; stroke-width: 1.5; }
.rp-mf.me .rp-mf-h { stroke-width: 4; }
.rp-mf.me .rp-mf-r { stroke: #FFF6CF; stroke-width: 2.2; }
.rp-mf.ml path { transform: scale(.75); }  /* fists / melee */
.rp-tw-b { stroke: #0B1016; stroke-width: 1.2; }
.rp-lgs { flex: none; overflow: visible; }
.rp-note[hidden] { display: none; }
.rp-tally { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .rp { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) {
  .rp { grid-template-columns: minmax(0, 1fr); }
  .rp-teams { max-height: 300px; }
  .rp-feed { max-height: 360px; }
}
@media (max-width: 720px) {
  .rp-dock, .rp-bar { padding: 10px; }
  /* F11: play, time and the scrubber stay on screen while the map is (sticky inside .rp-main) */
  .rp-dock { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -8px 24px #0009; }
  .rp-dock .rp-tally { display: none; }
  .rp-hud { font-size: 12px; }
  .rp-kf li:nth-last-child(n+3), .rp-kf .rp-es { display: none; }  /* phones: the latest 2, names only */
  .rp-speed { margin-left: 0; }
  .rp-speed button { min-width: 40px; padding: 6px 8px; }
  .rp-play { min-width: 92px; }
}