/* Whack-a-Mole Custom Styles */

/* Game container */
.game-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

/* Mole grid layout */
.mole-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  width: 100%;
  aspect-ratio: 1/1;
  touch-action: manipulation; /* Prevent zoom on double tap */
}

/* Mole hole styling */
.mole-hole {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Dirt (hole) styling */
.dirt {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;
  background-color: #8b5a2b; /* Brown color for dirt */
  border-radius: 0 0 50% 50%;
  z-index: 2;
}

.dark .dirt {
  background-color: #4b2c15; /* Darker brown for dark mode */
}

/* Mole styling */
.mole {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background-color: #6b4226; /* Mole color */
  border-radius: 50% 50% 40% 40%;
  transition: bottom 0.1s ease-in-out;
  z-index: 2;
  user-select: none;
}

.dark .mole {
  background-color: #5a3921; /* Darker mole color for dark mode */
}

/* Mole face elements */
.mole::before, .mole::after {
  content: '';
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width: 20%;
  height: 20%;
  top: 25%;
}

.mole::before {
  left: 20%;
}

.mole::after {
  right: 20%;
}

/* Mole nose */
.mole-nose {
  position: absolute;
  width: 20%;
  height: 15%;
  background-color: #ff6666;
  border-radius: 50%;
  top: 45%;
  left: 40%;
}

/* Mole active state (showing) */
.mole.active {
  bottom: 20%;
}

/* Golden mole */
.mole.golden {
  background-color: #ffd700;
}

.dark .mole.golden {
  background-color: #d4af37;
}

/* Bomb styling */
.mole.bomb {
  background-color: #000;
  border-radius: 50%;
}

.mole.bomb::before {
  content: '';
  position: absolute;
  width: 20%;
  height: 30%;
  background-color: #444;
  top: -15%;
  left: 40%;
  border-radius: 30% 30% 0 0;
}

/* Whacked mole */
.mole.whacked {
  bottom: 40%;
  background-color: #a83232;
  transition: bottom 0.1s, background-color 0.1s;
}

.mole.golden.whacked {
  background-color: #ffaa33;
}

/* Score popup animation */
@keyframes scorePopup {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-50px); }
}

.score-popup {
  position: absolute;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 10;
  pointer-events: none;
  animation: scorePopup 0.8s ease-out forwards;
}

/* Mole whack animations */
@keyframes whack {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(0.9); }
  100% { transform: translateX(-50%) scale(1); }
}

.whacked {
  animation: whack 0.2s ease-in-out;
}

/* Animation for score */
@keyframes scoreUp {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #10b981; }
  100% { transform: scale(1); }
}

.score-up {
  animation: scoreUp 0.3s ease-in-out;
}

/* Shake animation for bomb hit */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Responsive styles */
@media (max-width: 640px) {
  .mole-grid {
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .mole-grid {
    gap: 8px;
  }
}