/* Snake Chaos */

.game-container {
    position: relative;
    margin: 16px 0;
    background: #1a1a1a;
    border: 2px inset #808080;
    padding: 8px;
}

#gameBoard {
    display: grid;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background: #0d0d0d;
    border: 2px solid #333;
}

#gameBoard .cell {
    width: 18px;
    height: 18px;
    border: 1px solid #222;
}

#gameBoard .snake {
    background: #00ff00;
}

#gameBoard .snake-head {
    background: #00cc00;
    border: 1px solid #00ff00;
}

#gameBoard .food {
    background: #ff0000;
    border-radius: 2px;
}

#gameBoard .food.special {
    background: #ff00ff;
    animation: food-pulse 0.5s ease-in-out infinite;
}

@keyframes food-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.game-score {
    font-family: "Impact", "Arial Black", sans-serif;
    font-size: 16px;
    color: #00ff00 !important;
}

.effect-display {
    font-size: 12px;
    color: #ffff00 !important;
    padding: 4px 8px;
    background: #333;
    border: 1px solid #666;
}

.game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    border: 3px outset #ff0000;
    padding: 24px;
    text-align: center;
    color: #ffffff !important;
}

.game-over h2 { color: #ff0000 !important; }
.game-over p { color: #ffff00 !important; }

/* Effets chaos - appliqués au game container */
.game-container.snake-inverted { transform: scaleX(-1); }
.game-container.snake-rotated { transform: rotate(5deg); }
.game-container.snake-rotated-more { transform: rotate(15deg); }
.game-container.snake-mirror-y { transform: scaleY(-1); }
.game-container.snake-blur { filter: blur(2px); }
.game-container.snake-speed { animation: speed-pulse 0.2s ease-in-out infinite; }
@keyframes speed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.9; } }