:root {
  --pink-1: #ffd6e7;
  --pink-2: #ffb6ce;
  --pink-3: #ff7aa8;
  --rose: #e0457b;
  --deep: #b32063;
  --cream: #fff8fb;
  --text: #4a1d36;
  --shadow: 0 20px 50px rgba(179, 32, 99, 0.18);
}

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

html, body {
  min-height: 100%;
  font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
  color: var(--text);
  overflow-x: hidden;
}

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 4rem;
}

/* Animated gradient background */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, #ffe3ee 0%, #ffc8dd 35%, #ffb1c8 65%, #ffd8ec 100%);
  background-size: 300% 300%;
  animation: gradientShift 14s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Floating hearts in background */
.hearts {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.heart {
  position: absolute;
  bottom: -40px;
  font-size: 1.5rem;
  color: var(--pink-3);
  opacity: 0.7;
  animation: floatUp linear forwards;
  user-select: none;
}

@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) rotate(360deg) scale(1.2); opacity: 0; }
}

/* Card */
.card {
  position: relative;
  background: var(--cream);
  border-radius: 28px;
  padding: 3rem 2.5rem 2.5rem;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  animation: cardIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.ribbon {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--rose), var(--deep));
  color: #fff;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(179, 32, 99, 0.3);
}

.title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  color: var(--deep);
}

.accent {
  background: linear-gradient(135deg, var(--rose), #ff5fa2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.big-heart {
  display: inline-block;
  color: var(--rose);
  animation: beat 1.4s ease-in-out infinite;
  margin-left: 0.3rem;
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.18); }
  50%      { transform: scale(0.95); }
  75%      { transform: scale(1.12); }
}

.message {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.message strong {
  color: var(--rose);
  font-weight: 600;
}

.signature {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.6rem, 4vw, 2rem);
  color: var(--deep);
  margin-bottom: 2rem;
}

.pulse {
  display: inline-block;
  animation: beat 1.2s ease-in-out infinite;
}

/* Button */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--rose), var(--deep));
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(179, 32, 99, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(179, 32, 99, 0.45);
}

.btn:active { transform: translateY(0); }

.btn-heart {
  display: inline-block;
  animation: beat 1.2s ease-in-out infinite;
}

.hint {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--rose);
  opacity: 0.75;
  font-style: italic;
}

/* Confetti hearts on click */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.confetti-heart {
  position: absolute;
  font-size: 1.6rem;
  animation: confettiFall 2.5s ease-out forwards;
  user-select: none;
}

@keyframes confettiFall {
  0%   { transform: translate(0,0) rotate(0deg) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; }
}

.footer {
  position: fixed;
  bottom: 1rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--deep);
  opacity: 0.6;
  pointer-events: none;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.8rem;
}

.photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(179, 32, 99, 0.22);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border: 3px solid #fff;
}

.photo:nth-child(1) { --tilt: -3deg; }
.photo:nth-child(2) { --tilt: 2deg; }
.photo:nth-child(3) { --tilt: -1.5deg; }

.photo:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 16px 30px rgba(179, 32, 99, 0.35);
  z-index: 2;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Music player */
.player {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #fff0f6, #ffe1ec);
  border-radius: 999px;
  padding: 0.7rem 1.2rem 0.7rem 0.7rem;
  margin-bottom: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(224, 69, 123, 0.15), 0 6px 18px rgba(179, 32, 99, 0.12);
}

.play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--rose), var(--deep));
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(179, 32, 99, 0.35);
  transition: transform 0.2s ease;
}

.play-btn:hover { transform: scale(1.08); }
.play-btn.playing { animation: spin 4s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.play-icon { line-height: 1; transform: translateX(2px); }
.play-btn.playing .play-icon { transform: translateX(0); }

.player-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.player-title {
  font-weight: 600;
  color: var(--deep);
  font-size: 1rem;
}

.player-sub {
  font-size: 0.85rem;
  color: var(--rose);
  opacity: 0.8;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(74, 29, 54, 0.85);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 16px;
  border: 4px solid #fff;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

@media (max-width: 480px) {
  .card { padding: 2.5rem 1.5rem 2rem; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-gradient, .heart, .big-heart, .pulse, .btn-heart { animation: none; }
}