:root {
  --pink-1: #ffdfec;
  --pink-2: #ffc2dc;
  --pink-3: #ff8fb1;
  --rose: #e75f8c;
  --plum: #6d3350;
  --card-bg: rgba(255, 255, 255, 0.72);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

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

body {
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--plum);
  background: linear-gradient(160deg, var(--pink-1) 0%, var(--pink-2) 45%, var(--pink-3) 100%);
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* floating hearts */
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hearts span {
  position: absolute;
  bottom: -40px;
  font-size: var(--s, 20px);
  opacity: 0;
  animation: rise var(--d, 9s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { transform: translateY(0) rotate(0deg) scale(.7); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateY(-115vh) rotate(320deg) scale(1); opacity: 0; }
}

.card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  padding: 34px 26px 30px;
  text-align: center;
  box-shadow: 0 25px 60px -20px rgba(120, 30, 70, 0.45);
  animation: pop .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes pop {
  from { transform: scale(.85) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.screen { animation: pop .4s cubic-bezier(.2, .9, .3, 1.2) both; }

.kitten {
  width: 190px;
  max-width: 60%;
  margin: 0 auto 6px;
}
.heart-eye { transform-origin: center; animation: beat 1s ease-in-out infinite; }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.18); }
  45%      { transform: scale(1); }
}
.btn-again { margin-top: 6px; }
.reveal-text { font-size: clamp(1.15rem, 5vw, 1.5rem); margin-bottom: 22px; }
.kitten svg { display: block; width: 100%; height: auto; overflow: visible; }
.kitten-body { transform-origin: 110px 150px; animation: sway 4s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.eye { animation: blink 4.5s infinite; transform-origin: center; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}

.question {
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  line-height: 1.3;
  margin: 10px 4px 26px;
  color: var(--rose);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
}

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

.btn {
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 15px 40px;
  cursor: pointer;
  color: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(.96); }

.btn-yes {
  background: linear-gradient(135deg, #ff7eb3, #ff5c8a);
  box-shadow: 0 12px 24px -8px rgba(231, 95, 140, 0.7);
}
.btn-no {
  background: linear-gradient(135deg, #b9c6d6, #93a4b8);
  box-shadow: 0 12px 24px -8px rgba(90, 110, 140, 0.5);
}

/* when the Yes button starts running away */
.btn-yes.loose {
  position: fixed;
  z-index: 5;
  margin: 0;
  transition: top .35s cubic-bezier(.34, 1.4, .5, 1), left .35s cubic-bezier(.34, 1.4, .5, 1);
}

.hint {
  min-height: 1.4em;
  margin: 18px 2px 0;
  font-weight: 600;
  font-size: .98rem;
  color: var(--plum);
  opacity: .75;
  transition: opacity .2s ease;
}

/* overlay */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #3a2230, #5a2f45);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  padding: 24px;
}
.overlay.show { opacity: 1; visibility: visible; }
.overlay-inner {
  text-align: center;
  transform: scale(.8);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.overlay.show .overlay-inner { transform: scale(1); }
.sad-kitten {
  font-size: 5rem;
  animation: shake .5s ease-in-out infinite;
}
@keyframes shake {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.overlay h2 {
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  line-height: 1.25;
  max-width: 12ch;
  margin: 14px auto 6px;
}

/* ---------- lights out ending ---------- */
.lightsout {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  background: #0c0409;
  color: #e9c9d8;
  opacity: 0;
  transition: opacity .9s ease;
}
.lightsout:not(.on) { pointer-events: none; }
.lightsout.on { opacity: 1; }

.lo-content {
  max-width: 340px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease .7s, transform .7s ease .7s;
}
.lightsout.on .lo-content { opacity: 1; transform: translateY(0); }

.sad-cat { position: relative; width: 130px; margin: 0 auto 18px; }
.sad-cat svg { display: block; width: 100%; height: auto; overflow: visible; }

.zzz {
  position: absolute;
  left: 74%;
  top: 12%;
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-weight: 700;
  color: #b7c9e8;
  opacity: 0;
  transform: translateY(0) scale(.6);
  animation: zfloat 3.6s ease-in-out infinite;
}
.zzz1 { font-size: 16px; animation-delay: 0s; }
.zzz2 { font-size: 21px; animation-delay: 1.2s; }
.zzz3 { font-size: 27px; animation-delay: 2.4s; }
@keyframes zfloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-8deg); }
  20%  { opacity: .9; }
  70%  { opacity: .55; }
  100% { opacity: 0; transform: translate(26px, -46px) scale(1.15) rotate(10deg); }
}
.tear { animation: drip 2.6s ease-in infinite; }
@keyframes drip {
  0%, 55%  { transform: translateY(0); opacity: 0; }
  60%      { opacity: .9; }
  100%     { transform: translateY(22px); opacity: 0; }
}

.lo-text {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  opacity: .6;
  margin: 0 0 18px;
}
.lo-punch {
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-size: clamp(1.7rem, 8vw, 2.3rem);
  margin: 0;
  color: #ff77a9;
  text-shadow: 0 0 24px rgba(255, 119, 169, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .btn-yes.loose { transition: none; }
}