body {
  margin: 0;
  font-family: "Times New Roman", serif;
  background: linear-gradient(120deg, #ffc0cb, #ffb6c1, #ff69b4);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  overflow: hidden;
  text-align: center;
}

@keyframes gradientBG {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.page {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s;
}

.page.active { opacity: 1; pointer-events: auto; }

h1, h2, h3 { color: #ff2f92; }

.click-img {
  width: 80%; max-width: 300px;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer;
}

.pop-text { font-size: 28px; margin-top: 20px; animation: pop 0.6s ease; }
.hidden { display: none; }

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

.next-btn {
  margin-top: 20px;
  font-size: 22px;
  background: #ff5fa2;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px 25px;
  cursor: pointer;
  box-shadow: 0 0 10px #ff5fa2;
  transition: all 0.3s ease;
}

.next-btn:hover {
  box-shadow: 0 0 20px #ff5fa2, 0 0 30px #ff2f92;
  transform: scale(1.05);
}

.emoji-egg { position: absolute; font-size: 30px; cursor: pointer; }
.hint-text { margin-top: 10px; font-size: 16px; color: #fff; }
.egg-text { font-size: 22px; margin-top: 10px; color: yellow; font-weight: bold; }

#gameArea, #miniGameArea { position: relative; width: 100%; height: 60vh; margin-top: 20px; }
.heart, .mini-emoji { position: absolute; font-size: 50px; cursor: pointer; user-select: none; transition: transform 0.2s; }
.heart:active, .mini-emoji:active { transform: scale(1.3); }

#win, #miniGameWin { font-size: 40px; color: #ff006e; margin-top: 20px; }

.quiz-btn { margin: 5px; font-size: 20px; padding: 8px 12px; cursor: pointer; border-radius: 10px; background: #ff5fa2; color: white; border: none; }
.quiz-btn:active { transform: scale(0.95); }
.quiz-feedback { margin-top: 10px; font-weight: bold; font-size: 20px; color: yellow; }

.sparkle {
  position: absolute;
  top: -50px;
  font-size: 15px;
  opacity: 0.7;
  pointer-events: none;
  animation: sparkleFall 5s linear infinite;
}

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