/* ============================================================
   五子棋教学 — 融合视图样式（#view-gomoku）

   与导航站共用 main.css 的设计 token（--surface / --border / --text …），
   因此亮暗两套主题自动跟随[data-theme]，无需重复定义。

   设计约定（同站点）：
     - 卡片 12px 圆角 / 按钮、输入框 6px 圆角
     - 栅格对齐、充足留白、语义色变量，不写死色值
     - 禁：高饱和渐变、glow、厚重毛玻璃

   命名隔离：全部选择器带 #view-gomoku 前缀；模式 class（mode-ai /
   mode-teach / mode-online）挂在视图根上，不污染 body。
   ============================================================ */

/* ---------- 本视图专属变量（棋盘木色 / 棋理语义色） ----------
   这些不属于全站 token，只服务棋盘与教学标注，因此定义在视图根上，
   亮暗两套都给全：暗色下木纹转冷灰、标注色提亮，保证对比度。 */
#view-gomoku {
  --cell: 40px; --axis: 19px; --gm-stone: 7px;

  /* 棋盘木色：底色 / 网格从全局令牌推导（--surface / --text），随主题亮暗与皮肤自动走；
     木纹质感保留原多层渐变技法（细纹 + 顶部斜受光 + 边角压暗），仍留一点暖木调、不脱离木色。 */
  --gm-wood: color-mix(in srgb, var(--surface) 76%, #b07a3e);
  --gm-wood-a: color-mix(in srgb, #7a5630 6%, transparent);
  --gm-wood-b: color-mix(in srgb, #fff4dd 20%, transparent);
  --gm-wood-sheen: color-mix(in srgb, #fff8e8 42%, transparent);
  --gm-wood-shade: color-mix(in srgb, #6a4a26 14%, transparent);
  --gm-grid-line: color-mix(in srgb, var(--text) 42%, transparent);
  --gm-grid-star: color-mix(in srgb, var(--text) 60%, transparent);
  --gm-grid-edge: color-mix(in srgb, var(--text) 20%, transparent);
  --gm-grid-shade: color-mix(in srgb, #000 12%, transparent);

  /* 棋子投影 */
  --gm-stone-shadow: rgba(56, 40, 20, .38);
  --gm-stone-shadow-2: rgba(56, 40, 20, .26);
  --gm-stone-shadow-w: rgba(90, 66, 32, .30);
  --gm-stone-shadow-w2: rgba(90, 66, 32, .20);

  /* 棋理语义色：红=对手威胁/失误、青绿=推荐点、琥珀=偏差与定式 */
  --gm-threat: #a83c32;
  --gm-threat-line: rgba(168, 60, 50, .5);
  --gm-threat-ring: rgba(168, 60, 50, .45);
  --gm-best: #46736a;
  --gm-best-text: #46736a;
  --gm-best-line: rgba(70, 115, 106, .55);
  --gm-best-inner: rgba(70, 115, 106, .35);
  --gm-best-soft: rgba(70, 115, 106, .12);
  --gm-warn: #b08b4a;
  --gm-warn-text: #8a6a30;
  --gm-warn-inner: rgba(176, 139, 74, .35);
  --gm-warn-soft: rgba(176, 139, 74, .13);
  --gm-mark: #a83c32;
  --gm-mark-ring: rgba(255, 253, 246, .9);
  --gm-pv-w: rgba(255, 252, 244, .58);
  --gm-pv-w-fg: rgba(47, 42, 36, .8);
  --gm-pv-w-edge: rgba(90, 66, 32, .3);
  --gm-bubble-bg: rgba(255, 252, 245, .97);
  --gm-hover-bg: rgba(96, 66, 32, .07);
  --gm-hover-stone: radial-gradient(circle at 50% 50%, rgba(58, 40, 20, .26) 0 43%, transparent 44%);
  --gm-hover-stone-active: radial-gradient(circle at 50% 50%, rgba(58, 40, 20, .38) 0 43%, transparent 44%);
  --gm-label-fg: #fff;
  --gm-label-edge: rgba(40, 28, 18, .9);
}
[data-theme="dark"] #view-gomoku {
  /* 棋盘：深暖木——仍从 --surface 推导（主体跟全局表面），受光减弱、边角加重，
     避免深色底上木纹浑浊、格线糊成一片。格线/星位已由基础块的 --text 推导自动提亮，此处不重复。 */
  --gm-wood: color-mix(in srgb, var(--surface) 70%, #7d5a30);
  --gm-wood-a: color-mix(in srgb, #fff 3%, transparent);
  --gm-wood-b: color-mix(in srgb, #fff 4%, transparent);
  --gm-wood-sheen: color-mix(in srgb, #fff 8%, transparent);
  --gm-wood-shade: color-mix(in srgb, #000 28%, transparent);
  --gm-grid-shade: color-mix(in srgb, #000 34%, transparent);

  --gm-stone-shadow: rgba(0, 0, 0, .55);
  --gm-stone-shadow-2: rgba(0, 0, 0, .40);
  --gm-stone-shadow-w: rgba(0, 0, 0, .50);
  --gm-stone-shadow-w2: rgba(0, 0, 0, .35);

  /* 标注色提亮，保证在深色棋盘上仍然跳 */
  --gm-threat: #e8776c;
  --gm-threat-line: rgba(232, 119, 108, .55);
  --gm-threat-ring: rgba(232, 119, 108, .5);
  --gm-best: #6fb3a6;
  --gm-best-text: #6fb3a6;
  --gm-best-line: rgba(111, 179, 166, .6);
  --gm-best-inner: rgba(111, 179, 166, .4);
  --gm-best-soft: rgba(111, 179, 166, .14);
  --gm-warn: #d6ac63;
  --gm-warn-text: #d6ac63;
  --gm-warn-inner: rgba(214, 172, 99, .4);
  --gm-warn-soft: rgba(214, 172, 99, .15);
  --gm-mark: #e8776c;
  --gm-mark-ring: rgba(31, 31, 35, .9);
  --gm-pv-w: rgba(58, 58, 62, .62);
  --gm-pv-w-fg: rgba(244, 244, 245, .82);
  --gm-pv-w-edge: rgba(200, 200, 210, .35);
  --gm-bubble-bg: rgba(31, 31, 35, .97);
  --gm-hover-bg: rgba(255, 255, 255, .06);
  --gm-hover-stone: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .40) 0 43%, transparent 44%);
  --gm-hover-stone-active: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .55) 0 43%, transparent 44%);
  --gm-label-fg: #17171a;
  --gm-label-edge: rgba(244, 244, 245, .92);
}
/* 暗色下棋子描边加一层，避免白子贴在深木上失去边界 */
[data-theme="dark"] #view-gomoku .stone.white {
  box-shadow: 0 2px 4px var(--gm-stone-shadow-w), 0 1px 1px var(--gm-stone-shadow-w2),
              inset 0 1px 1px #fff, inset 0 -2px 4px rgba(150, 118, 72, .26),
              0 0 0 1px rgba(0, 0, 0, .45);
}
[data-theme="dark"] #view-gomoku .p .pstone.w { box-shadow: 0 1px 2px var(--gm-stone-shadow-w), 0 0 0 1px rgba(0, 0, 0, .4); }
[data-theme="dark"] #view-gomoku .dict-w,
[data-theme="dark"] #view-gomoku .ob-s.w { stroke: rgba(200, 200, 210, .55); }
[data-theme="dark"] #view-gomoku .open-stone.play.b { background: rgba(20, 20, 23, .9); border-color: rgba(244, 244, 245, .85); }
#view-gomoku.mode-ai,
#view-gomoku.mode-teach,
#view-gomoku.mode-online { color: var(--text); }

/* ---------- 视图骨架 ---------- */
#view-gomoku .gm-body {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 24px 40px;
}
/* 头部左标题右操作（2026-10-21：外观键已移入侧栏，头部只剩「返回」） */
#view-gomoku .gm-head { display: flex; align-items: flex-start; gap: 8px; }
#view-gomoku .gm-head > div:first-child { min-width: 0; flex: 1; }
#view-gomoku .gm-head h1 { font-size: var(--hx-t20); font-weight: 700; letter-spacing: 0.2px; }
#view-gomoku .gm-head .btn-back { flex: none; }

/* 桌面：棋盘跨两行在左，右列依次设置 / 操作 / 局面；教学横跨整行在最下 */
#view-gomoku .gm-layout {
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr);
  grid-template-areas:
    "board  settings"
    "board  ops"
    "board  status"
    "teach  teach";
  column-gap: 24px; row-gap: 16px;
  align-items: start;
}
/* 棋盘宽度由格子数直接算出，不依赖内容宽度——否则下方教学面板的长句会把整列撑宽 */
#view-gomoku .gm-board-col {
  grid-area: board;
  width: calc(var(--cell) * 15 + var(--axis) * 2 + 6px + 22px);
}
#view-gomoku .gm-settings { grid-area: settings; }
#view-gomoku .gm-ops { grid-area: ops; }
#view-gomoku .gm-status-panel { grid-area: status; }
#view-gomoku #teachPanel { grid-area: teach; position: relative; z-index: 10; }

/* ---------- 面板（卡片） ---------- */
#view-gomoku .gm-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
#view-gomoku .gm-panel > h2 {
  font-size: var(--hx-t12); font-weight: 700; margin: 0 0 10px; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
#view-gomoku .gm-panel > h2::before {
  content: ""; display: block; width: 3px; height: 11px; flex: none;
  background: var(--text-3); border-radius: 1px;
}
#view-gomoku .field { margin-bottom: 10px; }
#view-gomoku .field:last-child { margin-bottom: 0; }
#view-gomoku .field-k { font-size: var(--hx-t12); color: var(--text-2); margin-bottom: 5px; }
#view-gomoku .hint { color: var(--text-2); font-size: var(--hx-t12); }
#view-gomoku .gm-hint-mute { color: var(--text-3); font-size: var(--hx-t11-5); }

/* ---------- 按钮 / 分段控件 ---------- */
#view-gomoku .btn {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 0 12px; height: var(--ctl-h);
  border-radius: var(--r-btn); cursor: pointer;
  font-size: var(--hx-t12-5); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
#view-gomoku .btn:hover { background: var(--icon-bg); border-color: var(--border-strong); }
#view-gomoku .btn:disabled { opacity: .45; cursor: not-allowed; }
#view-gomoku .btn:disabled:hover { background: var(--surface); border-color: var(--border); }
#view-gomoku .btn.sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--hx-t12); }
#view-gomoku .btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
#view-gomoku .btn.ghost:hover { background: var(--icon-bg); color: var(--text); }
/* 主按钮：底色与文字刻意反转，hover 时文字固定为纯白 */
#view-gomoku .btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
#view-gomoku .btn.primary:hover { background: var(--btn-p-hover); border-color: var(--btn-p-hover); color: #fff; }

/* 圆角口径（全站 tab/分段统一）：内部块圆角 = 外框圆角 − 边框 − 内边距。
   用 calc 跟着 --r-btn 走：index.html 下 = 6-1-2 = 3px；
   helix 皮肤把 --r-btn 收到 2px → max(0, 2-3) = 0（方角，不倒挂）。
   ⚠️ 去掉 overflow:hidden：外框 6px 弧会把内部块自己的 3px 圆角裁没，
   视觉上又变成「内圆角 = 外框圆角」。加 padding 让内块整体内缩，圆角才露得出来。 */
#view-gomoku .seg {
  display: flex; border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 2px; background: var(--surface);
}
#view-gomoku .seg .btn {
  flex: 1 1 0; min-width: 0; border: 0; border-right: 1px solid var(--border);
  border-radius: max(0px, var(--r-btn) - 3px); height: var(--ctl-h);
}
#view-gomoku .seg .btn:last-child { border-right: 0; }
#view-gomoku .seg .btn:hover { background: var(--icon-bg); }
/* 选中态：琥珀底 + 深字，不用饱和填充色 */
#view-gomoku .seg .btn.active {
  background: var(--accent-soft-bg); color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent-soft-border);
}

#view-gomoku .chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 0 10px; height: var(--ctl-h);
  font-size: var(--hx-t12); cursor: pointer; color: var(--text-2); background: var(--surface);
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
#view-gomoku .chip:hover { background: var(--icon-bg); }
#view-gomoku .chip input { margin: 0; accent-color: var(--text); }
#view-gomoku .chip:has(input:checked) {
  background: var(--accent-soft-bg); border-color: var(--accent-soft-border);
  color: var(--accent-text); font-weight: 600;
}
#view-gomoku .chips { display: flex; gap: 7px; flex-wrap: wrap; }

/* 难度：宽屏五档按钮，窄屏换下拉（省纵向空间） */
#view-gomoku .only-narrow { display: none; }
#view-gomoku .level-select {
  width: 100%; font-family: inherit; font-size: var(--hx-t13); font-weight: 600;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 0 12px; height: var(--ctl-h); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#view-gomoku .level-select:focus { outline: none; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--overlay-dim); }

