:root {
  --yellow: #FFD95A;
  --pink: #FF829B;
  --sky: #86D9F5;
  --mint: #9DE2C5;
  --ivory: #FFF9ED;
  --brown: #4B3B35;
  --paper: #FFFEF8;
  --shadow: 0 14px 35px rgba(75, 59, 53, .16);
  --hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --body: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; color: var(--brown); background: var(--ivory); font-family: var(--body); overflow-x: hidden; }
button { color: inherit; font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #26708a; outline-offset: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.opening, .memory-stage, .photo-wall-section, .letter-section, .finale { min-height: 100svh; position: relative; padding: 88px 20px 104px; display: grid; place-items: center; text-align: center; }
.opening { overflow: hidden; background: radial-gradient(circle at 20% 18%, #fff 0 4%, transparent 5%), linear-gradient(155deg, #fffdf7, #fff1a8); }
.opening::after { content: ""; position: absolute; width: 150px; height: 42px; bottom: 12%; right: -26px; background: rgba(134,217,245,.55); transform: rotate(-9deg); }
.eyebrow, .chapter-season { font: 700 13px/1.4 var(--hand); letter-spacing: .11em; text-transform: uppercase; }
.opening h1 { margin: 12px 0 22px; font: 700 clamp(56px, 19vw, 86px)/.84 var(--hand); transform: rotate(-3deg); }
.opening h1 span { color: var(--pink); text-shadow: 3px 4px 0 #fff; }
.opening-copy { font-size: 14px; line-height: 2; }
.primary-button { min-height: 50px; border: 2px solid var(--brown); border-radius: 999px; padding: 12px 24px; background: var(--yellow); box-shadow: 4px 5px 0 var(--brown); font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.primary-button:active { transform: translate(3px, 3px); box-shadow: 1px 2px 0 var(--brown); }
.opening .primary-button { margin-top: 24px; }
.sound-note { font-size: 11px; opacity: .65; }

.decorations { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.decorations span { position: absolute; font-size: 22px; color: var(--pink); opacity: .5; animation: float 5s ease-in-out infinite; }
.decorations span:nth-child(1){left:7%;top:12%}.decorations span:nth-child(2){right:8%;top:22%;animation-delay:-1s}.decorations span:nth-child(3){left:10%;bottom:18%;color:#e4ac00;animation-delay:-2s}.decorations span:nth-child(4){right:13%;bottom:12%;color:#52b0d2;animation-delay:-3s}.decorations span:nth-child(5){right:28%;top:8%;color:#5fb892;animation-delay:-4s}
@keyframes float { 50% { transform: translateY(-12px) rotate(10deg); } }

.memory-stage {
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  padding-top: calc(32px + env(safe-area-inset-top));
  padding-bottom: calc(116px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--ivory), #fff2b6);
}
.memory-stage[data-season="winter"] { background: linear-gradient(#f8fdff, #d9f3fc); }
.memory-stage[data-season="spring"] { background: linear-gradient(#fff8f8, #ddf7e9); }
.memory-stage[data-season="summer"] { background: linear-gradient(#e4f8ff, #fff2a5); }
.memory-stage.is-peak { background: var(--yellow); }
.chapter-heading { max-width: 480px; transition: opacity .35s; }
.chapter-heading.is-compact { margin-bottom: 4px; }
.chapter-heading h2 { margin: 3px 0 8px; font: 700 27px/1.3 var(--hand); }
.chapter-heading > p:last-child { margin: 0 auto; max-width: 34em; font-size: 13px; line-height: 1.8; white-space: pre-line; }
.chapter-count { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 99px; background: var(--pink); color: white; font: 700 12px var(--hand); }
.chapter-season { margin: 8px 0 0; color: #9d5b48; }

.photo-area { width: min(100%, 410px); height: 100%; min-height: 0; position: relative; display: grid; place-items: center; }
.photo-card { width: min(77vw, 310px, calc((100svh - 318px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .75)); perspective: 1000px; cursor: default; }
.photo-card.is-landscape { width: min(88vw, 390px, calc((100svh - 318px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.333)); }
.photo-card.is-landscape .photo-card-inner { aspect-ratio: 4/3; }
.photo-card.has-story { cursor: pointer; }
.photo-card-inner { position: relative; width: 100%; aspect-ratio: 3/4; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.photo-card.is-flipped .photo-card-inner { transform: rotateY(180deg); }
.photo-front, .photo-back { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid rgba(75,59,53,.1); background: var(--paper); box-shadow: var(--shadow); padding: 12px 12px 35px; }
.photo-front { transform: rotate(var(--rotation, -2deg)); }
.photo-back { display: grid; place-content: center; gap: 18px; padding: 28px; transform: rotateY(180deg); background: repeating-linear-gradient(#fffdf7 0 29px, #eadbc2 30px); font-family: var(--serif); line-height: 2; }
.photo-back > span { color: var(--pink); font-size: 30px; }
.photo-back small { font-family: var(--hand); }
.image-frame { width: 100%; height: 100%; position: relative; overflow: hidden; background: #f1eadb; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; background: linear-gradient(135deg, rgba(255,217,90,.7), rgba(255,130,155,.5) 50%, rgba(134,217,245,.7)); font: 700 18px/1.7 var(--hand); }
.image-placeholder::before { content: "PHOTO\A 3 : 4"; white-space: pre; }
.photo-caption { position: absolute; bottom: 7px; left: 15px; right: 15px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--hand); }
.tap-hint { position: absolute; right: -8px; bottom: -19px; margin: 0; padding: 6px 10px; border-radius: 4px; background: var(--mint); font: 700 10px var(--hand); transform: rotate(-3deg); }
.tape { position: absolute; z-index: 2; left: 50%; top: -13px; width: 82px; height: 28px; background: rgba(255,217,90,.72); transform: translateX(-50%) rotate(3deg); }

.comments { position: absolute; inset: 0; pointer-events: none; }
.comment { position: absolute; z-index: 4; max-width: 132px; padding: 8px 11px; opacity: 0; font: 700 13px/1.35 var(--hand); animation: comment-in .45s forwards; }
.comment.bubble { background: white; border-radius: 14px 14px 14px 2px; box-shadow: 0 5px 14px #0002; }
.comment.memo { background: var(--yellow); transform: rotate(-4deg); box-shadow: 2px 3px 0 #0002; }
.comment.handwriting { color: #a33d55; font-size: 15px; text-shadow: 1px 1px white; }
.comment.stamp { color: #fff; background: var(--pink); border: 2px solid white; border-radius: 50%; transform: rotate(9deg); }
.top-left{top:8%;left:0}.top-right{top:12%;right:4%}.bottom-left{bottom:9%;left:0}.bottom-right{bottom:12%;right:4%}.middle-left{top:45%;left:0}.middle-right{top:43%;right:4%}
@keyframes comment-in { from { opacity:0; transform: translateY(12px) scale(.85) rotate(-5deg); } to { opacity:1; transform: translateY(0) scale(1) rotate(0); } }
.stage-message { position: absolute; z-index: 10; inset: 0; place-items: center; padding: 30px; background: rgba(255,249,237,.92); font: 700 29px/1.5 var(--hand); }
.stage-message:not([hidden]) { display: grid; }

.controls { position: fixed; z-index: 30; bottom: calc(50px + env(safe-area-inset-bottom)); left: 50%; display: flex; gap: 7px; padding: 6px; border: 1px solid #fff8; border-radius: 99px; background: rgba(75,59,53,.86); transform: translateX(-50%); backdrop-filter: blur(8px); }
.controls button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: white; cursor: pointer; font-weight: 800; }
.controls button:active { background: #ffffff25; }
.timeline { position: fixed; z-index: 29; bottom: env(safe-area-inset-bottom); left: 0; right: 0; height: 50px; display: flex; align-items: center; gap: 4px; padding: 3px 10px; overflow-x: auto; background: rgba(255,249,237,.94); border-top: 1px solid #4b3b351f; scrollbar-width: none; }
.timeline::-webkit-scrollbar { display:none; }
.timeline button { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 5px; border: 0; border-radius: 99px; background: transparent; font: 700 9px var(--hand); cursor: pointer; }
.timeline button.is-active { min-width: 48px; background: var(--pink); color: white; font-size: 11px; }
.timeline button:disabled { opacity: .32; cursor: default; }

.photo-wall-section { background: #f7e7c9; overflow: hidden; }
.photo-wall { position: absolute; inset: 4% 3% 38%; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 5px; opacity: .58; transform: rotate(-2deg); }
.wall-thumb { background: white; padding: 3px 3px 8px; box-shadow: 0 4px 8px #0002; transform: rotate(var(--r)); overflow: hidden; }
.wall-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-thumb.is-placeholder { background: linear-gradient(135deg, var(--yellow), var(--pink)); }
.wall-copy { z-index: 2; align-self: end; padding: 24px; background: rgba(255,249,237,.92); box-shadow: var(--shadow); }
.wall-copy p { font-family: var(--serif); }
.wall-copy h2 { font: 700 25px/1.6 var(--hand); }

.letter-section { background: radial-gradient(circle at 12% 20%, #ffe67e 0 3%, transparent 3.5%), var(--ivory); }
.envelope { position: relative; width: min(88vw, 360px); aspect-ratio: 1.55; border: 2px solid #d4a27e; background: #f2c8a4; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; }
.envelope::before, .envelope::after { content:""; position:absolute; bottom:-45%; width:74%; height:100%; background:#f7d4b5; border:1px solid #d4a27e; transform:rotate(34deg); }
.envelope::before{left:-27%}.envelope::after{right:-27%;transform:rotate(-34deg)}
.envelope-flap { position:absolute; z-index:1; top:-51%; left:10%; width:80%; height:100%; background:#efbd94; border:1px solid #d4a27e; transform:rotate(45deg); }
.envelope > span { position: relative; z-index: 3; display:block; padding-top: 28%; font:700 20px var(--hand); }
.envelope small { position:relative;z-index:3;font:12px var(--hand); }
.letter-paper { position: relative; width: min(92vw, 580px); max-height: 82svh; overflow-y: auto; padding: 42px 26px 34px; border: 1px solid #decfb4; background: repeating-linear-gradient(#fffefa 0 31px, #eadfc9 32px); box-shadow: var(--shadow); text-align: left; scrollbar-width: thin; }
.letter-paper p { margin: 0 0 1.6em; font: 15px/2 var(--serif); opacity: 0; animation: paragraph-in .7s forwards; }
.letter-paper .letter-to, .letter-paper .letter-sign { font-family: var(--hand); font-weight: 700; }
.letter-paper .letter-sign { text-align:right; }
@keyframes paragraph-in { to { opacity:1; } }
.wish-button { display:block; margin:30px auto 8px; }
.secret-heart { position:absolute; top:9px; right:10px; width:44px; height:44px; border:0; background:transparent; color:#d98996; font-size:21px; cursor:pointer; opacity:.65; }
.secret-message { position:absolute; z-index:5; max-width:260px; padding:22px; border-radius:12px; background:white; box-shadow:var(--shadow); font-family:var(--hand); }

.finale { background: var(--yellow); overflow:hidden; }
.final-wish { position:relative;z-index:2;font:17px/2 var(--serif); }
.finale h2 { position:relative;z-index:2;margin:16px 0 5px;font:700 clamp(45px,15vw,78px)/1 var(--hand);color:var(--pink);text-shadow:3px 3px white; }
.finale > p:last-child { position:relative;z-index:2;font-weight:800; }
.wish-symbols span { position:absolute; z-index:1; left:50%; top:50%; color:var(--pink); font-size:30px; animation:gather 1.4s both; }
.wish-symbols span:nth-child(2){color:#a97f00;animation-delay:.1s}.wish-symbols span:nth-child(3){color:#e54e72;animation-delay:.2s}.wish-symbols span:nth-child(4){color:#4aa984;animation-delay:.3s}.wish-symbols span:nth-child(5){color:#459dbd;animation-delay:.4s}
@keyframes gather { from { transform: translate(var(--x, -40vw), var(--y, -35vh)) scale(.5); opacity:0; } 60%{opacity:1} to{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1);opacity:.8} }
.wish-symbols span:nth-child(1){--x:-42vw;--y:-30vh;--dx:-80px;--dy:-110px}.wish-symbols span:nth-child(2){--x:35vw;--y:-40vh;--dx:90px;--dy:-85px}.wish-symbols span:nth-child(3){--x:-38vw;--y:38vh;--dx:-105px;--dy:80px}.wish-symbols span:nth-child(4){--x:38vw;--y:30vh;--dx:105px;--dy:65px}.wish-symbols span:nth-child(5){--x:0;--y:-45vh;--dx:0;--dy:-140px}
.confetti i { position:absolute; top:-20px; width:9px; height:17px; background:var(--c); left:var(--left); transform:rotate(var(--rot)); animation:fall var(--duration) linear infinite; animation-delay:var(--delay); }
@keyframes fall { to { transform:translateY(110svh) rotate(600deg); } }

@media (min-width: 700px) {
  .memory-stage { grid-template-columns: minmax(260px, 390px) minmax(350px, 480px); grid-template-rows: auto; align-content: center; gap: 30px; padding: 88px 40px 104px; }
  .chapter-heading { text-align:left; }
  .photo-area { height:min(70svh,650px); }
  .photo-card { width:min(38vw,350px); }
  .photo-card.is-landscape { width:min(48vw,390px); }
  .photo-wall { inset:5% 12% 34%; }
}
@media (max-width: 340px) {
  .opening, .memory-stage, .photo-wall-section, .letter-section, .finale { padding-inline: 14px; }
  .opening h1 { font-size:52px; }
  .photo-card { width:min(72vw, calc((100svh - 318px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .75)); }
  .photo-card.is-landscape { width:min(88vw, calc((100svh - 318px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.333)); }
  .comment { max-width:105px;font-size:11px; }
  .chapter-heading > p:last-child { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}