body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(circle at top, #fc0f6e, #ff94bf);
}

.card {
  background: rgba(255, 255, 255, 0.9);
  padding: 28px;
  border-radius: 24px;
  width: min(560px, 92vw);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.photo-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}

.photo-row img {
  width: 45%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

h1 {
  margin: 10px 0;
  font-size: 1.8rem;
}

.message {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 8px 0;
}

.btn-row {
  margin-top: 20px;
  display: flex;
  gap: 14px;
  justify-content: center;
}

.btn {
  padding: 12px 22px;
  font-size: 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.btn:active {
  transform: scale(0.97);
}

.yes {
  background: linear-gradient(135deg, #e62145, #b60525);
  color: white;
}

.no {
  background: #ffffff;
  border: 1px solid rgba(255, 77, 109, 0.4);
  color: #c9184a;
}

@keyframes yesPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(0.98); }
}

.popped {
  animation: yesPop 0.35s ease;
}

.heart {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  animation: floatUp 0.9s ease forwards;
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) scale(1.4); opacity: 0; }
}

body.clue1 {
  background-color: #fff0f6;

  background-image:
    radial-gradient(circle at 12px 12px, rgba(255,77,109,0.28) 6px, transparent 7px),
    radial-gradient(circle at 42px 42px, rgba(255,77,109,0.28) 6px, transparent 7px);

  background-size: 60px 60px;
}

body.clue2 {
  background-color: #e86b9a; /* muted dusty pink */

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
  <rect width='140' height='140' fill='%23e86b9a'/>\
  <path d='M70 104 C50 90 34 74 34 56 C34 42 44 32 58 32 C66 32 73 36 78 43 C83 36 90 32 98 32 C112 32 122 42 122 56 C122 74 106 90 86 104 L70 116 Z' fill='%23f3a6c8' opacity='0.40'/>\
  <path d='M28 54 C20 48 14 42 14 35 C14 29 18 25 24 25 C27 25 30 27 32 30 C34 27 37 25 40 25 C46 25 50 29 50 35 C50 42 44 48 36 54 L28 58 Z' fill='%23b892ff' opacity='0.35'/>\
</svg>");
  background-size: 140px 140px;
  background-repeat: repeat;

  display: grid;
  place-items: center;
}


body.clue2 .card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(184, 146, 255, 0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}


body.clue3 {
  background-color: #d25c9e; /* SAME base color as before */

  background-image:
    /* large soft heart waves */
    radial-gradient(
      circle at 20% 30%,
      rgba(240, 166, 201, 0.45) 0%,
      rgba(240, 166, 201, 0.45) 18%,
      transparent 19%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(182, 140, 255, 0.35) 0%,
      rgba(182, 140, 255, 0.35) 16%,
      transparent 17%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 210, 225, 0.25) 0%,
      rgba(255, 210, 225, 0.25) 22%,
      transparent 23%
    );

  background-size: 320px 320px;
  background-repeat: repeat;

  display: grid;
  place-items: center;
}


body.clue3 .card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(182, 140, 255, 0.35);
  box-shadow: 0 22px 55px rgba(0,0,0,0.18);
}


body.clue3 .card {
  background: rgba(255, 255, 255, 0.93);
  border: 2px solid rgba(199, 125, 255, 0.35);
}

body.clue3 {
  animation: slowPulse 14s ease-in-out infinite;
}

@keyframes slowPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.04); }
}



/* make headline a bit bigger */
.big {
  font-size: 2.1rem;
  margin: 0 0 8px;
}

/* drumroll module */
.drumroll {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(157, 78, 221, 0.10);
  border: 1px solid rgba(157, 78, 221, 0.25);
}

.roll-text {
  letter-spacing: 0.08em;
  font-weight: 700;
}

.dots {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 77, 141, 0.9);
  animation: dotBounce 0.6s ease-in-out infinite;
}

.dots span:nth-child(2) { animation-delay: 0.12s; background: rgba(199, 125, 255, 0.85); }
.dots span:nth-child(3) { animation-delay: 0.24s; background: rgba(255, 183, 197, 0.95); }

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* countdown meter */
.meter-wrap {
  margin-top: 14px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

.meter {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,77,141,0.95), rgba(221, 78, 150, 0.95));
}

body.final {
  background-color: #bd2626; /* pastel pink base */

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
  <rect width='120' height='120' fill='%23f7b2c4'/>\
  <!-- small hearts scattered -->\
  <path d='M20 26 C16 22 14 20 14 17 C14 14 16 12 19 12 C21 12 23 13 24 15 C25 13 27 12 29 12 C32 12 34 14 34 17 C34 20 32 22 28 26 L20 30 Z' fill='%23ffd6e0' opacity='0.85'/>\
  <path d='M70 40 C66 36 64 34 64 31 C64 28 66 26 69 26 C71 26 73 27 74 29 C75 27 77 26 79 26 C82 26 84 28 84 31 C84 34 82 36 78 40 L70 44 Z' fill='%23ffb3c6' opacity='0.8'/>\
  <path d='M96 18 C93 15 92 14 92 12 C92 10 94 8 96 8 C98 8 99 9 100 11 C101 9 102 8 104 8 C106 8 108 10 108 12 C108 14 106 15 103 18 L96 21 Z' fill='%23ff8fab' opacity='0.75'/>\
  <path d='M40 86 C36 82 34 80 34 77 C34 74 36 72 39 72 C41 72 43 73 44 75 C45 73 47 72 49 72 C52 72 54 74 54 77 C54 80 52 82 48 86 L40 90 Z' fill='%23ffd1dc' opacity='0.85'/>\
  <path d='M92 78 C89 75 88 74 88 72 C88 70 90 68 92 68 C94 68 95 69 96 71 C97 69 98 68 100 68 C102 68 104 70 104 72 C104 74 102 75 99 78 L92 81 Z' fill='%23ffb3c6' opacity='0.8'/>\
</svg>");

  background-size: 120px 120px;
  background-repeat: repeat;

  display: grid;
  place-items: center;
}

body.final .card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 143, 171, 0.45);
  box-shadow:
    0 28px 60px rgba(255, 143, 171, 0.4),
    0 10px 24px rgba(255, 179, 198, 0.35);
}

body.yay .card {
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.85),
    0 30px 60px rgba(255,143,171,0.35);
}


#noBtn { transition: left 0.18s ease, top 0.18s ease; }