body{  font-size: 12px; line-height: 150%; text-align:center}

/* 首页加载提示 */
.home_loading_hint {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.5s ease-out;
}

.loading_spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 215, 0, 0.3);
    border-top: 5px solid #ffd700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loading_text {
    font-size: 24px;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: pulse 1.5s ease-in-out infinite alternate;
    font-family: "Microsoft YaHei", "楷体", serif;
    letter-spacing: 2px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

.home_loading_hint.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

/* 版本号信息 */
.version_info {
    position: fixed;
    top: 20px;
    left: 20px;
    transform: none;
    font-size: 16px;
    color: #ffd700;
    font-weight: 800;
    text-shadow: 
        0 0 5px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 215, 0, 0.5),
        0 0 15px rgba(255, 215, 0, 0.3);
    font-family: "Microsoft YaHei", "楷体", serif;
    letter-spacing: 2px;
    opacity: 0.9;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1001;
}

.version_info:hover {
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(255, 215, 0, 0.5);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 215, 0, 0.6);
}
/* 角色身份标识强化 - 现代重构版 */
.player_side {
    position: absolute;
    width: 153px; /* 适中宽度，从 140px 增加到 153px */
    min-height: 65px; /* 略微增加高度 */
    display: flex;
    flex-direction: row; /* 横向布局 */
    align-items: center;
    gap: 12px; /* 恢复至较舒适的间距 */
    padding: 10px 14px; /* 适中内边距 */
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    text-align: left;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* 布局类：左侧固定位置 */
.side_position_left {
    top: 20px;
    left: -235px; /* 进一步增加间距，避免遮挡局面评价能量条 (从 -210px 调整为 -235px) */
    transform-origin: left center;
}

/* 布局类：右侧相对位置 */
.side_position_right {
    position: relative;
    left: 10px;
    margin-top: 20px;
    transform-origin: right center;
}

/* 头像/图标区域 */
.side_avatar {
    flex-shrink: 0;
    width: 40px; /* 减小尺寸，从 48px 调整为 40px */
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.side_avatar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    pointer-events: none;
}

.side_icon {
    width: 28px; /* 减小尺寸，从 32px 调整为 28px */
    height: 28px;
}

/* 信息区域 */
.side_info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 确保内容在垂直方向居中 */
    gap: 2px;
}

/* AI(黑棋) 皮肤 - 极客黑 */
.black_side {
    background: linear-gradient(135deg, rgba(30, 39, 46, 0.95), rgba(5, 5, 5, 0.98));
    color: #d1d8e0;
}

.black_side .side_avatar {
    background: linear-gradient(135deg, #2f3542, #1e272e);
    border: 1px solid rgba(112, 161, 255, 0.2);
}

.black_side .side_icon {
    color: #70a1ff;
    filter: drop-shadow(0 0 8px rgba(112, 161, 255, 0.4));
}

/* 玩家(红棋) 皮肤 - 皇家红 */
.red_side {
    background: linear-gradient(135deg, rgba(235, 59, 90, 0.95), rgba(165, 15, 45, 0.98));
    color: #ffffff;
}

.red_side .side_avatar {
    background: linear-gradient(135deg, #fc5c65, #eb3b5a);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.red_side .side_icon {
    color: #ffffff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.red_side .side_icon {
    color: #ffffff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* 激活状态强化 */
.player_side.active {
    z-index: 12;
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 20px var(--glow-color);
}

.black_side.active {
    --glow-color: rgba(112, 161, 255, 0.3);
    border-color: rgba(112, 161, 255, 0.5);
}

.red_side.active {
    --glow-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 215, 0, 0.5);
}

/* 呼吸动画：重构为更细腻的效果 */
.player_side.active {
    animation: modern_breath 3s infinite ease-in-out;
}

@keyframes modern_breath {
    0%, 100% { transform: scale(1.05) translateY(0); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--glow-color); }
    50% { transform: scale(1.08) translateY(-2px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--glow-color); }
}

/* 文字样式优化 */
.side_label {
    font-size: 16px;
    font-weight: 700;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.turn_indicator {
    font-size: 11px;
    font-weight: 600;
    display: none;
    opacity: 0.9;
    letter-spacing: 1px;
    margin: 0;
}

.player_side.active .turn_indicator {
    display: block;
    animation: text_glow 1.5s infinite alternate;
}

@keyframes text_glow {
    from { opacity: 0.8; text-shadow: 0 0 4px rgba(255,255,255,0.4); }
    to { opacity: 1; text-shadow: 0 0 12px rgba(255,255,255,0.8); }
}

/* 响应式适配：在屏幕宽度不足以在侧边容纳标识时进行调整 */
@media (max-width: 1200px) {
    /* 隐藏左右两侧的标识牌，防止在窄屏下遮挡棋盘或造成布局拥挤 */
    .side_position_left, .side_position_right {
        display: none !important;
    }
}

/* 先手弹出提示 */
/* 战术术语特效样式 - 容器覆盖棋盘区域以实现精准定位 */
.term_effect_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.term_item {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    border: 2px solid #ffd700;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    opacity: 0;
    animation: termPopup 2s ease-out forwards;
    margin-bottom: 10px;
    font-family: "Microsoft YaHei", "楷体", serif;
    white-space: nowrap;
    min-width: 100px;
    text-align: center;
    box-sizing: border-box;
}

@keyframes termPopup {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) translateY(25px);
        filter: blur(10px);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) translateY(0);
        filter: blur(0);
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2) translateY(-25px);
    }
}

/* 术语特效图片容器 */
.term_item_img {
    position: absolute;
    z-index: 2000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}

/* 特效图片内容 - 统一管理缩放与滤镜 */
.term_img_content {
    max-width: 200px; /* 默认/绝杀保持此原始尺寸 */
    height: auto;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
}

/* 绝杀图片特定动画 (保持动画轨迹，仅视觉尺寸由 max-width 控制) */
.term_item_img.checkmate .term_img_content {
    animation: mateImgPopup 2.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

/* 将军图片特定尺寸调整 - 再缩小 50% */
.term_item_img.check .term_img_content {
    max-width: 100px;
    animation: jiangImgPopup 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.7));
}

/* 吃子图片特效样式 - 参考将军特效实现 */
.term_item_img.eat .term_img_content {
    max-width: 90px; /* 略小于将军特效，保持比例协调 */
    animation: eatImgPopup 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.6));
}

@keyframes eatImgPopup {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
        filter: brightness(2) blur(3px);
    }
    40% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
        filter: brightness(1.2) blur(0);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
        filter: brightness(1.5) blur(2px);
    }
}

/* 吃棋特效专属粒子 */
.eat_particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffcc00;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1001;
    box-shadow: 0 0 5px #ff6600;
}

@keyframes eatParticleFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

@keyframes mateImgPopup {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(-15deg);
        filter: brightness(3) blur(10px);
    }
    15% {
        opacity: 1;
        transform: scale(1.2) rotate(0deg);
        filter: brightness(1.5) blur(0);
    }
    25% {
        transform: scale(1);
    }
    85% {
        opacity: 1;
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
        filter: brightness(2) blur(5px);
    }
}

@keyframes jiangImgPopup {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
        filter: blur(5px);
    }
    15% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
        filter: blur(0);
    }
    25% {
        transform: scale(1);
    }
    85% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2) translateY(-10px);
    }
}

/* 绝杀弹出动画 - 强化冲击力与稳定性 (尺寸缩小50%) */
@keyframes matePopup {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
        filter: brightness(3) blur(10px);
        letter-spacing: 10px;
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
        filter: brightness(1.5) blur(0);
        letter-spacing: 1px;
    }
    25% {
        transform: translate(-50%, -50%) scale(1);
    }
    85% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        filter: brightness(2) blur(5px);
    }
}

/* 绝杀特效专属样式 - 去除叠字，单行设计 (尺寸缩小50%) */
.term_item.checkmate {
    font-size: 30px;
    padding: 10px 40px;
    background: linear-gradient(135deg, #ff0000 0%, #8b0000 50%, #ff0000 100%);
    background-size: 200% auto;
    color: #ffffff;
    border: 3px solid #ffd700;
    border-radius: 8px; 
    box-shadow: 
        0 0 15px rgba(255, 0, 0, 0.8),
        0 0 30px rgba(255, 215, 0, 0.3),
        inset 0 0 12px rgba(255, 255, 255, 0.3);
    animation: 
        matePopup 2.8s cubic-bezier(0.19, 1, 0.22, 1) forwards,
        bgShift 2s linear infinite;
    z-index: 2000;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.5);
    font-family: "Microsoft YaHei", "楷体", serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.term_item.checkmate::before,
.term_item.checkmate::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-color: #ffd700;
    -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M13 2L3 14h7v8l10-12h-7z'/%3e%3c/svg%3e") no-repeat center;
    mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M13 2L3 14h7v8l10-12h-7z'/%3e%3c/svg%3e") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 0 5px #ffd700);
}

@keyframes bgShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 全屏震动效果 */
.screen_shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.first_move_tip {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #e0c090;
    padding: 20px 40px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
    border: 2px solid #e0c090;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    z-index: 100;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

@keyframes bounceIn {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* 动画层样式 */
.animation_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* 爆炸效果动画 */
.explosion {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ffcc00 10%, #ff6600 40%, transparent 70%);
    border-radius: 50%;
    animation: explode 0.4s ease-out forwards;
    z-index: 12;
}

/* 炮弹特效 (尺寸缩小50%) */
.cannon_shell {
    position: absolute;
    width: 10px;
    height: 5px;
    background: radial-gradient(ellipse at center, #ffd700 0%, #ff8a00 50%, #8b4513 100%);
    border-radius: 50% 100% 100% 50%;
    box-shadow: 0 0 8px #ff4500, 0 0 3px #ffd700;
    z-index: 15;
    transform-origin: left center;
    animation: shellFly 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes shellFly {
    0% {
        transform: translate(0, 0) rotate(var(--angle)) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translate(calc(var(--target-x) * 0.2), calc(var(--target-y) * 0.2)) rotate(var(--angle)) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(var(--target-x), var(--target-y)) rotate(var(--angle)) scale(1);
        opacity: 1;
    }
}

@keyframes explode {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* 走棋箭头样式 (尺寸缩小50%) */
.move_arrow {
    position: absolute;
    background: linear-gradient(to right, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.8));
    height: 3px;
    transform-origin: left center;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
    z-index: 8;
    animation: arrowFlow 0.8s ease-out forwards;
}

/* 云端提示箭头：青色/绿色 */
.cloud_hint_arrow {
    position: absolute;
    background: linear-gradient(to right, rgba(46, 204, 113, 0), rgba(46, 204, 113, 1.0));
    height: 6px;
    transform-origin: left center;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
    z-index: 7;
    pointer-events: none;
    animation: hintArrowFade 2s infinite ease-in-out;
}

.cloud_hint_arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: rgba(46, 204, 113, 1);
}

@keyframes hintArrowFade {
    0%, 100% { opacity: 0.5; transform: scaleX(0.9) rotate(var(--angle)); }
    50% { opacity: 1.0; transform: scaleX(1) rotate(var(--angle)); }
}

@keyframes arrowFlow {
    0% { width: 0; opacity: 0; }
    100% { width: var(--target-width); opacity: 1; }
}

/* 棋盘落子特效 - 红黑独立系统 */
.move_effect_container {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 粒子 (尺寸缩小50%) */
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
}

/* 红棋粒子特效 */
.red_effect .particle {
    background: radial-gradient(circle, #ff4d4d, #ff0000);
    box-shadow: 0 0 10px #ff0000;
}

/* 黑棋粒子特效 */
.black_effect .particle {
    background: radial-gradient(circle, #4d4d4d, #000000);
    box-shadow: 0 0 10px #000000;
}

/* 粒子爆炸动画 */
@keyframes particleExplosion {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.particle_active {
    animation: particleExplosion 0.8s ease-out forwards;
}

/* 核心环形扩散效果 (尺寸缩小50%) */
.effect_ring {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
}

.red_effect .effect_ring { color: #ff0000; }
.black_effect .effect_ring { color: #000000; }

.ring_active {
    animation: ringExpand 0.6s ease-out forwards;
}

@keyframes ringExpand {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* 将军提示样式 (尺寸缩小50%) */
.checkmate_tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.9);
    color: #fff;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 24px;
    font-weight: bold;
    z-index: 1001;
    border: 2px solid #fff;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    pointer-events: none;
    display: none;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    animation: jiangFlash 0.5s infinite alternate;
}

/* 绝杀提示特殊样式 (尺寸缩小50%) */
.checkmate_tip.juesha_tip {
    background: rgba(139, 0, 0, 0.95);
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(255, 0, 0, 1), 0 0 10px rgba(255, 215, 0, 0.5);
    color: #ffd700;
    font-size: 32px;
    padding: 10px 30px;
}

@keyframes jiangFlash {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

/* 响应式调整：移动端缩小绝杀特效 */
/* 迷你复盘播放器样式 */
/* 迷你复盘播放器样式美化 */
.mini_replay_control {
    position: relative;
    margin: 0;
    width: 100%;
    background: linear-gradient(145deg, #2a1f15, #1a140d);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    animation: slideInLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.replay_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.replay_title {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.replay_counter {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid rgba(255, 215, 0, 0.2);
    font-weight: 500;
}

.replay_main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.replay_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.replay_btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: rgba(255, 255, 255, 0.03);
    color: #ffd700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.replay_btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

.replay_btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.replay_btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    filter: grayscale(1);
}

.replay_btn.highlight {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #1a140d;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.replay_btn.highlight:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffec8b, #ffd700);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    transform: translateY(-2px) scale(1.05);
}

.replay_btn.active {
    background: linear-gradient(135deg, #ff4d4d, #b30000);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4);
}

.replay_btn.active:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff6666, #ff4d4d);
    box-shadow: 0 6px 20px rgba(255, 77, 77, 0.6);
}

.btn_icon {
    font-size: 18px;
    line-height: 1;
}

/* 进度条样式 */
.replay_progress_box {
    padding: 5px 4px;
    width: 100%;
}

.replay_progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 215, 0, 0.1);
    background-image: linear-gradient(#ffd700, #ffd700);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    cursor: pointer;
    outline: none;
    transition: background-size 0.1s ease;
}

.replay_progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffd700;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    border: 2px solid #1a140d;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.replay_progress::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.replay_settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-top: 1px solid rgba(255, 215, 0, 0.05);
    padding-top: 8px;
}

.speed_label {
    color: rgba(255, 215, 0, 0.6);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.speed_select {
    background: #2a1f15;
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffd700' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.speed_select:hover {
    border-color: #ffd700;
    background-color: #3a2b1d;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

.replay_close_btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #8b0000, #4b0000);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.replay_close_btn:hover {
    background: linear-gradient(135deg, #a50000, #600000);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(139, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.replay_close_btn:active {
    transform: translateY(1px);
}

.game_info_display {
    margin-top: 25px; /* 进一步减小间距 */
    width: 100%; /* 使用父容器宽度 */
    background: linear-gradient(135deg, rgba(70, 55, 40, 0.95) 0%, rgba(40, 30, 20, 0.98) 100%); /* 略微调亮背景 */
    border: 1px solid rgba(224, 192, 144, 0.5);
    border-top: 3px solid #ffd700; /* 略微减薄顶部金边 */
    border-radius: 10px; /* 略微减小圆角 */
    padding: 10px 12px; /* 显著减小内边距，使其更密集 */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(224, 192, 144, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center; /* 整体水平居中 */
    gap: 8px; /* 减小内部间距 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto; /* 允许点击内部按钮 */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* 添加装饰性光影 */
.game_info_display::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.info_header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 改为起点对齐，配合按钮的 margin-left: auto */
    gap: 8px; /* 减小间距 */
    width: 100%;
    padding-bottom: 4px; /* 减小底部边距 */
    border-bottom: 1px solid rgba(224, 192, 144, 0.15); /* 添加细微分割线 */
}

.info_icon {
    width: 5px; /* 进一步缩小图标点 */
    height: 5px;
    background: #e0c090;
    border-radius: 50%;
    box-shadow: 0 0 6px #e0c090;
    flex-shrink: 0;
}

.info_label {
    font-size: 12px; /* 调小字号 */
    color: rgba(224, 192, 144, 0.95); /* 提高亮度 */
    text-transform: uppercase;
    letter-spacing: 1px; /* 减小字间距 */
    font-weight: 700;
    white-space: nowrap;
}

.copy_fen_btn {
    background: rgba(255, 215, 0, 0.12); /* 黄金色背景 */
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px; /* 减小圆角 */
    color: #ffd700; /* 黄金色文字 */
    font-size: 10px; /* 调小字号 */
    padding: 2px 8px; /* 显著减小内边距，使其更紧凑 */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    white-space: nowrap;
    margin-left: auto; /* 自动推到右侧 */
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    outline: none;
}

.copy_fen_btn:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: #ffd700;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.copy_fen_btn:active {
    transform: translateY(0);
}

.info_text {
    font-size: 20px; /* 从 18px 增加到 20px */
    color: #ffd700;
    font-weight: 800; /* 加粗 */
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.2); /* 增强阴影 */
    font-family: "Microsoft YaHei", "楷体", serif;
    text-align: center;
    width: 100%;
    letter-spacing: 2px; /* 增加间距 */
    line-height: 1.4;
}

/* 移动端适配覆盖 */
@media screen and (max-width: 1000px) {
    #gameInfoDisplay {
        display: none !important;
    }
    #teachingBtn {
        display: none !important;
    }

    .mini_replay_control {
        flex-direction: column; /* 移动端改为纵向布局以容纳进度条 */
        height: auto !important;
        padding: 12px 15px !important;
        gap: 10px !important;
        margin: 10px auto !important;
        max-width: 95% !important;
        align-items: stretch;
        border-radius: 15px;
    }
    
    .replay_header {
        display: flex; /* 移动端也显示页眉，因为有进度条后空间足够 */
        padding-bottom: 5px;
    }
    
    .replay_main {
        flex: none;
        justify-content: flex-start;
        gap: 8px;
    }
    
    .replay_btns {
        gap: 20px;
    }
    
    .replay_close_btn {
        width: 100%;
        margin-top: 5px;
        padding: 10px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    .replay_btn {
        width: 44px !important;
        height: 44px !important;
    }
    
    .replay_btn.highlight {
        width: 54px !important;
        height: 54px !important;
    }

    .speed_select {
        padding: 8px 30px 8px 12px;
        font-size: 13px;
    }
}


/* 棋盘坐标容器 */
.chess_coords {
    position: absolute;
    left: 0;
    width: 100%; /* 始终填充 .chess_box */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 20; /* 提高层级，确保在 canvas 之上 */
}

.chess_coords.top {
    top: -20px; /* 稍微增加上移距离，避免紧贴边缘 */
}

.chess_coords.bottom {
    position: relative;
    top: 0px; /* 增加一点间距 */
    margin-top: 5px;
    margin-bottom: 10px;
}

.coord_row {
    display: flex;
    justify-content: space-between; /* 关键：两端对齐，中间均匀分布，对齐 9 条线 */
    /* 注意：此处的 width 和 margin-left 会被 play.js 中的 adjustLayout 动态计算覆盖 */
    /* 如需调整，请修改 common.js 中 com.stype 的 coordWidthPercent 和 coordLeftPercent */
    /* 或者在此处使用 !important 强制覆盖 */
    width: 87.19%; 
    margin-left: 0.57%; 
    box-sizing: border-box;
}

.coord_row span {
    width: 20px; /* 固定的较小宽度，确保文字居中对齐网格线 */
    text-align: center;
    flex: 0 0 auto;
    font-size: 14px;
    color: #e0c090; /* 调整为更黄的颜色，与按钮文字颜色一致 */
    font-weight: bold;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

.coord_row.numbers {
    color: #e0c090; /* 统一调整为类似按钮的黄色 */
    margin-bottom: 2px;
}

.coord_row.characters {
    color: #e0c090; /* 统一调整为类似按钮的黄色 */
}

/* 左侧组件组容器 */
.left_side_group {
    position: absolute;
    left: -285px;
    top: 0px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    z-index: 100;
}

/* 右侧组件组容器 - 用于精确对齐控制 */
.right_side_group {
    position: absolute;
    right: -285px; /* 调整位置以适应增大的棋盘宽度 */
    top: 0px; /* 调整为与棋盘上沿精确水平对齐 */
    width: 260px; /* 增加宽度以适应增大的历史面板 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 核心：左侧对齐，偏差控制在 2px 以内 */
    gap: 20px; /* 优化组件间距，提升视觉平衡 */
    z-index: 100;
}

/* 桌面端复盘模式：确保左右侧组件组位置固定 */
@media screen and (min-width: 1001px) {
    .chess_box.review_mode_active .right_side_group {
        right: -285px !important; /* 强制固定位置，防止动态计算导致的偏移 */
        left: auto !important;
        margin-left: 0 !important;
        transform: none !important;
    }
    
    .chess_box.review_mode_active .left_side_group {
        left: -285px !important; /* 强制固定位置，防止动态计算导致的偏移 */
        right: auto !important;
        margin-right: 0 !important;
        transform: none !important;
    }
    
    /* 确保棋盘坐标行位置固定 */
    .chess_box.review_mode_active .coord_row {
        margin-left: 0.00% !important; /* 使用固定值替代动态计算 */
        width: 92% !important;
    }
}

/* 走棋历史面板样式 */
/* 迷你复盘控制栏样式 */
.mini_replay_control {
    background: rgba(26, 20, 13, 0.95);
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    flex-direction: column; /* 显式设置为纵向堆叠，确保在窄屏下也能完美居中 */
    justify-content: center;
    align-items: center;
    gap: 12px; /* 增加上下间距 */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
}

.replay_btns {
    display: flex;
    align-items: center;
    justify-content: center; /* 确保按钮组内部也居中 */
    gap: 8px; /* 稍微缩小间距以适应窄边栏 */
    width: 100%;
}

.mini_btn {
    background: rgba(224, 192, 144, 0.1);
    border: 1px solid rgba(224, 192, 144, 0.3);
    color: #e0c090;
    width: 34px; /* 稍微缩小尺寸以确保不拥挤 */
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    outline: none;
    margin: 0;
    padding: 0;
}

/* 上一步 & 下一步：蓝色系 */
#miniReplayPrev, #miniReplayNext {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.5);
    color: #5dade2;
}

#miniReplayPrev:hover, #miniReplayNext:hover {
    background: rgba(52, 152, 219, 0.3);
    border-color: #3498db;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
}

/* 自动播放：绿色系 & 略大一些 */
#miniReplayAuto {
    width: 42px;
    height: 42px;
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.5);
    color: #58d68d;
    font-size: 20px;
}

#miniReplayAuto:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.5);
}

#miniReplayAuto.playing {
    background: rgba(46, 204, 113, 0.4);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.6);
    animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
    0% { transform: scale(1.15); box-shadow: 0 0 12px rgba(46, 204, 113, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 18px rgba(46, 204, 113, 0.8); }
    100% { transform: scale(1.15); box-shadow: 0 0 12px rgba(46, 204, 113, 0.5); }
}

/* 跳至开始 & 跳至结束：深黄色系 */
#miniReplayToStart, #miniReplayToEnd {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.4);
    color: #f39c12;
}

#miniReplayToStart:hover, #miniReplayToEnd:hover {
    background: rgba(243, 156, 18, 0.25);
    border-color: #f39c12;
    transform: scale(1.1);
}

.mini_btn:active {
    transform: scale(0.9) !important;
}

.mini_btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    filter: grayscale(1);
}

.replay_info {
    font-size: 14px;
    color: #e0c090;
    font-weight: bold;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(224, 192, 144, 0.2);
    min-width: 70px;
    text-align: center;
    font-family: Consolas, monospace; /* 使用等宽字体，数字对齐更美观 */
}

/* 悬浮退出按钮样式 - 用于复盘模式 */
.exit_replay_floating_btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10005;
    padding: 12px 24px;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.exit_replay_floating_btn::before {
    content: "←";
    font-size: 18px;
}

.exit_replay_floating_btn:hover {
    transform: translateX(5px) scale(1.05);
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.6);
    filter: brightness(1.1);
}

.exit_replay_floating_btn:active {
    transform: scale(0.95);
}

/* 移动端适配 */
@media screen and (max-width: 1000px) {
    .exit_replay_floating_btn {
        top: auto; /* 移除顶部定位 */
        bottom: 15px; /* 移至底部 */
        left: 50%; /* 居中 */
        transform: translateX(-50%); /* 居中修正 */
        padding: 8px 20px;
        font-size: 14px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4); /* 阴影改为向上 */
    }
    
    .exit_replay_floating_btn:hover {
        transform: translateX(-50%) scale(1.05); /* 保持居中状态下的缩放 */
    }
}

.history_panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 480px; /* 从400px增加到480px，提升走棋记录的可读性 */
    background: rgba(42, 31, 21, 0.95); /* 增加背景不透明度，提升可读性 */
    border: 1px solid rgba(255, 215, 0, 0.4); /* 增强边框视觉效果 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); /* 增强阴影效果 */
    overflow: hidden;
    color: #e0c090;
    font-family: "Microsoft YaHei", sans-serif;
}

.history_header {
    padding: 12px 16px; /* 增加内边距，提升视觉舒适度 */
    background: rgba(0, 0, 0, 0.3); /* 加深背景色，增强层次感 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 15px; /* 增大字体，提升可读性 */
    font-weight: bold;
    color: #e0c090;
}

.history_controls {
    display: flex;
    align-items: center;
    gap: 10px; /* 增加控件间距，提升操作便捷性 */
    font-size: 13px; /* 增大字体，提升可读性 */
    font-weight: normal;
}

.timestamp_toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(224, 192, 144, 0.8);
}

.clear_btn {
    background: rgba(192, 57, 43, 0.8);
    border: none;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
}

.clear_btn:hover {
    background: rgba(231, 76, 60, 1);
}

/* 历史记录跳转提示 */
.history_jump_hint {
    display: none; /* 默认隐藏，仅在复盘模式下通过 JS 或 CSS 类显示 */
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #FFA500;
    background: rgba(255, 165, 0, 0.1);
    border-radius: 4px;
    cursor: help;
    transition: opacity 0.5s ease;
    animation: hintFloat 2s ease-in-out;
}

/* 仅在复盘模式激活时显示 */
.review_mode_active .history_jump_hint {
    display: flex;
}

.history_jump_hint.fade_out {
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
    overflow: hidden;
}

.history_jump_hint .hint_icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFA500'%3E%3Cpath d='M13 1.07V9h7c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1h2V1.07c0-.55.45-1 1-1h5c.55 0 1 .45 1 1zM11 3H8v6h3V3zm8 8h-6v10h6V11zm-8 0H5v10h6V11z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@keyframes hintFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.history_list {
    flex: 1;
    overflow-y: auto;
    padding: 5px 0;
}

/* 自定义滚动条 */
.history_list::-webkit-scrollbar {
    width: 6px;
}

.history_list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.history_list::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.2);
    border-radius: 3px;
}

.history_list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.4);
}

.history_item {
    padding: 10px 16px; /* 增加内边距，提升可读性和点击区域 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px; /* 增大字体，提升可读性 */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.history_item:hover {
    background: rgba(255, 215, 0, 0.1);
}

.chess_box.review_mode_active .history_item.active {
    background: rgba(255, 215, 0, 0.25);
    border-left: 3px solid #ffd700;
}

.history_item .step_num {
    color: rgba(255, 215, 0, 0.7); /* 增强颜色对比度 */
    margin-right: 10px; /* 增加间距 */
    font-family: Consolas, monospace;
    font-size: 13px; /* 增大字体 */
    font-weight: bold;
}

.history_item .side_tag {
    font-size: 12px; /* 增大字体 */
    padding: 2px 6px; /* 增加内边距 */
    border-radius: 4px; /* 增大圆角 */
    margin-right: 8px; /* 增加间距 */
}

.side_tag.player {
    background: rgba(192, 57, 43, 0.2);
    color: #ff7675;
    border: 1px solid rgba(192, 57, 43, 0.3);
}

.side_tag.ai {
    background: rgba(44, 62, 80, 0.4);
    color: #dfe6e9;
    border: 1px solid rgba(44, 62, 80, 0.6);
}

.side_tag.ai_red {
    background: rgba(192, 57, 43, 0.2);
    color: #ff7675;
    border: 1px solid rgba(192, 57, 43, 0.3);
}

.side_tag.ai_black {
    background: rgba(44, 62, 80, 0.4);
    color: #dfe6e9;
    border: 1px solid rgba(44, 62, 80, 0.6);
}

.history_item .move_text {
    flex: 1;
    font-size: 14px; /* 增大走棋文本字体 */
    font-weight: 500; /* 增加字体粗细 */
}

.history_item .move_time {
    font-size: 11px; /* 增大时间戳字体 */
    color: rgba(224, 192, 144, 0.6); /* 增强时间戳可读性 */
    margin-left: 10px; /* 增加间距 */
}

.history_item.system {
    background: rgba(192, 57, 43, 0.05);
    cursor: default;
}

.history_item.system .move_text {
    color: #ff7675;
    font-weight: bold;
    text-align: left;
}

.history_empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(224, 192, 144, 0.3);
    font-style: italic;
    font-size: 13px;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
    .left_side_group, .right_side_group {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        width: 560px;
        margin: 20px auto;
        align-items: center;
    }
    .history_panel {
        width: 100%;
        height: 200px;
    }
}

@media screen and (max-width: 1000px) {
    .chess_box {
        width: 95vw !important; /* 移动端使用视口宽度，从92vw增加到95vw */
        max-width: 95vw !important;
        margin: 20px auto 30px !important;
    }
    
    .left_side_group, .right_side_group {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important; /* 填充父容器 chess_box (92vw/95vw) */
        margin: 15px auto !important; /* 增加间距 */
        gap: 15px; /* 增加组件间距 */
        display: flex !important;
        flex-direction: row !important; /* 移动端改为横向排列 */
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 居中对齐 */
        align-items: center !important; /* 确保移动端子组件水平居中 */
    }

    /* 移动端身份标识缩放 */
    .player_side {
        width: 46% !important; /* 适中宽度，从 44% 增加到 46% */
        min-width: 150px; /* 适中最小宽度，从 140px 增加到 150px */
        margin: 5px !important;
        padding: 10px !important; /* 恢复适中内边距 */
    }

    .player_side .side_avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .player_side .side_label {
        font-size: 14px !important;
    }

    .player_side .turn_indicator {
        font-size: 11px !important;
    }
    .history_panel {
        width: 100% !important;
        height: 220px; /* 增加高度，提升移动端可读性 */
        border-radius: 12px;
        background: rgba(42, 31, 21, 0.95);
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        margin: 0 auto !important; /* 强制水平居中 */
    }
    
    .history_item {
        padding: 14px 16px; /* 增大触控区域 */
        font-size: 15px; /* 增大字体，提升移动端可读性 */
    }
    
    .history_header {
        padding: 14px 16px; /* 增加内边距 */
        font-size: 16px; /* 增大标题字体 */
    }

    /* 手机移动端复盘模式专属优化（中等屏幕） */
    .chess_box.review_mode_active {
        margin: 40px auto 20px !important; /* 向下微调：增加顶部边距 */
        /* transform 和 transform-origin 由 play.js 动态计算管理 */
    }

    /* 复盘模式下，如果显示历史记录，确保它不会太突兀 */
    .chess_box.review_mode_active .history_panel {
        margin-top: 0;
        margin-bottom: 8px; /* 增加底部间距 */
        height: 180px; /* 增加复盘模式下的高度 */
    }

    /* 手机端复盘模式隐藏对局详情操作栏 */
    .chess_box.review_mode_active + #bnBox,
    .review_mode_active #bnBox {
        display: none !important;
    }
}

/* 手机端复盘模式隐藏对局详情操作栏 */
.review_mode_active #bnBox,
.review_mode_active .log_system_box {
    display: none !important;
}

/* 移动端复盘退出按钮 */
.mobile_replay_exit {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  background-color: rgba(192, 57, 43, 0.9);
  color: #fff;
  font-size: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10002; /* 确保在最顶层 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.mobile_replay_exit:active {
  transform: scale(0.9);
  background-color: rgba(231, 76, 60, 1);
}

.replay_btn_wrapper {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent; 
}

.replay_btn_wrapper:active {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(0.92); /* 按压时轻微缩放 */
}

/* 禁用状态 */
.replay_btn_wrapper.disabled {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(1);
}

/* 波纹效果动画 */
.replay_btn_wrapper::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.3s, opacity 0.5s;
  pointer-events: none;
}

.replay_btn_wrapper:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

.replay_icon {
  width: 24px;
  height: 24px;
  background-color: #FFFFFF;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.back_icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

.play_icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.pause_icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
}

.forward_icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}

/* 响应式显示逻辑 */
@media screen and (max-width: 1000px) {
    /* 默认隐藏，仅在复盘模式下显示 */
    .mobile_replay_control {
        display: none;
    }

    /* 复盘模式激活时显示 */
    .replaying .mini_replay_control {
        display: flex;
    }

    /* 隐藏原有的复盘详情控制面板 */
    .replaying .log_modal_content.detail_mode .replay_controls,
    .replaying .log_modal_content.detail_mode .log_modal_header h3,
    .replaying .log_modal_content.detail_mode .detail_info_grid {
        display: none !important;
    }

    /* 调整弹窗样式使其更紧凑 */
    .replaying .log_modal_content.detail_mode {
        padding: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        pointer-events: none; /* 让弹窗本身不拦截点击，除了内部按钮 */
    }

    .replaying .log_modal_content.detail_mode .detail_footer {
        pointer-events: auto;
        position: fixed;
        top: 20px;
        right: 20px;
        margin: 0;
    }
    
    .replaying .log_modal_content.detail_mode .detail_footer button {
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 8px 15px;
        border-radius: 20px;
    }
}

