/* Mutable state belongs below the permanent host, never on its patched attributes. */
/* Clip the tiny content motion locally; changing root overflow can discard its
   reserved scrollbar gutter and shift the whole page on short views. */
html:has(.character-transition-stage) .game-frame{overflow-x:clip}
.character-transition-scroll-reserve{position:absolute;top:0;left:0;width:1px;visibility:hidden;pointer-events:none}
.character-transition-stage{position:fixed;inset:0 auto 0 0;width:100vw;z-index:9000;isolation:isolate;overflow:hidden;cursor:progress;pointer-events:auto;contain:strict}
.character-transition-old{position:absolute;inset:0;background:var(--switch-canvas,var(--theme-canvas,#242b42));overflow:hidden}
.character-transition-stage.is-revealing .character-transition-old{will-change:clip-path}
.character-transition-beam{position:absolute;top:0;bottom:0;left:0;width:0;opacity:0;will-change:transform,opacity;pointer-events:none}
.character-transition-beam::before,.character-transition-beam::after{content:"";position:absolute;inset:0 auto;pointer-events:none}
.character-transition-beam::before{left:-100px;width:200px;background:linear-gradient(90deg,transparent,#a79bff08 15%,#b0a1ff25 36%,#79e4ef50 48%,#c4fdffb8 50%,#79e4ef42 53%,#a79bff1c 72%,transparent);filter:blur(6px)}
.character-transition-beam::after{left:-1px;width:2px;background:linear-gradient(0deg,#86eaf000,#bcadff85 15%,#bafaff 43%,#fff 52%,#8cebf2 72%,#b5a6ff70 90%,#86eaf000);box-shadow:0 0 9px 1px #b1faff80,0 0 26px 4px #8bdfea45}
.character-transition-beam i{position:absolute;top:var(--ray-y);left:0;width:var(--ray-width);height:1px;background:linear-gradient(90deg,#dcffffb0,#81e5ef50 28%,#b1a3ff20 75%,transparent);transform-origin:left center;transform:scaleX(var(--switch-direction));box-shadow:0 0 6px #81e5ef38}
.character-transition-beam i::before{content:"";position:absolute;left:-1px;top:-1px;width:3px;height:3px;border-radius:50%;background:#d4fbff;box-shadow:0 0 8px #8eeefa}
@media(prefers-reduced-motion:reduce){.character-transition-beam{display:none}}
.character-switcher[data-character-switch-pending="true"]{cursor:progress}
.character-switcher[data-character-switch-pending="true"] :is(button,summary){cursor:progress}
.character-switcher[data-character-switch-pending="true"] [data-character-switch-trigger="true"]{background:var(--theme-accent-soft,#66dce524);box-shadow:inset 0 0 0 1px var(--theme-accent,#6bdfeb),0 0 14px #79e4ef28;color:var(--theme-ink,#effdff)}