/* =========================================================
   Retro Email — a warm, handwritten "you've got mail" birthday
   theme. Coffee-dark desk mood, kraft-paper letters, one bold
   handwritten font for the personal moments. See THEME_RULES.md
   for the data contract this theme must respect.
   ========================================================= */

:root{
  --coffee-dark:#2b211c;
  --coffee:#3a2c24;
  --coffee-deep:#1c1512;
  --rose:#c47a70;
  --rose-deep:#ad625c;
  --paper:#fff8f0;
  --paper-dim:rgba(255,248,240,.8);
  --gold:#d2a86a;
  --ink:#3a2c24;
  --line:rgba(255,255,255,.3);

  --font-hw:'Caveat', cursive;
  --font-ui:'Quicksand', system-ui, sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, var(--coffee), var(--coffee-dark));
  font-family:var(--font-ui);
  color:var(--paper);
  display:flex;
  justify-content:center;
  padding-block:20px;
}
img{max-width:100%;}
button{font-family:inherit;}

/* ---------- shared handwritten type ---------- */
.hw-heading{font-family:var(--font-hw); font-weight:700; font-size:clamp(2rem,10vw,2.8rem); line-height:1.12; margin:.2em 0 .25em; text-wrap:balance;}
.hw-sub{font-family:var(--font-hw); font-weight:600; font-size:clamp(1.2rem,6vw,1.5rem); margin:0 0 .3em; color:var(--paper-dim);}
.hw-sub.small{font-size:1.05rem;}
.hw-hint{font-family:var(--font-ui); font-size:.78rem; letter-spacing:.06em; color:var(--paper-dim); opacity:.8; margin-top:16px;}
.hw-quote{font-family:var(--font-hw); font-size:1.15rem; color:var(--gold); margin-top:18px;}
.hw-signature{font-family:var(--font-hw); font-weight:700; font-size:clamp(1.2rem,5.5vw,1.5rem); color:var(--ink); margin:.9em 0 0; text-align:right;}
.hw-signature:empty{display:none;}

/* ---------- buttons ---------- */
.pill-btn{
  display:inline-block; margin-top:18px; font-family:var(--font-ui); font-weight:700; font-size:.88rem;
  color:var(--coffee-dark); background:var(--paper); border:none; border-radius:999px; padding:.8em 1.7em; cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5); transition:transform .2s ease, background .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(--rose), var(--rose-deep)); color:#fff;}
.pill-btn.ghost{background:transparent; border:1px solid var(--paper); color:var(--paper);}
.pill-btn.ghost.light{border-color:var(--gold); color:#fff;}
.pill-btn.ghost.light:hover{background:var(--gold); color:var(--coffee-dark);}

/* ---------- photo placeholders ---------- */
.photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg,#a85f5a,#784443); border:1.5px dashed rgba(255,255,255,.5); color:rgba(255,255,255,.85);
  text-align:center; font-family:var(--font-ui); font-size:.74rem; padding:10px;
}
.photo-placeholder .cam-icon{width:30px; height:30px; stroke:rgba(255,255,255,.85); 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(--coffee-deep) 0%, rgba(28,21,18,.6) 45%, rgba(28,21,18,.2) 75%);}
.cinematic-overlay.strong{background:linear-gradient(0deg, var(--coffee-deep) 20%, rgba(28,21,18,.7) 55%, rgba(28,21,18,.35) 100%);}
.stars-bg{position:absolute; inset:0; z-index:1; background-image:radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 15%, #fff, transparent), radial-gradient(1px 1px at 40% 45%, #fff, transparent), radial-gradient(1px 1px at 85% 40%, #fff, transparent); opacity:.7;}

/* =========================================================
   OVERLAY SCREENS (landing / date lock / opening) — fixed,
   shown before the scrollable letter journey
   ========================================================= */
.overlay-screen{
  position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center;
  transition:opacity .6s ease; overflow:hidden;
}
.overlay-screen.fade-out{opacity:0; pointer-events:none;}
.overlay-screen-plain{align-items:center; background:radial-gradient(ellipse 70% 50% at 50% 20%, var(--coffee), var(--coffee-dark));}
.overlay-inner{position:relative; z-index:2; width:100%; max-width:340px; text-align:center; padding:0 28px 64px;}
.overlay-screen-plain .overlay-inner{padding:0 28px;}
.envelope-icon{width:min(140px,38vw); margin:0 auto 10px; display:block; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));}

