/* ------------------------------------------------------------------
 * 弈 · 五子连珠 —— 宋式文人棋室美学
 * 宣纸为底，墨色为骨，朱砂为睛。
 * ------------------------------------------------------------------ */

:root {
  /* 宣纸与墨 */
  --paper: #e8e0cd;
  --paper-deep: #ddd2b8;
  --ink: #2b2620;
  --ink-soft: #4a4237;
  --ink-faint: #84786a;
  /* 朱砂 */
  --cinnabar: #b23a25;
  --cinnabar-deep: #8f2c1a;
  /* 榧木棋枰 */
  --wood: #d9b57c;
  --wood-hi: #e5c691;
  --wood-lo: #c09a5f;
  --wood-line: #6b4e2a;
  /* 棋石 */
  --stone-b-hi: #55504a;
  --stone-b: #211d19;
  --stone-w-hi: #ffffff;
  --stone-w: #d9d4c8;

  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --brush: "Ma Shan Zheng", "KaiTi", "STKaiti", var(--serif);
  --shadow-soft: 0 2px 14px rgba(43, 38, 32, .18);
  --shadow-stone: 0 2px 5px rgba(30, 20, 5, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 属性优先级兜底：防止 display 类覆盖隐藏语义 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 82% -12%, rgba(255, 250, 236, .85), transparent 55%),
    radial-gradient(90% 70% at -8% 108%, rgba(178, 58, 37, .07), transparent 50%),
    radial-gradient(140% 120% at 50% 50%, var(--paper) 38%, var(--paper-deep) 100%);
  overflow-x: hidden;
}

/* 导航/顶栏固定高度；舞台与其余视图弹性填充剩余视口 */
.topbar { flex: none; }
.stage, .teach-stage { flex: 1; }

/* ---------------- 顶栏：弈印 + 模式导航 + 上下文操作区 ---------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 32px);
  padding: 10px clamp(16px, 3vw, 40px) 8px;
  border-bottom: 1px solid rgba(43, 38, 32, .12);
  background: linear-gradient(180deg, rgba(255, 252, 242, .55), rgba(255, 252, 242, 0));
}

.topbar-brand { display: flex; align-items: center; gap: 10px; flex: none; }

.topbar-seal {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: #f6ead9;
  font-family: var(--brush);
  font-size: 19px;
  border-radius: 4px;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 1.5px rgba(255, 240, 220, .35), 0 2px 6px rgba(120, 40, 20, .3);
}

.topbar-name {
  font-family: var(--brush);
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--ink);
  white-space: nowrap;
}

.modes { display: flex; gap: 6px; margin-left: clamp(4px, 2vw, 24px); }

.mode-tab {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  position: relative;
  transition: color .15s, background .15s;
  white-space: nowrap;   /* 模式名不折行 */
}

.mode-tab:hover { color: var(--ink); background: rgba(43, 38, 32, .05); }

.mode-tab.is-on {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 252, 242, .9), rgba(255, 248, 232, .6));
  border-color: rgba(43, 38, 32, .2);
  font-weight: 600;
}

.mode-tab.is-on::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -2px;
  height: 3px;
  background: var(--cinnabar);
  border-radius: 2px;
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; }

.ctx-group { display: flex; align-items: center; gap: 8px; }
.ctx-group[hidden] { display: none; }

.topbar .btn-sm { padding: 6px 13px; font-size: 12.5px; }
.topbar .btn-icon.btn-sm { width: 34px; padding: 6px 0; }

/* ---------------- 共享左右布局：棋盘恒左 · 内容居右 ---------------- */

.split-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(340px, 620px) minmax(320px, 1fr);
  justify-content: center;
  align-items: start;
  gap: clamp(20px, 3.5vw, 48px);
  padding: clamp(12px, 2.5vw, 32px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 40px);
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---------------- 舞台 ---------------- */

