/* Shared bits of the old Rewards screen (the tab itself is now rewards-vault.css): quest pictures and
   the coins that fly into the wallet when a reward is claimed (coin-pop.js coinBurst; also used by the Shop). */
#rewards-view .reward-glyph{display:block;width:58px;height:auto;filter:drop-shadow(0 3px 2px #0009)}
/* Claim effect (owner's ask, 2026-11-03; Blender coin 2026-11-07): each coin pops up, stands up with a bounce and turns over
   and over (the 24 frames of assets/menu/coin-spin.webp, a full turn every half second, each coin starting at its own --ph)
   while it arcs into the coin counter. The span flies, b squashes, i shows the frames. --d staggers the coins, --t is coin-pop.js COIN_FLIGHT_MS. */
.fly-coin{position:fixed;z-index:60;width:32px;height:32px;margin:-16px 0 0 -16px;pointer-events:none;animation:coin-fly var(--t,1.1s) cubic-bezier(.45,0,.25,1) var(--d,0s) both}
.fly-coin b{display:block;width:100%;height:100%;animation:coin-stand var(--t,1.1s) ease-out var(--d,0s) both}
.fly-coin i{display:block;width:100%;height:100%;background:url(/assets/menu/coin-spin.webp) 0 0/2400% 100% repeat-x;filter:drop-shadow(0 2px 2px #0008);animation:coin-spin .5s steps(24) calc(0s - var(--ph,0s)) infinite}
@keyframes coin-fly{0%{transform:translate(0,0) scale(.3);opacity:0}8%{transform:translate(0,-6px) scale(1.3);opacity:1}24%{transform:translate(calc(var(--sx)*.25),calc(var(--sy)*.4)) scale(1.2)}45%{transform:translate(var(--sx),var(--sy)) scale(1.1)}100%{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:.5}}
@keyframes coin-stand{0%,14%{transform:none}18%{transform:scale(1.15,.6)}24%{transform:scale(.92,1.18)}30%,100%{transform:none}}
@keyframes coin-spin{to{background-position:calc(2400% / 23) 0}}
/* The big coin pop (owner's pick C, 2026-11-07; coin-pop.js coinPop): the giant coin rising out of a chest, its frame
   set from the script as it spins faster and faster, and the flash it bursts in. */
.coin-pop{position:fixed;z-index:61;pointer-events:none;transform:translate(-50%,-50%)}
.coin-pop i{display:block;width:100%;height:100%;background:url(/assets/menu/coin-spin.webp) 0 0/2400% 100% no-repeat;filter:drop-shadow(0 0 14px #ffd24a) drop-shadow(0 4px 4px #0008)}
/* Gems (owner's ask, 2026-11-07): the same flights and pop with the Blender gem's turn, assets/menu/gem-spin.webp. */
.fly-coin.is-gem i,.coin-pop.is-gem i{background-image:url(/assets/menu/gem-spin.webp)}
.coin-pop.is-gem i{filter:drop-shadow(0 0 14px #f07cff) drop-shadow(0 4px 4px #0008)}
.coin-flash.is-gem{background:radial-gradient(circle,#fff4ff 0 30%,#f4a8ffcc 50%,transparent 70%)}
/* The gem counter that slides in under the top bar's coin counter while gems land (coin-pop.js gemCounter), drawn like it. */
.gem-float{position:fixed;z-index:59;pointer-events:none;min-width:63px;height:30px;padding:4px 9px 4px 26px;border:2px solid #06122d;border-radius:8px;background:linear-gradient(#284676,#101e40);box-shadow:inset 0 1px #7a9bc7,0 2px #02091b;color:#fff9df;font:400 17px 'Lilita One',sans-serif;text-shadow:0 2px #060d24;display:flex;align-items:center;justify-content:flex-end;font-variant-numeric:tabular-nums}
.gem-float>svg{position:absolute;left:-12px;top:-5px;width:35px;height:34px;filter:drop-shadow(0 2px 0 #3b0f63)}
.gem-float b{font-weight:400}
/* The upgrade ticket flying to the LV shield when it is used (coin-pop.js ticketFly), above the fighter page. */
.fly-ticket{position:fixed;z-index:61;pointer-events:none;transform:translate(-50%,-50%)}
.fly-ticket i{display:block;width:100%;height:100%;background:url(/assets/menu/ticket-spin.webp) 0 0/2400% 100% no-repeat;filter:drop-shadow(0 0 10px #ffd24a) drop-shadow(0 4px 4px #0008)}
.coin-flash.is-ticket{background:radial-gradient(circle,#fffbe6 0 30%,#ffd24acc 50%,transparent 70%)}
.coin-flash{position:fixed;z-index:61;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 30%,#ffe27acc 50%,transparent 70%)}
/* The coin balance bumps as each flying coin lands in it. */
:is(.coin-balance,.co-wallet,.gem-float).coin-hit{animation:coin-hit .18s ease-out}
@keyframes coin-hit{50%{transform:scale(1.12);filter:brightness(1.3)}}
/* ...and its coin flips edge-on and back as the first and last ones land (coin-flip, set in coin-pop.js coinBurst). */
:is(.coin-balance,.shop-currency,.co-wallet,.gem-float).coin-flip svg{animation:coin-flip .24s ease-in-out}
@keyframes coin-flip{50%{transform:scaleX(.15)}}