/* ================================================================
   duo-ref.css — 双人模式房间页「参考UI」全覆盖层 (版本 20260817duoKbFix12)
   duoKbFix12: kbdbg 真机远程日志实锤根因 — OPPO/HeyTapBrowser 键盘弹出后
              env(safe-area-inset-top) 假阳性跳 0→40(ih 恒 632 视口未真扩展),
              容器 padding-top: max(0,env) 与 body padding: env(...) 跟着 0→40
              → 内容整体下移 40px, 键盘收起不恢复, 退出重进还带偏移(scT=40)。
              修复: ①容器 padding-top 锚 0 ②body:has(#roomScreen.show) 追加
              padding-top:0 — 双人页期间 env 失去作用点, 其他页面不受影响
   duoKbFix8: 用户实测键盘弹出"整体布局向下移动"(视口高度增长驱动 — 地址栏
              收起等使 100dvh 变大, 居中位整体下移) — JS 聚焦瞬间快照容器像素高,
              键盘期冻结 height/max-height 到该值(inline important), 涨缩都零变化
   duoKbFix7: 用户要求键盘弹出时布局【完全锁死】零变化 — 弃用 duoKbFix6 的
              .kbd 整套布局调整(隐藏演示区/顶锚/补白20), JS 键盘态改挂
              .kblock: 仅 overflow:clip 滚动锁, 无任何布局变化, 键盘只覆盖在
              页面下部; 配合 JS scrollTo(0,0) 对抗原生"聚焦揭示"整页上移
   duoKbFix6: 用户反馈手机端点「加入房间」拉起输入法后布局 Y 轴向上移动异常 —
              iOS/微信 WKWebView 键盘是覆盖式(innerHeight 不变), 旧逻辑在
              点击瞬间直挂 .kbd, 键盘还没弹整页布局就先跳到顶部。本版 .kbd
              挂/摘时机改由 main-app.js visualViewport 键盘实测驱动(覆盖式+
              压缩式双兼容), CSS 侧仅新增键盘态容器补白 70→20px(duoMobile3
              的 70px 在键盘压缩后会把邀请码卡/状态条挤出可视区)
   duoMobile3: 用户反馈 duoMobile2 效果肉眼无感 — 间距压缩被安全居中
              (margin-block auto) 抵消一半, 开始匹配按钮仅上移6px;
              手机端容器 padding-bottom 20→70px, 内容可用高度减50px,
              居中位整体上移约25px, 按钮明显上移, 状态条下方留白更多;
              电脑端(≥768px)不受影响
   duoKbFix4: 续 duoKbFix3 — ①实测手机容器被桌面 duoBtnTall6 的
              max-height: calc(100vh-44px) 夹到 800/406(44px 差), 手机端补
              max-height: 100dvh 覆盖; ②overflow hidden→clip(不支持回落
              hidden): clip 连浏览器聚焦输入格的"揭示滚动"都禁止(实测
              Chromium 会程序性滚动 overflow:hidden 容器 scrollTop=261 造成
              布局位移), clip 下容器 scrollTop 恒 0, 任何情况零位移
   duoKbFix3: 用户反馈两点 — ①键盘弹出布局仍异常 ②手机端双人页能上下滑动
              (但一屏本就放得下, 不需要滚动)。根因: 基础规则容器就是
              overflow-y:auto + duoKbFix2 又加了 max-height+auto 内部滚动,
              用户可滑动容器, 键盘弹出时内部滚动造成布局位移。
              方案(手机端≤767px): ①容器固定 height:100dvh + overflow:hidden,
              彻底禁滚(html/body :has 滚动锁配合, 零滚动);
              ②键盘态 .kbd(输入格 focus 时 JS 挂到容器): 隐藏演示动画区
              (箭头+卡片+圆点纯装饰)+内容列撤居中顶锚 → 邀请码6格升到
              键盘上方可视区, 其余布局零位移; 失焦 160ms 防抖后还原。
              main-app.js 同版本: digit-box focus/blur 挂/摘 .kbd
   duoKbFix2: 续 duoKbFix1 — 实测聚焦输入格时是页面级滚动(scrollY 217, 容器
              max-height:none 随内容长高, 溢出发生在文档层, 滚动锁失效)。
              容器 max-height none→100vh/100dvh 上限: 键盘压缩视口时容器不再
              长高, 溢出收在容器内部滚动, 浏览器把聚焦输入格滚入可视区的
              滚动发生在容器内(scrollTop), 页面 scrollY 恒 0, 布局不位移;
              加 overscroll-behavior: contain 防滚动链传到页面
              (注: 该"内部滚动"方案被 duoKbFix3 的"彻底禁滚+.kbd"方案取代)
   duoKbFix1: 手机端修复 — 点「加入房间」聚焦输入格拉起输入法后整体布局
              向下移动。根因: 部分移动浏览器/WebView(微信等)键盘弹出会把
              视口高度压缩(resizes-content), 容器 min-height:100dvh 随之变矮,
              justify-content:center 在内容高于容器时向上下双向溢出(unsafe
              centering), 顶部返回按钮被裁出视口上方 → 整体视觉下移。
              修复: ①容器 justify center→flex-start + 内容列 margin-block auto
              (安全居中: 有空间时与原 center 视觉一致, 溢出时 margin 归 0
              顶部锚定); ②容器 overflow visible→auto(键盘弹出时可内部滚动,
              浏览器把聚焦输入格滚入可视区; 平时内容不满高不产生滚动,
              html/body 滚动锁不变); ③仅手机端(≤767px), 电脑端不受影响
   duoMobile2: 用户反馈 — 双人元素比单人多, 按钮间距挨近点给底部匹配
              状态文字留空间: 手机端区间距压缩(top-bar 下18→12 /
              预览卡↔箭头行 14→10 / 开始匹配区 上22下22→上12下10),
              room-section 内 gap 6→8 状态条与邀请码卡不贴死;
              电脑端(≥768px)布局不变
   duoMobile1: 手机端(≤767px)双人页布局 — 完全对齐单人模式 singleMobile14:
              ①容器 100dvh 垂直居中 + 底部补白20px(地址栏收展实时贴合可视区)
              ②html/body 滚动锁(与单人同款 :has 规则, 双人页内不可上下滑动)
              ③顶部图标按钮放大: 返回56 / 皮肤·打卡50(与单人一致)
              ④演示区 flex-wrap: 预览卡独占整行(X轴贴屏), 左右箭头改为
                长方形横向胶囊放预览卡下方第二行(创建按钮上方)
              ⑤区间距对齐单人: top-bar 下 18px / 预览卡↔箭头行 14px /
                开始匹配区 上22 下22(对应单人难度区) / 底部收紧
              电脑端(≥768px)布局不变。
   duoBtnTall5: 用户反馈 — ①三个按钮文字放大(match-btn 1.125→1.375rem,
              创建/加入 room-btn-text 0.95→1.1rem); ②修复创建/加入按钮文字Y轴
              未垂直居中(room-btn 补 justify-content: center)
   duoBtnTall4: 用户反馈微调 — ①开始匹配按钮下移(match-section margin-top 0→12px),
              与上方乒乓球演示UI拉开间隙(4px→16px); ②创建/加入按钮Y轴高度降低
              (66→56px)且下移(room-buttons margin-top 8→16px); 状态条随之整体下移
   duoBtnTall3: 补全 duoBtnTall2 — .room-btn(创建/加入)也同步 58→66px,
              三个按钮(.match-btn/.room-btn)统一 66px 铺满下方空余区域
   duoBtnTall2: 续 duoBtnTall — 58px后状态条下方仍剩18px(创建/加入横排并行, 纵向只占一份:
              两按钮各+15px但行高只+15px, 总内容只+30px非45px), 按钮再加高 58→66px
              (各+8px, 内容再+16px), 桌面普通窗口(900px)状态条距底部仅剩2px, 基本铺满
   duoBtnTall: 开始匹配/创建房间/加入房间 三个按钮加高铺满下方空余区域 —
              桌面普通窗口(约900px高)状态条下方空余约47px;
              .match-btn/.room-btn min-height 43→58px(各+15px), 状态条随之下降
   duoStFull: 修复最下方匹配状态UI(#roomStatus)进入时高度塌缩异常 —
              空状态(无文字)时高度只有 24px, 有文字时才是 37px;
              将 .room-status-tip min-height 24→37px, 进入双人UI即保持满状态高度
   duoRmHead5: 垂直总压缩, 给最下方匹配状态UI(#roomStatus)腾位置:
              ①开始匹配按钮再压(padding 9→6px, 字号1.375→1.125rem, 边框4→3.5px, 高56→~42px)
              ②创建/加入按钮上提(match-section margin-bottom 16→10px, room-buttons margin-top
                14→8px, 按钮padding 12→8px 高54→~42px)
              ③邀请码UI压缩(卡padding 8→4px, digit-box 40→30px高, copy-btn padding 10→6px,
                卡高68→~52px)
              ④room-section gap 10→6px, 状态条padding 10→6px
   duoRmHead4: ①开始匹配按钮移除闪电图标(.match-btn-icon)②压缩按钮Y轴高度
              (padding 16→9px)为下方状态提示腾位置; ③邀请码UI一个UI两用:
              6 个 digit-box 由 span 改为 input(只读展示↔可输入), 复制按钮
              在加入模式切换为"加入"按钮; 移除旧版独立加入输入框(roomJoinBox/
              roomInput/roomBtnJoinConfirm 全部删除, HTML/JS/CSS 同步清理)
   duoRmHead3: 移除邀请码UI顶部"邀请码"文字(.invite-code-label), 压缩邀请码卡Y轴高度
              (padding 14→8px, left gap 6→0)为下方房间状态提示(#roomStatus)腾出位置
   duoRmHead2: 移除创建/加入按钮副标题文字(邀请好友加入/输入邀请码), 压缩按钮Y轴高度
              (padding 18px→12px, gap 6→0)腾出空间; 邀请码UI改为默认常显(去掉display:none),
              未创建房间时6格显示'-'为空
   duoRmHead: 移除「好友对战」标题区(room-section-header)与创建/加入按钮图标,
              room-buttons 顶部增加间距(Y轴下移留出空间);
              邀请码升级为 6 个 digit-box 格子(与参考文件 UI/双人模式房间.html 一致)
   duoAlignFix2: 修复 index.html 版本号笔误(FixFix→Fix2), 强制刷新浏览器缓存
   duoAlignFix: 修复顶部栏按钮竖排/偏移 — 对齐单人模式(single-ref.css)顶部栏参数:
              top-bar padding0/space-between、top-bar-right row横排、
              page-container padding 2/10/6 gap0、game-preview gap4、game-title margin-bottom2px
   duoAlign: 顶部栏皮肤/打卡按钮换成单人模式同款(icon-btn-small + 笑脸/日历对勾图标),
             演示动画UI结构与单人模式完全一致(.game-preview/.arrow-btn/.preview-card),
             并同步单人模式中和层(game-title opacity:1 防切换后标题消失)
   对齐单人模式参考UI(single-ref.css)的设计语言: 绿色核心色调、粗黑描边、圆润造型、卡通投影
   + 单人模式同款入场动效(srEntrance/srPop/srTextPop)与演示卡 Q弹切换(sr-switch-out/in)
   删除原蓝色天空背景: 容器透明, 背景延续首页(与单人模式 refUI14 一致);
   蓝色仅作为辅助色(加入房间按钮/复制按钮/邀请码数字等点缀)
   作用于 .duo-ref-screen(双人模式房间页)
   ================================================================ */

