/* =========================================================
   Plum Passcode — intimate, glowing dark-romance birthday theme.
   Deep plum/night palette, a passcode gate, and a little journey
   through hidden hearts, memories, a letter and a wish.
   ========================================================= */

:root{
  --plum-deep:#302631;
  --plum:#594052;
  --plum-light:#735a6d;
  --plum-glow:#876e7e;
  --plum-black:#1c1420;
  --pink:#c29ba8;
  --pink-soft:#ead6da;
  --gold:#d2b781;
  --cream:#fbf5ef;
  --cream-dim:#ddc9d0;
  --ink:#2d252b;

  --font-serif:'Cormorant Garamond', serif;
  --font-ui:'Poppins', system-ui, sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:linear-gradient(165deg, var(--plum-deep) 0%, var(--plum) 55%, var(--plum-deep) 100%);
  font-family:var(--font-ui);
  color:var(--cream);
  display:flex;
  justify-content:center;
  padding-block:20px;
}
img{max-width:100%;}
button{font-family:inherit;}

/* ---------- ambient sparkles ---------- */
.sparkles{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.spark{
  position:absolute; width:var(--size,3px); height:var(--size,3px); border-radius:50%;
  background:var(--gold); box-shadow:0 0 6px 1px rgba(242,207,126,.7); opacity:0;
  animation:drift var(--dur,9s) ease-in-out var(--delay,0s) infinite;
}
@keyframes drift{
  0%{opacity:0; transform:translateY(0);} 10%{opacity:.65;}
  50%{opacity:.35; transform:translateY(-18px);} 90%{opacity:.6;}
  100%{opacity:0; transform:translateY(-34px);}
}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--font-ui); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink-soft); opacity:.8; margin:0 0 .5em; text-align:center;}
.eyebrow.light{color:var(--gold);}
.section-title{font-family:var(--font-serif); font-weight:600; font-style:italic; font-size:clamp(1.9rem,8vw,2.4rem); color:var(--cream); text-align:center; margin:0 0 .3em; text-wrap:balance;}
.section-subtitle{font-family:var(--font-serif); font-size:1.05rem; color:var(--cream-dim); text-align:center; margin:0 0 1.4em; text-wrap:balance;}
.script-name{font-family:var(--font-serif); font-weight:700; font-style:italic; font-size:clamp(2.4rem,13vw,3.4rem); line-height:1.1; color:#fff; margin:.1em 0; text-shadow:0 3px 16px rgba(0,0,0,.4);}
.script-headline{font-family:var(--font-serif); font-weight:700; font-style:italic; font-size:clamp(2.2rem,11vw,3rem); line-height:1.15; color:#fff; margin:.1em 0 .3em; text-shadow:0 3px 16px rgba(0,0,0,.4); text-wrap:balance;}
.caption-italic{font-family:var(--font-serif); font-style:italic; font-size:1rem; color:var(--gold); margin-top:16px; opacity:.85;}

.pill-btn{
  display:inline-block; margin:22px auto 0; font-family:var(--font-ui); font-weight:600; font-size:.85rem;
  letter-spacing:.03em; color:var(--plum-deep); background:linear-gradient(155deg, var(--pink-soft), var(--pink));
  border:none; border-radius:999px; padding:.85em 1.8em; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(231,158,194,.6);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pill-btn:hover{transform:translateY(-2px);}
.pill-btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.pill-btn.primary{background:linear-gradient(155deg, var(--gold), #e8cf9c); color:#3a2418; font-size:.9rem; padding:.9em 1.9em;}
.pill-btn.ghost{background:transparent; border:1px solid var(--pink-soft); color:var(--pink-soft);}
.pill-btn.ghost.light{border-color:var(--gold); color:#fff;}
.pill-btn.ghost.light:hover{background:var(--gold); color:var(--plum-black);}

/* ---------- photo placeholders ---------- */
.photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg,#caa0b6,#8a3660 65%,#5c1a3a);
  border:1px dashed rgba(255,255,255,.5); color:rgba(255,255,255,.9);
  text-align:center; font-family:var(--font-ui); font-size:.72rem; padding:10px;
}
.photo-placeholder .cam-icon{width:28px; height:28px; stroke:rgba(255,255,255,.9); fill:none; stroke-width:2;}
.photo-placeholder.filled{background:none; border:none; padding:0;}
.photo-placeholder.filled img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-fill{position:absolute; inset:0; border:none; z-index:0;}
.cinematic-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--plum-black) 0%, rgba(28,20,32,.6) 45%, rgba(28,20,32,.2) 75%);}
.cinematic-overlay.strong{background:linear-gradient(0deg, var(--plum-black) 20%, rgba(28,20,32,.7) 55%, rgba(28,20,32,.35) 100%);}

/* =========================================================
   OVERLAY SCREENS (intro + lock) — fixed, shown before the journey
   ========================================================= */
.overlay-screen{
  position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center;
  padding:0; transition:opacity .6s ease; overflow:hidden;
}
.overlay-screen.lock-screen{
  align-items:center; background:radial-gradient(ellipse 70% 50% at 50% 20%, var(--plum-glow), transparent 65%), var(--plum-deep);
  padding:32px 24px;
}
.overlay-screen.fade-out{opacity:0; pointer-events:none;}
.overlay-inner{position:relative; z-index:2; width:100%; max-width:340px; text-align:center; padding:0 26px 64px;}
.lock-screen .overlay-inner{padding:0;}
.overlay-subtitle{font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:rgba(255,240,250,.85); margin:-4px 0 6px;}
.overlay-quote{font-family:var(--font-serif); font-style:italic; font-size:.92rem; color:var(--gold); opacity:.8; margin-top:20px;}

.lock-icon{width:40px; height:40px; margin:0 auto 14px; display:block; stroke:var(--pink-soft); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 10px rgba(231,158,194,.5));}
.lock-title{font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:clamp(1.7rem,8vw,2.1rem); color:var(--cream); margin:0 0 .2em;}
.lock-subtitle{font-family:var(--font-serif); color:var(--pink-soft); font-size:1.05rem; margin:0 0 24px;}

.dots{display:flex; justify-content:center; gap:14px; margin-bottom:30px;}
.dots .dot{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--pink-soft); background:transparent; transition:background .2s ease, transform .2s ease;}
.dots .dot.filled{background:var(--pink-soft); box-shadow:0 0 8px 1px rgba(244,198,221,.7); transform:scale(1.1);}
.dots.shake{animation:shakeDots .45s ease;}
@keyframes shakeDots{0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(4px);}}

