/* ==================== 单人游戏页（/play/{puzzle}） ====================
 * 由多人游戏页样式（multi.css）复制裁剪而来：保留全屏壳 / 棋盘层 / 右中竖排工具栏 /
 * 设置与帮助弹窗 / 完成弹窗及通用弹窗基础；多人专属模块（房间状态、完成数排行、
 * 在线聊天、玩家列表、邀请弹窗、重新排列投票、房间大厅与满员推荐、断连提示、广告位）
 * 全部移除。两份样式各自独立维护，互不影响。 */

/* ---------- 全屏壳 ---------- */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; }
.page-fullscreen { height: 100%; }
.site-main--fullscreen { max-width: none; margin: 0; padding: 0; min-height: 100%; }

.single-app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}

/* ---------- 棋盘 layer（黑底，无边框，铺满） ---------- */
.single-stage {
  position: absolute;
  inset: 0;
  background: #000;
}
.single-canvas { position: absolute; inset: 0; }

/* ---------- 右中：竖排工具栏（默认窄条仅图标，悬停/点击展开图标+文字；计时在顶、返回在底） ---------- */
.single-tools {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}
.single-tools__inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 46px;
  padding: 10px 0 12px;
  background: rgba(16, 20, 26, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 0 26px rgba(0, 0, 0, .5);
  overflow: hidden;
  transition: width .28s var(--ease-base);
}
.single-tools:hover .single-tools__inner,
.single-tools.is-open .single-tools__inner { width: 132px; }

/* 计时（顶部） */
.mtool-timer {
  font-size: .74rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 2px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mtool-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 0 0 5px;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background var(--ease-base);
}
.mtool-icon {
  flex: 0 0 36px;
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--ease-base);
}
.mtool-icon svg { width: 21px; height: 21px; }
.mtool-label {
  font-size: .84rem;
  font-weight: 500;
  line-height: 1;
  color: #eee;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s var(--ease-base), transform .22s var(--ease-base);
}
.single-tools:hover .mtool-label,
.single-tools.is-open .mtool-label { opacity: 1; transform: translateX(0); }

