/*
 * 棋盘样式。
 *
 * 棋盘本体使用 canvas 绘制，CSS 只负责尺寸、边框和阴影。
 * 星位、棋子、热力图和分数文字都在 board-ui.js 中绘制。
 */

#board-shell {
    /*
     * 棋盘外框。
     *
     * box-sizing 已全局设为 border-box，所以 width/height 包含 padding 和 border。
     * 这可以避免 canvas 顶出黑红边框。
     */
    position: relative;
    width: var(--board-frame-size);
    height: var(--board-frame-size);
    padding: 12px;
    background: #0b0b0b;
    border: 10px solid #000;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 8px #b50000;
}

#board-canvas {
    /* 真实棋盘绘制由 JS canvas 完成，CSS 只定义显示尺寸。 */
    display: block;
    width: var(--board-size);
    height: var(--board-size);
    background: #d3a35e;
    cursor: crosshair;
}

#mode-menu {
    /*
     * 覆盖式模式菜单。
     *
     * 它覆盖整个棋盘外框，和旧 Othello 项目的 board-options 作用一致。
     * 选择模式后添加 hidden 类，棋盘立即恢复交互。
     */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 44px);
    background: rgba(0, 0, 0, 0.52);
}

#mode-menu.hidden {
    display: none;
}

.mode-btn {
    /* 模式按钮保持大尺寸，方便触屏和桌面点击。 */
    width: clamp(120px, 14vw, 170px);
    height: clamp(90px, 11vw, 130px);
    border: 0;
    border-radius: 18px;
    color: #111;
    background: #c9854b;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.36), inset 0 2px 2px rgba(255, 255, 255, 0.22);
}

.mode-btn:hover {
    background: #d9975a;
}