:root {
  --pink: #ff8fc8;
  --hot-pink: #ff5fb8;
  --soft-pink: #ffd7ea;
  --purple: #a88cff;
  --lavender: #c9b8ff;
  --gold: #ffe2a8;
  --cream: #fff3fa;
  --ink: #8d3d78;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  background: #15092f;
  color: var(--cream);
}

button {
  font-family: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.phone-stage {
  position: relative;
  width: min(100vw, 480px);
  height: 100dvh;
  min-height: 680px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.28), transparent 26%),
    radial-gradient(circle at 28% 72%, rgba(255,145,210,.45), transparent 26%),
    linear-gradient(180deg, #796bc5 0%, #c5a7e6 42%, #f8b9d3 68%, #9173c7 100%);
  box-shadow: 0 0 60px rgba(255, 151, 220, .34);
  isolation: isolate;
}

@media (min-width: 900px) {
  body {
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 45%, rgba(255, 137, 203, .12), transparent 24%),
      linear-gradient(90deg, #13062c, #1c0b37 48%, #13062c);
  }

  .phone-stage {
    width: 390px;
    height: min(844px, calc(100dvh - 56px));
    min-height: 0;
    border-radius: 22px;
    border: 1px solid rgba(255, 220, 246, .22);
    box-shadow:
      0 0 0 10px rgba(255,255,255,.035),
      0 24px 70px rgba(21, 5, 48, .72),
      0 0 60px rgba(255, 151, 220, .34);
  }
}

#fxCanvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.aurora,
.castle,
.clouds,
.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aurora {
  z-index: 0;
  background:
    radial-gradient(ellipse at 52% 52%, rgba(255, 235, 252, .55), transparent 28%),
    radial-gradient(ellipse at 20% 22%, rgba(255, 194, 240, .42), transparent 24%),
    radial-gradient(ellipse at 80% 18%, rgba(129, 210, 255, .22), transparent 28%),
    repeating-radial-gradient(circle at 50% 55%, rgba(255,255,255,.08) 0 1px, transparent 2px 28px);
  filter: blur(.2px);
}

.castle {
  z-index: 1;
  opacity: .46;
  transform: translateY(13vh);
  filter: blur(1.2px) drop-shadow(0 0 16px rgba(255, 235, 184, .55));
}

.castle span {
  position: absolute;
  bottom: 22vh;
  width: 50px;
  height: 190px;
  border-radius: 28px 28px 6px 6px;
  background: linear-gradient(180deg, rgba(254,239,255,.58), rgba(180,145,230,.36));
  border: 1px solid rgba(255,255,255,.45);
}

.castle span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 86px solid rgba(137, 103, 212, .75);
  filter: drop-shadow(0 -2px 8px rgba(255, 226, 255, .6));
}

.castle span::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 46px;
  width: 14px;
  height: 28px;
  border-radius: 20px 20px 0 0;
  background: rgba(255, 237, 160, .85);
  box-shadow: 0 0 16px rgba(255, 230, 156, .9);
}

.castle span:nth-child(1) { left: -9px; height: 240px; transform: scale(.92); }
.castle span:nth-child(2) { left: 58px; bottom: 18vh; height: 150px; transform: scale(.74); }
.castle span:nth-child(3) { left: 50%; bottom: 18vh; height: 260px; transform: translateX(-50%) scale(1.05); }
.castle span:nth-child(4) { right: 52px; bottom: 16vh; height: 180px; transform: scale(.76); }
.castle span:nth-child(5) { right: -12px; height: 230px; transform: scale(.86); }

.clouds {
  z-index: 2;
  background-repeat: repeat-x;
  background-size: 330px 150px;
}

.cloud-back {
  opacity: .75;
  transform: translateY(64vh);
  background-image:
    radial-gradient(circle at 40px 70px, rgba(255,255,255,.82) 0 42px, transparent 43px),
    radial-gradient(circle at 108px 52px, rgba(255,220,242,.76) 0 58px, transparent 59px),
    radial-gradient(circle at 188px 70px, rgba(255,255,255,.78) 0 46px, transparent 47px),
    radial-gradient(circle at 258px 62px, rgba(255,218,240,.73) 0 54px, transparent 55px);
  animation: drift 22s linear infinite;
}

.cloud-front {
  z-index: 8;
  opacity: .96;
  transform: translateY(78vh);
  background-size: 420px 180px;
  background-image:
    radial-gradient(circle at 50px 88px, rgba(255,255,255,.95) 0 50px, transparent 51px),
    radial-gradient(circle at 150px 60px, rgba(255,226,244,.95) 0 72px, transparent 73px),
    radial-gradient(circle at 250px 88px, rgba(255,255,255,.9) 0 55px, transparent 56px),
    radial-gradient(circle at 350px 72px, rgba(255,210,235,.9) 0 66px, transparent 67px);
  animation: drift 30s linear infinite reverse;
}

@keyframes drift {
  from { background-position-x: 0; }
  to { background-position-x: 420px; }
}

.float-layer { z-index: 7; }
.floaty {
  position: absolute;
  font-size: 20px;
  opacity: .84;
  text-shadow: 0 0 12px #fff, 0 0 24px var(--pink);
  animation: floatUp var(--dur, 8s) linear infinite;
}

@keyframes floatUp {
  from { transform: translate3d(0, 10vh, 0) rotate(0deg); opacity: 0; }
  14% { opacity: .85; }
  to { transform: translate3d(var(--dx, 18px), -104vh, 0) rotate(38deg); opacity: 0; }
}

