.stage { position: relative; width: 100%; height: 100%; min-height: inherit; background: var(--stage); color: var(--text); font-family: var(--font-text); overflow: hidden; }
.app.open-fill .stage { height: 100dvh; }
.artboard { position: absolute; top: 50%; left: 50%; transform-origin: center; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; padding: 34px 22px 28px; text-align: center; animation: scene-in .55s ease both; overflow: hidden; container-type: inline-size; }
@keyframes scene-in { from { opacity: 0; } }
.scene-title { font: 400 1.65rem/1.25 var(--font-display); }
.hint { color: var(--muted); font-size: 1rem; transition: opacity .3s; }
.hint.is-gone { opacity: 0; }
.hint-strong { font: 400 1.5rem/1.3 var(--font-display); color: var(--seal); }
.is-hidden { visibility: hidden; }
.stage .btn { min-width: 170px; }

.envelope { position: relative; width: min(84%, 300px); aspect-ratio: 7 / 5; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--seal) 55%, transparent); display: grid; place-items: end center; padding-bottom: 12%; perspective: 700px; }
.envelope-flap { position: absolute; inset: 0 0 auto; height: 62%; background: color-mix(in srgb, var(--paper) 70%, var(--line)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 1s cubic-bezier(.5,0,.2,1); }
.envelope.is-open .envelope-flap { transform: rotateX(178deg); }
.envelope-for { color: var(--text); font: 400 1.65rem/1.25 var(--font-display); transition: opacity .3s; max-width: 90%; overflow-wrap: anywhere; }
.envelope-for.is-gone { opacity: 0; }
.seal { position: absolute; top: 62%; left: 50%; translate: -50% -50%; width: 84px; height: 84px; border: 0; padding: 0; cursor: pointer; border-radius: 47% 53% 50% 50%; background: var(--seal); box-shadow: inset 0 0 0 6px var(--seal-ring), inset 0 0 0 8px var(--seal); color: var(--seal-ink); font: 400 2rem/1 var(--font-display); transition: transform .7s ease, opacity .7s ease; }
.envelope.is-open .seal { transform: scale(1.5) rotate(14deg); opacity: 0; }

.cake { display: grid; justify-items: center; width: min(78%, 250px); }
.candle-row { display: flex; justify-content: center; gap: 26px; }
.candle { position: relative; width: 44px; height: 92px; background: none; border: 0; padding: 0; cursor: pointer; }
.stick { position: absolute; bottom: 0; left: 18px; width: 8px; height: 48px; border-radius: 2px; background: var(--accent); }
.wick { position: absolute; bottom: 48px; left: 21.5px; width: 1px; height: 7px; background: var(--text); }
.flame { position: absolute; bottom: 54px; left: 14px; width: 16px; height: 28px; background: #f6c453; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: bottom; animation: flicker 1.1s ease-in-out infinite alternate; transition: opacity .25s, scale .25s; }
@keyframes flicker { to { transform: scaleY(.88) skewX(3deg); } }
.smoke { position: absolute; bottom: 56px; left: 20px; width: 4px; height: 20px; background: var(--muted); border-radius: 4px; opacity: 0; }
.candle.is-out { cursor: default; }
.candle.is-out .flame { opacity: 0; scale: .2; }
.candle.is-out .smoke { animation: smoke 1.2s ease-out; }
@keyframes smoke { 0% { opacity: .55; } 100% { opacity: 0; transform: translateY(-30px) scaleX(2); } }
.tier { background: var(--seal-ring); }
.tier-top { width: 72%; height: 46px; border-radius: 4px 4px 0 0; border-bottom: 3px solid var(--seal); }
.tier-bottom { width: 100%; height: 58px; background: var(--paper); border: 1px solid var(--line); border-top: 0; }
.plate { width: 118%; height: 7px; background: var(--seal); border-radius: 3px; }

.balloon-field { display: flex; gap: 10px; justify-content: center; align-items: flex-start; width: 100%; }
.balloon-slot { position: relative; flex: 1 1 0; display: grid; justify-items: center; min-height: 170px; max-width: 110px; }
.balloon { grid-area: 1 / 1; background: none; border: 0; padding: 0; cursor: pointer; width: 74px; display: grid; justify-items: center; animation: bob 2.6s ease-in-out infinite alternate; transition: transform .22s, opacity .22s; }
.balloon-1 { animation-delay: -.8s; margin-top: 22px; }
.balloon-2 { animation-delay: -1.5s; }
@keyframes bob { to { translate: 0 -9px; } }
.balloon-body { display: block; width: 72px; height: 88px; border-radius: 50% 50% 48% 48%; background: var(--accent); }
.balloon-1 .balloon-body { background: var(--seal-ring); }
.balloon-2 .balloon-body { background: var(--seal); }
.balloon-string { display: block; width: 1px; height: 54px; background: var(--muted); }
.balloon.is-popped { transform: scale(1.6); opacity: 0; pointer-events: none; }
.balloon-word { pointer-events: none; grid-area: 1 / 1; align-self: center; font: 400 1.2rem/1.2 var(--font-display); color: var(--text); opacity: 0; transition: opacity .35s .1s; overflow-wrap: anywhere; }
.balloon-word.is-shown { opacity: 1; }

.paper { overscroll-behavior: contain; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line); box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--seal) 55%, transparent); width: 100%; max-width: 420px; max-height: 80%; overflow-y: auto; padding: 26px 24px; text-align: left; border-radius: 8px; animation: unfold .7s cubic-bezier(.2,.7,.2,1) both; transform-origin: top; }
@keyframes unfold { from { transform: scaleY(.25); opacity: 0; } }
.paper-title { font: 400 1.3rem/1.25 var(--font-display); color: var(--seal); margin-bottom: 14px; }
.paper-body { white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; }

