.flying-coin{position:absolute;width:38px;height:38px;opacity:0;overflow:hidden;transition:all .4s ease-out;&:after{content:"";position:absolute;z-index:1;inset:0;border-radius:8px;width:11px;margin:auto;background-size:38px 400%;background-position:center}>div{position:relative;z-index:2;perspective:10000px;transform-style:preserve-3d;transform-origin:center;animation:spin 2.5s infinite linear;>*{width:100%;height:100%;position:absolute;backface-visibility:inherit;background-size:cover}em{filter:blur(.02em);&:first-of-type{transform:translateZ(-.12em) rotateY(-6deg)}&:last-of-type{transform:translateZ(.12em) rotateY(6deg)}}i{filter:blur(.02em);&:nth-of-type(1){transform:translateZ(-.12em)}&:nth-of-type(2){transform:translateZ(-.1em)}&:nth-of-type(3){transform:translateZ(-.08em)}&:nth-of-type(4){transform:translateZ(-.04em)}&:nth-of-type(5){transform:translateZ(-.02em)}&:nth-of-type(6){transform:translateZ(0)}&:nth-of-type(7){transform:translateZ(.02em)}&:nth-of-type(8){transform:translateZ(.04em)}&:nth-of-type(9){transform:translateZ(.06em)}&:nth-of-type(10){transform:translateZ(.08em)}&:nth-of-type(11){transform:translateZ(.1em)}&:nth-of-type(12){transform:translateZ(.12em)}}}>div{width:38px;height:38px;>div:first-child{background:url(/_astro/coin.kzpZvswB.svg) no-repeat 100% 100%}>div:last-child,&:after,i,em{background:url(/_astro/coin.kzpZvswB.svg) no-repeat 100% 100%}}}.header{display:flex;justify-content:space-between;align-items:center;height:48px;gap:12px}.logo{width:40px;height:40px;background:#444;border-radius:8px}.currency-bar{display:flex;gap:8px;align-items:center;width:100%}.currency-block{width:100%;height:32px;background:#444;border-radius:16px}.avatar{width:32px;height:32px;background:#444;border-radius:16px}.grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}.deposit-button{padding:8px 18px;font-size:.9em;cursor:pointer;border:none;background-color:#f7b731;color:#1a1a1d;border-radius:6px;font-weight:600;transition:background-color .3s ease}.deposit-button:hover{background-color:#fc6}.balance-display{position:relative;overflow:visible;display:flex;align-items:center;font-size:1.1em;min-width:auto;max-width:50px;margin:auto}.balance-content-wrapper{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:6px 12px;border-radius:50px;overflow:hidden;z-index:1;color:#fff;font-weight:600}.balance-display.shake{animation:targetShake .3s linear infinite 1s}#balance-amount{color:#f0f0f0;text-align:left;white-space:nowrap;line-height:1}@keyframes targetShake{0%,to{transform:scale(1)}16%,48%{transform:scale(1.1)}32%,64%{transform:scale(.9)}}@keyframes spin{0%{transform:rotateY(-180deg)}to{transform:rotateY(180deg)}}@keyframes highlightSweep{0%{left:-100%;opacity:.9}to{left:150%;opacity:0}}#animationLayer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}@keyframes flyAndSuck{0%{opacity:1;transform:translate(var(--start-x),var(--start-y)) scale(.8)}25%{transform:translate(var(--mid-x),var(--mid-y)) scale(1.5);opacity:1}75%{transform:translate(var(--mid-x),var(--mid-y)) scale(1.1);opacity:1}95%{transform:translate(var(--end-x),var(--end-y)) scale(.8)}to{transform:translate(var(--end-x),var(--end-y)) scale(.5);opacity:0}}.flying-coin.animate{animation-name:flyAndSuck;animation-duration:1.4s;animation-timing-function:cubic-bezier(0,.53,1,.24);animation-fill-mode:forwards}#triggerButton{padding:14px 30px;font-size:1.15em;cursor:pointer;border:none;background-color:#f7b731;color:#1a1a1d;border-radius:8px;font-weight:700;transition:background-color .2s ease,transform .1s ease;box-shadow:0 2px 5px #0003;z-index:20}#triggerButton:hover{background-color:#fc6}#triggerButton:active{transform:scale(.97);box-shadow:inset 0 1px 3px #0000004d}#triggerButton:disabled{background-color:#aaa;color:#666;cursor:not-allowed;opacity:.7}.box{background:#444;border-radius:8px;padding:12px;height:100px;color:#fff}.claim-button{width:100%;padding:16px 0;background:linear-gradient(180deg,#ffe066,#ffd000);border:none;border-radius:12px;box-shadow:0 2px 8px #00000026;font-size:1.5rem;font-weight:900;color:#fff;letter-spacing:1px;text-align:center;cursor:pointer;margin:0 auto;display:block;text-transform:uppercase;transition:all .3s ease-in-out;text-shadow:0 0 0px #000,0 -1px 1px #000,0 1px 1px #000,0 2px 1px #000}.claim-button:hover{transition:all .3s ease-in-out;filter:brightness(1.1)}
