* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --grass: #5B8731;
  --grass-light: #7CB342;
  --dirt: #8B6914;
  --dirt-dark: #6B4F10;
  --stone: #7F7F7F;
  --stone-dark: #5A5A5A;
  --sky: #87CEEB;
  --bg-dark: #111111;
  --bg-card: #1A1A2E;
  --bg-card-light: #222244;
  --text-primary: #E8E8E8;
  --text-secondary: #A0A0B0;
  --accent: #4FC3F7;
  --accent-warm: #FFB74D;
  --creeper: #4CAF50;
  --error: #FF5252;
}

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

#stars-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#root {
  position: relative;
  z-index: 1;
}

.font-pixel {
  font-family: 'Press Start 2P', cursive;
}

.font-vt {
  font-family: 'VT323', monospace;
}

/* Minecraft button style */
.mc-button {
  background: linear-gradient(180deg, #8B8B8B 0%, #6B6B6B 20%, #585858 80%, #4A4A4A 100%);
  border: 3px solid;
  border-color: #A0A0A0 #3A3A3A #3A3A3A #A0A0A0;
  color: white;
  text-shadow: 2px 2px 0px #3F3F3F;
  image-rendering: pixelated;
  cursor: pointer;
  transition: all 0.1s;
  position: relative;
}

.mc-button:hover {
  background: linear-gradient(180deg, #A0A0A0 0%, #7B7B7B 20%, #686868 80%, #5A5A5A 100%);
  border-color: #B0B0B0 #4A4A4A #4A4A4A #B0B0B0;
}

.mc-button:active {
  background: linear-gradient(180deg, #5A5A5A 0%, #4A4A4A 20%, #585858 80%, #6B6B6B 100%);
  border-color: #3A3A3A #A0A0A0 #A0A0A0 #3A3A3A;
  transform: translateY(1px);
}

.mc-button-green {
  background: linear-gradient(180deg, #6B9B3B 0%, #5B8731 20%, #4A7228 80%, #3D6020 100%);
  border-color: #7CB342 #345018 #345018 #7CB342;
}

.mc-button-green:hover {
  background: linear-gradient(180deg, #7CB342 0%, #6B9B3B 20%, #5B8731 80%, #4A7228 100%);
  border-color: #8DC34A #3D6020 #3D6020 #8DC34A;
}

/* Inventory slot style */
.mc-slot {
  background: #1A1A1A;
  border: 3px solid;
  border-color: #373737 #8B8B8B #8B8B8B #373737;
  image-rendering: pixelated;
}

/* Command block style */
.mc-command {
  background: linear-gradient(135deg, #C77C3C 0%, #D4925A 50%, #B86E30 100%);
  border: 3px solid;
  border-color: #E0A06A #8B5E2A #8B5E2A #E0A06A;
  image-rendering: pixelated;
}

/* Dirt texture border */
.dirt-border {
  background: repeating-linear-gradient(
    90deg,
    #8B6914 0px,
    #8B6914 8px,
    #7A5D12 8px,
    #7A5D12 16px,
    #9B7916 16px,
    #9B7916 24px,
    #6B4F10 24px,
    #6B4F10 32px
  );
  height: 8px;
  image-rendering: pixelated;
}

.grass-top {
  background: repeating-linear-gradient(
    90deg,
    #5B8731 0px,
    #5B8731 8px,
    #4E7A2B 8px,
    #4E7A2B 16px,
    #689B38 16px,
    #689B38 24px,
    #527E2E 24px,
    #527E2E 32px
  );
  height: 4px;
  image-rendering: pixelated;
}

/* Drop zone */
.drop-zone {
  border: 3px dashed #555;
  transition: all 0.3s;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--grass-light);
  background: rgba(91, 135, 49, 0.08);
}

/* Cobblestone footer */
.cobblestone-bg {
  background-color: #4A4A4A;
  background-image: 
    linear-gradient(45deg, #555 25%, transparent 25%),
    linear-gradient(-45deg, #555 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3A3A3A 75%),
    linear-gradient(-45deg, transparent 75%, #3A3A3A 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* Pickaxe spin */
@keyframes spin-pickaxe {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-30deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

.animate-pickaxe {
  animation: spin-pickaxe 0.8s ease-in-out infinite;
  display: inline-block;
}

/* XP bar */
@keyframes xp-fill {
  0% { width: 0%; }
  100% { width: 100%; }
}

.xp-bar-fill {
  animation: xp-fill 3s ease-in-out infinite;
  background: linear-gradient(90deg, #7DFF4D, #4DFF7D);
  height: 100%;
  border-radius: 2px;
}

/* Fade in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Biome tag colors */
.biome-forest { background: #2E7D32; }
.biome-desert { background: #E65100; }
.biome-ocean { background: #0277BD; }
.biome-mountain { background: #546E7A; }
.biome-snow { background: #78909C; }
.biome-taiga { background: #33691E; }
.biome-plains { background: #7CB342; }
.biome-swamp { background: #4E342E; }
.biome-jungle { background: #1B5E20; }
.biome-mushroom { background: #6A1B9A; }
.biome-nether { background: #BF360C; }
.biome-end { background: #311B92; }
.biome-badlands { background: #BF360C; }
.biome-cave { background: #37474F; }
.biome-village { background: #795548; }
.biome-monument { background: #006064; }
.biome-default { background: #455A64; }

/* Picture frame */
.mc-frame {
  border: 8px solid;
  border-color: #8B6914 #5A4310 #5A4310 #8B6914;
  box-shadow: inset 0 0 0 3px #6B4F10, inset 0 0 0 4px #3A2A08;
}

/* Creeper face */
.creeper-face {
  font-size: 48px;
  filter: hue-rotate(90deg);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1A1A1A;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* Pulse animation for loading dots */
@keyframes pulse-dot {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}