/* ---- 参考UI设计token(与单人模式同款绿色系, 蓝色仅辅助) ---- */
.duo-ref-screen {
  --dr-primary: #7ED957;
  --dr-primary-dark: #5CB83A;
  --dr-primary-light: #A8E68A;
  --dr-primary-fg: #FFFFFF;
  --dr-bg: #B8F08E;
  --dr-bg2: #D4F5B8;
  --dr-card: #FFFFFF;
  --dr-fg: #2D2D2D;
  --dr-fg-light: #4A4A4A;
  --dr-muted: #F0F7E8;
  --dr-muted-fg: #6B7280;
  --dr-yellow: #FFD93D;
  --dr-yellow-dark: #E6B800;
  --dr-pink: #FF8BA7;
  --dr-blue: #74C0FC;
  --dr-blue-dark: #4A9BE8;
  --dr-orange: #FF9F43;
  --dr-stroke: #2D2D2D;
  --dr-radius-sm: 8px;
  --dr-radius-md: 16px;
  --dr-radius-lg: 24px;
  --dr-radius-xl: 32px;
  --dr-radius-full: 9999px;
  --dr-shadow-card: 0 4px 0 #2D2D2D;
  --dr-shadow-lg: 0 6px 0 #2D2D2D;
  --dr-shadow-xl: 0 8px 0 #2D2D2D;
  --dr-font: var(--cartoon-font-display, "ZCOOL KuaiLe", "Comic Sans MS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  --dr-font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  /* 覆盖基础样式: 对齐单人模式容器(970px), 透明背景延续首页 */
  max-width: 970px !important;
  margin: 0 auto !important;
  background: transparent !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  position: relative;
}
.duo-ref-screen::-webkit-scrollbar { display: none; }

/* ============================================================
   页面容器 — 布局参数完全对齐单人模式 screen
   (duoAlign: 顶部栏/演示UI位置与单人模式逐像素一致,
    padding 2px 10px 6px + gap 0 对齐 single-ref.css .single-ref-screen)
   ============================================================ */
.duo-ref-screen .page-container {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: max(2px, env(safe-area-inset-top)) 10px max(6px, env(safe-area-inset-bottom)) !important;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

/* ============================================================
   顶部栏 — 对齐单人模式 (返回64 + 皮肤/打卡60)
   ============================================================ */
.duo-ref-screen .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
}
.duo-ref-screen .top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 图标按钮 */
.duo-ref-screen .icon-btn {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--dr-card);
  border: 3px solid var(--dr-stroke);
  border-radius: var(--dr-radius-full);
  box-shadow: var(--dr-shadow-card);
  color: var(--dr-stroke);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.duo-ref-screen .icon-btn:hover {
  /* 20260817drHoverClip: 去 translateY(-2px) 上浮 — 容器(overflow-y:auto 两轴裁切)顶部
     内边距仅2px, 上浮2px+放大1.6px=3.6px 越界 → 圆钮顶部被切平;
     只保留放大反馈(顶部仅占1.6px<2px), 静止像素级不变 */
  transform: scale(1.05);
  box-shadow: var(--dr-shadow-lg);
}
.duo-ref-screen .icon-btn:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 0 2px 0 #2D2D2D;
}
.duo-ref-screen .icon-btn svg { width: 32px; height: 32px; }
.duo-ref-screen .icon-btn-small { width: 60px; height: 60px; }
.duo-ref-screen .icon-btn-small svg { width: 30px; height: 30px; }
/* 皮肤按钮 — 雾霾蓝渐变底 + T恤图标 + 黄色闪光点 (双人模式蓝色主题) */
.duo-ref-screen .icon-btn-skin {
  background: linear-gradient(145deg, #D6E8FF 0%, #A8D4FF 60%, #74C0FC 100%);
  color: #1565C0;
  position: relative;
  overflow: visible;
  animation: drSkinBtnFloat 3s ease-in-out infinite;
}
.duo-ref-screen .icon-btn-skin .skin-btn-icon {
  width: 30px;
  height: 30px;
}
.duo-ref-screen .icon-btn-skin .skin-btn-spark {
  transform-origin: center;
  animation: drSkinSpark 1.8s ease-in-out infinite;
}
@keyframes drSkinBtnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes drSkinSpark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 0.85; }
}
.duo-ref-screen .icon-btn-skin:hover {
  transform: scale(1.08);
  box-shadow: var(--dr-shadow-lg);
  /* 20260817drSkinHover: 原 animation:none 会把皮肤按钮生效的 drPop 入场动画移除,
     鼠标移出时动画名 none→drPop 会重新播放(backwards 填充 + 0.18s 延迟 → opacity:0),
     导致按钮消失约半秒再弹出(与单人 srSkinHover 修复同因)。
     改用 animation-play-state:paused 只暂停不换动画名, 移出时不会重启, 按钮保持可见
     (进入页面的入场弹出仍保留) */
  animation-play-state: paused;
}
.duo-ref-screen .icon-btn-skin:hover .skin-btn-spark {
  animation: drSkinSparkFast 0.5s ease-in-out infinite;
}
@keyframes drSkinSparkFast {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.5) rotate(25deg); }
}
.duo-ref-screen .icon-btn-skin:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 0 2px 0 #2D2D2D;
}

