/* game_2048.css - 2048 게임 전용 스타일 */

.score-container { font-size: 24px; margin-bottom: 20px; }

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 2vw;
    width: 95vw;
    max-width: 500px;
    margin: 0 auto;
    background-color: var(--color-grid-bg-2048, #b0bec5);
    padding: 2vw;
    border-radius: 6px;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    touch-action: none;
    box-shadow: var(--shadow-default);
}

@media (min-width: 481px) {
    #game-board { grid-gap: 10px; padding: 10px; }
}


.tile {
    width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
    font-weight: bold; border-radius: 3px;
    background-color: var(--color-tile-empty, #eceff1);
    font-size: 5vw; line-height: 1;
}

@media (min-width: 481px) { .tile { font-size: 30px; } }

/* 타일 색상 */
.tile-2 { background-color: var(--color-tile-2, #e3f2fd); color: #333; }
.tile-4 { background-color: var(--color-tile-4, #bbdefb); color: #333; }
.tile-8 { background-color: #90CAF9; color: #fff; }
.tile-16 { background-color: #64B5F6; color: #fff; }
.tile-32 { background-color: #42A5F5; color: #fff; }
.tile-64 { background-color: #2196F3; color: #fff; }
.tile-128 { background-color: #1E88E5; color: #fff; }
.tile-256 { background-color: #1976D2; color: #fff; }
.tile-512 { background-color: #1565C0; color: #fff; }
.tile-1024 { background-color: #0D47A1; color: #fff; }
.tile-2048 { background-color: #283593; color: #fff; }
.tile-4096 { background-color: #3F51B5; color: #fff; }
.tile-8192 { background-color: #673AB7; color: #fff; }
.tile-16384 { background-color: #4527A0; color: #fff; }
.tile-32768 { background-color: #311B92; color: #fff; }