/* Cosmetic Tile Themes */

.tile-theme-neon {
  background: linear-gradient(135deg, #1c0b36 0%, #0e051c 100%) !important;
  border: 2px solid #c084fc !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(192, 132, 252, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6) !important;
}

.tile-theme-gold {
  background: linear-gradient(135deg, #fff5c0 0%, #f5c518 40%, #b8860b 80%, #8B6914 100%) !important;
  background-size: 200% 200% !important;
  border: 2px solid #ffe680 !important;
  color: #3d2600 !important;
  box-shadow: 0 4px 16px rgba(212,175,55,0.6), inset 0 1px 2px rgba(255,255,255,0.5) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6) !important;
  animation: shimmer 3s linear infinite;
}

.tile-theme-retro {
  font-family: 'Courier New', Courier, monospace !important;
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%) !important;
  border: 2px solid #f59e0b !important;
  border-radius: 6px !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 0 #b45309, 0 0 8px rgba(245, 158, 11, 0.3) !important;
  text-shadow: 1px 1px 0 #78350f !important;
}

.tile-theme-dark {
  background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #030712 100%) !important;
  border: 1px solid #94a3b8 !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.tile-theme-wood {
  background: repeating-linear-gradient(
    90deg,
    #6b3a2a 0px, #7a4533 6px,
    #5c2e1c 6px, #6b3a2a 12px
  ) !important;
  border: 2px solid #4a2414 !important;
  color: #ffe4b5 !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 2px 2px 0 rgba(0,0,0,0.3) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
}

.tile-theme-ocean {
  background: linear-gradient(135deg, #003d6b 0%, #006994 50%, #00b4d8 100%) !important;
  border: 2px solid #90e0ef !important;
  color: #caf0f8 !important;
  box-shadow: 0 4px 14px rgba(0,180,216,0.4), inset 0 1px 3px rgba(255,255,255,0.2) !important;
  text-shadow: 0 1px 4px rgba(0,60,100,0.8) !important;
  animation: float-up 3s ease-in-out infinite;
}

.tile-theme-lava {
  background: linear-gradient(135deg, #1a0000 0%, #8b1a00 50%, #ff4500 100%) !important;
  border: 2px solid #ff6200 !important;
  color: #ffe0cc !important;
  animation: lava-glow 1.8s ease-in-out infinite;
  text-shadow: 0 0 6px #ff4500 !important;
}

.tile-theme-forest {
  background: linear-gradient(135deg, #1a3a1a 0%, #2d6a2d 60%, #4a9b4a 100%) !important;
  border: 2px solid #78c878 !important;
  color: #d4ffd4 !important;
  box-shadow: 0 4px 12px rgba(45,106,45,0.5), inset 0 1px 3px rgba(120,200,120,0.2) !important;
  text-shadow: 0 1px 3px rgba(0,40,0,0.8) !important;
}

.tile-theme-crystal {
  background: linear-gradient(135deg, #1a0033 0%, #4a0080 50%, #9b59b6 100%) !important;
  border: 2px solid #d7bde2 !important;
  color: #ede !important;
  animation: crystal-sparkle 2.5s ease-in-out infinite;
  text-shadow: 0 0 8px #d7bde2 !important;
}

.tile-theme-candy {
  background: linear-gradient(135deg, #ffb3d9 0%, #ffd6ec 50%, #b3e5fc 100%) !important;
  border: 2px solid #ff69b4 !important;
  color: #880e4f !important;
  box-shadow: 0 4px 12px rgba(255,105,180,0.3), inset 0 1px 3px rgba(255,255,255,0.7) !important;
  text-shadow: 0 1px 2px rgba(136,14,79,0.3) !important;
  animation: candy-bounce 1.5s ease-in-out infinite;
}

.tile-theme-cosmic {
  background: radial-gradient(ellipse at top, #1e0b3b 0%, #0a0019 60%, #000 100%) !important;
  border: 2px solid #7c3aed !important;
  color: #e0c3fc !important;
  animation: twinkle 3s ease-in-out infinite;
  text-shadow: 0 0 8px #a78bfa !important;
}