/* ==========================================================
   联机五子棋 —— 全局样式（零依赖，纯 CSS3）
   ----------------------------------------------------------
   设计主调：方案 A · 宣纸 · 朱砂印（2026-10-01 定稿，全站唯一主题）
   三个母题：
     宣纸 = 纤维噪点底纹 + 四角水墨晕染 + 暖调双层阴影 + 纸边内高光
     墨   = 暖黑文字 + 楷体标题 + 选中态 / 次级实心按钮 + 棋盘双线外框
     朱砂 = 主行动按钮 / 钤印 logo / 最后一手 / 胜利连线 / 焦点环

   约束：
   - 按钮最小可点击区域 44×44px，字号 ≥ 14px
   - 禁止长按选中与双击缩放，保证手机端手感
   - 颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效一律引用 css/tokens.css 的令牌，
     本文件除装饰性 SVG 纹理外不出现硬编码色值
   ========================================================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  /* 移动端浏览器工具栏会占掉一截视口：100% / 100vh 会把被遮住的部分也算进去，
     导致底部被压住、棋盘算错高度。100dvh 是"动态视口高度"，随工具栏显隐实时变化。 */
  height: 100%;
  height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 禁止长按选中 / 长按菜单，避免误触 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  /* 方案 A：四角淡淡的水墨晕染，消解"平铺米色"的空 */
  background-color: var(--c-bg);
  background-image:
    radial-gradient(560px 320px at 108% 104%, rgba(var(--c-wash), .20), transparent 62%),
    radial-gradient(460px 280px at -6% -4%, rgba(var(--c-wash), .14), transparent 58%);
}

/* 宣纸纤维噪点：铺在页面底之上、内容之下，只在卡片留白处透出来 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

#app {
  position: relative;
  z-index: 1;
  /* 固定高度：底部导航才能始终贴在视口底部（内容长时由 .view 内部滚动） */
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 四周安全区：浏览器全屏或横屏时工具栏消失、刘海/圆角会直接压到内容上，
     靠 env(safe-area-inset-*) 让出空间（常规竖屏下这些值通常为 0，无副作用）。
     box-sizing 是 border-box，padding 已包含在 height 内。 */
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-left: var(--safe-left);
}

/* 楷体只用于标题 / 品牌 / 数量等短文本；正文一律无衬线，保证可读性 */
.font-display { font-family: var(--font-display); }

/* ------------------------------ 线性 SVG 图标（替代 emoji） ------------------------------ */
/* 用法：<svg class="ic" viewBox="0 0 24 24">…</svg>，随 currentColor 变色 */
.ic {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 实心图标（如"更多"三点）：关闭描边、改用填充 */
.ic--fill {
  fill: currentColor;
  stroke: none;
}

/* ------------------------------ 视图切换 ------------------------------ */
.view {
  display: none;
  flex: 1;
  min-height: 0;              /* 允许内部滚动 */
  flex-direction: column;
  padding: var(--sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 主页禁止滚动：一屏收全（内容按短屏压缩，剩余空间由远山吸收） */
#lobby.view {
  overflow: hidden;
  padding: var(--sp-3) var(--sp-4);
}

.view--active {
  display: flex;
  animation: view-in var(--dur-fast) var(--ease-out) both;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 对局页不滚动（棋盘尺寸按容器实测自适应，见 js/board.js） */
#game.view {
  position: relative; /* 作为对局菜单的定位父级 */
  /* 对局页边距更小，把横向空间也让给棋盘 */
  padding: var(--sp-2);
  overflow: hidden;
  padding-bottom: calc(var(--sp-2) + var(--safe-bottom));
}

/* 主页与「我的」页内容垂直居中，避免小屏底部大片留白 */
/* 标题稳定（2026-09-30）：去掉垂直居中——切模式时内容高度变化会让居中重算，
   标题上下跳 72px（实测）。改为顶部对齐 + 底部家具 margin-top:auto 钉底，
   高度差由中部弹性空隙吸收。 */
#profile-guest { margin: auto 0; }

.hidden {
  display: none !important;
}

/* ------------------------------ 底部导航 ------------------------------ */
.tabbar {
  position: relative; /* 作为胶囊滑块的定位基准 */
  flex: 0 0 auto;
  display: flex;
  z-index: var(--z-tabbar);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -1px 0 var(--c-highlight) inset;
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.tab {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 54px;
  border: none;
  background: none;
  color: var(--c-text-sub);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

/* 选中态：实心品牌色胶囊（由 .tabbar__slider 提供背景）+ 白字 */
.tab--active {
  color: var(--c-on-brand);
  font-weight: 600;
}

/* 胶囊滑块：绝对定位在 tabbar 内，随选中 tab 用 transform 平滑滑动 */
.tabbar__slider {
  position: absolute;
  top: 6px;
  bottom: calc(6px + var(--safe-bottom));
  left: var(--safe-left);
  width: calc((100% - var(--safe-left) - var(--safe-right)) / 3);
  border-radius: var(--r-full);
  background: var(--c-brand);
  box-shadow: var(--sh-e2);
  transition: transform var(--dur) var(--ease-out);
  z-index: 0;
}

/* ------------------------------ 页面头部 ------------------------------ */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--ls-brand);
}

/* ------------------------------ 钤印标识（主页 / 关于页 logo，方案 A） ------------------------------ */
/* 「对弈」朱砂印：竖排楷体白文 + 双圈印边，微微右倾钤在纸面上 */
.logo--seal {
  display: flex;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--c-accent);
  box-shadow:
    inset 0 0 0 2px rgba(255, 253, 246, .55),
    inset 0 0 0 6px var(--c-accent),
    inset 0 0 0 7px rgba(255, 253, 246, .35),
    0 6px 16px rgba(var(--c-accent-rgb), .35);
  transform: rotate(-3deg);
}

.logo--seal span {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--c-on-brand);
}

/* ------------------------------ 居中卡片 ------------------------------ */
.center-box {
  padding: var(--sp-5) var(--sp-5);
  text-align: center;
}

.center-box .hint {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-loose);
}

.avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-3);
  border-radius: 22%;   /* 方形圆角：自定义头像不被圆形裁边 */
  overflow: hidden;
  background: var(--c-surface-2);
  color: var(--c-text-sub);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar--in {
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-strong));
  color: var(--c-on-brand);
  cursor: pointer;          /* 点头像 = 更换头像入口 */
}

/* 头像图片（预设 SVG / 自定义上传）：铺满圆形容器。
   pointer-events:none 是关键——移动端 img 有原生触摸手势（长按菜单/拖动）会截住轻点，
   让点击直接命中外层容器（点击监听都绑在容器上），头像才"一点就出"。 */
.avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22%;
  object-fit: cover;
  pointer-events: none;
}

/* 可点头像容器：禁用 iOS 图片长按菜单，点击手势稳定交给容器 */
.avatar,
.friend-ava,
.avatar-cell {
  -webkit-touch-callout: none;
  user-select: none;
}

/* ------------------------------ 更换头像弹窗 ------------------------------ */
.modal__panel--avatar { text-align: left; }

.avatar-hint {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
  line-height: 1.7;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.avatar-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-2) 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.avatar-cell img {
  width: 40px;
  height: 40px;
  border-radius: 22%;
  display: block;
}

.avatar-cell i {
  font-style: normal;
  font-size: 10px;
  color: var(--c-text-hint);
}

.avatar-cell--on {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent) inset;
}

.avatar-upload { margin-top: 2px; }

/* ------------------------------ 好友列表头像 + 胜率卡 ------------------------------ */
.friend-ava {
  position: relative;       /* 供 ::after 扩大点击热区 */
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 22%;       /* 方形圆角 */
  background: var(--c-surface-2);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-sub);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* 视觉 38px、热区扩到 ~48px：好友列表里小头像也要好点 */
.friend-ava::after {
  content: "";
  position: absolute;
  inset: -5px;
}