.keypad{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; max-width:280px; margin:0 auto 22px;}
.key{aspect-ratio:1; border-radius:50%; border:1px solid rgba(244,198,221,.35); background:rgba(255,255,255,.07); color:var(--cream); font-family:var(--font-serif); font-size:1.3rem; cursor:pointer; transition:background .15s ease, transform .15s ease;}
.key:hover{background:rgba(255,255,255,.14);}
.key:active{transform:scale(.92);}
.key:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.key-func{font-size:1rem; color:var(--pink-soft);}
.key-enter{background:rgba(231,158,194,.28); border-color:var(--pink-soft);}
.lock-hint{font-family:var(--font-ui); font-size:.78rem; color:var(--cream-dim); opacity:.75; margin:0; letter-spacing:.02em;}

/* =========================================================
   JOURNEY (scroll-snap book, like every other theme)
   ========================================================= */
.book{
  width:100%; max-width:460px; height:min(100dvh - 40px, 900px);
  overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  border-radius:20px; box-shadow:0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.3);
  position:relative; scrollbar-width:thin; z-index:2;
}
.book::-webkit-scrollbar{width:6px;}
.book::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3); border-radius:3px;}
.section{
  min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative;
  display:flex; flex-direction:column; justify-content:center; padding:64px 28px; overflow:hidden;
  background:linear-gradient(165deg, var(--plum-deep) 0%, var(--plum) 55%, var(--plum-deep) 100%);
}
.section-inner{position:relative; z-index:2;}
.section-photo{padding:0; justify-content:flex-end;}
.final-inner{padding:0 28px 64px; text-align:center;}