/* ---------- date lock ---------- */
.lock-title{font-size:clamp(1.7rem,9vw,2.2rem);}
.lock-heart{color:var(--rose); font-size:1.3rem; margin:0 0 16px;}
.date-fields{display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.date-input{
  width:64px; text-align:center; font-family:var(--font-ui); font-weight:700; font-size:1.1rem;
  padding:12px 6px; border-radius:12px; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:var(--paper);
}
.date-input.date-year{width:88px;}
.date-input::placeholder{color:rgba(255,255,255,.35);}
.lock-error{color:var(--rose); font-family:var(--font-ui); font-size:.8rem; margin:6px 0 0;}
.lock-flower{width:34px; height:50px; margin:16px auto 4px; display:block;}

/* ---------- opening animation ---------- */
.opening-envelope{position:relative; width:140px; margin:12px auto;}
.opening-envelope svg{width:100%; display:block;}
.opening-heart{position:absolute; color:var(--rose); font-size:1.1rem; opacity:0; animation:heart-rise 1.8s ease-in-out infinite;}
.oh-1{left:20%; top:20%; animation-delay:0s;}
.oh-2{left:50%; top:10%; animation-delay:.4s;}
.oh-3{left:75%; top:22%; animation-delay:.8s;}
@keyframes heart-rise{0%{opacity:0; transform:translateY(0) scale(.7);} 30%{opacity:1;} 100%{opacity:0; transform:translateY(-40px) scale(1.1);}}
.opening-progress{width:100%; max-width:240px; height:6px; border-radius:3px; background:rgba(255,255,255,.15); margin:14px auto 0;}
.opening-progress-fill{height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,var(--rose),var(--gold));}

