.yj-has-languages{--yj-language-height:56px;scroll-padding-top:145px}
.yj-has-languages>body{padding-top:var(--yj-language-height)}
.yj-language{box-sizing:border-box;position:fixed;z-index:10000;inset:0 0 auto;height:var(--yj-language-height);display:flex;justify-content:center;align-items:center;gap:8px;padding:5px 12px;background:#fffdf8;color:#18231e;border-bottom:1px solid #d6d0c7;font:12px/1.4 Arial,sans-serif;letter-spacing:normal;text-transform:none;direction:ltr;touch-action:auto;color-scheme:light}
.yj-language button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;margin:0;padding:6px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:#18231e;font:600 12px/1.4 Arial,sans-serif;letter-spacing:normal;box-shadow:none;cursor:pointer;white-space:nowrap;backdrop-filter:none}
.yj-language button:hover{background:#eeeae3}
.yj-language button[aria-pressed=true]{background:#e8e4ff;border-color:#6758f3}
.yj-language svg{display:block;flex:none;width:27px;height:18px;border-radius:2px;box-shadow:0 0 0 1px #0002}
.yj-language :focus-visible{outline:3px solid #6758f3;outline-offset:3px}
.yj-has-languages .site-header{top:var(--yj-language-height)}
.yj-has-languages .app{top:var(--yj-language-height);height:calc(100dvh - var(--yj-language-height))}
.yj-has-languages #app{top:var(--yj-language-height)}
.yj-has-languages .booth{height:calc(100svh - var(--yj-language-height));min-height:0}
.yj-has-languages .display-only #stage-shell{height:calc(100dvh - var(--yj-language-height))}
html[lang=ar] body{font-family:Arial,Tahoma,sans-serif;letter-spacing:normal}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .eyebrow,html[lang=ar] button{letter-spacing:normal;line-height:1.5}
html[lang=ar] .card-body,html[lang=ar] .intro,html[lang=ar] .sidebar,html[lang=ar] .guide{text-align:start}
/* Spatial controls retain their physical left/right meaning in every language. */
canvas,video,.court-rig,.three-stage,.xr-stage,.rhythm-stage,#stage-shell,#tetris-controls,.motion-pad{direction:ltr}
html[lang=ar] .logo{direction:ltr;unicode-bidi:isolate}
/* Stack variable-length translations instead of relying on overlapping offsets. */
.coaster-controls{position:absolute;z-index:4;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.coaster-controls .hint,.coaster-controls .item-tray,.coaster-controls .panel{position:static;transform:none;width:100%;margin:0}
.coaster-controls .panel{pointer-events:auto}
.coaster-controls .item-tray{flex-wrap:wrap;justify-content:center}
.coaster-controls .item-btn{flex:1 1 65px;min-width:0;padding:6px;font-size:12px}
html[lang=zh-Hans] h1,html[lang=zh-Hans] h2,html[lang=zh-Hans] h3{letter-spacing:normal;line-height:1.3}
@media(max-width:980px){.yj-has-languages .site-nav{top:calc(70px + var(--yj-language-height))}}
@media(max-width:640px){.yj-language{gap:3px;padding-inline:5px}.yj-language button{gap:5px;padding-inline:7px;font-size:11px}.yj-language svg{width:24px;height:16px}html[lang=ar] .intro h1{font-size:clamp(32px,8vw,52px)}html[lang=ar] .card-bottom{flex-wrap:wrap}}