/* ============================================================
   Birthday Surprise — romantic pastel design system
   Mobile-first. Everything scales with clamp()/vmin.
   ============================================================ */
:root{
  --rose:#f4a6c0; --rose-deep:#e0678f; --blush:#ffd9e4;
  --lav:#c9bce8; --lav-deep:#8b7cc4;
  --yellow-a:#faf0bf; --yellow-b:#fdf7da;
  --cream:#fffaf3; --gold:#efc25f;
  --ink:#6b4a86; --ink-soft:#9a80bd;
  --paper:#cdbff0;
  --shadow:0 14px 40px rgba(120,80,150,.22);
  --safe: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Fredoka",system-ui,-apple-system,sans-serif;
  color:var(--ink); overflow:hidden; position:fixed; inset:0;   /* lock mobile scroll bounce */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(244,166,192,.55), transparent 55%),
    radial-gradient(120% 90% at 50% 110%, rgba(201,188,232,.55), transparent 55%),
    repeating-linear-gradient(90deg,var(--yellow-a) 0 22px,var(--yellow-b) 22px 44px);
}
/* soft vignette for depth */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 26vmin rgba(120,80,150,.16)}

/* fixed, clipped decor layer — contains the corners so they never widen the page */
#decor{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
/* torn-paper lavender corners (absolute so #decor's overflow:hidden clips them) */
.corner{position:absolute;width:42vmax;height:42vmax;background:var(--paper);
  opacity:.9;filter:drop-shadow(0 6px 8px rgba(90,74,160,.15))}
.corner.tl{top:-18vmax;left:-18vmax;border-radius:0 0 58% 42%/0 0 52% 48%;transform:rotate(-8deg)}
.corner.br{bottom:-18vmax;right:-18vmax;border-radius:42% 58% 0 0/48% 52% 0 0;transform:rotate(-8deg)}

/* decorative layers */
#stars,#petals{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;font-size:var(--s,18px);color:var(--c,var(--lav-deep));opacity:.85;
  animation:twinkle var(--d,3s) ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.12)}}
/* floating hearts + drifting petals */
.float{position:absolute;top:110%;font-size:var(--s,22px);opacity:0;
  animation:rise var(--d,9s) linear infinite;animation-delay:var(--delay,0s);will-change:transform}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) translateX(0) rotate(0)}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{opacity:0;transform:translateY(-120vh) translateX(var(--drift,20px)) rotate(var(--spin,180deg))}
}

/* ============================================================
   Screen system
   ============================================================ */
#stage{position:relative;z-index:1;height:100%;display:grid;place-items:center;
  padding:24px 16px calc(24px + var(--safe));overflow-y:auto;overflow-x:hidden}
.screen{display:none;width:100%;max-width:760px;margin-inline:auto;text-align:center;
  animation:enter .55s cubic-bezier(.2,.9,.3,1.25)}
