:root { /* 定义全局 CSS 变量，方便统一管理颜色、阴影等主题样式。 */
  color-scheme: light; /* 告诉浏览器页面采用浅色主题，影响表单控件等默认外观。 */
  --ink: #16201c; /* 定义主要文字颜色变量。 */
  --muted: #66736e; /* 定义次要说明文字颜色变量。 */
  --panel: #fbfaf5; /* 定义游戏面板背景色变量。 */
  --accent: #146c5f; /* 定义主要按钮和强调元素的基础颜色。 */
  --accent-strong: #0c4f46; /* 定义主要按钮悬停时的更深颜色。 */
  --danger: #c92a2a; /* 定义危险操作按钮的基础颜色，这里用于重新开局按钮。 */
  --danger-strong: #a61e1e; /* 定义危险按钮悬停时的更深颜色。 */
  --line: #d6d0c1; /* 定义边框线条颜色变量。 */
  --board: #d5a456; /* 定义棋盘主体背景色变量。 */
  --board-dark: #7f4f1f; /* 定义棋盘深色辅助色变量，当前主要作为备用主题色。 */
  --shadow: 0 20px 55px rgba(33, 32, 27, 0.18); /* 定义面板阴影，让界面有层次感。 */
} /* 结束全局变量声明。 */

* { /* 选中页面中的所有元素，统一基础盒模型。 */
  box-sizing: border-box; /* 让宽高包含 padding 和 border，便于布局计算。 */
} /* 结束全局盒模型设置。 */

[hidden] { /* 让带 hidden 属性的元素强制隐藏，避免被其他 display 样式覆盖。 */
  display: none !important; /* 覆盖任何显式设置的 display 值，保证切换模式时正确隐藏。 */
} /* 结束 hidden 元素强制隐藏规则。 */

body { /* 设置整个页面主体的基础样式。 */
  margin: 0; /* 清除浏览器默认外边距，让页面贴合视口。 */
  min-height: 100vh; /* 让页面高度至少等于整个浏览器视口高度。 */
  color: var(--ink); /* 使用全局主文字颜色。 */
  font-family: /* 设置页面默认字体栈，优先使用中文友好的字体。 */
    "Microsoft YaHei", /* Windows 常见中文字体。 */
    "PingFang SC", /* macOS/iOS 常见中文字体。 */
    system-ui, /* 使用系统默认 UI 字体作为后备。 */
    -apple-system, /* 兼容旧版苹果系统字体。 */
    sans-serif; /* 最终后备无衬线字体。 */
  background: /* 设置页面背景，由两层渐变和一个底色组成。 */
    linear-gradient(135deg, rgba(20, 108, 95, 0.16), transparent 42%), /* 左上到右下的绿色柔和渐变，增加背景层次。 */
    linear-gradient(315deg, rgba(191, 92, 37, 0.14), transparent 38%), /* 右下到左上的暖色渐变，平衡画面色彩。 */
    #ece9df; /* 页面最终底色，渐变透明处会显示它。 */
} /* 结束 body 样式。 */

button, /* 选中所有按钮元素，准备统一字体。 */
select { /* 选中所有下拉框元素，和按钮共用字体设置。 */
  font: inherit; /* 继承 body 的字体，避免表单控件使用浏览器默认字体。 */
} /* 结束按钮和下拉框的共同字体设置。 */

.app-shell { /* 设置应用最外层容器样式。 */
  min-height: 100vh; /* 让外层容器至少占满整个视口高度。 */
  display: grid; /* 使用 CSS Grid 布局，便于居中子元素。 */
  place-items: center; /* 水平和垂直方向都居中游戏面板。 */
  padding: 28px; /* 给页面四周留出空隙，避免面板贴边。 */
} /* 结束应用外层容器样式。 */

