/* Minecraft Grundstücke - Enhanced Custom Styles */

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
  border: 2px solid #3d2817;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8B4513 0%, #5d3a1a 100%);
  border-radius: 0;
  border: 2px solid #3d2817;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #A0522D 0%, #8B4513 100%);
}

/* ==================== MINECRAFT TEXTURES ==================== */
.mc-dirt-bg {
  background-color: #8B4513;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 4px,
      rgba(0,0,0,0.1) 4px,
      rgba(0,0,0,0.1) 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 4px,
      rgba(0,0,0,0.1) 4px,
      rgba(0,0,0,0.1) 8px
    );
  image-rendering: pixelated;
}

.mc-grass-bg {
  background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 10%, #8B4513 10%, #6D4C41 100%);
}

.mc-stone-bg {
  background-color: #7d7d7d;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(0,0,0,0.15) 4px,
      rgba(0,0,0,0.15) 8px
    );
}

.mc-diamond-bg {
  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 50%, #48D1CC 100%);
}

.mc-gold-bg {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
}

.mc-emerald-bg {
  background: linear-gradient(135deg, #00AA00 0%, #228B22 50%, #32CD32 100%);
}

/* ==================== PIXEL BORDERS ==================== */
.pixel-border {
  border: 4px solid;
  border-image: linear-gradient(45deg, #8B4513, #A0522D, #5d3a1a) 1;
  image-rendering: pixelated;
  box-shadow: 
    4px 4px 0 rgba(0,0,0,0.3),
    -2px -2px 0 rgba(255,255,255,0.1) inset;
}

.pixel-border-gold {
  border: 4px solid;
  border-image: linear-gradient(45deg, #FFD700, #FFA500, #FFD700) 1;
  box-shadow: 
    4px 4px 0 rgba(0,0,0,0.3),
    0 0 20px rgba(255,215,0,0.3);
}

.pixel-border-emerald {
  border: 4px solid;
  border-image: linear-gradient(45deg, #00AA00, #228B22, #00AA00) 1;
  box-shadow: 
    4px 4px 0 rgba(0,0,0,0.3),
    0 0 20px rgba(0,170,0,0.3);
}

/* ==================== GLOWING EFFECTS ==================== */
.glow-green {
  box-shadow: 
    0 0 10px rgba(0, 170, 0, 0.5),
    0 0 20px rgba(0, 170, 0, 0.3),
    0 0 30px rgba(0, 170, 0, 0.1);
}

/* Emerald Glow Animation */
.emerald-glow {
  filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.6));
  animation: emeraldPulse 2s ease-in-out infinite;
}

@keyframes emeraldPulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.9));
  }
}

.glow-gold {
  box-shadow: 
    0 0 10px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.3),
    0 0 30px rgba(255, 215, 0, 0.1);
}

.glow-red {
  box-shadow: 
    0 0 10px rgba(170, 0, 0, 0.5),
    0 0 20px rgba(170, 0, 0, 0.3);
}

.glow-diamond {
  box-shadow: 
    0 0 10px rgba(0, 206, 209, 0.5),
    0 0 20px rgba(0, 206, 209, 0.3),
    0 0 30px rgba(0, 206, 209, 0.1);
}

/* ==================== CONFETTI ==================== */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ==================== CARD EFFECTS ==================== */
.property-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.property-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.property-card:hover::before {
  left: 100%;
}

.property-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(139, 69, 19, 0.3);
}

/* ==================== FORM FIELD ANIMATIONS ==================== */
.form-field {
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
}

.form-field:nth-child(1) { animation-delay: 0ms; }
.form-field:nth-child(2) { animation-delay: 50ms; }
.form-field:nth-child(3) { animation-delay: 100ms; }
.form-field:nth-child(4) { animation-delay: 150ms; }
.form-field:nth-child(5) { animation-delay: 200ms; }
.form-field:nth-child(6) { animation-delay: 250ms; }
.form-field:nth-child(7) { animation-delay: 300ms; }
.form-field:nth-child(8) { animation-delay: 350ms; }
.form-field:nth-child(9) { animation-delay: 400ms; }
.form-field:nth-child(10) { animation-delay: 450ms; }

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== DRAG ZONE PULSE ==================== */
.drag-zone {
  transition: all 0.3s ease;
}

.drag-zone:hover {
  border-color: #FFD700;
  background: rgba(255, 215, 0, 0.05);
}

.drag-zone.active {
  border-color: #00AA00;
  background: rgba(0, 170, 0, 0.1);
  animation: dragPulse 0.5s ease-in-out infinite;
}

@keyframes dragPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ==================== MINECRAFT CHEST BOUNCE ==================== */
.chest-bounce {
  animation: chestBounce 2s ease-in-out infinite;
}

@keyframes chestBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-3deg);
  }
  75% {
    transform: translateY(-15px) rotate(3deg);
  }
}