/* ---------- 操作区（悔棋 / 重开 / 音效） ---------- */
#view-gomoku .gm-ops .board-actions { display: flex; gap: 8px; align-items: stretch; }
#view-gomoku .gm-ops .board-actions .btn { flex: 1 1 0; }
#view-gomoku .gm-ops .chip-sound { flex: 0 0 auto; }
#view-gomoku .gm-ops .board-bar { margin-top: 10px; }

/* ---------- 棋盘 ---------- */
/* 棋盘底色 / 木纹 / 网格全部走 #view-gomoku 上的 --gm-* 变量；这些变量由全局令牌
   （--surface / --text）经 color-mix 推导，亮暗自动跟随，木纹质感保留多层渐变。 */
#view-gomoku .board-frame {
  padding: 11px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
#view-gomoku .board-wrap {
  display: grid;
  grid-template-columns: var(--axis) calc(var(--cell) * 15) var(--axis);
  grid-template-rows: var(--axis) calc(var(--cell) * 15) var(--axis);
  gap: 3px;
}
#view-gomoku .axis { display: grid; }
#view-gomoku .axis-x { grid-template-columns: repeat(15, var(--cell)); }
#view-gomoku .axis-y { grid-template-rows: repeat(15, var(--cell)); }
#view-gomoku .axis span {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: var(--hx-t11);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
#view-gomoku .corner { display: flex; align-items: center; justify-content: center; }
#view-gomoku #board {
  display: grid;
  grid-template-columns: repeat(15, var(--cell));
  grid-template-rows: repeat(15, var(--cell));
  background-color: var(--gm-wood);
  /* 木纹：低对比细条 + 顶部斜射光 + 边角压暗，全部走变量，暗色自动变冷灰 */
  background-image:
    repeating-linear-gradient(91deg, var(--gm-wood-a) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(89deg, var(--gm-wood-b) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, var(--gm-wood-a) 0 2px, transparent 2px 23px),
    radial-gradient(130% 100% at 26% 10%, var(--gm-wood-sheen), transparent 58%),
    radial-gradient(120% 110% at 84% 94%, var(--gm-wood-shade), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--gm-grid-edge), inset 0 2px 10px var(--gm-grid-shade);
}
/* 交叉点棋盘：线从每格中心穿过，最外圈只画半截 */
#view-gomoku .cell { position: relative; cursor: pointer; }
#view-gomoku .cell::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--gm-grid-line);
}
#view-gomoku .cell::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--gm-grid-line);
}
#view-gomoku .cell:nth-child(15n+1)::before { left: 50%; }
#view-gomoku .cell:nth-child(15n)::before { right: 50%; }
#view-gomoku .cell:nth-child(-n+15)::after { top: 50%; }
#view-gomoku .cell:nth-last-child(-n+15)::after { bottom: 50%; }
/* 星位：天元 + 四星 */
#view-gomoku .cell.star { background-image: radial-gradient(circle at 50% 50%, var(--gm-grid-star) 0 2.6px, transparent 2.6px); }

/* 悬停预览：半透明棋子（只在轮到你时出现） */
#view-gomoku .cell:hover { background-color: var(--gm-hover-bg); background-image: var(--gm-hover-stone); }
#view-gomoku .cell.star:hover { background-image: var(--gm-hover-stone), radial-gradient(circle at 50% 50%, var(--gm-grid-star) 0 2.6px, transparent 2.6px); }
#view-gomoku #board.locked .cell { cursor: default; }
#view-gomoku #board.locked .cell:hover { background-color: transparent; background-image: none; }
#view-gomoku #board.locked .cell.star:hover { background-image: radial-gradient(circle at 50% 50%, var(--gm-grid-star) 0 2.6px, transparent 2.6px); }

/* 棋子：墨玉 / 暖白，非纯黑纯白 */
#view-gomoku .stone {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) - var(--gm-stone)); height: calc(var(--cell) - var(--gm-stone));
  transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 2;
}
#view-gomoku .stone.black {
  background: radial-gradient(circle at 34% 27%, #757a86 0%, #4a4f5a 22%, #31353f 56%, #24272f 100%);
  box-shadow: 0 2px 4px var(--gm-stone-shadow), 0 1px 1px var(--gm-stone-shadow-2),
              inset 0 1px 1px rgba(255, 255, 255, .16), inset 0 -2px 3px rgba(24, 26, 32, .38);
}
#view-gomoku .stone.white {
  background: radial-gradient(circle at 34% 27%, #ffffff 0%, #fdf8ee 28%, #f1e6cf 60%, #d6c5a6 100%);
  box-shadow: 0 2px 4px var(--gm-stone-shadow-w), 0 1px 1px var(--gm-stone-shadow-w2),
              inset 0 1px 1px #fff, inset 0 -2px 4px rgba(150, 118, 72, .26);
}
/* 落子动画只给最后一手 */
@keyframes gm-stone-in {
  from { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);  opacity: 1; }
}
#view-gomoku .stone.last-move { animation: gm-stone-in .17s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes gm-mark-in { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }
#view-gomoku .stone.last-move::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--gm-mark);
  box-shadow: 0 0 0 1.5px var(--gm-mark-ring);
  animation: gm-mark-in .18s ease-out .06s both;
}
/* 推演：半透明编号棋子（刻意比真棋子小一圈、颜色淡，避免误认） */
#view-gomoku .pv {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) - 13px); height: calc(var(--cell) - 13px);
  transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--hx-t10); font-weight: 700; line-height: 1; z-index: 2;
}
#view-gomoku .pv.b { background: rgba(58, 62, 74, .52); color: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
#view-gomoku .pv.w { background: var(--gm-pv-w); color: var(--gm-pv-w-fg); box-shadow: inset 0 0 0 1px var(--gm-pv-w-edge); }
#view-gomoku .pv.cur { box-shadow: 0 0 0 2px var(--gm-mark); }