.hud {
  position: absolute;
  z-index: 30;
  top: max(18px, env(safe-area-inset-top));
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.pill,
.wish-btn,
.music-orb {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 0 18px rgba(255,255,255,.2), 0 8px 24px rgba(120,62,160,.2);
  backdrop-filter: blur(10px);
  font-size: 15px;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}

.music-orb {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  font-size: 31px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #ff69c2);
}

.music-orb.playing {
  animation: musicSpin 2.2s linear infinite;
}

@keyframes musicSpin {
  to { rotate: 360deg; }
}

.wish-btn {
  width: 68px;
  height: 68px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ff6cae;
  background: rgba(255, 244, 248, .72);
  font-size: 25px;
}

.wish-btn span {
  position: absolute;
  top: 52px;
  white-space: nowrap;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 8px #ff5fae;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 84px 24px 42px;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
  transition: opacity .65s ease, transform .65s ease;
}

.scene.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.loading-card {
  width: min(88vw, 380px);
  min-height: min(76vh, 690px);
  padding: 64px 22px 42px;
  border-radius: 34px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 159, 220, .52), transparent 34%),
    linear-gradient(180deg, rgba(156, 125, 236, .84), rgba(255, 184, 221, .78));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 36px rgba(255, 149, 220, .42), inset 0 0 26px rgba(255,255,255,.32);
  backdrop-filter: blur(14px);
}

.loading-card h2 {
  margin: 0;
  color: #fff7fb;
  font-size: 58px;
  line-height: .94;
  font-weight: 950;
  text-shadow: 0 4px 0 #f68bc7, 0 0 18px rgba(255,255,255,.86);
}

.mini-crown,
.big-crown {
  font-size: 42px;
  color: var(--gold);
  text-shadow: 0 0 12px #fff, 0 0 24px #ffc46f;
}

.loading-card p {
  display: inline-block;
  margin: 28px 0 30px;
  padding: 9px 24px;
  border-radius: 999px;
  color: #cf3f91;
  background: rgba(255,255,255,.78);
  font-size: 20px;
  font-weight: 900;
  box-shadow: inset 0 0 12px rgba(255,255,255,.65), 0 0 18px rgba(255,255,255,.32);
}

.loading-cute {
  display: block;
  width: min(118%, 520px);
  margin: 8px auto 28px;
  transform: translateX(-4%);
  filter: drop-shadow(0 16px 24px rgba(185, 53, 139, .24));
  animation: loadingFloat 2.4s ease-in-out infinite alternate;
}

.loading-card strong,
.loading-card small {
  display: block;
  color: #fff;
  text-shadow: 0 0 12px rgba(168, 66, 160, .55);
}

.loading-card strong {
  margin-top: 28px;
  font-size: 30px;
  letter-spacing: 0;
}

.loading-card small {
  margin-top: 10px;
  font-size: 19px;
}

@keyframes loadingFloat {
  to { transform: translateX(-4%) translateY(-10px) scale(1.02); }
}

.scene-maker {
  align-content: center;
}

.maker-card {
  width: min(100%, 360px);
  padding: 26px 22px 20px;
  border-radius: 34px;
  background: rgba(255, 244, 250, .24);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.18),
    0 0 46px rgba(255, 125, 200, .3);
  backdrop-filter: blur(16px);
}

.maker-kicker {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  color: #bd317b;
  background: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.maker-card h1 {
  margin: 14px 0 6px;
  font-size: 42px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 0 #f88fca, 0 0 18px #fff, 0 0 34px #ff7dc9;
}

.maker-card > p {
  margin: 0 0 18px;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  text-shadow: 0 0 10px rgba(255, 143, 200, .75);
}

.maker-card label {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.maker-card input[type="text"],
.maker-card select,
.maker-card textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.62);
  padding: 0 16px;
  color: #a82f78;
  background: rgba(255,255,255,.84);
  outline: none;
  box-shadow: inset 0 0 14px rgba(255, 143, 200, .24);
}

.maker-card input[type="text"],
.maker-card select {
  height: 42px;
  border-radius: 999px;
}

.maker-card textarea {
  min-height: 66px;
  resize: vertical;
  border-radius: 18px;
  padding-top: 10px;
  line-height: 1.45;
  font: inherit;
}

.maker-notice {
  margin: -4px 0 12px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.55;
}

.maker-card .compliance-check {
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
}

.compliance-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #d93992;
}

.maker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  margin-top: 14px;
}

.maker-actions button {
  min-height: 46px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff7dbd, #a98cff);
  box-shadow: 0 0 16px rgba(255,255,255,.52);
  font-weight: 900;
}

.maker-actions button:disabled {
  cursor: not-allowed;
  opacity: .56;
  filter: grayscale(.22);
  box-shadow: none;
}