/* ============================================================
   游戏展示区 — 对齐单人模式 (绿色76箭头 + 白框预览卡 + 圆点)
   ============================================================ */
.duo-ref-screen .game-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  margin-bottom: 4px;
}

/* 箭头按钮(蓝色主色调, 20260817duoBlueBtn) */
.duo-ref-screen .arrow-btn {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  background: var(--dr-blue);
  border: 3px solid var(--dr-stroke);
  border-radius: var(--dr-radius-full);
  box-shadow: var(--dr-shadow-card);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.duo-ref-screen .arrow-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--dr-shadow-lg);
}
.duo-ref-screen .arrow-btn:active {
  transform: scale(0.9);
  box-shadow: 0 2px 0 #2D2D2D;
}
.duo-ref-screen .arrow-btn svg { width: 36px; height: 36px; }

/* 游戏卡片(预览白框) — 常驻悬浮与单人模式同款 */
.duo-ref-screen .game-card {
  flex: 1;
  min-width: 0;
  background: var(--dr-card);
  border: 3px solid var(--dr-stroke);
  border-radius: var(--dr-radius-lg);
  box-shadow: var(--dr-shadow-card);
  overflow: hidden;
  animation: drCardBounce 3s ease-in-out infinite;
}
@keyframes drCardBounce {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-6px) rotate(0.5deg); }
}

/* ============================================================
   演示UI切换动画 — 与单人模式 sr-switch-out/in 同款 Q弹缩放
   (仅玩家点击左右箭头时通过 .sr-switch-* 类触发)
   ============================================================ */
.duo-ref-screen .game-card.sr-switch-out {
  animation: drCardBounce 3s ease-in-out infinite,
             drCardSwitchOut 0.2s ease-in forwards;
}
.duo-ref-screen .game-card.sr-switch-in {
  animation: drCardBounce 3s ease-in-out infinite,
             drCardSwitchIn 0.3s ease-out backwards;
}
/* 退场: 收敛缩小, 干净淡出(无过冲) */
@keyframes drCardSwitchOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.82); }
}
/* 入场: 从小放大到正常尺寸, 普通缩放(无弹性过冲) */
@keyframes drCardSwitchIn {
  0%   { opacity: 0; transform: scale(0.82); }
  100% { opacity: 1; transform: scale(1); }
}

/* 演示画布区 — 16/9 对齐演示画布原始比例(480x270), 不拉伸变形 */
.duo-ref-screen .preview-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dr-muted);
}
.duo-ref-screen .preview-image-wrapper .game-icon-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 锁定徽章 */
.duo-ref-screen .game-lock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  padding: 3px 10px;
  background: var(--dr-orange);
  border: 2px solid var(--dr-stroke);
  border-radius: var(--dr-radius-full);
  font-family: var(--dr-font);
  font-size: 0.75rem;
  font-weight: 800;
  color: #FFF;
  text-shadow: 1px 1px 0 #2D2D2D;
  box-shadow: 0 2px 0 #2D2D2D;
}

/* 标题/描述 */
.duo-ref-screen .preview-info {
  position: relative;
  width: 100%;
  padding: 6px 12px 2px;
  text-align: center;
}
/* 「游戏标题」上方的分隔线 — 绝对定位横跨整个卡片宽度直达左右边缘 */
.duo-ref-screen .preview-info::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--dr-stroke);
}
.duo-ref-screen .game-title {
  font-family: var(--dr-font);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--dr-fg) !important;   /* 20260817duoTitleFix: 白字(!important)在白卡不可见, 固定深色字(同单人 refUI19) */
  letter-spacing: 0.08em;
  line-height: 1.15;
  margin: 0 0 2px !important;
  /* 20260817duoTitleFix: 清除 cartoon-cute 全局 .game-title 的 3px 黑描边+3px 黑投影(均!important),
     消除"体感乒乓球"文字被描边拖影成两层的错觉(同单人 refUI13 修复) */
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.duo-ref-screen .game-desc {
  font-size: 0.75rem;
  color: var(--dr-fg-light);
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
}

/* 游戏轮播圆点 — 与单人模式同款(绿色激活) */
.duo-ref-screen .game-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 6px;
}
.duo-ref-screen .game-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9E8D0;
  border: 2px solid var(--dr-stroke);
  transition: all 0.2s ease;
  cursor: default;
}
.duo-ref-screen .game-dot.active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dr-primary);
  transform: scale(1.25);
}

/* ============================================================
   开始匹配按钮 — 绿色主按钮, 与单人模式开始按钮同款脉动
   ============================================================ */
