* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at top, #3a2348, #16132a 65%);
  color: #fff3e8;
  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
}
.card {
  width: min(100%, 380px);
  background: #302845; border: 4px solid #eeb5cd; box-shadow: 0 0 0 4px #5b426c, 8px 12px 0 4px #0006;
  padding: clamp(18px, 5vw, 28px); text-align: center;
  animation: pop .35s ease-out;
}
.heart {
  width: 48px; height: 42px; margin: 0 auto 10px;
  background:
    linear-gradient(#ff80a9, #ff80a9) 6px 0 / 12px 6px,
    linear-gradient(#ff80a9, #ff80a9) 30px 0 / 12px 6px,
    linear-gradient(#ff80a9, #ff80a9) 0 6px / 48px 18px,
    linear-gradient(#ff80a9, #ff80a9) 6px 24px / 36px 6px,
    linear-gradient(#ff80a9, #ff80a9) 12px 30px / 24px 6px,
    linear-gradient(#ff80a9, #ff80a9) 18px 36px / 12px 6px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: beat 1.3s ease-in-out infinite;
}
h1 { margin: 0; font-size: clamp(20px, 6vw, 26px); color: #ffabc8; text-shadow: 3px 3px #713b70; }
.sub { margin: 8px 0 18px; font-size: 13px; opacity: .85; line-height: 1.5; }
form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
label span { display: block; font-size: 12px; color: #ffd3e4; margin-bottom: 4px; letter-spacing: 1px; }
input {
  width: 100%; font: inherit; font-size: 16px; color: #fff; background: #1e1830;
  border: 2px solid #7d5f86; border-radius: 4px; padding: 11px 12px; outline: none;
}
input:focus { border-color: #ffabc8; box-shadow: 0 0 0 3px #ff80a944; }
button {
  margin-top: 6px; font: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: #ae557f; border: 0; border-bottom: 5px solid #6e355c; border-radius: 4px; padding: 13px;
  touch-action: manipulation;
}
button:hover { filter: brightness(1.1); }
button:active { transform: translateY(3px); border-bottom-width: 2px; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible { outline: 3px solid #ffe59b; outline-offset: 2px; }
.msg { min-height: 1.4em; margin: 0; text-align: center; font-size: 13px; color: #ffcfdf; }
.shake { animation: shake .4s; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } 45% { transform: scale(1.07); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }