/* =========================================================================
 * 五子棋 · 竖屏自适应画面
 * 画面宽高比由 JS 按实际视口自动测算（见 game.js 的 applyDeviceRatio）：
 *   手机上 = 铺满屏幕的真实屏幕比例；电脑上 = 跟随窗口比例并夹在竖屏范围内。
 * 因此这里不写死比例，用变量 --device-ratio（宽 / 高）驱动。
 *
 * 配色：暖调原木色为主（低饱和、不扎眼），棋子与文字保持黑 / 白 / 灰关系，
 *       仅"轮到谁"的指示灯用一点绿色做信号。
 *
 * 布局：竖屏单栏 —— 头像条紧贴棋盘上沿，棋盘居中，下方状态条 + 操作 + 棋谱。
 * ========================================================================= */
:root {
  --device-ratio: 0.55;    /* 宽 / 高，JS 会覆盖 */
  /* 暖调灰阶 */
  --page:      #f2ece1;   /* 页面底 */
  --screen:    #f5f1e8;   /* 屏底 */
  --panel:     #f4efe6;   /* 信息条 */
  --stage:     #2a2520;   /* 棋盘区（暖炭色，衬托木色棋盘） */
  --console:   #221e1a;   /* 右栏控制台 */

  --wood:      #e7dcc7;   /* 棋盘木色 */
  --line:      #b3a894;   /* 棋盘线 */
  --line-bold: #8d8271;
  --star:      #7a7060;

  --ink:       #2a2621;   /* 主文字（暖黑） */
  --ink-2:     #6b6155;
  --ink-3:     #9a8f80;
  --hair:      #e4dbcb;   /* 浅色描边 */

  --shell:     #23201c;   /* 机身 */
  --on-dark:   #efe9de;
  --on-dark-2: #948a7c;
  --btn:       #2e2924;
  --btn-hover: #3a342d;

  /* 唯一的彩色：轮到谁谁亮绿灯 */
  --turn:      #43b96a;
  --turn-soft: rgba(67, 185, 106, .45);
  --turn-glow: rgba(67, 185, 106, .28);

  --flash: 1.5s;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, "PingFang SC",
               "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 桌面预览：把竖屏画面居中 ---------- */
.stage-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
}

.stage-note {
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: #8e8474;
}

/* 画面本体：比例跟随视口（竖屏，--device-ratio 是 宽/高），高度不超过可用空间 */
.device {
  position: relative;
  height: min(calc(100dvh - 76px), calc(430px / var(--device-ratio)));
  aspect-ratio: var(--device-ratio) / 1;
  max-width: 100%;
  background: var(--shell);
  border-radius: 30px;
  padding: 7px;
  box-shadow: 0 26px 70px rgba(46, 36, 24, .38), 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}

/* 竖屏单栏：上=棋盘，下=操作与棋谱 */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--screen);
  border-radius: 23px;
  overflow: hidden;
}

/* ---------- 上栏：棋盘 ---------- */
.battle {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px 10px;
}

.board-frames {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 宽度由内容（棋盘）决定；头像条的最小内容宽度不应反过来撑大棋盘容器 */
  align-self: center;
  width: fit-content;
  min-width: 0;
  min-height: 0;
}

.hud {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 7px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  /* 允许收缩到棋盘宽度：文字省略而不是撑开容器 */
  overflow: hidden;
}

.player {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 0;
}

.player-right {
  justify-content: flex-end;
  text-align: right;
}

.player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  overflow: hidden;
}

