.story-dialog{position:fixed;inset:0;margin:auto;width:min(calc(100vw - 16px),calc((100dvh - 16px)*864/608),1080px);max-width:none;max-height:calc(100dvh - 16px);padding:0;border:3px solid #e5ce95;border-radius:18px;background:#1f3442;color:#fff9e5;overflow:hidden;box-shadow:0 15px 65px #142a4759}
.story-dialog::backdrop{background:#14202eeb}
.story-stage{position:relative;aspect-ratio:864/608;width:100%}
.story-stage>canvas{display:block;width:100%;height:100%}
.story-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 14px;background:linear-gradient(#172a40e8,#172a40a0,transparent)}
.story-top p{margin:0;font-size:clamp(12px,2.2vw,23px);font-weight:bold}
.story-adaptation{font-size:clamp(9px,1.4vw,13px);opacity:.8;white-space:nowrap}
.story-dialogue{position:absolute;inset:auto 10px 10px;min-height:26%;padding:10px 14px;background:#172b42f5;border:2px solid #e5ce95;border-radius:13px;box-shadow:0 3px 12px #14202e30}
.story-speaker{display:block;color:#ffdf8e;font-size:clamp(13px,2.4vw,22px);line-height:1.3}
.story-copy{font-size:clamp(13px,2.1vw,20px);line-height:1.5;min-height:3em;margin:5px 0 8px;word-break:keep-all;cursor:pointer}
.story-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.story-actions button{min-height:36px;padding:6px 14px;font-size:clamp(12px,1.8vw,17px);min-width:68px}
.story-page{font-size:11px;color:#b9c8d5}
.story-countdown{position:absolute;inset:32% 0 auto;text-align:center;color:#fff3b8;font-size:clamp(24px,6vw,55px);font-weight:bold;text-shadow:0 3px #314b40,2px 0 #314b40;pointer-events:none;animation:story-ready-in .3s ease-out}
@keyframes story-ready-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@media(orientation:portrait){.story-dialog{width:calc(100vw - 12px);border-radius:14px}.story-stage{aspect-ratio:auto;min-height:min(620px,calc(100dvh - 20px));display:flex;flex-direction:column}.story-stage>canvas{width:100%;height:auto;aspect-ratio:864/608;object-fit:contain}.story-dialogue{position:relative;inset:auto;margin:0 7px 7px;flex:1;display:flex;flex-direction:column}.story-copy{flex:1;font-size:18px;min-height:4.5em}.story-actions button{min-height:44px}.story-speaker{font-size:19px}.story-top p{font-size:16px}.story-countdown{top:22%}}
@media(orientation:landscape) and (max-height:500px){.story-dialog{width:min(calc(100vw - 12px),calc((100dvh - 12px)*1.85));max-height:calc(100dvh - 12px);border-radius:12px}.story-stage{aspect-ratio:1.85}.story-stage>canvas{position:absolute;inset:0 auto auto 0;width:100%;height:auto;aspect-ratio:864/608;object-fit:fill}.story-top{padding:5px 10px}.story-top p{font-size:14px}.story-dialogue{inset:auto 7px 7px;padding:6px 10px}.story-speaker{font-size:15px}.story-copy{font-size:14px;min-height:1.5em;margin:3px 0 5px}.story-actions button{min-height:36px;padding:4px 12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.story-countdown{animation:none}}
.story-dialog[data-memory=true] .story-stage>canvas{filter:sepia(.3) saturate(.75);transition:filter .2s}
.story-dialog[data-phase=waiting] .story-countdown{font-size:clamp(16px,3vw,28px);padding:8px;background:#172b42dc}
#versus-options{display:flex;flex-direction:column;gap:6px;font-size:inherit}
#versus-options[hidden]{display:none}
#versus-options select{max-width:100%;font-size:inherit}

.story-demo-logo{display:none;position:absolute;top:12%;left:50%;transform:translateX(-50%);width:30%;text-align:center;pointer-events:none;animation:demo-title-blink 1.4s steps(1,end) infinite}.story-demo-logo img{width:100%;height:auto;filter:drop-shadow(0 2px 2px #fff9e9)}.story-demo-logo .demo-logo-en{display:none}.story-demo-logo b{display:block;font-size:11px;letter-spacing:3px;color:#fff4c8;text-shadow:0 1px #314b40}.story-dialog[data-demo=true] .story-demo-logo{display:block}.story-dialog[data-demo=true] .story-actions{display:none}html[lang=en] .story-demo-logo .demo-logo-ko{display:none}html[lang=en] .story-demo-logo .demo-logo-en{display:block}@media(prefers-reduced-motion:reduce){.story-demo-logo{animation:none}}
