#x360-pop{z-index:50}#x360-pop .icon .player-pie:before{z-index:1}:root{--x360-trans-ms:.2s;--x360-animation-ms:.5s;--x360-text-first-appear:1s}@keyframes popupEnter{0%{background:0 0;box-shadow:inset 0 0 2px 2px #0000}to{background:#444;box-shadow:inset 0 0 2px 2px #00000040}}@keyframes popupExit{0%{background:#444;box-shadow:inset 0 0 2px 2px #00000040}50%{opacity:1}to{opacity:0;background:0 0;box-shadow:inset 0 0 2px 2px #0000}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes blurIn{0%{filter:blur(6px)}to{filter:blur()}}@keyframes blurInOut{0%{filter:blur()}50%{filter:blur(6px)}to{filter:blur()}}@keyframes icon{0%{scale:1}50%{scale:1.5}to{scale:1}}@keyframes iconImg{0%{scale:.5}50%{scale:1.5}to{scale:1}}@keyframes txtEnter{0%{width:0;margin-left:0;margin-right:0}to{width:var(--txt-width);margin-left:10px;margin-right:32px}}@keyframes txtExit{0%{transform:scaleX(1)}to{transform:scaleX(0)}}#x360-pop-container{width:100vw;height:100vh;position:absolute;top:0;left:0}#x360-pop-container #x360-pop{width:fit-content;height:60px;animation:popupEnter linear var(--x360-animation-ms);background:#444;border-radius:60px;align-items:center;margin:auto;padding:4px;display:flex;position:absolute;inset:85% 0 0;box-shadow:inset 0 0 2px 2px #00000040}#x360-pop-container #x360-pop[data-kill]{animation:popupExit linear var(--x360-animation-ms)}#x360-pop-container #x360-pop[data-kill] .icon .player-pie{animation:blurInOut linear var(--x360-animation-ms)}#x360-pop-container #x360-pop[data-kill] .icon .over-pie{animation:fadeOut ease-in var(--x360-animation-ms), blurInOut ease-in var(--x360-animation-ms)}#x360-pop-container #x360-pop[data-kill] .txts{animation:txtExit ease-out calc(var(--x360-animation-ms) / 2);margin-left:0;margin-right:0}#x360-pop-container #x360-pop[data-kill] .txts .txt{opacity:0}#x360-pop-container #x360-pop .icon{border-radius:60px;width:60px;height:60px;position:relative}#x360-pop-container #x360-pop .icon[animation]{animation:icon ease var(--x360-animation-ms)}#x360-pop-container #x360-pop .icon[animation] .icon-img{animation:iconImg ease calc(var(--x360-animation-ms) / 1.5)}#x360-pop-container #x360-pop .icon .player-pie{width:100%;height:100%;animation:blurIn ease-in var(--x360-animation-ms);border-radius:60px;position:relative;overflow:hidden}#x360-pop-container #x360-pop .icon .player-pie:before{content:"";border-radius:60px;width:100%;height:100%;display:block;position:absolute;box-shadow:inset 0 0 0 4px #000}#x360-pop-container #x360-pop .icon .player-pie .p-1{width:100%;height:100%;position:absolute;transform:rotate(0)}#x360-pop-container #x360-pop .icon .player-pie .p-1:before{content:"";width:50%;height:50%;transition:background var(--x360-trans-ms);background:#666;display:block;position:absolute}#x360-pop-container #x360-pop .icon .player-pie .p-1[active]:before{background:var(--accent)}#x360-pop-container #x360-pop .icon .player-pie .p-2{width:100%;height:100%;position:absolute;transform:rotate(90deg)}#x360-pop-container #x360-pop .icon .player-pie .p-2:before{content:"";width:50%;height:50%;transition:background var(--x360-trans-ms);background:#666;display:block;position:absolute}#x360-pop-container #x360-pop .icon .player-pie .p-2[active]:before{background:var(--accent)}#x360-pop-container #x360-pop .icon .player-pie .p-3{width:100%;height:100%;position:absolute;transform:rotate(180deg)}#x360-pop-container #x360-pop .icon .player-pie .p-3:before{content:"";width:50%;height:50%;transition:background var(--x360-trans-ms);background:#666;display:block;position:absolute}#x360-pop-container #x360-pop .icon .player-pie .p-3[active]:before{background:var(--accent)}#x360-pop-container #x360-pop .icon .player-pie .p-4{width:100%;height:100%;position:absolute;transform:rotate(270deg)}#x360-pop-container #x360-pop .icon .player-pie .p-4:before{content:"";width:50%;height:50%;transition:background var(--x360-trans-ms);background:#666;display:block;position:absolute}#x360-pop-container #x360-pop .icon .player-pie .p-4[active]:before{background:var(--accent)}#x360-pop-container #x360-pop .icon .over-pie{width:100%;height:100%;animation:fadeIn ease-in var(--x360-animation-ms), blurIn ease-in var(--x360-animation-ms);position:absolute;inset:0}#x360-pop-container #x360-pop .icon .over-pie:before,#x360-pop-container #x360-pop .icon .over-pie:after{content:"";background:#000;width:8px;height:100%;margin:auto;display:block;position:absolute;inset:0}#x360-pop-container #x360-pop .icon .over-pie:after{transform:rotate(90deg)}#x360-pop-container #x360-pop .icon .over-pie .circle{background:#000;border-radius:60px;width:72.5%;height:72.5%;margin:auto;position:absolute;inset:0}#x360-pop-container #x360-pop .icon .icon-img{border-radius:60px;width:65%;height:65%;margin:auto;position:absolute;inset:0;overflow:hidden}#x360-pop-container #x360-pop .icon .icon-img img{object-fit:cover;width:100%;height:100%;margin:auto;position:absolute;inset:0}#x360-pop-container #x360-pop .icon .icon-img img[inactive]{opacity:0}#x360-pop-container #x360-pop .txts{height:100%;width:var(--txt-width);animation:txtEnter ease-out var(--x360-animation-ms);transition:width var(--x360-animation-ms);align-items:center;margin-left:10px;margin-right:32px;font-size:20px;line-height:26px;position:relative;overflow:hidden}#x360-pop-container #x360-pop .txts .txt{opacity:0;width:max-content;height:min-content;transition:opacity var(--x360-trans-ms);margin:auto;padding-bottom:4px;position:absolute;inset:0 auto 0 0}#x360-pop-container #x360-pop .txts[data-txt-active="0"] .txt[data-txt-slot="0"],#x360-pop-container #x360-pop .txts[data-txt-active="1"] .txt[data-txt-slot="1"],#x360-pop-container #x360-pop .txts[data-txt-active="2"] .txt[data-txt-slot="2"],#x360-pop-container #x360-pop .txts[data-txt-active="3"] .txt[data-txt-slot="3"],#x360-pop-container #x360-pop .txts[data-txt-active="4"] .txt[data-txt-slot="4"],#x360-pop-container #x360-pop .txts[data-txt-active="5"] .txt[data-txt-slot="5"],#x360-pop-container #x360-pop .txts[data-txt-active="6"] .txt[data-txt-slot="6"],#x360-pop-container #x360-pop .txts[data-txt-active="7"] .txt[data-txt-slot="7"],#x360-pop-container #x360-pop .txts[data-txt-active="8"] .txt[data-txt-slot="8"],#x360-pop-container #x360-pop .txts[data-txt-active="9"] .txt[data-txt-slot="9"]{animation:fadeIn ease var(--x360-animation-ms);animation-delay:calc(var(--x360-animation-ms) / 2)}