.back-btn{
  position:absolute; top:18px; left:18px; z-index:5; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-ui); font-weight:700; font-size:.7rem; letter-spacing:.06em;
  color:var(--plum-deep); background:linear-gradient(160deg, var(--pink-soft), var(--pink));
  border:none; border-radius:999px; padding:.5em 1em; cursor:pointer;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.4); transition:transform .2s ease;
}
.back-btn:hover{transform:translateY(-1px);}
.back-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.scroll-chevron{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2;
  width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:2; opacity:.8; animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,6px);}}

/* ---------- reveal ---------- */
.dome-wrap{display:flex; justify-content:center; margin-bottom:10px;}
.dome-illustration{width:150px; height:170px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));}
.dome-rose{animation:roseGlow 2.4s ease-in-out infinite;}
@keyframes roseGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(231,158,194,.5));} 50%{filter:drop-shadow(0 0 14px rgba(231,158,194,.9));}}
.reveal-headline{font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.3rem; color:var(--cream); text-align:center; margin:0 0 .5em;}

/* ---------- interactive map / journey menu ---------- */
.journey-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px;}
.journey-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(244,198,221,.3); cursor:pointer;
  padding:16px 6px; border-radius:16px; color:var(--cream); transition:transform .2s ease, background .2s ease;
}
.journey-item:hover{background:rgba(255,255,255,.14); transform:translateY(-3px);}
.journey-item:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.journey-icon{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, var(--pink-soft), var(--pink) 70%); box-shadow:0 8px 16px -6px rgba(0,0,0,.5);}
.journey-icon svg{width:21px; height:21px; stroke:var(--plum-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.journey-label{font-size:.7rem; letter-spacing:.02em; color:var(--pink-soft); text-align:center;}

/* ---------- a little game: find the hidden hearts ---------- */
.heart-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:280px; margin:8px auto 20px;}
.heart-cell{
  aspect-ratio:1; border-radius:14px; border:1px solid rgba(244,198,221,.25); background:rgba(255,255,255,.05);
  cursor:pointer; display:grid; place-items:center; transition:background .25s ease, transform .2s ease;
}
.heart-cell::before{content:"\2661"; font-size:1.4rem; color:rgba(244,198,221,.35); transition:color .25s ease, transform .25s ease;}
.heart-cell:hover{transform:translateY(-2px);}
.heart-cell.found{background:radial-gradient(circle at 35% 30%, var(--pink-soft), var(--pink) 75%);}
.heart-cell.found::before{content:"\2665"; color:#fff; transform:scale(1.15);}
.game-quote{font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--cream-dim); text-align:center; margin:0 0 14px;}
.game-progress{width:100%; max-width:280px; height:4px; border-radius:2px; background:rgba(255,255,255,.14); margin:0 auto;}
.game-progress-fill{height:100%; width:0%; border-radius:2px; background:var(--gold); transition:width .5s ease;}

/* ---------- moments in pixels (filmstrip) ---------- */
.filmstrip-track{
  display:flex; gap:0; margin:14px 0 4px; padding:16px 28px 20px; margin-inline:-28px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  background:repeating-linear-gradient(90deg, #0f0a12 0 8px, #1a1218 8px 16px);
}
.filmstrip-track::-webkit-scrollbar{display:none;}
.film-frame{
  flex:0 0 62%; max-width:190px; scroll-snap-align:center; margin:0 10px;
  background:#fff; padding:8px 8px 20px; box-shadow:0 14px 28px -12px rgba(0,0,0,.55);
  font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:var(--ink); text-align:center;
}
.film-frame .photo-placeholder{aspect-ratio:1;}
.film-frame figcaption{margin-top:8px;}
.moments-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px;}
.moments-counter{font-family:var(--font-ui); font-size:.75rem; letter-spacing:.12em; color:var(--pink-soft); opacity:.85; min-width:64px; text-align:center;}
.moments-arrow{width:36px; height:36px; border-radius:50%; flex:none; cursor:pointer; border:1px solid var(--pink-soft); background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .2s ease, transform .2s ease;}
.moments-arrow:hover{background:rgba(255,255,255,.18); transform:translateY(-1px);}
.moments-arrow:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.moments-arrow svg{width:16px; height:16px; stroke:var(--pink-soft); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- music room ---------- */
.audio-player{display:flex; flex-direction:column; align-items:center; gap:4px;}
.vinyl-wrap{position:relative; width:min(190px,52vw); aspect-ratio:1; margin:10px auto 18px;}
.vinyl-disc{
  width:100%; height:100%; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:repeating-radial-gradient(circle at center, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
    radial-gradient(circle at center, var(--plum-light) 0 14%, #111 15% 22%, #1b1b1b 23% 100%);
  position:relative; animation:spin 6s linear infinite; animation-play-state:paused;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.6);
}
.vinyl-disc:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}
.vinyl-disc.playing{animation-play-state:running;}
.vinyl-label{position:absolute; inset:36%; border-radius:50%; background:var(--gold); overflow:hidden; box-shadow:0 0 0 2px var(--plum-black), inset 0 0 0 1px rgba(0,0,0,.2);}
.vinyl-photo{width:100%; height:100%; border-radius:50%;}
.vinyl-arm{position:absolute; top:-6px; right:2%; width:9px; height:50%; transform-origin:top center; background:linear-gradient(var(--pink-soft),var(--pink)); border-radius:6px; transform:rotate(-28deg); transition:transform .5s cubic-bezier(.32,.72,0,1); box-shadow:0 4px 10px rgba(0,0,0,.4);}
.vinyl-disc.playing ~ .vinyl-arm{transform:rotate(-6deg);}
@keyframes spin{to{transform:rotate(360deg);}}

.song-title{font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.2rem; color:#fff; margin:0;}
.song-artist{font-family:var(--font-ui); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--pink-soft); opacity:.85; margin:.2em 0 18px;}
.song-progress{width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.16); cursor:pointer;}
.song-progress-fill{height:100%; width:0%; border-radius:2px; background:var(--gold);}
.song-times{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:12px;}
.song-times span{font-family:var(--font-ui); font-size:.7rem; color:var(--pink-soft); opacity:.85; min-width:2.4em;}
.song-play{width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer; border:1px solid var(--pink-soft); background:rgba(255,255,255,.06); display:grid; place-items:center; transition:background .2s ease, transform .2s ease;}
.song-play:hover{background:rgba(255,255,255,.14); transform:translateY(-1px);}
.song-play:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.song-play svg{width:18px; height:18px; stroke:#fff; fill:#fff;}
.song-play .icon-pause{display:none;}
.song-play.playing .icon-play{display:none;}
.song-play.playing .icon-pause{display:block;}
.song-hint{font-family:var(--font-ui); font-size:.72rem; color:var(--gold); opacity:.85; min-height:1.2em; margin:10px 0 0;}
.youtube-player{width:100%;}
.youtube-frame-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 18px 34px -14px rgba(0,0,0,.55);}
.youtube-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---------- a letter just for you ---------- */
.letter-card{
  position:relative; background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) 0 2px, transparent 2px) 0 0/14px 14px,
    linear-gradient(175deg, #f4ece0, #e6d8c4);
  color:var(--ink); padding:34px 24px 26px; border-radius:2px;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.4); transform:rotate(-1deg); text-align:left;
}
.letter-stamp{
  position:absolute; top:16px; right:18px; border:1.5px solid rgba(140,34,48,.5); color:rgba(140,34,48,.7);
  font-size:.6rem; font-weight:700; letter-spacing:.1em; padding:3px 8px; border-radius:4px; transform:rotate(6deg);
}
.letter-tape{position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg); width:60px; height:22px; background:rgba(255,255,255,.6); box-shadow:0 1px 2px rgba(0,0,0,.15);}
.letter-heading{font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:clamp(1.7rem,8vw,2.1rem); color:var(--plum); margin:.2em 0 .5em;}
.letter-greeting{font-family:var(--font-serif); font-size:1.3rem; color:var(--plum); margin:0 0 .4em;}
.letter-body{font-family:var(--font-serif); font-size:.98rem; line-height:1.75; color:var(--ink); margin:0 0 1.1em; white-space:pre-line;}
.letter-sign{font-family:var(--font-ui); font-size:.85rem; color:var(--ink); text-align:right; margin:0;}
.sign-name{font-family:var(--font-serif); font-style:italic; font-size:1.3rem; color:var(--plum);}
.letter-seal{
  position:absolute; bottom:18px; right:20px; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #b06a80, #7a3350 60%, #5c1a3a 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.letter-flower{position:absolute; bottom:16px; left:18px; width:30px; height:30px; opacity:.85;}

/* ---------- our future ---------- */
.destination-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:8px;}
.destination-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(244,198,221,.3); font-size:.8rem; color:var(--pink-soft);
}
.destination-chip svg{width:14px; height:14px; stroke:var(--pink-soft); fill:none; stroke-width:2;}
.future-note{font-family:var(--font-serif); font-style:italic; font-size:1.1rem; color:var(--gold); text-align:center; margin-top:22px;}

