/* ریست */
* { margin:0; padding:0; box-sizing:border-box }
html, body {
  width:100%; height:100%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fee;
  transition: background 0.5s ease;
  font-family:sans-serif;
}

body.final {
  background:#e74c3c;
}

.container {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.5s ease;
}
body.final .container {
  opacity:0;
}

.heart {
  width:100px;    /* اندازهٔ اولیه */
  height:100px;
  background:#e74c3c;
  transform:rotate(-45deg);
  cursor:pointer;
  animation: beat 1s ease-in-out infinite;
}
.heart::before,
.heart::after {
  content:""; position:absolute;
  width:100%; height:100%;
  background:#e74c3c; border-radius:50%;
}
.heart::before { top:-50%; left:0 }
.heart::after  { top:0;    left:50% }

@keyframes beat {
  0%,100% { transform: scale(1) rotate(-45deg) }
  50%     { transform: scale(1.2) rotate(-45deg) }
}

.flying {
  position:absolute;
  top:0; left:0;
  font-size:1.2rem;
  color:#e74c3c;
  pointer-events:none;
  white-space:nowrap;
}

#finalMessage {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  color:white;
  font-size:3rem;
  opacity:0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
#finalMessage.show {
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}