/* ---------- 威胁可视化 / 教学标注图层 ---------- */
#view-gomoku .board-stack { position: relative; }
#view-gomoku #threatLayer,
#view-gomoku #teachLayer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
#view-gomoku #threatLayer { z-index: 1; }
#view-gomoku #teachLayer { z-index: 3; }
#view-gomoku .tl-line { fill: none; stroke: var(--gm-threat-line); stroke-width: .07; stroke-dasharray: .3 .22; }
#view-gomoku .teach-ring { fill: none; }
#view-gomoku .teach-ring.best   { stroke: var(--gm-best); animation: gm-ring-pulse 1.05s ease-in-out infinite; }
#view-gomoku .teach-ring.missed { stroke: var(--gm-warn); animation: gm-ring-pulse 1.05s ease-in-out infinite; }
#view-gomoku .teach-ring.threat { stroke: var(--gm-threat); animation: gm-ring-pulse 1.05s ease-in-out infinite; }
#view-gomoku .teach-ring.kill   { stroke: var(--gm-threat); animation: gm-kill-flash .7s ease-in-out infinite; }
#view-gomoku .teach-line { fill: none; stroke-width: .07; stroke-dasharray: .28 .2; }
#view-gomoku .teach-line.best   { stroke: var(--gm-best-line); }
#view-gomoku .teach-line.threat { stroke: var(--gm-threat-line); }
#view-gomoku .teach-label {
  font-size: calc(.95px * var(--hx-fsk, 1)); font-weight: 700; fill: var(--gm-label-fg); paint-order: stroke;
  stroke: var(--gm-label-edge); stroke-width: .3px; stroke-linejoin: round;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
/* 引导圆环画在 SVG 上：SVG circle 一定是正圆，
   给方形格子加 border-radius 会被渲染成椭圆 */
#view-gomoku .guide-ring { fill: none; }
#view-gomoku .guide-ring.threat { stroke: var(--gm-threat); animation: gm-ring-pulse 1.05s ease-in-out infinite; }
#view-gomoku .guide-ring.best   { stroke: var(--gm-best); animation: gm-ring-pulse 1.05s ease-in-out infinite; }
@keyframes gm-ring-pulse {
  0%, 100% { stroke-opacity: .22; stroke-width: .055; }
  50%      { stroke-opacity: .95; stroke-width: .105; }
}
@keyframes gm-kill-flash {
  0%, 100% { stroke-opacity: .28; stroke-width: .06; }
  50%      { stroke-opacity: 1;   stroke-width: .17; }
}
/* 引导进行中：整盘轻微压暗，让闪烁的那一点更跳 */
#view-gomoku #board.guiding .cell { opacity: .72; transition: opacity .15s var(--ease); }
#view-gomoku #board.guiding .cell.on-guide { opacity: 1; }

/* 推荐点 / 定式演示的「假设落子」虚影：比真棋子小且虚，一眼可区分 */
#view-gomoku .guide-stone,
#view-gomoku .open-stone {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) - 13px); height: calc(var(--cell) - 13px);
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; z-index: 2;
}
#view-gomoku .guide-stone {
  background: var(--gm-best-soft); border: 1px dashed var(--gm-best-line);
  box-shadow: inset 0 0 0 1px var(--gm-best-inner);
}
#view-gomoku .open-stone {
  background: var(--gm-warn-soft); border: 1px dashed var(--gm-warn);
  box-shadow: inset 0 0 0 1px var(--gm-warn-inner);
}

/* 棋盘上的说明气泡：浮在棋盘，自动挪到没有棋子的地方 */
#view-gomoku .guide-bubble,
#view-gomoku .teach-bubble {
  position: absolute; z-index: 6; pointer-events: none;
  padding: 6px 9px;
  background: var(--gm-bubble-bg); border: 1px solid var(--gm-threat);
  border-left: 3px solid var(--gm-threat);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-2);
  font-size: var(--hx-t12); line-height: 1.5; color: var(--text);
}
#view-gomoku .guide-bubble { width: 156px; }
#view-gomoku .teach-bubble { max-width: 196px; }
#view-gomoku .guide-bubble.best { border-left-color: var(--gm-best); }
#view-gomoku .guide-bubble .gb-n { color: var(--gm-threat); font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
#view-gomoku .guide-bubble.best .gb-n { color: var(--gm-best-text); }

/* ---------- 对局双方条 ---------- */
#view-gomoku .players {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px;
  background: var(--icon-bg); border: 1px solid var(--border);
  border-radius: var(--r-btn); padding: 8px 10px; margin-bottom: 12px;
}
/* 非当前手方压暗作「轮次」提示；.48 时 12.5px 的选手名只剩 3.1:1（低于 4.5），压到 .62 仍能看出主次 */
#view-gomoku .p { display: flex; align-items: center; gap: 7px; opacity: .62; transition: opacity .15s var(--ease); }
#view-gomoku .p.right { flex-direction: row-reverse; }
#view-gomoku .p.on { opacity: 1; }
#view-gomoku .p .pstone { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; }
#view-gomoku .p .pstone.b { background: radial-gradient(circle at 34% 27%, #757a86, #31353f 56%, #24272f); box-shadow: 0 1px 2px var(--gm-stone-shadow); }
#view-gomoku .p .pstone.w { background: radial-gradient(circle at 34% 27%, #fff, #f1e6cf 62%, #d6c5a6); box-shadow: 0 1px 2px var(--gm-stone-shadow-w); }
#view-gomoku .p .pname { font-size: var(--hx-t12-5); font-weight: 700; color: var(--text); }
#view-gomoku .p .pmeta { font-size: var(--hx-t11); color: var(--text-3); }
/* 联机显示账号昵称后名字长度不可控：给文本列收缩空间，超出省略，不挤掉另一方 */
#view-gomoku .p > span:last-child { min-width: 0; }
#view-gomoku .p .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-gomoku .p.on .pname { color: var(--accent-text); }
#view-gomoku .vs { font-size: var(--hx-t10); color: var(--text-3); letter-spacing: .08em; font-weight: 700; }

/* ---------- 回合状态 ---------- */
#view-gomoku .status {
  font-size: var(--hx-t13); font-weight: 700; margin-bottom: 11px;
  display: flex; align-items: center; gap: 7px; color: var(--text);
}
#view-gomoku .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
#view-gomoku .status .dot.w { background: var(--text); box-shadow: inset 0 0 0 1px var(--surface); }
@keyframes gm-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
#view-gomoku .status.think .dot { animation: gm-pulse 1s ease-in-out infinite; background: var(--accent); }

/* ---------- 优劣条 ---------- */
#view-gomoku .eval { margin: 2px 0 12px; }
#view-gomoku .eval-track {
  position: relative; height: 7px; background: var(--icon-bg);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
#view-gomoku .eval-fill {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  background: var(--gm-best); border-radius: 3px;
}
#view-gomoku .eval-fill.ai { background: var(--gm-threat); }
#view-gomoku .eval-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
#view-gomoku .eval-dot {
  position: absolute; top: -2px; left: 50%; width: 3px; height: 11px;
  margin-left: -1.5px; border-radius: 2px; background: var(--text);
}
#view-gomoku .eval-legend { display: flex; justify-content: space-between; font-size: var(--hx-t11); color: var(--text-3); margin-top: 5px; }
#view-gomoku .eval-legend #evalText { color: var(--text-2); font-weight: 600; }

