/* 响应式调整 */
@media (min-width: 600px) {
    .app-container {
        /* 移除盒子样式的限制，改为铺满全屏 */
        border: none;
        box-shadow: none;
        margin: 0;
        height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        max-width: none; /* 覆盖 base.css 的限制 */
    }
    
    /* 当屏幕高度不足时，取消 margin，退化为全屏模式 */
    @media (max-height: 700px) {
        .app-container {
            margin: 0;
            border-radius: 0;
            min-height: 100vh;
            border: none;
        }
    }
}

/* 宽屏/桌面端优化 (16:9 等) */
@media (min-width: 1024px) {
    .app-container {
        /* 确保全屏铺满，不留白 */
        max-width: none;
        width: 100%; 
        height: 100vh; /* 强制使用视口高度，覆盖 base.css 的 calc 计算值 */
        max-height: none; 
        min-height: 100vh; 
        aspect-ratio: auto; 
        margin: 0;
        position: relative;
        overflow: hidden; 
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    body {
        height: 100vh;
        width: 100%;
        overflow: hidden;
        /* 移除 Flexbox 居中，让容器自然铺满 */
        display: block;
        margin: 0;
        padding: 0;
    }

    /* 游戏界面布局重构：左侧栏 + 右棋盘 */
    #game-view {
        display: grid;
        grid-template-columns: 320px 1fr; /* 增加左侧栏宽度包含间距 */
        grid-template-rows: auto 1fr;
        grid-template-areas: 
            "header board"
            "footer board";
        padding: 0; /* 移除容器内边距，实现完全铺满 */
        gap: 0; /* 移除 grid gap，改用 margin 控制间距 */
        align-items: start;
        height: 100vh; /* 确保填满容器 */
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* 棋盘区域 */
    .board-container {
        grid-area: board;
        height: 100%;
        width: 100%;
        padding: 20px; /* 给棋盘留一点呼吸空间，但整体区域是铺满的 */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; 
        min-height: 0; 
        min-width: 0;  
    }

    #chessboard {
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
        aspect-ratio: 1/1; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        object-fit: contain; 
    }
    
    /* 针对矮屏幕的特别优化 */
    @media (max-height: 700px) {
        .app-container {
            height: 90vh; /* 留出 5% 上下边距，避免贴底 */
        }
        
        #game-view {
            padding: 20px;
            gap: 0 20px;
        }
        
        .game-header, .game-footer {
            padding: 15px;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        #home-view {
            padding: 0 40px;
        }
        
        #home-view .logo-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
        }
        
        #home-view h1 {
            font-size: 32px;
        }
    }

    /* 顶部栏转为左侧面板的上半部分 */
    .game-header {
        grid-area: header;
        flex-direction: column;
        height: auto;
        margin: 30px 0 0 30px; /* 左上间距 */
        width: 260px; /* 固定宽度，留出右侧空间 */
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        align-items: stretch;
        gap: 20px;
    }

    /* 调整顶部栏内部元素顺序和样式 */
    .game-header .icon-btn {
        width: 100%;
        border-radius: 8px;
        justify-content: center;
        height: 40px;
    }

    /* 返回按钮和重开按钮放两头？或者垂直排列 */
    /* 由于 HTML 结构限制 (Back - Info - Restart)，我们用 Order 调整视觉顺序 */
    #btn-quit-game { order: 1; margin-bottom: 10px; }
    .game-info { 
        order: 2; 
        flex-direction: column; 
        width: 100%;
        margin: 10px 0;
    }
    #btn-restart { 
        order: 3; 
        background-color: #f0f0f0; /* 给重开按钮加个背景显眼点 */
    }

    .turn-badge, .timer-badge {
        width: 100%;
        justify-content: center;
        padding: 10px;
        font-size: 16px;
    }

    /* 底部栏转为左侧面板的下半部分 */
    .game-footer {
        grid-area: footer;
        flex-direction: column;
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        gap: 15px;
        justify-content: flex-start;
        align-self: stretch; 
        margin: 20px 0 30px 30px; /* 左下间距 */
        width: 260px;
    }

    .duration-badge {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    #btn-undo {
        width: 100%;
        justify-content: center;
        height: 44px;
    }

    /* 首页优化：更紧凑的布局 */
    #home-view {
        display: flex; /* 改用 Flexbox 替代 Grid */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 40px;
        text-align: left;
        gap: 60px; /* 左右间距 */
        overflow-y: auto;
    }

    /* 针对矮屏幕（如笔记本）的布局调整 */
    @media (max-height: 700px) {
        #home-view {
            gap: 30px;
        }
    }

    #home-view .logo-area {
        flex: 0 0 auto; /* 不缩放 */
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    #home-view .logo-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
    }

    #home-view .logo-icon::after {
        width: 50px;
        height: 50px;
    }

    #home-view h1 {
        font-size: 40px;
        margin-bottom: 10px;
    }
    
    #home-view .subtitle {
        font-size: 16px;
    }

    #home-view .action-area {
        width: 100%;
        max-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* 首页右侧设置面板样式微调 */
    #home-view .menu-buttons {
        flex: 0 0 auto; /* 不缩放 */
        width: 320px;
        max-width: 320px;
        background: white;
        padding: 25px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        margin-bottom: 0; /* 移除底部间距 */
    }

    :root.theme-dark #home-view .menu-buttons {
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 10px 30px rgba(0,0,0,0.45);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    #home-view .footer {
        position: fixed; /* 改为 fixed 确保始终在最底部，不随内容位置变化 */
        bottom: 20px;
        width: 100%;
        text-align: center;
        left: 0;
        pointer-events: none; /* 防止遮挡点击 */
    }

    /* 设置页和准备页优化：两列布局 */
    #settings-view .settings-card,
    #setup-view .settings-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    #settings-view .setting-item,
    #setup-view .setting-item {
        margin-bottom: 0; /* Grid gap handles spacing */
    }
    
    #settings-view .settings-section-title,
    #setup-view .settings-section-title {
        grid-column: 1 / -1;
    }

    /* 准备页底部按钮优化 */
    #setup-view .action-area {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    #setup-view .action-area .menu-btn {
        width: 50%;
        margin-bottom: 0;
    }
}