.lucky-coupon-float { visibility:hidden; opacity:0; pointer-events:none; position:fixed; right:10px; bottom:92px; z-index:1000; width:130px; padding:0; border:0; background:transparent; -webkit-tap-highlight-color:transparent; will-change:transform,opacity; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.lucky-coupon-float.is-visible { visibility:visible; opacity:1; pointer-events:auto; animation:luckyFloatBreath 2.2s ease-in-out infinite; }
.lucky-coupon-float.is-visible.is-first-show { animation:luckyFloatIn .55s cubic-bezier(.19,1.32,.42,1) both, luckyFloatBreath 2.2s .6s ease-in-out infinite; }
.lucky-coupon-float.is-visible.is-rolling-in { animation:luckyRollInRight .28s cubic-bezier(.2,.85,.35,1) both, luckyFloatBreath 2.2s .32s ease-in-out infinite; }
.lucky-coupon-float.is-visible.is-rolling-away { animation:luckyRollOut .28s cubic-bezier(.55,0,.8,.35) both; pointer-events:none; will-change:transform,opacity; }
.lucky-coupon-float img { display:block; width:100%; filter:drop-shadow(0 8px 12px rgba(154,42,0,.32)); }
.lucky-coupon-float:before,.lucky-coupon-float:after { content:'✦'; position:absolute; z-index:-1; color:#ffd65b; font-size:20px; text-shadow:0 1px 5px #ff7a1c; opacity:0; pointer-events:none; }
.lucky-coupon-float:before { left:3px; top:19px; animation:luckySpark 1.8s .4s ease-out infinite; }
.lucky-coupon-float:after { right:6px; top:3px; font-size:13px; animation:luckySpark 1.8s 1.1s ease-out infinite; }
.lucky-coupon-float.is-opening { animation:luckyTap .5s ease-in-out both; }
.lucky-coupon-dialog { display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; align-items:center; justify-content:center; overflow:hidden; background:rgba(43,14,3,.62); }
.lucky-coupon-dialog.is-visible { display:flex; animation:luckyMaskIn .24s ease-out both; }
.lucky-coupon-dialog.is-opening { display:flex; animation:luckyMaskIn .18s ease-out both, luckyOpeningGlow 3s ease-in-out both; }
.lucky-coupon-dialog-body { position:relative; width:92%; max-width:390px; transform:scale(.55) translateY(28px); opacity:0; }
.lucky-coupon-dialog.is-visible .lucky-coupon-dialog-body { animation:luckyPrizeIn .7s cubic-bezier(.16,1.42,.42,1) .08s both; }
.lucky-coupon-dialog.is-opening .lucky-coupon-dialog-body { opacity:1; animation:luckyCharge .72s ease-in-out infinite; }
.lucky-coupon-dialog.is-opening .lucky-coupon-dialog-body img { filter:brightness(.65) saturate(1.25); }
.lucky-coupon-dialog-body img { display:block; width:100%; }
.lucky-coupon-bomb { display:none; position:absolute; z-index:4; top:37%; left:50%; width:106px; height:132px; margin:-66px 0 0 -53px; border:3px solid #ffe485; border-radius:12px 12px 20px 20px; background:linear-gradient(135deg,#ff7042 0 38%,#f22d18 42% 72%,#c60f0c 100%); box-shadow:0 0 0 7px rgba(255,190,53,.35),0 0 30px 12px rgba(255,75,15,.78); color:#fff9bf; font-size:22px; font-weight:bold; line-height:1.15; text-align:center; text-shadow:0 2px 2px #a50f08; transform-origin:center center; }
.lucky-coupon-bomb:before { content:''; position:absolute; top:-12px; left:8px; right:8px; height:26px; border:3px solid #ffe485; border-bottom:0; border-radius:50% 50% 0 0; }
.lucky-coupon-bomb:after { content:'✦  ¥  ✦'; position:absolute; left:-42px; bottom:-18px; width:184px; color:#ffe989; font-size:22px; letter-spacing:10px; text-shadow:0 0 10px #ff7b00; white-space:nowrap; }
.lucky-coupon-bomb span { position:absolute; z-index:1; top:45px; left:0; width:100%; }
.lucky-coupon-amount { position:absolute; top:69%; left:10%; width:80%; color:#fff9e8; text-align:center; font-size:26px; font-weight:bold; text-shadow:0 3px 2px #a6280c; white-space:nowrap; }
.lucky-coupon-dialog.is-visible .lucky-coupon-amount { animation:luckyAmountIn .55s cubic-bezier(.15,1.65,.3,1) .45s both; }
.lucky-coupon-close { position:absolute; right:0; top:-20px; border:0; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; font-size:26px; line-height:30px; }
.lucky-coupon-coins { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.lucky-coupon-opening-copy { display:none; position:absolute; z-index:3; top:55%; left:8%; width:84%; color:#fff6bd; text-align:center; font-size:25px; font-weight:bold; letter-spacing:2px; text-shadow:0 3px 2px #a6280c,0 0 12px #ffdb65; }
.lucky-coupon-dialog.is-opening .lucky-coupon-opening-copy { display:block; animation:luckyCopyPulse .58s ease-in-out infinite alternate; }
.lucky-coupon-dialog.is-opening .lucky-coupon-bomb { display:block; animation:luckyRedPacketBurst 3s cubic-bezier(.12,.75,.26,1) both; }
.lucky-coupon-dialog.is-opening .lucky-coupon-amount { display:none; }
.lucky-coupon-dialog.is-opening .lucky-coupon-coins:after { content:'¥  ¥  ¥  ¥  ¥'; position:absolute; top:27%; left:4%; width:92%; color:#ffe26e; font-size:30px; letter-spacing:21px; white-space:nowrap; text-shadow:0 0 10px #ff6c00; animation:luckyCoinsOrbit .75s linear infinite; }
.lucky-coupon-dialog.is-opening .lucky-coupon-coins:before { content:''; position:absolute; z-index:2; top:50%; left:50%; width:18px; height:18px; border:5px solid #fff29b; border-radius:50%; box-shadow:0 0 16px 8px rgba(255,111,0,.75); animation:luckyShockwave 3s ease-out both; }
.lucky-coupon-coin { position:absolute; top:42%; left:50%; width:28px; height:28px; border-radius:50%; color:#f29a13; background:radial-gradient(circle at 35% 30%,#fff6a6 0 12%,#ffc842 15% 55%,#ed8112 58% 100%); box-shadow:0 2px 5px rgba(129,45,0,.32); font-size:16px; line-height:28px; text-align:center; animation:luckyCoinBurst .95s cubic-bezier(.15,.8,.25,1) var(--delay) both; }
@keyframes luckyFloatIn { from {opacity:0;transform:translate3d(38px,22px,0) scale(.58)} to {opacity:1;transform:translate3d(0,0,0) scale(1)} }
@keyframes luckyRollInRight { 0% {opacity:0;transform:translate3d(145px,8px,0) rotate(300deg) scale(.68)} 100% {opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)} }
@keyframes luckyRollOut { 0% {opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)} 100% {opacity:0;transform:translate3d(145px,8px,0) rotate(300deg) scale(.68)} }
@keyframes luckyFloatBreath { 0%,100% {transform:translateY(0) rotate(0deg)} 50% {transform:translateY(-7px) rotate(1.5deg)} }
@keyframes luckySpark { 0%,100% {opacity:0;transform:scale(.35) rotate(0deg)} 38% {opacity:1;transform:scale(1.2) rotate(35deg)} 60% {opacity:0;transform:scale(1.7) rotate(65deg)} }
@keyframes luckyTap { 25% {transform:scale(.88) rotate(-4deg)} 56% {transform:scale(1.12) rotate(4deg)} 100% {transform:scale(1) rotate(0)} }
@keyframes luckyMaskIn { from {background:rgba(43,14,3,0)} to {background:rgba(43,14,3,.62)} }
@keyframes luckyPrizeIn { 0% {opacity:0;transform:scale(.55) translateY(28px)} 68% {opacity:1;transform:scale(1.07) translateY(-6px)} 100% {opacity:1;transform:scale(1) translateY(0)} }
@keyframes luckyAmountIn { from {opacity:0;transform:scale(.2)} to {opacity:1;transform:scale(1)} }
@keyframes luckyCoinBurst { from {opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)} 15% {opacity:1} to {opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(540deg)} }
@keyframes luckyCharge { 0%,100% {transform:scale(.9) rotate(-1deg)} 40% {transform:scale(1.06) rotate(1deg)} 55% {transform:scale(.96) rotate(-2deg)} 70% {transform:scale(1.09) rotate(2deg)} }
@keyframes luckyCopyPulse { from {transform:scale(.92);opacity:.72} to {transform:scale(1.08);opacity:1} }
@keyframes luckyCoinsOrbit { from {transform:translateX(-7%) rotate(-4deg);opacity:.45} 50% {opacity:1} to {transform:translateX(7%) rotate(4deg);opacity:.45} }
@keyframes luckyOpeningGlow { 0%,12% {background:rgba(43,14,3,.62)} 28% {background:rgba(118,25,2,.72)} 48% {background:rgba(72,12,0,.7)} 72% {background:rgba(144,29,1,.8)} 94% {background:rgba(255,94,0,.92)} 100% {background:rgba(43,14,3,.62)} }
@keyframes luckyShockwave { 0%,76% {opacity:0;transform:translate(-50%,-50%) scale(.2)} 82% {opacity:1;transform:translate(-50%,-50%) scale(.6)} 100% {opacity:0;transform:translate(-50%,-50%) scale(18)} }
@keyframes luckyRedPacketBurst { 0% {opacity:0;transform:scale(.2) rotate(-9deg)} 8% {opacity:1;transform:scale(.45) rotate(5deg)} 20% {transform:scale(.72) rotate(-5deg)} 30% {transform:scale(.62) rotate(4deg)} 42% {transform:scale(.98) rotate(-4deg)} 53% {transform:scale(.84) rotate(3deg)} 66% {transform:scale(1.32) rotate(-3deg);filter:brightness(1.12)} 76% {transform:scale(1.15) rotate(2deg);filter:brightness(1.3)} 87% {opacity:1;transform:scale(1.76) rotate(-2deg);filter:brightness(1.7)} 95% {opacity:1;transform:scale(2.45) rotate(2deg);filter:brightness(2.3)} 100% {opacity:0;transform:scale(3.25) rotate(0);filter:brightness(2.8)} }
@media (prefers-reduced-motion:reduce) { .lucky-coupon-float.is-visible,.lucky-coupon-dialog.is-visible,.lucky-coupon-dialog.is-opening,.lucky-coupon-dialog.is-visible .lucky-coupon-dialog-body,.lucky-coupon-dialog.is-opening .lucky-coupon-dialog-body,.lucky-coupon-dialog.is-visible .lucky-coupon-amount,.lucky-coupon-coin { animation:none; } }