/* ==================== 多人游戏页面（方案书 §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; }
/* 背景图案预设缩略图：与目标站 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; }

/* 邀请弹窗内部 */
.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）：与单人页 single.css 同口径——
   1) 顶部 HUD 只保留「返回首页」与语言切换：排行榜/房间名称/收藏/分享整组 display:none
      （不从 DOM 移除，JS 事件绑定与功能代码零改动）；
   2) 工具栏从右中竖排→底部横排单行（高 48px，装得下无感、装不下横滑且隐藏滚动条）；
   3) 聊天面板上移至底部工具栏正上方（bottom = 工具栏高 48px，工具栏 z-index 高于聊天）；
   4) PC（≥1200）与平板（768–991）不受影响；本块置于文件末尾以压过 820px 压缩块。
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- 要求一：顶部 HUD 精简 ---------- */
  .multi-rank { display: none; }                       /* 排行榜整块（标题 + 列表） */
  .multi-status__puzzle { display: none; }             /* 房间/拼图名称（data-room-puzzle） */
  .multi-status__link { display: none; }               /* 除返回首页外唯一可交互项 */
  .multi-status__actions { display: none; }            /* 收藏 [data-game-fav] + 分享 [data-share-open] */
  .multi-status { max-width: calc(100vw - 150px); }    /* 不再为排行榜让位，只避开右上语言胶囊 */

  /* HUD 紧凑重排（2026-09-22 二轮）：贴近左上角；碎片数移到首页按钮右侧同行；会员名紧贴首行下方 */
  .multi-status {
    top: 6px; left: 6px;
    padding: 6px 8px;
    flex-direction: row; flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
  }
  .multi-status__line:not(.multi-status__user) { display: contents; }   /* 拆行包裹：home/碎片数进同一 flex 流 */
  .multi-status__puzzle-row { display: contents; }
  .multi-status__user { flex: 0 0 100%; }                               /* 会员名·房间状态整行换行，与首行只隔 2px */
  .home-label-full { display: none; }                                   /* 「返回首页」→「首页」 */
  .home-label-short { display: inline; }

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