* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 247, 180, 0.95) 0, transparent 22%),
    radial-gradient(circle at 88% 12%, rgba(255, 150, 230, 0.92) 0, transparent 23%),
    radial-gradient(circle at 14% 88%, rgba(112, 235, 255, 0.90) 0, transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(255, 200, 250, 0.90) 0, transparent 27%),
    linear-gradient(135deg, #ff4fc3 0%, #925cff 48%, #25d9ff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.70) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 2px);
  background-size: 30px 30px, 54px 54px, 86px 86px;
  animation: glitterMove 18s linear infinite;
}

body::after {
  content: "✦ ✧ ★ ♡ ✨ ✦ ✧ ★ ♡ ✨ ✦ ✧ ★ ♡ ✨";
  position: fixed;
  top: 5%;
  left: -30%;
  z-index: 0;
  width: 180%;
  pointer-events: none;
  font-size: 30px;
  letter-spacing: 28px;
  color: rgba(255,255,255,0.42);
  text-shadow: 0 0 12px #ffffff, 0 0 24px #ff5bdd;
  animation: sparkleSlide 22s linear infinite;
}

@keyframes glitterMove {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 180px 150px, -220px 210px, 260px -190px; }
}

@keyframes sparkleSlide {
  from { transform: translateX(0); }
  to { transform: translateX(260px); }
}

.birthday-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: 100%;
  padding: 42px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.birthday-shell {
  width: min(1240px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 28px;
  border-radius: 56px;
  background: rgba(255,255,255,0.14);
  border: 4px solid rgba(255,255,255,0.62);
  box-shadow:
    0 42px 120px rgba(75, 0, 122, 0.46),
    inset 0 0 48px rgba(255,255,255,0.16),
    0 0 40px rgba(255, 105, 225, 0.40);
  backdrop-filter: blur(10px);
}

.hero-header,
.footer-banner {
  text-align: center;
}

.emoji-row,
.footer-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 30px;
  text-shadow: 0 0 10px #ffffff, 0 0 22px #ff55df;
}

.hero-header {
  margin-bottom: 22px;
}

.footer-banner {
  margin-top: 22px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
}

.birthday-frame {
  width: 100%;
  padding: 20px;
  border-radius: 42px;
  background: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 0 32px rgba(255,255,255,0.16),
    0 0 26px rgba(255,255,255,0.18);
}

.photo-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 138px);
  justify-content: center;
  align-items: center;
  gap: 26px;
}

.photo-strip-top {
  padding: 10px 0 24px;
}

.photo-strip-bottom {
  padding: 24px 0 10px;
}

.middle-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 150px minmax(0, 720px) 150px;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.side-photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.polaroid {
  width: 138px;
  padding: 8px 8px 18px;
  border-radius: 14px;
  background: #ffffff;
  color: #7d277c;
  box-shadow:
    0 18px 36px rgba(0,0,0,0.30),
    0 0 22px rgba(255,255,255,0.62);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.polaroid:hover {
  transform: scale(1.06) rotate(0deg);
  box-shadow:
    0 26px 50px rgba(0,0,0,0.38),
    0 0 32px rgba(255,255,255,0.90);
}

.polaroid img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffb7ef, #b680ff);
}

.polaroid figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.tilt-1 { transform: rotate(-7deg); }
.tilt-2 { transform: rotate(7deg); }
.tilt-3 { transform: rotate(-4deg); }
.tilt-4 { transform: rotate(4deg); }

.main-card {
  position: relative;
  width: 100%;
  padding: 36px 34px;
  border-radius: 42px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.38) 0, transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,0.28) 0, transparent 18%),
    linear-gradient(180deg, rgba(255, 229, 252, 0.96), rgba(200, 120, 255, 0.93));
  border: 4px solid rgba(255,255,255,0.86);
  box-shadow:
    0 30px 90px rgba(60, 0, 110, 0.45),
    inset 0 0 24px rgba(255,255,255,0.34),
    0 0 30px rgba(255,255,255,0.32);
}

.badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff56f, #ff74dd, #78f8ff);
  color: #64107f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 8px 22px rgba(120,0,120,0.18), 0 0 20px rgba(255,255,255,0.58);
}

h1 {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.98;
  color: #ffffff;
  text-shadow:
    0 2px 0 #ff78df,
    0 0 8px #ffffff,
    0 0 18px #ff3bdd,
    0 0 32px #78f8ff,
    0 8px 22px rgba(80,0,100,0.42);
}