/* 宣纸颗粒 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 幅面大字水印 */
body::before {
  content: "弈";
  position: fixed;
  right: -4vw;
  bottom: -10vh;
  z-index: 0;
  font-family: var(--brush);
  font-size: 46vmin;
  line-height: 1;
  color: rgba(43, 38, 32, .045);
  pointer-events: none;
  user-select: none;
}

/* ---------------- 舞台（实战对弈，复用 split 左右布局） ---------------- */

.stage { align-items: start; }
.stage .panel { max-width: 400px; }

/* ---------------- 棋枰 ---------------- */

.board-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
  animation: rise .7s cubic-bezier(.2, .8, .25, 1) both;
}

.board-frame {
  position: relative;
  width: min(100%, min(88vw, 78vh));
  aspect-ratio: 1;
  padding: 4.2%;
  border-radius: 6px;
  background:
    linear-gradient(155deg, var(--wood-hi) 0%, var(--wood) 42%, var(--wood-lo) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 220, .5),
    inset 0 0 26px rgba(120, 80, 30, .28),
    0 18px 40px -14px rgba(58, 40, 16, .55),
    0 4px 12px rgba(58, 40, 16, .25);
  animation: boardIn .8s cubic-bezier(.2, .8, .25, 1) .1s both;
}

/* 枰上经纬：每 1/15 一线，落于格心 */
.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  border-radius: 2px;
  --line: 1px;
  background-image:
    linear-gradient(to right, var(--wood-line) var(--line), transparent var(--line)),
    linear-gradient(to bottom, var(--wood-line) var(--line), transparent var(--line));
  background-size: calc(100% / 15) calc(100% / 15);
  /* 百分比定位语义：偏移 = p%·(容器−单格)，故首线落在第 0 格中心需 p = 0.5/14 */
  background-position: calc(100% / 28) calc(100% / 28);
}

/* 星位：与格心线对齐（0.5/14 同理推得 3/14、7/14、11/14） */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 2.5px at 50% 50%, var(--wood-line) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 50%, var(--wood-line) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 50%, var(--wood-line) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 50%, var(--wood-line) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 50%, var(--wood-line) 98%, transparent 100%);
  background-size: calc(100% / 15) calc(100% / 15);
  background-repeat: no-repeat;
  /* 五星：四隅 3-3 与天元 7-7（格心 0.5/14 步进） */
  background-position:
    calc(100% * 3 / 14)  calc(100% * 3 / 14),
    calc(100% * 11 / 14) calc(100% * 3 / 14),
    calc(100% * 3 / 14)  calc(100% * 11 / 14),
    calc(100% * 11 / 14) calc(100% * 11 / 14),
    calc(100% * 7 / 14)  calc(100% * 7 / 14);
}

.cell {
  position: relative;
  z-index: 2;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.board.playable .cell:not(.occupied) { cursor: pointer; }

/* 落子预览 */
.board.playable .cell:not(.occupied):hover::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 14%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--stone-b-hi), var(--stone-b) 70%);
  opacity: .38;
  animation: ghost .18s ease-out both;
}

.board.playable.as-white .cell:not(.occupied):hover::after {
  background: radial-gradient(circle at 34% 30%, #fff, var(--stone-w) 75%);
}

/* 棋石 */
.stone {
  position: absolute;
  left: 7%;
  top: 7%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 3;
  animation: drop .22s cubic-bezier(.2, 1.4, .4, 1) both;
}

.stone.black {
  background:
    radial-gradient(circle at 33% 28%, var(--stone-b-hi) 0%, var(--stone-b) 62%);
  box-shadow: var(--shadow-stone), inset 0 -2px 4px rgba(0, 0, 0, .6);
}

.stone.white {
  background:
    radial-gradient(circle at 33% 28%, #fff 0%, var(--stone-w) 72%);
  box-shadow: var(--shadow-stone), inset 0 -2px 4px rgba(120, 110, 90, .35);
}

/* 最新一手 · 朱环 */
.stone.last::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 30%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--cinnabar);
  animation: mark .3s ease-out .1s both;
}