.maker-actions #createCard {
  color: #bd317b;
  background:
    linear-gradient(#ffe9f3, #ffc1dd) padding-box,
    linear-gradient(135deg, #fff, #ffd078, #ff8fc8, #fff) border-box;
  border: 2px solid transparent;
}

.ribbon-progress {
  width: min(74%, 260px);
  height: 42px;
  margin: 0 auto;
  padding: 7px;
  border-radius: 999px;
  background: rgba(207, 78, 157, .28);
  border: 3px solid rgba(255,255,255,.86);
  overflow: hidden;
  box-shadow: inset 0 0 16px rgba(255,255,255,.26), 0 0 24px rgba(255,255,255,.42);
}

.ribbon-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18px 50%, #fff 0 8px, transparent 9px),
    radial-gradient(circle at 52px 50%, #fff 0 8px, transparent 9px),
    radial-gradient(circle at 86px 50%, #fff 0 8px, transparent 9px),
    radial-gradient(circle at 120px 50%, #fff 0 8px, transparent 9px),
    radial-gradient(circle at 154px 50%, #fff 0 8px, transparent 9px),
    linear-gradient(90deg, rgba(255,255,255,.65), rgba(255, 126, 194, .68));
  box-shadow: 0 0 16px #fff, 0 0 26px var(--pink);
}

.headline {
  align-self: start;
  margin-top: 42px;
  text-align: center;
}

.headline h1,
.scene-title h2,
.scene-final h2 {
  margin: 0;
  font-size: clamp(54px, 16vw, 82px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .03em;
  color: #fff7fb;
  text-shadow:
    0 2px 0 #f88fca,
    0 0 14px #fff,
    0 0 30px #ff7dc9,
    0 0 52px #ffb1dc;
}

.headline .happy-logo {
  font-family: "Trebuchet MS", "Comic Sans MS", "Microsoft YaHei", cursive;
  font-size: clamp(56px, 16vw, 86px);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: none;
  color: #fff7fb;
}

.headline p {
  display: inline-block;
  margin: 12px 0 0;
  padding: 8px 28px;
  border-radius: 999px;
  color: #d94a91;
  background: linear-gradient(180deg, #ffe5f2, #ffc0dc);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 0 20px rgba(255,255,255,.5);
  font-weight: 700;
}

.heart-line {
  display: block;
  font-size: 42px;
  color: #fff;
  text-shadow: 0 0 16px #ff7fc8;
  transform: translateX(-96px) translateY(20px);
}

.gift-3d {
  position: relative;
  width: 268px;
  height: 218px;
  transform-style: preserve-3d;
  transform: translateY(-2px) rotate(-4deg);
  animation: giftFloat 3s ease-in-out infinite;
}

.gift-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 330px;
  height: 330px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 28px rgba(129, 53, 126, .28)) drop-shadow(0 0 24px rgba(255, 162, 218, .55));
}

.gift-open-sprite,
.gift-lid-sprite,
.gift-ribbon-left-sprite,
.gift-sparkles-sprite {
  opacity: 0;
}

.gift-3d.open .gift-closed-sprite {
  animation: giftClosedFade .45s ease forwards;
}

.gift-3d.open .gift-open-sprite {
  animation: giftOpenShow 1.2s ease .18s forwards;
}

.gift-3d.open .gift-lid-sprite {
  animation: giftLidLift 1.35s cubic-bezier(.18, 1.1, .3, 1) .05s forwards;
}

.gift-3d.open .gift-ribbon-left-sprite {
  display: none;
}

.gift-3d.open .gift-sparkles-sprite {
  animation: giftSparklesBloom 1.55s ease .12s forwards;
}

@keyframes giftClosedFade {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}

@keyframes giftOpenShow {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(.88); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes giftLidLift {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.92) rotate(0deg); }
  26% { opacity: 1; }
  100% { opacity: .95; transform: translate(-50%, -92%) scale(.82) rotate(-9deg); }
}

@keyframes giftRibbonFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.95) rotate(0deg); }
  24% { opacity: 1; }
  100% { opacity: .82; transform: translate(-77%, -58%) scale(.72) rotate(-18deg); }
}

@keyframes giftSparklesBloom {
  0% { opacity: 0; transform: translate(-50%, -48%) scale(.36) rotate(0deg); filter: blur(5px); }
  52% { opacity: 1; filter: blur(0); }
  100% { opacity: .88; transform: translate(-50%, -57%) scale(.9) rotate(12deg); }
}

@keyframes giftFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.gift-body,
.gift-lid {
  display: none;
  position: absolute;
  inset: 42px 16px 0;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.42), transparent 32%),
    linear-gradient(160deg, #dea6ff, #ffb4d6 56%, #f7c9f7);
  border: 3px solid rgba(255, 225, 167, .88);
  box-shadow: inset 0 0 28px rgba(255,255,255,.35), 0 22px 42px rgba(116,42,140,.35), 0 0 48px rgba(255,133,212,.5);
}

.gift-lid {
  inset: 12px 4px 58px;
  border-radius: 20px;
  transform-origin: 50% 80%;
  z-index: 4;
}

.gift-3d.open .gift-lid {
  animation: openLid 1.15s ease forwards;
}

@keyframes openLid {
  45% { transform: translateY(-16px) rotateX(12deg); }
  100% { transform: translateY(-94px) rotateX(-62deg) rotateZ(9deg); opacity: .92; }
}

.gift-body i {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,230,165,.72);
  border-radius: 9px;
}
.gift-body i:nth-child(1) { left: 14px; top: 16px; }
.gift-body i:nth-child(2) { right: 18px; top: 26px; }
.gift-body i:nth-child(3) { left: 38px; bottom: 20px; }
.gift-body i:nth-child(4) { right: 34px; bottom: 28px; }
.gift-body b {
  position: absolute;
  right: 20px;
  bottom: 30px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, #ff8bc9, #ff4fa8);
  border: 4px solid var(--gold);
  box-shadow: 0 0 22px #fff, 0 0 34px #ff78c2;
}

