:root {
  --bg-top: #09060f;
  --bg-bottom: #1a1322;
  --pink: #ffb6d7;
  --pink-strong: #ff7db8;
  --pink-soft: rgba(255, 175, 214, 0.4);
  --glow: rgba(255, 210, 230, 0.78);
  --shadow: rgba(255, 105, 170, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  background:
    radial-gradient(circle at top, rgba(255, 169, 215, 0.1), transparent 32%),
    radial-gradient(circle at bottom, rgba(255, 154, 204, 0.14), transparent 28%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: white;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
    radial-gradient(circle at 55% 80%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px);
  background-size: 240px 240px, 320px 320px, 280px 280px;
  pointer-events: none;
  opacity: 0.7;
}

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  isolation: isolate;
  contain: layout paint style;
}

.falling-hearts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout paint;
}

.falling-heart {
  position: absolute;
  top: -12vh;
  left: 0;
  opacity: var(--opacity);
  width: var(--size);
  height: var(--size);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.96) 0 16%, rgba(255, 255, 255, 0) 17%),
    linear-gradient(180deg, var(--tone-light) 0%, var(--tone-mid) 48%, var(--tone) 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90C24 73 10 55 10 34C10 20 21 10 35 10C43 10 49 14 50 21C51 14 57 10 65 10C79 10 90 20 90 34C90 55 76 73 50 90Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90C24 73 10 55 10 34C10 20 21 10 35 10C43 10 49 14 50 21C51 14 57 10 65 10C79 10 90 20 90 34C90 55 76 73 50 90Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter:
    drop-shadow(0 0 10px rgba(255, 228, 239, 0.5))
    drop-shadow(0 0 22px rgba(255, 162, 203, 0.22));
  transform: translate3d(0, 0, 0);
  animation: fall-heart var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.falling-heart::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.78) 0 10%, transparent 11%),
    radial-gradient(circle at 48% 42%, rgba(255, 243, 249, 0.4) 0 18%, transparent 19%);
  -webkit-mask-image: inherit;
  mask-image: inherit;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.95;
}

.heart-stage {
  position: relative;
  width: min(92vw, 760px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  z-index: 1;
}

.audio-start {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 221, 236, 0.35);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 26, 58, 0.78), rgba(28, 14, 39, 0.68));
  color: #fff2f8;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(255, 167, 207, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
  z-index: 5;
}

.audio-start.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.audio-start.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

.audio-start:hover,
.audio-start:focus-visible {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.26),
    0 0 26px rgba(255, 181, 216, 0.18);
  outline: none;
}

.heart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.heart-cloud {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 24px var(--shadow));
  transform-origin: center;
  contain: layout paint;
}

.heart-text {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--pink);
  font-size: clamp(16px, 2.1vw, 22px);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(255, 197, 226, 0.95),
    0 0 18px rgba(255, 139, 193, 0.9),
    0 0 34px rgba(255, 121, 185, 0.45);
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
}

.heart-text.center {
  font-family: "Petit Formal Script", cursive;
  font-size: clamp(18px, 2.8vw, 30px);
  color: #ffe2ef;
  opacity: 0.94;
  filter: none;
  z-index: 60;
}

.heart-glow {
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 217, 235, 0.18), transparent 58%);
  filter: blur(32px);
  animation: glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

.halo,
.spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.halo {
  width: min(42vw, 360px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(255, 185, 221, 0.12), transparent 68%);
  filter: blur(18px);
  animation: halo-float 13s ease-in-out infinite;
}

.halo-left {
  left: 7%;
  top: 10%;
}

.halo-right {
  right: 5%;
  bottom: 8%;
  animation-delay: -6s;
}

.spark {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 22px rgba(255, 190, 225, 0.7);
}

.spark-a {
  top: 12%;
  left: 64%;
  animation: blink 2.8s ease-in-out infinite;
}

.spark-b {
  bottom: 18%;
  right: 18%;
  width: 8px;
  height: 8px;
  animation: blink 2.2s ease-in-out infinite 1s;
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.35;
    scale: 0.96;
  }

  50% {
    opacity: 0.72;
    scale: 1.08;
  }
}

@keyframes halo-float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-18px) translateX(10px);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.28;
    scale: 0.8;
  }

  50% {
    opacity: 1;
    scale: 1.18;
  }
}

@keyframes fall-heart {
  0% {
    transform: translate3d(var(--x-start), -12vh, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(var(--x-end), 112vh, 0) rotate(var(--spin));
  }
}

@media (max-width: 640px) {
  .scene {
    padding: 18px;
  }

  .heart-stage {
    width: min(96vw, 560px);
  }

  .heart-text {
    font-size: clamp(14px, 3.3vw, 18px);
  }

  .heart-text.center {
    font-size: clamp(16px, 4.2vw, 24px);
  }
}

body.mobile-optimized .heart-text {
  text-shadow:
    0 0 6px rgba(255, 197, 226, 0.86),
    0 0 14px rgba(255, 139, 193, 0.5);
}

body.mobile-optimized .heart-cloud {
  filter: drop-shadow(0 0 16px rgba(255, 105, 170, 0.18));
}

body.mobile-optimized .heart-glow {
  filter: blur(22px);
  opacity: 0.82;
}

body.mobile-optimized .halo {
  filter: blur(12px);
  opacity: 0.74;
}

body.mobile-optimized .spark {
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.75),
    0 0 14px rgba(255, 190, 225, 0.35);
}

body.mobile-optimized .falling-heart {
  filter:
    drop-shadow(0 0 7px rgba(255, 228, 239, 0.3))
    drop-shadow(0 0 12px rgba(255, 162, 203, 0.16));
}

body.mobile-optimized .audio-start {
  bottom: max(20px, env(safe-area-inset-bottom));
  font-size: 13px;
  padding: 11px 16px;
}

@media (max-width: 460px) {
  .scene {
    padding:
      max(16px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .heart-stage {
    width: min(92vw, 420px);
  }

  .heart-text {
    font-size: clamp(13px, 3.7vw, 17px);
  }

  .heart-text.center {
    font-size: clamp(15px, 4.3vw, 22px);
  }

  .falling-heart {
    opacity: calc(var(--opacity) * 0.86);
  }
}

@media (max-width: 460px) and (min-height: 900px) {
  .scene {
    align-content: center;
  }

  .heart-stage {
    width: min(88vw, 396px);
    transform: translateY(-10px);
  }

  .heart-glow {
    inset: 27%;
  }
}

@media (max-width: 430px) and (min-height: 920px) {
  .heart-stage {
    width: min(90vw, 390px);
    transform: translateY(-8px);
  }

  .heart-text {
    font-size: clamp(12px, 3.5vw, 16px);
  }

  .heart-text.center {
    font-size: clamp(14px, 4.1vw, 21px);
  }
}

@media (min-width: 431px) and (max-width: 450px) and (min-height: 940px) {
  .heart-stage {
    width: min(90vw, 408px);
    transform: translateY(-12px);
  }

  .heart-text {
    font-size: clamp(13px, 3.4vw, 17px);
  }

  .heart-text.center {
    font-size: clamp(15px, 4.1vw, 22px);
  }
}