:root{--pink:#d8b8ed;--white:#fff8f4}
#menu{background:linear-gradient(90deg,#14263bee,#263456cf 33%,#24365b35 65%,transparent);}
#menu h2{max-width:390px;line-height:1.65;font-size:clamp(17px,2vw,25px);color:#e9d1ff;letter-spacing:.15em}
#menu .eyebrow{color:#9fdbed;letter-spacing:.25em}
#menu .primary{background:linear-gradient(115deg,#d3c1ef,#f2c8dc);border-color:#f9ecff;box-shadow:0 3px 25px #a993db20}
.scene-caption{color:#f2e6ff}.vignette{background:radial-gradient(ellipse,transparent 60%,#111a3b55)}
#story.overlay{background:linear-gradient(0deg,#121b38e6,transparent 43%)}
#story .story-card{background:linear-gradient(115deg,#15243bea,#273454e8);border:1px solid #aabde666;border-left:3px solid #bfd9f3;box-shadow:0 12px 48px #08112e88;border-radius:3px}
#story #story-speaker{color:#efd4fa}#story .story-body h2{color:#bcc9e6}
#story #story-next{color:#1b2440;background:#e0c8ed;border-color:#ecdff4}
.opening #story .story-card{background:linear-gradient(0deg,#0c1538f7,#182847d9);border:0;border-top:1px solid #a5c8f177;border-radius:0;width:100%;max-width:none;margin:0;padding:10px max(18px,calc((100vw - 1000px)/2)) 8px}
.opening #story .story-body{padding:13px 22px}.opening #story #story-text{font-size:clamp(13px,1.35vw,18px);max-width:900px;min-height:45px}
.opening #story .eyebrow{color:#9cb9dd;letter-spacing:.24em}.opening #story #story-page{display:none}
.opening #story #story-next{min-width:100px;background:#2d416c;border-color:#7186b7;color:#e8efff}
.opening .topbar{background:linear-gradient(180deg,#101733c9,transparent);}
.opening #footer{display:none}
#battle-dialogue{position:absolute;left:22px;bottom:100px;max-width:370px;z-index:6;background:#172440d9;border-left:2px solid #e2c8f1;padding:10px 14px;font-size:12px;line-height:1.8;color:#f3ecff;pointer-events:none;box-shadow:0 5px 25px #0b173b44}
#battle-dialogue[hidden]{display:none}#celebration{display:none}
@media(max-width:800px){#menu{background:linear-gradient(90deg,#14263beb,#233451aa 60%,#23345166)}#menu h2{font-size:18px}.opening #story .story-card{padding:0 0 max(4px,env(safe-area-inset-bottom))}.opening #story .story-body{padding:12px 15px}.opening #story #story-text{min-height:66px}#battle-dialogue{left:15px;bottom:180px;max-width:240px;font-size:11px;padding:7px 10px}}
@media(max-height:560px){.opening #story .story-body h2{display:none}.opening #story #story-text{min-height:30px;font-size:12px}.opening #story .story-body{padding-block:7px}.opening #story .eyebrow{display:none}#battle-dialogue{bottom:78px;max-width:280px;font-size:10px;padding:5px 8px}}