/* 胜利连线 · 朱砂加身 */
.cell.win .stone { z-index: 4; }
.cell.win .stone::before {
  content: "";
  position: absolute;
  left: -4%;
  top: -4%;
  width: 108%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid var(--cinnabar);
  box-shadow: 0 0 0 4px rgba(178, 58, 37, .25), 0 0 18px rgba(178, 58, 37, .45);
  animation: mark .4s ease-out both;
}

/* 终局墨幕 */
.board-wash {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 6px;
  pointer-events: none;
  background: rgba(43, 38, 32, 0);
  transition: background .8s ease;
}

.board-frame.ended .board { filter: saturate(.82); }
.board-frame.ended .board-wash { background: rgba(43, 38, 32, .14); }

/* 坐标 */
.coords {
  position: absolute;
  display: grid;
  font-size: clamp(8px, 1.5vw, 11px);
  color: rgba(70, 48, 20, .75);
  letter-spacing: .5px;
  user-select: none;
}
.coords-top { top: 1.1%; left: 4.5%; right: 4.5%; grid-template-columns: repeat(15, 1fr); text-align: center; }
.coords-left { left: 1.2%; top: 4.5%; bottom: 4.5%; grid-template-rows: repeat(15, 1fr); align-items: center; }

.board-caption {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: .35em;
  text-indent: .35em;
}

/* ---------------- 侧栏 ---------------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: rise .7s cubic-bezier(.2, .8, .25, 1) .18s both;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(43, 38, 32, .16);
  position: relative;
}

.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background: var(--cinnabar);
}

.seal {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--brush);
  font-size: 34px;
  color: #f6ead9;
  background: linear-gradient(150deg, var(--cinnabar) 20%, var(--cinnabar-deep));
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 240, 220, .35), var(--shadow-soft);
  transform: rotate(-3deg);
}

.title {
  font-family: var(--brush);
  font-size: clamp(34px, 4.6vw, 44px);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.05;
  white-space: nowrap;   /* 五子连珠始终保持一行 */
}

.subtitle {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: .28em;
}

/* 状态牌 */
.status-card {
  padding: 20px 22px 16px;
  border-radius: 8px;
  background: linear-gradient(165deg, rgba(255, 252, 242, .72), rgba(255, 248, 230, .4));
  border: 1px solid rgba(43, 38, 32, .14);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.status-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cinnabar), transparent 70%);
  opacity: .8;
}

.status-main {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .06em;
  min-height: 1.4em;
}

.status-card.victory .status-main { color: var(--cinnabar-deep); }
.status-card.defeat  .status-main { color: var(--ink); }
.status-card.draw    .status-main { color: var(--ink-soft); }

.status-sub {
  margin-top: 7px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .04em;
  min-height: 1.5em;
}

/* 思考中的呼吸墨点 */
.status-card.thinking .status-main::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  vertical-align: .1em;
  animation: breathe 1.1s ease-in-out infinite;
}

.tally {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .08em;
}
.tally b { font-size: 16px; color: var(--ink); font-weight: 900; padding: 0 2px; }
.tally-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(43, 38, 32, .28); }

/* 控制区 */
.controls { display: flex; flex-direction: column; gap: 14px; }

.control-group { display: flex; align-items: center; gap: 12px; }

.control-label {
  flex: none;
  width: 3em;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-faint);
}

.seg {
  flex: 1;
  display: flex;
  border: 1px solid rgba(43, 38, 32, .22);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 252, 242, .5);
}

.seg-btn {
  flex: 1;
  padding: 9px 4px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .18s, color .18s;
}

.seg-btn + .seg-btn { border-left: 1px solid rgba(43, 38, 32, .12); }

.seg-btn:hover { background: rgba(43, 38, 32, .05); }

