:root {
  --pink: #ff5f9e;
  --rose: #ff8ab6;
  --cream: #fff8f2;
  --ink: #43283a;
  --mint: #dff7ea;
  --lemon: #ffe899;
  --sky: #cdeeff;
  --shadow: rgba(120, 52, 86, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 95, 158, 0.22), transparent 26%),
    radial-gradient(circle at 84% 14%, rgba(126, 215, 175, 0.28), transparent 24%),
    radial-gradient(circle at 70% 86%, rgba(255, 232, 153, 0.35), transparent 28%),
    linear-gradient(135deg, #fff3f8 0%, #fffaf0 48%, #eefbf6 100%);
}

.page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.page::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 3px dashed rgba(255, 95, 158, 0.24);
  border-radius: 30px;
  pointer-events: none;
}

.question-panel,
.result-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.kicker {
  margin: 0;
  padding: 9px 16px;
  border: 2px solid rgba(255, 95, 158, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 10px 22px rgba(255, 95, 158, 0.12);
  font-size: clamp(0.88rem, 3vw, 1rem);
  font-weight: 800;
  color: #9d426d;
}

h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 8px 0 rgba(255, 255, 255, 0.72);
}

.bear-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(82vw, 390px);
  aspect-ratio: 4 / 3;
  padding: 10px;
  border-radius: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    repeating-linear-gradient(135deg, rgba(255, 138, 182, 0.8) 0 14px, rgba(255, 232, 153, 0.76) 14px 28px, rgba(205, 238, 255, 0.76) 28px 42px) border-box;
  border: 7px solid transparent;
  box-shadow: 0 18px 34px rgba(120, 52, 86, 0.18);
}

.bear-frame::before,
.bear-frame::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 8px;
  background: var(--rose);
  box-shadow: 0 8px 18px rgba(255, 95, 158, 0.22);
  transform: rotate(-45deg);
}

.bear-frame::before {
  left: -13px;
  top: 22px;
}

.bear-frame::after {
  right: -10px;
  bottom: 22px;
  width: 28px;
  height: 28px;
  background: #7ed7af;
}

.bear {
  width: 100%;
  height: 100%;
  border-radius: 19px;
  object-fit: cover;
  filter: drop-shadow(0 20px 26px var(--shadow));
  animation: bear-bob 2.8s ease-in-out infinite;
}