.gift-ribbon {
  display: none;
  position: absolute;
  z-index: 5;
  background: linear-gradient(90deg, #ff8fc8, #ffe6f2, #ff8fc8);
  box-shadow: inset 0 0 12px rgba(255,255,255,.5), 0 0 18px rgba(255,128,200,.5);
}
.gift-ribbon.vertical { top: 10px; bottom: 0; left: 91px; width: 28px; border-radius: 999px; }
.gift-ribbon.horizontal { left: 8px; right: 8px; top: 82px; height: 28px; border-radius: 999px; }
.gift-bow {
  display: none;
  position: absolute;
  z-index: 6;
  top: -4px;
  width: 74px;
  height: 56px;
  border-radius: 54px 54px 16px 54px;
  background: radial-gradient(circle at 68% 30%, #fff, #ff93c7 25%, #ec5fae 72%);
  box-shadow: 0 0 22px #ffc4e8;
}
.bow-left { left: 41px; transform: rotate(-28deg); }
.bow-right { right: 41px; transform: scaleX(-1) rotate(-28deg); }
.gift-glow {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(255,130,206,.18), transparent 62%);
  filter: blur(8px);
  opacity: .45;
}
.gift-3d.open .gift-glow {
  animation: glowBlast 1.5s ease forwards;
}
@keyframes glowBlast {
  50% { opacity: 1; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(2.8); }
}

.royal-button,
.soft-next {
  min-width: 230px;
  min-height: 72px;
  padding: 0 34px;
  border-radius: 30px;
  color: #bd317b;
  font-size: 30px;
  font-weight: 900;
  background:
    linear-gradient(#ffe9f3, #ffc1dd) padding-box,
    linear-gradient(135deg, #fff, #ffd078, #ff8fc8, #fff) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 18px rgba(255,255,255,.76), 0 0 42px rgba(255,113,190,.45), inset 0 0 18px rgba(255,255,255,.48);
}

.hint,
.stage-copy,
.gallery-title p,
.scene-final p {
  color: rgba(255,255,255,.92);
  font-size: 17px;
  text-align: center;
  text-shadow: 0 0 10px #ff8fc8;
}

.scene-gift {
  align-content: start;
  justify-items: center;
  grid-template-rows: auto auto auto auto;
  row-gap: clamp(12px, 2.3dvh, 20px);
  padding: clamp(62px, 8.2dvh, 84px) 24px 42px;
}

.scene-gift .headline {
  align-self: auto;
  margin-top: 0;
}

.scene-gift .heart-line {
  font-size: 30px;
  transform: translateX(-82px) translateY(16px);
}

.scene-gift .happy-logo {
  font-size: clamp(52px, 13vw, 68px);
  line-height: .92;
}

.scene-gift .headline p {
  margin-top: 8px;
  padding: 7px 24px;
  font-size: 16px;
}

.scene-gift .gift-3d {
  width: 242px;
  height: 196px;
}

.scene-gift .gift-sprite {
  width: 306px;
  height: 306px;
}

.scene-gift .royal-button {
  min-width: 214px;
  min-height: 64px;
  font-size: 26px;
}

.scene-gift .hint {
  margin: 0;
}

.template-panel {
  width: min(92%, 380px);
  padding: 12px;
  border-radius: 22px;
  background: rgba(255, 244, 250, .2);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 18px rgba(255,255,255,.16), 0 0 26px rgba(255, 125, 200, .2);
  backdrop-filter: blur(12px);
}

.template-panel label {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: rgba(255,255,255,.94);
  font-size: 13px;
  font-weight: 800;
}

.template-panel input[type="text"] {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  padding: 0 14px;
  color: #a82f78;
  background: rgba(255,255,255,.82);
  outline: none;
  box-shadow: inset 0 0 12px rgba(255, 143, 200, .2);
}

.file-label input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.file-label::after {
  content: "选择多张照片";
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #bd317b;
  background: linear-gradient(180deg, #ffe9f3, #ffc3df);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 0 14px rgba(255,255,255,.45);
}

.maker-upload::after {
  content: "选择多张照片";
}

.template-panel p {
  margin: 6px 2px 0;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1.5;
  text-shadow: 0 0 8px rgba(255, 143, 200, .75);
}

.count-wrap {
  position: relative;
  width: 330px;
  height: 410px;
  display: grid;
  place-items: center;
}

.magic-orbit {
  position: absolute;
  width: 320px;
  height: 220px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.65);
  transform: rotate(-16deg);
  box-shadow: 0 0 34px rgba(255,151,220,.74), inset 0 0 24px rgba(255,255,255,.2);
  animation: spin 7s linear infinite;
}

@keyframes spin { to { rotate: 360deg; } }

.count-number {
  position: relative;
  z-index: 2;
  font-size: 240px;
  line-height: 1;
  color: #fff4f9;
  font-weight: 1000;
  text-shadow:
    0 6px 0 #ff88c5,
    0 12px 0 #f2b6dc,
    0 0 18px #fff,
    0 0 52px #ff78c2;
  -webkit-text-stroke: 4px rgba(255, 181, 216, .75);
  transform: translateZ(40px);
  animation: candyPop .72s ease both;
}

.count-blessing {
  position: absolute;
  z-index: 4;
  max-width: 270px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 151, 220, .24);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 0 22px rgba(255,255,255,.52), 0 0 34px rgba(255, 115, 198, .4);
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 0 10px #ff70bd;
  animation: blessingFloat 1.76s ease both;
}

@keyframes blessingFloat {
  0% { opacity: 0; transform: translateY(18px) scale(.82); filter: blur(6px); }
  28% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px) scale(.92); filter: blur(5px); }
}

.count-number::before,
.count-number::after {
  content: "✦";
  position: absolute;
  font-size: 26px;
  color: var(--gold);
  text-shadow: 0 0 12px #fff;
}
.count-number::before { left: -30px; top: 38%; }
.count-number::after { right: -28px; bottom: 20%; }

@keyframes candyPop {
  from { transform: scale(.22) rotate(-16deg); opacity: 0; filter: blur(8px); }
  70% { transform: scale(1.08) rotate(3deg); }
  to { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}

.count-deco {
  position: absolute;
  bottom: 22px;
  padding: 12px 24px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 24px rgba(255, 143, 200, .4);
}

.scene-title,
.scene-final {
  text-align: center;
}

.scene-final > * {
  translate: none;
}

.scene-cake {
  align-content: start;
  justify-items: center;
  padding-top: 128px;
  gap: 12px;
}

.scene-cake .cake-wrap,
.scene-cake .stage-copy,
.scene-cake .soft-next {
  translate: none;
}

.title-burst {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,128,200,.18), transparent 60%);
  filter: blur(12px);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { transform: scale(1.14); opacity: .65; }
}

.scene-title h2 {
  position: relative;
  z-index: 2;
  font-size: clamp(45px, 12vw, 62px);
}

.scene-title h2 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px) rotate(-8deg) scale(.72);
  animation: titleLetterPop .58s cubic-bezier(.2, 1.35, .42, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}

