/* ============================
   RESET & BASE
   ============================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --rose-deep:    #9b1b4b;
  --rose-mid:     #d63872;
  --rose-light:   #f472b6;
  --pink-pale:    #fce4ec;
  --gold:         #f5c842;
  --gold-light:   #ffeaa7;
  --cream:        #fff8f0;
  --text-dark:    #2d0a1f;
  --text-mid:     #6b1f3a;
  --glass-bg:     rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 200, 220, 0.35);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Lora', serif;
  background: radial-gradient(ellipse at top left, #3d0028 0%, #1a0011 40%, #0d0008 100%);
  overflow-x: hidden;
  position: relative;
}

/* Hide main content until splash is dismissed */
body.splash-active .container,
body.splash-active .music-btn,
body.splash-active .memory-btn,
body.splash-active .nous-btn,
body.splash-active .particles,
body.splash-active .floating-hearts,
body.splash-active #starsCanvas {
  opacity: 0;
  pointer-events: none;
}

body .container,
body .music-btn,
body .memory-btn,
body .nous-btn {
  transition: opacity 1s ease 0.3s;
}

/* ============================
   SPLASH SCREEN
   ============================ */
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(ellipse at center, #2a0020 0%, #120010 50%, #080006 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.splash-overlay.hidden {
  opacity: 0;
  transform: scale(1.1);
  pointer-events: none;
}

.splash-content {
  text-align: center;
  animation: splashFadeIn 1.2s ease forwards;
}

@keyframes splashFadeIn {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.splash-emoji {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: splashPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(214, 56, 114, 0.6));
}

@keyframes splashPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.splash-subtitle {
  font-family: 'Dancing Script', cursive;
  font-size: 1.6rem;
  color: #ffb3d1;
  margin-bottom: 2.5rem;
  text-shadow: 0 0 20px rgba(214, 56, 114, 0.5);
  opacity: 0;
  animation: splashTextIn 1s ease 0.5s forwards;
}

@keyframes splashTextIn {
  0%   { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

.splash-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2.5rem;
  border: 2px solid rgba(214, 56, 114, 0.5);
  border-radius: 60px;
  background: linear-gradient(135deg, rgba(214, 56, 114, 0.3), rgba(155, 27, 75, 0.4));
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 0 30px rgba(214, 56, 114, 0.4),
    0 0 60px rgba(214, 56, 114, 0.15),
    inset 0 0 20px rgba(255, 180, 210, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  opacity: 0;
  animation: splashBtnIn 0.8s ease 1s forwards;
}

@keyframes splashBtnIn {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.splash-btn:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow:
    0 0 50px rgba(214, 56, 114, 0.6),
    0 0 100px rgba(214, 56, 114, 0.2),
    inset 0 0 30px rgba(255, 180, 210, 0.15);
}

.splash-btn:active {
  transform: scale(0.96);
}

.splash-btn-icon {
  font-size: 1.6rem;
  animation: splashCrownFloat 3s ease-in-out infinite;
}

@keyframes splashCrownFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(-5deg); }
  75%      { transform: translateY(-2px) rotate(5deg); }
}

.splash-hint {
  margin-top: 1.8rem;
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: rgba(255, 180, 210, 0.4);
  font-style: italic;
  opacity: 0;
  animation: splashTextIn 0.8s ease 1.5s forwards;
}

/* ============================
   CANVAS STARS
   ============================ */
#starsCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================
   PARTICLES
   ============================ */
.particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleFall linear infinite;
  opacity: 0;
}

@keyframes particleFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* ============================
   FLOATING HEARTS
   ============================ */
.floating-hearts {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fheart {
  position: absolute;
  font-size: clamp(14px, 2vw, 24px);
  animation: floatHeart ease-in-out infinite;
  opacity: 0;
}

@keyframes floatHeart {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}

/* ============================
   CONTAINER
   ============================ */
.container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem 1.5rem 4rem;
  min-height: 100vh;
}

/* ============================
   HEADER
   ============================ */
.header {
  text-align: center;
  animation: fadeSlideDown 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.crown-emoji {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  display: block;
  animation: crownFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(245, 200, 66, 0.8));
  margin-bottom: 0.5rem;
}

@keyframes crownFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-12px) rotate(3deg); }
}

