:root {
  color-scheme: light;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  background: #fff8fb;
  color: #352032;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
}

button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 112, 150, 0.22), transparent 25%),
    radial-gradient(circle at 84% 24%, rgba(119, 211, 255, 0.24), transparent 24%),
    radial-gradient(circle at 50% 86%, rgba(255, 219, 99, 0.22), transparent 28%),
    linear-gradient(135deg, #fff8fb 0%, #fff 45%, #eef9ff 100%);
}

.question-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  animation: panel-pop 520ms cubic-bezier(0.2, 0.9, 0.2, 1.2);
}

h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.1rem, 7vw, 5rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 6px 22px rgba(255, 94, 134, 0.18);
  animation: float-title 2400ms ease-in-out infinite;
}

.mood {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  font-size: 3.2rem;
  box-shadow: 0 18px 44px rgba(255, 112, 150, 0.18);
  animation: mood-bounce 1600ms ease-in-out infinite;
}

.actions {
  width: min(680px, 100%);
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 24px);
  flex-wrap: nowrap;
}

.primary-button,
.secondary-button {
  flex: 0 1 auto;
  min-width: clamp(92px, 22vw, 140px);
  min-height: 54px;
  border-radius: 8px;
  padding: 14px clamp(16px, 4vw, 26px);
  white-space: nowrap;
  font-weight: 800;
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1.4),
    box-shadow 180ms ease,
    font-size 180ms ease,
    padding 180ms ease,
    background 180ms ease;
}

.primary-button {
  font-size: var(--love-size, 1.15rem);
  padding: var(--love-padding-y, 14px) var(--love-padding-x, 24px);
  background: linear-gradient(135deg, #ff4d6d, #ff7aa8);
  color: white;
  box-shadow: 0 16px 34px rgba(255, 77, 109, 0.32);
}

.primary-button:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 20px 40px rgba(255, 77, 109, 0.38);
}

.primary-button.growing {
  animation: love-grow 260ms cubic-bezier(0.2, 0.9, 0.2, 1.45);
}

.secondary-button {
  background: #ffffff;
  color: #63415c;
  box-shadow: inset 0 0 0 2px rgba(255, 112, 150, 0.16), 0 10px 26px rgba(77, 48, 69, 0.08);
}

.secondary-button.teasing {
  animation: tease 280ms ease-in-out;
}

.result {
  max-width: 10ch;
  font-size: clamp(2.2rem, 8vw, 5.4rem);
  line-height: 1.12;
  color: #13825c;
  animation: success-pop 680ms cubic-bezier(0.2, 0.9, 0.2, 1.35);
}

.floating-decor {
  position: absolute;
  z-index: 0;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(255, 105, 145, 0.16));
  animation: decor-float 4200ms ease-in-out infinite;
}

.decor-heart {
  top: 15%;
  left: 13%;
  font-size: clamp(2.2rem, 6vw, 5rem);
}

.decor-star {
  right: 14%;
  top: 20%;
  font-size: clamp(1.9rem, 5vw, 4.4rem);
  animation-delay: -900ms;
}

.decor-smile {
  right: 18%;
  bottom: 15%;
  font-size: clamp(2rem, 5vw, 4.6rem);
  animation-delay: -1800ms;
}

@keyframes panel-pop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}

@keyframes float-title {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes mood-bounce {
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}

@keyframes love-grow {
  50% {
    transform: scale(1.08) rotate(-2deg);
  }
}

@keyframes tease {
  25% {
    transform: translateX(10px) rotate(2deg);
  }

  60% {
    transform: translateX(-8px) rotate(-2deg);
  }
}

@keyframes success-pop {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-3deg);
  }
}

@keyframes decor-float {
  50% {
    transform: translateY(-18px) rotate(8deg);
  }
}

@media (max-width: 520px) {
  .page {
    padding: 18px;
  }

  .actions {
    min-height: 170px;
    gap: 10px;
  }

  .primary-button,
  .secondary-button {
    min-width: 82px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .mood {
    width: 78px;
    height: 78px;
    font-size: 2.7rem;
  }
}