[hidden]{display:none!important}
/* Mobile composition remains identical on wider preview screens. */
html{min-height:100%;background:#f6eddf}body{max-width:480px;margin:0 auto;min-height:100svh;background:#fbf7f0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
main.recipient-shell{display:block;width:100%;max-width:480px;padding:12px 10px 16px;margin:0 auto}
.recipient-shell .theater{width:100%;height: min(760px,calc(100svh - 64px));min-height:620px;border-width:4px;border-radius:150px 150px 24px 24px;overflow:clip}
.recipient-replay{display:block;margin:12px auto 0;font-size:11px}
#scene .avatar-position{top:150px;width:580px;height:870px;margin-left:-290px}
#scene:is([data-character=cat],[data-character=dog],[data-character=chibi-boy],[data-character=chibi-girl]) .avatar-position{width:415px;height:622.5px;margin-left:-207.5px}
.scene-actions{padding-bottom:5px}.letter-paper{max-height:65%;overflow-y:auto;-webkit-overflow-scrolling:touch}.primary,.text-button{touch-action:manipulation}dialog{max-width:calc(100vw - 24px)}
@media(max-width:360px){#scene{padding-left:16px;padding-right:16px}.scene-title{font-size:23px}.primary{padding-left:22px;padding-right:22px}}
/* Decorative candle heads share the original flame and extinguishing state. */
#scene .candle[data-style=gold]{background:linear-gradient(90deg,#b9833f,#ffe7ab,#bd8845);border-radius:3px}
#scene .candle:is([data-style=heart],[data-style=star]){background:linear-gradient(90deg,#d2ab87,#fff0ce);border-radius:2px}
#scene .candle:is([data-style=heart],[data-style=star])::after{content:'♥';position:absolute;top:-7%;left:50%;transform:translateX(-50%);font:26px/1 Georgia,serif;color:#dc8b9a;text-shadow:0 1px 1px #97485433}
#scene .candle[data-style=star]::after{content:'★';color:#e4b853}

#scene .cake-position .keepsake-candle{top:auto;bottom:58%;height:25%;width:11px;pointer-events:none}
/* Center each cover line even when the sender line has a narrower text box. */
#scene[data-phase=intro] .scene-caption{text-align:center;display:flex;flex-direction:column;align-items:center}
#scene[data-phase=intro] .scene-title,#scene[data-phase=intro] .scene-copy{width:100%;margin-left:auto;margin-right:auto;text-align:center;overflow-wrap:anywhere}
/* Bright flame core and halo apply throughout the recipient sequence. */
#scene .candle[data-style=rainbow]{background:linear-gradient(#ef9fb2 0 20%,#f4cf86 20% 40%,#adcfb2 40% 60%,#a5c7e0 60% 80%,#c5acd9 80%)}
#scene .candle[data-style=pearl]{border-radius:8px;background:radial-gradient(ellipse at 40% 35%,#fffdf3 15%,#f5e6cf 48%,#c6a581 76%);background-size:100% 22%}
#scene .candle.lit .flame{background:radial-gradient(ellipse at 50% 68%,#fff 0 22%,#fff8bf 38%,#ffd166 65%,#ff9d35 95%);box-shadow:0 0 7px 3px #fff4bc,0 0 20px 8px #ffc15c99,0 0 42px 15px #ffb44a38}
#scene .candle.lit .flame::before{content:'';position:absolute;inset:-120% -220%;background:radial-gradient(ellipse,#ffe3a76b,transparent 70%);pointer-events:none}
#scene .candle:not(.lit) .flame{opacity:0;visibility:hidden;box-shadow:none}
#scene[data-phase=wish] .scene-actions{bottom:12px;min-height:0;z-index:10}
#scene[data-phase=wish] .scene-footer{display:none}
.blow-guide{gap:8px;padding:12px 14px 8px;border-radius:24px;background:linear-gradient(#39251d00,#39251dcc 38%);position:relative}
.blow-guide #mic-status{color:#fff9ec;text-shadow:0 1px 3px #24140b;font-size:14px}
.airflow{height:62px;width:150px;margin:0 0 -4px;flex-shrink:0}
.airflow i{border-width:3px;width:30px;height:42px;filter:drop-shadow(0 0 7px #ffe9b4);animation-duration:1.5s}
.airflow span{font-size:36px;color:#fff6d8;opacity:.9;text-shadow:0 0 14px #ffc267}
.blow-backup summary{color:#533d30;background:#fff5e5;border:1px solid #ead3b4;border-radius:18px;padding:9px 18px;font-size:12px;text-shadow:none;min-height:36px}
.breath-meter{width:130px;height:5px;background:#ffffff40;border-radius:8px;overflow:hidden;display:none}
.blow-guide[data-mic-state=listening] .breath-meter{display:block}
.breath-meter i{display:block;width:100%;height:100%;background:#ffe4a3;transform:scaleX(var(--progress,0));transform-origin:left;transition:transform .08s;box-shadow:0 0 12px #ffe4a3}
#finish-preview{margin-top:16px;width:100%}
#memory{max-height:90dvh;overflow:auto;padding:22px}
#memory h2{font-size:23px;margin:12px 0}
#memory #memory-image{display:block;max-height:43dvh;width:auto;max-width:100%;margin:10px auto;object-fit:contain}
#memory .primary{min-height:44px;padding:11px 18px}
#scene .blow-backup #hold{background:#795a49;color:#fff8ee;border:1px solid #e6c7a3;padding:12px 22px;border-radius:16px}
.theater:has(#scene[data-phase=wish])>.scene-footer{display:none}

/* A fixed eye-level camera projects the carrier moving through depth. */
#scene:is([data-phase=approach],[data-phase=envelope],[data-phase=opening],[data-phase=letter]) .stage-world{perspective:800px;perspective-origin:50% 22%}
#scene[data-phase=approach] .carrier{transform-origin:50% 22%;animation:depth-carrying-approach 9.5s cubic-bezier(.23,.4,.28,1) both;will-change:transform}
#scene[data-phase=approach] .arrival-balloons{animation-duration:9.5s}
#scene[data-phase=approach] .stage-floor{top:0;bottom:auto;animation:depth-floor-approach 9.5s linear both}
@keyframes depth-carrying-approach{
 0%{opacity:0;transform-origin:50% 64%;transform:translate3d(0,-48px,0) scale(.3)}
 9.47%{opacity:1}
 27.63%{opacity:1;transform-origin:50% 64%;transform:translate3d(0,-31px,0) scale(.49)}
 51.32%{opacity:1;transform-origin:50% 64%;transform:translate3d(0,-12px,0) scale(.76)}
 67.11%{opacity:1;transform-origin:50% 64%;transform:translate3d(0,-3px,0) scale(.94)}
 78.94%{opacity:1;transform-origin:50% 64%;transform:translate3d(0,0,0) scale(1)}
 78.95%{opacity:1;transform-origin:50% 22%;transform:translate3d(0,0,0) scale(1);animation-timing-function:ease-out}
 100%{opacity:1;transform-origin:50% 22%;transform:translate3d(0,0,160px) scale(1)}
}
@keyframes depth-floor-approach{
 0%{opacity:0;transform:translate(-50%,430px) scale(.32)}
 10%{opacity:.25;transform:translate(-50%,450px) scale(.38)}
 60%{opacity:.2;transform:translate(-50%,670px) scale(.85)}
 100%{opacity:0;transform:translate(-50%,1050px) scale(1.6)}
}
@media(prefers-reduced-motion:reduce){#scene[data-phase=approach] .carrier{animation:none;opacity:1;transform:translate3d(0,0,160px)}#scene[data-phase=approach] .stage-floor{animation:none;opacity:0}}

/* Hold the arrival endpoint while the envelope and letter animate independently. */
#scene:is([data-phase=envelope],[data-phase=opening],[data-phase=letter]) .carrier{transform-origin:50% 22%;transform:translate3d(0,0,160px) scale(1);transition:opacity .8s;animation:none}
#scene:is([data-phase=envelope],[data-phase=opening],[data-phase=letter]) .stage-floor{opacity:0}

.save-memory-dialog{width:min(94vw,560px);max-width:min(94vw,560px);max-height:94dvh;padding:16px;text-align:center;overflow:auto}
.save-memory-dialog p{font-size:14px;color:#765844;margin:8px 40px 14px}
.save-memory-dialog #save-memory-image{display:block;width:auto;height:auto;max-width:100%;max-height:78dvh;object-fit:contain;margin:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:default}