/* ============================================================================
 * 象棋学习平台 样式
 * ========================================================================= */
:root{
  --wood:#e0b078; --wood-l:#f0cfa0; --wood-d:#c99a5b;
  --ink:#4a3a2a; --red:#c0392b; --green:#2e7d32;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
  background:linear-gradient(160deg,#f6efe3,#e9dcc3);
  color:#3c3226;min-height:100vh;
}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:12px 16px 60px}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;flex-wrap:wrap;gap:8px}
.brand{font-size:22px;font-weight:800;color:var(--ink)}
.brand b{color:var(--green)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:20px;font-size:14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.nav a.active{background:var(--green);color:#fff}
.userbox{display:flex;align-items:center;gap:8px;font-size:13px;color:#5a4c38}

/* ---------- 主区布局 ---------- */
.layout{display:grid;grid-template-columns:minmax(340px,1fr) 300px;gap:14px;margin-top:8px}
@media(max-width:820px){.layout{grid-template-columns:1fr}}

/* ---------- 棋盘 ---------- */
.board-wrap{background:var(--wood);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:10px;position:relative;user-select:none}
.board{position:relative;width:100%;aspect-ratio:900/1000}
.board svg.board-bg{position:absolute;inset:0;width:100%;height:100%}
.piece{position:absolute;width:9.2%;height:auto;aspect-ratio:1/1;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  border-radius:50%;font-weight:800;z-index:3;
  background:radial-gradient(circle at 35% 30%, #fff, #f4ecd8 60%, #d9c9a5);
  box-shadow:0 2px 3px rgba(0,0,0,.35), inset 0 -2px 4px rgba(0,0,0,.12);
  border:1px solid #8a7655;
  transition:transform .12s, box-shadow .12s;font-size:min(4.2vw,26px)}
.piece.red{color:var(--red)} .piece.black{color:#1c1c1c}
.piece.selected{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 3px #fdd835,0 4px 8px rgba(0,0,0,.3);z-index:5}
.piece.can-capture{outline:3px dashed rgba(255,80,0,.7)}
.piece.ghost{opacity:.5;outline:2px dashed rgba(0,120,255,.8)}
.piece.last-from{box-shadow:inset 0 0 0 3px rgba(255,255,0,.8)}
.piece.last-to{box-shadow:inset 0 0 0 3px rgba(255,160,0,.9)}
.marker{position:absolute;transform:translate(-50%,-50%);width:9%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,215,0,.55);z-index:2;pointer-events:none}
.marker.hint{background:rgba(0,170,255,.45)}
.marker.eval{background:rgba(255,100,0,.5)}

/* ---------- 侧栏面板 ---------- */
.panel{background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.08);padding:14px;margin-bottom:12px}
.panel h3{font-size:15px;margin-bottom:10px;color:var(--ink);border-left:4px solid var(--green);padding-left:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.btn{border:none;border-radius:8px;padding:9px 13px;font-size:13px;cursor:pointer;background:#eef0e6;color:#3c3226;transition:.15s}
.btn:hover{background:#dfe6cf}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:#256a28}
.btn.warn{background:#f3d9c3;color:#8a4a12}
.btn:disabled{opacity:.45;cursor:not-allowed}
select,input[type=text],input[type=password],input[type=number]{padding:8px;border:1px solid #ccc;border-radius:8px;font-size:13px;background:#fbfaf6}
label{font-size:13px;color:#5a4c38}
.mini{font-size:12px;color:#8a7a66}

/* 分析条 */
.evalbar{height:16px;border-radius:8px;overflow:hidden;background:#f5efe3;display:flex;margin:8px 0}
.evalbar .red-side{background:#c0392b;height:100%}
.evalbar .black-side{background:#333;height:100%}
.evalscore{font-size:13px;color:#5a4c38;text-align:center}

/* 棋谱 */
.movelist{max-height:210px;overflow:auto;font-size:13px;line-height:1.7}
.movelist .m{display:inline-block;padding:2px 7px;margin:1px;border-radius:6px;background:#f5efe3}
.movelist .m.active{background:var(--green);color:#fff}

/* 提示/消息 */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:rgba(20,30,20,.9);color:#fff;
  padding:10px 20px;border-radius:24px;font-size:14px;z-index:99;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}

/* ---------- 教程/练习 ---------- */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:10px}
.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 3px 10px rgba(0,0,0,.07)}
.card h4{font-size:15px;margin-bottom:6px}
.card p{font-size:13px;color:#6a5b46;margin-bottom:10px}
.card .tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;margin-right:6px;background:#e8e0cf;color:#7a6a50}
.card .tag.done{background:#cde8cd;color:#2e7d32}
.lesson-body{line-height:1.9;font-size:15px;color:#3c3226}
.lesson-body h2{margin:16px 0 8px;font-size:18px;border-left:4px solid var(--green);padding-left:10px}
.lesson-body ul,.lesson-body ol{margin:6px 0 6px 22px}
.lesson-body table{border-collapse:collapse;margin:10px 0}
.lesson-body td,.lesson-body th{border:1px solid #d8c9a8;padding:6px 10px;font-size:13px}
.lesson-body code{background:#f0ead8;padding:1px 6px;border-radius:4px}

.practice-tip{background:#fff8e6;border:1px solid #eedd9c;border-radius:10px;padding:12px 14px;margin:10px 0;font-size:14px;line-height:1.8}
.steps{margin-top:10px}
.step{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:#f5efe3;margin-bottom:6px;font-size:14px}
.step.active{background:#d9efd9;outline:1px solid #a8d7a8}
.step.done{opacity:.7}
.step .idx{width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.step.done .idx{background:#8fae8f}

.center-note{text-align:center;color:#8a7a66;font-size:13px;margin:14px 0}

/* ---------- 表格/表单 ---------- */
.form-card{max-width:420px;margin:40px auto;background:#fff;border-radius:14px;padding:24px;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.form-card h2{font-size:20px;margin-bottom:16px}
.form-card .fld{margin-bottom:14px}
.form-card label{display:block;margin-bottom:6px}
.form-card input{width:100%}
.hint-txt{font-size:12px;color:#8a7a66;margin-top:4px}