/* ==================== COMING SOON PULSE ==================== */
.coming-soon-pulse {
  animation: comingSoonPulse 2s ease-in-out infinite;
}

@keyframes comingSoonPulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  50% {
    opacity: 0.6;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
}

/* ==================== NEW ANIMATIONS ==================== */

/* 1. Block Break Animation */
.block-break {
  animation: blockBreak 0.3s ease-out;
}

@keyframes blockBreak {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* 2. Block Place Animation */
.block-place {
  animation: blockPlace 0.3s ease-out;
}

@keyframes blockPlace {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* 3. Floating Animation */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(2deg);
  }
  66% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

/* 4. Pickaxe Mining Animation */
.mining {
  animation: mining 0.5s ease-in-out infinite;
}

@keyframes mining {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}

/* 5. Experience Orb Animation */
.xp-orb {
  animation: xpOrb 1.5s ease-in-out infinite;
}

@keyframes xpOrb {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 5px #7CFC00);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.3) drop-shadow(0 0 15px #7CFC00);
  }
}

/* 6. Portal Shimmer Animation */
.portal-shimmer {
  animation: portalShimmer 2s linear infinite;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(138, 43, 226, 0.3), 
    transparent
  );
  background-size: 200% 100%;
}

@keyframes portalShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 7. Torch Flicker Animation */
.torch-flicker {
  animation: torchFlicker 0.5s ease-in-out infinite alternate;
}

@keyframes torchFlicker {
  0% {
    filter: brightness(1) drop-shadow(0 0 10px #FFA500);
  }
  25% {
    filter: brightness(1.1) drop-shadow(0 0 15px #FFA500);
  }
  50% {
    filter: brightness(0.9) drop-shadow(0 0 8px #FFA500);
  }
  75% {
    filter: brightness(1.05) drop-shadow(0 0 12px #FFA500);
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 10px #FFA500);
  }
}

/* 8. Creeper Approach Animation */
.creeper-approach {
  animation: creeperApproach 3s ease-in-out infinite;
}

@keyframes creeperApproach {
  0%, 100% {
    transform: scale(1);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: scale(1.1);
    filter: hue-rotate(10deg);
  }
}

/* 9. Lava Flow Animation */
.lava-flow {
  animation: lavaFlow 3s ease-in-out infinite;
  background: linear-gradient(180deg, 
    #FF4500 0%, 
    #FF6347 30%, 
    #FF4500 60%, 
    #DC143C 100%
  );
  background-size: 100% 200%;
}

@keyframes lavaFlow {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
}

/* 10. Water Wave Animation */
.water-wave {
  animation: waterWave 2s ease-in-out infinite;
  background: linear-gradient(180deg, 
    rgba(64, 164, 223, 0.8) 0%, 
    rgba(30, 144, 255, 0.9) 50%, 
    rgba(0, 105, 148, 0.8) 100%
  );
}

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

/* 11. Diamond Sparkle Animation */
.diamond-sparkle {
  animation: diamondSparkle 1.5s ease-in-out infinite;
  position: relative;
}

.diamond-sparkle::after {
  content: '✨';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 12px;
  animation: sparkleRotate 2s linear infinite;
}

@keyframes diamondSparkle {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

@keyframes sparkleRotate {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* 12. Enchanted Glow Animation */
.enchanted {
  animation: enchantedGlow 2s ease-in-out infinite;
  position: relative;
}

.enchanted::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(138, 43, 226, 0.2) 50%, 
    transparent 70%
  );
  animation: enchantedShine 1.5s ease-in-out infinite;
}

@keyframes enchantedGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
  }
}

@keyframes enchantedShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 13. Particle Burst Animation */
.particle-burst {
  position: relative;
}

.particle-burst::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
  animation: particleBurst 1s ease-out;
  pointer-events: none;
}

@keyframes particleBurst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* 14. Redstone Pulse Animation */
.redstone-pulse {
  animation: redstonePulse 1s ease-in-out infinite;
}

@keyframes redstonePulse {
  0%, 100% {
    background-color: #8B0000;
    box-shadow: 0 0 5px #FF0000;
  }
  50% {
    background-color: #FF0000;
    box-shadow: 0 0 20px #FF0000;
  }
}

/* 15. TNT Shake Animation */
.tnt-shake {
  animation: tntShake 0.1s ease-in-out infinite;
}

@keyframes tntShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px) rotate(-1deg);
  }
  75% {
    transform: translateX(2px) rotate(1deg);
  }
}

