/* 多人游戏页面（方案书 §13.1）
 * 全屏布局：棋盘占满视口、纯黑背景；左上状态 / 左下聊天 / 右上排行 / 右中工具栏
 * 全部为透明浮动 Overlay（无卡片底、无遮罩）；底部仅两个广告位（单行两列）。 */

/* ---------- 全屏壳 ---------- */
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%; }

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

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

/* ---------- 右中：竖排工具栏（样式：默认窄条仅图标，悬停/点击展开图标+文字；计时在顶、返回在底） ---------- */
.multi-tools {
 position: absolute;
 top: 50%;
 right: 0;
 transform: translateY(-50%);
 z-index: 20;
}
.multi-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);
}
.multi-tools:hover .multi-tools__inner,
.multi-tools.is-open .multi-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);
}
.multi-tools:hover .mtool-label,
.multi-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;
}

/* 玩家列表浮层：按住显示，紧贴工具栏「玩家列表」按钮（JS 动态设置 top/left） */
.multi-popover {
 position: fixed;
 width: 250px;
 max-height: 60vh;
 overflow-y: auto;
 background: rgba(20, 26, 34, .95);
 border: 1px solid rgba(255, 255, 255, .16);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md);
 padding: var(--space-2);
 display: none;
 z-index: 30;
 color: #fff;
}
.multi-popover--players { top: auto; right: auto; bottom: auto; left: auto; }
.multi-popover.is-open { display: block; }

