/**
 * 对局页样式。布局取自设计稿 1c 三栏，并套用 2a 的去框风格
 * （设计稿结尾「下一步」提到的正是这个组合）。
 */

.game {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 28px 40px;
}

/* —— 头部 —— */
.game-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.game-head-left { display: flex; align-items: center; gap: 12px; }
.game-head-right { display: flex; align-items: center; gap: 10px; }
.game-meta { font-size: 12.5px; }

/* —— 断线横幅 —— */
.game-banner {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 12.5px;
}

/* —— 三栏：左信息 / 中棋盘 / 右棋谱 —— */
.game-cols {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 30px;
  align-items: start;
  padding-top: 22px;
}

/* —— 玩家卡 —— */
.game-left { display: flex; flex-direction: column; gap: 14px; }
.pc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background-color .2s;
}
.pc[data-active="true"] { background: var(--accent-tint); }
.pc-body { min-width: 0; }
.pc-top { display: flex; align-items: baseline; gap: 7px; }
.pc-name {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-color { font-size: 11.5px; }
.pc-bottom { display: flex; align-items: baseline; gap: 8px; min-height: 17px; }
.pc-state { font-size: 12px; color: var(--accent); font-weight: 600; }
.pc-move { font-size: 12px; color: var(--muted); }
.pc-move[data-urgent="true"] { color: var(--danger); font-weight: 700; }
.pc-clock { font-size: 15px; font-variant-numeric: tabular-nums; }

.game-ops { display: flex; flex-direction: column; gap: 8px; }
.game-ops .btn { justify-content: center; }
.game-ops-note { font-size: 11.5px; margin: 4px 0 0; line-height: 1.6; }

/* —— 棋盘栏 —— */
.game-center { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.game-board-host { width: 100%; max-width: 620px; }
.game-hint { font-size: 12.5px; min-height: 19px; margin: 0; text-align: center; }

/* —— 棋谱栏 —— */
.game-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.record-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.record-head .muted { font-size: 12px; }
.record-list {
  list-style: none;
  margin: 0; padding: 0;
  max-height: 62vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.record-row {
  display: grid;
  grid-template-columns: 30px 12px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.record-n { color: var(--muted); font-size: 11.5px; }
.record-dot { width: 9px; height: 9px; border-radius: 50%; }
.record-dot[data-color="black"] { background: var(--stone-black); }
.record-dot[data-color="white"] { background: var(--stone-white); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.record-pos { font-variant-numeric: tabular-nums; }

/* —— 结算 —— */
.result-sub { margin: 0 0 16px; color: var(--text-2); font-size: 13px; }
.result-stats { display: flex; gap: 28px; padding: 4px 0 8px; }
.result-stats > div { display: flex; flex-direction: column; gap: 2px; }
.result-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.result-stats span { font-size: 11.5px; }

/* —— 平板 1024×768 横屏（设计稿 1f）：棋谱收窄 —— */
@media (max-width: 1180px) {
  .game-cols { grid-template-columns: 220px minmax(0, 1fr) 180px; gap: 20px; }
}

/* —————————————— 聊天（设计稿 1c 右栏） —————————————— */

.chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chat-head .muted { font-size: 12px; }

.chat-list {
  flex: 1;
  min-height: 180px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px;
  scrollbar-width: thin;
}

.chat-msg { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.chat-msg[data-role="spectator"] { opacity: .78; }
.chat-body { min-width: 0; }
.chat-who { font-size: 11px; margin-bottom: 2px; }
.chat-text {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--surface);
}
.chat-msg[data-role="spectator"] .chat-text { background: none; padding: 0; }

.chat-sys {
  font-size: 11.5px;
  text-align: center;
  padding: 3px 0;
}

.chat-phrases { display: flex; flex-wrap: wrap; gap: 5px; }
.chat-phrases .btn { padding: 4px 9px; font-size: 12px; }

.chat-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--surface);
  font-size: 13px;
}
.chat-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

.chat-note { font-size: 11px; margin: 0; line-height: 1.5; }

/* 请求横幅里的按钮 */
.game-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-banner .btn { margin-left: auto; }
.game-banner .btn + .btn { margin-left: 0; }

/* 三栏：左信息 / 中棋盘 / 右聊天 */
.game[data-cols="3"] .game-cols { grid-template-columns: 268px minmax(0, 1fr) 268px; }
/* 人机对局无聊天栏：两栏，并收窄整体宽度让版面回到居中 */
.game[data-cols="2"] { max-width: 1000px; }
.game[data-cols="2"] .game-cols { grid-template-columns: 250px minmax(0, 1fr); }
.game[data-cols="2"] .game-board-host { max-width: 620px; margin: 0 auto; }
@media (max-width: 1180px) {
  .game[data-cols="3"] .game-cols { grid-template-columns: 226px minmax(0, 1fr) 226px; gap: 18px; }
  .game[data-cols="2"] .game-cols { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
}


/* ————————————————————————————————————————————————————————————
   手机布局（设计稿 1e）
   顺序：对手条 → 棋盘 → 自己条 → 操作条 → 棋谱 → 聊天抽屉

   左栏用 display:contents 摊平，让它的子元素直接参与外层排序 ——
   否则对手条与自己条同在一个容器里，CSS 无法把棋盘插到两者之间。
   ———————————————————————————————————————————————————————————— */
@media (max-width: 860px) {
  .game { padding: 10px 12px 0; }
  .game-head { padding-bottom: 10px; }
  .game-meta { display: none; }          /* 规则文字在窄屏是噪音 */

  .game-cols {
    display: flex;
    flex-direction: column;
    /* 必须覆盖桌面版的 align-items: start —— 否则 flex 项不拉伸，
       棋盘会塌成内容宽度（实测只有 166px） */
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 68px;                /* 给底部聊天抽屉留位 */
  }

  .game-left { display: contents; }
  .game-left > .hr { display: none; }

  .pc[data-slot="top"]    { order: 1; }
  .game-center            { order: 2; }
  .pc[data-slot="bottom"] { order: 3; }
  .game-ops               { order: 4; }
  .game-ops-note          { order: 4; }
  .record                 { order: 5; }
  .game-right             { order: 6; }

  /* 玩家条压成一行，别换行挤成两行 */
  .pc { padding: 6px 8px; gap: 9px; }
  .pc-top { flex-wrap: nowrap; min-width: 0; }
  .pc-color { white-space: nowrap; }
  .pc-clock { font-size: 14px; }
  .pc .avatar--lg { width: 30px; height: 30px; font-size: 13px; }

  .game-center { gap: 8px; }
  .game-board-host { max-width: none; }
  .game-hint { font-size: 12px; min-height: 17px; }

  .game-ops { flex-direction: row; gap: 6px; }
  .game-ops .btn { flex: 1; padding: 9px 6px; font-size: 12.5px; }

  /* 棋谱在手机上折成横向滚动条，不吃首屏高度 */
  .record { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .record-head { flex: none; }
  .record-head .act-title { font-size: 12px; }
  .record-list {
    display: flex;
    gap: 6px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  .record-row {
    flex: none;
    border-bottom: 0;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--surface);
    gap: 5px;
  }

  /* —— 聊天做成底部抽屉 —— */
  .game-right {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    gap: 0;
    padding: 0 12px env(safe-area-inset-bottom, 8px);
    background: var(--bg);
    border-top: 1px solid var(--hairline-strong);
    box-shadow: 0 -8px 24px -18px rgba(15, 42, 63, .6);
    max-height: 56px;
    overflow: hidden;
    transition: max-height .22s ease-out;
  }
  .game-right.is-open { max-height: 72vh; }

  .chat-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 2px 12px;
    text-align: left;
  }
  .chat-preview {
    flex: 1;
    font-size: 12.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-unread {
    flex: none;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 11px/18px var(--font-mono);
    text-align: center;
  }
  .chat-toggle::after {
    content: '';
    flex: none;
    width: 8px; height: 8px;
    margin-right: 4px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(-135deg);
    transition: transform .22s;
  }
  .game-right.is-open .chat-toggle::after { transform: rotate(45deg); }

  .chat-head, .chat-list, .chat-phrases, .chat-input, .chat-note { display: none; }
  .game-right.is-open .chat-head,
  .game-right.is-open .chat-list,
  .game-right.is-open .chat-phrases,
  .game-right.is-open .chat-input { display: flex; }
  .game-right.is-open .chat-head { display: flex; padding-bottom: 6px; }
  .game-right.is-open .chat-list { max-height: 38vh; margin-bottom: 8px; }
  .game-right.is-open .chat-phrases { margin-bottom: 8px; }
  .game-right.is-open .chat-input { display: block; margin-bottom: 10px; }
}

/* 桌面端不需要抽屉开关 */
@media (min-width: 861px) {
  .chat-toggle { display: none; }
}