.friend-ava:active { opacity: .75; }

/* 好友胜率卡头部：头像 + 名字 + 段位积分 */
.fs-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.fs-head__ava {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;       /* 方形圆角 */
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text-sub);
  overflow: hidden;
}

.fs-head__info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.fs-head__info b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 1px;
}

.fs-head__info i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.profile-name {
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 1px;
}

.profile-id {
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

/* 用户信息卡：头像与名字在左、退出登录在右（横排，比竖排省约 145px 高度） */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

/* 覆盖竖排时的居中与下外边距 */
.profile-head .avatar {
  width: 52px;
  height: 52px;
  margin: 0;
  font-size: 20px;
}

.profile-head__info {
  flex: 1;
  min-width: 0;
}

.profile-head .profile-name {
  margin: 0;
  font-size: var(--fs-md);
}

.profile-head .profile-id {
  margin: 2px 0 0;
}

/* 信息卡右侧：退出按钮 + 改名/改密码两个小链接 */
.profile-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.profile-head__links {
  display: flex;
  gap: var(--sp-2);
}

.profile-head__links .link-btn { font-size: 12px; }

/* ------------------------ 「我的」页：按内容排布（原「一屏自适应」已作废） ------------------------ */
/* 修「查看全部战绩」显示位置错误：原做法是"整页不滚动、战绩卡吃掉剩余高度并在卡内滚动"，
   但这条 flex 收缩链会把卡片压到小于自身内容 —— 360×640 上统计卡只剩 206px，
   装不下「统计盒 + 分隔线 + 查看全部战绩」，最后那个按钮直接从卡片底部溢出，
   又被后画的「设置」卡盖住，表现为"登录后战绩和查看全部战绩都看不见"。
   现在一律按内容定高：卡片不收缩，放不下时交给 .view 的 overflow-y: auto 整页滚动。 */
#profile-user {
  display: flex;
  flex: 0 0 auto;      /* 关键：不吃剩余空间、不被压缩，高度由内容决定 */
  flex-direction: column;
  gap: var(--sp-3); /* 卡片间距统一交给 gap，卡片自身 margin 归零 */
  /* 与紧随其后的「设置」卡留出间距：内部卡片的 margin-bottom 已归零，
     若不补这一条，战绩卡会与设置卡紧贴（0 间距） */
  margin-bottom: var(--sp-3);
}

#profile-user > .card {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* 「设置」/「关于」两张入口卡同样不许收缩，否则整页滚动时会被压扁 */
#profile > .card { flex: 0 0 auto; }

#profile-user > .card--stats {
  display: flex;
  flex-direction: column;
}

#match-list {
  padding-bottom: var(--sp-2); /* 最后一条不贴边 */
  /* 卡内预览最多 5 条（renderMatches 只 slice(0,5)），天然不会超长，故不再需要区内滚动 */
}

/* ------------------------------ 对战统计 ------------------------------ */
.stat-grid {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.stat-box {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: .5px solid var(--c-border-warn);
  border-radius: var(--r-md);
  background: var(--c-surface-warn);
  text-align: center;
}

.stat-box__label {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.stat-box__total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.stat-box__total b {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-text);
}

.stat-box__total span {
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.stat-box__rate {
  margin: 1px 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-brand);
}

.stat-box__detail {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  padding-top: var(--sp-1);
  border-top: .5px solid var(--c-border-warn);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

/* 统计框可点击：点击弹出对应类型的战绩抽屉 */
.stat-box--tap {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stat-box--tap:active { background: var(--c-surface-warn-strong, var(--c-surface-2)); }

.stat-box__hint {
  margin-top: var(--sp-1);
  font-size: 11px;
  color: var(--c-brand);
}

/* 统计区与战绩列表之间的分隔线 */
.card__divider {
  height: .5px;
  margin: var(--sp-3) 0 var(--sp-1);
  background: var(--c-border);
}

/* 「查看全部战绩 ›」入口 */
.matches-more {
  display: block;
  width: 100%;
  margin-top: var(--sp-1);
  padding: var(--sp-2) 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-brand);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.matches-more:active { opacity: .7; }

.stat-box__detail b {
  color: var(--c-text);
  font-weight: 600;
}

/* 整卡可点：把 .card 用在 button 上，需要重置按钮默认样式 */
.card--tap {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); /* 比普通卡片更紧凑 */
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card--tap:active { transform: scale(.99); }

.settings-entry__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: .5px solid var(--c-border-warn);
  border-radius: var(--r-sm);
  background: var(--c-surface-warn);
  font-size: 16px;
  color: var(--c-brand);
}

.settings-entry__main {
  flex: 1;
  min-width: 0;
}

.settings-entry__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-text);
}

.settings-entry__summary {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-entry__arrow {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--c-text-hint);
}

/* 大厅实时概览：在线人数 / 对弈中局数（轻量、不抢焦点） */
.lobby__stats {
  margin-top: var(--sp-5);
  padding-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
  letter-spacing: .02em;
  /* 数字等宽，刷新时不会左右跳动 */
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}

.lobby__stats b {
  font-weight: 600;
  color: var(--c-text-sub);
}

/* 方案 A：水墨远山收底。吸收标题/主按钮以下的弹性空隙，纯装饰不拦截手势 */
.lobby__mountain {
  position: relative;
  flex: 1;            /* 吃掉剩余纵向空间：山体越高页面越饱满 */
  min-height: 90px;
  margin-top: var(--sp-3);
  pointer-events: none;
}

.lobby__mountain svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 水墨配色：淡月 / 两重山（由淡到深）/ 飞鸟弧线 —— 只保留必要层次，线条从简 */
.lobby__moon { fill: rgba(var(--c-wash), .18); }
.lobby__moon--inner { fill: rgba(var(--c-wash), .10); }
.lobby__hill0 { fill: rgba(var(--c-wash), .16); }
.lobby__hill1 { fill: rgba(var(--c-wash), .40); }
.lobby__hill2 { fill: rgba(var(--c-wash), .44); }   /* 兼容旧标记，当前 svg 不再使用 */
.lobby__mist1,
.lobby__mist2 { display: none; }
.lobby__birds {
  fill: none;
  stroke: rgba(var(--sh-rgb), .6);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* 矮屏收小山水；月与鸟在压扁后不可读，直接隐藏 */
@media (max-height: 620px) {
  .lobby__mountain { flex: 0 0 auto; height: 56px; min-height: 56px; }
  .lobby__moon, .lobby__birds { display: none; }
}

/* 短屏逐级压缩：小屏真机也要一屏收全（内容不裁，山自动变矮） */
@media (max-height: 780px) {
  .mode-cards { gap: var(--sp-2); margin-top: var(--sp-2); }
  .mcard { padding: 12px; gap: 10px; }
  .mcard .glyph { width: 56px; height: 56px; }
  .mcard .glyph svg { width: 38px; height: 38px; }
  .hub-btn { padding: 11px 2px; }
  .lobby__stats { margin-top: var(--sp-3); }
  .lobby__mountain { min-height: 70px; margin-top: var(--sp-2); }
}

@media (max-height: 700px) {
  .mcard { padding: 10px 12px; }
  .mcard .glyph { width: 48px; height: 48px; border-radius: 12px; }
  .mcard .glyph svg { width: 32px; height: 32px; }
  .mcard .st-b,
  .mcard .st-w { width: 18px; height: 18px; }
  .mcard h3 { font-size: 14px; }
  .hub-btn { padding: 9px 2px; }
  .hub-btn__tile { width: 24px; height: 24px; }
  .lobby__mountain { min-height: 48px; }
  .lobby__moon, .lobby__birds { display: none; }
}

/* ==========================================================
   主页两级导航（2026-10-01）：
   一级页只做「选模式」（两张入口卡），建房/难度/赛制下沉到二级页
   ========================================================== */

/* ---- 一级页：模式入口卡（横向行卡：图形左 / 文案中 / 进入右） ---- */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.mcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--c-surface), var(--c-surface-2));
  box-shadow: var(--sh-e2), inset 0 1px 0 var(--c-highlight);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.mcard:active { transform: scale(.97); }