.game-panel { /* 设置游戏主面板样式。 */
  width: min(100%, 920px); /* 宽度最大 920px，小屏时不超过屏幕宽度。 */
  padding: 24px; /* 设置面板内部留白。 */
  background: var(--panel); /* 使用面板背景色变量。 */
  border: 1px solid rgba(104, 96, 76, 0.18); /* 给面板添加浅色边框。 */
  border-radius: 8px; /* 设置面板圆角，让视觉更柔和。 */
  box-shadow: var(--shadow); /* 添加阴影，让面板从背景中浮起。 */
} /* 结束游戏主面板样式。 */

.toolbar { /* 设置顶部工具栏布局。 */
  display: flex; /* 使用弹性布局排列标题区和控件区。 */
  align-items: end; /* 让左右两侧内容在底部对齐。 */
  justify-content: space-between; /* 让标题区靠左、控件区靠右。 */
  gap: 20px; /* 设置标题区和控件区之间的间距。 */
  margin-bottom: 18px; /* 与下方棋盘保持距离。 */
} /* 结束工具栏布局。 */

h1 { /* 设置页面主标题样式。 */
  margin: 0 0 8px; /* 清除默认上边距，并在标题下方留 8px。 */
  font-size: clamp(28px, 4vw, 42px); /* 根据视口自适应标题大小，并限制最小和最大值。 */
  line-height: 1.05; /* 设置紧凑行高，让标题更凝练。 */
  letter-spacing: 0; /* 保持正常字距，避免中文显示发散。 */
} /* 结束主标题样式。 */

.status { /* 设置游戏状态提示文本样式。 */
  min-height: 26px; /* 固定最小高度，避免状态文字变化造成布局跳动。 */
  margin: 0; /* 清除段落默认外边距。 */
  color: var(--muted); /* 使用次要文字颜色。 */
  font-size: 17px; /* 设置状态文本字号。 */
} /* 结束状态提示文本样式。 */

.controls { /* 设置操作控件区域布局。 */
  display: flex; /* 使用弹性布局排列下拉框和按钮。 */
  align-items: end; /* 让控件底部对齐。 */
  gap: 12px; /* 设置控件之间的间距。 */
  flex-wrap: wrap; /* 空间不足时允许控件换行。 */
  justify-content: flex-end; /* 控件默认向右侧对齐。 */
} /* 结束操作控件区域布局。 */

.select-wrap { /* 设置难度选择控件的外层标签样式。 */
  display: grid; /* 使用网格布局，让文字标签和下拉框上下排列。 */
  gap: 7px; /* 设置标签文字和下拉框之间的距离。 */
  color: var(--muted); /* 标签文字使用次要颜色。 */
  font-size: 14px; /* 设置标签文字字号。 */
} /* 结束难度选择外层样式。 */

select, /* 选中下拉框，准备和按钮共享基础外观。 */
button { /* 选中按钮，和下拉框共用高度、圆角、边框。 */
  height: 42px; /* 统一控件高度。 */
  border-radius: 6px; /* 设置控件圆角。 */
  border: 1px solid var(--line); /* 设置控件边框颜色。 */
} /* 结束下拉框和按钮的共享外观。 */

select { /* 单独设置下拉框样式。 */
  min-width: 118px; /* 设置下拉框最小宽度，保证选项文字可读。 */
  padding: 0 36px 0 12px; /* 设置内部留白，右侧给下拉箭头留空间。 */
  color: var(--ink); /* 下拉框文字使用主文字颜色。 */
  background: #fffdfa; /* 设置下拉框背景为接近白色。 */
  cursor: pointer; /* 鼠标移入时显示可点击手型。 */
} /* 结束下拉框样式。 */

button { /* 单独设置按钮样式。 */
  padding: 0 18px; /* 设置按钮左右内边距。 */
  color: #fff; /* 设置按钮文字为白色。 */
  background: var(--accent); /* 使用主强调色作为按钮背景。 */
  border-color: var(--accent); /* 按钮边框颜色与背景一致。 */
  cursor: pointer; /* 鼠标移入时显示可点击手型。 */
  transition: /* 设置按钮状态变化时的过渡动画。 */
    transform 120ms ease, /* 点击位移动画持续 120 毫秒。 */
    background 120ms ease; /* 背景颜色变化持续 120 毫秒。 */
} /* 结束按钮样式。 */