/* =========================================================
   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:60px 28px; overflow:hidden;
  background:linear-gradient(175deg, var(--rose) 0%, var(--rose-deep) 60%, #874b4a 100%);
  text-align:center;
}
.section-inner{position:relative; z-index:2;}
.section-photo{padding:0; justify-content:flex-end; background:none;}
.ending-inner{padding:0 28px 64px;}

.back-btn{
  position:absolute; top:16px; left:16px; z-index:5; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-ui); font-weight:700; font-size:.68rem; letter-spacing:.04em;
  color:var(--rose-deep); background:var(--paper); border:none; border-radius:999px; padding:.5em 1em; cursor:pointer;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35); 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:#fff; 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);}}

/* ---------- 4. email view ---------- */
.email-inner{display:flex; flex-direction:column; align-items:center; gap:22px;}
.email-card{width:100%; background:rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.5); border-radius:14px; padding:22px 22px 20px; text-align:left;}
.email-row{font-family:var(--font-hw); font-weight:600; font-size:1.2rem; margin:.25em 0; color:var(--paper); border-bottom:1px dashed var(--line); padding-bottom:.25em;}
.email-message-label{border-bottom:none;}
.email-label{font-weight:700; color:#fff; margin-right:.3em;}
.email-teaser{font-family:var(--font-hw); font-weight:700; font-size:1.4rem; margin:.1em 0 0; color:#fff;}
.attachment-link{background:none; border:none; font-family:var(--font-hw); font-weight:700; font-size:1.4rem; color:#fff; text-decoration:underline; text-underline-offset:5px; cursor:pointer; padding:.2em .4em;}
.attachment-link:focus-visible{outline:2px solid #fff; outline-offset:4px; border-radius:6px;}

/* ---------- 5. choose an envelope ---------- */
.envelope-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.envelope-card{
  position:relative; aspect-ratio:4/3; border:none; border-radius:14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#fff; box-shadow:0 10px 22px -12px rgba(0,0,0,.4); transition:transform .2s ease;
}
.envelope-card:hover{transform:translateY(-3px);}
.envelope-card:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.env-a{background:linear-gradient(160deg,#e2a19b,var(--rose-deep));}
.env-b{background:linear-gradient(160deg,#9fc2a1,#5c8a63);}
.env-c{background:linear-gradient(160deg,#9bb3d6,#4f6fa0);}
.env-d{background:linear-gradient(160deg,#e0c79a,#b08a4f);}
.env-letter{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.25); display:grid; place-items:center; font-family:var(--font-hw); font-weight:700; font-size:1.1rem;}
.env-label{font-family:var(--font-ui); font-weight:700; font-size:.78rem;}

/* ---------- sweet message ---------- */
.note-card{background:var(--paper); color:var(--ink); border-radius:20px; padding:30px 24px; box-shadow:0 16px 34px -16px rgba(0,0,0,.4); max-width:320px; margin:0 auto;}
.note-eyebrow{font-family:var(--font-ui); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-deep); margin:0 0 .6em;}
.note-text{font-family:var(--font-hw); font-weight:600; font-size:1.4rem; line-height:1.4; margin:0;}

/* ---------- 6. a letter just for you ---------- */
.letter-inner{display:flex; flex-direction:column; align-items:center; gap:4px;}
.sticker-field{position:relative; display:flex; justify-content:center; gap:40px; height:40px; margin-bottom:4px;}
.sticker{width:36px; opacity:.9;}
.letter-card-eyebrow{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); margin:0 0 10px;}
.letter-card{
  position:relative; width:100%; background:var(--paper); color:var(--ink); padding:26px 22px 22px;
  border-radius:2px; box-shadow:0 18px 36px -14px rgba(0,0,0,.4); transform:rotate(-1deg); text-align:left;
}
.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-body{font-family:var(--font-hw); font-weight:600; font-size:clamp(1.1rem,5vw,1.3rem); line-height:1.5; color:var(--ink); white-space:pre-line; margin:0;}

/* ---------- 7. our little memories ---------- */
.film-track{
  display:flex; gap:16px; margin:16px 0 4px; padding:10px 28px 20px; margin-inline:-28px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.film-track::-webkit-scrollbar{display:none;}
.film-photo{
  flex:0 0 64%; max-width:210px; scroll-snap-align:center; margin:0;
  background:#fff; padding:8px 8px 22px; box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
  font-family:var(--font-hw); font-weight:600; font-size:1rem; color:var(--ink); text-align:center;
}
.film-photo .photo-placeholder{aspect-ratio:1;}
.film-photo figcaption{margin-top:8px;}
.rot-1{transform:rotate(-4deg);} .rot-2{transform:rotate(3deg);} .rot-3{transform:rotate(-2deg);}
.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(--paper-dim); min-width:64px; text-align:center;}
.moments-arrow{width:36px; height:36px; border-radius:50%; flex:none; cursor:pointer; border:1px solid rgba(255,255,255,.4); 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:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- 8. a little game ---------- */
.star-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:280px; margin:16px auto 12px;}
.star-cell{
  aspect-ratio:1; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.12);
  cursor:pointer; display:grid; place-items:center; font-size:1.3rem; color:rgba(255,255,255,.4); transition:background .25s ease, transform .2s ease;
}
.star-cell:hover{transform:translateY(-2px);}
.star-cell.found{background:radial-gradient(circle at 35% 30%, var(--gold), var(--rose-deep) 80%); color:#fff;}
.star-result{font-family:var(--font-hw); font-weight:700; font-size:1.2rem; color:var(--paper);}

/* ---------- 9. a song for you ---------- */
.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(--coffee) 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(--coffee-deep), 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(--paper),var(--gold)); 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-hw); font-weight:700; font-size:1.3rem; color:#fff; margin:0;}
.song-artist{font-family:var(--font-ui); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-dim); margin:.2em 0 18px;}
.song-progress{width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.18); 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(--paper-dim); min-width:2.4em;}
.song-play{width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer; border:1px solid rgba(255,255,255,.4); 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-wrap{border-radius:16px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(0,0,0,.4); width:100%; margin-top:14px;}
.youtube-wrap iframe{display:block; width:100%; aspect-ratio:16/9; height:auto; border:0;}

/* ---------- 10. here's to more (wish checklist) ---------- */
.wish-checklist{display:flex; flex-direction:column; gap:10px; max-width:300px; margin:16px auto;}
.wish-item{
  display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:12px 14px; cursor:pointer; color:#fff; font-family:var(--font-ui); font-weight:600; font-size:.85rem;
  text-align:left; transition:background .2s ease;
}
.wish-item:hover{background:rgba(255,255,255,.14);}
.wish-box{width:18px; height:18px; border-radius:5px; border:1.5px solid rgba(255,255,255,.5); flex:none; position:relative;}
.wish-item.checked .wish-box{background:var(--gold); border-color:var(--gold);}
.wish-item.checked .wish-box::after{content:"\2713"; position:absolute; inset:0; display:grid; place-items:center; font-size:.75rem; color:var(--coffee-dark);}
.wish-item.checked{opacity:.7; text-decoration:line-through;}

/* ---------- confetti (cake candle-blow) ---------- */
@keyframes confetti-fall{to{transform:translateY(70vh) rotate(540deg); opacity:0;}}

/* ---------- 11. happy birthday (cake) ---------- */
.cake-illustration{width:150px; height:150px; margin:6px auto;}
.cake-caption{font-family:var(--font-hw); font-size:1.15rem; color:var(--paper-dim); max-width:30ch; margin:0 auto;}
.wish-made{font-family:var(--font-hw); font-weight:600; color:var(--gold); margin-top:10px;}

/* ---------- 12. ending ---------- */
.ending-heading{font-size:clamp(1.6rem,8vw,2.1rem); color:#fff;}

/* ---------- responsive ---------- */
@media (max-width:380px){
  .section{padding:48px 20px;}
  .envelope-grid{gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  .opening-heart, .vinyl-disc{animation:none !important;}
  *{transition-duration:.001s !important;}
}