/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;600&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes bounceIn {
  0% { transform: scale(0.9); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* === EFFECTS === */
.cartoon-border {
  border: 4px solid #4A4A4A;
  border-radius: 16px;
  box-shadow: 4px 4px 0px #4A4A4A;
  transition: all 0.2s ease;
}

.cartoon-border:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #4A4A4A;
}

.cartoon-button {
  background: white;
  border: 3px solid #4A4A4A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #4A4A4A;
  transition: all 0.1s;
}

.cartoon-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #4A4A4A;
}

.bg-pattern {
  background-color: #FFF9E6;
  background-image: radial-gradient(#FF6B6B 0.5px, transparent 0.5px), radial-gradient(#FF6B6B 0.5px, #FFF9E6 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.1;
}

/* === MODULE STYLES === */
/* module: game */
#game-canvas {
  background: #FFF9E6;
  border: 6px solid #4A4A4A;
  border-radius: 20px;
  box-shadow: 0 15px 30px -10px rgba(74, 74, 74, 0.2);
}