/* snake-game.css faylının içindəki kod */
.snake-game-section {
 text-align: center;
}
.game-wrapper {
 position: relative;
 display: inline-block;
 background: var(--light-background);
 padding: 20px;
 border-radius: var(--border-radius);
 border: 2px solid var(--secondary-color);
 box-shadow: var(--glow-shadow);
}
.game-header {
 margin-bottom: 15px;
 font-size: 1.5rem;
 color: var(--heading-color);
}
#gameCanvas {
 background-color: var(--primary-color);
 border: 1px solid var(--accent-color);
 max-width: 100%;
 height: auto;
}
#gameOverScreen {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(17, 17, 34, 0.9);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: var(--heading-color);
 z-index: 10;
 border-radius: var(--border-radius);
}
#gameOverScreen h3 {
 font-size: 2.5rem;
 color: var(--secondary-color);
 margin-bottom: 10px;
}
#gameOverScreen p {
 font-size: 1.5rem;
 margin-bottom: 25px;
}
#mobile-controls {
 display: none; /* Desktop-da gizli */
 margin-top: 20px;
 text-align: center;
}
#mobile-controls button {
 background: var(--secondary-color);
 color: var(--primary-color);
 border: none;
 width: 50px;
 height: 50px;
 margin: 5px;
 border-radius: 50%;
 font-size: 1.5rem;
 cursor: pointer;
 transition: transform 0.2s;
}
#mobile-controls button:active {
 transform: scale(0.9);
}

/* Mobil cihazlar üçün idarəetmə düymələrini göstər */
@media (max-width: 768px) {
    #mobile-controls {
        display: block;
    }
}