.seg-btn.is-on {
  background: var(--ink);
  color: var(--paper);
}

.seg-btn.is-on:hover { background: var(--ink); }

.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(43, 38, 32, .4); }
.dot-b { background: var(--stone-b); }
.dot-w { background: var(--stone-w); }
.seg-btn.is-on .dot-b { background: #6d675f; border-color: #6d675f; }
.seg-btn.is-on .dot-w { background: #f3efe4; border-color: #f3efe4; }

.control-row { display: flex; gap: 10px; }

.btn {
  padding: 11px 18px;
  font-family: var(--serif);
  font-size: 14.5px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--ink);
  background: rgba(255, 252, 242, .6);
  border: 1px solid rgba(43, 38, 32, .3);
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.btn:hover { background: #fffdf5; box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }

.btn-primary {
  background: linear-gradient(150deg, var(--cinnabar), var(--cinnabar-deep));
  border-color: var(--cinnabar-deep);
  color: #f8ecda;
}
.btn-primary:hover { background: linear-gradient(150deg, #c24330, #9a3020); }

.btn-icon {
  flex: none;
  width: 46px;
  padding: 11px 0;
  letter-spacing: 0;
  text-indent: 0;
}
.btn-icon.muted { color: var(--ink-faint); text-decoration: line-through; }

/* 棋谱 */
.moves {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  max-height: 34vh;
  border: 1px solid rgba(43, 38, 32, .16);
  border-radius: 8px;
  background: rgba(255, 252, 242, .42);
  overflow: hidden;
}

.moves-title {
  padding: 12px 16px;
  font-size: 14px;
  letter-spacing: .24em;
  border-bottom: 1px solid rgba(43, 38, 32, .12);
  background: rgba(43, 38, 32, .045);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.moves-count { font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); }

.move-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 38, 32, .3) transparent;
}

.move-empty {
  padding: 18px 12px;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: .06em;
  text-align: center;
}

.move-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 4px;
  animation: fade .3s ease-out both;
}
.move-item:nth-child(odd) { background: rgba(43, 38, 32, .035); }

.move-no { color: var(--ink-faint); font-size: 12px; min-width: 2.4em; text-align: right; }
.move-pos { font-weight: 600; min-width: 2.6em; }
.move-item.p-black .move-pos::before,
.move-item.p-white .move-pos::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid rgba(43, 38, 32, .35);
}
.move-item.p-black .move-pos::before { background: var(--stone-b); }
.move-item.p-white .move-pos::before { background: #f2eee2; }

.move-note {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--cinnabar-deep);
  letter-spacing: .05em;
  border: 1px solid rgba(178, 58, 37, .35);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}

.colophon {
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: .18em;
  text-align: center;
}

/* ---------------- 动效 ---------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes boardIn {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

@keyframes drop {
  from { transform: scale(1.5); opacity: .25; }
  55%  { transform: scale(.92); opacity: 1; }
  to   { transform: scale(1); }
}

@keyframes ghost {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: .38; }
}

@keyframes mark {
  from { transform: scale(1.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes breathe {
  0%, 100% { transform: scale(.75); opacity: .35; }
  50%      { transform: scale(1); opacity: .9; }
}

@keyframes fade {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- 响应式 ----------------
 * ≤900px 进入单列堆叠（手机/窄窗口形态）：
 * 高度充裕时保持无滚动的一屏体验由下方矮窗规则兜底，
 * 此分支只管排布顺序与宽度。 */

@media (max-width: 900px) {
  .stage {
    grid-template-columns: minmax(300px, min(92vw, 640px));
    justify-items: center;
    padding: 18px 14px 32px;
  }
  .board-side { order: 1; width: 100%; }
  .panel { order: 2; width: min(100%, 520px); }
  .board-frame { width: min(100%, 86vw); }
  .moves { max-height: 240px; }
}

@media (max-width: 900px) and (max-height: 820px) {
  .stage { padding: 10px 12px 14px; gap: 14px; }
  .board-frame { width: min(100%, min(86vw, calc(100vh - 160px))); }
  .moves { min-height: 110px; max-height: 22vh; }
}

@media (max-width: 420px) {
  .control-label { width: 2.6em; }
  .coords { font-size: 8px; }
}

/* ---------------- 矮窗口适配（置于末尾，覆盖上方基础规则） ----------------
 * 视口高度不足以容纳完整侧栏（≤780px）时收拢留白、缩小棋枰，
 * 使窗口铺满时不出现右侧滚动条。 */

@media (max-height: 820px) {
  .stage { padding: 4px 16px 12px; gap: 14px; }
  .panel { gap: 12px; }
  .masthead { padding-bottom: 10px; }
  .seal { width: 44px; height: 44px; font-size: 26px; }
  .title { font-size: clamp(26px, 3.2vw, 32px); }
  .subtitle { margin-top: 3px; font-size: 11px; }
  .status-card { padding: 12px 16px 10px; }
  .status-main { font-size: 17px; }
  .moves { min-height: 90px; max-height: 22vh; }
  .board-frame { width: min(100%, min(70vh, calc(100vh - 230px))); }
  .coach-box { padding: 8px 14px 9px; margin-top: 8px; }
  .coach-text { font-size: 13px; }
}

/* 窄且矮（侧栏式窄窗）：棋枰随高度收缩，留出棋谱空间 */
@media (max-width: 900px) and (max-height: 820px) {
  .board-frame { width: min(100%, min(86vw, calc(100vh - 240px))); }
}

/* ================================================================
 * 教学模块：教练朱批 / 棋经 / 阵法 / 复盘
 * （模式导航与顶栏样式见文件前部 .topbar 段）
 * ================================================================ */

/* ---------------- 教练朱批 ---------------- */

.coach-box {
  width: min(100%, 620px);
  margin-top: 12px;
  padding: 10px 16px 12px;
  border-left: 3px solid var(--cinnabar);
  border-radius: 4px;
  background: linear-gradient(170deg, rgba(255, 252, 242, .92), rgba(255, 246, 228, .8));
  box-shadow: 0 2px 10px rgba(60, 45, 20, .12);
  text-align: left;
}

.coach-box.is-urgent { border-left-color: var(--cinnabar-deep); background: linear-gradient(170deg, rgba(255, 240, 232, .95), rgba(255, 232, 214, .85)); }
.coach-box.is-bad { border-left-style: dashed; }

.coach-head {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.coach-seal {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--cinnabar);
  color: #f6ead9;
  font-family: var(--brush);
  font-size: 13px;
  border-radius: 3px;
  transform: rotate(-4deg);
}

.coach-hint { margin-left: auto; color: var(--ink-soft); letter-spacing: .04em; }

.coach-text { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink); }

/* 威胁高亮：连子描边 + 成五点脉冲 */
.board.show-threat .cell.threat .stone {
  box-shadow: var(--shadow-stone), 0 0 0 3px rgba(178, 58, 37, .55);
}

.cell.threat-key { position: relative; }

.board.playable .cell.threat-key::before {
  content: "!";
  position: absolute;
  left: 22%;
  top: 22%;
  width: 56%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px dashed var(--cinnabar);
  border-radius: 50%;
  color: var(--cinnabar);
  font-weight: 900;
  animation: pulse 1.2s ease-in-out infinite;
  z-index: 4;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* btnCoach 开关态 */
.btn-icon.is-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------------- 教学舞台通用 ---------------- */

.teach-stage {
  min-height: 60vh;
  padding: 8px 20px 60px;
}

/* 列表态（图鉴/闯关列表/复盘列表）：单列窄栏居中 */
.teach-body { max-width: 1100px; margin: 0 auto; }

/* 分栏态（图鉴/闯关进行/复盘进行）：左盘右内容，随 split-stage 分列 */
.teach-left { display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 16px; }

.teach-head { margin: 18px 0 26px; }

.teach-head h2 {
  font-family: var(--brush);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: .1em;
}

.teach-head p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14.5px;
  letter-spacing: .04em;
  max-width: 46em;
}

