:root{
    --purple-dark:#150a2e;
    --purple:#2a1454;
    --pink:#ff6fb0;
    --pink-soft:#ffb6d9;
    --blue-glow:#7c9bff;
    --peach:#ffd9c2;
    --lavender:#e3d6ff;
    --cream:#f7edd9;
    --sepia:#c9a877;
    --gold:#f4c95d;
    --white:#fffaf5;
    --ink:#2b2140;
    --font-display:'Fredoka', sans-serif;
    --font-body:'Nunito', sans-serif;
    --font-hand:'Caveat', cursive;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--purple-dark);
    overflow-x:hidden;
  }
  body.locked{overflow:hidden; height:100vh;}
  h1,h2,h3{font-family:var(--font-display); margin:0;}
  button{font-family:var(--font-display); cursor:pointer; border:none;}
  .hidden{display:none !important;}
  ::selection{background:var(--pink); color:white;}

  /* ---------- ambient floating stickers ---------- */
  #ambient-stickers{
    position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden;
  }
  .sticker{
    position:absolute; font-size:2rem; opacity:0.55;
    animation:driftFloat linear infinite;
    will-change:transform;
  }
  @keyframes driftFloat{
    0%{ transform:translate(0,0) rotate(0deg); }
    25%{ transform:translate(30px,-40px) rotate(8deg); }
    50%{ transform:translate(-20px,-80px) rotate(-6deg); }
    75%{ transform:translate(40px,-40px) rotate(4deg); }
    100%{ transform:translate(0,-140px) rotate(0deg); opacity:0; }
  }

  /* ---------- cursor trail (hearts/sparkles) ---------- */
  .trail-particle{
    position:fixed; z-index:9998; pointer-events:none; font-size:1.05rem;
    transform:translate(-50%,-50%);
    animation:trailFade 0.9s ease-out forwards;
  }
  @keyframes trailFade{
    0%{ opacity:0.9; transform:translate(-50%,-50%) scale(1) translateY(0); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) translateY(-34px); }
  }

  /* ---------- sound toggle ---------- */
  #sound-toggle{
    position:fixed; bottom:16px; right:16px; z-index:200;
    width:42px; height:42px; border-radius:50%; font-size:1.2rem;
    background:rgba(255,255,255,0.85); box-shadow:0 4px 14px rgba(0,0,0,0.25);
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.2s ease, opacity 0.2s ease;
  }
  #sound-toggle:hover{transform:scale(1.08);}
  #sound-toggle.muted{opacity:0.55;}

  /* ---------- hidden easter egg ---------- */
  #secret-egg{
    position:fixed; bottom:14px; left:14px; z-index:150;
    font-size:0.95rem; opacity:0.16; filter:grayscale(0.4);
    transition:opacity 0.3s ease, transform 0.3s ease;
    user-select:none;
  }
  #secret-egg:hover{opacity:0.4; transform:scale(1.2);}
  #secret-egg.found{opacity:0.9; filter:none; animation:eggPop 0.5s ease;}
  @keyframes eggPop{0%{transform:scale(1);} 40%{transform:scale(1.6) rotate(-10deg);} 100%{transform:scale(1);}}
  #egg-modal{
    position:fixed; inset:0; z-index:500; background:rgba(20,8,40,0.6); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:1.5rem;
  }
  .egg-modal-inner{
    background:#fffaf5; border-radius:22px; padding:2.2rem 1.8rem; max-width:420px; text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,0.4);
    animation:popIn 0.5s cubic-bezier(.34,1.56,.64,1);
  }
  .egg-modal-emoji{font-size:2.6rem; margin-bottom:0.6rem;}
  .egg-modal-inner h3{font-size:1.4rem; color:#c9376b; margin-bottom:0.8rem;}
  .egg-modal-inner p{font-size:1.05rem; line-height:1.5; color:#4a2e3a; margin-bottom:1.3rem;}
  #egg-close-btn{background:linear-gradient(135deg,var(--pink),var(--blue-glow)); color:white; padding:0.7rem 1.6rem; border-radius:40px; font-size:1rem;}

  /* ---------- relationship stats ---------- */
  #stats{background:linear-gradient(160deg,#fff8ea,#ffe9d6);}
  #stats .section-title, #stats .section-sub{color:#5b3a63;}
  .stat-card{
    background:white; border-radius:16px; padding:1.5rem 1.2rem; text-align:center;
    border:2px solid #2b2140; box-shadow:5px 5px 0 #2b2140;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .stat-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 #2b2140;}
  .stat-card .stat-emoji{font-size:1.8rem; display:block; margin-bottom:0.3rem;}
  .stat-card .stat-number{font-family:var(--font-display); font-size:2rem; font-weight:700; color:#ff6fb0; display:block;}
  .stat-card .stat-label{font-size:0.85rem; color:#5b3a63; margin-top:0.4rem; line-height:1.35;}

  /* ================= INTRO / LOADING ================= */
  #loading-screen{
    position:fixed; inset:0; z-index:100;
    background:radial-gradient(ellipse at center, var(--purple) 0%, var(--purple-dark) 70%);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    color:#e8defc; text-align:center; padding:2rem;
  }
  #loading-screen .stars{position:absolute; inset:0; z-index:0;}
  .loading-inner{position:relative; z-index:1; max-width:520px; width:100%;}
  #loading-lines{
    font-family:'Courier New', monospace; font-size:clamp(0.95rem,2.6vw,1.15rem);
    line-height:2; min-height:9em; text-align:left; margin-bottom:1.5rem;
  }
  #loading-lines .ok{color:#8ef6a0;}
  #loading-lines .err{color:#ff7b7b;}
  .cursor-blink{animation:blink 1s step-start infinite;}
  @keyframes blink{50%{opacity:0;}}
  #enter-btn, .glow-btn{
    background:linear-gradient(135deg, var(--pink), var(--blue-glow));
    color:white; font-size:1.1rem; padding:0.9rem 1.8rem; border-radius:50px;
    box-shadow:0 0 25px rgba(255,111,176,0.5);
    opacity:0; transform:translateY(15px);
    transition:opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
  }
  #enter-btn.show, .glow-btn.show{opacity:1; transform:translateY(0);}
  #enter-btn:hover, .glow-btn:hover{box-shadow:0 0 40px rgba(255,111,176,0.8); transform:translateY(-2px) scale(1.03);}

  /* ================= DO NOT PRESS ================= */
  #donotpress-screen{
    position:fixed; inset:0; z-index:90;
    background:radial-gradient(circle at 50% 30%, var(--purple) 0%, var(--purple-dark) 80%);
    display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center;
    color:#e8defc; padding:2rem;
  }
  #whisper-text{
    font-family:var(--font-hand); font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:2rem;
    opacity:0; animation:fadeInSlow 1.5s ease forwards 0.3s;
  }
  @keyframes fadeInSlow{to{opacity:1;}}
  #the-button{
    background:#ff3860; color:white; font-size:clamp(1rem,3vw,1.3rem); font-weight:700;
    padding:1.3rem 2.2rem; border-radius:16px; letter-spacing:0.5px;
    box-shadow:0 0 0 4px rgba(255,56,96,0.25), 0 10px 30px rgba(255,56,96,0.4);
    animation:shakeButton 2.2s ease-in-out infinite, popIn 0.6s ease 1.2s both;
  }
  @keyframes popIn{from{opacity:0; transform:scale(0.7);} to{opacity:1; transform:scale(1);}}
  @keyframes shakeButton{
    0%,88%,100%{transform:rotate(0deg);}
    90%{transform:rotate(-3deg);}
    92%{transform:rotate(3deg);}
    94%{transform:rotate(-2deg);}
    96%{transform:rotate(2deg);}
  }
  #the-button:hover{filter:brightness(1.1);}

  /* ================= CONFETTI / REVEAL ================= */
  #reveal-screen{
    position:fixed; inset:0; z-index:95;
    background:linear-gradient(160deg, #ff6fb0, #7c9bff 55%, #ffd166);
    background-size:400% 400%;
    animation:gradientShift 6s ease infinite;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    text-align:center; overflow:hidden;
  }
  @keyframes gradientShift{
    0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}
  }
  #reveal-screen h1{
    color:white; font-size:clamp(2.2rem,7vw,4.5rem); text-shadow:0 4px 20px rgba(0,0,0,0.25);
    opacity:0; transform:scale(0.6);
    animation:revealPop 0.8s cubic-bezier(.34,1.56,.64,1) forwards 0.5s;
  }
  @keyframes revealPop{to{opacity:1; transform:scale(1);}}
  #reveal-screen p{
    color:white; font-family:var(--font-hand); font-size:clamp(1.3rem,3.5vw,1.8rem);
    margin-top:1rem; opacity:0; animation:fadeInSlow 1s ease forwards 1.3s;
  }
  .confetti-piece{position:absolute; top:-20px; z-index:2; pointer-events:none;}
  @keyframes confettiFall{
    to{ transform:translateY(110vh) rotate(720deg); opacity:0.9; }
  }
  .balloon{position:absolute; bottom:-120px; font-size:3rem; pointer-events:none;}
  @keyframes balloonRise{
    to{ transform:translateY(-130vh) translateX(var(--drift,0px)); }
  }
  #continue-arrow{
    margin-top:2.5rem; color:white; font-family:var(--font-body); font-weight:800;
    opacity:0; animation:fadeInSlow 1s ease forwards 2.4s, bounceArrow 1.6s ease-in-out infinite 2.4s;
    background:rgba(255,255,255,0.2); padding:0.7rem 1.3rem; border-radius:40px; backdrop-filter:blur(4px);
  }
  @keyframes bounceArrow{0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);}}

  /* ================= MAIN JOURNEY ================= */
  #main-content{position:relative; z-index:1;}
  section{
    min-height:100vh; padding:5rem 1.5rem; position:relative;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    overflow:hidden;
  }
  .section-inner{max-width:900px; width:100%; margin:0 auto; position:relative; z-index:2;}
  .section-title{
    text-align:center; font-size:clamp(1.8rem,5vw,3rem); margin-bottom:0.6rem;
  }
  .section-sub{
    text-align:center; font-family:var(--font-hand); font-size:clamp(1.2rem,3vw,1.5rem);
    margin-bottom:3rem; opacity:0.85;
  }
  .reveal-item{opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal-item.visible{opacity:1; transform:translateY(0);}

  /* ---- Her World: cards ---- */
  #know-you{background:linear-gradient(160deg, var(--peach), var(--lavender));}
  #know-you .section-title, #know-you .section-sub{color:#5b3a63;}
  .card-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.3rem;
  }
  .know-card{
    background:white; border-radius:20px; padding:1.6rem 1.3rem; text-align:center;
    box-shadow:0 10px 25px rgba(91,58,99,0.15); transition:transform 0.35s ease, box-shadow 0.35s ease;
    border:2px solid transparent;
  }
  .know-card:hover{transform:translateY(-8px) rotate(-1deg); box-shadow:0 18px 35px rgba(91,58,99,0.25); border-color:var(--pink-soft);}
  .know-card .emoji{font-size:2.4rem; display:block; margin-bottom:0.6rem;}
  .know-card h3{font-size:1.05rem; color:#5b3a63; margin-bottom:0.5rem;}
  .know-card p{font-size:0.95rem; color:#6b5a75; line-height:1.4; margin:0;}
  .stars-rating{color:var(--pink); letter-spacing:2px; font-size:0.9rem; margin-top:0.5rem; display:block;}
  .placeholder{
    border-bottom:2px dashed #c99adf; color:#8a4fae; font-style:italic; font-weight:600;
  }

  /* ---- Scrapbook ---- */
  #scrapbook{background:var(--cream); background-image:radial-gradient(circle, rgba(201,168,119,0.15) 1px, transparent 1px); background-size:18px 18px;}
  #scrapbook .section-title, #scrapbook .section-sub{color:#7a5a2e;}
  .board{
    display:flex; flex-wrap:wrap; gap:1.8rem; justify-content:center; align-items:flex-start;
  }
  .scrap-item{
    background:white; padding:0.8rem 0.8rem 1.2rem; box-shadow:0 8px 20px rgba(90,60,20,0.2);
    cursor:pointer; transition:transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
    position:relative;
  }
  .scrap-item:nth-child(6n+1){transform:rotate(-6deg);}
  .scrap-item:nth-child(6n+2){transform:rotate(4deg);}
  .scrap-item:nth-child(6n+3){transform:rotate(-3deg);}
  .scrap-item:nth-child(6n+4){transform:rotate(7deg);}
  .scrap-item:nth-child(6n+5){transform:rotate(-8deg);}
  .scrap-item:nth-child(6n){transform:rotate(2deg);}
  .scrap-item:hover{transform:scale(1.08) rotate(0deg) !important; z-index:10; box-shadow:0 20px 40px rgba(90,60,20,0.35);}
  .scrap-item.popped{transform:scale(1.3) rotate(0deg) !important; z-index:20; box-shadow:0 26px 56px rgba(90,60,20,0.42);}
  .scrap-item.popped video.scrap-media{object-fit:contain; background:#2b2140;}
  .polaroid{width:190px;}
  .photo-placeholder{
    width:100%; height:150px; background:linear-gradient(135deg,#e8d5a8,#c9a877);
    display:flex; align-items:center; justify-content:center; font-size:2rem; color:white; border-radius:2px;
  }
  .scrap-media{
    display:block; width:100%; height:150px; object-fit:cover; border-radius:2px; background:#e8d5a8;
  }
  .scrap-caption{font-family:var(--font-hand); font-size:1.15rem; text-align:center; margin-top:0.6rem; color:#6b4a1e;}
  .scrap-date{
    font-size:0.76rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
    text-align:center; color:#9a6b2f; margin-top:0.2rem;
  }
  .note-card{width:170px; background:#fff8dc; font-family:var(--font-hand); font-size:1.1rem; color:#5c4a1e; padding:1.2rem; line-height:1.4;}
  .ticket-card{width:190px; background:#fdf0e6; font-family:var(--font-body); font-size:0.85rem; color:#8a5a2e; border:2px dashed #d9a066; text-align:center;}
  .ticket-card .t-title{font-family:var(--font-display); font-weight:700; font-size:1rem; margin-bottom:0.4rem; color:#c9722e;}
  .ticket-date{
    display:inline-block; font-weight:900; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    border-top:1px solid #d9a066; border-bottom:1px solid #d9a066; padding:0.25rem 0; margin-bottom:0.4rem;
  }
  .ticket-sub{line-height:1.35;}
  .doodle-card{width:150px; font-size:2.5rem; text-align:center; background:#fff; display:flex; align-items:center; justify-content:center; height:120px;}

  /* ---- Emotional ---- */
  #forget-not{
    background:radial-gradient(ellipse at 50% 0%, #241154, #0d0221 75%);
    color:#e9e0ff;
  }
  #forget-not .stars{position:absolute; inset:0;}
  #forget-not .section-title{color:#fff;}
  .letter-lines p{
    font-size:clamp(1.1rem,2.6vw,1.5rem); text-align:center; line-height:1.7;
    margin:0 0 1.6rem; max-width:640px; margin-left:auto; margin-right:auto;
  }
  .letter-lines .highlight{color:var(--gold); font-family:var(--font-hand); font-size:1.3em;}
  #wandering-duck{
    position:fixed; bottom:6%; left:-10%; font-size:2.5rem; z-index:50; pointer-events:none;
    transition:left 6s linear; opacity:0;
  }
  #wandering-duck.walk{left:110%; opacity:1;}

  /* ---- Complaint Department ---- */
  #complaint{background:repeating-linear-gradient(45deg, #ffe066, #ffe066 20px, #ffd23f 20px, #ffd23f 40px);}
  .case-file{
    background:#fdf6e3; border:6px double #444; padding:2.2rem clamp(1.2rem,4vw,3rem);
    box-shadow:0 15px 40px rgba(0,0,0,0.3); position:relative; max-width:600px; margin:0 auto;
    font-family:'Courier New', monospace; color:#2b2b2b;
  }
  .case-file h2{font-family:'Courier New', monospace; text-align:center; font-size:1.3rem; letter-spacing:1px; margin-bottom:1.2rem;}
  .case-file .case-num{text-align:center; font-weight:bold; margin-bottom:1.2rem;}
  .charge-list{list-style:none; padding:0; margin:0 0 1.5rem; font-size:1rem; line-height:2;}
  .charge-list li::before{content:"☑ "; color:#2b8a3e; font-weight:bold;}
  .verdict{text-align:center; font-size:1.4rem; font-weight:bold; letter-spacing:2px; margin-bottom:1rem;}
  #guilty-stamp-btn{
    display:block; margin:0 auto; background:#c92a2a; color:white; padding:0.9rem 1.8rem;
    border-radius:8px; font-size:1.05rem; box-shadow:0 6px 0 #7d1a1a;
  }
  #guilty-stamp-btn:active{transform:translateY(4px); box-shadow:0 2px 0 #7d1a1a;}
  #stamp{
    position:absolute; top:45%; left:50%; font-size:clamp(2rem,8vw,3.5rem); font-weight:900; color:#c92a2a;
    border:6px solid #c92a2a; padding:0.3rem 1rem; border-radius:8px; transform:translate(-50%,-50%) rotate(-18deg) scale(3);
    opacity:0; letter-spacing:3px; pointer-events:none;
  }
  #stamp.slam{animation:stampSlam 0.4s ease-out forwards;}
  @keyframes stampSlam{
    0%{opacity:0; transform:translate(-50%,-50%) rotate(-18deg) scale(3);}
    60%{opacity:1; transform:translate(-50%,-50%) rotate(-14deg) scale(0.9);}
    100%{opacity:1; transform:translate(-50%,-50%) rotate(-14deg) scale(1);}
  }
  .punishment{margin-top:1.2rem; text-align:center; font-size:1.05rem;}

  /* ---- Gift box ---- */
  #giftbox{background:linear-gradient(160deg,#ffdde1,#ee9ca7);}
  #giftbox .section-title{color:#7a2e42;}
  #gift-wrap{width:180px; height:150px; margin:2rem auto; cursor:pointer; position:relative;}
  #gift-emoji{font-size:9rem; display:block; text-align:center; transition:transform 0.15s ease;}
  #gift-wrap.shake #gift-emoji{animation:shakeGift 0.4s ease;}
  @keyframes shakeGift{
    0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);}
  }
  #gift-hint{text-align:center; font-family:var(--font-hand); font-size:1.3rem; color:#7a2e42; min-height:2em;}
  #gift-reveal{
    max-width:480px; margin:1.5rem auto 0; background:white; border-radius:20px; padding:2rem;
    text-align:center; box-shadow:0 15px 40px rgba(122,46,66,0.25); opacity:0; transform:scale(0.85);
    transition:opacity 0.5s ease, transform 0.5s ease;
  }
  #gift-reveal.show{opacity:1; transform:scale(1);}
  .gift-image{
    display:block; width:100%; max-height:420px; object-fit:contain; border-radius:12px;
    background:#fff8f0; box-shadow:0 10px 24px rgba(122,46,66,0.18);
  }

  /* ---- Reasons I love you: bubbles ---- */
  #reasons{background:linear-gradient(180deg,#2a1454,#4a2472); min-height:130vh;}
  #reasons .section-title{color:white;}
  #reasons .bubble-hint{color:#e3d6ff; font-family:var(--font-hand); font-size:1.1rem; text-align:center; margin:-2.2rem 0 1.6rem; opacity:0.85;}
  #bubble-field{position:relative; width:100%; height:900px; max-width:1000px; margin:0 auto; overflow:hidden;}
  .bubble{
    position:absolute; background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.35);
    border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;
    color:white; font-weight:700; padding:0.6rem; backdrop-filter:blur(2px);
    animation:bubbleFloat ease-in-out infinite; cursor:grab;
    transform:translate(-50%,-50%);
    touch-action:none; user-select:none;
    transition:box-shadow 0.2s ease, background 0.2s ease;
  }
  .bubble:hover{background:rgba(255,255,255,0.2); box-shadow:0 0 25px rgba(255,255,255,0.25);}
  .bubble.dragging{
    cursor:grabbing; z-index:80; animation:none !important;
    background:rgba(255,111,176,0.35); border-color:#ff9fcb;
    box-shadow:0 10px 30px rgba(0,0,0,0.35); transition:none;
  }
  .bubble.placed{animation:none;}
  @keyframes bubbleFloat{
    0%{  transform:translate(-50%,-50%) translate(0,0) scale(1); }
    22%{ transform:translate(-50%,-50%) translate(var(--dx1), var(--dy1)) scale(1.04); }
    48%{ transform:translate(-50%,-50%) translate(var(--dx2), var(--dy2)) scale(0.97); }
    74%{ transform:translate(-50%,-50%) translate(var(--dx3), var(--dy3)) scale(1.03); }
    100%{transform:translate(-50%,-50%) translate(0,0) scale(1); }
  }

  /* ---- Mini game ---- */
  #game{background:linear-gradient(160deg,#fceabb,#f8b500 130%); }
  #game .section-title{color:#5c3a00;}
  #game-area{
    width:100%; max-width:640px; height:420px; margin:1.5rem auto; position:relative;
    background:rgba(255,255,255,0.35); border-radius:20px; overflow:hidden; border:3px solid rgba(255,255,255,0.6);
    touch-action:none;
  }
  .falling-item{
    position:absolute; top:-40px; font-size:2.1rem; pointer-events:none; user-select:none;
    animation:itemWobble 1.1s ease-in-out infinite;
  }
  @keyframes itemWobble{0%,100%{transform:rotate(-9deg);} 50%{transform:rotate(9deg);}}
  #basket{
    position:absolute; bottom:4px; left:50%; font-size:2.9rem; line-height:1;
    transform:translateX(-50%); pointer-events:none;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,0.28));
  }
  #basket.bounce{animation:basketBounce 0.22s ease;}
  @keyframes basketBounce{
    0%{transform:translateX(-50%) scale(1);}
    50%{transform:translateX(-50%) scale(1.3) rotate(-4deg);}
    100%{transform:translateX(-50%) scale(1);}
  }
  #game-hud{display:flex; justify-content:space-between; max-width:640px; margin:0 auto 0.5rem; font-weight:800; color:#5c3a00; font-size:1.1rem;}
  #game-start-btn{display:block; margin:1rem auto 0; background:#5c3a00; color:white; padding:0.8rem 1.6rem; border-radius:40px;}
  #game-result{text-align:center; font-family:var(--font-hand); font-size:1.5rem; color:#5c3a00; min-height:2em; margin-top:1rem;}

  /* ---- Receipt ---- */
  #receipt-wrap{display:flex; justify-content:center; margin-top:0.5rem;}
  .receipt{
    background:#fffdf6; width:300px; max-width:88vw; padding:1.5rem 1.3rem 1.6rem;
    font-family:'Courier New', monospace; color:#2b2b2b; font-size:0.78rem; line-height:1.55;
    filter:drop-shadow(0 14px 28px rgba(0,0,0,0.28));
    clip-path:polygon(
      0% 8px, 12.5% 0, 25% 8px, 37.5% 0, 50% 8px, 62.5% 0, 75% 8px, 87.5% 0, 100% 8px,
      100% calc(100% - 8px), 87.5% 100%, 75% calc(100% - 8px), 62.5% 100%, 50% calc(100% - 8px),
      37.5% 100%, 25% calc(100% - 8px), 12.5% 100%, 0% calc(100% - 8px)
    );
    animation:receiptDrop 0.55s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes receiptDrop{from{transform:translateY(-30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
  .receipt-center{text-align:center;}
  .receipt hr{border:none; border-top:1px dashed #999; margin:0.55rem 0;}
  .receipt-row{display:grid; grid-template-columns:1fr auto auto auto; gap:0.5rem; align-items:baseline;}
  .receipt-row.head{font-weight:700; border-bottom:1px dashed #999; padding-bottom:0.3rem; margin-bottom:0.3rem; font-size:0.7rem;}
  .receipt-total-row{display:flex; justify-content:space-between;}
  .receipt-barcode{display:flex; align-items:flex-end; height:34px; margin:0.7rem 0 0.2rem; justify-content:center;}
  .receipt-barcode span{display:inline-block; background:#222;}
  .receipt-note{text-align:center; margin-top:0.7rem; font-weight:700;}

  /* ---- Ending ---- */
  #ending{background:linear-gradient(180deg,#fff8f0,#ffe8ef); min-height:100vh;}
  #ending .quiet-lead{text-align:center; font-family:var(--font-hand); font-size:1.4rem; color:#a35; margin-bottom:2rem; opacity:0; animation:fadeInSlow 1.5s ease forwards;}
  .letter-paper{
    background:#fffdf8; max-width:620px; margin:0 auto; padding:clamp(1.6rem,5vw,3rem);
    border-radius:6px; box-shadow:0 15px 45px rgba(150,80,100,0.18);
    font-family:var(--font-hand); font-size:clamp(1.25rem,3vw,1.6rem); line-height:1.75; color:#4a2e3a;
  }
  .letter-paper p{margin:0 0 1.1rem;}
  .final-line{
    text-align:center; margin-top:3rem; font-family:var(--font-display); font-size:clamp(1.8rem,5vw,2.8rem);
    color:#c9376b;
  }
  .thank-you{text-align:center; font-family:var(--font-body); font-weight:700; color:#8a3a5a; margin-top:0.8rem;}
  #replay-btn{
    display:block; margin:2.5rem auto 1rem; background:linear-gradient(135deg,var(--pink),var(--blue-glow));
    color:white; padding:0.9rem 2rem; border-radius:50px; font-size:1.05rem;
  }

  @media (prefers-reduced-motion: reduce){
    .sticker, .bubble, #reveal-screen, .confetti-piece, .balloon{animation:none !important;}
  }
  @media (max-width:600px){
    section{padding:4rem 1rem;}
    #bubble-field{height:1300px;}
  }