/* Base styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Responsive game canvas */
#gameCanvas {
    width: 90vw;
    max-width: 500px;
    height: calc(90vw * 2);
    max-height: 1000px;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

/* Adjust layout for smaller screens */
@media (max-width: 767px) {
    main {
        flex-direction: column;
    }
    .flex.flex-col.gap-6 {
        width: 90vw;
        max-width: 500px;
    }
}
/* Game over overlay animation */
#gameOver {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Button hover effects */
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Piece colors */
.piece-i { background-color: #00f0f0; }
.piece-j { background-color: #0000f0; }
.piece-l { background-color: #f0a000; }
.piece-o { background-color: #f0f000; }
.piece-s { background-color: #00f000; }
.piece-t { background-color: #a000f0; }
.piece-z { background-color: #f00000; }