body {
  background-color: #000;
}

/* Cube Container */
.cube-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Base Cube Style */
.cube {
  position: absolute;
  width: 20px;
  height: 20px;
  animation: floatCube linear infinite;
  opacity: 0.9;
  border: 1px solid #5a3e2b;
  box-shadow: inset 0 0 0 1px #5a3e2b;
}

/* Dirt Cube */
.dirt-cube {
  background-color: #7d5a3c;
  background-image:
    linear-gradient(to top, #6b8e23 20%, transparent 20%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px);
  background-size: 100% 100%, 10px 10px, 10px 10px;
}

/* Ore Cube (e.g., Diamond Ore) */
.ore-cube {
  background-color: #3a3a3a;
  background-image:
    radial-gradient(circle at 20% 30%, #00f0ff 0%, #00f0ff 10%, transparent 10%),
    radial-gradient(circle at 70% 60%, #00f0ff 0%, #00f0ff 10%, transparent 10%),
    radial-gradient(circle at 50% 80%, #00f0ff 0%, #00f0ff 10%, transparent 10%);
  background-size: 100% 100%;
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}

/* Cobblestone Cube */
.cobblestone-cube {
  background-color: #7f7f7f;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px);
  background-size: 10px 10px;
  border: 1px solid #333333;
  box-shadow: inset 0 0 0 1px #555555;
}

/* Gold Cube */
.gold-cube {
  background-color: #f1c232;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px);
  background-size: 10px 10px;
  border: 1px solid #b5a400;
  box-shadow: inset 0 0 0 1px #b5a400;
}

/* Bedrock Cube */
.bedrock-cube {
  background-color: #2a2a2a;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px);
  background-size: 10px 10px;
  border: 1px solid #1a1a1a;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}

/* Ancient Debris Cube */
.ancient-debris-cube {
  background-color: #6b6b6b;
  background-image:
    radial-gradient(circle at 20% 30%, #c9b2a6 0%, #c9b2a6 10%, transparent 10%),
    radial-gradient(circle at 70% 60%, #c9b2a6 0%, #c9b2a6 10%, transparent 10%),
    radial-gradient(circle at 50% 80%, #c9b2a6 0%, #c9b2a6 10%, transparent 10%);
  background-size: 100% 100%;
  border: 1px solid #3b3b3b;
  box-shadow: inset 0 0 0 1px #6d6d6d;
}

/* Wood Cube */
.wood-cube {
  background-color: #8e684f; /* Rich wood tone */
  background-image:
    linear-gradient(45deg, #a06d3b 25%, transparent 25%),
    linear-gradient(-45deg, #a06d3b 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #a06d3b 75%),
    linear-gradient(-45deg, transparent 75%, #a06d3b 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: 1px solid #5a3e2b;
  box-shadow: inset 0 0 0 1px #5a3e2b;
}

/* Oak Planks Cube */
.oak-planks-cube {
  background-color: #505050; /* Light oak color */
  background-image:
    repeating-linear-gradient(0deg, #d2b48c 0, #d2b48c 2px, #deb887 2px, #deb887 6px);
  border: 1px solid #bfa174;
  box-shadow: inset 0 0 0 1px #bfa174;
}


/* Keyframes for Cube Animation */
@keyframes floatCube {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0.9;
  }
}

/* NEW: make all text container(s) appear above cubes */
#home > *:not(.cube-container) {
  position: relative;
  z-index: 1;
}



/* Logo float animation: up and down */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Shine effect: moving diagonal white gradient */
@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Pulse glow around logo using drop-shadow filter */
@keyframes pulseGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(112, 159, 62, 0.6))
      drop-shadow(0 0 15px rgba(112, 159, 62, 0.3));
  }
  50% {
    filter:
      drop-shadow(0 0 15px rgba(112, 159, 62, 0.9))
      drop-shadow(0 0 25px rgba(112, 159, 62, 0.5));
  }
}


/* Apply all animations to logo */
.logo-animate {
  animation: floatUpDown 4s ease-in-out infinite, pulseGlow 3.5s ease-in-out infinite;
  position: relative;
  display: inline-block;
  overflow: visible; /* allow glow outside image box */
  z-index: 1;
}

.logo-animate::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 3s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Thicker scrollbar - 16px width */

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #0f0f0f; /* Dark track */
}

::-webkit-scrollbar-thumb {
  background-color: #709F3E; /* Tailwind green-500 */
  border-radius: 8px;
  border: 4px solid #0f0f0f; /* Adds space around thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #709F3E; /* Tailwind green-600 */
}

/* Firefox */
* {
  scrollbar-width: auto; /* 'auto' for thicker scrollbar */
  scrollbar-color: #709F3E #0f0f0f; /* thumb and track colors */
}




/* tnt block */
.cube {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.tnt-cube {
  background-color: red;
  border: 2px solid #800;
  border-radius: 4px;
}

.explosion-effect {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, white 0%, rgba(255,255,255,0.5) 50%, transparent 70%);
  animation: explode 0.5s forwards;
  pointer-events: none;
}

.small-explosion-block {
  position: absolute;
  background: white;
  border-radius: 2px;
  animation: fly 0.5s forwards;
}

@keyframes explode {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

@keyframes fly {
  0% { transform: translate(-50%, -50%) translate(0,0); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); opacity: 0; }
}

.tnt-flash {
  filter: brightness(2);
}