.duo-ref-screen .match-section {
  width: 100%;
  margin-top: 12px;  /* duoBtnTall4: 0→12 开始匹配按钮下移, 与上方乒乓球演示UI拉开间隙 */
}
.duo-ref-screen .match-btn {
  width: 100%;
  padding: 6px 24px;   /* duoRmHead5: 9→6 再压Y轴, 为最下方匹配状态UI腾位置 */
  min-height: 66px;   /* duoBtnTall2: 43→58→66 加高铺满下方空余区域(创建/加入横排并行, 纵向只占一份, 58px后仍剩18px, 再加8px铺满) */
  border: 3.5px solid var(--dr-stroke);
  border-radius: var(--dr-radius-xl);
  background: var(--dr-blue);   /* 20260817duoBlueBtn: 绿→蓝主色调 */
  color: #fff;
  font-family: var(--dr-font);
  font-size: 1.375rem;   /* duoBtnTall5: 1.125→1.375 三个按钮文字放大(用户反馈字号太小) */
  font-weight: 900;
  letter-spacing: 0.15em;
  cursor: pointer;
  box-shadow: var(--dr-shadow-xl);
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: drBtnPulse 2s ease-in-out infinite;
}
@keyframes drBtnPulse {
  0%, 100% { box-shadow: var(--dr-shadow-xl); }
  50% { box-shadow: 0 10px 0 #2D2D2D, 0 0 20px rgba(116, 192, 252, 0.4); }   /* 20260817duoBlueBtn: 光晕绿→蓝 */
}
.duo-ref-screen .match-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 0 #2D2D2D;
}
.duo-ref-screen .match-btn:active {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 2px 0 #2D2D2D;
}
.duo-ref-screen .match-btn.start-btn-locked {
  background: #B9B4AC;
  animation: none;
}
.duo-ref-screen .match-btn-text {
  position: relative;
  z-index: 1;
  text-shadow: 3px 3px 0 #2D2D2D;
}

/* ============================================================
   房间操作区
   ============================================================ */
.duo-ref-screen .room-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;   /* duoRmHead5: 10→6 压缩纵向间距 */
}

/* 房间按钮对: 创建=绿色核心, 加入=蓝色辅助 */
.duo-ref-screen .room-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 16px;  /* duoBtnTall4: 8→16 创建/加入按钮下移 */
}
.duo-ref-screen .room-btn {
  flex: 1;
  padding: 8px 12px;   /* duoRmHead5: 12→8 压缩按钮高度 */
  min-height: 56px;   /* duoBtnTall4: 66→56 创建/加入按钮Y轴高度降低一点(与下方状态条拉开视觉) */
  border: 3.5px solid var(--dr-stroke);
  border-radius: var(--dr-radius-lg);
  cursor: pointer;
  font-family: var(--dr-font);
  font-weight: 900;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* duoBtnTall5: 修复创建/加入按钮文字Y轴未垂直居中 */
  gap: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 5px 0 #2D2D2D;
}
.duo-ref-screen .room-btn::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  height: 35%;
  background: rgba(255,255,255,0.28);
  border-radius: var(--dr-radius-md) var(--dr-radius-md) 50% 50%;
  pointer-events: none;
}
.duo-ref-screen .room-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #2D2D2D;
}
.duo-ref-screen .room-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #2D2D2D;
}
.duo-ref-screen .room-btn-text {
  font-size: 1.1rem;   /* duoBtnTall5: 0.95→1.1 创建/加入按钮文字放大(用户反馈字号太小) */
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 0 #2D2D2D;
}
/* 创建房间=浅绿核心(20260817duoRoomLight: 深绿 #7ED957→#5CB83A 改浅绿, 与单人模式难度激活态 #A8E88F 同族) */
.duo-ref-screen .room-btn-create {
  background: linear-gradient(180deg, #A8E88F 0%, #92E078 100%);
}
.duo-ref-screen .room-btn-create.active {
  box-shadow: 0 5px 0 #2D2D2D, 0 0 0 4px var(--dr-yellow);
}
/* 加入房间=浅蓝辅助(20260817duoRoomLight: 蓝 #74C0FC→#4A9BE8 改浅蓝) */
.duo-ref-screen .room-btn-join {
  background: linear-gradient(180deg, #A8D8FF 0%, #8CC5F8 100%);
}
.duo-ref-screen .room-btn-join.active {
  box-shadow: 0 5px 0 #2D2D2D, 0 0 0 4px var(--dr-yellow);
}

/* ============================================================
   邀请码区域 — 白卡 + 绿色数字; 一个UI两用(duoRmHead4):
   创建模式 = 只读展示邀请码, 加入模式 = 6格输入邀请码
   ============================================================ */
.duo-ref-screen .invite-code-box {
  padding: 4px 12px;   /* duoRmHead5: 8→4 再压Y轴 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--dr-card);
  border: 3px solid var(--dr-stroke);
  border-radius: var(--dr-radius-lg);
  box-shadow: var(--dr-shadow-card);
}
.duo-ref-screen .invite-code-left {
  display: flex;
  flex-direction: column;
  gap: 0;   /* duoRmHead3: 标签已移除, 无需间距 */
  flex: 1;
  min-width: 0;
}
.duo-ref-screen .invite-code-digits {
  display: flex;
  gap: 5px;
  font-family: var(--dr-font);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--dr-primary-dark);
  letter-spacing: 2px;
}
/* 6 格: span→input(duoRmHead4 一UI两用), 只读=展示 / 可编辑=输入 */
.duo-ref-screen .digit-box {
  width: 28px;   /* duoRmHead5: 30→28 */
  height: 30px;  /* duoRmHead5: 40→30 压缩邀请码卡高度 */
  background: linear-gradient(180deg, #C4E2FB 0%, #9CCBF6 100%);   /* 20260817duoBlueBtn: 绿渐变→蓝渐变 */
  border: 2.5px solid var(--dr-stroke);   /* duoRmHead5: 3→2.5 */
  border-radius: var(--dr-radius-sm);
  font-family: var(--dr-font);
  font-size: 1.05rem;   /* duoRmHead5: 1.25→1.05 */
  font-weight: 900;
  color: var(--dr-blue-dark);   /* 20260817duoBlueBtn: 绿→蓝 */
  box-shadow: 0 2px 0 #2D2D2D;   /* duoRmHead5: 0 3px→0 2px */
  flex-shrink: 0;
  text-align: center;
  padding: 0;
  outline: none;
  caret-color: var(--dr-blue-dark);   /* 20260817duoBlueBtn: 绿→蓝 */
  -webkit-appearance: none;
  appearance: none;
}
.duo-ref-screen .digit-box::placeholder {
  color: #7FB6E8;   /* 20260817duoBlueBtn: 绿→蓝 */
  font-weight: 700;
}
.duo-ref-screen .digit-box:focus {
  box-shadow: 0 2px 0 #2D2D2D, 0 0 0 3px var(--dr-yellow);
  transform: translateY(-1px);
}
.duo-ref-screen .digit-box[readonly] {
  cursor: default;
}

/* 复制按钮 — 蓝色辅助 */
.duo-ref-screen .copy-btn {
  padding: 6px 12px;   /* duoRmHead5: 10→6 压缩Y轴 */
  background: linear-gradient(180deg, #74C0FC 0%, #4A9BE8 100%);
  color: #fff;
  font-family: var(--dr-font);
  font-size: 0.78rem;   /* duoRmHead5: 0.9→0.78 */
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  text-shadow: 1.5px 1.5px 0 #2D2D2D;
  border: 3px solid var(--dr-stroke);
  border-radius: var(--dr-radius-lg);
  box-shadow: 0 3px 0 #2D2D2D;   /* duoRmHead5: 0 4→0 3 */
  transition: all 0.15s ease;
  white-space: nowrap;
}
.duo-ref-screen .copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #2D2D2D;
  background: linear-gradient(180deg, #5DB3F0 0%, #3D99DB 100%);
}
.duo-ref-screen .copy-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2D2D2D;
}
.duo-ref-screen .copy-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   房间状态提示
   ============================================================ */
.duo-ref-screen .room-status-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;   /* duoRmHead5: 10→8 压缩Y轴 */
  background: rgba(255,255,255,0.7);
  border: 2.5px solid var(--dr-stroke);
  border-radius: var(--dr-radius-md);
  font-size: 0.8rem;
  color: var(--dr-fg);
  font-weight: 500;
  box-shadow: 0 3px 0 #2D2D2D;
  min-height: 37px;   /* duoStFull: 24→37 满状态高度 — 空状态(刚进双人UI)也保持有文字时的高度, 不再塌缩 */
}
.duo-ref-screen .room-status-tip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--dr-primary-dark);
}

