/* P148-0816glowFreeze: 全场景UI统一 v2 — ①按钮错峰入场(简单/普通/困难+开始游戏 依次淡入上移);
   ②背景大光圈(ambient-glow+organic-shape)完全静止, 彻底消除"进单人左移/进游戏右移"的缩放呼吸位移感知;
   ③移除 body[data-game] 隐藏背景规则, 进入游戏后光圈持续可见, 菜单/单人/游戏背景绝对统一 */
/* P148-0816btnUnify: 按钮规范统一 v3 — 管理按钮统一蓝色(对比模型豆绿) + 手机端3按钮Grid铺满游戏区X轴
   P148-0815uiUnify2: 统一化设计规范 v2 — 替换所有硬编码圆角为 CSS 变量 + 修复颜色不协调
   圆角: sm=小工具/媒体按钮 12px, md=游戏内工具按钮 16px, lg=次级按钮/输入框 22px, xl=主CTA clamp(28,4vh,36)px, pill=胶囊 */
:root {
  /* P148-0815uiFix: 手机端标题换行修复(逐字span无空白+nowrap) + 返回/模型/管理按钮尺寸统一 + 管理按钮恢复蓝紫色 */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: clamp(28px, 4vh, 36px);
  --radius-hero: clamp(36px, 5vh, 48px);
  --radius-pill: 999px;
  /* 单人模式 豆绿 */
  --green-deep: #8db09e;
  --green-deeper: #6b9a7e;
  --green-light: #b8d4c5;
  --green-lighter: #a5c4b2;
  --green-text: #3d5a4a;
  --green-text-soft: #5a7a6a;
  --green-card: #e8f0eb;
  --green-card2: #d4e0da;
  --green-shadow: rgba(139, 176, 158, 0.4);
  /* 双人模式 雾霾蓝 */
  --blue-deep: #8dafd0;
  --blue-deeper: #6b9ec7;
  --blue-light: #c5d9ea;
  --blue-lighter: #b4cfe7;
  --blue-text: #4a6b85;
  --blue-card: #e6eef5;
  --blue-card2: #d4dfeb;
  --blue-shadow: rgba(180, 207, 231, 0.4);
  /* 深色工具按钮 */
  --tool-bg: rgba(0,0,0,0.5);
  --tool-border: rgba(255,255,255,0.25);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; min-height: 100vh;
    font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
  }
  body {
    min-height: 100vh;
    /* P148-0816bgAnchor: 背景层次优化 — 底色调暖微深(#fbf8f1→#eee7da), 给光晕/色块留出色彩对比,
       不再白成一片(实测原底亮度228/255)。仅菜单页显示, 游戏内随 home-ambient 隐藏, 无性能影响 */
    background: linear-gradient(180deg, #fbf8f1 0%, #eee7da 100%);
    background-attachment: fixed;
    padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
  }
  /* P148-0816bgC2: 极淡径向暗角(径向渐变)将视觉焦点引向页面中心, 增强层次感
     P148-0816bgRich(A4): 暗角 0.055→0.09 增强明暗对比, 让中景结构层"亮"起来, 消除"浅底+浅光"无纵深感 */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* P148-0816bgAnchor: 暗角加强 0.09→0.15 且起始点后移(58%), 四角更沉、中心不变, 增加纵深感 */
    background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,0.15) 100%);
  }
  body[data-game]::after { display: none; }
  /* P148-0815fontWenkai: 极淡纸张噪点纹理 — SVG fractalNoise, 仅首页可见, 游戏中隐藏 */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
  }
  body[data-game]::before { display: none; }

  /* P148-0815homeP0: 首页背景氛围层 — 柔和光晕 + 漂浮粒子, 仅菜单页显示(z-index:-1 在内容之下) */
  /* P148-0816unifyUI: 全场景统一背景 — 移除 body[data-game] 隐藏规则, 进入游戏后光圈持续可见;
     transform:translateZ(0) 让背景层独立 GPU 合成, 与屏幕过渡(fade)彻底隔离,
     杜绝页面切换时被过渡层带动向左偏移(用户反馈: 进单人模式时光圈左移) */
  .home-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  /* P148-0816gameBgHide: 游戏进行中彻底移除背景装饰层 — 用户实测+备份工程对比双重确认根因:
     装饰层(粒子上升 ambientRise + SVG motif 旋转 + 大 blur(60px) 光圈)在游戏内持续消耗
     主线程样式计算与 GPU 合成; 手部识别触发两段式推理(palm→21关键点)+FABRIK IK 高峰时,
     主线程/合成线程总负载超阈值 → 严重卡顿。keepBg 版恢复装饰后卡顿回归即为实证。
     display:none 使全部动画与 blur 纹理退出渲染树(动画停摆、层销毁), 游戏内零开销;
     菜单页(首页/单人/双人选择页)装饰完整保留, 视觉不受影响。
     ===== 20260816keepBgInline: 用户明确要求游戏进行中也完整保留首页背景元素(光晕/粒子/有机色块),
     故取消下方隐藏规则, 全场景(首页/单人/双人/游戏)视觉绝对统一。若日后手部识别卡顿回归,
     将本行改回 body[data-game] .home-ambient { display: none; } 即可 */
  body[data-game] .home-ambient { display: block; }
  .ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    /* P148-0816bgAnchor: 光晕不透明度 0.62→0.8 — 浅底上太淡(实测全屏饱和度0.05), 加实让色彩可见 */
    opacity: 0.8;
    will-change: transform;
  }
  .glow-1 {
    width: 55vmax; height: 55vmax;
    left: -15vmax; top: -18vmax;
    background: radial-gradient(circle, rgba(141,176,158,0.85), transparent 70%);
    animation: none;
  }
  .glow-2 {
    width: 48vmax; height: 48vmax;
    right: -14vmax; top: -6vmax;
    background: radial-gradient(circle, rgba(141,175,208,0.8), transparent 70%);
    animation: none;
  }
  .glow-3 {
    width: 52vmax; height: 52vmax;
    left: 18%; bottom: -22vmax;
    background: radial-gradient(circle, rgba(255,198,138,0.5), transparent 70%);
    animation: none;
  }
  /* P148-0816glowFreeze: 背景光圈完全静止 — 用户连续两轮反馈"进单人模式光圈左移一点、
     进游戏右移一点"。实测(remote 430x900/1440x900 过渡期高频采样)证明光圈中心恒定无平移,
     位移感知来自 glowDrift 缩放呼吸(scale 1→1.1)让大光圈可见边缘伸缩。
     根治: 删除 glowDrift 缩放动画, 光圈全静止; 背景层次/光晕保留, 全场景(菜单/单人/游戏)绝对统一 */

  .ambient-particles { position: absolute; inset: 0; }
  .ambient-particles span {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    opacity: 0;
    animation: ambientRise linear infinite;
  }
  @keyframes ambientRise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    8% { opacity: 0.7; }
    85% { opacity: 0.45; }
    100% { transform: translateY(-110vh) translateX(24px); opacity: 0; }
  }

  /* P148-0816bgBC: 背景 有机形态(B) — 温暖治愈, 仅首页菜单显示.
     P148-0816glowFreeze: 冻结 morphOrg 旋转/变形动画 — 有机形态同为"大光圈", 旋转会让可见边缘
     伸缩被感知为移动; 改为完全静止的柔和色块, 与光圈一致全场景统一不移动 */
  .organic-shape {
    position: absolute;
    width: 46vmax; height: 46vmax;
    /* P148-0816bgAnchor: 有机形态 0.2→0.28, 颜色加深, 让治愈色块可感知 */
    opacity: 0.28;
    filter: blur(1px);
    border-radius: 50% 50% 48% 52% / 46% 54% 54% 46%;
  }
  .organic-1 {
    left: -15vmax; top: -13vmax;
    background: radial-gradient(circle at 34% 40%, rgba(143,178,158,0.95), rgba(143,178,158,0) 64%);
    animation: none;
  }
  .organic-2 {
    right: -16vmax; bottom: -15vmax;
    background: radial-gradient(circle at 62% 58%, rgba(141,175,208,0.95), rgba(141,175,208,0) 64%);
    animation: none;
  }

  /* P148-0816bgBC: 背景 体感隐喻(C) — 旋转追踪轨迹 + 体感追踪点, 极淡, 仅首页菜单显示 */
  .neck-motif { position: absolute; inset: 0; }
  .motif-arc {
    position: absolute;
    right: -8vmax; top: 2vmax;
    width: 60vmax; height: 60vmax;
    /* P148-0816bgAnchor: 轨迹环 0.15→0.2 */
    opacity: 0.2;
    animation: motifSpin 80s linear infinite;
  }
  .arc-track {
    stroke: #8db09e;
    stroke-width: 1.3;
    stroke-dasharray: 1 9;
    stroke-linecap: round;
    fill: none;
  }
  .arc-path {
    stroke: #6b9a7e;
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
  }
  .motif-dot {
    fill: #6b9a7e;
    transform-box: fill-box;
    transform-origin: center;
  }
  .motif-dot.dot-1 { animation: dotPulse 4.5s ease-in-out infinite; }
  .motif-dot.dot-2 { animation: dotPulse 6s ease-in-out infinite 0.6s; }
  .motif-dot.dot-3 { animation: dotPulse 5.2s ease-in-out infinite 1.4s; }
  @keyframes motifSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  /* P148-0816bgRich(A5): 追踪点呼吸改纯 opacity(去 scale) — 遵守 glowFreeze 红线,
     "只动透明度不动位置", 彻底规避小点缩放被感知为位移 */
  @keyframes dotPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  .motif-ring {
    position: absolute;
    left: -10vmax; bottom: -8vmax;
    width: 30vmax; height: 30vmax;
    border: 1.4px dashed rgba(141,175,208,0.4);
    border-radius: 50%;
    opacity: 0.6;
    animation: motifSpinRev 70s linear infinite;
  }
  @keyframes motifSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

  /* P148-0816bgRich(A1): 背景丰富化 — 可读结构层「颈椎活动轨迹」(右下角 protractor 象限):
     粗虚线主弧(活动范围) + 点状参考环(刻度感) + 波浪虚线轨迹 + 追踪点(opacity呼吸)。
     完全静止(无 transform 动画), 遵守 glowFreeze 红线; 让"太空"背景拥有可读形状锚点 */
  .structure-layer {
    position: absolute;
    right: -10vmax; bottom: -9vmax;
    width: 54vmax; height: 54vmax;
    /* P148-0816bgAnchor: 结构层(颈椎轨迹) 0.42→0.5 */
    opacity: 0.5;
    pointer-events: none;
  }
  .activity-svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .tick-arc {
    stroke: #8db09e; stroke-width: 1.2;
    stroke-dasharray: 2 7; stroke-linecap: round;
    fill: none;
  }
  .activity-arc {
    stroke: #6b9a7e; stroke-width: 3.2;
    stroke-dasharray: 1 9; stroke-linecap: round;
    fill: none;
  }
  .activity-track {
    stroke: #6b9ec7; stroke-width: 2;
    stroke-dasharray: 4 7; stroke-linecap: round;
    fill: none;
  }
  .activity-dot { fill: #6b9a7e; }
  .activity-dot.dot-a { animation: dotPulse 4.5s ease-in-out infinite; }
  .activity-dot.dot-b { animation: dotPulse 6s ease-in-out infinite 0.7s; }
  .activity-dot.dot-c { animation: dotPulse 5.4s ease-in-out infinite 1.5s; }

  /* P148-0816bgRich(A5): 亮粒子 — 大颗+高光晕, 作视觉兴趣点(仍仅上浮, 不动位置) */
  .ambient-particles span.bright {
    box-shadow: 0 0 10px 2px rgba(255,220,170,0.35);
  }

  /* P148-0816bgBC: 手机端降载 — 有机形态静态化(仅保留轮廓), 收窄隐喻元素, 保护低端机性能
     P148-0816bgRich(A6): 手机端结构层放大为主视觉(替代被隐藏的细环), 面板收窄 */
  @media (max-width: 767px) {
    /* P148-0816bgAnchor: 手机端装饰同步轻微加实(仅菜单页显示, 游戏内隐藏, 无游戏性能影响) */
    .organic-shape { animation: none; opacity: 0.16; }
    .motif-arc { width: 72vmax; height: 72vmax; }
    .motif-ring { display: none; }
    .structure-layer { width: 74vmax; height: 74vmax; right: -14vmax; bottom: -12vmax; opacity: 0.4; }
  }

  .warn-banner {
    width: 100%; max-width: 720px;
    background: linear-gradient(135deg, #ff8a3d, #ff4d8d);
    color: #fff;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin: 10px 0 0;
    font-size: 13px;
    display: none;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 4px 16px rgba(255,77,141,0.3);
  }
  .warn-banner.show { display: block; }
  .warn-banner b { font-weight: 800; font-size: 14px; }
  .warn-banner .warn-btns {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 10px; flex-wrap: wrap;
  }
  .warn-banner .warn-btns button {
    padding: 8px 18px; border-radius: var(--radius-pill); border: none;
    background: rgba(255,255,255,0.95); color: #3d5a4a;
    font-weight: 800; font-size: 12px; letter-spacing: 2px;
    cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  .warn-banner .warn-btns button.secondary {
    background: rgba(0,0,0,0.25); color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
  }
  .warn-banner .warn-btns button:active { transform: scale(0.96); }

  /* —— 换浏览器模式：更大的推荐浏览器列表 —— */
  .warn-banner .switch-browsers {
    margin-top: 14px;
    background: rgba(0,0,0,0.22);
    border-radius: var(--radius-md);
    padding: 12px 10px 10px;
  }
  .warn-banner .switch-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.95);
    margin-bottom: 10px;
  }
  .warn-banner .switch-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .warn-banner .switch-item {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-sm);
    padding: 10px 6px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .warn-banner .switch-item:active {
    transform: scale(0.94);
    background: rgba(255,255,255,0.28);
  }
  .warn-banner .switch-emoji {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 6px;
  }
  .warn-banner .switch-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 1px;
  }

  .title-wrap {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 24px;
    flex-shrink: 0;
  }
  .title-main {
    /* P148-0815fontRevert: 用户回退 — 得意黑(Smiley Sans)品牌字体, 加粗800, 黑色, 失败时回退系统字体 */
    font-family: "ZCOOL KuaiLe", "Smiley Sans Oblique", "Smiley Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(64px, 16vw, 112px);
    font-weight: 800;
    /* P148-0815homeP0: 逐字拆分后 letter-spacing 用变量, text-indent 抵消末字尾随间距保持居中 */
    --ls: clamp(4px, 1.2vw, 8px);
    letter-spacing: var(--ls);
    text-indent: var(--ls);
    /* P148-0816bgAnchor: 品牌色锚点 — 标题纯黑→豆绿渐变文字(background-clip:text),
       形成整页唯一高饱和记忆点; 深绿#2e5944 保证浅底大字号对比度(AA)
       FIX-0816bgAnchor2: 渐变 clip 移出父级! 父级 background-clip:text + 子 span 带 transform
       (titleCharIn) 触发 Chromium 合成 bug → 四字被"盖章"到首字位置叠成一团(用户实测)。
       改为逐字 clip(渐变作用在每个 .title-char 自身), 绕开跨元素裁剪; 父级只留实心深绿兜底色 */
    color: #2e5944;
    transform: translateZ(0);
    will-change: transform;
    animation: titleRubber 2s ease-in-out infinite;
    display: inline-block;
    line-height: 1.15;
    /* P148-0815titleFix: 逐字 span 间无空白 + nowrap 保证手机端标题永不换行 */
    white-space: nowrap;
  }
  /* P148-0815homeP0: 标题逐字入场动效.
     P148-0816fontGate: 默认不播动画(等自托管字体加载应用完, index.html 的 fonts.ready 监听给 <html> 加 .fonts-ready 才播),
     根治 FOUT——此前动画在字体就绪前播放, 首帧用回退字体(旧样式)播一遍, 字体下载完又突然换字
     P148-0816fontSeq: 字体就绪前标题完全不可见(opacity:0 占位, 避免出现"先静态显示→再被动画重置"的矛盾帧),
     就绪后仅由入场动画揭示; forwards 保持最终可见态(否则动画结束后回落 opacity:0 标题消失) */
  .title-char {
    display: inline-block;
    opacity: 0;
    /* P148-0816bgAnchor2: 逐字豆绿渐变(background-clip:text 作用在自身, 随 transform 一起走,
       彻底规避父级 clip + 子 transform 的 Chromium 叠字 bug; 父级 #2e5944 实心兜底, 渐变失败也安全) */
    background: linear-gradient(135deg, #2e5944 0%, #5b9371 55%, #4d7f63 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  html.fonts-ready .title-char {
    animation: titleCharIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes titleCharIn {
    from { opacity: 0; transform: translateY(28px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* P148-0815fontRevert: 副标题黑色统一, 装饰线深灰 */
  .title-slogan {
    margin-top: 22px;
    font-size: clamp(18px, 3.5vw, 30px);
    font-weight: 800;
    color: #2d2d2d;
    letter-spacing: 6px;
    line-height: 1.6;
    /* P148-0816btnUnify: 防止手机端文字换行(display:flex下匿名flex item会wrap) */
    white-space: nowrap;
    animation: titleSubIn 0.8s cubic-bezier(.2,.8,.2,1) 0.55s backwards;
    /* P148-0815fontWenkai: 左右装饰线呼应"转动"主题 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.5vw, 20px);
  }
  .title-slogan::before,
  .title-slogan::after {
    content: '';
    width: clamp(22px, 5vw, 44px);
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .title-slogan::before {
    /* P148-0816bgAnchor: 装饰线改豆绿, 呼应品牌锚点 */
    background: linear-gradient(90deg, transparent, rgba(77,127,99,0.55));
  }
  .title-slogan::after {
    background: linear-gradient(90deg, rgba(77,127,99,0.55), transparent);
  }
  .title-tagline {
    margin-top: 10px;
    font-size: clamp(14px, 2.4vw, 18px);
    color: #8a8a8a;
    letter-spacing: 3px;
    line-height: 1.6;
    animation: titleSubIn 0.8s cubic-bezier(.2,.8,.2,1) 0.75s backwards;
  }
  @keyframes titleSubIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes titleRubber {
    0%, 100% { transform: translate3d(0,0,0) scaleX(1) scaleY(1); }
    25%      { transform: translate3d(0,0,0) scaleX(1.15) scaleY(0.85); }
    50%      { transform: translate3d(0,0,0) scaleX(0.9) scaleY(1.1); }
    75%      { transform: translate3d(0,0,0) scaleX(1.05) scaleY(0.95); }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .main-buttons {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    max-width: 580px;
    padding: 0 36px;
  }
  .main-btn {
    height: clamp(72px, 10vh, 96px);
    border-radius: var(--radius-hero);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    transform: translateZ(0);
    will-change: transform, box-shadow;
    /* P148-0815homeP0: 图标+文字水平居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  /* P148-0816homeNoIcon: 首页主按钮左侧SVG图标已移除(用户要求), 删除.btn-icon死代码 */
  /* P148-0815homeP0: 主按钮微光扫过动效 */
  .main-btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: translateX(-250%) skewX(-20deg);
    animation: btnShine 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes btnShine {
    0%, 55% { transform: translateX(-250%) skewX(-20deg); }
    100% { transform: translateX(320%) skewX(-20deg); }
  }
  .main-btn-primary {
    background: linear-gradient(135deg, #b8d4c5, #a5c4b2);
    color: #3d5a4a;
    /* P148-0816btnTexture: 分层阴影 + 内高光增强质感 */
    box-shadow: 0 6px 20px rgba(165, 196, 178, 0.38), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .main-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(165, 196, 178, 0.5), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .main-btn-primary:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 15px rgba(165, 196, 178, 0.38), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .main-btn-secondary {
    background: linear-gradient(135deg, #c5d9ea, #b4cfe7);
    color: #4a6b85;
    box-shadow: 0 6px 20px rgba(180, 207, 231, 0.38), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .main-btn-secondary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(180, 207, 231, 0.5), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .main-btn-secondary:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 15px rgba(180, 207, 231, 0.38), inset 0 1px 0 rgba(255,255,255,0.2);
  }

  /* P2-43: 已删除 .cards / .card / .card::before / .card-icon / .card-title /
     .card-desc / .card-btn 等死代码 — 经 Grep 确认 HTML 仅使用 game-card /
     modal-card / switch-modal-card 等复合类名, JS 不引用 bare .card 相关类 */

  .footer-tip {
    margin-top: 16px;
    margin-bottom: max(20px, env(safe-area-inset-bottom));
    font-size: clamp(12px, 2vw, 14px); color: #8a8a8a; letter-spacing: 1px;
    text-align: center; opacity: 0.8; padding: 0 24px; line-height: 1.8;
    flex-shrink: 0;
  }

  /* P148-0816noScroll: 电脑端(桌面)专属 — 1) 页面布局已能完整展示所有功能与按钮, 禁用滚动;
     2) 底部提示文案一行展示不换行。移动端(≤767px)保持自然换行与滚动能力, 避免内容被裁剪
     必须同时设置 html 与 body: 因 html 有 overflow-x:hidden, body 的 overflow 不会传播到视口 */
  @media (min-width: 768px) {
    html, body { overflow: hidden; }
    .footer-tip { white-space: nowrap; }
    /* P148-0816noScroll(A2): 桌面端强制解除 footer-tip 任何 max-width 约束(即使 cartoon-cute
       旧缓存仍带 .footer-tip{max-width:460px!important}, 长文案 nowrap 时会被压到限宽盒内
       、向右溢出导致看起来不居中)。用 .home-panel .footer-tip 提升优先级(0,2,0)盖过旧约束,
       配合上方 nowrap + 父级 align-items:center, 无论 cartoon-cute 是否缓存, 文案都一行居中 */
    .home-panel .footer-tip { max-width: none !important; }
  }

  /* P148-0709v: 隐私与产品说明链接（位于 footer-tip 上方，无按钮外观，文本样式） */
  .privacy-link {
    margin-top: 24px;
    background: none;
    border: none;
    padding: 6px 12px;
    font-size: clamp(13px, 2.2vw, 16px);
    color: #8a8a8a;
    letter-spacing: 1px;
    opacity: 0.9;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s, opacity 0.2s, transform 0.2s;
    border-radius: var(--radius-sm);
  }
  .privacy-link:hover {
    color: #5a7a6a;
    opacity: 1;
    transform: translateY(-1px);
  }
  .privacy-link:active {
    transform: translateY(0);
  }
  /* P148-0816bgRich(A3): 首页内容毛玻璃面板 — 标题/按钮放入极淡玻璃面板, 与背景产生前后咬合,
     消除"内容浮在浅底上"的空旷感。z-index:0 在背景层(-1)之上、无遮挡交互。
     :has() 可见性管理(现代浏览器2022+全支持): ①过渡淡出时面板同步淡出(避免空面板残影);
     ②首页内容被 JS display:none(离开首页)时面板隐藏自身, 不残留空壳。
     旧浏览器不支持 :has 时最坏情况=面板残留(纯装饰, 不影响功能)。 */
  .home-panel {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(26px, 6vh, 52px) clamp(20px, 5vw, 52px);
    border-radius: var(--radius-hero);
    /* P148-0816roomLayout: 去纯白背景 — 白色渐变 0.30/0.13 + blur16 在浅底上形成明显白块,
       用户反馈"纯白背景难看"。改为近透明渐变(6%/2%) + 弱 blur(8px), 只保留轻微磨砂层次,
       不再出现白色面板感, 内容直接浮在彩色背景上
       P148-0816bgAnchor: 内容承载感 — 近透明白底实测面板只比背景暗21(无锚点)。
       改为豆绿系透明玻璃(18%/6% 绿渐晕 + blur12 + 绿描边 + 分层投影), 非白卡:
       内容有了"承载面"但保持通透, 与品牌豆绿呼应, 遵循用户红线(不要纯白背景) */
    background: linear-gradient(165deg, rgba(141,176,158,0.18), rgba(165,196,178,0.06));
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(107,154,126,0.30);
    box-shadow: 0 22px 60px rgba(61,90,74,0.16), inset 0 1px 0 rgba(255,255,255,0.28);
    transition: opacity 0.28s ease-out;
  }
  .home-panel:has(.title-wrap[style*="display: none"]) { display: none; }
  .home-panel:has(.title-wrap.transitioning-out) { opacity: 0; }
  /* P148-0709v: 隐私与产品说明弹窗 */
  .privacy-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    padding: 20px;
  }
  .privacy-modal.show { display: flex; }
  .privacy-modal .modal-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px 32px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    animation: privacyModalIn 0.25s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes privacyModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .privacy-modal .modal-close {
    position: absolute; top: 12px; right: 14px;
    width: 32px; height: 32px;
    background: none; border: none; font-size: 22px;
    color: #888; cursor: pointer; line-height: 1;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .privacy-modal .modal-close:hover { background: #f0f0f0; color: #333; }
  .privacy-modal h2 {
    text-align: center;
    font-size: clamp(22px, 3.5vw, 28px);
    font-weight: 800;
    color: #2d3d30;
    margin: 0 0 12px;
  }
  .privacy-modal .modal-sub {
    text-align: center;
    font-size: clamp(14px, 2.2vw, 16px);
    color: #5a6a5d;
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .privacy-modal .privacy-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .privacy-modal .privacy-section {
    background: #f5f8f5;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
  }
  .privacy-modal .privacy-section h3 {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 700;
    color: #3d5a4a;
    margin: 0 0 10px;
  }
  .privacy-modal .privacy-section p {
    font-size: clamp(12px, 1.7vw, 13px);
    color: #5a6a5d;
    line-height: 1.6;
    margin: 0;
  }
  .privacy-modal .modal-ok {
    display: block; margin: 0 auto;
    background: linear-gradient(135deg, #5a7a6a, #3d5a4a);
    color: #fff;
    border: none;
    padding: 12px 56px;
    font-size: clamp(15px, 2.2vw, 17px);
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(61, 90, 74, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .privacy-modal .modal-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(61, 90, 74, 0.4);
  }
  .privacy-modal .modal-ok:active { transform: translateY(0); }
  .privacy-modal .modal-footer {
    text-align: center;
    margin-top: 18px;
    font-size: 12px;
    color: #9a9a9a;
    line-height: 1.7;
  }
  @media (max-width: 600px) {
    .privacy-modal .privacy-sections {
      grid-template-columns: 1fr;
    }
    .privacy-modal .modal-card { padding: 28px 20px 22px; }
  }

  .single-mode-screen {
    display: none;
    width: 100%;
    max-width: 800px;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: center;
  }
  .single-mode-screen.show {
    display: flex;
  }
  /* P149-fix: 双人模式 base 规则必须放在所有媒体查询之前，否则后定义的 base 规则
     会覆盖 @media (min-width: 768px) 的 max-width: 1000px 和 padding: 40px 60px，
     导致桌面端实际生效 max-width: 800px + padding: 24px，可用宽度不足，
     grid 内容（icon-box 640 + 箭头 64*2 + gap 20*2 = 808px）溢出，
     icon-box 向右偏移，与 title/desc 不对齐 */
  .multiplayer-screen {
    display: none;
    width: 100%;
    max-width: 800px;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: center;
  }
  .multiplayer-screen.show {
    display: flex;
  }
  .single-mode-back-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* P148-0816btnUnify: 统一对齐游戏内 #btnBack 规范 — bg 0.35→0.5(同 --tool-bg),
       font-weight 600→800, font-size 16→15, padding 10px 20px→10px 18px, 加 box-shadow */
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    /* P148-0816btnTexture: 毛玻璃增强 + 分层阴影 + 内高光 */
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .single-mode-back-btn:hover {
    background: rgba(0,0,0,0.5);
    transform: translateX(-2px);
  }
  .game-select-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
    padding: 0;
  }
  .game-select-arrow {
  width: clamp(40px, 6vw, 56px);
  height: clamp(40px, 6vw, 56px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(165, 196, 178, 0.45);
  color: #5a7a6a;
  font-size: clamp(18px, 3vw, 24px);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0;
  /* P148-0816btnTexture: 毛玻璃 + 分层阴影(外柔光+内高光)增强质感 */
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  line-height: 1;
  letter-spacing: -2px;
}
  /* P148-0709za: hover 效果只在支持 hover 的设备（PC鼠标）上生效，
     手机触屏点击后 :hover 会持续保持导致箭头一直亮着，用 @media (hover:hover) 排除 */
  @media (hover: hover) {
    .game-select-arrow:hover {
      background: rgba(165, 196, 178, 0.8);
      color: #fff;
      border-color: rgba(165, 196, 178, 1);
      transform: scale(1.1);
    }
  }
  .game-select-arrow:active {
    background: rgba(165, 196, 178, 0.8);
    color: #fff;
    border-color: rgba(165, 196, 178, 1);
    transform: scale(0.95);
  }
  /* P148-0709z: 滑动触发时的视觉反馈（模拟按下变色+缩小） */
  .game-select-arrow.swipe-active {
    background: rgba(165, 196, 178, 0.8);
    color: #fff;
    border-color: rgba(165, 196, 178, 1);
    transform: scale(0.95);
    animation: none;
    opacity: 1;
  }
  .multiplayer-screen .game-select-arrow.swipe-active {
    background: rgba(165, 196, 178, 0.8);
    border-color: rgba(165, 196, 178, 1);
  }
  .multiplayer-screen .game-select-arrow:active {
    background: rgba(165, 196, 178, 0.8);
    color: #fff;
    border-color: rgba(165, 196, 178, 1);
    transform: scale(0.95);
  }
  .game-select-arrow.prev {
    animation: arrowPulse 2s ease-in-out infinite;
    animation-delay: 0s;
  }
  .game-select-arrow.next {
    animation: arrowPulse 2s ease-in-out infinite;
    animation-delay: 1s;
  }
  @keyframes arrowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }
  @media (hover: hover) {
    .game-select-arrow:hover {
      animation: none;
      opacity: 1;
    }
  }
  .game-card {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s cubic-bezier(.2,.8,.2,1);
    padding: 0;
    max-width: 100%;
    position: relative;
  }
  /* 桌面端：grid 布局（仅 >=481px 生效，避免干扰手机端）
     row 1: 返回按钮（column 2，左对齐）
	     row 2: [箭头] [icon-box] [箭头]
	     row 3: 标题（跨 3 列居中）
	     row 4: 描述（跨 3 列居中） */
  @media (min-width: 481px) {
    .game-icon-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto auto auto;
	      align-items: center;
	      justify-items: center;
	      column-gap: 12px;
	      row-gap: 8px;
	      width: 100%;
	    }
	    .game-icon-column {
	      grid-column: 2;
	      grid-row: 1;
	      display: flex;
	      flex-direction: column;
	      align-items: stretch;
	      width: 100%;
	      max-width: 720px;
	      margin: 0 auto;
	    }
	    .game-icon-column .single-mode-back-btn { align-self: flex-start; margin-left: 0; margin-bottom: 4px; }
	    .game-icon-row .game-select-arrow.prev { grid-column: 1; grid-row: 1; }
	    .game-icon-row .game-select-arrow.next { grid-column: 3; grid-row: 1; }
	    .game-icon-row .game-title { grid-column: 1 / 4; grid-row: 2; }
	    .game-icon-row .game-desc { grid-column: 1 / 4; grid-row: 3; }
  }
  .game-card.fade-out-left {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
  }
  .game-card.fade-out-right {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }
  .game-card.fade-in {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  .game-icon-box {
  width: 100%;
  height: clamp(140px, 40vw, 260px);
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
  /* P148-0816demoGreen: 单人模式演示框背景统一为按钮同色系豆绿渐变(#8db09e→#6b9a7e的浅色tint) */
  background: linear-gradient(160deg, #ddeadd, #c2d8c9);
  display: flex;
  align-items: center;
  justify-content: center;
  /* P148-0816btnTexture: 分层阴影(大柔光+近距+内高光)增强立体质感 */
  box-shadow: 0 12px 40px rgba(165, 196, 178, 0.28), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
  margin-bottom: 20px;
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
  .game-icon-box:hover {
    /* P148-0816btnTexture: hover 分层阴影增强悬浮感 */
    box-shadow: 0 16px 50px rgba(165, 196, 178, 0.42), 0 4px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
    transform: translateY(-4px);
  }
  /* P148-0711e: 锁定游戏徽章 — 显示在游戏图标右上角，标注"开发中" */
  .game-lock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 5;
    pointer-events: none;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* P148-0711e: 锁定时开始按钮的禁用样式 */
  .start-btn-locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: #999 !important;
    color: #fff !important;
  }
  .multiplayer-screen .game-icon-box {
    /* P148-0816duoBlue: 双人演示框背景降饱和(原#e6eef5→#d4dfeb S36-43%偏艳) → #e8eef3→#d8e0e9(S27-30%),
       与单人绿框(S22-24%)视觉重量对齐, 保留蓝色身份, 蓝绿双色调平衡 */
    background: linear-gradient(160deg, #e8eef3, #d8e0e9);
    /* P148-0816btnTexture: 分层阴影 + 内高光(蓝色变体) */
    box-shadow: 0 12px 40px rgba(180, 207, 231, 0.28), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .multiplayer-screen .game-icon-box:hover {
    box-shadow: 0 16px 50px rgba(180, 207, 231, 0.42), 0 4px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .multiplayer-screen .game-select-arrow {
    border-color: rgba(180, 207, 231, 0.5);
    color: #4a6b85;
  }
  @media (hover: hover) {
    .multiplayer-screen .game-select-arrow:hover {
      background: rgba(180, 207, 231, 0.8);
      border-color: rgba(180, 207, 231, 1);
    }
  }
  .game-icon {
    font-size: clamp(56px, 12vw, 88px);
    line-height: 1;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1.5);
  }
  .game-icon-box:hover .game-icon {
    transform: scale(1.1) rotate(-5deg);
  }
  /* P148-demo: 乒乓球游戏图标 canvas 动画（两个表情包打乒乓球） */
  .game-icon-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius-md);
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1.5);
  }
  .game-icon-box:hover .game-icon-canvas {
    transform: scale(1.04);
  }
  .game-title {
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 800;
    color: #2d2d2d;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-align: center;
    /* P148-0816fontAudit: 切换游戏后标题文字入场动效(缩放+上浮+淡入), 由JS重触发 */
    opacity: 0;
    animation: gameTitleIn 0.55s cubic-bezier(.2,.8,.2,1) 0.12s forwards;
    will-change: opacity, transform;
  }
  .game-desc {
    font-size: clamp(15px, 2.5vw, 18px);
    color: #6a6a6a;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.4;
    padding: 0 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* P148-0816fontAudit: 描述文字紧随标题入场(略延迟), 形成序列动效 */
    opacity: 0;
    animation: gameTitleIn 0.55s cubic-bezier(.2,.8,.2,1) 0.28s forwards;
    will-change: opacity, transform;
  }
  /* P148-0816fontAudit: 游戏标题/描述切换入场关键帧 */
  @keyframes gameTitleIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .difficulty-section {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
  }
  .diff-btn {
    padding: 10px 24px;
    border-radius: var(--radius-lg);
    font-size: clamp(13px, 2.2vw, 16px);
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1.5px solid #a5c4b2;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.72);
    color: #5a7a6a;
    flex-shrink: 0;
    /* P148-0816btnTexture: 毛玻璃 + 分层阴影 + 内高光 */
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .diff-btn.active {
    background: linear-gradient(135deg, #8db09e, #6b9a7e);
    color: #fff;
    border-color: #6b9a7e;
    box-shadow: 0 8px 24px rgba(139, 176, 158, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .diff-btn:hover:not(.active) {
    transform: translateY(-2px);
    border-color: #8db09e;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .single-mode-start-btn {
    width: 100%;
    max-width: 400px;
    height: clamp(56px, 8vh, 72px);
    border-radius: clamp(28px, 4vh, 36px);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: 3px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #8db09e, #6b9a7e);
    color: #fff;
    /* P148-0816btnTexture: 分层阴影 + 内高光 + 定位用于微光扫过 */
    box-shadow: 0 8px 24px rgba(139, 176, 158, 0.4), 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    position: relative;
    overflow: hidden;
  }
  /* P148-0816btnTexture: 微光扫过动效(复刻 main-btn-primary 的 btnShine) */
  .single-mode-start-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-250%) skewX(-20deg);
    animation: btnShine 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  .single-mode-start-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 36px rgba(139, 176, 158, 0.5), 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.3);
    background: linear-gradient(135deg, #9dc9b8, #7ba88e);
  }
  .single-mode-start-btn:active {
    transform: translateY(-2px) scale(0.98);
  }

  @media (min-width: 768px) {
    /* P148-0816fitView: 桌面端选择页高度收进视口(消除 body 垂直滚动条 → 固定背景不再因
       视口宽度变化而左右偏移)。原内容 933px>900px 视口 → 出现滚动条 → 光圈左移;
       开始游戏后滚动条消失 → 光圈右移。通过压缩垂直间距使其在 900px 高度内放得下,
       并加 max-height+overflow-y:auto 保险: 极矮屏只在页内滚动, 不再触发 body 滚动条。 */
    .single-mode-screen,
    .multiplayer-screen {
      max-width: 1000px;
      padding: 32px 40px;
      max-height: calc(100vh - 8px);
      overflow-y: auto;
    }
    .game-select-container {
      margin-bottom: 24px;
    }
    .game-icon-row {
      gap: 12px;
    }
    .game-select-arrow {
      width: clamp(56px, 5vw, 72px);
      height: clamp(56px, 5vw, 72px);
      font-size: clamp(24px, 2.5vw, 32px);
    }
    /* P148-07010w6: game-icon-column 包裹返回按钮和演示动画 */
    .game-icon-column {
      max-width: 720px;
    }
    .game-icon-box {
      width: 100%;
      max-width: 720px;
      height: auto;
      margin-bottom: 32px;
    }
    .game-icon {
      font-size: clamp(96px, 14vw, 140px);
    }
    .game-title {
      font-size: clamp(38px, 5vw, 52px);
      margin-bottom: 14px;
    }
    .game-desc {
      font-size: clamp(20px, 2.5vw, 24px);
      padding: 0 40px;
    }
    .difficulty-section {
      gap: 32px;
      margin-bottom: 24px;
    }
    .diff-btn {
      padding: 18px 48px;
      font-size: clamp(20px, 2.5vw, 24px);
    }
    .single-mode-start-btn {
      height: clamp(72px, 7vh, 88px);
      font-size: clamp(24px, 2.8vw, 32px);
    }
    /* P148-0815uiUnify: 双人开始按钮桌面端与单人一致放大 */
    .multiplayer-start-btn {
      height: clamp(72px, 7vh, 88px);
      font-size: clamp(24px, 2.8vw, 32px);
    }
    /* P148-0816fitView: 桌面端双人"开始匹配"底部间距收窄(24→16), 手机端仍保持 base 24px */
    .multiplayer-screen .multiplayer-start-btn {
      margin-bottom: 16px;
    }
    /* P148-0816roomLayout: 双人房间页桌面端压缩 — 点击"创建/加入房间"后 codeBox/joinBox 展开
       (约+53px/+44px), 原内容已顶满 max-height:calc(100vh-8px), flex 容器把"开始匹配"按钮
       压缩至 11px/20px(实测)。压缩垂直间距留出展开空间 + flex-shrink:0 保险防按钮压扁。
       仅限 .multiplayer-screen 作用域, 不影响单人模式。 */
    .multiplayer-screen .game-select-container {
      margin-bottom: 10px;
    }
    .multiplayer-screen .game-icon-box {
      margin-bottom: 12px;
    }
    .multiplayer-screen .game-title {
      margin-bottom: 6px;
    }
    .multiplayer-screen .multiplayer-start-btn {
      flex-shrink: 0;
      margin-bottom: 10px;
    }
    .multiplayer-screen .multiplayer-room-section {
      flex-shrink: 0;
      gap: 8px;
    }
  }

  @media (max-width: 480px) {
    .title-wrap {
      margin-bottom: 44px;
      padding: 0 16px;
    }
    .title-main {
      font-size: clamp(52px, 14vw, 76px);
      --ls: 6px;
      letter-spacing: var(--ls);
      text-indent: var(--ls);
    }
    .title-slogan {
      margin-top: 16px;
      /* P148-0816btnUnify: 缩小字号+字距+nowrap，防止手机端"用体感游戏，轻松活动颈椎"换行 */
      font-size: clamp(13px, 3vw, 18px);
      letter-spacing: 1px;
      line-height: 1.6;
      white-space: nowrap;
    }
    .title-tagline {
      margin-top: 8px;
      font-size: clamp(13px, 2.4vw, 16px);
      letter-spacing: 2px;
      line-height: 1.6;
    }
    .main-buttons {
      gap: 20px;
      max-width: 360px;
      padding: 0 16px;
    }
    .main-btn {
      height: clamp(54px, 8vh, 64px);
      font-size: clamp(18px, 3.5vw, 24px);
      letter-spacing: 3px;
    }
    .single-mode-screen {
      max-width: 100%;
      padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom));
    }
    .multiplayer-screen {
      max-width: 100%;
      padding: max(8px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom));
    }
    .game-select-container {
      margin-bottom: 8px;
      width: calc(100% + 12px);
      margin-left: -6px;
      margin-right: -6px;
    }
    /* P149-v4: 手机端 grid 三行布局（严格按规范）
       row 1: 演示窗口（跨 3 列）
       row 2: 圆形左箭头 | 大标题 | 圆形右箭头（严格同一水平线）
       row 3: 副标题（跨 3 列，居中） */
    .game-icon-row {
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      grid-template-rows: auto auto auto;
      align-items: center;
      justify-items: center;
      column-gap: 6px;
      row-gap: 4px;
      width: 100%;
    }
    /* 圆形白底箭头（P148-0815uiUnify: 手机端与桌面统一为圆形） */
    .game-select-arrow {
      width: 56px;
      height: 56px;
      font-size: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      border: 1.5px solid rgba(165, 196, 178, 0.5);
      color: #5a7a6a;
    }
    .game-icon-row .game-select-arrow.prev {
      grid-column: 1;
      grid-row: 2;
      justify-self: center;
      align-self: center;
    }
    .game-icon-row .game-select-arrow.next {
      grid-column: 3;
      grid-row: 2;
      justify-self: center;
      align-self: center;
    }
    .multiplayer-screen .game-select-arrow {
      border-color: rgba(180, 207, 231, 0.5);
      color: #4a6b85;
    }
    .game-card {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      padding: 0;
      max-width: 100%;
      align-self: stretch;
      align-items: stretch;
    }
    .game-icon-column {
      grid-column: 1 / 4;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      max-width: 100%;
      margin: 0;
    }
    .game-icon-column .single-mode-back-btn { align-self: flex-start; margin-left: 4px; margin-bottom: 4px; }
    .game-icon-column .game-icon-box {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      max-width: 100%;
      min-width: 0;
      margin: 0 auto 4px;
    }
    .game-icon {
      font-size: clamp(40px, 9vw, 56px);
    }
    /* 大标题 */
    .game-icon-row .game-title {
      grid-column: 2;
      grid-row: 2;
      font-size: clamp(28px, 7vw, 36px);
      font-weight: 800;
      margin: 0;
      line-height: 1;
    }
    /* 副标题 */
    .game-icon-row .game-desc {
      grid-column: 1 / 4;
      grid-row: 3;
      font-size: clamp(15px, 3.5vw, 18px);
      margin-top: 10px;
      padding: 0 8px;
      text-align: center;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    /* 难度按钮 */
    .difficulty-section {
      gap: 10px;
      margin-top: 14px;
      margin-bottom: 16px;
    }
    .diff-btn {
      padding: 9px 18px;
      font-size: clamp(15px, 3.5vw, 18px);
      border-radius: 22px;
      border-width: 2px;
    }
    /* 主操作按钮 */
    .single-mode-start-btn {
      max-width: 100%;
      width: 100%;
      height: clamp(52px, 8vh, 64px);
      font-size: clamp(22px, 5vw, 28px);
      border-radius: clamp(28px, 4vh, 36px);
      margin-top: 6px;
    }
    /* P148-0815uiUnify: 双人开始按钮手机端与单人一致缩小 */
    .multiplayer-start-btn {
      max-width: 100%;
      width: 100%;
      height: clamp(52px, 8vh, 64px);
      font-size: clamp(22px, 5vw, 28px);
      border-radius: clamp(28px, 4vh, 36px);
      margin-top: 6px;
    }
    /* 返回按钮（P148-07010w6: 在game-icon-column中自然对齐） */
	    .single-mode-back-btn {
	      margin-top: 2px;
	      margin-bottom: 4px;
	      padding: 8px 16px;
	      font-size: 15px;
	      font-weight: 800;
	      border-radius: var(--radius-md);
	    }
    .single-mode-back-btn .back-icon { width: 16px; height: 16px; }
  }

  .game-wrap {
    display: none;
    width: 100%;
    max-width: 480px;
    /* P2-46: 负 margin 向上偏移游戏区域 — 抵消 title-wrap 的 margin-bottom:60px 留白,
       让游戏区域紧贴标题区下方, 避免标题消失后出现过大空白 */
    margin: -40px auto 0;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .game-wrap.show { display: block; }
  @media (min-width: 768px) {
    .game-wrap {
      max-width: 520px;
      /* P2-46: 桌面端负 margin 较小(-30px), 因桌面 title-wrap margin-bottom 适配后留白较小 */
      margin: -30px auto 0;
      padding-top: max(20px, env(safe-area-inset-top));
    }
  }
  .top-bar {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 8px 10px 18px; gap: 8px;
  }
  .top-bar #btnBack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tool-bg);
    color: #fff;
    border: 1px solid var(--tool-border);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
    max-width: none;
    /* P148-0816btnTexture: 降低存在感——毛玻璃融合背景 + 柔和阴影 + 过渡 */
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: all 0.2s ease;
  }
  .top-bar #btnBack .back-icon { width: 18px; height: 18px; }
  .top-bar #btnBack:active { transform: scale(0.96); }
  /* P148-0816btnUnify: 管理按钮统一蓝色规范 — 与模型按钮(豆绿 #b8d4c5→#a5c4b2 / #3d5a4a)形成对比,
     突出"管理"功能。用 !important 覆盖 HTML 内联样式, 与 #btnFishRanking(金)/#btnDrawFish(绿)
     同级的 ID 规则模式一致。蓝色取自双人雾霾蓝主色加深(--blue-deep/--blue-deeper) */
  #btnEmojiAdmin,
  #btnImitateAdmin {
    background: linear-gradient(135deg, #8dafd0, #6b9ec7) !important;
    color: #2e5170 !important;
    /* P148-0816btnTexture: 降低阴影强度 + 毛玻璃融合, 不抢游戏视觉 */
    box-shadow: 0 2px 6px rgba(107, 158, 199, 0.28) !important;
    backdrop-filter: blur(6px) saturate(1.15);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
    transition: all 0.2s ease !important;
  }
  #btnEmojiAdmin:active,
  #btnImitateAdmin:active { transform: scale(0.96); }
  .top-bar-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .media-btn-group {
    display: flex; gap: 6px;
  }
  .media-btn {
    width: 38px; height: 38px; padding: 0;
    background: var(--tool-bg);
    color: #fff;
    border: 1px solid var(--tool-border);
    border-radius: var(--radius-sm);
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    /* P148-0816btnTexture: 毛玻璃融合 + 柔和阴影 */
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: all 0.15s ease;
  }
  .media-btn:active { transform: scale(0.92); }
  .media-btn.active-video {
    background: #8db09e;
    border-color: rgba(255,255,255,0.5);
  }
  .media-btn.active-avatar {
    background: #6b9a7e;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 12px rgba(107, 154, 126, 0.5);
  }
  .media-btn.active-mic {
    background: #8db09e;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 10px rgba(139, 176, 158, 0.4);
  }
  .media-btn.hidden, .debug-btn.hidden { display: none; }

  /* P148-0731mobile: 手机端双人摸鱼媒体按钮布局
     - .duo-mobile-vertical: top-bar 改为垂直排列，媒体按钮行在返回/画鱼/排行上方
     - .duo-mobile-media-btn: 视频/音频/麦克风按钮放大（手机端原 38px 太小易误触） */
  .top-bar.duo-mobile-vertical {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* P148-0818fishDuoCircle: 手机端双人摸鱼媒体按钮 — 返回按钮同款 46px 圆形描边钮 */
  .media-btn.duo-mobile-media-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
    border-radius: 9999px !important;
  }

  /* P148-0818fishDuoCircle: 手机端双人摸鱼上方七按钮改版 — 返回按钮同款圆形描边钮
     背景: 旧版(fishDuoMobile2/fishDuoOutline)把两行按钮撑满 Grid 格子成 46px 高圆角方块(12px圆角),
     与其他双人游戏已定型的「白底圆形+3px黑描边+硬阴影」HUD 风格不一致, 用户要求统一为圆形描边。
     改动: 行结构保留两行(媒体行📷🔊🎤在上, 操作行返回/游戏/画鱼/排行在下), Grid 撑满改为
     flex 左起自然排列; 七个按钮全部固定 46px 圆形 + 白底 + 3px #2D2D2D 描边 + 0 4px 0 硬阴影。
     仅当 game-fish-duo.js 对手机端添加 .duo-mobile-vertical 时才生效, 桌面端不受影响。 */
  body.duo-fish-active .top-bar.duo-mobile-vertical {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* 行序: 媒体行(上) -> 操作行(下, 贴游戏区); 空的 media-btn-group 容器隐藏 */
  body.duo-fish-active .top-bar.duo-mobile-vertical #duoMobileMediaRow { order: -1 !important; }
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left { order: 1 !important; }
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-right { display: none !important; }
  /* 上排媒体行: flex 左起, 不再 Grid 三等分撑满 */
  body.duo-fish-active #duoMobileMediaRow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    flex: 0 0 auto !important;
  }
  /* 下排操作行: flex 左起, 不再 Grid 四等分撑满 */
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  /* 下排操作行按钮(返回/切换游戏/画鱼/排行): 固定 46px 圆形自然尺寸, 不再撑满格子 */
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnBack,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left .switch-game-wrap,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnDrawFish,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnFishRanking {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 切换游戏 wrap(css 子项是 div): 跟随按钮 46px, 内容按钮等大 */
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left .switch-game-wrap {
    box-sizing: border-box !important;
  }
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnSwitchGame.switch-game-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 auto !important;
    font-size: 21px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* 管理按钮(表情包/模仿大师)与模型按钮在双人摸鱼里隐藏, 不占行 */
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnEmojiAdmin,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnImitateAdmin,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnVrmToggle {
    display: none !important;
  }
  /* 七按钮统一外观 — P148-0818fishDuoCircle: 对齐返回按钮
     (白底圆形 + 3px #2D2D2D 黑描边 + 0 4px 0 硬阴影, 与 cartoon-cute .hud-fn-btn/#btnBack 完全一致);
     Q弹按压由各按钮既有 :active 规则提供(#btnBack/#btnSwitchGame/.hud-fn-btn/#id.media-btn) */
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnBack,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left .switch-game-wrap #btnSwitchGame.switch-game-btn,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnDrawFish,
  body.duo-fish-active .top-bar.duo-mobile-vertical .top-bar-left #btnFishRanking,
  body.duo-fish-active #duoMobileMediaRow .duo-mobile-media-btn {
    background: #FFFFFF !important;
    border: 3px solid #2D2D2D !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 0 #2D2D2D !important;
    color: #2D2D2D !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    cursor: pointer !important;
  }

  .mic-btn {
    position: relative;
    overflow: visible;
  }
  .mic-btn.speaking {
    animation: micGlow 0.5s ease-in-out infinite;
  }
  .mic-btn.speaking::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 12px;
    background: rgba(141, 175, 208, 0.4);
    transform: translate(-50%, -50%) scale(1);
    animation: micWave1 0.5s ease-out infinite;
    z-index: -1;
  }
  .mic-btn.speaking::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 12px;
    background: rgba(141, 175, 208, 0.3);
    transform: translate(-50%, -50%) scale(1);
    animation: micWave2 0.5s ease-out infinite 0.15s;
    z-index: -2;
  }
  @keyframes micGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(141, 175, 208, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 15px rgba(141, 175, 208, 0.6); transform: scale(1.05); }
  }
  @keyframes micWave1 {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
  }
  @keyframes micWave2 {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
  }
  
  .speaker-btn {
    position: relative;
    overflow: visible;
  }
  .speaker-btn.active-speaker {
    background: #8db09e;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 10px rgba(139, 176, 158, 0.4);
  }
  .speaker-btn.muted {
    background: rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.25);
  }
  .speaker-btn.peer-speaking {
    animation: speakerGlow 0.4s ease-in-out infinite;
  }
  .speaker-btn.peer-speaking::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 12px;
    background: rgba(141, 175, 208, 0.4);
    transform: translate(-50%, -50%) scale(1);
    animation: speakerWave1 0.4s ease-out infinite;
    z-index: -1;
  }
  .speaker-btn.peer-speaking::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 12px;
    background: rgba(141, 175, 208, 0.3);
    transform: translate(-50%, -50%) scale(1);
    animation: speakerWave2 0.4s ease-out infinite 0.12s;
    z-index: -2;
  }
  @keyframes speakerGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(141, 175, 208, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 15px rgba(141, 175, 208, 0.6); transform: scale(1.05); }
  }
  @keyframes speakerWave1 {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
  }
  @keyframes speakerWave2 {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
  }
  
  .debug-btn {
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1.4;
  }
  .debug-btn:active { transform: scale(0.96); }
  .media-btn.hidden, .debug-btn.hidden { display: none; }
  /* 调试按钮（始终可见，鱼游戏也能用） */
  .debug-btn-float {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 9999;
    background: rgba(0,0,0,0.55);
    color: #7fe0ff;
    border: 1px solid rgba(127, 224, 255, 0.4);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    pointer-events: auto;
    line-height: 1.4;
  }
  .debug-btn-float:active { transform: scale(0.96); }
  /* P148-0725a 问题五：隐藏游戏右上角"调试"浮动按钮（原 fish-mode 强制显示）
     用户反馈不想看到帧率测试按钮，改为始终隐藏。需要调试时在控制台
     设置 window.__UI_DEBUG__=true 后刷新，或手动改 inline style。*/
  .stage.fish-mode .debug-btn-float { display: none; }
  .stage {
    position: relative;
    width: 100%;
    /* P103: 不用 aspect-ratio/@supports（X5 不支持），只用 vw + JS fitStage() */
    height: 177.78vw;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    background: #000;
    margin: 0 auto;
  }
  .stage video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    opacity: 1;
  }
  /* P148-0806cameraShift: 模仿大师横屏左/右分屏时, 摄像机视野右移(25%), 让居中玩家全身出现在右半人像区 */
  body[data-game="imitate"] #stage.imitate-shift-right video {
    transform: translateX(25%) scaleX(-1);
    transform-origin: center;
  }
  /* P148-0806cameraMobile: 模仿大师竖屏上/下分屏时, 摄像机视野下移(25%), 让居中玩家全身出现在下半人像区 */
  body[data-game="imitate"] #stage.imitate-shift-down video {
    transform: translateY(25%) scaleX(-1);
    transform-origin: center;
  }
  /* 摸鱼大师专用：摄像头裁掉上半 50%（保留 0.5~1.0 的人脸部分）上移到 stage 0~0.5 */
  .stage.fish-mode {
    /* P148-0711e: 去掉 50% 硬线，改为透明背景 — 海浪过渡由 ocean-water canvas 顶部波浪形状实现 */
    background: transparent;
  }
  .stage.fish-mode video {
    /* 裁切掉 0~0.5（上方 50%），保留 0.5~1.0（人脸区域） */
    clip-path: inset(50% 0 0 0);
    /* 镜像 + 整体上移 50%，让保留下来的部分显示在 stage 0~0.5（屏幕上半） */
    transform: scaleX(-1) translateY(-50%);
  }
  /* canvas 不裁切，红球/绳子坐标用绝对定位+手动偏移（game-fish.js 处理） */
  /* 这样绳子可以从红球（屏幕上半）下垂到海蓝色区域（屏幕下半）*/
  .stage.no-camera-host { background: #DDEBF7; }
  .stage.no-camera-host video { display: none; }
  .stage.no-camera-guest { background: #E8F1E8; }
  .stage.no-camera-guest video { display: none; }
  .stage .camera-offline-tip {
    position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.7); font-size: 13px; text-align: center;
    pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: none;
  }
  .stage.no-camera-host .camera-offline-tip,
  .stage.no-camera-guest .camera-offline-tip { display: block; }
  .stage canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent;
    z-index: 5;  /* v0716-render-order: 2D游戏 在海洋之下, 绳子上层用独立overlay */
  }
  .stage canvas.three-canvas {
    pointer-events: none;
    z-index: 6;  /* v0716-render-order: 鱼群3D场景(海洋+鱼) */
  }
  /* v0716-render-order: 绳子/红球独立渲染层, 在鱼群海洋之上 */
  .stage canvas.rope-overlay {
    pointer-events: none;
    z-index: 7;
  }
  .stage .ocean-water {
    position: absolute; top: 40%; left: 0;
    width: 100%; height: 60%;
    z-index: 4; pointer-events: none; overflow: hidden;
  }
  .stage .ocean-water canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: auto; display: block;
  }
  /* P148: DOM 降级渲染容器（仅当 Canvas 2D 失效时显示） */
  .stage .dom-fallback {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 4; pointer-events: none;
    display: none;
  }
  .stage .dom-fallback.active { display: block; }
  /* P148 v8: 对方视角视频（占上半部分） */
  .dom-fallback .df-peer-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    object-fit: cover;
    background: #1a1a1a;
    display: none;
  }
  /* P148 v9: 对方视角遮挡层（对方未开摄像头时显示） */
  .dom-fallback .df-peer-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DDEBF7;
    color: #666;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
  }
  .dom-fallback .df-peer-mask-text {
    text-align: center;
    padding: 0 20px;
  }
  /* 乒乓球 DOM 元素 */
  .dom-fallback .df-paddle {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: center center;
  }
  .dom-fallback .df-ball {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
  }
  .dom-fallback .df-score {
    position: absolute;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    width: 100%;
    top: 15px;
    left: 0;
  }
  .dom-fallback .df-center-line {
    position: absolute;
    left: 0; width: 100%;
    height: 2px;
    border-top: 2px dashed rgba(255,255,255,0.25);
  }
  .dom-fallback .df-emoji {
    position: absolute;
    font-size: 48px;
    text-align: center;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
  }
  .dom-fallback .df-countdown {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
    text-align: center;
    -webkit-text-stroke: 3px #000;
  }
  .dom-fallback .df-trail {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    pointer-events: none;
  }
  .dom-fallback .df-face-dot {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #00ff00;
    box-shadow: 0 0 12px rgba(0,255,0,0.8), 0 0 24px rgba(0,255,0,0.4);
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
  }
  /* 摸鱼大师 DOM 元素 */
  .dom-fallback .df-red-ball {
    position: absolute;
    border-radius: 50%;
    /* P148-0711m: 改为单人模式按钮豆绿色调 */
    background: radial-gradient(circle at 35% 35%, #b8d4c5, #7AA377);
    box-shadow: 0 0 20px rgba(122,163,119,0.5), 0 0 40px rgba(122,163,119,0.2);
    border: 2px solid rgba(0,0,0,0.3);
  }
  .dom-fallback .df-green-ball {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #88ff88, #33cc33);
    box-shadow: 0 0 20px rgba(0,255,0,0.5), 0 0 40px rgba(0,255,0,0.2);
    border: 2px solid rgba(0,0,0,0.3);
  }
  /* 绳子 SVG 容器 */
  .dom-fallback .df-rope {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
  }
  .hud {
    position: absolute; top: 24px; left: 10px; right: 10px;
    pointer-events: none;
    font-weight: 800; font-size: 12px; letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    z-index: 5;
  }
  .hud .left, .hud .right, .hud .center { background: rgba(0,0,0,0.45); padding: 8px 16px; border-radius: 999px; }
  .hud .right { font-size: 18px; }
  .hud .center { position: absolute; right: 10px; font-size: 22px; }
  /* P148-0709wc: 空文本 HUD 元素隐藏（避免 updateHud('','') 留下黑色方块） */
  .hud .left:empty, .hud .right:empty, .hud .center:empty { display: none; }
  .hud .net-status { position: absolute; top: 40px; left: 10px; background: rgba(0,0,0,0.45); padding: 4px 10px; border-radius: 999px; font-size: 11px; display: none; }
  .hud.debug-on .net-status { display: block; }
  .hud.debug-on .net-status:empty { display: none; }
  .hud .debug-btn {
    position: absolute;
    top: 40px;
    right: 10px;
    pointer-events: auto;
    z-index: 9999;
    display: none;
  }
  .hud.debug-on .debug-btn { display: block; }
  /* 手机端 HUD 覆盖：必须在桌面端规则之后定义，否则会被覆盖 */
  @media (max-width: 480px) {
    .hud { top: 14px; left: 6px; right: 6px; }
    .hud .left, .hud .right, .hud .center { padding: 6px 12px; border-radius: 999px; }
    .hud .right { font-size: 16px; }
    .hud .center { font-size: 20px; right: 6px; }
  }
  .hint {
    position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6); color: #fff;
    padding: 14px 22px; border-radius: var(--radius-sm); font-size: 22px;
    letter-spacing: 1px; pointer-events: none; text-align: center;
    line-height: 1.6; max-width: 90%;
    white-space: pre-line; z-index: 200;
  }
  /* P148-0731fishfix2: 手机端提示文字缩小（电脑端22px太大，手机端14px） */
  @media (max-width: 480px) {
    .hint { font-size: 14px; padding: 10px 16px; border-radius: 12px; }
  }
  /* P148-0731hintFix: 摸鱼大师提示UI放大 + 禁止换行(每行一句话不折行)
     white-space:pre !important 覆盖 JS 内联 pre-line — pre 保留\n换行但不折行 */
  body[data-game="fish"] .hint {
    white-space: pre !important;
    font-size: 26px !important;
    padding: 18px 30px !important;
  }
  @media (max-width: 480px) {
    body[data-game="fish"] .hint {
      font-size: 18px !important;
      padding: 14px 22px !important;
    }
  }
  /* P148-0731ppHint: 乒乓球提示UI放大 + 禁止换行(单行不折行)
     nowrap 防止"鼻子控制乒乓球拍！"折行 */
  body[data-game="pingpong"] .hint {
    white-space: nowrap !important;
    font-size: 28px !important;
    padding: 18px 32px !important;
  }
  @media (max-width: 480px) {
    body[data-game="pingpong"] .hint {
      font-size: 20px !important;
      padding: 14px 24px !important;
    }
  }
  /* P148-0806imitateHint: 模仿大师提示UI放大 + 居中(用户要求) */
  /* P148-0806cameraMobile5: 提示UI统一用 pre-line 允许换行 — 换行由 JS 按竖屏控制(含\n则两行, 不含则一行) */
  /* P148-0807duoHint: 双人模仿大师 body 用 duo-imitate-active 类(非 data-game="imitate"), 选择器一并覆盖 */
  body[data-game="imitate"] .hint,
  body.duo-imitate-active .hint {
    font-size: 34px !important;
    padding: 22px 40px !important;
    top: 50% !important;
    white-space: pre-line !important;
  }
  @media (max-width: 480px) {
    body[data-game="imitate"] .hint,
    body.duo-imitate-active .hint {
      font-size: 26px !important;
      padding: 16px 30px !important;
      /* P148-0806cameraMobile6: 手机端提示UI固定两行(模仿图中的\n表情+姿势)
         pre 保留\n换行但不折行, 避免窄屏下 CJK 自动换行导致分过多行 */
      white-space: pre !important;
    }
  }
  /* P148-0807emojiHintTo2lines: 表情包大师提示UI放大 + 强制两行
     文字为"摆个动作试试？\n点「管理」查看表情包参考。", 用 pre 保留\n换行但不折行,
     (窄屏下 pre-line 会把第二行"点「管理」查看表情包参考。"折成两行 → 共三行), 保证稳定两行
     双人模式 body 用 .duo-emoji-active 类(非 data-game="emoji"), 故选择器同时覆盖两种 */
  body[data-game="emoji"] .hint,
  body.duo-emoji-active .hint {
    font-size: 30px !important;
    padding: 20px 36px !important;
    white-space: pre !important;
    max-width: 92% !important;
  }
  @media (max-width: 480px) {
    body[data-game="emoji"] .hint,
    body.duo-emoji-active .hint {
      font-size: 18px !important;
      padding: 14px 22px !important;
      letter-spacing: 0px;
    }
  }

  /* ============================================================
     P148-0828emojiWelcomeHint: 表情包大师欢迎提示气泡
     卡通气泡风格 — 单人豆绿 / 双人雾霾蓝
     仅进入游戏时显示, 独立于通用 .hint toast
     ============================================================ */
  .emoji-welcome-hint {
    position: absolute;
    left: 50%;
    top: 28%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: none;
    animation: ewh-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               ewh-float 3s ease-in-out infinite 0.5s;
  }
  @keyframes ewh-in {
    0% {
      opacity: 0;
      transform: translateX(-50%) scale(0.5) translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) scale(1) translateY(0);
    }
  }
  @keyframes ewh-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
  }
  .ewh-body {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f0f6f2 100%);
    border: 4px solid #6b9a7e;
    border-radius: 34px;
    padding: 22px 40px 20px;
    box-shadow: 0 7px 0 #6b9a7e, 0 12px 24px rgba(107,154,126,0.28);
    text-align: center;
    min-width: 340px;
  }
  .ewh-body::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 20px solid #6b9a7e;
  }
  .ewh-body::before {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 15px solid #f0f6f2;
    z-index: 1;
  }
  .ewh-emoji {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 8px;
    animation: ewh-wave 1.5s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes ewh-wave {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
  }
  .ewh-main {
    font-size: 34px;
    font-weight: 700;
    color: #3d5a4a;
    line-height: 1.3;
    margin-bottom: 7px;
    letter-spacing: 0.5px;
    font-family: "Quicksand", "Rubik", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .ewh-sub {
    font-size: 18px;
    font-weight: 600;
    color: #5a7a6a;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ewh-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #ffe49a 0%, #ffd97a 100%);
    border: 3px solid #e6a23c;
    border-radius: 12px;
    padding: 3px 12px;
    font-size: 16px;
    font-weight: 700;
    color: #8b5a00;
    box-shadow: 0 2px 0 #e6a23c;
    white-space: nowrap;
  }
  .ewh-admin-icon {
    font-size: 17px;
  }
  .ewh-stars {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    pointer-events: none;
  }
  .ewh-star {
    font-size: 24px;
    animation: ewh-twinkle 2s ease-in-out infinite;
  }
  .ewh-star:nth-child(1) { animation-delay: 0s; }
  .ewh-star:nth-child(2) { animation-delay: 0.3s; font-size: 19px; }
  .ewh-star:nth-child(3) { animation-delay: 0.6s; }
  @keyframes ewh-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  body.duo-emoji-active .emoji-welcome-hint .ewh-body {
    background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
    border-color: #6b9ec7;
    box-shadow: 0 6px 0 #6b9ec7, 0 10px 20px rgba(107,158,199,0.25);
  }
  body.duo-emoji-active .emoji-welcome-hint .ewh-body::after {
    border-top-color: #6b9ec7;
  }
  body.duo-emoji-active .emoji-welcome-hint .ewh-body::before {
    border-top-color: #f0f4f8;
  }
  body.duo-emoji-active .emoji-welcome-hint .ewh-main {
    color: #4a6b85;
  }
  body.duo-emoji-active .emoji-welcome-hint .ewh-sub {
    color: #6b8aa5;
  }
  body.duo-emoji-active .emoji-welcome-hint .ewh-admin-badge {
    background: linear-gradient(180deg, #ffd6e0 0%, #f8a5b5 100%);
    border-color: #e67a8d;
    color: #8b3a4a;
    box-shadow: 0 2px 0 #e67a8d;
  }
  @media (max-width: 480px) {
    .emoji-welcome-hint {
      top: 26%;
    }
    .ewh-body {
      padding: 14px 20px 12px;
      min-width: 226px;
      border-width: 3px;
      border-radius: 22px;
      box-shadow: 0 4px 0 #6b9a7e, 0 6px 14px rgba(107,154,126,0.25);
    }
    .ewh-emoji {
      font-size: 38px;
      margin-bottom: 5px;
    }
    .ewh-main {
      font-size: 21px;
    }
    .ewh-sub {
      font-size: 13px;
      gap: 4px;
    }
    .ewh-admin-badge {
      padding: 2px 8px;
      font-size: 11px;
      border-width: 2px;
      box-shadow: 0 1.5px 0 #e6a23c;
    }
    .ewh-admin-icon {
      font-size: 12px;
    }
    .ewh-body::after {
      bottom: -14px;
      border-left-width: 12px;
      border-right-width: 12px;
      border-top-width: 14px;
    }
    .ewh-body::before {
      bottom: -10px;
      border-left-width: 9px;
      border-right-width: 9px;
      border-top-width: 11px;
    }
    .ewh-stars {
      top: -11px;
    }
    .ewh-star {
      font-size: 16px;
    }
    .ewh-star:nth-child(2) {
      font-size: 13px;
    }
    body.duo-emoji-active .emoji-welcome-hint .ewh-body {
      box-shadow: 0 4px 0 #6b9ec7, 0 6px 14px rgba(107,158,199,0.25);
    }
  }
  .debug-hud {
    position: absolute;
    left: 10px; bottom: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #7fe0ff;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    z-index: 9999;  /* 调到最顶层，不被 three-canvas / canvas 挡住 */
    max-width: calc(100% - 20px);
    max-height: calc(100% - 80px);
    overflow-y: auto;
    pointer-events: none;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    line-height: 1.7;
    white-space: pre;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
    letter-spacing: 0.5px;
  }
  .overlay-msg {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8); color: #fff;
    padding: 18px 24px; border-radius: var(--radius-md); font-size: 15px; text-align: center;
    line-height: 1.8; display: none;
  }
  .overlay-msg.show { display: block; }
  .overlay-msg button {
    margin-top: 10px; padding: 8px 18px; border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #8db09e, #6b9a7e); color: #fff; border: none;
    font-size: 13px; font-weight: 700; letter-spacing: 2px; cursor: pointer;
  }
  .overlay-msg button + button { margin-left: 8px; background: rgba(255,255,255,0.15); }

  /* P148-0709wf3: 健康报告结算层 — 半透明背景 + 出现/消失动画 + 排版对齐优化
     单人模式豆绿色调（#7AA377 主色），双人模式雾霾蓝色调（#5a8ab5 主色）由 .multiplayer 修饰类覆盖
     显示/隐藏用 opacity+visibility 替代 display，支持双向过渡动画 */
  .health-report {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(226, 237, 233, 0);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out, background-color 0.5s ease-out, visibility 0s linear 0.5s;
  }
  .health-report.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    background: rgba(226, 237, 233, 0.5);
    transition: opacity 0.5s ease-out, background-color 0.5s ease-out, visibility 0s;
  }
  .health-report-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    width: min(420px, calc(100% - 32px));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: center;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(.2, 1.2, .4, 1), opacity 0.5s ease-out;
  }
  .health-report-card.pop {
    transform: scale(1);
    opacity: 1;
  }
  .health-report-title {
    font-size: 36px;
    font-weight: 900;
    color: #2d3d30;
    margin-bottom: 2px;
    letter-spacing: 1px;
  }
  .health-report-subtitle {
    font-size: 14px;
    color: #9cb0a3;
    margin-bottom: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  .health-report-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
  }
  /* P148-0709wj: 数值列固定宽度 3.5em，确保不同位数数值的进度条左端对齐
     P148-0817hrCandy: 此旧 grid 三列会把右转头进度条挤成 0 宽且破坏参考文件布局，已移除，
     进度条由下方 candy 版块的块级+flex 布局控制 */
  .health-report-label {
    font-size: 16px;
    color: #666666;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
  }
  .health-report-value {
    font-size: 19px;
    color: #7AA377;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
  }
  .health-report-bar {
    height: 10px;
    background: rgba(165, 196, 178, 0.25);
    border-radius: 999px;
    overflow: visible;
    position: relative;
  }
  .health-report-bar-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: #7AA377;
    left: 0;
    z-index: 2;
    border-radius: 1px;
    pointer-events: none;
    opacity: 0.55;
  }
  .health-report-bar-fill {
    height: 100%;
    width: 0%;
    background: #b8d4c5;
    border-radius: 999px;
    transition: width 3s ease-out, background-color 0.4s ease;
    position: relative;
    z-index: 1;
  }
  .health-report-bar-fill.passed {
    background: #7AA377;
  }
  /* P148-0709wj: 评价框柔化 — 去描边改极浅薄荷绿半透填充 */
  .health-report-praise {
    font-size: 13px;
    color: #7AA377;
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #EEF4F0;
    border: none;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .health-report-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .health-report-btn {
    width: 70%;
    height: 46px;
    border-radius: var(--radius-lg);
    border: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .health-report-btn-primary {
    background: linear-gradient(135deg, #b8d4c5, #8db09e);
    color: #2d3d30;
    box-shadow: 0 2px 8px rgba(141, 176, 158, 0.4);
  }
  .health-report-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(141, 176, 158, 0.5); }
  .health-report-btn-primary:active { transform: translateY(0); }
  /* P148-07010w4: 多人模式准备按钮色调 */
  .health-report-btn-ready {
    background: linear-gradient(135deg, #A9C5E8, #7AA1CC);
    color: #fff;
    box-shadow: 0 2px 8px rgba(122, 161, 204, 0.4);
  }
  .health-report-btn-ready:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122, 161, 204, 0.5); }
  .health-report-btn-ready.armed {
    background: linear-gradient(135deg, #8db09e, #6b9a7e);
    box-shadow: 0 2px 8px rgba(139, 176, 158, 0.4);
  }
  .health-report-peer-ready {
    display: none;
    font-size: 13px;
    color: #7AA1CC;
    margin-top: 6px;
    text-align: center;
    font-weight: 600;
  }
  .health-report-peer-ready.show { display: block; }
  /* P148-07010w7: 断开连接提示 */
  .health-report-disconnect {
    background: rgba(216, 166, 166, 0.15);
    color: #B08585;
    border: 1px solid rgba(216, 166, 166, 0.4);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .health-report.multiplayer.show { background: rgba(232, 240, 235, 0.5); }
  .health-report.multiplayer .health-report-bar { background: rgba(165, 196, 178, 0.25); }
  .health-report.multiplayer .health-report-value { color: #7AA377; }
  .health-report.multiplayer .health-report-bar-marker { background: #7AA377; }
  .health-report.multiplayer .health-report-bar-fill { background: #b8d4c5; }
  .health-report.multiplayer .health-report-bar-fill.passed { background: #7AA377; }
  .health-report.multiplayer .health-report-praise {
    background: #EEF4F0;
    color: #7AA377;
  }
  .health-report.multiplayer .health-report-btn-primary {
    background: linear-gradient(135deg, #8db09e, #6b9a7e);
    color: #fff;
    box-shadow: 0 2px 8px rgba(139, 176, 158, 0.4);
  }
  .health-report.multiplayer .health-report-title { color: #2d3d30; }
  .health-report.multiplayer .health-report-subtitle { color: #9cb0a3; }

  @media (max-width: 480px) {
    .health-report-card { padding: 22px 18px 20px; border-radius: var(--radius-md); }
    .health-report-title { font-size: 26px; }
    .health-report-subtitle { font-size: 16px; margin-bottom: 16px; }
    .health-report-label { font-size: 15px; }
    .health-report-value { font-size: 17px; }
    .health-report-praise { font-size: 12px; }
    .health-report-btn { height: 40px; font-size: 14px; min-width: 140px; }
  }

  @media (max-width: 420px) {
    .card { width: 82%; min-height: 250px; }
    .card-icon { font-size: 50px; }
    .card-title { font-size: 18px; }
  }
  @media (min-width: 760px) {
    .card { width: 240px; }
  }

  /* ============ 双人对战页面 ============ */
  /* P149-fix: .multiplayer-screen base 规则已移至 .single-mode-screen 之后
     （所有媒体查询之前），避免后定义覆盖媒体查询 */
  .multiplayer-start-btn {
    width: 100%;
    max-width: 400px;
    height: clamp(56px, 8vh, 72px);
    border-radius: clamp(28px, 4vh, 36px);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #8dafd0, #6b9ec7);
    color: #fff;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    /* P148-0816audit: 分层阴影 + 内高光, 与单人"开始游戏"质感统一 */
    box-shadow: 0 8px 24px rgba(141, 175, 208, 0.4), 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.28);
    margin-bottom: 24px;
  }
  /* P148-0816audit: 微光扫过动效(复刻单人"开始游戏") */
  .multiplayer-start-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-250%) skewX(-20deg);
    animation: btnShine 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  .multiplayer-start-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 36px rgba(141, 175, 208, 0.55), 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.32);
    background: linear-gradient(135deg, #a3c5e0, #7aa8cc);
  }
  .multiplayer-start-btn:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 4px 15px rgba(141, 175, 208, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .multiplayer-start-btn.matching {
    background: linear-gradient(135deg, #E8CACA, #D8A6A6) !important;
    color: #6B4444 !important;
  }
  .multiplayer-room-section {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .multiplayer-room-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
  }
  .multiplayer-room-btn {
    flex: 1;
    height: 44px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    background: rgba(255, 255, 255, 0.82);
    color: #4a6b85;
    border: 1.5px solid #b4cfe7;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    /* P148-0816audit: 毛玻璃 + 分层阴影 + 内高光, 与难度按钮质感统一 */
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .multiplayer-room-btn:hover {
    transform: translateY(-2px);
    border-color: #8dafd0;
    box-shadow: 0 6px 16px rgba(180, 207, 231, 0.32), inset 0 1px 0 rgba(255,255,255,0.7);
    color: #4a6b85;
  }
  .multiplayer-room-btn:active {
    transform: translateY(-1px) scale(0.98);
    background: rgba(180, 207, 231, 0.18);
  }
  .multiplayer-room-btn.active {
    background: linear-gradient(135deg, #8dafd0, #6b9ec7);
    color: #fff;
    border-color: #6b9ec7;
    box-shadow: 0 8px 24px rgba(141, 175, 208, 0.4), 0 2px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-2px);
  }
  .room-join-box {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
  }
  .room-input {
    flex: 1;
    height: 44px;
    border-radius: var(--radius-lg);
    border: 2px solid #e0e0e0;
    padding: 0 16px;
    font-size: 16px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
  }
  .room-input:focus {
    border-color: #8dafd0;
  }
  .room-code-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  .room-code-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }
  .room-code-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 4px;
    font-family: monospace;
  }
  .btn-copy {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: #f0f0f0;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-copy:active {
    background: #e0e0e0;
  }
  .room-status {
    font-size: 14px;
    color: #333;
    text-align: center;
    min-height: 20px;
  }

  /* P148 v13: 屏幕切换过渡动画 — 纯 opacity 淡入淡出（P148-0709v 简化，移除 scale/translateY） */
  .title-wrap,
  .main-buttons,
  .footer-tip,
  .single-mode-screen,
  .multiplayer-screen,
  .privacy-link,
  .game-wrap {
    transition: opacity 0.28s ease-out;
  }
  .title-wrap.transitioning-out,
  .main-buttons.transitioning-out,
  .footer-tip.transitioning-out,
  .privacy-link.transitioning-out,
  .single-mode-screen.transitioning-out,
  .multiplayer-screen.transitioning-out,
  .game-wrap.transitioning-out {
    opacity: 0;
    pointer-events: none;
  }
  .title-wrap.transitioning-in,
  .main-buttons.transitioning-in,
  .footer-tip.transitioning-in,
  .privacy-link.transitioning-in,
  .single-mode-screen.transitioning-in,
  .multiplayer-screen.transitioning-in,
  .game-wrap.transitioning-in {
    animation: screenIn 0.32s ease-out both;
  }
  @keyframes screenIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  /* P148-0816unifyUI: 单人/双人选择页按钮错峰入场 — 简单/普通/困难 + 开始游戏/开始匹配
     依次淡入上移, 不再"直接显示"。绑定持久类 .show(屏幕驻留期间自动重放),
     用 fill-mode:backwards(仅延迟期隐藏+播放期动画, 播完回落默认态) →
     动画结束后按钮 hover/active 正常生效, 无残留覆盖 */
  .single-mode-screen.show .diff-btn,
  .single-mode-screen.show .single-mode-start-btn,
  .multiplayer-screen.show .diff-btn,
  .multiplayer-screen.show .multiplayer-start-btn {
    animation: btnRiseIn 0.36s cubic-bezier(.2,.8,.2,1) backwards;
  }
  .single-mode-screen.show .diff-btn:nth-child(1),
  .multiplayer-screen.show .diff-btn:nth-child(1) { animation-delay: 0.04s; }
  .single-mode-screen.show .diff-btn:nth-child(2),
  .multiplayer-screen.show .diff-btn:nth-child(2) { animation-delay: 0.12s; }
  .single-mode-screen.show .diff-btn:nth-child(3),
  .multiplayer-screen.show .diff-btn:nth-child(3) { animation-delay: 0.20s; }
  .single-mode-screen.show .single-mode-start-btn,
  .multiplayer-screen.show .multiplayer-start-btn { animation-delay: 0.30s; }
  @keyframes btnRiseIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* 按钮按下涟漪效果（点击时短暂放大+回弹） */
  .main-btn:active,
  .single-mode-start-btn:active,
  .multiplayer-start-btn:active,
  .multiplayer-room-btn:active,
  .diff-btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.08s ease-out !important;
  }
  /* 返回按钮颜色：白色文字 + 深色半透明背景 */
  .single-mode-screen .single-mode-back-btn,
  .multiplayer-screen .single-mode-back-btn {
    color: #fff;
    background: rgba(0,0,0,0.4);
  }
  .single-mode-screen .single-mode-back-btn:hover,
  .multiplayer-screen .single-mode-back-btn:hover {
    background: rgba(0,0,0,0.55);
  }

  /* P148-0723e: 问题五修复 — 电脑端双人摸鱼布局放大（手机端不动） */
  /* fitStage 按 .game-wrap 宽度算 stage 尺寸；双人 ratio=1.125，放宽 .game-wrap 即放大 stage */
  /* duo-fish-active 类由 game-fish-duo.js init 时添加 / stop 时移除 */
  @media (min-width: 1024px) {
    body.duo-fish-active .game-wrap {
      max-width: min(95vw, 1100px);
      margin: -10px auto 0;
    }

    /* P148-0802wide: 电脑端单人摸鱼宽屏 16:9 — 放宽 game-wrap 让 stage 更大(原 max-width 520px 竖屏过小) */
    /*   fitStage 按 .game-wrap 宽度算 stage 尺寸; ratio=16:9, 放宽 game-wrap 即放大 stage 游戏区域 */
    /* P148-0802wideFix2: 原 max-width 1100px 在 1920px 屏幕限制 stage 仅 1100x618(高不足) */
    /*   P148-0802sizeFix: 1800px 太大, 缩到 1400px (1920px 屏幕 stage=1400x787, 适中) */
    body[data-game="fish"]:not(.duo-fish-active) .game-wrap {
      max-width: min(95vw, 1400px);
      margin: -10px auto 0;
    }

    /* P148-0801duoBtn: 电脑端双人摸鱼按钮布局 — 行业规范(左上操作组/右上媒体组) + 六按钮统一放大
       根因: 电脑端 duo-fish-active 仅有 game-wrap 宽度规则,按钮依赖基础样式 → 返回按钮
       (font-size:16px/font-weight:700/border-radius:12px/有边框)与画鱼/排行(15px/800/16px/无边框)
       大小不一致;媒体按钮仅 38px 偏小。单人摸鱼规范用 body[data-game="fish"] 选择器,但双人摸鱼
       body 无 data-game 属性(仅 duo-fish-active 类)故不生效。
       方案: 复用单人摸鱼等宽规范(min-width+justify-content:center)并整体放大, !important 覆盖
       btnDrawFish/btnFishRanking 的内联 cssText 样式(动态创建元素样式覆盖教训)。 */
    /* 问题四: top-bar 左右分布 — 操作组(返回/画鱼/排行)贴游戏区左上角, 媒体组贴右上角
       P148-0801duoBtn2: top-bar 宽度由 main-app.js fitStage 同步=stage 宽度 + margin:auto 居中,
         故 top-bar 与 stage 水平对齐; padding 左右=0 让按钮贴 stage 左右边缘(返回贴左上角/麦克风贴右上角) */
    body.duo-fish-active .top-bar {
      padding: 8px 0 !important;               /* 左右0: 按钮贴 stage 边缘; 上下8: 与游戏区顶部留白 */
      gap: 12px !important;
      align-items: center !important;
    }
    body.duo-fish-active .top-bar-left {
      gap: 10px !important;
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    body.duo-fish-active .media-btn-group {
      gap: 8px !important;
    }
    /* 问题一+三: 返回/画鱼/排行三按钮统一放大(以画鱼为基准) — min-width 等宽消除内容长度差异,
       padding/font-size 比(画鱼原 10px 18px/15px)放大, border:none 去除返回按钮边框差异 */
    body.duo-fish-active .top-bar-left > button {
      padding: 12px 24px !important;
      font-size: 17px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 112px !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
    }
    /* 问题二+三: 摄像头/皮套/音量/麦克风媒体按钮放大 — 38px→48px, 图标 18px→22px */
    body.duo-fish-active .media-btn {
      width: 48px !important;
      height: 48px !important;
      font-size: 22px !important;
      border-radius: var(--radius-sm) !important;
    }
  }

  /* P148-0804duoEmoji: 双人表情包大师布局 — 复刻双人摸鱼大师(duo-fish-active)方案
     duo-emoji-active 类由 game-emoji-duo.js init 时添加 / stop 时移除
     按钮: 返回 + 游戏(换游戏) + 管理(表情包管理), 3按钮等宽(手机端Grid) */
  @media (min-width: 1024px) {
    body.duo-emoji-active .game-wrap {
      max-width: min(95vw, 1100px);
      margin: -10px auto 0;
    }
    body.duo-emoji-active .top-bar {
      padding: 8px 0 !important;
      gap: 12px !important;
      align-items: center !important;
    }
    body.duo-emoji-active .top-bar-left {
      gap: 10px !important;
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    body.duo-emoji-active .media-btn-group {
      gap: 8px !important;
    }
    body.duo-emoji-active .top-bar-left > button {
      padding: 12px 24px !important;
      font-size: 17px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 112px !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
    }
    body.duo-emoji-active .media-btn {
      width: 48px !important;
      height: 48px !important;
      font-size: 22px !important;
      border-radius: var(--radius-sm) !important;
    }
    body.duo-emoji-active .switch-game-btn {
      padding: 12px 24px !important;
      font-size: 17px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 112px !important;
      flex: 0 0 auto !important;
      justify-content: center !important;
      white-space: nowrap !important;
    }
    body.duo-emoji-active .switch-game-wrap {
      flex: 0 0 auto !important;
    }
  }

  /* P148-0804duoEmoji: 手机端双人表情包大师布局 — 复刻双人摸鱼大师(duo-fish-active)方案 */
  @media (max-width: 767px) {
    body.duo-emoji-active {
      justify-content: center !important;
      padding-top: 0 !important;
      padding-bottom: 16vh !important;
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }
    body.duo-emoji-active .game-wrap {
      max-width: 100vw !important;
      width: 100vw !important;
      margin: 0 !important;
      padding: 0 !important;
      position: relative !important;
    }
    body.duo-emoji-active .top-bar {
      position: absolute !important;
      bottom: 100% !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 100 !important;
      background: transparent !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 2px !important;
      /* P148-0816btnUnify: padding左右=0 让三按钮贴 stage 左右边缘(X轴铺满), 与单人模式同规范 */
      padding: 4px 0 !important;
    }
    body.duo-emoji-active .top-bar-right {
      order: -1 !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    body.duo-emoji-active .top-bar-left {
      order: 1 !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      width: 100% !important;
      flex: 1 1 auto !important;
      gap: 4px !important;
    }
    body.duo-emoji-active #stage {
      width: 100vw !important;
      max-width: 100vw !important;
      margin: 0 auto !important;
      flex: 0 0 auto !important;
    }
    /* P148-0807refGapFix: 手机端双人模仿大师参考图右缘空隙修复 —
       根因: fitStage 在竖屏手机(内高受限时)返回的 canvas 宽 < stage 宽(100vw),
       canvas(左对齐) 比 stage 窄, 导致参考图(在 canvas 上 cover 铺满 canvas 宽)
       右缘露出 stage 黑底空隙。仅手机端出现, 电脑端 stage 宽=canvas 宽无此问题。
       强制 #canvas 填满 stage(宽高100%), 使参考图铺满整宽; #vrmCanvas/#peerVrmCanvas
       等皮套/对方视角 canvas 有独立内联定位, 不受本规则影响。 */
    body.duo-emoji-active #stage #canvas {
      width: 100% !important;
      height: 100% !important;
    }
    body.duo-emoji-active .top-bar-left > button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.duo-emoji-active .switch-game-wrap {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      width: 0 !important;
    }
    body.duo-emoji-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  /* P148-0804duoEmoji: 平板端双人表情包大师(768-1023px)按钮等宽 — 复刻 duo-fish-active */
  @media (min-width: 768px) and (max-width: 1023px) {
    body.duo-emoji-active .top-bar-left {
      flex: 1 1 auto !important;
      width: 100% !important;
      gap: 4px !important;
    }
    body.duo-emoji-active .top-bar-left > button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.duo-emoji-active .switch-game-wrap {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      width: 0 !important;
    }
    body.duo-emoji-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  /* P148-0804duoEmoji: 手机/平板端双人表情包三按钮等宽 — CSS Grid 方案(复刻 duo-fish-active) */
  @media (max-width: 1023px) {
    body.duo-emoji-active .top-bar-left {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 4px !important;
      align-items: center !important;
    }
    body.duo-emoji-active .top-bar-left > button {
      width: 100% !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.duo-emoji-active .switch-game-wrap {
      width: 100% !important;
      min-width: 0 !important;
    }
    body.duo-emoji-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  /* P148-0801duoPongBtn: 电脑端双人乒乓球按钮布局 — 复刻双人摸鱼方案(放大+对齐stage边缘)
     双人乒乓球 top-bar: 左=返回(单独), 右=摄像头/皮套/音量/麦克风; duo-pingpong-active 类由
     main-app.js startPingPongGame(showGameScreen前)添加/backToMenu移除, 仅双人乒乓球激活(单人乒乓球不加)。
     top-bar 宽度由 main-app.js fitStage 同步=stage 宽度(复刻 duo-fish-active 逻辑,含duo-pingpong-active判断)。 */
  @media (min-width: 1024px) {
    body.duo-pingpong-active .top-bar {
      padding: 8px 0 !important;               /* 左右0: 按钮贴 stage 边缘; 上下8: 留白 */
      gap: 12px !important;
      align-items: center !important;
    }
    body.duo-pingpong-active .top-bar-left {
      gap: 10px !important;
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    body.duo-pingpong-active .media-btn-group {
      gap: 8px !important;
    }
    /* 返回按钮放大(对齐摸鱼文字按钮规范) — min-width 等宽,padding/font-size 放大,border:none 去边框差异 */
    body.duo-pingpong-active .top-bar-left > button {
      padding: 12px 24px !important;
      font-size: 17px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 112px !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
    }
    /* 摄像头/皮套/音量/麦克风媒体按钮放大 — 38px→48px, 图标 18px→22px */
    body.duo-pingpong-active .media-btn {
      width: 48px !important;
      height: 48px !important;
      font-size: 22px !important;
      border-radius: var(--radius-sm) !important;
    }
  }

  /* P148-0801singleBtn: 电脑端单人乒乓球/摸鱼按钮对齐游戏区左上角 + 单人乒乓球返回/模型按钮放大对称
     根因1(单人乒乓球按钮不对称): #btnBack 用基础规则(16px/有边框/12px圆角), #btnVrmToggle 用 HTML 内联
       样式(15px/无边框/16px圆角), 且 .top-bar-left 内联 align-items:flex-start 导致两按钮 Y 轴顶部对齐
       但高度不一→视觉错位; font-size 16 vs 15 + border 有无 → 大小不对称。
     根因2(单人按钮不贴游戏区左上角): top-bar 默认 width:100%=game-wrap 宽, stage 按比例(ratio=LW/LH)算
       高度受限时 stage 宽<game-wrap(同双人 P148-0801duoBtn 根因), top-bar 宽于 stage → 按钮贴 game-wrap
       边缘而非 stage 边缘, 表现为"返回按钮在游戏区左上角左侧"。
     方案(复刻双人 duo-fish-active/duo-pingpong-active 方案):
       1) CSS: 单人乒乓球 top-bar padding:8px 0(左右0贴 stage 边缘)+返回/模型按钮统一放大对称;
          单人摸鱼 top-bar padding:8px 0(贴 stage 边缘, 按钮尺寸不改用户未反馈)。
       2) JS(main-app.js fitStage): 单人 pingpong/fish 桌面端(>=1024px)同步 top-bar.width=stage 宽+
          margin:auto 居中,与 stage 水平对齐(扩展 duo 判断增加单人桌面分支)。
     选择器 :not(.duo-pingpong-active)/:not(.duo-fish-active) 限定单人(双人已有独立 duo 规则)。 */
  @media (min-width: 1024px) {
    /* 单人乒乓球: 返回+模型按钮放大对称 + Y轴对齐 + 对齐游戏区左上角 */
    body[data-game="pingpong"]:not(.duo-pingpong-active) .top-bar {
      padding: 8px 0 !important;               /* 左右0: 按钮贴 stage 边缘; 上下8: 留白 */
      gap: 12px !important;
      align-items: center !important;           /* 覆盖基础 align-items:flex-start, Y 轴居中对齐 */
    }
    body[data-game="pingpong"]:not(.duo-pingpong-active) .top-bar-left {
      gap: 10px !important;
      align-items: center !important;           /* 覆盖内联 align-items:flex-start, 返回/模型 Y 轴对齐 */
      flex: 0 0 auto !important;
    }
    /* 返回+模型按钮统一放大对称 — !important 覆盖 #btnVrmToggle 的 HTML 内联 cssText 样式
       (padding/font-size/border/radius 内联), min-width 等宽消除两按钮大小差异, border:none 去
       #btnBack 边框差异, 使两按钮完全对称 */
    body[data-game="pingpong"]:not(.duo-pingpong-active) .top-bar-left > button {
      padding: 12px 24px !important;
      font-size: 17px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 112px !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
    }

    /* 单人摸鱼: 按钮对齐游戏区左上角(尺寸不改, 用户仅反馈对齐问题; 按钮由 game-fish.js 动态创建) */
    body[data-game="fish"]:not(.duo-fish-active) .top-bar {
      padding: 8px 0 !important;               /* 左右0: 按钮贴 stage 边缘 */
      align-items: center !important;
    }
    body[data-game="fish"]:not(.duo-fish-active) .top-bar-left {
      align-items: center !important;           /* 覆盖内联 align-items:flex-start, Y 轴对齐 */
      flex: 0 0 auto !important;
    }
  }

  /* 问题三+四：手机端双人摸鱼布局 — 游戏区域居中 + 按钮贴在游戏区域上方（P148-0731duolayout9）
     旧方案用 margin:-12vh / top:calc(-12vh-102px) 等 magic number 抵消偏移,
     不同机型 vh / env(safe-area-inset-top) 差异大 → Y轴位置不稳定、整体偏下。
     新方案（零 magic number，任意机型稳定）:
       1) top-bar 改 absolute 脱离文档流 → game-wrap 高度 = stage 高度
       2) body{justify-content:center} 垂直居中 game-wrap → stage 严格居中
       3) top-bar 用 bottom:100% 把底边贴到 game-wrap 顶边(=stage 顶边) → 按钮贴在游戏区上方
       4) stage 无负 margin，box 本身居中（视频裁切由 fish-mode 内部处理，不影响 box 定位）
     仅手机端(max-width:767px)，电脑端(min-width:1024px)不动。 */
  @media (max-width: 767px) {
    body.duo-fish-active {
      justify-content: center !important;       /* 垂直居中 game-wrap(=stage)，匹配阶段也正常无跳动 */
      padding-top: 0 !important;                /* 清除 body safe-area-top，避免整体下移 */
      padding-bottom: 16vh !important;          /* 底部留白让居中基准上移~8vh：整体(游戏区+按钮)再上移一点 */
      /* P148-0817duoFishNoScroll: 禁止页面上下滑动 — 复刻单人摸鱼(P148-0731)/双人表情
         (duo-emoji-active)/双人乒乓球(data-game="pingpong") 的滚动锁。
         根因: 此前仅两者缺 overflow:hidden, padding-bottom:16vh 使 body 内容超出视口可滚动;
         用户反馈"视野能看完所有东西, 不需要滑动"。@media(min-width:1024px) 桌面布局不受影响。 */
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }
    /* P148-0801fishLoading: 加载资源阶段(showGameScreen前)临时清除 padding-bottom,
       避免 duo-fish-active 的 16vh 让 body 居中基准上移 → roomScreen(匹配UI)向上偏移。
       startFishGame 在 init 后添加此类(duo-fish-active 已由 init 添加),showGameScreen 后移除。
       仅覆盖 padding-bottom,保留 duo-fish-active 其他布局(game-wrap width/top-bar absolute 等),
       因 _initDuoLayout 依赖 duo-fish-active 的 game-wrap 宽度算 stage 尺寸,不能整体移除。 */
    body.duo-fish-active.duo-fish-loading {
      padding-bottom: 0 !important;
    }
    body.duo-fish-active .game-wrap {
      max-width: 100vw !important;
      width: 100vw !important;
      margin: 0 !important;
      padding: 0 !important;                    /* 清除所有 padding(含双重 safe-area-top 根因) */
      position: relative !important;            /* 作为 top-bar absolute 的定位上下文 */
    }
    /* top-bar 绝对定位，bottom:100% 让其底边贴 game-wrap 顶边(=stage 顶边)，按钮自然贴在游戏区上方 */
    body.duo-fish-active .top-bar {
      position: absolute !important;
      bottom: 100% !important;                  /* 底边贴 stage 顶边（零 magic number，任意机型稳定） */
      left: 0 !important;
      width: 100% !important;
      z-index: 100 !important;
      background: transparent !important;       /* 无黑色背景层 */
      flex-direction: column !important;        /* 纵向:媒体按钮行在上,返回行在下 */
      align-items: stretch !important;
      gap: 2px !important;
      padding: 4px 8px !important;
    }
    /* 媒体按钮组(摄像头/麦克风/音量)放第一行(最上) */
    body.duo-fish-active .top-bar-right {
      order: -1 !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    /* 返回/画鱼/排行 行放第二行(贴近游戏区) */
    body.duo-fish-active .top-bar-left {
      order: 1 !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      /* P148-0801mobileBtn2: 显式占满 top-bar 全宽 + 减小 gap, 确保 flex:1 1 0 按钮能正确等分 */
      width: 100% !important;
      flex: 1 1 auto !important;
      gap: 4px !important;
    }
    /* stage 贴合左右边缘，box 本身由 body 居中（无负 margin） */
    body.duo-fish-active #stage {
      width: 100vw !important;
      max-width: 100vw !important;
      margin: 0 auto !important;
      flex: 0 0 auto !important;
    }
    /* 画鱼/排行按钮: 已在 .top-bar-left 内文档流(返回→画鱼→排行)，position:static，
       left/top/right 无效故不写；仅统一外观。X轴保持原样。 */
    body.duo-fish-active #btnDrawFish {
      padding: 10px 18px !important;
      font-size: 15px !important;
      z-index: 101 !important;
    }
    body.duo-fish-active #btnFishRanking {
      padding: 10px 18px !important;
      font-size: 15px !important;
      z-index: 101 !important;
    }
    /* 管理按钮: 隐藏(避免遮挡游戏区) */
    body.duo-fish-active #btnFishAdmin {
      display: none !important;
    }
    /* P148-0801mobileBtn2: 双人摸鱼四按钮等宽等大(用户反馈返回按钮和画鱼按钮大小不一样)
       根因: 内容长度不同("返回" vs "🎨 画鱼")→宽度不同; 单独统一#btnBack样式无法解决宽度差异
       修复: 四按钮 flex:1 1 0 等宽(基础宽度0,等分容器), 统一样式(padding/font-size/border/radius)
       + .top-bar padding:6px 0 贴stage边缘(fitStage已同步top-bar.width=stage.width) */
    body.duo-fish-active .top-bar {
      padding: 6px 0 !important;
    }
    body.duo-fish-active .top-bar-left > button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    /* P148-0802btnPos2: 手机端双人乒乓球「游戏」按钮=返回按钮大小(10px 18px/16px/700/有边框/16px圆角) */
    body.duo-pingpong-active .switch-game-btn {
      padding: 10px 18px !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      border: 1px solid rgba(255,255,255,0.25) !important;
      border-radius: var(--radius-md) !important;
      min-width: 0 !important;
      flex: 0 0 auto !important;
      justify-content: center !important;
      white-space: nowrap !important;          /* P148-0802btnFix: 防"游戏"换行变窄变高(原54x64) */
    }
    /* P148-0802btnFix: 手机端乒乓球 switchGameWrap 不收缩(对齐 #btnBack 的 flex:0 0 auto),
       否则默认 flex:0 1 auto 可收缩 → btnSwitchGame 被挤压换行 → 54x64 与返回按钮 70x43 不对齐 */
    body.duo-pingpong-active .switch-game-wrap {
      flex: 0 0 auto !important;
    }
    /* P148-0802btnPos2: 手机端双人摸鱼四按钮等宽(返回/游戏/画鱼/排行) — wrap 需 flex:1 1 0 参与等分 */
    body.duo-fish-active .switch-game-wrap {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      width: 0 !important;        /* P148-0802btnFix: 强制 width:0 配合 flex-grow:1 等分(否则被内容撑大不等宽) */
    }
    body.duo-fish-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }
  }

  /* P148-0801mobileBtn3: 平板/大屏手机安全网(768-1023px)
     根因: @media(max-width:767px)不覆盖768-1023px, @media(min-width:1024px)也不覆盖
     → 此范围内按钮 flex:0 0 auto(宽度由内容决定), "返回"比"🎨 画鱼"窄 → 用户反馈不等宽
     修复: 768-1023px 也应用 flex:1 1 0 等宽规则(仅按钮, 不改布局结构) */
  @media (min-width: 768px) and (max-width: 1023px) {
    body.duo-fish-active .top-bar-left {
      flex: 1 1 auto !important;
      width: 100% !important;
      gap: 4px !important;
    }
    body.duo-fish-active .top-bar-left > button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    /* P148-0802btnPos2: 平板端摸鱼「游戏」按钮也参与四按钮等宽 */
    body.duo-fish-active .switch-game-wrap {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      width: 0 !important;        /* P148-0802btnFix: 强制 width:0 配合 flex-grow:1 等分(否则 107px vs button 123px) */
    }
    body.duo-fish-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }
  }

  /* P148-0802btnAlign: 平板端(768-1023px)双人乒乓球「游戏」按钮对齐「返回」按钮
     根因: 此视口范围无 duo-pingpong-active 专用规则 → 游戏按钮回退到基础 .switch-game-btn
     (border:none/font-weight:800), 返回按钮用基础 .top-bar #btnBack (border:1px solid/
     font-weight:700) → 游戏按钮 68px 比返回按钮 70px 窄 2px(边框差)。修复: 复刻手机端乒乓球
     规则(10px 18px/16px/700/1px边框/12px圆角),使两按钮在此视口也完全一致。 */
  @media (min-width: 768px) and (max-width: 1023px) {
    body.duo-pingpong-active .switch-game-btn {
      padding: 10px 18px !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      border: 1px solid rgba(255,255,255,0.25) !important;
      border-radius: 12px !important;
      min-width: 0 !important;
      flex: 0 0 auto !important;
      justify-content: center !important;
      white-space: nowrap !important;
    }
    body.duo-pingpong-active .switch-game-wrap {
      flex: 0 0 auto !important;
    }
  }

  /* P148-0802btnAlign: 手机/平板端双人摸鱼四按钮(返回/游戏/画鱼/排行)真正等宽 — CSS Grid 方案
     根因: flex:1 1 0 等分对 switchGameWrap(display:block, 内含 btnSwitchGame width:100%)
     失效 — wrap 实际分到 107px 而直接子按钮 123px(平板)/69px vs 85px(手机),差 16px。
     另: #btnDrawFish/#btnFishRanking 的 ID 规则 padding:10px 18px(特异性高于 .top-bar-left>button)
     覆盖等宽规则的 10px 8px → 画鱼/排行比返回/游戏宽(手机 105 vs 69/85)。
     方案: .top-bar-left 改 display:grid + repeat(4,1fr) 强制四等分列(Grid 不受内容/display影响),
     四按钮统一 padding:10px 8px, width:100% 填满各自网格列。仅 ≤1023px(桌面端仍用 flex 内容定宽)。
     验证(Playwright): 平板四按钮均 119x42, 手机均 91x42, 完全一致。 */
  @media (max-width: 1023px) {
    body.duo-fish-active .top-bar-left {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 4px !important;
      align-items: center !important;
    }
    /* 按钮直接子元素: 统一 padding/字体/边框 (注意: switch-game-wrap 是 div 容器,不能给 padding,
       否则 wrap 内容宽=列宽-16px → btnSwitchGame width:100% 被挤窄 16px) */
    body.duo-fish-active .top-bar-left > button {
      width: 100% !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    /* switch-game-wrap 仅设宽度填满网格列, 不设 padding(它是 div 容器, padding 会挤窄内部按钮) */
    body.duo-fish-active .switch-game-wrap {
      width: 100% !important;
      min-width: 0 !important;
    }
    /* ID 规则(#btnDrawFish/#btnFishRanking padding:10px 18px)特异性高于上面的 > button,
       必须显式覆盖回 10px 8px 才能四按钮统一 padding */
    body.duo-fish-active #btnDrawFish,
    body.duo-fish-active #btnFishRanking {
      padding: 10px 8px !important;
    }
    body.duo-fish-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }
  }

  /* P148-0731pplayoutup4: 手机端乒乓球(单人+双人)跨设备一致布局 — 行业规范方案
     核心原则: 让浏览器自动计算位置, 不用任何 magic number(vh/px 偏移)。
     之前问题: up2 用 padding-bottom:8vh 硬调偏移, vh 在不同设备换算像素不同 → 三台手机布局不一致。
     方案(纯 CSS, 零 JS, 零 magic number):
       1) top-bar 用 position:sticky + top:0 → 自动贴视口顶部, 任意设备一致
          (sticky 不脱离文档流, 不破坏 game-wrap/stage 高度计算, 不同于 absolute/fixed)
       2) body 用 justify-content:flex-start → game-wrap 从顶部开始排列, top-bar 自然在顶部
       3) 去掉所有 vh 偏移(padding-bottom:8vh) → 不依赖 viewport 高度, 跨设备一致
     为什么 sticky 而非 fixed:
       - fixed 脱离文档流, 需 JS 测量 top-bar 高度给 game-wrap 让位, 复杂且易出错
       - sticky 留在文档流, 宽度自动 = 父元素宽度, 高度自动占位, stage 自然紧贴其下
     仅手机端(max-width:767px),电脑端(min-width:1024px)不动。 */
  @media (max-width: 767px) {
    body[data-game="pingpong"] {
      /* 从顶部排列: game-wrap + top-bar 从视口顶部开始, 不再用 center 居中 */
      justify-content: flex-start !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;             /* 去掉 8vh magic number, 跨设备一致 */
      /* P148-0801noScroll: 禁止页面向上滑动 — body 层 (复刻摸鱼大师 P148-0731noScroll)
         手机端双人匹配成功时页面能向上滑动,滑动后布局视觉变化,需锁死 body overflow */
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }
    body[data-game="pingpong"] .game-wrap {
      margin: 0 !important;
      padding-top: 0 !important;
      /* 不设 display/position, 保持原有计算逻辑(up3 改 display:flex 破坏了 stage) */
    }
    /* top-bar: sticky 贴顶 — 行业标准做法, 不脱离文档流, 宽度自适应父元素 */
    body[data-game="pingpong"] .top-bar {
      position: sticky !important;
      top: 0 !important;                        /* 滚动时停在视口顶部 */
      z-index: 100 !important;
      background: transparent !important;
    }
    /* stage: 自然尺寸, 紧贴 top-bar 下方, 不需要任何偏移 */
    body[data-game="pingpong"] #stage {
      margin-top: 0 !important;
    }

    /* P148-0801mobileBtn: 手机端双人乒乓球按钮对齐游戏区边缘
       根因: top-bar 默认 padding:6px 8px 10px 18px(左右不为0)→按钮不贴stage边缘;
       且 top-bar 默认 width:100%=game-wrap 宽 > stage 宽(按比例算)→媒体按钮不贴stage右边缘
       修复: padding 左右=0 让按钮贴 top-bar 边缘(fitStage 已同步 top-bar.width=stage.width+margin:auto 居中) */
    body.duo-pingpong-active .top-bar {
      padding: 6px 0 !important;
      align-items: center !important;
    }
    body.duo-pingpong-active .top-bar-left {
      align-items: center !important;
    }

    /* P148-0801mobileBtn: 手机端单人乒乓球返回/模型按钮等大+Y轴对齐+对齐游戏区边缘
       根因: #btnBack(基础样式16px/有边框/12px圆角)与#btnVrmToggle(内联15px/无边框/16px圆角)大小不一;
       top-bar-left 默认 align-items:flex-start → Y轴顶部对齐但高度不同→视觉错位;
       top-bar padding 左=18px → 按钮不贴stage左边缘
       修复: padding左右=0贴边缘 + 按钮统一样式等大 + align-items:center Y轴对齐 */
    body[data-game="pingpong"]:not(.duo-pingpong-active) .top-bar {
      padding: 6px 0 !important;
      align-items: center !important;
    }
    body[data-game="pingpong"]:not(.duo-pingpong-active) .top-bar-left {
      align-items: center !important;
    }
    body[data-game="pingpong"]:not(.duo-pingpong-active) .top-bar-left > button {
      padding: 10px 18px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      flex: 0 0 auto !important;
      justify-content: center !important;
    }
  }

  /* P148-0731fishlayout: 单人摸鱼大师手机端布局 — 搬运乒乓球行业规范方案
     (position:sticky + justify-content:flex-start, 纯 CSS 零 JS 零 magic number)
     + 四按钮自适应(返回/模型/画鱼/排行 X 轴始终在游戏区内, 紧凑不溢出)
     :not(.duo-fish-active) 限定单人模式(双人摸鱼有独立 body.duo-fish-active 布局) */
  @media (max-width: 767px) {
    body[data-game="fish"]:not(.duo-fish-active) {
      justify-content: flex-start !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      /* P148-0731noScroll: 禁止页面向上滑动 — body 层 */
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }
    body[data-game="fish"]:not(.duo-fish-active) .game-wrap {
      margin: 0 !important;
      padding-top: 0 !important;
    }
    body[data-game="fish"]:not(.duo-fish-active) .top-bar {
      position: sticky !important;
      top: 0 !important;
      z-index: 100 !important;
      background: transparent !important;
      /* P148-0801mobileBtn2: padding左右=0 贴stage边缘(fitStage已同步top-bar.width=stage.width)
         返回按钮贴左上角, 模型按钮(顺序最后)贴右上角 */
      padding: 6px 0 !important;
    }
    body[data-game="fish"]:not(.duo-fish-active) #stage {
      margin-top: 0 !important;
    }
    /* 四按钮自适应: 等分 top-bar-left 可用宽度, 紧凑 padding, 永不溢出游戏区 X 范围
       P148-0731btnfix3: flex:1 1 0(非auto) → 基础宽度0,四按钮完全等宽;
       旧 flex:1 1 auto 基础宽度按内容算,画鱼"🎨 画鱼"比"返回"/"模型"宽→画鱼按钮更宽;
       min-width:0 → 按钮随容器收缩; nowrap+ellipsis → 文字溢出截断不换行 */
    body[data-game="fish"]:not(.duo-fish-active) .top-bar-left {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      gap: 4px !important;
    }
    body[data-game="fish"]:not(.duo-fish-active) .top-bar-left > button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      /* P148-0801mobileBtn2: 增大padding/font-size(用户反馈四按钮太小,和游戏区边缘有距离可压榨) */
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      border-radius: 16px !important;
      border: none !important;
      justify-content: center !important;
      text-align: center !important;
    }
    /* 排行按钮保持金色, 画鱼按钮保持豆绿(只调尺寸, 不改配色) */
    /* P148-0816btnTexture: 降低阴影 + 毛玻璃, 不抢游戏视觉 */
    body[data-game="fish"]:not(.duo-fish-active) #btnFishRanking {
      background: linear-gradient(135deg,#ffe0a3,#ffc870) !important;
      color: #8a5a1a !important;
      box-shadow: 0 2px 6px rgba(255,200,112,0.25) !important;
      backdrop-filter: blur(6px) saturate(1.15);
      -webkit-backdrop-filter: blur(6px) saturate(1.15);
    }
    body[data-game="fish"]:not(.duo-fish-active) #btnDrawFish,
    body[data-game="fish"]:not(.duo-fish-active) #btnVrmToggle {
      background: linear-gradient(135deg,#b8d4c5,#a5c4b2) !important;
      color: #3d5a4a !important;
      box-shadow: 0 2px 6px rgba(165,196,178,0.25) !important;
      backdrop-filter: blur(6px) saturate(1.15);
      -webkit-backdrop-filter: blur(6px) saturate(1.15);
    }
  }

  /* P148-0731painter: 手机端画鱼UI布局 — 按钮缩小 + 清空左对齐/橡皮擦右对齐画板 + 整体上移
     画鱼UI(#fishPainter)由 game-fish.js openPainter 动态创建,样式全内联 cssText,
     此处用 !important 覆盖。遵循乒乓球教训: 不用 vh/magic number, 用 env(safe-area) */
  @media (max-width: 767px) {
    /* overlay 整体上移: center→flex-start, 顶部留安全区 + 10vh 比例下移(用户反馈5vh仍偏上,加大到10vh)
       calc(env(safe-area) + 10vh): 既适配刘海屏,又按屏高比例下移(800px高≈80px),避免magic number */
    #fishPainter {
      justify-content: flex-start !important;
      padding-top: calc(env(safe-area-inset-top) + 10vh) !important;
      gap: 8px !important;
    }
    /* 工具栏行: 清空左、橡皮擦右, 与画板左右边缘对齐(space-between) */
    #fishPainter > div:first-child {
      justify-content: space-between !important;
      gap: 4px !important;
    }
    /* 清空/橡皮擦按钮缩小: padding 14px 22px→8px 12px, font-size 18px→14px, min-width 100px→70px */
    #fishPainter > div:first-child > button {
      padding: 8px 12px !important;
      font-size: 14px !important;
      min-width: 70px !important;
    }
    /* 颜色板占位缩小: min-height 120px→80px */
    #fishPainter #colorPickerSlot {
      min-height: 80px !important;
    }
    /* SV 色板画布缩小 160→100 */
    #fishPainter #adobeColorPicker canvas:first-of-type {
      width: 100px !important;
      height: 100px !important;
    }
    /* 色相条缩小 24×160 → 16×100 */
    #fishPainter #adobeColorPicker canvas:last-of-type {
      width: 16px !important;
      height: 100px !important;
    }
    /* 颜色预览圆缩小 44→30 */
    #fishPainter #adobeColorPicker > div {
      width: 30px !important;
      height: 30px !important;
    }
  }

  /* P148-0731painterCursor: 电脑端画鱼UI鼠标变画笔 — 仅鼠标设备(hover:hover+pointer:fine),
     手机端触摸设备自动跳过。用户反馈画板 cursor:crosshair 看不出区别,改用画笔图标。
     #fishPainter overlay 被 _closePainter removeChild 后元素从DOM消失, cursor 自动恢复默认,
     无需任何关闭逻辑 — 天然符合"关闭画鱼UI画笔消失"。
     画板/颜色板 canvas 内联 cursor:crosshair 用 cursor:inherit !important 覆盖为继承 overlay 的画笔。
     画笔图标用 SVG data URI 内联, 无需额外图片文件; 热点(2,2)在笔尖处。 */
  @media (hover: hover) and (pointer: fine) {
    #fishPainter {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M1 1 L8 1 L1 8 Z' fill='%232a2a2a'/%3E%3Cpath d='M5.5 5.5 L10 10 L8 12 L3.5 7.5 Z' fill='%23b8b8b8'/%3E%3Cpath d='M8 8 L26 26 L23 29 L5 11 Z' fill='%23f5a623' stroke='%238a5a00' stroke-width='1.2'/%3E%3Cpath d='M10 10 L12 12 L10 14 L8 12 Z' fill='%23ffd070' opacity='0.5'/%3E%3C/svg%3E") 2 2, auto !important;
    }
    /* canvas 内联 cursor:crosshair 覆盖为继承 overlay 的画笔 */
    #fishPainter canvas {
      cursor: inherit !important;
    }
  }

  /* P148-0731btnalign: 摸鱼大师桌面端 — 4 按钮(返回/画鱼/排行/模型)尺寸统一对齐画鱼按钮
     桌面端 btnBack 默认 font-size:16px/font-weight:700/border-radius:12px/有边框, 与画鱼按钮
     (15px/800/16px/无边框)不一致; btnVrmToggle 内联已接近但仍统一强制。手机端由上方
     @media .top-bar-left > button 覆盖, 此处仅补桌面(min-width:768px)互不冲突 */
  @media (min-width: 768px) {
    body[data-game="fish"] .top-bar-left > button {
      padding: 10px 18px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      /* P148-0731btnsize: 返回/模型按钮宽度对齐画鱼按钮。桌面端按钮 flex:0 0 auto 按内容算宽度,
         画鱼含"🎨 画鱼"(emoji+2字)最宽~87px,返回/模型仅2字~66px偏窄。设 min-width 让窄按钮
         撑到与画鱼等宽(100px > 画鱼自然宽度,所有按钮统一100px),justify-content:center 文字居中 */
      min-width: 100px !important;
      justify-content: center !important;
    }
  }

  /* P148-0731emoscale: 表情包大师手机端布局变大 — 16:9 横屏在竖屏手机受宽度限制,
     去掉 body L/R padding 让 stage 满宽(360 vs 原 320), stage 放大约 12%;
     配合 game-emoji.js 逻辑分辨率对齐 stage(scale=1.0)让文字/UI 按 14px 原始 CSS 像素显示(不再缩小一半) */
  @media (max-width: 767px) {
    body[data-game="emoji"] {
      justify-content: flex-start !important;
      padding: 0 !important;                 /* 去 L/R padding, 16:9 横屏满宽最大化 */
    }
    body[data-game="emoji"] .game-wrap {
      margin: 0 !important;
      padding-top: 0 !important;
      max-width: 100% !important;
    }
    body[data-game="emoji"] .top-bar {
      position: sticky !important;
      top: 0 !important;
      z-index: 100 !important;
      background: transparent !important;
      /* P148-0816btnUnify: padding左右=0 让三按钮贴 stage 左右边缘(X轴铺满),
         与 fish/pingpong 手机端 padding:6px 0 同规范 */
      padding: 6px 0 !important;
    }
    body[data-game="emoji"] #stage {
      margin-top: 0 !important;
    }
    /* P148-0816btnUnify: 手机端返回/模型/管理三按钮铺满游戏区X轴 — Grid 3列等宽(复刻
       duo-emoji-active/duo-fish-active 4按钮Grid方案)。top-bar-left 默认 display:flex,
       改 grid 强制三按钮等宽, width:100% 填满各自列, 不受按钮内容长度差异影响。
       验证依据: 与 duo-emoji-active .top-bar-left > button 规则完全对齐(同 padding/字号) */
    body[data-game="emoji"] .top-bar-left {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 4px !important;
      align-items: center !important;
      width: 100% !important;
    }
    body[data-game="emoji"] .top-bar-left > button {
      width: 100% !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      border-radius: 16px !important;
      border: none !important;
      justify-content: center !important;
      text-align: center !important;
    }
  }

  /* P148-0803emojiLayoutFix: 电脑端表情包大师对齐单人摸鱼大师桌面端布局 —
     不覆盖 body justify-content/padding 和 game-wrap padding-top, 让 emoji 自然继承
     默认值(justify-content:center + body padding:0 20px 20px + game-wrap padding-top:20px),
     与 fish 桌面端完全一致。仅保留 max-width/margin 放宽 game-wrap 宽度(同 fish 桌面端)。
     根因(2026-08-03 实测): 之前覆盖 justify-content:flex-start + padding:0 + padding-top:0
     导致 game-wrap 被推到视口顶部之上(y=-10), 而 fish 是 y=65.5(body center 垂直居中),
     top-bar/stage 整体上移 95.5px, 表现为"游戏区域和边缘距离与摸鱼大师不一致"。
     桌面端数据对齐: game-wrap y=65.5 / top-bar y=85.5 / stage y=143.5 (同 fish) */
  @media (min-width: 768px) {
    body[data-game="emoji"] .game-wrap {
      max-width: min(95vw, 1400px) !important;
      margin: -10px auto 0 !important;
    }
    body[data-game="emoji"] #stage {
      margin-top: 0 !important;
    }
    /* P148-0803layout: top-bar/top-bar-left 对齐单人摸鱼桌面端 —
       按钮组贴 stage 左右边缘(左右padding=0), Y轴居中对齐 */
    body[data-game="emoji"] .top-bar {
      padding: 8px 0 !important;
      align-items: center !important;
    }
    body[data-game="emoji"] .top-bar-left {
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    /* 按钮规范 — 与单人摸鱼大师(body[data-game="fish"])桌面端一致: 排列在游戏区左上角 */
    body[data-game="emoji"] .top-bar-left > button {
      padding: 10px 18px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 100px !important;
      justify-content: center !important;
    }
  }

  /* P148-0806imitateLayout: 模仿大师单人模式严格一比一复刻表情包大师布局 —
     手机端/桌面端规则与上方 body[data-game="emoji"] 完全一致, 距离/尺寸逐条对齐。
     用 :not(.duo-emoji-active) 限定仅单人模式(双人模仿大师复用 duo-emoji-active 类, 不受影响) */
  @media (max-width: 767px) {
    body[data-game="imitate"]:not(.duo-emoji-active) {
      justify-content: flex-start !important;
      padding: 0 !important;                 /* 去 L/R padding, 16:9 横屏满宽最大化 */
    }
    body[data-game="imitate"]:not(.duo-emoji-active) .game-wrap {
      margin: 0 !important;
      padding-top: 0 !important;
      max-width: 100% !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) .top-bar {
      position: sticky !important;
      top: 0 !important;
      z-index: 100 !important;
      background: transparent !important;
      /* P148-0816btnUnify: padding左右=0 让三按钮贴 stage 左右边缘(X轴铺满), 与 emoji 同规范 */
      padding: 6px 0 !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) #stage {
      margin-top: 0 !important;
    }
    /* P148-0816btnUnify: 手机端返回/模型/管理三按钮铺满游戏区X轴 — Grid 3列等宽(与表情包大师一致) */
    body[data-game="imitate"]:not(.duo-emoji-active) .top-bar-left {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 4px !important;
      align-items: center !important;
      width: 100% !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) .top-bar-left > button {
      width: 100% !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      border-radius: 16px !important;
      border: none !important;
      justify-content: center !important;
      text-align: center !important;
    }
  }
  @media (min-width: 768px) {
    body[data-game="imitate"]:not(.duo-emoji-active) .game-wrap {
      max-width: min(95vw, 1400px) !important;
      margin: -10px auto 0 !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) #stage {
      margin-top: 0 !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) .top-bar {
      padding: 8px 0 !important;
      align-items: center !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) .top-bar-left {
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    body[data-game="imitate"]:not(.duo-emoji-active) .top-bar-left > button {
      padding: 10px 18px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 100px !important;
      justify-content: center !important;
    }
  }

  /* P148-0806imitateDuoMobile: 模仿大师双人模式手机端布局修复 —
     根因: 双人模仿大师复用 .duo-emoji-active 布局, 其手机端 .top-bar 用 position:absolute;bottom:100%
     (贴在 game-wrap 上方)。但模仿大师双人舞台 720×1080(2:3) 比表情包大师 720×640 高, 手机端竖屏时
     舞台占满视口, game-wrap 上方无空间 → 媒体按钮行(视频/音量/麦克风)被挤出屏幕顶, 只剩返回/游戏/管理行。
     修复: 复刻单人模仿大师方案 — body flex-start 贴顶 + top-bar sticky 贴屏顶, 媒体行(第一行)与
     返回/游戏/管理行(第二行)始终显示在屏幕顶部, 舞台紧随其下。用独立 duo-imitate-active 类限定,
     不影响复用 duo-emoji-active 的表情包大师。 */
  @media (max-width: 767px) {
    body.duo-imitate-active {
      justify-content: flex-start !important;
      padding: 0 !important;
      /* P148-0817layoutSnapFix: 由 overflow:auto → hidden, 对标双人乒乓球/摸鱼(overflow:hidden)。
         根因: 移动端舞台 720×1080 高度超过视口时, overflow:auto 使页面可上下滚动,
         加载完成后整体布局被滚动/地址栏收缩"下移"。改为 hidden + overscroll none 锁定, 防止拖动。 */
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }
    body.duo-imitate-active .game-wrap {
      position: relative !important;
    }
    body.duo-imitate-active .top-bar {
      position: sticky !important;
      top: 0 !important;
      bottom: auto !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 100 !important;
      background: transparent !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 2px !important;
      /* P148-0816btnUnify: padding左右=0 让三按钮贴 stage 左右边缘(X轴铺满), 与单人模式同规范 */
      padding: 4px 0 !important;
      margin: 0 !important;
    }
    /* 媒体按钮行(视频/音量/麦克风)放第一行 */
    body.duo-imitate-active .top-bar-right {
      order: -1 !important;
      display: flex !important;
      justify-content: flex-end !important;
    }
    /* JS _layoutDuoMobileMedia 创建的媒体行(视频→音量→麦克风)靠左 — 对标 duo-emoji-active(表情包大师)靠左布局 */
    body.duo-imitate-active #duoMobileMediaRow {
      justify-content: flex-start !important;
    }
    /* 返回/游戏/管理行放第二行 */
    body.duo-imitate-active .top-bar-left {
      order: 1 !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      width: 100% !important;
      flex: 1 1 auto !important;
      gap: 4px !important;
    }
    body.duo-imitate-active .top-bar-left > button {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.duo-imitate-active .switch-game-wrap {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      width: 0 !important;
    }
    body.duo-imitate-active .switch-game-btn {
      width: 100% !important;
      padding: 10px 8px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border: none !important;
      border-radius: 16px !important;
      min-width: 0 !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    body.duo-imitate-active #stage {
      width: 100vw !important;
      max-width: 100vw !important;
      margin: 0 auto !important;
      flex: 0 0 auto !important;
    }
    body.duo-imitate-active #stage #canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }

  /* P148-0807mocapDemo: 动捕演示单人模式一比一复刻表情包大师布局 —
     规则与 body[data-game="emoji"] 完全一致(电脑端16:9/手机端9:16), 按钮仅返回+模型 */
  @media (max-width: 767px) {
    body[data-game="mocap"] {
      justify-content: flex-start !important;
      padding: 0 !important;                 /* 去 L/R padding, 满宽最大化 */
    }
    body[data-game="mocap"] .game-wrap {
      margin: 0 !important;
      padding-top: 0 !important;
      max-width: 100% !important;
    }
    body[data-game="mocap"] .top-bar {
      position: sticky !important;
      top: 0 !important;
      z-index: 100 !important;
      background: transparent !important;
    }
    body[data-game="mocap"] #stage {
      margin-top: 0 !important;
    }
  }
  @media (min-width: 768px) {
    body[data-game="mocap"] .game-wrap {
      max-width: min(95vw, 1400px) !important;
      margin: -10px auto 0 !important;
    }
    body[data-game="mocap"] #stage {
      margin-top: 0 !important;
    }
    body[data-game="mocap"] .top-bar {
      padding: 8px 0 !important;
      align-items: center !important;
    }
    body[data-game="mocap"] .top-bar-left {
      align-items: center !important;
      flex: 0 0 auto !important;
    }
    body[data-game="mocap"] .top-bar-left > button {
      padding: 10px 18px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      border-radius: 16px !important;
      border: none !important;
      min-width: 100px !important;
      justify-content: center !important;
    }
  }