/* ---------- wish jar ---------- */
.jar-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:10px;}
.jar-illustration{width:110px; height:128px;}
.jar-note{
  max-width:200px; font-family:var(--font-serif); font-style:italic; font-size:.9rem; color:var(--cream);
  background:rgba(255,255,255,.08); border:1px solid rgba(244,198,221,.3); border-radius:10px; padding:10px 14px;
  margin:-40px 0 0; text-align:center;
}
.wish-input{
  display:block; width:100%; max-width:320px; margin:18px auto 0; font-family:inherit; font-size:.9rem;
  padding:12px 14px; border-radius:12px; border:1px solid rgba(244,198,221,.3); background:rgba(255,255,255,.06);
  color:var(--cream); resize:none;
}
.wish-input::placeholder{color:rgba(255,255,255,.4);}
.wish-note-hint{font-family:var(--font-serif); font-style:italic; font-size:.9rem; color:var(--cream-dim); margin-top:12px;}

/* ---------- final message ---------- */
.stars{position:absolute; inset:0; z-index:1; background-image:radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 60%, #fff, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 80%, #fff, transparent); opacity:.6;}

/* ---------- ending ---------- */
.ending-polaroid{
  width:150px; margin:8px auto 18px; background:#fff; padding:10px 10px 24px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5); transform:rotate(-3deg);
  font-family:var(--font-serif); font-style:italic; font-size:.78rem; color:var(--ink); text-align:center;
}
.ending-polaroid .photo-placeholder{aspect-ratio:1;}
.ending-polaroid figcaption{margin-top:8px;}
.footer-meta{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pink-soft); opacity:.8; margin:0 0 .5em; text-align:center;}
.footer-signature{font-family:var(--font-serif); font-style:italic; color:var(--cream-dim); font-size:1rem; margin:0; text-align:center;}

/* ---------- responsive ---------- */
@media (max-width:380px){
  .section{padding:52px 20px;}
  .keypad{max-width:250px; gap:10px;}
  .journey-grid{gap:8px;}
}

@media (prefers-reduced-motion: reduce){
  .spark, .dome-rose{animation:none !important;}
  *{transition-duration:.001s !important; animation-duration:.001s !important;}
}