/* 리플레이 전용 — 기본 보드·좌석·카드 스타일은 style.css를 그대로 쓴다 */
.replay-app .game-layout { padding-top: 18px; }
.replay-picker { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; padding: 28px 0 40px; }
.match-list { display: grid; gap: 8px; }
.match-card { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(16,24,40,.67); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.match-card:hover { border-color: rgba(105,224,181,.4); transform: translateY(-1px); }
.mc-place { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(167,184,219,.2); border-radius: 50%; font: 500 16px "DM Mono", monospace; color: var(--muted); }
.match-card.win .mc-place { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 16px rgba(242,200,121,.2); }
.match-card.open .mc-place { border-style: dashed; }
.mc-main { display: grid; gap: 2px; min-width: 0; }
.mc-main strong { font-size: 13px; }
.mc-main small { color: var(--faint); font-size: 10px; }
.mc-stats { color: var(--faint); font-size: 10px; line-height: 1.5; text-align: right; }
.mc-stats b { color: var(--text); font: 500 12px "DM Mono", monospace; }
.mc-go { color: var(--mint); font: 11px "DM Mono", monospace; }

.replay-stage { min-height: 214px; }
.replay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.matchup { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.matchup strong { color: var(--player-color); }
.beam-glyph { display: grid; width: 46px; place-items: center; color: var(--mint); font-style: normal; font-size: 16px; animation: blink 1.2s infinite; }
.beam-glyph.secret { color: var(--amber); }
.beam-glyph.guess { color: var(--coral); }
.replay-stage .result-row { align-items: stretch; }
.replay-stage .play-card.preview { width: 104px; }
.play-card.fly-in { animation: fly-in .45s cubic-bezier(.2,.8,.3,1.1); }
.gain { margin-top: 6px; color: #8a97aa; font: 10px "DM Mono", monospace; }
.guess-tiles.pending span { border-style: dashed; color: #8a95a9; animation: blink .9s infinite; }
.stage-note.center { margin-top: 8px; text-align: center; }
.stage-wait .stage-note { display: block; margin-top: 6px; }
.lock-slot.peek b { color: #8c99ae; opacity: .55; }

.hand-wrap { display: grid; justify-items: center; min-width: 0; }
.hand-owner { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; color: var(--muted); font-size: 11px; }
.hand-owner .mini-av { width: 20px; height: 20px; font-size: 9px; }
.replay-app .hand { min-height: 160px; filter: none; }
.replay-app .hand .play-card { filter: saturate(.75) brightness(.85); }
.replay-app .hand .play-card.selected { filter: none; }
.play-card.lift { transform: translateY(-30px) rotate(0deg); }
.play-card.thrown { animation: throw .55s ease-in forwards; }
.play-card.landed { opacity: .35; transform: translateY(-8px) rotate(0deg); }

.seat.is-focus { outline: 2px dashed var(--player-color); outline-offset: 4px; }
.my-replay-seat { display: contents; }
#r-you .seat { align-self: end; }
.leak-banner { position: absolute; top: 46%; left: 50%; z-index: 5; display: grid; gap: 4px; padding: 14px 26px; border: 2px solid var(--coral); border-radius: 12px; background: rgba(20,10,14,.92); box-shadow: 0 0 60px rgba(255,142,131,.3); text-align: center; transform: translate(-50%, -50%); animation: banner-in .35s cubic-bezier(.2,.8,.3,1.3); }
.leak-banner strong { color: var(--coral); font: 700 18px "DM Mono", monospace; letter-spacing: .2em; }
.leak-banner span { color: var(--amber); font: 11px "DM Mono", monospace; letter-spacing: .08em; }

.replay-bar { display: grid; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(16,24,40,.67); }
.replay-buttons { display: flex; justify-content: center; gap: 8px; }
.ctrl { min-width: 46px; min-height: 40px; border: 1px solid rgba(167,184,219,.18); border-radius: 10px; background: linear-gradient(180deg, #1a2438, #121a2b); color: #dbe3ef; font-size: 14px; cursor: pointer; box-shadow: 0 3px 0 #0a0f1b; }
.ctrl:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0f1b; }
.ctrl.play { min-width: 72px; border-color: rgba(105,224,181,.5); color: var(--mint); font-size: 16px; }
.ctrl.play.active { background: var(--mint-dim); }
.scrubber { display: flex; align-items: center; gap: 12px; }
.scrubber input { flex: 1; accent-color: var(--mint); }
.step-label { min-width: 110px; color: var(--muted); font: 11px "DM Mono", monospace; text-align: right; font-variant-numeric: tabular-nums; }
.replay-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: rgba(5,10,18,.4); }
.seg button { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: #8592a7; font: 11px "DM Mono", "Noto Sans KR", monospace; cursor: pointer; }
.seg button.active { background: var(--mint-dim); color: var(--mint); }
.code-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; cursor: pointer; }
.code-toggle input { accent-color: var(--mint); }

.timeline { max-height: 420px; }
.timeline .feed-row.future { opacity: .35; }
.timeline .feed-row.current { background: rgba(105,224,181,.09); box-shadow: inset 2px 0 0 var(--mint); }
.round-tag { flex: 0 0 auto; width: 26px; color: #7e889c; font: 9px "DM Mono", monospace; }
.records-hint { margin: 8px 0 0; color: var(--faint); font-size: 11px; line-height: 1.6; }
.focus-name { color: var(--player-color); }
#r-records .record-attackers { margin-top: 10px; }
#r-records .record-list { max-height: 260px; }

@keyframes fly-in { from { opacity: 0; transform: translate(-40px, 120px) rotate(-12deg) scale(.7); } }
@keyframes throw { to { opacity: 0; transform: translateY(-140px) scale(.8); } }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }

@media (max-width: 760px) {
  .match-card { grid-template-columns: 36px 1fr auto; }
  .mc-go { display: none; }
  .replay-stage { min-height: 190px; }
  .replay-head { flex-direction: column; align-items: flex-start; }
  .replay-stage .play-card.preview { width: 76px; }
  .replay-options { justify-content: center; }
  .step-label { min-width: 84px; }
  .leak-banner { width: calc(100% - 40px); padding: 12px; }
  .leak-banner strong { font-size: 14px; }
}
.timeline { position: relative; }

/* 전체 추리 노트 */
#r-notes .records-hint { margin: 6px 0 0; }
.notes-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 8px; }
.note-card { padding: 9px 10px; }
.note-card .intel-title-row { margin-bottom: 4px; }
.note-card .intel-title-row strong { font-size: 11px; white-space: nowrap; }
.note-card .digit-line { margin-top: 3px; }
.note-card .digit { height: 17px; font-size: 9px; }
.note-card { cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.note-card:hover { border-color: color-mix(in srgb, var(--player-color) 40%, transparent); }
.note-card.is-target { border-color: color-mix(in srgb, var(--player-color) 65%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--player-color) 18%, transparent); }
.note-card.is-focus { outline: 1px dashed color-mix(in srgb, var(--player-color) 70%, transparent); outline-offset: 2px; }
.note-card .digit { cursor: default; }
.note-card .digit.truth { box-shadow: inset 0 0 0 1.5px var(--amber); }
.note-card .digit.just-cut { background: rgba(255,142,131,.22); color: #ff8e83; animation: note-cut 1.2s ease; }
@keyframes note-cut { from { background: rgba(255,142,131,.55); transform: scale(1.15); } to { background: rgba(255,142,131,.22); transform: none; } }
.note-stat { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.note-count { color: var(--muted); font: 10px "DM Mono", monospace; }
.note-count b { color: var(--player-color); }
.note-delta { color: #ff8e83; font: normal 10px "DM Mono", monospace; }
@media (max-width: 1100px) { .notes-grid { grid-template-columns: 1fr; gap: 7px; margin-top: 8px; }
.note-card { padding: 9px 10px; }
.note-card .intel-title-row { margin-bottom: 4px; }
.note-card .intel-title-row strong { font-size: 11px; white-space: nowrap; }
.note-card .digit-line { margin-top: 3px; }
.note-card .digit { height: 17px; font-size: 9px; } }
@media (max-width: 560px) { .notes-grid { grid-template-columns: 1fr; } }

/* 게임 위에 띄운 리플레이: 목록 링크 숨김, 닫기 버튼 자리 비우기 */
body.embed #list-link, body.embed .game-brand { visibility: hidden; }
body.embed .header-actions { margin-right: 150px; }

/* 캠페인 기록: Node가 좌석, 아래는 행동하는 사람(나 · 미라) */
.player-node { --player-color: #69e0b5; --player-color-dim: rgba(105,224,181,.12); }
.player-mira { --player-color: #4fd6c8; --player-color-dim: rgba(79,214,200,.14); }
.campaign-replay .seg:has([data-mode]) { display: none; }
.campaign-replay .seat .seat-avatar span { font-size: 12px; }
.node-probes { color: var(--muted); font: 11px "DM Mono", "Noto Sans KR", monospace; }
.actor-row { display: flex; flex-wrap: wrap; gap: 10px; }
.actor-seat { min-width: 180px; flex: 1; }
.actor-stats { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
.case-outcome { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-weight: 700; text-align: center; }
.case-outcome.win { background: var(--mint-dim); color: var(--mint); }
.case-outcome.lose { background: rgba(255,142,131,.12); color: var(--coral); }