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

:root {
  --pink: #ff4f81;
  --hot: #ed2c68;
  --rose: #c91d58;
  --wine: #641637;
  --soft: #fff3f7;
  --glass: rgba(255,255,255,.57);
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff0f5;
  color: var(--wine);
  font-family: Georgia, "Times New Roman", serif;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.screen {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 28px 18px;
}

.proposal-screen {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.48) 22%, transparent 47%),
    radial-gradient(circle at 8% 15%, #ffd5e4 0%, transparent 27%),
    radial-gradient(circle at 92% 82%, #ffc1d6 0%, transparent 30%),
    linear-gradient(135deg, #fff9fb 0%, #ffe1eb 52%, #ffc7da 100%);
}

.ambient {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
  opacity: .6;
}

.ambient-one {
  width: 330px;
  height: 330px;
  left: -120px;
  top: -100px;
  background: #ffb4cc;
  animation: floatBlob 9s ease-in-out infinite;
}

.ambient-two {
  width: 400px;
  height: 400px;
  right: -160px;
  bottom: -160px;
  background: #ff99bb;
  animation: floatBlob 12s ease-in-out infinite reverse;
}

.ambient-three {
  width: 180px;
  height: 180px;
  right: 12%;
  top: 9%;
  background: #ffe0eb;
  animation: floatBlob 8s ease-in-out infinite;
}

.heart-layer,
.sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.floating-heart {
  position: absolute;
  bottom: -50px;
  left: var(--left);
  color: var(--heart-color);
  font-size: var(--size);
  text-shadow: 0 5px 20px rgba(233,30,99,.2);
  opacity: 0;
  animation: heartRise var(--duration) linear forwards;
}

.sparkle {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 14px rgba(255,255,255,.95);
  animation: sparkle 2.5s ease-in-out infinite;
  animation-delay: var(--delay);
}

.proposal-card {
  width: min(760px, 100%);
  position: relative;
  z-index: 5;
  text-align: center;
  padding: clamp(35px, 7vw, 70px) clamp(20px, 7vw, 68px);
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.85);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 35px 100px rgba(125, 23, 66, .17),
    inset 0 1px 0 rgba(255,255,255,.95);
  animation: cardEnter 1.2s cubic-bezier(.16,1,.3,1) both;
}

.top-heart {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 35px;
  background: linear-gradient(145deg, #ff789e, #e91e63);
  box-shadow:
    0 12px 35px rgba(233,30,99,.35),
    0 0 0 9px rgba(255,255,255,.3);
  animation: heartBeat 1.5s infinite;
}

.top-heart span {
  animation: tinyRotate 4s linear infinite;
}

.tiny-hearts {
  position: absolute;
  left: 50%;
  top: 92px;
  width: 180px;
  height: 70px;
  transform: translateX(-50%);
  pointer-events: none;
}

.tiny-hearts span {
  position: absolute;
  color: rgba(233,30,99,.38);
  font-size: 15px;
  animation: orbitHeart 4s ease-in-out infinite;
}

.tiny-hearts span:nth-child(1) { left: 12px; top: 22px; animation-delay: 0s; }
.tiny-hearts span:nth-child(2) { right: 12px; top: 16px; animation-delay: .8s; }
.tiny-hearts span:nth-child(3) { left: 50%; top: -4px; animation-delay: 1.5s; }

.eyebrow {
  font: 700 11px/1.2 Arial, sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #a34a6b;
  margin-bottom: 16px;
}

h1 {
  color: var(--wine);
  font-size: clamp(43px, 8vw, 82px);
  line-height: .96;
  letter-spacing: -3px;
}

h1 span {
  display: block;
  color: var(--hot);
  text-shadow: 0 5px 25px rgba(233,30,99,.13);
}

.ring {
  margin: 20px auto 4px;
  font-size: 34px;
  animation: ringFloat 2.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(233,30,99,.15));
}

.subtext {
  width: min(540px, 100%);
  margin: 16px auto 27px;
  color: #704056;
  font: 15px/1.75 Arial, sans-serif;
}

.buttons-area {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
  z-index: 8;
}

.yes-btn,
.no-btn {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 800 15px/1 Arial, sans-serif;
  transition: transform .22s ease, box-shadow .22s ease;
}

.yes-btn {
  min-width: 190px;
  padding: 19px 30px;
  color: white;
  background: linear-gradient(135deg, #ff6490, #e91e63);
  box-shadow: 0 15px 38px rgba(233,30,99,.32);
  animation: yesGlow 2s ease-in-out infinite;
}

.yes-btn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 21px 50px rgba(233,30,99,.44);
}

.yes-btn span {
  display: inline-block;
  animation: heartBeat 1.2s infinite;
}

.no-btn {
  min-width: 100px;
  padding: 16px 22px;
  color: #8a4260;
  background: rgba(255,255,255,.82);
  box-shadow: 0 9px 24px rgba(119,42,76,.12);
}

.no-btn.running {
  position: fixed;
  z-index: 100;
  transition: left .16s cubic-bezier(.2,.8,.2,1), top .16s cubic-bezier(.2,.8,.2,1), transform .16s ease;
}

.hint {
  margin-top: 18px;
  min-height: 18px;
  color: #98516d;
  font: 12px/1.5 Arial, sans-serif;
}

.bottom-hearts {
  margin-top: 27px;
  color: rgba(201,29,88,.38);
  font-size: 13px;
  letter-spacing: 4px;
  animation: softPulse 2.4s ease-in-out infinite;
}

.hidden {
  display: none !important;
}

.celebration-screen {
  align-items: flex-start;
  padding-top: 65px;
  padding-bottom: 65px;
  background:
    radial-gradient(circle at 50% 3%, #ffffff 0%, rgba(255,255,255,.7) 16%, transparent 38%),
    radial-gradient(circle at 4% 78%, #ffc4d8, transparent 30%),
    radial-gradient(circle at 96% 57%, #ffb2ca, transparent 31%),
    linear-gradient(135deg, #fff4f8, #ffd5e3);
}

.celebration-content {
  width: min(850px, 100%);
  position: relative;
  z-index: 5;
  text-align: center;
  animation: celebrationEnter 1.25s cubic-bezier(.16,1,.3,1) both;
}

.celebration-orbit {
  position: relative;
  width: 135px;
  height: 30px;
  margin: 0 auto -4px;
}

.celebration-orbit span {
  position: absolute;
  color: #ed2c68;
  animation: orbitHeart 3s ease-in-out infinite;
}

.celebration-orbit span:nth-child(1) { left: 0; top: 10px; animation-delay: 0s; }
.celebration-orbit span:nth-child(2) { left: 37px; top: -2px; animation-delay: .4s; }
.celebration-orbit span:nth-child(3) { right: 37px; top: -2px; animation-delay: .8s; }
.celebration-orbit span:nth-child(4) { right: 0; top: 10px; animation-delay: 1.2s; }

.burst-heart {
  font-size: clamp(56px, 11vw, 82px);
  filter: drop-shadow(0 12px 28px rgba(233,30,99,.23));
  animation: heartBeat 1.25s infinite;
}

.celebration-small {
  margin-top: 3px;
  color: #b23b65;
  font: 800 11px/1 Arial, sans-serif;
  letter-spacing: 5px;
}

h2 {
  margin: 14px auto 10px;
  max-width: 820px;
  color: var(--wine);
  font-size: clamp(39px, 7vw, 72px);
  line-height: .99;
  letter-spacing: -2.5px;
}

h2 span {
  display: block;
  color: var(--hot);
}

.forever-line {
  margin: 0 auto 28px;
  color: #8c5269;
  font: italic 15px/1.6 Georgia, serif;
}

.photo-frame {
  width: min(650px, 100%);
  position: relative;
  margin: 0 auto 30px;
  padding: 10px;
  border-radius: 31px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 35px 80px rgba(125,23,66,.2);
  transform: rotate(-1deg);
  animation: photoFloat 5s ease-in-out infinite;
}

.photo-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
}

.photo-glow {
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 45px;
  background: rgba(255,80,135,.24);
  filter: blur(32px);
}

.photo-shine {
  position: absolute;
  inset: 10px;
  z-index: 2;
  border-radius: 22px;
  overflow: hidden;
  pointer-events: none;
}

.photo-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: photoShine 5s ease-in-out infinite;
}

.photo-caption {
  position: absolute;
  left: 50%;
  bottom: 21px;
  z-index: 3;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  color: white;
  background: rgba(95,22,51,.63);
  backdrop-filter: blur(8px);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .5px;
}

.love-letter {
  width: min(710px, 100%);
  position: relative;
  margin: 0 auto;
  padding: 37px clamp(20px, 6vw, 52px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 30px;
  background: rgba(255,255,255,.69);
  box-shadow: 0 24px 70px rgba(125,23,66,.13);
  backdrop-filter: blur(15px);
}

.letter-heart {
  color: #ed2c68;
  font-size: 30px;
  margin-bottom: 5px;
  animation: heartBeat 1.5s infinite;
}

.love-letter h3 {
  color: #8e1745;
  font-size: clamp(25px, 5vw, 32px);
  margin-bottom: 18px;
}

.love-letter p {
  margin: 0 auto 15px;
  color: #63374b;
  font: 14.5px/1.85 Arial, sans-serif;
}

.signature {
  margin-top: 23px;
  color: #9b3d63;
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
}

.signature strong {
  font-size: 21px;
}

.final-message {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  color: #e91e63;
}

.final-message p {
  color: #8e1745;
  font: italic 16px Georgia, serif;
}

.final-message span {
  animation: heartBeat 1.4s infinite;
}

.mobile-break {
  display: none;
}

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(45px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes celebrationEnter {
  from { opacity: 0; transform: translateY(50px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(1); }
  38% { transform: scale(1.09); }
  52% { transform: scale(1); }
}

@keyframes yesGlow {
  0%, 100% { box-shadow: 0 15px 38px rgba(233,30,99,.28); }
  50% { box-shadow: 0 20px 54px rgba(233,30,99,.5), 0 0 0 8px rgba(233,30,99,.06); }
}

@keyframes ringFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes heartRise {
  0% { transform: translateY(0) rotate(0) scale(.75); opacity: 0; }
  10% { opacity: .8; }
  100% { transform: translateY(-115vh) rotate(360deg) scale(1.2); opacity: 0; }
}

@keyframes sparkle {
  0%, 100% { opacity: .1; transform: scale(.5); }
  50% { opacity: .9; transform: scale(1); }
}

@keyframes floatBlob {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(25px, 28px) scale(1.08); }
}

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

@keyframes orbitHeart {
  0%, 100% { transform: translateY(0) scale(.9); opacity: .55; }
  50% { transform: translateY(-9px) scale(1.2); opacity: 1; }
}

@keyframes photoFloat {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-6px); }
}

@keyframes photoShine {
  0%, 65% { left: -80%; }
  82%, 100% { left: 140%; }
}

@keyframes softPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}

@media (max-width: 600px) {
  .screen {
    padding: 17px 12px;
  }

  .proposal-screen {
    align-items: center;
  }

  .proposal-card {
    width: 100%;
    border-radius: 28px;
    padding: 31px 17px 27px;
  }

  .top-heart {
    width: 63px;
    height: 63px;
    font-size: 29px;
    margin-bottom: 15px;
  }

  .tiny-hearts {
    top: 76px;
    width: 150px;
  }

  .eyebrow {
    font-size: 9px;
    letter-spacing: 2.8px;
    margin-bottom: 13px;
  }

  h1 {
    font-size: clamp(39px, 12vw, 57px);
    letter-spacing: -2px;
    line-height: .98;
  }

  .mobile-break {
    display: block;
  }

  .ring {
    font-size: 29px;
    margin-top: 17px;
  }

  .subtext {
    font-size: 13px;
    line-height: 1.65;
    margin: 13px auto 21px;
    max-width: 330px;
  }

  .buttons-area {
    min-height: 88px;
    gap: 10px;
  }

  .yes-btn {
    min-width: 155px;
    padding: 17px 20px;
    font-size: 14px;
  }

  .no-btn {
    min-width: 84px;
    padding: 15px 18px;
    font-size: 13px;
  }

  .hint {
    font-size: 10.5px;
    margin-top: 14px;
  }

  .bottom-hearts {
    margin-top: 21px;
    font-size: 10px;
  }

  .celebration-screen {
    padding-top: 38px;
    padding-bottom: 45px;
    align-items: flex-start;
  }

  .celebration-content {
    width: 100%;
  }

  .burst-heart {
    font-size: 58px;
  }

  .celebration-small {
    font-size: 9px;
    letter-spacing: 3.5px;
  }

  h2 {
    margin-top: 12px;
    font-size: clamp(36px, 10.5vw, 51px);
    letter-spacing: -1.7px;
    line-height: 1.02;
  }

  .forever-line {
    font-size: 13px;
    margin: 8px auto 22px;
  }

  .photo-frame {
    padding: 7px;
    border-radius: 22px;
    margin-bottom: 25px;
  }

  .photo-frame img {
    border-radius: 16px;
  }

  .photo-shine {
    inset: 7px;
    border-radius: 16px;
  }

  .photo-caption {
    bottom: 15px;
    font-size: 9px;
    padding: 8px 12px;
  }

  .love-letter {
    border-radius: 23px;
    padding: 28px 18px;
  }

  .love-letter h3 {
    font-size: 24px;
  }

  .love-letter p {
    font-size: 13px;
    line-height: 1.75;
  }

  .signature {
    font-size: 14px;
  }

  .signature strong {
    font-size: 19px;
  }

  .final-message {
    margin-top: 24px;
  }

  .final-message p {
    font-size: 14px;
  }

  .ambient-one {
    width: 220px;
    height: 220px;
  }

  .ambient-two {
    width: 260px;
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}