@import url('https://fonts.googleapis.com/css2?family=Barrio&family=Playwrite+NZ+Basic:wght@100..400&display=swap');

*{ padding:0; margin:0; box-sizing:border-box; }
body{
  background: linear-gradient(135deg,#2c2626,rgb(91, 35, 255));
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: "Barrio", system-ui;
  font-weight:400;
  overflow:hidden;
  cursor:none; /* hide default cursor */
}

.card{
  background: rgb(54,47,79);
  padding:40px;
  border-radius:20px;
  text-align:center;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

h1{
  margin-bottom:30px;
  color: rgb(191,201,209);
}

button{
  padding:12px 25px;
  font-size:18px;
  border:none;
  border-radius:12px;
  margin:10px;
  cursor:pointer;
  transition:0.3s;
}

#yes{
  background:#fcfcfc;
  color:rgb(17,15,15);
}
#yes:hover{ transform:scale(1.2); }

#no{
  background:#ff4d4d;
  color:white;
  position:absolute;
}

.heart{
  position: fixed;
  top: -20px;
  font-size: 20px;
  animation: fall 3s linear forwards;
  opacity: 0.9;
  pointer-events: none;
}

@keyframes fall {
  0% { transform: translateY(0) rotate(0deg); opacity:1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity:0; }
}

.emoji{ font-size:1px; margin-top:20px; }
#result .emoji{
  font-size:50px;
  animation: pop 0.5s ease forwards;
  display:flex
}

@keyframes pop{
  0% { transform: scale(0); opacity:0; }
  50% { transform: scale(1.2); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}

/* DOG CURSOR */
.dog{
    position:fixed;
    width:60px;
    pointer-events:none;
    z-index:9999;
    transition: transform 0.2s;
}

.dog.active{ transform: scale(1.3) rotate(10deg); }

@keyframes bite {
  0%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.4) rotate(-15deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

.dog.bite{ animation: bite 0.3s linear; }

/* MAGIC CURSOR */
.magic-cursor{
  width:18px;
  height:18px;
  background:white;
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:99999;
  box-shadow:0 0 10px white, 0 0 25px cyan;
}
.cursor-blur{
  width:60px;
  height:60px;
  background:cyan;
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter:blur(25px);
  opacity:0.5;
  z-index:99998;
  transition:0.15s linear;

}