button:hover { /* 设置普通按钮悬停状态。 */
  background: var(--accent-strong); /* 鼠标悬停时使用更深的强调色。 */
} /* 结束普通按钮悬停样式。 */

#restart { /* 设置重新开局按钮的特殊样式。 */
  background: var(--danger); /* 使用危险操作颜色作为背景。 */
  border-color: var(--danger); /* 边框颜色和危险背景色一致。 */
} /* 结束重新开局按钮样式。 */

#restart:hover { /* 设置重新开局按钮悬停状态。 */
  background: var(--danger-strong); /* 悬停时使用更深的红色。 */
} /* 结束重新开局按钮悬停样式。 */

button:active { /* 设置按钮被按下时的反馈。 */
  transform: translateY(1px); /* 按下时向下移动 1px，模拟按压效果。 */
} /* 结束按钮按下状态样式。 */

.mode-switch { /* 设置单机 / 联机模式切换按钮组样式。 */
  display: inline-flex; /* 让两个模式按钮横向排列。 */
  border: 1px solid var(--line); /* 给按钮组加外边框，形成分段控件。 */
  border-radius: 6px; /* 圆角与外层控件一致。 */
  overflow: hidden; /* 让按钮背景不溢出圆角。 */
  background: #fffdfa; /* 未选中时的浅色底。 */
} /* 结束模式切换按钮组样式。 */

.mode-switch .mode-btn { /* 设置单个模式按钮的默认样式。 */
  height: 42px; /* 与其他控件高度保持一致。 */
  padding: 0 16px; /* 设置按钮左右内边距。 */
  border: none; /* 去掉按钮自带边框，由按钮组统一绘制。 */
  border-radius: 0; /* 取消单个按钮圆角，避免分段控件出现缝隙。 */
  color: var(--muted); /* 未选中时使用次要文字色。 */
  background: transparent; /* 未选中时透明背景。 */
  transition: background 120ms ease, color 120ms ease; /* 悬停和选中状态过渡动画。 */
} /* 结束单个模式按钮默认样式。 */

.mode-switch .mode-btn + .mode-btn { /* 设置第二个模式按钮的分隔线。 */
  border-left: 1px solid var(--line); /* 在按钮之间画一条浅色竖线。 */
} /* 结束模式按钮分隔线样式。 */

.mode-switch .mode-btn:hover { /* 设置模式按钮悬停状态。 */
  background: rgba(20, 108, 95, 0.08); /* 悬停时显示浅绿色底。 */
  color: var(--accent); /* 悬停时文字变为主色调。 */
} /* 结束模式按钮悬停样式。 */

.mode-switch .mode-btn.active { /* 设置当前选中模式按钮的样式。 */
  background: var(--accent); /* 选中时使用主色调背景。 */
  color: #fff; /* 选中时文字变白。 */
} /* 结束选中模式按钮样式。 */

.mode-switch .mode-btn:disabled { /* 设置联机对局中模式按钮的禁用样式。 */
  opacity: 0.55; /* 降低透明度，提示当前不可切换。 */
  cursor: not-allowed; /* 显示不允许点击的鼠标样式。 */
} /* 结束模式按钮禁用样式。 */

.online-panel { /* 设置联机模式面板的整体样式。 */
  margin-bottom: 18px; /* 与下方棋盘保持间距。 */
  padding: 16px; /* 设置面板内部留白。 */
  border: 1px dashed var(--line); /* 用虚线边框区分于主面板。 */
  border-radius: 8px; /* 设置面板圆角。 */
  background: rgba(255, 253, 250, 0.65); /* 半透明浅色背景，突出棋盘区域。 */
} /* 结束联机面板整体样式。 */

.online-panel h2 { /* 设置联机面板标题样式。 */
  margin: 0 0 6px; /* 清除默认边距并保留下方间距。 */
  font-size: 20px; /* 设置标题字号。 */
} /* 结束联机面板标题样式。 */