/* 玩家列表浮层 */
.mpanel__title { font-size: .88rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.multi-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.multi-players__empty { color: rgba(255, 255, 255, .5); font-size: .8rem; }
.multi-players__row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255, 255, 255, .92); padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.multi-players__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px rgba(255, 255, 255, .35); }
.multi-players__name { font-weight: 700; flex-shrink: 0; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-players__id { color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.multi-players__count { margin-left: auto; color: #0d6ee3; font-weight: 800; font-variant-numeric: tabular-nums; }
.multi-players__role {
 font-size: .66rem; font-weight: 700; letter-spacing: .02em; flex-shrink: 0;
 border-radius: 4px; padding: 1px 6px;
}
.multi-players__role--host { color: #042; background: rgba(255, 180, 62, .92); }
.multi-players__role--gm { color: #042; background: rgba(94, 156, 255, .9); }
.multi-players__role--member { color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .14); }

/* 设置弹窗：背景图片上传（浅色主题） */
.jbg-actions { display: flex; gap: 8px; margin-top: 10px; }
.jbg-btn {
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 34px; padding: 0 14px;
 border: 1px solid var(--color-border); border-radius: var(--radius-sm);
 background: var(--color-surface); color: var(--color-text);
 font-size: .84rem; cursor: pointer; transition: background var(--ease-base), border-color var(--ease-base);
}
.jbg-btn:hover { background: rgba(74, 144, 217, .08); border-color: var(--color-primary); }

/* ---------- 左上：房间状态（透明浮动） ---------- */
.multi-status {
 position: absolute;
 top: 14px; left: 14px;
 z-index: 20;
 padding: 10px 12px;
 /* 深色半透明卡片：与单人页 .single-status 同构（导航 → 标识 → 数据 → 操作 四层） */
 max-width: 320px;
 display: flex; flex-direction: column; gap: 6px;
 border: 1px solid rgba(255, 255, 255, .10);
 border-radius: 12px;
 background: rgba(0, 0, 0, .45);
 pointer-events: none;
 text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.multi-status__line { display: flex; align-items: center; gap: 8px; color: #fffe; font-weight: 700; font-size: .95rem; }
/* 首页按钮双文案：默认（PC/平板）显全称，短文案隐藏；移动端在 767 块内反向切换（与单人页同口径） */
.home-label-short { display: none; }
/* 左上角交互元素：容器为 pointer-events:none，链接/按钮需显式恢复点击 */
.multi-status__home {
 display: inline-flex; align-items: center;
 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: .8rem; font-weight: 600;
 text-decoration: none; text-shadow: none;
 pointer-events: auto;
 transition: background var(--ease-base), border-color var(--ease-base);
}
.multi-status__home:hover { background: rgba(74, 144, 217, .55); border-color: rgba(255, 255, 255, .5); }
.multi-status__link {
 color: #fffe;
 /* 需求：左上角链接去除底部横线（常态与 hover 均不出现） */
 text-decoration: none;
 pointer-events: auto;
 transition: color var(--ease-base);
}
.multi-status__link:hover { color: #9ecbff; }
/* 数据层：会员名 · 房间状态合并行（低权重小字，覆盖 __line 的粗体大字号） */
.multi-status__user { gap: 6px; font-size: .8rem; font-weight: 400; color: rgba(255, 255, 255, .72); }
.multi-status__user-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }
.multi-status__username { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.multi-status__dot { opacity: .5; }
/* ---------- 状态区操作（收藏 / 分享）：HUD 容器 pointer-events:none，仅按钮自身恢复可点；
 其余透明区域继续放行画布（不会让「下方块点不动」问题回归） ---------- */
.multi-status__actions { display: flex; align-items: center; gap: 8px; }
.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; }

/* ---------- 拼图名称 + 碎片数量并排：两者为并列层级（非同一段文本），用更大的 gap 与字号差区分，避免误读为同一标题 ---------- */
.multi-status__puzzle-row { display: flex; align-items: baseline; gap: 12px; }
.multi-status__puzzle { color: #fffe; font-size: .95rem; font-weight: 600; min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-status__pieces { flex-shrink: 0; color: rgba(255, 255, 255, .62); font-size: .76rem; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.multi-status__meta { color: rgba(255, 255, 255, .75); font-size: .82rem; }

/* ---------- 右上：完成数排行榜（透明浮动；与语言选择同行、位于其左侧；
 right 162px = 页面边距 14 + 语言胶囊占位宽 140 + 间隙 8） ---------- */
.multi-rank {
 position: absolute;
 top: 14px; right: 162px;
 z-index: 20;
 width: 240px;
 max-height: 40vh;
 overflow-y: auto;
 padding: 8px 12px;
 text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
 /* 半透明浮层：整体放行画布指针（纯展示，无交互元素）——下方散块可正常点击/拖动 */
 pointer-events: none;
}
.multi-rank__title { margin: 0 0 8px; font-size: .88rem; font-weight: 700; color: #fffe; }
.multi-rank__icon { width: 1em; height: 1em; vertical-align: -.12em; margin-right: 4px; color: #fff; }
.multi-rank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.multi-rank__item { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: rgba(255, 255, 255, .92); }
.multi-rank__no { width: 18px; text-align: center; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.multi-rank__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px rgba(255,255,255,.35); }
.multi-rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-rank__count { color: #0d6ee3; font-weight: 800; }
.multi-rank__empty { color: rgba(255, 255, 255, .5); font-size: .8rem; }

/* ---------- 左下：在线聊天（透明浮动；输入行贴底，可折叠） ---------- */
.mchat {
 position: absolute;
 --mchat-left: 14px;
 left: var(--mchat-left); bottom: 0;
 width: 300px;
 max-height: 36vh;
 display: flex;
 flex-direction: column;
 z-index: 20;
}
.mchat__log {
 list-style: none; margin: 0; padding: 4px 2px;
 flex: 1; overflow-y: auto;
 min-height: 60px; max-height: 20vh;
 display: flex; flex-direction: column; gap: 6px;
 font-size: .84rem;
 scrollbar-width: thin;
 transition: opacity .2s var(--ease-base), max-height .28s var(--ease-base);
}
.mchat__msg { color: rgba(255, 255, 255, .95); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); line-height: 1.5; }
.mchat__msg-name { font-weight: 700; }
.mchat__msg-text { word-break: break-word; }
.mchat__msg.is-sys { opacity: .8; }
.mchat__bar { display: flex; align-items: center; gap: 6px; padding: 6px 0 0; transition: gap .28s var(--ease-base); }
.mchat__row {
 display: flex; gap: 8px;
 flex: 1 1 auto; min-width: 0;
 transform: translateX(0);
 transition: flex-basis .28s var(--ease-base), opacity .22s var(--ease-base), transform .28s var(--ease-base);
}
.mchat__input {
 flex: 1; min-width: 0; min-height: 34px; padding: 0 12px;
 border: 1px solid rgba(255, 255, 255, .3);
 border-radius: 999px;
 font-size: .86rem;
 background: rgba(0, 0, 0, .38);
 color: #fff;
 outline: none;
}
.mchat__input::placeholder { color: rgba(255, 255, 255, .5); }
.mchat__send {
 min-height: 34px; padding: 0 16px;
 background: rgba(13, 110, 227, .85); color: #fff;
 border: none; border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 700;
}
.mchat__toggle {
 flex: 0 0 auto;
 width: 34px; height: 34px;
 display: inline-flex; align-items: center; justify-content: center;
 border: 1px solid rgba(255, 255, 255, .3);
 border-radius: 50%;
 background: rgba(0, 0, 0, .38);
 color: #fff; cursor: pointer;
 transition: background var(--ease-base), transform .28s var(--ease-base);
}
.mchat__toggle:hover { background: rgba(0, 0, 0, .6); }
.mchat__toggle-icon { width: 18px; height: 18px; transition: transform .28s var(--ease-base); }
/* 折叠态：输入框与发送按钮向左收缩隐藏，隐藏聊天记录；切换图标随之内移至视口左缘平齐 */
.mchat.is-collapsed .mchat__row {
 flex-grow: 0; flex-basis: 0; width: 0; min-width: 0; overflow: hidden;
 opacity: 0; transform: translateX(-40px);
 pointer-events: none;
}
.mchat.is-collapsed .mchat__bar { gap: 0; }
.mchat.is-collapsed .mchat__log {
 opacity: 0; max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}
.mchat.is-collapsed .mchat__toggle { transform: translateX(calc(-1 * var(--mchat-left))); }
.mchat.is-collapsed .mchat__toggle-icon { transform: rotate(180deg); }
/* 自动隐藏态：连续 30 秒无聊天操作后整块隐藏日志区（仅本用户本地视图；玩家加入或本用户发送消息后恢复显示） */
.mchat__log.is-auto-hidden {
 opacity: 0; max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}

/* ---------- 底部：仅广告（两个广告位，单行两列） ---------- */
.multi-ads {
 position: absolute;
 left: 50%; bottom: 10px;
 transform: translateX(-50%);
 display: flex;
 gap: 10px;
 z-index: 15;
}
/* 暂时隐藏底部广告位：移除 HTML 上的 hidden 属性即可恢复 */
.multi-ads[hidden] { display: none; }
.multi-ad {
 width: 320px; height: 50px;
 display: flex; align-items: center; justify-content: center;
 border: 1px dashed rgba(255, 255, 255, .18);
 border-radius: 8px;
 background: rgba(255, 255, 255, .05);
 color: rgba(255, 255, 255, .45);
 font-size: .8rem;
 position: relative;
 overflow: hidden;
}
.multi-ad__label { position: absolute; top: 4px; left: 8px; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.multi-ad__placeholder { opacity: .8; }

/* ---------- Toast 轻提示 ---------- */
.multi-toast {
 position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(16px);
 background: rgba(20, 26, 34, .92); color: #fffe; padding: 10px 18px;
 border-radius: 999px; font-size: .86rem; opacity: 0; pointer-events: none;
 transition: opacity var(--ease-base), transform var(--ease-base);
 z-index: 90;
}
.multi-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 右上角：语言选择（就地切换游戏页语言；<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; }

/* ---------- 房间大厅（创建 / 加入引导） ---------- */
.mlobby {
 position: absolute;
 inset: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: var(--space-2);
}
.mlobby[hidden] { display: none; }
.mlobby__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(4, 6, 10, .72);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}
.mlobby__card {
 position: relative;
 width: min(420px, 100%);
 max-height: 92vh;
 overflow-y: auto;
 background: linear-gradient(180deg, rgba(28, 34, 44, .98), rgba(18, 23, 31, .98));
 border: 1px solid rgba(255, 255, 255, .14);
 border-radius: var(--radius-lg);
 box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
 padding: 26px 26px 20px;
 color: #fff;
}

.mlobby__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mlobby__logo {
 width: 48px; height: 48px; flex-shrink: 0;
 display: inline-flex; align-items: center; justify-content: center;
 border-radius: 14px;
 background: linear-gradient(135deg, var(--color-teal), var(--color-primary));
 color: #fff;
}
.mlobby__logo svg { width: 26px; height: 26px; }
.mlobby__titles h2 { margin: 0; font-size: 1.28rem; font-weight: 800; letter-spacing: .01em; }
.mlobby__titles p { margin: 2px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .6); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlobby__tabs {
 display: flex; gap: 4px; padding: 4px;
 background: rgba(255, 255, 255, .06);
 border-radius: 999px;
 margin-bottom: 20px;
}
.mlobby__tab {
 flex: 1; min-height: 38px;
 border: none; border-radius: 999px;
 background: transparent; color: rgba(255, 255, 255, .72);
 font-size: .92rem; font-weight: 700; cursor: pointer;
 transition: background var(--ease-base), color var(--ease-base);
}
.mlobby__tab.is-active { background: rgba(13, 110, 227, .9); color: #042; }
.mlobby__tab:hover:not(.is-active) { background: rgba(255, 255, 255, .12); }

.mlobby__panel { display: none; flex-direction: column; gap: 18px; }
.mlobby__panel.is-active { display: flex; }
.mlobby__field { display: flex; flex-direction: column; gap: 8px; }
.mlobby__label { font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.mlobby__hint { font-size: .76rem; color: rgba(255, 255, 255, .5); }

.mlobby__seg { display: flex; gap: 6px; }
.mlobby__seg-item {
 flex: 1; min-height: 42px;
 border: 1px solid rgba(255, 255, 255, .16);
 border-radius: var(--radius-md);
 background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .82);
 font-size: .9rem; font-weight: 700; cursor: pointer;
 transition: border-color var(--ease-base), background var(--ease-base);
}
.mlobby__seg-item:hover { background: rgba(255, 255, 255, .1); }
.mlobby__seg-item.is-active { border-color: rgba(13, 110, 227, .7); background: rgba(13, 110, 227, .18); color: #b6d3f7; }

.mlobby__stepper {
 display: inline-flex; align-items: center; gap: 4px;
 align-self: flex-start;
 border: 1px solid rgba(255, 255, 255, .16);
 border-radius: var(--radius-md);
 background: rgba(255, 255, 255, .04);
 overflow: hidden;
}
.mlobby__step {
 width: 42px; height: 42px;
 border: none; background: transparent;
 color: rgba(255, 255, 255, .85); font-size: 1.15rem; cursor: pointer;
 transition: background var(--ease-base);
}
.mlobby__step:hover { background: rgba(255, 255, 255, .1); }
.mlobby__step-val { min-width: 56px; text-align: center; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.mlobby__input {
 min-height: 46px; padding: 0 14px;
 border: 1px solid rgba(255, 255, 255, .18);
 border-radius: var(--radius-md);
 background: rgba(0, 0, 0, .3); color: #fff;
 font-size: 1rem; letter-spacing: .04em; outline: none;
 transition: border-color var(--ease-base);
}
.mlobby__input:focus { border-color: rgba(13, 110, 227, .7); }
.mlobby__input::placeholder { color: rgba(255, 255, 255, .4); letter-spacing: 0; }

.mlobby__cta {
 min-height: 46px; margin-top: 4px;
 border: none; border-radius: var(--radius-md);
 background: rgba(13, 110, 227, .9); color: #042;
 font-size: 1rem; font-weight: 800; cursor: pointer;
 transition: background var(--ease-base), transform var(--ease-base);
}
.mlobby__cta:hover { background: #0d6ee3; }
.mlobby__cta:active { transform: scale(.98); }
.mlobby__cta:disabled { opacity: .55; cursor: not-allowed; }

.mlobby__quick { margin-top: 16px; text-align: center; }
.mlobby__quick-btn {
 border: none; background: transparent;
 color: rgba(255, 255, 255, .6); font-size: .84rem; cursor: pointer;
 text-decoration: underline; text-underline-offset: 3px;
 transition: color var(--ease-base);
}
.mlobby__quick-btn:hover { color: #fff; }
.mlobby__quick-btn:disabled { opacity: .55; cursor: not-allowed; }

.mlobby__error {
 margin-top: 14px;
 padding: 10px 14px;
 border: 1px solid rgba(255, 99, 99, .5);
 border-radius: var(--radius-md);
 background: rgba(255, 99, 99, .14);
 color: #ffb3b3; font-size: .84rem;
}
.mlobby__error[hidden] { display: none; }

.mlobby__foot { margin-top: 18px; text-align: center; }
.mlobby__back { color: rgba(255, 255, 255, .55); font-size: .84rem; text-decoration: none; transition: color var(--ease-base); }
.mlobby__back:hover { color: #fff; }

@media (max-width: 460px) {
 .mlobby { padding: 12px; }
 .mlobby__card { padding: 20px 18px 16px; }
 .mlobby__titles h2 { font-size: 1.1rem; }
}

/* 移动端压缩：触屏无 hover，点击工具栏展开（is-open 兜底） */
@media (max-width: 820px) {
 .multi-rank { width: 150px; } /* 窄屏：压缩排行榜宽度，避免与左上状态行文字相撞 */
 .multi-status { max-width: calc(100vw - 330px); } /* 窄屏：给右上排行榜（right 162 + 宽 150）让位 */
 .multi-status__line { flex-wrap: wrap; }
 .mchat { width: 240px; }
 .multi-tools__inner { width: 42px; padding: 8px 0 10px; }
 .multi-tools:hover .multi-tools__inner,
 .multi-tools.is-open .multi-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; }
 .multi-ad { width: 200px; }
}

/* 弹窗（重新排列投票 / 完成）：白卡 + 顶部圆形徽标 */
.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--vote { width: min(480px, 100%); padding: 30px 28px 24px; }
.mmodal__card--settings {
 width: min(620px, 100%);
 padding: 26px 30px 28px;
 text-align: left;
}
.mmodal__card--invite {
 width: min(440px, 100%);
 padding: 26px 28px 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; }

.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; }

.mmodal__timer {
 margin-top: 22px;
 color: #a7adb6;
 font-size: 1.15rem;
 font-variant-numeric: tabular-nums;
 letter-spacing: .06em;
}

/* 投票弹窗 */
.mvote__hint { margin: 2px 0 10px; font-size: .92rem; color: #6b7280; }
.mvote__applied { margin: 0 auto 4px; font-size: 1.05rem; }
.mvote__applied b { color: var(--color-primary); font-weight: 800; }

/* 设置弹窗内部 */
.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; }

/* 邀请弹窗内部 */
.minvite__hint { margin: 0 0 14px; font-size: .92rem; color: #6b7280; }
.minvite__link { display: flex; align-items: center; gap: 10px; }
.minvite__url {
 flex: 1; min-width: 0;
 padding: 10px 12px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 background: #f7f9fc;
 color: var(--color-text);
 font-size: .86rem;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.minvite__copy { min-width: auto; min-height: 38px; padding: 0 16px; flex-shrink: 0; }

/* 帮助弹窗内部（操作说明条目） */
.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__rank {
 list-style: none; margin: 0 auto; padding: 0;
 display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px;
 max-width: 460px; text-align: left;
}
.mfinish__rank-item {
 display: flex; align-items: center; gap: 8px;
 font-size: .92rem; color: #374151;
 border-bottom: 1px solid #eef0f3; padding: 4px 0;
}
.mfinish__rank-no { width: 18px; color: #6b7280; font-variant-numeric: tabular-nums; }
.mfinish__rank-avatar {
 width: 22px; height: 22px; flex-shrink: 0;
 display: inline-flex; align-items: center; justify-content: center;
 border-radius: 50%; background: #eef0f3; color: #6b7280;
}
.mfinish__rank-avatar svg { width: 13px; height: 13px; }
.mfinish__rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2f7df6; }
.mfinish__rank-item.is-me .mfinish__rank-name { color: #e03131; }
.mfinish__rank-count { color: #23262b; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 断连提示弹窗 */
.mmodal__card--disconnect { width: min(560px, 100%); padding: 44px 28px 28px; }
.mdisconnect__head {
 display: inline-flex; align-items: center; justify-content: center;
 gap: 12px; margin: 4px 0 20px;
}
.mdisconnect__icon {
 width: 44px; height: 44px; flex-shrink: 0;
 display: inline-flex; align-items: center; justify-content: center;
 color: #23262b;
}
.mdisconnect__icon svg { width: 40px; height: 40px; }
.mdisconnect__title {
 margin: 0; font-size: 1.75rem; font-weight: 800;
 letter-spacing: .02em; color: #23262b;
}
.mdisconnect__text {
 margin: 0 auto 14px; max-width: 480px;
 font-size: 1.02rem; line-height: 1.65;
 color: #374151;
}
.mdisconnect__text--muted { color: #6b7280; }
.mdisconnect__actions {
 display: flex; align-items: center; justify-content: center;
 flex-wrap: wrap; gap: 12px; margin-top: 22px;
}
.mdisconnect__btn {
 display: inline-flex; align-items: center; justify-content: center;
 gap: 8px;
}
.mdisconnect__btn svg { width: 18px; height: 18px; }
.mdisconnect__or { color: #9ca3af; font-size: .95rem; }

@media (max-width: 820px) {
 .mmodal__card { padding: 58px 16px 18px; }
 .mmodal__title { font-size: 1.5rem; }
 .mmodal__btn { min-width: 110px; }
 .mfinish__rank { grid-template-columns: 1fr; gap: 6px; }
 .mmodal__card--finish { padding: 32px 16px 22px; }
 .mmodal__card--disconnect { padding: 40px 16px 20px; }
 .mdisconnect__title { font-size: 1.45rem; }
 .mdisconnect__text { font-size: .95rem; }
 .mdisconnect__btn { min-width: 120px; }
}

/* ---- 满员/失效推荐区（V2 §3.3：复用大厅 DOM，进房 409 / 握手拒绝时展示）
 配色按需求统一为紫红 #990066 系（对话框内无蓝色残留）；列表不滚动【一次 3 条由 JS 分批】 ---- */
.mlobby__suggest {
 margin-bottom: 12px; padding: 8px 10px;
 border: 1px solid rgba(255, 255, 255, .14);
 border-radius: var(--radius-md);
 background: rgba(255, 255, 255, .05);
}
.mlobby__suggest[hidden] { display: none; }
.mlobby__suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mlobby__suggest-title { font-size: .84rem; color: #cc80b3; }
.mlobby__suggest-refresh {
 border: none; background: transparent;
 color: #cc80b3; font-size: .8rem; cursor: pointer;
 text-decoration: underline; text-underline-offset: 3px;
 transition: color var(--ease-base);
}
.mlobby__suggest-refresh:hover { color: #fff; }
.mlobby__suggest-refresh:disabled { opacity: .5; cursor: not-allowed; }
/* 列表不含滚动条：一次仅渲染 3 条（JS 分批），高度固定不溢出 */
.mlobby__suggest-list {
 list-style: none; margin: 0; padding: 0;
 display: flex; flex-direction: column; gap: 6px;
}
.mlobby__suggest-item {
 display: flex; align-items: center; gap: 10px;
 padding: 5px 8px; border-radius: var(--radius-sm);
 background: rgba(255, 255, 255, .06); cursor: pointer;
 transition: background var(--ease-base);
}
.mlobby__suggest-item:hover { background: rgba(255, 255, 255, .14); }
.mlobby__suggest-thumb {
 width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
 background-color: rgba(255, 255, 255, .08);
 background-size: cover; background-position: center;
}
.mlobby__suggest-name {
 flex: 1; min-width: 0; color: #fff; font-size: .86rem;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mlobby__suggest-meta { color: rgba(255, 255, 255, .6); font-size: .78rem; flex-shrink: 0; white-space: nowrap; }
.mlobby__suggest-go { color: #cc80b3; font-size: .8rem; flex-shrink: 0; }
.mlobby__suggest-empty { padding: 10px 4px; color: rgba(255, 255, 255, .5); font-size: .82rem; text-align: center; }

/* ---- 推荐对话框专属配色与密度（.mlobby.is-suggest：仅“该局已完成/满员”推荐场景；
 常规创建房间大厅不受影响）----
 ① 创建房间 / 创建并进入等按钮：#990066 底 + 白字（hover/active/禁用均无深色文字压底）
 ② 整卡与推荐区均无纵向滚动条；加宽至 480px + 压低高度，内容一屏完整显示
 ③ 蓝色元素（tabs/CTA/分段选中/输入聚焦/Logo/链接）全部改为紫红 #990066 系 */
.mlobby.is-suggest .mlobby__card {
 width: min(480px, 100%);
 max-height: none;
 overflow: visible;
 padding: 18px 22px 12px;
}
.mlobby.is-suggest .mlobby__brand { margin-bottom: 12px; }
.mlobby.is-suggest .mlobby__logo { background: linear-gradient(135deg, #cc3399, #990066); }
.mlobby.is-suggest .mlobby__tabs { margin-bottom: 12px; }
.mlobby.is-suggest .mlobby__panel { gap: 12px; }
.mlobby.is-suggest .mlobby__field { gap: 5px; }
.mlobby.is-suggest .mlobby__seg-item { min-height: 40px; }
.mlobby.is-suggest .mlobby__cta { min-height: 44px; margin-top: 2px; }
.mlobby.is-suggest .mlobby__quick { margin-top: 10px; }
.mlobby.is-suggest .mlobby__foot { margin-top: 10px; }
/* 紫红底白字（各交互状态；hover/active 为 #990066 的深浅派生） */
.mlobby.is-suggest .mlobby__tab.is-active { background: #990066; color: #fff; }
.mlobby.is-suggest .mlobby__cta { background: #990066; color: #fff; }
.mlobby.is-suggest .mlobby__cta:hover { background: #b3007a; }
.mlobby.is-suggest .mlobby__cta:active { background: #7a0052; }
.mlobby.is-suggest .mlobby__cta:disabled { background: #990066; color: #fff; opacity: .55; }
.mlobby.is-suggest .mlobby__seg-item.is-active { border-color: rgba(153, 0, 102, .8); background: rgba(153, 0, 102, .25); color: #e0b3d1; }
.mlobby.is-suggest .mlobby__input:focus { border-color: rgba(153, 0, 102, .85); }
.mlobby.is-suggest :focus-visible { outline-color: #cc3399; }

/*
 移动端专属改造（<768px，2026-09-22；2026-09-28 改单行顶栏）：与单人页 single.css 同口径——
 1) 顶部 HUD 与 PC 同款单行条：贴边一行显示「←返回 · 碎片数 · 账户（含人数 2/5）」，不再左右分区/换行；
    排行榜、房间名称、首页与多人链接、收藏/分享整组 display:none（不从 DOM 移除，JS 零改动）；
    语言胶囊维持右上角不变，顶栏内语言块（gt-locale）手机不显示；
 2) 工具栏从右中竖排→底部横排单行（高 48px，装得下无感、装不下横滑且隐藏滚动条）；
 3) 聊天面板上移至底部工具栏正上方（bottom = 工具栏高 48px，工具栏 z-index 高于聊天）；
 4) PC（≥1200）与平板（768–991）不受影响；本块置于 820px 压缩块之后。
 */
@media (max-width: 767px) {
 /* ---------- 要求一：顶部单行条（与 PC 同款） ---------- */
 .multi-rank { display: none; } /* 排行榜手机端不显示 */
 .gt-bar .gt-locale { display: none; } /* 顶栏内语言块仅 PC/平板显示，手机端沿用右上角胶囊 */

 .multi-status.gt-bar {
 top: 0;
 left: 0;
 right: 0; /* 半透明底色块延伸到右边缘（贴齐）；内容靠右内边距让开右上角语言胶囊 */
 max-width: none;
 flex-direction: row;
 flex-wrap: nowrap;
 align-items: center;
 gap: 8px;
 padding: 4px 6px; /* 底图框左右两侧适当缩小 */
 border: 0;
 border-bottom: 1px solid rgba(255, 255, 255, .10);
 border-radius: 0;
 }
 /* 只留一行：隐藏首页/多人链接行、房间名称、收藏分享 */
 .gt-bar .multi-status__nav,
 .gt-bar .multi-status__puzzle,
 .gt-bar .multi-status__actions { display: none; }
 .gt-bar .multi-status__puzzle-row { display: flex; align-items: center; gap: 6px; }
 .gt-bar .multi-status__line { max-width: none; margin: 0; }
 .gt-bar .multi-status__user { flex: 0 1 auto; font-weight: 400; }
 .gt-bar .multi-status__pieces { font-size: .72rem; }
 .gt-bar .multi-status__username { max-width: 80px; }
 /* 右上角语言胶囊：与「拼图块数量」对齐到同一水平中线（顶栏内容中心）；去掉语言文字前的 SVG 图标 */
 .site-main--fullscreen > .page-locale { top: 6px; right: 8px; }
 .site-main--fullscreen > .page-locale .page-locale__trigger > svg:first-child { 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; }

 /* ---------- 要求二：工具栏底部横排 ---------- */
 .multi-tools {
 top: auto; bottom: 0; left: 0; right: 0;
 transform: none;
 z-index: 28; /* 高于 HUD/聊天(20)，低于浮层(30)/语言(105)/弹窗(110) */
 }
 .multi-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;
 }
 .multi-tools__inner::-webkit-scrollbar { width: 0; height: 0; display: none; }

 /* 触屏无 hover：竖排的展开机制在横排下失效（宽度不撑开、label 不显示） */
 .multi-tools:hover .multi-tools__inner,
 .multi-tools.is-open .multi-tools__inner { width: auto; }
 .multi-tools:hover .mtool-label,
 .multi-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; }

 /* ---------- 要求三：聊天面板贴底部工具栏上缘（48px） ---------- */
 .mchat { bottom: 48px; width: min(240px, calc(100vw - 28px)); }
}

/* 双指捏合缩放（2026-09-22，生效段 = 手机 + 平板 ≤991px，与引擎 matchMedia 同口径）：
 棋盘容器禁浏览器默认触控（与单人页同口径）；聊天输入与工具栏按钮不属棋盘，行为不变 */
@media (max-width: 991px) {
 .multi-canvas, .multi-canvas canvas { touch-action: none; }
}

/* ============================================================
 PC / 平板（≥768px）：多人游戏页顶部合并为一行顶栏——
 左组 [←返回][碎片数][账户·人数(如 2/5)][语言下拉]，最右为完成数排行榜（缩短）。
 <768px（手机）不进入本段，保持原状态卡与右上角语言胶囊不变。
 gt-back / gt-locale 默认隐藏，仅本段内显示，避免手机多出一个返回/语言。
 ============================================================ */
.gt-back { display: none; }
.gt-locale { display: none; }
@media (min-width: 768px) {
 .multi-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 .multi-status__nav,
 .gt-bar .multi-status__puzzle,
 .gt-bar .multi-status__actions { display: none; }
 .gt-bar .multi-status__puzzle-row { gap: 0; }
 .gt-bar .multi-status__line { 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; }

 /* 语言下拉：由右上角移入顶栏左组末尾（相对定位，使下拉列表锚定在语种按钮下方；清除基础 .page-locale 的 top/right 偏移）
 注意：必须 pointer-events:auto——顶栏容器 .multi-status 为 pointer-events:none（放行画布），
 否则 summary 与下拉列表项都不可点（PC/平板“语言点不了”的根因）。 */
 .gt-bar .gt-locale { display: block; position: relative; top: auto; right: auto; left: auto; bottom: auto; pointer-events: auto; }
 .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; }

 /* 完成数排行榜靠页面最右、与顶栏上缘齐平；标题行以顶栏等高垂直居中，与语种按钮同一水平中线 */
 .multi-rank { top: 0; right: 14px; width: 210px; max-height: 42vh; padding-top: 0; }
 .multi-rank .multi-rank__title { display: flex; align-items: center; min-height: 50px; margin: 0; }
}

/* ============================================================
 进房提示（三端统一：页面正中心 + 旋转 loading）：
 绝对定位、不占布局；进房完成后 JS 置 hidden 即完全消失、无残留。
 z-index 60：高于 HUD(20)/工具栏(28)，低于房间大厅(100)/语言(105)/弹窗(110)。
 ============================================================ */
.multi-enter {
 position: fixed;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 60;
 display: -webkit-box; display: -webkit-flex; display: flex;
 -webkit-box-align: center; -webkit-align-items: center; align-items: center;
 gap: 10px;
 max-width: calc(100vw - 40px);
 padding: 12px 20px;
 border-radius: 999px;
 background: rgba(16, 20, 26, .82);
 border: 1px solid rgba(255, 255, 255, .16);
 color: #fff;
 font-size: .9rem;
 text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
 pointer-events: none;
}
.multi-enter[hidden] { display: none; }
.multi-enter__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-enter__spin {
 width: 16px; height: 16px; flex-shrink: 0;
 border: 2px solid rgba(255, 255, 255, .28);
 border-top-color: #fff;
 border-radius: 50%;
 -webkit-animation: multi-enter-spin .8s linear infinite;
 animation: multi-enter-spin .8s linear infinite;
}
@-webkit-keyframes multi-enter-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes multi-enter-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }