/* 纸面印刷风：纸色底 + 墨色文字/控件，无玻璃拟态 */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 子集化中文字体（GenWanMin2TC-R 提取项目用字，避免整包 22MB OTF 加载） */
@font-face {
  font-family: "GenWanMin2TC-R";
  src: url("../fonts/GenWanMin2TC-R-subset.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "GenWanMin2TC-R", "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  background: #f0f0ee;           /* 纸色底（与画布纸面一致） */
  color: #241f18;                /* 墨色 */
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#canvas-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* 最上层纸纹噪波覆盖层：全视口统一颗粒（纯色物体 + 颗粒层 = 纸面质感），不拦截指针 */
#paper-noise {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-repeat: repeat;
}

/* ── 左侧竖向工具 bar（无边框） ── */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 148px;                 /* 固定宽度：消息不撑宽 bar */
  background: rgba(240, 240, 238, 0.6);  /* 纸面，无边框 */
}

/* 折叠态：只留最左上角 X 按钮与下方 info 圆钮，棋盘全幅展示 */
#hud.collapsed { width: auto; }
#hud.collapsed #hud-body { display: none; }

/* bar 头部：收起 ✕ 与游戏名同行，说明 ⓘ 在下（均不随折叠隐藏） */
#hud-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px;
}
#hud-head-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
#hud-head button {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: none;
  flex: none;                /* 按钮不随标题挤压 */
}
#hud-head button:hover { background: #241f18; color: #f0f0ee; }

/* 游戏名：绝对定位固定在 ✕ 按钮右侧（bar 外），不随展开/收起变动、始终单行。
   #hud 为 position:absolute，故以 bar 左上角为锚；✕ 在 4px 内边距 + 30px 宽，
   标题起点 left≈40px；top 对齐 ✕ 垂直中心（4 + 30/2 − 半行高） */
#hud-title {
  position: absolute;
  top: 11px;
  left: 40px;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;         /* 始终一行，不再随 bar 宽度换行 */
  line-height: 1.2;
}
/* 注意：不再有 #hud.collapsed #hud-title 隐藏规则——标题固定在 bar 外常驻 */

/* 说明按钮：圆圈 i */
#btn-info {
  border-radius: 50%;
  border: 1.5px solid #241f18 !important;
  font-style: italic;
}

/* 展开态：i 按钮由 JS 移到 bar 最下方的独立槽位（左对齐，与按钮列左缘齐平） */
#hud-info-slot {
  display: flex;
  justify-content: flex-start; /* 左对齐（用户需求：不要居中） */
  align-items: center;         /* 垂直居中 */
  width: 100%;                 /* 占满 148px bar 宽 */
  padding: 2px 0 10px 10px;    /* 左边距与 hud-body 按钮内边距一致，视觉对齐 */
}
#hud-info-slot button {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: 1.5px solid #241f18;
  border-radius: 50%;
  font-style: italic;
}
#hud-info-slot button:hover { background: #241f18; color: #f0f0ee; }
/* 收起态：槽位无内容时占位隐藏（i 已移回 hud-head） */
#hud.collapsed #hud-info-slot { display: none; }

/* bar 主体：竖向按钮组 + 底部信息 */
#hud-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  width: 100%;
  overflow: hidden;             /* 超长消息在此截断换行，不撑宽 */
}

#hud-body > button {
  font-size: 14px;
  padding: 7px 10px;
  text-align: center;
  width: 100%;
}

/* 底部信息区 */
#hud-info {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #241f18;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  word-break: break-all;        /* 长消息在固定宽度内折行 */
}
/* 强调数值：加粗墨字 + 下划线，模拟印刷强调 */
#hud-info b {
  font-weight: 700;
  border-bottom: 1.5px solid #241f18;
  padding: 0 2px;
}
#status-message {
  font-weight: 600;
}
/* 模式行换行：人机（你执黑/白）的括号前换行（\n 由 JS 写入） */
#status-mode {
  white-space: pre-line;
}

/* ── 首屏加载提示（three.js CDN 首次下载较慢，初始化完成即隐藏） ── */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;             /* 高于 hud(10) 与 win-overlay(500)，低于 info-modal(3000) 与噪波层(9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 240, 238, 0.9);
}
#loading-overlay span {
  font-size: 28px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;       /* 抵消字间距实现视觉居中 */
  color: #241f18;
  border-bottom: 2px dashed #241f18;
  padding-bottom: 6px;
}

/* ── 游戏说明全屏弹层（展示 info.txt，印刷风） ── */
#info-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;               /* 高于 win-overlay(500) 与 hud，低于噪波层(9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 240, 238, 0.85);
}
#info-modal[hidden] { display: none; }

#info-panel {
  position: relative;
  max-width: min(760px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: #f7f7f5;         /* 纸白面板 */
  border: 2px solid #241f18;
  box-shadow: 6px 6px 0 rgba(36, 31, 24, 0.25);
  padding: 28px 34px 24px;
}
#btn-info-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #241f18;
}
#btn-info-close:hover { background: #241f18; color: #f0f0ee; }

/* info.txt 正文：保留换行，大字号阅读 */
#info-text {
  font-family: inherit;
  font-size: 22px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  white-space: pre-wrap;       /* 兼容窄屏自动换行 */
  word-break: break-word;
  color: #241f18;
}

/* 按钮/控件通用（纸白底 + 墨描边） */
button {
  font-family: inherit;
  background: #fcfcfa;
  color: #241f18;
  border: 1.5px solid #241f18;
  cursor: pointer;
  transition: none;
}
/* 悬停反色：如印章按下，墨色填满 */
button:hover { background: #241f18; color: #f0f0ee; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: #fcfcfa; color: #241f18; }

/* ── 中央大字胜负提示（印刷风大字） ── */
#win-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;          /* 不挡棋盘操作，点新对局/悔棋即可消除 */
  background: rgba(240, 240, 238, 0.25);
}
#win-overlay[hidden] { display: none; }

#win-text {
  font-size: 84px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;            /* 抵消字间距实现视觉居中 */
  color: #241f18;
  padding: 10px 40px;
  border: 3px double #241f18;    /* 双线框：书面印章式的庄重感 */
  background: rgba(240, 240, 238, 0.92);
  box-shadow: 4px 4px 0 rgba(36, 31, 24, 0.25);
}