/* ============================================================
   style.css - 中国象棋界面样式
   棋盘与棋子采用「配色 × 材质」双维度设计：
     材质(mat-*)  决定纹理与质感（实木/青瓷/宣纸/竹简/鎏金/夜色/美玉/青石/琉璃/太极）
     配色(theme-*) 决定色调（33 种）
   纹理全部由内联 SVG 湍流滤镜程序化生成，无需任何外部图片。
   ============================================================ */

:root {
  --cell: 64px;
  --board-pad: 26px;

  /* ---------- 程序化生成的材质纹理 ----------
     说明：feComponentTransfer 把噪声亮度压缩到 0.70~1.00 的温和区间并强制不透明，
     这样 multiply 混合后只产生细腻的材质明暗，不会把底色压暗。 */
  /* 实木：横向木纹 */
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.34' numOctaves='5' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncG type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncB type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 竹简：竖向竹丝 */
  --tex-bamboo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.36 0.010' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.15' intercept='0.85'/%3E%3CfeFuncG type='linear' slope='0.15' intercept='0.85'/%3E%3CfeFuncB type='linear' slope='0.15' intercept='0.85'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 宣纸：细腻纸纹 */
  --tex-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncG type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncB type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 青瓷：冰裂细纹 */
  --tex-porcelain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='6' seed='23'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncG type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncB type='linear' slope='0.11' intercept='0.89'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 鎏金：拉丝金属 */
  --tex-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.9' numOctaves='3' seed='31'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.20' intercept='0.80'/%3E%3CfeFuncG type='linear' slope='0.20' intercept='0.80'/%3E%3CfeFuncB type='linear' slope='0.20' intercept='0.80'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 夜色：流云星雾 */
  --tex-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='6' seed='41'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.19' intercept='0.81'/%3E%3CfeFuncG type='linear' slope='0.19' intercept='0.81'/%3E%3CfeFuncB type='linear' slope='0.19' intercept='0.81'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 美玉：云絮 */
  --tex-jade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='5' seed='53'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.15' intercept='0.85'/%3E%3CfeFuncG type='linear' slope='0.15' intercept='0.85'/%3E%3CfeFuncB type='linear' slope='0.15' intercept='0.85'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 青石：斑驳石纹 */
  --tex-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='7' seed='61'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.19' intercept='0.81'/%3E%3CfeFuncG type='linear' slope='0.19' intercept='0.81'/%3E%3CfeFuncB type='linear' slope='0.19' intercept='0.81'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 琉璃：通透光带 */
  --tex-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.08' numOctaves='4' seed='71'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncG type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncB type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23f)'/%3E%3C/svg%3E");
  /* 太极：极简素纹 */
  --tex-mono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='83'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.10' intercept='0.90'/%3E%3CfeFuncG type='linear' slope='0.10' intercept='0.90'/%3E%3CfeFuncB type='linear' slope='0.10' intercept='0.90'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23f)'/%3E%3C/svg%3E");

  /* 默认（红木）配色 */
  --board-bg: #d8a865;
  --line: #6b3a1c;
  --line-ink: #3a1d08;   /* 线路墨色：由各材质族覆盖 */
  --red: #a8281e;
  --black: #1f1a16;
  --frame-hi: #b4763a;
  --frame-lo: #6b3d18;
  --bezel: #3a2210;
  --pc-face: #f6e6c4;
  --pc-face2: #e6cc9b;
  --pc-edge: #b98a4e;
  --pc-ring: #7d4a1d;
  --pc-ring2: #cfae7c;
  --pc-ptex: var(--tex-wood);
  --pc-psize: 0.92;

  --ui-bg: #14161b;
  --ui-fg: #e9eaee;
  --ui-accent: #d9a520;
  --panel: #1d2129;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #262c38 0%, #12141a 55%, #0a0b0f 100%);
  color: var(--ui-fg);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  min-height: 100vh;
}