/* 朱砂推荐位：真人实时对战 */
.mcard--hot {
  border-color: rgba(var(--c-accent-rgb), .45);
  box-shadow: 0 10px 24px rgba(var(--c-accent-rgb), .18), inset 0 1px 0 var(--c-highlight);
}

.mcard .badge {
  position: absolute;
  top: -9px;
  left: 14px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 10px;
  letter-spacing: .1em;
  background: var(--c-brand);
  color: var(--c-on-brand);
  box-shadow: 0 2px 6px rgba(var(--c-accent-rgb), .4);
}

/* 图形座：统一 64 方块托底，棋子/AI 图形都坐在里面 */
.mcard .glyph {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mcard .glyph svg { width: 42px; height: 42px; display: block; }

/* 入口卡上的双子棋子图形（纯 CSS，不吃图片资源） */
.mcard .st-b,
.mcard .st-w {
  width: 22px;
  height: 22px;
  border-radius: 22%;
  display: inline-block;
}

.mcard .st-b {
  background: radial-gradient(circle at 34% 30%, var(--c-stone-black-1), var(--c-stone-black-2));
  box-shadow: 0 3px 6px var(--c-stone-black-rim);
}

.mcard .st-w {
  background: radial-gradient(circle at 36% 30%, var(--c-stone-white-1), var(--c-stone-white-2));
  box-shadow: 0 3px 6px rgba(var(--sh-rgb), .15), inset 0 0 0 1px var(--c-border-strong);
  margin-left: -7px;
}

.mcard__body {
  flex: 1;
  min-width: 0;
}

.mcard h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-text);
}

.mcard p {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-hint);
  letter-spacing: .05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcard .go {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-indent: .2em;
  background: var(--c-ink);
  color: var(--c-on-ink);
}

.mcard--hot .go {
  background: linear-gradient(180deg, var(--c-brand), var(--c-brand-strong));
  color: var(--c-on-brand);
  box-shadow: 0 5px 12px rgba(var(--c-accent-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---- 二级页公共：返回头 ---- */
.lobby-subhead {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0 var(--sp-2);
}

.subhead-back {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-field);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--c-text-sub);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.subhead-back:active { transform: scale(.94); }

.subhead-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-text);
}

/* ---- 二级页公共：水墨分割线（「或 · 加入朋友的房间」） ---- */
.divline {
  position: relative;
  margin: var(--sp-4) var(--sp-2);
  text-align: center;
}

.divline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--c-border);
}

.divline span {
  position: relative;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
  letter-spacing: .2em;
  background: var(--c-bg);
}

/* ---- 玩家对战二级页：创建房间大卡（朱砂） ---- */
.pvp-cta {
  display: block;
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: none;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--c-brand), var(--c-brand-strong));
  box-shadow: 0 12px 26px rgba(var(--c-accent-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-family: inherit;
  color: var(--c-on-brand);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.pvp-cta:active { transform: scale(.98); }

.pvp-cta__t {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .4em;
  text-indent: .4em;
}

.pvp-cta__d {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  opacity: .85;
}

/* ---- 玩家对战二级页：加入房间卡 ---- */
.join-card {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-e1);
}

.join-card__lbl {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
  letter-spacing: .2em;
}

.join-card .hint { margin-top: var(--sp-2); }

/* ---- AI 二级页：难度描述卡 ---- */
.lvl-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.lvl {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.lvl:active { transform: scale(.985); }

.lvl--on {
  border-color: rgba(var(--c-accent-rgb), .45);
  box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), .15);
}

.lvl .lv-ic {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  background: var(--c-surface-2);
  color: var(--c-text-sub);
}

.lvl--on .lv-ic {
  background: var(--c-brand);
  color: var(--c-on-brand);
  box-shadow: 0 4px 10px rgba(var(--c-accent-rgb), .3);
}

.lvl .txt { flex: 1; min-width: 0; }

.lvl .txt b {
  display: block;
  font-size: var(--fs-base);
  letter-spacing: .1em;
  color: var(--c-text);
}

.lvl .txt i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
}

.lvl .pick {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-strong);
}

.lvl--on .pick {
  border-color: var(--c-brand);
  background: radial-gradient(circle, var(--c-brand) 42%, transparent 46%);
}

/* AI 二级页：开始对局与费用行的间距 */
#lobby-ai .btn--hero { margin-top: var(--sp-4); }

/* 主页底部版本号：低调的小字，点击查看更新公告 */
.lobby__version {
  display: block;
  margin: var(--sp-2) auto 0;
  padding: 2px 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--c-text-hint);
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lobby__version:active { opacity: .6; }

/* 更新公告条目 */
.changelog {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.changelog__ver {
  /* 版本分组标题：小号、加字距、带一条细分割线，和条目本身拉开层次 */
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--c-text-hint);
  border-bottom: .5px solid var(--c-border);
}

.changelog__ver:first-child { margin-top: 0; }

.changelog__item {
  padding: var(--sp-2) 0;
  border-bottom: .5px solid var(--c-border);
}

.changelog__item:last-child { border-bottom: none; }

.changelog__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
}

.changelog__desc {
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* ------------------------------ 排行榜与经济 ------------------------------ */
/* 主页顶部一行：左（排行 + 签到）/ 右（外观 + 金币/门票徽标）。
   flex + wrap：窄屏放不下时自动换行，绝不重叠（修复 absolute 重叠 bug） */
.lobby-top {
  display: flex;
  flex-direction: column;   /* 品牌行在上、导航行在下（免滚动两行布局） */
  align-items: stretch;
  margin-bottom: var(--sp-2);
}

.lobby-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* 品牌行：钤印与标题贴紧（免滚动紧凑布局） */
.lobby-brandrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lobby-brandrow__seal {
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 7px;
  flex: 0 0 auto;
}

.lobby-brandrow__seal span {
  font-size: 10px;
  letter-spacing: 2px;
}

/* 行2：排行 / 任务 / 商城 横排单行导航（铺满整行） */
.lobby-nav {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  min-width: 0;
}

/* ------------------------------ 主页横排导航大按钮 ------------------------------ */
.hub-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  border-radius: 14px;
  padding: 13px 2px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.hub-btn:active { opacity: .75; }

.hub-btn__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex: 0 0 auto;
}

.hub-btn__tile .ic { width: 16px; height: 16px; }

.hub-btn__tile--ink { background: var(--c-ink); color: var(--c-on-ink); }
.hub-btn__tile--brand { background: var(--c-brand); color: var(--c-on-brand); }
.hub-btn__tile--soft {
  background: var(--c-surface-warn);
  border: 1px solid var(--c-border-strong);
  color: var(--c-brand);
}

.hub-btn__text b {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* 任务红点：有奖励可领时点亮（锚在 .hub-btn 右上角） */
.task-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--c-accent);
  border: 2px solid var(--c-bg);
}

/* 首行右侧：金币 / 门票紧凑徽标（点按买票） */
.wallet-bar {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}

.wallet-bar .coin-badge,
.wallet-bar .ticket-badge { padding: 4px 9px; }

/* 数量徽标：点击打开「门票补给」（金币买票入口） */
.coin-badge,
.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.coin-badge:active,
.ticket-badge:active { opacity: .75; }

.coin-badge .ic { color: var(--c-brand); }
.coin-badge b { font-weight: 600; }
.ticket-badge b { font-weight: 600; }

/* 窄屏收紧顶部：标题缩小防换行，导航徽标减-padding */
@media (max-width: 380px) {
  .lobby__title { font-size: var(--fs-lg); }
  .hub-btn { padding: 11px 2px; }
  .hub-btn__text b { font-size: var(--fs-sm); }
  .hub-btn__tile { width: 26px; height: 26px; }
  .coin-badge,
  .ticket-badge {
    padding: 3px 7px;
    font-size: var(--fs-xs);
  }
}