/* 针对 320px-414px 手机屏幕的深度适配优化 */
@media screen and (max-width: 414px) {
    /* 1. 棋盘区域占据屏幕宽度 95% (从92%增加到95%，提升视觉体验) */
    .chess_box {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 30px auto 15px !important; /* 调整间距以适应优化后的布局 */
    }

    /* 手机移动端复盘模式专属优化 */
    .chess_box.review_mode_active {
        margin: 85px auto 20px !important; /* 增加顶部边距：从50px提升到85px，确保复盘标识完全可见 */
        transform: scale(1.08); /* 适度放大：增加8%的缩放比例 */
        transform-origin: top center; /* 设置变换原点为顶部中心 */
    }

    /* 2. 复盘标识适配 */
    .chess_box.review_mode_active::after {
        top: -65px !important; /* 优化标识位置：相对于 85px 边距，确保在屏幕内 20px 处稳定展示 */
        font-size: 16px !important;
        padding: 6px 25px !important;
        letter-spacing: 2px !important;
        z-index: 10001 !important; /* 提升层级，确保不被其他组件遮挡 */
    }

    /* 移动端播放状态适配 */
    .chess_box.review_mode_active.replaying::after {
        content: "正在播放..." !important;
        background: linear-gradient(135deg, #27ae60, #1e8449) !important;
    }

    /* 移动端结束状态适配 */
    .chess_box.review_mode_active.replay_finished::after {
        content: "复盘结束" !important;
        background: linear-gradient(135deg, #2980b9, #2c3e50) !important;
    }

    /* 3. 复盘控制组件等比放大，确保点击热区符合无障碍标准 (>= 48px) */
    .mini_replay_control {
        height: 60px !important; /* 优化高度 */
        margin: 10px auto !important;
        width: 100% !important; 
        border-radius: 10px !important;
        background: rgba(42, 31, 21, 0.98) !important;
    }

    .replay_btn {
        width: 44px !important; /* 增大按钮以符合无障碍标准 */
        height: 44px !important;
    }

    .replay_btn.highlight {
        width: 50px !important;
        height: 50px !important;
    }

    /* 4. 下方组件组(历史记录、操作按钮)等比放大与棋盘协调 */
    .history_panel {
        width: 100% !important; /* 填充父容器 92vw */
        height: 200px !important; /* 优化高度 */
        margin: 8px auto !important;
    }

    .history_header {
        font-size: 17px !important; /* 优化字体大小 */
        padding: 12px 14px !important;
    }

    .history_item {
        font-size: 16px !important; /* 优化字体大小 */
        padding: 12px 14px !important;
        min-height: 44px !important; /* 优化触控热区 */
    }

    .history_item .side_tag {
        font-size: 13px !important; /* 优化标签字体 */
        padding: 2px 5px !important;
    }

    .history_item .move_text {
        font-size: 16px !important; /* 优化走棋文本字体 */
    }

    .history_item .move_time {
        font-size: 12px !important; /* 优化时间戳字体 */
    }

    .bn_box {
        width: 92vw !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 5px 0 15px 0 !important; /* 减少底部 padding */
        margin: 5px auto !important;
    }

    .bn_box input, 
    .ai_level_select {
        height: 52px !important; /* 增加按钮高度 */
        font-size: 19px !important;
        padding: 0 15px !important;
        flex: 1 1 45% !important; /* 按钮在窄屏下两两排列 */
        min-width: 130px !important;
    }

    .ai_level {
        font-size: 19px !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    /* 5. 日志系统面板放大 */
    .log_system_box {
        width: 92vw !important;
        padding: 20px !important;
        margin: 10px auto 40px !important;
    }

    .log_system_title {
        font-size: 19px !important;
        margin-bottom: 15px !important;
    }

    .log_system_btns {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .log_btn {
        height: 48px !important;
        font-size: 19px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 45% !important; /* 移动端两两排列 */
    }

    /* 6. 侧边状态栏放大 */
    .player_side {
        width: 190px !important;
        padding: 15px !important;
    }

    .side_label {
        font-size: 24px !important;
    }

    .turn_indicator {
        font-size: 19px !important;
    }

    /* 7. 坐标字号调整 */
    .coord_row span {
        font-size: clamp(19px, 6vw, 24px) !important;
    }
}

/* 横屏模式调整 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .mini_replay_control {
        height: 40px;
        margin-top: 5px;
    }
    
    .replay_icon {
        width: 20px;
        height: 20px;
    }
}

/* 棋盘容器整体居中 */
.chess_box {
    position: relative;
    width: 600px; /* 基础宽度 - 从523px增加到600px，提升棋盘可视化效果 */
    max-width: 95vw; /* 确保小屏幕下不溢出 */
    margin: 30px auto 40px; 
    touch-action: manipulation;
    transition: margin 0.3s ease;
}

/* 桌面端复盘模式保持原有布局 */
@media screen and (min-width: 1001px) {
    .chess_box.review_mode_active {
        margin-top: 80px !important; /* 进一步增加顶部边距，确保“复盘模式”标题和坐标标签都不被遮挡 */
        margin-bottom: 30px; 
        transform: none !important; 
    }
}

/* 复盘模式下自动隐藏对局特效开关 */
.review_mode_active #termModeControl {
    display: none !important;
}

/* 桌面端模式按钮专属优化 */
@media screen and (min-width: 1001px) {
    .mode_control {
        top: 150px !important; /* 向上移动70px：从220px调整到150px，提高按钮在视觉布局中的相对高度 */
        left: -230px !important; /* 再次外移，确保 165px 宽度不遮挡能量条 (从 -215px 调整为 -230px) */
        width: 165px !important; /* 从 150px 进一步增加到 165px，更大气 */
    }
    
    .mode_options {
        gap: 15px !important; /* 增加按钮间距：从12px增加到15px，提升视觉协调性 */
    }
    
    .mode_btn {
        height: 50px !important; /* 进一步增加高度：从45px增加到50px，提升视觉美观度 */
        border-radius: 10px !important; /* 增大圆角：从8px增加到10px */
        font: bold 14px/50px "Microsoft YaHei", sans-serif !important; /* 增大字体：从13px增加到14px，行高同步调整 */
    }
}

/* 移动端复盘模式专属优化（通过媒体查询保护桌面端） */
@media screen and (max-width: 1000px) {
    .chess_box.review_mode_active {
        margin-bottom: 60px; /* 移动端优化底部边距 */
    }
}

/* 复盘模式视觉反馈 */
.chess_box.review_mode_active #chess {
    opacity: 0.95; /* 降低透明度影响，保持棋子清晰 */
    filter: brightness(0.9); /* 仅轻微变暗，不影响颜色识别 */
    cursor: not-allowed;
    pointer-events: none; 
}

.chess_box.review_mode_active::after {
    content: "复盘模式";
    position: absolute;
    top: -65px; /* 移出棋盘区域，置于顶部 */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #1a140d;
    padding: 8px 30px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 4px;
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    border: 2px solid #1a140d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* 播放状态下的标识牌 */
.chess_box.review_mode_active.replaying::after {
    content: "正在播放...";
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.4);
}

/* 播放结束后的标识牌 */
.chess_box.review_mode_active.replay_finished::after {
    content: "复盘已结束";
    background: linear-gradient(135deg, #2980b9, #2c3e50);
    color: #fff;
    letter-spacing: 1px;
}

/* 为棋盘添加复盘模式下的整体外发光 */
.chess_box.review_mode_active {
    /* 增加发光范围（从30px增加到45px，增加50%） */
    box-shadow: 0 0 45px rgba(255, 215, 0, 0.3);
    border-radius: 8px;
}

/* 按钮容器置灰 */
.bn_box.review_mode_disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.8);
}

/* 复盘模式下隐藏对局标识和模式切换按钮 */
.review_mode_active .player_side,
.review_mode_active .mode_control {
    display: none !important;
}

#chess {
    display: block;
    margin: 0 auto;
    width: 100%; /* 让 canvas 填充容器 */
    max-width: 600px; /* 限制 maximum 宽度 - 从523px增加到600px，与容器宽度一致 */
    height: auto; /* 保持比例 */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border-radius: 4px;
    touch-action: none; /* 禁止在棋盘上进行任何浏览器默认手势，完全由 JS 控制 */
}

/* 响应式调整：如果屏幕太窄，将标识移至顶部/底部 */
@media screen and (max-width: 1000px) {
    .chess_box { margin-top: 100px; margin-bottom: 100px; } /* 减小边距，优化移动端布局 */
    .player_side { 
        position: absolute; /* 黑棋保持绝对定位 */
        left: 50% !important; 
        right: auto !important; 
        width: 120px; /* 缩小标识 */
        min-height: 65px; /* 缩小高度 */
        padding: 8px; /* 恢复居中内边距 */
        transform: translate(-50%, 0%); /* 调整为水平居中，垂直顶部对齐 */
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        align-items: center; /* 确保移动端内容也居中 */
        text-align: center;
    }
    /* 覆盖 red_side 的绝对定位，使其在 group 中遵循 flex 布局 */
    .red_side {
        position: relative !important;
        left: 0 !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: 110px !important;
        align-items: center !important; /* 强制内容居中 */
        text-align: center !important;
    }
    .black_side { top: -60px; } /* 调整为与棋盘上沿对齐 */
    
    .black_side.active { 
        left: 50% !important; 
        top: -60px; /* 保持与非 active 状态一致 */
        transform: translate(-50%, 0%) scale(1.08); /* 调整变换原点 */
        animation: blackMobileBreath 2.5s infinite alternate ease-in-out;
    }
    .red_side.active { 
        position: relative !important;
        left: 0 !important;
        bottom: auto !important;
        transform: scale(1.08) !important; /* 仅保留缩放，移除位移 */
        animation: redMobileBreath 2.5s infinite alternate ease-in-out;
    }

    @keyframes blackMobileBreath {
        0% { transform: translate(-50%, 0%) scale(1.08); }
        100% { transform: translate(-50%, 0%) scale(1.12); }
    }
    @keyframes redMobileBreath {
        0% { transform: translate(-50%, -50%) scale(1.08); }
        100% { transform: translate(-50%, -50%) scale(1.12); }
    }
    
    /* 响应式：在移动端自适应坐标 */
    .chess_coords.top {
        top: -5vw; /* 响应式间距 */
    }
    .coord_row span { 
        font-size: 3.5vw;
    }
    .chess_coords.top .coord_row span {
        font-size: 4.5vw;
    }
}

/* 针对手机端（屏幕宽度小于768px）隐藏红方和黑方标识牌，释放屏幕空间 */
@media screen and (max-width: 767px) {
    #sideBlack, .black_side, #sideRed, .red_side {
        display: none !important;
    }
    /* 隐藏标识牌后，缩小棋盘上下边距，使布局更紧凑 */
    .chess_box {
        margin-top: 40px !important;
        margin-bottom: 20px !important;
    }
}

.chess_box,.menu_dy,.menu_qj{ display:none}
.menu_box{ 
    display:none1; 
    width: 400px; /* 从 316px 放大 */
    height: 290px; /* 从 232px 同比例放大 */
    padding-top: 240px; /* 从 190px 同比例放大，确保文字落在木牌中央 */
    background: url(../img/init_bg.png) center top no-repeat; 
    background-size: 100% auto; /* 关键：确保背景图随容器宽度缩放 */
    margin: 40px auto 0; 
    touch-action: manipulation;
}
.menu_box a{ width:214px; height:46px; text-align:center; line-height:46px; background:url(../img/btn_bg.png) center 0 no-repeat; display:block; margin:10px 0 10px 45px; font: normal 18px/46px"�?�???�?"; color:#FF8A00; cursor:pointer; }
.menu_box a:hover{ background: url(../img/btn_bg.png) center -46px no-repeat; color: #FFA433;}
.menu_info {
    background: linear-gradient(135deg, #2c1e12 0%, #1a110a 100%); /* 深色渐变 */
    color: #e0c090; /* 浅金/木色文字 */
    padding: 18px 15px;
    line-height: 1.4;
    text-align: left;
    width: 240px; /* 稍微加宽，适应更大的背景 */
    margin: -35px auto 20px; /* 调整边距，使其在更大的木牌中居中 */
    border: 2px solid #b8860b; /* 暗金边框 */
    border-radius: 8px; /* 稍微圆润一点，更大气 */
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.8), 
        inset 0 0 15px rgba(184,134,11,0.2);
    display: flex;
    flex-direction: column;
    gap: 2px; /* 减小选项间的物理间距 */
    font-family: "Microsoft YaHei", "楷体", serif;
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* 确保 padding 不影响宽度 */
    left: -10px; /* 整体向左微调 10px */
}

.menu_title {
    color: #ffd700;
    font-size: 14px;
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.menu_info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent); /* 顶部金线 */
    opacity: 0.5;
}

.menu_info label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 14px; /* 减小上下内边距，使排列更紧凑 */
    border-radius: 4px;
    transition: all 0.3s;
    font-size: 16px;
    font-weight: 500;
    z-index: 1;
    border: 1px solid transparent;
    width: 100%; /* 占满宽度 */
    box-sizing: border-box;
}

.menu_info label:hover {
    background: rgba(184, 134, 11, 0.1);
    color: #ffd700;
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateX(5px);
}

/* 棋子式单选框 */
.menu_info input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #b8860b;
    border-radius: 50%; /* 圆形棋子感 */
    margin-right: 12px; /* 稍微缩小右边距 */
    position: relative;
    cursor: pointer;
    background: #1a110a;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    flex-shrink: 0; /* 防止被压缩 */
}

.menu_info input[type="radio"]:checked {
    background: radial-gradient(circle at 30% 30%, #ff4d4d, #8b0000); /* 红棋质感 */
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transform: scale(1.1);
}

.menu_info input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
}

.menu_fh {
    background: url(../img/btn_fh.png);
    width: 14px;
    height: 14px;
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
    opacity: 0.6;
    filter: sepia(1);
    z-index: 2;
}