/* ---------------- 棋经图鉴 ---------------- */

/* 左：常驻演示大棋盘（与实战对弈同款榧木框） */
.learn-board-wrap { display: flex; justify-content: center; width: 100%; }

.learn-board-wrap .board-frame {
  width: min(100%, min(80vw, calc(100vh - 260px)));
}

.learn-demo-tag {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(170deg, rgba(255, 252, 242, .9), rgba(255, 246, 228, .75));
  border-left: 3px solid var(--cinnabar);
  border-radius: 4px;
  text-align: left;
}

.learn-demo-tag h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.learn-demo-tag p { margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }

/* 右：棋型行列表（点击切换左盘演示） */
.shape-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }

.shape-row {
  font-family: var(--serif);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: rgba(255, 252, 242, .55);
  border: 1px solid rgba(43, 38, 32, .12);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}

.shape-row:hover { background: rgba(255, 252, 242, .95); }

.shape-row.is-on { border-color: var(--cinnabar); background: #fffdf5; }

.shape-row .mini-board { width: 132px; }

.shape-row-name { font-size: 15px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.shape-row-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; flex: 1; }

.shape-rows-title {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin: 4px 0 10px;
}

/* 兼容：卡片栅格保留给测验之外的备用场景（当前图鉴已改行列表） */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.shape-card {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(165deg, rgba(255, 252, 242, .8), rgba(255, 248, 232, .55));
  border: 1px solid rgba(43, 38, 32, .14);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(60, 45, 20, .1);
}

.mini-board {
  flex: none;
  width: 198px;
  aspect-ratio: 9 / 3;
  display: grid;
  background-color: var(--wood);
  background-image:
    linear-gradient(to right, var(--wood-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wood-line) 1px, transparent 1px);
  background-size: calc(100% / 9) calc(100% / 3);
  background-position: calc(100% / 16) calc(100% / 4);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--wood-line), 0 3px 8px rgba(58, 40, 16, .3);
  overflow: hidden;
}

.mini-cell { position: relative; }

.mini-cell .stone { position: absolute; left: 6%;
 top: 6%;
 width: 88%;
 aspect-ratio: 1; animation: none; }

.mini-mark {
  position: absolute;
  left: 26%;
  top: 26%;
  width: 48%;
  aspect-ratio: 1;
  border: 2px dashed var(--cinnabar);
  border-radius: 50%;
  opacity: .9;
}

.mini-pick {
  position: absolute;
  left: 18%;
  top: 18%;
  width: 64%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--cinnabar);
  font-weight: 900;
  font-size: 15px;
}

.mini-pick::before { content: "▲"; }

.shape-body h4 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-chip {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .15em;
  color: var(--cinnabar-deep);
  border: 1px solid rgba(178, 58, 37, .4);
  border-radius: 3px;
  padding: 1px 7px;
  white-space: nowrap;
}

.shape-body p { margin-top: 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

.tips-sec, .quiz-sec { margin-top: 40px; }

.tips-sec h3, .quiz-sec h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .14em;
  padding-left: 12px;
  border-left: 4px solid var(--cinnabar);
  margin-bottom: 16px;
}

.quiz-note { font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; }

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.tip-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 252, 242, .55);
  border: 1px solid rgba(43, 38, 32, .12);
  border-radius: 6px;
}

.tip-no {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--brush);
  border-radius: 50%;
  font-size: 14px;
}

.tip-card h5 { font-size: 14.5px; letter-spacing: .08em; }
.tip-card p { margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------------- 测验 ---------------- */

.quiz-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(255, 252, 242, .6);
  border: 1px solid rgba(43, 38, 32, .14);
  border-radius: 8px;
  position: relative;
}