/* 赛制开关行 + 费用/积分预期行 */
.lobby__ranked { display: flex; justify-content: center; margin: var(--sp-3) 0 0; }
/* 隐藏时保留占位（visibility 而非 display:none）：
   切换难度（新手 ↔ 中等/困难）时赛制行一显一隐，若收起高度会把
   下方「开始对局」按钮推得上下跳。占位后按钮位置恒定。 */
.lobby__ranked.ranked--off { visibility: hidden; }
.cost-line {
  text-align: center;
  /* 位于「开始对局」按钮下方：文案长短/折行只向下延伸（页底远山吸收），
     不再影响按钮位置 */
  margin-top: var(--sp-2);
}
.cost-line.warn {
  color: var(--c-danger, #a33);
  font-weight: 600;
}
.cost-line.hidden { display: none; }

/* 排行抽屉：我的名次卡 */
.rank-me {
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  text-align: left;
}

.rank-me__points { font-size: var(--fs-lg); font-weight: 700; }
.rank-me__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-hint); }

/* 排行列表 */
.rank-list { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; text-align: left; }

.rank-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: .5px solid var(--c-border);
  font-size: var(--fs-sm);
}

.rank-row:last-child { border-bottom: none; }
.rank-row__no { width: 30px; color: var(--c-text-hint); }
.rank-row__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row__points { color: var(--c-text-sub); }
.rank-row--me { background: var(--c-surface-2); border-radius: var(--r-xs); }

/* ------------------------------ 外观商店 ------------------------------ */
/* 面板本身去掉上下留白，让朱砂横幅顶到圆角边（视觉上更"店招"） */
.modal__panel--shop {
  max-width: 340px;
  text-align: left;
  padding: 0 0 var(--sp-4);
  overflow: hidden;
}

.modal__panel--shop .modal__actions {
  padding: var(--sp-3) var(--sp-5) 0;
}

/* 店招/任务横幅：朱砂渐变 + 白字 + 内高光，右侧金币余额大字 */
.shop-banner,
.tasks-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  background:
    linear-gradient(135deg, var(--c-brand-strong), var(--c-brand) 62%, #c65a4d);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.shop-banner__title,
.tasks-banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-brand);
  color: var(--c-on-brand);
}

.shop-banner__sub,
.tasks-banner__sub {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 253, 246, .78);
}

.shop-banner__coins,
.tasks-banner__coins {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: rgba(255, 253, 246, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, .30);
  color: var(--c-on-brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shop-banner__coins .ic {
  width: 15px;
  height: 15px;
  align-self: center;
}

.shop-banner__coins b {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
}

.shop-banner__coins i {
  font-style: normal;
  font-size: 11px;
  opacity: .85;
}

.shop-scroll {
  max-height: 48vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-5);
}

/* ------------------------------ 商城：门票优惠礼包（列表顶部主推位） ------------------------------ */
.pack-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(var(--c-accent-rgb), .45);
  border-radius: var(--r-md);
  background: var(--c-surface-warn);
  box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), .14);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.pack-card:active { opacity: .8; }

.pack-card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-brand);
  color: var(--c-on-brand);
  flex: 0 0 auto;
}

.pack-card__tile .ic { width: 20px; height: 20px; }

.pack-card__body {
  flex: 1;
  min-width: 0;
}

.pack-card__body b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.pack-card__body i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-sub);
}

.pack-card__body i.pack-card__progress { color: var(--c-text-hint); }

.pack-card__price {
  flex: 0 0 auto;
  text-align: right;
}

.pack-card__price b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-brand);
  line-height: 1;
}

.pack-card__price i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  color: var(--c-text-hint);
}

/* 本周购满：置灰不可点 */
.pack-card--sold {
  border-color: var(--c-border);
  background: var(--c-surface-2);
  box-shadow: none;
  cursor: default;
}

.pack-card--sold .pack-card__tile {
  background: var(--c-border-strong);
  color: var(--c-text-hint);
}

.pack-card--sold .pack-card__price b { color: var(--c-text-hint); }
.pack-card--sold:active { opacity: 1; }

/* 分组标题：左侧一枚朱砂小印点，呼应全站钤印母题 */
.shop-group__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-text-sub);
}

.shop-group__title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: rotate(8deg);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

/* 皮肤卡：预览色板 + 名称 + 描述 + 动作（纸面卡片，选中卡落朱砂角标） */
.shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-field);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.shop-item--active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent) inset;
}

/* 使用中：右上角一枚小朱砂印 */
.shop-item--active::after {
  content: "使用中";
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 7px;
  border-radius: 0 var(--r-sm) 0 var(--r-sm);
  background: var(--c-accent);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--c-on-accent);
}

.shop-item__swatch {
  width: 64px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-surface-2);
  margin-bottom: 2px;
}

/* 棋子预览：黑白双子交叠（色值由 JS 按皮肤令牌内联注入） */
.swatch-stone {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
}

.swatch-stone--w {
  margin-left: -8px;
  transform: translateY(3px);
}

/* 棋盘预览：渐变小方枰 + 外沿线（色值由 JS 注入） */
.swatch-board {
  width: 34px;
  height: 30px;
  border-radius: 5px;
  display: inline-block;
}

.shop-item__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

.shop-item__desc {
  min-height: 2.6em;
  font-size: 11px;
  line-height: 1.3;
  color: var(--c-text-hint);
}

.shop-item__act { margin-top: 2px; width: 100%; min-height: 30px; }
/* 装备中的卡不渲染按钮，仅保留占位高度对齐（"使用中"在右上角标） */
.shop-item__act:empty { visibility: hidden; }

.shop-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

/* 三态：使用中（仅右上角标，无按钮）/ 使用（已拥有）/ 价格（未拥有） */
.shop-item__btn--equip {
  background: var(--c-ink);
  color: var(--c-on-ink);
}

.shop-item__btn--price {
  background: var(--c-brand);
  color: var(--c-on-brand);
}

.shop-item__btn:active { opacity: .85; }

/* ------------------------------ 门票补给（右上金币/门票徽标入口） ------------------------------ */
.modal__panel--ticket { text-align: center; }

/* 余额行：门票 · 金币 两枚胶囊并排 */
.ticket-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: var(--sp-2) 0 var(--sp-3);
}

.ticket-balance__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.ticket-balance__item .ic { color: var(--c-brand); }
.ticket-balance__item b { font-weight: 700; }
.ticket-balance__item i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.ticket-balance__dot {
  font-style: normal;
  color: var(--c-text-hint);
}

.ticket-hint {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
}

/* 购票行：竖排两枚整行按钮（票面上标注单价，间距清晰） */
.ticket-buy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ------------------------------ 关于 ------------------------------ */
/* 头部：棋子标识 + 应用名 + 版本，居中一列 */
.about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--sp-3);
  text-align: center;
}

/* 复用主页 .logo 的 58×44 双石标识，只把它的下外边距收小一档 */
.about__logo { margin: 0 auto var(--sp-3); }

.about__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-brand);
  color: var(--c-text);
}

.about__ver {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

/* 分组小标题（开发与设计 / 测试与反馈 / 特别鸣谢 …） */
.about__sec {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-text-hint);
}

/* 名单行：上姓名 / 下职责。职责文案较长，横排右对齐会被挤成两行 */
.about__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: .5px solid var(--c-border);
}

.about__row:last-of-type { border-bottom: none; }

.about__who {
  font-size: var(--fs-base);
  color: var(--c-text);
}

.about__role {
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

/* 段落。pre-line 让「声明」文本里的 \n 真正换行（与 .modal__text 同一手法） */
.about__txt {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-sub);
  white-space: pre-line;
}