@keyframes titleLetterPop {
  58% { opacity: 1; transform: translateY(-8px) rotate(4deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.banner {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 20px 0 18px;
  padding: 10px 30px;
  border-radius: 999px;
  color: #d94a91;
  background: linear-gradient(180deg, #ffeaf4, #ffc2df);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 22px rgba(255,255,255,.62);
  font-weight: 800;
}

.typing {
  min-height: 218px;
  max-width: 370px;
  margin: 0 auto 22px;
  font-size: 18px;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 0 10px #8b63ff, 0 0 14px #ff7fc8;
}

.blessing-line {
  display: block;
  margin: 16px auto 0;
  opacity: 0;
  transform: translateY(18px);
  animation: blessingLineIn .72s ease forwards;
  animation-delay: calc(.85s + var(--i) * .62s);
}

@keyframes blessingLineIn {
  to { opacity: 1; transform: translateY(0); }
}

.soft-next {
  min-height: 54px;
  min-width: 170px;
  font-size: 20px;
  border-radius: 999px;
}

.cake-wrap {
  position: relative;
  width: 340px;
  height: 368px;
  display: grid;
  place-items: end center;
  margin-top: 0;
}

.cake {
  position: relative;
  width: 340px;
  height: 348px;
  transform-style: preserve-3d;
  animation: cakeRise 1.4s ease both;
}

.cake-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 390px;
  height: 390px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 20px 30px rgba(157, 71, 146, .24)) drop-shadow(0 0 22px rgba(255, 180, 228, .55));
}

.cake-bottom-sprite {
  z-index: 2;
  width: 420px;
  height: 420px;
  top: 66%;
}

.cake-top-sprite {
  z-index: 6;
  width: 318px;
  height: 318px;
  top: 38%;
}

.cake-sparkles-sprite {
  z-index: 9;
  width: 370px;
  height: 370px;
  opacity: 0;
  mix-blend-mode: screen;
}

.cake.entering .cake-bottom-sprite {
  animation: cakeBottomDrop 1.85s cubic-bezier(.14, 1.05, .34, 1) .12s both;
}

.cake.entering .cake-top-sprite {
  animation: cakeTopDrop 1.65s cubic-bezier(.14, 1.05, .34, 1) 1.08s both;
}

.cake.entering .cake-sparkles-sprite {
  animation: cakeSparklesBloom 1.8s ease 2.02s both;
}

@keyframes cakeBottomDrop {
  0% { opacity: 0; transform: translate(-50%, -155vh) rotate(-7deg) scale(.84); }
  64% { opacity: 1; transform: translate(-50%, -46%) rotate(2deg) scale(1.04); }
  84% { transform: translate(-50%, -52%) rotate(-1deg) scale(.98); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes cakeTopDrop {
  0% { opacity: 0; transform: translate(-50%, -145vh) rotate(8deg) scale(.8); }
  66% { opacity: 1; transform: translate(-50%, -45%) rotate(-2deg) scale(1.05); }
  84% { transform: translate(-50%, -53%) rotate(1deg) scale(.99); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes cakeSparklesBloom {
  0% { opacity: 0; transform: translate(-50%, -48%) scale(.46) rotate(-12deg); filter: blur(6px); }
  52% { opacity: .92; filter: blur(0); }
  100% { opacity: .45; transform: translate(-50%, -50%) scale(1.05) rotate(8deg); }
}

@keyframes cakeRise {
  from { transform: translateY(180px) scale(.82); opacity: .15; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.cake-top,
.cake-mid,
.cake-bottom {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% / 22%;
  box-shadow: inset 0 0 24px rgba(255,255,255,.55), 0 0 28px rgba(255,151,220,.52);
}

.cake-top {
  top: 36px;
  z-index: 5;
  width: 218px;
  height: 72px;
  background:
    radial-gradient(circle at 26% 34%, #ff5f89 0 8px, transparent 9px),
    radial-gradient(circle at 58% 28%, #ff6f94 0 7px, transparent 8px),
    radial-gradient(circle at 82% 34%, #ff6f94 0 7px, transparent 8px),
    linear-gradient(180deg, #fff9fb, #ffd5ea 52%, #ff9ecc);
  border: 3px solid rgba(255,255,255,.8);
}

.cake.entering .cake-bottom {
  animation: cakeLayerDrop 1.2s cubic-bezier(.15, 1.15, .35, 1) both;
}

.cake.entering .cake-mid {
  animation: cakeLayerDrop 1.2s cubic-bezier(.15, 1.15, .35, 1) .48s both;
}

.cake.entering .cake-top {
  animation: cakeLayerDrop 1.2s cubic-bezier(.15, 1.15, .35, 1) .96s both;
}

.cake.entering .candle {
  animation: candleDrop .95s cubic-bezier(.15, 1.15, .35, 1) 2.15s both;
}

@keyframes cakeLayerDrop {
  0% { transform: translate(-50%, -115vh) rotate(-10deg) scale(.92); opacity: 0; }
  72% { transform: translate(-50%, 12px) rotate(3deg) scale(1.03); opacity: 1; }
  100% { transform: translate(-50%, 0) rotate(0) scale(1); opacity: 1; }
}

@keyframes candleDrop {
  0% { transform: translate(-50%, -115vh) rotate(-10deg) scale(.92); opacity: 0; }
  72% { transform: translate(-50%, 8px) rotate(3deg) scale(1.03); opacity: 1; }
  100% { transform: translate(-50%, 0) rotate(0) scale(1); opacity: 1; }
}

.cake-top::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -18px;
  height: 32px;
  border-radius: 0 0 32px 32px;
  background:
    radial-gradient(circle at 15% 0, #fff9fb 0 18px, transparent 19px),
    radial-gradient(circle at 38% 0, #fff9fb 0 18px, transparent 19px),
    radial-gradient(circle at 62% 0, #fff9fb 0 18px, transparent 19px),
    radial-gradient(circle at 85% 0, #fff9fb 0 18px, transparent 19px);
}

.cake-nameplate {
  position: absolute;
  left: 50%;
  top: 112px;
  z-index: 30;
  width: 220px;
  height: 88px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  display: grid;
  place-items: start center;
  pointer-events: none;
}

.cake-nameplate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 198px;
  height: 52px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.96), transparent 22%),
    linear-gradient(180deg, #fff7fb 0%, #ffd1e6 48%, #ff98ca 100%);
  border: 3px solid rgba(255,255,255,.88);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.75),
    0 0 18px rgba(255,255,255,.95),
    0 0 34px rgba(255, 105, 190, .52);
}

.plate-stick {
  position: absolute;
  top: 44px;
  width: 7px;
  height: 50px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdca3, #cc8a38);
  box-shadow: 0 0 8px rgba(255,230,180,.7);
}

.plate-stick.left { left: 66px; }
.plate-stick.right { right: 66px; }

.cake-nameplate em {
  position: relative;
  z-index: 2;
  width: 198px;
  margin-top: 14px;
  color: #d44a8e;
  font-size: var(--cake-title-size, 14px);
  line-height: 1.05;
  font-style: normal;
  font-weight: 1000;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255,255,255,.8);
}

.cake-nameplate em span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-78px) rotate(-14deg) scale(.72);
  animation: cakeTextDrop .58s ease forwards;
  animation-delay: calc(2.85s + var(--i) * 58ms);
}

.cake.entering .cake-nameplate {
  animation: nameplateInsert 1.25s cubic-bezier(.16, 1.14, .35, 1) 2.18s both;
}

@keyframes nameplateInsert {
  0% { opacity: 0; transform: translate(-50%, -130vh) rotate(-8deg) scale(.9); }
  62% { opacity: 1; transform: translate(-50%, 12px) rotate(3deg) scale(1.04); }
  82% { transform: translate(-50%, -4px) rotate(-1deg) scale(.99); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); }
}

@keyframes cakeTextDrop {
  72% { opacity: 1; transform: translateY(5px) rotate(4deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.cake-mid {
  top: 96px;
  z-index: 3;
  width: 258px;
  height: 82px;
  background: linear-gradient(180deg, #ffb4d6, #ff8fc5);
  border: 3px solid rgba(255,255,255,.6);
}

.cake-bottom {
  bottom: 26px;
  z-index: 2;
  width: 304px;
  height: 96px;
  background: linear-gradient(180deg, #fff0f7, #ffc1dd 48%, #ff91c8);
  border: 3px solid rgba(255,255,255,.75);
}

.cake-bow {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 70px;
  height: 45px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 20% 50%, #ff7fbd 0 32px, transparent 33px),
    radial-gradient(ellipse at 80% 50%, #ff7fbd 0 32px, transparent 33px),
    radial-gradient(circle, #ffd5eb 0 15px, #ff5fb1 16px 24px, transparent 25px);
  filter: drop-shadow(0 0 12px #ffaad6);
}

.strawberry {
  display: none;
  position: absolute;
  width: 18px;
  height: 22px;
  background: #ff567a;
  border-radius: 60% 60% 70% 70%;
  box-shadow: inset 0 0 6px rgba(255,255,255,.45);
}
.strawberry::before {
  content: "✦";
  color: #fff;
  font-size: 8px;
  position: absolute;
  left: 5px;
  top: 4px;
}
.s1 { left: 44px; top: 22px; rotate: -18deg; }
.s2 { left: 126px; top: 14px; }
.s3 { right: 46px; top: 24px; rotate: 15deg; }

.candle {
  position: absolute;
  z-index: 28;
  left: 50%;
  top: 34px;
  width: 20px;
  height: 68px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: repeating-linear-gradient(135deg, #fff 0 8px, #ff9bcc 9px 16px);
  box-shadow: 0 0 15px rgba(255,255,255,.85);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.candle::before {
  content: "♕";
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 26px;
  text-shadow: 0 0 10px #fff;
}
.candle i {
  position: absolute;
  left: 50%;
  top: -25px;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 0;
  background: url("./assets/sprites/candle-flame.png?v=clean1") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 20px #ff87c7);
  animation: flame .55s ease-in-out infinite alternate;
}
.candle.wished i { opacity: 0; animation: none; }
@keyframes flame {
  to { transform: translateX(-50%) scale(1.14) rotate(3deg); }
}

.wish-ring {
  position: absolute;
  bottom: 24px;
  width: 260px;
  height: 80px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.5);
  box-shadow: 0 0 24px rgba(255,255,255,.6);
  opacity: .85;
  animation: spin 8s linear infinite;
}

.hidden { display: none !important; }

.gallery-title {
  position: absolute;
  top: 82px;
  text-align: center;
}

.scene-gallery .gallery-title,
.scene-gallery .carousel,
.scene-gallery .gallery-next {
  translate: none;
}
.gallery-title h2 {
  margin: 0;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 12px #fff, 0 0 28px #ff76bf;
}

.carousel {
  position: relative;
  width: min(100%, 414px);
  height: 590px;
  margin-top: 18px;
  perspective: 1050px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.2), rgba(157,143,255,.12) 36%, transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(138,232,255,.18), transparent 50%);
  border-radius: 50%;
}

.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86vw, 390px);
  height: min(42vw, 188px);
  border-radius: 50%;
  transform: translate(-50%, -22%) rotateX(68deg);
  border: 3px solid rgba(255, 197, 244, .44);
  box-shadow:
    0 0 16px rgba(255,255,255,.8),
    0 0 32px rgba(255,131,218,.58),
    inset 0 0 34px rgba(255,255,255,.12);
}

.carousel::after {
  width: min(70vw, 320px);
  height: min(34vw, 150px);
  transform: translate(-50%, 14%) rotateX(68deg);
  border-color: rgba(255,226,168,.55);
}

.carousel .photo-card.is-front {
  border-width: 3px;
  width: 118px;
  height: 168px;
  margin-left: -59px;
  margin-top: -84px;
  box-shadow:
    0 0 18px rgba(255,255,255,.96),
    0 0 38px rgba(255, 117, 211, .72),
    0 0 58px rgba(142,232,255,.46);
}

.sphere-star {
  position: absolute;
  left: calc(50% + var(--sx));
  top: calc(50% + var(--sy));
  width: calc(2px * var(--sd));
  height: calc(2px * var(--sd));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 14px #8fe8ff;
  opacity: .78;
  animation: twinkle 2.4s ease-in-out infinite;
}

@keyframes twinkle {
  50% { opacity: .25; transform: scale(.55); }
}

.photo-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 138px;
  margin-left: -48px;
  margin-top: -69px;
  border-radius: 15px;
  overflow: hidden;
  transform-style: preserve-3d;
  border: 2px solid rgba(238,255,255,.92);
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 16px rgba(255,255,255,.88), 0 0 28px rgba(102,232,255,.54);
  transition: transform .18s linear, opacity .18s linear, filter .18s linear;
}

.photo-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: opacity 1.45s ease, filter 1.45s ease, transform 1.45s ease;
}

.photo-cute {
  z-index: 1;
  opacity: 1;
  background: var(--cute-photo);
}

.photo-origin {
  z-index: 2;
  opacity: 0;
  background: var(--origin-photo);
  filter: blur(6px) saturate(1.08);
  transform: scale(1.04);
}

.photo-card.is-front .photo-cute {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.photo-card.is-front .photo-origin {
  opacity: 0;
  filter: blur(6px) saturate(1.08);
  transform: scale(1.04);
  box-shadow: inset 0 0 58px rgba(255,255,255,.2);
}

.photo-card.is-front.reveal-origin .photo-cute {
  opacity: 0;
  filter: blur(3px);
  transform: scale(1.06);
  transition-delay: 0s;
}

.photo-card.is-front.reveal-origin .photo-origin {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
  transition-delay: 0s;
  box-shadow: inset 0 0 58px rgba(255,255,255,.2);
}

.photo-card::after {
  content: attr(data-title);
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 8px;
  border-radius: 999px;
  text-align: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 107, 184, .62);
  text-shadow: 0 1px 4px #8d2b6d;
}

.gallery-next {
  position: absolute;
  bottom: 54px;
}

.memory-modal,
.qr-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 480px);
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(44, 18, 80, .42);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}
.memory-card {
  position: relative;
  width: min(340px, 92vw);
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,244,250,.94), rgba(255,199,226,.94));
  border: 2px solid rgba(255,255,255,.9);
  color: #b13979;
  box-shadow: 0 0 42px rgba(255,125,200,.72);
}
.qr-card {
  position: relative;
  width: min(330px, 90vw);
  padding: 20px;
  border-radius: 28px;
  text-align: center;
  color: #b13979;
  background: linear-gradient(180deg, rgba(255,244,250,.96), rgba(255,199,226,.96));
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 42px rgba(255,125,200,.72);
}

.qr-card h3 {
  margin: 4px 0 14px;
}

.qr-card p {
  margin: 12px auto 0;
  max-width: 250px;
  color: #9e3d76;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}

.qr-card canvas {
  width: 220px;
  height: 220px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
}

.close-memory {
  position: absolute;
  right: 13px;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #b13979;
  background: rgba(255,255,255,.72);
  font-size: 24px;
}
.memory-photo {
  height: 260px;
  border-radius: 20px;
  background: var(--photo);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.75), 0 0 22px rgba(255,255,255,.8);
}
.memory-card p {
  margin: 16px 4px;
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
  font-weight: 800;
}
.memory-actions,
.final-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.memory-actions button,
.final-actions button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff7dbd, #a98cff);
  box-shadow: 0 0 16px rgba(255,255,255,.58);
  font-weight: 800;
}

.scene-final {
  align-content: stretch;
  justify-items: stretch;
  padding: 0;
  overflow: hidden;
  transform-origin: center;
}

.scene-final.active {
  position: fixed;
  left: max(0px, calc(50vw - 240px));
  top: 0;
  width: min(100vw, 480px);
  height: 100dvh;
  transform: scale(1);
}

.final-envelope-stage {
  position: absolute;
  left: 50%;
  top: 39%;
  z-index: 2;
  width: min(94%, 380px);
  height: 292px;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 72%;
  transform: translate(-50%, -50%);
}

.final-envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  user-select: none;
  filter:
    drop-shadow(0 20px 28px rgba(129, 53, 126, .24))
    drop-shadow(0 0 26px rgba(255, 180, 228, .62));
}

.final-envelope-closed {
  opacity: 0;
  transform: translate(-50%, -38%) scale(.48) rotate(-7deg);
}

.final-envelope-open {
  opacity: 0;
  transform: translate(-50%, -48%) scale(.72) rotate(2deg);
}

.final-letter-sheet {
  position: absolute;
  left: 50%;
  top: 52.5%;
  z-index: 4;
  width: min(112%, 430px);
  height: min(91%, 790px);
  margin: 0;
  opacity: 0;
  transform: translate(-50%, 72px) scale(.2) rotate(-4deg);
  transform-origin: 50% 78%;
}

.scene-final.letter-opened .final-envelope-closed {
  animation: finalEnvelopeIn 1.08s cubic-bezier(.2, 1.12, .3, 1) .08s both,
    finalEnvelopeSealOut .72s cubic-bezier(.44, 0, .24, 1) 1.16s forwards;
}

.scene-final.letter-opened .final-envelope-open {
  animation: finalEnvelopeOpenIn 1.18s cubic-bezier(.18, 1.05, .24, 1) 1.1s forwards;
}

.scene-final.letter-opened .final-letter-sheet {
  animation: finalLetterRise 1.82s cubic-bezier(.18, 1.08, .24, 1) 1.86s forwards;
}

.final-letter-paper {
  position: absolute;
  inset: -4% -16% -4% -16%;
  width: 132%;
  height: 108%;
  object-fit: fill;
  object-position: center;
  filter:
    drop-shadow(0 16px 28px rgba(129, 53, 126, .18))
    drop-shadow(0 0 24px rgba(255, 218, 238, .75));
  user-select: none;
  pointer-events: none;
}

.final-letter-content {
  position: absolute;
  inset: clamp(116px, 15dvh, 142px) 78px clamp(116px, 13.8dvh, 136px);
  display: grid;
  align-content: center;
  gap: 9px;
  color: #b83683;
  text-align: center;
  overflow: visible;
}

.final-letter-content::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.46), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255, 219, 238, .07));
  filter: blur(.2px);
  pointer-events: none;
}

.scene-final h2 {
  position: relative;
  z-index: 1;
  margin: 0 auto 7px;
  width: 100%;
  max-width: 282px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--final-title-size, 32px);
  line-height: 1;
  color: #d44191;
  text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255,255,255,.9), 0 0 20px rgba(255, 124, 190, .55);
  white-space: nowrap;
  overflow: visible;
}

