/* 页面整体样式 */
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background-color: #faf8ef;
    color: #776e65;
}

/* 主标题样式 */
h1 {
    color: #776e65;
    font-size: 50px;
    margin: 0;
    margin-bottom: 10px;
}

/* 游戏信息区域（分数、步数） */
#game-info {
    display: flex;
    width: 320px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}

/* 分数和步数容器样式 */
.score-container, .steps-container {
    background-color: #bbada0;
    color: #f9f6f2;
    padding: 5px 15px;
    border-radius: 3px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 分数和步数数值样式 */
.score-container div, .steps-container div {
    font-size: 14px;
    font-weight: normal;
}

/* 游戏棋盘容器样式 */
.game-container {
    display: grid;
    background-color: #bbada0;
    border-radius: 6px;
    padding: 5px;
    box-sizing: border-box;
}

/* 单个格子样式 */
.tile {
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: bold;
    color: #776e65;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 强制GPU加速，减少卡顿 */
    transform: translateZ(0);
    will-change: transform, background-image;
    transition: background-image 0.05s ease;
}

/* 预定义所有图片类 - 解决卡顿的关键！ */
.tile-2 { background-image: url('/game/images/2.png'); }
.tile-4 { background-image: url('/game/images/4.png'); }
.tile-8 { background-image: url('/game/images/8.png'); }
.tile-16 { background-image: url('/game/images/16.png'); }
.tile-32 { background-image: url('/game/images/32.png'); }
.tile-64 { background-image: url('/game/images/64.png'); }
.tile-128 { background-image: url('/game/images/128.png'); }
.tile-256 { background-image: url('/game/images/256.png'); }
.tile-512 { background-image: url('/game/images/512.png'); }
.tile-1024 { background-image: url('/game/images/1024.png'); }
.tile-2048 { background-image: url('/game/images/2048.png'); }
.tile-4096 { background-image: url('/game/images/4096.png'); }
.tile-8192 { background-image: url('/game/images/8192.png'); }

/* 超大数字使用通用样式 */
.tile-super {
    background-image: url('/game/images/8192.png');
    background-size: 90% 90%;
}

/* 空白格子样式 */
.tile[data-value="0"] {
    background-color: rgba(238, 228, 218, 0.35) !important;
    background-image: none !important;
}

/* 有数字的格子隐藏文字 */
.tile[data-value]:not([data-value="0"]) {
    color: transparent !important;
    text-indent: -9999px;
    background-color: transparent !important;
}

/* 游戏状态显示 */
#gameStatus {
    margin-top: 15px;
    font-size: 20px;
    font-weight: bold;
}

/* 消息提示样式 */
#message {
    color: red;
    margin-top: 10px;
}

/* 底部控制区域 */
#bottom-controls {
    margin-top: 20px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid #ccc;
}

/* 控制组通用样式 */
.control-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* 控制组标签样式 */
.control-group label {
    font-size: 16px;
    color: #776e65;
    white-space: nowrap;
}

/* 输入框样式 */
.control-group input[type="number"],
.control-group input[type="text"] {
    padding: 10px;
    border: 1px solid #bbada0;
    border-radius: 4px;
    font-size: 16px;
    color: #776e65;
    background-color: #f9f6f2;
    box-sizing: border-box;
}

/* 下拉菜单样式 */
.control-group select {
    padding: 8px;
    border: 1px solid #bbada0;
    border-radius: 4px;
    font-size: 16px;
    color: #776e65;
    background-color: #f9f6f2;
}

/* 按钮样式 */
.control-group button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #8f7a66;
    color: #f9f6f2;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 按钮悬停效果 */
.control-group button:hover {
    background-color: #998877;
}

/* 禁用按钮样式 */
.control-group button:disabled {
    background-color: #bbb;
    cursor: not-allowed;
    transform: none;
}

/* 方向按钮容器 */
#direction-buttons-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 方向按钮网格布局 */
#direction-buttons {
    display: grid;
    grid-template-areas:
        ". up ."
        "left center right"
        ". down .";
    gap: 5px;
    width: 150px;
}

/* 方向按钮样式 */
#direction-buttons button {
    padding: 15px;
    font-size: 18px;
    background-color: #8f7a66;
    color: #f9f6f2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 方向按钮悬停效果 */
#direction-buttons button:hover {
    background-color: #998877;
}

/* 各方向按钮位置定义 */
#dir-up { grid-area: up; }
#dir-left { grid-area: left; }
#dir-right { grid-area: right; }
#dir-down { grid-area: down; }

/* 单独撤销按钮样式 */
#undoButtonAlone {
    padding: 15px 25px;
    font-size: 18px;
    background-color: #8f7a66;
    color: #f9f6f2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    height: 48px;
    line-height: 18px;
    box-sizing: border-box;
}

/* 撤销按钮悬停效果 */
#undoButtonAlone:hover {
    background-color: #998877;
}

/* 关于内容区域样式 */
#aboutContent {
    white-space: pre-wrap;
    text-align: left;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    max-width: 600px;
    margin-top: 20px;
    display: none;
    color: #776e65;
    border: 1px solid #bbada0;
}

/* 序列控制区域 */
#sequence-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    padding-bottom: 10px;
    width: 100%;
    max-width: 400px;
}

/* 延迟控制组 */
#delay-control-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
}

/* 延迟输入框 */
#delay-control-group input[type="number"] {
    flex-grow: 1;
    max-width: 100px;
    text-align: center;
}

/* 序列输入行 */
#sequence-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}

/* 序列输入框 */
#sequenceInput {
    flex-grow: 1;
    min-width: 0;
}

/* 播放序列按钮 */
#playSequenceButton {
    white-space: nowrap;
}

/* AI控制组 */
#auto-decide-control-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
}

/* AI控制按钮 */
#auto-decide-control-group button {
    flex-grow: 1;
    max-width: 150px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #8f7a66;
    color: #f9f6f2;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* AI控制按钮悬停效果 */
#auto-decide-control-group button:hover {
    background-color: #998877;
}

/* AI控制按钮禁用状态 - 统一灰色 */
#auto-decide-control-group button:disabled {
    background-color: #bbb !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* 关于按钮区域 */
#about-control-group {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    padding: 20px 0 10px;
}