/* Compact, full-screen replay. It is deliberately independent of the live table. */
.replay-overlay{position:fixed;inset:0;z-index:95;background:#07130feb;display:grid;place-items:center;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));touch-action:manipulation;overscroll-behavior:contain}
.replay-screen{width:min(680px,100%);height:min(100%,850px);min-height:0;display:flex;flex-direction:column;gap:7px;padding:9px;background:linear-gradient(155deg,#213f33,#11291f);border:1px solid #d9b979;border-radius:12px;box-shadow:0 14px 60px #000b;color:#f5eed5;overflow:hidden}
.replay-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.replay-header small{display:block;color:#c8be90;font-size:10px;letter-spacing:.08em}
.replay-header h2{font-size:19px;margin:0;color:#ffe4a3}
.replay-header button,.replay-round-nav button,.replay-buttons button{background:#325344;border:1px solid #8a9875;border-radius:7px;color:#f8edd0;min-height:34px;font-weight:700;padding:5px 10px;touch-action:manipulation}
.replay-round-nav{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;font-size:12px;color:#e3cf9b}
.replay-round-nav button{min-height:28px}
.replay-table{flex:1 1 auto;min-height:155px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#34654d,#28523f 65%,#1a3d30);border:5px solid #385847;box-shadow:inset 0 0 0 1px #83a38a48;border-radius:8px}
.replay-table:before{content:'';position:absolute;inset:7px;border:1px solid #dfe7bd20;border-radius:5px;pointer-events:none}
.replay-seat{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px}
.replay-seat.top{top:3px;left:50%;transform:translateX(-50%)}
.replay-seat.bottom{bottom:4px;left:50%;transform:translateX(-50%)}
.replay-seat.left{top:50%;left:2px;transform:translateY(-50%)}
.replay-seat.right{top:50%;right:2px;transform:translateY(-50%)}
.replay-seat-name{font-weight:700;font-size:9px;color:#dfe7cd;background:#102d23da;padding:1px 5px;border-radius:3px;white-space:nowrap}
.replay-seat-name img{width:20px;height:22px;object-fit:cover;object-position:50% 13%;border-radius:3px;vertical-align:middle;margin:-2px 3px -2px -2px}
.replay-river-tile.called .discard-tile{opacity:.48;filter:grayscale(.4)}
.replay-seat.active .replay-seat-name{background:#c9a764;color:#142b24;box-shadow:0 0 9px #ffe1a15a}
.replay-seat .replay-river{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;min-height:20px;min-width:96px;justify-content:center}
.replay-seat.left .replay-river,.replay-seat.right .replay-river{grid-template-columns:repeat(4,1fr);min-width:0}
.replay-river-tile{display:block;min-width:0}
.replay-river .discard-tile{width:15px;height:19px;font-size:11px;box-shadow:0 1px 0 #9abcac}
.replay-river .discard-tile .sub{font-size:6px}
.replay-river-tile.latest .discard-tile{outline:2px solid #ffdb86;outline-offset:0;animation:replay-last .4s cubic-bezier(.2,1.5,.2,1)}
.replay-center{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:min(51%,230px);min-height:84px;padding:8px 5px;background:#173b2f;box-shadow:0 0 0 4px #214f3e;border:1px solid #6c9b7a7b;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.replay-center>span{font-size:9px;color:#b2c6ab}
.replay-center strong{font-size:clamp(12px,3.5vw,17px);line-height:1.4;max-width:100%;color:#fff0c8;animation:replay-caption .25s ease-out}
.replay-center small{font-size:10px;color:#d1b77c}
.replay-dora{display:flex;align-items:center;gap:3px;font-size:9px;color:#d3d7be}
.replay-dora .discard-tile{width:14px;height:18px;font-size:11px}
.replay-dora .sub{font-size:6px}
.replay-ownhand{flex:none;display:flex;flex-direction:column;gap:2px}
.replay-ownhand-label{font-size:10px;color:#e3c68e;font-weight:750}
.replay-hand{display:flex;justify-content:center;align-items:center;gap:2px;min-height:35px;overflow:hidden}
.replay-hand-tile{display:block;min-width:0;flex:0 1 30px;max-width:30px}
.replay-hand-tile .discard-tile{width:100%;height:34px;font-size:18px}
.replay-hand-tile .sub{font-size:8px}
.replay-hand-tile.drawn{margin-left:4px;transform:translateY(-3px);filter:drop-shadow(0 0 4px #d8cc7c)}
.replay-meld{display:flex;flex-shrink:1;min-width:0;gap:1px;border-left:1px solid #b5bb8e;padding-left:3px;margin-left:2px}
.replay-meld .discard-tile{width:17px;height:25px;font-size:12px}
.replay-meld .discard-tile .sub{font-size:6px}
.replay-explanation{flex:0 0 auto;display:flex;align-items:center;min-height:82px;max-height:102px;overflow:hidden;padding:6px;background:#294b3b;border:1px solid #668b6a;border-radius:8px;gap:8px}
.replay-explanation img{align-self:stretch;width:58px;height:100%;max-height:86px;object-fit:cover;object-position:50% 17%;border-radius:5px}
.replay-explanation>div{flex:1;min-width:0}
.replay-explanation strong{font-size:11px;color:#ffe3a6}
.replay-explanation p{margin:3px 0 0;color:#f3eedf;font-size:12px;line-height:1.45}
.replay-controls{flex:none;display:flex;flex-direction:column;gap:6px}
.replay-controls input[type=range]{display:block;width:100%;height:17px;accent-color:#eac478;touch-action:pan-x}
.replay-buttons{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:4px}
.replay-buttons button{font-size:11px;min-width:0;min-height:38px;padding:5px 3px;white-space:normal;line-height:1.2}
.replay-buttons .replay-play{color:#152c23;background:#e8bd6f;border-color:#edcf94}
.replay-buttons .replay-own{border-color:#e3c57a;color:#ffe3ab}
.replay-buttons button:disabled{opacity:.38}
@keyframes replay-last{0%{transform:translateY(-9px) scale(1.2);opacity:.4}100%{transform:none;opacity:1}}
@keyframes replay-caption{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:390px){
 .replay-screen{gap:5px;padding:6px}
 .replay-header h2{font-size:17px}
 .replay-hand-tile .discard-tile{height:30px;font-size:16px}
 .replay-hand-tile .sub{font-size:7px}
 .replay-explanation{min-height:80px;max-height:95px;padding:5px}
 .replay-explanation p{font-size:11px}
}
@media(max-height:620px){
 .replay-screen{gap:4px;padding:5px}
 .replay-header h2{font-size:16px}
 .replay-header button{min-height:27px;font-size:11px}
 .replay-center{min-height:64px;gap:2px;padding:4px}
 .replay-table{min-height:150px}
 .replay-hand{min-height:27px}
 .replay-hand-tile .discard-tile{height:27px;font-size:15px}
 .replay-explanation{min-height:68px;max-height:79px;padding:4px}
 .replay-explanation img{width:48px;max-height:72px}
 .replay-explanation p{font-size:10.5px;line-height:1.35}
 .replay-controls{gap:1px}
 .replay-buttons button{min-height:32px;font-size:10px}
 .replay-river .discard-tile{height:17px}
 .replay-seat .replay-river{min-height:17px}
}
@media(prefers-reduced-motion:reduce){.replay-center strong,.replay-river-tile.latest .discard-tile{animation:none}}