:root{
    --pink-deep:#e8a3ad;
    --pink-mid:#f2c4cc;
    --pink-soft:#fbe1e6;
    --cream:#fdf6ee;
    --white:#fffaf6;
    --red-accent:#c9636f;
    --ink:#5b3d3f;
    --ink-soft:#8a6a6b;
    --gold:#e3b98f;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Quicksand', sans-serif;
    color:var(--ink);
    background:linear-gradient(160deg, var(--pink-soft) 0%, var(--cream) 45%, var(--white) 100%);
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
    padding-top:env(safe-area-inset-top, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  h1,h2,h3,.serif{ font-family:'Cormorant Garamond', serif; }
  .display{ font-family:'Marcellus', serif; }

  button{ font-family:'Quicksand', sans-serif; border:none; cursor:pointer; background:none; }
  button:focus-visible, .clickable:focus-visible{ outline:2px solid var(--red-accent); outline-offset:3px; }

  /* ---------- reusable section title (replaces repeated inline styles) ---------- */
  .section-title{ font-size:clamp(1.5rem,4.5vw,2rem); font-weight:500; margin-bottom:.4rem; line-height:1.25; }
  .section-title.tight{ font-size:clamp(1.4rem,4.5vw,2rem); }
  .section-title.compact{ font-size:clamp(1.4rem,4.5vw,1.9rem); margin-bottom:1.1rem; }
  .section-title.spaced{ margin-bottom:1.8rem; }
  .mt-md{ margin-top:1.6rem; }
  .mt-lg{ margin-top:2rem; }

  /* ---------- background fx layers ---------- */
  #bg-blobs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .blob{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; animation:blobFloat 22s ease-in-out infinite; }
  @keyframes blobFloat{
    0%,100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(30px,-40px) scale(1.08); }
    66%{ transform:translate(-25px,25px) scale(.95); }
  }
  #hearts-layer{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .float-heart{ position:absolute; bottom:-40px; will-change:transform, opacity; }
  @keyframes floatUp{
    0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
    10%{ opacity:var(--maxop, .7); }
    90%{ opacity:var(--maxop, .7); }
    100%{ transform:translateY(-110vh) translateX(var(--drift,20px)) rotate(20deg); opacity:0; }
  }

  /* ---------- heart burst slide transition (built once, replayed via class toggle) ---------- */
  #flower-transition{
    position:fixed; inset:0; z-index:600;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(circle, var(--pink-soft) 0%, var(--cream) 55%, var(--white) 100%);
    transition:opacity .55s ease;
    overflow:hidden;
    contain:layout style paint;
  }
  #flower-transition.show{ opacity:1; }
  .burst-love{
    position:absolute;
    font-size:min(9vw, 42px);
    transform:translate3d(-50%,-50%,0) scale(.1) rotate(0deg);
    opacity:0;
    will-change:transform, opacity;
    backface-visibility:hidden;
    filter:drop-shadow(0 4px 8px rgba(201,99,111,.3));
  }
  #flower-transition.show .burst-love{
    animation:heartBurst 1s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:var(--delay);
  }
  @keyframes heartBurst{
    0%{ transform:translate3d(-50%,-50%,0) scale(.1) rotate(0deg); opacity:0; }
    45%{ opacity:1; }
    100%{ transform:translate3d(-50%,-50%,0) scale(1) rotate(8deg); opacity:1; }
  }

  #sparkle-layer{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .sparkle{ position:absolute; width:6px; height:6px; background:var(--gold); border-radius:50%; opacity:0; box-shadow:0 0 6px 2px rgba(227,185,143,.8); animation:sparklePulse 2.4s ease-in-out infinite; }
  @keyframes sparklePulse{ 0%,100%{opacity:0; transform:scale(.4);} 50%{opacity:1; transform:scale(1);} }

  #cursor-glow{ position:fixed; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle, rgba(233,163,173,.55), transparent 70%); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:opacity .3s; opacity:0; }

  /* ---------- app shell ---------- */
  #app{ position:relative; z-index:2; min-height:100vh; }
  .section{
    min-height:100vh;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:6vh 6vw;
    position:relative;
    text-align:center;
  }
  .section.active{ display:flex; }
  .fade-in{ animation:fadeIn .9s ease forwards; opacity:0; }
  @keyframes fadeIn{ to{ opacity:1; transform:translateY(0);} from{ transform:translateY(14px);} }

  .section-enter{ animation:sectionEnter .8s cubic-bezier(.22,1,.36,1); }
  @keyframes sectionEnter{ from{ opacity:0; filter:blur(6px); transform:scale(.98);} to{ opacity:1; filter:blur(0); transform:scale(1);} }

  .btn{
    padding:.95rem 2.1rem;
    border-radius:40px;
    background:linear-gradient(135deg, var(--pink-deep), var(--red-accent));
    color:var(--white);
    font-size:1rem;
    font-weight:600;
    letter-spacing:.02em;
    box-shadow:0 10px 24px -8px rgba(201,99,111,.55);
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  }
  .btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 30px -8px rgba(201,99,111,.65); }
  .btn:active{ transform:translateY(0) scale(.98); }
  .btn-ghost{
    padding:.7rem 1.4rem;
    border-radius:40px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(201,99,111,.25);
    color:var(--ink);
    font-weight:600;
    transition:all .3s;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,.9); transform:translateY(-2px); }
  .btn-ghost:disabled{ opacity:.35; cursor:default; transform:none; }

  /* ---------- opening ---------- */
  #opening .eyebrow-mark{ font-size:.95rem; color:var(--ink-soft); margin-bottom:.6rem; letter-spacing:.03em; }
  #opening h1{ font-size:clamp(2.3rem, 7vw, 4.2rem); font-weight:600; line-height:1.1; color:var(--ink); }
  #opening h1 span{ color:var(--red-accent); }
  #opening p.sub{ margin-top:1.1rem; font-size:clamp(1.05rem, 2.6vw, 1.35rem); color:var(--ink-soft); font-style:italic; font-family:'Cormorant Garamond', serif; }
  #opening .open-btn{ margin-top:2.6rem; }
  .music-toggle{
    position:fixed;
    top:calc(20px + env(safe-area-inset-top, 0px));
    right:calc(20px + env(safe-area-inset-right, 0px));
    z-index:50;
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; box-shadow:0 6px 18px -6px rgba(0,0,0,.15);
    transition:transform .3s;
  }
  .music-toggle:hover{ transform:scale(1.08); }

  /* ---------- cake ---------- */
  #cake-scene{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }

  /* ---------- wishing stars ---------- */
  .stars-sky{
    position:relative;
    width:100%;
    max-width:600px;
    height:min(58vh, 380px);
    border-radius:26px;
    background:radial-gradient(ellipse at 50% 18%, #3d2536 0%, #26141f 55%, #170a13 100%);
    overflow:hidden;
    box-shadow:0 22px 42px -18px rgba(90,40,50,.5), inset 0 0 60px rgba(232,163,173,.08);
  }
  .bg-star{
    position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
    opacity:.5; animation:twinkleBg 3s ease-in-out infinite;
  }
  @keyframes twinkleBg{ 0%,100%{ opacity:.12; } 50%{ opacity:.8; } }

  .wish-star{
    position:absolute;
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem;
    line-height:1;
    cursor:pointer;
    background:none; border:none; padding:0;
    color:#ffe9b3;
    filter:drop-shadow(0 0 3px rgba(255,230,200,.5));
    transform:translate(-50%,-50%) scale(1);
    transition:transform .35s cubic-bezier(.22,1,.36,1), filter .35s;
    animation:starTwinkle 2.6s ease-in-out infinite;
    -webkit-tap-highlight-color:transparent;
  }
  @keyframes starTwinkle{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
  .wish-star.lit{
    animation:none;
    opacity:1;
    transform:translate(-50%,-50%) scale(1.4);
    filter:drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 20px rgba(232,163,173,.85));
  }

  .wish-bubble{
    position:absolute;
    max-width:78%;
    width:210px;
    background:linear-gradient(160deg, var(--white), var(--pink-soft));
    color:var(--ink);
    padding:.75rem .95rem;
    border-radius:14px;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:.98rem;
    line-height:1.45;
    text-align:center;
    box-shadow:0 16px 30px -12px rgba(0,0,0,.4);
    opacity:0;
    transform:translate(-50%, -8px) scale(.9);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
    z-index:5;
  }
  .wish-bubble.show{ opacity:1; transform:translate(-50%, -18px) scale(1); }
  .stars-progress{
    margin-top:1rem; font-size:.85rem; color:var(--ink-soft); letter-spacing:.03em;
  }
  .cake-wish{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.4rem; color:var(--red-accent); }
  .cake-hint{ font-size:.9rem; color:var(--ink-soft); }
  .mic-btn{
    margin-top:.9rem;
    padding:.55rem 1.3rem;
    border-radius:40px;
    background:rgba(255,255,255,.65);
    border:1px solid rgba(201,99,111,.25);
    color:var(--ink);
    font-size:.88rem;
    font-weight:600;
    transition:all .3s;
  }
  .mic-btn:hover{ background:rgba(255,255,255,.95); transform:translateY(-2px); }
  .mic-btn.listening{
    background:linear-gradient(135deg, var(--pink-deep), var(--red-accent));
    color:#fff;
    animation:micPulse 1.4s ease-in-out infinite;
  }
  @keyframes micPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(201,99,111,.45); }
    50%{ box-shadow:0 0 0 10px rgba(201,99,111,0); }
  }
  .mic-status{ margin-top:.5rem; font-size:.8rem; color:var(--ink-soft); min-height:1.1em; }

  .mic-modal-backdrop{
    position:fixed; inset:0; z-index:200;
    background:rgba(91,61,63,.35); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; padding:6vw;
  }
  .mic-modal-backdrop.show{ display:flex; }
  .mic-modal{
    width:min(360px, 100%);
    background:linear-gradient(165deg, var(--white), var(--pink-soft));
    border-radius:20px;
    padding:2rem 1.8rem 1.7rem;
    text-align:center;
    box-shadow:0 30px 60px -20px rgba(90,50,55,.4);
    animation:micModalIn .35s cubic-bezier(.22,1,.36,1);
  }
  @keyframes micModalIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .mic-modal-icon{ font-size:2.1rem; margin-bottom:.4rem; }
  .mic-modal h3{ font-family:'Cormorant Garamond', serif; font-size:1.5rem; font-weight:600; color:var(--red-accent); }
  .mic-modal p{ margin-top:.7rem; font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
  .mic-modal-actions{ margin-top:1.5rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
  .mic-modal-actions .btn{ padding:.75rem 1.6rem; font-size:.92rem; }
  .mic-modal-actions .btn-ghost{ padding:.75rem 1.4rem; font-size:.92rem; }
  .cake-wrap{ position:relative; width:min(360px, 78vw); filter:drop-shadow(0 22px 28px rgba(150,80,90,.22)); transform-style:preserve-3d; transition:transform .25s ease-out; }
  svg.cake-svg{ width:100%; height:auto; overflow:visible; display:block; }
  .flame{ transform-origin:center bottom; animation:flicker 2.8s ease-in-out infinite; }
  @keyframes flicker{ 0%,100%{ transform:scaleY(1) scaleX(1) rotate(0deg);} 50%{transform:scaleY(1.035) scaleX(.985) rotate(0deg);} }
  .flame-glow{ filter:blur(4px); opacity:.65; animation:flicker 2.8s ease-in-out infinite; }
  .candle-group{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
  .candle-group:focus{ outline:none; }
  .candle-group:focus-visible{ outline:2px solid var(--red-accent); outline-offset:6px; border-radius:6px; }
  .cake-svg.candles-locked .candle-group{ pointer-events:none; cursor:default; }
  .candle-group.blown .flame, .candle-group.blown .flame-glow{ animation:none; }
  .mic-btn:disabled{ opacity:.4; cursor:default; pointer-events:none; }
  .smoke{ opacity:0; }
  .celebrate-heading{ font-size:clamp(1.8rem,5.5vw,2.8rem); font-weight:600; color:var(--red-accent); }
  .celebrate-date{ font-size:1.15rem; color:var(--ink-soft); letter-spacing:.04em; }
  .celebrate-line{ max-width:480px; font-size:1.3rem; line-height:1.7; color:var(--ink); font-family:'Cormorant Garamond',serif; }
  #cake-post{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:1.4rem; }

  /* burst hearts */
  .burst-container{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
  .burst-heart{ position:absolute; left:50%; top:40%; font-size:1.4rem; opacity:0; }

  /* ---------- balloon pop game ---------- */
  #game-section h2{ font-size:clamp(1.8rem,5.5vw,2.6rem); font-weight:600; color:var(--red-accent); }
  #game-section .sub{ margin-top:.5rem; margin-bottom:1.3rem; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1rem,2.6vw,1.15rem); color:var(--ink-soft); max-width:340px; }

  .love-meter-wrap{ width:min(320px, 85vw); margin-bottom:1.3rem; }
  .love-meter-label{ display:flex; justify-content:space-between; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:.35rem; letter-spacing:.02em; }
  .love-meter-label span{ color:var(--red-accent); }
  .love-meter-track{ height:12px; border-radius:20px; background:rgba(201,99,111,.15); overflow:hidden; box-shadow:inset 0 1px 3px rgba(90,50,55,.15); }
  .love-meter-fill{ height:100%; width:0%; border-radius:20px; background:linear-gradient(90deg, var(--pink-deep), var(--red-accent)); transition:width .5s cubic-bezier(.22,1,.36,1); box-shadow:0 0 10px rgba(201,99,111,.55); }

  .balloon-arena{
    position:relative;
    width:min(380px, 92vw);
    height:min(52vh, 440px);
    min-height:340px;
    border-radius:28px;
    overflow:hidden;
    background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(227,185,143,.28), transparent 50%),
      linear-gradient(175deg, var(--pink-soft) 0%, var(--cream) 100%);
    border:1px solid rgba(201,99,111,.22);
    box-shadow:0 26px 55px -22px rgba(90,50,55,.3), inset 0 0 0 1px rgba(255,255,255,.5);
  }
  .balloon{
    position:absolute;
    bottom:-90px;
    width:56px;
    display:flex; flex-direction:column; align-items:center;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    will-change:transform, opacity;
  }
  .balloon-body{
    width:56px; height:66px;
    border-radius:50% 50% 50% 50% / 46% 46% 54% 54%;
    position:relative;
    box-shadow:inset -6px -8px 14px rgba(120,45,55,.22), inset 6px 8px 12px rgba(255,255,255,.5), 0 10px 18px -8px rgba(90,50,55,.35);
    transition:transform .15s ease;
  }
  .balloon-body::before{
    content:''; position:absolute; left:16px; top:12px; width:12px; height:18px; border-radius:50%;
    background:rgba(255,255,255,.55); filter:blur(1px);
  }
  .balloon-knot{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid; margin-top:-2px; }
  .balloon-string{ width:1.5px; height:34px; background:rgba(139,100,100,.4); margin-top:1px; }
  .balloon:active .balloon-body{ transform:scale(.94); }

  .balloon-c1 .balloon-body{ background:radial-gradient(circle at 32% 26%, #f5c0c9, var(--red-accent) 78%); }
  .balloon-c1 .balloon-knot{ border-top-color:var(--red-accent); }
  .balloon-c2 .balloon-body{ background:radial-gradient(circle at 32% 26%, #ffe6c2, #e3b98f 78%); }
  .balloon-c2 .balloon-knot{ border-top-color:#e3b98f; }
  .balloon-c3 .balloon-body{ background:radial-gradient(circle at 32% 26%, #ffd6dd, var(--pink-deep) 78%); }
  .balloon-c3 .balloon-knot{ border-top-color:var(--pink-deep); }
  .balloon-c4 .balloon-body{ background:radial-gradient(circle at 32% 26%, #ffffff, var(--pink-mid) 78%); }
  .balloon-c4 .balloon-knot{ border-top-color:var(--pink-mid); }

  @keyframes balloonRise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ transform:translateY(var(--rise, -520px)) translateX(var(--sway, 30px)); opacity:0; }
  }

  .balloon-particle{ position:absolute; font-size:1rem; opacity:0; pointer-events:none; will-change:transform, opacity; }

  .balloon-msg{
    position:absolute;
    max-width:180px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(201,99,111,.25);
    border-radius:14px;
    padding:.55rem .8rem;
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:.95rem;
    line-height:1.4;
    color:var(--ink);
    text-align:center;
    box-shadow:0 12px 24px -10px rgba(90,50,55,.35);
    opacity:0;
    transform:translate(-50%,-6px) scale(.9);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
    z-index:5;
  }
  .balloon-msg.show{ opacity:1; transform:translate(-50%,-18px) scale(1); }

  .game-win{ margin-top:1.8rem; text-align:center; }
  .game-win h3{ font-family:'Cormorant Garamond',serif; font-size:1.7rem; color:var(--red-accent); font-weight:600; }
  .game-win p{ margin-top:.4rem; color:var(--ink-soft); font-size:.95rem; }
  #game-section .btn{ margin-top:1.2rem; }


  /* ---------- gift box ---------- */
  #envelope-wrap{ perspective:1200px; position:relative; }
  #envelope-wrap::before{
    content:''; position:absolute; left:50%; top:52%; width:320px; height:320px;
    transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle, rgba(227,185,143,.22), transparent 70%);
    pointer-events:none; z-index:-1;
  }
  .giftbox{
    width:min(260px, 72vw); height:210px; position:relative; cursor:pointer;
    filter:drop-shadow(0 20px 34px rgba(90,50,55,.24));
    outline:none; -webkit-tap-highlight-color:transparent;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .giftbox:hover{ transform:translateY(-4px); }
  .giftbox:focus{ outline:none; }
  .giftbox:focus-visible{ outline:2px solid var(--red-accent); outline-offset:6px; border-radius:14px; }

  .gift-glow{
    position:absolute; left:50%; top:38%; width:220px; height:220px; z-index:0;
    transform:translate(-50%,-50%) scale(.4); border-radius:50%;
    background:radial-gradient(circle, rgba(255,244,230,.95), rgba(255,220,200,.4) 45%, transparent 72%);
    opacity:0; transition:opacity .5s ease, transform .8s cubic-bezier(.22,1,.36,1);
  }
  .giftbox.open .gift-glow{ opacity:1; transform:translate(-50%,-50%) scale(1.6); }

  .gift-body{
    position:absolute; left:6%; right:6%; bottom:0; height:62%; z-index:2;
    background:linear-gradient(160deg, var(--pink-deep), var(--red-accent));
    border-radius:8px;
    box-shadow:0 14px 26px -10px rgba(90,50,55,.4), inset 0 -10px 16px -8px rgba(90,40,45,.35), inset 0 2px 3px rgba(255,255,255,.3);
  }
  .gift-body::before{
    content:''; position:absolute; left:0; right:0; top:8%; bottom:0;
    background:linear-gradient(90deg, transparent 44%, rgba(255,255,255,.28) 49%, rgba(255,255,255,.28) 51%, transparent 56%);
  }
  .gift-lid{
    position:absolute; left:0; right:0; top:26%; height:26%; z-index:3;
    background:linear-gradient(160deg, var(--pink-mid), var(--pink-deep));
    border-radius:10px;
    box-shadow:0 10px 18px -8px rgba(90,50,55,.35), inset 0 2px 3px rgba(255,255,255,.4);
    transform-origin:50% 100%;
    transition:transform 1s cubic-bezier(.34,1.4,.4,1), opacity .8s ease .1s;
  }
  .gift-lid::before{
    content:''; position:absolute; left:0; right:0; top:0; bottom:0;
    background:linear-gradient(90deg, transparent 44%, rgba(255,255,255,.3) 49%, rgba(255,255,255,.3) 51%, transparent 56%);
    border-radius:10px;
  }
  .giftbox.open .gift-lid{ transform:translateY(-125%) rotate(-18deg); opacity:0; }

  .gift-ribbon-v{
    position:absolute; left:50%; top:0; bottom:0; width:15%; transform:translateX(-50%); z-index:4;
    background:linear-gradient(90deg, var(--gold), #f3d8b3, var(--gold));
    box-shadow:0 0 0 1px rgba(180,130,80,.25);
    transition:opacity .4s ease .1s, transform .5s ease .1s;
  }
  .giftbox.open .gift-ribbon-v{ opacity:0; transform:translateX(-50%) scaleY(.4); }

  .gift-bow{
    position:absolute; left:50%; top:14%; transform:translate(-50%,-50%); z-index:5;
    width:82px; height:46px; transition:opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .gift-bow::before, .gift-bow::after{
    content:''; position:absolute; top:2px; width:38px; height:38px;
    background:linear-gradient(160deg, #f3d8b3, var(--gold));
    border-radius:50% 50% 50% 4px;
    box-shadow:inset 0 2px 3px rgba(255,255,255,.5), 0 6px 10px -4px rgba(90,50,55,.3);
  }
  .gift-bow::before{ left:2px; transform:rotate(-38deg); }
  .gift-bow::after{ right:2px; border-radius:50% 50% 4px 50%; transform:rotate(38deg); }
  .gift-bow-knot{
    position:absolute; left:50%; top:14%; transform:translate(-50%,-50%); z-index:6;
    width:20px; height:20px; border-radius:50%;
    background:radial-gradient(circle at 35% 28%, #f8e6c8, var(--gold) 75%);
    box-shadow:0 3px 6px rgba(90,50,55,.3);
    transition:opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .giftbox.open .gift-bow, .giftbox.open .gift-bow-knot{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-40deg); }

  .gift-sparkle-tag{
    position:absolute; top:2%; right:-6%; z-index:6;
    width:34px; height:34px; background:var(--cream); border-radius:4px;
    box-shadow:0 6px 12px rgba(90,50,55,.25);
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    transform:rotate(8deg); transition:opacity .4s ease;
  }
  .giftbox.open .gift-sparkle-tag{ opacity:0; }

  .env-hint{ margin-top:1.7rem; color:var(--ink-soft); font-size:.95rem; font-family:'Cormorant Garamond',serif; font-style:italic; }

  /* ---------- book cover intro (before letter) ---------- */
  #book-section{
    background:radial-gradient(circle at 50% 40%, #3d2028 0%, #24121a 55%, #180b10 100%);
  }
  .book-scene{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
  .book-cover{
    position:relative;
    width:min(250px, 60vw);
    aspect-ratio:3/4;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .book-cover::before{
    content:'';
    position:absolute; top:3%; right:-7px; bottom:3%; width:11px;
    background:linear-gradient(180deg, #f4e9d8, #d8c6a8 50%, #f4e9d8);
    border-radius:0 4px 4px 0;
    box-shadow:1px 0 3px rgba(0,0,0,.35);
  }
  .book-cover:hover{ transform:translateY(-4px) scale(1.02); }
  .book-cover:focus-visible{ outline:2px solid var(--red-accent); outline-offset:6px; border-radius:6px; }
  .book-face{
    position:relative;
    width:100%; height:100%;
    background:linear-gradient(160deg, #241019, #150a0e);
    border:1px solid rgba(227,185,143,.35);
    border-radius:5px;
    box-shadow:0 0 0 1px rgba(227,185,143,.08) inset, 0 25px 55px -18px rgba(0,0,0,.75), 0 0 55px -8px rgba(233,163,173,.3);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    padding:1.6rem 1.2rem;
    overflow:hidden;
  }
  .book-branch{ position:absolute; top:12%; left:10%; width:36%; height:auto; opacity:.9; }
  .book-title{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.3rem;
    color:#f3e6d8;
    letter-spacing:.02em;
  }
  .book-rule{ width:56%; height:1px; background:rgba(227,185,143,.4); margin-top:.6rem; }
  .book-cover.opening{ animation:bookOpen .75s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; }
  @keyframes bookOpen{
    0%{ transform:scale(1) rotateY(0deg); opacity:1; }
    55%{ transform:scale(1.06) rotateY(-10deg); opacity:1; }
    100%{ transform:scale(1.22) rotateY(-22deg); opacity:0; }
  }
  .book-hint{ color:#e9cfd0; opacity:.8; font-size:.92rem; font-family:'Cormorant Garamond',serif; font-style:italic; }
  .book-cover.opening .book-face{ animation:bookGlow .75s ease forwards; }
  @keyframes bookGlow{ 0%{ box-shadow:0 0 0 1px rgba(227,185,143,.08) inset,0 25px 55px -18px rgba(0,0,0,.75),0 0 55px -8px rgba(233,163,173,.3);} 100%{ box-shadow:0 0 0 1px rgba(227,185,143,.08) inset,0 25px 55px -18px rgba(0,0,0,.75),0 0 140px 30px rgba(255,235,220,.85);} }

  /* ---------- light beam reveal (before pages appear) ---------- */
  #book-beam{
    position:fixed; inset:0; z-index:500; display:none;
    align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 45%, #3d2028 0%, #24121a 55%, #180b10 100%);
    overflow:hidden;
  }
  #book-beam.show{ display:flex; }
  .beam-ray{
    position:absolute; top:-20%; left:50%; width:70%; height:140%;
    transform:translateX(-50%);
    background:linear-gradient(180deg, transparent, rgba(255,244,230,.9) 40%, rgba(255,244,230,.9) 60%, transparent);
    opacity:0; filter:blur(2px);
    animation:beamGrow 1.1s ease forwards;
  }
  @keyframes beamGrow{ 0%{ opacity:0; width:8%; } 40%{ opacity:.9; } 100%{ opacity:.55; width:80%; } }
  .beam-page{
    position:relative; width:min(320px, 74vw); aspect-ratio:4/3;
    background:linear-gradient(160deg,#fdf6ee,#f3e4cf);
    border-radius:4px;
    box-shadow:0 0 60px 14px rgba(255,238,220,.55), 0 30px 60px -20px rgba(0,0,0,.6);
    opacity:0; transform:scale(.7);
    animation:beamPageIn 1s .35s cubic-bezier(.22,1,.36,1) forwards;
    display:flex; align-items:center; justify-content:center;
  }
  @keyframes beamPageIn{ to{ opacity:1; transform:scale(1); } }
  .beam-page::before{
    content:''; position:absolute; inset:10px; border:1px solid rgba(180,130,90,.25); border-radius:2px;
  }
  .beam-page-branch{ position:absolute; top:9%; left:7%; width:26%; opacity:.75; }
  .beam-page-hint{ font-family:'Cormorant Garamond',serif; font-style:italic; color:#a9835f; font-size:.95rem; opacity:0; animation:fadeIn .8s .9s ease forwards; }

  /* ---------- book pages (flip navigation) ---------- */
  #book-pages-section{ background:radial-gradient(circle at 50% 30%, #fff9f0 0%, var(--cream) 60%, var(--pink-soft) 100%); }
  .book-flip-wrap{ width:min(560px, 92vw); perspective:1600px; }
  .book-page{
    position:relative;
    background:
      radial-gradient(circle at 10% 6%, rgba(227,185,143,.18), transparent 40%),
      radial-gradient(circle at 90% 94%, rgba(232,163,173,.16), transparent 42%),
      #fffaf3;
    border-radius:6px 16px 16px 6px;
    min-height:360px;
    padding:clamp(2rem,5.5vw,3.2rem) clamp(1.6rem,5.5vw,2.8rem);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.05rem;
    box-shadow:0 30px 60px -22px rgba(90,50,55,.32), inset 3px 0 8px -4px rgba(90,50,55,.12);
    transform-origin:left center;
    will-change:transform, opacity;
  }
  .book-page::after{
    content:''; position:absolute; left:0; top:6%; bottom:6%; width:14px;
    background:linear-gradient(90deg, rgba(90,50,55,.14), transparent);
    border-radius:6px 0 0 6px;
  }
  .book-page.flip-out{ animation:pageFlipOut .42s cubic-bezier(.55,0,.85,.35) forwards; }
  .book-page.flip-in{ animation:pageFlipIn .48s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes pageFlipOut{ 0%{ transform:rotateY(0deg); opacity:1; } 100%{ transform:rotateY(-98deg); opacity:0; } }
  @keyframes pageFlipIn{ 0%{ transform:rotateY(98deg); opacity:0; } 100%{ transform:rotateY(0deg); opacity:1; } }
  .book-page-num{ position:absolute; bottom:14px; right:20px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.8rem; color:var(--ink-soft); opacity:.7; }
  .book-flip-nav{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.6rem; }
  .book-flip-nav .btn-ghost:disabled{ opacity:.35; pointer-events:none; }

  /* ---------- flower bloom finale ---------- */
  .flower-finale-wrap{ position:relative; }
  .bloom-flower{
    position:absolute; font-size:clamp(2.2rem,7vw,3.6rem);
    opacity:0; transform:scale(.2) rotate(var(--rot,0deg));
    animation:bloomPop .85s var(--bd,0s) cubic-bezier(.22,1.4,.36,1) forwards;
    filter:drop-shadow(0 8px 14px rgba(90,50,55,.18));
  }
  @keyframes bloomPop{ 0%{ opacity:0; transform:scale(.2) rotate(var(--rot,0deg)); } 60%{ opacity:1; } 100%{ opacity:.95; transform:scale(1) rotate(var(--rot,0deg)); } }

  /* ---------- teddy bear surprise ---------- */
  #bear-section{ background:linear-gradient(160deg, var(--pink-soft) 0%, var(--cream) 55%, var(--white) 100%); }
  .bear-stage{ position:relative; width:min(260px,62vw); aspect-ratio:1/1; margin-bottom:1.5rem; }
  .bear-photo{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 14px 20px rgba(90,50,55,.28));
    animation:bearBreathe 4s ease-in-out infinite;
    transform-origin:50% 85%;
  }
  @keyframes bearBreathe{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.02); }
  }
  .bear-continue{ margin-top:1.6rem; opacity:0; }
  .bear-continue.show{ animation:fadeIn .7s ease forwards; }

  /* ---------- curtain transition (bear -> book) ---------- */
  #curtain-transition{
    position:fixed; inset:0; z-index:900; display:none; background:#fbe1e6;
  }
  #curtain-transition.play{ display:block; }
  #curtain-transition .curtain-top, #curtain-transition .curtain-bottom{
    position:absolute; left:0; width:100%; height:52%; background:linear-gradient(180deg,#f2c4cc,#e8a3ad);
  }
  #curtain-transition .curtain-top{ top:0; transform:translateY(-100%); animation:curtainInTop .5s ease forwards; }
  #curtain-transition .curtain-bottom{ bottom:0; transform:translateY(100%); animation:curtainInBottom .5s ease forwards; }
  #curtain-transition.leaving .curtain-top{ animation:curtainOutTop .55s .15s ease forwards; }
  #curtain-transition.leaving .curtain-bottom{ animation:curtainOutBottom .55s .15s ease forwards; }

  @keyframes curtainInTop{ to{ transform:translateY(0); } }
  @keyframes curtainInBottom{ to{ transform:translateY(0); } }
  @keyframes curtainOutTop{ to{ transform:translateY(-100%); } }
  @keyframes curtainOutBottom{ to{ transform:translateY(100%); } }

  /* ---------- letter (single page) ---------- */
  #letter-slides{ width:min(580px, 92vw); display:flex; flex-direction:column; align-items:center; }
  .slide-card{
    background:
      radial-gradient(circle at 12% 8%, rgba(227,185,143,.16), transparent 42%),
      radial-gradient(circle at 88% 92%, rgba(232,163,173,.16), transparent 42%),
      rgba(255,255,255,.8);
    backdrop-filter:blur(8px);
    border:1px solid rgba(201,99,111,.2);
    border-radius:24px;
    padding:clamp(2rem,5.5vw,3.4rem) clamp(1.7rem,5.5vw,3.2rem);
    min-height:340px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.15rem;
    box-shadow:0 26px 55px -20px rgba(90,50,55,.28), inset 0 0 0 1px rgba(255,255,255,.6);
    position:relative; overflow:hidden;
  }
  .slide-card::before, .slide-card::after{
    content:''; position:absolute; width:32px; height:32px; border:1.5px solid rgba(201,99,111,.35); opacity:.7;
  }
  .slide-card::before{ top:14px; left:14px; border-width:1.5px 0 0 1.5px; border-radius:8px 0 0 0; }
  .slide-card::after{ bottom:14px; right:14px; border-width:0 1.5px 1.5px 0; border-radius:0 0 8px 0; }
  .slide-seal{
    width:32px; height:32px; border-radius:50%;
    background:radial-gradient(circle at 35% 28%, #e8a3ad, var(--red-accent) 70%);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem;
    box-shadow:0 6px 12px rgba(120,45,55,.35), inset 0 1px 2px rgba(255,255,255,.5);
    margin-bottom:.1rem;
  }
  .slide-title{ font-size:clamp(1.55rem,4.5vw,2.2rem); color:var(--red-accent); font-weight:600; }
  .slide-title-rule{ width:60px; height:2px; margin:-.2rem 0 .1rem; background:linear-gradient(90deg, transparent, var(--gold), transparent); }
  .slide-text{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.08rem,3vw,1.35rem); line-height:1.8; color:var(--ink); max-width:46ch; }
  .slide-final-note{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--red-accent); font-size:1.18rem; margin-top:.5rem; }
  .slide-nav{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.8rem; }
  .slide-nav .btn-ghost{ padding:.75rem 1.5rem; box-shadow:0 6px 14px -8px rgba(90,50,55,.25); }
  .dots{ display:flex; gap:8px; margin-top:1.2rem; }
  .dot{ width:8px; height:8px; border-radius:50%; background:rgba(201,99,111,.3); transition:all .35s; }
  .dot.active{ background:var(--red-accent); width:22px; border-radius:5px; }

  /* full letter text container for slide sizing */
  .letter-full-text{ font-family:'Cormorant Garamond',serif; font-size:1.05rem; line-height:1.85; max-width:44ch; text-align:left; white-space:pre-line; }

  /* ---------- flower bouquet ---------- */
  .bouquet-wrap{
    position:relative;
    width:min(78vw, 360px);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:.4rem;
  }
  .bouquet-glow{
    position:absolute;
    inset:-12% -6% 6% -6%;
    background:radial-gradient(ellipse at 50% 45%, rgba(233,163,173,.55) 0%, rgba(253,246,238,.35) 55%, transparent 75%);
    filter:blur(30px);
    animation:bouquetGlowPulse 4.5s ease-in-out infinite;
    z-index:0;
    pointer-events:none;
  }
  @keyframes bouquetGlowPulse{
    0%,100%{ opacity:.65; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.06); }
  }
  .bouquet-img{
    position:relative;
    z-index:1;
    width:100%;
    display:block;
    filter:drop-shadow(0 22px 30px rgba(120,50,55,.28));
    transform-origin:50% 92%;
    animation:bouquetSway 4.8s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes bouquetSway{
    0%,100%{ transform:rotate(-2.2deg) translateY(0) translateX(0); }
    50%{ transform:rotate(2.4deg) translateY(-7px) translateX(3px); }
  }
  .bouquet-tag{
    position:absolute;
    z-index:2;
    right:6%;
    bottom:10%;
    background:linear-gradient(160deg, var(--white), var(--pink-soft));
    color:var(--red-accent);
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:600;
    font-size:.92rem;
    padding:.4rem .85rem;
    border-radius:14px;
    box-shadow:0 10px 22px -10px rgba(90,40,50,.4);
    transform:rotate(4deg);
    animation:tagWiggle 4.8s ease-in-out infinite;
  }
  @keyframes tagWiggle{
    0%,100%{ transform:rotate(4deg) translateY(0); }
    50%{ transform:rotate(1deg) translateY(-4px); }
  }
  .petal-layer{ position:absolute; inset:-10% -20% -10% -20%; z-index:0; pointer-events:none; overflow:visible; }
  .falling-petal{
    position:absolute;
    top:-24px;
    border-radius:70% 0 70% 0;
    opacity:0;
    will-change:transform, opacity;
    animation:petalFall linear forwards;
  }
  @keyframes petalFall{
    0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
    8%{ opacity:.9; }
    85%{ opacity:.85; }
    100%{ transform:translateY(340px) translateX(var(--pdrift,30px)) rotate(300deg); opacity:0; }
  }
  #flower-section p.sub{ margin-bottom:1.6rem; }

  /* ---------- memory gallery ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
    gap:1rem;
    max-width:700px;
    width:100%;
    margin:0 auto;
  }
  .polaroid{
    background:var(--white);
    padding:.5rem .5rem 1rem;
    border-radius:8px;
    box-shadow:0 14px 26px -14px rgba(90,50,55,.4), 0 1px 0 rgba(255,255,255,.6) inset;
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
    transform:rotate(var(--rot,0deg));
    cursor:default;
  }
  .polaroid:hover, .polaroid:active{
    transform:rotate(0deg) translateY(-6px) scale(1.06);
    box-shadow:0 22px 34px -16px rgba(90,50,55,.5);
    z-index:2;
    position:relative;
  }
  .polaroid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
    border-radius:3px;
    background:var(--pink-soft);
  }
  .polaroid:nth-child(6n+1){ --rot:-4deg; }
  .polaroid:nth-child(6n+2){ --rot:3deg; }
  .polaroid:nth-child(6n+3){ --rot:-2deg; }
  .polaroid:nth-child(6n+4){ --rot:5deg; }
  .polaroid:nth-child(6n+5){ --rot:-3deg; }
  .polaroid:nth-child(6n){ --rot:2deg; }
  #gallery-section p.sub{ margin-bottom:1.6rem; }

  /* ---------- video ---------- */
  .video-wrap{
    width:min(560px, 92vw);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 26px 55px -20px rgba(90,50,55,.28), inset 0 0 0 1px rgba(255,255,255,.6);
    border:1px solid rgba(201,99,111,.2);
    background:#000;
    position:relative;
  }
  .manda-video{
    width:100%;
    display:block;
    max-height:70vh;
    background:#000;
  }

  /* ---------- final : bright, airy, same soft pink/white theme as the whole page ---------- */
  #final{
    background:radial-gradient(ellipse at 50% 66%, #fffaf6 0%, var(--cream) 45%, var(--pink-soft) 100%);
    position:relative;
    overflow:hidden;
  }
  #final h2{ font-size:clamp(2rem,6.5vw,3.3rem); color:var(--red-accent); font-weight:600; text-shadow:0 2px 18px rgba(201,99,111,.2); position:relative; z-index:1; }
  #final p.msg{ margin-top:1.2rem; max-width:520px; font-family:'Cormorant Garamond',serif; font-size:clamp(1.1rem,3vw,1.4rem); line-height:1.75; color:var(--ink); position:relative; z-index:1; }
  #final .made-with{ margin-top:3rem; font-size:.85rem; color:var(--ink-soft); letter-spacing:.03em; position:relative; z-index:1; }
  .replay-btn{ margin-top:1.8rem; position:relative; z-index:1; }

  /* ---------- final heart particle effect : full-bleed, no boxed edge, one with the section ---------- */
  .heart-particle-wrap{
    position:relative;
    width:100%;
    max-width:640px;
    height:min(62vh, 520px);
    min-height:380px;
    margin:1.6rem auto 0;
    overflow:hidden;
    z-index:0;
  }
  #heartParticleCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  @media (max-width:480px){
    .section{ padding:5vh 6vw; }
    .slide-nav{ gap:1rem; }
    .book-flip-nav{ gap:.9rem; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }