* {
    box-sizing: border-box;
}


body {

    margin:0;

    padding:0;

    background:#faf8ef;

    font-family: Arial, Helvetica, sans-serif;

    color:#776e65;

}


.container {

    width:500px;

    max-width:95vw;

    margin:40px auto;

    text-align:center;

}



h1 {

    font-size:80px;

    margin:0 0 20px;

    font-weight:bold;

    color:#776e65;

}



/* 分数区域 */

.top-panel {

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:20px;

}



.score-box {


    background:#bbada0;

    color:white;

    min-width:120px;

    padding:10px 20px;

    border-radius:8px;

}



.score-box .label {


    font-size:14px;

    opacity:.8;

}



.score-box div:last-child {


    font-size:28px;

    font-weight:bold;

}



/*按钮*/


button {


    border:none;

    background:#8f7a66;

    color:white;

    font-size:18px;

    padding:12px 25px;

    border-radius:6px;

    cursor:pointer;

    margin-bottom:25px;

}


button:hover {


    background:#9f8b77;

}



/*棋盘*/


#board {


    width:500px;

    height:500px;

    padding:15px;

    background:#bbada0;

    border-radius:10px;


    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-template-rows:repeat(4,1fr);

    gap:15px;


    position:relative;

}



.cell {


    background:#cdc1b4;

    border-radius:6px;


}



/* 方块 */


.tile {


    position:absolute;


    width:calc((100% - 45px)/4);

    height:calc((100% - 45px)/4);


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:6px;


    font-size:45px;

    font-weight:bold;


    transition:

    transform .15s ease,

    background .15s ease;


    animation:appear .15s ease;


}



@keyframes appear {


    from {

        transform:scale(0);

    }


    to {

        transform:scale(1);

    }


}



/* 数字颜色 */


.tile-2 {

    background:#eee4da;

    color:#776e65;

}


.tile-4 {

    background:#ede0c8;

    color:#776e65;

}


.tile-8 {

    background:#f2b179;

    color:white;

}


.tile-16 {

    background:#f59563;

    color:white;

}


.tile-32 {

    background:#f67c5f;

    color:white;

}


.tile-64 {

    background:#f65e3b;

    color:white;

}


.tile-128 {

    background:#edcf72;

    color:white;

    font-size:40px;

}


.tile-256 {

    background:#edcc61;

    color:white;

    font-size:40px;

}


.tile-512 {

    background:#edc850;

    color:white;

    font-size:35px;

}


.tile-1024 {


    background:#edc53f;

    color:white;

    font-size:32px;

}


.tile-2048 {


    background:#edc22e;

    color:white;

    font-size:32px;

}



/* 游戏提示 */


.tip {

    margin-top:25px;

    color:#776e65;

    font-size:16px;

}



/*胜利失败*/


#game-message {


    display:none;


    position:fixed;

    left:0;

    top:0;

    right:0;

    bottom:0;


    background:rgba(250,248,239,.8);


    z-index:10;


    justify-content:center;

    align-items:center;

    flex-direction:column;


}



#message-text {


    font-size:50px;

    font-weight:bold;

    margin-bottom:30px;

}



/* 手机 */


@media(max-width:600px){


.container {


    margin-top:20px;

}



h1 {


    font-size:55px;

}



#board {


    width:95vw;

    height:95vw;

    padding:10px;

    gap:10px;

}



.tile {


    font-size:30px;


    width:calc((100% - 30px)/4);

    height:calc((100% - 30px)/4);


}



}