.title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.line {
  display: block;
  font-family: 'Dancing Script', cursive;
  background: linear-gradient(135deg, var(--gold) 0%, #fff5d0 40%, var(--gold) 70%, var(--rose-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(245, 200, 66, 0.6));
  animation: shimmer 4s linear infinite;
  background-size: 200% 100%;
}

.line-1 { font-size: clamp(2.2rem, 7vw, 5rem); }
.line-2 { font-size: clamp(2.8rem, 9vw, 6.5rem); font-weight: 700; }
.line-3 { font-size: clamp(2.2rem, 7vw, 5rem); color: var(--rose-light); }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Birthday icons row */
.birthday-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.icon {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  display: inline-block;
  animation: iconBounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 150, 180, 0.6));
}

.icon-1 { animation-delay: 0s; }
.icon-2 { animation-delay: 0.2s; }
.icon-3 { animation-delay: 0.4s; }
.icon-4 { animation-delay: 0.6s; }
.icon-5 { animation-delay: 0.8s; }

@keyframes iconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-10px) scale(1.15); }
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.divider-line {
  display: block;
  width: min(120px, 25vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose-mid), transparent);
}

.divider-heart {
  font-size: 1.4rem;
  animation: heartbeat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(214, 56, 114, 0.9));
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.3); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.2); }
  70%       { transform: scale(1); }
}

/* ============================
   MESSAGE CARD
   ============================ */
.message-card {
  position: relative;
  max-width: 780px;
  width: 100%;
  border-radius: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    0 0 0 1px rgba(255, 150, 180, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(155, 27, 75, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: fadeSlideUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  overflow: hidden;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(60px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated glow border */
.card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  background: conic-gradient(
    from var(--angle, 0deg),
    var(--rose-deep),
    var(--rose-mid),
    var(--gold),
    var(--rose-light),
    var(--rose-deep)
  );
  z-index: -1;
  animation: rotateBorder 5s linear infinite;
  opacity: 0.7;
  filter: blur(4px);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateBorder {
  to { --angle: 360deg; }
}

.card-content {
  padding: clamp(1.8rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* Message paragraphs */
.message-line {
  font-family: 'Lora', serif;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.85;
  color: rgba(255, 230, 240, 0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  position: relative;
  padding-left: 1.2rem;
  border-left: 2px solid transparent;
}

.message-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Intro & outro special styling */
.message-line.intro {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  font-weight: 600;
  color: var(--gold-light);
  text-align: center;
  padding-left: 0;
  border-left: none;
  filter: drop-shadow(0 0 10px rgba(245, 200, 66, 0.5));
}

.message-line.outro {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 600;
  color: #ffc2d9;
  text-align: center;
  padding-left: 0;
  border-left: none;
  font-style: italic;
  filter: drop-shadow(0 0 8px rgba(214, 56, 114, 0.5));
}

.message-line:not(.intro):not(.outro):hover {
  border-left-color: var(--rose-mid);
  color: #fff;
  transition: border-color 0.3s, color 0.3s;
}

/* ============================
   FOOTER
   ============================ */
.footer {
  text-align: center;
  animation: fadeSlideUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.balloon-row {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
}

.balloon {
  font-size: clamp(1.8rem, 5vw, 3rem);
  display: inline-block;
  animation: balloonFloat ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.b1 { animation-duration: 3.2s; animation-delay: 0s; }
.b2 { animation-duration: 2.8s; animation-delay: 0.3s; }
.b3 { animation-duration: 3.5s; animation-delay: 0.6s; }
.b4 { animation-duration: 2.5s; animation-delay: 0.1s; }
.b5 { animation-duration: 3.0s; animation-delay: 0.8s; }

@keyframes balloonFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-18px) rotate(4deg); }
}

.footer-text {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  color: var(--rose-light);
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.7));
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.03); }
}

/* ============================
   CONFETTI BURST (on load)
   ============================ */
.confetti {
  position: fixed;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall ease-in forwards;
  z-index: 100;
  pointer-events: none;
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) scale(0.5); opacity: 0; }
}

/* ============================
   MUSIC BUTTON
   ============================ */
