/* ===== Rumana — Birthday Experience · styles.css ===== */
:root{
  --bg:#f4ece0; --bg2:#ecdcc8; --ink:#5b1e2d; --ink-soft:#8c6b69;
  --rose:#d92d58; --rose-d:#b81f47; --dusty:#d99a94; --blush:#f3d6d2; --gold:#e3a94b; --paper:#fffaf3;
  --f-script:'Great Vibes','Snell Roundhand','Brush Script MT',cursive;
  --f-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --shadow:0 10px 30px rgba(91,30,45,.16);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:radial-gradient(ellipse at 50% 30%,#f8f1e6 0%,var(--bg) 55%,var(--bg2) 100%);
  color:var(--ink);font-family:var(--f-sans);line-height:1.45;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
img,video,canvas,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- scenes ---------- */
#app{position:fixed;inset:0}
.scene{
  position:absolute;inset:0;display:flex;overflow-x:hidden;overflow-y:auto;
  padding:calc(var(--st) + 66px) calc(var(--sr) + 18px) calc(var(--sb) + 22px) calc(var(--sl) + 18px);
  opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .7s ease,transform .7s ease,visibility 0s .7s;
  -webkit-overflow-scrolling:touch;
}
.scene.active{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s ease}
.scene-top .stack{margin-top:0}
.stack{margin:auto;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(8px,1.8dvh,16px)}
.stack.wide{max-width:560px}

.title{display:flex;flex-direction:column;align-items:center;line-height:1.05;outline:none}
.t-serif{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.05rem,4.6vw,1.45rem);letter-spacing:.01em}
.t-script{font-family:var(--f-script);font-weight:400;color:var(--rose-d);font-size:clamp(2.1rem,10.5vw,3.3rem);line-height:1.05;padding:0 .1em}
.nick{color:var(--rose-d)}
.sub{font-size:clamp(.78rem,3.3vw,.92rem);color:var(--ink-soft);max-width:30ch}
.hint{font-family:var(--f-serif);font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em}
.small{font-size:.76rem;color:var(--ink-soft)}
.cap{font-family:var(--f-hand);font-size:1.25rem;min-height:1.6em}
.msg{min-height:1.3em;font-size:.82rem;color:var(--rose-d);font-weight:500}
.divider{display:flex;align-items:center;gap:10px;color:var(--rose);width:150px}
.divider i{flex:1;height:1px;background:currentColor;opacity:.4}
.divider b{font-size:.7rem}

/* ---------- buttons ---------- */
.btn{
  min-height:48px;min-width:48px;padding:12px 30px;border-radius:999px;font-weight:600;font-size:.92rem;letter-spacing:.02em;
  color:#fff;background:linear-gradient(180deg,#e2a9a2,#d58b88);box-shadow:0 8px 18px rgba(185,100,100,.28);
  transition:transform .2s,box-shadow .2s,opacity .3s,filter .3s;
}
.btn:active{transform:scale(.96)}
.btn.hot{background:linear-gradient(180deg,#ea4a73,var(--rose-d))}
.btn.ghost{background:rgba(255,255,255,.55);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(217,154,148,.7)}
.btn.mini-btn{min-height:44px;padding:8px 22px;font-size:.84rem}
.btn[disabled]{opacity:.42;filter:saturate(.5);pointer-events:none}
.btn.next:not([disabled]){animation:nextGlow 2.4s ease-in-out infinite}
.actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.round{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:1.6rem;line-height:1;color:var(--rose-d);display:grid;place-items:center;padding-bottom:4px}
.round.light{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.round:active{transform:scale(.92)}
.vnav{display:flex;align-items:center;gap:14px}
.pdots{display:flex;gap:7px;max-width:170px;flex-wrap:wrap;justify-content:center}
.pdots i{width:8px;height:8px;border-radius:50%;background:var(--blush);transition:.3s}
.pdots i.on{background:var(--rose);transform:scale(1.35)}

/* ---------- dots + keypad ---------- */
.dots{display:flex;gap:14px;padding:6px 0}
.dots span{width:15px;height:15px;border-radius:50%;border:1.5px solid #c9a7a3;transition:.25s}
.dots span.on{background:var(--rose);border-color:var(--rose);transform:scale(1.12)}
.dots.ok span{background:#2e9e68;border-color:#2e9e68}
.dots.shake,.year-input.shake{animation:shake .5s}
.keypad{
  display:grid;grid-template-columns:repeat(3,56px);gap:12px;padding:16px 18px;border-radius:26px;
  background:linear-gradient(180deg,rgba(243,214,210,.85),rgba(236,200,196,.7));box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),var(--shadow);
}
.key{
  width:56px;height:56px;border-radius:50%;font-family:var(--f-serif);font-size:1.25rem;font-weight:600;color:var(--ink);
  background:radial-gradient(circle at 35% 30%,#fffdf8,#efe6d6);box-shadow:0 3px 8px rgba(91,30,45,.22),inset 0 -2px 0 rgba(0,0,0,.05);
  transition:transform .12s;
}
.key:active{transform:scale(.9)}
.key.del{background:radial-gradient(circle at 35% 30%,#ef5d82,var(--rose));color:#fff;font-size:1.2rem}
.key.clearkey{font-family:var(--f-sans);font-size:.72rem;letter-spacing:.02em}
.year-form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.year-input{
  width:min(240px,80%);height:56px;text-align:center;font-family:var(--f-serif);font-size:1.9rem;letter-spacing:.35em;padding-left:.35em;
  color:var(--ink);background:rgba(255,255,255,.75);border:2px solid #e2c3bf;border-radius:16px;outline:none;
}
.year-input:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(217,45,88,.15)}
.year-input::placeholder{color:#d9bdb8}

/* ---------- polaroid ---------- */
.polaroid{position:relative;background:#fffdf9;padding:9px 9px 12px;border-radius:4px;box-shadow:0 12px 28px rgba(91,30,45,.22);transform:rotate(-3deg)}
.polaroid .tape,.tape{position:absolute;top:-10px;left:50%;width:62px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(244,182,196,.75);z-index:2}
.bow{position:absolute;left:-10px;bottom:-8px;font-size:1.4rem}
.locked-polaroid{width:min(150px,38vw);transform:rotate(-4deg);margin-bottom:6px}
.locked-photo{aspect-ratio:1;background:repeating-linear-gradient(45deg,#f6d9d8,#f6d9d8 10px,#f2cbcb 10px,#f2cbcb 20px);display:grid;place-items:center}
.lock-heart{font-size:2.2rem;animation:float 3s ease-in-out infinite}
.p-img{overflow:hidden;background:#eee;aspect-ratio:4/5;position:relative}
.p-img img{width:100%;height:100%;object-fit:cover}
.p-cap{font-family:var(--f-hand);font-size:1.15rem;padding-top:8px;min-height:2em;color:#6b3a40}
.p-heart{position:absolute;right:10px;bottom:6px;color:var(--rose);font-size:.9rem}
.big-polaroid{width:min(76vw,300px,calc(44dvh * .8));cursor:pointer;touch-action:pan-y}
.big-polaroid.swap-l{animation:swapL .45s}
.big-polaroid.swap-r{animation:swapR .45s}
.big-polaroid .p-img img{animation:kenburns 9s ease-in-out infinite alternate}
.photo-stage{min-height:1px}

/* ---------- cake ---------- */
.cake-wrap{position:relative;width:min(74vw,290px)}
.cake-svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 14px rgba(91,30,45,.2))}
.cake-label{font-family:var(--f-script);font-size:19px;fill:#b3402f}
.flame-g{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .35s ease-in-out infinite alternate}
.flame-g:nth-child(2n){animation-duration:.42s}
.candle.out .flame-g,.candle.out .halo{display:none}
.smoke{opacity:0;fill:none;stroke:#b9a9a4;stroke-width:3;stroke-linecap:round}
.candle.out .smoke{animation:smoke 1.6s ease-out forwards}
.cake-wrap.out{animation:cakeBounce .6s}
.wish{padding-top:6px}
.wish-script{font-family:var(--f-script);font-size:clamp(1.6rem,7vw,2.2rem);color:var(--rose-d)}
.wish-text{font-size:.85rem;color:var(--ink-soft);max-width:30ch;margin:0 auto}
.wish.show .wish-script,.wish.show .wish-text{animation:rise .9s both}
.wish.show .wish-text{animation-delay:.4s}
#s-cake .stack{gap:10px}
#s-cake .stack.has-wish{gap:10px}

/* ---------- camera ---------- */
.camera-wrap{position:relative;width:min(70vw,250px);display:flex;flex-direction:column;align-items:center;min-height:min(62vw,230px)}
.camera-btn{width:100%;border-radius:20px;position:relative;z-index:2;animation:float 3.6s ease-in-out infinite}
.camera-btn svg{width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(91,30,45,.28))}
.camera-btn:active{transform:scale(.96)}
.cam-polaroid{width:min(48vw,170px);margin-top:-26px;z-index:1;transform:translateY(-120%) rotate(2deg);opacity:0;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity .4s;position:relative}
.cam-polaroid.out{opacity:1;transform:translateY(0) rotate(3deg)}
.cam-polaroid .p-img img{filter:sepia(.9) brightness(1.2) blur(6px);transition:filter 2.4s ease .6s}
.cam-polaroid.out .p-img img{filter:none}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40}
.flash.go{animation:flash .5s}

/* ---------- balloons ---------- */
.balloon-field{position:relative;width:100%;max-width:340px;height:min(38dvh,270px)}
.balloon{
  position:absolute;width:62px;height:76px;border-radius:50% 50% 48% 48%/55% 55% 45% 45%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 28%),var(--c);
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.1);animation:bob var(--d) ease-in-out infinite;
}
.balloon::before{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--c);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.balloon::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:1.5px;height:40px;background:rgba(91,30,45,.35);transform-origin:top;animation:sway 3s ease-in-out infinite}
.balloon .face{position:absolute;top:34%;left:0;right:0;font-size:.8rem;opacity:.7}
.balloon::selection{background:none}
.balloon.pop{animation:popB .25s forwards;pointer-events:none}
.balloon.gone{visibility:hidden}
.burst{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:burst .7s ease-out forwards}
.pop-words{font-family:var(--f-script);font-size:clamp(1.9rem,9vw,2.6rem);color:var(--rose-d);min-height:1.3em;display:flex;gap:.3em;justify-content:center;flex-wrap:wrap}
.pop-words span{animation:rise .7s both}

/* ---------- videos ---------- */
video::-webkit-media-controls-volume-control-container,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button {
  display: none !important;
}
.vbox{position:relative;aspect-ratio:9/16;height:min(50dvh,460px);max-width:100%;background:#1e1014;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fffdf9}
.vbox video{width:100%;height:100%;object-fit:contain;background:#1e1014}
.vid-big{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(217,45,88,.92);color:#fff;font-size:1.7rem;padding-left:6px;box-shadow:0 0 0 10px rgba(255,255,255,.2);animation:pulse 2s infinite;z-index:2}
.vid-big.hide{display:none}
.vid-fail{position:absolute;inset:0;background:rgba(30,16,20,.9);color:#fff;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;z-index:3;padding:20px}

/* ---------- gallery ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{min-height:44px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px #e2c3bf;font-size:.84rem;font-weight:500}
.chip.on{background:var(--rose);color:#fff;box-shadow:none}
.gal-grid{columns:2;column-gap:12px;width:100%;padding:6px 2px}
.gal-item{
  display:block;position:relative;width:100%;margin:0 0 12px;break-inside:avoid;background:#fffdf9;padding:6px 6px 8px;border-radius:4px;
  box-shadow:0 8px 20px rgba(91,30,45,.18);transform:rotate(var(--r,0deg));transition:transform .25s;text-align:left;
}
.gal-item:active{transform:scale(.97)}
.gal-item img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover;border-radius:2px;background:#eee}
.gal-item .badge-t{position:absolute;top:12px;left:12px;background:rgba(30,16,20,.72);color:#fff;border-radius:999px;padding:2px 9px;font-size:.7rem;font-weight:600}
.gal-item.v::after{content:"▶";position:absolute;left:50%;top:calc(50% - 10px);width:44px;height:44px;margin:-22px;border-radius:50%;background:rgba(217,45,88,.9);color:#fff;display:grid;place-items:center;font-size:1rem;padding-left:3px}
.gal-cap{font-family:var(--f-hand);font-size:1rem;padding:4px 2px 0;line-height:1.2;color:#6b3a40}
.viewer{position:fixed;inset:0;z-index:60;background:rgba(20,8,12,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(var(--st) + 60px) 14px calc(var(--sb) + 14px);animation:fade .3s}
.vw-close{position:absolute;top:calc(var(--st) + 10px);right:calc(var(--sr) + 12px);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:2rem;line-height:1;padding-bottom:4px}
.vw-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.vw-stage img,.vw-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.vw-cap{font-family:var(--f-hand);font-size:1.3rem;color:#fff;text-align:center;min-height:1.4em}
.vw-nav{display:flex;align-items:center;gap:22px;color:#fff}
.vw-count{font-size:.85rem;opacity:.8;min-width:60px;text-align:center}

/* ---------- letters ---------- */
.env-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;min-height:90px}
.env{position:relative;width:84px;height:62px;background:linear-gradient(180deg,#fbe9e6,#f3d0cb);border-radius:6px;box-shadow:var(--shadow);transition:transform .25s}
.env::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#f7dcd8,#efc4be);clip-path:polygon(0 0,100% 0,50% 58%);border-radius:6px 6px 0 0}
.env::after{content:"❤";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);color:var(--rose);font-size:.95rem}
.env:active{transform:scale(.93)}
.env.read{opacity:.62}
.env.read::after{content:"✓"}
.modal{position:fixed;inset:0;z-index:50;background:rgba(60,20,30,.45);display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.note-card{position:relative;width:min(340px,100%);background:#fffdf9;border-radius:16px;padding:34px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
.note-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:#b7a49f;margin-bottom:12px}
.note-text{font-family:var(--f-hand);font-size:1.45rem;line-height:1.3;color:#4a2b30}
.note-heart{display:block;margin-top:14px}
.x{position:absolute;top:6px;right:8px;width:44px;height:44px;font-size:1.7rem;color:#b7a49f;line-height:1}

/* ---------- quiz ---------- */
.quiz-card{width:100%;background:rgba(255,255,255,.85);border-radius:18px;padding:16px;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:10px}
.badge{align-self:flex-start;background:var(--rose-d);color:#fff;font-size:.7rem;font-weight:600;padding:3px 12px;border-radius:999px}
.quiz-q{font-family:var(--f-serif);font-weight:600;font-size:1.05rem}
.quiz-opts{display:flex;flex-direction:column;gap:8px}
.opt{min-height:46px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px #ecd8d3;text-align:left;font-size:.9rem;transition:.2s}
.opt.pick{background:#fde6ea;box-shadow:inset 0 0 0 2px var(--rose)}
.opt[disabled]{pointer-events:none}
.quiz-reply{font-family:var(--f-hand);font-size:1.25rem;color:var(--rose-d);min-height:1.4em}
.quiz-card .mini-btn{align-self:flex-end}

/* ---------- match ---------- */
.stats{display:flex;gap:10px;font-size:.78rem}
.stats span{background:rgba(255,255,255,.7);padding:4px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px #e8cdc8}
.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,340px)}
.mcard{aspect-ratio:3/4;perspective:600px;border-radius:10px}
.mcard .in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}
.mcard.up .in,.mcard.done .in{transform:rotateY(180deg)}
.mcard .f,.mcard .b{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mcard .b{background:radial-gradient(circle at 50% 50%,#f6dcc5 0 22%,#ecc3a2 23% 100%);box-shadow:inset 0 0 0 3px #f9e7d3,0 3px 8px rgba(91,30,45,.2);display:grid;place-items:center;color:#fff;font-size:1.3rem;text-shadow:0 1px 3px rgba(150,80,60,.5)}
.mcard .f{transform:rotateY(180deg);background:#fff;box-shadow:0 3px 8px rgba(91,30,45,.2)}
.mcard .f img{width:100%;height:100%;object-fit:cover}
.mcard.done .f{box-shadow:0 0 0 3px #2e9e68}

/* ---------- scratch ---------- */
.scratch-box{position:relative;width:min(70vw,260px,calc(40dvh * .8));aspect-ratio:4/5;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:5px solid #d92d58;background:#d92d58}
.scratch-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scratch-box canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .8s}
.scratch-box.done canvas{opacity:0;pointer-events:none}

/* ---------- final ---------- */
.env-big{position:relative;width:min(64vw,230px);height:min(44vw,160px);animation:float 3.4s ease-in-out infinite}
.eb-body{position:absolute;inset:0;background:linear-gradient(180deg,#f9e1dd,#efc2bc);border-radius:8px;box-shadow:var(--shadow)}
.eb-flap{position:absolute;left:0;right:0;top:0;height:60%;background:linear-gradient(180deg,#f3cbc6,#e9b3ad);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:2;transition:transform .7s ease;border-radius:8px 8px 0 0}
.eb-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:38px;height:38px;border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.env-big.open .eb-flap{transform:rotateX(180deg)}
.env-big.open{animation:none;opacity:0;transform:translateY(20px) scale(.9);transition:.9s .5s;pointer-events:none;position:absolute}
.paper{width:100%;max-height:calc(100dvh - 300px);min-height:220px;overflow:auto;background:var(--paper);border-radius:6px;padding:22px 20px;box-shadow:0 14px 36px rgba(91,30,45,.22);background-image:repeating-linear-gradient(transparent 0 31px,rgba(217,154,148,.22) 31px 32px);text-align:left;animation:unfold .9s both}
.paper-text p{font-family:var(--f-hand);font-size:clamp(1.2rem,5.2vw,1.45rem);line-height:32px;color:#4a2b30;margin-bottom:10px;opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
.paper-text p.in{opacity:1;transform:none}
.paper-sig{font-family:var(--f-script);font-size:2rem;color:var(--rose-d);text-align:right;opacity:0;transition:opacity 1.2s}
.paper-sig.in{opacity:1}
.reveal{display:flex;flex-direction:column;align-items:center;gap:6px;animation:rise 1s both;width:100%}
.reveal-script{font-family:var(--f-script);font-size:clamp(2.2rem,10vw,3rem);color:var(--rose-d)}
.heart-pulse{font-size:2.6rem;color:var(--rose);animation:heartbeat 1.4s infinite;text-shadow:0 0 24px rgba(217,45,88,.5)}
.reveal .actions{margin-top:8px}

/* ---------- unlock ---------- */
.gift{width:min(44vw,170px);height:auto;filter:drop-shadow(0 12px 14px rgba(91,30,45,.28))}
.gift-drop{animation:drop 1.1s cubic-bezier(.3,1.5,.5,1) both .3s}
.gift-big{width:min(54vw,210px);overflow:visible}
.gift-lid,.gift-body{transform-box:fill-box;transform-origin:50% 100%}
#s-unlock.go .gift-lid{animation:lid 1s .2s forwards cubic-bezier(.3,1.3,.5,1)}
#s-unlock.go .gift-big{animation:giftShake .6s}
.glow-ring{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,120,.8),transparent 65%);opacity:0;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-80%) scale(.2)}
#s-unlock.go .glow-ring{animation:glowOut 1.8s .4s ease-out forwards}
#s-unlock .title{opacity:0}
#s-unlock.go .title{animation:rise 1s .9s both}
#s-unlock .stack{position:relative}

/* ---------- dock (music) ---------- */
.dock{position:fixed;top:calc(var(--st) + 8px);right:calc(var(--sr) + 10px);display:flex;align-items:flex-start;gap:8px;z-index:30;flex-direction:row-reverse}
.orb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;color:#fff;box-shadow:0 4px 10px rgba(91,30,45,.3)}
.orb-red{background:radial-gradient(circle at 35% 30%,#ef5d82,var(--rose))}
.orb-gold{background:radial-gradient(circle at 35% 30%,#ffd98a,var(--gold));font-size:1.1rem}
.orb .icon-pause{display:none}
.orb.on .icon-play{display:none}.orb.on .icon-pause{display:inline;font-size:.7rem;letter-spacing:-1px}
.orb.bad{background:#9b8b88}
.dock-panel{width:min(250px,calc(100vw - 130px));background:rgba(255,253,249,.96);border-radius:16px;padding:10px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;animation:fade .3s}
.dock-top{display:flex;align-items:center;gap:8px}
.song-title{font-family:var(--f-serif);font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-row{display:flex;align-items:center;gap:6px}
.time{font-size:.66rem;color:var(--ink-soft);min-width:2.2em;text-align:center;font-variant-numeric:tabular-nums}
.mini{min-width:44px;min-height:44px;font-size:1rem}
input[type=range]{accent-color:var(--rose);flex:1;min-width:0;height:28px}
.vol{width:100%}
.music-note{font-size:.7rem;color:var(--rose-d)}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:4px;background:var(--rose);border-radius:2px}
.dock.playing .eq i{animation:eq .9s ease-in-out infinite}
.dock.playing .eq i:nth-child(2){animation-delay:.2s}.dock.playing .eq i:nth-child(3){animation-delay:.4s}.dock.playing .eq i:nth-child(4){animation-delay:.1s}

/* ---------- ambient ---------- */
#petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.petal{position:absolute;top:-24px;left:var(--x);width:var(--s);height:calc(var(--s) * 1.3);background:var(--pc,#f4b6bd);border-radius:60% 0 60% 0;opacity:.7;animation:fall var(--dur) linear var(--del) infinite}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}
#app{z-index:1}

/* ---------- keyframes ---------- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes nextGlow{0%,100%{box-shadow:0 8px 18px rgba(185,100,100,.28)}50%{box-shadow:0 8px 18px rgba(185,100,100,.28),0 0 0 9px rgba(217,154,148,.28)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes flicker{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.92,1.1) rotate(2deg)}}
@keyframes smoke{0%{opacity:.8;transform:translateY(0)}100%{opacity:0;transform:translateY(-34px)}}
@keyframes cakeBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.04)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes popB{to{transform:scale(1.5);opacity:0}}
@keyframes burst{to{transform:translate(var(--bx),var(--by)) scale(.2);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,45,88,.5)}70%{box-shadow:0 0 0 16px rgba(217,45,88,0)}100%{box-shadow:0 0 0 0 rgba(217,45,88,0)}}
@keyframes swapL{from{opacity:0;transform:translateX(60px) rotate(6deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes swapR{from{opacity:0;transform:translateX(-60px) rotate(-10deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes unfold{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
@keyframes drop{from{opacity:0;transform:translateY(-120px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes lid{to{transform:translateY(-50px) rotate(-16deg);opacity:.0}}
@keyframes giftShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes glowOut{0%{opacity:0;transform:translate(-50%,-80%) scale(.2)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(2.6)}}
@keyframes fall{0%{transform:translate3d(0,-5vh,0) rotate(0)}100%{transform:translate3d(var(--dx),108vh,0) rotate(540deg)}}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}

/* ---------- responsive ---------- */
@media (max-height:600px){
  .scene{padding-top:calc(var(--st) + 56px)}
  .t-script{font-size:clamp(1.8rem,9vw,2.6rem)}
  .keypad{gap:8px;padding:10px 14px}.key{width:48px;height:48px}.keypad{grid-template-columns:repeat(3,48px)}
  .vbox{height:min(44dvh,340px)}
}
@media (orientation:landscape) and (max-height:520px){
  .scene{padding-top:calc(var(--st) + 54px)}
  .vbox{height:min(52dvh,260px)}
}
@media (min-width:768px){
  .stack{max-width:520px}.stack.wide{max-width:760px}
  .gal-grid{columns:3}
  .t-script{font-size:3.6rem}
}
@media (min-width:1024px){.gal-grid{columns:4}.stack.wide{max-width:960px}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .petal{display:none}
  .mcard .in{transition:none}
  .mcard:not(.up):not(.done) .f{visibility:hidden}
  .mcard.up .b,.mcard.done .b{visibility:hidden}
  .env-big.open{opacity:0}
  #s-unlock .title{opacity:1}
  .paper-text p,.paper-sig{opacity:1;transform:none}
}

#s-final.letter-open #finalTitle{display:none}
#s-final.letter-open .paper{max-height:calc(100dvh - 190px)}

/* pre-unlock screens have no music dock, so they need less top padding */
#s-splash,#s-code,#s-year,#s-unlock{padding-top:calc(var(--st) + 22px)}
@media (max-height:640px){
  .locked-polaroid{width:78px;margin-bottom:12px}
  .locked-photo .lock-heart{font-size:1.4rem}
  #s-code .divider{display:none}
  #s-code .stack,#s-year .stack{gap:6px}
  #s-code .msg,#s-year .msg{min-height:1.1em}
}