/* never let any content push the page sideways on mobile */
h1,h2,.script,.type,.reasons-title,.g-logo,.sub,.hint,.subhint{max-width:100%;overflow-wrap:break-word}
.screen.active{display:block}
@keyframes enter{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* stagger children in */
.screen.active .stagger>*{opacity:0;animation:fadeUp .5s ease forwards}
.screen.active .stagger>*:nth-child(1){animation-delay:.10s}
.screen.active .stagger>*:nth-child(2){animation-delay:.22s}
.screen.active .stagger>*:nth-child(3){animation-delay:.34s}
.screen.active .stagger>*:nth-child(4){animation-delay:.46s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Typography */
.script{font-family:"Great Vibes",cursive;color:var(--rose-deep);line-height:1.05;
  text-shadow:0 2px 10px rgba(224,103,143,.25)}
h1,h2{font-family:"Chewy",cursive;font-weight:400;line-height:1.16;color:var(--ink);
  text-shadow:2px 2px 0 #fff;white-space:pre-line}
h1{font-size:clamp(26px,7vw,52px)}
h2{font-size:clamp(20px,5vw,34px)}
.type{font-family:"Chewy",cursive;font-size:clamp(20px,5.2vw,34px);color:var(--ink);
  min-height:2.6em;text-shadow:1px 1px 0 #fff}
.caret{border-right:3px solid var(--rose-deep);animation:blink 1s step-end infinite;padding-right:2px}
@keyframes blink{50%{border-color:transparent}}

.puppy{font-size:clamp(78px,20vw,150px);line-height:1;margin:6px auto 2px;display:block;
  filter:drop-shadow(0 10px 12px rgba(224,103,143,.28));animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}

/* Buttons — glowing gradient pill */
.btn{font-family:"Chewy",cursive;font-size:clamp(19px,5vw,28px);color:#fff;border:none;
  border-radius:999px;padding:.44em 1.5em;margin:.4em;cursor:pointer;position:relative;
  background:linear-gradient(135deg,var(--rose) 0%,var(--lav-deep) 100%);
  box-shadow:0 8px 22px rgba(224,103,143,.4),inset 0 -3px 0 rgba(0,0,0,.12);
  transition:transform .1s,box-shadow .1s;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(224,103,143,.5)}
.btn:active{transform:translateY(3px);box-shadow:0 4px 12px rgba(224,103,143,.4)}
.btn.ghost{background:linear-gradient(135deg,#cbb6e6,#b6a3dd)}
.btns{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;position:relative}
/* the dodging "No" button */
#noBtn{transition:transform .18s ease}

/* ============================================================
   Splash
   ============================================================ */
#splash.active{display:grid;place-items:center;min-height:70vh}
#splash .script{font-size:clamp(46px,14vw,120px);padding:0 6px}
#splash .sub{font-family:"Caveat",cursive;font-size:clamp(18px,4.6vw,26px);color:var(--ink-soft);
  margin-top:6px}
.tap{margin-top:22px;font-family:"Chewy",cursive;color:var(--rose-deep);
  font-size:clamp(16px,4vw,22px);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;transform:scale(.96)}}
.bighug{font-size:clamp(60px,16vw,120px);animation:bob 3s ease-in-out infinite;margin-bottom:6px}

/* ============================================================
   Password gate — soft romantic card (not the bland default)
   ============================================================ */
#gate.active{display:grid;place-items:center;min-height:60vh}
.gate-card{background:rgba(255,250,243,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(224,103,143,.25);border-radius:22px;padding:26px 22px;
  width:min(340px,88vw);box-shadow:var(--shadow);text-align:center}
.gate-card .lock{font-size:44px;margin-bottom:4px}
.gate-card h3{font-family:"Chewy",cursive;font-size:22px;color:var(--ink);margin-bottom:4px}
.gate-card .tiny{font-family:"Caveat",cursive;font-size:17px;color:var(--ink-soft);margin-bottom:14px}
.gate-card input{width:100%;padding:13px 14px;border:1.5px solid #e7d3e0;border-radius:12px;
  font-size:16px;text-align:center;letter-spacing:2px;background:#fff;color:#333}
.gate-card input:focus{outline:none;border-color:var(--rose)}
.gate-card .btn{width:100%;margin:14px 0 0}
.gate-err{color:var(--rose-deep);font-family:"Caveat",cursive;font-size:17px;min-height:22px;margin-top:10px}

/* ============================================================
   Items screen
   ============================================================ */
.items{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,7vw,52px);margin:22px 0}
.item{background:none;border:none;cursor:pointer;font-size:clamp(50px,14vw,88px);
  transition:transform .18s;line-height:1;position:relative;filter:drop-shadow(0 6px 8px rgba(120,80,150,.25))}
.item:hover{transform:translateY(-8px) rotate(-5deg) scale(1.06)}
.item[data-done="1"]::after{content:"✓";position:absolute;top:-4px;right:-6px;font-size:18px;
  background:linear-gradient(135deg,var(--rose),var(--lav-deep));color:#fff;border-radius:50%;
  width:24px;height:24px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.hint{font-family:"Chewy",cursive;font-size:clamp(19px,5vw,30px);color:var(--ink)}
.subhint{font-family:"Caveat",cursive;font-size:clamp(15px,4vw,20px);color:var(--ink-soft);margin-top:2px}

/* ============================================================
   Modal
   ============================================================ */
.modal{position:fixed;inset:0;z-index:10;background:rgba(80,55,120,.5);backdrop-filter:blur(4px);
  display:none;place-items:center;padding:16px}
.modal.open{display:grid;animation:enter .35s}
.modal .box{background:var(--cream);border-radius:22px;padding:22px 18px;
  width:min(560px,94vw);max-height:86vh;overflow-y:auto;overflow-x:hidden;box-shadow:var(--shadow);
  position:relative;-webkit-overflow-scrolling:touch}
.modal .x{position:absolute;top:8px;right:14px;font-size:26px;color:var(--ink);cursor:pointer;
  background:none;border:none;font-family:"Chewy",cursive;z-index:2}

/* Letter */
.letter{font-family:"Caveat",cursive;font-size:clamp(19px,4.6vw,25px);color:#5a4a52;
  line-height:1.55;text-align:left;padding:4px 2px}
.letter .top{font-family:"Great Vibes",cursive;color:var(--rose-deep);
  font-size:clamp(30px,8vw,44px);text-align:center;margin-bottom:6px}
.letter p{margin:0 0 12px}
.letter .sign{text-align:right;color:var(--ink);font-size:1.15em;margin-top:8px}

/* Memories (Google-style) */
.g-logo{font-family:"Chewy",cursive;font-size:clamp(28px,8vw,50px);margin:2px 0 12px}
.g-logo b:nth-child(1){color:#4285F4}.g-logo b:nth-child(2){color:#EA4335}
.g-logo b:nth-child(3){color:#FBBC05}.g-logo b:nth-child(4){color:#4285F4}
.g-logo b:nth-child(5){color:#34A853}.g-logo b:nth-child(6){color:#EA4335}
.g-logo b:nth-child(7){color:#FBBC05}.g-logo b:nth-child(8){color:#4285F4}
.g-search{border:1px solid #edd7e2;border-radius:24px;padding:10px 18px;font-family:"Caveat",cursive;
  font-size:18px;color:#7a6a72;text-align:left;max-width:420px;margin:0 auto 16px;
  box-shadow:0 1px 6px rgba(120,80,150,.12);background:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid .tile{aspect-ratio:3/4;width:100%;border-radius:12px;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--blush),#fdf0c0);cursor:zoom-in;
  transition:transform .14s,box-shadow .14s;box-shadow:0 3px 8px rgba(120,80,150,.14)}
.grid .tile:hover{transform:scale(1.04);box-shadow:0 8px 18px rgba(120,80,150,.28)}
@media (max-width:420px){.grid{grid-template-columns:repeat(2,1fr)}}

/* Reasons I love you */
.reasons-title{font-family:"Great Vibes",cursive;color:var(--rose-deep);
  font-size:clamp(28px,7vw,44px);margin-bottom:4px;max-width:100%;overflow-wrap:break-word}
.reason-card{background:linear-gradient(135deg,#fff,var(--blush));border-radius:18px;
  padding:26px 20px;margin:10px auto;max-width:440px;box-shadow:0 6px 16px rgba(224,103,143,.2);
  font-family:"Caveat",cursive;font-size:clamp(20px,5vw,26px);color:var(--ink);
  min-height:130px;display:grid;place-items:center;line-height:1.4;
  animation:enter .4s}
.reason-meta{font-family:"Fredoka";font-size:13px;color:var(--ink-soft);margin-top:8px}
.reason-nav{display:flex;justify-content:center;gap:10px;margin-top:6px}
.reason-nav .btn{font-size:clamp(15px,4vw,20px);padding:.35em 1.1em}
.heartbeat{font-size:40px;animation:beat 1.1s ease-in-out infinite;display:inline-block}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}

/* Music / cassette */
.cassette{font-size:clamp(64px,16vw,110px);animation:bob 3s ease-in-out infinite}
.player .yt{width:100%;aspect-ratio:16/9;border:none;border-radius:14px;
  box-shadow:0 6px 18px rgba(120,80,150,.28)}
.song-title{font-family:"Chewy",cursive;font-size:clamp(20px,5vw,30px);color:var(--ink);margin:12px 0 8px}
.song-lyric{font-family:"Caveat",cursive;font-size:clamp(17px,4.4vw,23px);color:var(--rose-deep);margin-top:8px}

/* ============================================================
   Finale
   ============================================================ */
#final .heartwrap{position:relative;display:grid;place-items:center;margin:6px auto 2px}
#final .bigheart{font-size:clamp(140px,40vw,240px);animation:beat 1.2s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(224,103,143,.4))}
#final .inname{position:absolute;font-family:"Great Vibes",cursive;color:#fff;
  font-size:clamp(30px,9vw,52px);text-shadow:0 2px 10px rgba(0,0,0,.25);transform:translateY(6px)}
#final .fin-title{font-family:"Great Vibes",cursive;color:var(--rose-deep);
  font-size:clamp(34px,9.5vw,68px);margin-top:6px;max-width:100%;overflow-wrap:break-word;padding:0 6px}
#final .fin-sub{font-family:"Caveat",cursive;color:var(--ink);font-size:clamp(19px,5vw,27px);margin-top:2px}

/* ============================================================
   Lightbox with navigation
   ============================================================ */
#lightbox{position:fixed;inset:0;z-index:30;background:rgba(24,16,40,.92);
  display:none;place-items:center;padding:14px;cursor:zoom-out}
#lightbox.open{display:grid;animation:enter .25s}
#lightbox img{max-width:92vw;max-height:84vh;border-radius:16px;cursor:auto;
  box-shadow:0 14px 50px rgba(0,0,0,.6);animation:kenburns 12s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:36px;
  line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .12s;
  font-family:system-ui;-webkit-user-select:none;user-select:none}
.lb-nav:active{background:rgba(255,255,255,.4)}
@media (hover:hover){.lb-nav:hover{background:rgba(255,255,255,.34)}}
.lb-prev{left:max(8px,2vw)}.lb-next{right:max(8px,2vw)}
.lb-close{position:absolute;top:14px;right:18px;background:none;border:none;color:#fff;
  font-size:30px;cursor:pointer;font-family:"Chewy",cursive;z-index:2}
.lb-cap{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);color:#fff;
  font-family:"Caveat",cursive;font-size:clamp(16px,4.6vw,22px);text-align:center;
  max-width:86vw;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;
  font:600 13px system-ui;background:rgba(0,0,0,.4);padding:4px 12px;border-radius:999px}

.confetti{position:fixed;inset:0;z-index:20;pointer-events:none}

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