@charset "UTF-8";
/* 全局主题：主色、纸张色与字体；所有组件共享这些变量。 */
:root {
  color-scheme:light;
  --ink:#213e36;
  --muted:#83857b;
  --green:#28614d;
  --red:#b64e43;
  --paper:#f8f7f2;
  --line:#e3e3d8;
  --wood:#e9d5af;
  --cell:34px;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-synthesis:none
}

/* 基础样式：统一盒模型、按钮交互和键盘焦点。 */
* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink)
}

button,select {
  font:inherit
}

button,a,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default
}

button:focus-visible,a:focus-visible,select:focus-visible {
  outline:3px solid #7eaa8c;
  outline-offset:4px
}

/* 页面容器与页头：限制最大宽度，排布品牌与玩法入口。 */
.app-shell {
  max-width:1500px;
  margin:auto;
  padding:0 40px
}

.masthead {
  height:103px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--ink);
  text-decoration:none;
  font-size:24px;
  font-family:Georgia,"SimSun",serif;
  font-weight:bold;
  letter-spacing:4px
}

.brand-seal {
  width:38px;
  height:46px;
  background:var(--green);
  color:#fff9e8;
  font-size:16px;
  line-height:18px;
  padding:5px 0;
  text-align:center;
  letter-spacing:0;
  border-radius:3px
}

.brand small {
  display:block;
  font-family:Arial,sans-serif;
  font-size:9px;
  letter-spacing:3px;
  margin-top:4px;
  font-weight:400
}

.header-note {
  color:#727e71;
  font-size:12px;
  letter-spacing:2px
}

.header-note span {
  color:#c1c6b9;
  padding:0 14px
}

/* 通用按钮：普通、禁用、主要按钮及点击反馈。 */
.button {
  border:1px solid #d9ddcf;
  background:#fffefa;
  color:var(--ink);
  padding:10px 16px;
  border-radius:6px;
  transition:background .15s,transform .15s;
  font-size:12px;
  white-space:nowrap
}

.button:hover:not(:disabled) {
  background:#edf0e7
}

.button:active:not(:disabled) {
  transform:translateY(1px)
}

.button:disabled {
  opacity:.4
}

.quiet {
  border:0;
  background:transparent;
  padding-right:0
}

.quiet span {
  margin-left:12px
}

.primary {
  background:var(--green);
  color:white;
  border-color:var(--green)
}

.primary:hover:not(:disabled) {
  background:#1d503d
}

/* 开场介绍与本地对弈标识。 */
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:37px 0 31px
}

.eyebrow {
  font-size:10px;
  color:#8d947e;
  letter-spacing:3px;
  font-weight:600
}

.intro h1 {
  font-family:"Songti SC","SimSun",serif;
  font-size:34px;
  line-height:1.3;
  letter-spacing:2px;
  margin:12px 0 11px;
  font-weight:500
}

.intro em {
  font-style:normal;
  color:#6e8063
}

.intro p {
  font-size:12px;
  color:#8b8e81;
  margin:0;
  line-height:1.7
}

.local-badge {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#6f7d6a
}

.local-badge>span:first-child {
  width:6px;
  height:6px;
  background:#6b8e63;
  border-radius:50%
}

.local-badge b {
  font-weight:400;
  border-left:1px solid #d9dece;
  margin-left:8px;
  padding-left:16px;
  letter-spacing:1px
}

/* 对局工具栏与当前回合提示，阵营颜色随回合切换。 */
.game-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  gap:12px;
  min-height:49px
}

.turn-indicator {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  min-width:0
}

.status-dot {
  background:var(--red);
  width:8px;
  height:8px;
  border-radius:50%;
  box-shadow:0 0 0 4px #b64e4310;
  flex-shrink:0
}

.turn-indicator strong {
  font-size:14px;
  color:var(--red);
  white-space:nowrap
}

.turn-indicator.green .status-dot {
  background:var(--green)
}

.turn-indicator.green strong {
  color:var(--green)
}

#turn-detail {
  color:#989b8f;
  font-size:11px;
  padding-left:5px
}

.toolbar-actions {
  display:flex;
  gap:8px
}

/* 桌面三栏布局：左右棋盒，中间为棋盘。 */
.game-layout {
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(0,708px) minmax(180px,1fr);
  gap:24px;
  align-items:start
}

/* 棋手面板：当前回合边框、头像、库存与在盘数量。 */
.player-panel {
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffefa;
  padding:20px 17px;
  position:relative;
  transition:border-color .2s
}

