.battlepass-reward {
    --bp-green: #2efb33;
    --bp-blue: #5bbcff;
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
    isolation: isolate;
    background: rgba(29, 31, 33, .96);
}

.battlepass-reward[hidden] {
    display: none !important;
}

body.level-up-reward-open {
    overflow: hidden;
}

.battlepass-reward__rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(170vmax, 720px);
    aspect-ratio: 1;
    opacity: .72;
    background: url('/img/effects/reward-rays-success.svg?v=1') center / contain no-repeat;
    pointer-events: none;
}

.battlepass-reward--show .battlepass-reward__rays {
    animation: battlepassRewardRays 9s linear infinite;
}

.battlepass-reward__dialog {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    width: min(390px, 100%);
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: auto 0;
    padding: 18px;
    box-sizing: border-box;
    color: #e7eaed;
    text-align: center;
    border: 2px solid #3a3a3a;
    outline: 2px solid #07111a;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .72);
    background: #252729 linear-gradient(#2d2f32 50%, #1d1f21 50%);
    overflow-y: auto;
}

.battlepass-reward__dialog h3 {
    color: var(--bp-green);
    font-size: clamp(21px, 5vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    text-shadow: 0 1px #18351a, 0 0 10px rgba(46, 251, 51, .18);
}

.battlepass-reward__dialog p {
    margin: 5px 0 0;
    color: #bbc1c7;
}

.battlepass-reward__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 16px;
}

.battlepass-reward-item {
    display: grid;
    grid-template-rows: 62px auto auto;
    gap: 3px;
    justify-items: center;
    width: 92px;
    min-height: 106px;
    padding: 8px 4px;
    box-sizing: border-box;
    background: #111315;
    border: 1px solid #33404b;
    border-radius: 7px;
    animation: battlepassRewardItem .52s cubic-bezier(.18, .89, .32, 1.25) both;
}

.level-up-reward:not(.battlepass-reward--show) .battlepass-reward-item {
    animation: none;
}

.level-up-reward.battlepass-reward--show .battlepass-reward-item {
    animation: levelUpRewardItem .9s cubic-bezier(.16, .84, .3, 1.18) both;
}

.battlepass-reward-item img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7));
}

.battlepass-reward-item strong {
    color: #f3f5f7;
    font-size: 15px;
}

.battlepass-reward-item span {
    color: #c5c9ce;
    font-size: 10px;
    line-height: 1.15;
}

.level-up-reward__notice {
    margin: -5px 0 14px;
    color: #c5c9ce;
    line-height: 1.35;
}

.level-up-reward__notice img {
    vertical-align: middle;
    top: unset;
}

@keyframes battlepassRewardRays {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes battlepassRewardItem {
    from { opacity: 0; transform: translateY(14px) scale(.72); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes levelUpRewardItem {
    from { opacity: 0; transform: translateY(16px) scale(.74); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .battlepass-reward--show .battlepass-reward__rays,
    .battlepass-reward-item,
    .level-up-reward.battlepass-reward--show .battlepass-reward-item {
        animation: none;
    }
}