/* ============================================================
   Azuki TCG — replay.css (replay-frontend agent)
   Replay viewer chrome (#/replay/:id, #/replaydev) + the lobby
   Replays panel. Extends the main.css palette/primitives; the
   board itself is styled by board.css.
   ============================================================ */

/* ---------- view shell (mirrors the game view height chain) ---------- */
body[data-view="replay"] #main{max-width:none; padding:10px 14px}
body[data-view="replay"] #view-replay{
  display:flex; flex-direction:column; height:calc(100vh - 76px);
}
.rp-root{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:8px}

/* ---------- topbar ---------- */
.rp-topbar{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 10px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
.rp-tb-left,.rp-tb-right{display:flex; align-items:center; gap:10px; min-width:0}
.rp-tag{
  font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--bg);
  background:linear-gradient(180deg,#F3D68C,var(--gold));
  border-radius:4px; padding:2.5px 7px; flex:none;
}
.rp-title{font-weight:800; white-space:nowrap}
.rp-result{
  font-size:12px; font-weight:700; color:var(--gold); white-space:nowrap;
  padding:2.5px 9px; border-radius:999px;
  background:rgba(232,195,106,.1); border:1px solid rgba(232,195,106,.4);
}
.rp-tb-meta{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* perspective segmented control */
.rp-persp{
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
}
.rp-persp-btn{
  appearance:none; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700;
  color:var(--cream-dim); background:transparent; border:none; border-radius:7px;
  padding:4px 11px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color var(--speed), background var(--speed);
}
.rp-persp-btn:hover{color:var(--cream)}
.rp-persp-btn.on{color:var(--cream); background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line)}
.rp-persp-btn:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

/* ---------- main: stage + synced log ---------- */
.rp-main{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:8px;
}
.rp-stage{min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px}
.rp-board{flex:1 1 auto; min-height:0; display:flex}
.rp-board > .bd-root{flex:1 1 auto; min-height:0}
.rp-stage.rp-settling .rp-board{opacity:.88; transition:opacity 120ms ease}

/* the board is display-only in a replay: hide its game-over overlay and
   deaden its prompt buttons (they'd send into a no-op) */
#view-replay .bd-modal:has(.bd-over-panel){display:none}
#view-replay .bd-result-pill{display:none}
#view-replay .bd-prompt .bd-btnrow .bd-btn{pointer-events:none; opacity:.45}

/* director tray: opponent's revealed hand above the board */
.rp-tray{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:6px 12px; min-height:74px;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line); border-radius:10px;
}
.rp-tray-label{
  flex:none; font-size:10px; font-weight:800; letter-spacing:.16em; color:var(--cream-dim);
  max-width:130px;
}
.rp-tray-cards{display:flex; gap:7px; overflow:visible}
.rp-tray-card{width:44px; flex:none; cursor:zoom-in}
.rp-tray-card:hover{
  transform:scale(3.4) translateY(-34%); z-index:60;
  box-shadow:0 0 0 1px var(--gold), 0 18px 44px rgba(0,0,0,.7);
}
.rp-tray-card .cost-badge{transform:scale(.8); transform-origin:top left}

/* ---------- synced log panel ---------- */
.rp-side{min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.rp-log-head{
  flex:none; display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:9px 12px; border-bottom:1px solid var(--line);
  font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--cream-dim);
}
.rp-log-hint{font-size:10px; letter-spacing:.02em; font-weight:500; text-transform:none}
.rp-log-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px}
.rp-log-empty{padding:8px}
.rp-log-group{
  cursor:pointer; padding:4px 8px; border-radius:7px;
  border-left:2px solid transparent; margin-bottom:1px;
  transition:background var(--speed), opacity var(--speed), border-color var(--speed);
}
.rp-log-group:hover{background:rgba(255,245,221,.05)}
.rp-log-group:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.rp-log-group.rp-cur{background:rgba(232,195,106,.09); border-left-color:var(--gold)}
.rp-log-group.rp-future{opacity:.32}
.rp-log-line{font-size:12px; line-height:1.5; color:var(--cream-dim)}
.rp-log-group.rp-cur .rp-log-line{color:var(--cream)}

/* ---------- control deck: markers, track, transport ---------- */
.rp-deck{
  flex:none; position:relative;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 16px 10px;
}

