/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700&family=Orbitron:wght@400;700;900&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes glow {
  0% { text-shadow: 0 0 5px rgba(34, 211, 238, 0.5), 0 0 10px rgba(34, 211, 238, 0.3); }
  50% { text-shadow: 0 0 20px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.5); }
  100% { text-shadow: 0 0 5px rgba(34, 211, 238, 0.5), 0 0 10px rgba(34, 211, 238, 0.3); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === EFFECTS === */
.glass {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.neon-border {
  border: 1px solid rgba(34, 211, 238, 0.3);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
}

.neon-text {
  animation: glow 3s ease-in-out infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.grid-bg {
  background-image: linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Tetris Block Colors */
.block-I { background-color: #00f0ff; box-shadow: 0 0 10px #00f0ff; }
.block-J { background-color: #0033ff; box-shadow: 0 0 10px #0033ff; }
.block-L { background-color: #ffaa00; box-shadow: 0 0 10px #ffaa00; }
.block-O { background-color: #ffff00; box-shadow: 0 0 10px #ffff00; }
.block-S { background-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
.block-T { background-color: #9900ff; box-shadow: 0 0 10px #9900ff; }
.block-Z { background-color: #ff0000; box-shadow: 0 0 10px #ff0000; }

/* === MODULE STYLES === */
/* module: game */
#game-board {
  display: grid;
  grid-template-rows: repeat(20, minmax(0, 1fr));
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  background: rgba(0, 0, 0, 0.5);
  border: 4px solid #1e293b;
  aspect-ratio: 1/2;
}

.cell {
  width: 100%;
  height: 100%;
  border: 0.5px solid rgba(255, 255, 255, 0.05);
}