.player-panel.active.red-panel {
  border-color:#cc9f90
}

.player-panel.active.green-panel {
  border-color:#84a28a
}

.player-heading {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:23px
}

.player-avatar {
  font-family:"SimSun",serif;
  width:35px;
  height:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:19px;
  flex-shrink:0
}

.player-avatar.red {
  background:#f6e9e3;
  color:var(--red)
}

.player-avatar.green {
  background:#e9eee4;
  color:var(--green)
}

.player-heading h2 {
  font-size:13px;
  margin:0 0 5px;
  font-weight:600;
  white-space:nowrap
}

.player-heading p {
  font-size:9px;
  color:#96998b;
  margin:0;
  white-space:nowrap
}

.active-tag {
  display:none;
  font-size:9px;
  color:#989c8b;
  margin-left:auto;
  white-space:nowrap
}

.active .active-tag {
  display:inline
}

/* 棋盒与棋种按钮：同类棋子合并显示，通过数量表示库存。 */
.reserve {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}

.reserve-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 9px;
  border:1px solid #e9e8df;
  background:#fafaf5;
  border-radius:7px;
  min-height:52px;
  transition:background .15s,border-color .15s;
  position:relative
}

.reserve-button:last-child {
  grid-column:span 2
}

.reserve-button .piece {
  width:32px;
  height:32px;
  position:relative;
  flex-shrink:0;
  font-size:21px
}

.reserve-button .quantity {
  font-size:11px;
  color:#8d9382;
  padding-left:5px
}

.reserve-button:not(:disabled):hover {
  background:#efeee4;
  border-color:#bebfab
}

.reserve-button.selected {
  border-color:var(--red);
  background:#f7eee6;
  box-shadow:0 0 0 1px var(--red)
}

.green-panel .reserve-button.selected {
  border-color:var(--green);
  background:#edf1e8;
  box-shadow:0 0 0 1px var(--green)
}

.reserve-button:disabled {
  opacity:.42
}

.player-panel:not(.active) .reserve-button:disabled {
  opacity:.66
}

.reserve-button.empty:disabled {
  opacity:.25
}

/* 棋盒底部统计、操作说明和最近棋谱。 */
.panel-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:16px;
  font-size:10px;
  color:#969b8c
}

.panel-foot strong {
  font-size:17px;
  font-family:Georgia,serif;
  font-weight:400;
  color:#647960
}

.strategy-note,.history-wrap {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:20px
}

.small-label {
  font-size:9px;
  letter-spacing:2px;
  color:#9b9f8b
}

.strategy-note h3 {
  font-family:"SimSun",serif;
  font-size:16px;
  font-weight:400;
  margin:14px 0 10px
}

.strategy-note p {
  color:#949a89;
  font-size:10px;
  line-height:2;
  margin:0
}

.history-wrap>.small-label {
  display:flex;
  justify-content:space-between
}

.history-wrap>.small-label span {
  letter-spacing:0
}

.history {
  list-style:none;
  padding:0;
  margin:12px 0 0;
  max-height:150px;
  overflow:auto;
  font-size:10px;
  scrollbar-width:thin
}

.history li {
  display:flex;
  gap:7px;
  align-items:center;
  line-height:2.4;
  border-bottom:1px dashed #eeeee5;
  color:#7e8877
}

.history .history-index {
  color:#b1b4a4;
  min-width:18px;
  font-size:9px
}

.history .red {
  color:var(--red)
}

.history .green {
  color:var(--green)
}

.history .empty-history {
  font-size:10px;
  border:0;
  color:#a4a995
}

/* 棋盘上下的信息条：规则、选中棋种和当前手数。 */
.board-topline,.board-bottomline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#8e9580
}

.board-topline {
  margin:0 1px 12px;
  letter-spacing:.5px
}

/* 棋盘外壳：小屏横向滚动，木色边框保留坐标标记空间。 */
.board-scroll {
  overflow:auto;
  padding:4px;
  margin:-4px;
  scrollbar-width:thin
}