.buttons {
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.btn {
  position: relative;
  border: 0;
  border-radius: 999px;
  min-width: 112px;
  min-height: 54px;
  padding: 14px 26px;
  overflow: hidden;
  font: 800 1.1rem/1.08 "Segoe UI", Arial, sans-serif;
  color: white;
  cursor: pointer;
  text-decoration: none;
  white-space: normal;
  box-shadow: 0 14px 24px var(--shadow), inset 0 -5px 0 rgba(98, 20, 55, 0.15);
  transform-origin: center;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    min-width 220ms ease,
    min-height 220ms ease,
    font-size 220ms ease,
    padding 220ms ease;
}

.btn::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 10px;
  width: 42%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.yes-btn,
.replay-btn {
  background: linear-gradient(135deg, var(--pink), #ff347e);
}

.no-btn {
  background: linear-gradient(135deg, #7ed7af, #3dbb89);
  max-width: min(82vw, 360px);
}

.btn:hover {
  transform: translateY(-2px) scale(var(--scale, 1));
}

.btn:active {
  transform: translateY(2px) scale(calc(var(--scale, 1) * 0.98));
}

.yes-btn {
  --scale: 1;
}

.no-btn {
  --scale: 1;
}

.yes-level-1 {
  --scale: 1.25;
  font-size: 1.22rem;
  min-width: 136px;
  min-height: 62px;
}

.yes-level-2 {
  --scale: 1.58;
  font-size: 1.42rem;
  min-width: 164px;
  min-height: 72px;
}

.yes-level-3 {
  --scale: 2;
  font-size: 1.72rem;
  min-width: 205px;
  min-height: 88px;
}

.yes-level-4 {
  --scale: 2.55;
  font-size: clamp(2rem, 8vw, 4rem);
  min-width: min(86vw, 430px);
  min-height: 132px;
  padding: 24px 38px;
}

.yes-level-5,
.yes-level-6,
.yes-level-7,
.yes-level-8,
.yes-level-9,
.yes-level-final {
  --scale: 2.7;
  font-size: clamp(2.25rem, 9vw, 4.5rem);
  min-width: min(90vw, 470px);
  min-height: 146px;
  padding: 28px 40px;
}

.yes-level-final {
  --scale: 3.15;
  font-size: clamp(2.8rem, 12vw, 5.8rem);
  min-width: min(94vw, 560px);
  min-height: 170px;
}

.no-level-1 {
  --scale: 0.82;
  font-size: 0.92rem;
  min-width: min(82vw, 330px);
  min-height: 56px;
}

.no-level-2 {
  --scale: 0.62;
  font-size: 0.82rem;
  min-width: min(76vw, 300px);
  min-height: 52px;
}

.no-level-3 {
  --scale: 0.54;
  font-size: 0.7rem;
  min-width: min(72vw, 285px);
  min-height: 50px;
}

.no-level-4 {
  --scale: 0.48;
  font-size: 0.72rem;
  min-width: 170px;
  min-height: 46px;
}

.no-level-5 {
  --scale: 0.42;
  font-size: 0.68rem;
  min-width: 160px;
  min-height: 44px;
}

.no-level-6 {
  --scale: 0.36;
  font-size: 0.64rem;
  min-width: 140px;
  min-height: 42px;
}

.no-level-7 {
  --scale: 0.34;
  font-size: 0.58rem;
  min-width: min(68vw, 250px);
  min-height: 48px;
}

.no-level-8 {
  --scale: 0.3;
  font-size: 0.54rem;
  min-width: min(64vw, 235px);
  min-height: 46px;
}

.no-level-9 {
  --scale: 0.28;
  font-size: 0.62rem;
  min-width: 128px;
  min-height: 40px;
}

.is-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.float-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-hearts span {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 5px;
  background: rgba(255, 95, 158, 0.42);
  transform: rotate(-45deg);
  animation: float-heart 7s ease-in-out infinite;
}

.float-hearts span::before,
.float-hearts span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.float-hearts span::before {
  top: -50%;
  left: 0;
}

.float-hearts span::after {
  left: 50%;
  top: 0;
}

.float-hearts span:nth-child(1) {
  left: 10%;
  top: 18%;
}

.float-hearts span:nth-child(2) {
  right: 13%;
  top: 23%;
  width: 16px;
  height: 16px;
  background: rgba(126, 215, 175, 0.42);
  animation-delay: -1.4s;
}

.float-hearts span:nth-child(3) {
  left: 18%;
  bottom: 17%;
  width: 18px;
  height: 18px;
  background: rgba(255, 232, 153, 0.6);
  animation-delay: -2.2s;
}

.float-hearts span:nth-child(4) {
  right: 24%;
  bottom: 13%;
  animation-delay: -3.1s;
}

.float-hearts span:nth-child(5) {
  left: 48%;
  top: 8%;
  width: 14px;
  height: 14px;
  background: rgba(205, 238, 255, 0.8);
  animation-delay: -4s;
}

.celebration span {
  top: -10%;
  animation-name: fall-heart;
}

.celebration span:nth-child(1) {
  left: 12%;
}

.celebration span:nth-child(2) {
  left: 29%;
}

.celebration span:nth-child(3) {
  left: 46%;
}

.celebration span:nth-child(4) {
  left: 63%;
}

.celebration span:nth-child(5) {
  left: 80%;
}

.celebration span:nth-child(6) {
  left: 92%;
  width: 15px;
  height: 15px;
  background: rgba(126, 215, 175, 0.5);
  animation-delay: -5s;
}

.celebration span:nth-child(7) {
  left: 5%;
  width: 18px;
  height: 18px;
  background: rgba(255, 95, 158, 0.34);
  animation-delay: -2.8s;
  animation-duration: 6.3s;
}

.celebration span:nth-child(8) {
  left: 20%;
  width: 13px;
  height: 13px;
  background: rgba(205, 238, 255, 0.76);
  animation-delay: -4.4s;
  animation-duration: 7.8s;
}

.celebration span:nth-child(9) {
  left: 38%;
  width: 24px;
  height: 24px;
  background: rgba(255, 138, 182, 0.46);
  animation-delay: -1.1s;
  animation-duration: 6.8s;
}

.celebration span:nth-child(10) {
  left: 56%;
  width: 16px;
  height: 16px;
  background: rgba(255, 232, 153, 0.74);
  animation-delay: -3.7s;
  animation-duration: 7.2s;
}

.celebration span:nth-child(11) {
  left: 73%;
  width: 21px;
  height: 21px;
  background: rgba(255, 95, 158, 0.38);
  animation-delay: -5.8s;
  animation-duration: 6.5s;
}

.celebration span:nth-child(12) {
  left: 87%;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.9);
  animation-delay: -2s;
  animation-duration: 8.2s;
}

.result-page h1 {
  max-width: 100%;
  color: #ff347e;
  font-size: clamp(3.5rem, 12vw, 7.5rem);
  animation: soft-glow 2.2s ease-in-out infinite;
}

.result-panel p {
  margin: -10px 0 0;
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  font-weight: 800;
}

.result-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(88vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.86) 0 36%, rgba(255, 138, 182, 0.22) 37% 56%, transparent 70%);
  filter: blur(2px);
  animation: love-pulse 3s ease-in-out infinite;
}