.music-btn {
  position: fixed;
  bottom: 1.8rem;      /* lowest button */
  right: 1.8rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(255, 150, 200, 0.35);
  border-radius: 50px;
  background: rgba(30, 5, 20, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffc2d9;
  font-family: 'Dancing Script', cursive;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(214, 56, 114, 0.35), 0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  user-select: none;
}

.music-btn:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 0 36px rgba(214, 56, 114, 0.55), 0 6px 20px rgba(0,0,0,0.5);
  background: rgba(60, 10, 35, 0.85);
}

.music-btn:active { transform: scale(0.97); }

.music-icon {
  font-size: 1.2rem;
  animation: musicNoteWiggle 1.8s ease-in-out infinite;
}

@keyframes musicNoteWiggle {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%       { transform: rotate(8deg) scale(1.15); }
}

.music-label {
  letter-spacing: 0.03em;
}

/* Equalizer bars */
.music-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}

.music-bars.active { opacity: 1; }

.bar {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--rose-mid), var(--gold));
  animation: barDance 0.8s ease-in-out infinite;
  transform-origin: bottom;
}

.bar:nth-child(1) { height: 8px;  animation-delay: 0s;    animation-duration: 0.7s; }
.bar:nth-child(2) { height: 14px; animation-delay: 0.15s; animation-duration: 0.9s; }
.bar:nth-child(3) { height: 10px; animation-delay: 0.3s;  animation-duration: 0.65s; }
.bar:nth-child(4) { height: 6px;  animation-delay: 0.1s;  animation-duration: 0.8s; }

@keyframes barDance {
  0%, 100% { transform: scaleY(0.3); }
  50%       { transform: scaleY(1); }
}

/* ============================
   CLICK LIGHT BURST EFFECT
   ============================ */

/* Central glowing orb */
.click-light {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  animation: lightBurst 1.4s ease-out forwards;
}

.click-light .orb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff8e0 0%,
    #ffe066 30%,
    #f5c842 55%,
    rgba(255, 180, 80, 0) 100%
  );
  filter: blur(3px);
  animation: orbPulse 1.4s ease-out forwards;
}

@keyframes lightBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes orbPulse {
  0%   { transform: scale(0.2); filter: blur(1px); }
  20%  { transform: scale(1.2); filter: blur(4px); }
  50%  { transform: scale(1);   filter: blur(3px); }
  100% { transform: scale(1.4); filter: blur(8px); opacity: 0; }
}

/* Orbiting star */
.orbit-star {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 18px;
  transform-origin: center center;
  animation: orbitAround var(--orbit-dur, 1.2s) ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255, 220, 80, 0.9));
}

@keyframes orbitAround {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--start-angle))
      translateX(0px)
      scale(0);
  }
  15% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--start-angle))
      translateX(30px)
      scale(1.1);
  }
  60% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--start-angle) + var(--orbit-deg)))
      translateX(var(--orbit-r))
      scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--start-angle) + var(--orbit-deg) + 40deg))
      translateX(calc(var(--orbit-r) + 20px))
      scale(0.3);
  }
}

/* Ray lines bursting outward */
.click-ray {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to top, transparent, rgba(255, 220, 80, 0.9), transparent);
  transform-origin: bottom center;
  animation: rayShoot var(--ray-dur, 0.7s) ease-out forwards;
}

@keyframes rayShoot {
  0%   { opacity: 0; transform: rotate(var(--ray-angle)) translateY(0)   scaleY(0); }
  20%  { opacity: 1; transform: rotate(var(--ray-angle)) translateY(-20px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--ray-angle)) translateY(-80px) scaleY(0.3); }
}

/* ============================
   MEMORY BUTTON
   ============================ */
.memory-btn {
  position: fixed;
  bottom: calc(1.8rem + 50px + 0.8rem);
  right: 1.8rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(255, 200, 150, 0.35);
  border-radius: 50px;
  background: rgba(35, 15, 5, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffd8b3;
  font-family: 'Dancing Script', cursive;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 150, 80, 0.25), 0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  user-select: none;
}

.memory-btn:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 0 36px rgba(255, 160, 100, 0.5), 0 6px 20px rgba(0,0,0,0.5);
  background: rgba(60, 25, 10, 0.88);
}

.memory-btn:active { transform: scale(0.97); }