/* ---------- 引擎数据格 ---------- */
#view-gomoku .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#view-gomoku .stat {
  background: var(--icon-bg); border: 1px solid var(--border);
  border-radius: var(--r-btn); padding: 7px 4px; text-align: center;
}
#view-gomoku .stat .k { font-size: var(--hx-t11); color: var(--text-3); }
#view-gomoku .stat .v { font-size: var(--hx-t13-5); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
#view-gomoku .engine-line {
  margin-top: 10px; font-size: var(--hx-t11); color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}
#view-gomoku .led { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); flex: 0 0 auto; }
#view-gomoku .led.ok { background: var(--green); }
#view-gomoku .led.err { background: var(--danger); }

/* ---------- 教学：复盘 / 引导 / 判定 ---------- */
#view-gomoku .teach-col { min-width: 0; }
#view-gomoku #teachBody { display: none; }
#view-gomoku #teachBody.on {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 20px; align-items: start;
}
#view-gomoku .review {
  background: var(--icon-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--gm-best); border-radius: 0 var(--r-btn) var(--r-btn) 0;
  padding: 9px 12px; margin-bottom: 11px;
}
#view-gomoku .review.warn { border-left-color: var(--gm-warn); }
#view-gomoku .review.bad  { border-left-color: var(--gm-threat); }
#view-gomoku .review-head { font-size: var(--hx-t12); font-weight: 700; color: var(--gm-best-text); margin-bottom: 6px; }
#view-gomoku .review.warn .review-head { color: var(--gm-warn-text); }
#view-gomoku .review.bad .review-head { color: var(--gm-threat); }
#view-gomoku .rv-row { display: flex; gap: 9px; margin-bottom: 5px; font-size: var(--hx-t12-5); line-height: 1.55; }
#view-gomoku .rv-row:last-child { margin-bottom: 0; }
#view-gomoku .rv-k { flex: 0 0 auto; color: var(--text-3); font-size: var(--hx-t12); font-weight: 700; padding-top: 2px; }
#view-gomoku .rv-v { color: var(--text); }

#view-gomoku .guide {
  background: var(--icon-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--gm-threat); border-radius: 0 var(--r-btn) var(--r-btn) 0;
  padding: 9px 12px; margin-bottom: 11px;
}
#view-gomoku .guide-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#view-gomoku .guide-n { font-size: var(--hx-t11); font-weight: 700; color: var(--gm-threat); font-variant-numeric: tabular-nums; }
#view-gomoku .guide-kind { font-size: var(--hx-t11); color: var(--text-3); }
#view-gomoku .guide-text { font-size: var(--hx-t13); color: var(--text); line-height: 1.55; }
#view-gomoku .guide-acts { display: flex; gap: 7px; margin-top: 8px; }

#view-gomoku .vrow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
#view-gomoku .vlabel { font-size: var(--hx-t11); color: var(--text-3); }
#view-gomoku .coord { font-weight: 700; font-size: var(--hx-t13-5); color: var(--text); font-variant-numeric: tabular-nums; }
#view-gomoku .reason { font-size: var(--hx-t12-5); margin: 0 0 11px; color: var(--text-2); line-height: 1.6; }
/* 判定徽标：完美/良好=绿、偏差=琥珀、失误=红，均用语义色软底 */
#view-gomoku .verdict {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  font-weight: 700; font-size: var(--hx-t11-5);
}
#view-gomoku .verdict.完美, #view-gomoku .verdict.良好 {
  background: var(--green-soft-bg); color: var(--green-text); border: 1px solid var(--green-soft-border);
}
#view-gomoku .verdict.偏差 {
  background: var(--accent-soft-bg); color: var(--accent-text); border: 1px solid var(--accent-soft-border);
}
#view-gomoku .verdict.失误 {
  background: var(--danger-soft-bg); color: var(--danger-text); border: 1px solid var(--danger-soft-border);
}

/* ---------- 后续推演 ---------- */
#view-gomoku .proj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
#view-gomoku .proj-head .t { font-size: var(--hx-t12); color: var(--text-3); }
#view-gomoku .proj-list { list-style: none; margin: 0; padding: 0; }
#view-gomoku .proj-list li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 7px; border-radius: var(--r-btn); cursor: pointer; font-size: var(--hx-t12);
  transition: background .1s var(--ease);
}
#view-gomoku .proj-list li:hover { background: var(--icon-bg); }
#view-gomoku .proj-list li.on { background: var(--accent-soft-bg); }
#view-gomoku .proj-list li .n {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  background: var(--icon-bg); color: var(--text-2); border: 1px solid var(--border);
  font-size: var(--hx-t10); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
#view-gomoku .proj-list li.on .n { background: var(--accent-soft-bg); color: var(--accent-text); border-color: var(--accent-soft-border); }
#view-gomoku .proj-list li .c { font-weight: 700; flex: 0 0 auto; color: var(--text); font-variant-numeric: tabular-nums; }
#view-gomoku .proj-list li .r { color: var(--text-2); }
#view-gomoku .proj-empty { padding: 4px 7px; }

/* ---------- 棋型词典 ---------- */
#view-gomoku .dict { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
#view-gomoku .dict summary { cursor: pointer; font-size: var(--hx-t12); font-weight: 700; color: var(--text-2); }
#view-gomoku .dict summary:hover { color: var(--text); }
#view-gomoku #dictList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#view-gomoku .dict-row { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
#view-gomoku .dict-row:last-child { border-bottom: none; }
#view-gomoku .dict-img { flex: 0 0 auto; }
#view-gomoku .dict-line { stroke: var(--gm-grid-line); stroke-width: 1; }
#view-gomoku .dict-b { fill: #2f2a24; }
#view-gomoku .dict-w { fill: #fffdf7; stroke: #8a7c6b; stroke-width: 1; }
#view-gomoku .dict-txt {
  font-size: var(--hx-t12); line-height: 1.5; color: var(--text-2);
  display: flex; flex-direction: column;
}
#view-gomoku .dict-txt b { color: var(--text); font-size: var(--hx-t12-5); }

