/* style.css */

/* 全局样式 */
*,
*::before,
*::after {
    box-sizing: border-box; /* 确保 padding 和 border 包含在元素的总尺寸内 */
}

/* Body 样式 */
body {
    margin: 0;
    padding: 0;
    background-color: #faf8ef; /* 经典的 2048 背景色 */
    font-family: 'Arial', sans-serif;
    color: #776e65; /* 默认文字颜色 */
    text-align: center; /* 所有文本和内联元素居中 */
}

/* 游戏容器包裹层 */
#game-wrapper {
    max-width: 500px; /* 最大宽度，适用于桌面 */
    width: 90%; /* 相对于视口宽度的响应式宽度 */
    margin: 0 auto; /* 水平居中 */
    padding-top: 20px; /* 顶部内边距，避免与浏览器边缘贴近 */
}

/* 标题样式 */
h1 {
    margin: 0;
    font-size: 2.5em; /* 大标题字体大小 */
    font-weight: bold;
    color: #776e65;
}

/* 得分容器样式 */
#score-container {
    display: flex; /* 使用 Flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 1.5em; /* 得分区域字体大小 */
    color: #776e65;
    margin: 20px 0; /* 上下外边距，增加与其他元素的间距 */
}

#score-container #score {
    margin-right: 20px; /* 分数和按钮之间的间距 */
}

/* 重新开始按钮样式 */
#restart-button {
    font-size: 1em; /* 按钮字体大小 */
    padding: 0.5em 1em; /* 按钮内边距 */
    background-color: #8f7a66; /* 按钮背景色 */
    color: #f9f6f2; /* 按钮文字颜色 */
    border: none; /* 无边框 */
    border-radius: 3px; /* 圆角 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: background-color 0.2s; /* 背景色过渡效果 */
}

#restart-button:hover {
    background-color: #9f8b7b; /* 悬停时的背景色 */
}

/* 游戏容器样式 */
#game-container {
    position: relative; /* 使子元素（方块）绝对定位相对于此容器定位 */
    width: 475px; /* 容器宽度 = padding*2 + tileSize*4 + gapSize*3 = 15*2 + 100*4 + 15*3 = 475px */
    height: 475px; /* 容器高度，同宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 15px; /* 内边距，确保方块不贴边 */
    background-color: #bbada0; /* 游戏背景色 */
    border-radius: 6px;
    touch-action: none; /* 禁用默认的触摸行为 */
    box-sizing: border-box; /* 确保内边距包含在总尺寸内 */
    overflow: hidden; /* 隐藏溢出的内容 */
    margin-bottom: 20px; /* 与消息容器间距 */
}

/* 方块样式 */
.tile {
    position: absolute; /* 绝对定位，基于 #game-container */
    width: 100px; /* 方块宽度 */
    height: 100px; /* 方块高度 */
    background-color: #cdc1b4; /* 默认方块颜色 */
    border-radius: 3px;
    display: flex; /* 使用 Flex 布局居中内容 */
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 55px; /* 默认字体大小 */
    color: #776e65; /* 默认文字颜色 */
    overflow: hidden; /* 确保内容不溢出 */
    text-align: center;
    padding: 5px;
    box-sizing: border-box; /* 包含内边距在内 */
    transition: top 0.2s, left 0.2s; /* 平滑过渡动画 */
}

/* 根据方块数值设置背景颜色和文字颜色 */
.tile[data-value='2']    { background-color: #eee4da; color: #776e65; }
.tile[data-value='4']    { background-color: #ede0c8; color: #776e65; }
.tile[data-value='8']    { background-color: #f2b179; color: #f9f6f2; }
.tile[data-value='16']   { background-color: #f59563; color: #f9f6f2; }
.tile[data-value='32']   { background-color: #f67c5f; color: #f9f6f2; }
.tile[data-value='64']   { background-color: #f65e3b; color: #f9f6f2; }
.tile[data-value='128']  { background-color: #edcf72; color: #f9f6f2; }
.tile[data-value='256']  { background-color: #edcc61; color: #f9f6f2; }
.tile[data-value='512']  { background-color: #edc850; color: #f9f6f2; }
.tile[data-value='1024'] { background-color: #edc53f; color: #f9f6f2; }
.tile[data-value='2048'] { background-color: #edc22e; color: #f9f6f2; }

/* 无尽模式下方块颜色 */
.tile.endless[data-value='2048'] { background-color: #3c3a32; color: #f9f6f2; }
.tile.endless[data-value='4096'] { background-color: #3c3a32; color: #f9f6f2; }
.tile.endless[data-value='8192'] { background-color: #3c3a32; color: #f9f6f2; }

/* 根据数字长度调整字体大小 */
.tile[data-length='3'] { font-size: 45px; }
.tile[data-length='4'] { font-size: 35px; }
.tile[data-length='5'] { font-size: 30px; }

/* 新方块动画 */
.tile.new {
    animation: pop 0.2s;
}

@keyframes pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* 合并方块动画 */
.tile.merge {
    animation: merge 0.2s;
}

@keyframes merge {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 消息显示区域样式 */
#message-container {
    font-size: 1.5em; /* 消息字体大小 */
    color: #776e65;
    margin-top: 10px;
}

/* 响应式设计 */

/* 针对平板和较大手机屏幕 */
@media (max-width: 600px) {
    /* 调整游戏容器 */
    #game-wrapper {
        max-width: 100%;
        width: 100%;
    }
    #game-container {
        width: 90vw; /* 宽度为视口宽度的90% */
        height: 90vw; /* 保持正方形 */
        padding: 5vw; /* 内边距为视口宽度的5% */
    }

    /* 调整方块尺寸 */
    .tile {
        width: calc((100% - 60px) / 4); /* (容器宽度 - 间隙总和) / 4 */
        height: calc((100% - 60px) / 4);
        font-size: 2em; /* 调整字体大小 */
    }

    /* 根据数字长度调整字体大小 */
    .tile[data-length='3'] { font-size: 1.8em; }
    .tile[data-length='4'] { font-size: 1.5em; }
    .tile[data-length='5'] { font-size: 1.2em; }

    /* 调整标题字体大小 */
    h1 {
        font-size: 2em;
    }

    /* 调整得分容器字体大小 */
    #score-container {
        font-size: 1.2em;
    }

    /* 调整重新开始按钮字体大小和内边距 */
    #restart-button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }

    /* 调整消息显示区域字体大小 */
    #message-container {
        font-size: 1.2em;
    }
}

/* 针对小型手机屏幕 */
@media (max-width: 400px) {
    #game-wrapper {
        max-width: 100%;
        width: 100%;
    }
    /* 调整游戏容器 */
    #game-container {
        width: 95vw; /* 宽度为视口宽度的95% */
        height: 95vw; /* 保持正方形 */
        padding: 2.5vw; /* 内边距为视口宽度的2.5% */
    }

    /* 调整方块尺寸 */
    .tile {
        width: calc((100% - 45px) / 4); /* (容器宽度 - 间隙总和) / 4 */
        height: calc((100% - 45px) / 4);
        font-size: 1.8em; /* 调整字体大小 */
    }

    /* 根据数字长度调整字体大小 */
    .tile[data-length='3'] { font-size: 1.5em; }
    .tile[data-length='4'] { font-size: 1.2em; }
    .tile[data-length='5'] { font-size: 1em; }

    /* 调整标题字体大小 */
    h1 {
        font-size: 1.5em;
    }

    /* 调整得分容器字体大小 */
    #score-container {
        font-size: 1em;
    }

    /* 调整重新开始按钮字体大小和内边距 */
    #restart-button {
        font-size: 0.8em;
        padding: 0.3em 0.6em;
    }

    /* 调整消息显示区域字体大小 */
    #message-container {
        font-size: 1em;
    }
}