.celebration-stage {
  --celebration-gold: #f1c86b;
  --celebration-coral: #ff7155;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}

.celebration-stage[hidden] { display: none; }
.celebration-veil { position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 50% 18%, rgba(14, 22, 38, .35), rgba(2, 4, 9, .84) 72%); opacity: 0; animation: celebration-veil-in .28s ease forwards; }
#fireworksCanvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.confetti-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.firecracker-layer { position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.firecracker-rack { position: absolute; left: var(--rack-x, 50%); top: clamp(104px, 18vh, 190px); width: 118px; height: min(66vh, 620px); transform: translateX(-50%); opacity: 0; animation: celebration-firecracker-rack-in .36s ease-out forwards; }
.firecracker-cord { position: absolute; left: 50%; top: 0; width: 4px; height: 86%; border-radius: 4px; background: linear-gradient(#f2c34f, #9b6b13); box-shadow: 0 0 8px rgba(255, 190, 52, .45); }
.firecracker-body { position: absolute; left: calc(50% + var(--offset)); top: var(--top); width: clamp(14px, 1.2vw, 20px); height: clamp(28px, 2.6vw, 42px); border: 1px solid #f4bd51; border-radius: 3px; background: linear-gradient(90deg, #7f0710, #ed382e 48%, #9e0710); box-shadow: 0 0 15px rgba(255, 45, 34, .35); transform: translateX(-50%) rotate(var(--tilt)); animation: celebration-firecracker-sway 1.1s ease-in-out var(--delay) infinite alternate; }
.firecracker-body::before, .firecracker-body::after { content: ""; position: absolute; left: -2px; right: -2px; height: 3px; background: #e2af45; }
.firecracker-body::before { top: 2px; }
.firecracker-body::after { bottom: 2px; }
.realistic-firecracker-rack{left:50%;top:clamp(88px,10vh,132px);width:min(1180px,calc(100% - 28px));height:clamp(132px,20vh,196px);transform:translateX(-50%);background:linear-gradient(180deg,rgba(92,34,18,.04),rgba(92,34,18,.26) 72%,rgba(24,12,8,.12));border:0;box-shadow:0 24px 50px rgba(10,6,3,.28)}
.realistic-firecracker-rack .firecracker-body{left:var(--real-x);top:var(--real-top);width:clamp(23px,2.25vw,34px);height:clamp(12px,1.35vw,19px);border:1px solid #a90d12;border-radius:3px;background:repeating-linear-gradient(90deg,#8c090f 0 5px,#d52420 5px 10px,#a40c12 10px 14px);box-shadow:0 2px 4px rgba(20,5,2,.55),inset 0 0 0 1px rgba(251,181,80,.28);transform:translateX(-50%) rotate(var(--real-tilt));animation:realistic-firecracker-rattle .16s ease-in-out var(--burst-delay) infinite alternate}
.realistic-firecracker-rack .firecracker-body::before,.realistic-firecracker-rack .firecracker-body::after{height:2px;background:#e6b64e;box-shadow:0 0 3px rgba(255,181,50,.45)}
.realistic-firecracker-rack .firecracker-fuse{position:absolute;right:-5px;top:50%;width:8px;height:2px;border-radius:2px;background:#d1a34a;transform:rotate(-18deg);box-shadow:0 0 3px rgba(255,194,65,.55)}
.realistic-firecracker-rack .firecracker-burst-flash{position:absolute;right:-8px;top:50%;width:5px;height:5px;border-radius:50%;background:#fff9c4;box-shadow:0 0 9px 4px #ff641a;opacity:0;animation:realistic-firecracker-flash .26s ease-out var(--burst-delay) both}
.realistic-firecracker-rack::before{content:"";position:absolute;left:3%;right:3%;top:48px;height:4px;background:linear-gradient(90deg,#b97620,#efc768 18%,#d6a33d 50%,#efc768 82%,#b97620);box-shadow:0 0 5px rgba(250,180,52,.55);transform:rotate(-1.2deg)}
.realistic-firecracker-rack::after{content:"";position:absolute;left:3%;right:3%;top:49px;height:62px;background:repeating-linear-gradient(90deg,transparent 0 7.8%,rgba(225,177,71,.8) 7.8% 8%,transparent 8% 16.6%);opacity:.42;pointer-events:none}
@keyframes realistic-firecracker-rattle{0%,100%{filter:brightness(.92);transform:translateX(-50%) rotate(var(--real-tilt))}35%{filter:brightness(1.28);transform:translateX(-50%) rotate(calc(var(--real-tilt) - 1deg))}65%{filter:brightness(1.06);transform:translateX(-50%) rotate(calc(var(--real-tilt) + 1deg))}}
@keyframes realistic-firecracker-flash{0%,100%{opacity:0;transform:scale(.2)}16%{opacity:1;transform:scale(1.35)}54%{opacity:.48;transform:scale(.72)}80%{opacity:0;transform:scale(.35)}}
.cracker-paper, .cracker-spark, .cracker-smoke { position: absolute; pointer-events: none; }
.cracker-paper { left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 1px; background: var(--paper-color, #e22c28); opacity: 0; animation: celebration-cracker-paper-fall var(--duration) cubic-bezier(.12, .55, .2, 1) var(--delay) both; }
.cracker-spark { left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #fff7bd; box-shadow: 0 0 8px 3px #ff6816; opacity: 0; animation: celebration-cracker-spark-burst var(--duration) ease-out var(--delay) both; }
.cracker-smoke { left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, rgba(196, 194, 186, .34), rgba(105, 105, 105, 0) 68%); opacity: 0; animation: celebration-cracker-smoke-rise var(--duration) ease-out var(--delay) both; }
.celebration-stage.has-firecrackers .celebration-veil { background: radial-gradient(circle at 50% 62%, rgba(83, 17, 12, .45), rgba(2, 4, 9, .88) 74%); }
.confetti-piece { position: absolute; left: var(--start-x); bottom: var(--start-y); width: var(--piece-w); height: var(--piece-h); border-radius: 2px; background: var(--piece-color); opacity: 0; will-change: transform, opacity; animation: celebration-confetti-flight var(--duration) cubic-bezier(.12, .68, .22, 1) var(--delay) both; }

.cannon { position: absolute; z-index: 2; bottom: clamp(30px, 6vh, 84px); width: clamp(52px, 5vw, 76px); height: clamp(76px, 8vw, 108px); opacity: 0; }
.cannon i { position: absolute; inset: 0; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); border-radius: 7px; background: repeating-linear-gradient(135deg, #a54135 0 13px, #d8ac51 13px 26px, #f8e9bd 26px 39px); box-shadow: 0 18px 36px rgba(0, 0, 0, .34); }
.cannon i::before { content: ""; position: absolute; left: 6%; top: -5px; width: 88%; height: 15px; border: 3px solid #d3a34b; border-radius: 50%; background: #fff0c8; }
.cannon--left { --cannon-angle: -25deg; left: clamp(22px, 5vw, 88px); transform: rotate(-25deg) translateY(40px); }
.cannon--right { --cannon-angle: 25deg; right: clamp(22px, 5vw, 88px); transform: rotate(25deg) translateY(40px); }
.celebration-stage.has-confetti .cannon { animation: celebration-cannon-enter .58s cubic-bezier(.18, .8, .22, 1) forwards; }

.success-seal { position: absolute; z-index: 4; left: 50%; top: clamp(72px, 12vh, 130px); width: min(720px, calc(100% - 42px)); min-width: min(340px, calc(100% - 42px)); transform: translate(-50%, -24px); display: grid; justify-items: center; gap: 5px; border-top: 1px solid rgba(241, 200, 107, .72); border-bottom: 1px solid rgba(241, 200, 107, .72); color: #fff; background: rgba(8, 11, 16, .9); padding: 13px 24px; opacity: 0; box-shadow: 0 18px 54px rgba(0, 0, 0, .4); }
.celebration-stage.is-running .success-seal { animation: celebration-seal-show .48s cubic-bezier(.18, .82, .24, 1) forwards; }
.success-seal span { max-width: 100%; color: var(--celebration-gold); font-family: SimSun, "Songti SC", serif; font-size: clamp(1rem, 2.4vw, 1.36rem); font-weight: 900; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.success-seal strong { color: #dfe4e9; font-size: .75rem; letter-spacing: 0; }
.applause-layer{position:absolute;z-index:3;inset:0;display:none;background:radial-gradient(circle at 50% 22%,rgba(255,210,123,.22),transparent 24%),linear-gradient(180deg,rgba(13,17,22,.2),rgba(3,5,8,.62));}.celebration-stage.has-applause .applause-layer{display:block}.applause-layer i{position:absolute;bottom:-4vh;width:clamp(80px,11vw,170px);height:clamp(150px,24vh,300px);border-radius:52% 48% 8% 8%;background:linear-gradient(160deg,rgba(220,184,142,.8),rgba(54,39,32,.9));box-shadow:0 -12px 40px rgba(255,199,118,.22);animation:celebration-applause-wave .42s ease-in-out infinite alternate}.applause-layer i::before{content:"";position:absolute;left:18%;top:-27%;width:44%;height:46%;border-radius:45% 55% 45% 45%;background:inherit;transform:rotate(-12deg)}.applause-layer i:nth-child(1){left:13%;transform:rotate(-12deg);animation-delay:-.18s}.applause-layer i:nth-child(2){left:43%;transform:scale(.78);animation-delay:-.04s}.applause-layer i:nth-child(3){right:12%;transform:rotate(13deg);animation-delay:-.26s}.applause-layer b{position:absolute;top:22%;left:50%;transform:translateX(-50%);padding:9px 17px;border:1px solid rgba(255,224,154,.6);color:#ffe09a;background:rgba(7,9,12,.72);font-size:clamp(.8rem,2vw,1.1rem);letter-spacing:.18em}@keyframes celebration-applause-wave{from{filter:brightness(.78);margin-bottom:0}to{filter:brightness(1.18);margin-bottom:12px}}

@keyframes celebration-veil-in { to { opacity: 1; } }
@keyframes celebration-cannon-enter { 0% { opacity: 0; } 55%, 100% { opacity: 1; transform: rotate(var(--cannon-angle)) translateY(0); } }
@keyframes celebration-seal-show { 0% { opacity: 0; transform: translate(-50%, -24px) scale(.97); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes celebration-confetti-flight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.72); }
  7% { opacity: 1; }
  48% { opacity: 1; transform: translate3d(var(--mid-x), var(--peak-y), 0) rotate(var(--mid-spin)) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--end-spin)) scale(.86); }
}
@keyframes celebration-firecracker-rack-in { from { opacity: 0; transform: translate(-50%, -24px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes celebration-firecracker-sway { from { transform: translateX(-50%) rotate(var(--tilt-from)); } to { transform: translateX(-50%) rotate(var(--tilt-to)); } }
@keyframes celebration-cracker-paper-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); } }
@keyframes celebration-cracker-spark-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.1); } }
@keyframes celebration-cracker-smoke-rise { 0% { opacity: 0; transform: translate(0, 10px) scale(.5); } 18% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(2.4); } }

@media (max-width: 660px) {
  .success-seal { top: 74px; }
  .realistic-firecracker-rack { top: 92px; width: calc(100% - 18px); height: 148px; }
  .realistic-firecracker-rack .firecracker-body { width: 22px; height: 12px; }
  .realistic-firecracker-rack::before { top: 46px; }
  .realistic-firecracker-rack::after { top: 47px; height: 58px; }
}