.scene-final h2 span {
  display: inline-block;
  flex: 0 0 auto;
}

.scene-final p {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 268px;
  line-height: 1.52;
  font-size: clamp(13px, 3.2vw, 15px);
  font-weight: 700;
  color: rgba(180, 52, 124, .92);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  opacity: 1;
  transform: none;
  filter: none;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.scene-final .write-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(7px) scale(.96);
  filter: blur(2px);
}

.scene-final.writing-started .write-char.written {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, 1.2, .3, 1), filter .18s ease;
}

.final-pen {
  --pen-x: 50%;
  --pen-y: 50%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 54px;
  height: 54px;
  opacity: 0;
  pointer-events: none;
  background: url("./assets/cute/final-pen-cutout.png?v=20260629-cutout1") center / contain no-repeat;
  transform: translate3d(var(--pen-x), var(--pen-y), 0) translate(-12px, -38px) rotate(-18deg);
  transform-origin: 18px 42px;
  transition: transform .12s linear, opacity .22s ease;
  filter: drop-shadow(0 6px 10px rgba(166, 42, 112, .26)) drop-shadow(0 0 10px rgba(255,255,255,.86));
}

.scene-final.writing-started .final-pen {
  opacity: 1;
}

.scene-final.writing-done .final-pen {
  opacity: 0;
  transition-delay: .28s;
}