/* ---------- 起手定式 ---------- */
#view-gomoku .ob .ob-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#view-gomoku .ob-tip { display: flex; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--border); }
#view-gomoku .ob-tip .ob-n {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  background: var(--text-2); color: var(--surface); font-size: var(--hx-t10); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
#view-gomoku .ob-tip .ob-t { font-size: var(--hx-t12-5); line-height: 1.55; color: var(--text-2); }
#view-gomoku .ob-tip .ob-t b { color: var(--text); margin-right: 6px; }
#view-gomoku .ob-list { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#view-gomoku .ob-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); }
#view-gomoku .ob-row:last-child { border-bottom: none; }
#view-gomoku .ob-mini { flex: 0 0 auto; padding-top: 2px; }
#view-gomoku .ob-mini-svg { display: block; }
#view-gomoku .ob-g { stroke: var(--border-strong); stroke-width: .7; }
#view-gomoku .ob-star { fill: var(--text-3); opacity: .55; }
#view-gomoku .ob-s.b { fill: #2f2a24; }
#view-gomoku .ob-s.w { fill: #fffdf7; stroke: #8a7c6b; stroke-width: .7; }
#view-gomoku .ob-s.last { stroke: var(--gm-warn); stroke-width: 1.5; }
#view-gomoku .ob-body { flex: 1 1 auto; min-width: 0; }
#view-gomoku .ob-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
#view-gomoku .ob-name { font-weight: 700; font-size: var(--hx-t13); color: var(--text); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
#view-gomoku .ob-cat { font-size: var(--hx-t11); color: var(--text-3); flex: 0 0 auto; }
#view-gomoku .ob-v { flex: 0 0 auto; font-size: var(--hx-t11); font-weight: 700; padding: 1px 6px; border-radius: 4px; }
#view-gomoku .ob-v.black { background: var(--icon-bg); color: var(--text); border: 1px solid var(--border); }
#view-gomoku .ob-v.white { background: var(--green-soft-bg); color: var(--green-text); border: 1px solid var(--green-soft-border); }
#view-gomoku .ob-v.mixed { background: var(--accent-soft-bg); color: var(--accent-text); border: 1px solid var(--accent-soft-border); }
#view-gomoku .ob-note { font-size: var(--hx-t12); line-height: 1.55; color: var(--text-2); }
#view-gomoku .ob-demo { flex: 0 0 auto; margin-left: auto; }
#view-gomoku .ob-demo::before { content: "▶"; font-size: var(--hx-t8); margin-right: 4px; opacity: .75; }
#view-gomoku .ob-demo.playing {
  border-color: var(--gm-warn); color: var(--gm-warn-text); background: var(--accent-soft-bg);
}
#view-gomoku .ob-demo.playing::before { content: "■"; }

/* 定式演示：棋盘上按顺序落出的编号虚影，和推荐点用不同颜色区分 */
#view-gomoku .open-stone.play {
  border-style: solid; border-width: 1.5px;
  background: rgba(38, 33, 26, .84); border-color: rgba(255, 249, 236, .92);
  animation: gm-os-pop .16s ease-out;
}
#view-gomoku .open-stone.play.w { background: rgba(255, 253, 247, .93); border-color: rgba(120, 92, 50, .8); }
#view-gomoku .open-stone.play.prev { opacity: .38; }
#view-gomoku .open-stone.play.bg { opacity: .5; border-style: dotted; }
#view-gomoku .open-stone.play .os-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .26); font-weight: 700; font-variant-numeric: tabular-nums;
}
#view-gomoku .open-stone.play.b .os-n { color: rgba(255, 249, 236, .95); }
#view-gomoku .open-stone.play.w .os-n { color: rgba(47, 42, 36, .82); }
@keyframes gm-os-pop {
  from { transform: translate(-50%, -50%) scale(.3); }
  to   { transform: translate(-50%, -50%) scale(1); }
}
/* 正在演示的这一格：琥珀细框 + 轻脉冲，眼睛跟着序号走 */
#view-gomoku .cell.on-demo {
  box-shadow: inset 0 0 0 2px var(--accent); border-radius: 3px;
  animation: gm-cell-pulse 1s ease-in-out infinite;
}
@keyframes gm-cell-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent); }
  50%      { box-shadow: inset 0 0 0 2px var(--accent-soft-border); }
}

/* ---------- 杀法闯关 ---------- */
#view-gomoku .ch-ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) - 9px); height: calc(var(--cell) - 9px);
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; z-index: 3;
  border: 3px solid var(--gm-warn);
  box-shadow: 0 0 0 2px var(--gm-warn-inner);
  animation: gm-ch-ring-pulse 1.1s ease-in-out infinite;
}
@keyframes gm-ch-ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .95; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: .6; }
}
/* 走错标记：红框 = 你走错的点 */
#view-gomoku .ch-mark {
  position: absolute; inset: 2px; border-radius: 50%;
  pointer-events: none; z-index: 3;
  border: 2.5px solid var(--gm-threat);
  animation: gm-os-pop .18s ease-out;
}
#view-gomoku .cell.on-ch-no { box-shadow: inset 0 0 0 2px var(--gm-threat); border-radius: 3px; }

#view-gomoku .ch-levels {
  margin-top: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 8px;
}
#view-gomoku .ch-lv {
  display: flex; gap: 9px; align-items: stretch;
  padding: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
#view-gomoku .ch-lv:hover { border-color: var(--border-strong); background: var(--icon-bg); }
#view-gomoku .ch-lv.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
#view-gomoku .ch-lv.done { border-color: var(--green-soft-border); }
#view-gomoku .ch-lv .ob-mini-svg { flex: 0 0 auto; background: var(--surface); border-radius: 4px; }
#view-gomoku .ch-lv-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-gomoku .ch-lv-name { font-weight: 700; font-size: var(--hx-t12-5); color: var(--text); line-height: 1.2; }
#view-gomoku .ch-lv-meta { display: flex; gap: 6px; align-items: center; font-size: var(--hx-t11); color: var(--text-3); }
#view-gomoku .ch-lv-tag { font-size: var(--hx-t10); font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--icon-bg); color: var(--text-2); border: 1px solid var(--border); }
#view-gomoku .ch-lv-badge { margin-top: auto; font-size: var(--hx-t10); font-weight: 700; padding: 1px 6px; border-radius: 4px; align-self: flex-start; }
#view-gomoku .ch-lv-badge.todo { background: var(--icon-bg); color: var(--text-3); }
#view-gomoku .ch-lv-badge.cur { background: var(--accent-soft-bg); color: var(--accent-text); }
#view-gomoku .ch-lv-badge.done { background: var(--green-soft-bg); color: var(--green-text); }

/* ---------- 结束 / 确认弹窗 ---------- */
/* 遮罩用 fixed：祖先 .main 无 transform，定位不受融合视图影响。
   视觉令牌统一取 helix.css 的弹层套（原来是自成一套 rgba(24,24,27,.42)、
   无 blur、从下往上浮的 gm-dlg-pop，与首页弹窗的"从上落下"方向相反）。 */
