/* Neon Arena — replay view: fighter header without clocks, transport bar,
   autoplay speed segment, progress slider, result badges. Loaded after
   components.css and game.css; reuses .fighter/.board-frame/.moves-list. */

.view-replay .fighter-sub { min-height: 17px; }

/* result badge where the clock sits in the live game */
.rp-result-badge {
  /* "1-0" is breakable at the hyphen: squeezed by a long name on a narrow
     screen it wrapped to two lines and pushed the board down 12px mid-replay. */
  white-space: nowrap;
  /* This card sits above the board, and the badge enters it when playback
     reaches the result — sized by its own type it was the tallest thing in the
     card at desktop sizes, so "1-0" landing moved the board 2.25px at 900 and
     0.80px at 1000-1440. Same contract as .ai-think in ai.css: the box is
     fixed (the avatar's 34px) and laid out for the whole replay — the `:empty`
     rule below only turns the paint off — so the result changes pixels, never
     geometry. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rp-result-badge.is-win {
  color: var(--gold);
  border-color: rgba(241, 193, 82, 0.5);
  box-shadow: var(--shadow-glow-gold);
}

/* transport controls under the board.
   Straight off the mock's player (console.html §ПЛЕЕР РЕПЛЕЯ): the row is
   `gap:7px`, a step key is `min-width:44px; min-height:40px; r10; 1px
   rgba(167,139,250,.3) over rgba(20,13,38,.6)` in JetBrains Mono 12/800, a
   dead key drops those to .12/.3/.22, and play is the gold pill. */
.rp-transport {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.rp-transport .hist-btn {
  min-width: 44px;
  min-height: 40px;
  height: 40px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(20, 13, 38, 0.6);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: rgba(236, 231, 250, 0.8);
}
.rp-transport .hist-btn:disabled {
  border-color: rgba(167, 139, 250, 0.12);
  background: rgba(20, 13, 38, 0.3);
  color: rgba(236, 231, 250, 0.22);
}
/* `.rp-transport .hist-btn` above is 0,2,0 — the play pill has to match it or
   the gold never lands and ▶ is indistinguishable from the step-forward key. */
.rp-transport .rp-play {
  min-width: 52px;
  padding: 9px 14px;
  border: 1px solid transparent;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}
.rp-transport .rp-play.is-live {
  background: rgba(241, 193, 82, 0.2);
  border-color: rgba(241, 193, 82, 0.5);
  color: var(--gold);
  box-shadow: none;
}
/* «ход 34 из 41», in the row rather than on a line of its own. */
.rp-pos {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(236, 231, 250, 0.55);
  white-space: nowrap;
}
.rp-pos:empty { display: none; }
.rp-speed { margin-left: 2px; }
.rp-speed button {
  min-width: 44px;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}
/* The keyboard is a real control here and it was documented nowhere. */
.rp-keys {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* progress slider across the board column */
/* The mock draws this as a 4px rail with a gold fill and no handle — but the
   mock's is a read-out, and ours is draggable, so it keeps a thumb and the
   44px grab area. `--rp-fill` is written by applyView(); it was declared here
   and never set, which is why the track had no sense of position at all. */
.rp-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* The 44px touch floor in base.css targets button/.btn/[role=button] and
     never reaches an <input type=range>, so the scrub bar stayed 26px at every
     width. The visible track is drawn by the pseudo-elements and keeps its own
     height; this is only the grab area. */
  height: 44px;
  background: transparent;
  cursor: pointer;
  --rp-fill: 0%;
}
.rp-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--gold) 0 var(--rp-fill),
    rgba(167, 139, 250, 0.16) var(--rp-fill) 100%
  );
}
.rp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: var(--shadow-glow-gold);
  border: none;
  transition: transform var(--dur-med) var(--spring);
}
@media (hover: hover) {
  .rp-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
}
.rp-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  border: 0;
  background: rgba(167, 139, 250, 0.16);
}
.rp-slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--gold);
}
.rp-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: var(--shadow-glow-gold);
  border: none;
}
.rp-slider:focus-visible { outline: 2px solid rgba(241, 193, 82, 0.55); outline-offset: 2px; border-radius: var(--r-pill); }