/* event-marker lanes above the track */
.rp-marks{position:relative; height:32px; margin:0 1px}
.rp-dot{
  appearance:none; position:absolute; bottom:calc(var(--lane, 0) * 12px);
  transform:translateX(-50%);
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:var(--cream-dim); cursor:pointer;
  box-shadow:0 0 0 2px var(--panel);   /* gap ring so stacked dots stay distinct */
  transition:transform var(--speed), opacity var(--speed);
}
.rp-dot:hover{transform:translateX(-50%) scale(1.55); z-index:5}
.rp-dot:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rp-dot.rp-ahead{opacity:.45}
.rp-dot-ld{background:var(--red); box-shadow:0 0 7px rgba(221,50,63,.65)}
.rp-dot-death{background:#17171C; border:1.5px solid rgba(255,245,221,.75); width:9px; height:9px}
.rp-dot-play{width:5px; height:5px; background:rgba(255,245,221,.30); box-shadow:none; bottom:calc(var(--lane,0) * 12px + 1.5px)}
.rp-dot-attack{background:transparent; border:1.5px solid #E8813A; width:9px; height:9px}
.rp-dot-over{
  width:auto; height:auto; background:none; border:none; border-radius:0;
  color:var(--gold); font-size:14px; line-height:1;
  text-shadow:0 0 9px rgba(232,195,106,.9);
}

/* scrubber track */
.rp-track{
  position:relative; height:16px; margin:0 1px 18px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  cursor:pointer; touch-action:none;
}
.rp-track:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rp-fill{
  position:absolute; top:1px; bottom:1px; left:1px; width:0;
  border-radius:8px 0 0 8px;
  background:linear-gradient(90deg, rgba(221,50,63,.16), rgba(221,50,63,.5));
  pointer-events:none;
}
.rp-tick{
  position:absolute; top:-3px; bottom:-3px; width:2px;
  background:rgba(255,245,221,.28); transform:translateX(-50%); cursor:pointer;
}
.rp-tick:hover{background:var(--gold)}
.rp-tick-label{
  position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%);
  font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--cream-dim);
  pointer-events:none; white-space:nowrap;
}
.rp-head{
  position:absolute; top:-4px; bottom:-4px; width:3px; border-radius:2px;
  background:var(--cream); box-shadow:0 0 9px rgba(255,245,221,.55);
  transform:translateX(-50%); pointer-events:none;
  transition:left 130ms linear;
}

/* transport row */
.rp-transport{display:flex; align-items:center; gap:6px}
.rp-tbtn{
  appearance:none; cursor:pointer; font:inherit; font-size:13px; line-height:1;
  color:var(--cream); background:var(--panel2);
  border:1px solid var(--line); border-radius:9px;
  width:34px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--speed), background var(--speed), border-color var(--speed);
}
.rp-tbtn:hover{transform:translateY(-1px); border-color:rgba(255,245,221,.34); background:#232329}
.rp-tbtn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rp-tbtn-play{
  width:42px; height:34px; border-radius:11px; font-size:15px;
  background:linear-gradient(180deg,#E9404D,var(--red)); border-color:rgba(221,50,63,.65); color:#fff;
}
.rp-tbtn-play:hover{background:linear-gradient(180deg,#F04A57,#E43946); border-color:var(--red);
  box-shadow:0 5px 15px rgba(221,50,63,.35)}
.rp-speeds{display:flex; gap:3px; margin-left:8px}
.rp-speed{
  appearance:none; cursor:pointer; font:inherit; font-size:11px; font-weight:700;
  color:var(--cream-dim); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
  transition:all var(--speed);
}
.rp-speed:hover{color:var(--cream); border-color:rgba(255,245,221,.35)}
.rp-speed.on{color:var(--gold); border-color:var(--gold); background:rgba(232,195,106,.12)}
.rp-speed:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.rp-counter{
  margin-left:auto; font-size:12px; font-weight:600; color:var(--cream-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rp-keys{white-space:nowrap}

/* marker hover tooltip (anchored above the whole control deck) */
.rp-tip{
  position:absolute; bottom:calc(100% + 7px); left:0; z-index:80;
  max-width:360px; padding:8px 11px;
  background:rgba(20,20,23,.97); border:1px solid rgba(255,245,221,.24);
  border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.6);
  pointer-events:none; opacity:0; transform:translateY(3px);
  transition:opacity 120ms ease, transform 120ms ease;
}
.rp-tip.on{opacity:1; transform:translateY(0)}
.rp-tip-head{
  font-size:10px; font-weight:800; letter-spacing:.12em; color:var(--gold);
  text-transform:uppercase; margin-bottom:3px; white-space:nowrap;
}
.rp-tip-line{font-size:12px; line-height:1.5; color:var(--cream)}

/* ---------- legacy (log-only) + error states ---------- */
.rp-legacy{
  grid-column:1 / -1; min-height:0; display:flex; flex-direction:column;
  padding:18px 22px; overflow:hidden;
}
.rp-legacy-head{flex:none; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px}
.rp-legacy-head h3{margin-bottom:2px}
.rp-legacy-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:6px}
.rp-legacy-line{font-size:13px; line-height:1.65; color:var(--cream-dim)}
.rp-legacy-line:nth-child(odd){color:var(--cream)}

.rp-error{
  grid-column:1 / -1; align-self:start; justify-self:center;
  margin-top:8vh; padding:26px 34px; text-align:center; max-width:420px;
}
.rp-error-btns{display:flex; gap:8px; justify-content:center; margin-top:14px}

/* ---------- lobby: Replays panel ---------- */
.replays-panel{padding:16px 18px; margin-top:16px}
.rep-players{font-weight:600}
.rep-winner{color:var(--gold); font-weight:700}
.rep-reason{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; display:inline-block; vertical-align:bottom; margin-left:4px}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .rp-main{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 160px}
  .rp-side{min-height:0}
  .rp-keys{display:none}
  body[data-view="replay"] #view-replay{height:auto; min-height:calc(100vh - 76px)}
  .rp-board{min-height:60vh}
}