towerstack-frenzy / style.css
knoeter's picture
hello, i want a towestacking browser game where you habe one start block in the center and you need to drop moving blocks to build a tower as high as possible
3327c96 verified
raw
history blame contribute delete
807 Bytes
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom styles for the game elements */
.cell {
@apply w-12 h-12 flex items-center justify-center border border-gray-700 cursor-pointer;
transition: all 0.2s ease;
}
.cell:hover {
@apply bg-gray-800;
}
.cell.active {
@apply bg-blue-600 text-white;
}
.cell.wall {
@apply bg-gray-700;
}
.cell.start {
@apply bg-green-600;
}
.cell.end {
@apply bg-red-600;
}
.cell.path {
@apply bg-yellow-500;
}
/* Tower game animations */
@keyframes blockDrop {
0% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.block {
animation: blockDrop 0.2s ease-out;
}
/* Responsive game container */
.game-board {
@apply grid gap-0;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}