/* ==================== MINECRAFT BUTTON STYLES ==================== */
.mc-btn {
  position: relative;
  background: linear-gradient(180deg, #5a5a5a 0%, #3c3c3c 50%, #2a2a2a 100%);
  border: 2px solid #1a1a1a;
  border-top-color: #7a7a7a;
  border-left-color: #7a7a7a;
  padding: 10px 20px;
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  color: white;
  text-shadow: 2px 2px 0 #3F3F3F;
  transition: all 0.1s ease;
  image-rendering: pixelated;
}

.mc-btn:hover {
  background: linear-gradient(180deg, #6a6a6a 0%, #4c4c4c 50%, #3a3a3a 100%);
  color: #FFFF55;
}

.mc-btn:active {
  border-top-color: #1a1a1a;
  border-left-color: #1a1a1a;
  border-bottom-color: #7a7a7a;
  border-right-color: #7a7a7a;
  transform: translateY(2px);
}

.mc-btn-green {
  background: linear-gradient(180deg, #00AA00 0%, #008800 50%, #006600 100%);
  border-top-color: #22CC22;
  border-left-color: #22CC22;
}

.mc-btn-green:hover {
  background: linear-gradient(180deg, #22CC22 0%, #00AA00 50%, #008800 100%);
}

.mc-btn-red {
  background: linear-gradient(180deg, #AA0000 0%, #880000 50%, #660000 100%);
  border-top-color: #CC2222;
  border-left-color: #CC2222;
}

.mc-btn-red:hover {
  background: linear-gradient(180deg, #CC2222 0%, #AA0000 50%, #880000 100%);
}

/* ==================== MINECRAFT INPUT STYLES ==================== */
.mc-input {
  background: #1a1a1a;
  border: 3px solid #3a3a3a;
  border-top-color: #1a1a1a;
  border-left-color: #1a1a1a;
  border-bottom-color: #5a5a5a;
  border-right-color: #5a5a5a;
  padding: 12px 16px;
  color: white;
  transition: all 0.2s ease;
}

.mc-input:focus {
  outline: none;
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.mc-input::placeholder {
  color: #666;
}

/* ==================== MINECRAFT CARD STYLES ==================== */
.mc-card {
  background: linear-gradient(180deg, #4a4a4a 0%, #3c3c3c 100%);
  border: 3px solid;
  border-top-color: #6a6a6a;
  border-left-color: #6a6a6a;
  border-bottom-color: #2a2a2a;
  border-right-color: #2a2a2a;
  box-shadow: 
    4px 4px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==================== PRICE CALCULATOR STYLES ==================== */
.price-display {
  font-family: 'Press Start 2P', cursive;
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 3px solid #FFD700;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.price-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
  animation: priceShine 3s ease-in-out infinite;
}

@keyframes priceShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ==================== GALLERY IMAGE TRANSITIONS ==================== */
.gallery-image {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.02);
}

/* ==================== MOBILE MENU ==================== */
.mobile-menu-enter {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== STATUS BADGES ==================== */
.status-verfügbar {
  background: linear-gradient(180deg, #00AA00 0%, #008800 100%);
  animation: statusPulse 2s ease-in-out infinite;
}

.status-reserviert {
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
  color: #2C2C2C;
}

.status-verkauft {
  background: linear-gradient(180deg, #AA0000 0%, #880000 100%);
}

@keyframes statusPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 170, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(0, 170, 0, 0.8);
  }
}

/* ==================== LOADING SPINNER ==================== */
.mc-spinner {
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%238B4513' x='4' y='4' width='16' height='16'/%3E%3C/svg%3E");
  animation: mcSpin 1s steps(4) infinite;
}

@keyframes mcSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================== TOOLTIP STYLES ==================== */
.mc-tooltip {
  position: relative;
}

.mc-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  border: 2px solid #5a5a5a;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
}

.mc-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 10px);
}

/* ==================== NOTIFICATION BADGE ==================== */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #AA0000;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  animation: badgePop 0.3s ease-out;
}

@keyframes badgePop {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ==================== PROGRESS BAR ==================== */
.mc-progress {
  background: #1a1a1a;
  border: 3px solid #3a3a3a;
  height: 24px;
  position: relative;
  overflow: hidden;
}

.mc-progress-bar {
  height: 100%;
  background: linear-gradient(180deg, #00AA00 0%, #008800 100%);
  transition: width 0.5s ease;
  position: relative;
}

.mc-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* ==================== CUSTOM HOUSE REQUEST FORM ==================== */
.custom-house-form {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
  border: 4px solid #FFD700;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.3),
    inset 0 0 50px rgba(0, 0, 0, 0.3);
}

.size-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.size-option {
  padding: 15px;
  background: #2a2a2a;
  border: 3px solid #4a4a4a;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.size-option:hover {
  border-color: #FFD700;
  background: #3a3a3a;
}

.size-option.selected {
  border-color: #00AA00;
  background: rgba(0, 170, 0, 0.2);
  box-shadow: 0 0 15px rgba(0, 170, 0, 0.4);
}

/* ==================== SUPABASE LOADING STATE ==================== */
.supabase-loading {
  position: relative;
  overflow: hidden;
}

.supabase-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: supabaseLoading 1.5s infinite;
}

@keyframes supabaseLoading {
  0% { left: -100%; }
  100% { left: 100%; }
}