.love-photo {
  width: min(78vw, 280px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 8px solid rgba(255, 255, 255, 0.86);
  border-radius: 24px;
  box-shadow: 0 18px 32px rgba(120, 52, 86, 0.22);
  transform: rotate(-2deg);
  animation: photo-sway 3.4s ease-in-out infinite;
}

.result-bear {
  width: 100%;
}

.result-frame {
  width: min(78vw, 360px);
}

.replay-btn {
  margin-top: 4px;
}

@keyframes bear-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-10px) rotate(1.5deg);
  }
}

@keyframes float-heart {
  0%,
  100% {
    transform: translateY(0) rotate(-45deg) scale(1);
  }

  50% {
    transform: translateY(-18px) rotate(-45deg) scale(1.12);
  }
}

@keyframes fall-heart {
  0% {
    transform: translate3d(-18px, -20vh, 0) rotate(-45deg) scale(0.7);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  50% {
    transform: translate3d(18px, 52vh, 0) rotate(-34deg) scale(1);
  }

  100% {
    transform: translate3d(-12px, 118vh, 0) rotate(-52deg) scale(1.1);
    opacity: 0;
  }
}

@keyframes love-pulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.95;
  }
}

@keyframes soft-glow {
  0%,
  100% {
    text-shadow: 0 8px 0 rgba(255, 255, 255, 0.72), 0 0 18px rgba(255, 95, 158, 0.18);
  }

  50% {
    text-shadow: 0 8px 0 rgba(255, 255, 255, 0.72), 0 0 30px rgba(255, 95, 158, 0.42);
  }
}

@keyframes photo-sway {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }

  50% {
    transform: rotate(1.2deg) translateY(-7px);
  }
}

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

  .page::before {
    inset: 10px;
    border-radius: 22px;
  }

  .buttons {
    min-height: 205px;
    gap: 16px;
  }

  .btn {
    min-width: 104px;
  }

  .yes-level-4,
  .yes-level-5,
  .yes-level-6,
  .yes-level-7,
  .yes-level-8,
  .yes-level-9,
  .yes-level-final {
    min-height: 118px;
  }

  .yes-level-final {
    min-height: 148px;
  }
}