/* Claim moment shared by the rank road and season pass. Purple/gold, fits landscape phones without scrolling. */
dialog.reward-reveal{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff0c9;overflow:hidden;z-index:2147483000}
dialog.reward-reveal::backdrop{background:radial-gradient(ellipse at 50% 42%,#4a2f6ef5,#150d22fc 70%)}
.reward-reveal .rr-stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3vh,26px);padding:16px;box-sizing:border-box}
.reward-reveal .rr-rays{position:absolute;left:50%;top:42%;width:150vmax;height:150vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#ffe39a1c 0deg 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,#0008 28%,transparent 55%);mask:radial-gradient(circle,#000 0,#0008 28%,transparent 55%);opacity:0;pointer-events:none}
.reward-reveal.is-legendary .rr-rays{background:repeating-conic-gradient(from 0deg,#ffe39a2a 0deg 6deg,transparent 6deg 14deg,#c9a5f022 14deg 18deg,transparent 18deg 24deg)}
.reward-reveal .rr-ring{position:absolute;left:50%;top:42%;width:120px;height:120px;translate:-50% -50%;border-radius:50%;border:3px solid #ffe39a;box-shadow:0 0 30px #ffe39a,inset 0 0 24px #ffe39a88;opacity:0;pointer-events:none}
.reward-reveal .rr-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.reward-reveal .rr-head{position:relative;text-align:center}
.reward-reveal .rr-kicker{display:block;font:800 12px/1 system-ui,sans-serif;letter-spacing:.3em;color:#edd2a5;margin-bottom:6px}
.reward-reveal .rr-title{margin:0;font:700 clamp(30px,6vh,52px)/1.05 Georgia,serif;color:#ffe7ae;text-shadow:0 3px 0 #3a2153,0 0 24px #f3d99588}
.reward-reveal .rr-sub{margin:6px 0 0;color:#d9c8ec;font-size:14px}
.reward-reveal .rr-cards{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vw,20px);max-width:min(1100px,96vw);perspective:900px}
.reward-reveal .rr-card{--rr-color:#e9cf91;position:relative;width:170px;height:210px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:12px 10px 14px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rr-color) 35%,#3c2858),#24183a 72%);border:2px solid var(--rr-color);box-shadow:inset 0 0 0 3px #1d1430,inset 0 0 0 4px color-mix(in srgb,var(--rr-color) 40%,transparent),0 10px 24px #0b071c99;opacity:0;transform:translateY(40px) rotateY(85deg) scale(.6)}
.reward-reveal .rr-card[data-rarity=legendary],.reward-reveal .rr-card[data-rarity=exclusive]{--rr-color:#ffd77a}
.reward-reveal .rr-card[data-rarity=epic]{border-color:#ce9cff}
.reward-reveal .rr-card-glow{position:absolute;left:50%;top:40%;width:150%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,color-mix(in srgb,var(--rr-color) 55%,transparent),transparent 60%);opacity:.55;pointer-events:none}
.reward-reveal .rr-card-art{position:relative;flex:1 1 auto;width:100%;min-height:0;display:grid;place-items:center}
.reward-reveal .rr-card-art>:is(img,svg,canvas){max-width:92%;max-height:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #0a071ccc)}
.reward-reveal .rr-card[data-kind=coins] .rr-card-art img,.reward-reveal .rr-card[data-kind=shards] .rr-card-art img{height:70%}
.reward-reveal .rr-card-name{position:relative;font:700 17px/1.15 Georgia,serif;color:#fff3d2;text-align:center;overflow-wrap:anywhere}
.reward-reveal .rr-card[data-kind=coins] .rr-card-name,.reward-reveal .rr-card[data-kind=shards] .rr-card-name{font:800 26px/1 system-ui,sans-serif}
.reward-reveal .rr-card[data-kind=coins] .rr-card-name{color:#ffd77a}.reward-reveal .rr-card[data-kind=shards] .rr-card-name{color:#7fe0d0}
.reward-reveal .rr-card-tag{position:relative;text-align:center;font:700 10px/1.2 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--rr-color)}
.reward-reveal .rr-card-shine{position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,#ffffff55 50%,transparent 58%);translate:-100% 0;pointer-events:none}
.reward-reveal .rr-more{justify-content:center;background:#2a1d3d;--rr-color:#b9a2d6}
.reward-reveal .rr-collect{min-width:200px;padding:12px 34px;border-radius:14px;border:0;background:linear-gradient(#ffe7ae,#d9b46a);color:#2a1d3d;font:800 18px/1 system-ui,sans-serif;box-shadow:0 4px 0 #8a6420,0 10px 20px #0a071c99;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px)}
.reward-reveal .rr-collect:is(:hover,:focus-visible){filter:brightness(1.08);outline:2px solid #fff0c9;outline-offset:3px}
.reward-reveal .rr-skip{position:absolute;bottom:12px;left:50%;translate:-50% 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cdbbe0aa}
.reward-reveal.is-done .rr-skip{display:none}
.reward-reveal.is-done .rr-collect{opacity:1;pointer-events:auto;transform:none;transition:opacity .25s,transform .25s}
/* Motion */
.reward-reveal.is-playing .rr-rays,.reward-reveal.is-done .rr-rays{opacity:1;animation:rr-rays 18s linear infinite,rr-fade .5s ease-out}
.reward-reveal.is-playing .rr-ring{animation:rr-ring .9s cubic-bezier(.2,.7,.3,1) .1s both}
.reward-reveal.is-playing .rr-head{animation:rr-pop .55s cubic-bezier(.2,1.5,.4,1) .15s both}
.reward-reveal .rr-card.is-in{opacity:1;transform:none;transition:opacity .2s,transform .55s cubic-bezier(.2,1.45,.4,1)}
.reward-reveal .rr-card.is-in .rr-card-shine{animation:rr-shine .9s ease-out .35s both}
.reward-reveal .rr-card.is-special{animation:rr-special 2.4s ease-in-out .6s infinite}
.reward-reveal .rr-card.is-special .rr-card-glow{opacity:.9;animation:rr-glow 2.4s ease-in-out infinite}
@keyframes rr-rays{to{rotate:360deg}}
@keyframes rr-fade{from{opacity:0}}
@keyframes rr-ring{0%{opacity:1;scale:.2}100%{opacity:0;scale:6}}
@keyframes rr-pop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
@keyframes rr-shine{to{translate:100% 0}}
@keyframes rr-special{50%{box-shadow:inset 0 0 0 3px #1d1430,inset 0 0 0 4px color-mix(in srgb,var(--rr-color) 60%,transparent),0 0 34px color-mix(in srgb,var(--rr-color) 70%,transparent)}}
@keyframes rr-glow{50%{scale:1.15}}
.reward-reveal.is-calm *{animation:none!important;transition:none!important}
@media(max-height:500px){.reward-reveal .rr-stage{gap:8px;padding:8px 16px}.reward-reveal .rr-kicker{font-size:9px;margin-bottom:3px}.reward-reveal .rr-title{font-size:28px}.reward-reveal .rr-card{width:118px;height:148px;padding:8px 6px 10px;border-radius:14px}.reward-reveal .rr-cards.is-many .rr-card{width:96px;height:120px}.reward-reveal .rr-card-name{font-size:13px}.reward-reveal .rr-card[data-kind=coins] .rr-card-name,.reward-reveal .rr-card[data-kind=shards] .rr-card-name{font-size:19px}.reward-reveal .rr-card-tag{font-size:8px}.reward-reveal .rr-collect{padding:9px 28px;font-size:15px;min-width:160px}.reward-reveal .rr-skip{bottom:4px;font-size:9px}}