@keyframes finalEnvelopeIn {
  0% { opacity: 0; transform: translate(-50%, -34%) scale(.48) rotate(-7deg); filter: blur(2px); }
  34% { opacity: 1; transform: translate(-50%, -54%) scale(.78) rotate(2deg); filter: blur(0); }
  58% { opacity: 1; transform: translate(-50%, -48%) scale(.72) rotate(-1.2deg); }
  78% { opacity: 1; transform: translate(-50%, -51.5%) scale(.74) rotate(.7deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(.72) rotate(0); }
}

@keyframes finalEnvelopeSealOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.72) rotate(0); }
  42% { opacity: .88; transform: translate(-50%, -52%) scale(.7) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -49%) scale(.66) rotate(1deg); filter: blur(4px); }
}

@keyframes finalEnvelopeOpenIn {
  0% { opacity: 0; transform: translate(-50%, -45%) scale(.56) rotate(3deg); filter: blur(2px); }
  32% { opacity: 1; transform: translate(-50%, -52%) scale(.8) rotate(-1.5deg); filter: blur(0); }
  62% { opacity: 1; transform: translate(-50%, -48.5%) scale(.74) rotate(.8deg); }
  100% { opacity: .9; transform: translate(-50%, -50%) scale(.72) rotate(0); }
}

