/* Theme-specific story direction. Loaded last so every scene changes together. */
.top-actions { display: flex; align-items: center; gap: 10px; }
.share-action, .secondary-action { border: 0; border-radius: 7px; background: #242636; color: #fff; cursor: pointer; font: inherit; }
.share-action { padding: 9px 14px; font-size: 12px; }
.secondary-action { width: 100%; margin-top: 10px; padding: 13px; background: #fff; color: #242636; border: 1px solid #dfe0e8; }
.share-action:disabled, .secondary-action:disabled { opacity: .55; cursor: wait; }
.theme-picker { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; }
.theme-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 24px; }
.theme { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; gap: 1px 7px; align-items: center; min-width: 0; padding: 9px; border-radius: 7px; text-align: left; }
.theme i { grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; }
.theme b { font-size: 11px; font-weight: 600; }
.theme small { font-size: 9px; color: #9294a3; white-space: nowrap; }
.theme[data-theme="blue"] i { background: linear-gradient(145deg, #c9edff, #4f8be6); }
.theme[data-theme="pink"] i { background: linear-gradient(145deg, #ffc1cd, #df83ae 55%, #9a7bd1); }
.theme[data-theme="night"] i { background: linear-gradient(145deg, #7967c8, #151530); }

.scene-sparkles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.scene-sparkles i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--size) * 1px); height: calc(var(--size) * 1px); border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; opacity: .42; animation: scene-twinkle calc(2.2s + var(--delay) * 1s) ease-in-out infinite alternate; }
.scene-cake .cake .scene-sparkles { opacity: 0; transition: opacity .45s; }
.scene-cake .cake.revealed .scene-sparkles { opacity: 1; }
.scene-cake .cake.revealed .scene-sparkles i { animation: wish-flight 1.25s ease-out both; animation-delay: calc(var(--delay) * .08s); }
.scene-cake .cake-body { position: relative; overflow: hidden; isolation: isolate; }
.scene-cake .cake-body::before, .scene-cake .cake-body::after { content: none !important; display: none !important; }
.scene-cake .cake-body b, .scene-cake .cake-body em { position: relative; z-index: 3; display: block; color: #fff; text-shadow: 0 1px 5px #17325f66; }
.scene-cake .cake-body b { font-size: 11px; font-weight: 700; }
.scene-cake .cake-body em { font-size: 22px; font-weight: 600; }
@keyframes scene-twinkle { to { opacity: .95; transform: scale(1.5); } }
@keyframes wish-flight { 0% { opacity: 0; transform: translateY(52px) scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--x) - 50) * .7px), calc((var(--y) - 90) * 1.8px)) scale(1.5); } }

.scene-countdown .count { position: relative; z-index: 2; text-shadow: 0 0 15px currentColor, 0 0 42px currentColor; }
.scene-countdown .count::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; color: #fff8cc; background: currentColor; opacity: 0; box-shadow: 32px 4px currentColor, -28px -9px currentColor, 10px 35px currentColor, -7px -38px currentColor, 44px -26px currentColor, -43px 24px currentColor; }
.scene-countdown .count.count-burst::after { animation: count-stars .85s ease-out; }
.scene-countdown .count.count-burst { animation: count-disperse .85s ease-out; }
@keyframes count-disperse { 0% { opacity: .25; transform: scale(.7); filter: blur(6px); } 55% { opacity: 1; transform: scale(1.12); filter: blur(0); } 100% { transform: scale(1); } }
@keyframes count-stars { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }
.scene-photo.active { animation: enter-night 7s ease-in-out both; }
.scene-star.active .star-map { animation: star-reveal 9s ease-out both, space-drift 13s 9s ease-in-out infinite; }
@keyframes enter-night { 0%, 55% { filter: brightness(1); } 100% { filter: brightness(.72) saturate(1.12); } }
@keyframes star-reveal { from { opacity: 0; transform: scale(.72); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }

/* Sky blue: fresh, clear and healing. */
.stage.theme-blue .scene-cover { background: radial-gradient(circle at 22% 18%, #fff9 0 4%, transparent 22%), linear-gradient(155deg, #c9edff, #82c8f4 48%, #629be4) !important; }
.stage.theme-blue .scene-greeting { background: linear-gradient(155deg, #bce7fb, #67a9e8) !important; }
.stage.theme-blue .scene-wish { background: linear-gradient(155deg, #a7daf6, #538ed8) !important; }
.stage.theme-blue .scene-countdown { background: radial-gradient(circle, #bfeaff 0, #65a9e7 55%, #467dcc) !important; }
.stage.theme-blue .scene-cake { background: linear-gradient(160deg, #9bd4f3, #4e87d1) !important; }
.stage.theme-blue .scene-letter { background: linear-gradient(155deg, #8dc8ed, #4c81ca) !important; }
.stage.theme-blue .scene-photo { background: linear-gradient(165deg, #70b7e8 0, #477fc9 58%, #173c78 100%) !important; }
.stage.theme-blue .scene-star, .stage.theme-blue .scene-moon, .stage.theme-blue .scene-zodiac { background: radial-gradient(circle at 50% 38%, #284e91, #0b214b 58%, #040d25) !important; }
.stage.theme-blue .scene-end { background: linear-gradient(155deg, #77b8e7, #496fc2) !important; }
.theme-blue .scene-sparkles { color: #fff; }
.theme-blue .scene-cover .scene-sparkles { opacity: .48; }
.theme-blue .cake-cream { background: linear-gradient(#fff, #ecf7ff); }
.theme-blue .cake-body { background: linear-gradient(180deg, #72d2f5 0, #39a6e3 48%, #2678c7 100%); box-shadow: inset 0 7px 12px #dff8ff55, inset 0 -15px 20px #145c9b44, 0 12px 18px #173d7544; }
.theme-blue .cake-cream i { background: radial-gradient(circle at 35% 30%, #d9f2ff, #59a4dd 68%); }
.theme-blue .letter { background: #fffdf5; border-color: #83aeda; box-shadow: 0 14px 35px #153c7538; }
.theme-blue .letter::before { border-color: #9dbbda; }
.theme-blue .letter::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 82px; height: 82px; border: 1px solid #70a0ca22; border-radius: 50%; box-shadow: -18px -11px 0 -17px #70a0ca33, -39px -28px 0 -37px #70a0ca44; pointer-events: none; }
.theme-blue .letter p { color: #45627d; }
.theme-blue .letter .salutation, .theme-blue .letter .signature { color: #5086b7; }
.theme-blue .memories img { border: 7px solid #fff; border-bottom-width: 20px; box-shadow: 0 9px 20px #0c315b44; }
.theme-blue .star-map { background: radial-gradient(circle at 38% 30%, #5b82c8, #1a3973 40%, #06152f 82%); border-color: #d6e7ff99; }
.theme-blue .map-line { background: #d9e8ff; box-shadow: 0 0 6px #d9e8ff; }

/* Sunset pink: romantic, warm and softly cinematic. */
.stage.theme-pink .scene-cover { background: radial-gradient(circle at 22% 20%, #fff7 0 5%, transparent 22%), linear-gradient(155deg, #ffc1cf, #ee9aa4 48%, #b28bd1) !important; }
.stage.theme-pink .scene-greeting { background: linear-gradient(155deg, #f8b2bd, #dc82ae 58%, #9578c6) !important; }
.stage.theme-pink .scene-wish { background: linear-gradient(155deg, #f5a8b5, #cf73a9 60%, #806bb6) !important; }
.stage.theme-pink .scene-countdown { background: radial-gradient(circle, #ffd2cf, #dc7fa7 55%, #755da8) !important; }
.stage.theme-pink .scene-cake { background: linear-gradient(160deg, #eda0ad, #b7659d 62%, #67549d) !important; }
.stage.theme-pink .scene-letter { background: linear-gradient(155deg, #df91a9, #9c609b) !important; }
.stage.theme-pink .scene-photo { background: linear-gradient(165deg, #ce819e 0, #875e9d 58%, #342a69 100%) !important; }
.stage.theme-pink .scene-star, .stage.theme-pink .scene-moon, .stage.theme-pink .scene-zodiac { background: radial-gradient(ellipse at 38% 30%, #8f477c 0, #442750 42%, #120e2d 84%) !important; }
.stage.theme-pink .scene-end { background: linear-gradient(155deg, #e59aab, #a664a1) !important; }
.theme-pink .scene-sparkles { color: #ffe5bd; }
.theme-pink .scene-cover::after { background: radial-gradient(circle at 22% 32%, #fff7 0 3%, transparent 15%), radial-gradient(circle at 78% 68%, #ffd8c866 0 4%, transparent 18%); animation: sunset-glow 8s ease-in-out infinite alternate; }
@keyframes sunset-glow { to { transform: translate(12px, -15px) scale(1.08); opacity: .75; } }
.theme-pink .scene-countdown .scene-sparkles i { width: calc(var(--size) * 2px); height: calc(var(--size) * 1.3px); border-radius: 80% 0 80% 0; transform: rotate(35deg); }
.theme-pink .cake-cream { background: linear-gradient(#fff9f6, #ffe2e4); }
.theme-pink .cake-body { background: linear-gradient(180deg, #ff9fa8 0, #ec6683 48%, #bd315d 100%); box-shadow: inset 0 7px 12px #fff1ef66, inset 0 -15px 20px #8d214544, 0 12px 20px #67274855; }
.theme-pink .cake-cream i { background: radial-gradient(circle at 35% 30%, #ffb3b3, #b71f48 68%); }
.theme-pink .flame { filter: drop-shadow(0 0 12px #ffcf58); }
.theme-pink .letter { background: #fff7f1; border-color: #c89286; box-shadow: 0 14px 35px #4b234338; }
.theme-pink .letter::before { border-color: #c89286; box-shadow: inset 0 0 10px #d6a06522; }
.theme-pink .letter::after { content: "✦  ·  ✧"; position: absolute; right: 16px; bottom: 12px; color: #b67b5b38; font-size: 18px; }
.theme-pink .letter p { color: #75545f; }
.theme-pink .letter .salutation, .theme-pink .letter .signature { color: #b2607c; }
.theme-pink .memories { transform: rotate(-1deg); }
.theme-pink .memories img { border: 6px solid #fff4e8; box-shadow: 0 10px 20px #3d1f4d55; }
.theme-pink .memories img:nth-child(even) { transform: rotate(5deg) translateY(8px); }
.theme-pink .star-map { background: radial-gradient(circle at 35% 28%, #a45b9a, #4b2c68 42%, #130e2e 82%); border-color: #ffd9ab88; }
.theme-pink .map-line { background: #f5d694; box-shadow: 0 0 7px #f5d694; }

/* Midnight purple: restrained, ceremonial and immersive. */
.stage.theme-night .scene-cover { background: radial-gradient(circle at 68% 18%, #8977d733 0 5%, transparent 24%), linear-gradient(155deg, #423873, #191936 60%, #0b1025) !important; }
.stage.theme-night .scene-greeting { background: linear-gradient(155deg, #4b3d7e, #17182f 65%) !important; }
.stage.theme-night .scene-wish { background: linear-gradient(155deg, #40346e, #12152c 65%) !important; }
.stage.theme-night .scene-countdown { background: radial-gradient(circle, #54468b, #19182f 58%, #090d20) !important; }
.stage.theme-night .scene-cake { background: linear-gradient(160deg, #342c5e, #101529 70%) !important; }
.stage.theme-night .scene-letter { background: linear-gradient(155deg, #2b2550, #10152b) !important; }
.stage.theme-night .scene-photo { background: radial-gradient(circle at 50% 42%, #332b5b, #0d1429 72%) !important; }
.stage.theme-night .scene-star, .stage.theme-night .scene-moon, .stage.theme-night .scene-zodiac { background: radial-gradient(ellipse at 48% 32%, #302760, #11132f 48%, #030714 88%) !important; }
.stage.theme-night .scene-end { background: linear-gradient(155deg, #4b3e78, #1a1a36) !important; }
.theme-night .scene-sparkles { color: #fff3bf; }
.theme-night .scene-cover .scene-sparkles i:nth-child(n+7), .theme-night .scene-greeting .scene-sparkles i:nth-child(n+9) { display: none; }
.theme-night .scene-sparkles i { opacity: .72; box-shadow: 0 0 11px currentColor; }
.theme-night .cake-cream { background: linear-gradient(#493f59, #211e2a); }
.theme-night .cake-body { background: linear-gradient(160deg, #393342, #171922 48%, #090d16); border: 1px solid #8b764e; box-shadow: inset 0 1px 12px #ffffff1c, 0 12px 25px #0008; }
.theme-night .cake-body b, .theme-night .cake-body em { color: #ffe09a; text-shadow: 0 1px 6px #000, 0 0 10px #c69b4855; }
.theme-night .cake-cream i { background: radial-gradient(circle at 35% 30%, #dfca8a, #8b6b28 68%); }
.theme-night .letter { background: #f3eddf; border-color: #867aa8; box-shadow: 0 16px 40px #0007; }
.theme-night .letter::before { border-color: #74688e66; }
.theme-night .letter::after { content: "♈  ·  ♌  ·  ♐"; position: absolute; right: 13px; bottom: 10px; color: #40356418; font: 17px Georgia, serif; }
.theme-night .letter p { color: #4e4857; }
.theme-night .letter .salutation, .theme-night .letter .signature { color: #5c4e7d; }
.theme-night .memories img { border: 6px solid #242333; box-shadow: 0 0 0 1px #a18cc055, 0 14px 28px #0009; filter: saturate(.88) contrast(1.04); }
.theme-night .star-map { background: radial-gradient(circle at 37% 28%, #51458c, #24204f 42%, #080b22 82%); border-color: #dbc88677; box-shadow: 0 0 26px #8c79d455, 0 0 95px #54469b44, inset 0 0 45px #02030dcc; }
.theme-night .map-line { background: linear-gradient(90deg, #d8bd72, #d5dcff); box-shadow: 0 0 7px #e5dcb9; }
.scene-photo .memories { position: relative; }
.scene-photo .memories::before { content: ""; position: absolute; left: 14%; right: 14%; top: 48%; height: 1px; background: linear-gradient(90deg, transparent, #ffffff88 25%, #ffffff88 75%, transparent); box-shadow: 0 0 8px #fff8; transform: rotate(-8deg); }
.scene-end .end-greeting { display: flex; flex-direction: column; align-items: center; gap: .18em; width: 100%; margin: 18px 0; line-height: 1.2; }
.scene-end .end-greeting span { display: block; max-width: 100%; white-space: nowrap; }
.scene-end .end-greeting span:last-child { font-size: .82em; }

.share-dialog { width: min(92vw, 420px); padding: 30px; border: 0; border-radius: 8px; color: #242536; text-align: center; box-shadow: 0 24px 80px #11152b44; }
.share-dialog::backdrop { background: #111427aa; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 13px; top: 10px; border: 0; background: none; color: #737587; font-size: 25px; cursor: pointer; }
.dialog-kicker { color: #d66f91; font-size: 11px; letter-spacing: .12em; }
.share-dialog h2 { margin: 8px 0 18px; font-size: 22px; font-weight: 500; }
.qr-frame { width: 224px; aspect-ratio: 1; margin: auto; padding: 10px; border: 1px solid #e8e7ef; background: #fff; }
.qr-frame img { display: block; width: 100%; height: 100%; }
.share-dialog label { text-align: left; margin-top: 20px; }
.share-dialog input { font-size: 11px; color: #606273; }
.dialog-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dialog-actions button, .dialog-actions a { display: grid; place-items: center; min-height: 38px; border: 1px solid #dddde6; border-radius: 6px; background: #fff; color: #3e4053; font-size: 11px; text-decoration: none; cursor: pointer; }
.share-dialog p { margin: 14px 0 0; font-size: 11px; }

.shared-view { min-height: 100dvh; overflow: hidden; background: #080a12; }
.shared-view .topbar, .shared-view .editor, .shared-view .preview-label { display: none; }
.shared-view .workspace { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; min-height: 100dvh; padding: 0; margin: 0; max-width: none; overflow: hidden; }
.shared-view .preview-area { position: static; grid-column: 1; display: grid; place-items: center; width: 100%; min-width: 0; min-height: 100dvh; padding: 0; overflow: hidden; }
.shared-view .phone { width: min(100vw, 56.25vh) !important; height: min(100vh, 177.778vw) !important; width: min(100vw, 56.25dvh) !important; height: min(100dvh, 177.778vw) !important; min-width: 0; max-height: 100dvh; aspect-ratio: 9 / 16 !important; border: 0; border-radius: 0; box-shadow: none; }
.shared-view .stage { border: 0; border-radius: 0; }
.shared-view .phone-speaker, .shared-view .phone-home { display: none; }
.shared-view .music-control { position: fixed; right: 24px; top: 18px; max-width: calc(100% - 48px); }
.shared-view .music-control > span { display: none; }
.shared-view[data-theme="blue"] { background: #315f9e; }
.shared-view[data-theme="pink"] { background: #ad78ae; }
.shared-view[data-theme="night"] { background: #090c1c; }

@media (max-width: 620px) {
  .topbar { padding: 0 4vw; }
  .topbar small, .top-actions .quiet { display: none; }
  .share-action { padding: 8px 10px; }
  .theme-row { grid-template-columns: 1fr; }
  .theme { grid-template-columns: 22px 1fr auto; grid-template-rows: auto; }
  .theme i { grid-row: auto; width: 22px; height: 22px; }
  .theme small { font-size: 10px; }
}