/* 基础布局与美术 */
:root {
  --bg: #faf7f1;
  --panel: #ffffff;
  --ink: #2b2b2b;
  --ink-muted: #666;
  --accent: #d33b2b;
  --accent-dark: #b32f22;
  --line: #4a2c17;
  --river: #e5f2ff;
  --red: #d33b2b;
  --black: #2b2b2b;
}
/* 禁用点击时的默认高亮效果 */
* {
  -webkit-tap-highlight-color: transparent; /* Safari 和 Chrome */
  outline: none; /* 禁用蓝色轮廓 */
}

/* global hand cursor */
html, body, .app, #board-wrap, #board, .control-panel { cursor: pointer; }
/* 常见可点击元素保持小手（兼容性更好） */
button, select, a { cursor: pointer; }
/* 如果你想在走子记录里方便选中文本，可把列表区域恢复为默认箭头 */
.movelist { cursor: auto; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.app-header { display:flex; align-items:center; gap:12px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); background: var(--panel); position: sticky; top:0; z-index:10; }
.app-header h1 { font-size: 18px; margin: 0; }
.app-header .spacer { flex: 1; }
.app-header .link { color: var(--accent); text-decoration: none; }
.app-header .link:hover { text-decoration: underline; }

.app { display:grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px; }
.board-panel { display:flex; flex-direction:column; gap:12px; }
#board-wrap { width: 100%; max-width: 720px; aspect-ratio: 9 / 10; margin: 0 auto; background: var(--panel); border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); padding: 8px; }
#board { width: 100%; height: 100%; display: block; }

.statusbar { display:flex; align-items:center; gap:12px; padding: 8px 12px; background: var(--panel); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.badge { background: var(--accent); color:#fff; padding: 2px 8px; border-radius: 999px; font-size: 12px; }

.control-panel { display:flex; flex-direction:column; gap: 16px; }
.card { background: var(--panel); border-radius: 16px; padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.card-title { font-weight: 700; margin-bottom: 8px; }
.row { display:flex; gap: 12px; flex-wrap: wrap; align-items:center; }
.row.buttons button { flex: 1; }

button, select { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); background: #fff; color: var(--ink); cursor: pointer; }
button:hover { background: #f7f7f7; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }

.movelist { max-height: 40vh; overflow:auto; padding-left: 20px; margin: 0; }
.movelist li { padding: 4px 0; color: var(--ink-muted); }

/* SVG 背景填充：默认 woodPattern，检测到贴图后切换为 woodTex */
#board .bg { fill: url(#woodPattern); }

/* 棋盘与棋子 */
.grid line { stroke: var(--line); stroke-width: 2; }
.river-rect { fill: var(--river); } /* 若加载到水纹贴图，会在 body.has-water 时改写 */
.river-text { font-size: 48px; text-anchor: middle; fill: rgba(0,0,0,0.2); font-weight: 700; }
.palaces line { stroke: var(--line); stroke-width: 2; }

/* —— 圆柱棋子分层 —— */

/* 投影（落在棋盘上） */
.pieces .piece .shadow ellipse {
  fill: rgba(0,0,0,0.22);
}

/* 侧壁（rim）：决定“厚度+立体感”的关键 */
.pieces .piece.red .rim circle   { fill: url(#rimRed); }
.pieces .piece.black .rim circle { fill: url(#rimBlack); }

/* 面（face）：默认用 face* 渐变；若检测到大理石贴图则被下面的 has-marble 规则覆盖为贴图 */
.pieces .piece.red .face circle   { fill: url(#faceRed); }
.pieces .piece.black .face circle { fill: url(#faceBlack); }

/* 上唇（lip）：细金属/抛光边，提升真实感 */
.pieces .piece .lip circle {
  fill: none;
  stroke: rgba(255,255,255,0.75);
  stroke-width: 1.2;
}

/* 高光（shine）：顶部一道柔亮 */
.pieces .piece .shine ellipse {
  fill: rgba(255,255,255,0.22);
}

/* 文本仍然使用你设置的白色书法 + 描边（可按需微调 y 偏移在 game.js 里） */
.pieces .piece text {
  font-size: 46px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.6);
  stroke-width: 2px;
  fill: #ffffff;
  font-family: 'LuoGuoChengMaoBiXiaoXingJianTi', cursive;
}

/* 有大理石贴图时，覆盖面（face）为纹理；rim 仍保持渐变，产生“侧壁金属/漆面 + 顶部大理石”的观感 */
body.has-marble .pieces .piece.red .face circle   { fill: url(#marbleRedTex); }
body.has-marble .pieces .piece.black .face circle { fill: url(#marbleBlackTex); }

/* 给整颗棋子加柔和滤镜（防止太“硬”） */
.pieces .piece { filter: url(#pieceShadow); }

.pieces .piece circle { stroke: rgba(0,0,0,0.75); stroke-width: 3; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.pieces .piece text {
  font-size: 46px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.6);   /* 黑色描边，保证可读性 */
  stroke-width: 2px;
  fill: #ffffff;             /* 白色文字 */
  font-family: 'LuoGuoChengMaoBiXiaoXingJianTi', cursive;
}
.pieces .piece.red circle { fill: url(#redGloss); }
.pieces .piece.black circle { fill: url(#blackGloss); }
.pieces .piece.selected circle { stroke: var(--accent); stroke-width: 5; }

.hi-move { fill: none; stroke: #2b8a3e; stroke-dasharray: 6 6; stroke-width: 4; }
.hi-target { fill: rgba(211, 59, 43, .12); }
.hi-check { fill: none; stroke: var(--accent); stroke-width: 5; }

/* 坐标标注（放在棋盘外部边缘） */
.coords { pointer-events: none; }
.coords text { font-size: 20px; fill: var(--ink); text-anchor: middle; user-select: none; font-weight: 700; }
.coords .rownum { text-anchor: end; }
.coords .rownum.right { text-anchor: start; }

/* 纹理开关（有贴图时覆盖默认填充） */
body.has-wood #board .bg { fill: url(#woodTex); }
body.has-water .river-rect { fill: url(#waterTex); }
body.has-marble .pieces .piece.red circle { fill: url(#marbleRedTex); }
body.has-marble .pieces .piece.black circle { fill: url(#marbleBlackTex); }

/* 响应式 */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  #board-wrap { max-width: 100%; }
}