.mtool-btn:hover { background: rgba(74, 144, 217, .55); }
.mtool-btn:hover .mtool-icon { transform: scale(1.08); }
.mtool-btn:hover .mtool-icon,
.mtool-btn:hover .mtool-label { color: #fff; }

/* 声音图标：默认声音开（右侧两弧），静音时右侧两弧变为 × */
.msound { display: inline-flex; }
.msound--off { display: none; }
.mtool-btn.is-muted .msound--on { display: none; }
.mtool-btn.is-muted .msound--off { display: inline-flex; }
.mtool-btn--back {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 4px;
  border-radius: 9px 9px 0 0;
}

/* 暂停图标：默认显示「暂停」（‖），暂停态切换为「继续」（▶） */
.mico { display: inline-flex; }
.mico--play { display: none; }
.mtool-btn.is-paused .mico--pause { display: none; }
.mtool-btn.is-paused .mico--play { display: inline-flex; }

/* ==================== 弹窗（设置 / 帮助 / 完成）：白卡 ==================== */
.mmodal {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}
.mmodal[hidden] { display: none; }
.mmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mmodal__card {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  padding: 64px 28px 24px;
  color: #23262b;
  text-align: center;
}
.mmodal__card--settings {
  width: min(620px, 100%);
  padding: 26px 30px 28px;
  text-align: left;
}
/* 完成弹窗：背景不做羽化/模糊，庆祝烟花可直接从画布透出（仅保留居中白卡） */
[data-finish-modal] .mmodal__backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 游戏设置弹窗：背景不做羽化/模糊（仅保留半透明暗色遮罩） */
[data-settings-modal] .mmodal__backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 去掉顶部半圆徽标后收紧上内边距，卡片高度随内容自适应 */
.mmodal__card--finish { border: 3px solid #2f9e44; padding: 36px 28px 28px; }

.mmodal__close {
  position: absolute;
  top: 12px; right: 14px;
  width: 34px; height: 34px;
  border: none; background: transparent;
  color: #b9bdc4; font-size: 1.5rem; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: background var(--ease-base), color var(--ease-base);
}
.mmodal__close:hover { background: rgba(0, 0, 0, .06); color: #23262b; }

.mmodal__title {
  margin: 0 0 14px;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.mmodal__title--green { color: #2f9e44; }

/* 设置弹窗内部 */
.msettings { display: flex; flex-direction: column; gap: var(--space-2); }
.mmodal .jsection__label { color: var(--color-text); font-weight: 600; }
.jsection__hint { font-size: .76rem; color: var(--color-text-muted); margin: -2px 0 8px; }

/* 背景颜色 / 背景图案预设（放大色块与缩略图，便于直观辨别） */
.jswatch-row,
.jpattern-row { display: flex; flex-wrap: wrap; gap: 10px; }
.jswatch {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--color-border); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-base), border-color var(--ease-base);
}
.jswatch:hover { transform: scale(1.08); border-color: var(--color-primary); }
.jswatch.is-active { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.jpattern {
  width: 84px; height: 56px; border-radius: 10px;
  border: 1px solid var(--color-border); cursor: pointer;
  background-color: var(--color-bg); position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-base), border-color var(--ease-base);
}
.jpattern:hover { transform: scale(1.04); border-color: var(--color-primary); }
.jpattern.is-active { outline: 2px solid var(--color-primary); outline-offset: 3px; }
/* 背景图案预设缩略图：与目标站 puzzlegarage.com 的 3 个图案一致（底色同目标站缩略图） */
.jpattern--fabric { background-color: #3e4346; background-image: url('/themes/default/images/play_bg.png'); }
.jpattern--checker { background-color: #3e4346; background-image: url('/themes/default/images/play_bg2.svg'); }
.jpattern--none { background: #e0e2e2; }

/* 帮助弹窗内部（操作说明条目） */
.mmodal__card--help {
  width: min(620px, 100%);
  padding: 26px 30px 28px;
  text-align: left;
}
.mhelp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mhelp__item { font-size: .9rem; line-height: 1.65; color: #374151; }
.mhelp__item b { color: #23262b; }
.mhelp__item kbd {
  display: inline-block; min-width: 20px; text-align: center; padding: 1px 6px; margin: 0 2px;
  background: #eef1f5; border: 1px solid var(--color-border); border-bottom-width: 2px;
  border-radius: 4px; font-size: .74rem; font-family: inherit; color: var(--color-text);
}

/* 完成弹窗 */
.mfinish__sub { margin: 4px 0 18px; font-size: 1.05rem; color: #4b5563; }
.mfinish__label { margin: 0 0 10px; font-size: .92rem; font-weight: 600; color: #6b7280; }
.mfinish__label b { color: #23262b; font-variant-numeric: tabular-nums; }
.mfinish__result { margin: 6px 0 0; font-size: .95rem; color: #4b5563; }

/* ---------- 左上角：返回首页 + 拼图名称/块数（透明浮动） ---------- */
.single-status {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* 深色半透明卡片：统一承载「导航 → 标识 → 数据 → 操作」四层，收紧占用面积 */
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: rgba(0, 0, 0, .45);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  /* 纯展示 HUD：不拦截画布指针事件——否则其透明矩形下方的散块会被“隐形玻璃”
     挡住点不动（与多人页 .multi-status 同口径）。仅内部链接恢复可点。 */
  pointer-events: none;
}
.single-status .single-home,
.single-status .single-status__link { pointer-events: auto; }
/* 第一行：返回首页 + 单人游戏（链接）；第二行：拼图名称 + 块数 */
.single-status__row { display: flex; align-items: center; gap: 10px; max-width: 40vw; }
.single-home {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(16, 20, 26, .72);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ease-base), border-color var(--ease-base);
}
.single-home:hover { background: rgba(74, 144, 217, .55); border-color: rgba(255, 255, 255, .5); }
/* 首页按钮双文案：默认（PC/平板）显全称，短文案隐藏；移动端在 767 块内反向切换 */
.home-label-short { display: none; }
.single-status__link {
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  /* 需求：左上角链接去除底部横线（常态与 hover 均不出现） */
  text-decoration: none;
  transition: color var(--ease-base);
}
.single-status__link:hover { color: #9ecbff; }
.single-status__title { color: #fffe; font-size: .95rem; font-weight: 600; min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.single-status__pieces { flex-shrink: 0; color: rgba(255, 255, 255, .62); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 数据层：当前会员名（未登录显示「游客」）——低权重小字，不喧宾夺主；纯展示不拦截画布指针 */
.single-status__user { gap: 6px; font-size: .8rem; font-weight: 400; color: rgba(255, 255, 255, .72); }
.single-status__user-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }
.single-status__username { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ---------- 状态区操作（收藏 / 分享）：HUD 容器 pointer-events:none，仅按钮自身恢复可点；
   其余透明区域继续放行画布（不会让「下方块点不动」问题回归） ---------- */
.status-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(16, 20, 26, .72);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  text-shadow: none;
  pointer-events: auto;
  transition: background var(--ease-base), border-color var(--ease-base), color var(--ease-base);
}
.status-act:hover { background: rgba(74, 144, 217, .55); border-color: rgba(255, 255, 255, .5); }
.status-act__icon { width: 15px; height: 15px; flex-shrink: 0; }
/* 收藏选中态：金色胶囊 + 实心星（未选中为深色胶囊 + 描边星） */
.status-act.is-on { background: rgba(255, 209, 102, .92); border-color: rgba(255, 209, 102, .95); color: #1d2129; }
.status-act.is-on:hover { background: rgba(255, 217, 128, .96); border-color: #ffe3a3; }
.status-act.is-on .status-act__icon { fill: currentColor; }

/* ---------- 分享弹窗：平台列表（白卡内两列胶囊） ---------- */
.share-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e5ebf3;
  border-radius: 10px;
  background: #f7f9fc;
  color: #2a3442;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s linear, border-color .15s linear, color .15s linear;
}
.share-item:hover { background: #eef4fd; border-color: #0d6ee3; color: #0d6ee3; }
.share-item__icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 右上角：总排行榜（透明浮动；默认前 3 名，展开后前 20 名；
   与语言选择同行、位于其左侧；right 162px = 页面边距 14 + 语言胶囊占位宽 140 + 间隙 8） ---------- */
.single-rank {
  position: absolute;
  top: 14px; right: 162px;
  z-index: 20;
  width: 232px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  /* 半透明浮层：整体放行画布指针——下方的散块可正常点击/拖动；
     仅「展开/收起」按钮保持可点（纯展示文本不拦截） */
  pointer-events: none;
}
.single-rank .single-rank__toggle { pointer-events: auto; }
.single-rank__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.single-rank__title { font-size: .88rem; font-weight: 700; color: #fffe; }
.single-rank__toggle {
  border: none; background: transparent;
  color: rgba(255, 255, 255, .75); font-size: .78rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--ease-base);
}
.single-rank__toggle:hover { color: #fff; }
.single-rank__toggle[hidden] { display: none; }
.single-rank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.single-rank__item { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: rgba(255, 255, 255, .92); }
.single-rank__no { width: 18px; text-align: center; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.single-rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.single-rank__time { color: #9ecbff; font-weight: 700; font-variant-numeric: tabular-nums; }
.single-rank__empty { color: rgba(255, 255, 255, .5); font-size: .8rem; }

/* ---------- 右上角：语言选择（就地切换游戏页语言；<details> 纯 CSS 展开，无 JS 依赖；
   z-index 105：高于大厅/推荐对话框（100），保证房间弹层期间仍可直接切语言；低于弹窗（110）---------- */
.page-locale { position: absolute; top: 14px; right: 14px; z-index: 105; }
.page-locale__trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 140px;   /* 固定占位宽：保证各语言名长度不一而排行榜右侧基准（right 162px）稳定 */
  min-height: 30px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: rgba(16, 20, 26, .72);
  color: #fff; font-size: .8rem; font-weight: 600;
  cursor: pointer; list-style: none; text-shadow: none;
  transition: background var(--ease-base), border-color var(--ease-base);
}
.page-locale__trigger::-webkit-details-marker { display: none; }
.page-locale__trigger:hover { background: rgba(74, 144, 217, .55); border-color: rgba(255, 255, 255, .5); }
.page-locale__trigger svg { width: 15px; height: 15px; flex-shrink: 0; }
.page-locale__caret { transition: transform .2s var(--ease-base); }
.page-locale[open] .page-locale__caret { transform: rotate(180deg); }
.page-locale__list {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 176px; margin: 0; padding: 6px;
  list-style: none;
  background: rgba(16, 20, 26, .96);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  max-height: 60vh; overflow-y: auto;
}
.page-locale__item {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: rgba(255, 255, 255, .85); font-size: .84rem; text-decoration: none;
  transition: background var(--ease-base), color var(--ease-base);
}
.page-locale__item:hover { background: rgba(74, 144, 217, .55); color: #fff; }
.page-locale__item.is-active { color: #9ecbff; font-weight: 700; }

/* ---------- 暂停遮罩（覆盖棋盘屏蔽拼图操作；工具栏与角标保持可用） ---------- */
.single-pause {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 10, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.single-pause[hidden] { display: none; }
.single-pause__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 42px;
  background: rgba(16, 20, 26, .92);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.single-pause__text { margin: 0; color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; }

/* ---------- 通用按钮（样式切换弹窗 / 暂停遮罩） ---------- */
.mmodal__actions { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.mmodal__btn {
  min-width: 128px; min-height: 46px;
  border: none; border-radius: 8px;
  background: #2f7df6; color: #fff;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background var(--ease-base), transform var(--ease-base);
}
.mmodal__btn:hover { background: #1f6ef0; }
.mmodal__btn:active { transform: scale(.98); }
.mmodal__btn--ghost { background: transparent; color: #4b5563; border: 1px solid #d1d5db; }
.mmodal__btn--ghost:hover { background: rgba(0, 0, 0, .05); color: #23262b; }

/* ---------- 样式切换弹窗（块数滑杆 + 8 种剪切样式） ---------- */
.cut-count-row { margin-top: 6px; font-size: .86rem; color: var(--color-text-muted); }
.cut-count-row b { color: #23262b; font-variant-numeric: tabular-nums; }
.cut-shapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cut-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: border-color var(--ease-base), transform var(--ease-base);
}
.cut-shape:hover { transform: translateY(-1px); border-color: var(--color-primary); }
.cut-shape.is-active { outline: 2px solid var(--color-primary); outline-offset: 2px; color: #23262b; }
.cut-shape__svg { display: inline-flex; width: 54px; height: 54px; }
.cut-shape__svg svg { width: 100%; height: 100%; }
.cut-shape__name { font-size: .72rem; line-height: 1.3; text-align: center; color: #4b5563; }

/* 移动端压缩：触屏无 hover，点击工具栏展开（is-open 兜底）；弹窗收紧内边距 */
@media (max-width: 820px) {
  .single-tools__inner { width: 42px; padding: 8px 0 10px; }
  .single-tools:hover .single-tools__inner,
  .single-tools.is-open .single-tools__inner { width: 122px; }
  .mtool-btn { height: 38px; padding-left: 3px; gap: 10px; }
  .mtool-icon { flex-basis: 34px; width: 34px; }
  .mtool-icon svg { width: 18px; height: 18px; }
  .mtool-label { font-size: .8rem; }
  .mmodal__card { padding: 58px 16px 18px; }
  .mmodal__title { font-size: 1.5rem; }
  .mmodal__card--finish { padding: 32px 16px 22px; }
  .mmodal__btn { min-width: 110px; }
  .single-status { max-width: calc(100vw - 330px); }   /* 窄屏：给右上排行榜（right 162 + 宽 150）让位，避免左右文字相撞 */
  .single-status__row { flex-wrap: wrap; gap: 6px 8px; }
  .page-locale__trigger { min-height: 28px; padding: 0 10px; font-size: .76rem; }
  .single-rank { width: 150px; }   /* 窄屏：压缩排行榜宽度，避免与左上状态行文字相撞 */
  .cut-shapes { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 自建拼图局（2026-09-20 本地版） ----------
   本机找不到可用照片（首次直达 /play/photo、已清站点数据或手动清除）时的居中提示；
   自建局不渲染排行榜与广告位，因此不需为它们留位。 */
.single-photo-missing {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    font-size: 15px;
    color: #cfd6df;
}
.single-photo-missing__link {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    background: var(--pg-primary, #0d6ee3);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.single-photo-missing__link:hover { filter: brightness(1.08); }

/* ============================================================
   移动端专属改造（<768px，2026-09-22）：
   1) 顶部 HUD 只保留「返回首页」与语言切换：排行榜/名称/收藏/分享整组 display:none
      （不从 DOM 移除，JS 事件绑定与功能代码零改动）；
   2) 工具栏从右中竖排→底部横排单行（高 48px，装得下无感、装不下横滑且隐藏滚动条）；
   3) PC（≥1200）与平板（768–991）不受影响；本块置于文件末尾以压过 820px 压缩块。
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- 要求一：顶部 HUD 精简 ---------- */
  .single-rank { display: none; }                      /* 排行榜整块（标题 + toggle + 列表） */
  .single-status__title { display: none; }             /* 游戏名称 */
  .single-status__link { display: none; }              /* 除返回首页外唯一可交互项 */
  .single-status__actions { display: none; }           /* 收藏 [data-game-fav] + 分享 [data-share-open] */
  .single-status { max-width: calc(100vw - 150px); }   /* 不再为排行榜让位，只避开右上语言胶囊 */

  /* HUD 紧凑重排（2026-09-22 二轮）：贴近左上角；碎片数移到首页按钮右侧同行；会员名紧贴首行下方 */
  .single-status {
    top: 6px; left: 6px;
    flex-direction: row; flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
  }
  .single-status__row:not(.single-status__user):not(.single-status__actions) { display: contents; }  /* 拆行包裹（不含已隐藏的 actions）：home/碎片数进同一 flex 流 */
  .single-status__user { flex: 0 0 100%; max-width: none; }                                          /* 会员名整行换行（清掉 row 基类的 40vw 上限，否则 basis 被压缩不能独占） */
  .home-label-full { display: none; }                                   /* 「返回首页」→「首页」 */
  .home-label-short { display: inline; }

  /* ---------- 要求二：工具栏底部横排 ---------- */
  .single-tools {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    z-index: 28;                                       /* 高于 HUD/聊天(20)，低于浮层(30)/语言(105)/弹窗(110) */
  }
  .single-tools__inner {
    flex-direction: row;
    align-items: center;
    width: auto;
    height: 48px;
    padding: 4px 8px;
    gap: 4px;
    border-radius: 0;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .45);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .single-tools__inner::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* 触屏无 hover：竖排的展开机制在横排下失效（宽度不撑开、label 不显示） */
  .single-tools:hover .single-tools__inner,
  .single-tools.is-open .single-tools__inner { width: auto; }
  .single-tools:hover .mtool-label,
  .single-tools.is-open .mtool-label { opacity: 0; transform: none; }

  /* 按钮收缩为纯图标 40×40（内容不变，仅排列方向与尺寸） */
  .mtool-btn { flex: 0 0 auto; width: auto; height: 40px; padding: 0 2px; gap: 0; }
  .mtool-icon { flex: 0 0 40px; width: 40px; height: 40px; }
  .mtool-label { display: none; }
  .mtool-timer {
    flex: 0 0 auto;
    display: flex; align-items: center;
    padding: 0 8px 0 2px;
    margin: 0;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, .12);
  }
  .mtool-btn--back { margin-top: 0; padding-top: 0; border-top: none; border-radius: 9px; }
}

/* 双指捏合缩放（2026-09-22，生效段 = 手机 + 平板 ≤991px，与引擎 matchMedia 同口径）：
   棋盘容器禁浏览器默认触控（页面缩放/下拉刷新/双击缩放过冲）；
   引擎运行期也会置 canvas.style.touchAction=none，此处为样式层双保险；单指拖拽/点按不受影响 */
@media (max-width: 991px) {
  .single-canvas, .single-canvas canvas { touch-action: none; }
}