.about__link {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* ------------------------------ 战绩列表 ------------------------------ */
.match-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: .5px solid var(--c-border);
}

.match-row:last-child { border-bottom: none; }

.match-row__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-full);
  background: transparent;
}

/* 胜=品牌色实心，负=深边框实心，平=空心，不用红绿以免过跳 */
.match-row__dot--win { background: var(--c-brand); border-color: var(--c-brand); }
.match-row__dot--lose { background: var(--c-border-strong); border-color: var(--c-border-strong); }

.match-row__main {
  flex: 1;
  min-width: 0;
}

.match-row__title {
  overflow: hidden;
  font-size: var(--fs-base);
  color: var(--c-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-row__title i {
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--c-surface-warn);
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-sub);
}

.match-row__meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
}

.match-row__result {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-sub);
}

.match-row__result--win { color: var(--c-brand); }

/* 战绩抽屉：点「全部」弹出，标题 + 关闭并排 */
.drawer__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.drawer__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--c-text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.drawer__close:active { opacity: .6; }

/* 顶部统计条：胜 / 负 / 平 / 胜率 */
.matches-summary {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.matches-summary__item {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) 0;
  border-radius: var(--r-md);
  background: var(--c-surface-warn);
  text-align: center;
}

.matches-summary__label { font-size: var(--fs-xs); color: var(--c-text-sub); }

.matches-summary__num {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
}

.matches-summary__num--win { color: var(--c-brand); }
.matches-summary__num--lose { color: var(--c-border-strong); }

/* 按真人 / AI 分组 */
.matches-group { margin-bottom: var(--sp-4); }

.matches-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.matches-group__title::after {
  content: '';
  flex: 1;
  height: .5px;
  background: var(--c-border);
}

/* 展开「全部」时列表改为区内滚动，避免把整页撑长 */
.match-list--scroll {
  max-height: 340px;
  overflow-y: auto;
  /* 关键：滚到边界时不让滚动传递给整页（移动端嵌套滚动必加） */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.match-list--scroll::-webkit-scrollbar { width: 4px; }
.match-list--scroll::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--r-full);
}

/* 战绩行可点（进对局详情）：尾随箭头提示可点，按压反馈沿用列表惯例 */
.match-row--link { cursor: pointer; }
.match-row--link:active { opacity: .7; }
.match-row__chev {
  flex: 0 0 auto;
  color: var(--c-text-hint);
  font-size: var(--fs-md);
  line-height: 1;
}

/* 对局详情弹窗：棋谱回放（棋盘画布 + 元信息 + 手数/用时/获胜方式 + 回放滑杆） */
.modal__panel--match {
  max-width: 340px;
  text-align: left;
}

.match-detail__meta {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.match-detail__board {
  display: flex;
  justify-content: center;
}

.match-detail__board canvas {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--r-sm);
}

.match-detail__empty {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-hint);
  text-align: center;
}

.match-detail__chips {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.match-detail__chip {
  flex: 1;
  padding: var(--sp-2) 0;
  border: .5px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-warn);
  text-align: center;
}

.match-detail__chip-num {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
}

.match-detail__chip-label {
  margin-top: 2px;
  font-size: 11px;
  color: var(--c-text-sub);
}

.match-detail__slider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.match-detail__slider input { flex: 1; }

/* 回放滑杆：浏览器默认蓝色与朱砂主题不搭，改为令牌驱动的轨道 + 品牌色滑块 */
.match-detail__slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--c-border-strong);
  outline: none;
}

.match-detail__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--c-brand);
  border: 2px solid var(--c-surface);
}

.match-detail__slider-num {
  flex: 0 0 auto;
  min-width: 76px;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
}

/* ------------------------------ 任务中心弹窗（商店同款骨架） ------------------------------ */
.modal__panel--tasks {
  max-width: 340px;
  text-align: left;
  padding: 0 0 var(--sp-4);
  overflow: hidden;
}

.modal__panel--tasks .modal__actions {
  padding: var(--sp-3) var(--sp-5) 0;
}

.tasks-scroll {
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-4);
}

/* 签到卡：融入任务窗口顶部（连续天数 + 7 天奖励轨迹 + 签到按钮） */
.checkin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-surface-warn);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.checkin-card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-brand);
  flex: 0 0 auto;
}

.checkin-card__tile .ic { width: 18px; height: 18px; }

.checkin-card__main {
  flex: 1;
  min-width: 0;
}

.checkin-card__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.checkin-card__dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}

.checkin-card__dots i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-border-strong);
}

.checkin-card__dots i.checkin-dot--on { background: var(--c-brand); }

.checkin-card__dots i.checkin-card__streak {
  width: auto;
  height: auto;
  margin-left: auto;
  background: none;
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-sub);
  white-space: nowrap;
}

.checkin-card__btn {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  background: var(--c-brand);
  color: var(--c-on-brand);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.checkin-card__btn:active { opacity: .75; }

.checkin-card__btn--done {
  background: var(--c-surface-2);
  color: var(--c-text-hint);
  cursor: default;
}

.checkin-card__btn--done:active { opacity: 1; }

.task-group__title {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: .5px solid var(--c-border);
}

.task-row:last-child { border-bottom: none; }

.task-row__main {
  flex: 1;
  min-width: 0;
}

.task-row__name {
  font-size: var(--fs-sm);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row__name i {
  margin-left: 5px;
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-hint);
}

.task-row__bar {
  height: 4px;
  margin-top: 6px;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  overflow: hidden;
}

.task-row__bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--c-success);
  transition: width var(--dur) var(--ease-out);
}

.task-row__reward {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--c-text-hint);
}

.task-row__reward--ready {
  color: var(--c-brand);
  font-weight: 600;
}

.task-row__btn {
  flex: 0 0 auto;
  border: .5px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 5px 14px;
  font-family: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  background: var(--c-surface-warn);
  color: var(--c-text-sub);
}

.task-row__btn--ready {
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-color: var(--c-brand);
}

.task-row__btn--done {
  background: var(--c-surface-warn);
  color: var(--c-text-hint);
  border-color: transparent;
  cursor: default;
}

.task-row__btn:disabled { cursor: default; opacity: .8; }

.btn--sm {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-size: var(--fs-sm);
}

/* ------------------------------ 登录 / 注册弹窗 ------------------------------ */
.modal__panel--auth { text-align: left; }
.modal__panel--auth .modal__title { margin-bottom: var(--sp-4); }

.auth-hint {
  min-height: 18px;
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--c-danger);
}

.auth-switch {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}

.link-btn {
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--c-brand);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.link-btn:hover { text-decoration: underline; }

/* ------------------------------ 好友 ------------------------------ */
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
}

.friend-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--c-border);
}
.friend-row:last-child { border-bottom: none; }

.friend-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-dot-off);
}
.friend-dot--on { background: var(--c-success); }

.friend-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-name small {
  margin-left: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.friend-op {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-2);
}

/* 好友申请 */
.request-row {
  padding: 10px var(--sp-3);
  margin-bottom: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-warn);
  border: 1px solid var(--c-border-warn);
}
.request-row__text {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
}
.request-row__op {
  display: flex;
  gap: var(--sp-2);
}
.request-row__op .btn {
  flex: 1;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  font-size: var(--fs-sm);
}

/* 搜索结果（弹窗内） */
.search-result {
  max-height: 240px;
  margin-top: var(--sp-1);
  overflow-y: auto;
}
.search-result .friend-row { padding: 9px 0; }

/* ------------------------------ 大厅 ------------------------------ */
.lobby__head {
  position: relative;   /* 资产条（金币/门票徽标）钉在头部右上角 */
  text-align: center;
  padding: var(--sp-5) 0 var(--sp-5);
}

.lobby__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--ls-title);
  text-indent: var(--ls-title); /* 抵消末字字距，保持视觉居中 */
}