/* side actions (PGN / share) */
/* Renamed with its markup, not after it.
   The replay sidebar and the new end-of-match result panel both wanted
   `rp-actions`, in two stylesheets that both load. The view was renamed to
   `rp-side-actions` and this rule was left behind, so the sidebar rendered
   unstyled while `game.css` kept styling the other row under the old name. A
   rename that moves one of the two halves is worse than the collision it
   avoids — at least a collision is visible. */
.rp-side-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Why «📈 Анализ» is dead, as text. The reason used to live only in the
   button's `title=`, which on a touch device is shown to nobody: a Chess960 or
   200+ ply replay presented a greyed button and no explanation. Its own line
   rather than a true sibling — a 40-character Russian sentence does not fit
   beside a button at 390px. */
.rp-an-reason {
  flex: 1 0 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* One line, not two. At a 468px board column the wrapped row cost the board
   45px — measured 298px of board against 343 with the row on one line. The
   readout truncates before the keys do. */
@container scene (min-width: 620px) {
  .rp-transport { flex-wrap: nowrap; }
  .rp-transport .hist-btn { min-width: 42px; padding: 9px 8px; }
  .rp-speed button { min-width: 40px; padding: 9px 8px; }
  .rp-pos { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* A mouse does not need the 44px grab area, and the replay column is the
   tightest of the three. */
@media (hover: hover) and (pointer: fine) {
  .rp-slider { height: 30px; }
}

/* === responsive: one column when the scene is under 620px (mirrors game.css) === */
@container scene (max-width: 619px) {
  .view-replay { grid-template-columns: 1fr; height: auto; }
  .view-replay .g-board-col { height: auto; }
  .view-replay .g-side-col { order: 2; height: auto; overflow: visible; }
  /* A replay has no clock to keep on screen and its own column is taller than
     a live match's, so under 620 it simply scrolls. The board is width-bound
     here (game.css's block lifts the `--board-cap` clamp for every
     `.board-stage` in a narrow scene), which on a toolbar-shortened viewport
     can push the transport's natural seat below the fold — so the row is
     sticky, the same formula as the match's reaction strip: pinned to the
     scene's bottom edge while the column overflows, at rest once it fits.
     The slider and the moves stay one flick away; the keys you scrub with do
     not move. */
  .view-replay .g-board-col > .board-frame { flex: 0 0 auto; }
  .view-replay .rp-transport {
    position: sticky;
    bottom: 0;
    z-index: 12;
    padding: 6px 8px;
    margin: 0 -4px;
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--hairline);
    border-bottom: 0;
    background: var(--panel-strong);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}
/* The keyboard legend is prose about keys a touch player does not have. */
@media (pointer: coarse) {
  .rp-keys { display: none; }
}
@media (max-width: 520px) {
  /* base.css raises every button to a 44px MIN-HEIGHT below 904px but sets no
     min-width, so this block used to walk the width the wrong way: measured at
     390 the five transport keys came out 38x44 and the three speed keys 30x44,
     under the 44px floor on the axis nobody was watching. On a phone these are
     the controls you hit repeatedly while scrubbing. */
  .rp-transport { gap: 6px; }
  .rp-transport .hist-btn { min-width: 44px; height: 44px; min-height: 44px; font-size: 14px; padding: 9px 8px; }
  .rp-play { min-width: 52px; }
  .rp-result-badge { min-width: 34px; height: 30px; padding: 0 9px; font-size: 14px; }
  .rp-speed button { min-width: 44px; min-height: 44px; padding: 6px 9px; font-size: 12px; }
}

/* THE BLOCK ABOVE FIXES THE WIDTH EVERYWHERE AND THE HEIGHT ONLY UNDER 520px,
   and the height is the axis base.css already legislated. `.rp-transport
   .hist-btn` sets `min-height: 40px` at (0,2,0) and outranks base.css's
   `button:not([data-tight]) { min-height: 44px }` at (0,1,1); `.rp-speed
   button` ties it at (0,1,1) and wins on source order, because views/ load
   after base.css. Either way the 40 survived everywhere the 520px rescue does
   not reach. Measured 44x40 on /replay at
   860x844 (an iPad in portrait is 810 or 820) and again at 844x390, the phone
   held sideways that base.css added its `(max-height: 500px)` clause FOR.
   Five transport keys and three speed keys, the controls you press repeatedly
   while scrubbing, on both.
   Same query as base.css verbatim so the two can never drift, and only the
   height is restated — the 520px block keeps owning gap, padding and
   font-size, which are layout at a narrow width and not a touch target. */
@media (max-width: 904px), (max-height: 500px) {
  .rp-transport .hist-btn:not([data-tight]),
  .rp-speed button:not([data-tight]) { height: auto; min-height: 44px; }
}

/* The loser's badge is set to "" — and before that, both badges are "" for the
   whole playback. `display: none` was the first cure (an empty bordered
   capsule, measured 34x12, parked beside the name) but it meant the winner's
   badge ENTERED layout at the result ply and grew the card. Paint off, seat
   kept: the row reserves the result's box from the first frame, the same way
   the live game's clock holds this slot for the whole match. */
.rp-result-badge:empty { visibility: hidden; }

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .rp-slider::-webkit-slider-thumb { transition: none; }
}

/* === Arcade replay player («ПЛЕЕР РЕПЛЕЯ АРКАДЫ», manuscript §2.21) ===
   The chess player above keeps its .rp-* transport classes — the arcade view
   builds the SAME transport through ui/replay-transport.js, so those rules
   are shared verbatim. Everything arcade-specific is rpa-*. Narrow-first;
   the mock's wide grid is `minmax(0,1.3fr) minmax(0,1fr)` with a 13px gap. */

.rpa-view {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 12px 15px 14px;
  min-width: 0;
}
.rpa-main,
.rpa-side,
.rpa-stage {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.rpa-side.hidden { display: none; }
@container scene (min-width: 900px) {
  .rpa-view {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* header card */
.rpa-head {
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(241, 193, 82, 0.26);
  background: linear-gradient(115deg, rgba(50, 33, 12, 0.5), rgba(16, 11, 30, 0.86));
}
.rpa-head-emoji { font-size: 19px; }
.rpa-head-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rpa-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpa-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.5);
}

/* loading + no-replay states — the mock's two honest cards */
.rpa-state {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 18px;
  border-radius: 16px;
  border: 1px dashed rgba(167, 139, 250, 0.3);
  background: rgba(20, 13, 38, 0.42);
}
.rpa-state-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: #c4b5fd;
}
.rpa-state-none {
  border-color: rgba(255, 93, 108, 0.32);
  background: rgba(46, 12, 20, 0.34);
}
.rpa-state-none .rpa-state-title { color: #ff8a94; }
.rpa-state-sub {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(236, 231, 250, 0.62);
  text-wrap: pretty;
}
.rpa-state-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(167, 139, 250, 0.16);
  overflow: hidden;
}
.rpa-state-fill {
  width: 64%;
  height: 100%;
  background: rgba(196, 181, 253, 0.8);
  animation: rpa-build 1.2s ease-in-out infinite alternate;
}
@keyframes rpa-build {
  from { transform: translateX(-24%); }
  to { transform: translateX(56%); }
}
@media (prefers-reduced-motion: reduce) {
  .rpa-state-fill { animation: none; }
}

/* seat switch — hidden info is a choice of seat, not a flag */
.rpa-seats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.rpa-seat {
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: rgba(20, 13, 38, 0.5);
  font-size: 10px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.6);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.rpa-seat.is-on {
  border-color: rgba(241, 193, 82, 0.5);
  background: rgba(241, 193, 82, 0.12);
  color: var(--gold);
}

/* boards area */
.rpa-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px;
}
.rpa-board {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpa-board-one { grid-column: 1 / -1; }
.rpa-board-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.rpa-board-name {
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpa-board-tag { font-size: 9px; color: rgba(236, 231, 250, 0.4); white-space: nowrap; }
.rpa-board-tag.is-open { color: rgba(241, 193, 82, 0.7); }

/* battleship: 10x10 twin grids, mock geometry */
.rpa-bs-frame {
  padding: 5px;
  border-radius: 11px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: rgba(12, 8, 24, 0.7);
}
.rpa-bs-grid {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 2px;
}
.rpa-bs-cell {
  border-radius: 2px;
  background: rgba(167, 139, 250, 0.07);
}
.rpa-bs-cell.is-ship { background: rgba(167, 139, 250, 0.42); }
.rpa-bs-cell.is-miss { background: rgba(236, 231, 250, 0.14); }
.rpa-bs-cell.is-hit { background: rgba(241, 193, 82, 0.75); }
.rpa-bs-cell.is-sunk { background: rgba(255, 93, 108, 0.8); }
.rpa-bs-cell.is-last { outline: 2px solid var(--gold); outline-offset: -1px; }

/* checkers: the game view's piece discs on a compact read-only board */
.rpa-ck-board {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.2);
}
.rpa-ck-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/* nardy: honest 24-point strip (the full board renderer is a live-game
   screen; this is the replay's minimal truthful projection) */
.rpa-nd-meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(236, 231, 250, 0.6);
}
.rpa-nd-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 11px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: rgba(12, 8, 24, 0.7);
}
.rpa-nd-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.rpa-nd-pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0 2px;
  border-radius: 5px;
  background: rgba(167, 139, 250, 0.08);
  min-width: 0;
}
.rpa-nd-pt.is-a { background: rgba(241, 193, 82, 0.22); }
.rpa-nd-pt.is-b { background: rgba(167, 139, 250, 0.3); }
.rpa-nd-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  min-height: 14px;
}
.rpa-nd-label { font-family: var(--font-mono); font-size: 8px; color: rgba(236, 231, 250, 0.35); }