.quiz-body { flex: 1; }
.quiz-q { font-size: 14.5px; font-weight: 600; letter-spacing: .04em; }

.quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.quiz-opt {
  font-family: var(--serif);
  font-size: 13.5px;
  padding: 6px 16px;
  border: 1px solid rgba(43, 38, 32, .3);
  border-radius: 5px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.quiz-opt:hover { background: rgba(43, 38, 32, .07); }

.quiz-opt.is-right {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.quiz-opt.is-wrong {
  border-color: var(--cinnabar);
  color: var(--cinnabar-deep);
  text-decoration: line-through;
}

.quiz-why { margin-top: 10px; font-size: 13px; line-height: 1.6; }
.quiz-why.ok { color: var(--ink-soft); }
.quiz-why.no { color: var(--cinnabar-deep); }

.pass-seal {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: #f6ead9;
  font-family: var(--brush);
  font-size: 20px;
  border-radius: 4px;
  transform: rotate(8deg);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 220, .35);
  animation: mark .35s ease-out both;
}

/* ---------------- 阵法闯关 ---------------- */

.level-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.level-card {
  text-align: left;
  font-family: var(--serif);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(165deg, rgba(255, 252, 242, .8), rgba(255, 248, 232, .55));
  border: 1px solid rgba(43, 38, 32, .16);
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  position: relative;
}

.level-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(60, 45, 20, .35); }

.level-card.is-locked { opacity: .45; cursor: default; }

.level-card.is-cleared::after {
  content: "通";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: #f6ead9;
  font-family: var(--brush);
  font-size: 17px;
  border-radius: 4px;
  transform: rotate(8deg);
}

.level-no {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--brush);
  font-size: 24px;
  border-radius: 6px;
}

