.color-reward{position:absolute;left:50%;top:43%;z-index:9;isolation:isolate;pointer-events:none;text-align:center;white-space:nowrap;animation:reward-rise 4.2s cubic-bezier(.2,.65,.3,1) both;color:#846122;text-shadow:0 2px 0 #fff,0 3px 18px #fff}
.color-reward::before,.color-reward::after{content:'';position:absolute;left:50%;top:34%;width:clamp(190px,28vw,290px);aspect-ratio:1;pointer-events:none;z-index:-1;border-radius:50%;animation:reward-halo 4.2s ease-out both}
.color-reward::before{border:1px solid #fff2b5b3;background:radial-gradient(circle,#fff5cc80,transparent 67%);box-shadow:0 0 0 9px #ffedaa19,inset 0 0 32px #ffdf7d44,0 0 28px #fff0bc55}
.color-reward::after{background:radial-gradient(circle at 12% 35%,#fff9cc 0 2px,transparent 3px),radial-gradient(circle at 79% 14%,#fff9cc 0 3px,transparent 4px),radial-gradient(circle at 93% 64%,#ffdf79 0 2px,transparent 3px),radial-gradient(circle at 24% 88%,#fff9cc 0 3px,transparent 4px),radial-gradient(circle at 66% 95%,#ffd061 0 2px,transparent 3px);animation-name:reward-glints}
.color-reward strong{position:relative;display:block;font:900 clamp(64px,12vw,112px)/1 system-ui;color:#e2a82e;-webkit-text-stroke:2px #fff7dc;text-shadow:0 3px 0 #9b652c,0 5px 12px #67482460,0 0 24px #fff0bf}
.color-reward span{position:relative;display:block;font-size:15px;font-weight:750;background:linear-gradient(135deg,#fffdf4f5,#fff1d6f5);border:1px solid #ead2a1;border-radius:22px;padding:9px 17px;margin-top:12px;box-shadow:0 5px 18px #513e2c24,inset 0 1px #fff}
@keyframes reward-rise{0%{opacity:0;transform:translate(-50%,14px) scale(.82)}10%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,-3px) scale(1)}82%{opacity:1;transform:translate(-50%,-18px) scale(1)}100%{opacity:0;transform:translate(-50%,-38px) scale(.98)}}
@keyframes reward-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:.6}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes reward-glints{0%{opacity:0;transform:translate(-50%,-50%) scale(.65) rotate(-14deg)}18%,75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(12deg)}}
.picture-party{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse,#fff8e929,transparent 65%)}.party-message{position:absolute;top:51%;left:50%;width:min(88%,530px);transform:translate(-50%,-50%);padding:24px 18px;border:2px solid #ecc971;border-radius:24px;background:#fff8eaf2;box-shadow:0 14px 65px #78573740;text-align:center;animation:party-message-in .55s ease-out}.party-message strong{display:block;font:700 clamp(24px,5vw,38px)/1.2 Georgia;color:#8d662d}.party-message span{display:block;margin-top:12px;font-size:14px;color:#98734e}.party-message button{pointer-events:auto;margin-top:18px}
.party-spark{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--spark-color);box-shadow:0 0 12px var(--spark-color);animation:firework-burst 1.8s ease-out var(--spark-delay) both}
@keyframes firework-burst{0%{opacity:0;transform:translate(0,0) scale(.2)}8%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.2)}}@keyframes party-message-in{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.reward-road{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:17px 20px;margin:0 0 18px;border:1px solid #e5d2a4;border-radius:19px;background:linear-gradient(115deg,#fff5d9,#fffaf4 65%,#f3e5ed);color:#876447}.reward-road strong{display:block;font:700 20px Georgia;color:#967336}.reward-road small{font-size:10px}.reward-road .reward-goal{flex:1;min-width:150px;font-size:12px;line-height:1.6}.reward-goal b{display:block;font-size:13px;color:#7b596a}.reward-road button{font-size:11px;white-space:nowrap;padding:11px 15px}
@media(prefers-reduced-motion:reduce){.color-reward{animation:reward-rise-reduced 4.2s both}.color-reward::before,.color-reward::after{display:none}.party-spark{display:none}.party-message{animation:none}@keyframes reward-rise-reduced{0%,100%{opacity:0;transform:translate(-50%,0)}10%,90%{opacity:1;transform:translate(-50%,0)}}}
@media(max-width:760px){.reward-road{gap:13px;padding:15px}.reward-road strong{font-size:19px}.reward-road .reward-goal{flex-basis:100%}.reward-road button{width:100%}.party-message span{font-size:12px}.color-reward span{font-size:12px}}
.canvas-wrap:has(.picture-party) .color-reward{top:23%}.party-spark{width:10px;height:10px;box-shadow:0 0 9px 3px var(--spark-color),0 0 20px var(--spark-color)}body:has(dialog[open]){overflow:hidden}