/* durak: hands + table pairs as compact card chips */
.rpa-dk-hand { display: flex; flex-direction: column; gap: 5px; }
.rpa-dk-table {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: rgba(12, 8, 24, 0.7);
}
.rpa-dk-meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(236, 231, 250, 0.55);
}
.rpa-dk-pairs { display: flex; flex-wrap: wrap; gap: 7px; min-height: 34px; }
.rpa-dk-pair { position: relative; display: inline-flex; }

/* N-seat table durak: one row per seat in rotation order (the 1v1 two-hand
   layout above is untouched). The acting seat glows, finished seats dim. */
.rpa-dk-multi { gap: 8px; }
.rpa-dk-seat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.14);
}
.rpa-dk-seat.is-toact { border-color: rgba(241, 193, 82, 0.5); box-shadow: 0 0 10px rgba(241, 193, 82, 0.14); }
.rpa-dk-seat.is-out { opacity: 0.55; }
.rpa-dk-seat-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rpa-dk-mark { font-size: 12px; line-height: 1; }
.rpa-dk-badge {
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(236, 231, 250, 0.25);
  font-size: 9px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.6);
}
.rpa-dk-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(236, 231, 250, 0.55);
}
.rpa-cards { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; }
.rpa-card {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(236, 231, 250, 0.25);
  background: rgba(236, 231, 250, 0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.85);
  white-space: nowrap;
}
.rpa-card.is-red { color: #ff8a94; }
.rpa-card.is-back { color: rgba(167, 139, 250, 0.6); }
.rpa-card.is-cover {
  margin-left: -10px;
  margin-top: 8px;
  background: rgba(20, 13, 38, 0.92);
}

/* arcomage: two stat panels — tower/wall first, producers, stocks */
.rpa-tc-side {
  gap: 7px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: rgba(12, 8, 24, 0.7);
}
.rpa-tc-row { display: flex; gap: 12px; flex-wrap: wrap; }
.rpa-tc-row.is-main { font-size: 14px; }
.rpa-tc-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(236, 231, 250, 0.75);
}
.rpa-tc-row.is-main .rpa-tc-stat { font-size: 14px; font-weight: 800; color: rgba(236, 231, 250, 0.95); }
.rpa-tc-val { font-variant-numeric: tabular-nums; }