#view-gomoku .dlg-overlay {
  position: fixed; inset: 0; z-index: var(--hx-z-dlg, 200); display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: var(--hx-mask, rgba(24, 24, 27, .42));
  -webkit-backdrop-filter: blur(var(--hx-mask-blur, 3px));
          backdrop-filter: blur(var(--hx-mask-blur, 3px));
}
#view-gomoku .dlg-overlay.show { display: flex; animation: hxFade .18s var(--hx-ease) both; }
@keyframes gm-dlg-fade { from { opacity: 0 } to { opacity: 1 } }
#view-gomoku .dlg-card {
  position: relative; width: min(320px, 100%);
  background: var(--hx-dlg-bg, var(--surface));
  border: 1px solid var(--hx-dlg-line, var(--border-strong));
  border-radius: var(--hx-dlg-radius, var(--r-card));
  padding: 26px 26px 20px; text-align: center;
  box-shadow: var(--hx-dlg-shadow, var(--shadow-2));
  animation: hxPopIn 0.34s var(--hx-spring) both;
}
@keyframes gm-dlg-pop { from { transform: translateY(10px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
/* 角标：方形徽记，与站点卡片 12px / 钮 6px 的圆角语言一致 */
#view-gomoku .dlg-seal {
  position: absolute; top: -14px; right: -10px;
  width: 38px; height: 38px; border-radius: var(--r-btn);
  background: var(--text); color: var(--surface);
  font-weight: 800; font-size: var(--hx-t17);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1), inset 0 0 0 2px var(--surface);
}
#view-gomoku .dlg-eyebrow { font-size: var(--hx-t11); color: var(--text-3); margin: 0 0 11px; letter-spacing: .16em; font-weight: 700; }
#view-gomoku .dlg-msg { font-size: var(--hx-t16); font-weight: 700; color: var(--text); line-height: 1.6; margin-bottom: 22px; }
#view-gomoku .dlg-acts { display: flex; gap: 9px; }
#view-gomoku .dlg-acts .btn { flex: 1; }

/* ---------- 联机对战 ---------- */
#view-gomoku .online-status { margin-top: 10px; font-size: var(--hx-t12-5); color: var(--text-2); line-height: 1.6; }
#view-gomoku .online-status b { color: var(--text); letter-spacing: 2px; font-size: var(--hx-t14); }
#view-gomoku .relay-note {
  margin-top: 10px; padding: 9px 11px;
  background: var(--icon-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 0 var(--r-btn) var(--r-btn) 0;
  font-size: var(--hx-t12); line-height: 1.6; color: var(--text-2);
}
#view-gomoku .relay-note code {
  font-family: var(--hx-mono);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: var(--hx-t11-5); color: var(--text);
}
/* 失败提示默认收起：只有连不上时才由 JS 展开，避免常驻占位 */
#view-gomoku .relay-note[hidden] { display: none; }

/* ---------- 杀法闯关：题目区 ---------- */
#view-gomoku .gm-teach-panel #chalBox {
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
#view-gomoku .qz-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#view-gomoku .qz-t { font-weight: 700; font-size: var(--hx-t13); color: var(--text); }
#view-gomoku .qz-prog { font-size: var(--hx-t11); color: var(--text-3); }
#view-gomoku .qz-q { margin-top: 8px; font-size: var(--hx-t12-5); line-height: 1.6; color: var(--text-2); }
#view-gomoku .qz-acts { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
#view-gomoku .qz-fb { margin-top: 10px; font-size: var(--hx-t12-5); line-height: 1.6; display: none; }
#view-gomoku .qz-fb.on { display: block; }
#view-gomoku .qz-fb .qz-v { font-weight: 700; }
#view-gomoku .qz-fb.ok .qz-v { color: var(--green-text); }
#view-gomoku .qz-fb.no .qz-v { color: var(--danger-text); }
#view-gomoku .qz-fb .qz-why { color: var(--text-2); display: block; margin-top: 3px; }
/* 教学开关的 chip 变体：整行可点，标签文案较长 */
#view-gomoku .chip-toggle { width: 100%; height: auto; padding: 8px 10px; align-items: flex-start; line-height: 1.5; }
#view-gomoku .chip-toggle input { margin-top: 2px; flex: 0 0 auto; }
/* 推演栏在教学双栏布局里不需要额外上边框 */
#view-gomoku .proj-block { border-top: 0; padding-top: 0; margin-top: 0; }
#view-gomoku .block { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; }
/* 难度分段控件：与模式分段同一套样式，仅字号略小 */
#view-gomoku .seg-level .btn { font-size: var(--hx-t12); }

/* ---------- 响应式 ---------- */
/* 1081–1300 双列区间：右列 minmax(300px,1fr) 的 300 下限会把容器顶爆（1240 实测溢出 14px）——
   降到 240，并让「悔棋 / 重新开始 / 落子音效」一行放不下时换行，而不是顶破页面 */
@media (max-width: 1300px) and (min-width: 1081px) {
  #view-gomoku .gm-layout { grid-template-columns: auto minmax(240px, 1fr); }
  #view-gomoku .gm-ops .board-actions { flex-wrap: wrap; }
  #view-gomoku .gm-ops .board-actions .btn { flex: 1 1 88px; }
}
/* 单列：设置(顶) → 棋盘 → 操作区 → 局面 → 教学 */
@media (max-width: 1080px) {
  #view-gomoku .gm-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "settings" "board" "ops" "status" "teach";
  }
  #view-gomoku .gm-board-col { margin: 0 auto; }
  #view-gomoku { --cell: 34px; }
  /* 教学模式下：局面·实时分析移到教学模块下方 */
  #view-gomoku.mode-teach .gm-layout { grid-template-areas: "settings" "board" "ops" "teach" "status"; }
  /* 操作区在窄屏去卡片化，回到棋盘下方的裸按钮行 */
  #view-gomoku .gm-ops { background: none; border: 0; box-shadow: none; padding: 0; }
}
@media (max-width: 760px) {
  #view-gomoku #teachBody.on { grid-template-columns: minmax(0, 1fr); }
  #view-gomoku #teachBody.on .teach-col + .teach-col { margin-top: 12px; }
  #view-gomoku #dictList { grid-template-columns: minmax(0, 1fr); }
  #view-gomoku .ob .ob-tips,
  #view-gomoku .ob .ob-list { grid-template-columns: minmax(0, 1fr); }
}