.ending-title { font: 400 2.2rem/1.15 var(--font-display); color: var(--seal); overflow-wrap: break-word; max-width: 100%; }
.ending-from { font-size: 1.1rem; margin-bottom: 8px; }

.ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.heart { position: absolute; bottom: -24px; background: var(--seal-ring); transform: rotate(45deg); opacity: 0; animation: rise linear infinite; }
.heart::before, .heart::after { content: ''; position: absolute; width: 100%; height: 100%; background: inherit; border-radius: 50%; }
.heart::before { left: -50%; }
.heart::after { top: -50%; }
@keyframes rise {
  0% { transform: translateY(0) rotate(45deg); opacity: 0; }
  12% { opacity: .55; }
  85% { opacity: .35; }
  100% { transform: translateY(-110vh) rotate(45deg); opacity: 0; }
}
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

.bunting { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; padding: 0 6px; }
.bunting span { flex: 1; max-width: 30px; aspect-ratio: 1 / 1.1; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--seal-ring); }
.bunting span:nth-child(3n + 1) { background: var(--seal); }
.bunting span:nth-child(3n + 2) { background: var(--accent); }
.celebrate-happy { font: 400 1.5rem/1.2 var(--font-display); margin-top: 18px; }
.celebrate-name { font: 400 3.4rem/1.08 var(--font-display); color: var(--seal); overflow-wrap: break-word; max-width: 100%; }
.celebrate-date { padding: 4px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--paper-ink); font-size: .9375rem; }

.note-card { display: grid; justify-items: center; gap: 12px; padding: 20px 24px; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line); border-radius: 16px; animation: scene-in .5s ease both; }
.note-text { font: 400 1.5rem/1.25 var(--font-display); color: var(--seal); }

.flip { width: min(72%, 230px); aspect-ratio: 3 / 4; perspective: 900px; background: none; border: 0; padding: 0; cursor: pointer; animation: scene-in .45s ease both; }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.flip.is-open .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 20px; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); }
.flip-front { background: var(--seal); color: var(--seal-ink); }
.flip-num { font: 400 2.6rem/1 var(--font-display); }
.flip-tap { font-size: .9375rem; }
.flip-back { background: var(--paper); color: var(--paper-ink); transform: rotateY(180deg); font: 400 1.25rem/1.4 var(--font-display); }

.scratch { position: relative; width: min(88%, 320px); aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.scratch-prize { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: var(--paper-ink); font: 400 1.2rem/1.4 var(--font-display); }
.scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .6s ease; }
.scratch-cover.is-done { opacity: 0; pointer-events: none; }

.wheel-wrap { position: relative; width: min(84%, 300px); aspect-ratio: 1; }
.wheel { width: 100%; height: 100%; transition: transform 4.4s cubic-bezier(.15,.7,.1,1); filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--seal) 30%, transparent)); }
.wheel-label { font: 400 11.5px var(--font-text); }
.wheel-pointer { position: absolute; top: -6px; left: 50%; translate: -50% 0; z-index: 2; width: 22px; height: 22px; background: var(--text); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wheel-spin { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 25%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--paper); background: var(--accent); color: var(--accent-ink); font: 500 1rem var(--font-text); cursor: pointer; }
.wheel-spin:disabled { cursor: default; }

.mark { color: var(--seal); font-weight: 500; }
.ending { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 22px; }

.sound-toggle { position: absolute; top: 12px; right: 12px; z-index: 6; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 85%, transparent); color: var(--text); cursor: pointer; }
.sound-toggle[aria-pressed="false"] { color: var(--muted); }
.mic-btn { min-width: 0; }
.candle .flame { transform-origin: 50% 100%; }
.candle[style] .flame { animation: none; transform: skewX(calc(var(--sway, 0) * -18deg)) scaleY(calc(1 - var(--sway, 0) * .35)); transition: transform .08s linear; }