.app { max-width: 1260px; margin: 0 auto; padding: 20px 16px 64px; }

/* ---------------- 顶部 ---------------- */
.header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.title {
  font-size: 28px; font-weight: 800; letter-spacing: 6px;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif;
  background: linear-gradient(92deg, #ffe08a, #e8a33d, #d4553a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.subtitle { font-size: 12px; color: #98a0ad; letter-spacing: 1.2px; margin-top: 2px; }
.header .music-select {
  width: 225px; max-width: 100%; min-height: 40px; padding: 8px 10px;
  color: #f3dfb1; background: #20252f; border: 1px solid #655133;
  border-radius: 8px; font: inherit; font-size: 12px;
}
.header .music-select:focus-visible { outline: 2px solid #d9a520; outline-offset: 2px; }
@media (max-width: 600px) {
  .header .music-select { width: 175px; flex: 1 1 175px; }
  .header > .btn-row { width: 100%; }
}

/* ---------------- 布局 ---------------- */
/* 侧栏改为浮层抽屉，棋盘区独占整行宽度 */
.layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; align-items: start; }

.board-area { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ============================================================
   棋盘：多层质感（木质边框 + 纹理 + 顶光 + 暗角）
   ============================================================ */
.board-wrap {
  position: relative;
  padding: var(--board-pad);
  border-radius: 14px;
  isolation: isolate;
  background-color: var(--board-bg);
  background-image:
    var(--tex),
    radial-gradient(125% 80% at 50% -5%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(160% 140% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.16) 100%);
  background-blend-mode: multiply, screen, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 6px rgba(0,0,0,.28),
    inset 0 0 34px rgba(0,0,0,.12),
    0 26px 50px rgba(0,0,0,.62),
    0 8px 18px rgba(0,0,0,.45);
  transition: background-color .35s ease, box-shadow .35s ease;
  touch-action: manipulation;
}

/* 外层木质镜框（让棋盘有厚度） */
.board-wrap::before {
  content: "";
  position: absolute; inset: -11px;
  border-radius: 22px; z-index: -1;
  background-color: var(--frame-lo);
  background-image:
    var(--tex),
    linear-gradient(160deg, var(--frame-hi) 0%, var(--frame-lo) 46%, var(--bezel) 100%);
  background-blend-mode: multiply, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 5px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.55);
}
/* 内嵌描金细线 */
.board-wrap::after {
  content: "";
  position: absolute; inset: calc(var(--board-pad) - 7px);
  border-radius: 6px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

#board {
  display: grid; position: relative;
  border-radius: 3px;
}

/* ---- SVG 棋盘线层：线画在格子中心处，棋子正好落在交叉点 ----
   线路墨色由材质族决定（--line-ink），保证在任何底色上都清晰可见 */
.board-svg {
  position: absolute;
  left: calc(var(--cell) * 0.5);
  top: calc(var(--cell) * 0.5);
  width: calc(var(--cell) * 8);
  height: calc(var(--cell) * 9);
  overflow: visible; pointer-events: none; z-index: 1;
}
.bd-line       { stroke: var(--line-ink); stroke-width: 0.034; stroke-linecap: round; }
.bd-frame      { stroke: var(--line-ink); stroke-width: 0.062; }
.bd-outer      { stroke: var(--line-ink); stroke-width: 0.026; opacity: .9; }
.bd-river-line { stroke: var(--line-ink); stroke-width: 0.022; opacity: .6; }
.bd-diag       { stroke: var(--line-ink); stroke-width: 0.03; stroke-dasharray: 0.14 0.09; opacity: .92; }
.bd-mark       { stroke: var(--line-ink); stroke-width: 0.032; opacity: .95; stroke-linecap: round; }
.bd-river {
  fill: var(--line-ink);
  font-size: 0.52px;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif;
  font-weight: 700;
  letter-spacing: 0.12px;
  opacity: .95;
  paint-order: stroke;
}

/* ---- 格子 ---- */
.cell {
  position: relative;
  width: var(--cell); height: var(--cell);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}

/* ============================================================
   棋子：双圈 + 立体倒角 + 材质纹理
   ============================================================ */
.piece {
  position: relative; z-index: 3;
  width: calc(var(--cell) * var(--pc-psize));
  height: calc(var(--cell) * var(--pc-psize));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif;
  font-weight: 800;
  font-size: calc(var(--cell) * 0.44);
  line-height: 1;
  letter-spacing: -1px;
  user-select: none;
  /* 棋面：点光高光 + 面光（金属/釉面差异）+ 材质纹理 + 径向基底 */
  background-color: var(--pc-face);
  background-image:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,var(--pc-gloss, .8)), rgba(255,255,255,0) 46%),
    linear-gradient(var(--pc-sheen-angle, 180deg), rgba(255,255,255,var(--pc-sheen, .06)) 0%, rgba(255,255,255,0) 46%),
    var(--pc-ptex),
    radial-gradient(circle at 50% 50%, var(--pc-face) 0%, var(--pc-face2) 58%, var(--pc-edge) 100%);
  background-blend-mode: screen, screen, multiply, normal;
  /* 双圈 + 倒角 + 投影 */
  box-shadow:
    0 1px 1px rgba(0,0,0,.30),
    0 3px 5px rgba(0,0,0,.34),
    0 7px 12px rgba(0,0,0,.30),
    inset 0 0 0 2px var(--pc-ring),
    inset 0 0 0 3.5px var(--pc-face2),
    inset 0 0 0 4.5px var(--pc-ring2),
    inset 0 -5px 9px rgba(0,0,0,.22),
    inset 0 4px 7px rgba(255,255,255,.45);
  transition: transform .13s ease, box-shadow .13s ease;
}
.piece.red   { color: var(--red); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.piece.black { color: var(--black); text-shadow: 0 1px 0 rgba(255,255,255,.5); }

.cell:hover .piece { transform: translateY(-2px) scale(1.035); }

/* 选中：金色光晕 + 抬升 */
.cell.selected .piece {
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 0 0 3px var(--ui-accent),
    0 0 16px 3px rgba(217,165,32,.55),
    0 10px 18px rgba(0,0,0,.5),
    inset 0 0 0 2px var(--pc-ring),
    inset 0 0 0 3.5px var(--pc-face2),
    inset 0 0 0 4.5px var(--pc-ring2),
    inset 0 -5px 9px rgba(0,0,0,.22),
    inset 0 4px 7px rgba(255,255,255,.45);
}

/* ---- 走法提示 ---- */
.move-dot {
  position: absolute; z-index: 2;
  width: 24%; height: 24%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #7ee6a8, #1f9e57 70%, #12693a);
  box-shadow: 0 0 10px rgba(60,220,130,.85), inset 0 1px 2px rgba(255,255,255,.6);
  pointer-events: none;
  animation: dotIn .18s ease-out;
}
@keyframes dotIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.move-dot.capture {
  width: 92%; height: 92%;
  background: transparent;
  border: 3px solid rgba(226,64,52,.92);
  box-shadow: 0 0 14px rgba(255,70,50,.75), inset 0 0 12px rgba(255,70,50,.35);
}

.cell.last-from { background: radial-gradient(circle, rgba(90,150,255,.30), transparent 72%); }
.cell.last-to   { background: radial-gradient(circle, rgba(90,150,255,.42), transparent 72%); }

/* 上一步落点：环形标记画在棋子之上（格子底色会被棋子挡住，故用环） */
.cell.last-to::after {
  content: ""; position: absolute; inset: 3%;
  border-radius: 50%; z-index: 4; pointer-events: none;
  border: 2px solid rgba(96,158,255,.95);
  box-shadow: 0 0 10px 2px rgba(80,140,255,.6);
}

/* 被将军的将/帅：脉动红环（同样画在棋子之上，确保可见） */
.cell.in-check::after {
  content: ""; position: absolute; inset: 1%;
  border-radius: 50%; z-index: 4; pointer-events: none;
  border: 3px solid rgba(255,64,50,.95);
  box-shadow: 0 0 16px 5px rgba(255,56,44,.75), inset 0 0 12px rgba(255,56,44,.5);
  animation: checkPulse .82s ease-in-out infinite;
}
@keyframes checkPulse { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }

/* ============================================================
   侧栏
   ============================================================ */
/* ---------------- 设置抽屉（默认隐藏，点「⚙ 设置」滑入）---------------- */
.side {
  position: fixed; top: 0; right: 0; z-index: 95;
  height: 100vh; height: 100dvh;
  width: 360px; max-width: 90vw;
  box-sizing: border-box;
  padding: 14px 14px 30px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #1b1f27, #131519);
  border-left: 1px solid #2f3644;
  box-shadow: -18px 0 50px rgba(0,0,0,.55);
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.side.open { transform: translateX(0); }
.side-bar {
  position: sticky; top: -14px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 2px 12px; margin: -6px -2px 0;
  background: linear-gradient(180deg, #1b1f27 72%, rgba(27,31,39,0));
}
.side-title { font-size: 15px; font-weight: 800; letter-spacing: 3px; color: var(--ui-accent); }
.side-close { padding: 6px 13px; font-size: 13px; }
.side-backdrop {
  position: fixed; inset: 0; z-index: 94;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.side-backdrop.open { opacity: 1; pointer-events: auto; }

.card {
  background: linear-gradient(180deg, #232833, #191c23);
  border: 1px solid #2f3644;
  border-radius: 13px;
  padding: 15px 15px 17px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.card h3 {
  margin: 0 0 11px; font-size: 12.5px; letter-spacing: 2.5px;
  color: var(--ui-accent); font-weight: 700;
}

.field { margin-bottom: 11px; }
.field label { display: block; font-size: 12px; color: #98a0ad; margin-bottom: 5px; line-height: 1.5; }

select {
  width: 100%; padding: 10px 11px; border-radius: 9px;
  background: #0f1218; color: var(--ui-fg);
  border: 1px solid #39414f; font-size: 13px; font-family: inherit; cursor: pointer;
}
select:focus { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
option:disabled { color: #6b7280; }

.desc-line { font-size: 12.5px; color: #b9c0cc; line-height: 1.65; }
.prog-line { font-size: 12.5px; color: var(--ui-accent); margin-top: 6px; font-weight: 600; }

.progress-outer {
  height: 7px; border-radius: 5px; background: #0f1218;
  overflow: hidden; margin-top: 10px; border: 1px solid #2f3644;
}
.progress-inner {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e07b1f, #ffd166);
  box-shadow: 0 0 10px rgba(255,209,102,.6);
  transition: width .4s ease;
}

.status { font-size: 13px; color: #d6dae2; min-height: 20px; line-height: 1.55; }

.turn-label {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 20px; margin-bottom: 9px;
}
.turn-label.red    { background: #4a1414; color: #ff9a90; border: 1px solid #7f2a2a; }
.turn-label.black  { background: #14181f; color: #b9c0cc; border: 1px solid #39414f; }
.turn-label.win    { background: #123a1e; color: #7ee2a8; border: 1px solid #1f6b39; }
.turn-label.lose   { background: #3a1212; color: #ff8a80; border: 1px solid #7f2a2a; }
.turn-label.draw   { background: #2c2c14; color: #ffe08a; border: 1px solid #6b6b1f; }

.thinking { display: none; font-size: 12px; color: var(--ui-accent); margin-left: 6px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ---- 按钮 ---- */
.btn {
  appearance: none; border: 1px solid #39414f; background: #1d222b;
  color: var(--ui-fg); border-radius: 10px; padding: 10px 13px;
  font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 600;
  transition: all .15s ease;
}
.btn:hover { background: #262c38; border-color: #4a5468; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(180deg, #e0ac22, #a87c0a);
  border-color: #d9a520; color: #1a1200;
  box-shadow: 0 3px 10px rgba(217,165,32,.35);
}
.btn.primary:hover { background: linear-gradient(180deg, #f0bd33, #c09010); }
.btn.off { opacity: .55; }

.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }

.sum-row {
  display: flex; justify-content: space-between; font-size: 12.5px;
  padding: 6px 0; border-bottom: 1px dashed #2a3140; color: #98a0ad;
}
.sum-row:last-child { border-bottom: none; }
.sum-row b { color: var(--ui-fg); }

/* ---- 弹窗 ---- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px; backdrop-filter: blur(4px);
}
.modal.show { display: flex; }
.modal-box {
  background: linear-gradient(180deg, #262b36, #181b22);
  border: 1px solid #3a4352; border-radius: 15px; padding: 23px;
  max-width: 450px; width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
  animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-box h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: 1px; }
.modal-box p { font-size: 13.5px; line-height: 1.75; color: #c4cad6; }
.modal-box b { color: var(--ui-accent); }
.modal-actions { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }

.code-box {
  width: 100%; height: 112px; margin-top: 10px;
  background: #0c0f14; color: #8ee6a0;
  border: 1px solid #39414f; border-radius: 9px; padding: 10px;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  resize: vertical; word-break: break-all;
}
.import-msg { margin-top: 10px; font-size: 13px; }
.import-msg .ok { color: #7ee2a8; }
.import-msg .err { color: #ff8a80; }

/* ============================================================
   材质族（mat-*）：决定棋盘纹理 + 棋子材质光泽 + 线路墨色
   每种材质的棋子有独立的光泽度（--pc-gloss 点光 / --pc-sheen 面光），
   使实木呈哑光、青瓷琉璃呈釉面高光、鎏金呈金属拉丝反光。
   ============================================================ */

/* --- 实木：哑光暖润 --- */
.mat-wood {
  --line-ink: #3a1d08;
  --tex: var(--tex-wood);
  --pc-ptex: var(--tex-wood);
  --pc-gloss: .72; --pc-sheen: .05;
  --pc-face: #f7e7c6; --pc-face2: #e8cd9c; --pc-edge: #bb8b4f;
  --pc-ring: #7b4a1e; --pc-ring2: #d2b183;
}
/* --- 青瓷：釉面强光 --- */
.mat-porcelain {
  --line-ink: #1c4a66;
  --tex: var(--tex-porcelain);
  --pc-ptex: var(--tex-porcelain);
  --pc-gloss: .98; --pc-sheen: .28;
  --pc-face: #ffffff; --pc-face2: #eaf3fa; --pc-edge: #a9c8dd;
  --pc-ring: #3f6f92; --pc-ring2: #bcd6e8;
  --pc-psize: 0.93;
}
/* --- 宣纸水墨：柔和哑光暖白 --- */
.mat-ink {
  --line-ink: #221d16;
  --tex: var(--tex-ink);
  --pc-ptex: var(--tex-ink);
  --pc-gloss: .45; --pc-sheen: .04;
  --pc-face: #fffdf6; --pc-face2: #f4ecdc; --pc-edge: #d6c9ad;
  --pc-ring: #3a352b; --pc-ring2: #c2b79f;
}
/* --- 竹简：半哑光黄绿 --- */
.mat-bamboo {
  --line-ink: #2a4218;
  --tex: var(--tex-bamboo);
  --pc-ptex: var(--tex-bamboo);
  --pc-gloss: .62; --pc-sheen: .10;
  --pc-face: #faf8e8; --pc-face2: #eae4c2; --pc-edge: #bab27a;
  --pc-ring: #5f6b31; --pc-ring2: #ccc79a;
}
/* --- 鎏金：金属拉丝反光 --- */
.mat-metal {
  --line-ink: #472f04;
  --tex: var(--tex-metal);
  --pc-ptex: var(--tex-metal);
  --pc-gloss: 1; --pc-sheen: .5; --pc-sheen-angle: 118deg;
  --pc-face: #fff2c4; --pc-face2: #e8c357; --pc-edge: #9a7212;
  --pc-ring: #6d4f0a; --pc-ring2: #f5e2a0;
}
/* --- 夜色：黑曜石深色高光 --- */
.mat-night {
  --line-ink: #a9bde8;
  --tex: var(--tex-night);
  --pc-ptex: var(--tex-night);
  --pc-gloss: .55; --pc-sheen: .22;
  --pc-face: #38446a; --pc-face2: #1d2540; --pc-edge: #5a6c9e;
  --pc-ring: #9fb2e0; --pc-ring2: #4a5885;
  --pc-psize: 0.92;
}
/* --- 美玉：通透玉质 --- */
.mat-jade {
  --line-ink: #14432d;
  --tex: var(--tex-jade);
  --pc-ptex: var(--tex-jade);
  --pc-gloss: .9; --pc-sheen: .26;
  --pc-face: #f4fdf7; --pc-face2: #d6f0e0; --pc-edge: #94c7ad;
  --pc-ring: #3f7a5c; --pc-ring2: #c3e5d1;
}
/* --- 青石：粗糙哑光 --- */
.mat-stone {
  --line-ink: #2a2f34;
  --tex: var(--tex-stone);
  --pc-ptex: var(--tex-stone);
  --pc-gloss: .42; --pc-sheen: .05;
  --pc-face: #f3f4f5; --pc-face2: #d8dbde; --pc-edge: #a3a8ad;
  --pc-ring: #4f565c; --pc-ring2: #c3c8cc;
}
/* --- 琉璃：强光泽通透 --- */
.mat-glass {
  --line-ink: #16465a;
  --tex: var(--tex-glass);
  --pc-ptex: var(--tex-glass);
  --pc-gloss: 1; --pc-sheen: .42;
  --pc-face: #ffffff; --pc-face2: #e0f5fb; --pc-edge: #9ed4e4;
  --pc-ring: #2f7f96; --pc-ring2: #c4e8f2;
  --pc-psize: 0.93;
}
/* --- 太极：素极 --- */
.mat-mono {
  --line-ink: #1a1a1a;
  --tex: var(--tex-mono);
  --pc-ptex: var(--tex-mono);
  --pc-gloss: .68; --pc-sheen: .12;
  --pc-face: #ffffff; --pc-face2: #ededed; --pc-edge: #c4c4c4;
  --pc-ring: #1a1a1a; --pc-ring2: #b0b0b0;
}

/* 深色材质下棋子文字需要提亮 */
.mat-night .piece.red   { color: #ff9b86; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.mat-night .piece.black { color: #cfdcff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.mat-metal .piece.red   { color: #8f2418; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.mat-metal .piece.black { color: #2a1c08; text-shadow: 0 1px 0 rgba(255,255,255,.55); }

/* ============================================================
   33 种配色（theme-*）：只负责色调
   ============================================================ */

/* --- 初始 3 种 --- */
.theme-classic   { --board-bg:#d8a865; --line:#6b3a1c; --red:#a8281e; --black:#1f1a16;
                   --frame-hi:#b4763a; --frame-lo:#6b3d18; --bezel:#3a2210; }
.theme-porcelain { --board-bg:#e8f2fa; --line:#2f5f88; --red:#b3261e; --black:#153350;
                   --frame-hi:#5f93bb; --frame-lo:#2f5f88; --bezel:#1c3c58; }
.theme-ink       { --board-bg:#fbf7ea; --line:#2b2b2b; --red:#1a1a1a; --black:#1a1a1a;
                   --frame-hi:#8a8272; --frame-lo:#3a382f; --bezel:#1e1d18; }
.theme-ink .piece.red   { color:#141414; }
.theme-ink .piece.black { color:#4a4a4a; }

/* --- 初级解锁 --- */
.theme-bamboo      { --board-bg:#e4efd6; --line:#3d6b2c; --red:#a33128; --black:#22401a;
                     --frame-hi:#71a355; --frame-lo:#3d6b2c; --bezel:#22401a; }
.theme-rosegold    { --board-bg:#e8c39a; --line:#7d4020; --red:#bb3427; --black:#3a2012;
                     --frame-hi:#c08354; --frame-lo:#7d4020; --bezel:#43220f; }
.theme-sunrise     { --board-bg:#fbd9a4; --line:#b0521a; --red:#d33f12; --black:#46220e;
                     --frame-hi:#e08a45; --frame-lo:#a8481a; --bezel:#542711; }
.theme-night-maple { --board-bg:#1a2436; --line:#7c96c4; --red:#ff7a4d; --black:#cfe0ff;
                     --frame-hi:#3d5070; --frame-lo:#1a2436; --bezel:#0d1420; }
.theme-springwood  { --board-bg:#e8d6a8; --line:#7a5c2e; --red:#2f7d33; --black:#463818;
                     --frame-hi:#a98a4e; --frame-lo:#6f5226; --bezel:#3a2c12; }

/* --- 中级解锁 --- */
.theme-peony      { --board-bg:#fae0e9; --line:#a6335e; --red:#c2185b; --black:#48102e;
                    --frame-hi:#cf7d9b; --frame-lo:#9c2d57; --bezel:#541534; }
.theme-glass      { --board-bg:#dff3f8; --line:#2e7f92; --red:#c62828; --black:#123f4a;
                    --frame-hi:#66b3c4; --frame-lo:#2b7285; --bezel:#154852; }
.theme-bambooslip { --board-bg:#eee0c0; --line:#5b4a2a; --red:#8d3b1e; --black:#33301f;
                    --frame-hi:#a08a5a; --frame-lo:#5b4a2a; --bezel:#31281a; }
.theme-goldjade   { --board-bg:#e6f0d4; --line:#7a6a1f; --red:#b8860b; --black:#2d3a10;
                    --frame-hi:#c4b34e; --frame-lo:#8a7a2a; --bezel:#4a4212; }
.theme-greenbamboo{ --board-bg:#daefd2; --line:#2c6632; --red:#a8281e; --black:#1d3a20;
                    --frame-hi:#5f9c63; --frame-lo:#2c6632; --bezel:#1a3a1e; }

/* --- 高级解锁 --- */
.theme-redchamber { --board-bg:#f4d8d2; --line:#8a2b2b; --red:#ad1f1f; --black:#38100f;
                    --frame-hi:#c06a5a; --frame-lo:#872a2a; --bezel:#4a1413; }
.theme-landscape  { --board-bg:#e0ece2; --line:#35604a; --red:#a33131; --black:#1c3827;
                    --frame-hi:#6d9c82; --frame-lo:#35604a; --bezel:#1c3827; }
.theme-sandalwood { --board-bg:#e6d2b4; --line:#7b5230; --red:#a8452c; --black:#382515;
                    --frame-hi:#b08a5c; --frame-lo:#6f4a2a; --bezel:#3d2716; }
.theme-starry     { --board-bg:#141a2c; --line:#8494d8; --red:#ff7395; --black:#c8d4ff;
                    --frame-hi:#3a4674; --frame-lo:#141a2c; --bezel:#0a0e1a; }
.theme-misty      { --board-bg:#e6eaef; --line:#6b7c8f; --red:#ad5048; --black:#2b3846;
                    --frame-hi:#9aacbb; --frame-lo:#5f7180; --bezel:#333f4c; }

/* --- 大师级解锁 --- */
.theme-dragon  { --board-bg:#efdcb8; --line:#9c2c22; --red:#c92a2a; --black:#28170f;
                 --frame-hi:#bc5a3c; --frame-lo:#8a2a20; --bezel:#3d1a12; }
.theme-phoenix { --board-bg:#f9e0c6; --line:#b3541e; --red:#dd4416; --black:#46220e;
                 --frame-hi:#d8844a; --frame-lo:#a34a18; --bezel:#4a2410; }
.theme-gilded  { --board-bg:#f2e3bc; --line:#a8862a; --red:#a87a0a; --black:#463714;
                 --frame-hi:#d4bb60; --frame-lo:#9a7c22; --bezel:#4a3c12; }
.theme-orchid  { --board-bg:#e8e3f4; --line:#5f4b8b; --red:#8a1fa6; --black:#2c2042;
                 --frame-hi:#8f7cb5; --frame-lo:#5a4685; --bezel:#2e2244; }
.theme-stone   { --board-bg:#dfe2e5; --line:#4f565c; --red:#a33131; --black:#22282d;
                 --frame-hi:#8a9299; --frame-lo:#4a5157; --bezel:#272c31; }

/* --- 国家级解锁 --- */
.theme-tang    { --board-bg:#f0d9b4; --line:#8f3a1e; --red:#bb3427; --black:#381e0e;
                 --frame-hi:#b2703f; --frame-lo:#83351b; --bezel:#3d1d0e; }
.theme-song    { --board-bg:#ecefe2; --line:#4f6a5a; --red:#9c4838; --black:#24312a;
                 --frame-hi:#82a08d; --frame-lo:#4c6656; --bezel:#25332c; }
.theme-yuan    { --board-bg:#ecdfc6; --line:#6b5a3a; --red:#94501e; --black:#302818;
                 --frame-hi:#a08a5c; --frame-lo:#655434; --bezel:#322a1a; }
.theme-ming    { --board-bg:#e4d9c8; --line:#4a4038; --red:#96281f; --black:#221d18;
                 --frame-hi:#8a7c6c; --frame-lo:#463c34; --bezel:#261f1a; }
.theme-jiangnan{ --board-bg:#dbe8ef; --line:#3d6b7a; --red:#a84f47; --black:#1d3842;
                 --frame-hi:#75a0ae; --frame-lo:#3a6573; --bezel:#1d3842; }

/* --- 骨灰级解锁 --- */
.theme-purple  { --board-bg:#e8daf3; --line:#5b2f8a; --red:#741aa0; --black:#28103c;
                 --frame-hi:#8f6bb0; --frame-lo:#552b80; --bezel:#2c1240; }
.theme-moon    { --board-bg:#191e2c; --line:#93a4cc; --red:#ffab91; --black:#d8e2ff;
                 --frame-hi:#3f4a68; --frame-lo:#191e2c; --bezel:#0c1018; }
.theme-firegold{ --board-bg:#f2d7b4; --line:#b23a15; --red:#d33f12; --black:#381a0a;
                 --frame-hi:#d2773a; --frame-lo:#a8360f; --bezel:#3d1c0c; }
.theme-autumn  { --board-bg:#efdcbc; --line:#96631f; --red:#bb5020; --black:#382810;
                 --frame-hi:#c08f45; --frame-lo:#8a5c1c; --bezel:#3d2a10; }
.theme-taiji   { --board-bg:#e6e6e6; --line:#2e2e2e; --red:#0a0a0a; --black:#5f5f5f;
                 --frame-hi:#a8a8a8; --frame-lo:#4a4a4a; --bezel:#202020; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 760px) {
  :root { --cell: 40px; --board-pad: 10px; }
  .title { font-size: 18px; letter-spacing: 3px; }
  .subtitle { display: none; }
  .app { padding: 8px 6px 16px; }
  .header { margin-bottom: 8px; }
  .board-wrap::before { inset: -7px; }
}
@media (max-width: 480px) {
  :root { --cell: 36px; --board-pad: 9px; }
  .board-wrap::before { inset: -6px; }
}
@media (hover: none) {
  .cell:hover .piece { transform: none; }
}