/* Style spécifique pour 2048 */
.game-board-2048 {
    background-color: var(--color-slate-09);
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-large);
    position: relative;
    width: 340px;
    height: 340px;
    margin: 0 auto;
    /* Swipe mobile: bloque pull-to-refresh et scroll natif */
    touch-action: none;
    overscroll-behavior: contain;
}

.grid-container-2048 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
}

.cell-2048 {
    background-color: var(--color-slate-08);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
    transition: all 0.1s ease-in-out;
}

/* Couleurs des tuiles basées sur tes tokens */
.tile-2 { background-color: var(--color-purple-02); color: var(--color-purple-10); }
.tile-4 { background-color: var(--color-purple-05); color: white; }
.tile-8 { background-color: var(--color-orange-05); }
.tile-16 { background-color: var(--color-orange-07); }
.tile-32 { background-color: var(--color-coral-05); }
.tile-64 { background-color: var(--color-coral-10); }
.tile-128 { background-color: var(--color-emerald-02); color: var(--color-emerald-10); }
.tile-256 { background-color: var(--color-emerald-10); box-shadow: 0 0 10px var(--color-emerald-02); }
.tile-512, .tile-1024, .tile-2048 { 
    background-color: var(--color-gold-10); 
    box-shadow: 0 0 15px var(--color-gold-10);
}

.score-display {
    align-content: center;
    background: var(--color-slate-08);
    padding: 5px 15px;
    border-radius: var(--radius-small);
    font-family: monospace;
    color: var(--color-purple-10);
}

.key-arrow {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}

.key-btn:hover:not(:disabled) {
    background: var(--color-slate-07);
    border: solid 1px;
    transform: translateY(-2px);
}

.key-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

@media (max-width: 600px) {
    .game-board-2048 {
        width: 280px;
        height: 280px;
    }

    .key-arrow {
        width: 3rem;
        height: 3rem;
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .game-board-2048 {
        width: 240px;
        height: 240px;
    }

    .key-arrow {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
    }
}