/* Claim effect (reward-fx.js): rising labels, a glow ring, sparks and icons that fly to the top bar. */
#reward-fx{position:fixed;inset:0;z-index:100000;pointer-events:none;overflow:hidden}
.reward-fx-ring{position:fixed;width:120px;height:120px;border-radius:50%;border:4px solid #ffe08a;background:radial-gradient(circle,#fff6c9aa 0,#ffd35155 45%,transparent 70%);box-shadow:0 0 28px #ffcc4acc}
.reward-fx-spark{position:fixed;width:8px;height:13px;border-radius:2px;background:linear-gradient(#fff9c3,#ffb52d,#a35417);box-shadow:0 0 8px #ffad3b}
.reward-fx-icon{position:fixed;width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 4px #000a)}
.reward-fx-label{position:fixed;white-space:nowrap;font:900 24px/1 var(--wr-font-display,'Trebuchet MS',sans-serif);color:#ffe9a8;text-shadow:0 2px 0 #3b2208,0 0 12px #f3b13c,0 3px 6px #000c;letter-spacing:.02em}
.reward-fx-dust{color:#d9b8ff}.reward-fx-rare{color:#8cc7ff}.reward-fx-epic{color:#cf9bff}.reward-fx-legendary{color:#ffb15c}.reward-fx-xp{color:#9be8ff}
.reward-fx-pulse{animation:reward-fx-pulse .6s ease-out}
@keyframes reward-fx-pulse{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.22);filter:brightness(1.8) drop-shadow(0 0 8px #ffd35a)}100%{transform:scale(1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.reward-fx-pulse{animation:none}}
/* A card that was just claimed (also used by the Sigils Road and raid reward cards). */
.reward-fx-claimed{animation:reward-fx-claimed .7s ease-out}
@keyframes reward-fx-claimed{0%{box-shadow:0 0 0 0 #ffd35a;filter:brightness(1)}30%{box-shadow:0 0 0 10px #ffd35a66,0 0 30px #ffd35aaa;filter:brightness(1.5)}100%{box-shadow:0 0 0 0 #ffd35a00;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.reward-fx-claimed{animation:none}}
/* Unlock card (unlock-card.js, approved "One shared unlock card" mockup): the slate .game-confirm with the gold plaque title of dialog.rumble-panel,
   the unit over the .reward-unit[data-rank] card (battle-result.css), one light sweep and a source line. :is(#wr-x,html) outranks ui-system.css's
   gold dialog headings. Reduced motion (.is-calm, html.reduce-motion or the media query): no pop, glow or sweep. */
:is(#wr-x,html) dialog.unlock-card{box-sizing:border-box;width:min(343px,calc(100vw - 32px));max-width:none;max-height:none;overflow:visible;padding:0 16px 18px;border-width:4px;border-radius:24px;text-align:center}
:is(#wr-x,html) dialog.unlock-card .unlock-title{box-sizing:border-box;display:inline-block;max-width:100%;margin:-24px 0 0;padding:7px 18px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:4px solid #10142a;border-radius:16px;background:linear-gradient(#ffe895,#f3c652 42%,#cf8e22);color:#ffcf4d;font-size:21px;font-weight:800;font-family:var(--wr-font-display);line-height:1;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 0 #3a2306,1px 0 0 #3a2306cc,-1px 0 0 #3a2306cc,0 -1px 0 #3a230699,0 2px 4px #0009;box-shadow:inset 0 3px 0 #fff9,inset 0 -4px 0 #9a5c1240,0 5px 0 #10142a,0 12px 22px #0007}
:is(#wr-x,html) dialog.unlock-card .result-stage{position:relative;width:100%;height:170px;margin:4px 0 0}
:is(#wr-x,html) dialog.unlock-card .result-stage::before{content:'';position:absolute;left:50%;top:52%;width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;background:radial-gradient(circle,#fff6c9aa 0,#ffd35155 40%,transparent 70%);opacity:.75}
:is(#wr-x,html) dialog.unlock-card .result-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
:is(#wr-x,html) dialog.unlock-card .reward-unit{box-sizing:border-box;width:100%;max-width:none;overflow:hidden}
:is(#wr-x,html) dialog.unlock-card .reward-unit h2{margin:0 0 8px;padding:0;color:#fff;font-size:24px;overflow-wrap:anywhere}
:is(#wr-x,html) dialog.unlock-card .reward-unit small{display:block;font-size:12px}
:is(#wr-x,html) dialog.unlock-card .reward-progress>span{top:0;bottom:0;display:flex;align-items:center;justify-content:center;line-height:1}
:is(#wr-x,html) dialog.unlock-card .reward-shards{display:flex;align-items:center;gap:5px;line-height:1;font-weight:700}
:is(#wr-x,html) dialog.unlock-card .reward-shards img{display:block;width:17px;height:17px;object-fit:contain}
:is(#wr-x,html) dialog.unlock-card .unlock-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,#fff0 35%,#ffffffb0 50%,#fff0 65%) no-repeat;background-size:250% 100%;background-position:150% 0;opacity:0;animation:unlock-shine 1s .35s ease-out both}
:is(#wr-x,html) dialog.unlock-card .unlock-from{margin:10px 0 0;color:var(--wr-text-dim);font-size:13px;font-weight:600;line-height:1.35}
:is(#wr-x,html) dialog.unlock-card .unlock-from b{color:#fff;font-weight:700}
:is(#wr-x,html) dialog.unlock-card .unlock-actions{display:flex;gap:10px;margin-top:14px}
:is(#wr-x,html) dialog.unlock-card .unlock-actions .wr-btn{flex:1;min-width:0;min-height:48px;margin:0;padding-left:10px;padding-right:10px}
dialog.unlock-card[open]{animation:unlock-pop .28s cubic-bezier(.2,.9,.3,1.15) both}
dialog.unlock-card[open] .result-stage::before{animation:unlock-glow .9s ease-out both}
@keyframes unlock-shine{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-50% 0}}
@keyframes unlock-pop{from{opacity:0;transform:scale(.84) translateY(16px)}65%{opacity:1;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes unlock-glow{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:.75;transform:none}}
:is(#wr-x,html) dialog.unlock-card.is-calm,:is(#wr-x,html) dialog.unlock-card.is-calm *,:is(#wr-x,html) dialog.unlock-card.is-calm .result-stage::before,html.reduce-motion dialog.unlock-card,html.reduce-motion dialog.unlock-card *,html.reduce-motion dialog.unlock-card .result-stage::before{animation:none!important}
html.reduce-motion dialog.unlock-card .unlock-shine,dialog.unlock-card.is-calm .unlock-shine{display:none}
@media(prefers-reduced-motion:reduce){dialog.unlock-card,dialog.unlock-card *,dialog.unlock-card .result-stage::before{animation:none!important}dialog.unlock-card .unlock-shine{display:none}}
