/* ===== Base Reset and Fullscreen Lock ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;              /* ✅ prevent scrollbars */
  overscroll-behavior: none;     /* ✅ smooth on mobile */
}

/* ===== Game Container ===== */
#animal-screen {
  position: fixed;               /* ✅ locks to full screen */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;                /* ✅ handles mobile browser bars */
  overflow: hidden;              /* ✅ clips overflowing elements */
  background-color: #f5f5f5;     /* fallback */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* ===== Animal Cards ===== */
.animal-card {
  position: absolute;
  width: 120px;
  height: auto;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 10;
  transition: transform 0.25s ease;
  animation: fadeIn 0.6s ease;
  filter: drop-shadow(0 0 4px white) drop-shadow(0 0 4px black);
}

.animal-card:hover {
  transform: scale(1.2) rotate(-3deg);
  filter: drop-shadow(0 0 10px yellow);
}

/* Optional: Soft circle behind each object */
.animal-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  z-index: -1;
}

/* ===== Fade In Animation ===== */
@keyframes fadeIn {
  0%   { transform: scale(0.2); opacity: 0; }
  80%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* ===== Click Bounce Effect ===== */
@keyframes bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2) rotate(5deg); }
  60%  { transform: scale(0.95) rotate(-5deg); }
  100% { transform: scale(1); }
}

.clicked-bounce {
  animation: bounce 0.5s ease;
}

/* ===== Floating Star (Feedback) ===== */
.floating-star {
  position: absolute;
  font-size: 30px;
  animation: riseFade 1s ease-out;
  z-index: 3000;
}

@keyframes riseFade {
  0%   { transform: translateY(0);   opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}

/* ===== Celebration Overlay ===== */
.celebrations {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 3000;
}

/* ===== Confetti Canvas Overlay ===== */
canvas.confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2000;
}

/* ===== Profile and Navigation Priority ===== */
.user-profile {
  z-index: 1000;
}
#nav-placeholder {
  z-index: 900;
}

/* ===== Mobile Optimization ===== */
@media (max-width: 600px) {
  .animal-card {
    width: 80px;
  }
}