#replay-open{width:100%;margin-top:12px;background:#deeff8}.sofa-replay-dialog{width:min(96vw,520px);max-width:520px;max-height:96dvh;padding:12px;border:2px solid #ab8bbb;border-radius:20px;background:#fff2e4;color:#573567;overflow:auto}.sofa-replay-dialog::backdrop{background:#57356788}.replay-top{display:flex;gap:8px;align-items:center}.replay-top h2{flex:1;font-size:20px}.replay-note{font-size:12px;line-height:1.4;margin:8px 0}.replay-board{position:relative;display:grid;gap:0;padding:6px;border-radius:16px;background:#b8a3c9;width:min(100%,350px,calc(clamp(140px,48dvh,350px)*var(--columns)/var(--rows)));margin:auto;overflow:hidden}.replay-board .tile{aspect-ratio:1;margin:2px;border-radius:7px}.replay-steps{display:grid;grid-template-columns:auto 1fr auto;gap:8px;margin-top:8px}.replay-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.replay-actions button{flex:1}.replay-status{font-size:14px;min-height:40px;line-height:1.4;margin:8px 0}.replay-count{text-align:center;font-size:13px;margin:8px 0}.replay-actor{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);pointer-events:none}.replay-viewer .file-label{display:block;font-size:16px;padding:12px 0}.replay-viewer input[type=file]{max-width:100%;min-height:48px;font:inherit}.replay-viewer #replay-open{display:none}@media(max-height:500px){.replay-note{font-size:11px}.replay-board{width:min(100%,240px,calc(40dvh*var(--columns)/var(--rows)))}.sofa-replay-dialog{max-height:98dvh}}@media(prefers-reduced-motion:reduce){.replay-board *{animation:none!important;transition:none!important}}