.thanks {
      position: fixed; inset: 0; z-index: 10000;
      background: radial-gradient(ellipse at center, rgba(42,38,31,.68) 0%, rgba(12,11,10,.78) 70%);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity .35s ease;
      overflow: hidden;
    }
    .thanks.is-on { opacity: 1; pointer-events: auto; }
    .thanks-card { position: relative; z-index: 2; text-align: center; color: #f4f0ea; }
    .thanks-card .k {
      letter-spacing: .36em; font-size: 12px; color: #c4b49a; margin-bottom: 10px;
    }
    .thanks-card h2 {
      font-family: "Cormorant Garamond", "Noto Sans TC", serif;
      font-size: clamp(52px, 8vw, 92px); font-weight: 500;
      letter-spacing: .16em; margin: 0; line-height: 1.1;
    }
    .thanks-card h2 em {
      font-style: italic; color: #ffe566; padding-left: .12em;
    }
    .thanks-card p {
      margin-top: 14px; color: #b7aea2; font-weight: 300; letter-spacing: .12em;
    }
    .burst, .star {
      position: absolute; pointer-events: none;
    }
    .star {
      width: 3px; height: 3px; background: #ffe566; border-radius: 50%;
      box-shadow: 0 0 8px #ffe566;
      animation: twinkle 1.2s ease-in-out infinite;
    }
    @keyframes twinkle {
      0%,100% { opacity: .15; transform: scale(.6); }
      50% { opacity: 1; transform: scale(1.4); }
    }
    .burst {
      width: 8px; height: 8px; border-radius: 50%;
      background: #ffe566;
      box-shadow: 0 0 12px #ffe566;
      opacity: 0;
    }
    .thanks.is-on .burst { animation: none; }
    @keyframes boom {
      0% { opacity: 0; transform: translate(0,0) scale(.3); }
      18% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.2); }
    }



.thanks[hidden]{display:none!important}
.thanks-card{padding:24px;max-width:90vw}
.thanks-card h2{color:#f4f0ea}
.thanks-card .thanks-message{line-height:1.8}
@media(prefers-reduced-motion:reduce){.thanks{transition:none}.thanks *{animation:none!important}.thanks .burst{display:none}}

.thanks .burst{width:12px;height:3px;transform-origin:center;border-radius:50%;will-change:transform,opacity}
.firework-ring{position:absolute;width:2px;height:2px;border:1px solid #ffe8a350;border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 14px #ffe8a320}