.bonus-overlay{position:absolute;inset:0;z-index:8;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:transparent;animation:bonus-envelope var(--bonus-duration) both}
.bonus-heading{text-align:center;z-index:3;max-width:90%;animation:bonus-title var(--bonus-duration) both}
.bonus-heading>strong{display:block;font-size:30px;font-weight:900;letter-spacing:2px;color:#ffe69a;text-shadow:0 3px 0 #9d502c,0 0 28px #ffc55480}
.bonus-heading>span{display:block;font-size:15px;color:#ffedc8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bonus-scene{position:relative;width:280px;height:260px;max-width:100%;flex:0 0 auto;transform:scale(.72);margin:-30px 0}
.bonus-halo{position:absolute;inset:-20px;background:radial-gradient(circle,#ffdd8520,transparent 55%);border-radius:50%;animation:bonus-halo var(--bonus-duration) both}
.gift-box{position:absolute;width:150px;height:135px;left:calc(50% - 75px);top:95px;animation:gift-appear var(--bonus-duration) both;filter:drop-shadow(0 14px 14px #0006)}
.gift-body{position:absolute;inset:25px 5px 0;border-radius:5px 5px 14px 14px;background:linear-gradient(90deg,transparent 39%,#ffd65c 39%,#ffed96 52%,#dda12b 61%,transparent 61%),linear-gradient(115deg,#ff6584,#d81851 55%,#980d46);box-shadow:inset 5px 0 0 #ffb0b326,inset -7px -8px 0 #66042f35,inset 0 5px 8px #59032560}
.gift-body::after{content:'';position:absolute;top:45%;height:20px;left:0;right:0;background:linear-gradient(#ffe98a,#eeb134);box-shadow:0 3px 3px #6c0e4133}
.gift-lid{position:absolute;left:-4px;right:-4px;top:8px;height:37px;border-radius:7px;background:linear-gradient(90deg,transparent 38%,#ffdc64 38%,#fff0a7 52%,#db9e21 62%,transparent 62%),linear-gradient(#ff7294,#df1f55);box-shadow:inset 0 3px 0 #ffc5bb70,0 6px 9px #6a133866;transform-origin:12% 70%;animation:gift-open var(--bonus-duration) both;z-index:3}
.gift-bow{position:absolute;bottom:28px;width:64px;height:42px;border:11px solid #ffda60;border-radius:65% 65% 40% 55%;box-shadow:inset 0 0 0 2px #bc7418,0 2px 2px #a2661b55}
.bow-left{left:18px;transform:rotate(25deg)}.bow-right{right:18px;transform:rotate(-25deg)}
.gift-knot{position:absolute;width:25px;height:23px;left:calc(50% - 12px);top:-17px;border-radius:9px;background:linear-gradient(#fff0a1,#e1a027);box-shadow:0 2px 4px #99612260}
.gift-light{position:absolute;inset:-60px -35px 0;background:radial-gradient(ellipse at bottom,#fff8c3cc,#ffda6055 30%,transparent 65%);animation:gift-light var(--bonus-duration) both}
.bonus-coin{position:absolute;left:calc(50% - 14px);top:115px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;border:3px solid #ffe997;color:#b2720d;font-size:18px;background:linear-gradient(135deg,#fff6a5,#f3bd31 65%,#cf8914);box-shadow:inset 0 0 0 2px #c79425,0 3px 0 #ad700a,0 0 10px #ffdc5155;opacity:0;animation:coin-burst var(--coin-duration) var(--coin-delay) both;z-index:4}
.bonus-result{text-align:center;z-index:4;animation:bonus-amount var(--bonus-duration) both}
.bonus-result strong{display:block;color:#fff2b3;font-size:25px;font-weight:850;text-shadow:0 2px 0 #a0641e,0 0 22px #ffc74388}
.bonus-result span{display:block;color:#edcf9c;font-size:13px;margin-top:7px}
@keyframes bonus-envelope{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0}}
@keyframes gift-appear{0%{transform:translateY(70px) scale(.1);opacity:0}18%{transform:translateY(-8px) scale(1.1);opacity:1}25%,100%{transform:translateY(0) scale(1)}30%{transform:rotate(-4deg)}34%{transform:rotate(4deg)}}
@keyframes gift-open{0%,33%{transform:translateY(0) rotate(0);opacity:1}48%,80%{transform:translate(-22px,-105px) rotate(-24deg);opacity:1}100%{transform:translate(-28px,-120px) rotate(-28deg);opacity:0}}
@keyframes gift-light{0%,32%{opacity:0;transform:scale(.5)}48%,85%{opacity:1;transform:scale(1.2)}100%{opacity:0}}
@keyframes coin-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}55%{opacity:1;transform:translate(var(--coin-x),var(--coin-y)) rotateY(var(--coin-turn)) scale(1)}100%{opacity:0;transform:translate(var(--coin-end-x),90px) rotateY(var(--coin-turn)) scale(.6)}}
@keyframes bonus-title{0%,8%{opacity:0;transform:scale(.7)}24%,100%{opacity:1;transform:scale(1)}}
@keyframes bonus-amount{0%,40%{opacity:0;transform:translateY(15px)}60%,100%{opacity:1;transform:translateY(0)}}
@keyframes bonus-halo{0%,20%{opacity:0;transform:scale(.4)}50%,100%{opacity:1;transform:scale(1.2)}}