.board-frame {
  padding:24px;
  background:linear-gradient(115deg,#efdfbf,#e8d1aa);
  border:1px solid #d7c298;
  border-radius:5px;
  box-shadow:0 8px 20px #493c2310,inset 0 0 0 4px #f8edd433;
  position:relative;
  min-width:430px
}

/* 棋盘使用 19 列网格，纵横比固定为正方形；独立层叠便于绘制网格。 */
.board {
  display:grid;
  grid-template-columns:repeat(19,1fr);
  /* 显式固定 19 行，避免棋子字号或内容将上下边缘的网格撑开。 */
  grid-template-rows:repeat(19,minmax(0,1fr));
  aspect-ratio:1;
  position:relative;
  isolation:isolate
}

.board::before {
  content:"";
  position:absolute;
  inset:calc(100% / 38);
  background:linear-gradient(90deg,transparent,#aa895008,transparent);
  z-index:-1
}

/* 每个按钮代表交叉点；伪元素分别画横线和竖线，外沿只画半格。 */
.cell {
  padding:0;
  border:0;
  background:transparent;
  position:relative;
  min-width:0;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:2px;
  touch-action:manipulation
}

.cell::before,.cell::after {
  content:"";
  position:absolute;
  background:#8b785a77;
  z-index:-1
}

.cell::before {
  height:1px;
  left:0;
  right:0;
  top:50%
}

.cell::after {
  width:1px;
  top:0;
  bottom:0;
  left:50%
}

.cell[data-c="0"]::before {
  left:50%
}

.cell[data-c="18"]::before {
  right:50%
}

.cell[data-r="0"]::after {
  /* 第 1 行显示在屏幕底部，竖线从上方接入，不能向外延伸。 */
  top:0;
  bottom:50%
}

.cell[data-r="18"]::after {
  /* 第 19 行显示在屏幕顶部，竖线从中点向下连接棋盘内部。 */
  top:50%;
  bottom:0
}

/* 星位是定位标记，不参与规则计算。 */
.cell.star {
  background:radial-gradient(circle,#75654c 0 2.5px,transparent 3px)
}

.cell:hover {
  background-color:#ffffff25
}

.cell.legal::marker {
  color:transparent
}

/* 绿色圆点提示合法空位，虚线圈标记可以吃掉的对方棋子。 */
.cell .legal-dot {
  position:absolute;
  width:21%;
  height:21%;
  background:#3e68559c;
  border-radius:50%;
  pointer-events:none
}

.capture-ring {
  /* 独立叠加提示圈，不再复用画竖线的伪元素，保留原网格。 */
  position:absolute;
  width:87%;
  height:87%;
  border:2px dashed #b95346;
  background:transparent;
  border-radius:50%;
  top:6.5%;
  left:6.5%;
  z-index:2;
  box-sizing:border-box
}

/* 棋子外观：圆形木色底、双环边框，红绿颜色区分阵营。 */
.piece {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:88%;
  height:88%;
  font-family:"KaiTi","STKaiti","SimSun",serif;
  font-size:clamp(15px,1.9vw,26px);
  font-weight:bold;
  background:radial-gradient(circle at 35% 25%,#fff9e8,#f3e7ca 76%);
  border:1px solid #d3bd94;
  box-shadow:0 2px 2px #6f54372e,inset 0 0 0 2px #fff7e0,inset 0 0 0 3px currentColor;
  line-height:1;
  user-select:none;
  pointer-events:none
}

.piece.red {
  color:var(--red)
}

.piece.green {
  color:var(--green)
}

/* 棋盘状态：选中抬起、最后一步小点、五连获胜高亮。 */
.cell.selected .piece {
  transform:translateY(-2px);
  box-shadow:0 0 0 2px #fff8df,0 0 0 4px #886747,0 4px 7px #4e3d3440,inset 0 0 0 2px #fff7e0,inset 0 0 0 3px currentColor
}

.last-dot {
  /* 最后一步标记独立于横线，避免走到边缘时网格线消失。 */
  position:absolute;
  background:#6e604c;
  height:5px;
  width:5px;
  left:auto;
  right:0;
  top:auto;
  bottom:0;
  border-radius:50%;
  z-index:3
}

.cell.win .piece {
  background:#fef0ae;
  box-shadow:0 0 0 2px #e8b55b,inset 0 0 0 2px #fff7e0,inset 0 0 0 3px currentColor
}

/* 行列坐标仅用于显示，不拦截点击。 */
.coordinate {
  position:absolute;
  color:#978160;
  font-family:Arial,sans-serif;
  font-size:8px;
  line-height:1;
  pointer-events:none
}

.coordinate.col {
  bottom:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%)
}

.coordinate.row {
  right:calc(100% + 9px);
  top:50%;
  transform:translateY(-50%)
}

.board-bottomline {
  margin-top:14px
}

.board-bottomline b {
  font-weight:400;
  color:#596b53
}

.selection-indicator {
  color:var(--red)
}

.selection-indicator.green {
  color:var(--green)
}

/* 消息区域：普通提示、非法行动和胜利结果使用不同配色。 */
.message {
  margin-top:14px;
  min-height:42px;
  background:#eef0e7;
  border:1px solid #e3e7d8;
  border-radius:5px;
  padding:12px 14px;
  color:#748265;
  font-size:11px;
  line-height:1.6
}

.message.error {
  background:#f8ece5;
  border-color:#ead6c9;
  color:#ab6350
}

.message.victory {
  background:#e5ecdf;
  border-color:#a8bf8c;
  font-size:13px;
  color:#365734;
  font-weight:600
}

/* 统一规则说明与页脚布局，不提供其他规则模式。 */
.settings-strip {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:27px 0 0;
  padding:20px 0
}

.settings-strip>div {
  display:flex;
  gap:14px;
  align-items:center
}

.settings-strip strong {
  background:transparent;
  color:#6d7c64;
  font-size:11px;
  font-weight:500
}

.settings-strip p {
  font-size:10px;
  color:#9a9f8d;
  line-height:1.8;
  margin:0
}

.text-button {
  border:0;
  background:transparent;
  font-size:10px;
  color:#6d7e62;
  padding:5px 0;
  white-space:nowrap
}

footer {
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  justify-content:space-between;
  padding:24px 0 30px;
  color:#a9ad9c;
  font-size:9px;
  letter-spacing:1px
}

.footer-dot {
  padding:0 7px
}
.site-filing { flex-basis:100%; text-align:center; color:#6c786c; font-size:12px; letter-spacing:0; text-decoration:none; }
.site-filing:hover { text-decoration:underline; }

/* 原生弹窗与遮罩，限制高度，长规则可在弹窗内部滚动。 */
.dialog {
  border:1px solid #e2e3d5;
  background:var(--paper);
  border-radius:12px;
  padding:30px;
  color:var(--ink);
  box-shadow:0 24px 80px #102e302e;
  max-height:85dvh;
  width:min(600px,calc(100% - 32px))
}

.dialog::backdrop {
  background:#1a302c66;
  backdrop-filter:blur(3px)
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.icon-button {
  font-size:25px;
  color:#6d7c64;
  border:0;
  background:transparent
}

.dialog h2 {
  font-family:"SimSun",serif;
  font-size:25px;
  font-weight:400;
  line-height:1.5;
  margin:12px 0 16px
}

.dialog p {
  font-size:12px;
  color:#7d8675;
  line-height:1.9
}

.rule-block {
  border-top:1px solid var(--line);
  margin-top:19px;
  padding-top:12px
}

.rule-block h3 {
  font-size:12px;
  font-weight:600
}

.rule-block dl {
  display:grid;
  grid-template-columns:60px 1fr;
  gap:10px;
  font-size:11px;
  line-height:1.8;
  color:#7d8675
}

.rule-block dt {
  color:#35533e
}

.rule-block dd {
  margin:0
}

.rules-dialog>.primary {
  width:100%;
  margin-top:15px
}

.confirm-dialog {
  max-width:420px
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:25px
}

/* 只对读屏工具保留的标签，视觉上隐藏但保持可访问。 */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* 大屏：放大棋盘棋子的字形。 */
@media(min-width:1500px) {
  /* 棋子外观：圆形木色底、双环边框，红绿颜色区分阵营。 */
  .piece {
    font-size:27px
  }

}

/* 中等桌面：缩窄侧栏和留白，为棋盘保留空间。 */
@media(max-width:1220px) {
  /* 页面容器与页头：限制最大宽度，排布品牌与玩法入口。 */
  .app-shell {
    padding:0 24px
  }

  /* 桌面三栏布局：左右棋盒，中间为棋盘。 */
  .game-layout {
    grid-template-columns:175px minmax(0,1fr) 175px;
    gap:16px
  }

  /* 棋手面板：当前回合边框、头像、库存与在盘数量。 */
  .player-panel {
    padding:17px 12px
  }

  .active-tag {
    display:none!important
  }

  .player-heading {
    gap:7px
  }

  .reserve-button {
    padding:7px
  }

  .reserve-button .piece {
    width:29px;
    height:29px;
    font-size:19px
  }

  .board-frame {
    padding:21px
  }

  .settings-strip p {
    max-width:260px
  }

  .board-topline {
    font-size:8px
  }

  #turn-detail {
    display:none
  }

}

/* 平板：棋盘占据首行，双方棋盒排列在下一行。 */
@media(max-width:980px) {
  /* 桌面三栏布局：左右棋盒，中间为棋盘。 */
  .game-layout {
    grid-template-columns:1fr 1fr;
    gap:18px;
    grid-template-areas:"board board" "red green"
  }

  .board-section {
    grid-area:board;
    max-width:750px;
    width:100%;
    justify-self:center
  }

  .red-panel {
    grid-area:red
  }

  .green-panel {
    grid-area:green
  }

  /* 棋盒与棋种按钮：同类棋子合并显示，通过数量表示库存。 */
  .reserve {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .reserve-button:last-child {
    grid-column:span 2
  }

  .strategy-note,.history-wrap {
    display:none
  }

  .player-heading {
    margin-bottom:15px
  }

  /* 棋手面板：当前回合边框、头像、库存与在盘数量。 */
  .player-panel {
    padding:18px
  }

  .reserve-button .piece {
    width:35px;
    height:35px;
    font-size:23px
  }

  .active-tag {
    display:block!important
  }

  /* 棋子外观：圆形木色底、双环边框，红绿颜色区分阵营。 */
  .piece {
    font-size:clamp(17px,3.4vw,29px)
  }

  /* 规则切换与页脚布局。 */
  .settings-strip {
    flex-wrap:wrap;
    gap:10px
  }

  .settings-strip p {
    max-width:none;
    order:3;
    flex-basis:100%
  }

  /* 棋盒底部统计、操作说明和最近棋谱。 */
  .panel-foot {
    margin-top:14px;
    padding-top:12px
  }

  .board-topline {
    font-size:10px
  }

}

/* 手机：缩小标题与留白，保持棋盘最小宽度并允许横向滚动。 */
@media(max-width:600px) {
  /* 页面容器与页头：限制最大宽度，排布品牌与玩法入口。 */
  .app-shell {
    padding:0 16px
  }

  .masthead {
    height:79px
  }

  .brand {
    font-size:21px
  }

  .brand-seal {
    width:31px;
    height:39px;
    font-size:13px;
    line-height:15px
  }

  .brand small {
    font-size:7px;
    letter-spacing:2.5px
  }

  .header-note {
    display:none
  }

  /* 开场介绍与本地对弈标识。 */
  .intro {
    padding:28px 0 23px
  }

  .intro h1 {
    font-size:27px;
    letter-spacing:0
  }

  .intro p {
    font-size:10px;
    max-width:245px
  }

  .eyebrow {
    font-size:8px
  }

  .local-badge {
    flex-direction:column;
    font-size:9px;
    gap:6px
  }

  .local-badge>span:first-child {
    display:none
  }

  .local-badge b {
    border:0;
    margin:0;
    padding:0
  }

  /* 通用按钮：普通、禁用、主要按钮及点击反馈。 */
  .button {
    padding:9px 12px;
    font-size:11px
  }

  .turn-indicator {
    gap:8px
  }

  .turn-indicator strong {
    font-size:12px
  }

  /* 对局工具栏与当前回合提示，阵营颜色随回合切换。 */
  .game-toolbar {
    margin-bottom:14px
  }

  .board-topline {
    font-size:8px;
    letter-spacing:0
  }

  .board-frame {
    min-width:394px;
    padding:19px
  }

  /* 棋盘外壳：小屏横向滚动，木色边框保留坐标标记空间。 */
  .board-scroll {
    margin:0 -4px;
    padding-bottom:7px
  }

  /* 棋子外观：圆形木色底、双环边框，红绿颜色区分阵营。 */
  .piece {
    font-size:19px
  }

  .board-bottomline {
    font-size:9px;
    margin-top:11px
  }

  /* 桌面三栏布局：左右棋盒，中间为棋盘。 */
  .game-layout {
    gap:16px 12px
  }

  /* 棋手面板：当前回合边框、头像、库存与在盘数量。 */
  .player-panel {
    padding:13px 10px
  }

  .player-avatar {
    height:28px;
    width:28px;
    font-size:16px
  }

  .player-heading h2 {
    font-size:11px
  }

  .player-heading p {
    font-size:8px
  }

  .active-tag {
    font-size:8px
  }

  /* 棋盒与棋种按钮：同类棋子合并显示，通过数量表示库存。 */
  .reserve {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px
  }

  .reserve-button {
    min-height:43px;
    padding:5px 8px
  }

  .reserve-button .piece {
    width:29px;
    height:29px;
    font-size:20px
  }

  .strategy-note {
    display:none
  }

  /* 消息区域：普通提示、非法行动和胜利结果使用不同配色。 */
  .message {
    font-size:10px
  }

  /* 规则切换与页脚布局。 */
  .settings-strip {
    margin-top:20px
  }

  .settings-strip>div {
    gap:6px
  }

  .settings-strip .small-label {
    font-size:8px
  }

  .settings-strip strong {
    font-size:10px;
    max-width:180px
  }

  .settings-strip p {
    font-size:9px
  }

  .text-button {
    font-size:9px
  }

  footer {
    font-size:8px;
    letter-spacing:0;
    gap:10px
  }

  /* 原生弹窗与遮罩，限制高度，长规则可在弹窗内部滚动。 */
  .dialog {
    padding:22px
  }

  .dialog h2 {
    font-size:22px
  }

}

/* 尊重系统减少动态效果的偏好，关闭过渡动画。 */
@media(prefers-reduced-motion:reduce) {
  /* 基础样式：统一盒模型、按钮交互和键盘焦点。 */
  * {
    transition:none!important
  }

}

/* 人机设置：两个带标签的选择框，以及当前模式的操作说明。 */
.opponent-settings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: #eeefe6;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.setting-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setting-field label {
  font-size: 10px;
  color: #89917c;
  white-space: nowrap;
}
.setting-field select {
  font-size: 12px;
  color: var(--ink);
  border: 1px solid #d9ddcf;
  background: #fffefa;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.setting-field select:disabled {
  opacity: .45;
  cursor: default;
}
.opponent-settings p {
  margin: 0 0 0 auto;
  color: #8d9580;
  font-size: 10px;
  line-height: 1.8;
}
.thinking .status-dot {
  box-shadow: 0 0 0 5px #72927420;
}

/* 未确认的将帅与士使用半透明预览，确认两士后才扣库存和换手。 */
.cell.preview .piece {
  opacity: .64;
  outline: 2px dashed #77926c;
  outline-offset: 1px;
}
.opening-tip {
  color: #879176;
  font-size: 10px;
  line-height: 1.8;
  margin: -3px 0 14px;
}
.capture-ring,.last-dot {
  pointer-events: none;
}
/* 好友房间沿用棋盘的墨绿和纸色；长昵称与手机操作区可以自然换行。 */
[hidden] { display:none !important; }
.online-panel { padding:24px; margin:0 0 22px; border:1px solid #cad6cc; border-radius:16px; background:#f4f7f0; }
.online-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.online-heading h2 { margin:8px 0; font-size:23px; color:#193d35; }
.online-heading p,.online-description { color:#586b62; font-size:13px; }
.online-entry,.online-actions { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:16px 0; }
.online-entry label { display:flex; flex-direction:column; gap:7px; font-size:12px; color:#52665c; }
.online-entry input { width:180px; max-width:100%; box-sizing:border-box; border:1px solid #b9c9be; border-radius:8px; background:#fffef9; padding:11px 12px; font:inherit; color:#193d35; }
#online-code-input { text-transform:uppercase; letter-spacing:2px; }
.online-room-code { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:14px; }
.online-room-code strong { font-size:27px; letter-spacing:4px; color:#193d35; font-family:monospace; }
#online-players,.online-status { overflow-wrap:anywhere; font-size:14px; line-height:1.7; }
.online-status { background:#e8eee4; border-radius:9px; padding:12px 15px; color:#193d35; }
.online-fineprint { margin-bottom:0; font-size:11px; color:#68776c; line-height:1.9; }
@media(max-width:600px) {
  .online-panel { padding:16px; }
  .online-heading h2 { font-size:20px; }
  .online-entry { display:grid; grid-template-columns:1fr 1fr; align-items:end; }
  .online-entry input { width:100%; min-width:0; }
  .online-entry .button { padding:12px 8px; }
  .online-room-code strong { font-size:23px; }
}
/* 手机将说明单独放一行，不挤占阵营选项和按钮的点击空间。 */
@media(max-width:600px) {
  .opponent-settings { padding: 12px; gap: 10px 16px; }
  .setting-field { gap: 6px; }
  .setting-field select { font-size: 11px; padding: 7px; }
  .opponent-settings p { flex-basis: 100%; margin: 0; font-size: 9px; }
  .toolbar-actions { gap: 5px; }
  .toolbar-actions .button { padding: 9px; }
}