.player-name {
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-tag {
  font-size: 10px;
  font-style: normal;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-mid {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.vs {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #b6ab98;
}

.sound-btn {
  appearance: none;
  border: 1px solid var(--hair);
  background: #fbf8f2;
  color: var(--ink-2);
  font: inherit;
  font-size: 9.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}

.sound-btn:hover { background: #f2ece1; }
.sound-btn.is-off { color: #c0b6a5; border-style: dashed; }

/* ---------- 头像框 ---------- */
.avatar {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eae2d4;
  border: 1.5px solid #ded4c2;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

/* 头像里的棋子剪影 */
.avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #575047, #1b1815 72%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .45);
}

.avatar.is-white::before {
  background: radial-gradient(circle at 34% 28%, #ffffff, #e6ddcb 78%);
  box-shadow: inset 0 -2px 3px rgba(90, 74, 50, .22);
}

/* 头像角落指示灯：未轮到是暖灰点 */
.avatar::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cdc3b2;
  border: 2px solid var(--panel);
  transition: background .2s, box-shadow .2s;
}

/* 轮到谁 —— 头像框闪绿灯 */
.player.is-turn .avatar {
  border-color: var(--turn);
  background: #eef4ea;
  animation: frame-flash var(--flash) ease-in-out infinite;
}

.player.is-turn .avatar::after {
  background: var(--turn);
  animation: dot-flash var(--flash) ease-in-out infinite;
}

.player.is-turn .player-name { color: #2f8f52; }

/* 终局：赢家常亮，不再闪 */
.player.is-winner .avatar {
  border-color: var(--turn);
  background: #eef4ea;
  box-shadow: 0 0 0 2px var(--turn-soft), 0 0 14px var(--turn-glow);
  animation: none;
}

.player.is-winner .avatar::after {
  background: var(--turn);
  box-shadow: 0 0 9px var(--turn-soft);
  animation: none;
}

.player.is-winner .player-name { color: #2f8f52; }

@keyframes frame-flash {
  0%, 100% { box-shadow: 0 0 0 1px var(--turn-soft), 0 0 10px var(--turn-glow); }
  50%      { box-shadow: 0 0 0 3px var(--turn-soft), 0 0 22px var(--turn-glow); }
}

@keyframes dot-flash {
  0%, 100% { box-shadow: 0 0 4px var(--turn-soft); opacity: .75; }
  50%      { box-shadow: 0 0 12px var(--turn);      opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .player.is-turn .avatar,
  .player.is-turn .avatar::after { animation: none; }
  .player.is-turn .avatar { box-shadow: 0 0 0 2px var(--turn-soft), 0 0 14px var(--turn-glow); }
}

/* ---------- 棋盘区：棋盘水平垂直居中 ---------- */
.board-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(46, 36, 24, .18);
}

.board-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 收缩包裹画布：终局浮层的定位基准就是棋盘本身 */
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

/* 尺寸由 JS 设置像素值，保证位图与显示尺寸一致 */
#board {
  display: block;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(40, 30, 18, .22), 0 10px 24px rgba(40, 30, 18, .18);
  cursor: pointer;
  touch-action: manipulation;
}

#board.is-locked { cursor: default; }

/* 提示 / 终局浮层，贴在棋盘内上沿或下沿 */
.board-overlay {
  position: absolute;
  inset: auto 50% auto auto;
  transform: translate(50%, 6%);
  display: flex;
  align-items: center;
  animation: overlay-in .22s ease-out;
}

.board-overlay.is-bottom { bottom: 0; }
.board-overlay.is-top    { top: 0; transform: translate(50%, 6%); }

.board-overlay[hidden] { display: none; }

.board-overlay b {
  background: rgba(38, 31, 24, .9);
  color: #fdfaf4;
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: .05em;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 状态条 ---------- */
.status {
  margin: 0;
  width: 100%;
  padding: 6px 11px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eae2d4;
  color: #6b6155;
  font-size: 11.5px;
  text-align: center;
  transition: background .18s, color .18s;
}

.status.is-win {
  background: var(--turn);
  color: #0d2a16;
  font-weight: 600;
}

.status.is-draw {
  background: #ddd4c3;
  color: var(--ink);
  font-weight: 600;
}

.status.is-warn {
  background: #ddd4c3;
  color: var(--ink);
  font-weight: 500;
}

/* ---------- 下栏控制台 ---------- */
.console {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px 10px;
  background: var(--console);
}

.console-block {
  display: flex;
  align-items: center;
  gap: 6px;
}

.console-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

/* 棋谱行 */
.console-foot {
  gap: 8px;
  min-height: 26px;
}

.console-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--on-dark-2);
}

/* 竖屏空间紧，只留手数计数，隐去"棋谱"文字 */
.console-title { display: none; }

/* 分段切换 */
.segment {
  display: inline-flex;
  flex: none;
  padding: 3px;
  background: #302b25;
  border-radius: 8px;
}

.segment button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--on-dark-2);
  font: inherit;
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .16s, color .16s;
}

.segment button:hover { color: var(--on-dark); }
.segment button.is-active { background: #46403a; color: #fff; }

/* 按钮 */
.btn {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--btn);
  color: var(--on-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, opacity .16s;
}

.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn:active:not(:disabled) { background: #46403a; }

.btn-primary {
  background: #efe9de;
  color: #2a2621;
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) { background: #ffffff; }
.btn-primary:active:not(:disabled) { background: #ded6c8; }

.btn:disabled { opacity: .34; cursor: not-allowed; }

/* 棋谱：一行横向滚动的小圆片，最新一手在最左 */
.log {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.log::-webkit-scrollbar { display: none; }

.log li {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #302b25;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #d3cab9;
}

.log li .idx { color: #857b6c; }
.log li .coord { font-weight: 600; color: #fff; letter-spacing: .02em; }
.log li .chip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #141210;
  border: 1px solid #5c5449;
  flex: none;
}
.log li .chip.white { background: #f7f1e6; border-color: #f7f1e6; }
.log li.is-latest { background: #46403a; }
.log li.is-empty { color: #857b6c; background: transparent; padding-left: 2px; }

.count {
  flex: none;
  font-size: 10.5px;
  color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
}

@media (max-height: 560px) {
  .avatar { width: 30px; height: 30px; border-radius: 9px; }
  .avatar::before { width: 15px; height: 15px; }
  .player-name { font-size: 11.5px; }
  .player-tag { display: none; }
  .battle { padding: 8px 10px 6px; gap: 7px; }
}

@media (hover: none) {
  #board { cursor: default; }
}