.othello-replay{width:100%;max-width:500px;margin:0 auto;color:var(--bbs-ink)}
.othello-replay *{box-sizing:border-box}
.othello-replay [hidden]{display:none!important}
.othello-replay :focus-visible{outline:3px solid var(--bbs-green);outline-offset:4px}
.replay-heading{margin:0 0 20px}
.replay-eyebrow{font:700 10px var(--bbs-font-num);letter-spacing:.18em;color:var(--bbs-green)}
.replay-heading h1{margin:4px 0 2px;font-size:25px;letter-spacing:.02em;line-height:1.5}
.replay-heading p{margin:0;font-size:12px;color:var(--bbs-muted)}
.replay-card{background:var(--bbs-white);border:1px solid var(--bbs-line);border-radius:var(--bbs-radius-lg);padding:18px;box-shadow:var(--bbs-shadow)}
.replay-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.replay-player{display:flex;align-items:center;min-width:0;gap:8px;padding:10px 12px;background:var(--bbs-paper);border:1px solid transparent;border-radius:var(--bbs-radius-sm);transition:border-color .2s,background .2s}
.replay-player.is-turn{background:var(--bbs-mint);border-color:#9dc8aa}
.replay-token{display:block;width:22px;height:22px;flex:0 0 22px;border-radius:50%;box-shadow:0 2px 3px #17241d26}
.replay-token-black{background:radial-gradient(circle at 33% 24%,#5c625d,#202622 55%,#0b100c);border:1px solid #141c16}
.replay-token-white{background:radial-gradient(circle at 32% 24%,#fff,#f6f7f2 55%,#d3dbd1);border:1px solid #c7d0c4}
.replay-player-info{min-width:0;flex:1}
.replay-color{display:block;font-size:10px;line-height:1.2;color:var(--bbs-muted);margin-bottom:3px}
.replay-player strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.4}
.replay-count{font:700 27px var(--bbs-font-num);font-variant-numeric:tabular-nums;flex-shrink:0;line-height:1.2}
.replay-board-wrap{display:grid;grid-template-columns:18px minmax(0,1fr) 18px;grid-template-rows:19px auto 19px;gap:2px;background:#f7f7ef;border-radius:10px;padding:6px 3px}
.replay-axis{display:grid;align-items:center;justify-items:center;color:#657568;font:500 12px var(--bbs-font-num);user-select:none}
.replay-axis-top,.replay-axis-bottom{grid-template-columns:repeat(8,minmax(0,1fr));grid-column:2}
.replay-axis-top{grid-row:1}.replay-axis-bottom{grid-row:3}
.replay-axis-left,.replay-axis-right{grid-template-rows:repeat(8,minmax(0,1fr));grid-row:2}
.replay-axis-left{grid-column:1}.replay-axis-right{grid-column:3}
.replay-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;grid-column:2;grid-row:2;border:3px solid #5c5545;background:#246629;box-shadow:0 1px 0 #fff8;gap:1px;overflow:hidden}
.replay-cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;background:#2e7d32;perspective:200px}
.replay-cell:nth-child(16n + 1),.replay-cell:nth-child(16n + 3),.replay-cell:nth-child(16n + 5),.replay-cell:nth-child(16n + 7),.replay-cell:nth-child(16n + 10),.replay-cell:nth-child(16n + 12),.replay-cell:nth-child(16n + 14),.replay-cell:nth-child(16n + 16){background:#307f34}
.replay-cell.is-last::after{content:"";position:absolute;inset:6%;border:2px solid #f5d982;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px #b19143a6}
.replay-stone{position:relative;width:83%;height:83%;border-radius:50%;transform-style:preserve-3d;transform:rotateY(0);transition:transform 420ms cubic-bezier(.25,.65,.25,1);will-change:transform}
.replay-stone.is-white{transform:rotateY(180deg)}
.replay-stone.is-empty{visibility:hidden}
.replay-stone-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 3px #10261755}
.replay-stone-black{background:radial-gradient(circle at 33% 23%,#5b625c,#242a25 55%,#10170f);border:1px solid #0d1b10;transform:rotateY(0)}
.replay-stone-white{background:radial-gradient(circle at 30% 22%,#fff,#f5f7ee 55%,#c9d5c5);border:1px solid #c7d4c2;transform:rotateY(180deg)}
.replay-cell.is-placed .replay-stone-face{animation:replay-place 360ms cubic-bezier(.18,.7,.3,1) both}
@keyframes replay-place{0%{opacity:.4;scale:.72}65%{scale:1.05}100%{opacity:1;scale:1}}
.replay-board.is-seeking .replay-stone{transition:none}
.replay-position{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;min-width:0}
.replay-position p{margin:0;font-size:13px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.replay-progress{flex-shrink:0;color:var(--bbs-muted);font:12px var(--bbs-font-num);font-variant-numeric:tabular-nums}
.replay-progress strong{font-size:18px;color:var(--bbs-ink)}
.replay-outcome{margin:9px 0 0;padding:8px 10px;border-radius:8px;background:var(--bbs-mint);color:var(--bbs-green-dark);font-size:12px;font-weight:700;overflow-wrap:anywhere}
.replay-range{display:block;width:100%;height:28px;margin:12px 0;cursor:pointer;accent-color:var(--bbs-green);touch-action:pan-y}
.replay-controls{display:grid;grid-template-columns:1fr 1fr 1.6fr 1fr 1fr;gap:7px}
.replay-controls button{min-width:0;height:44px;border:1px solid var(--bbs-line);border-radius:9px;background:var(--bbs-white);color:var(--bbs-ink);display:flex;align-items:center;justify-content:center;gap:5px;padding:0;font:700 12px var(--bbs-font-jp);cursor:pointer;transition:background .15s,transform .15s}
.replay-controls button:not(:disabled):hover{background:var(--bbs-mint)}
.replay-controls button:active{transform:scale(.96)}
.replay-controls .replay-play{background:var(--bbs-green);border-color:var(--bbs-green);color:white}
.replay-controls .replay-play:not(:disabled):hover{background:var(--bbs-green-dark)}
.replay-controls button:disabled{opacity:.35;cursor:default}
.replay-options{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;color:var(--bbs-muted);font-size:11px}
.replay-options>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.replay-options label{display:flex;align-items:center;gap:6px;margin-left:auto}
.replay-options select{font:600 12px var(--bbs-font-num);border:1px solid var(--bbs-line);border-radius:7px;color:var(--bbs-ink);background:white;padding:6px;min-height:36px}
.replay-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:20px 2px 30px;font-size:12px}
.replay-links a{display:inline-flex;align-items:center;gap:4px;color:var(--bbs-green-dark);text-decoration:none}
.replay-links svg{width:14px;height:14px}
.replay-state{padding:55px 18px;min-height:300px;text-align:center;background:var(--bbs-white);border:1px solid var(--bbs-line);border-radius:var(--bbs-radius-lg);color:var(--bbs-muted);font-size:13px}
.replay-state h2{font-size:18px;color:var(--bbs-ink);margin:12px 0}
.replay-state p{line-height:1.8;margin:12px 0 20px}
.replay-loader{display:inline-block;width:26px;height:26px;border:3px solid var(--bbs-mint);border-top-color:var(--bbs-green);border-radius:50%;animation:replay-loading .8s linear infinite}
@keyframes replay-loading{to{transform:rotate(360deg)}}
.replay-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:420px){.replay-heading{margin-bottom:15px}.replay-heading h1{font-size:22px}.replay-card{padding:11px}.replay-players{gap:7px;margin-bottom:10px}.replay-player{padding:8px 7px;gap:6px}.replay-player strong{font-size:12px}.replay-token{width:18px;height:18px;flex-basis:18px}.replay-count{font-size:23px}.replay-board-wrap{grid-template-columns:14px minmax(0,1fr) 14px;grid-template-rows:16px auto 16px;gap:1px;padding:4px 1px}.replay-axis{font-size:10px}.replay-board{border-width:2px}.replay-controls{gap:5px}.replay-options>span{max-width:50%}.replay-position p{font-size:12px}.replay-cell.is-last::after{border-width:1.5px}}
@media(prefers-reduced-motion:reduce){.replay-stone,.replay-player,.replay-controls button{transition:none}.replay-cell.is-placed .replay-stone-face,.replay-loader{animation:none}.replay-controls button:active{transform:none}}