/* ============================================================
   装饰层 — 保留星星点缀, 删除云朵(蓝色天空专属)
   ============================================================ */
.duo-ref-screen .decor-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.duo-ref-screen .decor-star {
  position: absolute;
  color: var(--dr-yellow);
  animation: drTwinkle 2s ease-in-out infinite;
  filter: drop-shadow(1px 1px 0 #2D2D2D);
}
.duo-ref-screen .decor-star-1 {
  top: 12%;
  left: 8%;
  width: 24px;
  height: 24px;
  animation-delay: 0s;
}
.duo-ref-screen .decor-star-2 {
  top: 20%;
  right: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 0.6s;
}
.duo-ref-screen .decor-star-3 {
  top: 45%;
  left: 5%;
  width: 18px;
  height: 18px;
  animation-delay: 1.2s;
}
.duo-ref-screen .decor-star svg { width: 100%; height: 100%; }
@keyframes drTwinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.4; transform: scale(0.7) rotate(180deg); }
}
/* 云朵已随蓝色背景移除 */
.duo-ref-screen .decor-cloud { display: none !important; }

/* ============================================================
   入场动画 (与单人模式同款) — 各区块错峰缩放淡入
   ============================================================ */
.duo-ref-screen .top-bar,
.duo-ref-screen .game-preview,
.duo-ref-screen .match-section,
.duo-ref-screen .room-section {
  animation: drEntrance 0.5s ease-out backwards;
}
.duo-ref-screen .top-bar { animation-delay: 0.03s; }
.duo-ref-screen .game-preview { animation-delay: 0.10s; }
.duo-ref-screen .match-section { animation-delay: 0.17s; }
.duo-ref-screen .room-section { animation-delay: 0.24s; }
@keyframes drEntrance {
  0%   { opacity: 0; transform: scale(0.86); }
  72%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 1; transform: scale(1.0); }
}

/* 内部元素 — 温和缩放弹出 */
.duo-ref-screen .icon-btn,
.duo-ref-screen .arrow-btn,
.duo-ref-screen .game-title,
.duo-ref-screen .game-desc,
.duo-ref-screen .game-dot,
.duo-ref-screen .room-btn,
.duo-ref-screen .invite-code-box,
.duo-ref-screen .room-status-tip {
  animation: drPop 0.4s ease-out backwards;
}
.duo-ref-screen .top-bar .icon-btn { animation-delay: 0.18s; }
.duo-ref-screen .game-preview .arrow-btn { animation-delay: 0.20s; }
.duo-ref-screen .game-title { animation-delay: 0.26s; }
.duo-ref-screen .game-desc { animation-delay: 0.32s; }
.duo-ref-screen .game-dot:nth-child(2) { animation-delay: 0.22s; }
.duo-ref-screen .game-dot:nth-child(3) { animation-delay: 0.27s; }
.duo-ref-screen .game-dot:nth-child(4) { animation-delay: 0.32s; }
.duo-ref-screen .game-dot:nth-child(5) { animation-delay: 0.37s; }
.duo-ref-screen .room-btn:nth-child(1) { animation-delay: 0.24s; }
.duo-ref-screen .room-btn:nth-child(2) { animation-delay: 0.30s; }
.duo-ref-screen .invite-code-box { animation-delay: 0.32s; }
.duo-ref-screen .room-status-tip { animation-delay: 0.36s; }
@keyframes drPop {
  0%   { opacity: 0; transform: scale(0.82); }
  78%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 1; transform: scale(1.0); }
}

