/* replay-page.css — Replays (index.html) on the v2 house style. The table itself (plates, hands, board, log, the reading
   overlay, the ended box) comes from tv-page.css, so a replay sits on the same table as Duel TV; this file adds the theater's
   transport bar, an open hand, set cards, attack marks, the graveyard sheet and the list of recorded duels. */

/* ── the table, replay additions ── */
.rp .z.fd img { filter: brightness(.5) saturate(.7); }
.rp .z .set { position: absolute; left: 50%; top: 3px; translate: -50% 0; padding: 0 5px; border-radius: 999px; font-size: 9px; font-weight: 800; background: rgba(0,0,0,.8); color: var(--ink-2); pointer-events: none; }
.rp .z .ct { position: absolute; right: 2px; top: 2px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; font-size: 10px; font-weight: 800; color: #160f03; background: var(--hi); pointer-events: none; }
.rp .cw.atk .z { box-shadow: 0 0 0 2px #ffb04a, 0 0 18px rgba(255,176,74,.55); }
.rp .cw.tgt .z { box-shadow: 0 0 0 2px #ff5a4a, 0 0 18px rgba(255,90,74,.55); }
.rp .z.cap.pile { width: 100%; cursor: pointer; color: inherit; font: inherit; transition: background .2s; }
.rp .z.cap.pile:hover { background: rgba(255,255,255,.08); }
.rp .board { width: min(640px, 100%, max(240px, calc((100dvh - 520px) * 1.15))); }
.rp .board .mid span.chain { color: #ffe3a3; background: rgba(217,164,65,.22); }
.rp .hand.open { gap: 3px; }
.rp .hand.open button { position: relative; height: 100%; aspect-ratio: 813 / 1185; flex: none; border-radius: 3px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,.4); cursor: zoom-in; }
.rp .hand.open button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp .log .turn { color: var(--hi); font-weight: 700; }
.rp .log .dmg { color: #ffb0a6; }
.rp .log .win { color: var(--hi); font-weight: 800; }

/* ── the transport: its own bar under the table (desktop, tablet, upright phone), top of the side column sideways ── */
.rp .watch { grid-template-rows: auto 1fr; }
.rp .watch > .screen { grid-row: 1; grid-column: 1; }
.rp .watch > .transport { grid-row: 2; grid-column: 1; }
.rp .watch > .side { grid-row: 1 / span 2; grid-column: 2; }
.transport { display: flex; align-items: center; gap: 8px; min-width: 0; align-self: start; padding: 8px 14px; border-radius: 20px; background: rgba(10,9,8,.8); border: 1px solid var(--hair); }
.transport button { flex: none; display: grid; place-items: center; border-radius: 50%; }
.transport .tb { width: 38px; height: 38px; color: var(--ink); background: var(--glass); transition: background .2s; }
.transport .tb:hover { background: var(--glass-2); }
.transport svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.transport .tplay { width: 46px; height: 46px; padding: 0; }
.transport .tplay svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.transport input[type="range"] { flex: 1 1 auto; min-width: 60px; margin: 0 4px; accent-color: var(--hi); }
.transport .tpos { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.speed { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.speed .v2-seg { width: min(190px, 70%); }
.speed .v2-seg button { padding: 7px 8px 6px; }

/* ── the graveyard sheet ── */
.rp-pile .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.rp-pile .pgrid button { display: grid; gap: 5px; align-content: start; min-width: 0; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--ink-2); cursor: zoom-in; }
.rp-pile .pgrid img { width: 100%; aspect-ratio: 813 / 1185; object-fit: cover; border-radius: 5px; box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.rp-pile .pgrid span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* reading a card opened from the sheet sits above the sheet */
.zoom { z-index: 72; }

/* ── the list ── */
.rp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-width: 0; padding: 12px 14px; text-align: left; font: inherit; color: inherit; }
.rp-row.on { box-shadow: inset 0 0 0 1.5px var(--hi); }
/* a game of a match still being played: listed, not watchable until the match ends */
.rp-row.locked { cursor: default; opacity: .62; }
.rp-row.locked .go { color: var(--muted); }
.rp-row .res { justify-self: start; min-width: 44px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; color: var(--ink-2); background: rgba(255,255,255,.08); }
.rp-row .res.w { color: #160f03; background: var(--hi); }
.rp-row .res.l { color: #ffb0a6; background: rgba(255,90,74,.18); }
.rp-row .res.p { display: grid; place-items: center; width: 34px; min-width: 0; height: 34px; padding: 0; border-radius: 50%; }
.rp-row .res.p svg { width: 14px; height: 14px; fill: var(--ink-2); }
.rp-row .who { display: grid; gap: 3px; min-width: 0; }
.rp-row .who b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-row .who b i { font-style: normal; font-weight: 600; color: var(--muted); }
.rp-row .who small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-row .go { font-size: 13px; font-weight: 700; color: var(--hi); white-space: nowrap; }

@media (max-width: 960px) {
  .rp .watch > .screen, .rp .watch > .transport, .rp .watch > .side { grid-row: auto; grid-column: auto; }
  .rp-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* watching on a phone: the page title gives its room to the table so the transport stays on the first screen */
  .rp.watching > .head:first-child { display: none; }
  .rp .watch { gap: 10px; }
  .rp .screen { gap: 8px; }
  .rp .plate { padding: 6px 10px; }
  .rp .plate .lp b { font-size: 18px; }
  .transport { gap: 6px; padding: 6px 10px; }
  .transport .tb { width: 34px; height: 34px; }
  .transport .tplay { width: 42px; height: 42px; }
  .transport .tpos { display: none; }
  .rp-row { grid-template-columns: 50px minmax(0, 1fr); }
  .rp-row .go { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* sideways: the table keeps the left column, the transport heads the side column, clear of the chat bar docked bottom-left */
  .rp .board { width: calc((100dvh - 110px) * 1.15); }
  .rp .watch > .screen { grid-row: 1 / span 2; grid-column: 1; }
  .rp .watch > .transport { grid-row: 1; grid-column: 2; flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  .rp .watch > .side { grid-row: 2; grid-column: 2; }
  .transport .tb { width: 32px; height: 32px; }
  .transport .tplay { width: 38px; height: 38px; }
  .transport input[type="range"] { flex-basis: 100%; order: 5; margin: 0; }
  .transport .tpos { display: none; }
  .rp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}