.welcome-reward-overlay{position:fixed;inset:0;z-index:var(--layer-dialog);display:flex;align-items:center;justify-content:center;background:#000a;backdrop-filter:blur(var(--popup-backdrop-blur,6px));animation:news-dim .2s ease-out}
.welcome-reward-overlay[hidden]{display:none}
.welcome-reward-popup{position:relative;aspect-ratio:1080/1380;container-type:inline-size;animation:news-enter .2s ease-out;outline:none}
.wr-background{display:block;width:100%;height:100%}
.welcome-reward-popup button{padding:0;border:0;box-shadow:none;cursor:pointer}
.wr-close{position:absolute;right:1.2963%;top:1.0145%;width:7.4074%;aspect-ratio:1;background:none}
.wr-close img{display:block;width:100%;height:100%}
.wr-rewards{position:absolute;top:33.333913%;left:17.59%;width:64.82%;display:flex;justify-content:space-between}
.wr-rewards .bag-slot{width:30%;aspect-ratio:210/230;flex:none;overflow:hidden;box-shadow:inset 0 0 0 2px #f3ecd9,0 0 28px 6px #fff,0 0 12px 3px #fff}
.wr-rewards .bag-slot>img{position:absolute;left:15.6%;top:9.6%;width:68.8%;height:60.8%;object-fit:contain}
.wr-rewards .bag-slot>b{position:absolute;left:0;right:0;bottom:0;height:22%;display:flex;align-items:center;justify-content:center;background:#172c46e8;color:#fff;font:700 3cqw/1 Arial,sans-serif;border-top:1px solid #bd9a58}
.welcome-reward-popup .wr-claim{position:absolute;left:23.84%;bottom:auto;top:91.16%;transform:translateY(-50%);width:52.32%;height:8.84%;background:url('assets/ui/summon-blue-1910.png') center/100% 100% no-repeat;color:white;font:700 3.52cqw/1 sans-serif;display:grid;place-items:center;padding-bottom:1.1cqw;text-shadow:0 2px 3px #001b63}
.wr-claim:disabled{filter:grayscale(.7);cursor:default}
.welcome-reward-overlay.closing{animation:news-close-backdrop .2s ease-out both;pointer-events:none}.welcome-reward-overlay.closing .welcome-reward-popup{animation:news-close-popup .2s ease-out both}
@media(prefers-reduced-motion:reduce){.welcome-reward-popup,.welcome-reward-overlay{animation:none}}
/* Reveal welcome rewards after the artwork, then the claim action. */
.welcome-reward-overlay:not([hidden]) .wr-rewards .bag-slot{animation:welcomeRewardEnter .2s ease-out both;animation-delay:0s}
.welcome-reward-overlay:not([hidden]) .wr-rewards .bag-slot:nth-child(2){animation-delay:0s}
.welcome-reward-overlay:not([hidden]) .wr-rewards .bag-slot:nth-child(3){animation-delay:0s}
.welcome-reward-overlay:not([hidden]) .wr-claim{animation:welcomeActionEnter .2s 0s ease-out both}
@keyframes welcomeRewardEnter{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
@keyframes welcomeActionEnter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.welcome-reward-overlay:not([hidden]) .wr-rewards .bag-slot,.welcome-reward-overlay:not([hidden]) .wr-claim{animation:none}}

.welcome-reward-popup{border-radius:2.222222% / 1.73913%;overflow:hidden}