/* End states are the default styles. Disabled motion always shows the full reward. */
.celebration-stage{position:relative;isolation:isolate;overflow:hidden;min-height:240px;height:300px;width:100%;max-width:760px;margin:0 auto 12px;border:1px solid #e5e8d9;border-radius:26px;background:linear-gradient(160deg,#fffaf0,#f1f4e6);color:#dfb666}
.celebration-stage.cs-scene-constellation{background:linear-gradient(150deg,#f7f5fc,#eaeaf5);border-color:#e4dfed;color:#d8b874}
.celebration-stage.cs-scene-rocket{background:linear-gradient(155deg,#faf8fc,#edf3f4);border-color:#dfe8e9}
.celebration-stage.cs-scene-garden{background:linear-gradient(160deg,#fffaf0,#edf3e3)}
.celebration-canvas{width:100%;height:100%;display:block;overflow:visible}
.celebration-stage svg *{transform-box:fill-box}
/* Portrait rotations use their original SVG coordinates, not each shape's bounds. */
.celebration-stage .cs-pet-placement,.celebration-stage [data-pet-id] [transform],.celebration-stage [data-pet-portrait] *{transform-box:view-box;transform-origin:0 0}
.cs-pet,.cs-rabbit,.cs-bird,.cs-badge,.cs-crown,.cs-flower,.cs-plant,.cs-rocket,.cs-spark,.cs-flag,.cs-wand,.cs-planet{transform-origin:center bottom}
.cs-hop{animation:cs-hop 3.9s ease-in-out both}
.cs-tail{transform-origin:12% 70%;animation:cs-tail 4.1s ease-in-out both}
.cs-arm-left{transform-origin:90% 85%;animation:cs-cheer-left 4s ease-in-out both}
.cs-arm-right{transform-origin:10% 85%;animation:cs-cheer-right 4s ease-in-out both}
.cs-face{transform-origin:50% 85%;animation:cs-face 4.1s ease-in-out both}
.cs-happy-eyes{transform-origin:center;animation:cs-blink 4.1s linear both}
.cs-rabbit{animation:cs-friend-hop 4.1s ease-in-out both}
.cs-rabbit-arm{transform-origin:center;animation:cs-clap 4.1s ease-in-out both}
.cs-bird{animation:cs-bird 4.1s ease-in-out both}
.cs-bird-wing{transform-origin:90% 80%;animation:cs-wing 4.1s ease-in-out both}
.cs-spark{transform-origin:center;animation:cs-spark 3.9s ease-in-out both}
.cs-spark-1{animation-duration:4.15s}.cs-spark-2{animation-duration:4.4s}
.cs-crown{animation:cs-crown 4.2s cubic-bezier(.2,.8,.3,1) both}
.cs-badge{animation:cs-badge 4.3s cubic-bezier(.2,.8,.3,1) both}
.cs-ribbon,.cs-parade-ribbon{transform-origin:center;animation:cs-ribbon 4.3s ease-out both}
.cs-look-up{animation:cs-look-up 4.1s ease-in-out both}
.cs-wand{animation:cs-wand 4.1s ease-in-out both}
.cs-draw-stars{stroke-dasharray:500;stroke-dashoffset:0;animation:cs-draw 4.1s ease-in-out both}
.cs-star-node{transform-origin:center;animation:cs-star-node 2s ease-out both;animation-delay:calc(.45s + var(--node)*.16s)}
.cs-shooting-star{animation:cs-shooting-star 4.2s ease-in-out both;color:#ebc575}
.cs-rocket{animation:cs-launch 4.1s cubic-bezier(.42,0,.24,1) both}
.cs-flame{transform-origin:center top;animation:cs-flame 4.1s ease-in-out both}
.cs-launch-clouds{opacity:.65;animation:cs-launch-clouds 4.1s ease-out both}
.cs-cloud-left{animation:cs-cloud-left 4.2s ease-out both}.cs-cloud-right{animation:cs-cloud-right 4.2s ease-out both}
.cs-planet{animation:cs-planet 4.2s ease-in-out both}.cs-orbit{animation:cs-orbit 4.1s ease-out both}
.cs-water-pet{animation:cs-water-pet 4.1s ease-in-out both}.cs-watering-can{transform-origin:20% 60%;animation:cs-water 4.1s ease-in-out both}
.cs-water-drops{opacity:0;animation:cs-drops 4.1s linear both}
.cs-plant{animation:cs-grow 4.1s cubic-bezier(.25,.65,.3,1) both}.cs-flower{transform-origin:center;animation:cs-flower 4.1s ease-in-out both}.cs-flower-small{animation-duration:4.3s}
.cs-sun-rays{transform-origin:center;animation:cs-rays 4.3s ease-out both}
.cs-plank{transform-origin:center;animation:cs-plank .65s ease-out both;animation-delay:calc(.2s + var(--plank)*.15s)}
.cs-crossing{animation:cs-cross 4.2s ease-in-out both}.cs-step-pet{animation:cs-step 4.2s ease-in-out both}.cs-flag{animation:cs-flag 4.3s ease-out both}
.cs-parade-group{animation:cs-parade 4.2s ease-out both}.cs-dance-pet{animation:cs-dance 4.2s ease-in-out both}
.cs-bunting{transform-origin:center top;animation:cs-bunting 4.3s ease-out both}.cs-drum{transform-origin:center;animation:cs-drum 4.2s ease-in-out both}
@keyframes cs-hop{0%,15%{transform:translateY(0)}23%{transform:translateY(6px) scale(1.03,.96)}36%{transform:translateY(-22px) rotate(-3deg)}46%{transform:translateY(0) scale(1.03,.97)}58%{transform:translateY(-9px) rotate(2deg)}69%,100%{transform:translateY(0)}}
@keyframes cs-tail{0%,17%,100%{transform:rotate(0)}32%,62%{transform:rotate(12deg)}47%,77%{transform:rotate(-7deg)}}
@keyframes cs-cheer-left{0%,16%,100%{transform:rotate(0)}32%,63%{transform:rotate(22deg)}47%,78%{transform:rotate(-9deg)}}
@keyframes cs-cheer-right{0%,16%,100%{transform:rotate(0)}32%,63%{transform:rotate(-22deg)}47%,78%{transform:rotate(9deg)}}
@keyframes cs-face{0%,15%,100%{transform:rotate(0)}28%,60%{transform:rotate(-4deg)}44%,76%{transform:rotate(3deg)}}
@keyframes cs-blink{0%,21%,27%,63%,69%,100%{transform:scaleY(1)}24%,66%{transform:scaleY(.15)}}
@keyframes cs-friend-hop{0%,25%,100%{transform:translateY(0)}37%,64%{transform:translateY(-10px) rotate(3deg)}49%,78%{transform:translateY(0) rotate(-2deg)}}
@keyframes cs-clap{0%,25%,100%{transform:scaleX(1)}38%,64%{transform:scaleX(.78)}50%,77%{transform:scaleX(1)}}
@keyframes cs-bird{0%,15%,100%{transform:translateY(0)}35%{transform:translate(-7px,-12px) rotate(-6deg)}60%{transform:translate(5px,-5px) rotate(4deg)}80%{transform:translate(-2px,-7px)}}
@keyframes cs-wing{0%,100%{transform:rotate(0)}20%,45%,70%{transform:rotate(20deg)}32%,58%,85%{transform:rotate(-20deg)}}
@keyframes cs-spark{0%,22%{opacity:0;transform:scale(.2) rotate(-25deg)}44%{opacity:1;transform:scale(1.3) rotate(8deg)}66%{opacity:.65;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
@keyframes cs-crown{0%,20%{opacity:0;transform:translateY(-46px) rotate(-13deg) scale(.7)}31%{opacity:1;transform:translateY(-36px) rotate(7deg)}49%{transform:translateY(6px) rotate(-4deg) scale(1.06)}60%{transform:translateY(-4px) rotate(2deg)}75%,100%{opacity:1;transform:none}}
@keyframes cs-badge{0%,53%{opacity:0;transform:translateY(22px) scale(.4) rotate(-15deg)}72%{opacity:1;transform:translateY(-4px) scale(1.08) rotate(4deg)}86%,100%{opacity:1;transform:none}}
@keyframes cs-ribbon{0%,61%{opacity:0;transform:scaleX(.2)}82%{opacity:1;transform:scaleX(1.05)}100%{opacity:1;transform:scaleX(1)}}
@keyframes cs-look-up{0%,12%{transform:rotate(0)}27%{transform:rotate(-6deg) translateY(3px)}50%{transform:rotate(3deg) translateY(-8px)}75%,100%{transform:none}}
@keyframes cs-wand{0%,12%{transform:rotate(-30deg) translateY(10px)}28%{transform:rotate(12deg) translateY(-7px)}57%{transform:rotate(-8deg)}80%,100%{transform:none}}
@keyframes cs-draw{0%,17%{stroke-dashoffset:500}78%,100%{stroke-dashoffset:0}}
@keyframes cs-star-node{0%,15%{opacity:0;transform:scale(.1)}55%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes cs-shooting-star{0%,32%{opacity:0;transform:translate(-45px,25px)}42%{opacity:1}70%{opacity:1;transform:translate(335px,-9px)}90%,100%{opacity:0;transform:translate(420px,12px)}}
@keyframes cs-launch{0%,15%{transform:translateY(42px) rotate(0)}19%{transform:translateY(42px) rotate(-3deg)}23%{transform:translateY(42px) rotate(3deg)}27%{transform:translateY(42px) rotate(-2deg)}61%{transform:translateY(-16px) rotate(5deg)}82%{transform:translateY(5px) rotate(-2deg)}100%{transform:none}}
@keyframes cs-flame{0%,13%{transform:scaleY(.08);opacity:.15}27%{transform:scaleY(.7);opacity:1}45%{transform:scaleY(1.12)}64%{transform:scaleY(.85)}100%{transform:scaleY(1);opacity:1}}
@keyframes cs-launch-clouds{0%,19%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.1)}100%{opacity:.65;transform:scale(1)}}
@keyframes cs-cloud-left{0%,25%{transform:translateX(25px)}100%{transform:none}}@keyframes cs-cloud-right{0%,25%{transform:translateX(-20px)}100%{transform:none}}
@keyframes cs-planet{0%,45%{transform:rotate(-18deg)}74%{transform:rotate(10deg)}100%{transform:none}}
@keyframes cs-orbit{0%,55%{opacity:0}100%{opacity:1}}
@keyframes cs-water-pet{0%,9%,100%{transform:none}25%,48%{transform:rotate(5deg) translateX(3px)}70%{transform:rotate(-3deg)}}
@keyframes cs-water{0%,11%,100%{transform:rotate(0)}25%,51%{transform:rotate(20deg)}70%{transform:rotate(-5deg)}}
@keyframes cs-drops{0%,19%,62%,100%{opacity:0;transform:translate(0,0)}25%,36%,47%{opacity:1;transform:translate(0,-6px)}30%,42%,54%{opacity:.8;transform:translate(3px,12px)}}
@keyframes cs-grow{0%,24%{transform:scale(.1,.06)}41%{transform:scale(.55,.45)}64%{transform:scale(.95,1.06)}79%{transform:scale(1.02,.98)}100%{transform:scale(1)}}
@keyframes cs-flower{0%,47%{transform:scale(.1) rotate(-70deg)}74%{transform:scale(1.16) rotate(9deg)}100%{transform:scale(1) rotate(0)}}
@keyframes cs-rays{0%,52%{opacity:.3;transform:rotate(-12deg) scale(.85)}100%{opacity:1;transform:none}}
@keyframes cs-plank{0%{opacity:0;transform:translateY(-28px) rotate(-25deg)}70%{opacity:1;transform:translateY(3px) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes cs-cross{0%,32%{transform:translateX(-177px)}82%,100%{transform:translateX(0)}}
@keyframes cs-step{0%,32%,100%{transform:translateY(0)}42%,59%,76%{transform:translateY(-10px) rotate(3deg)}50%,67%,84%{transform:translateY(0) rotate(-2deg)}92%{transform:translateY(-5px)}}
@keyframes cs-flag{0%,63%{opacity:0;transform:scaleY(.2)}80%{opacity:1;transform:scaleY(1.08) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes cs-parade{0%{transform:translateX(-90px);opacity:0}17%{opacity:1}70%,100%{transform:translateX(0);opacity:1}}
@keyframes cs-dance{0%,100%{transform:rotate(0)}18%,46%,74%{transform:translateY(-8px) rotate(-5deg)}32%,60%,88%{transform:translateY(0) rotate(5deg)}}
@keyframes cs-bunting{0%,18%{opacity:0;transform:translateY(-20px) scaleY(.6)}45%{opacity:1;transform:translateY(6px) scaleY(1.1)}70%,100%{opacity:1;transform:none}}
@keyframes cs-drum{0%,100%{transform:scale(1)}24%,50%,76%{transform:scale(1.06,.94)}35%,62%,87%{transform:scale(.98,1.02)}}
.cs-static *,.no-motion .celebration-stage *{animation:none!important;transition:none!important}
.cs-static .cs-shooting-star,.no-motion .cs-shooting-star{opacity:0}
@media(prefers-reduced-motion:reduce){.celebration-stage *{animation:none!important;transition:none!important}.cs-shooting-star{opacity:0}}
@media(max-width:600px){.celebration-stage{height:240px;min-height:0;border-radius:20px}.celebration-canvas{width:142%;max-width:none;margin-left:-21%}}
