/* The replay: a light table. Chrome stays neutral and out of the way; the map does the talking. */
.rp { --rp-line: #262b32; --rp-ink: #ece9e3; --rp-ink2: #a9adb3; --rp-ink3: #6f747c; --rp-ct: #5ea6f5; --rp-t: #e0a03a;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; outline: none; color: var(--rp-ink); font-size: 13px; position: relative; }
.rp:focus-visible { outline: none; }
.rp:focus-visible .rp-stage { box-shadow: 0 0 0 1.5px rgba(236,233,227,.35); }

.rp-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.rp-head-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.rp-head-text strong { flex-shrink: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-head-text span { color: var(--rp-ink3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-view { position: relative; min-width: 0; }
.rp-stage { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #0b0d10; border: 1px solid var(--rp-line); touch-action: none; }
.rp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.rp-stage[data-tool="draw"] .rp-canvas { cursor: crosshair; }
.rp-stage[data-tool="erase"] .rp-canvas { cursor: cell; }
.rp-canvas:active, .rp-stage.rp-panning .rp-canvas { cursor: grabbing !important; }
.rp-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rp-ink3); font-size: 13px; pointer-events: none; }

.rp-top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: center; pointer-events: none; }
.rp-title { display: none; }
.rp-top-mid { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(10,12,15,.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.06); }
.rp-clock { font: 600 13px/1 var(--mono, monospace); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rp-clock.bomb { color: #ff8a6e; }
.rp-clock.bomb::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; transform: rotate(45deg); background: #ff8a6e; vertical-align: 1px; }
.rp-alive { display: flex; gap: 6px; align-items: center; font: 600 12px/1 var(--font, sans-serif); color: var(--rp-ink3); }
.rp-alive:empty { display: none; }
.rp-alive b { font-variant-numeric: tabular-nums; }
.rp-alive b.ct { color: var(--rp-ct); }
.rp-alive b.t { color: var(--rp-t); }

.rp-feed { position: absolute; top: 44px; right: 12px; z-index: 2; display: grid; gap: 5px; justify-items: end; pointer-events: none; }
/* the kill feed, as CS2 writes it: killer, weapon, the marks (no-scope, smoke, wallbang, headshot), victim */
.kf { display: flex; gap: 7px; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px; background: rgba(8,10,13,.74);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 13.5px; white-space: nowrap; animation: kf-in .18s ease-out; }
@keyframes kf-in { from { opacity: 0; transform: translateX(8px); } }
.kf-n { font-weight: 700; }
.kf-n.ct { color: #8ec3ff; } .kf-n.t { color: #f2bb5c; }
.kf .cs2, .ev-body .cs2, .sb-death .cs2 { display: block; flex: none; }
.kf .mk, .ev-body .mk, .sb-death .mk { opacity: .92; }
.kf-a { display: inline-flex; align-items: center; gap: 5px; color: var(--rp-ink2); font-weight: 500; }
/* round events: the round as a quiet list, one line each; what is still to come is dimmed under a "now" line */
.ev { margin-top: 16px; display: flex; flex-direction: column; min-height: 0; --ev-bg: #101317; }
.ev-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; border-bottom: 1px solid var(--rp-line);
  font: 600 11px/1 var(--font, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--rp-ink3); }
.ev-opt { display: inline-flex; gap: 5px; align-items: center; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 12px; cursor: pointer; }
.ev-list { position: relative; display: grid; align-content: start; gap: 1px; margin-top: 4px; padding-top: 4px; max-height: 340px; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: #2f353d transparent; }
.ev-row { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px;
  align-items: center; min-height: 28px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; }
.ev-row:hover { background: rgba(255,255,255,.06); }
.ev-row:focus-visible { outline: 1.5px solid var(--rp-ink); }
.ev-row:not(.past) > * { opacity: .4; }
.ev-row.next { margin-top: 16px; }
.ev-row.next::after { content: ""; position: absolute; left: 6px; right: 6px; top: -9px; height: 1px; background: var(--rp-ink3); }
.ev-row.next::before { content: "Now"; position: absolute; left: 6px; top: -15px; z-index: 1; padding-right: 6px; background: var(--ev-bg);
  font: 700 9px/12px var(--font, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ink); }
.ev-t { font: 600 11.5px/1 var(--mono, monospace); font-variant-numeric: tabular-nums; color: var(--rp-ink3); }
.ev-body { display: flex; gap: 5px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.ev-body .kf-n, .ev-body .kf-w, .ev-body .ev-b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev-b { color: #ff8a6e; font-weight: 600; } .ev-b.ok { color: #9fd9a8; }
.ev-none { padding: 12px 4px; color: var(--rp-ink3); font-size: 12.5px; }
.kf-w { color: var(--rp-ink2); }
.kf-f { font: 600 9.5px/1 var(--font, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--rp-ink3); box-shadow: inset 0 0 0 1px #3a4048; padding: 3px 4px; border-radius: 3px; }

/* the tool bar: over the map by default, beside it on the left with .rp--tools-out (--rp-tools-w = its width + gap) */
.rp-tools { position: absolute; z-index: 3; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border-radius: 10px; background: rgba(10,12,15,.66); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.05); opacity: .55; transition: opacity .15s; }
.rp-view:hover .rp-tools, .rp-tools:focus-within { opacity: 1; }
.rp--tools-out { --rp-tools-w: 58px; }   /* the tool column (40 px wide for the Q / 3D button) + its gap */
.rp--tools-out .rp-view { display: flex; align-items: center; gap: 8px; }
.rp--tools-out .rp-tools { position: static; transform: none; flex: none; opacity: 1; background: #12151a; border-color: var(--rp-line); }
.rp--tools-out .rp-stage { flex: 1 1 auto; min-width: 0; }
.rp--tools-out > .rp-head, .rp--tools-out > .rp-transport, .rp--tools-out > .rp-gif, .rp--tools-out > .rp-edits { margin-left: var(--rp-tools-w); }
.rp-sep { height: 1px; margin: 3px 4px; background: #2c323a; }
.rp-ib { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--rp-ink2); }
.rp-ib:hover { color: var(--rp-ink); background: rgba(255,255,255,.07); }
.rp-ib.on { color: #111; background: var(--rp-ink); }
.rp-ib.sm { width: 24px; height: 24px; }
.rp-ib:focus-visible { outline: 1.5px solid var(--rp-ink); }
.rp-pen::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pen); box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.rp-pen .ic { display: none; }
.rp-floor.on { color: #111; background: var(--rp-ink); }
.ic { display: inline-grid; place-items: center; line-height: 0; }

.rp-tip { position: absolute; display: none; pointer-events: none; padding: 6px 9px; border-radius: 7px; background: rgba(10,12,15,.94); border: 1px solid #2c323a; font-size: 12px; z-index: 4; max-width: 220px; }
.rp-tip b { display: block; font-weight: 600; }
.rp-tip span { display: block; color: var(--rp-ink2); }

.rp-menu { position: absolute; display: none; z-index: 5; width: 220px; padding: 12px; border-radius: 10px; background: #14171c; border: 1px solid #2f353d; box-shadow: 0 18px 40px rgba(0,0,0,.45); gap: 8px; }
.rp-menu b { font-weight: 600; }
.rp-menu small { color: var(--rp-ink3); }
.rp-menu select, .rp-secs { width: 100%; height: 30px; border-radius: 6px; border: 1px solid #2f353d; background: #0e1013; color: var(--rp-ink); padding: 0 8px; }
.rp-secs { width: 64px; }
.rp-menu-row { display: flex; gap: 8px; align-items: center; }
.rp-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid #2f353d; background: #1b1f25; color: var(--rp-ink); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }
.rp-btn:hover { background: #232830; }
.rp-btn.primary { background: var(--rp-ink); color: #111; border-color: var(--rp-ink); font-weight: 600; }
.rp-btn:disabled { opacity: .5; cursor: default; }

.rp-card { position: absolute; left: 50px; bottom: 10px; right: 10px; max-width: 360px; padding: 10px 12px; border-radius: 10px; background: rgba(10,12,15,.86); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.06); font-size: 12px; display: none; }
.sc-head { display: flex; gap: 6px; align-items: center; color: var(--rp-ink2); margin-bottom: 6px; }
.sc-head input[type=number] { width: 48px; height: 22px; border-radius: 5px; border: 1px solid #2f353d; background: #0e1013; color: var(--rp-ink); padding: 0 4px; }
.sc-fol { margin-left: auto; display: flex; gap: 5px; align-items: center; color: var(--rp-ink3); }
.sc-row { display: grid; grid-template-columns: 26px 1fr; gap: 1px 8px; padding: 4px 0; }
.sc-row b { font-weight: 700; grid-row: span 2; }
.sc-row b.ct { color: var(--rp-ct); }
.sc-row b.t { color: var(--rp-t); }
.sc-nums { font-variant-numeric: tabular-nums; }
.sc-top, .sc-x { color: var(--rp-ink3); }

/* transport: the bar alone on a full-width row, its controls in a row below */
.rp-transport { display: grid; gap: 2px; }
.rp-bar { display: flex; }
.rp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rp-ctl-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }     /* a narrow map: they wrap under, as one group */
.rp-play { all: unset; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rp-ink); color: #111; flex: none; }
.rp-play:hover { background: #fff; }
.rp-time { font: 500 14px/1 var(--mono, monospace); font-variant-numeric: tabular-nums; color: var(--rp-ink2); min-width: 100px; margin-left: 8px; }
.rp-track { position: relative; flex: 1; height: 36px; cursor: pointer; touch-action: none; }
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 5px; border-radius: 3px; background: #2a3038; }
.rp-fill { position: absolute; left: 0; right: 0; top: 16px; height: 5px; border-radius: 3px; background: var(--rp-ink); transform-origin: 0 0; transform: scaleX(0); }
.rp-knob { position: absolute; top: 10px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: var(--rp-ink); box-shadow: 0 0 0 3px rgba(14,16,19,.9); pointer-events: none; }
.rp-marks { position: absolute; inset: 0; }
.rp-mark { position: absolute; top: 2px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 1px; background: var(--rp-ink3); cursor: pointer; }
.rp-mark::after { content: ""; position: absolute; inset: -4px -5px; }
.rp-mark.ct { background: var(--rp-ct); }
.rp-mark.t { background: var(--rp-t); }
.rp-mark.bomb { width: 9px; height: 9px; top: 3px; margin-left: -4.5px; transform: rotate(45deg); background: #ff8a6e; border-radius: 1px; }
.rp-mark.defuse { width: 9px; height: 9px; top: 3px; margin-left: -4.5px; transform: rotate(45deg); background: transparent; box-shadow: inset 0 0 0 1.5px #9fd9a8; }
.rp-mark.end { top: 24px; height: 9px; background: #4b5058; }
.rp-clipsel { position: absolute; top: 11px; height: 15px; border-radius: 3px; background: rgba(236,233,227,.16); box-shadow: inset 0 0 0 1px rgba(236,233,227,.5); display: none; pointer-events: none; }
.rp-speed { all: unset; cursor: pointer; font: 600 14px/1 var(--mono, monospace); padding: 10px; border-radius: 8px; color: var(--rp-ink2); min-width: 40px; text-align: center; }
.rp-speed:hover { color: var(--rp-ink); background: rgba(255,255,255,.06); }
.rp-controls .rp-ib { width: 38px; height: 38px; border-radius: 9px; }
.rp-controls .rp-ib .ic svg { width: 19px; height: 19px; }

.rp-pop { display: none; position: absolute; right: 0; z-index: 8; width: 236px; padding: 6px; border-radius: 10px; background: #14171c; border: 1px solid #2f353d; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.rp-pop.open { display: grid; gap: 1px; }
.rp-pop-row { all: unset; cursor: pointer; display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 7px; color: var(--rp-ink2); }
.rp-pop-row:hover { background: rgba(255,255,255,.05); color: var(--rp-ink); }
.rp-pop-row.on { color: var(--rp-ink); }
.rp-pop-row:disabled { opacity: .4; cursor: default; }
.rp-pop-state { font-size: 11.5px; color: var(--rp-ink3); }

.rp-gif { display: none; padding: 12px; border-radius: 10px; border: 1px solid var(--rp-line); background: #12151a; }
.rp-gif.open { display: grid; gap: 8px; }
.rp-gif-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-gif-row input { width: 64px; height: 28px; border-radius: 6px; border: 1px solid #2f353d; background: #0e1013; color: var(--rp-ink); padding: 0 6px; }
.rp-gif p { margin: 0; font-size: 12px; }
.rp-gif-out { display: grid; gap: 8px; justify-items: start; }
.rp-gif-out img { max-width: 100%; border-radius: 8px; border: 1px solid var(--rp-line); }
.rp-check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--rp-ink2); }
.rp-err { color: #ff8a6e; }
.rp .muted { color: var(--rp-ink3); }

.rp-edits { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-edits:empty { display: none; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; font-size: 12px; border: 1px dashed #4b5058; color: var(--rp-ink2); }

/* scoreboard (one round) */
.rp-side { display: grid; gap: 10px; }
.rp--single .rp-side { grid-template-columns: 1fr 1fr; }
.sb { display: grid; gap: 1px; align-content: start; --sb-c: var(--rp-ct); --sb-soft: rgba(94,166,245,.13); }
.sb.t { --sb-c: var(--rp-t); --sb-soft: rgba(224,160,58,.13); }
.sb-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; border-bottom: 1px solid var(--rp-line); font-size: 12px; color: var(--rp-ink3); }
.sb-side { font-weight: 700; letter-spacing: .06em; color: var(--sb-c); }
.sb-team { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.sb-tname { overflow: hidden; text-overflow: ellipsis; }
.sb-sub:empty { display: none; }
.sb-money { margin-left: auto; display: flex; gap: 0 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-m { display: inline-flex; align-items: baseline; gap: 4px; }
.sb-m i { font-style: normal; }
.sb-m b { font-weight: 500; }
.sb-m.res b { color: var(--rp-ink2); }

/* a player (compact row): health as a big number and as the row itself (a soft fill + a bar), name, kills, money;
   under them what they hold (bright, with its magazine), the rest, armour and kit; the fallen say who got them.
   Blind = the whole row turns white. The hud (below) lays the same parts out as a broadcast card. */
.sb-row { position: relative; display: grid; grid-template-columns: 38px auto minmax(0, 1fr) auto auto;
  grid-template-areas: "hp name name k cash" "hp hand inv prot prot" "hp death death death death"; column-gap: 9px;
  align-items: center; padding: 7px 10px 9px 4px; margin-top: 3px; border-radius: 8px; overflow: hidden; cursor: pointer; font-size: 13px;
  background: rgba(255,255,255,.025); transition: background-color .12s; }
.sb-row > :not(.sb-fill):not(.sb-bar) { position: relative; }
.sb-fill { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; transition: transform .12s linear; background: var(--sb-soft); }
.sb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.sb-bar b { display: block; height: 100%; background: var(--sb-c); transform-origin: 0 0; transition: transform .12s linear; }
.sb-row.low .sb-bar b { background: #ff6b4a; }
.sb-row:hover { background: rgba(255,255,255,.055); }
.sb-row.sel { box-shadow: inset 0 0 0 1px #4a515b; }
.sb-hp { grid-area: hp; justify-self: center; font: 700 19px/1 var(--font-d, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sb-row.mid .sb-hp { color: #f2d27a; }
.sb-row.low .sb-hp { color: #ff8a6e; }
.sb-name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 13.5px; }
.sb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tag { flex: none; font: 700 9.5px/1 var(--font, sans-serif); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; background: #111; color: #fff; }
.sb-tag:empty { display: none; }
.sb-row.defusing .sb-tag { background: #9fd9a8; color: #10170f; }
.sb-k { grid-area: k; font: 600 11.5px/1 var(--mono, monospace); color: var(--rp-ink2); white-space: nowrap; }
.sb-cash { grid-area: cash; font-variant-numeric: tabular-nums; color: var(--rp-ink2); font-size: 12.5px; }
.sb-hand, .sb-inv, .sb-prot, .sb-death { margin-top: 4px; display: flex; align-items: center; min-width: 0; font-size: 12px; color: var(--rp-ink3); }
.sb-hand:empty, .sb-inv:empty, .sb-prot:empty, .sb-death:empty { display: none; }
.sb-hand { grid-area: hand; gap: 5px; white-space: nowrap; }
.sb-inv { grid-area: inv; flex-wrap: wrap; gap: 3px 9px; padding-left: 9px; }
.sb-prot { grid-area: prot; justify-content: flex-end; gap: 8px; }
.sb-death { grid-area: death; gap: 6px; }
.sb-death b { font-weight: 600; }
.sb-death b.ct { color: var(--rp-ct); } .sb-death b.t { color: var(--rp-t); }
.gl { display: block; flex: none; }
.gun { display: block; flex: none; }
.iv-pic { display: inline-flex; align-items: center; flex: none; }
.cs2 { display: block; flex: none; }
.iv-name { color: var(--rp-ink); font-weight: 600; }
.iv-a { font: 600 12px/1 var(--mono, monospace); color: var(--rp-ink); }
.iv-a s { text-decoration: none; font-weight: 400; color: var(--rp-ink3); }
.iv-i { display: inline-flex; align-items: center; flex: none; opacity: .85; }
.sb-row.blind .cs2 { filter: brightness(0); }
.sb-by { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.sb-death { white-space: nowrap; overflow: hidden; }
.sb-by .kf-n, .rp--hud .sb-row.dead .sb-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-ar { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.iv-ar b { font-weight: 500; }
.sb-row.dead { opacity: .5; }
.sb-row.blind { background: #f5f3ee; color: #121418; box-shadow: 0 0 18px rgba(255,255,255,.35); }
.sb-row.blind .sb-fill { opacity: 0; }
.sb-row.blind .sb-k, .sb-row.blind .sb-cash, .sb-row.blind .sb-hand, .sb-row.blind .sb-inv, .sb-row.blind .sb-prot, .sb-row.blind .iv-name,
.sb-row.blind .iv-a, .sb-row.blind .iv-a s { color: #121418; }

/* overlaid round list */
.cl { display: grid; gap: 1px; }
.cl-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--rp-ink2); padding: 0 2px 6px; border-bottom: 1px solid var(--rp-line); margin-bottom: 4px; }
.cl-row { display: grid; grid-template-columns: 8px 1fr auto auto auto; gap: 8px; align-items: center; padding: 4px 4px 4px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.cl-row:hover { background: rgba(255,255,255,.04); }
.cl-row.look { cursor: default; }
.cl-row.solo { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px #3a4048; }
.cl-row.off { opacity: .4; }
.cl-row.ended .cl-label { color: var(--rp-ink3); }
.cl-side { width: 8px; height: 8px; border-radius: 50%; }
.cl-side.ct { background: var(--rp-ct); }
.cl-side.t { background: var(--rp-t); }
.cl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-sub { color: var(--rp-ink3); font-size: 11.5px; white-space: nowrap; }
.cl-res { font: 700 10px/1 var(--font, sans-serif); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; }
.cl-res.w { background: var(--rp-ink); color: #111; }
.cl-res.l { box-shadow: inset 0 0 0 1px #4b5058; color: var(--rp-ink3); }
.cl .muted { font-size: 11.5px; }
.cl-scroll { max-height: 260px; overflow: auto; }

/* review fixes: handles, help, bomb, assists */
.rp-handle { position: absolute; top: 7px; width: 11px; height: 23px; margin-left: -5.5px; border-radius: 3px; background: var(--rp-ink); box-shadow: 0 0 0 2px rgba(14,16,19,.9); cursor: ew-resize; display: none; z-index: 2; }
.rp-help { position: absolute; inset: auto 12px 12px auto; width: 270px; padding: 12px 14px; border-radius: 10px; background: rgba(12,14,17,.95); border: 1px solid #2f353d; font-size: 12px; display: none; z-index: 6; }
.rp-help.open { display: block; }
.rp-help dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; }
.rp-help dt { font: 600 11px/1.4 var(--mono, monospace); color: var(--rp-ink); }
.rp-help dd { margin: 0; color: var(--rp-ink2); }
.rp-q { font: 700 13px/1 var(--font, sans-serif); }
@media (max-width: 1000px) { .rp-head, .rp-view, .rp-transport { min-width: 0; max-width: 100%; } }

/* the dossier's map: the side panel lives in the layers column, the stage is square */
.rp--dock { gap: 8px; }
.rp--dock .rp-head { min-height: 26px; }
.rp-side .sb-row.off { opacity: .35; }
.a-round .ev-list { max-height: none; }

/* big view: the map takes about three quarters of the screen. The stage is as wide as its column (a wide
   stage shows the radar whole on its short side, with room to pan); the scoreboard and events take the rest */
.rp.rp--theater { position: fixed; inset: 0; z-index: 100; width: auto !important; background: #0b0d10; padding: 14px 20px 16px;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 600px); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 20px; row-gap: 8px; overflow: hidden; align-items: stretch; }
.rp--theater > .rp-head { grid-column: 1 / -1; grid-row: 1; }
.rp--theater > .rp-view { grid-column: 1; grid-row: 2; min-height: 0; }
.rp--theater .rp-stage { aspect-ratio: auto; width: 100% !important; max-width: none !important; height: 100%; }
.rp--theater > .rp-transport { grid-column: 1; grid-row: 3; }
.rp--theater > .rp-edits, .rp--theater > .rp-gif { grid-column: 1; grid-row: auto; }
.rp--theater > .rp-pop { top: auto; bottom: 108px; right: calc(clamp(300px, 22vw, 600px) + 40px); }
.rp--theater > .rp-side { grid-column: 2; grid-row: 2 / -1; min-height: 0; overflow-y: auto; align-content: start; grid-template-columns: 1fr !important;
  scrollbar-width: thin; scrollbar-color: #2f353d transparent; }
body.rp-theater-open { overflow: hidden; }
@media (max-width: 900px) {
  .rp.rp--theater { grid-template-columns: 1fr; grid-template-rows: none; overflow: auto; }
  .rp--theater > .rp-view, .rp--theater > .rp-transport, .rp--theater > .rp-side { grid-column: 1; grid-row: auto; }
  .rp--theater .rp-stage { aspect-ratio: 1; height: auto; }
  .rp--theater > .rp-side { overflow: visible; }
  .rp--single .rp-side { grid-template-columns: 1fr; }
}

/* ---------- hud: the broadcast layout (the demo viewer). A score banner over everything, each team's cards beside
   the map (T mirrored), the playback bar across, the round's events in their own column on the right. Sized from
   the page's width (the page makes the replay's holder a container) and the window's height; when there is not
   room for four columns the map comes first and the teams and events go under it. ---------- */
.rp--hud { --hud-col: clamp(290px, 16.5cqw, 400px); --ev-col: clamp(250px, 13.5cqw, 340px);
  --rp-map: min(calc(100vh - 352px), calc(100cqw - 2 * var(--hud-col) - var(--ev-col) - 48px - var(--rp-tools-w, 0px)));
  grid-template-columns: var(--hud-col) calc(var(--rp-map) + var(--rp-tools-w, 0px)) var(--hud-col) var(--ev-col);
  justify-content: center; column-gap: 16px; row-gap: 12px;
  grid-template-areas: "bug bug bug ev" "ct view t ev" "tr tr tr ev" "gif gif gif ev" "ed ed ed ev"; }
.rp--hud .rp-feed { top: 12px; }
.rp--hud .ev { grid-area: ev; contain: size; margin: 0; padding: 12px 8px 8px; border: 1px solid var(--rp-line); border-radius: 10px; background: #12151a; --ev-bg: #12151a; }
.rp--hud .ev-head { padding: 0 6px 8px; }
.rp--hud .ev-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.rp--hud > .rp-head, .rp--hud .rp-top { display: none; }
.rp--hud > .rp-banner { grid-area: bug; display: grid; justify-items: center; gap: 10px; min-width: 0; }
.rp--hud > .rp-view { grid-area: view; align-self: start; }
.rp--hud .rp-stage { width: var(--rp-map); max-width: none; }
.rp--hud > .rp-side { display: contents; }
.rp--hud .sb.ct { grid-area: ct; } .rp--hud .sb.t { grid-area: t; }
.rp--hud > .rp-transport { grid-area: tr; margin-left: 0; min-width: 0; }
.rp--hud .rp-controls { min-width: 0; }
.rp--hud > .rp-gif { grid-area: gif; margin-left: 0; } .rp--hud > .rp-edits { grid-area: ed; margin-left: 0; }
.rp-banner-slot { display: flex; justify-content: center; min-width: 0; max-width: 100%; }
.rp-banner-slot:empty { display: none; }

/* the score bug */
.rp-bug { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: stretch; width: min(1000px, 100%); height: 56px;
  border-radius: 12px; overflow: hidden; background: #0b0d10; box-shadow: 0 0 0 1px var(--rp-line), 0 10px 30px rgba(0,0,0,.35); }
.bug-team { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-width: 0; font: 600 17px/1 var(--font-d, sans-serif); letter-spacing: -.01em; }
.bug-team.ct { justify-content: flex-end; color: var(--rp-ink); background: linear-gradient(270deg, rgba(94,166,245,.22), rgba(94,166,245,0) 85%); }
.bug-team.t { background: linear-gradient(90deg, rgba(224,160,58,.22), rgba(224,160,58,0) 85%); }
.bug-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bug-side, .rp--hud .sb-side { flex: none; font: 700 10.5px/1 var(--font, sans-serif); letter-spacing: .08em; padding: 4px 6px; border-radius: 4px; color: #0b0d10; }
.bug-side.ct, .rp--hud .sb.ct .sb-side { background: var(--rp-ct); } .bug-side.t, .rp--hud .sb.t .sb-side { background: var(--rp-t); }
.bug-score { display: grid; place-items: center; width: 64px; font: 700 30px/1 var(--font-d, sans-serif); font-variant-numeric: tabular-nums; }
.bug-score.ct { background: var(--rp-ct); color: #08111c; } .bug-score.t { background: var(--rp-t); color: #1a1003; }
.bug-mid { display: grid; place-items: center; align-content: center; gap: 4px; min-width: 160px; padding: 0 16px; background: #14181d; }
.bug-mid .rp-clock { font: 700 22px/1 var(--mono, monospace); }
.bug-sub { display: flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--rp-ink3); white-space: nowrap; }
.bug-sub .gl { display: inline-block; }
.bug-alive { display: flex; gap: 4px; flex: none; }
.bug-alive i { width: 6px; height: 14px; border-radius: 2px; background: currentColor; }
.bug-alive i.off { opacity: .18; }
.bug-team.ct .bug-alive { color: var(--rp-ct); } .bug-team.t .bug-alive { color: var(--rp-t); }

/* a team: its head, then a card per player filling the column beside the map */
.rp--hud .sb { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.rp--hud .sb-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--rp-line);
  border-radius: 10px; background: #12151a; font-size: 12px; }
.rp--hud .sb-team { display: grid; gap: 3px; }
.rp--hud .sb-tname { font: 600 15px/1.1 var(--font-d, sans-serif); color: var(--rp-ink); }
.rp--hud .sb-sub { font-size: 11.5px; color: var(--rp-ink3); }
.rp--hud .sb-money { display: grid; grid-auto-flow: column; gap: 16px; text-align: right; }
.rp--hud .sb-m { display: grid; gap: 3px; justify-items: end; }
.rp--hud .sb-m i { font: 600 10px/1 var(--font, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--rp-ink3); }
.rp--hud .sb-m b { font: 600 15px/1 var(--font-d, sans-serif); color: var(--rp-ink); }
.rp--hud .sb-m.res b { color: #8fd18a; }
.rp--hud .sb.t .sb-head { grid-template-columns: auto minmax(0, 1fr) auto; }

.rp--hud .sb-row { --c: var(--sb-c); flex: 1 1 0; min-height: 0; max-height: 150px; margin: 0; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  grid-template-columns: 62px minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto auto; align-content: center; column-gap: 10px; row-gap: 6px;
  grid-template-areas: "hp name k cash" "hp bar bar bar" "prot hand hand hand" "prot inv inv inv";
  background: linear-gradient(90deg, var(--sb-soft), rgba(18,21,26,.96) 46%), #12151a; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--rp-line); }
.rp--hud .sb.t .sb-row { grid-template-columns: auto auto minmax(0, 1fr) 62px;
  grid-template-areas: "cash k name hp" "bar bar bar hp" "hand hand hand prot" "inv inv inv prot";
  background: linear-gradient(270deg, var(--sb-soft), rgba(18,21,26,.96) 46%), #12151a; box-shadow: inset -3px 0 0 var(--c), 0 0 0 1px var(--rp-line); }
.rp--hud .sb-row:hover { filter: brightness(1.12); }
.rp--hud .sb-row.sel { box-shadow: inset 3px 0 0 var(--c), 0 0 0 1.5px var(--rp-ink); }
.rp--hud .sb.t .sb-row.sel { box-shadow: inset -3px 0 0 var(--c), 0 0 0 1.5px var(--rp-ink); }
.rp--hud .sb-fill { display: none; }
.rp--hud .sb-hp { align-self: start; justify-self: start; font-size: 34px; line-height: .9; }
.rp--hud .sb.t .sb-hp { justify-self: end; }
.rp--hud .sb-name { font: 600 16px/1.1 var(--font-d, sans-serif); }
.rp--hud .sb.t .sb-name { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.rp--hud .sb-k { font: 500 11.5px/1 var(--font, sans-serif); color: var(--rp-ink3); }
.rp--hud .sb-cash { font: 600 13px/1 var(--font, sans-serif); color: #8fd18a; }
.rp--hud .sb-bar { position: static; grid-area: bar; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.rp--hud .sb-bar b { border-radius: 4px; }
.rp--hud .sb.t .sb-bar b { transform-origin: 100% 0; }
.rp--hud .sb-hand, .rp--hud .sb-inv, .rp--hud .sb-prot, .rp--hud .sb-death { margin-top: 0; }
.rp--hud .sb-prot { align-self: end; justify-content: flex-start; flex-wrap: wrap; gap: 6px; color: var(--rp-ink2); }
.rp--hud .sb.t .sb-prot { justify-content: flex-end; }
.rp--hud .sb-hand { gap: 10px; color: var(--rp-ink); }
.rp--hud .iv-pic { color: var(--rp-ink); }
.rp--hud .sb-hand .iv-name { font-size: 13px; }
.rp--hud .sb-hand .iv-a { margin-left: auto; font: 700 18px/1 var(--mono, monospace); }
.rp--hud .sb-hand .iv-a s { font: 600 12px/1 var(--font, sans-serif); }
.rp--hud .sb.t .sb-hand { flex-direction: row-reverse; }
.rp--hud .sb.t .sb-hand .iv-a { margin-left: 0; margin-right: auto; }
.rp--hud .sb.t .gun, .rp--hud .sb.t .cs2.gun, .rp--hud .sb.t .cs2.pistol, .rp--hud .sb.t .cs2.knife, .rp--hud .sb.t .cs2.zeus { transform: scaleX(-1); }
.rp--hud .sb-inv { gap: 6px; padding: 0; flex-wrap: nowrap; overflow: hidden; color: var(--rp-ink2); }
.rp--hud .sb.t .sb-inv { flex-direction: row-reverse; }
.rp--hud .sb-inv .iv-i { height: 30px; padding: 0 6px; border-radius: 6px; background: rgba(0,0,0,.25); opacity: 1; }
.rp--hud .sb-inv .iv-i.gun, .rp--hud .sb-inv .iv-i.pistol, .rp--hud .sb-inv .iv-i.knife, .rp--hud .sb-inv .iv-i.zeus { padding: 0 2px; background: none; opacity: .8; }
.rp--hud .sb-inv .iv-i.c4 { background: rgba(255,93,93,.16); box-shadow: 0 0 0 1px rgba(255,93,93,.5); }
.rp--hud .sb-prot .iv-i.kit { height: 26px; padding: 0 4px; border-radius: 5px; background: rgba(143,209,138,.14); box-shadow: 0 0 0 1px rgba(143,209,138,.4); opacity: 1; }
/* the fallen fold to one line: their name, who got them with what, their money */
.rp--hud .sb-row.dead { flex: 0 0 auto; opacity: 1; padding: 9px 14px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto;
  grid-template-areas: "name death cash"; background: #0f1215; box-shadow: inset 3px 0 0 rgba(255,255,255,.08), 0 0 0 1px var(--rp-line); }
.rp--hud .sb.t .sb-row.dead { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cash death name"; background: #0f1215;
  box-shadow: inset -3px 0 0 rgba(255,255,255,.08), 0 0 0 1px var(--rp-line); }
.rp--hud .sb-row.dead .sb-hp, .rp--hud .sb-row.dead .sb-k, .rp--hud .sb-row.dead .sb-bar { display: none; }
.rp--hud .sb-row.dead .sb-nm { font-size: 13.5px; color: var(--rp-ink2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.rp--hud .sb-row.dead .sb-cash { color: var(--rp-ink3); font-weight: 500; }
.rp--hud .sb-row.dead .sb-name { max-width: 9.5em; }       /* the killer's name keeps room beside it */
.rp--hud .sb-death { font-size: 12px; }
.rp--hud .sb.t .sb-death { flex-direction: row-reverse; }
/* flashed: the whole card goes white; defusing gets its own tag */
.rp--hud .sb .sb-row.blind { background: #fbfaf7; color: #111; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px #fff, 0 0 26px rgba(255,251,224,.35); }
.rp--hud .sb.t .sb-row.blind { box-shadow: inset -3px 0 0 var(--c), 0 0 0 1px #fff, 0 0 26px rgba(255,251,224,.35); }
.rp--hud .sb-row.blind .iv-pic, .rp--hud .sb-row.blind .sb-hand, .rp--hud .sb-row.blind .sb-nm { color: #111; }
.rp--hud .sb-row.blind .sb-cash { color: #2e7d32; }
.rp--hud .sb-row.blind .sb-k, .rp--hud .sb-row.blind .sb-prot, .rp--hud .sb-row.blind .sb-inv, .rp--hud .sb-row.blind .iv-a s { color: #5a5f66; }
.rp--hud .sb-row.blind .sb-bar { background: rgba(0,0,0,.1); }
.rp--hud .sb-row.blind .sb-inv .iv-i { background: #e9e6df; }
.rp--hud .sb-row.blind .sb-inv .iv-i.gun, .rp--hud .sb-row.blind .sb-inv .iv-i.pistol, .rp--hud .sb-row.blind .sb-inv .iv-i.knife { background: none; }

/* the bomb on the playback bar: hatched from the plant to the explosion (green when defused) */
.rp-band { position: absolute; top: 16px; height: 5px; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,107,74,.75) 0 4px, rgba(255,107,74,.2) 4px 8px); }
.rp-band.defused { background: repeating-linear-gradient(135deg, rgba(159,217,168,.75) 0 4px, rgba(159,217,168,.2) 4px 8px); }

/* hud in Big view: the same layout over the whole window */
.rp.rp--hud.rp--theater { --hud-col: clamp(290px, 16.5vw, 420px); --ev-col: clamp(250px, 13.5vw, 360px);
  --rp-map: min(calc(100vh - 250px), calc(100vw - 2 * var(--hud-col) - var(--ev-col) - 88px - var(--rp-tools-w, 0px)));
  grid-template-columns: var(--hud-col) calc(var(--rp-map) + var(--rp-tools-w, 0px)) var(--hud-col) var(--ev-col); grid-template-rows: auto auto auto;
  align-content: start; grid-template-areas: "bug bug bug ev" "ct view t ev" "tr tr tr ev" "gif gif gif ev" "ed ed ed ev"; overflow: auto; }
.rp--hud.rp--theater > .rp-view { grid-area: view; } .rp--hud.rp--theater > .rp-transport { grid-area: tr; }
.rp--hud.rp--theater > .rp-banner { grid-area: bug; } .rp--hud.rp--theater > .rp-gif { grid-area: gif; } .rp--hud.rp--theater > .rp-edits { grid-area: ed; }
.rp--hud.rp--theater .rp-stage { aspect-ratio: 1; height: auto; width: var(--rp-map) !important; }
.rp.rp--hud.rp--theater .ev { contain: size; max-height: none; }

/* hud without room for four columns: the map first, then both teams side by side, then the events */
@container (max-width: 1499px) {
  .rp--hud { --rp-map: min(calc(100cqw - 70px), calc(100vh - 330px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "bug bug" "view view" "tr tr" "ct t" "ev ev" "gif gif" "ed ed"; }
  .rp--hud > .rp-view { justify-self: center; }
  .rp--hud .sb-row { flex: none; }
  .rp--hud .ev { contain: none; max-height: 420px; }
}
@container (max-width: 760px) {
  .rp--hud { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bug" "view" "tr" "ct" "t" "ev" "gif" "ed"; }
}
@media (max-width: 1499px) {
  .rp.rp--hud.rp--theater { --rp-map: min(calc(100vw - 70px), calc(100vh - 300px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "bug bug" "view view" "tr tr" "ct t" "ev ev" "gif gif" "ed ed"; }
  .rp.rp--hud.rp--theater .ev { contain: none; max-height: 420px; }
}

/* ---------- the Q / 3D button: at the foot of the tool column, grey until a player or a grenade is selected ---------- */
.rp-3d { position: relative; width: 40px; height: 52px; margin-top: 9px; border-radius: 9px; border: 1px solid #2c323a; color: var(--rp-ink3);
  font: 800 15px/1 var(--font, sans-serif); letter-spacing: .02em; overflow: hidden; transition: color .25s, border-color .25s, opacity .25s; }
.rp-3d > span { position: absolute; inset: 0; display: grid; place-items: center; animation: rp3d-flip 5s ease-in-out infinite; }
.rp-3d > .rp-3d-b { animation-delay: -2.5s; }
.rp-3d[data-state="off"] { opacity: .38; cursor: default; }
.rp-3d[data-state="off"]:hover { background: none; color: var(--rp-ink3); }
.rp-3d[data-state="ready"] { color: var(--rp-ink); animation: rp3d-pulse 3s ease-in-out infinite; }
.rp-3d[data-state="loading"] { color: var(--rp-ink2); border-color: var(--rp-ink3); }
.rp-3d[data-state="loading"]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 5px; height: 2px; border-radius: 1px; overflow: hidden;
  background: linear-gradient(90deg, transparent 0 30%, var(--rp-ink) 50%, transparent 70% 100%) 0 0 / 300% 100%; animation: rp3d-load 1.3s linear infinite; }
.rp-3d[data-state="open"] { color: #111; background: var(--rp-ink); border-color: var(--rp-ink); }
@keyframes rp3d-flip { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rp3d-pulse {
  0%, 100% { border-color: rgba(236,233,227,.3); box-shadow: 0 0 0 0 rgba(236,233,227,0), inset 0 0 0 0 rgba(236,233,227,0); }
  50% { border-color: rgba(236,233,227,.95); box-shadow: 0 0 18px 1px rgba(236,233,227,.32), inset 0 0 10px 0 rgba(236,233,227,.12); } }
@keyframes rp3d-load { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .rp-3d, .rp-3d > span { animation: none !important; } .rp-3d > .rp-3d-b { display: none; } }