:root {
  --bg: #050912;
  --bg-blue: #081726;
  --cyan: #65f5ff;
  --cyan-soft: #a5fbff;
  --blue: #398cff;
  --pink: #ff8fcf;
  --pink-soft: #ffd0e9;
  --white: #f6fbff;
  --muted: #9fb6ca;
  --script: 'Great Vibes', 'Brush Script MT', cursive;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --envelope-width: clamp(300px, 25vw, 420px);
  --envelope-height: clamp(204px, 18vw, 285px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  position: relative;
  background: radial-gradient(ellipse at 50% 47%, #0a2032 0%, #07111e 37%, var(--bg) 75%);
  color: var(--white);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
#experience { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.screen { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; }
.ambient-glow { position: fixed; width: 42vmax; height: 42vmax; border-radius: 50%; filter: blur(85px); opacity: .1; pointer-events: none; z-index: 0; }
.glow-one { background: #087dff; left: -24vmax; top: 5%; animation: glowDrift 15s ease-in-out infinite alternate; }
.glow-two { background: #ec4da7; right: -26vmax; bottom: -15%; animation: glowDrift 19s ease-in-out infinite alternate-reverse; }
.star-field, .particle-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 12; }
.star { position: absolute; color: #bcfaff; opacity: .5; font-size: 9px; animation: twinkle var(--duration, 4s) ease-in-out infinite alternate; }
.particle { position: absolute; bottom: -10vh; color: var(--pink); opacity: 0; font-size: var(--size, 18px); text-shadow: 0 0 12px currentColor; animation: floatHeart var(--duration, 12s) linear var(--delay, 0s) infinite; }
.scene-counter { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(19px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; z-index: 30; color: #7493a8; font: 10px var(--sans); letter-spacing: .16em; opacity: .62; }
.scene-counter i { width: 35px; height: 1px; display: block; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
#counterCurrent { color: var(--cyan-soft); }

/* PHẦN 0 */
body[data-stage="0"] #intro { opacity: 1; visibility: visible; pointer-events: auto; }
.intro-screen { display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(10,28,47,.25), transparent 62%); transition: opacity .8s ease; }
.intro-content { text-align: center; width: min(90vw, 850px); transform: translateY(-1.5vh); }
.intro-kicker, .heading-overline, .letter-kicker { display: block; color: var(--cyan); text-transform: uppercase; letter-spacing: .28em; font-size: 10px; font-weight: 500; opacity: 0; animation: fadeUp 1.2s .25s ease forwards; }
.intro-title { color: #f9fbff; font: clamp(56px, 9.5vw, 112px)/1.18 var(--script); font-weight: 400; letter-spacing: .015em; margin: 18px 0 12px; text-shadow: 0 0 28px rgba(101,245,255,.1); animation: titleBreathe 5s 1.4s ease-in-out infinite; }
.intro-title span { color: var(--pink-soft); }
.intro-line { display: block; width: 0; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent); animation: lineGrow 1.2s .9s ease forwards; }
.tap-hint { position: absolute; bottom: max(33px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: 80vw; color: #8ca7b9; letter-spacing: .12em; text-transform: uppercase; font-size: 9px; animation: hintPulse 2.6s ease-in-out infinite; }
.tap-hint span { color: var(--pink); margin-left: 7px; }
.intro-screen .tap-hint { opacity: 0; animation: hintFadeUp 1s 1.5s ease forwards, hintPulse 2.6s 2.5s ease-in-out infinite; }
/* Hint là con trực tiếp của màn hình để luôn nằm sát đáy viewport, không bị neo vào khối chữ đã transform. */
.intro-screen > .intro-hint,
.ending-screen > .ending-hint { position: absolute; left: 50%; bottom: max(30px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); text-align: center; }

/* PHẦN 1 MỚI: MỘT VŨ TRỤ DÀNH RIÊNG CHO EM */
body[data-stage="1"] #universe { opacity: 1; visibility: visible; pointer-events: auto; }
.universe-screen { background: radial-gradient(ellipse at 50% 57%, rgba(16,91,126,.36), transparent 56%); }
.universe-nebula { position: absolute; width: 54vmax; height: 54vmax; border-radius: 50%; filter: blur(82px); opacity: .17; pointer-events: none; mix-blend-mode: screen; }
.nebula-a { left: -4%; top: 20%; background: #078cff; animation: glowDrift 13s ease-in-out infinite alternate; }
.nebula-b { right: -6%; top: 15%; background: #e84caa; animation: glowDrift 16s ease-in-out infinite alternate-reverse; }
.universe-core-glow { position: absolute; z-index: 0; left: 50%; top: 59%; width: min(980px, 96vw); height: min(78vh, 790px); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse at 50% 48%, rgba(92,244,255,.24) 0%, rgba(39,146,231,.15) 24%, rgba(38,112,175,.07) 45%, transparent 72%); filter: blur(28px); animation: universeCoreGlow 5.4s ease-in-out infinite; }
.universe-halo-ring { position: absolute; z-index: 1; left: 50%; top: 59%; width: min(78vw, 1080px); height: min(70vh, 630px); border: 1px solid rgba(111,228,255,.12); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 26px rgba(101,245,255,.035), inset 0 0 28px rgba(101,245,255,.025); }
.halo-ring-a { animation: haloOrbit 35s linear infinite; }
.halo-ring-b { width: min(60vw, 830px); height: min(82vh, 740px); border-color: rgba(255,143,207,.10); border-style: dashed; animation: haloOrbit 48s linear infinite reverse; }
.universe-comet { position: absolute; z-index: 1; left: -18%; top: 39%; width: clamp(110px, 14vw, 210px); height: 2px; pointer-events: none; opacity: 0; transform: rotate(-24deg); background: linear-gradient(90deg, transparent, rgba(101,245,255,.12) 35%, rgba(190,253,255,.95) 78%, transparent); filter: drop-shadow(0 0 8px rgba(101,245,255,.9)); animation: cometFlight 8.8s ease-in-out infinite; }
.comet-b { top: 31%; width: clamp(80px, 10vw, 150px); height: 1.5px; transform: rotate(19deg); background: linear-gradient(90deg, transparent, rgba(255,143,207,.12) 35%, rgba(255,207,233,.92) 78%, transparent); filter: drop-shadow(0 0 8px rgba(255,143,207,.8)); animation-name: cometFlightReverse; animation-delay: -4.4s; animation-duration: 10.5s; }
.universe-constellation { position: absolute; z-index: 2; left: 50%; top: 59%; width: min(1080px, 100vw); height: min(90vh, 790px); transform: translate(-50%, -50%); overflow: visible; opacity: 0; animation: universeArtReveal 1.5s .25s ease forwards; }
.universe-orbit { fill: none; stroke: rgba(117,225,255,.29); stroke-width: 1.25; stroke-dasharray: 5 12; transform-origin: 360px 270px; filter: drop-shadow(0 0 3px rgba(101,245,255,.15)); }
.orbit-one { animation: universeOrbit 28s linear infinite; }
.orbit-two { stroke: rgba(255,143,207,.24); stroke-dasharray: 2 10; animation: universeOrbit 35s linear infinite reverse; }
.orbit-three { stroke: rgba(117,225,255,.22); stroke-dasharray: 4 14; animation: universeOrbit 42s linear infinite; }
.orbit-four { stroke: rgba(117,225,255,.12); stroke-dasharray: 1 15; animation: universeOrbit 52s linear infinite reverse; }
.constellation-core { filter: drop-shadow(0 0 7px rgba(101,245,255,.38)); animation: coreLightBreath 4.8s ease-in-out infinite; }
.constellation-side-lines { fill: none; stroke: rgba(139,245,255,.34); stroke-width: 1; stroke-dasharray: 3 8; animation: constellationSideShimmer 5.5s ease-in-out infinite; }
.constellation-lines { fill: none; stroke: url(#universeLineGlow); stroke-width: 1.9; stroke-dasharray: 650; stroke-dashoffset: 650; filter: drop-shadow(0 0 5px rgba(101,245,255,.68)); animation: constellationDraw 2.4s .65s ease forwards; }
.constellation-energy { fill: none; stroke: rgba(239,255,255,.95); stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 28 690; stroke-dashoffset: 720; opacity: 0; filter: drop-shadow(0 0 8px #65f5ff); animation: energyFlow 4.2s 2.8s linear infinite; }
.constellation-heart { fill: rgba(101,245,255,.065); stroke: #a7fcff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(101,245,255,.96)) drop-shadow(0 0 28px rgba(255,143,207,.23)); stroke-dasharray: 420; stroke-dashoffset: 420; animation: constellationDraw 1.8s 1s ease forwards, heartGlow 3s 3s ease-in-out infinite; }
.constellation-points circle { fill: url(#universeStarGlow); stroke: rgba(211,253,255,.94); stroke-width: 1.15; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px rgba(101,245,255,.72)); animation: starPulse 2.8s ease-in-out infinite alternate; }
.constellation-points circle:nth-child(3n) { animation-delay: -.9s; }
.constellation-points circle:nth-child(3n + 1) { animation-delay: -1.7s; }
.constellation-dots circle { fill: #c8fdff; filter: drop-shadow(0 0 7px #65f5ff); animation: twinkle 2.4s ease-in-out infinite alternate; }
.universe-satellite { transform-box: view-box; transform-origin: 360px 270px; animation: universeOrbit 12s linear infinite; }
.satellite-b { animation-duration: 18s; animation-direction: reverse; }
.satellite-halo { fill: rgba(101,245,255,.12); stroke: rgba(177,250,255,.78); stroke-width: 1.2; filter: drop-shadow(0 0 10px rgba(101,245,255,.8)); }
.satellite-core { fill: #edffff; filter: drop-shadow(0 0 5px #65f5ff) drop-shadow(0 0 12px #65f5ff); }
.satellite-tail { stroke: rgba(166,250,255,.8); stroke-width: 2; filter: drop-shadow(0 0 4px #65f5ff); }
.universe-content { position: absolute; z-index: 3; top: clamp(62px, 13vh, 124px); left: 50%; width: min(850px, 90vw); text-align: center; transform: translateX(-50%); }
.scene-kicker { display: block; color: var(--cyan); text-transform: uppercase; letter-spacing: .29em; font-size: 9px; font-weight: 600; opacity: 0; animation: fadeUp .9s .1s ease forwards; }
.universe-content h2, .memories-heading h2, .secret-content h2 { margin: 12px 0 0; color: var(--white); font: 400 clamp(30px, 4.6vw, 55px)/1.18 var(--serif); letter-spacing: -.025em; text-shadow: 0 0 28px rgba(101,245,255,.1); opacity: 0; animation: fadeUp 1.1s .28s ease forwards; }
.universe-content h2 em, .memories-heading h2 em, .secret-content h2 em { color: var(--pink-soft); font-style: normal; }
.universe-content p { margin: 12px auto 0; max-width: 600px; color: #a9c0cf; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .04em; line-height: 1.8; opacity: 0; animation: fadeUp 1s .6s ease forwards; }
.universe-floating { position: absolute; z-index: 2; pointer-events: none; text-shadow: 0 0 18px currentColor; animation: floatDecor 5s ease-in-out infinite; }
.floating-heart { color: var(--pink); font-size: clamp(22px, 3vw, 34px); }
.heart-a { left: 17%; top: 37%; transform: rotate(-14deg); }
.heart-b { right: 17%; top: 55%; color: var(--cyan-soft); font-size: 26px; animation-delay: -2.2s; }
.floating-star { color: var(--cyan-soft); font-size: 20px; }
.star-a { left: 25%; top: 70%; animation-delay: -1.2s; }
.star-b { right: 26%; top: 32%; color: var(--pink); animation-delay: -3s; }
.universe-hint { opacity: 0; animation: hintFadeUp 1s 1.55s ease forwards, hintPulse 2.6s 2.55s ease-in-out infinite; }

/* PHẦN 3 MỚI: NHỮNG MẢNH GHÉP VỀ CHÚNG MÌNH */
body[data-stage="3"] #memories { opacity: 1; visibility: visible; pointer-events: auto; }
.memories-screen { background: radial-gradient(ellipse at 50% 50%, rgba(8,47,69,.28), transparent 58%); }
.memories-heading { position: absolute; z-index: 4; top: clamp(30px, 8.5vh, 80px); left: 50%; width: min(1000px, 92vw); transform: translateX(-50%); text-align: center; }
.memories-heading h2 { font-size: clamp(29px, 4.2vw, 49px); margin-top: 9px; }
.memories-heading p { margin: 10px auto 0; max-width: 620px; color: #9eb7c7; font-size: clamp(10px, 1vw, 13px); letter-spacing: .045em; line-height: 1.7; opacity: 0; animation: fadeUp .9s .55s ease forwards; }
.memory-grid { position: absolute; z-index: 3; top: 56%; left: 50%; transform: translate(-50%, -50%); width: min(1120px, 88vw); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 26px); align-items: stretch; }
.memory-card { position: relative; min-width: 0; min-height: clamp(250px, 31vh, 332px); padding: 10px 10px 17px; overflow: hidden; border: 1px solid rgba(137,225,245,.28); border-radius: 8px; background: linear-gradient(155deg, rgba(15,42,60,.9), rgba(7,18,32,.9)); box-shadow: 0 16px 46px rgba(0,0,0,.25), inset 0 0 28px rgba(101,245,255,.035); opacity: 0; transform: translateY(25px) rotate(var(--memory-tilt, 0deg)); animation: memoryCardEnter .9s var(--memory-delay, .3s) cubic-bezier(.17,.7,.22,1) forwards, memoryCardFloat 6.5s calc(var(--memory-delay, .3s) + 1s) ease-in-out infinite; }
.memory-one { --memory-tilt: -2deg; --memory-delay: .25s; }
.memory-two { --memory-tilt: 1.7deg; --memory-delay: .45s; }
.memory-three { --memory-tilt: -1.4deg; --memory-delay: .65s; }
.memory-four { --memory-tilt: 2deg; --memory-delay: .85s; }
.memory-photo { position: relative; padding: 6px 6px 7px; background: linear-gradient(135deg, #f9fdff, #dcecf3); box-shadow: 0 7px 18px rgba(0,0,0,.22); }
.memory-photo img { display: block; width: 100%; aspect-ratio: 1.12 / 1; object-fit: cover; background: #d5f2f8; }
.memory-photo span { position: absolute; right: 11px; bottom: 11px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(6,22,37,.6); border: 1px solid rgba(255,255,255,.6); color: #ffb0dc; font-size: 15px; }
.memory-index { margin: 16px 0 8px; color: var(--cyan-soft); font-size: 8px; font-weight: 600; letter-spacing: .18em; }
.memory-caption { margin: 0; color: #dcebf3; font: clamp(12px, 1.12vw, 15px)/1.6 var(--serif); }
.memories-hint { z-index: 5; opacity: 0; animation: hintFadeUp 1s 1.5s ease forwards, hintPulse 2.6s 2.5s ease-in-out infinite; }
body[data-stage="4"] #memories.falling-away { z-index: 10; visibility: visible; opacity: 1; animation: galleryFallAway 1.08s cubic-bezier(.7,0,.84,.25) forwards; }

/* PHẦN 2 */
body[data-stage="2"] #gallery { opacity: 1; visibility: visible; pointer-events: auto; }
.gallery-screen { transition: opacity .8s ease; background: radial-gradient(ellipse at 50% 46%, rgba(10,49,71,.24), transparent 48%); }
.gallery-heading { position: absolute; top: clamp(20px, 5.5vh, 54px); left: 0; width: 100%; padding: 0 16px; text-align: center; z-index: 5; }
.gallery-heading .heading-overline { opacity: 0; animation: fadeUp .8s .1s ease forwards; font-size: 9px; }
.gallery-heading h2 { margin: 8px 0 0; overflow: hidden; font: clamp(32px, 5.3vw, 62px)/1.12 var(--serif); font-weight: 400; letter-spacing: .015em; }
.gallery-heading h2 span { display: inline-block; clip-path: inset(0 100% 0 0); animation: revealFromLeft 1.5s .25s cubic-bezier(.77,0,.18,1) forwards; color: var(--white); text-shadow: 0 0 22px rgba(101,245,255,.12); }
.gallery-heading p { margin: 9px 0 0; color: #9bb5c5; font-size: 11px; letter-spacing: .06em; opacity: 0; animation: fadeUp .9s 1.1s ease forwards; }
.bouquet-wrap { position: absolute; z-index: 2; width: min(39vw, 445px); height: min(62vh, 565px); left: 50%; top: 51%; transform: translate(-50%, -43%); opacity: 0; animation: bouquetRise 1.35s .55s cubic-bezier(.2,.72,.25,1) forwards; }
.bouquet { position: absolute; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(52,220,255,.2)); animation: bouquetSway 6.5s 1.9s ease-in-out infinite; transform-origin: 50% 82%; }
.bouquet-halo { position: absolute; width: 82%; height: 74%; left: 9%; top: 12%; background: #00aaff; opacity: .10; filter: blur(48px); border-radius: 50%; animation: haloBreathe 5s ease-in-out infinite; }
.bouquet-spark { position: absolute; color: var(--cyan-soft); text-shadow: 0 0 12px var(--cyan); font-size: 20px; animation: twinkle 2.8s ease-in-out infinite alternate; }
.spark-a { top: 23%; left: 14%; }.spark-b { top: 41%; right: 9%; color: var(--pink); text-shadow: 0 0 12px var(--pink); animation-delay: .8s; }.spark-c { bottom: 25%; right: 21%; font-size: 13px; animation-delay: 1.4s; }
.photo-card { position: absolute; z-index: 4; width: clamp(112px, 12.3vw, 166px); padding: 7px 7px 25px; margin: 0; background: rgba(250,253,255,.97); border: 1px solid #fff; box-shadow: 0 12px 40px rgba(0,0,0,.42), 0 0 20px rgba(101,245,255,.06); color: #344250; transform: translateY(24px) rotate(var(--tilt, 0deg)) scale(.96); opacity: 0; animation: photoReveal .9s var(--delay, 1s) cubic-bezier(.15,.7,.2,1) forwards, photoFloat 6s calc(var(--delay, 1s) + 1s) ease-in-out infinite; transition: box-shadow .3s ease; }
.photo-card img { width: 100%; aspect-ratio: 4 / 4.25; display: block; object-fit: cover; background: #c8eef4; }
.photo-card figcaption { position: absolute; bottom: 6px; left: 3px; right: 3px; overflow: hidden; text-align: center; color: #607382; font: 10px var(--script); white-space: nowrap; }
.photo-pin { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffd1e7; border: 1px solid white; top: -4px; left: calc(50% - 3px); box-shadow: 0 0 7px rgba(255,143,207,.5); z-index: 2; }
.photo-1 { --tilt: -7deg; --delay: .85s; left: 7.5%; top: 22%; }
.photo-2 { --tilt: 6deg; --delay: 1.05s; right: 8%; top: 20%; }
.photo-3 { --tilt: 5deg; --delay: 1.25s; left: 3.5%; top: 53%; }
.photo-4 { --tilt: -6deg; --delay: 1.15s; right: 4%; top: 52%; }
.photo-5 { --tilt: -5deg; --delay: 1.4s; left: 25%; bottom: 6.5%; }
.photo-6 { --tilt: 7deg; --delay: 1.3s; right: 25%; bottom: 6.5%; }
.gallery-hint { z-index: 6; }


/* PHẦN 2–4: PHONG THƯ */
body[data-stage="4"] #letterScreen,
body[data-stage="5"] #letterScreen,
body[data-stage="6"] #letterScreen { opacity: 1; visibility: visible; pointer-events: auto; }
.letter-screen { background: radial-gradient(ellipse at 50% 58%, rgba(18,57,81,.32), transparent 55%); transition: opacity .55s ease; }
.letter-intro { position: absolute; top: 13%; width: 100%; text-align: center; opacity: 0; transform: translateY(-12px); }
body[data-stage="4"] .letter-intro { animation: fadeUp .8s .35s ease forwards; }
.letter-intro .letter-kicker { opacity: 1; animation: none; font-size: 9px; }
.letter-intro p { color: #a6bdca; font: 17px var(--script); margin: 10px 0; }
.envelope-wrap { position: absolute; left: 50%; top: 55%; width: var(--envelope-width); height: var(--envelope-height); transform: translate(-50%, -50%) scale(.92); opacity: 0; filter: drop-shadow(0 24px 35px rgba(0,0,0,.35)); }
body[data-stage="4"] .envelope-wrap { animation: envelopeArrive 1.1s .12s cubic-bezier(.2,.72,.25,1) forwards; }
.envelope-back { position: absolute; z-index: 1; inset: 0; border-radius: 7px; background: linear-gradient(145deg, #163c59, #0b2037 60%, #122f4b); border: 1px solid rgba(120,221,255,.48); box-shadow: inset 0 0 24px rgba(68,186,255,.11), 0 0 24px rgba(34,166,255,.12); }
.paper { position: absolute; z-index: 2; bottom: 0; left: 50%; width: calc(var(--envelope-width) - 16px); height: calc(var(--envelope-height) - 14px); transform: translateX(-50%); overflow: hidden; background: linear-gradient(135deg, #eaf8fb 0%, #dff2f6 48%, #d5edf3 100%); color: #21394a; border: 1px solid rgba(151,224,242,.95); border-radius: 5px; box-shadow: 0 0 0 4px rgba(8,34,53,.35), 0 0 0 5px rgba(101,245,255,.26), 0 18px 45px rgba(0,0,0,.26), 0 0 26px rgba(99,220,255,.16); transition: width 1.1s cubic-bezier(.2,.8,.15,1), height 1.1s cubic-bezier(.2,.8,.15,1), bottom 1.1s cubic-bezier(.2,.8,.15,1), top 1.1s cubic-bezier(.2,.8,.15,1), border-radius .7s ease, opacity .5s ease, transform 1.1s cubic-bezier(.2,.8,.15,1); }
.paper::before, .paper::after { content: ""; position: absolute; pointer-events: none; border-radius: 2px; z-index: 1; }
.paper::before { inset: 10px; border: 1px solid rgba(44,137,164,.65); box-shadow: inset 0 0 0 3px rgba(255,255,255,.2); }
.paper::after { inset: 15px; border: 1px dashed rgba(235,125,184,.54); opacity: .8; }
.paper-inner { position: relative; z-index: 2; padding: clamp(30px, 4vw, 43px) clamp(30px, 5.3vw, 56px) 48px; width: 100%; height: 100%; min-height: 0; overflow: hidden; opacity: 0; transition: opacity .5s ease; background-image: radial-gradient(circle at 12% 15%, rgba(255,255,255,.32), transparent 24%), linear-gradient(transparent 97%, rgba(77,157,180,.07) 100%); background-size: auto, 100% 28px; scrollbar-width: thin; scrollbar-color: #df78b8 rgba(78,160,183,.16); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; user-select: text; }
.paper-date { text-align: right; color: #58859c; font: 10px var(--sans); letter-spacing: .2em; padding-bottom: 12px; border-bottom: 1px solid rgba(59,154,183,.28); margin-bottom: 8px; }
.paper:focus-visible { outline: 2px solid rgba(101,245,255,.85); outline-offset: 7px; }
body[data-stage="5"] .paper-inner { scroll-behavior: smooth; }
.paper-date span { font-size: 17px; color: #e879b7; margin-left: 6px; }
.paper h2 { font: 34px var(--script); color: #0c607e; margin: 2px 0 20px; font-weight: 400; }
.letter-line { color: #334e5c; font: clamp(14px, 1.08vw, 16px)/1.95 var(--serif); margin: 0 0 17px; opacity: 0; transform: translateY(8px); }
.letter-sign { padding: 15px 0 10px; text-align: right; font: 27px var(--script); color: #0c607e; opacity: 0; }
.letter-sign span { color: #e879b7; }
body[data-stage="5"] .paper-inner::-webkit-scrollbar { width: 10px; }
body[data-stage="5"] .paper-inner::-webkit-scrollbar-track { margin: 16px 5px; border-radius: 10px; background: rgba(79,160,184,.13); }
body[data-stage="5"] .paper-inner::-webkit-scrollbar-thumb { border: 2px solid rgba(224,244,248,.9); border-radius: 10px; background: linear-gradient(180deg, #72cfe0, #e879b7); }
body[data-stage="5"] .paper-inner::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #45b7d0, #d957a5); }
.envelope-flap { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 50% 67%); background: linear-gradient(145deg, #265b79, #173a58); border-top: 1px solid rgba(145,232,255,.6); transform-origin: 50% 0; transition: transform .65s ease, opacity .3s ease; }
.envelope-front { position: absolute; z-index: 3; inset: 0; border-radius: 7px; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(145deg, #12314e, #0a1c31); border: 1px solid rgba(117,218,255,.3); transition: opacity .65s ease, transform .8s ease; }
.envelope-seal { position: absolute; z-index: 5; left: 50%; top: 53%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #ffe8f4; background: radial-gradient(circle at 35% 30%, #ffb8df, #db5da9 70%); box-shadow: 0 0 20px rgba(255,143,207,.42); font-size: 19px; transition: opacity .35s ease, transform .4s ease; }

/* Khi thư mở, bỏ lớp transform/filter của phong thư để tờ giấy định vị theo toàn màn hình.
   Đây là điểm sửa lỗi chính: trước đây paper vẫn bị định vị trong khung envelope nhỏ và bị cắt khỏi viewport. */
body[data-stage="5"] .envelope-wrap,
body[data-stage="6"] .envelope-wrap { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; opacity: 1; animation: none; filter: none; }
body[data-stage="5"] .envelope-back,
body[data-stage="5"] .envelope-flap,
body[data-stage="5"] .envelope-front,
body[data-stage="5"] .envelope-seal { display: none; }
body[data-stage="5"] .paper { position: fixed; z-index: 20; left: 50%; top: 50%; bottom: auto; width: min(1180px, 88vw); height: min(83vh, 840px); transform: translate(-50%, -50%); border-radius: 6px; overflow: hidden; }
body[data-stage="5"] .paper-inner { opacity: 1; overflow-x: hidden; overflow-y: auto; transition-delay: .58s; scrollbar-gutter: stable; }
body[data-stage="5"] .letter-line { animation: letterTextIn .65s ease var(--reveal-delay, 0s) both; }
body[data-stage="5"] .letter-sign { animation: letterTextIn .7s ease var(--reveal-delay, 2.2s) both; }
body[data-stage="5"] .letter-hint { opacity: .88; }

/* Đóng thư: các mảng phong thư được đặt độc lập trên viewport nên không phụ thuộc khung cha. */
body[data-stage="6"] .envelope-back,
body[data-stage="6"] .envelope-flap,
body[data-stage="6"] .envelope-front { display: block; position: fixed; inset: auto; left: 50%; top: 55%; width: var(--envelope-width); height: var(--envelope-height); transform: translate(-50%, -50%); }
body[data-stage="6"] .envelope-back { z-index: 11; }
body[data-stage="6"] .paper { position: fixed; z-index: 12; left: 50%; top: 55%; bottom: auto; width: calc(var(--envelope-width) - 16px); height: calc(var(--envelope-height) - 14px); transform: translate(-50%, -50%); overflow: hidden; border-radius: 5px; }
body[data-stage="6"] .paper-inner { opacity: 0; overflow: hidden; transition-delay: 0s; }
body[data-stage="6"] .envelope-flap { z-index: 14; transform-origin: 50% 0; }
body[data-stage="6"] .envelope-front { z-index: 13; }
body[data-stage="6"] .envelope-seal { position: fixed; z-index: 15; left: 50%; top: 55%; opacity: 1; transform: translate(-50%,-50%) scale(1); }
body[data-stage="6"] .letter-intro { opacity: 0; }
body[data-stage="6"] .envelope-back,
body[data-stage="6"] .paper,
body[data-stage="6"] .envelope-flap,
body[data-stage="6"] .envelope-front,
body[data-stage="6"] .envelope-seal { animation: envelopeLeave 1.15s 1s ease forwards; }
.letter-hint { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; z-index: 25; opacity: 0; transition: opacity .35s ease; text-align: center; width: max-content; max-width: 92vw; pointer-events: none; }
body[data-stage="4"] .letter-hint { opacity: 1; }
body[data-stage="5"] .letter-hint { bottom: max(20px, env(safe-area-inset-bottom)); font-size: 9px; color: #b9c9d5; }
body[data-stage="6"] .letter-hint { opacity: 0; }

/* PHẦN 7 MỚI: MỘT LỜI NHẮN CHỈ DÀNH RIÊNG CHO EM */
body[data-stage="7"] #secretNote { opacity: 1; visibility: visible; pointer-events: auto; }
.secret-screen { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(11,48,72,.3), transparent 58%); }
.secret-content { position: relative; width: min(820px, 88vw); text-align: center; transform: translateY(-1.5vh); }
.secret-heart-orbit { position: relative; display: grid; place-items: center; width: clamp(90px, 12vw, 132px); height: clamp(90px, 12vw, 132px); margin: 0 auto 15px; opacity: 0; animation: fadeUp .9s .12s ease forwards; }
.secret-orbit-ring { position: absolute; inset: 8%; border: 1px solid rgba(101,245,255,.35); border-radius: 50%; box-shadow: 0 0 22px rgba(101,245,255,.07), inset 0 0 20px rgba(101,245,255,.04); }
.ring-a { animation: universeOrbit 13s linear infinite; }
.ring-b { inset: -5%; border-color: rgba(255,143,207,.27); border-style: dashed; animation: universeOrbit 20s linear infinite reverse; }
.secret-heart { color: var(--pink); font-size: clamp(38px, 5vw, 58px); line-height: 1; text-shadow: 0 0 18px rgba(255,143,207,.62), 0 0 40px rgba(101,245,255,.2); animation: heartBeat 2.5s 1.5s ease-in-out infinite; }
.secret-mini-star { position: absolute; color: var(--cyan-soft); font-size: 15px; text-shadow: 0 0 11px currentColor; animation: twinkle 2.5s ease-in-out infinite alternate; }
.mini-one { left: -3%; top: 26%; }
.mini-two { right: -4%; bottom: 20%; color: var(--pink); animation-delay: -.9s; }
.secret-prelude { margin: 13px 0 0; color: #9db7c8; font: 20px var(--script); opacity: 0; animation: fadeUp .9s .35s ease forwards; }
.secret-content h2 { margin-top: 8px; font-size: clamp(32px, 4.7vw, 56px); }
.secret-quote { max-width: 690px; margin: 22px auto 0; color: #dbeaf2; font: clamp(15px, 1.45vw, 19px)/1.95 var(--serif); letter-spacing: .01em; opacity: 0; animation: secretQuoteReveal 1.3s .75s ease forwards; }
.secret-signature { margin: 22px auto 0; color: var(--cyan-soft); font: clamp(19px, 2.3vw, 27px) var(--script); opacity: 0; animation: fadeUp 1s 1.15s ease forwards; }
.secret-signature span { color: var(--pink); margin-left: 4px; }
.secret-hint { opacity: 0; animation: hintFadeUp 1s 1.65s ease forwards, hintPulse 2.6s 2.6s ease-in-out infinite; }

/* PHẦN 8: KẾT THÚC */
body[data-stage="8"] #ending { opacity: 1; visibility: visible; pointer-events: auto; }
.ending-screen { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 47%, rgba(10,43,69,.25), transparent 62%); }
.ending-content { position: relative; text-align: center; width: min(90vw, 760px); transform: translateY(-2vh); }
.ending-content h2 { font: clamp(65px, 13vw, 130px)/1.1 var(--serif); font-weight: 400; letter-spacing: -.04em; margin: 0; color: #f4fbff; opacity: 0; animation: endingReveal 1.7s .1s cubic-bezier(.17,.72,.23,1) forwards; text-shadow: 0 0 34px rgba(101,245,255,.12); }
.ending-content h2 span { color: var(--pink); }
.ending-message { min-height: 24px; margin: 24px 0 0; font: 23px var(--script); color: var(--cyan-soft); opacity: 0; animation: fadeUp 1.1s 1s ease forwards; }
.ending-heart { margin-top: 23px; font-size: 28px; color: var(--pink); text-shadow: 0 0 20px rgba(255,143,207,.4); opacity: 0; animation: heartAppear 1.1s 1.4s ease forwards, heartBeat 2.2s 2.5s ease-in-out infinite; }
.ending-star { position: absolute; left: 14%; top: -4%; font-size: 25px; color: var(--pink); opacity: 0; animation: twinkle 3s 1s ease-in-out infinite alternate; }
.ending-hint { opacity: 0; animation: hintFadeUp 1s 2s ease forwards, hintPulse 2.8s 3s ease-in-out infinite; }

/* Responsive */
@media (max-width: 700px) {
  .universe-content { top: max(58px, 11vh); width: 92vw; }
  .universe-content h2 { font-size: clamp(28px, 7.2vw, 40px); }
  .universe-content p { max-width: 310px; font-size: 11px; }
  .universe-constellation { top: 61%; width: 122vw; height: min(75vh, 600px); }
  .universe-core-glow { top: 61%; width: 120vw; height: 68vh; filter: blur(22px); }
  .universe-halo-ring { top: 61%; width: 112vw; height: 53vh; }
  .halo-ring-b { width: 88vw; height: 62vh; }
  .universe-comet { top: 43%; }
  .comet-b { top: 36%; }
  .heart-a { left: 8%; top: 43%; }
  .heart-b { right: 8%; top: 60%; }
  .star-a { left: 13%; top: 74%; }
  .star-b { right: 13%; top: 38%; }
  .memories-heading { top: max(25px, 6vh); width: 94vw; }
  .memories-heading h2 { font-size: clamp(24px, 6.1vw, 36px); line-height: 1.22; }
  .memories-heading p { max-width: 320px; font-size: 10px; margin-top: 7px; }
  .memory-grid { top: 56%; width: 91vw; height: 59vh; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .memory-card { min-height: 0; padding: 7px 7px 9px; border-radius: 7px; }
  .memory-photo { padding: 4px; }
  .memory-photo img { aspect-ratio: 1.7 / 1; }
  .memory-photo span { right: 7px; bottom: 7px; width: 19px; height: 19px; font-size: 12px; }
  .memory-index { margin: 9px 0 5px; font-size: 6px; letter-spacing: .12em; }
  .memory-caption { font-size: clamp(9px, 2.6vw, 12px); line-height: 1.42; }
  .memories-hint { bottom: max(17px, env(safe-area-inset-bottom)); font-size: 8px; }
  .secret-content { width: 90vw; transform: translateY(-1vh); }
  .secret-heart-orbit { width: 86px; height: 86px; margin-bottom: 10px; }
  .secret-prelude { font-size: 18px; }
  .secret-content h2 { font-size: clamp(27px, 7vw, 39px); }
  .secret-quote { margin-top: 17px; font-size: 14px; line-height: 1.85; }
  .secret-signature { margin-top: 17px; font-size: 21px; line-height: 1.45; }

  .gallery-heading { top: max(22px, env(safe-area-inset-top)); }
  .gallery-heading h2 { font-size: clamp(28px, 7vw, 44px); }
  .gallery-heading p { font-size: 10px; margin-top: 7px; }
  .bouquet-wrap { width: min(61vw, 300px); height: min(46vh, 405px); top: 50%; transform: translate(-50%, -44%); }
  .photo-card { width: clamp(82px, 22vw, 108px); padding: 5px 5px 19px; }
  .photo-card figcaption { bottom: 4px; font-size: 9px; }
  .photo-card img { aspect-ratio: 4 / 4.35; }
  .photo-1 { left: 2.5%; top: 17%; --tilt: -7deg; }
  .photo-2 { right: 2.5%; top: 17%; --tilt: 7deg; }
  .photo-3 { left: 1%; top: 43%; --tilt: 5deg; }
  .photo-4 { right: 1%; top: 43%; --tilt: -6deg; }
  .photo-5 { left: 9%; bottom: 8%; --tilt: -6deg; }
  .photo-6 { right: 9%; bottom: 8%; --tilt: 6deg; }
  .gallery-hint { bottom: max(19px, env(safe-area-inset-bottom)); font-size: 8px; }
  :root { --envelope-width: min(86vw, 370px); --envelope-height: min(58vw, 252px); }
  .letter-intro { top: 12%; }
  body[data-stage="5"] .paper { width: 92vw; height: 75vh; }
  body[data-stage="5"] .paper-inner { padding: 28px 26px 42px; }
  .paper-inner { padding: 30px 28px 42px; }
  .paper h2 { font-size: 29px; }
  .letter-line { font-size: 14px; line-height: 1.85; margin-bottom: 15px; }
  body[data-stage="5"] .letter-hint { bottom: max(17px, env(safe-area-inset-bottom)); font-size: 8px; }
  .letter-sign { font-size: 22px; }
  .ending-message { font-size: 21px; }
}
@media (max-width: 380px) {
  .photo-card { width: 78px; padding: 4px 4px 18px; }
  .photo-3, .photo-4 { top: 46%; }
  .photo-5, .photo-6 { bottom: 9%; }
  .bouquet-wrap { width: 64vw; height: 40vh; }
  .gallery-heading h2 { font-size: 26px; }
  :root { --envelope-width: 86vw; --envelope-height: 58vw; }
  body[data-stage="5"] .paper { width: 93vw; height: 73vh; }
  body[data-stage="5"] .paper-inner { padding: 25px 20px 38px; }
  .paper-inner { padding: 27px 22px 38px; }
  .letter-line { font-size: 13px; line-height: 1.82; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Animations */
@keyframes universeArtReveal { from { opacity: 0; transform: translate(-50%, -47%) scale(.88); filter: blur(7px) brightness(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1); } }
@keyframes universeOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes universeCoreGlow { 0%,100% { opacity: .72; filter: blur(31px) brightness(.9); transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; filter: blur(24px) brightness(1.25); transform: translate(-50%, -50%) scale(1.06); } }
@keyframes haloOrbit { from { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.025); } to { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
@keyframes coreLightBreath { 0%,100% { opacity: .84; filter: drop-shadow(0 0 6px rgba(101,245,255,.28)); } 50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(101,245,255,.65)) drop-shadow(0 0 25px rgba(255,143,207,.16)); } }
@keyframes constellationSideShimmer { 0%,100% { opacity: .42; stroke-dashoffset: 0; } 50% { opacity: .95; stroke-dashoffset: -45; } }
@keyframes energyFlow { 0% { stroke-dashoffset: 720; opacity: 0; } 8% { opacity: .95; } 82% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cometFlight { 0%,8% { opacity: 0; transform: translate3d(-4vw,-3vh,0) rotate(-24deg); } 15% { opacity: .92; } 52% { opacity: .88; } 78%,100% { opacity: 0; transform: translate3d(145vw,36vh,0) rotate(-24deg); } }
@keyframes cometFlightReverse { 0%,8% { opacity: 0; transform: translate3d(145vw,-2vh,0) rotate(19deg); } 15% { opacity: .8; } 52% { opacity: .9; } 78%,100% { opacity: 0; transform: translate3d(-145vw,32vh,0) rotate(19deg); } }
@keyframes constellationDraw { to { stroke-dashoffset: 0; } }
@keyframes heartGlow { 0%,100% { filter: drop-shadow(0 0 8px rgba(101,245,255,.55)); } 50% { filter: drop-shadow(0 0 20px rgba(101,245,255,.95)) drop-shadow(0 0 30px rgba(255,143,207,.22)); } }
@keyframes starPulse { from { opacity: .48; transform: scale(.72); } to { opacity: 1; transform: scale(1.18); } }
@keyframes floatDecor { 0%,100% { translate: 0 0; rotate: -4deg; opacity: .45; } 50% { translate: 0 -14px; rotate: 5deg; opacity: .95; } }
@keyframes memoryCardEnter { from { opacity: 0; transform: translateY(24px) rotate(var(--memory-tilt, 0deg)) scale(.97); } to { opacity: 1; transform: translateY(0) rotate(var(--memory-tilt, 0deg)) scale(1); } }
@keyframes memoryCardFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes secretQuoteReveal { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lineGrow { from { width: 0; } to { width: min(320px, 50vw); } }
@keyframes titleBreathe { 0%,100% { text-shadow: 0 0 18px rgba(101,245,255,.04); } 50% { text-shadow: 0 0 35px rgba(101,245,255,.19), 0 0 60px rgba(255,143,207,.06); } }
@keyframes hintPulse { 0%,100% { opacity: .42; } 50% { opacity: .9; } }
@keyframes hintFadeUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes glowDrift { from { transform: translate3d(-2vw,-1vh,0) scale(.93); } to { transform: translate3d(3vw,3vh,0) scale(1.1); } }
@keyframes twinkle { from { opacity: .17; transform: scale(.75) rotate(-10deg); } to { opacity: .9; transform: scale(1.16) rotate(20deg); } }
@keyframes floatHeart { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(.8); opacity: 0; } 9% { opacity: .62; } 60% { opacity: .35; } 100% { transform: translate3d(var(--drift, 25px),-115vh,0) rotate(var(--spin, 35deg)) scale(1.15); opacity: 0; } }
@keyframes revealFromLeft { to { clip-path: inset(0 0 0 0); } }
@keyframes bouquetRise { from { opacity: 0; transform: translate(-50%, -30%) scale(.92); } to { opacity: 1; transform: translate(-50%, -43%) scale(1); } }
@keyframes bouquetSway { 0%,100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-7px); } }
@keyframes haloBreathe { 0%,100% { opacity: .07; transform: scale(.92); } 50% { opacity: .16; transform: scale(1.07); } }
@keyframes photoReveal { to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); } }
@keyframes photoFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -7px; } }
@keyframes galleryFallAway { 0% { clip-path: inset(0 0 0 0); transform: translateY(0); opacity: 1; } 100% { clip-path: inset(100% 0 0 0); transform: translateY(28px); opacity: .05; } }
@keyframes envelopeArrive { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.82) rotate(-2deg); } 70% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1.015) rotate(.4deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes letterTextIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes envelopeLeave { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 55% { opacity: .75; transform: translate(-50%, -45%) scale(.94); } 100% { opacity: 0; transform: translate(-50%, -37%) scale(.82); } }
@keyframes endingReveal { 0% { opacity: 0; letter-spacing: .08em; filter: blur(8px); transform: translateY(12px); } 100% { opacity: 1; letter-spacing: -.04em; filter: blur(0); transform: translateY(0); } }
@keyframes heartAppear { from { opacity: 0; transform: scale(.6); } to { opacity: .95; transform: scale(1); } }
@keyframes heartBeat { 0%,100% { transform: scale(1); } 8% { transform: scale(1.16); } 16% { transform: scale(1); } 24% { transform: scale(1.1); } 32% { transform: scale(1); } }