/* 魔改中国象棋 · 网页版样式
 *
 * 目标：**手机浏览器上单手可玩** —— 棋盘占满可用高度，
 * 控件在下巴下面一行（可换行），不用滚动就能点。
 */

:root {
  --bg: #f3d7a2;
  --line: #7d1d14;
  --ink: #3a2a18;
  --paper: #fdf6e6;
  --accent: #8b5e34;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #2b2118;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  -webkit-text-size-adjust: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}

#head {
  text-align: center;
  flex: 0 0 auto;
  padding-bottom: 4px;
}

#head h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 2px;
  color: #f6e3c0;
}

#head .sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #c8b38c;
}

/* 棋盘舞台：吃掉剩余高度，棋盘在里面居中并按比例缩放 */
#stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#board {
  display: block;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  touch-action: manipulation;
  cursor: pointer;
}

#info {
  flex: 0 0 auto;
  margin: 8px 2px 6px;
  padding: 7px 10px;
  min-height: 40px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

/* 控件条 */
#bar, #demobar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
}

#bar label, #demobar label {
  font-size: 13px;
  color: #e8d5b0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

select, button {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #6b4f31;
  background: #f0dfbe;
  color: var(--ink);
  cursor: pointer;
}

button:active { transform: translateY(1px); }

#demobar {
  background: rgba(0, 0, 0, .22);
  border-radius: 8px;
}

/* ⚠️ 必须显式写这条 —— 上面那条 `display: flex` 会**盖掉**浏览器
   默认的 `[hidden] { display: none }`，导致"退出演示"后控制条还赖着不走。 */
#demobar[hidden] { display: none; }

#demobar .tag {
  font-size: 12px;
  color: #f0c987;
  padding: 0 4px;
}

#demobar .hint {
  font-size: 11px;
  color: #b9a486;
}

#foot {
  flex: 0 0 auto;
  text-align: center;
  font-size: 11px;
  color: #9c8a6d;
  padding-top: 4px;
}

#foot a { color: #d9b477; }

#foot .dot { margin: 0 6px; }

@media (max-width: 380px) {
  #head h1 { font-size: 16px; }
  #head .sub { display: none; }
  select, button { font-size: 12px; padding: 5px 8px; }
}