/* 大厅入场：一次编排的交错淡入，比零散的微动效高级得多 */
#lobby.view--active .lobby__head { animation: rise-in var(--dur-slow) var(--ease-out) both; }
#lobby.view--active #btn-create  { animation: rise-in var(--dur-slow) var(--ease-out) 60ms both; }
#lobby.view--active .join-box    { animation: rise-in var(--dur-slow) var(--ease-out) 120ms both; }

.card {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-e1), var(--c-highlight) 0 1px 0 inset;
  border: 1px solid transparent;
}

.card__title {
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  margin-bottom: var(--sp-2);
}

.card__actions {
  display: flex;
  gap: 10px;
  margin-top: var(--sp-3);
}

.card__actions .btn {
  flex: 1;
}

.card--room {
  text-align: center;
  border-color: var(--c-border);
}
.card--room:not(.hidden) { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.card--room .btn--danger-ghost { margin-top: var(--sp-2); }

/* 房间号：做成一块小牌匾 */
.room-code {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: var(--ls-code);
  color: var(--c-brand);
  margin: var(--sp-1) 0 var(--sp-3);
  position: relative;
  display: inline-block;
  /* 房间号允许复制 */
  -webkit-user-select: all;
  user-select: all;
}

.room-code::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  opacity: .85;
}

.divider {
  position: relative;
  text-align: center;
  margin: var(--sp-5) 0;
  height: 1px;
  background: var(--c-border);
}

.divider span {
  position: relative;
  top: -11px;
  background: var(--c-surface);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}

.field { margin-bottom: var(--sp-3); }

.field__label {
  display: block;
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  margin-bottom: var(--sp-2);
}

.field__row {
  display: flex;
  gap: 10px;
}

.input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: 4px;
  text-transform: uppercase;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-field);
  color: var(--c-text);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.input::placeholder { color: var(--c-text-hint); letter-spacing: 0; text-transform: none; }

.input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-surface-2);
}

.hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: var(--lh-base);
}

.hint code {
  background: var(--c-surface-2);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}

/* ------------------------------ 按钮 ------------------------------ */
.btn {
  /* 最小可点击区域 44×44 */
  min-width: 44px;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  border: none;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}

.btn:active {
  transform: scale(.97);
  opacity: .9;
}

.btn[disabled] {
  opacity: .45;
  pointer-events: none;
}

/* 键盘焦点可见环（鼠标点击不出现，避免视觉噪音） */
.btn:focus-visible,
.link-btn:focus-visible,
.tab:focus-visible,
.sw:focus-visible,
.seg button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.btn--block {
  display: block;
  width: 100%;
}

/* 主操作大按钮（方案 A：朱砂钤盖感 —— 楷体大字距 + 印泥投影 + 纸面高光） */
.btn--hero {
  height: 56px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--ls-cta);
  text-indent: var(--ls-cta);
  border-radius: var(--r-md);
  box-shadow:
    0 10px 24px rgba(var(--c-accent-rgb), .30),
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -2px 0 rgba(0, 0, 0, .14);
}

.btn--hero:active {
  transform: scale(.98);
}

.btn--hero:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(var(--c-accent-rgb), .34),
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -2px 0 rgba(0, 0, 0, .14);
}

/* 加入房间（折叠展开） */
.join-box {
  margin-top: var(--sp-4);
  text-align: center;
}

.join-toggle {
  border: none;
  background: none;
  color: var(--c-text-sub);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.join-toggle:hover { color: var(--c-brand); }
.join-toggle:active { opacity: .6; }

.join-panel {
  margin-top: var(--sp-3);
  text-align: left;
}

.join-panel .hint {
  margin-top: 10px;
}

/* 主行动：朱砂（开始对局 / 弹窗确认 / 签到 / 完成…） */
.btn--primary {
  background: var(--c-brand);
  color: var(--c-on-brand);
  box-shadow: var(--sh-e2);
}

.btn--primary:active {
  background: var(--c-brand-strong);
  box-shadow: var(--sh-e1);
}

/* 次级实心：墨色（加入 / 购票等次级确认），与朱砂形成"墨选朱行"层级 */
.btn--default {
  min-width: 72px;
  background: var(--c-ink);
  color: var(--c-on-ink);
  box-shadow: var(--sh-e2);
}

.btn--default:active {
  background: var(--c-text);
  box-shadow: var(--sh-e1);
}

.btn--ghost {
  background: var(--c-surface-2);
  color: var(--c-brand);
}

.btn--danger-ghost {
  background: transparent;
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}

/* ------------------------------ 对局页 ------------------------------ */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 5px var(--sp-2); /* 收紧：把垂直空间让给棋盘 */
  margin-bottom: var(--sp-2);
  box-shadow: var(--sh-e1), var(--c-highlight) 0 1px 0 inset;
}

.statusbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* min-width:0 允许收缩；overflow:hidden 兜底 —— 任何值再长也只在这一格里截断，
     绝不横向溢出压到相邻格子（此前"黑方（你）"就因此与"手数"重叠） */
  min-width: 0;
  overflow: hidden;
}

.btn-sound {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 30px; /* 收紧：状态栏高度的主要决定因素 */
  padding: 0 4px;
  font-size: var(--fs-md);
  line-height: 1;
  border: none;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-out);
}

/* 音效按钮的 SVG 略小一号，与状态栏数字对齐 */
.btn-sound .ic { width: 16px; height: 16px; }

.btn-sound:active { opacity: .7; }

.statusbar__label {
  font-size: 11px;
  color: var(--c-text-sub);
}

.statusbar__value {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
}

/* 轮到你：用朱砂色高亮轮次值（替代原来的"（你）"后缀，见 game.js 注释） */
.statusbar__value--mine {
  color: var(--c-accent);
}

.statusbar__value--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  letter-spacing: 1px;
}

/* 实时胜率条（仅 AI 房显示）：
   左我方% | 中间双色对拉条 | 右对手% | 迷你趋势线。
   颜色一律取棋子令牌（--c-stone-black-* / --c-stone-white-*），
   由 data-self 决定哪边填哪色，三套主题自动适配。 */
.winrate {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 6px var(--sp-3);
  margin-bottom: var(--sp-3);
  box-shadow: var(--sh-e1), var(--c-highlight) 0 1px 0 inset;
}

.winrate__pct {
  flex: 0 0 auto;
  min-width: 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  font-variant-numeric: tabular-nums;
}

.winrate__pct--self { text-align: left; font-weight: 700; color: var(--c-text); }
.winrate__pct--opp { text-align: right; }

.winrate__track {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--c-stone-white-2); /* 对方（默认白）一侧的底色 */
  border: 1px solid var(--c-border);
}

.winrate__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--c-stone-black-2); /* 我方（默认黑）一侧的填充 */
  transition: width var(--dur-slow) var(--ease-out);
}

/* 我方执白时对调：填充用白子色、底色用黑子色 */
.winrate[data-self="white"] .winrate__fill { background: var(--c-stone-white-1); }
.winrate[data-self="white"] .winrate__track { background: var(--c-stone-black-1); }

.winrate__mid {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: var(--c-accent);
  opacity: .55;
}

.winrate__trend {
  flex: 0 0 auto;
  width: 56px;
  height: 24px;
  border-left: 1px solid var(--c-border);
  padding-left: 2px;
}