.level-name { font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.level-goal { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }

.level-name, .level-goal { display: block; }

.level-state {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* 关卡进行中：左盘右栏（右栏 HUD 文本） */
.dojo-hud { margin-bottom: 0; }

.dojo-title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dojo-title h3 { font-size: 22px; font-weight: 600; letter-spacing: .08em; flex: 1; }

.dojo-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(170deg, rgba(255, 252, 242, .85), rgba(255, 246, 228, .7));
  border: 1px solid rgba(43, 38, 32, .13);
  border-left: 3px solid var(--cinnabar);
  border-radius: 6px;
  position: sticky;
  top: 16px;
}

.dojo-goal { font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.dojo-brief { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }
.dojo-moves { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .1em; }

.dojo-fb {
  min-height: 1.6em;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.dojo-fb.done { color: var(--cinnabar-deep); }
.dojo-fb.fail { color: var(--cinnabar); }

.dojo-actions { display: flex; gap: 10px; margin-top: 10px; }

.btn-sm { padding: 7px 14px; font-size: 13px; letter-spacing: .1em; text-indent: .1em; }

.dojo-board-wrap, .review-wrap { display: flex; justify-content: center; }

.dojo-board-wrap { width: 100%; }

.dojo-board-wrap .board-frame {
  width: min(100%, calc(100vh - 270px));
}

/* ---------------- 复盘研究 ---------------- */

.review-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-faint);
  letter-spacing: .1em;
}

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

.review-card {
  font-family: var(--serif);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: rgba(255, 252, 242, .6);
  border: 1px solid rgba(43, 38, 32, .14);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}

.review-card:hover, .review-card.is-on { background: rgba(255, 252, 242, .95); box-shadow: var(--shadow-soft); }
.review-card.is-on { border-color: var(--cinnabar); }

.rev-no { font-family: var(--brush); font-size: 18px; color: var(--cinnabar-deep); }
.rev-res { font-weight: 600; }
.rev-res.rev-win { color: var(--cinnabar-deep); }
.rev-res.rev-lose { color: var(--ink); }
.rev-res.rev-draw { color: var(--ink-faint); }
.rev-date { margin-left: auto; font-size: 12px; color: var(--ink-faint); }

/* 复盘进行态：布局由 #reviewPlay 的 split-stage 承担，此处仅保留兼容 */
.review-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.review-wrap .dojo-board-wrap { flex: none; width: min(100%, min(88vw, calc(100vh - 260px))); }

.review-side {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rev-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.rev-note {
  padding: 14px 16px;
  background: linear-gradient(170deg, rgba(255, 252, 242, .9), rgba(255, 246, 228, .75));
  border-left: 3px solid var(--cinnabar);
  border-radius: 4px;
  min-height: 90px;
  font-size: 14px;
  line-height: 1.65;
}

.rev-head { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.rev-best { color: var(--ink-soft); font-size: 13px; margin-top: 6px; }

.badge {
  font-size: 12px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.badge.v-win { background: var(--cinnabar); color: #f6ead9; }
.badge.v-good { background: var(--ink); color: var(--paper); }
.badge.v-fair { background: rgba(43, 38, 32, .1); color: var(--ink-soft); }
.badge.v-doubt { background: rgba(178, 58, 37, .12); color: var(--cinnabar-deep); }
.badge.v-blunder { background: var(--cinnabar-deep); color: #f6ead9; }

.rev-moves {
  max-height: 42vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 38, 32, .3) transparent;
}

.rev-mv {
  font-family: var(--serif);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid rgba(43, 38, 32, .14);
  border-radius: 4px;
  background: rgba(255, 252, 242, .6);
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rev-mv.is-cur { border-color: var(--cinnabar); background: #fffdf5; color: var(--ink); }

.rev-mv .mv-stone {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(43, 38, 32, .35);
}

.rev-mv .mv-stone.b { background: var(--stone-b); }
.rev-mv .mv-stone.w { background: #f2eee2; }

.rev-mv em { font-style: normal; opacity: .85; }
.rev-mv.v-win em, .rev-mv.v-blunder em { color: var(--cinnabar-deep); }

/* 最佳手虚影 */
.cell.ghost-best { position: relative; }
.cell.ghost-best::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 18%;
  width: 64%;
  aspect-ratio: 1;
  border: 2px dashed var(--cinnabar);
  border-radius: 50%;
  z-index: 4;
}

/* 胜利连线（复盘板） */
.teach-board .cell.win-line .stone {
  box-shadow: var(--shadow-stone), 0 0 0 3px rgba(178, 58, 37, .5);
}

/* ---------------- 响应式（教学区） ---------------- */

/* ≤900px：所有分栏视图降级为纵向堆叠（棋盘上、内容下） */
@media (max-width: 900px) {
  .split-stage,
  .stage {
    grid-template-columns: minmax(280px, min(92vw, 620px));
    justify-items: center;
  }

  .split-stage > * { width: min(100%, 560px); }

  .teach-left { position: static; }
  .learn-board-wrap .board-frame,
  .dojo-board-wrap .board-frame { width: min(100%, 86vw); }

  .dojo-side, .review-side { width: 100%; }
  .panel { width: min(100%, 520px); max-width: none; }
  .stage { justify-items: center; }
  .board-side { width: min(100%, 560px); }

  .teach-stage { padding: 4px 14px 60px; }
}

@media (max-width: 720px) {
  .shape-card, .quiz-card { flex-direction: column; }
  .mini-board { width: 100%; }
  .review-wrap { flex-direction: column; }
  .review-side { width: 100%; }
  .shape-row .mini-board { width: 110px; }
  .topbar { flex-wrap: wrap; gap: 6px 14px; padding-top: 6px; }
  .topbar-actions { margin-left: 0; }
  /* 窄屏模式标签：单行紧凑 */
  .modes { width: 100%; gap: 4px; justify-content: flex-start; }
  .mode-tab { padding: 6px 9px; font-size: 13px; letter-spacing: .06em; text-indent: .06em; }
}