:root {
    --background-image: url('img/image.jpg');
    --cell-background: #DDA0DD;
    --text-color-hint: rgba(255, 255, 255, 0.6);
    --font-family: monospace;
    --transition-duration: 0.5s;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--background-image) no-repeat center center;
    background-size: cover;
    font-family: var(--font-family);
}

#game-container {
    display: grid;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    gap: 0;
}

.cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--cell-background);
    color: var(--text-color-hint);
    font-size: 2vw;
    user-select: none;
    transition: background var(--transition-duration) ease-out, transform var(--transition-duration) ease-out, color var(--transition-duration) ease-out, text-shadow var(--transition-duration) ease-out; /* Ajout de text-shadow à la transition */
    transform-style: preserve-3d;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.cell.revealed {
    background: transparent;
    color: transparent;
    text-shadow: none;
    transform: scale(1.1);
}

.cell.revealed::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transform: scale(0.5);
    animation: sparkle 0.7s ease-out forwards;
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    70% {
        opacity: 0.5;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

.cell.error-shake {
    animation: error-shake 0.3s ease-in-out;
}

@media (max-width: 768px) {
    :root {
        --background-image: url('img/image-mobile.jpg');
    }

    #game-container {
        perspective: 800px;
        gap: 0px;
    }

    .cell {
        font-size: 4vw;
    }
}