:root {
    /* --- 中国象棋古风配色 --- */
    --page-bg: #f4f0e6;
    /* 仿古宣纸背景 */
    --board-border: #8b5a2b;
    /* 暖檀木色边框 */
    --board-bg: #eecfa1;
    /* 浅木纹棋盘面 */
    --cell-bg: #f7e7ce;
    /* 棋格底色 (比棋盘稍亮) */
    --cell-hover: #fffbe6;
    /* 棋格悬停高亮 */

    /* 棋子配色 - 更沉稳的传统色 */
    --red-grad: linear-gradient(135deg, #d84315 0%, #bf360c 100%);
    /* 朱砂红 */
    --blue-grad: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    /* 靛青蓝 */

    /* 暗棋背面配色 - 木质感 + 深色字 */
    --hidden-grad: linear-gradient(135deg, #cd9b6d 0%, #a07452 100%);
    --hidden-text-color: #4e342e;
    /* “斗”字的颜色 */

    --text-shadow-light: 0 1px 1px rgba(255, 255, 255, 0.5);
    --piece-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.4);
}

body {
    font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
    min-height: 100vh;
    background: var(--page-bg);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    color: #3e2723;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-42c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-39 42c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-39 42c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm66-6c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-47-38c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-13-7c0-3.313-2.687-6-6-6s-6 2.687-6 6 2.687 6 6 6 6-2.687 6-6zm59-56c0-3.313-2.687-6-6-6s-6 2.687-6 6 2.687 6 6 6 6-2.687 6-6zm-38 80c0-3.313-2.687-6-6-6s-6 2.687-6 6 2.687 6 6 6 6-2.687 6-6zm37-5c0-3.313-2.687-6-6-6s-6 2.687-6 6 2.687 6 6 6 6-2.687 6-6z' fill='%23e6e0d0' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

h1 {
    margin: 10px 0;
    font-size: 2rem;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    font-family: "KaiTi", "STKaiti", serif;
    font-weight: bold;
}

.main-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
}

.game-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#status {
    margin-bottom: 20px;
    padding: 12px 30px;
    background: #fffaf0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    min-width: 300px;
    transition: all 0.3s;
    border: 2px solid var(--board-border);
    color: var(--board-border);
}

.status-red {
    color: #d84315 !important;
    border-color: #d84315 !important;
    background: #fbe9e7 !important;
}

.status-blue {
    color: #1565c0 !important;
    border-color: #1565c0 !important;
    background: #e3f2fd !important;
}

/* 古风棋盘 */
#board {
    display: grid;
    grid-template-columns: repeat(6, 75px);
    grid-template-rows: repeat(6, 75px);
    gap: 1px;
    background-color: var(--board-border);
    /* 格子线颜色 */
    border: 6px solid var(--board-border);
    padding: 3px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    position: relative;
}

.cell {
    width: 75px;
    height: 75px;
    background-color: var(--cell-bg);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.cell:hover {
    background-color: var(--cell-hover);
}

/* 棋子设计 */
.piece {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: "KaiTi", "STKaiti", serif;
    /* 使用楷体 */
    font-weight: 900;
    z-index: 2;
    box-shadow: var(--piece-shadow);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.2);
    user-select: none;
    position: relative;
    text-shadow: var(--text-shadow-light);
}

.piece small {
    position: absolute;
    font-size: 10px;
    bottom: 3px;
    opacity: 0.7;
    font-weight: normal;
    font-family: sans-serif;
}

/* 暗棋样式 - 背面“斗”字 */
.piece.hidden {
    background: var(--hidden-grad);
    color: var(--hidden-text-color);
    font-size: 32px;
    /* 斗字要大 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), 0 -1px 1px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.1);
}

/* 翻转动画 */
.piece.flipping {
    animation: flipIn 0.4s;
}

.piece:not(.hidden) {
    font-size: 24px;
    /* 翻开后字体恢复正常大小 */
}

@keyframes flipIn {
    0% {
        transform: rotateY(180deg) scale(0.8);
    }

    100% {
        transform: rotateY(0) scale(1);
    }
}

.piece.red {
    background: var(--red-grad);
    color: #ffebee;
}

.piece.blue {
    background: var(--blue-grad);
    color: #e3f2fd;
}

.piece.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #ffd54f, 0 8px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    border-color: #ffd54f;
}

/* 移动提示点 */
.move-hint {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.6;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.4;
    }
}

/* 规则面板 */
.rules-panel {
    background: #fffaf0;
    /* 米色背景 */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 340px;
    font-size: 0.9rem;
    line-height: 1.5;
    height: auto;
    min-height: 400px;
    border: 2px solid var(--board-border);
}

.rules-panel h3 {
    border-bottom: 2px solid var(--board-border);
    padding-bottom: 10px;
    color: var(--board-border);
    font-family: "KaiTi", "STKaiti", serif;
    text-align: center;
}

/* 规则面板 - 新版 Grid 布局 */
.rank-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 20px;
    justify-items: center;
}

.rank-token {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eecfa1;
    border: 2px solid #8b5a2b;
    color: #5d4037;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "KaiTi", "STKaiti", serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 20px;
    position: relative;
    user-select: none;
}

.rank-token:hover {
    transform: scale(1.1);
    background: #fffbe6;
}

.rank-token.active {
    background: #8b5a2b;
    color: #fffaf0;
    border-color: #3e2723;
    transform: scale(1.15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* 角标显示等级 */
.rank-token .sub {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 10px;
    background: #bf360c;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border: 1px solid #fff;
}

#ability-display {
    background: #f3e5d8;
    border: 2px dashed #bcaaa4;
    padding: 15px;
    border-radius: 8px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #4e342e;
    transition: opacity 0.2s;
}

#ability-title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 8px;
    color: #bf360c;
    font-family: "KaiTi", "STKaiti", serif;
}

#ability-desc {
    font-size: 0.95em;
    line-height: 1.6;
}

/* 日志 */
.logs {
    margin-top: 20px;
    width: 100%;
    max-width: 480px;
    height: 100px;
    overflow-y: auto;
    background: #fffaf0;
    padding: 10px;
    border-radius: 4px;
    border: 2px solid var(--board-border);
    font-size: 0.85em;
    color: #5d4037;
}

.logs div {
    padding: 4px 0;
    border-bottom: 1px dashed #d7ccc8;
}

button {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(to bottom, #8b5a2b, #6d4c41);
    color: #f7e7ce;
    border: 2px solid #4e342e;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px #4e342e;
    transition: all 0.1s;
    font-family: "KaiTi", "STKaiti", serif;
}

button:hover {
    transform: translateY(2px);
    box-shadow: 0 2px #4e342e;
}

button:active {
    transform: translateY(4px);
    box-shadow: 0 0 #4e342e;
}

@media (max-width: 900px) {
    .main-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .rules-panel {
        width: 90%;
        order: 2;
        height: auto;
        max-height: none;
        /* 取消高度限制，防止内容溢出 */
    }

    .game-area {
        order: 1;
        width: 100%;
    }

    #board {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
        width: 92vw;
        height: 92vw;
        max-width: 460px;
        max-height: 460px;
        gap: 1px;
        border-width: 4px;
    }

    .cell {
        width: 100%;
        height: 100%;
    }

    .piece {
        width: 85%;
        height: 85%;
        font-size: 5vw;
        border-width: 1px;
    }

    .piece.hidden {
        font-size: 7vw;
    }

    /* 手机上斗字也要大 */

    #status {
        font-size: 0.9rem;
        padding: 8px 10px;
        min-width: auto;
        width: 95%;
        white-space: nowrap;
        overflow-x: auto;
    }

}