/* The raster contains the exact names; accessible names remain in the DOM. */
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner]{
 --name-x:0%;--name-y:0%;
 background-image:url('https://worldruncdn.ttok.im/assets/v1/7a46226e3cc49f319617086010f97c6aa404b67bba819b2093fd320d2c2985aa/names-ko.webp')!important;
 background-size:200% 400%!important;background-position:var(--name-x) var(--name-y)!important;
 width:120px!important;min-width:120px!important;height:44px!important;min-height:44px!important;
 padding:0!important;border:0!important;border-radius:22px!important;
 color:transparent!important;font-size:0!important;text-shadow:none!important;
 box-shadow:0 3px 7px #073b4740!important;opacity:1;
}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="toki"]{--name-x:100%}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="orange"]{--name-y:33.333333%}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="vivi"]{--name-x:100%;--name-y:33.333333%}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="sora"]{--name-y:66.666667%}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="haru"]{--name-x:100%;--name-y:66.666667%}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="momo"]{--name-y:100%}
html:lang(ko) :is(.showcase-name,#showcase-name)[data-runner="kai"]{--name-x:100%;--name-y:100%}
html:lang(ko) .showcase-name[data-selected="true"]::before,
html:lang(ko) .showcase-name[data-locked="true"]::after{position:absolute;top:-5px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font-size:15px;color:#fff;background:#077b77;border:2px solid #b1fff0;text-shadow:none}
html:lang(ko) .showcase-name[data-selected="true"]::before{content:'✓';left:-5px}
html:lang(ko) .showcase-name[data-locked="true"]::after{content:'🔒';right:-5px;background:#173e69}
button:focus-visible{outline:3px solid #fff7b5!important;outline-offset:3px}
button:enabled:active{filter:brightness(.88)}
@media(prefers-reduced-motion:reduce){button{transition:none!important;animation:none!important}}

/* A control is one visual unit: surface, icon and label reveal together. */
button{isolation:isolate}
button>*{transition-delay:0s!important;animation-delay:0s!important}
/* The FairyGUI stage paints the loading screen itself; the gate must not hide it. */
body:not([data-ready="true"])>:not(#loading):not(#fairygui-stage):not(#fairygui-ime):not(#render-diagnostics):not(script){visibility:hidden!important;pointer-events:none!important}
body:not([data-ready="true"]) #loading{visibility:visible;opacity:1;transition:none}

/* Picker models stream only on demand, behind a single preparation surface. */
.showcase-dialog.showcase-preparing>*{visibility:hidden!important}
.showcase-dialog.showcase-preparing::after{content:attr(data-loading-copy);position:absolute;inset:0;display:grid;place-items:center;background:#e4f5f6;color:#12334b;font-weight:900;font-size:20px;z-index:20}