/* ============================================================
   P148-0802switchGame: 房间内换游戏按钮 + 下拉菜单 + 弹窗 + 切换中遮罩
   ============================================================ */

/* 「游戏」按钮 — P148-0802btnStyle: 采用初始UI「双人对战」蓝色调(用户反馈灰色不好看) */
.switch-game-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #c5d9ea, #b4cfe7);
  color: #4a6b85;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 16px; font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
  /* P148-0816btnTexture: 分层阴影 + 内高光, 与主页大按钮质感统一 */
  box-shadow: 0 6px 20px rgba(180, 207, 231, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.15s ease;
  /* P148-0802btnFix: 去掉 font-family: inherit,用 button 默认 Arial(与 #btnBack/#btnFishRanking 一致),
     否则 body 字体(-apple-system)的 line-height:normal 与 Arial 不同 → 桌面端游戏按钮 46px vs 返回 48px 差 2px */
}
.switch-game-btn:active { transform: scale(0.96); }
.switch-game-btn.active {
  background: linear-gradient(135deg, #b4cfe7, #a3c2db);
}
/* P148-0802btnStyle: 双人模式「游戏」按钮大小对齐返回按钮(桌面端两人游戏统一放大)
   P148-0802btnFix: 必须包在 @media(min-width:1024px) 内!原规则无媒体查询,!important 在所有视口生效,
   因 CSS 同优先级后定义胜出,覆盖了手机端(@media max-width:767px 的 10px 18px/16px)和平板端
   (768-1023px 的 10px 8px/15px)的针对性规则 → 手机端游戏按钮 112px vs 返回按钮 70px 严重不对齐 */
@media (min-width: 1024px) {
  body.duo-pingpong-active .switch-game-btn,
  body.duo-fish-active .switch-game-btn {
    padding: 12px 24px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    border-radius: 16px !important;
    border: none !important;
    min-width: 112px !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
}

/* 下拉菜单 — 按钮下方白底圆角卡片 */
.switch-game-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0,0,0,0.28);
  padding: 6px;
  z-index: 90000;
  animation: switchMenuIn 0.18s cubic-bezier(.2,.8,.2,1);
}
@keyframes switchMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.switch-game-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: #2d3d30;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease;
}
.switch-game-item:hover { background: #f0f5f1; }
.switch-game-item:active { background: #e3ede6; transform: scale(0.98); }
.switch-game-item .switch-game-item-icon { font-size: 22px; line-height: 1; }

/* 换游戏弹窗 — 复刻 .privacy-modal 居中卡片+遮罩+动画 */
.switch-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
}
.switch-modal.show { display: flex; }
.switch-modal-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 380px;
  width: 100%;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: switchModalIn 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes switchModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.switch-modal-title {
  text-align: center;
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 800;
  color: #2d3d30;
  margin: 0 0 12px;
  line-height: 1.4;
}
.switch-modal-sub {
  text-align: center;
  font-size: clamp(13px, 2vw, 15px);
  color: #5a6a5d;
  line-height: 1.6;
  margin-bottom: 24px;
}
.switch-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.switch-modal-btn {
  flex: 1;
  padding: 12px 20px;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.switch-modal-btn:active { transform: scale(0.96); }
.switch-modal-btn-primary {
  background: linear-gradient(135deg, #5a7a6a, #3d5a4a);
  color: #fff;
  box-shadow: 0 6px 20px rgba(61, 90, 74, 0.3);
}
.switch-modal-btn-primary:hover { box-shadow: 0 10px 26px rgba(61, 90, 74, 0.4); }
.switch-modal-btn-secondary {
  background: #eef2ef;
  color: #5a6a5d;
}
.switch-modal-btn-secondary:hover { background: #e3ede6; }
/* 单按钮场景(拒绝结果"知道了") — 隐藏次要按钮, 主按钮居中 */
.switch-modal.single-btn .switch-modal-btn-secondary { display: none; }
.switch-modal.single-btn .switch-modal-btn-primary { flex: 0 0 auto; min-width: 160px; }

/* 切换中遮罩 */
.switch-loading-overlay {
  position: fixed; inset: 0; z-index: 100001;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
}
.switch-loading-overlay.show { display: flex; }
.switch-loading-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.switch-loading-spinner {
  width: 38px; height: 38px;
  border: 4px solid #e3ede6;
  border-top-color: #5a7a6a;
  border-radius: 50%;
  animation: switchSpin 0.9s linear infinite;
}
@keyframes switchSpin { to { transform: rotate(360deg); } }
.switch-loading-text {
  font-size: 16px;
  font-weight: 700;
  color: #2d3d30;
}

/* ============================================================
   P148-0802emojiFloat: 表情包悬浮窗 — 拖拽 + 等比例缩放(11:9)
   仅表情包大师游戏可见(init 时 display:block, stop 时 display:none)
   ============================================================ */
.emoji-float-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 409px;            /* 11:9 等比例(与背景图 550x450 一致) */
  /* P148-0817efScale: 窗口装饰(标题栏/底部栏/内元素)随窗口宽度等比缩放的比例因子.
     JS 在双人布局/拖拽缩放/同步时设为 currentW/500(与内容 scale 一致), 默认 1(单人 500px 窗不变) */
  --ef-scale: 1;
  z-index: 8;               /* canvas(z5) 之上, UI(z9999) 之下 */
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;       /* 阻止触摸滚动, 让拖拽/缩放正常工作 */
  border: 4px solid #6b9a7e;              /* P148-0817emojiFloatWin: 卡通粗边框 */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 0 #6b9a7e, 0 12px 20px rgba(107,154,126,0.25);  /* 卡通硬阴影 */
  background: linear-gradient(180deg, #ffffff 0%, #f0f6f2 100%);    /* 主体白绿渐变 */
}
.emoji-float-window.dragging {
  opacity: 0.85;
}

/* ============================================================
   P148-0817emojiFloatWin: 卡通窗口皮肤(参考 UI/卡通表情包悬浮窗.html)
   纯 CSS 替代原 emoji-bg.png 背景图 — 标题栏/糖果按钮/底部装饰栏
   ============================================================ */
/* 标题栏 — 豆绿渐变 + 顶部高光
   P148-0817efScale: 高度随窗口 --ef-scale 等比缩放, 否则手机端 103px 高窗口被 50px 标题栏吃掉近半 */
.ef-titlebar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(50px * var(--ef-scale));
  min-height: 16px;
  background: linear-gradient(180deg, #a5c4b4 0%, #8db09e 50%, #7fa592 100%);
  border-bottom: calc(3px * var(--ef-scale)) solid #6b9a7e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(16px * var(--ef-scale));
  pointer-events: none;     /* 装饰层, 点击穿透到拖拽 */
  z-index: 1;
}
.ef-titlebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.ef-title-left {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ef-scale));
  z-index: 1;
}
.ef-title-icon {
  width: calc(30px * var(--ef-scale));
  height: calc(30px * var(--ef-scale));
  background: #ffffff;
  border: calc(2px * var(--ef-scale)) solid #6b9a7e;
  border-radius: calc(10px * var(--ef-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--ef-scale));
  line-height: 1;
  box-shadow: 0 calc(2px * var(--ef-scale)) 0 #6b9a7e;
}
.ef-title-text {
  color: #ffffff;
  font-size: calc(17px * var(--ef-scale));
  font-weight: 700;
  text-shadow: 1px 1px 0 #6b9a7e, -1px -1px 0 rgba(255,255,255,0.2);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ef-title-buttons {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ef-scale));
  z-index: 1;
}
/* 糖果色圆按钮 — 纯装饰(悬浮窗整窗可拖拽, 按钮点击穿透) */
.ef-btn {
  width: calc(26px * var(--ef-scale));
  height: calc(26px * var(--ef-scale));
  border-radius: 50%;
  border: calc(2.5px * var(--ef-scale)) solid #6b9a7e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(2px * var(--ef-scale)) 0 #6b9a7e;
}
.ef-btn i {
  font-style: normal;
  color: #6b9a7e;
  font-size: calc(14px * var(--ef-scale));
  font-weight: 900;
  line-height: 1;
  margin-top: -1px;
}
.ef-btn-min   { background: linear-gradient(180deg, #ffe49a 0%, #ffd97a 100%); }
.ef-btn-max   { background: linear-gradient(180deg, #c8e6d4 0%, #b8d4c5 100%); }
.ef-btn-close { background: linear-gradient(180deg, #ffc5d0 0%, #f8a5b5 100%); }

/* 底部装饰栏 — 浅豆绿渐变 + 星星/圆点
   P148-0817efScale: 高度随窗口 --ef-scale 等比缩放 */
.ef-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: calc(28px * var(--ef-scale));
  min-height: 10px;
  background: linear-gradient(180deg, #e8f2ec 0%, #d4e6db 100%);
  border-top: calc(2px * var(--ef-scale)) solid #b8d4c5;
  display: flex;
  align-items: center;
  padding: 0 calc(12px * var(--ef-scale));
  pointer-events: none;     /* 装饰层, 不挡缩放手柄 */
  z-index: 1;
}
.ef-footer-decor {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ef-scale));
}
.ef-ft-star {
  font-size: calc(14px * var(--ef-scale));
  color: #ffd97a;
  text-shadow: 1px 1px 0 #6b9a7e;
  line-height: 1;
}
.ef-ft-heart {
  font-size: calc(12px * var(--ef-scale));
  color: #f8a5b5;
  text-shadow: 1px 1px 0 #6b9a7e;
  line-height: 1;
}
.ef-ft-dot {
  width: calc(6px * var(--ef-scale));
  height: calc(6px * var(--ef-scale));
  border-radius: 50%;
  background: #b8d4c5;
  border: calc(1.5px * var(--ef-scale)) solid #6b9a7e;
}
/* 表情包内容容器 — 略向下偏移显示(用户要求表情包位置往下一点点), 留出边距
   P148-0802emojiFloat6: top 56%→52% 往上调一点点
   P148-0802emojiFloat7: 回退 container query(导致内容消失), 改用JS动态设置 fontSize/width 实现等比例缩放
   P148-0802emojiFloat8: top 52%→55% 往下调一点(用户反馈还要再下一点点)
   P148-0802emojiFloat9: top 55%→53% 再往上一点点(用户反馈)
   P148-0802emojiFloat9b: 改用 transform:scale() 等比例缩放整个内容容器(用户建议方案)
     内容(字符/图片)用固定基准尺寸, 通过 scale(currentW/500) 统一缩放, 与背景图同步 */
.emoji-float-content {
  position: absolute;
  top: 53%; left: 50%;        /* top:53% 再往上一点点 */
  transform: translate(-50%, -50%);  /* JS 追加 scale() */
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  line-height: 1;
}
.emoji-float-content img {
  width: 225px;               /* P148-0803emojiShrink: 300→225px 缩小表情包图片(基准宽度,500px窗宽时) */
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* ============================================================
   P148-0812camGuide: 摄像头权限被禁用(denied)引导弹窗 — 居中全屏大弹窗
   按设备(Mac/Windows/手机)分步引导开启摄像头权限, 大字号醒目
   ============================================================ */
.cam-guide-modal {
  position: fixed; inset: 0; z-index: 100002;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
}
.cam-guide-modal.show { display: flex; }
.cam-guide-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 36px 30px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  position: relative;
  animation: camGuideIn 0.28s cubic-bezier(.2,.8,.2,1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes camGuideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cam-guide-icon {
  text-align: center;
  font-size: 52px;
  margin-bottom: 14px;
}
.cam-guide-title {
  text-align: center;
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 800;
  color: #e04a3f;
  margin: 0 0 12px;
  line-height: 1.3;
}
.cam-guide-sub {
  text-align: center;
  font-size: clamp(16px, 2.4vw, 18px);
  color: #5a6a5d;
  line-height: 1.6;
  margin-bottom: 22px;
}
.cam-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.cam-guide-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f6f8f6;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.cam-guide-step-num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #e04a3f;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.cam-guide-step-body {
  font-size: clamp(15px, 2.2vw, 17px);
  color: #2d3d30;
  line-height: 1.6;
}
.cam-guide-step-body b { color: #e04a3f; }
.cam-guide-step-body .step-desc {
  display: block;
  color: #6a7a6d;
  font-size: clamp(13px, 2vw, 15px);
  margin-top: 3px;
}
.cam-guide-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cam-guide-btn {
  padding: 14px 22px;
  font-size: clamp(16px, 2.4vw, 18px);
  font-weight: 800;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cam-guide-btn:active { transform: scale(0.96); }
.cam-guide-btn-primary {
  background: linear-gradient(135deg, #ff5a4f, #e04a3f);
  color: #fff;
  box-shadow: 0 6px 20px rgba(224, 74, 63, 0.35);
}
.cam-guide-btn-primary:hover { box-shadow: 0 10px 26px rgba(224, 74, 63, 0.45); }
.cam-guide-btn-secondary {
  background: #eef2ef;
  color: #5a6a5d;
}
.cam-guide-btn-secondary:hover { background: #e3ede6; }

/* P148-0813camTip: getUserMedia 权限请求提示条 — 顶部居中悬浮, 大字醒目 */
.cam-perm-tip {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  opacity: 0;
  visibility: hidden;
  z-index: 100003;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, #1a73e8, #1557b0);
  color: #fff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 16px 28px 18px;
  box-shadow: 0 8px 30px rgba(26, 115, 232, 0.4);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, visibility 0.3s ease;
  max-width: 480px;
  width: calc(100% - 40px);
}
.cam-perm-tip.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.cam-perm-tip-arrow {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
  animation: camTipBounce 0.8s ease-in-out infinite alternate;
}
@keyframes camTipBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
.cam-perm-tip-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.cam-perm-tip-desc {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 4px;
  line-height: 1.4;
}
@media (max-width: 500px) {
  .cam-perm-tip { padding: 14px 18px 16px; }
  .cam-perm-tip-title { font-size: 17px; }
  .cam-perm-tip-desc { font-size: 12px; }
}
.emoji-float-content .emoji-char {
  font-size: 75px;            /* P148-0803emojiShrink: 100→75px 缩小表情包字符(基准字号,500px窗宽时) */
  line-height: 1;
  /* P148-0817emojiFloatWin: 卡通弹跳动画(参考稿大表情 emoji-bounce) */
  animation: ef-emoji-bounce 2s ease-in-out infinite;
}
/* P148-0817emojiFloatWin: 表情包图片同步弹跳(与 emoji-char 一致) */
.emoji-float-content img {
  animation: ef-emoji-bounce 2s ease-in-out infinite;
}
@keyframes ef-emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* P148-0817emojiFloatWin: 无匹配姿势时的提示文字 — 豆绿虚线圆角框(参考稿 hint-text 样式) */
.emoji-float-content .emoji-hint {
  font-size: 44px;            /* 基准字号(500px窗宽时), 比表情包字符(75px)小 */
  color: #5a7a6a;
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 600;
  background: #e8f2ec;
  border: 3px dashed #b8d4c5;
  border-radius: 40px;
  padding: 8px 24px;
}
/* 缩放手柄 — 右下角点阵(参考稿 resize-handle), 视觉提示可拖拽缩放 */
/* P148-0804duoResizeColor: 默认(单人模式)豆绿; 双人模式(body.duo-emoji-active)覆盖为主题绿 #8db09e */
.emoji-float-resize {
  position: absolute;
  bottom: 4px; right: 4px;    /* 避开窗口 4px 边框, 点阵落在底部装饰栏内 */
  width: 24px;
  height: 24px;
  cursor: se-resize;
  background-image: radial-gradient(circle, #6b9a7e 1.6px, transparent 1.8px);
  background-size: 7px 7px;
  background-position: right bottom;
  background-repeat: no-repeat;
  touch-action: none;
  z-index: 2;                 /* 高于装饰栏(z1), 不被 pointer-events 挡 */
}
.emoji-float-resize:active {
  background-image: radial-gradient(circle, rgba(107,154,126,0.55) 1.6px, transparent 1.8px);
}
/* P148-0804duoResizeHandle: 玩家B(右半屏)缩放手柄移到左下角, 防止贴近stage右边缘时手柄被挤出 */
.emoji-float-resize-sw {
  left: 4px;
  right: auto;
  cursor: sw-resize;
  background-position: left bottom;
}
.emoji-float-resize-sw:active {
  background-image: radial-gradient(circle, rgba(107,154,126,0.55) 1.6px, transparent 1.8px);
}
/* P148-0804duoResizeColor: 双人模式(body.duo-emoji-active)用主题绿 #8db09e */
.duo-emoji-active .emoji-float-resize {
  background-image: radial-gradient(circle, #8db09e 1.6px, transparent 1.8px);
}
.duo-emoji-active .emoji-float-resize:active {
  background-image: radial-gradient(circle, rgba(141,176,158,0.55) 1.6px, transparent 1.8px);
}
.duo-emoji-active .emoji-float-resize-sw {
  background-image: radial-gradient(circle, #8db09e 1.6px, transparent 1.8px);
}
.duo-emoji-active .emoji-float-resize-sw:active {
  background-image: radial-gradient(circle, rgba(141,176,158,0.55) 1.6px, transparent 1.8px);
}

/* ============================================================
   P148-0816skinCheckin: 皮肤收藏 + 颈椎活动打卡 UI
   阶段1: 只做按钮 + 弹窗 UI, 不改游戏逻辑
   - 三按钮连排(返回·皮肤·打卡)
   - 皮肤弹窗(皮套/球拍 tab + 网格 + 装备)
   - 打卡卡片(今日进度 + 月度热力图)
   ============================================================ */

/* --- 三按钮连排 --- */
.menu-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.menu-action-row .single-mode-back-btn {
  margin-bottom: 0;
}
.menu-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  font-family: inherit;
  flex: 0 0 auto;
}
.menu-action-btn .action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.menu-action-btn:hover {
  background: rgba(0,0,0,0.6);
  transform: translateY(-1px);
}
.menu-action-btn:active {
  transform: scale(0.96);
}
/* 打卡按钮 — 豆绿渐变强调(与"开始游戏"主按钮同色系, 统一主色调) */
.menu-action-btn-ck {
  background: linear-gradient(135deg, rgba(141,176,158,0.55), rgba(107,154,126,0.4));
  border: 1px solid rgba(107,154,126,0.55);
  color: #fff;
}
.menu-action-btn-ck:hover {
  background: linear-gradient(135deg, rgba(141,176,158,0.75), rgba(107,154,126,0.55));
}
.menu-action-btn-ck.done {
  background: linear-gradient(135deg, rgba(107,154,126,0.8), rgba(107,154,126,0.6));
  border-color: rgba(107,154,126,0.9);
  color: #fff;
}
/* 双人场景(roomScreen)打卡按钮 — 跟随雾霾蓝主题 */
#roomScreen .menu-action-btn-ck {
  background: linear-gradient(135deg, rgba(141,175,208,0.55), rgba(107,158,199,0.4));
  border: 1px solid rgba(107,158,199,0.55);
}
#roomScreen .menu-action-btn-ck:hover {
  background: linear-gradient(135deg, rgba(141,175,208,0.75), rgba(107,158,199,0.55));
}
#roomScreen .menu-action-btn-ck.done {
  background: linear-gradient(135deg, rgba(107,158,199,0.8), rgba(107,158,199,0.6));
  border-color: rgba(107,158,199,0.9);
}

/* --- 皮肤弹窗 --- */
.skin-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.skin-modal.show {
  display: flex;
}
.skin-modal-card {
  /* P148-0816audit: 白底 → 奶油米白底(与打卡卡片统一视觉语言) */
  background: linear-gradient(160deg, #fbf6ee 0%, #f7f2ea 100%);
  border-radius: 30px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 24px 20px;
  box-shadow: 0 24px 60px rgba(61, 90, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  animation: skinModalIn 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes skinModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.skin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.skin-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #2d2d2d;
}
.skin-modal-x {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ece5d8;
  border: none;
  color: #6b6457;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.skin-modal-x:hover {
  background: #e2dacb;
}
.skin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.skin-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #e2dccf;
  background: #f4efe6;
  color: #9a9486;
  transition: all 0.2s ease;
  font-family: inherit;
}
.skin-tab.on {
  /* P148-0816audit: 金色高亮 → 豆绿高亮(统一主色调) */
  background: linear-gradient(135deg, rgba(107,154,126,0.16), rgba(107,154,126,0.06));
  border-color: #6b9a7e;
  color: #3d5a4a;
}
.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.skin-item {
  background: #f4efe6;
  border: 1.5px solid #e7e1d4;
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.skin-item:hover {
  border-color: #c8d0c8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(61, 90, 74, 0.10);
}
.skin-item.on {
  /* P148-0816audit: 金色选中 → 豆绿选中 */
  border-color: #6b9a7e;
  box-shadow: 0 0 0 1px #6b9a7e, 0 6px 16px rgba(107, 154, 126, 0.22);
}
.skin-thumb {
  height: 64px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: linear-gradient(135deg, #e8f0eb, #d4e0da);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #8a8a8a;
  font-weight: 600;
}
.skin-thumb.paddle {
  background: linear-gradient(135deg, #e6eef5, #d4dfeb);
}
.skin-thumb.locked {
  background: repeating-linear-gradient(45deg, #f0f0f0 0 8px, #e8e8e8 8px 16px);
}
/* P148-0817panSkin: 图片素材皮肤(平底锅)缩略图 — 等比缩放居中于 64px 格内 */
.skin-thumb img {
  max-width: 92%;
  max-height: 58px;
  object-fit: contain;
  border-radius: 8px;
}
.skin-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #2d2d2d;
  margin-bottom: 2px;
}
.skin-price {
  font-size: 11px;
  font-weight: 600;
}
.skin-price.own {
  color: #6b9a7e;
}
.skin-price.buy {
  /* P148-0816audit: 金色价格 → 豆绿价格(统一主色调) */
  color: #3d5a4a;
}
.skin-price.default {
  color: #a99f8f;
}
.skin-check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6b9a7e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(107,154,126,0.3);
}
.skin-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.skin-modal-btn {
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  font-family: inherit;
}
.skin-modal-btn-secondary {
  background: #ece5d8;
  color: #6b6457;
}
.skin-modal-btn-secondary:hover {
  background: #e2dacb;
}
.skin-modal-btn-primary {
  /* P148-0816audit: 金色主按钮 → 豆绿主按钮(与"开始游戏"同质感: 分层阴影+内高光) */
  background: linear-gradient(135deg, #8db09e, #6b9a7e);
  color: #fff;
  box-shadow: 0 6px 16px rgba(107, 154, 126, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25);
}
.skin-modal-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(107, 154, 126, 0.45), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.3);
  background: linear-gradient(135deg, #9abeab, #79a88c);
}
.skin-modal-btn-primary:active {
  transform: scale(0.97);
}
.skin-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.skin-modal-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #a99f8f;
  text-align: center;
  min-height: 16px;
}

/* ============================================================
   P148-0817ckCandy: 打卡卡片 — 糖果薄荷绿3D卡通风(参考UI/打卡日历弹窗.html)
   白卡+顶部绿渐变条 · 粉色3D关闭钮 · 左绿右蓝双进度糖果卡(白高光粗进度条)
   月度热力日历(黄框today脉冲/最深绿✓角标) · 连续打卡🔥胶囊
   token 沿用旧 --cream-* 变量名(theme-duo 覆盖层依赖), 值换薄荷绿系
   ============================================================ */
.checkin-pop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(46, 125, 50, 0.28);
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.checkin-pop.show {
  display: flex;
}
.checkin-card {
  /* 薄荷糖绿 token (参考: primary #66BB6A 系) */
  --cream-bg: #ffffff;
  --cream-ink: #2E7D32;
  --cream-muted: #A5D6A7;
  --cream-green: #66BB6A;
  --cream-green-deep: #2E7D32;
  --cream-pale: #E8F5E9;
  --cream-soft: #C8E6C9;
  --cream-lighter: #A5D6A7;
  --candy-yellow: #FFD54F;
  /* 雾霾蓝(转头卡/双人变体) */
  --duo-blue: #8DAFD0;
  --duo-blue-dark: #6B9EC7;
  --duo-blue-deeper: #4A6B85;
  --duo-blue-pale: #EAF0F6;
  --duo-blue-light: #C5D9EA;
  --ck-font: var(--cartoon-font-display, "ZCOOL KuaiLe", "Comic Sans MS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  background: #ffffff;
  border-radius: 32px;
  max-width: 430px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 20px 14px;
  position: relative;
  box-shadow:
    0 20px 60px rgba(76, 175, 80, 0.25),
    0 8px 20px rgba(76, 175, 80, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  animation: ckPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.checkin-card::-webkit-scrollbar { display: none; }
/* 顶部糖果渐变条 */
.checkin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #81C784, #66BB6A, #81C784);
  z-index: 10;
}
@keyframes ckPopIn {
  0% { opacity: 0; transform: scale(0.85) translateY(24px); }
  60% { transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* 出场动画: 遮罩淡出 + 卡片缩小下沉(与入场镜像) */
.checkin-pop.closing {
  animation: ckFadeOut 0.3s ease both;
}
.checkin-pop.closing .checkin-card {
  animation: ckPopOut 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes ckFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes ckPopOut {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.86) translateY(28px); }
}
/* 分层错峰入场 */
.ck-head        { animation: ckPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.06s both; }
.ck-date-row    { animation: ckPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.12s both; }
.ck-duo         { animation: ckPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.20s both; }
.ck-calendar    { animation: ckPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.28s both; }
.ck-footer      { animation: ckPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.36s both; }
@keyframes ckWiggle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes ckSparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
@keyframes ckPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.65); }
  50% { box-shadow: 0 0 0 8px rgba(255, 213, 79, 0); }
}

/* ---- 头部：标题(中) + 粉色3D关闭(右) ---- */
.ck-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ck-head-slot { width: 36px; flex-shrink: 0; }
.ck-head-title {
  flex: 1;
  text-align: center;
}
.ck-title {
  font-family: var(--ck-font);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #388E3C 0%, #66BB6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(76, 175, 80, 0.25));
}
.ck-subtitle {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #66BB6A;
}
.ck-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFEBEE 0%, #FFCDD2 100%);
  border: 2px solid #EF9A9A;
  color: #E57373;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 0 #E57373, 0 4px 8px rgba(239, 83, 80, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--ck-font);
}
.ck-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #E57373, 0 6px 12px rgba(239, 83, 80, 0.25);
}
.ck-close:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #E57373, 0 2px 4px rgba(239, 83, 80, 0.2);
}

/* ---- 日期徽章 ---- */
.ck-date-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.ck-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-pale);
  border: 1.5px solid var(--cream-soft);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cream-green-deep);
}

/* ---- 今日双进度：糖果3D卡(左绿右蓝) ---- */
.ck-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.ck-card {
  background: #ffffff;
  border: 2px solid var(--cream-soft);
  border-radius: 20px;
  padding: 12px 12px 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ck-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.15);
}
.ck-card-blue {
  border-color: var(--duo-blue-light);
  box-shadow: 0 4px 12px rgba(141, 175, 208, 0.12);
}
.ck-card-blue:hover {
  box-shadow: 0 6px 16px rgba(141, 175, 208, 0.18);
}
.ck-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ck-card-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: linear-gradient(135deg, var(--cream-pale) 0%, var(--cream-soft) 100%);
}
.ck-card-blue .ck-card-ico {
  background: linear-gradient(135deg, var(--duo-blue-pale) 0%, var(--duo-blue-light) 100%);
}
.ck-card-name {
  font-family: var(--ck-font);
  font-size: 14px;
  font-weight: 700;
  color: #388E3C;
}
.ck-card-blue .ck-card-name {
  color: var(--duo-blue-deeper);
}
.ck-card-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-bottom: 8px;
}
.ck-card-num span {
  font-family: var(--ck-font);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #2E7D32 0%, #66BB6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(76, 175, 80, 0.2));
}
.ck-card-blue .ck-card-num span {
  background: linear-gradient(180deg, var(--duo-blue-deeper) 0%, var(--duo-blue-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(107, 158, 199, 0.25));
}
.ck-card-num i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--cream-green);
}
.ck-card-blue .ck-card-num i {
  color: var(--duo-blue-dark);
}
/* 糖果进度条：粗条+边框+白高光 */
.ck-bar {
  height: 14px;
  background: var(--cream-pale);
  border: 2px solid var(--cream-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ck-card-blue .ck-bar {
  background: var(--duo-blue-pale);
  border-color: var(--duo-blue-light);
}
.ck-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(90deg, #81C784, #66BB6A);
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ck-bar i::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px; right: 5px;
  height: 4px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}
.ck-card-blue .ck-bar i {
  background: linear-gradient(90deg, var(--duo-blue), var(--duo-blue-dark));
}
.ck-bar i.done {
  background: linear-gradient(90deg, #4CAF50, #388E3C);
}
.ck-card-blue .ck-bar i.done {
  background: linear-gradient(90deg, var(--duo-blue-dark), var(--duo-blue-deeper));
}
.ck-card-goal {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cream-green);
}
.ck-card-blue .ck-card-goal {
  color: var(--duo-blue);
}

/* ---- 本月日历：热力图 ---- */
.ck-calendar {
  margin-bottom: 10px;
  padding: 2px 2px 0;
}
.ck-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ck-cal-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ck-font);
  font-size: 17px;
  font-weight: 800;
  color: var(--cream-green-deep);
}
.ck-trophy {
  display: inline-block;
  font-size: 16px;
  animation: ckSparkle 2s ease-in-out infinite;
}
.ck-cal-month {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream-green);
}
.checkin-heat-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.checkin-heat-week span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--cream-green);
}
.checkin-heat {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
/* 日期格子：圆角糖块 */
.checkin-cell {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  position: relative;
  background: #F5F5F5;
  color: #BDBDBD;
  transition: transform 0.15s ease;
}
.checkin-cell:hover {
  transform: scale(1.1);
}
/* 热力等级：薄荷绿由浅到深 */
.checkin-cell.l1 { background: #E8F5E9; color: #4CAF50; }
.checkin-cell.l2 { background: #C8E6C9; color: #2E7D32; }
.checkin-cell.l3 { background: #A5D6A7; color: #ffffff; }
.checkin-cell.l4,
.checkin-cell.done {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
}
/* 达标日 ✓ 角标 */
.checkin-cell.done::after {
  content: '✓';
  position: absolute;
  top: 1px; right: 4px;
  font-size: 9px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* 未来日期：极淡 */
.checkin-cell.future {
  background: #FAFAFA;
  color: #E0E0E0;
}
/* 今天：金黄描边 + 脉冲光圈 */
.checkin-cell.today {
  border: 3px solid #FFD54F;
  font-weight: 800;
  animation: ckPulseGlow 2s ease-in-out infinite;
}

/* ---- 底部：图例 + 连续打卡 + 汇总 ---- */
.ck-footer {
  text-align: center;
}
.ck-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ck-lg {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: inline-block;
}
.ck-lg-0 { background: #F5F5F5; }
.ck-lg-1 { background: #E8F5E9; }
.ck-lg-2 { background: #C8E6C9; }
.ck-lg-3 { background: #A5D6A7; }
.ck-lg-4 { background: linear-gradient(135deg, #66BB6A, #4CAF50); }
.ck-lg-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--cream-green);
}
.ck-lg-done-note {
  margin-left: 8px;
  color: var(--cream-green-deep);
  font-weight: 800;
}
/* 连续打卡胶囊 */
.ck-streak-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.ck-streak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #E8F5E9 0%, rgba(255, 213, 79, 0.3) 100%);
  border: 2px solid #C8E6C9;
}
.ck-streak-label {
  font-size: 14px;
  font-weight: 700;
  color: #388E3C;
}
.ck-streak-num {
  font-family: var(--ck-font);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: #2E7D32;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 2px 4px rgba(76, 175, 80, 0.2));
}
.ck-streak-fire {
  font-size: 20px;
  display: inline-block;
  animation: ckWiggle 1s ease-in-out infinite;
}
.ck-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cream-green);
  margin-bottom: 6px;
}
.ck-summary span {
  font-size: 15px;
  font-weight: 800;
  color: var(--cream-green-deep);
  margin: 0 2px;
  font-variant-numeric: tabular-nums;
}
.checkin-tip {
  font-size: 12px;
  color: var(--cream-green);
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

/* --- 手机端适配 --- */
@media (max-width: 767px) {
  .menu-action-row {
    gap: 6px;
  }
  .menu-action-btn,
  .menu-action-row .single-mode-back-btn {
    padding: 8px 12px;
    font-size: 14px;
  }
  .menu-action-btn .action-icon {
    width: 16px;
    height: 16px;
  }
  .skin-modal-card {
    padding: 22px 16px 16px;
    max-width: 100%;
  }
  .skin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .skin-modal-title {
    font-size: 18px;
  }
  .checkin-pop {
    padding: 12px;
  }
  .checkin-card {
    padding: 12px 14px 12px;
    max-width: 100%;
    /* P148-0818ckFit: 移动端改用 dvh(动态视口, 含隐藏的浏览器底栏)限制高度,
       避免 90vh(大视口) 在有浏览器工具条的手机上超出可视屏幕。vh 作旧浏览器回退。 */
    max-height: 90vh;
    max-height: calc(100dvh - 24px);
    border-radius: 26px;
  }
  .ck-title {
    font-size: 20px;
  }
  .ck-card {
    padding: 10px 8px 9px;
  }
  .ck-card-num span {
    font-size: 24px;
  }
  .ck-card-ico {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .ck-streak-num {
    font-size: 22px;
  }
  .ck-streak {
    padding: 7px 16px;
  }
  .ck-streak-label {
    font-size: 13px;
  }
  .checkin-heat-week span {
    font-size: 11px;
  }
  .checkin-heat {
    gap: 5px;
  }
  .checkin-cell {
    border-radius: 10px;
    font-size: 12px;
  }
  .checkin-cell.today {
    border-width: 2.5px;
  }
}
@media (max-width: 380px) {
  .menu-action-btn,
  .menu-action-row .single-mode-back-btn {
    padding: 8px 8px;
    font-size: 13px;
  }
  .menu-action-btn .action-icon {
    width: 14px;
    height: 14px;
  }
  .checkin-cell {
    border-radius: 10px;
    font-size: 11px;
  }
  .checkin-heat {
    gap: 5px;
  }
}

/* ============================================================
   P148-0816duoTone: 双人场景下皮肤/打卡弹窗 — 强调色跟随雾霾蓝
   保留奶油米白底(品牌中性层), 仅强调色从豆绿切换为雾霾蓝, 呼应双人主题
   JS: openSkinModal/openCheckin 按来源按钮给 modal/pop 加 .theme-duo 类
   ============================================================ */
/* 皮肤弹窗 — 双人蓝色强调 */
.skin-modal.theme-duo .skin-tab.on {
  background: linear-gradient(135deg, rgba(141,175,208,0.16), rgba(141,175,208,0.06));
  border-color: #6b9ec7;
  color: #4a6b85;
}
.skin-modal.theme-duo .skin-item.on {
  border-color: #6b9ec7;
  box-shadow: 0 0 0 1px #6b9ec7, 0 6px 16px rgba(141, 175, 208, 0.22);
}
.skin-modal.theme-duo .skin-item:hover {
  border-color: #a3c5e0;
  box-shadow: 0 6px 16px rgba(74, 107, 133, 0.12);
}
.skin-modal.theme-duo .skin-thumb {
  background: linear-gradient(135deg, #e6eef5, #d4dfeb);
}
.skin-modal.theme-duo .skin-price.own { color: #6b9ec7; }
.skin-modal.theme-duo .skin-price.buy { color: #4a6b85; }
.skin-modal.theme-duo .skin-check {
  background: #6b9ec7;
  box-shadow: 0 0 0 2px rgba(107, 158, 199, 0.3);
}
.skin-modal.theme-duo .skin-modal-btn-primary {
  background: linear-gradient(135deg, #8dafd0, #6b9ec7);
  color: #fff;
  box-shadow: 0 6px 16px rgba(141, 175, 208, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25);
}
.skin-modal.theme-duo .skin-modal-btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #a3c5e0, #7aa8cc);
  box-shadow: 0 8px 22px rgba(141, 175, 208, 0.45), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* 打卡卡片 — 双人蓝色强调(糖果风覆盖: 强调色薄荷绿→雾霾蓝) */
.checkin-pop.theme-duo .checkin-card {
  --cream-ink: #4A6B85;
  --cream-green: #6B9EC7;
  --cream-green-deep: #4A6B85;
  --cream-pale: #EAF0F6;
  --cream-soft: #C5D9EA;
}
.checkin-pop.theme-duo .checkin-card::before {
  background: linear-gradient(90deg, #8DAFD0, #6B9EC7, #8DAFD0);
}
.checkin-pop.theme-duo .ck-title {
  background: linear-gradient(180deg, #5A8CB8 0%, #8DAFD0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.checkin-pop.theme-duo .ck-date-badge { color: var(--cream-green-deep); }
/* 左卡(时长)跟随变蓝, 与右卡统一 */
.checkin-pop.theme-duo .ck-card-green { border-color: var(--duo-blue-light); box-shadow: 0 4px 12px rgba(141, 175, 208, 0.12); }
.checkin-pop.theme-duo .ck-card-green .ck-card-ico { background: linear-gradient(135deg, var(--duo-blue-pale), var(--duo-blue-light)); }
.checkin-pop.theme-duo .ck-card-green .ck-card-name { color: var(--duo-blue-deeper); }
.checkin-pop.theme-duo .ck-card-green .ck-card-num span {
  background: linear-gradient(180deg, var(--duo-blue-deeper), var(--duo-blue-dark));
  -webkit-background-clip: text;
  background-clip: text;
}
.checkin-pop.theme-duo .ck-card-green .ck-card-num i { color: var(--duo-blue-dark); }
.checkin-pop.theme-duo .ck-card-green .ck-bar { background: var(--duo-blue-pale); border-color: var(--duo-blue-light); }
.checkin-pop.theme-duo .ck-card-green .ck-bar i { background: linear-gradient(90deg, var(--duo-blue), var(--duo-blue-dark)); }
.checkin-pop.theme-duo .ck-card-green .ck-bar i.done { background: linear-gradient(90deg, var(--duo-blue-dark), var(--duo-blue-deeper)); }
.checkin-pop.theme-duo .ck-card-green .ck-card-goal { color: var(--duo-blue); }
/* 日历热力: 薄荷绿→雾霾蓝系 */
.checkin-pop.theme-duo .checkin-cell.l1 { background: #EAF0F6; color: #5A82A8; }
.checkin-pop.theme-duo .checkin-cell.l2 { background: #C5D9EA; color: #3D6283; }
.checkin-pop.theme-duo .checkin-cell.l3 { background: #8DAFD0; color: #fff; }
.checkin-pop.theme-duo .checkin-cell.l4,
.checkin-pop.theme-duo .checkin-cell.done {
  background: linear-gradient(135deg, #8DAFD0 0%, #6B9EC7 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(107, 158, 199, 0.3);
}
.checkin-pop.theme-duo .ck-lg-1 { background: #EAF0F6; }
.checkin-pop.theme-duo .ck-lg-2 { background: #C5D9EA; }
.checkin-pop.theme-duo .ck-lg-3 { background: #8DAFD0; }
.checkin-pop.theme-duo .ck-lg-4 { background: linear-gradient(135deg, #8DAFD0, #6B9EC7); }
/* 连续打卡胶囊变蓝调 */
.checkin-pop.theme-duo .ck-streak {
  background: linear-gradient(90deg, #EAF0F6 0%, rgba(197, 217, 234, 0.55) 100%);
  border-color: var(--duo-blue-light);
}
.checkin-pop.theme-duo .ck-streak-label { color: #4A6B85; }
.checkin-pop.theme-duo .ck-streak-num { color: #3D6283; filter: drop-shadow(0 2px 4px rgba(107, 158, 199, 0.25)); }

/* ============================================================
   P148-0816fontAudit: 无障碍 — 键盘焦点可见 + 尊重系统减弱动态偏好
   行业规范: 所有可交互元素须有可见焦点环; prefers-reduced-motion 时关闭非必要动画
   ============================================================ */
:focus-visible {
  outline: 3px solid rgba(107, 158, 199, 0.65);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .game-title, .game-desc { opacity: 1 !important; }
  /* P148-0816bgBC: 背景装饰元素在减弱动态偏好下完全静态化, 保持可见但不运动
     P148-0816bgRich: 新增结构层/亮粒子一并纳入(结构层本静止, 亮粒子仅上浮) */
  .organic-shape, .motif-arc, .motif-ring, .motif-dot, .structure-layer, .ambient-particles span { animation: none !important; }
}

/* ============================================================
   P148-0817hrCandy: 健康报告结算层 — 休闲游戏风（参考 UI/健康报告（休闲游戏风）.html）
   覆盖旧 health-report 结算样式。糖果配色 + Q弹入场 + 彩纸 + 彩带横幅。
   置于文件末尾以保证覆盖前面同级别旧规则。
   ============================================================ */
.health-report {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  background: linear-gradient(160deg, #8B5CF6 0%, #A855F7 25%, #EC4899 60%, #F97316 100%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out, visibility 0s linear 0.4s;
  overflow: hidden;
}
.health-report.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease-out, visibility 0s;
}
/* 背景圆点图案 */
.health-report::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.15) 3px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 30px 30px, 50px 50px;
  background-position: 0 0, 15px 15px;
  pointer-events: none;
  z-index: 1;
}
/* 光晕效果 */
.health-report::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 61, 0.3) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  pointer-events: none;
  z-index: 1;
  animation: hrGlowPulse 4s ease-in-out infinite;
}
@keyframes hrGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 飘浮装饰 */
.floating-deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  font-size: 24px;
  animation: hrFloatDeco 4s ease-in-out infinite;
}
.floating-deco-1 { top: 80px; left: 20px; animation-delay: 0s; font-size: 28px; }
.floating-deco-2 { top: 150px; right: 30px; animation-delay: 1s; font-size: 22px; }
.floating-deco-3 { top: 250px; left: 15px; animation-delay: 0.5s; font-size: 20px; }
.floating-deco-4 { bottom: 200px; right: 20px; animation-delay: 1.5s; font-size: 26px; }
.floating-deco-5 { bottom: 300px; left: 30px; animation-delay: 2s; font-size: 18px; }
.floating-deco-6 { bottom: 120px; right: 40px; animation-delay: 0.8s; font-size: 24px; }
@keyframes hrFloatDeco {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.8; }
  50% { transform: translateY(-15px) rotate(10deg) scale(1.1); opacity: 1; }
}

/* 彩带/彩纸粒子 */
.confetti-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  top: -20px;
  border-radius: 2px;
  animation: hrConfettiFall linear infinite;
}
@keyframes hrConfettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(900px) rotate(720deg); opacity: 0.3; }
}

/* 健康报告卡片 - 糖果风厚边框 */
.health-report-card {
  width: 100%;
  max-width: 340px;
  background: #FFFBEF;
  border-radius: 28px;
  border: 4px solid #5CD8A3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 20px 40px rgba(0, 0, 0, 0.18);
  padding: 0;
  position: relative;
  z-index: 10;
  overflow: visible;
  transform: none;
  animation: none;
}
.health-report-card.pop {
  animation: hrCardBounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes hrCardBounceIn {
  0% { transform: scale(0.3) translateY(60px); opacity: 0; }
  50% { transform: scale(1.08) translateY(-10px); }
  70% { transform: scale(0.96) translateY(5px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 卡片顶部彩带横幅 */
.card-banner {
  position: absolute;
  top: -34px; /* 原-26px，再上移8px，满足用户"运动完成UI往上位移" */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FFD93D 0%, #FFB800 100%);
  padding: 8px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: #7C4A00;
  letter-spacing: 2px;
  box-shadow: 0 4px 0 #E6A000, 0 6px 12px rgba(255, 184, 0, 0.4);
  z-index: 20;
  white-space: nowrap;
  animation: hrBannerBounce 2s ease-in-out infinite;
}
@keyframes hrBannerBounce {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}

/* 角落装饰星星 */
.card-corner-star {
  position: absolute;
  font-size: 28px;
  z-index: 15;
  animation: hrStarTwinkle 2s ease-in-out infinite;
}
.card-corner-star.tl { top: -8px; left: -8px; animation-delay: 0s; }
.card-corner-star.tr { top: -12px; right: -6px; animation-delay: 0.5s; font-size: 24px; }
.card-corner-star.bl { bottom: -10px; left: 10px; animation-delay: 1s; font-size: 20px; }
.card-corner-star.br { bottom: -6px; right: -10px; animation-delay: 1.5s; }
@keyframes hrStarTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.3) rotate(20deg); opacity: 0.7; }
}

.card-content {
  padding: 18px 22px 14px;
}

/* 断连警告 */
.health-report-disconnect {
  display: none;
  background: linear-gradient(135deg, #FFF0F0 0%, #FFE0E0 100%);
  border: 3px solid #FF8C6B;
  border-radius: 18px;
  padding: 10px 16px;
  margin: 0 16px 16px;
  font-size: 13px;
  color: #C53030;
  text-align: center;
  font-weight: 700;
  position: relative;
  top: 18px;
}
.health-report-disconnect.show {
  display: block;
  animation: hrFadeInDown 0.4s ease both;
}
@keyframes hrFadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 标题 - 3D糖果文字 */
.health-report-title {
  font-size: 38px;
  font-weight: 800;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: 4px;
  margin-bottom: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.2;
  text-shadow:
    -2px -2px 0 #FF6B4A, 2px -2px 0 #FF6B4A,
    -2px 2px 0 #FF6B4A, 2px 2px 0 #FF6B4A,
    0 4px 0 #E85530, 0 6px 8px rgba(0, 0, 0, 0.3);
  animation: hrTitleBounce 1.5s ease-in-out infinite;
}
.health-report-title .deco-left,
.health-report-title .deco-right {
  font-size: 28px;
  animation: hrTitleDecoFloat 1.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.health-report-title .deco-right { animation-delay: 0.3s; }
@keyframes hrTitleBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}
@keyframes hrTitleDecoFloat {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-8px) rotate(10deg); }
}

.health-report-subtitle {
  font-size: 18px;
  text-align: center;
  color: #5CD8A3;
  margin-bottom: 12px;
  letter-spacing: 3px;
  font-weight: 700;
  opacity: 0;
  animation: hrSubtitleFadeIn 0.6s ease 0.4s both;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.health-report-subtitle::before,
.health-report-subtitle::after {
  content: '';
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #B8F08E, transparent);
  border-radius: 2px;
}
@keyframes hrSubtitleFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 进度行区域 */
.health-report-rows {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
/* 所有行都是 flex 子项，由 .health-report-rows 的 flex-wrap 控制：总转头满宽，左右转头各占一半并排 */
.health-report-row {
  width: 100%;
  box-sizing: border-box;
  animation: hrRowBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  opacity: 1;
}
.health-report-row:nth-child(1) { animation-delay: 0.5s; }
.health-report-row:nth-child(2) { animation-delay: 0.65s; }
.health-report-row:nth-child(3) { animation-delay: 0.8s; }
@keyframes hrRowBounceIn {
  0% { transform: scale(0.8) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 总转头 - 最大成就卡 */
.health-report-row:first-child {
  width: 100%;
  background: linear-gradient(135deg, #FFF8E7 0%, #FFE9A8 100%);
  border: 3px solid #FFD93D;
  border-radius: 22px;
  padding: 10px 16px;
  position: relative;
  box-shadow: 0 4px 16px rgba(255, 217, 61, 0.3);
}
.health-report-row:first-child::before {
  content: '🏆';
  position: absolute;
  top: -14px;
  right: 16px;
  font-size: 28px;
  animation: hrTrophyBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
@keyframes hrTrophyBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
}
/* 左转头 - 左卡片 */
.health-report-row:nth-child(2) {
  width: calc(50% - 5px);
  background: linear-gradient(135deg, #F0FDF4 0%, #D1FAE5 100%);
  border: 3px solid #B8F08E;
  border-radius: 18px;
  padding: 8px 12px;
  position: relative;
}
/* 右转头 - 右卡片 */
.health-report-row:nth-child(3) {
  width: calc(50% - 5px);
  background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
  border: 3px solid #FBCFE8;
  border-radius: 18px;
  padding: 8px 12px;
  position: relative;
}

.health-report-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 2px;
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
}
.health-report-row:first-child .health-report-label {
  font-size: 15px;
  color: #92400E;
  margin-bottom: 4px;
}
.health-report-label .label-icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.health-report-row:first-child .health-report-label .label-icon { font-size: 20px; }

.health-report-value {
  font-weight: 800;
  color: #2BC48A;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.health-report-row:first-child .health-report-value {
  font-size: 36px;
  color: #D97706;
  margin-bottom: 6px;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}
.health-report-row:nth-child(2) .health-report-value,
.health-report-row:nth-child(3) .health-report-value { font-size: 26px; }
.health-report-row:nth-child(3) .health-report-value { color: #DB2777; }
.health-report-value .value-num { line-height: 1; }
.health-report-value .value-unit {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
}
.health-report-row:first-child .health-report-value .value-unit {
  font-size: 14px;
  color: #B45309;
}

/* 进度条 */
.health-report-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  position: relative;
  overflow: visible;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}
.health-report-row:first-child .health-report-bar { height: 14px; }
.health-report-bar-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: #fff;
  z-index: 3;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.health-report-bar-marker::before {
  content: '🚩';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  animation: hrFlagWave 1.5s ease-in-out infinite;
}
@keyframes hrFlagWave {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
  50% { transform: translateX(-50%) rotate(5deg); }
}
.health-report-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #B8F08E, #5CD8A3, #2BC48A);
  position: relative;
  width: 0%;
  transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.health-report-row:first-child .health-report-bar-fill {
  background: linear-gradient(90deg, #FFE98A, #FFD93D, #FFB800);
}
.health-report-row:nth-child(3) .health-report-bar-fill {
  background: linear-gradient(90deg, #FBCFE8, #F9A8D4, #EC4899);
}
.health-report-bar-fill::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  right: 6px;
  height: 5px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
}
/* 未达标状态 */
.health-report-row.not-passed .health-report-bar-fill { background: linear-gradient(90deg, #E5E7EB, #9CA3AF); }
.health-report-row.not-passed .health-report-value { color: #9CA3AF; }
.health-report-row.not-passed { filter: grayscale(0.3); opacity: 0.85; }
/* 优秀状态闪光 */
.health-report-row.excellent .health-report-bar-fill { animation: hrExcellentGlow 2s ease-in-out infinite; }
@keyframes hrExcellentGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* 奖励区域 - 皮肤碎片 */
.reward-section {
  margin-bottom: 10px;
  animation: hrRewardShake 0.6s ease 1.2s both;
}
.reward-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #92400E;
  margin-bottom: 6px;
  letter-spacing: 1px;
  font-weight: 700;
}
.reward-label-icon {
  font-size: 16px;
  animation: hrGiftWiggle 1.5s ease-in-out infinite;
}
@keyframes hrGiftWiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes hrRewardShake {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.skin-fragment-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 16px;
  border: 3px solid #F59E0B;
  position: relative;
  box-shadow: 0 4px 0 #D97706, 0 8px 16px rgba(245, 158, 11, 0.3);
}
.skin-fragment-icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFD93D;
  border: 3px solid #2D2D2D;
  border-radius: 14px;
  box-shadow: 0 4px 0 #2D2D2D;
  animation: hrFragmentFloat 2s ease-in-out infinite;
}
.skin-fragment-icon-svg {
  width: 30px;
  height: 30px;
  color: #2D2D2D;
  transform: translate(2.5px, 1px);
}
@keyframes hrFragmentFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.skin-fragment-info { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.skin-fragment-name {
  font-size: 14px;
  color: #78350F;
  letter-spacing: 1px;
  font-weight: 700;
}
.skin-fragment-amount { display: flex; align-items: baseline; gap: 2px; }
.amount-plus { font-size: 18px; font-weight: 900; color: #DC2626; }
.amount-num {
  font-size: 26px;
  font-weight: 900;
  color: #DC2626;
  line-height: 1;
  text-shadow: 2px 2px 0 #FDE68A;
}
.skin-fragment-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid #fff;
  letter-spacing: 1px;
  animation: hrBadgePulse 1s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
@keyframes hrBadgePulse {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

/* 表扬鼓励区 */
.health-report-praise {
  background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D0 100%);
  border-radius: 18px;
  padding: 8px 14px;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  border: 3px dashed #5CD8A3;
  opacity: 0;
  animation: hrPraisePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}
.health-report-praise .praise-text {
  font-size: 15px;
  color: #1F7A5C;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.4;
  font-weight: 700;
}
.health-report-praise .praise-emoji {
  font-size: 20px;
  animation: hrPraiseEmojiBounce 1.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
@keyframes hrPraiseEmojiBounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-6px) rotate(8deg); }
}
@keyframes hrPraisePop {
  0% { transform: scale(0.3) rotate(-5deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.health-report-praise.not-passed {
  background: linear-gradient(135deg, #EFF6FF 0%, #BFDBFE 100%);
  border-color: #60A5FA;
}
.health-report-praise.not-passed .praise-text { color: #1D4ED8; }
.health-report-praise.excellent {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #F59E0B;
}
.health-report-praise.excellent .praise-text { color: #92400E; }

/* 按钮区 - 3D立体糖果按钮 */
.health-report-actions {
  display: flex;
  justify-content: center;
  animation: hrActionsSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both;
}
@keyframes hrActionsSlideUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.health-report-btn {
  font-size: 20px;
  letter-spacing: 3px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 11px 52px;
  position: relative;
  overflow: hidden;
  transition: all 0.1s ease;
  user-select: none;
  font-weight: 700;
  width: auto;
  height: auto;
}
.health-report-btn-primary {
  background: linear-gradient(180deg, #8BEDC1 0%, #5CD8A3 40%, #2BC48A 100%);
  color: #fff;
  box-shadow:
    0 7px 0 #1FA872,
    0 8px 20px rgba(43, 196, 138, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: hrBtnPulse 2s ease-in-out infinite;
}
@keyframes hrBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.health-report-btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.health-report-btn-primary:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #1FA872, 0 3px 8px rgba(43, 196, 138, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  animation: none;
}
/* hover: 覆盖旧版块(上方)的 :hover 平移+小投影, 避免按钮缩小/投影被调包。仅保留干净上浮 + 维持 3D 立体投影 */
.health-report-btn-primary:hover {
  transform: translateY(-2px);
  animation: none;
  box-shadow:
    0 9px 0 #1FA872,
    0 10px 24px rgba(43, 196, 138, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
/* Ready按钮（多人游戏） */
.health-report-btn-ready {
  background: linear-gradient(180deg, #FFE98A 0%, #FFD93D 40%, #FFB800 100%);
  color: #7C4A00;
  box-shadow: 0 7px 0 #E6A000, 0 8px 20px rgba(255, 184, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}
.health-report-btn-ready::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
   P148-0817backIcon: 游戏内返回按钮统一换成单人模式UI同款
   白色圆形 + 3px 黑描边 + 黑色左箭头 SVG, 规格逐项对齐 single-ref.css .icon-btn:
     桌面 64x64/svg32/边框3px/阴影 0 4px 0 #2D2D2D; 手机(≤767) 46x46/svg22(边框阴影不变)。
   实现方式: ID 选择器 + !important 追加在文件末尾 — 特异性(1,1,0)高于全部 ~20 处
   `.top-bar-left > button` 文字按钮旧规则(类选择器组合), 一处统一覆盖:
     桌面乒乓球对称规则(min-width:112px)/双人摸鱼四按钮等宽(flex:1 1 0)/
     手机各游戏统一文字按钮规则(padding/border:none) 等全部不再作用于返回按钮。
   皮肤外观(background/border-radius)另由 cartoon-cute.css `.top-bar #btnBack` 同款值提供
   (该层加载在后且同 !important, 曾覆盖本层 — 已改为同款值, 两层一致)。
   其余按钮(模型/游戏/画鱼/排行/管理)不受影响, 维持原有布局。
   二次确认: JS 替换 innerHTML 为'再按'文字, 固定宽高下小字居中不跳动;
   警示底色 #D8A6A6 由 JS 内联 background 提供(高于本规则)。
   ============================================================ */
.top-bar #btnBack {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  color: #2D2D2D !important;
  border: 3px solid #2D2D2D !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 0 #2D2D2D !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  gap: 0 !important;
  overflow: hidden !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
}
.top-bar #btnBack svg { width: 32px !important; height: 32px !important; }
.top-bar #btnBack:active {
  transform: translateY(2px) scale(0.95) !important;
  box-shadow: 0 2px 0 #2D2D2D !important;
}
@media (max-width: 767px) {
  .top-bar #btnBack {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    font-size: 11px !important;
  }
  .top-bar #btnBack svg { width: 30px !important; height: 30px !important; }
}
.health-report-btn-ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 #E6A000, 0 10px 24px rgba(255, 184, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.health-report-btn-ready:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #E6A000, 0 3px 8px rgba(255, 184, 0, 0.3);
}

/* 多人游戏就绪提示 */
.health-report-peer-ready {
  display: none;
  text-align: center;
  font-size: 13px;
  color: #7C4A00;
  margin-top: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.health-report-peer-ready.show {
  display: block;
  animation: hrFadeInUp 0.4s ease both;
}
@keyframes hrFadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 出场动画：结算UI关闭时卡片Q弹缩小 + 背景同步淡出，避免整层变红渐变闪屏 */
.health-report.hide { opacity: 0; }
.health-report-card.shrink {
  animation: hrCardShrinkOut 0.32s cubic-bezier(0.5, -0.1, 0.6, 0.2) forwards;
}
@keyframes hrCardShrinkOut {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(0.72); opacity: 0.8; }
  100% { transform: scale(0.42); opacity: 0; }
}

/* 手机端缩放微调 */
@media (max-width: 480px) {
  /* P148-0817hrMobileFit: 结算层适配手机高度 —
     根因: 结算层用 position:absolute 相对 game-wrap, 卡片过高时超出游戏区域,
     页面随之可上下拖动; 再点返回后布局比例错乱无法复原。
     修复: 结算层改 position:fixed 全屏覆盖视口, 永远锁在视口内不可被拖出,
     卡片限制最大高度 + 内容区内滚动, 任何屏幕高度下都不溢出。 */
  .health-report {
    position: fixed;
    inset: 0;
    padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
    align-items: flex-start;  /* 避免居中时超高卡片顶部被裁不可达 */
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .health-report-card {
    margin: auto;             /* 配合 flex 居中, overflow 滚动时可达顶部 */
    max-width: 300px;
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .card-content {
    padding: 14px 14px 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 标题: 缩小到单行显示, 避免"本局结束"换行成两行 */
  .health-report-title {
    font-size: 24px;
    letter-spacing: 2px;
    gap: 6px;
    margin-bottom: 2px;
  }
  .health-report-title .deco-left,
  .health-report-title .deco-right { font-size: 20px; }

  .health-report-subtitle {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    gap: 8px;
  }
  .health-report-subtitle::before,
  .health-report-subtitle::after { width: 20px; }

  /* 进度行区域 */
  .health-report-rows { gap: 8px; margin-bottom: 8px; }
  .health-report-row:first-child { padding: 8px 12px; }
  .health-report-row:nth-child(2),
  .health-report-row:nth-child(3) { padding: 6px 10px; }
  .health-report-row:first-child .health-report-value { font-size: 28px; }
  .health-report-row:nth-child(2) .health-report-value,
  .health-report-row:nth-child(3) .health-report-value { font-size: 20px; }
  .health-report-row:first-child .health-report-label { font-size: 13px; }
  .health-report-label { font-size: 12px; }
  .health-report-label .label-icon { font-size: 15px; }
  .health-report-row:first-child .health-report-label .label-icon { font-size: 17px; }
  .health-report-bar { height: 10px; }
  .health-report-row:first-child .health-report-bar { height: 12px; }

  /* 奖励区 */
  .reward-section { margin-bottom: 8px; }
  .reward-label { font-size: 12px; margin-bottom: 4px; }
  .skin-fragment-reward { padding: 6px 10px; gap: 8px; }
  .skin-fragment-icon-box { width: 36px; height: 36px; border-radius: 10px; }
  .skin-fragment-icon-svg { width: 24px; height: 24px; }
  .skin-fragment-name { font-size: 12px; }
  .amount-plus { font-size: 16px; }
  .amount-num { font-size: 22px; }

  /* 表扬区 */
  .health-report-praise { padding: 6px 10px; margin-bottom: 8px; }
  .health-report-praise .praise-text { font-size: 13px; }
  .health-report-praise .praise-emoji { font-size: 16px; }

  /* 按钮 */
  .health-report-btn { padding: 9px 32px; font-size: 16px; letter-spacing: 2px; }

  /* 顶部横幅更紧凑 */
  .card-banner { font-size: 12px; padding: 6px 22px; top: -30px; letter-spacing: 1px; }
}

/* ============================================================
   P148-0817layoutRaise: 摸鱼/表情包/模仿/动捕 四游戏整体布局上移
   背景(P148-0817backIcon 后): 返回/模型按钮改大(桌面64px)后, top-bar 增高,
   body 垂直居中把游戏区(stage)整体向下压。此规则将这四游戏 #gameScreen
   桌面端再上移, 补偿按钮增高带来的下移, 恢复到改前更靠上的位置。
   增量统一 -16px margin-top(实测 stage top 约 1:1 上移):
     - fish(摸鱼):          原桌面 -30px(继承 base)  → -46px
     - emoji/imitate/mocap: 原桌面 -10px(各自规则)   → -26px
   仅桌面(min-width:1024px); 手机端为 position:sticky 贴顶布局, 负 margin 会
   把顶部按钮推出屏幕, 故不改动。用 ID(#gameScreen) 提高特异性覆盖旧 margin。 */
@media (min-width: 1024px) {
  body[data-game="fish"] #gameScreen {
    margin-top: -46px !important;
  }
  body[data-game="emoji"] #gameScreen,
  body[data-game="imitate"]:not(.duo-emoji-active) #gameScreen,
  body[data-game="mocap"] #gameScreen {
    margin-top: -26px !important;
  }
}

/* ============================================================
   P148-0817switchBtn: 双人「游戏」按钮换为参考页「游戏内HUD功能按钮」简约统一版
   参考: UI/游戏按钮.html — 圆形白底 + 3px 黑描边 + 底部黑色硬阴影 + Q弹按压,
   图标 🎮 + 右下角小三角(▾); 下拉菜单改白卡 3px 黑描边 + 硬阴影。
   用 #btnSwitchGame 提升特异性 + !important, 压过各 body.duo-*.switch-game-btn
   (padding/min-width/border:none/radius 16px) 的历史文字按钮覆盖规则。
   ============================================================ */
#btnSwitchGame.switch-game-btn {
  /* P148-0817switchBtnSz: 与游戏内「返回」#btnBack 等大 — 桌面/平板 64px, 移动端 46px(见 @media 覆盖),
     修复参考页按钮(52px)比周围返回按钮(64px)小、且桌面/移动大小不一致的反馈 */
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 3px solid #2D2D2D !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 0 #2D2D2D !important;
  color: #2D2D2D !important;
  font-size: 28px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  position: relative !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
}
#btnSwitchGame.switch-game-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 0 #2D2D2D !important;
}
#btnSwitchGame.switch-game-btn:active {
  transform: translateY(2px) scale(0.95) !important;
  box-shadow: 0 2px 0 #2D2D2D !important;
}
/* 菜单打开时按钮轻微绿底(参考 .hud-btn.active) */
#btnSwitchGame.switch-game-btn.active {
  background: linear-gradient(180deg, #F0FDF4 0%, #E8F5E9 100%) !important;
}
/* 右下角小三角指示(64px 按钮 → 18px; 与参考页返回按钮同比例) */
#btnSwitchGame.switch-game-btn .switch-game-caret {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border: 2.5px solid #2D2D2D;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2D2D2D;
  font-weight: 900;
  box-sizing: border-box;
  padding-bottom: 1px;
  pointer-events: none;
}
/* 菜单 — 白卡 + 3px 黑描边 + 硬阴影(参考 .switch-menu) */
#switchGameMenu.switch-game-menu {
  border: 3px solid #2D2D2D !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 0 #2D2D2D, 0 12px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 6px !important;
}
#switchGameMenu.switch-game-menu .switch-game-item {
  border-radius: 12px !important;
  font-weight: 700 !important;
}
#switchGameMenu.switch-game-menu .switch-game-item:hover {
  background: #F5F5F0 !important;
  transform: scale(1.02) !important;
}
#switchGameMenu.switch-game-menu .switch-game-item:active {
  background: #EBEBE4 !important;
  transform: scale(0.98) !important;
}
/* 手机端按钮缩小(与整体 hud 圆钮一致) */
@media (max-width: 767px) {
  #btnSwitchGame.switch-game-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    font-size: 21px !important;
  }
  #btnSwitchGame.switch-game-btn .switch-game-caret {
    width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
    border-width: 2px !important;
  }
}

/* ============================================================
   P148-0817duoMobileRow: 手机端双人「游戏区上方 HUD 按钮」统一排布
   背景(P148-0817backIcon/switchBtn/hudBtn2 后): 手机端双人各游戏(摸鱼/表情包/
   乒乓球/模仿)的游戏区上方按钮布局分裂 —— 各行各自布局, 位置参差对不上。
   目标:
     1) 功能按钮(返回/游戏/模型/管理)从游戏区左上方起自左向右排;
     2) 媒体按钮(摄像头/音量/麦克风 + 皮套)保持钉在游戏区右上方, 靠右成一组。
   手机端 #btnBack/#btnSwitchGame/.hud-fn-btn/媒体钮 已是同尺寸 46px 圆钮,
   本规则只管容器排布, 不改各按钮自身样式, 不影响电脑端布局。
   实现: 追加在文件末尾 + 同/更高特异性 + !important, 覆盖各 body.duo-*-active
   .top-bar/.top-bar-left/.top-bar-right 的 column/右对齐/占满全宽 历史规则。
   #duoMobileMediaRow 由 JS 内联 width:100%;margin-bottom:6px, 此处 !important
   覆盖其内联(无 !important 的内联样式斗不过 !important 外部样式)。
   ============================================================ */
@media (max-width: 767px) {
  body.duo-fish-active .top-bar,
  body.duo-emoji-active .top-bar,
  body.duo-pingpong-active .top-bar,
  body.duo-imitate-active .top-bar {
    flex-direction: row !important;      /* 单行横排, 超宽自动 wrap */
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* 从游戏区左上方起排 */
    align-items: center !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  /* 返回/游戏/模型/管理 放最左 */
  body.duo-fish-active .top-bar-left,
  body.duo-emoji-active .top-bar-left,
  body.duo-pingpong-active .top-bar-left,
  body.duo-imitate-active .top-bar-left {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* JS 建的媒体行(视频/音量/麦克风): 钉在游戏区右上方 */
  /* margin-left:auto 把它右侧一组推到行尾; 功能按钮放不下时自动换到下一行仍靠右 */
  #duoMobileMediaRow {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    justify-content: flex-start !important;
  }
  /* 媒体原容器(皮套钮): 紧跟在媒体行之后, 同属右侧一组 */
  body.duo-fish-active .top-bar-right,
  body.duo-emoji-active .top-bar-right,
  body.duo-pingpong-active .top-bar-right,
  body.duo-imitate-active .top-bar-right {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-start !important;
  }
  .media-btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* 取消历史文字按钮 flex:1 1 0 拉伸, 圆钮保持自然圆形尺寸 */
  body.duo-fish-active .top-bar-left > button,
  body.duo-emoji-active .top-bar-left > button,
  body.duo-pingpong-active .top-bar-left > button,
  body.duo-imitate-active .top-bar-left > button {
    flex: 0 0 auto !important;
  }
  body.duo-fish-active .switch-game-wrap,
  body.duo-emoji-active .switch-game-wrap,
  body.duo-imitate-active .switch-game-wrap {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* ============================================================
   P148-0818singleTbRow: 手机端(≤767px)单人模式表情包大师/模仿大师 游戏区上方按钮 —
   「从左边到右边」排布。背景: P148-0817backIcon/hudBtn2 把返回/模型/管理按钮改为
   46px 圆钮后, 单人 emoji/imitate 手机端仍在用旧 3 列 grid 拉伸(btnUnify), grid
   单元(约109px)撑不满 46px 圆钮 → 按钮间出现大空隙; imitate 还把管理按钮换行到
   第二行, top-bar 撑成两行, 布局异常。
   目标: 复刻双人 HUD 行布局(duoMobileRow) — 功能按钮(返回/模型/管理)自游戏区
   左上方起自左向右排成一行, 保持 46px 圆钮自然尺寸, 不被 grid 拉伸/换行。
   仅改容器排布, 不动按钮自身样式; 双人(duo-emoji-active/duo-imitate-active)不命中。
   ============================================================ */
@media (max-width: 767px) {
  body[data-game="emoji"]:not(.duo-emoji-active) .top-bar,
  body[data-game="imitate"]:not(.duo-emoji-active) .top-bar {
    flex-direction: row !important;      /* 单行横排, 超宽自动 wrap */
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* 从游戏区左上方起排 */
    align-items: center !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  body[data-game="emoji"]:not(.duo-emoji-active) .top-bar-left,
  body[data-game="imitate"]:not(.duo-emoji-active) .top-bar-left {
    display: flex !important;            /* 覆盖旧 3 列 grid */
    grid-template-columns: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
  }
}

/* ============================================================
   20260818ppMode3: 乒乓球三模式(休闲/闯关/无尽) 按钮 + 独立结算卡
   （仅单人模式体感乒乓球使用；双人模式不触碰）
   ============================================================ */
/* 三模式按钮配色（复用 .diff-btn 骨架，按模式区分主色） */
#pingpongModeSelect .diff-btn.diff-btn-easy.active {
  background: linear-gradient(135deg, #7ec8a8, #4fae83);
  border-color: #4fae83;
  box-shadow: 0 8px 24px rgba(79, 174, 131, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25);
}
#pingpongModeSelect .diff-btn.diff-btn-medium.active {
  background: linear-gradient(135deg, #7fb4e6, #4a8fd4);
  border-color: #4a8fd4;
  box-shadow: 0 8px 24px rgba(74, 143, 212, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25);
}
#pingpongModeSelect .diff-btn.diff-btn-hard.active {
  background: linear-gradient(135deg, #ef9f8e, #e0644f);
  border-color: #e0644f;
  box-shadow: 0 8px 24px rgba(224, 100, 79, 0.35), 0 2px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* 独立结算卡遮罩（与 .health-report 同款全屏糖果渐变） */
.pingpong-result {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  background: linear-gradient(160deg, #8B5CF6 0%, #A855F7 25%, #EC4899 60%, #F97316 100%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out, visibility 0s linear 0.4s;
  overflow: hidden;
}
.pingpong-result.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease-out, visibility 0s;
}
.pingpong-result::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.15) 3px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 30px 30px, 50px 50px;
  background-position: 0 0, 15px 15px;
  pointer-events: none;
  z-index: 1;
}
/* 结算卡片 */
.pingpong-result-card {
  width: 100%;
  max-width: 360px;
  background: #FFFBEF;
  border-radius: 28px;
  border: 4px solid #5CD8A3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 20px 40px rgba(0, 0, 0, 0.18);
  padding: 0;
  position: relative;
  z-index: 10;
  overflow: visible;
  transform: none;
  animation: none;
}
.pingpong-result-card.pop {
  animation: hrCardBounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pp-card-banner {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FFD93D 0%, #FFB800 100%);
  padding: 8px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: #7C4A00;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 11;
}
.pp-card-content {
  padding: 36px 20px 20px;
  text-align: center;
}
.pp-result-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #3a5a4a;
}
.pp-verdict {
  font-size: 18px;
  font-weight: 800;
  color: #e0644f;
  margin-bottom: 16px;
}
.pp-verdict.win {
  color: #2e9e6b;
}
/* 战绩网格 */
.pp-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.pp-stat {
  background: rgba(92, 216, 163, 0.12);
  border: 1.5px solid rgba(92, 216, 163, 0.4);
  border-radius: 14px;
  padding: 10px 8px;
}
.pp-stat-label {
  font-size: 12px;
  color: #7a8f85;
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.pp-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #3a5a4a;
}
/* 按钮区 */
.pp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}
.pp-btn:active { transform: scale(0.97); }
.pp-btn-share { background: linear-gradient(135deg, #7fb4e6, #4a8fd4); }
.pp-btn-download { background: linear-gradient(135deg, #ef9f8e, #e0644f); }
.pp-btn-retry { background: linear-gradient(135deg, #7ec8a8, #4fae83); }
.pp-btn-back { background: #9aa8a2; }
@media (max-width: 480px) {
  .pingpong-result-card { max-width: 92vw; }
  .pp-actions { flex-direction: column; }
}
/* 闯关模式难度升级 toast */
.pp-stage-toast {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -20px);
  background: rgba(255, 251, 239, 0.95);
  border: 3px solid #5CD8A3;
  color: #3a5a4a;
  font-weight: 800;
  font-size: 18px;
  padding: 10px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pp-stage-toast.pp-stage-show {
  opacity: 1;
  transform: translate(-50%, 0);
}