:root {
  --deep: #061338;
  --royal: #143d9a;
  --sky: #4ec9ff;
  --gold: #ffd447;
  --orange: #ff8a3d;
  --red: #ef3e55;
  --white: #fffaf1;
  --ink: #10204f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: "Segoe UI", Tahoma, Arial, system-ui, sans-serif;
  background: radial-gradient(circle at 72% 18%, #2568d8 0 10%, transparent 28%),
    linear-gradient(145deg, #030b28 0%, #123788 42%, #35aee8 100%);
}

button, a { font: inherit; }
.scene-canvas, .sky { position: fixed; inset: 0; pointer-events: none; }
.scene-canvas { z-index: 3; }
#fireworksCanvas { z-index: 1; opacity: .35; }
.sky { z-index: 0; overflow: hidden; }
main { position: relative; z-index: 2; }
.mode { min-height: 100vh; }
.is-hidden { display: none !important; }
.loading-screen { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 14px; background: linear-gradient(145deg, #030b28, #123788 52%, #35aee8); color: #fffaf1; transition: opacity .45s ease, visibility .45s ease; }
.loading-screen.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-screen p { margin: 0; color: #fff3bd; font-weight: 900; font-size: 1.2rem; }
.loader-star { width: 54px; height: 54px; background: var(--gold); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: loaderPulse 1.1s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(255,212,71,.85)); }
@keyframes loaderPulse { 50% { transform: scale(1.2) rotate(18deg); opacity: .72; } }

.moon {
  position: absolute; top: 8vh; right: 9vw; width: 92px; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #ffe9a6 60%, #ffd447 100%);
  box-shadow: 0 0 55px rgba(255, 230, 126, .75); pointer-events: auto; cursor: pointer;
}
.moon::before, .moon::after { content: ""; position: absolute; background: #513d68; border-radius: 50%; top: 32px; width: 8px; height: 8px; }
.moon::before { left: 28px; } .moon::after { right: 28px; }
.moon.smile { transform: scale(1.08) rotate(-5deg); }
.moon.smile::after { box-shadow: -22px 18px 0 -2px transparent; }
.moon.smile::before { box-shadow: 22px 26px 0 -2px #513d68; }

.cloud { position: absolute; width: 240px; height: 70px; border-radius: 80px; background: rgba(255,255,255,.32); filter: blur(.2px); animation: drift 34s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 90px; height: 90px; left: 34px; top: -38px; }
.cloud::after { width: 118px; height: 118px; right: 28px; top: -58px; }
.cloud-a { top: 21vh; left: -250px; } .cloud-b { top: 48vh; left: -320px; animation-duration: 48s; } .cloud-c { top: 71vh; left: -280px; animation-duration: 58s; }
@keyframes drift { to { transform: translateX(calc(100vw + 360px)); } }

.decor { position: absolute; opacity: .2; filter: drop-shadow(0 14px 16px rgba(0,0,0,.2)); }
.decor-rocket { left: 6vw; top: 13vh; width: 44px; height: 125px; background: linear-gradient(#fff, #39b8ff); border-radius: 50% 50% 18px 18px; transform: rotate(35deg); }
.decor-dino { left: 5vw; bottom: 12vh; width: 150px; height: 75px; border-radius: 70% 40% 35% 45%; background: #ffd447; }
.decor-robot { right: 7vw; bottom: 10vh; width: 100px; height: 115px; border-radius: 18px; background: #fff; }

.countdown-mode { display: grid; place-items: center; padding: 34px 18px; text-align: center; }
.countdown-shell { width: min(920px, 100%); }
.eyebrow { color: #ffeb94; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; font-size: .78rem; }
h1, h2 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 7vw, 6.8rem); text-shadow: 0 8px 30px rgba(0,0,0,.32); }
.progress-wrap { position: relative; width: min(250px, 56vw); margin: 0 auto 18px; }
.progress-ring { width: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: transparent; stroke: rgba(255,255,255,.22); stroke-width: 12; }
#progressCircle { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .7s ease; }
.big-five { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7rem; font-weight: 1000; color: var(--gold); text-shadow: 0 0 28px rgba(255,212,71,.8); }
.timer-grid { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 14px; margin: 28px auto; max-width: 760px; }
.time-card { min-height: 124px; border: 1px solid rgba(255,255,255,.28); background: rgba(4,17,58,.54); backdrop-filter: blur(16px); border-radius: 8px; display: grid; place-items: center; padding: 15px 8px; box-shadow: inset 0 0 35px rgba(78,201,255,.18); }
.time-card strong { display: block; font-size: clamp(2rem, 7vw, 4.6rem); line-height: 1; color: #fff; }
.time-card span { color: #ffefac; font-weight: 800; }
.time-card.tick strong { animation: flip .55s ease; }
@keyframes flip { 50% { transform: rotateX(72deg) scale(.96); } }
.magic-line { font-size: clamp(1.1rem, 3vw, 1.65rem); color: #fff3bd; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-5px); opacity: .72; } }

.floating { position: absolute; bottom: -90px; border: 0; pointer-events: auto; cursor: pointer; animation: rise linear infinite; transform: translateZ(0); }
.balloon-float { width: 38px; height: 50px; border-radius: 50% 50% 46% 46%; background: hsl(var(--hue), 88%, 62%); box-shadow: inset -9px -8px rgba(0,0,0,.15); }
.balloon-float::after { content: ""; position: absolute; left: 18px; top: 49px; width: 1px; height: 32px; background: rgba(255,255,255,.6); }
.gift-float { width: 42px; height: 42px; border-radius: 6px; background: linear-gradient(90deg, var(--red) 42%, var(--gold) 42% 58%, var(--red) 58%); }
.popped { animation: pop .25s ease forwards; }
@keyframes rise { to { transform: translateY(-120vh) rotate(12deg); } }
@keyframes pop { to { transform: scale(0); opacity: 0; } }

.touch-star { position: fixed; z-index: 4; width: 18px; height: 18px; border: 0; background: #fff2a6; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); pointer-events: auto; cursor: pointer; opacity: .8; }
.touch-star.twinkled { animation: starPop .7s ease; }
@keyframes starPop { 50% { transform: scale(2.2) rotate(36deg); filter: drop-shadow(0 0 18px #fff); } }

.reveal-mode { display: grid; place-items: center; background: rgba(0,0,0,.55); }
.reveal-card p { font-size: clamp(3rem, 11vw, 8rem); font-weight: 1000; text-shadow: 0 0 40px var(--gold); animation: revealText 4s ease both; }
.heartbeat { animation: heartbeat 1.2s ease-in-out 2; }
@keyframes revealText { 0%, 30% { opacity: 0; transform: scale(.82); } 55%, 100% { opacity: 1; transform: scale(1); } }
@keyframes heartbeat { 50% { filter: brightness(.72); } }

.celebration-mode { padding-bottom: 0; }
.topbar { position: sticky; top: 0; z-index: 6; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 12px; background: rgba(3,11,40,.48); backdrop-filter: blur(14px); }
.icon-button, .nav-pill, .primary-button, .secondary-button { border: 1px solid rgba(255,255,255,.28); color: var(--white); text-decoration: none; border-radius: 8px; background: rgba(255,255,255,.13); padding: 10px 14px; cursor: pointer; }
.icon-button { width: 44px; height: 44px; padding: 0; font-weight: 900; }
.primary-button { background: linear-gradient(135deg, var(--gold), var(--orange)); color: #321600; font-weight: 900; border: 0; }
.secondary-button { background: #ffffff1f; }
.hero { min-height: 92vh; display: grid; place-items: center; align-content: center; text-align: center; padding: 80px 18px 40px; }
.hero h2 { display: grid; gap: 0; font-size: clamp(2.4rem, 10vw, 8rem); line-height: .9; text-transform: uppercase; text-shadow: 0 12px 36px rgba(0,0,0,.35); }
.hero h2 b { color: var(--gold); font-size: 1.45em; filter: drop-shadow(0 0 22px rgba(255,212,71,.7)); }
.hero h2 strong { color: white; text-shadow: 0 0 18px #4ec9ff, 0 0 42px #ffd447; }
.hero-copy { max-width: 650px; font-size: 1.2rem; }

.journey-section, .memories-section, .cake-section, .wishes-section, .gifts-section, .game-section, .ending { padding: 76px 18px; text-align: center; }
section > h2, footer h2 { font-size: clamp(2rem, 5vw, 4.4rem); margin-bottom: 28px; }
.timeline { max-width: 1000px; margin: auto; position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: linear-gradient(var(--gold), var(--sky)); border-radius: 5px; z-index: 0; }
.chapter { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; margin: 42px 0; text-align: right; }
.chapter:nth-child(even) .slideshow { order: 2; }
.milestone { justify-self: end; background: var(--gold); color: #342000; border-radius: 8px; padding: 10px 16px; font-weight: 900; }
.slideshow { position: relative; height: 320px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(78,201,255,.16), rgba(3,11,40,.72)); display: grid; place-items: center; box-shadow: 0 20px 70px rgba(0,0,0,.22); }
.slideshow img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); max-width: none; max-height: none; object-fit: contain; opacity: 0; transform: scale(.96); transform-origin: center; transition: opacity 1.1s ease; will-change: transform, opacity; }
.slideshow img.active { opacity: 1; animation: photoDance 8s ease-in-out infinite alternate; }
.slideshow img:nth-child(2n).active { animation-name: photoDanceAlt; animation-duration: 9s; }
.slideshow img:nth-child(3n).active { animation-duration: 10s; }
@keyframes photoDance {
  0% { transform: translate3d(-7px, 4px, 0) rotate(-1.2deg) scale(.96); }
  45% { transform: translate3d(6px, -5px, 0) rotate(1deg) scale(.965); }
  100% { transform: translate3d(4px, 6px, 0) rotate(-.5deg) scale(.96); }
}
@keyframes photoDanceAlt {
  0% { transform: translate3d(6px, -4px, 0) rotate(.9deg) scale(.96); }
  50% { transform: translate3d(-5px, 5px, 0) rotate(-1deg) scale(.965); }
  100% { transform: translate3d(-7px, -3px, 0) rotate(.45deg) scale(.96); }
}
.photo-placeholder { color: #fff3bd; font-weight: 800; }
.chapter h3 { font-size: 2rem; }

.memory-grid, .wish-grid, .gift-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; max-width: 1050px; margin: auto; }
.memory-card, .wish-card, .gift { min-height: 170px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.14); color: var(--white); padding: 20px; backdrop-filter: blur(12px); }
.memory-card h3, .wish-card h3 { color: var(--gold); }
.gift { position: relative; cursor: pointer; overflow: hidden; }
.gift span { display: block; width: 72px; height: 62px; margin: 0 auto 12px; border-radius: 6px; background: linear-gradient(90deg, var(--red) 42%, var(--gold) 42% 58%, var(--red) 58%); transition: transform .45s ease; }
.gift em { display: block; opacity: 0; transform: translateY(18px); transition: .45s ease; font-style: normal; }
.gift.open span { transform: translateY(-130%) rotate(18deg); }
.gift.open em { opacity: 1; transform: none; }

.cake { width: min(420px, 90vw); margin: auto; padding-top: 76px; position: relative; }
.candles { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; }
.candles i { width: 14px; height: 60px; border-radius: 5px; background: repeating-linear-gradient(45deg, #fff 0 8px, #3bb8ff 8px 16px); position: relative; }
.candles i::before { content: ""; position: absolute; left: 1px; top: -20px; width: 12px; height: 20px; border-radius: 50% 50% 45% 45%; background: #ffcf33; box-shadow: 0 0 20px #ffcf33; animation: flame .6s ease-in-out infinite alternate; }
.cake.wished .candles i::before { opacity: 0; }
.cake-top, .cake-body { height: 72px; border-radius: 18px 18px 8px 8px; background: linear-gradient(90deg, #38bdf8, #fff, #ffd447); }
.cake-body { height: 125px; display: grid; place-items: center; font-size: 3rem; font-weight: 1000; color: var(--ink); background: linear-gradient(135deg, #ffd447, #ff8a3d); }
.cake-plate { height: 22px; border-radius: 50%; background: rgba(255,255,255,.75); }
@keyframes flame { to { transform: scale(1.18) rotate(4deg); } }
.subtle { color: #d9edff; }

.game-board { height: 390px; max-width: 900px; margin: auto; position: relative; overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,.28); background: rgba(1, 10, 41, .38); }
#gameStatus { position: absolute; left: 16px; top: 10px; z-index: 1; color: #fff3bd; font-weight: 900; }
.game-balloon { position: absolute; width: 44px; height: 58px; border: 0; border-radius: 50% 50% 45% 45%; cursor: pointer; box-shadow: inset -9px -10px rgba(0,0,0,.13); animation: wiggle 2.2s ease-in-out infinite; }
.game-balloon.collected { transform: scale(0) !important; opacity: 0; pointer-events: none; transition: .28s ease; }
.game-prize { position: absolute; inset: auto 50% 26px auto; z-index: 2; width: min(470px, calc(100% - 32px)); transform: translate(50%, 28px) scale(.92); border: 1px solid rgba(255,255,255,.42); border-radius: 8px; padding: 18px 20px; background: linear-gradient(135deg, rgba(255,212,71,.94), rgba(255,138,61,.94)); color: #321600; box-shadow: 0 22px 55px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: .45s ease; }
.game-prize.show { opacity: 1; transform: translate(50%, 0) scale(1); }
.game-prize strong { display: block; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.game-prize span { display: block; margin-top: 4px; font-weight: 800; }
.game-reel { position: absolute; inset: 14px; z-index: 4; display: grid; place-items: center; align-content: center; gap: 10px; padding: 42px 14px 16px; border-radius: 8px; background: rgba(3,11,40,.78); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transform: scale(.94); transition: .35s ease; }
.game-reel.show { opacity: 1; pointer-events: auto; transform: scale(1); }
.game-reel video { width: min(100%, 260px); max-height: 100%; aspect-ratio: 9 / 16; border-radius: 8px; object-fit: contain; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.42); }
.reel-fallback { display: none; margin: 0; max-width: 430px; color: #fff3bd; font-weight: 900; }
.game-reel.has-error .reel-fallback { display: block; }
.reel-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.32); border-radius: 8px; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.game-sparkle { position: absolute; z-index: 1; width: 18px; height: 18px; background: #fff7bd; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: winSparkle 1.4s ease-out forwards; pointer-events: none; }
@keyframes wiggle { 50% { margin-top: -12px; } }
@keyframes winSparkle {
  0% { transform: translateY(20px) scale(.25) rotate(0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-70px) scale(1.5) rotate(80deg); opacity: 0; }
}

.ending { min-height: 55vh; display: grid; place-items: center; align-content: center; background: linear-gradient(transparent, rgba(1, 7, 30, .86)); }

@media (max-width: 720px) {
  .timer-grid { grid-template-columns: repeat(2, 1fr); }
  .time-card { min-height: 104px; }
  .timeline::before { left: 16px; }
  .chapter, .chapter:nth-child(even) .slideshow { grid-template-columns: 1fr; text-align: center; order: initial; }
  .milestone { justify-self: center; }
  .slideshow { height: 245px; }
  .topbar { overflow-x: auto; justify-content: flex-start; }
  .game-reel { position: fixed; inset: 0; z-index: 30; border-radius: 0; padding: 56px 12px 18px; }
  .game-reel video { width: min(100vw, 430px); max-height: calc(100vh - 90px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}