.winrate__trend-mid {
  stroke: var(--c-border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.winrate__trend-line {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* 窄屏收起趋势线：保住棋盘空间，主条与数字不缩 */
@media (max-width: 420px) {
  .winrate__trend { display: none; }
}

.dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-dot-black-2);
  border: 1px solid var(--c-border-strong);
  vertical-align: middle;
}

.dot--black {
  background: radial-gradient(circle at 32% 32%, var(--c-dot-black-1), var(--c-dot-black-2));
}

.dot--white {
  background: radial-gradient(circle at 32% 32%, var(--c-dot-white-1), var(--c-dot-white-2));
}

.board-wrap {
  position: relative; /* 作为气泡的定位容器 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 吃掉剩余高度：棋盘尺寸由这个容器的实测尺寸决定，
     不再用 window.innerHeight 减魔法数估算（见 js/board.js 的 resize） */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

#board {
  display: block;
  border-radius: 6px;
  background: var(--c-board-bg);
  /* 方案 A：裱边 —— canvas 外一圈"托裱纸 + 细沿线"。
     box-shadow 不占布局尺寸，棋盘实测大小与原先完全一致（见 js/board.js）；
     裱边取皮肤令牌 --c-board-mount / --c-board-frame-line，换棋盘皮肤时同步变化。 */
  box-shadow:
    0 0 0 6px var(--c-board-mount),
    0 0 0 7px var(--c-board-frame-line),
    var(--sh-e2);
  /* 棋盘区域禁止滚动与手势缩放 */
  touch-action: none;
}

.tip {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}

/* ------------------------------ 玩家信息条 ------------------------------ */
.playerbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  gap: var(--sp-2);
}

.player {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 48%;
  min-width: 0;
  padding: 5px 9px;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}

.player--self { justify-content: flex-end; }

/* 当前行动方：朱砂描边 + 呼吸光晕，一眼看清该谁走 */
.player--turn {
  border-color: var(--c-accent);
  background: var(--c-surface);
  animation: turn-pulse 1.9s var(--ease-in-out) infinite;
}

@keyframes turn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .26); }
  60%      { box-shadow: 0 0 0 7px rgba(var(--c-accent-rgb), 0); }
}

.player__avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 22%;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player__avatar--opponent { background: var(--c-stone-black-2); }
.player__avatar--self { background: var(--c-brand); }

.player__name {
  font-size: var(--fs-base);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player__status {
  font-size: 11px;
  color: var(--c-success);
  flex: 0 0 auto;
}

/* 行动方的"思考中…"：轻微呼吸，提示局面在推进 */
.player__status--think {
  color: var(--c-accent);
  animation: think-pulse 1.4s var(--ease-in-out) infinite;
}

@keyframes think-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .38; }
}

/* ------------------------------ 聊天气泡 ------------------------------ */
.chat__list {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 气泡不拦截落子手势 */
  overflow: hidden;
  z-index: var(--z-bubble);
}

/* 气泡：对手左下、我方右下，浮于棋盘，自动淡出 */
.bubble {
  position: absolute;
  max-width: 68%;
  padding: 7px 11px;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: var(--sh-e2);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-back);
}

.bubble--show {
  opacity: 1;
  transform: none;
}

.bubble--them {
  left: var(--sp-2);
  bottom: 56px;
  background: var(--c-surface);
  color: var(--c-text);
  border-bottom-left-radius: var(--r-xs);
}

.bubble--me {
  right: var(--sp-2);
  bottom: 56px;
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-bottom-right-radius: var(--r-xs);
}

/* 聊天条容器：作为输入条与 emoji 面板的定位父级 */
.chat-bar {
  position: relative;
}

.chat__row {
  display: flex;
  gap: 6px;
  margin-top: var(--sp-2); /* 收紧：给棋盘让高度 */
  background: var(--c-surface);
  border-radius: var(--r-sm);
  padding: 4px;
  box-shadow: var(--sh-e1);
}

.chat__input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-field);
  color: var(--c-text);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.chat__input::placeholder { color: var(--c-text-hint); }
.chat__input:focus { border-color: var(--c-brand); }

/* `readonly` 是"键盘静默"门闩（见 public/index.html 的注释与 js/game.js 的 lockChatInput）：
   它只负责不让点击/聚焦唤起输入法，视觉上必须与普通可输入态完全一致。
   部分浏览器会给 [readonly] / :read-only 套用灰底灰字，这里显式覆盖回来。 */
.chat__input[readonly] {
  background: var(--c-field);
  color: var(--c-text);
}

.btn--icon {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 0 6px;
  font-size: var(--fs-sm);
  background: var(--c-surface-2);
  color: var(--c-text-sub);
  height: 34px;
  border-radius: var(--r-xs);
}

.btn--send {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 0 10px;
  font-size: var(--fs-sm);
  background: var(--c-ink);
  color: var(--c-on-ink);
  height: 34px;
  border-radius: var(--r-xs);
}

/* emoji 面板：绝对定位，浮在输入行上方 */
.emoji-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-1);
  padding: var(--sp-2);
  background: var(--c-field);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-e3);
  z-index: var(--z-emoji);
  animation: rise-in var(--dur-fast) var(--ease-out) both;
}

.emoji-panel button {
  min-width: 0;
  min-height: 40px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  border: none;
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
}

.emoji-panel button:active {
  background: var(--c-surface-2);
}

/* ------------------------------ 聊天记录面板 ------------------------------ */
/* 移动端：底部滑入的浮层（默认隐藏，点「记录」展开） */
.chat-history__mask {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  z-index: 44;
  animation: modal-in var(--dur) var(--ease-out);
}

.chat-history {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  max-height: 62vh;
  min-height: 200px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-e4);
  transform: translateY(102%);
  visibility: hidden;
  /* 关闭时 visibility 延迟到滑出动画结束后再隐藏，避免"啪"地消失 */
  transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.chat-history--open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur) var(--ease-out);
}

.chat-history__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-border);
}

.chat-history__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-brand);
}

.chat-history__close {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-text-sub);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.chat-history__close:active { opacity: .6; }

.chat-history__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 空状态提示 */
.chat-history__list:empty::before {
  content: "对局中还没有消息，来说第一句吧";
  margin: 18px auto;
  font-size: var(--fs-sm);
  color: var(--c-text-hint);
}

/* 单条消息：自己靠右、对手靠左 */
.chat-msg {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 84%;
}

.chat-msg--me {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-msg__bubble {
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-msg--me .chat-msg__bubble {
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-bottom-right-radius: var(--r-xs);
}

.chat-msg--them .chat-msg__bubble {
  border-bottom-left-radius: var(--r-xs);
}

.chat-msg__meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--c-text-sub);
}

/* ------------------------------ 对局菜单（⋯ 弹出） ------------------------------ */
.game-menu {
  position: absolute;
  top: 50px;
  right: var(--sp-2);
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 152px;
  padding: var(--sp-1);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-e4);
}

.game-menu__item {
  padding: 10px var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.game-menu__item:active { background: var(--c-surface-warn); }

.game-menu__item--danger { color: var(--c-danger); }

.actions {
  display: flex;
  flex-direction: column; /* 主次分明：主按钮整行，次要操作并排一行 */
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}

.actions__main {
  width: 100%;
  height: 38px;
  min-height: 38px;
  font-size: var(--fs-base);
  /* 方案 A：悔棋是低频兜底操作，做成"纸面 + 细边"的弱实心，不与朱砂主行动抢层级 */
  background: var(--c-surface);
  color: var(--c-text-sub);
  border: 1px solid var(--c-border);
  box-shadow: none;
}

.actions__main:active {
  background: var(--c-surface-2);
  color: var(--c-text);
  box-shadow: none;
}

.actions__row {
  display: flex;
  gap: var(--sp-2);
}

.actions__row .btn {
  flex: 1;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
}

/* AI 提示（PvP）：朱砂描边纸面按钮，与墨色悔棋并排（提示=建议，弱于主行动） */
.btn--hint {
  background: var(--c-surface);
  color: var(--c-brand);
  border: 1px solid var(--c-accent);
  box-shadow: none;
  font-weight: 600;
}

.btn--hint:active {
  background: var(--c-surface-warn);
  color: var(--c-brand);
  box-shadow: none;
}

/* ------------------------------ Toast ------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));
  transform: translate(-50%, 12px);
  max-width: 80vw;
  padding: 11px 18px;
  border-radius: var(--r-full);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: 15px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--sh-e3);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  z-index: var(--z-toast);
}

.toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------ 模态框 ------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-scrim);
  padding: var(--sp-5);
  z-index: var(--z-modal);
  animation: modal-in var(--dur-fast) var(--ease-out);
}

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

.modal__panel {
  width: 100%;
  max-width: 320px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: center;
  box-shadow: var(--sh-e4);
  animation: panel-in var(--dur-slow) var(--ease-back) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.modal__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}

/* 结果图标：用圆形色块 + 中文字，避免依赖图片或字体图标 */
.modal__icon--circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--c-on-accent);
  margin-bottom: var(--sp-3);
  transform: rotate(-8deg);
}