/* 按钮调整 */
.menu_box a {
    width: 240px; /* 与上面的 .menu_info 宽度一致 */
    height: 40px; /* 从 44px 减小到 40px */
    text-align: center;
    line-height: 38px; /* 同步减小行高 */
    /* 改用深木色/古铜色渐变，使其更稳重 */
    background: linear-gradient(to bottom, #4a2f18 0%, #2c1a0b 100%); 
    border: 1px solid #1a0f06;
    border-radius: 4px;
    box-shadow: 
        0 4px 0 #1a0f06, /* 底部厚度感 */
        inset 0 1px 0 rgba(255,255,255,0.1); /* 减弱高光，更内敛 */
    display: block;
    margin: 15px auto 10px;
    position: relative;
    left: -10px; 
    font: bold 18px/38px "Microsoft YaHei", sans-serif;
    color: #e0c090; /* 文字改为淡金/木色，与上方统一 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.menu_box a:hover {
    background: linear-gradient(to bottom, #5d3b1e 0%, #3e2714 100%);
    transform: translateY(1px);
    box-shadow: 
        0 3px 0 #1a0f06,
        inset 0 1px 0 rgba(255,255,255,0.15);
    color: #ffd700; /* 悬停时文字微亮 */
}

.menu_box a:active {
    transform: translateY(4px); /* 完全按下 */
    box-shadow: 0 0 0 #5d0000;
}
/* 按钮容器布局 */
.bn_box {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 0 0 20px 0; 
	width: 523px;
	max-width: 95vw;
	margin: 0 auto;
    box-sizing: border-box;
    touch-action: manipulation;
}

/* 自摆棋模式下的按钮容器优化 */
.is-setup-mode .bn_box {
    padding-bottom: 25px;
}

/* AI难度标签样式 */
.ai_level {
	width: auto;
	text-align: right;
	font: bold 14px/32px "Microsoft YaHei", sans-serif;
	color: #ffffff;
	margin-bottom: 0;
	margin-right: 5px;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* 局面评价能量条 */
.evaluation_bar {
    position: absolute;
    left: -40px; /* 增加宽度后同步调整偏移，保持贴合 */
    top: 0;
    height: 560px; /* 匹配 com.stype.stype2 的高度 */
    width: 38px; /* 增加整体宽度 */
    background: #2c3e50;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 5;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.eval_bar_container {
    position: relative;
    flex-grow: 1;
    width: 24px; /* 加宽内宽 (从 16px 增加到 24px) */
    background: #1a1a1a;
    border-radius: 12px; /* 配合宽度调整圆角 */
    margin: 5px 0;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8); /* 核心修正：改为对称内阴影，避免顶部阴影导致的视觉偏移 */
    border: 1px solid rgba(255,255,255,0.05);
}

.eval_bar_fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* 默认中立 */
    background: linear-gradient(to top, #eb3b5a, #a50f2d); /* 红色渐变 */
    transition: height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 翻转样式 */
.evaluation_bar.is-rotated {
    flex-direction: column-reverse;
}

.evaluation_bar.is-rotated .eval_bar_fill {
    bottom: auto;
    top: 0;
    background: linear-gradient(to bottom, #eb3b5a, #a50f2d);
}

.eval_bar_label {
    font-size: 11px; /* 稍微调大一点点，横向展示更清晰 */
    color: rgba(255,255,255,0.7); /* 提高一点亮度 */
    user-select: none;
    letter-spacing: 1px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.black_label {
    margin-bottom: 2px;
}

.red_label {
    margin-top: 2px;
}

.eval_bar_value {
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,1);
    pointer-events: none;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 50%); /* 核心修正：居中对齐分界线 */
    transition: bottom 0.8s cubic-bezier(0.23, 1, 0.32, 1), top 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    bottom: 50%;
    padding: 2px 0;
    background: rgba(0,0,0,0.6); /* 稍微加深背景，增加对比度 */
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 响应式调整 - 移动端贴紧边缘 */
@media screen and (max-width: 1000px) {
    .evaluation_bar {
        left: 0;
        top: 0;
        height: 100%;
        width: 26px; /* 稍微加宽以适应横向文字 (从 20px 增加到 26px) */
        padding: 5px 0;
        border-radius: 2px;
    }
    .eval_bar_container {
        width: 12px;
    }
    .eval_bar_label {
        font-size: 9px;
        letter-spacing: 0;
        transform: scale(0.9); /* 移动端文字微缩放以更好适应 */
    }
}

/* 统一按钮与下拉框样式 */
.bn_box input, 
.ai_level_select {
	height: 38px;
	border: 1px solid rgba(255, 215, 0, 0.3);
	border-radius: 8px;
	background: linear-gradient(180deg, #4a3a2a, #2a1f15);
	color: #e0c090;
	font: bold 14px/38px "Microsoft YaHei", sans-serif;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	outline: none;
	padding: 0 15px;
	margin: 0;
	white-space: nowrap;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* 按钮特定样式 */
.bn_box input {
  width: 90px;
  text-align: center;
}

/* 加载遮罩层样式 */
.loading_mask {
  display: none; /* 由 JS 切换为 flex */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.8) !important; /* 增加不透明度 */
  z-index: 2147483647 !important; /* 使用浏览器支持的最大 z-index */
  justify-content: center !important;
  align-items: center !important;
  pointer-events: all !important;
  backdrop-filter: blur(8px) !important; /* 增加模糊度 */
  -webkit-backdrop-filter: blur(8px) !important;
}

.loading_content {
  text-align: center;
}

.loading_spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid #ffffff;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 1s linear infinite;
}

.loading_text {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 进度条强化样式 (同步更新之前的工作) */
.loading_progress_container {
    width: 240px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 20px 0 10px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.loading_progress_bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffb74d, #ff8a00, #ff5722);
    box-shadow: 0 0 15px rgba(255, 138, 0, 0.8);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading_progress_percent {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #ffb74d;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 183, 77, 0.5);
}

/* ============================================================
   游戏设置面板 (Scheme A)
   ============================================================ */

/* 设置入口按钮 */
/* 按钮悬停提示 (Tooltip) 通用样式 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  right: 120%; /* 提示框显示在按钮左侧 */
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-tooltip]::after {
  content: "";
  position: absolute;
  right: 110%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1001;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* 移动端禁用自定义 Tooltip，使用原生行为或点击触发 */
@media screen and (max-width: 768px) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    display: none !important;
  }
}

.zoom_btn {
  position: fixed;
  right: 25px;
  bottom: 152px; /* 位于全屏按钮上方 (40 + 44 + 12 + 44 + 12) */
  width: 44px;
  height: 44px;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
  outline: none;
}

.zoom_btn:hover {
  opacity: 1;
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.zoom_btn:active {
  transform: translateY(1px) scale(0.95);
}

.zoom_icon {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  transition: all 0.3s ease;
}

/* 放大状态下的图标切换 (变为缩小图标) */
.zoom_btn.is_zoomed .zoom_icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E");
}

/* 全屏按钮位置保持 */
.fullscreen_btn {
  position: fixed;
  right: 25px;
  bottom: 96px; /* 位于设置按钮上方 (40 + 44 + 12) */
  width: 44px;
  height: 44px;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
  outline: none;
}

.fullscreen_btn:hover {
  opacity: 1;
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.fullscreen_btn:active {
  transform: translateY(1px) scale(0.95);
}

.fullscreen_icon {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  transition: all 0.3s ease;
}

/* 全屏状态下的图标切换 */
.fullscreen_btn.is_fullscreen .fullscreen_icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3'%3E%3C/path%3E%3C/svg%3E");
}

.settings_btn {
  position: fixed;
  right: 25px;
  bottom: 40px;
  width: 44px;
  height: 44px;
  background: rgba(30, 30, 30, 0.8); /* 更加深沉的扁平化背景 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.settings_btn:hover {
  opacity: 1;
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.settings_btn:active {
  transform: translateY(1px) scale(0.95);
  background: rgba(20, 20, 20, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
}

.settings_btn:hover .settings_icon {
  transform: rotate(60deg);
}

.settings_icon {
  width: 22px;
  height: 22px;
  transition: transform 0.5s ease;
  /* 使用标准精细的齿轮图标路径 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* 设置模态框 */
.settings_modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10000;
  display: none; /* 默认隐藏 */
  align-items: center;
  justify-content: center;
}

.settings_modal.show {
  display: flex;
}

.settings_backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.settings_panel {
  position: relative;
  width: 90%;
  max-width: 400px;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
  animation: settingsFadeIn 0.3s ease-out;
}

@keyframes settingsFadeIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.settings_header {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings_header h3 {
  margin: 0;
  font-size: 18px;
  color: #ffd700;
}

.close_settings_btn {
  font-size: 28px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
  line-height: 1;
}

.close_settings_btn:hover {
  color: #fff;
}

.settings_body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.settings_group {
  margin-bottom: 24px;
}

.settings_group:last-child {
  margin-bottom: 0;
}

.settings_group_title {
  font-size: 14px;
  color: #aaa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
  padding-left: 8px;
  border-left: 3px solid #ffd700;
}

.settings_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings_item:last-child {
  border-bottom: none;
}

.settings_label {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings_desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: normal;
}

/* 内部 BGM 按钮样式 */
.bgm_toggle_btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.bgm_toggle_btn:hover {
  background: rgba(255, 215, 0, 0.2);
}

.bgm_toggle_btn .bgm_icon {
  width: 18px;
  height: 18px;
  background: url(../img/stype_1/bgm_on.png) no-repeat center;
  background-size: contain;
}

.bgm_toggle_btn.off .bgm_icon {
  background-image: url(../img/stype_1/bgm_off.png);
  opacity: 0.5;
}

/* 音量滑块 */
.volume_item {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.volume_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.volume_value {
  font-size: 14px;
  color: #ffd700;
  font-weight: 500;
  font-family: monospace;
}

#bgmVolumeSlider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
}

#bgmVolumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #ffd700;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .settings_btn {
    right: 15px;
    bottom: 80px; /* 避开底部控制栏 */
    width: 40px;
    height: 40px;
  }
  .fullscreen_btn {
    right: 15px;
    bottom: 130px; /* 位于设置按钮上方 (80 + 40 + 10) */
    width: 40px;
    height: 40px;
  }
  .zoom_btn {
    right: 15px;
    bottom: 180px; /* 位于全屏按钮上方 (130 + 40 + 10) */
    width: 40px;
    height: 40px;
  }
  .settings_icon, .fullscreen_icon, .zoom_icon {
    width: 18px;
    height: 18px;
  }
}

/* 隐藏原有浮动控件（如果还在的话） */
.bgm_control_panel,
.rotate_control,
/* 状态标签样式 */
.info_badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 60px;
  text-align: center;
}

.info_badge.success {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border-color: rgba(76, 175, 80, 0.3);
}

.info_badge.warning {
  background: rgba(255, 152, 0, 0.15);
  color: #ffb74d;
  border-color: rgba(255, 152, 0, 0.3);
}

.info_badge.info {
  background: rgba(33, 150, 243, 0.15);
  color: #64b5f6;
  border-color: rgba(33, 150, 243, 0.3);
}

/* 首页硬件检测样式 - 升级版高大尚样式 */
.home_hardware_info {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  pointer-events: none;
  z-index: 5;
  animation: hardwareInfoFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes hardwareInfoFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.home_hardware_info .hardware_badge {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.home_hardware_info .badge_icon {
  font-size: 9px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1px 4px;
  border-radius: 4px;
}

.home_hardware_info .badge_value {
  font-size: 13px;
  font-weight: 500;
  font-family: 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 0.3px;
}

/* 状态颜色增强与呼吸灯特效 */
.home_hardware_info .success {
  color: #64ffda;
  text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
  animation: statusPulse 3s infinite ease-in-out;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(100, 255, 218, 0.5); }
  50% { opacity: 0.8; text-shadow: 0 0 15px rgba(100, 255, 218, 0.8); }
}

.home_hardware_info .warning {
  color: #ffd180;
  text-shadow: 0 0 10px rgba(255, 209, 128, 0.4);
}

.home_hardware_info .info {
  color: #80d8ff;
  text-shadow: 0 0 10px rgba(128, 216, 255, 0.4);
}

.home_hardware_info .loading {
  color: rgba(255, 255, 255, 0.3);
  animation: loadingPulse 1.5s infinite linear;
}

@keyframes loadingPulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

.recommend_control,
.cloud_library_control,
.term_mode_control {
  display: none !important;
}

/* 滑动开关 (Toggle Switch) */
.toggle_switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle_switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle_switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: .3s;
  border-radius: 24px;
}

.toggle_switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.toggle_switch input:checked + .slider {
  background-color: #ffd700; /* 与术语颜色一致 */
}

/* 禁用状态样式 */
.settings_item.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
}

.toggle_switch input:focus + .slider {
  box-shadow: 0 0 1px #ffd700;
}

.toggle_switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* 分段切换按钮 (Segmented Control) */
.segmented_control {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 2px;
  width: 110px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cloud_mode_control {
  width: 180px;
}

.segmented_item {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.segmented_item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.segmented_label {
  display: block;
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.segmented_item input:checked + .segmented_label {
  background: #ffd700;
  color: #1a140d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.segmented_item:hover .segmented_label {
  color: rgba(255, 255, 255, 0.9);
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
  /* 移动端操作按钮布局调整：移动到走棋历史上方 */
  .bn_box {
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 16px;
    width: 100%;
    justify-content: space-between;
    margin: 5px auto 10px auto !important; /* 紧贴棋盘下沿，下方留出间距给历史记录 */
    box-sizing: border-box;
    order: 0; /* 默认顺序，但在 flex 容器中可以通过 swap HTML 实现 */
  }

  /* 调整走棋历史容器间距 */
  .right_side_group {
    margin-top: 0 !important; /* 减少与上方按钮的间距 */
  }

  /* 隐藏难度标签以保持 2x2 布局整洁 */
  .ai_level {
    display: none;
  }

  /* 移动端隐藏特定设置项 */
  .desktop_only,
  .evaluation_bar {
    display: none !important;
  }

  /* 统一按钮与下拉框在移动端的大小和宽度 */
  .bn_box input, 
  .ai_level_select {
    width: calc(50% - 8px) !important; /* 减去 gap 的一半 */
    height: 48px !important; /* 确保最小点击区域 48px */
    line-height: 48px !important;
    font-size: 16px !important;
    flex: none;
    box-sizing: border-box;
    margin: 0 !important;
  }

    .term_mode_control {
        top: 115px !important; /* 在推荐走法下方 */
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: scale(0.75) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 24px !important;
        padding: 0 12px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        z-index: 11000 !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .cloud_library_control {
        top: 165px !important; /* 在对局特效下方 */
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: scale(0.75) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 24px !important;
        padding: 0 12px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        z-index: 11000 !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .recommend_control {
        top: 65px !important; /* 在翻转控制和对局特效中间 */
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: scale(0.75) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 24px !important;
        padding: 0 12px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        z-index: 11000 !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .rotate_control {
        top: 15px !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: scale(0.75) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 24px !important;
        padding: 0 12px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        z-index: 11000 !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .rotate_label {
        font-size: 19px !important;
    }
    
    .recommend_label {
        font-size: 19px !important;
    }
    
    .term_label {
        font-size: 19px !important; /* 统一字号 */
    }
    
    .cloud_library_label {
        font-size: 19px !important;
    }
    
    .toggle_switch {
        width: 48px;
        height: 28px; /* 稍微增加开关高度 */
    }
  
  .toggle_switch .slider:before {
    height: 20px;
    width: 20px;
  }
  
  .toggle_switch input:checked + .slider:before {
    transform: translateX(22px);
  }

  /* 移动端音量面板位置调整：移动到左上角 */
  .bgm_control_panel {
    top: 15px !important;
    left: 10px !important;
    bottom: auto !important;
    right: auto !important;
    transform: scale(0.8) !important;
    z-index: 11000 !important;
    gap: 8px !important;
  }
  
  .bgm_toggle {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

.bgm_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 透明度调节：玻璃模式 (保留类名以防 JS 调用，但简化逻辑) */
.bgm_control_panel.glass_mode .bgm_toggle {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.bgm_control_panel.glass_mode .bgm_icon {
  opacity: 0.5;
}

.bgm_toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.bgm_toggle:active {
  transform: scale(0.95);
}

.bgm_icon {
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E") no-repeat center;
  transition: all 0.3s ease;
}

.bgm_toggle.off .bgm_icon {
  opacity: 0.6;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73L19.73 21 21 19.73 4.27 3zM14 7h4V3h-6v5.18l2 2V7z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73L19.73 21 21 19.73 4.27 3zM14 7h4V3h-6v5.18l2 2V7z'/%3E%3C/svg%3E") no-repeat center;
}

/* 下拉框特定样式 */
.ai_level_select {
	width: 110px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e0c090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

/* 悬停效果 */
.bn_box input:hover, 
.ai_level_select:hover {
	border-color: rgba(255, 215, 0, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	color: #fff;
	background: linear-gradient(180deg, #5a4a3a, #3a2f25);
}

/* 点击效果 */
.bn_box input:active, 
.ai_level_select:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	background: #2a1f15;
}

/* 下拉框选项样式 */
.ai_level_select option {
	background: #2a1f15;
	color: #e0c090;
}

.result_modal{ position:fixed; left:0; top:0; right:0; bottom:0; display:none; z-index:9999; pointer-events: none; }
.result_modal.is_show{ display:block; }
.result_backdrop{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); opacity:0; pointer-events: none; }
.result_modal.is_show .result_backdrop{ animation:result_fade_in .22s ease-out forwards; }
.result_fx{ position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none; }
.result_panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:320px; background:rgba(42,31,21,0.98); border:1px solid rgba(255,215,0,0.3); border-radius:16px; padding:30px; box-sizing:border-box; overflow:hidden; opacity:0; pointer-events: auto; transition: border 0.3s ease, box-shadow 0.3s ease; }
.result_panel:before{ content:""; position:absolute; left:-30%; top:-60%; width:140%; height:140%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); transform:rotate(18deg); opacity:.55; pointer-events:none; }
.result_panel:after{ content:""; position:absolute; left:-60%; top:-20%; width:60%; height:140%; background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); transform:translateX(-20%) rotate(12deg); opacity:0; pointer-events:none; }
.result_modal.is_show .result_panel{ animation:result_pop_in .32s cubic-bezier(.2,.9,.2,1.1) forwards; }
.result_modal.is_show .result_panel:after{ animation:result_sheen 1.05s ease-out .08s forwards; }
.result_header{ text-align:left; }
.result_badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 12px;
	font-family: "Microsoft YaHei", sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 2px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 3px solid transparent;
	text-transform: uppercase;
}

.result_badge.win {
	background: rgba(255, 215, 0, 0.1);
	color: #ffd700;
	border-color: #ffd700;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.result_badge.lose {
	background: rgba(66, 165, 245, 0.1);
	color: #42a5f5;
	border-color: #42a5f5;
	text-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
}

.result_badge.draw {
	background: rgba(158, 158, 158, 0.1);
	color: #9e9e9e;
	border-color: #9e9e9e;
}
.result_title{ margin-top:10px; font: normal 22px/28px"Microsoft YaHei", "楷体", serif; color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; transform:translateY(6px); }
.result_subtitle{ margin-top:6px; font: normal 12px/18px"�?�???�?"; color:rgba(255,255,255,.78); }
.result_reason{ margin-top:6px; font: normal 12px/18px"�?�???�?"; color:rgba(255,255,255,.92); opacity:0; transform:translateY(6px); }
.result_modal.is_show .result_title{ animation:result_text_in .26s ease-out .08s forwards; }
.result_modal.is_show .result_reason{ animation:result_text_in .26s ease-out .14s forwards; }

/* 游戏模式切换控件布局 - 左侧区域 */
.mode_control {
    position: absolute;
    top: 150px; /* 向上移动70px：从220px调整到150px，提高按钮在视觉布局中的相对高度 */
    left: -235px; /* 增加间距避免遮挡能量条，并与上方标识对齐 (从 -180px 调整为 -235px) */
    width: 165px; /* 增加宽度，使其更大气 (从 110px 调整为 165px) */
    z-index: 20;
}

.mode_options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.mode_btn {
    width: 100%;
    height: 42px; /* 增加高度：从 38px 调整到 42px */
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    background: linear-gradient(180deg, #4a3a2a, #2a1f15);
    color: #e0c090;
    font: bold 15px/42px "Microsoft YaHei", sans-serif; /* 增加字号：从 13px 调整到 15px */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    outline: none;
    padding: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 按钮高光效果 */
.mode_btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.mode_btn:hover::before {
    opacity: 1;
}

.mode_btn:hover {
    border-color: rgba(255, 215, 0, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    color: #fff;
    background: linear-gradient(180deg, #5a4a3a, #3a2f25);
}

.mode_btn.active {
    background: linear-gradient(180deg, #b88a4d, #856132); /* 调整为更协调的金棕色系 */
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.mode_btn.teaching_btn {
    background: linear-gradient(135deg, rgba(224, 192, 144, 0.15), rgba(184, 134, 11, 0.25));
    border: 1px solid rgba(224, 192, 144, 0.5);
    color: #e0c090;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(224, 192, 144, 0.3);
    font-weight: bold;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 15px rgba(224, 192, 144, 0.1), 0 4px 15px rgba(0, 0, 0, 0.4);
    margin-top: 12px;
    transition: all 0.3s ease;
}

.mode_btn.teaching_btn:hover {
    background: linear-gradient(135deg, rgba(224, 192, 144, 0.3), rgba(184, 134, 11, 0.4));
    border-color: #e0c090;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(224, 192, 144, 0.3), 0 8px 25px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* 响应式设计 - 移动端适配 */
@media screen and (max-width: 1000px) {
    .mode_control {
        position: relative;
        top: auto;
        left: auto;
        width: 523px; /* 匹配棋盘基础宽度 */
        max-width: 95vw;
        margin: 15px auto 10px; /* 增加底部间距 */
        display: block;
        z-index: 20;
    }
    
    .mode_options {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; /* 强制不换行 */
        justify-content: space-between;
        gap: 5px; /* 适当缩小间距以确保在窄屏手机上也能排成一行 */
        width: 100%;
    }
    
    .mode_btn {
        flex: 1; /* 均匀分布 */
        width: auto; /* 覆盖之前的 23% */
        height: 48px; /* 增加高度符合触控规范 (48px) */
        line-height: 48px;
        font-size: 15px; /* 稍微优化字号，确保在窄屏下不换行 */
        padding: 0 2px;
        white-space: nowrap; /* 防止文字换行 */
    }
    
    .mode_btn.teaching_btn {
        margin-top: 0; /* 移动端横向排列时取消顶部边距，确保垂直对齐 */
    }
}
.result_actions{ margin-top:14px; display:flex; gap:10px; flex-wrap: wrap; }
.result_btn{ flex: 1 1 calc(50% - 10px); min-width: 100px; height:36px; line-height:36px; border-radius:10px; background:linear-gradient(180deg,#ffb74d,#ff8a00); color:#2b1a00; text-decoration:none; cursor:pointer; font: normal 14px/36px "Microsoft YaHei", sans-serif; user-select:none; text-align: center; }
.result_btn:hover{ filter:brightness(1.03); }
.result_btn_ghost{ background:transparent; color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.18); }
.result_modal.win .result_panel { 
	border: 4px solid #ffd700;
	box-shadow: 0 0 50px rgba(255, 215, 0, 0.4); 
}
.result_modal.lose .result_panel { 
	border: 4px solid #42a5f5;
	box-shadow: 0 0 50px rgba(66, 165, 245, 0.4); 
}
.result_modal.draw .result_panel { 
	border: 4px solid #9e9e9e;
	box-shadow: 0 0 50px rgba(158, 158, 158, 0.4); 
}
.result_modal.lose.is_show .result_panel{ animation:result_pop_in .32s cubic-bezier(.2,.9,.2,1.1) forwards, result_shake .38s ease-in-out .18s 1; }

@keyframes result_fade_in{
	from{ opacity:0; }
	to{ opacity:1; }
}
@keyframes result_pop_in{
	from{ opacity:0; transform:translate(-50%,-50%) scale(.92); }
	to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes result_text_in{
	from{ opacity:0; transform:translateY(6px); }
	to{ opacity:1; transform:translateY(0); }
}
@keyframes result_sheen{
	0%{ opacity:0; transform:translateX(-20%) rotate(12deg); }
	15%{ opacity:.55; }
	100%{ opacity:0; transform:translateX(260%) rotate(12deg); }
}
@keyframes result_shake{
	0%{ transform:translate(-50%,-50%) scale(1); }
	15%{ transform:translate(calc(-50% + 2px),calc(-50% - 1px)) scale(1); }
	30%{ transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(1); }
	45%{ transform:translate(calc(-50% + 3px),calc(-50% + 2px)) scale(1); }
	60%{ transform:translate(calc(-50% - 2px),calc(-50% - 2px)) scale(1); }
	100%{ transform:translate(-50%,-50%) scale(1); }
}

/* 棋局日志系统样式 */
.log_system_box {
    width: 523px;
    max-width: 95vw;
    box-sizing: border-box; /* 确保 padding 和 border 不会增加总宽度 */
    margin: 0px auto;
    padding: 15px;
    background: rgba(44, 62, 80, 0.45);
    border: 1px solid rgba(224, 192, 144, 0.25);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.log_system_title {
    font-size: 14px;
    color: #e0c090;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.log_system_btns {
    display: flex;
    justify-content: space-around;
    gap: 8px;
}

.log_btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 4px;
    background: rgba(224, 192, 144, 0.15);
    color: #e0c090;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.log_btn:hover {
    background: rgba(224, 192, 144, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.log_btn:active {
    transform: translateY(0);
}

.log_btn.clear { color: #ff7675; }
.log_btn.view { background: rgba(224, 192, 144, 0.25); font-weight: bold; }

/* 日志弹窗 */
.log_btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.log_system_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    backdrop-filter: blur(8px);
}

.log_modal_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    background: #1e272e; /* 统一使用深色背景 */
    border: 1px solid rgba(224, 192, 144, 0.4);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    max-height: 90vh;
    overflow-y: auto;
    transition: all 0.4s ease;
}

/* 棋盘聚焦引导动画 */
@keyframes boardFocusPulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 192, 144, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(224, 192, 144, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 192, 144, 0); }
}

.chess_box.focus_guidance {
    animation: boardFocusPulse 2s infinite;
}


.log_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(224, 192, 144, 0.2);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.log_modal_header h3 {
    margin: 0;
    color: #e0c090;
    font-size: 18px;
}

.log_close {
    color: #e0c090;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

/* 日志表格 */
.log_table {
    width: 100%;
    border-collapse: collapse;
    color: #f1f2f6; /* 提高对比度 */
    font-size: 14px;
}

.log_table th, .log_table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.side_red_cell {
    color: #ff4757;
    font-weight: 500;
}

.side_black_cell {
    color: #70a1ff;
    font-weight: 500;
}

@media screen and (max-width: 640px) {
    .log_table th:nth-child(5), 
    .log_table td:nth-child(5),
    .log_table th:nth-child(6),
    .log_table td:nth-child(6) {
        display: none; /* 移动端隐藏手数和时长 */
    }
}

.log_table th {
    color: #e0c090; /* 标题使用金色提高识别度 */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.result_tag {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}
.result_tag.win { background: rgba(255, 215, 0, 0.1); color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.4); }
.result_tag.lose { background: rgba(66, 165, 245, 0.1); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.4); }
.result_tag.draw { background: rgba(158, 158, 158, 0.1); color: #9e9e9e; border: 1px solid rgba(158, 158, 158, 0.4); }

.log_detail_btn {
    background: #e0c090;
    color: #1a252f; /* 避免纯黑，使用深蓝色 */
    border: none;
    padding: 5px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.log_detail_btn:hover {
    background: #f3d4a7;
    box-shadow: 0 0 10px rgba(224, 192, 144, 0.3);
}

.log_action_cell {
    display: flex;
    gap: 8px;
    align-items: center;
}

.log_delete_btn {
    background: #ff4757;
    color: #fff;
    border: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.log_delete_btn:hover {
    background: #ff6b81;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.4);
    transform: scale(1.1);
}

.log_pagination {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #dfe6e9;
}

.log_pagination button {
    background: rgba(224, 192, 144, 0.1);
    border: 1px solid rgba(224, 192, 144, 0.5);
    color: #e0c090;
    padding: 6px 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.log_pagination button:hover:not(:disabled) {
    background: rgba(224, 192, 144, 0.2);
    border-color: #e0c090;
}

.log_pagination button:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* 备注列样式 */
.remark_header { width: 150px; }
.remark_cell { padding: 4px 8px !important; }
.log_remark_input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.log_remark_input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.log_remark_input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 640px) {
    .remark_header, .remark_cell {
        display: none; /* 移动端隐藏备注列 */
    }
}

/* 象棋教学模态框样式 */
.teaching_content {
    max-width: 900px !important;
    display: flex;
    flex-direction: column;
}

.teaching_body {
    display: flex;
    gap: 20px;
    height: 500px;
    margin-top: 10px;
}

.teaching_sidebar {
    width: 180px;
    border-right: 1px solid rgba(224, 192, 144, 0.2);
    padding-right: 15px;
}

.teaching_menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.teaching_menu li {
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    color: #dfe6e9;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.teaching_menu li:hover {
    background: rgba(224, 192, 144, 0.1);
    color: #e0c090;
}

.teaching_menu li.active {
    background: rgba(224, 192, 144, 0.15);
    color: #e0c090;
    font-weight: bold;
    border-left: 3px solid #e0c090;
}

.teaching_main {
    flex-grow: 1;
    position: relative;
    transition: opacity 0.2s ease-in-out;
    height: 100%;
    overflow: hidden;
}

.teaching_chapter_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 10px 10px 10px 0;
    display: none;
    box-sizing: border-box;
}

.teaching_chapter_container.active {
    display: block;
}

/* 章节滚动条美化 */
.teaching_chapter_container::-webkit-scrollbar {
    width: 6px;
}

.teaching_chapter_container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.teaching_chapter_container::-webkit-scrollbar-thumb {
    background: rgba(224, 192, 144, 0.3);
    border-radius: 3px;
    transition: background 0.3s;
}

.teaching_chapter_container::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 192, 144, 0.5);
}

.teaching_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.teaching_table th, .teaching_table td {
    border: 1px solid rgba(224, 192, 144, 0.2);
    padding: 12px;
    text-align: left;
    color: #dfe6e9;
    font-size: 15px;
}

.teaching_table th {
    background: rgba(224, 192, 144, 0.1);
    color: #e0c090;
}

.teaching_main h4 {
    color: #e0c090;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.2;
}

.teaching_main p {
    color: #dfe6e9;
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 12px;
}

.teaching_card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.teaching_card h5 {
    color: #e0c090;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 19px;
}

.teaching_list {
    padding-left: 20px;
}

.teaching_list li {
    margin-bottom: 10px;
    color: #dfe6e9;
    font-size: 16px;
    line-height: 1.6;
}

.teaching_footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(224, 192, 144, 0.2);
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    .teaching_body {
        flex-direction: column;
        height: auto;
        max-height: 60vh;
    }
    .teaching_sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(224, 192, 144, 0.2);
        padding-right: 0;
        padding-bottom: 10px;
    }
    .teaching_menu {
        display: flex;
        overflow-x: auto;
        gap: 10px;
    }
    .teaching_menu li {
        white-space: nowrap;
        margin-bottom: 0;
    }
}

/* 互动练习模块增强样式 */
.puzzle_container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.puzzle_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(224, 192, 144, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(224, 192, 144, 0.1);
}

.puzzle_stats_bar {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #e0c090;
}

.puzzle_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.puzzle_item_card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.puzzle_item_card h5 {
    color: #e0c090; /* 修改为琥珀金，解决黑色看不清的问题 */
    margin: 8px 0 !important;
    font-size: 16px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.puzzle_item_card:hover {
    background: rgba(224, 192, 144, 0.08);
    transform: translateY(-3px);
    border-color: rgba(224, 192, 144, 0.3);
}

.puzzle_item_card.completed::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #2ecc71;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.puzzle_badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.badge_basic { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.badge_advanced { background: rgba(241, 196, 15, 0.2); color: #f1c40f; }
.badge_challenge { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }

/* 练习详情视图 */
.puzzle_detail_view {
    animation: fadeIn 0.3s ease;
}

.puzzle_question_area {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.puzzle_options {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.option_btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    color: #dfe6e9;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
}

.option_btn:hover {
    background: rgba(224, 192, 144, 0.1);
    border-color: #e0c090;
}

.option_btn.correct {
    background: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

.option_btn.wrong {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #e74c3c;
}

/* 提示与反馈 */
.puzzle_feedback {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    display: none;
    animation: slideUp 0.3s ease;
}

.puzzle_hint_box {
    margin-top: 10px;
    font-style: italic;
    color: #bdc3c7;
    font-size: 14px;
    border-left: 3px solid #e0c090;
    padding-left: 10px;
}

/* 数据看板 */
.puzzle_dashboard {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.radar_chart_placeholder {
    height: 200px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(224, 192, 144, 0.3);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* 详情页布局与对比度优化 */
.detail_mode {
    background: #1e272e !important; /* 更深的背景增强沉浸感 */
}

.detail_info_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.3);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(224, 192, 144, 0.1);
}

.info_item {
    color: #dfe6e9;
    font-size: 14px;
}

.info_item strong {
    color: #e0c090;
    margin-right: 8px;
}

/* 红黑方视觉区分 */
.info_item.side_red strong {
    color: #ff4757;
    text-shadow: 0 0 5px rgba(255, 71, 87, 0.3);
}

.info_item.side_black strong {
    color: #70a1ff;
    text-shadow: 0 0 5px rgba(112, 161, 255, 0.3);
}

@media screen and (max-width: 480px) {
    .detail_info_grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 8px;
    }
    
    .info_item {
        font-size: 13px;
    }
}

.replay_controls {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.control_btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ctrl_btn {
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(224, 192, 144, 0.25);
    color: #e0c090;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.ctrl_btn:hover {
    background: rgba(224, 192, 144, 0.1);
    border-color: #e0c090;
}

.ctrl_btn.highlight { 
    background: #e0c090; 
    color: #1a252f; 
    font-weight: bold; 
    border: none;
    box-shadow: 0 4px 15px rgba(224, 192, 144, 0.2);
}

.ctrl_btn.highlight:hover {
    background: #f3d4a7;
    transform: translateY(-2px);
}

.speed_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #dfe6e9;
    background: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 6px;
}

.speed_btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: #dfe6e9;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.speed_btn.active { 
    background: #e0c090; 
    color: #1a252f; 
    border-color: #e0c090; 
    font-weight: bold;
}

.detail_footer {
    text-align: right;
    border-top: 1px solid rgba(224, 192, 144, 0.15);
    padding-top: 20px;
    margin-top: 10px;
}

.detail_footer button {
    background: transparent;
    border: 1px solid rgba(224, 192, 144, 0.6);
    color: #e0c090;
    padding: 10px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.detail_footer button:hover {
    background: rgba(224, 192, 144, 0.1);
    border-color: #e0c090;
}

/* 层级冲突修复与动态布局 */
.log_system_modal.replay_mode {
    background: rgba(0,0,0,0.6); /* 降低背景遮罩透明度，方便看棋盘 */
    backdrop-filter: blur(4px);
}

.log_modal_content.replay_layout {
    left: auto;
    right: 30px; 
    transform: translateY(-50%);
    width: 350px; /* 移除历史列表后，大幅收窄面板宽度，保持简洁 */
    max-height: 92vh; 
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 面板窄了，不再需要水平滚动 */
    overflow-y: auto; 
    padding: 25px;
    box-sizing: border-box;
}

/* 详情信息网格调整为单列，适应窄面板 */
.log_modal_content.replay_layout .detail_info_grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.replay_main {
    display: flex;
    flex-direction: column; /* 改为垂直布局 */
    gap: 20px; 
    flex: 1;
    min-height: 0;
    min-width: 0; 
}

.replay_controls {
    width: 100%; /* 占据面板全宽 */
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.control_btns {
    display: flex;
    flex-direction: row; /* 控制按钮横向排列，节省高度 */
    gap: 8px;
}

.ctrl_btn {
    flex: 1;
    padding: 12px 5px;
    font-size: 13px;
}

/* 速度选择器优化 */
.speed_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #dfe6e9;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.speed_btn {
    flex: 1; /* 速度按钮平分空间 */
    text-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #dfe6e9;
    padding: 6px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

/* 棋盘联动缩放 - 移除自动播放时的偏移，保持界面稳定 */
.chess_box.replaying {
    /* transform: scale(0.85) translateX(-260px); 移除此处偏移，避免播放时棋盘跳动 */
    transition: all 0.5s ease;
    z-index: 10001;
    position: relative;
}

@media screen and (max-width: 1200px) {
    .log_modal_content.replay_layout {
        width: 320px;
        right: 15px;
    }
}

/* 响应式：针对移动端优化复盘模式布局 */
@media screen and (max-width: 1000px) {
    .log_system_modal.replay_mode {
        background: rgba(0,0,0,0.4); /* 极低透明度，聚焦棋盘 */
        backdrop-filter: blur(2px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* 将控制面板推向底部 */
    }

    .log_modal_content.replay_layout {
        position: fixed; /* 移动端改为固定定位在底部 */
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: none;
        max-height: 85vh; /* 展开后的最大高度 */
        height: auto;
        overflow-y: visible; /* 允许手柄溢出 */
        border-radius: 24px 24px 0 0; /* 更圆润的顶部 */
        padding: 1.25rem;
        margin: 0;
        /* 强化辨识度：深色半透明背景 + 强化的毛玻璃效果 */
        background: rgba(30, 39, 46, 0.95) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        
        box-shadow: 0 -15px 40px rgba(0,0,0,0.7);
        border: none;
        border-top: 1px solid rgba(224, 192, 144, 0.4);
        
        /* 关键：层级必须高于棋盘 (棋盘是 10001) */
        z-index: 10005;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        display: flex;
        flex-direction: column;
    }

    /* 迷你模式状态 */
    .log_modal_content.replay_layout.mini_mode {
        transform: translateY(calc(100% - 110px)); /* 留出约 110px 显示标题和基础信息 */
    }

    /* 操作手柄 */
    .replay_handle {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 30px;
        background: rgba(30, 39, 46, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 15px 15px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-top: 1px solid rgba(224, 192, 144, 0.3);
        z-index: 10006;
    }

    .replay_handle:after {
        content: "";
        width: 30px;
        height: 4px;
        background: rgba(224, 192, 144, 0.6);
        border-radius: 2px;
        transition: transform 0.3s ease;
    }

    .mini_mode .replay_handle:after {
        transform: translateY(-1px);
    }

    /* 迷你模式下的内容显示控制 */
    .log_modal_content.replay_layout.mini_mode .replay_main,
    .log_modal_content.replay_layout.mini_mode .detail_footer {
        opacity: 0;
        pointer-events: none;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .log_modal_content.replay_layout:not(.mini_mode) .replay_main,
    .log_modal_content.replay_layout:not(.mini_mode) .detail_footer {
        opacity: 1;
        transition: opacity 0.3s ease 0.1s;
    }

    .chess_box.replaying {
        /* JS 动态计算位置和缩放，此处仅保留基础属性 */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        /* transform-origin 由 play.js 统一管理为 left top */
        will-change: transform;
        opacity: 1; /* 复盘模式下棋盘半透明，突出控制台 */
    }

    /* 优化详情信息网格 */
    .log_modal_content.replay_layout .detail_info_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 移动端双列排列更紧凑 */
        gap: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .info_item {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 控制按钮增大触控区域 */
    .control_btns {
        display: flex;
        gap: 15px; /* 增加按钮间距防止误触 */
        width: 100%;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .ctrl_btn {
        flex: 1; /* 按钮平分宽度，增大触控面积 */
        height: 52px; /* 进一步提升高度 */
        font-size: 1.1rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-weight: 600;
        letter-spacing: 1px;
    }

    /* 速度控制优化 */
    .speed_controls {
        padding: 15px;
        gap: 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        justify-content: space-around;
    }

    .speed_btn {
        height: 40px;
        line-height: 40px;
        padding: 0;
        font-size: 0.9rem;
    }

    .detail_footer {
        padding-top: 15px;
        margin-top: 5px;
        text-align: center; /* 按钮居中 */
    }

    .detail_footer button {
        width: 100%;
        height: 48px;
        font-size: 1rem;
    }

    /* 隐藏不必要的标题，节省空间 */
    .log_modal_header {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .log_modal_header h3 {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80%;
    }
    
    /* 紧凑型按钮组 */
    .replay_main {
        gap: 10px;
    }
    
    .replay_controls {
        gap: 12px;
    }
    /* 历史记录跳转提示适配 */
    .history_jump_hint {
        font-size: 12px;
        padding: 6px 10px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 600px) {
    .chess_box.replaying {
        /* transform: translateX(-50%) scale(0.65); 移除此处偏移，由 JS 统一管理 */
        top: 20px;
    }
    
    .log_modal_content.replay_layout {
        padding: 1.2rem;
    }
    
    .chess_box.replaying {
        /* transform: translateX(-50%) scale(0.6); 移除此处偏移，由 JS 统一管理 */
        top: 1vh;
    }
    
    .detail_info_grid {
        padding: 0.5rem;
        gap: 0.4rem;
    }
}

/* 复盘模式下通用控件重定位 (棋盘正下方) */
.review_mode_active .rotate_control {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 15px) !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: auto !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    opacity: 1 !important;
    z-index: 10002 !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.review_mode_active .rotate_control:hover {
    background: rgba(0, 0, 0, 0.85) !important;
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* 复盘模式下桌面端控件重定位 (棋盘下方左右两侧) */
@media screen and (min-width: 1001px) {
    /* 1. 特效开关移至棋盘外左下侧 */
    .review_mode_active .term_mode_control {
        position: absolute !important;
        left: 0 !important;
        top: calc(100% + 15px) !important;
        right: auto !important;
        bottom: auto !important;
        height: 40px !important;
        background: rgba(0, 0, 0, 0.7) !important; /* 透明度 70% */
        opacity: 1 !important;
        transform: none !important;
        z-index: 10002 !important;
        padding: 0 16px !important;
        border-radius: 20px !important;
        display: flex !important;
        align-items: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .review_mode_active .term_mode_control:hover {
        background: rgba(0, 0, 0, 0.85) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    /* 2. 音量面板移至棋盘外右下侧 */
    .review_mode_active .bgm_control_panel {
        position: absolute !important;
        right: 0 !important;
        top: calc(100% + 15px) !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: 40px !important;
        flex-direction: row !important; /* 横向布局适应底部 */
        background: rgba(0, 0, 0, 0.7) !important; /* 透明度 70% */
        opacity: 1 !important;
        transform: none !important;
        z-index: 10002 !important;
        padding: 0 12px !important;
        border-radius: 20px !important;
        gap: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .review_mode_active .bgm_control_panel:hover {
        background: rgba(0, 0, 0, 0.85) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    /* 3. 内部元素尺寸微调 */
    .review_mode_active .bgm_control_panel .bgm_toggle,
    .review_mode_active .bgm_control_panel .bgm_config_btn {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .review_mode_active .bgm_control_panel .bgm_icon,
    .review_mode_active .bgm_control_panel .bgm_config_icon {
        transform: scale(0.85) !important;
    }

    /* 4. 音量调节面板在复盘模式下的特殊处理 (强制支持滑动条) */
    .review_mode_active .bgm_control_panel .bgm_volume_wrapper {
        display: flex !important; /* 覆盖 mini_mode 的 none */
        position: absolute !important;
        bottom: 50px !important;
        right: 0 !important;
        width: 40px !important;
        height: 120px !important;
        flex-direction: column !important;
        padding: 15px 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 20px !important;
        transform: translateY(10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .review_mode_active .bgm_control_panel:hover .bgm_volume_wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* 复盘模式下禁用 Tooltip 以免遮挡 */
    .review_mode_active [data-tooltip]::before {
        display: none !important;
    }

/* 迷你复盘播放器样式 - 紧凑版本 */
.mini_replay_player {
    background: rgba(30, 39, 46, 0.95);
    border: 1px solid rgba(224, 192, 144, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    height: 36px;
    width: 100%;
}

.mini_replay_player .player_controls {
    display: flex;
    gap: 2px;
    align-items: center;
}

.mini_replay_player .player_btn {
    background: rgba(52, 152, 219, 0.7);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mini_replay_player .player_btn:hover {
    background: rgba(52, 152, 219, 0.9);
    transform: translateY(-1px);
}

.mini_replay_player .player_btn.play_pause {
    background: rgba(46, 204, 113, 0.7);
}

.mini_replay_player .player_btn.play_pause:hover {
    background: rgba(46, 204, 113, 0.9);
}

.mini_replay_player .player_btn:disabled {
    background: rgba(127, 140, 141, 0.4);
    cursor: not-allowed;
    transform: none;
}

.mini_replay_player .player_progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini_replay_player .progress_bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.mini_replay_player .progress_fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.mini_replay_player .progress_handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #ffd700;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
    transition: all 0.2s ease;
}

.mini_replay_player .progress_handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.mini_replay_player .progress_handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

.mini_replay_player .progress_info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
}

.mini_replay_player .exit_replay_btn {
    background: rgba(192, 57, 43, 0.7);
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mini_replay_player .exit_replay_btn:hover {
    background: rgba(192, 57, 43, 0.9);
    transform: translateY(-1px);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .mini_replay_player {
        padding: 4px 6px;
        gap: 6px;
        height: 32px;
    }
    
    .mini_replay_player .player_btn {
        width: 20px;
        height: 20px;
        font-size: 8px;
    }
    
    .mini_replay_player .progress_info {
        font-size: 9px;
        min-width: 25px;
    }
    
    .mini_replay_player .exit_replay_btn {
        width: 18px;
        height: 18px;
        font-size: 8px;
    }
}

/* 云端提示样式 */
.cloud_hint {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}

.hint_loading {
    color: #999;
    font-size: 10px;
    font-style: italic;
    animation: hintPulse 1.5s infinite;
}

@keyframes hintPulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

.hint_badge {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    font-weight: bold;
    cursor: help;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.level_even { background-color: #95a5a6; } /* 均势 - 灰色 */
.level_reasonable { background-color: #3498db; } /* 合理 - 蓝色 */
.level_win { background-color: #27ae60; }  /* 大优 - 深绿色 */
.level_good { background-color: #2ecc71; } /* 优势 - 绿色 */
.level_lose { background-color: #c0392b; } /* 大劣 - 深红色 */
.level_bad { background-color: #e74c3c; }  /* 劣势 - 红色 */
.level_brilliant { background-color: #9b59b6; } /* 妙着 - 紫色 */
.level_mistake { background-color: #f39c12; }  /* 失误 - 橙色 */

.history_item:hover .hint_badge {
    transform: scale(1.05);
    transition: transform 0.2s;
}
}

/* AI �������Խ�����ʽ */
#aiTestModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.ai_test_container {
    width: 90%;
    max-width: 640px;
    background: #1a1a1a;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* 使用伪元素实现金色渐变圆角边框，解决 border-image 与 border-radius 冲突问题 */
.ai_test_container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 2px; /* 边框厚度 */
    background: linear-gradient(135deg, #ffd700, #b8860b, #ffd700);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.ai_test_header {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    position: relative;
    z-index: 2;
}

.ai_test_title {
    color: #ffd700;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.ai_test_content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

.test_card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: transform 0.3s;
}

.test_card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.card_title {
    color: #ffd700;
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card_title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: #ffd700;
    border-radius: 2px;
}

.card_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media screen and (min-width: 900px) {
    .card_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.item_name {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.item_value {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Consolas', monospace;
}

.item_value.large {
    color: #ffd700;
    font-size: 22px;
}

.ai_test_footer {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 16px;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    z-index: 2;
}

.test_btn {
    padding: 10px 32px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.btn_retest {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #000;
}

.btn_retest:hover {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
}

.btn_home {
    background: transparent;
    border: 1px solid #ffd700;
    color: #ffd700;
}

.btn_home:hover {
    background: rgba(255, 215, 0, 0.1);
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate_value {
    animation: countUp 0.5s ease-out forwards;
}

/* 自摆棋弹窗样式 */
.setup_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.setup_container {
    width: 90%;
    max-width: 800px;
    background: #1a1a1a;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.setup_container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #ffd700, #b8860b, #ffd700);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.setup_header {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    z-index: 2;
}

.setup_title {
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}

.setup_close {
    color: rgba(255, 215, 0, 0.6);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s;
}

.setup_close:hover {
    color: #ffd700;
}

.setup_body {
    padding: 20px;
    display: flex;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

.setup_board_wrapper {
    flex: 1;
    background: #2a2a2a;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

#setupCanvas {
    max-width: 100%;
    max-height: 100%;
    cursor: crosshair;
}

.setup_tools {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tool_group {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.tool_title {
    color: #ffd700;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
    border-left: 3px solid #ffd700;
    padding-left: 8px;
}

.piece_bin {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.piece_item {
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 50%;
    border: 2px solid transparent;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.piece_item:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.piece_item.active {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), inset 0 0 10px rgba(255, 215, 0, 0.3);
    transform: scale(1.1);
}

.utility_tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.utility_btn {
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
}

.utility_btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
}

/* 关于本项目按钮与模态窗口 */
.top_functional_bar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.about_btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 30px;
    color: #e0c090;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.about_btn:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2);
    color: #fff;
}

.about_btn:active {
    transform: translateY(0);
}

.about_icon {
    width: 20px;
    height: 20px;
    background: #ffd700;
    color: #2a1f15;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    font-weight: bold;
    font-size: 14px;
}

/* 模态窗口样式 */
.about_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.about_modal.is_show {
    display: flex;
    opacity: 1;
}

.about_content {
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: linear-gradient(135deg, #2c3e50, #1a1a1a);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about_modal.is_show .about_content {
    transform: scale(1);
}

.about_header {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
}

.about_title {
    font-size: 22px;
    color: #ffd700;
    font-weight: bold;
    letter-spacing: 1px;
}

.about_close {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.about_close:hover {
    color: #ff4757;
}

.about_body {
    padding: 30px;
    color: #ccc;
    line-height: 1.8;
    text-align: left; /* 强制左对齐 */
}

.about_section {
    margin-bottom: 30px;
    text-align: left; /* 确保每一块都是左对齐 */
}

.about_section:last-child {
    margin-bottom: 0;
}

.about_section h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #ffd700;
    padding-left: 12px;
    line-height: 1.2;
}

.section_icon {
    font-size: 20px;
}

.about_section p {
    font-size: 15px;
    text-align: justify;
    margin-bottom: 10px;
}

.tech_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech_list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 15px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tech_list li::before {
    content: "◈";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffd700;
    font-size: 18px;
    line-height: 1.6;
}

.tech_list li strong {
    color: #ffd700; /* 突出显示标题 */
    font-size: 15px;
    margin-bottom: 4px;
    display: block;
}

.tech_list li span {
    color: #aaa;
    line-height: 1.6;
}

.developer_info {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 12px;
    border-left: 4px solid #ffd700;
}

.dev_name {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}

.dev_bio {
    font-size: 14px;
    margin: 0;
}

/* 响应式调整 */
@media screen and (max-width: 600px) {
    .top_functional_bar {
        top: 10px;
        right: 10px;
    }
    
    .about_btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .about_content {
        width: 95%;
    }
    
    .about_header {
        padding: 15px 20px;
    }
    
    .about_title {
        font-size: 18px;
    }
    
    .about_body {
        padding: 20px;
    }
    
    .about_section h3 {
        font-size: 16px;
    }
}

.turn_select {
    color: #ccc;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.turn_select label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.setup_footer {
    padding: 16px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    z-index: 2;
}

.setup_primary_btn {
    padding: 12px 48px;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #000;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.setup_primary_btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    transform: scale(1.05);
}

/* 模式选择子弹窗 */
.mode_sub_modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

.mode_sub_container {
    width: 80%;
    text-align: center;
}

.mode_sub_title {
    color: #ffd700;
    font-size: 22px;
    margin-bottom: 30px;
    font-weight: bold;
}

.mode_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.mode_select_btn {
    padding: 15px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid #ffd700;
    color: #ffd700;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.mode_select_btn:hover {
    background: #ffd700;
    color: #000;
}

.mode_cancel_btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .setup_body {
        flex-direction: column;
    }
    .setup_tools {
        width: 100%;
    }
    .piece_bin {
        grid-template-columns: repeat(8, 1fr);
    }
    .mode_grid {
        grid-template-columns: 1fr;
    }
}