/* right column: current frame, think-time tape, move log, honesty notes */
.rpa-frame {
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(241, 193, 82, 0.3);
  background: rgba(50, 33, 12, 0.28);
}
.rpa-frame-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
}
.rpa-frame-sub {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(236, 231, 250, 0.7);
  text-wrap: pretty;
}
.rpa-frame-sub:empty,
.rpa-frame-clocks:empty { display: none; }
.rpa-frame-clocks {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(236, 231, 250, 0.44);
}
.rpa-section {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 193, 82, 0.72);
}
.rpa-tape {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(20, 13, 38, 0.46);
  overflow-x: auto;
}
.rpa-tape-bar {
  flex: 1 1 0;
  min-width: 6px;
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
  border: 0;
}
.rpa-tape-fill {
  width: 100%;
  min-height: 5px;
  border-radius: 3px 3px 0 0;
  background: rgba(241, 193, 82, 0.32);
  transition: background var(--dur-fast);
}
.rpa-tape-bar.is-b .rpa-tape-fill { background: rgba(167, 139, 250, 0.32); }
.rpa-tape-bar.is-slow .rpa-tape-fill { background: rgba(255, 93, 108, 0.6); }
.rpa-tape-bar.is-on .rpa-tape-fill { background: var(--gold); }
.rpa-moves {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  background: rgba(20, 13, 38, 0.4);
  max-height: 320px;
  overflow-y: auto;
}
.rpa-mv {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
@media (hover: hover) {
  .rpa-mv:hover { background: rgba(167, 139, 250, 0.08); }
}
.rpa-mv.is-on {
  border-color: rgba(241, 193, 82, 0.5);
  background: rgba(241, 193, 82, 0.1);
}
.rpa-mv-num { font-family: var(--font-mono); font-size: 9px; color: rgba(236, 231, 250, 0.3); }
.rpa-mv-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: rgba(236, 231, 250, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpa-mv.is-on .rpa-mv-label { color: var(--gold); }
.rpa-mv-who {
  font-size: 9px;
  color: rgba(236, 231, 250, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9ch;
}
.rpa-mv-res { font-size: 9px; font-weight: 700; white-space: nowrap; color: rgba(236, 231, 250, 0.4); }
.rpa-mv-res.is-hit { color: rgba(241, 193, 82, 0.95); }
.rpa-mv-res.is-sunk { color: rgba(255, 93, 108, 0.95); }
.rpa-mv-sec { font-family: var(--font-mono); font-size: 9px; white-space: nowrap; color: rgba(236, 231, 250, 0.35); }
.rpa-mv-sec.is-slow { font-weight: 800; color: #ff8a94; }
.rpa-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px dashed rgba(167, 139, 250, 0.26);
  background: rgba(20, 13, 38, 0.4);
}
.rpa-note-icon { font-size: 12px; }
.rpa-note-sub {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(236, 231, 250, 0.5);
  text-wrap: pretty;
}

/* the loading card keeps its violet dash; only the none-card overrides it,
   and the nardy strip's bottom row runs 12→1 with the label on top. */
.rpa-state-loading { border-style: dashed; }
.rpa-nd-row.is-bottom .rpa-nd-pt { flex-direction: column-reverse; padding: 2px 0 4px; }