/* ===== MCST 图解 · 井字棋互动课 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f7f5f0; color: #2d2d2d; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.mhome { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }

/* ---------- 顶部横幅 ---------- */
.hero {
    position: relative; border-radius: 24px; color: #fff; text-align: center;
    padding: 34px 24px; margin-bottom: 20px;
    background: linear-gradient(135deg, #1e2440, #3b4270 55%, #5b6ee8);
    box-shadow: 0 16px 44px -16px #2b3157;
}
.hero .ic { font-size: 54px; display: block; margin-bottom: 6px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); }
.hero h1 { font-family: 'Noto Serif SC', serif; font-size: 34px; font-weight: 900; letter-spacing: 1px; }
.hero p { font-size: 15px; opacity: .95; line-height: 1.85; margin: 8px auto 0; max-width: 800px; }
.hero p b { color: #ffe08a; }
.hero .meta { margin-top: 10px; font-size: 13px; opacity: .88; }
.home-chip {
    position: absolute; top: 12px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 40px; background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 13px; font-weight: 800;
    text-decoration: none; transition: background .15s, transform .15s;
}
.home-chip:hover { background: rgba(255, 255, 255, .3); transform: translateY(-1px); }

/* ---------- 主体两栏 ---------- */
.stage { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 20px; align-items: start; }
.stage > .card { min-width: 0; }

.card {
    background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 22px; padding: 20px;
    box-shadow: 0 10px 30px -20px rgba(47, 107, 255, .55);
}
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.side-head h2 { font-family: 'Noto Serif SC', serif; font-size: 19px; font-weight: 900; color: #0d2259; }
.side-head .who { font-size: 12px; color: #7a7f9e; font-weight: 700; }

/* ---------- 棋盘 ---------- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cell {
    aspect-ratio: 1 / 1; border: 1px solid #dfe6ff; border-radius: 16px; background: #eef2ff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent;
}
.cell:hover:not(.taken):not(.disabled) { background: #e2e9ff; transform: translateY(-2px); box-shadow: 0 10px 20px -16px #2f6bff; }
.cell.taken, .cell.disabled { cursor: default; }
.cell.win { background: #fff4cc; border-color: #f0d479; animation: winPulse .6s ease; }
@keyframes winPulse { from { transform: scale(.94); } to { transform: scale(1); } }

.mark { display: block; width: 56%; height: 56%; border-radius: 50%; }
.mark.black {
    background: radial-gradient(circle at 32% 26%, #3a4160, #10142a 68%);
    box-shadow: 0 6px 14px rgba(16, 20, 42, .35), inset 0 -4px 10px rgba(0, 0, 0, .4);
}
.mark.white {
    background: #fff;
    border: 5px solid #b9c4e6;
    box-shadow: 0 4px 12px rgba(20, 30, 60, .18), inset 0 -3px 8px rgba(20, 30, 60, .08);
}

/* ---------- 状态条 ---------- */
.status {
    display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 10px 14px;
    border-radius: 14px; background: #f5f7ff; border: 1px solid #e7ecff;
    font-size: 13.5px; font-weight: 700; color: #3a4270; line-height: 1.5;
}
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: #5b6ee8; flex: 0 0 auto; }
.status.thinking { background: #fff8e8; border-color: #f4e3b8; color: #8a6a1f; }
.status.thinking .dot { background: #e8a33d; animation: blink 1s infinite; }
.status.you { background: #eef7ff; border-color: #d7e8ff; color: #24527d; }
.status.you .dot { background: #2f80ed; }
.status.win { background: #eefaf1; border-color: #cdeed8; color: #1f7a45; }
.status.win .dot { background: #27ae60; }
.status.lose { background: #fdf0f0; border-color: #f6d7d7; color: #9c3030; }
.status.lose .dot { background: #d64545; }
.status.draw { background: #f4f4f6; border-color: #e4e4ea; color: #555; }
.status.draw .dot { background: #999; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- 控件 ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.btn {
    border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800;
    padding: 9px 18px; border-radius: 30px; background: #eef2ff; color: #4254b8;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: #e2e9ff; transform: translateY(-1px); }
.btn.primary {
    background: linear-gradient(135deg, #1e2440, #5b6ee8); color: #fff;
    box-shadow: 0 10px 22px -14px #2b3157;
}
.btn.primary:hover { box-shadow: 0 14px 26px -14px #2b3157; }
.ctl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #6a7196; }
.ctl select {
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: #3a4270;
    padding: 7px 10px; border-radius: 10px; border: 1px solid #dfe4f5; background: #fff; cursor: pointer;
}
.ctl.switch input { width: 15px; height: 15px; accent-color: #5b6ee8; cursor: pointer; }
.hint { margin-top: 12px; font-size: 12px; line-height: 1.8; color: #8b90ad; }

/* ---------- UCB 公式 ---------- */
.ucb { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 12px; border-radius: 14px;
       background: #f7f9ff; border: 1px solid #e7ecff; margin-bottom: 12px; }
.ucb-tag { font-size: 10.5px; font-weight: 900; letter-spacing: .6px; color: #fff; background: #5b6ee8;
           border-radius: 20px; padding: 3px 9px; }
.formula { display: flex; align-items: center; gap: 5px; font-family: 'Times New Roman', Georgia, serif;
           font-size: 15px; color: #1e2440; line-height: 1.2; }
.frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.frac i { font-style: italic; padding: 0 5px; }
.frac b { font-weight: 400; border-top: 1px solid #1e2440; padding: 0 5px; }
.frac.small { font-size: 12px; }
.op { font-style: italic; }
.sqrt { display: inline-flex; align-items: flex-start; }
.sqrt .radical { font-size: 21px; line-height: 1; margin-top: -2px; }
.sqrt .rad { border-top: 1px solid #1e2440; margin-top: 3px; padding: 0 4px 0 2px; }
.ucb-note { font-size: 10.5px; color: #8b90ad; line-height: 1.6; margin-left: auto; }
.ucb-note b { color: #5b6ee8; }
.ucb-hint { margin-top: 7px; font-size: 10.5px; color: #6a7196; line-height: 1.75;
            background: #fbfcff; border: 1px dashed #e3e9f9; border-radius: 10px; padding: 6px 10px; }
.ucb-hint b { color: #2f3f8f; }

/* ---------- 搜索过程（每次一行小棋盘） ---------- */
.iters { border-top: 1px dashed #e6eaf6; padding-top: 12px; }
.iters-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.iters-head.sub { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e6eaf6; }
.tree-wrap { margin-top: 10px; background: #fcfdff; border: 1px solid #eef2fc; border-radius: 14px; padding: 4px; overflow-x: auto; }
.tree-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tree-bar.is-hidden { display: none; }
.tbtn {
    font-family: inherit; font-size: 11px; font-weight: 800; color: #4254b8; background: #eef2ff;
    border: 1px solid #dde5ff; border-radius: 20px; padding: 5px 11px; cursor: pointer;
    transition: background .15s, transform .15s;
}
.tbtn:hover:not(:disabled) { background: #e2e9ff; transform: translateY(-1px); }
.tbtn:disabled { opacity: .45; cursor: default; }
.tbtn.accent { background: linear-gradient(135deg, #1e2440, #5b6ee8); color: #fff; border-color: transparent; }
.tree-step { font-size: 11px; color: #8b90ad; font-weight: 700; margin-left: auto; }
.tree { display: block; width: 100%; min-width: 540px; height: auto; }
.tree-phase { margin-top: 8px; font-size: 11.5px; font-weight: 800; color: #2f3f8f; line-height: 1.7;
              background: #f4f7ff; border: 1px solid #e3eaff; border-radius: 10px; padding: 7px 11px; }
.tree-phase.is-hidden { display: none; }
.tree-phase .pn { color: #5b6ee8; }
.tree-legend { font-size: 10.5px; color: #8b90ad; line-height: 1.75; margin-top: 7px; }
.tree-legend b { color: #5b6ee8; }
.tree-legend .lg-path { color: #5b6ee8; font-weight: 800; }
.tree-legend .lg-new { color: #c08a2a; font-weight: 800; }
.iters-head h3 { font-size: 13.5px; font-weight: 900; color: #0d2259; }
.iters-head span { font-size: 11px; color: #a3a8c2; }
.iters-body { margin-top: 9px; max-height: 430px; overflow-y: auto; display: flex; flex-direction: column;
              gap: 8px; padding-right: 3px; scrollbar-width: thin; }
.iters-body::-webkit-scrollbar { width: 6px; }
.iters-body::-webkit-scrollbar-thumb { background: #dfe4f5; border-radius: 6px; }
.iters-empty { font-size: 12px; color: #a3a8c2; line-height: 1.8; }
.iters-wait { background: #f7f9ff; border: 1px dashed #dbe3fb; border-radius: 12px; padding: 10px 12px; }
.iters-wait.is-hidden { display: none; }
.iters-stat { margin-top: 8px; font-size: 11px; color: #6a7196; line-height: 1.75;
              background: #f7f9ff; border: 1px solid #e6ebf9; border-radius: 11px; padding: 7px 11px; }
.iters-stat:empty { display: none; }
.iters-stat b { color: #2f3f8f; }
.iters-note { font-size: 10.5px; color: #8a6a1f; background: #fffaf0; border: 1px solid #f4e3b8;
              border-radius: 10px; padding: 6px 9px; line-height: 1.7; }
.iters-foot { font-size: 10.5px; color: #a3a8c2; line-height: 1.7; margin-top: 8px; }
.iter { border: 1px solid #eef2fc; background: #fcfdff; border-radius: 12px; padding: 7px 9px 8px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.iter:hover { border-color: #cfd9ff; }
.iter.is-current { border-color: #8fa8ff; background: #f7f9ff; box-shadow: 0 8px 20px -18px #5b6ee8; }
.iter.is-hidden { display: none; }
.iter-head { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #8b90ad; font-weight: 700; margin-bottom: 5px; }
.iter-head b { color: #4254b8; font-size: 10.5px; }
.iter-line { display: flex; align-items: flex-start; gap: 5px; flex-wrap: wrap; }
.ptag { flex: 0 0 auto; align-self: center; margin-top: 8px; font-size: 9.5px; font-weight: 900; color: #4254b8;
        background: #eef2ff; border-radius: 20px; padding: 2px 7px; white-space: nowrap; }
.mnode { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mcap { font-size: 8.5px; color: #8b90ad; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; width: 34px; height: 34px; padding: 2.5px;
        border-radius: 6px; background: #eef2ff; border: 1px solid #dfe6ff; }
.mini.new { border-style: dashed; border-color: #e8a33d; background: #fffaf0; }
.mc { border-radius: 50%; background: #e6ebfa; }
.mc.b { background: radial-gradient(circle at 32% 26%, #3a4160, #10142a 68%); }
.mc.w { background: #fff; border: 1px solid #b9c4e6; }
.marr { flex: 0 0 auto; align-self: center; margin-top: 8px; color: #c3cae0; font-weight: 900; font-size: 10px; }
.mbadge { flex: 0 0 auto; align-self: center; margin-top: 15px; font-size: 9px; font-weight: 800; border-radius: 20px;
          padding: 2px 7px; background: #f1f1f6; color: #555b78; white-space: nowrap; }
.mbadge.black { background: #eef2ff; color: #2f3f8f; }
.mbadge.white { background: #eef7ff; color: #24527d; }
.mbadge.draw { background: #f4f4f6; color: #666; }

/* ---------- 候选落点 ---------- */
.decision { margin-top: 18px; border-top: 1px dashed #e6eaf6; padding-top: 14px; }
.decision h3 { font-size: 13.5px; font-weight: 900; color: #0d2259; }
.decision .muted { font-size: 12px; color: #a3a8c2; line-height: 1.8; margin-top: 6px; }
.cands { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.cand {
    display: grid; grid-template-columns: 30px 62px 1fr 104px; gap: 9px; align-items: center;
    font-size: 11.5px; color: #6a7196; font-weight: 700;
}
.cand .mini { width: 28px; height: 28px; padding: 2px; border-radius: 5px; }
.cand .cand-name { color: #3a4270; }
.cand.best .cand-name { color: #1e2440; font-weight: 900; }
.cand .bar { height: 8px; border-radius: 6px; background: #eef2ff; overflow: hidden; }
.cand .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8fa8ff, #5b6ee8); }
.cand.best .bar i { background: linear-gradient(90deg, #5b6ee8, #1e2440); }
.cand .cand-num { text-align: right; color: #7a7f9e; font-variant-numeric: tabular-nums; }
.cand.best .cand-num { color: #1e2440; font-weight: 900; }
.cands-note { font-size: 11px; color: #a3a8c2; line-height: 1.8; margin-top: 4px; }

/* ---------- 四步讲解 ---------- */
.explain { margin-top: 26px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.sec-head h2 { font-family: 'Noto Serif SC', serif; font-size: 22px; font-weight: 900; color: #0d2259; }
.sec-head span { font-size: 13px; color: #7a7f9e; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sx {
    background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 20px; padding: 16px;
    box-shadow: 0 10px 28px -22px rgba(47, 107, 255, .6);
}
.sx .ico { font-size: 24px; line-height: 1; }
.sx svg { display: block; width: 100%; height: 68px; margin: 8px 0 6px; }
.sx h3 { font-size: 14.5px; font-weight: 900; color: #0d2259; }
.sx .en { display: block; font-size: 10.5px; font-weight: 700; color: #a3a8c2; letter-spacing: .4px; margin-top: 2px; }
.sx p { font-size: 12.5px; line-height: 1.85; color: #3a3f55; margin-top: 8px; }
.sx p b { color: #2f6bff; }

.home-note { text-align: center; color: #6a7196; font-size: 13.5px; line-height: 1.9; margin-top: 24px; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .stage { grid-template-columns: minmax(0, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mhome { padding: 14px 12px 44px; }
    .hero { padding: 30px 18px 26px; }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 13.5px; }
    .card { padding: 16px; border-radius: 18px; }
    .board { gap: 8px; }
    .cell { border-radius: 13px; }
    .steps-grid { grid-template-columns: 1fr; }
    .cand { grid-template-columns: 26px 56px 1fr 92px; }
    .marr { margin-top: 6px; }
    .mbadge { margin-top: 12px; }
}