@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=DM+Mono:wght@400;500&display=swap');

*{box-sizing:border-box}
:root{--red:#8e1719;--cream:#f3e9d8;--ink:#30231f;--pink:#f3dfe1}
html,body{margin:0;min-height:100%;background:#160d0d;color:var(--ink);font-family:'Cormorant Garamond',serif}
body{display:flex;justify-content:center}
button{font:inherit;cursor:pointer;border:0}
.site{width:min(100%,1100px);min-height:100vh;position:relative;overflow:hidden;background:#efe4d4;box-shadow:0 0 70px #0008}
main{min-height:100vh;padding-top:0}
.page{display:none;min-height:100vh;position:relative;overflow:hidden;padding:50px}
.page.active{display:flex;animation:pageIn .65s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

.placeholder{display:flex;align-items:center;justify-content:center;background:
radial-gradient(circle at 30% 25%,#fff8 0 2px,transparent 3px),
linear-gradient(135deg,#bbaea1,#eee5d7 48%,#998b82);
color:#fff;font:11px 'DM Mono',monospace;letter-spacing:.1em;text-shadow:0 1px 4px #0008}
.card{background:#f8f0e4;box-shadow:0 14px 35px #3d170d44;border:1px solid #ffffff88}

.red-check{position:absolute;inset:0;background:
linear-gradient(45deg,#fff4 25%,transparent 25% 75%,#fff4 75%),
linear-gradient(45deg,#fff4 25%,transparent 25% 75%,#fff4 75%),#991d1e;
background-size:58px 58px;background-position:0 0,29px 29px;opacity:.95}
.red-paper,.crumpled-red{position:absolute;inset:0;background:
radial-gradient(circle at 15% 20%,#b83b38 0 2px,transparent 3px),
radial-gradient(circle at 80% 70%,#5f1113 0 1px,transparent 3px),
linear-gradient(135deg,#7b1113,#a62425 40%,#761012 75%,#9f2425);
filter:saturate(.8)}
.red-paper:after,.crumpled-red:after{content:"";position:absolute;inset:0;opacity:.2;background:repeating-linear-gradient(97deg,transparent 0 11px,#fff 12px 13px,transparent 14px 29px),repeating-linear-gradient(3deg,transparent 0 17px,#000 18px 19px,transparent 20px 35px);mix-blend-mode:overlay}
.cream-paper{position:absolute;inset:0;background:
radial-gradient(circle at 20% 30%,#d5c5b4 0 1px,transparent 2px),
radial-gradient(circle at 80% 70%,#c7b8a8 0 1px,transparent 2px),#eee2d0}
.flower{position:absolute;color:#f2c4c7;font-size:80px;line-height:1;z-index:2;text-shadow:4px 5px 0 #6c141622}
.f1{right:4%;top:4%;transform:rotate(18deg)}.f2{left:4%;bottom:5%;transform:rotate(-20deg)}.f3{right:8%;top:8%;color:#f7d8d1}
.tape{position:absolute;width:160px;height:38px;background:#e8d3b6aa;z-index:5;transform:rotate(-9deg)}.tape-a{top:7%;left:12%}.tape-b{right:8%;bottom:12%;transform:rotate(14deg)}

.hero-collage{position:relative;width:min(850px,100%);height:65vh;margin:auto}
.filmstrip{position:absolute;left:7%;top:12%;width:45%;padding:12px;background:#1e1a18;transform:rotate(-5deg);z-index:4}
.film-photo{height:130px;margin:8px 16px}.film-hole{height:32px;border-radius:5px;background:repeating-linear-gradient(90deg,#f4eee5 0 13px,transparent 13px 22px)}
.record{position:absolute;right:10%;top:25%;width:280px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#151515 0 2px,#282828 3px 5px);box-shadow:inset 0 0 0 35px #111,0 15px 25px #0005;transform:rotate(12deg);z-index:2}
.record span{position:absolute;inset:38%;border-radius:50%;background:#bd3b27;border:7px solid #191919}
.letter{position:absolute;right:22%;bottom:3%;width:280px;padding:26px;z-index:6;transform:rotate(4deg)}
.letter small{font-size:15px}.letter h2{font-size:38px;line-height:.9;margin:12px 0}.letter p{font-size:17px}
.start-btn,.next-btn,.restart{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:#351817;color:#fff;padding:13px 25px;border-radius:2px;letter-spacing:.04em;box-shadow:0 6px 15px #0004;z-index:10}
.start-btn:hover,.next-btn:hover,.restart:hover{transform:translateX(-50%) translateY(-2px)}

.section-title{position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:5;color:#fff;font-size:clamp(35px,6vw,65px);font-style:italic;white-space:nowrap}
.memory-grid{position:relative;width:min(850px,100%);height:75vh;margin:auto;z-index:3}
.polaroid{background:#f7f2e9;padding:13px 13px 38px;box-shadow:0 15px 25px #27090955}
.photo{position:absolute;width:250px}.photo .placeholder{height:230px}.photo span{display:block;text-align:center;margin-top:9px;font-size:18px}
.r1{left:3%;top:18%;transform:rotate(-8deg)}.r2{right:3%;top:12%;transform:rotate(7deg)}.r3{left:28%;bottom:2%;transform:rotate(4deg)}.r4{right:24%;bottom:8%;transform:rotate(-5deg)}
.next-btn{bottom:4%}

.calendar-card{position:absolute;left:9%;top:19%;width:300px;padding:20px;transform:rotate(-5deg);z-index:4}
.month{text-align:center;font-size:34px;font-style:italic;margin-bottom:10px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center;font-size:17px}
.calendar-grid b{font-family:'DM Mono';font-size:10px}.calendar-grid span{padding:5px}
.heart-day{border-radius:50%;background:#a31e20;color:#fff}
.big-photo{position:absolute;right:12%;top:13%;width:430px;padding:15px 15px 48px;transform:rotate(5deg);z-index:3}
.big-photo .placeholder{height:400px}.big-photo span{display:block;text-align:center;margin-top:10px;font-size:21px}

.choose-page,.gift{color:#fff;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.choose-title{position:relative;z-index:3;font-size:clamp(48px,8vw,90px);line-height:.85;margin-top:-8vh}.choose-title em{font-weight:400}
.choose-sub{position:relative;z-index:3;font-size:22px}
.choice-row{position:relative;z-index:4;display:flex;gap:25px;margin-top:35px;flex-wrap:wrap;justify-content:center}
.gift-card{width:175px;min-height:190px;padding:20px;background:#f3e8da;color:#4a2420;box-shadow:0 12px 30px #32070866;transform:rotate(-2deg);transition:.2s}
.gift-card:nth-child(2){transform:rotate(3deg)}.gift-card:nth-child(3){transform:rotate(-1deg)}
.gift-card:hover{transform:translateY(-8px) rotate(0)}
.gift-icon{display:block;font-size:58px;margin-bottom:10px}.gift-card b{display:block;font:14px 'DM Mono';letter-spacing:.12em}.gift-card small{display:block;margin-top:7px;font-size:16px}

.back{position:absolute;z-index:10;left:30px;top:30px;background:#f4e5d6;color:#4d211e;padding:9px 15px}
.gift-content{position:relative;z-index:4;width:min(680px,90%);padding:60px 50px;color:#3d201c;transform:rotate(-1deg)}
.gift-stamp{position:absolute;right:30px;top:20px;font-size:50px;color:#a01d20}
.gift-content h1{font-size:54px;margin:0 0 15px;font-style:italic}.gift-content p{font-size:24px;line-height:1.25}.gift-content .placeholder{height:280px;margin:20px 0}
.restart{bottom:7%}

.progress{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1100px);height:4px;background:#0005;z-index:30}.progress span{display:block;height:100%;width:20%;background:#fff;transition:.5s}

@media(max-width:700px){
  html,body{width:100%;min-height:100%;overflow-x:hidden}
  body{background:#160d0d}
  .site{width:100%;min-height:100svh;box-shadow:none}
  main{padding-top:0}
  .page{
    width:100%;
    min-height:100svh;
    padding:22px 16px 72px;
  }

  /* Home */
  .hero-collage{width:100%;height:72svh;min-height:520px;margin:auto}
  .filmstrip{left:1%;top:9%;width:61%;padding:8px;transform:rotate(-7deg)}
  .film-photo{height:112px;margin:6px 12px}
  .film-hole{height:9px}
  .record{right:-2%;top:24%;width:min(46vw,205px)}
  .letter{
    right:3%;
    bottom:4%;
    width:66%;
    max-width:250px;
    padding:18px;
    transform:rotate(4deg)
  }
  .letter small{font-size:13px}
  .letter h2{font-size:31px;line-height:.9;margin:9px 0}
  .letter p{font-size:15px;margin-bottom:0}
  .flower{font-size:55px}
  .f1{right:1%;top:4%}.f2{left:0;bottom:7%}
  .tape{width:110px;height:28px}
  .tape-a{top:6%;left:7%}.tape-b{right:2%;bottom:17%}
  .start-btn,.next-btn,.restart{
    bottom:18px;
    width:calc(100% - 36px);
    max-width:340px;
    min-height:48px;
    font-size:16px;
    padding:12px 18px;
  }

  /* Memories */
  .section-title{
    top:7%;
    width:100%;
    text-align:center;
    font-size:clamp(37px,11vw,55px);
    white-space:normal;
    line-height:.9;
  }
  .memory-grid{width:100%;height:75svh;min-height:520px}
  .photo{width:42vw;max-width:180px;padding:8px 8px 27px}
  .photo .placeholder{height:39vw;max-height:165px;font-size:9px}
  .photo span{font-size:14px;margin-top:6px;line-height:1}
  .r1{left:1%;top:19%}
  .r2{right:1%;top:17%}
  .r3{left:22%;bottom:5%}
  .r4{right:2%;bottom:10%}

  /* Calendar */
  .calendar-card{
    left:5%;
    top:14%;
    width:43vw;
    max-width:205px;
    padding:12px;
  }
  .month{font-size:25px;margin-bottom:7px}
  .calendar-grid{gap:3px;font-size:12px}
  .calendar-grid b{font-size:7px}
  .calendar-grid span{padding:3px}
  .big-photo{
    right:3%;
    top:17%;
    width:56vw;
    max-width:255px;
    padding:9px 9px 30px;
  }
  .big-photo .placeholder{height:52vw;max-height:235px}
  .big-photo span{font-size:14px;margin-top:6px;line-height:1.05}

  /* Choose */
  .choose-page{padding-left:12px;padding-right:12px}
  .choose-title{font-size:clamp(50px,15vw,76px);margin-top:-10vh}
  .choose-sub{font-size:18px;margin:14px 20px 0}
  .choice-row{width:100%;gap:10px;margin-top:28px}
  .gift-card{
    width:calc(33.333% - 8px);
    min-width:100px;
    min-height:145px;
    padding:14px 7px;
  }
  .gift-icon{font-size:42px;margin-bottom:7px}
  .gift-card b{font-size:10px;letter-spacing:.08em}
  .gift-card small{font-size:12px;line-height:1.05}

  /* Gift */
  .back{left:15px;top:15px;padding:8px 12px;font-size:14px}
  .gift-content{
    width:calc(100% - 20px);
    padding:42px 22px 28px;
    margin-top:18px;
  }
  .gift-stamp{right:16px;top:10px;font-size:38px}
  .gift-content h1{font-size:42px;line-height:.95;margin-bottom:12px}
  .gift-content p{font-size:19px;line-height:1.22}
  .gift-content .placeholder{height:55vw;max-height:270px;margin:15px 0}
  .restart{bottom:18px}

  .progress{width:100%;height:3px}
}

@media(max-width:380px){
  .hero-collage{min-height:470px}
  .film-photo{height:95px}
  .letter{width:68%}
  .letter h2{font-size:27px}
  .photo{width:43vw}
  .gift-card{min-width:0;min-height:132px}
  .gift-icon{font-size:36px}
  .choose-sub{font-size:16px}
}

@media(min-width:701px){
  .page{min-height:100vh}
}


.music-toggle{
  position:fixed;z-index:50;right:14px;top:47px;
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:999px;
  background:#f5eadb;color:#3d201c;
  box-shadow:0 5px 16px #0004;
  font:11px 'DM Mono',monospace;
  text-transform:lowercase;
}
.music-dot{font-size:16px;line-height:1}
.music-toggle.playing .music-dot{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.25);opacity:.6}}

.record{
  overflow:hidden;
}
.record img{
  position:absolute;inset:25%;
  width:50%;height:50%;
  border-radius:50%;
  object-fit:cover;
  z-index:1;
}
.record span{
  z-index:2;
  background:#bd3b27;
}
.record.playing{
  animation:spin 5s linear infinite;
}
@keyframes spin{to{transform:rotate(372deg)}}

@media(max-width:700px){
  .music-toggle{
    top:43px;right:9px;
    padding:7px 10px;
    font-size:9px;
  }
  .record.playing{animation:spinMobile 5s linear infinite}
}
@keyframes spinMobile{to{transform:rotate(372deg)}}

.video-card video{
  display:block;
  width:100%;
  height:230px;
  object-fit:cover;
  background:#bbaea1;
}
@media(max-width:700px){
  .video-card video{
    height:39vw;
    max-height:165px;
  }
}

.film-photo img{
  display:block;
  width:100%;
  height:130px;
  object-fit:cover;
}
.favorite-image{
  display:block;
  width:100%;
  height:400px;
  object-fit:cover;
}
.gift-photo{
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
  margin:20px 0;
}
@media(max-width:700px){
  .film-photo img{
    height:112px;
  }
  .favorite-image{
    height:52vw;
    max-height:235px;
  }
  .gift-photo{
    height:55vw;
    max-height:270px;
    margin:15px 0;
  }
}
@media(max-width:380px){
  .film-photo img{height:95px}
}

/* ===== BIRTHDAY OPENING SCREEN ===== */
.music-start-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#160d0d;
  transition:opacity .45s ease, visibility .45s ease;
}
.music-start-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.music-start-card{
  position:relative;
  width:min(430px,100%);
  padding:42px 30px;
  text-align:center;
  color:#3d201c;
  background:#f8f0e4;
  box-shadow:0 20px 55px #0008;
  transform:rotate(-1deg);
}
.music-start-disc{
  width:110px;
  height:110px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  font:42px 'DM Mono',monospace;
  background:repeating-radial-gradient(circle,#151515 0 2px,#282828 3px 5px);
  box-shadow:inset 0 0 0 27px #111,0 12px 25px #0004;
}
.music-start-small{
  font:11px 'DM Mono',monospace;
  letter-spacing:.1em;
  text-transform:lowercase;
}
.music-start-card h1{
  margin:10px 0 5px;
  font-size:48px;
  line-height:1;
  font-style:italic;
}
.music-start-card p{
  margin:0 0 22px;
  font-size:20px;
}
.music-start-card button{
  background:#351817;
  color:#fff;
  padding:13px 25px;
  border-radius:2px;
  letter-spacing:.04em;
  box-shadow:0 6px 15px #0004;
}
@media(max-width:700px){
  .music-start-screen{padding:18px}
  .music-start-card{padding:34px 22px}
  .music-start-disc{width:92px;height:92px;font-size:34px}
  .music-start-card h1{font-size:42px}
}

/* ===== FULL SURPRISE IMAGE ===== */
.gift-photo{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:65vh !important;
  object-fit:contain !important;
  margin:20px auto !important;
}
@media(max-width:700px){
  .gift-photo{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:58vh !important;
    object-fit:contain !important;
    margin:15px auto !important;
  }
}