/* ============================================================
 * 开局练习页专属样式（2026-10-20 新增）
 *
 * 背景（bug 根因）：
 *   modules/opening_practice.php 2026-10-19 上线时，
 *   内联 <style> 只写了 .op-login-banner / .op-assign-tag 两条。
 *   布局类（.op-mode-bar / .mode-tab / .op-practice-main /
 *   .op-info-panel / .op-progress-* / .op-stat-* / .op-sans-* /
 *   .op-picker-* …）在全站 0 条规则 → 整页裸奔：
 *   模式切换是三段裸文字、按钮是浏览器默认灰按钮、
 *   右侧信息栏是一堆 16px 裸文字、弹窗没有遮罩样式。
 *
 * 本文件补齐练习页布局，视觉语言对齐 modules/opening.php 的打谱页。
 * 公共部分（子标签栏 / 弹窗 / 按钮 / 棋盘外框）在 opening_common.css。
 * ============================================================ */

/* ---------- 模式栏 ---------- */
.op-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.mode-tabs { display: flex; gap: 6px; }
.mode-tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    background: #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
}
.mode-tab:hover { background: #e0e0e0; }
.mode-tab.active {
    background: #667eea;
    color: white;
    font-weight: 600;
}
.op-source-btns {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.op-mode-bar .op-assign-tag { margin-left: 4px; }

/* ---------- 主体：左棋盘 + 右信息栏 ---------- */
.op-practice-main {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    align-items: flex-start;
}

/* ---------- 控制按钮行 ---------- */
.op-practice-controls {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
}

/* ---------- 右侧信息栏 ---------- */
.op-info-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
}
.op-info-panel > * {
    background: white;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

/* 进度 */
.op-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}
.op-progress-row span:last-child { color: #667eea; font-weight: 600; }
.op-progress-bar {
    height: 8px;
    background: #eef0f4;
    border-radius: 4px;
    overflow: hidden;
}
.op-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.3s;
}

/* 正确 / 错误 / 正确率 */
.op-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}
.op-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
    line-height: 1.2;
}
.op-stat-lbl {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

/* 当前期望步 */
.op-current-san {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
    min-height: 26px;
}

/* 走法记录 */
.op-sans-history .op-sans-list { max-height: 220px; }

/* ---------- 选开局弹窗 ---------- */
#pickerPopup .popup-content { width: 420px; }
.op-picker-search { margin-bottom: 10px; }
.op-picker-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}
.op-picker-search input:focus {
    outline: none;
    border-color: #667eea;
}
.op-picker-cat {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.op-cat-btn {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.op-cat-btn:hover { background: #e0e0e0; }
.op-cat-btn.active { background: #667eea; color: white; font-weight: 600; }
.op-picker-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.op-picker-item {
    padding: 7px 10px;
    border-radius: 6px;
    background: #f8f9fb;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    transition: background 0.15s;
}
.op-picker-item:hover { background: #eef1ff; }
.op-picker-item .eco {
    font-weight: 600;
    color: #667eea;
    font-size: 12px;
    min-width: 34px;
    flex-shrink: 0;
}
.op-picker-item .nm {
    flex: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 完成弹窗 ---------- */
.op-done-stats {
    margin: 12px 0 0;
    text-align: left;
    border-top: 1px solid #eee;
    padding-top: 8px;
}
.op-done-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    padding: 4px 0;
}
.op-done-row b { color: #333; }

/* ---------- 2026-10-24 布局改版（仅练习页） ----------
   背景：board-section 被共享规则 flex:0 0 520px / max-width:48% 钉死，
   棋盘 canvas 由 opening-board.js 按 .canvas-wrapper 宽度与卡片内高度预算取小者，
   1440×900 下只有约 444px。改版：桌面端棋盘卡放宽到 760px（配合 JS 侧 maxBoard:640），
   信息栏限宽 360px，主行剩余空间居中吸收；随机/选开局按钮移入卡片头右侧。
   注意：桌面覆盖必须包在 min-width:769px 内——common.css 的移动端规则
   与本规则同特异性，靠源顺序 practice.css 在后本会赢，包媒体查询才不会压掉移动端全宽。 */
.board-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.op-practice-main .board-header { flex-wrap: wrap; row-gap: 6px; }
@media (min-width: 769px) {
    .op-practice-main { justify-content: center; }
    .op-practice-main > .board-section { flex: 0 1 760px; max-width: 760px; }
    .op-practice-main .op-info-panel { flex: 0 1 360px; min-width: 300px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .op-mode-bar { padding: 8px; gap: 8px; }
    .mode-tab { padding: 5px 12px; font-size: 12px; }
    .board-head-right { margin-left: auto; }
    .op-practice-main {
        flex-direction: column;
        max-height: none;
        overflow: visible;
        padding: 8px;
        gap: 8px;
    }
    .op-info-panel {
        height: auto;
        max-height: none;
        overflow: visible;
        width: 100%;
    }
    .op-sans-history .op-sans-list { max-height: 140px; }
    #pickerPopup .popup-content { width: 92vw; }
    .op-picker-list { max-height: 50vh; }
}