.account-foundation-current [data-open-replays] { grid-column:1/-1; grid-row:auto; margin-top:6px; min-height:44px; }
.replay-dialog { width:min(920px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; padding:20px; border:1px solid #84704f; border-radius:18px; color:#f4eee0; background:#161820; overflow:auto; }
.replay-dialog::backdrop { background:rgb(0 0 0 / 72%); }
.replay-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.replay-dialog h2,.replay-dialog h3,.replay-dialog h4 { margin:8px 0; }
.replay-dialog p { line-height:1.6; overflow-wrap:anywhere; }
.replay-dialog button { min-height:44px; padding:8px 14px; border:1px solid #8b7956; border-radius:10px; background:#292b34; color:inherit; font:inherit; cursor:pointer; }
.replay-dialog button:disabled { opacity:.45; cursor:default; }
.replay-dialog button:focus-visible,.replay-dialog input:focus-visible { outline:3px solid #e9c47d; outline-offset:3px; }
.replay-controls { display:flex; flex-wrap:wrap; gap:8px; position:sticky; top:-20px; padding:12px 0; background:#161820; z-index:1; }
.replay-dialog input[type=range] { width:100%; min-height:44px; }
.replay-history { list-style:none; padding:0; }
.replay-history li { padding:14px 0; border-bottom:1px solid #49423a; }
.replay-board { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.replay-side { padding:12px; background:#22252f; border:1px solid #5e574b; border-radius:12px; min-width:0; }
.replay-cards { display:flex; flex-wrap:wrap; gap:6px; }
.replay-card { padding:7px 9px; background:#333849; border-radius:7px; overflow-wrap:anywhere; }
.replay-zone { margin:12px 0; }
.replay-events { line-height:1.7; }
@media(max-width:640px) { .replay-dialog { padding:12px; } .replay-board { grid-template-columns:1fr; } .replay-controls { top:-12px; } }

/* Playback uses the real battle screen in a script-free frame. The transport
   owns its own rows and never covers the six faces or the hand. */
.replay-dialog.replay-playing { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:4px 8px; border:0; border-radius:0; overflow:hidden; display:flex; flex-direction:column; gap:2px; }
.replay-playing > header { flex:0 0 30px; min-height:30px; }
.replay-playing > header h2 { font-size:13px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-playing > header button { min-height:30px; padding:2px 12px; font-size:12px; }
.replay-playing > [role=status] { margin:0; font-size:12px; }
.replay-playing > [role=status]:empty { display:none; }
.replay-playing .replay-content,.replay-player { flex:1; min-height:0; display:flex; flex-direction:column; }
.replay-scene { flex:1; min-height:0; position:relative; overflow:hidden; }
.replay-battle-screen { display:block; width:100%; height:100%; border:0; }
.replay-transport { flex:none; position:relative; }
.replay-playing .replay-controls { position:static; padding:0; gap:5px; flex-wrap:nowrap; align-items:center; }
.replay-playing .replay-controls button { min-height:32px; padding:3px 10px; font-size:12px; white-space:nowrap; }
.replay-position { font-size:11px; margin-left:auto; line-height:1.3; }
.replay-playing input[type=range] { display:block; min-height:18px; height:18px; margin:0; }
.replay-event-details { position:absolute; bottom:100%; right:0; max-width:320px; max-height:45dvh; overflow:auto; font-size:11px; background:#161820; border-radius:8px; padding:2px 8px; }
.replay-event-details:not([open]) { display:none; }
.replay-preparation { height:100%; box-sizing:border-box; overflow:auto; padding:16px; background:radial-gradient(ellipse at top,#303445,#0c0f17); }
.replay-preparation .replay-cards { gap:10px; }
.replay-preparation .replay-card { width:118px; min-height:140px; display:flex; align-items:end; background-size:cover; background-position:center; border:1px solid #8b7956; text-shadow:0 1px 3px #000,0 1px 5px #000; font-weight:bold; }
@media(orientation:portrait) and (max-width:640px) {
  .replay-playing .replay-scene { flex:none; height:46dvh; min-height:320px; overflow:auto; }
  .replay-playing .replay-battle-screen { min-width:760px; }
  .replay-playing .replay-controls { flex-wrap:wrap; }
  .replay-playing .replay-position { width:100%; margin:0; }
  .replay-playing .replay-transport::after { content:'横向きにすると盤面全体を大きく表示できます'; display:block; font-size:12px; padding:8px 0; color:#d6c39b; }
}

.replay-event-details { position:relative; bottom:auto; max-width:none; max-height:25dvh; }
.replay-event-details:not([open]) { display:block; }

.replay-card-detail { position:absolute; inset:36px 8px 70px; z-index:3; overflow:auto; background:#171b25; border:1px solid #b39b67; border-radius:12px; padding:14px; display:grid; grid-template-columns:minmax(0,1fr) 30%; gap:8px 18px; }
.replay-card-detail > :not(img) { grid-column:1; margin:0; }
.replay-card-detail img { grid-column:2; grid-row:1/6; width:100%; max-height:100%; object-fit:contain; }
.replay-card-detail p { white-space:pre-line; font-size:15px; }

.replay-card-detail { display:block; }
.replay-detail-card { display:grid; grid-template-columns:minmax(0,1fr) 28%; gap:16px; padding:8px 0; border-bottom:1px solid #454b58; }
.replay-detail-card img { grid-column:2; grid-row:1; max-height:230px; }
.replay-detail-card h3,.replay-detail-card p { margin:4px 0; }
@media(orientation:landscape) and (max-height:600px) {
  /* A side rail preserves board height/card art on iPhone landscape. */
  .replay-player { display:grid; grid-template-columns:minmax(0,1fr) 96px; grid-template-rows:minmax(0,1fr) 20px; gap:3px 6px; }
  .replay-scene { grid-column:1; grid-row:1; height:100%; }
  .replay-transport { display:contents; }
  .replay-playing .replay-controls { grid-column:2; grid-row:1; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:6px; padding-top:4px; }
  .replay-playing .replay-controls button { min-height:40px; padding:3px 4px; font-size:12px; }
  .replay-playing .replay-position { margin:4px 0 0; font-size:11px; }
  .replay-playing input[type=range] { grid-column:1/-1; grid-row:2; width:100%; height:20px; }
  .replay-event-details { grid-column:2; grid-row:1; align-self:end; margin:0; padding:3px; max-height:75px; }
  .replay-card-detail { inset:36px 110px 28px 8px; }
}

/* Recorded action stays visible after its short entrance. No random rolling,
   gameplay callbacks, or delayed timers survive a seek/close. */
.replay-action-slot { flex:none; min-height:0; }
.replay-action { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:7px 10px; border:1px solid #88754c; border-radius:10px; background:linear-gradient(110deg,#303244,#151923); font-size:14px; }
.replay-action-title { color:#ffe3a2; }
.replay-action-cards { display:flex; gap:8px; flex-wrap:wrap; }
.replay-action-card { display:flex; align-items:center; gap:6px; max-width:240px; font-weight:700; }
.replay-action-card img { width:44px; height:56px; object-fit:cover; border:1px solid #c7ab75; border-radius:5px; }
.replay-action-outcome { margin:0; font-size:13px; }
.replay-roll { display:flex; gap:8px; align-items:center; }
.replay-die { display:inline-grid; place-items:center; width:48px; height:48px; border:2px solid #f6daa1; border-radius:9px; background:#f8efd9; color:#222538; font-size:34px; box-shadow:0 3px 10px #0006; }
.replay-roll-result { color:#ffdf92; font-weight:700; }
.replay-animate .replay-action-card { animation:replay-card-play .5s both; }
.replay-animate .replay-die { animation:replay-die-land .65s both; }
.replay-animate .replay-roll-result,.replay-animate[data-action=end_turn] .replay-action-outcome { animation:replay-result .25s .65s both; }
@keyframes replay-card-play { from { opacity:0; transform:translateY(24px) rotate(-7deg) scale(.85); } to { opacity:1; transform:none; } }
@keyframes replay-die-land { 0% { transform:translateY(-18px) rotate(-160deg) scale(.6); opacity:.25; } 65% { transform:translateY(3px) rotate(12deg) scale(1.12); } 100% { transform:none; opacity:1; } }
@keyframes replay-result { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.replay-preparation .replay-card { position:relative; box-sizing:border-box; padding-top:28px; }
.replay-preparation .replay-card-selected { outline:3px solid #ffe29c; outline-offset:2px; }
.replay-pick-badge { position:absolute; top:4px; left:4px; padding:2px 5px; background:#ffe29c; color:#1d2230; border-radius:4px; font-size:12px; text-shadow:none; }
@media (prefers-reduced-motion:reduce) { .replay-action * { animation:none!important; } }
@media (orientation:portrait) and (max-width:640px) {
  .replay-action { font-size:13px; max-height:24dvh; overflow:auto; }
  .replay-action-card img { width:38px; height:48px; }
  .replay-playing .replay-content { overflow:auto; }
  .replay-playing .replay-scene { min-height:300px; height:42dvh; }
}
@media (orientation:landscape) and (max-height:600px) {
  .replay-player { grid-template-columns:minmax(0,1fr) 184px; grid-template-rows:minmax(0,1fr) auto 20px; }
  .replay-scene { grid-column:1; grid-row:1/3; }
  .replay-action-slot { grid-column:2; grid-row:1; overflow:auto; }
  .replay-action { padding:6px; gap:6px; font-size:12px; }
  .replay-action-title { width:100%; }
  .replay-action-card img { width:40px; height:52px; }
  .replay-action-outcome { font-size:12px; }
  .replay-roll { flex-wrap:wrap; gap:5px; }
  .replay-roll-result { flex:1; }
  .replay-roll-actor { width:100%; }
  .replay-playing .replay-controls { grid-column:2; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  .replay-playing .replay-controls button { min-height:36px; }
  .replay-position { grid-column:1/-1; }
  .replay-playing input[type=range] { grid-row:3; }
  .replay-action-slot .replay-event-details { display:block; position:static; max-height:40dvh; }
  .replay-card-detail { right:202px; }
}

.replay-action-slot .replay-event-details { position:relative; margin-top:2px; }

/* Replay transport and the current action are fixed-size controls. Only an
   explicitly opened detail sheet scrolls; the battlefield keeps its own view. */
.replay-playing .replay-controls select { appearance:none; min-height:32px; border:1px solid #8b7956; border-radius:8px; padding:2px 8px; background:#292b34; color:#f2ede1; font:inherit; font-size:12px; text-align:center; }
.replay-playing .replay-used-card { min-height:32px; padding:0; border:0; background:none; text-align:left; font-weight:700; white-space:normal; }
.replay-event-details button { min-height:28px; padding:2px 8px; font-size:12px; }
.replay-action-outcome { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.replay-final-picks { display:flex; flex-direction:column; overflow:hidden; padding:8px 16px; }
.replay-final-picks > h3,.replay-final-picks > p { flex:none; margin:2px 0; }
.replay-final-picks .replay-zone { flex:1; min-height:0; display:flex; flex-direction:column; margin:2px 0; }
.replay-final-picks .replay-cards { flex:1; min-height:0; flex-wrap:nowrap; justify-content:center; }
.replay-final-picks .replay-card { flex:0 1 180px; width:auto; min-width:0; min-height:0; max-height:260px; padding:8px; }
.replay-pick-offer { height:100%; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; padding:8px; gap:5px; }
.replay-pick-offer > .replay-zone { flex:1; min-height:0; display:flex; flex-direction:column; margin:0; }
.replay-pick-offer h4 { flex:none; font-size:12px; margin:2px 0 5px; }
.replay-pick-offer .replay-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); flex:1; min-height:0; gap:6px; }
.replay-pick-offer .replay-card { position:relative; min-width:0; min-height:0; display:flex; align-items:flex-end; padding:5px; background-size:cover; background-position:center; font-size:12px; line-height:1.2; text-shadow:0 1px 3px #000; }
.replay-pick-offer .replay-card-selected { outline:2px solid #ffe29c; outline-offset:-2px; }
.replay-pick-offer .replay-pick-badge { font-size:10px; }
.replay-pick-offer > h3 { flex:none; font-size:15px; margin:0; }
.replay-pick-offer > p { flex:none; font-size:12px; margin:0; }
@media(orientation:landscape) and (max-height:600px) {
  .replay-player { grid-template-columns:minmax(0,1fr) 160px; }
  .replay-action-slot { display:flex; flex-direction:column; overflow:hidden; }
  .replay-action { flex:1; min-height:0; align-content:flex-start; overflow:hidden; gap:4px; }
  .replay-action-title { font-size:12px; line-height:1.3; }
  .replay-action-card { min-width:0; gap:4px; }
  .replay-action-card img { width:32px; height:42px; }
  .replay-playing .replay-used-card { font-size:12px; line-height:1.35; }
  .replay-action-outcome { font-size:11px; line-height:1.4; }
  .replay-action-slot .replay-event-details { flex:none; padding:0; margin:2px 0 0; }
  .replay-action-slot .replay-event-details button { width:100%; min-height:26px; }
  .replay-playing .replay-position { font-size:10px; line-height:1.25; max-height:38px; overflow:hidden; }
  .replay-playing .replay-controls select { grid-column:1/-1; min-height:28px; }
  .replay-card-detail { right:178px; }
  .replay-final-picks > h3 { font-size:15px; }
  .replay-final-picks > p { font-size:12px; line-height:1.4; }
}