.subtitle {
  margin: 15px auto 0;
  max-width: 620px;
  font-size: clamp(17px, 2.4vw, 24px);
  font-weight: 900;
  line-height: 1.25;
  color: #fff8b8;
  text-shadow: 0 2px 8px rgba(93,0,110,0.45), 0 0 12px #ff4add;
}

.video-box {
  position: relative;
  margin: 34px auto 22px;
  padding: 13px;
  border-radius: 30px;
  background: linear-gradient(135deg, #fff25e, #ff68db, #69f8ff);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.28),
    0 0 26px rgba(255,255,255,0.50);
}

.video-pill {
  position: absolute;
  top: -18px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #cf229f;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}

.video-box video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 21px;
  background: #111111;
  object-fit: contain;
}

.intro {
  max-width: 620px;
  margin: 20px auto;
  font-size: 18px;
  line-height: 1.62;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(90,0,110,0.42), 0 0 8px rgba(255,255,255,0.34);
}

.download-buttons {
  margin: 26px 0 30px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.download-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  text-decoration: none;
  color: #68117f;
  background: #ffffff;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(80,0,100,0.23), 0 0 18px rgba(255,255,255,0.62);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-buttons a:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 38px rgba(80,0,100,0.30), 0 0 26px rgba(255,255,255,0.85);
}

.gallery-section h2 {
  margin-bottom: 16px;
  font-size: 25px;
  color: #fff8b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(95,0,115,0.45), 0 0 13px #ff4add;
}

.mini-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.mini-gallery a {
  display: block;
  text-decoration: none;
}

.mini-gallery img {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 19px;
  border: 3px solid #ffffff;
  background: linear-gradient(135deg, #ffb7ef, #b680ff);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), 0 0 14px rgba(255,255,255,0.48);
  transition: transform 0.22s ease;
}

.mini-gallery img:hover {
  transform: scale(1.04);
}

.final-message {
  margin-top: 25px;
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff, 0 0 20px #ff4add, 0 2px 8px rgba(95,0,115,0.38);
}

@media (max-width: 1120px) {
  .birthday-shell {
    width: min(920px, calc(100vw - 28px));
  }

  .middle-layout {
    grid-template-columns: 112px minmax(0, 680px) 112px;
    gap: 16px;
  }

  .photo-strip {
    grid-template-columns: repeat(4, 112px);
    gap: 18px;
  }

  .polaroid {
    width: 112px;
    padding: 7px 7px 15px;
  }

  .polaroid img {
    height: 88px;
  }

  .polaroid figcaption {
    font-size: 11px;
  }
}

@media (max-width: 860px) {
  .birthday-page {
    padding: 24px 10px;
    align-items: flex-start;
  }

  .birthday-shell {
    width: min(720px, calc(100vw - 20px));
    padding: 14px;
    border-radius: 34px;
  }

  .emoji-row,
  .footer-banner {
    gap: 10px;
    font-size: 22px;
  }

  .birthday-frame {
    padding: 12px;
    border-radius: 28px;
  }

  .middle-layout {
    display: block;
  }

  .side-photos {
    display: none;
  }

  .photo-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .photo-strip-top {
    padding: 8px 0 14px;
  }

  .photo-strip-bottom {
    padding: 14px 0 8px;
  }

  .polaroid {
    width: 100%;
    padding: 5px 5px 12px;
    border-radius: 10px;
  }

  .polaroid img {
    height: 72px;
    border-radius: 7px;
  }

  .polaroid figcaption {
    font-size: 9px;
    margin-top: 5px;
  }

  .main-card {
    padding: 25px 16px;
    border-radius: 30px;
  }

  h1 {
    font-size: clamp(36px, 12vw, 56px);
  }

  .subtitle {
    font-size: 17px;
  }

  .intro {
    font-size: 16px;
  }

  .download-buttons a {
    width: 100%;
    min-width: auto;
  }

  .mini-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }

  .mini-gallery img {
    height: 105px;
  }

  .final-message {
    font-size: 18px;
  }
}

@media (max-width: 460px) {
  .birthday-page {
    padding: 16px 6px;
  }

  .birthday-shell {
    width: calc(100vw - 12px);
    padding: 8px;
    border-radius: 26px;
  }

  .birthday-frame {
    padding: 8px;
    border-radius: 22px;
  }

  .emoji-row,
  .footer-banner {
    font-size: 18px;
  }

  .photo-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-strip .polaroid:nth-child(n+3) {
    display: none;
  }

  .polaroid img {
    height: 90px;
  }

  .main-card {
    padding: 22px 13px;
  }

  .badge {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .video-box {
    padding: 9px;
  }

  .mini-gallery img {
    height: 96px;
  }
}