.online-hint { /* 设置联机面板说明文字样式。 */
  margin: 0 0 14px; /* 保留下方间距。 */
  color: var(--muted); /* 使用次要文字色。 */
  font-size: 14px; /* 设置说明文字字号。 */
} /* 结束联机说明文字样式。 */

.online-form { /* 设置创建 / 加入房间表单行样式。 */
  display: flex; /* 横向排列标签和按钮。 */
  align-items: end; /* 让按钮和输入框底部对齐。 */
  gap: 10px; /* 设置元素间距。 */
  flex-wrap: wrap; /* 空间不足时允许换行。 */
} /* 结束联机表单行样式。 */

.online-form label { /* 设置表单标签容器样式。 */
  display: grid; /* 让标签文字和输入框上下排列。 */
  gap: 6px; /* 设置标签与输入框间距。 */
  flex: 1 1 200px; /* 允许输入框拉伸并设置最小宽度。 */
  color: var(--muted); /* 标签文字使用次要色。 */
  font-size: 14px; /* 设置标签字号。 */
} /* 结束表单标签容器样式。 */

.online-form input { /* 设置联机输入框样式。 */
  height: 42px; /* 与其他控件高度一致。 */
  padding: 0 12px; /* 设置输入框内边距。 */
  border: 1px solid var(--line); /* 设置输入框边框。 */
  border-radius: 6px; /* 设置输入框圆角。 */
  font: inherit; /* 继承页面字体。 */
  color: var(--ink); /* 输入文字使用主文字色。 */
  background: #fffdfa; /* 浅色输入框背景。 */
} /* 结束联机输入框样式。 */

.online-form input:focus { /* 设置输入框聚焦时的样式。 */
  outline: 2px solid rgba(20, 108, 95, 0.45); /* 聚焦时显示绿色外圈。 */
  outline-offset: 1px; /* 让外圈稍微离开边框。 */
  border-color: var(--accent); /* 聚焦时边框变为主色调。 */
} /* 结束输入框聚焦样式。 */

.code-field input { /* 设置房间号输入框样式。 */
  font-variant-numeric: tabular-nums; /* 数字等宽显示。 */
  letter-spacing: 2px; /* 拉开数字间距，便于核对。 */
} /* 结束房间号输入框样式。 */

.online-error { /* 设置联机错误提示样式。 */
  margin: 10px 0 0; /* 保留上方间距。 */
  color: var(--danger); /* 使用危险色提示错误。 */
  font-size: 14px; /* 设置错误文字字号。 */
} /* 结束错误提示样式。 */

.room-head { /* 设置房间顶部信息行样式。 */
  display: flex; /* 横向排列房间号和退出按钮。 */
  justify-content: space-between; /* 两端对齐。 */
  align-items: center; /* 垂直居中。 */
  gap: 12px; /* 设置元素间距。 */
  flex-wrap: wrap; /* 空间不足时允许换行。 */
} /* 结束房间顶部信息行样式。 */

.room-code-box { /* 设置房间号展示区样式。 */
  display: inline-flex; /* 横向排列标签、数字和复制按钮。 */
  align-items: center; /* 垂直居中。 */
  gap: 10px; /* 设置元素间距。 */
  color: var(--muted); /* 标签文字使用次要色。 */
  font-size: 14px; /* 设置标签字号。 */
} /* 结束房间号展示区样式。 */

.room-code-box strong { /* 设置房间号数字样式。 */
  font-size: 26px; /* 放大房间号便于查看。 */
  letter-spacing: 3px; /* 拉开数字间距。 */
  color: var(--ink); /* 使用主文字色。 */
  font-variant-numeric: tabular-nums; /* 数字等宽显示。 */
} /* 结束房间号数字样式。 */

.ghost-btn { /* 设置复制按钮的描边风格。 */
  background: transparent; /* 透明背景。 */
  color: var(--accent); /* 文字使用主色调。 */
  border-color: var(--accent); /* 边框使用主色调。 */
  height: 32px; /* 比主按钮更小巧。 */
  padding: 0 12px; /* 设置内边距。 */
  font-size: 14px; /* 设置字号。 */
} /* 结束复制按钮样式。 */

