/* --- Base page --- */
body {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a0a1a 100%);
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: relative;
}

/* Animated background stars */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 60% 70%, #ea80b0, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent),
    radial-gradient(1px 1px at 80% 10%, #ffb3d9, transparent),
    radial-gradient(2px 2px at 90% 60%, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: twinkle 20s linear infinite;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* --- Love words --- */
#ui .love {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;
  /* per-item delay via CSS variable --i (1..N) */
  --i: 1;
}

#ui .love:last-child .love_word {
  color: #ea80b0;
  font-size: 1.4rem;
  text-shadow: 0 0 10px #fff;
}

#ui .love_word {
  color: #ea80b0;
  font-size: 1.4rem;
  transform: translateY(-100%) rotateZ(-30deg);
  text-shadow: 0 0 10px #fff;
  letter-spacing: 2px;
  white-space: nowrap;
}

#ui .love_horizontal {
  animation: horizontal 10000ms infinite alternate ease-in-out;
  animation-delay: calc(var(--i) * -300ms);
}

#ui .love_vertical {
  animation: vertical 20000ms infinite linear;
  animation-delay: calc(var(--i) * -300ms);
}

/* --- Animations --- */
@keyframes horizontal {
  from { transform: translateX(0px); }
  to   { transform: translateX(450px); }
}

@keyframes vertical {
  0%   { transform: translateY(180px); }
  10%  { transform: translateY(45px); }
  15%  { transform: translateY(4.5px); }
  18%  { transform: translateY(0px); }
  20%  { transform: translateY(4.5px); }
  22%  { transform: translateY(34.61538px); }
  24%  { transform: translateY(64.28571px); }
  25%  { transform: translateY(112.5px); }
  26%  { transform: translateY(64.28571px); }
  28%  { transform: translateY(34.61538px); }
  30%  { transform: translateY(4.5px); }
  32%  { transform: translateY(0px); }
  35%  { transform: translateY(4.5px); }
  40%  { transform: translateY(45px); }
  50%  { transform: translateY(180px); }
  71%  { transform: translateY(428.57143px); }
  72.5%{ transform: translateY(441.17647px); }
  75%  { transform: translateY(450px); }
  77.5%{ transform: translateY(441.17647px); }
  79%  { transform: translateY(428.57143px); }
  100% { transform: translateY(180px); }
}

/* Center Heart */
.center-heart {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.center-heart:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.center-heart:active {
  transform: translate(-50%, -50%) scale(0.9);
}

.heart-icon {
  font-size: 4rem;
  text-shadow: 
    0 0 20px #ea80b0,
    0 0 40px #ea80b0,
    0 0 60px rgba(234, 128, 176, 0.8);
  animation: heartPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(234, 128, 176, 0.6));
}

@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}