/* 文字行(标题/描述) — Q弹缩放入场 */
.duo-ref-screen .game-title,
.duo-ref-screen .game-desc {
  animation: drTextPop 0.6s ease-out backwards;
}
.duo-ref-screen .game-title { animation-delay: 0.26s; }
.duo-ref-screen .game-desc { animation-delay: 0.32s; }
@keyframes drTextPop {
  0%   { opacity: 0; transform: scale(0); }
  42%  { opacity: 1; transform: scale(1.12); }
  58%  { opacity: 1; transform: scale(1.12); }
  76%  { opacity: 1; transform: scale(0.95); }
  88%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* 开始匹配按钮: 先缩放归位, 再持续脉动(两者叠加) */
.duo-ref-screen .match-btn {
  animation: drPop 0.44s ease-out backwards,
             drBtnPulse 2s ease-in-out 0.5s infinite;
}
.duo-ref-screen .match-btn.start-btn-locked { animation: none; }

/* 20260817duoMatchRed: 匹配中(.matching, JS 点击开始匹配后加类/取消时移除) —
   按钮变护眼浅红(等待对手状态), 与默认蓝形成清晰状态区分;
   色号取自护眼色系粉红族(--dr-pink #FF8BA7 同族): 亮端 #FF9EB4 樱花粉(白字可读),
   暗端 #F27E9B 立体暗边(同绿按钮 #5CB83A 的角色), 光晕同族粉红 */
.duo-ref-screen .match-btn.matching {
  background: linear-gradient(180deg, #FF9EB4 0%, #F27E9B 100%);
  animation: drPop 0.44s ease-out backwards,
             drMatchPulse 2s ease-in-out 0.5s infinite;
}
@keyframes drMatchPulse {
  0%, 100% { box-shadow: var(--dr-shadow-xl); }
  50% { box-shadow: 0 10px 0 #2D2D2D, 0 0 20px rgba(255, 142, 168, 0.4); }
}

/* 系统偏好减弱动效时, 退化为纯淡入 */
@media (prefers-reduced-motion: reduce) {
  .duo-ref-screen .top-bar,
  .duo-ref-screen .game-preview,
  .duo-ref-screen .match-section,
  .duo-ref-screen .room-section {
    animation: drFadeIn 0.3s ease-out backwards;
    animation-delay: 0s !important;
  }
  .duo-ref-screen .icon-btn,
  .duo-ref-screen .arrow-btn,
  .duo-ref-screen .game-title,
  .duo-ref-screen .game-desc,
  .duo-ref-screen .game-dot,
  .duo-ref-screen .room-btn,
  .duo-ref-screen .invite-code-box,
  .duo-ref-screen .room-status-tip { animation: none; }
  .duo-ref-screen .game-card { animation: drFadeIn 0.3s ease-out backwards; }
  .duo-ref-screen .game-card.sr-switch-out,
  .duo-ref-screen .game-card.sr-switch-in { animation: drFadeIn 0.3s ease-out backwards; }
  .duo-ref-screen .match-btn { animation: drBtnPulse 2s ease-in-out infinite; }
  .duo-ref-screen .match-btn.matching { animation: drMatchPulse 2s ease-in-out infinite; }   /* 20260817duoMatchRed: 红按钮配粉红光晕 */
  .duo-ref-screen .match-btn.start-btn-locked { animation: none; }
  /* 皮肤按钮: 关闭浮动和闪光点旋转缩放动画 */
  .duo-ref-screen .icon-btn-skin { animation: none; }
  .duo-ref-screen .icon-btn-skin .skin-btn-spark { animation: none; }
}
@keyframes drFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   覆盖: 中和旧版 .multiplayer-screen 规则的残留影响
   ============================================================ */

/* 1. 移除旧版 .multiplayer-screen 的 max-width/padding/align-items 等 base 规则的干扰 */
.duo-ref-screen {
  max-width: 970px !important;
  padding: 0 !important;
  width: 100% !important;
  display: none !important;
}
.duo-ref-screen.show {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: calc(100vh - 44px) !important;  /* duoBtnTall6: 撑满可用高度, 让按钮可弹性填充下方空余(手机端 ≤767px 会覆盖回 100dvh) */
  max-height: calc(100vh - 44px) !important;
}

/* 2. 旧版 .multiplayer-start-btn — 我们用自己的 .match-btn, 中和旧版 */
.duo-ref-screen .multiplayer-start-btn.match-btn {
  /* 使用 duo-ref 自己的样式, 不继承旧版 */
}

/* 3. 旧版 .multiplayer-room-section — 用 .room-section 替代 */
.duo-ref-screen .multiplayer-room-section {
  /* 不继承旧版, 全由 .room-section 控制 */
}

/* 4. 旧版 .room-code-box 等 — 用 .invite-code-box 替代
       (旧版 .room-join-box 已随 duoRmHead4 一并移除) */
.duo-ref-screen .room-code-box {
  /* 全由 .invite-code-box 控制 */
}

/* 5. 旧版 .room-status 用 .room-status-tip 替代 */
.duo-ref-screen .room-status {
  /* 全由 .room-status-tip 控制 */
}

/* ============================================================
   冲突覆盖层 — 中和 cartoon-cute.css/main.css 对 .multiplayer-screen
   旧结构的残留规则(本文件加载顺序在 cartoon-cute 之后, 同优先级 !important 反压)
   ============================================================ */

/* 0. 顶部栏: 中和全局 .top-bar/.top-bar-right 规则渗入
      (main.css .top-bar 的 padding 6/8/10/18 + .top-bar-right 的 column 竖排
       会把皮肤/打卡按钮竖着叠、返回按钮偏右 — 与单人模式 single-ref.css 中和层同款,
       保证双人顶部栏按钮水平横排且位置/大小与单人逐像素一致) */
.duo-ref-screen .top-bar {
  padding: 0 !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.duo-ref-screen .top-bar-right {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 0.1 匹配按钮区与房间操作区间距补回(page-container gap 已对齐单人=0) */
.duo-ref-screen .match-section {
  margin-bottom: 10px !important;   /* duoRmHead5: 16→10 压缩间距 */
}

/* 0.2 预览行(.game-preview): 中和 cartoon-cute 全局预览框规则(16/9比例/渐变底/粗边框/悬停位移)
        — 与单人模式 single-ref.css 中和层同款, 双人演示UI才能保持"箭头+白卡"横排布局 */
.duo-ref-screen .game-preview {
  aspect-ratio: auto !important;
  justify-content: space-between !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  overflow: visible !important;
}
.duo-ref-screen .game-preview:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* 1. 旧版"完全隐藏游戏标题/描述"规则 → 参考UI需要显示标题+描述
       (注意: 不设 margin:0 — 保留 .game-title 的 margin-bottom:2px 与单人模式一致) */
.duo-ref-screen .game-title,
.duo-ref-screen .game-desc {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  position: static !important;
  pointer-events: auto !important;
}

/* 2. 旧版 .game-card 星星装饰(::before/::after) → 参考UI白卡不需要 */
.duo-ref-screen .game-card::before,
.duo-ref-screen .game-card::after {
  content: none !important;
  display: none !important;
}

/* 3. 旧版 .game-card 内边距 → 由 .preview-image-wrapper/.preview-info 控制 */
.duo-ref-screen .game-card {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* 4. 演示画布强制撑满 16/9 容器(反压旧版 height:auto) */
.duo-ref-screen .preview-image-wrapper .game-icon-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 5. 桌面端旧版 .game-title/.game-desc display:none 反压 */
@media (min-width: 481px) {
  .duo-ref-screen .game-title,
  .duo-ref-screen .game-desc {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    position: static !important;
  }
}

/* ============================================================
   桌面端(≥768px)弹性填充 — 20260817duoBtnTall6
   用户反馈: 下方有多余空间。让 开始匹配/创建/加入 三个按钮弹性增长,
   自动铺满容器可用高度(任何桌面视口高度都贴底, 无需按分辨率硬编码)
   ============================================================ */
@media (min-width: 768px) {
  /* 内容列撑满容器高度(配合 .duo-ref-screen.show 的 min-height) */
  .duo-ref-screen .page-container { flex: 1 1 auto; }
  /* 开始匹配区: 弹性增长, 按钮随之拉伸填满 */
  .duo-ref-screen .match-section { display: flex; flex: 1 1 auto; }
  .duo-ref-screen .match-btn { flex: 1 1 auto; }
  /* 房间操作区: 弹性增长, 其中创建/加入按钮行随之拉伸填满(邀请码+状态条贴底) */
  .duo-ref-screen .room-section { flex: 1 1 auto; }
  .duo-ref-screen .room-buttons { flex: 1 1 auto; }
}

/* ============================================================
   手机端(≤767px)双人模式 — 布局照抄单人模式 singleMobile14 (20260817duoMobile2)
   单人模式手机端布局已获用户认可, 双人页逐条对齐:
   容器 100dvh 居中 / 滚动锁 / 图标按钮 56·50 / 预览卡独占整行 /
   箭头改横向胶囊放第二行
   duoMobile2: 双人元素比单人多(匹配按钮+房间按钮+邀请码卡+状态条),
   上方区间距压缩(top-bar 12/预览gap 10/match 12·10), 省出空间给
   底部匹配状态提示文字; room-section 内 gap 8 让状态条与卡不贴死
   ============================================================ */
@media (max-width: 767px) {
  /* 容器: X轴铺满; 高度锁死 100dvh + overflow hidden — duoKbFix3:
     用户要求双人页一屏放得下, 完全不许上下滑动。基础规则(overflow-y:auto)
     被覆盖为 overflow:hidden, 固定 height(不再 min/max), html/body 滚动锁
     (:has 规则)配合 → 手机端双人页零滚动;
     duoKbFix1 的安全居中保留: justify flex-start + 内容列 margin auto
     (有空间时视觉与 center 一致; 键盘压缩视口内容溢出时顶锚不双向溢出) */
  .duo-ref-screen.show { width: 100% !important; max-width: 100% !important; padding-left: 2px !important; padding-right: 2px !important; padding-top: 0px !important; padding-bottom: 70px !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; overflow: visible !important; box-sizing: border-box !important; justify-content: flex-start !important; }
  /* ↑ duoKbFix12: padding-top 弃 max(0px, env(safe-area-inset-top)) 改恒 0 —
     kbdbg 真机日志实锤(RMX5062/HeyTapBrowser): 键盘弹出后 env(safe-area-inset-top)
     假阳性跳 0→40(ih 恒 632 视口未扩展), 容器 padding-top 跟着 0→40 → 全部内容
     整体下移 40px 且键盘收起不恢复。手机浏览器网页态 env-top 正确值就是 0
     (duo-enter 基准全 0 验证), 锁定逻辑冻得住容器几何冻不住 env 驱动的 padding,
     故 CSS 层直接锚 0。电脑端 env 恒 0 无影响 */
  /* ↑ duoKbFix4: max-height 100dvh 覆盖桌面 duoBtnTall6 的 calc(100vh-44px) 夹制
     (否则手机容器被夹到 800/406)
     20260817drBtnClip: 基态 overflow clip→visible — 手机端左右箭头(flex:1 贴边)与
     开始匹配按钮 Q弹放大(drPop/popDiffBtn 1.16x)时左右越界 ~11px 被 clip 硬裁
     (实测 R=-11.4 裁切源即本容器)。平时内容一屏放得下无滚动(html/body 滚动锁
     仍兜底), visible 无风险; clip 仅在键盘态 .kbd 保留(防聚焦输入格的揭示滚动,
     见下条规则) — duoKbFix4 的"容器 scrollTop 恒 0"保证仅在键盘弹出时需要
     duoMobile3: padding-bottom 20→70px — 用户反馈 duoMobile2 间距压缩被安全居中
     (margin-block auto) 抵消一半, 按钮仅上移6px肉眼无感; 底部补白加大50px后
     内容可用高度减少, 居中位整体上移约25px, 开始匹配按钮明显上移且状态条
     下方留白更多(给匹配状态文字腾位置)。电脑端(≥768px)不受影响 */
  /* 键盘态才 clip: 输入格聚焦拉起键盘时, 浏览器可能程序性滚动容器(scrollTop>0)
     造成布局位移, clip 连"揭示滚动"都禁止 — 平时不需要, 放大动画不裁切 */
  .duo-ref-screen.show.kbd { overflow: hidden !important; overflow: clip !important; }
  /* duoKbFix7: 键盘态滚动锁 — JS 实测到键盘挂 .kblock(不再挂 .kbd, 下方 .kbd
     布局规则已弃用保留备查), 仅切 overflow clip 禁止一切揭示滚动, 布局零变化 */
  .duo-ref-screen.show.kblock { overflow: hidden !important; overflow: clip !important; }

  /* duoKbFix3: 键盘态 — 输入格聚焦时 JS 给容器挂 .kbd:
     ①隐藏演示动画区(箭头+卡片+圆点, 打字时不需要的纯装饰, 腾出最大空间)
     ②内容列撤居中改顶锚(防 iOS 覆盖式键盘时居中把邀请码压到键盘后面)
     → 邀请码6格稳定升到键盘上方可视区, 其余布局零位移零滚动;
     失焦(JS 160ms 防抖)后自动还原
     duoKbFix6: .kbd 挂/摘时机改由 main-app.js visualViewport 键盘实测驱动
     (修复 iOS/微信覆盖式键盘"点击瞬间整页先跳顶"), 且键盘态容器底部补白
     70→20px — duoMobile3 的 70px 会把邀请码卡/状态条挤出键盘压缩后的可视区
     (内容约 378px + 70px 补白 > 450px 模拟键盘可用高), 收回紧凑补白保证
     输入区完整可见 */
  .duo-ref-screen.kbd { padding-bottom: 20px !important; }
  .duo-ref-screen.kbd .game-preview { display: none !important; }
  .duo-ref-screen.kbd .page-container { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* 内容列 page-container: 撑高交由外层 screen(与单人同结构等效 — 双人多这层容器,
     去掉其 min-height/padding, 避免 100dvh 叠加导致纵向溢出、X轴多出内边距)
     duoKbFix1: margin-block auto = 安全垂直居中(容器高于内容时自动居中同原效果,
     键盘压缩视口内容溢出时 margin 归 0, 内容顶部锚定不被裁) */
  .duo-ref-screen .page-container { width: 100% !important; padding: 0 !important; box-sizing: border-box !important; justify-content: center !important; margin-top: auto !important; margin-bottom: auto !important; }

  /* 滚动锁(与单人同款 :has 规则): 双人页显示时 html/body 均禁滚 + 关闭 overscroll,
     移除「上下滑动移动效果」
     duoKbFix12: 追加 padding-top: 0 — body 的 main.css 规则 padding: env(safe-area-
     inset-top) 20px ... 同样吃 OPPO 键盘态 env 假阳性 0→40, 造成"键盘未收退出再进
     双人页, 容器 scT=40 带偏移进页"(kbdbg 会话3 实测 scT=40/顶栏80)。仅在双人页
     显示期间锚 0, 其他页面 body 的 env 规则不受影响 */
  body:has(#roomScreen.show) { justify-content: flex-start !important; overflow: hidden !important; padding-top: 0px !important; }
  html:has(body #roomScreen.show) body { overflow: hidden !important; }
  html:has(#roomScreen.show) { overflow: hidden !important; }
  html:has(body #roomScreen.show) { overscroll-behavior: none !important; }

  /* 放大顶部图标按钮: 返回(56) > 皮肤/打卡(50) — 与单人一致 */
  .duo-ref-screen .icon-btn { width: 56px !important; height: 56px !important; }
  .duo-ref-screen .icon-btn svg { width: 26px !important; height: 26px !important; }
  .duo-ref-screen .icon-btn-small { width: 50px !important; height: 50px !important; }
  .duo-ref-screen .icon-btn-small svg { width: 24px !important; height: 24px !important; }
  .duo-ref-screen .icon-btn-skin .skin-btn-icon { width: 24px !important; height: 24px !important; }

  /* 演示区改 wrap, 让预览卡独占第一行、箭头排第二行(duoMobile2: gap 14→10 压缩) */
  .duo-ref-screen .game-preview { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: space-between !important; gap: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; }

  /* 预览卡(演示UI)占满全宽 → X轴贴合屏幕(双人卡类名为 .game-card) */
  .duo-ref-screen .game-card { flex: 1 1 100% !important; order: -10 !important; }

  /* 左右箭头: 改长方形横向胶囊, 放在预览卡下方第二行("开始匹配"按钮上方)
     20260817duoArrowWhite: 手机端箭头按钮 蓝底白箭头 → 白底黑箭头(与单人模式手机端同款; 电脑端两侧圆钮保持蓝底白箭头) */
  .duo-ref-screen .arrow-btn { position: static !important; right: auto !important; left: auto !important; bottom: auto !important; width: auto !important; height: 42px !important; flex: 1 1 0 !important; min-width: 0 !important; border-radius: var(--dr-radius-full) !important; background: #FFFFFF !important; color: #2D2D2D !important; }
  .duo-ref-screen .arrow-btn svg { width: 26px !important; height: 26px !important; }
  .duo-ref-screen .arrow-btn-left { order: 0 !important; margin-left: 0 !important; }
  .duo-ref-screen .arrow-btn-right { order: 1 !important; margin-right: 0 !important; }

  /* 20260817drArrowBounce2: 触屏点击反馈改为 Q 弹回弹(main-app.js popDiffBtn) —
     去掉触摸 :hover 粘滞放大(触摸后 scale(1.1) 一直保持不恢复)与 :active 按压。
     不能用 !important: CSS 级联中 !important 优先级高于 WAAPI 动画, 会把 popDiffBtn
     的 Q弹整个压制(真机触摸后 hover 粘滞期间全程 transform:none, Q弹完全不可见)。
     非 important 的 none 作静止基态(源顺序覆盖上方桌面 hover 的 scale(1.1)),
     WAAPI 动画播放时正常盖过它 → 既有 Q弹又无粘滞残留 */
  .duo-ref-screen .arrow-btn:hover,
  .duo-ref-screen .arrow-btn:active { transform: none; box-shadow: var(--dr-shadow-card); }

  /* 20260817drBtnClip: 开始匹配按钮手机端治触摸放大裁切(同单人 start-btn) —
     触摸后 :hover 粘滞 scale(1.02)+translateY(-4px) 上浮, 按钮贴边放大观感如裁切;
     手机端点击反馈由 drPop Q弹负责, transform 置 none(非 important 不压制动画) */
  .duo-ref-screen .match-btn:hover,
  .duo-ref-screen .match-btn:active { transform: none; }

  /* 顶部栏(返回/皮肤/打卡): duoMobile2 下间距 18→12 压缩(单人18, 双人下方元素多) */
  .duo-ref-screen .top-bar { margin-top: 0 !important; margin-bottom: 12px !important; }

  /* 开始匹配区: duoMobile2 上22/下22→上12/下10 压缩, 省空间给底部状态条 */
  .duo-ref-screen .match-section { margin-top: 12px !important; margin-bottom: 10px !important; }

  /* 房间操作区: 间距已由 match-section 下10 提供, 收紧顶部 margin */
  .duo-ref-screen .room-buttons { margin-top: 0 !important; }

  /* room-section 内部(房间按钮行/邀请码卡/状态条): duoMobile2 gap 6→8,
     状态条与邀请码卡之间留呼吸空间, 匹配状态文字不贴死 */
  .duo-ref-screen .room-section { gap: 8px !important; }
}

/* ============================================================
   20260817duoMirror: 手机端「加入房间」输入邀请码时的中上方镜像卡
   背景: 底部邀请码UI被软键盘遮挡 → 克隆一份镜像卡(JS 生成)在屏幕中上方
   实时展示玩家输入的房间号, 纯只读展示不挡操作(pointer-events:none)。
   注意: 挂 body 下(非 .duo-ref-screen 内), 故样式不作用域限定, 避免继承
   桌面容器/锁定期 fixed 的 transform 干扰。
   ============================================================ */
.room-code-mirror {
  position: fixed;
  z-index: 2147483000;                 /* 高于一切, 键盘收起后仍可见片刻 */
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #FFFDF5 0%, #F5EEDC 100%);
  border: 3px solid #2D2D2D;
  border-radius: 18px;
  box-shadow: 0 6px 0 #2D2D2D, 0 12px 26px rgba(0,0,0,.28);
  pointer-events: none;               /* 纯展示, 不挡底部输入/加入操作 */
  animation: roomMirrorIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.room-code-mirror .room-code-mirror-label {
  font-family: var(--dr-font, inherit);
  font-weight: 900;
  font-size: .82rem;
  color: #2D2D2D;
  letter-spacing: .1em;
}
.room-code-mirror .room-code-mirror-digits {
  display: flex;
  gap: 5px;
}
.room-code-mirror .room-mirror-digit {
  width: 34px;
  height: 38px;
  background: linear-gradient(180deg, #C4E2FB 0%, #9CCBF6 100%);
  border: 2.5px solid #2D2D2D;
  border-radius: 10px;
  font-family: var(--dr-font, inherit);
  font-size: 1.25rem;
  font-weight: 900;
  color: #1E6FB8;
  text-align: center;
  padding: 0;
  box-shadow: 0 2px 0 #2D2D2D;
  flex-shrink: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.room-code-mirror.room-code-mirror-out {
  animation: roomMirrorOut .28s cubic-bezier(.55,0,.55,.2) forwards;
}
/* 20260817duoMirror2: 镜像卡上的「粘贴邀请码」快捷键 — 仅此按钮可点击,
   卡片整体 pointer-events:none 不挡操作, 按钮单独放行 */
.room-code-mirror .room-code-mirror-paste {
  pointer-events: auto;              /* 覆盖卡片 none, 让快捷键可点 */
  display: block;
  margin-top: 2px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #FFC53D 0%, #FF9F0A 100%);
  border: 3px solid #2D2D2D;
  border-radius: 999px;
  font-family: var(--dr-font, inherit);
  font-weight: 900;
  font-size: .92rem;
  color: #2D2D2D;
  box-shadow: 0 4px 0 #B56A00, 0 6px 14px rgba(0,0,0,.22);
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.room-code-mirror .room-code-mirror-paste:active { transform: translateY(2px); box-shadow: 0 2px 0 #B56A00; }
/* P148-0818inviteClose: 镜像卡关闭按钮 — 右上角圆形, 与粘贴按钮一样单独放行点击
   (卡片整体 pointer-events:none, 此按钮 pointer-events:auto 可点) */
.room-code-mirror .room-code-mirror-close {
  pointer-events: auto;
  position: absolute;
  top: -13px;
  right: -13px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FF6B5E 0%, #E8443A 100%);
  border: 3px solid #2D2D2D;
  border-radius: 50%;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 0 #A52A24, 0 5px 10px rgba(0,0,0,.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.room-code-mirror .room-code-mirror-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #A52A24; }
@keyframes roomMirrorIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.6); }
  62%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes roomMirrorOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.7); }
}