.ghost-btn:hover { /* 设置复制按钮悬停样式。 */
  background: rgba(20, 108, 95, 0.08); /* 悬停时显示浅绿底。 */
  color: var(--accent-strong); /* 悬停时文字加深。 */
} /* 结束复制按钮悬停样式。 */

.danger-btn { /* 设置退出房间按钮的红色样式。 */
  height: 36px; /* 设置按钮高度。 */
} /* 结束退出房间按钮样式。 */

.online-status { /* 设置联机对局状态文本样式。 */
  margin: 12px 0 0; /* 保留上方间距。 */
  min-height: 22px; /* 固定最小高度，避免状态变化时布局跳动。 */
  color: var(--muted); /* 使用次要文字色。 */
  font-size: 15px; /* 设置状态字号。 */
} /* 结束联机状态文本样式。 */

.opponent-line { /* 设置对手信息文本样式。 */
  margin: 6px 0 0; /* 保留上方间距。 */
  color: var(--accent); /* 使用主色调突出对手信息。 */
  font-size: 14px; /* 设置字号。 */
} /* 结束对手信息文本样式。 */

.board-wrap { /* 设置棋盘外层容器样式。 */
  width: min(100%, 700px); /* 棋盘容器最大 700px，小屏时自适应屏幕宽度。 */
  margin: 0 auto; /* 水平方向居中棋盘容器。 */
  aspect-ratio: 1; /* 保持容器为正方形，适配五子棋棋盘。 */
  padding: 16px; /* 给 canvas 棋盘四周留出边框感。 */
  border-radius: 8px; /* 设置棋盘容器圆角。 */
  background: /* 设置棋盘背景，由高光渐变和棋盘底色组成。 */
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 38%), /* 添加左上角高光，让棋盘更有质感。 */
    var(--board); /* 使用棋盘主体颜色变量。 */
  border: 1px solid rgba(127, 79, 31, 0.48); /* 设置棋盘外框边线。 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); /* 添加内侧浅色描边，增强棋盘边缘层次。 */
} /* 结束棋盘外层容器样式。 */

canvas { /* 设置 Canvas 棋盘元素样式。 */
  display: block; /* 去掉 canvas 作为行内元素时可能产生的底部空隙。 */
  width: 100%; /* 让 canvas 显示宽度填满父容器。 */
  height: 100%; /* 让 canvas 显示高度填满父容器。 */
  cursor: default; /* 设置默认鼠标样式。 */
  border-radius: 6px; /* 设置 canvas 边角圆润。 */
  touch-action: manipulation; /* 优化触屏点击行为，减少浏览器默认手势干扰。 */
} /* 结束 Canvas 棋盘样式。 */

.legend { /* 设置棋子图例区域样式。 */
  display: flex; /* 使用弹性布局横向排列图例项。 */
  justify-content: center; /* 图例项水平居中。 */
  gap: 24px; /* 设置两个图例项之间的间距。 */
  margin-top: 16px; /* 与棋盘保持上方距离。 */
  color: var(--muted); /* 图例文字使用次要颜色。 */
  font-size: 15px; /* 设置图例文字字号。 */
} /* 结束棋子图例区域样式。 */

.legend span { /* 设置每一个图例项的内部布局。 */
  display: inline-flex; /* 让图例圆点和文字在一行内弹性排列。 */
  align-items: center; /* 垂直居中圆点和文字。 */
  gap: 8px; /* 设置圆点和文字之间的距离。 */
} /* 结束单个图例项布局。 */

.legend em { /* 设置图例文字标签的样式。 */
  font-style: normal; /* 去掉 em 标签自带的斜体。 */
} /* 结束图例文字标签样式。 */

.legend span.active em { /* 设置联机模式中当前执子方的图例高亮。 */
  color: var(--accent); /* 使用主色调高亮。 */
  font-weight: 700; /* 加粗文字。 */
} /* 结束执子方图例高亮样式。 */

