body {
  font-family: "Nunito", sans-serif;
  background: linear-gradient(135deg, #87ceeb 0%, #98fb98 50%, #90ee90 100%);
  position: relative;
  margin: 0;
  padding: 0;
  /* FIX: Remove overflow hidden and height constraint to allow scrolling */
  min-height: 100vh;
  overflow-y: auto;
}

/* Floating background particles */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    );
  background-size: 100px 100px, 50px 50px;
  animation: float 20s infinite linear;
  pointer-events: none;
  z-index: 1;
}

/* Main Game Area Container */
.game-container {
  position: relative;
  z-index: 2;
  justify-content: center;
  overflow: visible;
  /* FIX: Remove height constraint and allow natural flow */
  min-height: 100vh;
  padding: 20px 0;
}

/* Ensure slaughter house area doesn't clip tooltips */
.p-3.bg-gray-50.border-b {
  overflow: visible;
  position: relative;
  z-index: 1;
}

h1 {
  font-family: "Fredoka One", cursive;
  animation: titleBounce 3s ease-in-out infinite;
}

/* Scrollbar styling */
.w-64::-webkit-scrollbar,
.w-80::-webkit-scrollbar {
  width: 6px;
}

.w-64::-webkit-scrollbar-track,
.w-80::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.w-64::-webkit-scrollbar-thumb,
.w-80::-webkit-scrollbar-thumb {
  background: var(--primary-green);
  border-radius: 10px;
}

.w-64::-webkit-scrollbar-thumb:hover,
.w-80::-webkit-scrollbar-thumb:hover {
  background: var(--primary-green-dark);
}

.overflow-x-auto::-webkit-scrollbar {
  height: 4px;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: var(--primary-green);
  border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: var(--primary-green-dark);
}

/* Animal Image Base Styles */
.animal-image {
  width: 115px;
  height: 115px;
  object-fit: contain;
  pointer-events: none;
}

.inline-animal-icon {
  width: auto;
  height: 130px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 2px;
  border-radius: 2px;
}

.processing-animal-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  /* Removed the spin animation */
}

/* Removed @keyframes spin */

/* Grid cell base styles */
.grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.grid-cell.occupied {
  background: #f0fdf4;
  border: 2px solid #22c55e;
}

/* Processing animal animation in slaughter house */
.processing-animal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Demo ended popup backdrop */
.demo-ended-backdrop {
  backdrop-filter: blur(4px);
}

/* Button hover effects for buy buttons with images */
.buy-button:hover .inline-animal-icon {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Tooltip animal icons */
.tooltip-animal-row .inline-animal-icon {
  width: 16px;
  height: 16px;
}