/* 手机：触摸目标 ≥44px；棋盘占满屏幕；模块顺序 棋盘 → 教学 → 设置 */
@media (max-width: 620px) {
  #view-gomoku { --axis: 0px; --cell: min(44px, calc((100vw - 12px) / 15)); }
  #view-gomoku .gm-body { padding: 8px 6px calc(24px + env(safe-area-inset-bottom)); }
  #view-gomoku .btn { height: 44px; padding: 0 14px; font-size: var(--hx-t14); }
  #view-gomoku .btn.sm { height: 42px; padding: 0 14px; font-size: var(--hx-t13-5); }
  #view-gomoku .seg .btn { height: 44px; font-size: var(--hx-t14); }
  #view-gomoku .chip { height: 44px; padding: 0 12px; font-size: var(--hx-t13-5); }
  #view-gomoku .dict summary { padding: 9px 0; font-size: var(--hx-t13); }
  #view-gomoku .proj-list li { padding: 9px 8px; font-size: var(--hx-t13); }
  #view-gomoku .proj-list li .n { width: 20px; height: 20px; font-size: var(--hx-t11); }
  #view-gomoku .coord { font-size: var(--hx-t15); }
  #view-gomoku .axis span { font-size: var(--hx-t10-5); }

  /* 棋盘占满屏幕，去掉外框与坐标轴数字 */
  #view-gomoku .board-frame { padding: 0; border: 0; box-shadow: none; background: none; }
  #view-gomoku .board-wrap {
    grid-template-columns: calc(var(--cell) * 15);
    grid-template-rows: calc(var(--cell) * 15);
    gap: 0;
  }
  #view-gomoku .axis, #view-gomoku .corner { display: none; }
  #view-gomoku .gm-board-col { width: min(100%, calc(var(--cell) * 15)); margin: 0 auto; }
  #view-gomoku .gm-ops .board-bar { margin-top: 6px; }

  /* 难度换下拉，五档按钮在窄屏藏起来 */
  #view-gomoku .only-wide { display: none; }
  #view-gomoku .only-narrow { display: block; }
  #view-gomoku .level-select { height: 44px; padding: 0 10px; }

  #view-gomoku .gm-ops .board-actions { gap: 6px; margin-top: 8px; }
  #view-gomoku .gm-panel { padding: 12px; }
  #view-gomoku .gm-panel > h2 { margin-bottom: 9px; }

  /* 6 个数据压成紧凑网格，尽量少占纵向空间 */
  #view-gomoku .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  #view-gomoku .stat { padding: 6px 2px; }
  #view-gomoku .stat .k { font-size: var(--hx-t10); }
  #view-gomoku .stat .v { font-size: var(--hx-t13); }
  #view-gomoku .players { padding: 8px; margin-bottom: 10px; }
  #view-gomoku .eval { margin-bottom: 10px; }
  #view-gomoku .engine-line { margin-top: 8px; }

  #view-gomoku .dict-row { padding: 9px 0; }
  #view-gomoku .guide-text, #view-gomoku .reason, #view-gomoku .rv-row { font-size: var(--hx-t13-5); }

  /* 触摸反馈（手机上没有 hover，用 :active 即时反馈） */
  #view-gomoku .btn:active, #view-gomoku .chip:active { transform: translateY(1px); }
  #view-gomoku .seg .btn:active { background: var(--icon-bg); }

  #view-gomoku .dlg-card { padding: 22px 20px 18px; }
  #view-gomoku .dlg-seal { width: 34px; height: 34px; font-size: var(--hx-t15); top: -12px; right: -8px; }

  /* 移动端顶部精简：模式 tab 不带面板外框/标题；难度与执棋一行并排 */
  #view-gomoku .gm-settings { background: none; border: 0; box-shadow: none; padding: 0; }
  #view-gomoku .gm-settings > h2 { display: none; }
  #view-gomoku #aiOptions { display: flex; gap: 8px; }
  #view-gomoku #aiOptions .field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
  #view-gomoku #aiOptions .field-k { display: none; }
  #view-gomoku #aiOptions .seg { width: 100%; }
  #view-gomoku .gm-ops .board-bar,
  #view-gomoku .engine-line,
  #view-gomoku .gm-status-panel > h2,
  #view-gomoku .field-k { display: none; }
}

/* 触摸设备（用 pointer: coarse 精确命中，不依赖宽度——横屏手机宽度常 >620px） */
@media (pointer: coarse) {
  #view-gomoku .only-wide { display: none; }
  #view-gomoku .only-narrow { display: block; }
  #view-gomoku .btn { height: 42px; padding: 0 14px; font-size: var(--hx-t14); }
  #view-gomoku .btn.sm { height: 40px; padding: 0 14px; font-size: var(--hx-t13-5); }
  #view-gomoku .seg .btn { height: 42px; font-size: var(--hx-t14); }
  #view-gomoku .chip { height: 42px; padding: 0 12px; font-size: var(--hx-t13-5); }
  #view-gomoku .dict summary { padding: 10px 0; font-size: var(--hx-t13); }
  #view-gomoku .proj-list li { padding: 10px 8px; font-size: var(--hx-t13-5); }
  #view-gomoku .chip input { width: 18px; height: 18px; }
}
/* 触屏没有 hover：落子预览改用 :active 即时显示 */
@media (hover: none) {
  #view-gomoku .cell:hover { background-color: transparent; background-image: none; }
  #view-gomoku .cell.star:hover { background-image: radial-gradient(circle at 50% 50%, var(--gm-grid-star) 0 2.6px, transparent 2.6px); }
  #view-gomoku #board:not(.locked) .cell:active {
    background-color: var(--gm-hover-bg);
    background-image: var(--gm-hover-stone-active);
  }
  #view-gomoku #board:not(.locked) .cell.star:active {
    background-image: var(--gm-hover-stone-active),
      radial-gradient(circle at 50% 50%, var(--gm-grid-star) 0 2.6px, transparent 2.6px);
  }
}

/* 横屏手机：棋盘与设置/局面并排，教学在下（横向空间更值钱，棋盘能画更大） */
@media (max-height: 560px) and (orientation: landscape) {
  #view-gomoku { --cell: min(30px, calc((100vh - 58px) / 15)); --axis: 13px; }
  #view-gomoku .gm-body { padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); }
  #view-gomoku .gm-layout {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "board settings" "board status" "board ops" "teach teach";
    row-gap: 10px;
  }
  #view-gomoku .board-frame { padding: 5px; }
  #view-gomoku .gm-ops .board-actions { margin-top: 6px; }
  #view-gomoku .gm-panel { padding: 10px 11px; }
}