:root {
  --blush: #ffe0ea;
  --petal: #ff7aa8;
  --rose: #e8457f;
  --lilac: #d9c4fb;
  --leaf: #5fbf8f;
  --plum: #4b2447;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--plum);
  background: linear-gradient(160deg, var(--blush), var(--lilac));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* floating hearts */
#hearts { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#hearts span { position: absolute; bottom: -40px; animation: rise linear forwards; opacity: .7; }
@keyframes rise { to { transform: translateY(-115vh) rotate(25deg); opacity: 0; } }

/* screens */
.screen {
  display: none; position: relative; z-index: 1;
  min-height: 100%; padding: 28px 18px 48px;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center;
}
.screen.active { display: flex; animation: fadeIn .6s ease; }
@keyframes fadeIn { from { opacity: 0; transform: scale(.96); } }

h1.big { font-size: clamp(2rem, 7vw, 3.4rem); color: var(--rose); }
.sub { font-size: 1.2rem; }

/* buttons */
.btn {
  font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  border: 0; border-radius: 999px; padding: 12px 28px; color: #fff;
  background: var(--rose); box-shadow: 0 6px 0 #b82d60;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-3px) scale(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b82d60; }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }
.btn.alt { background: #9b6de0; box-shadow: 0 6px 0 #6f43b0; }
.btn.alt:active { box-shadow: 0 2px 0 #6f43b0; }
.big-btn { font-size: 1.5rem; padding: 20px 38px; }
.menu-btns { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 12px; }
.back { background: var(--plum); box-shadow: 0 6px 0 #25102a; margin-top: 10px; }
.back:active { box-shadow: 0 2px 0 #25102a; }

/* lock */
.lock-card {
  background: #fff; border-radius: 32px; padding: 36px 30px; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 14px 40px rgba(75, 36, 71, .18);
}
.lock-icon { font-size: 3.2rem; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(6deg); } }
.hint { font-size: .95rem; opacity: .7; }
.lock-card input {
  width: 100%; font: inherit; font-size: 1.1rem; text-align: center; padding: 12px 16px;
  border: 3px solid var(--lilac); border-radius: 999px; color: var(--plum);
}
.error { min-height: 1.4em; color: var(--rose); font-weight: 600; }
.shake { animation: shake .45s; }
@keyframes shake { 25% { transform: translateX(-12px); } 50% { transform: translateX(12px); } 75% { transform: translateX(-8px); } }

/* tulips */
.pop { animation: pop 1s 1.8s both cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.garden { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: min(640px, 100%); height: 330px; }
.tulip { width: 19%; transform-origin: 50% 100%; animation: bloom 1.5s var(--d) both cubic-bezier(.3, 1.4, .5, 1); cursor: pointer; }
.tulip svg { display: block; width: 100%; overflow: visible; transform-origin: 50% 100%; animation: sway 4s var(--d) ease-in-out infinite; }
.tulip:hover svg { animation-duration: .6s; }
@keyframes bloom { from { transform: scale(0); } }
@keyframes sway { 50% { transform: rotate(3deg); } 0%, 100% { transform: rotate(-3deg); } }

/* letter */
.envelope-wrap { perspective: 800px; }
.envelope {
  position: relative; width: 260px; height: 170px; background: #ff9fbd; border-radius: 10px;
  cursor: pointer; box-shadow: 0 12px 30px rgba(75, 36, 71, .25); transition: transform .3s;
}
.envelope:hover { transform: translateY(-4px) rotate(-1.5deg); }
.flap {
  position: absolute; inset: 0 0 auto 0; height: 100px; background: #ff7aa8;
  clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 10px 10px 0 0;
}
.heart-seal { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); font-size: 2rem; animation: beat 1.2s infinite; }
@keyframes beat { 50% { transform: translateX(-50%) scale(1.25); } }
.tap { position: absolute; bottom: 14px; width: 100%; color: #fff; font-weight: 600; }
.paper {
  display: none; width: min(560px, 100%); text-align: left; padding: 34px 30px;
  background: #fffdf8 repeating-linear-gradient(transparent 0 33px, #f5d7e2 33px 34px);
  border-radius: 8px; box-shadow: 0 14px 40px rgba(75, 36, 71, .22);
  font-family: 'Caveat', cursive; font-size: 1.55rem; line-height: 34px;
}
.paper h2 { font-size: 2.2rem; color: var(--rose); line-height: 1.3; margin-bottom: 10px; }
.paper p { margin-bottom: 34px; }
.paper .sign { margin: 10px 0 0; text-align: right; }
.letter-open .envelope-wrap { display: none; }
.letter-open .paper { display: block; animation: slideUp .9s cubic-bezier(.2, 1, .3, 1); }
@keyframes slideUp { from { transform: translateY(80px) scale(.9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; animation-delay: 0s !important; } }