/* Shared styles apply only to the new language control and its transition. */
.locale-footer {position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:40;}
.locale-switch {position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:244px;height:52px;padding:4px;background:rgba(13,12,17,.86);border:1px solid rgba(190,180,204,.25);border-radius:3px;box-shadow:0 8px 24px #0005,inset 0 1px 0 #ffffff06;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.locale-switch::before,.locale-switch::after {content:'';position:absolute;pointer-events:none;width:14px;height:5px;border-color:#c7b7d8;border-style:solid;opacity:.6;}
.locale-switch::before {top:-1px;left:-1px;border-width:1px 0 0 1px;}
.locale-switch::after {bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-color:#d3b493;}
.locale-selection {position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/2);border:1px solid #c3b4d229;border-radius:2px;background:linear-gradient(120deg,#a176c51c,#ffffff09 54%,#d99a6510);box-shadow:inset 0 1px 0 #ffffff08;transition:transform .52s cubic-bezier(.18,1,.22,1);overflow:hidden;z-index:-1;}
.locale-selection::after {content:'';position:absolute;bottom:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,#aa82c7,#ded2e7 50%,#b99874);opacity:.85;}
.locale-selection::before {content:'';position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#e2c5ff2b 4px 5px),linear-gradient(100deg,transparent,#bc9bd677,transparent);transform:translateX(-100%);}
.locale-switch[data-current='en'] .locale-selection {transform:translateX(100%);}
.locale-switch button {appearance:none;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:0 13px;border:0;background:transparent;color:#a79fae;cursor:pointer;font:500 15px/1 'Pretendard Variable',system-ui,sans-serif;letter-spacing:.015em;-webkit-tap-highlight-color:transparent;transition:color .25s;}
.locale-switch button::before {content:'';width:3px;height:3px;background:currentColor;opacity:.25;transition:opacity .25s,box-shadow .25s;}
.locale-switch button[aria-pressed='true'] {color:#efe9f3;}
.locale-switch button[aria-pressed='true']::before {opacity:1;box-shadow:0 0 7px #d7b8f68c;}
.locale-switch button:hover {color:#fff;}
.locale-switch button:focus-visible {outline:1px solid #d9c3eb;outline-offset:-2px;}
.locale-divider {position:absolute;top:21px;left:50%;width:1px;height:10px;background:#b4a8be29;}
#bgm-bar.locale-entry-hidden {display:none!important;}
.locale-fx {position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden;opacity:0;background:radial-gradient(ellipse at 46% 54%,#8a3dc819,transparent 50%),radial-gradient(ellipse at 56% 46%,#f5820012,transparent 52%);}
.locale-fx::before {content:'';position:absolute;inset:-5%;background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,transparent 1px 5px);opacity:.4;}
.locale-fx i {position:absolute;left:-8%;right:-8%;top:var(--y);height:var(--h);background:linear-gradient(90deg,transparent,#b078d848 30%,#ece3f260 50%,#d59a6848 68%,transparent);opacity:0;mix-blend-mode:screen;}
.locale-changing {pointer-events:none;}
.locale-changing .locale-selection::before {animation:localeCoreNoise .48s steps(3,end) .04s both;}
.locale-changing .locale-switch button span {animation:localeTextFracture .4s steps(2,end) .1s both;}
.locale-changing .locale-fx {animation:localeVeil .56s ease both;}
.locale-changing .locale-fx::before {animation:localeGrain .46s steps(4,end) .06s both;}
.locale-changing .locale-fx i {animation:localeSlice .36s steps(2,end) var(--delay) both;}
.locale-changing .faction-logo {animation:localeLogoFracture .38s steps(2,end) .12s both;}
.locale-arriving .locale-footer {animation:localeArrival .3s ease both;}
@keyframes localeCoreNoise {0%{opacity:0;transform:translateX(-90%)}32%{opacity:.9;transform:translateX(-15%) skewX(-9deg)}56%{opacity:.5;transform:translateX(20%) skewX(8deg)}100%{opacity:0;transform:translateX(90%)}}
@keyframes localeTextFracture {0%,100%{transform:none;text-shadow:none}25%{transform:translateX(-1px);text-shadow:2px 0 #b76dd199,-2px 0 #d09a6399}50%{transform:translateX(1px);text-shadow:-2px 0 #b76dd188,1px 0 #d09a6388}75%{transform:none;text-shadow:1px 0 #cab3dd77}}
@keyframes localeLogoFracture {0%,100%{transform:none}22%{transform:translateX(-2px) skewX(.4deg)}44%{transform:translateX(3px) skewX(-.3deg)}66%{transform:translateX(-1px)}}
@keyframes localeVeil {0%,100%{opacity:0}30%{opacity:.85}60%{opacity:.5}}
@keyframes localeGrain {0%,100%{transform:none;opacity:0}25%{transform:translate(-2px,1px);opacity:.5}50%{transform:translate(3px,-1px);opacity:.35}75%{transform:translate(-1px,2px);opacity:.2}}
@keyframes localeSlice {0%,100%{opacity:0;transform:translateX(0)}25%{opacity:.6;transform:translateX(-12px)}50%{opacity:.25;transform:translateX(9px)}70%{opacity:.4;transform:translateX(-4px)}}
@keyframes localeArrival {from{opacity:.65;filter:blur(.5px)}to{opacity:1;filter:none}}
@media(max-height:650px){.locale-footer{bottom:calc(16px + env(safe-area-inset-bottom,0px));}}
@media(prefers-reduced-motion:reduce){.locale-selection,.locale-switch button{transition:none;}.locale-changing *, .locale-changing *::before,.locale-arriving .locale-footer{animation:none!important;}}