/* Ink curtain and gold linework are code-drawn; no new bitmap assets. */
body.story-mode.scene-changing { overflow:hidden; }
.story-battle-transition {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:24px; overflow:hidden; isolation:isolate; outline:none; touch-action:none;
  color:#f9edcf; background:radial-gradient(ellipse at 50% 42%,#343333 0%,#22272c 45%,#181d23 100%);
}
.transition-card { width:min(100%,480px); text-align:center; }
.transition-sigil {
  position:relative; display:grid; place-items:center; width:76px; height:76px;
  margin:0 auto 24px; color:#e8c68b;
}
.transition-sigil::before,.transition-sigil::after {
  content:''; position:absolute; inset:10px; border:1px solid #c8aa7266;
}
.transition-sigil::before { transform:rotate(45deg); }
.transition-sigil::after { inset:0; border-radius:50%; border-color:#c8aa722b; }
.transition-sigil span { font-size:30px; text-shadow:0 0 18px #ddba6b55; }
.transition-kicker { margin:0 0 12px; font-size:12px; letter-spacing:.2em; color:#d9bd89; }
.transition-title { margin:0; font-size:clamp(24px,5vw,36px); font-weight:600; line-height:1.6; letter-spacing:.12em; overflow-wrap:anywhere; }
.transition-rule { display:flex; align-items:center; justify-content:center; gap:14px; margin:22px auto 16px; width:min(76%,260px); color:#d7b87e; font-size:7px; }
.transition-rule::before,.transition-rule::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,#bd9f6666); }
.transition-rule::after { transform:rotate(180deg); }
.transition-caption { margin:0; font-size:12px; letter-spacing:.08em; line-height:1.8; color:#c0b7a4; }
.story-battle-transition.reduced-motion .transition-caption { display:none; }
@media(max-height:420px) {
 .transition-sigil { width:52px; height:52px; margin-bottom:12px; }
 .transition-rule { margin-block:12px; }
}