.stone { /* 设置图例中棋子小圆点的基础样式。 */
  width: 18px; /* 设置圆点宽度。 */
  height: 18px; /* 设置圆点高度。 */
  border-radius: 50%; /* 把方形元素变成圆形。 */
  display: inline-block; /* 让圆点按行内块显示，便于和文字同行。 */
  border: 1px solid rgba(0, 0, 0, 0.2); /* 给圆点加浅边框，增强轮廓。 */
} /* 结束棋子小圆点基础样式。 */

.stone.black { /* 设置黑棋图例圆点样式。 */
  background: radial-gradient(circle at 35% 28%, #5b5b5b, #080808 68%); /* 使用径向渐变模拟黑棋高光和立体感。 */
} /* 结束黑棋图例圆点样式。 */

.stone.white { /* 设置白棋图例圆点样式。 */
  background: radial-gradient(circle at 35% 28%, #ffffff, #d9d6cc 72%); /* 使用径向渐变模拟白棋高光和阴影。 */
} /* 结束白棋图例圆点样式。 */

@media (max-width: 720px) { /* 当屏幕宽度不超过 720px 时，启用移动端适配样式。 */
  .app-shell { /* 移动端下调整应用外层容器。 */
    padding: 14px; /* 减小页面边距，让小屏能容纳更多内容。 */
  } /* 结束移动端外层容器样式。 */

  .game-panel { /* 移动端下调整游戏面板。 */
    padding: 16px; /* 减小面板内部留白。 */
  } /* 结束移动端游戏面板样式。 */

  .toolbar { /* 移动端下调整工具栏布局。 */
    align-items: stretch; /* 让工具栏子元素横向拉满。 */
    flex-direction: column; /* 把标题区和控件区改成纵向排列。 */
  } /* 结束移动端工具栏布局。 */

  .controls { /* 移动端下调整控件容器。 */
    justify-content: stretch; /* 让控件区域尽量拉伸填满宽度。 */
  } /* 结束移动端控件容器样式。 */

  .select-wrap { /* 移动端下调整难度选择容器。 */
    flex: 1 1 150px; /* 允许难度选择控件伸缩，并设置基础宽度。 */
  } /* 结束移动端难度选择容器样式。 */

  .mode-switch { /* 移动端下调模式切换按钮组。 */
    width: 100%; /* 让按钮组占满整行。 */
  } /* 结束移动端模式切换按钮组样式。 */

  .mode-switch .mode-btn { /* 移动端下调单个模式按钮。 */
    flex: 1; /* 两个按钮平分整行宽度。 */
  } /* 结束移动端模式按钮样式。 */

  .room-code-box strong { /* 移动端下调房间号字号。 */
    font-size: 22px; /* 缩小房间号，避免溢出。 */
  } /* 结束移动端房间号样式。 */

  select, /* 移动端下选中下拉框，准备铺满宽度。 */
  button { /* 移动端下选中按钮，和下拉框一样铺满宽度。 */
    width: 100%; /* 让控件宽度占满父容器，方便触屏点击。 */
  } /* 结束移动端控件宽度设置。 */

  .online-form { /* 移动端下重排联机操作区。 */
    align-items: stretch; /* 让子元素纵向拉伸，便于上下排列。 */
    gap: 10px 8px; /* 行间距 10px、列间距 8px。 */
  } /* 结束移动端联机操作区样式。 */

  .online-form label { /* 移动端下让昵称、房间号并排各占一半。 */
    flex: 1 1 calc(50% - 4px); /* 两个输入框平分一行，中间留出间距。 */
  } /* 结束移动端输入框标签样式。 */

  .online-form button { /* 移动端下让两个按钮并排各占一半。 */
    width: auto; /* 取消整行宽度限制。 */
    flex: 1 1 calc(50% - 4px); /* 两个按钮平分一行，中间留出间距。 */
  } /* 结束移动端联机按钮样式。 */

  .board-wrap { /* 移动端下调整棋盘外层容器。 */
    padding: 10px; /* 减小棋盘边缘留白，提升可用棋盘面积。 */
  } /* 结束移动端棋盘外层容器样式。 */
} /* 结束移动端媒体查询。 */