.modal__icon--win  { background: var(--c-accent); }
.modal__icon--lose { background: var(--c-text-sub); }
.modal__icon--draw { background: var(--c-brand); }
.modal__icon--info { background: var(--c-brand); font-size: 22px; }

.modal__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--ls-brand);
}

.modal__text {
  margin: 0 0 var(--sp-5);
  font-size: 15px;
  color: var(--c-text-sub);
  white-space: pre-line;
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal__actions--row {
  flex-direction: row;
}

.modal__actions .btn {
  width: 100%;
  flex: 1;
}

/* ------------------------------ 设置抽屉 ------------------------------ */
.drawer-mask {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  z-index: var(--z-drawer);
  animation: modal-in var(--dur) var(--ease-out);
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  background: var(--c-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-e4);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
  padding-left: calc(var(--sp-4) + var(--safe-left));
  padding-right: calc(var(--sp-4) + var(--safe-right));
  max-height: 86vh;
  overflow-y: auto;
  animation: drawer-in var(--dur) var(--ease-out) both;
}

@keyframes drawer-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.drawer__bar {
  width: 38px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--c-border);
  margin: 0 auto var(--sp-3);
}

.drawer__title {
  margin: 0 0 var(--sp-3);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-brand);
}

.setrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 2px;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-base);
  min-height: 52px;
}
.setrow:last-of-type { border-bottom: none; }

.setrow__n { flex: 1; min-width: 0; }
.setrow__n b { display: block; font-weight: 600; }
.setrow__n i {
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-sub);
}

/* 开关 */
.sw {
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
  border-radius: var(--r-full);
  background: var(--c-border);
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out);
}

.sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--c-field);
  box-shadow: 0 1px 3px rgba(var(--sh-rgb), .30);
  transition: transform var(--dur-fast) var(--ease-back);
}

.sw[aria-checked="true"] { background: var(--c-brand); }
.sw[aria-checked="true"]::after { transform: translateX(19px); }

/* 分段选择 */
.seg {
  display: flex;
  gap: 2px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 3px;
  flex: 0 0 auto;
}

.seg button {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  padding: 6px 11px;
  border-radius: var(--r-full);
  color: var(--c-text-sub);
  cursor: pointer;
  min-height: 30px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.seg button[aria-pressed="true"] {
  background: var(--c-ink);
  color: var(--c-on-ink);
}

.seg button[disabled] { opacity: .4; cursor: not-allowed; }

.drawer__actions {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}

/* ------------------------------ 掉线宽限环形倒计时 ------------------------------ */
.grace {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--sp-2) 0 0;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}

.grace.hidden { display: none !important; }

.grace__ring {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--c-accent) var(--grace-deg, 100%), var(--c-border) 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 100%);
  mask: radial-gradient(circle, transparent 54%, #000 56%, #000 100%);
}

.grace b {
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ------------------------------ 小屏适配 ------------------------------ */
@media (max-width: 360px) {
  .lobby__title { font-size: 24px; }
  .room-code { font-size: var(--fs-2xl); letter-spacing: 6px; }
  .btn { font-size: 15px; padding: 0 var(--sp-3); }
}

/* ------------------------------ PC / 平板：双栏布局 ------------------------------ */
/* 只在 ≥768px 生效，移动端 DOM 顺序与视觉完全不变 */
/* 注意：必须写 `#game.view--active` 而不是 `#game.view`。
   后者的 id 选择器特异性会压过 `.view { display:none }`，
   导致未激活的对局页也一起显示出来（大厅与对局页叠在一起）。 */
@media (min-width: 768px) {
  #game.view--active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
      "board status"
      "board winrate"
      "board players"
      "board history"
      "board chat"
      "board actions";
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-5) var(--sp-5) var(--sp-5);
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
  }

  .board-wrap {
    grid-area: board;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .statusbar { grid-area: status; margin-bottom: 0; }
  .winrate   { grid-area: winrate; margin-bottom: 0; }
  .playerbar { grid-area: players; margin-top: 0; }
  .chat-bar  { grid-area: chat; align-self: end; }
  .actions   { grid-area: actions; margin-top: 0; padding-top: 0; }

  /* 聊天记录在桌面端常驻右侧：变回普通流、占满 history 网格格 */
  .chat-history {
    grid-area: history;
    position: static;
    transform: none;
    visibility: visible;
    max-height: none;
    min-height: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-e1);
    overflow: hidden;
  }

  .chat-history__head { padding: 8px 14px; }
  .chat-history__close { display: none; }  /* 常驻区不需要关闭按钮 */
  .chat-history__mask { display: none; }
  #btn-history { display: none; }  /* 常驻区不需要入口按钮 */

  /* 棋盘区域下方那句提示在双栏布局里是噪音，隐藏掉 */
  .tip { display: none; }

  .player { max-width: none; }
}

/* ------------------------------ 横屏手机：棋盘在左、操作在右 ------------------------------ */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  #game.view--active {
    display: grid;
    grid-template-columns: auto minmax(200px, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "board status"
      "board players"
      "board chat"
      "board actions";
    gap: var(--sp-2);
    padding: var(--sp-2);
    align-items: start;
  }

  .board-wrap { grid-area: board; }
  .statusbar { grid-area: status; margin-bottom: 0; padding: 6px var(--sp-1); }
  .playerbar { grid-area: players; margin-top: 0; }
  .chat-bar  { grid-area: chat; align-self: end; }
  .actions   { grid-area: actions; margin-top: 0; padding-top: 0; }
  .tip { display: none; }
  .player { max-width: none; }
  .tabbar { display: none; }
}

/* ------------------------------ 人机对战（AI） ------------------------------ */

/* 大厅的模式 / 难度选择：两枚分段控件横排，窄屏允许换行 */
.lobby__mode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  align-items: center;
  /* 现在位于标题与主按钮之间：上方与标题区拉开，下方给主按钮留出间距 */
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-4);
}

/* AI 难度选择：紧贴模式选择器下方，与主按钮之间留出间距 */
.lobby__level {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* AI 头像：与真人「首字头像」区分开——方形圆角 + 品牌描边，一眼看出是机器 */
.player__avatar--bot {
  background: var(--c-surface-2);
  color: var(--c-brand);
  border: 1.5px solid var(--c-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

/* AI 一方轮到它行动时，头像底色转为品牌色系，配合下面的脉冲动画更醒目 */
.player--bot.player--turn .player__avatar--bot {
  background: var(--c-brand);
  color: var(--c-on-brand);
}

/* 「思考中…」时的头像脉冲：给等待一个明确的视觉锚点。
   仅用 opacity/scale 这类合成属性，避免触发重排。 */
.player--bot .player__avatar--bot {
  transition: opacity var(--dur-fast) var(--ease-out);
}
.player--turn.player--bot .player__avatar--bot {
  animation: bot-think 1.1s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes bot-think {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}


/* 用户要求减少动效：保留信息完整性，只去掉位移与脉冲 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 增强对比度：取消半透明、加粗描边 */
@media (prefers-contrast: more) {
  .card,
  .statusbar,
  .modal__panel,
  .drawer {
    border: 1.5px solid var(--c-border-strong);
  }
  .player { border: 1.5px solid var(--c-border-strong); }
  .bubble--them { border: 1.5px solid var(--c-border-strong); }
}