/* Shared entrance language: immediately interactive, no opening delay. */
:root{--ui-window-time:160ms;--ui-panel-time:130ms;--ui-enter-ease:cubic-bezier(.2,.7,.3,1)}
dialog[open],#modal:not([hidden])>.box,#paused:not([hidden])>.box,#result:not([hidden])>.box,#mp-sheet:not([hidden])>.mp-scroll{animation:ui-window-enter var(--ui-window-time) var(--ui-enter-ease) both}
dialog[open]::backdrop{animation:ui-backdrop-enter var(--ui-window-time) ease-out both}
#world-burger[open]>.world-menu-body,#hud-menu[open]>.hud-menu-content{animation:ui-menu-enter var(--ui-panel-time) var(--ui-enter-ease) both}
#duel-chat-panel:not([hidden]),#mp-sheet:not([hidden]):has(#direct-pane:not([hidden]))>.mp-scroll,#mp-sheet:not([hidden]):has(#mp-chat:not([hidden]))>.mp-scroll{animation:ui-chat-enter var(--ui-panel-time) var(--ui-enter-ease) both}
@keyframes ui-window-enter{from{opacity:0;translate:0 6px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes ui-menu-enter{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@keyframes ui-chat-enter{from{opacity:0;translate:6px 0}to{opacity:1;translate:0 0}}
@keyframes ui-backdrop-enter{from{opacity:0}to{opacity:1}}
.arrival-image-loader{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#182a23;color:#e2cfaa;font:13px Arial}
.arrival-image-loader[hidden]{display:none}
.arrival-image-loader i{width:28px;height:28px;border:2px solid #b7a06a44;border-top-color:#e2cfaa;border-radius:50%;animation:ui-image-spin .8s linear infinite}
@keyframes ui-image-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop,#modal:not([hidden])>.box,#paused:not([hidden])>.box,#result:not([hidden])>.box,#mp-sheet:not([hidden])>.mp-scroll,#world-burger[open]>.world-menu-body,#hud-menu[open]>.hud-menu-content,#duel-chat-panel:not([hidden]){animation:none!important}.arrival-image-loader i{animation:none}}

.portrait-card-frame{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:4px;background:#142019}.avatar-option .portrait-card-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.portrait-card-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#142019;color:#e2cfaa;font:12px Arial}.portrait-card-loader[hidden]{display:none}.portrait-card-loader i{width:23px;height:23px;border:2px solid #b7a06a44;border-top-color:#e2cfaa;border-radius:50%;animation:ui-image-spin .8s linear infinite}@media(prefers-reduced-motion:reduce){.portrait-card-loader i{animation:none}}

/* Elevate the entire ancestor stack, not only the dropdown itself. */
body:has(#hud-menu[open]) #shell{z-index:1100}body:has(#hud-menu[open]) #shell>.top{position:relative;z-index:20!important}body:has(#hud-menu[open]) #shell>.bottom{position:relative;z-index:0!important}#hud-menu[open]{z-index:30}body:has(#world-burger[open]) #menu{z-index:1100}body:has(#world-burger[open]) #menu .world-heading{z-index:20!important}#world-burger[open]{z-index:30}#duel-chat-panel{z-index:1200!important}#mp-sheet{z-index:1300!important}#modal{z-index:1400!important}#paused,#result{z-index:1400}
@media(max-width:650px){#hud-menu[open]>.hud-menu-content{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}}