/* 单人游戏页（/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; }
/* 背景图案预设缩略图：7 个纹理（底色取默认 #374151） */
.jpattern--fabric { background-color: #374151; background-image: url('/themes/default/images/textures/fabric.png'); }
.jpattern--paper { background-color: #374151; background-image: url('/themes/default/images/textures/paper.png'); }
.jpattern--asfalt { background-color: #374151; background-image: url('/themes/default/images/textures/asfalt.png'); }
.jpattern--tile { background-color: #374151; background-image: url('/themes/default/images/textures/tile.png'); }
.jpattern--wood { background-color: #374151; background-image: url('/themes/default/images/textures/wood.png'); }
.jpattern--blueprint { background-color: #374151; background-image: url('/themes/default/images/textures/blueprint.png'); }
.jpattern--none { background-color: #374151; }

/* 帮助弹窗内部（操作说明条目） */
.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；2026-09-28 改单行顶栏）：
 1) 顶部 HUD 与 PC 同款单行条：贴边一行显示「←返回 · 碎片数 · 账户」，不再左右分区/换行；
    排行榜、拼图名、首页与模式链接、收藏/分享整组 display:none（不从 DOM 移除，JS 零改动）；
    语言胶囊维持右上角不变，顶栏内语言块（gt-locale）手机不显示；
 2) 工具栏从右中竖排→底部横排单行（高 48px，装得下无感、装不下横滑且隐藏滚动条）；
 3) PC（≥1200）与平板（768–991）不受影响；本块置于 820px 压缩块之后。
 */
@media (max-width: 767px) {
 /* ---------- 要求一：顶部单行条（与 PC 同款） ---------- */
 .single-rank { display: none; } /* 排行榜手机端不显示 */
 .gt-bar .gt-locale { display: none; } /* 顶栏内语言块仅 PC/平板显示，手机端沿用右上角胶囊 */

 .single-status.gt-bar {
 top: 0;
 left: 0;
 right: 112px; /* 给右上角语言胶囊让位（实测胶囊宽 ~88–93 + right 14），透明卡片底不压到胶囊上 */
 max-width: none;
 flex-direction: row;
 flex-wrap: nowrap;
 align-items: center;
 gap: 8px;
 padding: 4px 8px;
 border: 0;
 border-bottom: 1px solid rgba(255, 255, 255, .10);
 border-radius: 0;
 }
 .gt-bar .single-status__row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; max-width: none; margin: 0; gap: 6px; }
 .gt-bar .single-status__user { flex: 0 1 auto; }
 .gt-bar .single-status__pieces { font-size: .72rem; }
 .gt-bar .single-status__username { max-width: 120px; }
 /* 隐藏规则置于 __row 之后：nav / actions 同时带 single-status__row 类，靠书写顺序覆盖其 display */
 .gt-bar .single-status__nav,
 .gt-bar .single-status__title,
 .gt-bar .single-status__actions { display: none; }

 /* ← 返回钮：与 PC 同样式，手机端也显示（gt-back 基类不再默认隐藏） */
 .gt-bar .gt-back {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 flex-shrink: 0;
 padding: 0;
 border: 1px solid rgba(255, 255, 255, .3);
 border-radius: 999px;
 background: rgba(16, 20, 26, .72);
 color: #fff;
 cursor: pointer;
 pointer-events: auto;
 text-shadow: none;
 }
 .gt-bar .gt-back svg { width: 20px; height: 20px; }
 /* 右上角语言胶囊收窄为文案宽（去掉 PC 基准 140px 占位），为单行条腾出空间 */
 .page-locale__trigger { min-width: 0; }

 /* ---------- 要求二：工具栏底部横排 ---------- */
 .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; }
}

/* ============================================================
 PC / 平板（≥768px）：游戏页顶部由「左上状态卡 + 右上排行榜 + 右上角语言」三区
 合并为一行顶栏——左组 [←返回][碎片数][账户][语言下拉]，最右为排行榜（缩短）。
 <768px（手机）不进入本段，保持原状态卡与右上角语言胶囊不变。
 gt-back / gt-locale 默认隐藏，仅本段内显示，避免手机多出一个返回/语言。
 ============================================================ */
.gt-back { display: none; }
.gt-locale { display: none; }
@media (min-width: 768px) {
 /* 状态卡→横向顶栏：与浏览器上/左/右边缘齐平（不留间隙），高度收紧约 10%；内容左对齐，指针仍放行画布 */
 .single-status.gt-bar {
 top: 0;
 left: 0;
 right: 0;
 max-width: none;
 flex-direction: row;
 flex-wrap: nowrap;
 align-items: center;
 gap: 16px;
 padding: 5px 14px;
 border: 0;
 border-bottom: 1px solid rgba(255, 255, 255, .10);
 border-radius: 0;
 }
 /* 只保留 5 项：隐藏导航行 / 拼图标题 / 收藏分享操作 */
 .gt-bar .single-status__nav,
 .gt-bar .single-status__title,
 .gt-bar .single-status__actions { display: none; }
 .gt-bar .single-status__row { max-width: none; margin: 0; }

 /* ← 返回按钮（左组首；点击回上一页，JS 绑定 [data-topbar-back]） */
 .gt-bar .gt-back {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 flex-shrink: 0;
 padding: 0;
 border: 1px solid rgba(255, 255, 255, .3);
 border-radius: 999px;
 background: rgba(16, 20, 26, .72);
 color: #fff;
 cursor: pointer;
 pointer-events: auto;
 text-shadow: none;
 transition: background var(--ease-base), border-color var(--ease-base);
 }
 .gt-bar .gt-back:hover { background: rgba(74, 144, 217, .55); border-color: rgba(255, 255, 255, .5); }
 .gt-bar .gt-back svg { width: 22px; height: 22px; }

 /* 语言下拉：由右上角移入顶栏左组末尾（相对定位，使下拉列表锚定在语种按钮下方） */
 .gt-bar .gt-locale { display: block; position: relative; top: auto; right: auto; left: auto; bottom: auto; pointer-events: auto; } /* pointer-events:auto 必须：顶栏容器为 none，否则 summary/列表项不可点 */
 .gt-bar .gt-locale .page-locale__trigger { pointer-events: auto; }
 /* 列表左对齐到语种按钮正下方（覆盖基础样式的 right:0，否则会以整条顶栏右缘为基准跑到最右） */
 .gt-bar .gt-locale .page-locale__list { left: 0; right: auto; }
 /* 隐藏旧的右上角语言（已移入顶栏；仅当它是 main 直接子元素时） */
 .site-main--fullscreen > .page-locale { display: none; }

 /* 排行榜靠页面最右、与顶栏上缘齐平；标题行以顶栏等高垂直居中，与语种按钮同一水平中线 */
 .single-rank { top: 0; right: 14px; width: 210px; max-height: 44vh; padding-top: 0; }
 .single-rank .single-rank__head { min-height: 50px; }
}