.memory-icon {
  font-size: 1.15rem;
}

/* ============================
   GALLERY OVERLAY
   ============================ */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 0, 5, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.gallery-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.gallery-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s, transform 0.2s;
}

.gallery-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.gallery-container {
  width: 90%;
  max-width: 800px;
  height: 70vh;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 40px rgba(214, 56, 114, 0.3);
  border: 1px solid var(--glass-border);
}

.gallery-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.gallery-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.gallery-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
  width: 100%;
  pointer-events: none;
}

.gallery-prev, .gallery-next {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.2s;
  backdrop-filter: blur(5px);
}

.gallery-prev:hover, .gallery-next:hover {
  background: rgba(214, 56, 114, 0.8);
  transform: scale(1.1);
}

.gallery-prev:disabled, .gallery-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.gallery-dots {
  display: flex;
  gap: 8px;
  margin-top: 1.5rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.dot.active {
  background: var(--rose-light);
  transform: scale(1.3);
  box-shadow: 0 0 10px var(--rose-mid);
}

/* ============================
   NOUS BUTTON
   ============================ */
.nous-btn {
  position: fixed;
  bottom: calc(1.8rem + 50px + 0.8rem + 50px + 0.8rem);
  right: 1.8rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(214, 56, 114, 0.4);
  border-radius: 50px;
  background: rgba(60, 10, 30, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffb3d1;
  font-family: 'Dancing Script', cursive;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(214, 56, 114, 0.3), 0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  user-select: none;
}

.nous-btn:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 0 36px rgba(214, 56, 114, 0.6), 0 6px 20px rgba(0,0,0,0.5);
  background: rgba(90, 15, 45, 0.88);
}

.nous-btn:active { transform: scale(0.97); }

.nous-icon { font-size: 1.15rem; }

/* ============================
   NOUS OVERLAY
   ============================ */
.nous-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10, 0, 5, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, background 0.6s ease;
}

.nous-overlay.active {
  opacity: 1;
  pointer-events: all;
  background: rgba(10, 0, 5, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nous-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s, transform 0.2s;
}

.nous-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.nous-frame {
  position: relative;
  transform: scale(0.3) rotate(-8deg);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.nous-overlay.active .nous-frame {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.nous-img {
  max-width: 80vw;
  max-height: 65vh;
  border-radius: 16px;
  box-shadow:
    0 0 60px rgba(214, 56, 114, 0.4),
    0 0 120px rgba(214, 56, 114, 0.15),
    0 20px 60px rgba(0,0,0,0.7);
  border: 3px solid rgba(255, 180, 210, 0.3);
  display: block;
}

.nous-caption {
  text-align: center;
  margin-top: 1.2rem;
  font-family: 'Dancing Script', cursive;
  font-size: 1.6rem;
  color: #ffb3d1;
  text-shadow: 0 0 20px rgba(214, 56, 114, 0.6);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.nous-overlay.active .nous-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Sparkle particles around the photo */
.nous-sparkles {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  overflow: visible;
}

.sparkle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb3d1;
  box-shadow: 0 0 6px #ff6fa8, 0 0 12px rgba(214, 56, 114, 0.5);
  animation: sparkleFloat var(--sparkle-dur, 3s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
}

@keyframes sparkleFloat {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(var(--sx, 10px), var(--sy, -10px)) scale(1);
  }
  80% {
    opacity: 0.8;
    transform: translate(var(--ex, -10px), var(--ey, -30px)) scale(0.6);
  }
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 480px) {
  .card-content { padding: 1.5rem 1.2rem; }
  .message-line { font-size: 0.97rem; }
  .music-btn { bottom: 1rem; right: 1rem; font-size: 0.9rem; padding: 0.55rem 0.9rem; }
  .memory-btn { bottom: calc(1rem + 46px + 0.7rem); right: 1rem; font-size: 0.9rem; padding: 0.55rem 0.9rem; }
  .nous-btn { bottom: calc(1rem + 46px + 0.7rem + 46px + 0.7rem); right: 1rem; font-size: 0.9rem; padding: 0.55rem 0.9rem; }
  .nous-img { max-width: 90vw; max-height: 55vh; }
  .nous-caption { font-size: 1.2rem; }
}