:root {
  --night: #2a0f1c;
  --night-2: #4a1730;
  --paper: #fff4ef;
  --ink: #4b1d2c;
  --rose: #e8476f;
  --rose-dark: #a8284a;
  --blush: #ffc2d1;
  --gold: #f4c46a;
  --f-display: "Yeseva One", Georgia, serif;
  --f-hand: "Caveat", "Segoe Print", cursive;
  --f-body: "Nunito", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: radial-gradient(120% 90% at 50% 0%, var(--night-2), var(--night) 70%);
  background-color: var(--night);
  color: var(--paper);
  font-family: var(--f-body);
  overflow: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

#hearts { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.stage { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; padding-block: 20px; }
.scene { width: min(440px, 100%); display: grid; justify-items: center; gap: 18px; text-align: center; }
[hidden] { display: none !important; }

h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 6.5vw, 2.6rem); line-height: 1.15;
  margin: 0; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--blush); }
.hint { font-family: var(--f-hand); font-size: 1.5rem; color: var(--blush); margin: 0; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }

/* ---------- Cat ---------- */
.cat svg { width: 100%; height: auto; display: block; overflow: visible; }
.cat .tail { transform-origin: 150px 165px; animation: wag 1.2s ease-in-out infinite; }
.cat .ear-l { transform-origin: 75px 55px; animation: twitch 4s ease-in-out infinite; }
.cat .eyes { transform-origin: 100px 88px; animation: blinkEye 4.5s infinite; }
.cat .tear { animation: tear 1.8s ease-in infinite; }
@keyframes wag { 50% { transform: rotate(-16deg); } }
@keyframes twitch { 0%, 90%, 100% { transform: rotate(0); } 94% { transform: rotate(-12deg); } }
@keyframes blinkEye { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes tear { from { transform: translateY(0); opacity: 1; } to { transform: translateY(18px); opacity: 0; } }

.cat-wrap {
  position: relative; width: min(260px, 70vw); border: 0; padding: 0;
  background: none; cursor: pointer; color: inherit; font: inherit;
}
.cat-wrap:focus-visible { outline: 3px solid var(--gold); outline-offset: 8px; border-radius: 16px; }
.cat-wrap.walk-in { animation: walkIn 2.4s cubic-bezier(.3,.7,.3,1) both; }
.cat-wrap.walk-in .cat { animation: hop .4s ease-in-out 6; }
.cat-wrap.idle .cat { animation: bob 2.4s ease-in-out infinite; }
.cat-wrap .envelope { animation: glow 1.6s ease-in-out infinite; }
@keyframes walkIn { from { transform: translateX(-120vw); } to { transform: translateX(0); } }
@keyframes hop { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes glow { 50% { filter: drop-shadow(0 0 10px var(--gold)); } }

.cat-wrap.giving .envelope { animation: give .7s ease-in forwards; }
@keyframes give { to { transform: translate(0, -60px) scale(1.6); opacity: 0; } }

.bubble {
  position: absolute; top: -8px; right: -18px;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-hand); font-size: 1.25rem; font-weight: 700;
  padding: 6px 14px; border-radius: 18px 18px 18px 4px;
  opacity: 0; transform: scale(.6);
  animation: pop .4s 2.4s ease-out forwards;
  white-space: nowrap;
}
@keyframes pop { to { opacity: 1; transform: scale(1); } }

.peek { width: 110px; margin-top: -40px; animation: peek 1s 4.6s both; }
@keyframes peek { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.cat-small { width: 150px; }
.cat-small .cat { animation: bob 2s ease-in-out infinite; }
.happy-jump .cat { animation: jump .7s ease-in-out infinite; }
@keyframes jump { 50% { transform: translateY(-18px) rotate(4deg); } }

/* ---------- Letter ---------- */
.letter {
  background: var(--paper); color: var(--ink);
  border-radius: 4px; padding: 26px 24px 28px; text-align: left; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(232,71,111,.16) 33px 34px);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.letter p { font-family: var(--f-hand); font-size: 1.5rem; line-height: 34px; margin: 0; }
.letter .to { font-weight: 700; color: var(--rose); }
.letter .sign { text-align: right; margin-top: 8px; }
.line { opacity: 0; animation: ink .6s ease forwards; }
.letter .line:nth-child(1) { animation-delay: .3s; }
.letter .line:nth-child(2) { animation-delay: 1s; }
.letter .line:nth-child(3) { animation-delay: 1.9s; }
.letter .line:nth-child(4) { animation-delay: 2.8s; }
.letter .line:nth-child(5) { animation-delay: 3.6s; }
.letter .line:nth-child(6) { animation-delay: 4.4s; }
#toAsk { animation-delay: 5s; }
@keyframes ink { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--f-body); font-weight: 800; font-size: 1.05rem;
  border: 0; border-radius: 999px; padding: 14px 28px; cursor: pointer;
  transition: transform .25s ease;
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-yes { background: var(--rose); color: #fff; box-shadow: 0 6px 0 var(--rose-dark); }
.btn-yes:active { box-shadow: 0 3px 0 var(--rose-dark); }
.btn-no { background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 #c9a9b2; }
.btn-ghost { background: transparent; color: var(--blush); border: 2px solid var(--blush); }

.choices { position: relative; width: 100%; min-height: 130px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-no.runaway { position: fixed; z-index: 5; transition: left .25s ease, top .25s ease, transform .25s ease; }
.tease { font-family: var(--f-hand); font-size: 1.4rem; color: var(--blush); min-height: 1.6em; margin: 0; }

.yay p { font-size: 1.1rem; line-height: 1.6; max-width: 34ch; margin: 0; color: var(--blush); }

@media (max-height: 640px) {
  .cat-wrap { width: min(200px, 60vw); }
  .letter p { font-size: 1.3rem; line-height: 28px; }
  .letter { background-image: repeating-linear-gradient(transparent 0 27px, rgba(232,71,111,.16) 27px 28px); }
  .peek { display: none; }
}

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