/* ============================================================
   Повтор своих раздач (docs/REPLAY-DESIGN.md): док наблюдателя на сукне и
   экран «Мои раздачи».

   Все селекторы начинаются с `.rp` — на живой стол и лобби файл не влияет.
   Цвета и радиусы берутся из общих токенов (#shared/styles/tokens.css): своих
   значений тут нет, иначе повтор со временем поехал бы относительно остального
   интерфейса.
   ============================================================ */

/* ---- док наблюдателя (на месте панели действий) --------------------------- */

.rp-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.rp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.rp-ttl {
  font: 600 13px/1.2 var(--ui, system-ui), sans-serif;
  letter-spacing: 0.02em;
  color: var(--txt, #eaeaf2);
}

.rp-when {
  font: 500 12px/1.2 var(--num, system-ui), sans-serif;
  color: var(--dim, #8b8ba0);
}

/* Шкала кадров. Дискретная намеренно: непрерывная полоса обещала бы перемотку
   в любую точку, а кадр — это решение или улица, промежутка между ними нет. */
.rp-bar {
  display: flex;
  gap: 3px;
  align-items: stretch;
  height: 6px;
}

.rp-tick {
  flex: 1 1 auto;
  border-radius: 2px;
  background: var(--line, #2a2a38);
  transition: background 0.12s linear;
}

.rp-tick.on {
  background: var(--teal, #2de2c5);
}

/* Итог раздачи — последний кадр, и он заметно шире: до него доигрывают. */
.rp-tick.end {
  flex: 0 0 14px;
  background: var(--line, #2a2a38);
}

.rp-tick.end.on {
  background: var(--gold, #ffb43c);
}

.rp-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

.rp-b {
  flex: 0 0 auto;
  min-width: 40px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line, #2a2a38);
  border-radius: 10px;
  background: var(--panel, #16161f);
  color: var(--txt, #eaeaf2);
  font: 600 13px/1 var(--ui, system-ui), sans-serif;
  cursor: pointer;
}

.rp-b:disabled {
  opacity: 0.35;
  cursor: default;
}

.rp-b:not(:disabled):active {
  transform: translateY(1px);
}

.rp-play {
  flex: 1 1 auto;
  background: var(--teal, #2de2c5);
  border-color: transparent;
  color: #06231e;
}

.rp-speed {
  font-family: var(--num, system-ui), sans-serif;
  color: var(--dim, #8b8ba0);
}

.rp-exit {
  margin-left: auto;
  color: var(--dim, #8b8ba0);
}

.rp-pos {
  font: 500 11px/1 var(--num, system-ui), sans-serif;
  color: var(--dim, #8b8ba0);
  text-align: center;
}

/* ---- экран «Мои раздачи» -------------------------------------------------- */

.rp-screen {
  padding: calc(var(--pgtop, 12px) + 4px) 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rp-note {
  font: 500 12px/1.2 var(--ui, system-ui), sans-serif;
  color: var(--dim, #8b8ba0);
  text-align: right;
}

.rp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #2a2a38);
  border-radius: 12px;
  background: var(--panel, #16161f);
  cursor: pointer;
}

.rp-row:active {
  transform: translateY(1px);
}

.rp-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--line, #2a2a38);
  color: var(--dim, #8b8ba0);
}

/* Карманные карты строки. Размер задаётся здесь, а не в разметке: карта — общий
   элемент (`.pc`, styles/base.css), и своей геометрии у списка нет. Тот же
   приём, что у карт на месте соперника («.seat .cards .pc», styles/base.css).
   Карта в списке обязана выглядеть КАРТОЙ — той же, что за столом: ранг с мелкой
   мастью в левом верхнем углу и большая масть в правом нижнем. Без неё низ
   карты — пустое белое поле, и это перестаёт читаться как карта.

   Пропорции взяты от базовых токенов (42×60, ранг 16, масть 13, большая 24),
   а не подобраны на глаз: 26/42 ≈ 0.62, поэтому 10 / 8 / 15. Так карта в списке
   и карта на сукне остаются одним предметом в разных размерах. */
.rp-cards {
  display: flex;
  gap: 3px;
  align-items: center;
}

.rp-cards .pc {
  width: 26px;
  height: 36px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgb(0 0 0 / 35%);
}

.rp-cards .pc .c {
  top: 2px;
  left: 3px;
}

.rp-cards .pc .c .rk {
  font-size: 10px;
}

.rp-cards .pc .c .su {
  font-size: 8px;
}

.rp-cards .pc .big {
  bottom: 1px;
  right: 2px;
  font-size: 15px;
}

.rp-row.win .rp-ic {
  color: var(--teal, #2de2c5);
}

.rp-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rp-tx b {
  font: 700 15px/1 var(--num, system-ui), sans-serif;
  color: var(--txt, #eaeaf2);
}

.rp-row.win .rp-tx b {
  color: var(--teal, #2de2c5);
}

.rp-row.lose .rp-tx b {
  color: var(--dim, #8b8ba0);
}

.rp-tx small {
  font: 500 12px/1.2 var(--ui, system-ui), sans-serif;
  color: var(--dim, #8b8ba0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-empty {
  padding: 22px 14px;
  border: 1px dashed var(--line, #2a2a38);
  border-radius: 12px;
  font: 500 13px/1.45 var(--ui, system-ui), sans-serif;
  color: var(--dim, #8b8ba0);
  text-align: center;
}

/* Строка «Последних рук» в рельсе стола ведёт на повтор — показываем это
   курсором. Сама разметка живёт в table/rail.js. */
#handLog .lh-row[data-hand] {
  cursor: pointer;
}

/* ---- десктоп -------------------------------------------------------------- */

@media (min-width: 1024px) {
  .rp-screen {
    max-width: 720px;
    margin: 0 auto;
  }
}