@keyframes finalLetterRise {
  0% { opacity: 0; transform: translate(-50%, 68px) scale(.2) rotate(-4deg); filter: blur(4px); }
  24% { opacity: .75; transform: translate(-50%, 16px) scale(.38) rotate(-2deg); filter: blur(1.5px); }
  52% { opacity: 1; transform: translate(-50%, -44%) scale(.78) rotate(.8deg); filter: blur(0); }
  76% { opacity: 1; transform: translate(-50%, -51.5%) scale(1.03) rotate(-.45deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes finalLineIn {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.final-actions {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 5;
  margin-top: 0;
  opacity: 0;
  transform: translate(-50%, 16px) scale(.96);
  transition: opacity .48s ease, transform .48s cubic-bezier(.2, 1.12, .3, 1);
}

.scene-final.writing-done .final-actions {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (min-width: 900px) {
  .scene-maker.active,
  .scene-loading.active,
  .scene-gift.active,
  .scene-title.active,
  .scene-cake.active,
  .scene-gallery.active,
  .scene-final.active {
    position: fixed;
    left: calc(50vw - 195px);
    top: max(28px, calc(50dvh - 422px));
    width: 390px;
    height: min(844px, calc(100dvh - 56px));
    overflow: hidden;
    border-radius: 22px;
    transform: scale(1);
  }
}

.toast {
  position: absolute;
  z-index: 80;
  left: 50%;
  bottom: 38px;
  translate: -50% 16px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  background: rgba(138, 70, 166, .72);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 0 18px rgba(255,151,220,.5);
  opacity: 0;
  transition: .28s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; translate: -50% 0; }

@media (max-height: 740px) {
  .headline { margin-top: 18px; }
  .headline h1 { font-size: 54px; }
  .maker-card { padding: 20px 18px 16px; }
  .maker-card h1 { font-size: 34px; }
  .gift-3d { width: 178px; height: 178px; }
  .royal-button { min-height: 60px; font-size: 25px; }
  .count-number { font-size: 188px; }
  .cake-wrap { transform: scale(.86); }
  .gallery-title { top: 76px; }
  .carousel { height: 330px; }
  .gallery-next { bottom: 62px; }
}