/* ================================================================
   cartoon-cute.css — 卡通可爱风格大改覆盖层
   基于 GUI Pro-SimpleCasual 素材包设计语言
   色系: 单人豆绿 / 双人雾霾蓝 / 暖米色背景
   字体: Quicksand (圆润标题) + Rubik (正文)
   ================================================================ */

/* ---- @font-face: 加载 UI 包圆润字体 ---- */
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

/* ---- 卡通风格 CSS 变量 ---- */
:root {
  /* 圆角加大 — 更圆润可爱 */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-xl: clamp(32px, 5vh, 42px);
  --radius-hero: clamp(40px, 6vh, 52px);
  --radius-pill: 999px;

  /* 单人模式 豆绿 — 糖果色变体 */
  --green-deep: #8db09e;
  --green-deeper: #6b9a7e;
  --green-light: #b8d4c5;
  --green-lighter: #d4e6db;
  --green-pale: #e8f2ec;
  --green-text: #3d5a4a;
  --green-text-soft: #5a7a6a;
  --green-card: #f0f6f2;
  --green-card2: #d4e0da;
  --green-shadow: rgba(107, 154, 126, 0.35);
  --green-shadow-deep: rgba(74, 120, 95, 0.45);

  /* 双人模式 雾霾蓝 — 糖果色变体 */
  --blue-deep: #8dafd0;
  --blue-deeper: #6b9ec7;
  --blue-light: #c5d9ea;
  --blue-lighter: #d4e4f2;
  --blue-pale: #eaf0f6;
  --blue-text: #4a6b85;
  --blue-card: #f0f4f8;
  --blue-card2: #d4dfeb;
  --blue-shadow: rgba(107, 158, 199, 0.35);
  --blue-shadow-deep: rgba(74, 107, 133, 0.45);

  /* 卡通通用 */
  --cartoon-border: 3px;
  --cartoon-shadow-bottom: 6px;
  --cartoon-transition: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- 全局字体替换 ---- */
html, body {
  font-family: "Rubik", "Quicksand", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* ---- 背景: 保留暖米色渐变, 增强卡通氛围 ---- */
body {
  background: linear-gradient(180deg, #fbf8f1 0%, #f5efe3 40%, #eee7da 100%) !important;
}

/* 背景光晕改为更饱和的卡通色彩 */
.ambient-glow.glow-1 {
  background: radial-gradient(circle, rgba(141,176,158,0.9), transparent 70%) !important;
  opacity: 0.7 !important;
}
.ambient-glow.glow-2 {
  background: radial-gradient(circle, rgba(141,175,208,0.85), transparent 70%) !important;
  opacity: 0.7 !important;
}
.ambient-glow.glow-3 {
  background: radial-gradient(circle, rgba(255,200,150,0.6), transparent 70%) !important;
  opacity: 0.6 !important;
}

/* 有机形态更鲜艳 */
.organic-1 {
  background: radial-gradient(circle at 34% 40%, rgba(143,178,158,0.9), rgba(143,178,158,0) 64%) !important;
  opacity: 0.35 !important;
}
.organic-2 {
  background: radial-gradient(circle at 62% 58%, rgba(141,175,208,0.9), rgba(141,175,208,0) 64%) !important;
  opacity: 0.35 !important;
}

/* ---- 粒子改为彩色小圆点(卡通装饰) ---- */
.ambient-particles span {
  background: rgba(141, 176, 158, 0.5) !important;
}
.ambient-particles span:nth-child(3n) {
  background: rgba(141, 175, 208, 0.5) !important;
}
.ambient-particles span:nth-child(3n+1) {
  background: rgba(255, 200, 150, 0.4) !important;
}

/* ---- 移除首页毛玻璃面板背景 ---- */
.home-panel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---- 标题区 ---- */
.title-wrap {
  margin-bottom: 32px !important;
}

/* ---- 乒乓球演示悬浮窗口 ---- */
.demo-float-window {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

/* 外层：持续上下浮动 + 轻微摇摆 */
.demo-float-bob {
  animation: demoFloatBob 4.5s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes demoFloatBob {
  0%, 100% {
    transform: translateY(0) rotate(-2.5deg);
  }
  25% {
    transform: translateY(-12px) rotate(1.5deg);
  }
  50% {
    transform: translateY(-4px) rotate(-1deg);
  }
  75% {
    transform: translateY(-14px) rotate(2.5deg);
  }
}

/* 内层：入场弹动动画 */
.demo-window-frame {
  animation: demoWindowPopIn 0.7s cubic-bezier(.34,1.56,.64,1) 0.15s backwards;
}

@keyframes demoWindowPopIn {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.6) rotate(-12deg);
  }
  55% {
    opacity: 1;
    transform: translateY(10px) scale(1.08) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

.demo-window-frame {
  position: relative;
  width: clamp(280px, 68vw, 400px);
  padding: 10px 10px 6px;
  background: linear-gradient(180deg, #FFFFFF, #F0FFF0);
  border: 4px solid var(--cartoon-stroke);
  border-radius: var(--cartoon-radius-lg);
  box-shadow: 0 6px 0 var(--cartoon-stroke), 0 12px 28px rgba(0,0,0,0.15);
}

/* 窗口顶部装饰条 */
.demo-window-frame::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 12px;
  background: var(--cartoon-yellow);
  border: 3px solid var(--cartoon-stroke);
  border-radius: 999px;
}

/* 星星装饰 */
.demo-window-frame .demo-star-1,
.demo-window-frame .demo-star-2,
.demo-window-frame .demo-star-3 {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 24px;
  color: var(--cartoon-yellow);
  -webkit-text-stroke: 2px var(--cartoon-stroke);
  text-shadow: 2px 2px 0 var(--cartoon-stroke);
  animation: demoStarTwinkle 1.8s ease-in-out infinite;
}

.demo-window-frame .demo-star-1 {
  top: -14px;
  left: 12px;
  font-size: 20px;
  animation-delay: 0s;
}

.demo-window-frame .demo-star-2 {
  top: -10px;
  right: 18px;
  font-size: 26px;
  animation-delay: 0.6s;
}

.demo-window-frame .demo-star-3 {
  bottom: 28px;
  left: -8px;
  font-size: 18px;
  color: var(--cartoon-pink);
  animation-delay: 1.2s;
}

@keyframes demoStarTwinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7) rotate(25deg);
  }
}

/* 乒乓球舞台 */
/* P148-0817demoBgGreen6: 首页演示区背景 — 纯色浅绿(更浅一档)。
   迭代: v4 #7ED957太艳 → v5 --sr-bg #B8F08E 用户要"再浅一点" →
   v6 用同体系更浅端 --sr-bg2 #D4F5B8(single-ref.css L36, 字面量因作用域限.single-ref-screen)。
   青蓝怪兽(RGB109,197,188)+黑描边17%在极浅黄绿上轮廓清晰 */
.demo-pingpong-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #D4F5B8;
  border: 3px solid var(--cartoon-stroke);
  border-radius: var(--cartoon-radius-md);
  overflow: hidden;
}

/* P148-0816homeDemo2: 首页演示 canvas — 铺满舞台, 内部480x270逻辑坐标与显示比例一致(16:9), 无XY缩放异常 */
.demo-pingpong-stage canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 球桌 */
.demo-pingpong-table {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 50px;
  background: linear-gradient(180deg, #5CB85C, #4CAF50);
  border: 3px solid var(--cartoon-stroke);
  border-radius: 4px;
}

.demo-pingpong-table::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed rgba(255,255,255,0.6);
  transform: translateY(-50%);
}

/* 球网 */
.demo-pingpong-net {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 20px;
  background: #FFFFFF;
  border: 2px solid var(--cartoon-stroke);
  border-radius: 2px;
}

.demo-pingpong-net::before,
.demo-pingpong-net::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 3px;
  background: var(--cartoon-stroke);
  transform: translateY(-50%);
}
.demo-pingpong-net::before { left: -14px; }
.demo-pingpong-net::after { right: -14px; }

/* 乒乓球 */
.demo-pingpong-ball {
  position: absolute;
  top: 30px;
  left: 20%;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #FFFFFF, #FFE4B5);
  border: 2.5px solid var(--cartoon-stroke);
  border-radius: 50%;
  z-index: 5;
  animation: pingpongBallMove 2.5s ease-in-out infinite;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

@keyframes pingpongBallMove {
  0%   { left: 18%; top: 28px; transform: scale(1); }
  20%  { left: 45%; top: 50px; transform: scale(1.1); }
  50%  { left: 78%; top: 28px; transform: scale(1); }
  70%  { left: 50%; top: 55px; transform: scale(1.1); }
  100% { left: 18%; top: 28px; transform: scale(1); }
}

/* 球拍 */
.demo-paddle {
  position: absolute;
  bottom: 35px;
  width: 18px;
  height: 36px;
  border-radius: 50% 50% 30% 30%;
  border: 2.5px solid var(--cartoon-stroke);
  z-index: 4;
}

.demo-paddle-left {
  left: 12%;
  background: linear-gradient(180deg, #FF6B6B, #EE5A5A);
  animation: paddleLeftMove 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}

.demo-paddle-left::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 14px;
  background: #8B4513;
  border: 2px solid var(--cartoon-stroke);
  border-radius: 2px;
}

@keyframes paddleLeftMove {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  25%      { transform: translateY(-12px) rotate(15deg); }
  50%      { transform: translateY(0) rotate(-5deg); }
  75%      { transform: translateY(-8px) rotate(10deg); }
}

.demo-paddle-right {
  right: 12%;
  background: linear-gradient(180deg, #74C0FC, #5AAFE8);
  animation: paddleRightMove 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}

.demo-paddle-right::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 14px;
  background: #8B4513;
  border: 2px solid var(--cartoon-stroke);
  border-radius: 2px;
}

@keyframes paddleRightMove {
  0%, 100% { transform: translateY(-10px) rotate(10deg); }
  25%      { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-14px) rotate(-15deg); }
  75%      { transform: translateY(0) rotate(8deg); }
}

/* 标签 */
.demo-window-label {
  text-align: center;
  font-family: var(--cartoon-font-display);
  font-weight: 800;
  font-size: clamp(13px, 2vw, 15px);
  color: var(--cartoon-stroke);
  letter-spacing: 0.08em;
  padding: 8px 0 4px;
  animation: demoLabelBounce 3s ease-in-out infinite 0.5s;
}

@keyframes demoLabelBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.title-main {
  font-family: "Smiley Sans Oblique", "Quicksand", -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: var(--ls) !important;
  /* 标题保持深绿渐变 */
  animation: floaty 3s cubic-bezier(.42,0,.58,1) infinite !important;
}

.title-slogan {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  color: #3d5a4a !important;
}

.title-tagline {
  font-family: "Rubik", "Quicksand", sans-serif !important;
  font-weight: 500 !important;
  color: #7a8a7e !important;
  letter-spacing: 2px !important;
}

/* ---- 主按钮: 糖果玩具按钮风格 ---- */
.main-buttons {
  gap: 22px !important;
}

.main-btn {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 4px !important;
  border: none !important;
  transition: var(--cartoon-transition) !important;
  position: relative !important;
  overflow: hidden !important;
  /* 3D 糖果按钮: 底部厚阴影模拟立体感 */
  box-shadow:
    0 var(--cartoon-shadow-bottom) 0 var(--green-deeper),
    0 12px 28px rgba(107, 154, 126, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}

/* 单人模式按钮 — 豆绿糖果 */
.main-btn-primary {
  background: linear-gradient(180deg, #a8c9b8 0%, #8db09e 50%, #7ba88e 100%) !important;
  color: #2e4a3a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.main-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 calc(var(--cartoon-shadow-bottom) + 3px) 0 var(--green-deeper),
    0 16px 36px rgba(107, 154, 126, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.main-btn-primary:active {
  transform: translateY(var(--cartoon-shadow-bottom)) !important;
  box-shadow:
    0 0 0 var(--green-deeper),
    0 4px 12px rgba(107, 154, 126, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 双人模式按钮 — 雾霾蓝糖果 */
.main-btn-secondary {
  background: linear-gradient(180deg, #a8c5de 0%, #8dafd0 50%, #7ba1c3 100%) !important;
  color: #2e4a60 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 var(--cartoon-shadow-bottom) 0 var(--blue-deeper),
    0 12px 28px rgba(107, 158, 199, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}

.main-btn-secondary:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 calc(var(--cartoon-shadow-bottom) + 3px) 0 var(--blue-deeper),
    0 16px 36px rgba(107, 158, 199, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

.main-btn-secondary:active {
  transform: translateY(var(--cartoon-shadow-bottom)) !important;
  box-shadow:
    0 0 0 var(--blue-deeper),
    0 4px 12px rgba(107, 158, 199, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 按钮微光扫过更亮 */
.main-btn-primary::after,
.single-mode-start-btn::after {
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent) !important;
}

/* ---- 隐私链接 ---- */
.privacy-link {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  color: #8a9a8e !important;
}
.privacy-link:hover {
  color: #5a7a6a !important;
}

/* ---- 页脚提示 ---- */
.footer-tip {
  font-family: "Rubik", sans-serif !important;
  color: #9aa09a !important;
}

/* ---- 返回按钮: 卡通圆角胶囊 ---- */
.single-mode-back-btn {
  font-family: "Rubik", "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, rgba(141,176,158,0.85), rgba(107,154,126,0.9)) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 22px !important;
  box-shadow:
    0 4px 0 rgba(74, 120, 95, 0.6),
    0 6px 16px rgba(107, 154, 126, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: var(--cartoon-transition) !important;
}

.single-mode-back-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 0 rgba(74, 120, 95, 0.6),
    0 10px 20px rgba(107, 154, 126, 0.3) !important;
}

.single-mode-back-btn:active {
  transform: translateY(4px) !important;
  box-shadow:
    0 0 0 rgba(74, 120, 95, 0.6),
    0 2px 8px rgba(107, 154, 126, 0.2) !important;
}

/* 双人模式返回按钮用蓝色系 */
.multiplayer-screen .single-mode-back-btn {
  background: linear-gradient(180deg, rgba(141,175,208,0.85), rgba(107,158,199,0.9)) !important;
  box-shadow:
    0 4px 0 rgba(74, 107, 133, 0.6),
    0 6px 16px rgba(107, 158, 199, 0.25) !important;
}
.multiplayer-screen .single-mode-back-btn:hover {
  box-shadow:
    0 6px 0 rgba(74, 107, 133, 0.6),
    0 10px 20px rgba(107, 158, 199, 0.3) !important;
}
.multiplayer-screen .single-mode-back-btn:active {
  box-shadow:
    0 0 0 rgba(74, 107, 133, 0.6),
    0 2px 8px rgba(107, 158, 199, 0.2) !important;
}

/* ---- 游戏选择箭头: 卡通圆形按钮 ---- */
.game-select-arrow {
  background: linear-gradient(180deg, #ffffff, #f0f6f2) !important;
  border: 3px solid var(--green-light) !important;
  color: var(--green-deeper) !important;
  font-weight: 700 !important;
  box-shadow:
    0 4px 0 var(--green-light),
    0 8px 16px rgba(107, 154, 126, 0.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: var(--cartoon-transition) !important;
}

@media (hover: hover) {
  .game-select-arrow:hover {
    background: linear-gradient(180deg, #e8f2ec, #d4e6db) !important;
    border-color: var(--green-deep) !important;
    color: var(--green-deeper) !important;
    transform: scale(1.1) !important;
    box-shadow:
      0 5px 0 var(--green-deep),
      0 10px 20px rgba(107, 154, 126, 0.3) !important;
  }
}

.game-select-arrow:active {
  transform: scale(0.92) !important;
  box-shadow:
    0 1px 0 var(--green-light),
    0 4px 8px rgba(107, 154, 126, 0.2) !important;
}

/* 双人模式箭头用蓝色 */
.multiplayer-screen .game-select-arrow {
  border-color: var(--blue-light) !important;
  color: var(--blue-deeper) !important;
  box-shadow:
    0 4px 0 var(--blue-light),
    0 8px 16px rgba(107, 158, 199, 0.2) !important;
}
.multiplayer-screen .game-select-arrow:hover {
  border-color: var(--blue-deep) !important;
  box-shadow:
    0 5px 0 var(--blue-deep),
    0 10px 20px rgba(107, 158, 199, 0.3) !important;
}

/* ---- 游戏图标框: 卡通圆角卡片 ---- */
.game-icon-box {
  border-radius: var(--radius-lg) !important;
  border: 3px solid rgba(141, 176, 158, 0.25) !important;
  background: linear-gradient(160deg, #e8f2ec, #d4e6db) !important;
  box-shadow:
    0 8px 24px rgba(107, 154, 126, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
  transition: var(--cartoon-transition) !important;
}

.game-icon-box:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow:
    0 14px 36px rgba(107, 154, 126, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(141, 176, 158, 0.4) !important;
}

/* 双人模式图标框蓝色 */
.multiplayer-screen .game-icon-box {
  background: linear-gradient(160deg, #eaf0f6, #d4e4f2) !important;
  border-color: rgba(141, 175, 208, 0.25) !important;
  box-shadow:
    0 8px 24px rgba(107, 158, 199, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}
.multiplayer-screen .game-icon-box:hover {
  box-shadow:
    0 14px 36px rgba(107, 158, 199, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(141, 175, 208, 0.4) !important;
}

/* ---- 游戏标题/描述 ---- */
.game-title {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  color: #3d5a4a !important;
  letter-spacing: 1px !important;
}

.multiplayer-screen .game-title {
  color: #4a6b85 !important;
}

.game-desc {
  font-family: "Rubik", sans-serif !important;
  font-weight: 500 !important;
  color: #7a8a7e !important;
}

/* ---- 难度按钮: 卡通糖果切换 ---- */
.difficulty-section {
  gap: 14px !important;
}

.diff-btn {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 28px !important;
  border: 2.5px solid var(--green-light) !important;
  background: linear-gradient(180deg, #ffffff, #f0f6f2) !important;
  color: var(--green-text-soft) !important;
  box-shadow:
    0 4px 0 var(--green-lighter),
    0 6px 12px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: var(--cartoon-transition) !important;
  letter-spacing: 1px !important;
}

.diff-btn.active {
  background: linear-gradient(180deg, #a8c9b8, #8db09e 50%, #7ba88e) !important;
  color: #fff !important;
  border-color: var(--green-deeper) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    0 4px 0 var(--green-deeper),
    0 8px 20px rgba(107, 154, 126, 0.35) !important;
}

.diff-btn:hover:not(.active) {
  transform: translateY(-2px) !important;
  border-color: var(--green-deep) !important;
  background: linear-gradient(180deg, #ffffff, #e8f2ec) !important;
  box-shadow:
    0 6px 0 var(--green-light),
    0 8px 16px rgba(107, 154, 126, 0.15) !important;
}

.diff-btn:active {
  transform: translateY(4px) !important;
  box-shadow:
    0 0 0 var(--green-lighter),
    0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* 双人模式难度按钮蓝色 */
.multiplayer-screen .diff-btn,
#diffScreen .diff-btn {
  border-color: var(--blue-light) !important;
  box-shadow:
    0 4px 0 var(--blue-lighter),
    0 6px 12px rgba(0, 0, 0, 0.04) !important;
}

.multiplayer-screen .diff-btn.active,
#diffScreen .diff-btn.active {
  background: linear-gradient(180deg, #a8c5de, #8dafd0 50%, #7ba1c3) !important;
  border-color: var(--blue-deeper) !important;
  box-shadow:
    0 4px 0 var(--blue-deeper),
    0 8px 20px rgba(107, 158, 199, 0.35) !important;
}

/* ---- 开始游戏按钮: 大号糖果按钮 ---- */
.single-mode-start-btn {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #a8c9b8 0%, #8db09e 50%, #7ba88e 100%) !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(74, 120, 95, 0.4) !important;
  letter-spacing: 4px !important;
  box-shadow:
    0 var(--cartoon-shadow-bottom) 0 var(--green-deeper),
    0 12px 28px rgba(107, 154, 126, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
  transition: var(--cartoon-transition) !important;
}

.single-mode-start-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 calc(var(--cartoon-shadow-bottom) + 3px) 0 var(--green-deeper),
    0 16px 36px rgba(107, 154, 126, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(180deg, #b5d4c2 0%, #95b8a6 50%, #83ae93 100%) !important;
}

.single-mode-start-btn:active {
  transform: translateY(var(--cartoon-shadow-bottom)) !important;
  box-shadow:
    0 0 0 var(--green-deeper),
    0 4px 12px rgba(107, 154, 126, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ---- 双人开始匹配按钮 — 蓝色糖果 ---- */
.multiplayer-start-btn {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #a8c5de 0%, #8dafd0 50%, #7ba1c3 100%) !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(74, 107, 133, 0.4) !important;
  letter-spacing: 4px !important;
  border: none !important;
  box-shadow:
    0 var(--cartoon-shadow-bottom) 0 var(--blue-deeper),
    0 12px 28px rgba(107, 158, 199, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
  transition: var(--cartoon-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.multiplayer-start-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 calc(var(--cartoon-shadow-bottom) + 3px) 0 var(--blue-deeper),
    0 16px 36px rgba(107, 158, 199, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(180deg, #b5d2e8 0%, #95b8d4 50%, #83a9ca 100%) !important;
}

.multiplayer-start-btn:active {
  transform: translateY(var(--cartoon-shadow-bottom)) !important;
  box-shadow:
    0 0 0 var(--blue-deeper),
    0 4px 12px rgba(107, 158, 199, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ---- 房间按钮(创建/加入) — 卡通次级按钮 ---- */
.multiplayer-room-btn {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #ffffff, #eaf0f6) !important;
  color: var(--blue-text) !important;
  border: 2.5px solid var(--blue-light) !important;
  box-shadow:
    0 4px 0 var(--blue-lighter),
    0 6px 14px rgba(107, 158, 199, 0.15) !important;
  transition: var(--cartoon-transition) !important;
}

.multiplayer-room-btn:hover {
  transform: translateY(-2px) !important;
  border-color: var(--blue-deep) !important;
  box-shadow:
    0 6px 0 var(--blue-light),
    0 8px 18px rgba(107, 158, 199, 0.2) !important;
}

.multiplayer-room-btn:active {
  transform: translateY(4px) !important;
  box-shadow:
    0 0 0 var(--blue-lighter),
    0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* ---- 房间邀请码框 ---- */
.room-code-box {
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(160deg, #f0f4f8, #e0e8f0) !important;
  border: 2.5px solid var(--blue-light) !important;
  box-shadow:
    0 6px 16px rgba(107, 158, 199, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.room-code-value {
  font-family: "Quicksand", monospace !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  color: var(--blue-deeper) !important;
}

/* 复制按钮 */
.btn-copy {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #a8c5de, #8dafd0) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 0 var(--blue-deeper), 0 4px 10px rgba(107, 158, 199, 0.25) !important;
  transition: var(--cartoon-transition) !important;
}

.btn-copy:active {
  transform: translateY(3px) !important;
  box-shadow: 0 0 0 var(--blue-deeper), 0 2px 6px rgba(107, 158, 199, 0.2) !important;
}

/* ---- 游戏内 Top Bar 按钮 ---- */
/* P148-0817backIcon: #btnBack 统一换成单人模式UI同款(白底圆形+3px黑描边+黑SVG左箭头),
   规格逐项对齐 single-ref.css .icon-btn(桌64/svg32, 手机46/svg22 由 main.css 提供)。
   本层曾以绿色渐变胶囊 !important 覆盖 main.css 同名规则, 故直接在本层改为同款值。 */
.top-bar #btnBack {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 800 !important;
  background: #FFFFFF !important;
  color: #2D2D2D !important;
  border: 3px solid #2D2D2D !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 0 #2D2D2D !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
}

.top-bar #btnBack:active {
  transform: translateY(2px) scale(0.95) !important;
  box-shadow: 0 2px 0 #2D2D2D !important;
}

/* 模型/管理按钮 — 卡通风格 */
#btnVrmToggle {
  font-family: "Quicksand", sans-serif !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #b8d4c5, #8db09e) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 3px 0 var(--green-deeper),
    0 4px 10px rgba(107, 154, 126, 0.25) !important;
  transition: var(--cartoon-transition) !important;
}

#btnVrmToggle:active {
  transform: translateY(3px) !important;
  box-shadow:
    0 0 0 var(--green-deeper),
    0 2px 6px rgba(107, 154, 126, 0.2) !important;
}

#btnEmojiAdmin,
#btnImitateAdmin {
  font-family: "Quicksand", sans-serif !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #a8c5de, #8dafd0) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 3px 0 var(--blue-deeper),
    0 4px 10px rgba(107, 158, 199, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#btnEmojiAdmin:active,
#btnImitateAdmin:active {
  transform: translateY(3px) !important;
  box-shadow:
    0 0 0 var(--blue-deeper),
    0 2px 6px rgba(107, 158, 199, 0.2) !important;
}

/* 换游戏按钮 */
.switch-game-btn {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #a8c5de, #8dafd0) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 3px 0 var(--blue-deeper),
    0 4px 10px rgba(107, 158, 199, 0.25) !important;
}

/* ---- 媒体按钮(摄像头/麦克风等): 卡通圆角 ---- */
.media-btn {
  border-radius: var(--radius-md) !important;
  background: linear-gradient(180deg, rgba(60, 60, 60, 0.85), rgba(30, 30, 30, 0.9)) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: var(--cartoon-transition) !important;
}

.media-btn:active {
  transform: scale(0.9) translateY(2px) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.media-btn.active-video {
  background: linear-gradient(180deg, #a8c9b8, #8db09e) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 3px 0 var(--green-deeper),
    0 4px 8px rgba(107, 154, 126, 0.3) !important;
}

.media-btn.active-avatar {
  background: linear-gradient(180deg, #95b8a6, #6b9a7e) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 3px 0 #4a785f,
    0 0 12px rgba(107, 154, 126, 0.5) !important;
}

.media-btn.active-mic {
  background: linear-gradient(180deg, #a8c5de, #8dafd0) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 3px 0 var(--blue-deeper),
    0 0 10px rgba(139, 175, 208, 0.4) !important;
}

.speaker-btn.active-speaker {
  background: linear-gradient(180deg, #a8c9b8, #8db09e) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ---- 游戏舞台: 卡通圆角 ---- */
.stage {
  border-radius: var(--radius-lg) !important;
  border: 3px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* ---- 难度选择屏幕按钮(双人) ---- */
#diffBtnEasy, #diffBtnMedium, #diffBtnHard {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 24px !important;
  border: 2.5px solid !important;
  box-shadow:
    0 4px 0 currentColor,
    0 6px 14px rgba(0, 0, 0, 0.06) !important;
  transition: var(--cartoon-transition) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#diffBtnEasy {
  border-color: #a8d4a0 !important;
  background: linear-gradient(180deg, #ffffff, #e8f5e8) !important;
  color: #5a8a4a !important;
}
#diffBtnEasy:hover {
  transform: translateY(-2px) !important;
}

#diffBtnMedium {
  border-color: #f0c890 !important;
  background: linear-gradient(180deg, #ffffff, #fff5e8) !important;
  color: #b0702a !important;
}
#diffBtnMedium:hover {
  transform: translateY(-2px) !important;
}

#diffBtnHard {
  border-color: #e8a0a0 !important;
  background: linear-gradient(180deg, #ffffff, #fde8e8) !important;
  color: #b04a4a !important;
}
#diffBtnHard:hover {
  transform: translateY(-2px) !important;
}

#diffBtnBack, .btn-secondary {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, rgba(141,176,158,0.85), rgba(107,154,126,0.9)) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 3px 0 rgba(74, 120, 95, 0.6),
    0 4px 10px rgba(107, 154, 126, 0.2) !important;
}

/* ---- 隐私弹窗: 卡通卡片 ---- */
.privacy-modal .modal-card {
  border-radius: var(--radius-hero) !important;
  border: 3px solid rgba(141, 176, 158, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.privacy-modal h2 {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
}

.privacy-modal .modal-ok {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, #8db09e, #6b9a7e) !important;
  box-shadow:
    0 4px 0 #4a785f,
    0 6px 16px rgba(107, 154, 126, 0.3) !important;
}

.privacy-modal .modal-ok:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 #4a785f, 0 2px 6px rgba(107, 154, 126, 0.2) !important;
}

.privacy-modal .privacy-section {
  border-radius: var(--radius-md) !important;
  border: 2px solid rgba(141, 176, 158, 0.12) !important;
}

/* ---- 警告横幅: 卡通风格 ---- */
.warn-banner {
  border-radius: var(--radius-lg) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 20px rgba(255, 77, 141, 0.25), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.warn-banner .warn-btns button {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
}

/* ---- HUD 分数显示: 卡通圆角 ---- */
.hud {
  font-family: "Quicksand", sans-serif !important;
}

/* ---- 手机端适配 ---- */
@media (max-width: 767px) {
  /* P148-20260817homeMobile: 手机端首页整体上提 — body 原 justify-content:center 让首页内容在视口内
     垂直居中, 顶部留出大块空隙; 改顶对齐(body:has 检测首页可见时生效, 进单人/双人后 menuScreen
     display:none 自动失效, 不影响其它页)。同时将首页"单人放松/双人对战"主按钮扁平化(降低高度) */
  body:has(#menuScreen:not([style*="display: none"])) {
    justify-content: flex-start !important;
  }
  /* 用 #homePanel .main-btn (带id, 优先级高于基础 .main-btn) 保证压扁生效 —
     注意: 两按钮在 #homePanel(home-panel) 内, 但不在 #menuScreen(title-wrap) 内(演示窗/标题才在) */
  #homePanel .main-btn {
    height: clamp(38px, 5.5vh, 46px) !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: clamp(15px, 3.4vw, 18px) !important;
    letter-spacing: 2px !important;
    font-weight: 800 !important;
    border-width: 3px !important;
    border-radius: 999px !important;
    --cartoon-shadow-bottom: 3px;
  }

  .single-mode-start-btn,
  .multiplayer-start-btn {
    height: clamp(52px, 7vh, 64px) !important;
    --cartoon-shadow-bottom: 5px;
  }

  .diff-btn {
    padding: 10px 20px !important;
    font-size: clamp(12px, 2vw, 14px) !important;
  }

  .home-panel {
    padding: clamp(18px, 4vh, 34px) clamp(16px, 4vw, 32px) clamp(22px, 6vh, 40px) !important;
    /* P148-20260817homeMobile: 首页整体上提后, 收紧面板顶部留白使演示框更靠上 */
    padding-top: 10px !important;
    border-radius: var(--radius-xl) !important;
  }

  .title-main {
    font-size: clamp(52px, 14vw, 88px) !important;
  }

  .game-select-arrow {
    width: clamp(36px, 5vw, 48px) !important;
    height: clamp(36px, 5vw, 48px) !important;
  }
}

/* ---- 入场动画增强: 弹性弹出 ---- */
@keyframes cartoonPopIn {
  0% { opacity: 0; transform: scale(0.7) translateY(20px); }
  60% { opacity: 1; transform: scale(1.05) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 按钮入场动画 */
.main-btn {
  animation: cartoonPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.main-btn-primary { animation-delay: 0.15s; }
.main-btn-secondary { animation-delay: 0.3s; }

/* ---- 标题浮动动画更活泼 ---- */
@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.5deg); }
  50%       { transform: translate3d(0, -8px, 0) rotate(0.5deg); }
}

/* ---- 游戏卡片切换动画更弹性 ---- */
@keyframes gameTitleIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 锁定徽章: 卡通风格 ---- */
.game-lock-badge {
  border-radius: var(--radius-pill) !important;
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  background: rgba(74, 74, 74, 0.8) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* ---- 房间状态文字 ---- */
.room-status {
  font-family: "Rubik", sans-serif !important;
}

/* ---- 邀请码输入框 ---- */
.room-join-box input {
  font-family: "Quicksand", monospace !important;
  border-radius: var(--radius-md) !important;
  border: 2.5px solid var(--blue-light) !important;
  background: #fff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.room-join-box input:focus {
  border-color: var(--blue-deep) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(141, 175, 208, 0.2) !important;
}

/* ---- 菜单操作按钮(皮肤/打卡) ---- */
.menu-action-btn {
  border-radius: var(--radius-md) !important;
  transition: var(--cartoon-transition) !important;
}

/* ---- VRM 背景渐变 ---- */
#vrmBackground {
  background: linear-gradient(135deg, #d4e6db, #b8d4c5) !important;
}

/* ---- 摄像头离线提示 ---- */
.camera-offline-tip {
  font-family: "Rubik", sans-serif !important;
  border-radius: var(--radius-md) !important;
}

/* P148-0817emojiFloatWin: 表情包悬浮窗旧的伪元素假标题栏覆盖层(含双人蓝色主题)已整体移除。
   原方案: emoji-bg.png 背景图 + ::before 假标题栏 + ::after 三圆点按钮 + !important 覆盖。
   新方案: 真实 DOM 结构(.ef-titlebar/.ef-btn/.ef-footer) + main.css 统一样式,
   参考 UI/卡通表情包悬浮窗.html 重新设计, 单/双人共用同一套豆绿卡通窗口。 */

/* ---- HUD: 分数/时间/延迟 — 卡通胶囊 ---- */
.hud {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.hud .left, .hud .right, .hud .center {
  background: linear-gradient(180deg, rgba(60, 60, 60, 0.85), rgba(30, 30, 30, 0.9)) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.hud .net-status {
  background: linear-gradient(180deg, rgba(60, 60, 60, 0.85), rgba(30, 30, 30, 0.9)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Rubik", sans-serif !important;
}

/* ---- 提示文字: 卡通圆角气泡 ---- */
.hint {
  font-family: "Quicksand", "Rubik", sans-serif !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, rgba(60, 60, 60, 0.88), rgba(30, 30, 30, 0.92)) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.25) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ---- 切换弹窗: 卡通卡片 ---- */
.switch-modal-card {
  border-radius: var(--radius-hero) !important;
  border: 3px solid rgba(141, 176, 158, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.switch-modal-title {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  color: #3d5a4a !important;
}

.switch-modal-sub {
  font-family: "Rubik", sans-serif !important;
  color: #6a7a6e !important;
}

.switch-modal-btn {
  font-family: "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  transition: var(--cartoon-transition) !important;
}

.switch-modal-btn-primary {
  background: linear-gradient(180deg, #8db09e, #6b9a7e) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    0 4px 0 #4a785f,
    0 6px 16px rgba(107, 154, 126, 0.3) !important;
}

.switch-modal-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 0 #4a785f,
    0 10px 22px rgba(107, 154, 126, 0.4) !important;
}

.switch-modal-btn-primary:active {
  transform: translateY(4px) !important;
  box-shadow:
    0 0 0 #4a785f,
    0 2px 6px rgba(107, 154, 126, 0.2) !important;
}

.switch-modal-btn-secondary {
  background: linear-gradient(180deg, #ffffff, #eef2ef) !important;
  color: #5a6a5d !important;
  border: 2.5px solid #c8d4ce !important;
  box-shadow: 0 4px 0 #c8d4ce, 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.switch-modal-btn-secondary:hover {
  background: linear-gradient(180deg, #ffffff, #e8ede8) !important;
  transform: translateY(-2px) !important;
}

.switch-modal-btn-secondary:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 #c8d4ce, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* ---- 切换加载遮罩 ---- */
.switch-loading-card {
  border-radius: var(--radius-hero) !important;
  border: 3px solid rgba(141, 176, 158, 0.2) !important;
  font-family: "Quicksand", sans-serif !important;
}

/* ---- 颜色选择/皮肤弹窗 ---- */
.modal-card {
  border-radius: var(--radius-hero) !important;
}

/* ---- 全局滚动条美化(桌面端) ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(141, 176, 158, 0.08);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--green-light), var(--green-deep));
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--green-deep), var(--green-deeper));
}


/* ============================================================
   CARTOON THEME — 卡通风格覆盖样式
   设计语言: 粗黑描边 + 底部硬阴影 + 大圆角 + 弹跳动效
   ============================================================ */

/* ---- 卡通主题 CSS 变量 ---- */
:root {
  --cartoon-stroke: #2D2D2D;
  --cartoon-stroke-thick: 4px;
  --cartoon-shadow-sm: 0 3px 0 #2D2D2D;
  --cartoon-shadow-md: 0 5px 0 #2D2D2D;
  --cartoon-shadow-lg: 0 7px 0 #2D2D2D;
  --cartoon-shadow-xl: 0 10px 0 #2D2D2D;
  --cartoon-radius-sm: 12px;
  --cartoon-radius-md: 20px;
  --cartoon-radius-lg: 28px;
  --cartoon-radius-xl: 36px;
  --cartoon-radius-full: 9999px;

  /* 首页主色: 嫩草绿 */
  --cartoon-home-bg: #B8F08E;
  --cartoon-home-bg-2: #D4F5B8;
  --cartoon-home-primary: #7ED957;
  --cartoon-home-primary-dark: #5CB83A;
  --cartoon-home-primary-light: #A8E68A;

  /* 辅助色 */
  --cartoon-yellow: #FFD93D;
  --cartoon-yellow-dark: #E6B800;
  --cartoon-pink: #FF8BA7;
  --cartoon-blue: #74C0FC;
  --cartoon-orange: #FF9F43;
  --cartoon-red: #FF6B6B;

  /* 字体 */
  --cartoon-font-display: "ZCOOL KuaiLe", "Baloo 2", "Comic Sans MS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --cartoon-font-body: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

/* ============================================================
   首页（初始UI）卡通化
   ============================================================ */

/* ---- 背景 ---- */
body {
  background: linear-gradient(180deg, var(--cartoon-home-bg-2) 0%, var(--cartoon-home-bg) 100%) !important;
}

/* 移除原有的纸张噪点和暗角，换成卡通装饰 */
body::before { display: none !important; }
body::after { display: none !important; }

/* 背景装饰层：卡通云朵 + 星星 */
.home-ambient {
  /* 保留容器但替换内容为卡通风格 */
}
.ambient-glow,
.organic-shape {
  display: none;
}

/* 粒子换成星星 */
.ambient-particles span {
  background: var(--cartoon-yellow) !important;
  border: 2px solid var(--cartoon-stroke) !important;
  box-shadow: 0 2px 0 rgba(45,45,45,0.3);
  animation-duration: 12s !important;
}

/* ---- 标题 ---- */
.title-wrap {
  margin-top: 16px !important;
  margin-bottom: 32px !important;
}

.title-main {
  /* 可爱字体链: ZCOOL KuaiLe(Google, 国内可能失败) → Smiley Sans Oblique(自托管得意黑, 动脖子宫形已就位, 稳定兜底可爱) */
  font-family: "ZCOOL KuaiLe", "Smiley Sans Oblique", "Smiley Sans", "Baloo 2", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  font-size: clamp(48px, 11vw, 80px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  /* P148-20260827mintV4: 入场动画无条件播放!
     门控 string html.fonts-ready 的存在依赖字体加载, 一旦字体请求异常/被拦, class 迟迟不加上
     → 入场永远不播, 用户看到"文字瞬间出现"。自托管字体已是 font-display:swap(首帧即用回退字体可见),
     入场不再有"字体未就绪不可见"的问题 → 直接默认就挂连贯链(弹跳入场0.3s延时 → 接永久橡胶Q弹),
     下方 html.fonts-ready 规则保留同链作兜底与重放入场一致性。 */
  animation: cartoonTitleBounce 0.8s cubic-bezier(.34,1.56,.64,1) 0.3s backwards, titleRubber 2s ease-in-out 1.2s infinite !important;
}
/* 兼容保留: 字体就绪后同链(与默认一致, 供 showMenu() 重放入场时规则稳定) */
html.fonts-ready .title-main {
  animation: cartoonTitleBounce 0.8s cubic-bezier(.34,1.56,.64,1) 0.3s backwards, titleRubber 2s ease-in-out 1.2s infinite !important;
}

.title-char {
  /* 覆盖原有的opacity:0，让卡通标题直接显示 */
  opacity: 1 !important;
  /* P148-20260827blackTrial: 临时试看 — 纯黑字芯 + 无发光(先看纯色效果); 动画(逐字错峰入场+出场)保留 */
  color: #000000 !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none;
  animation: titleCharGlowIn 0.7s cubic-bezier(.2,.8,.2,1) backwards,
             titleGlowPulse 2.6s ease-in-out infinite !important;
}
/* P148-20260827blackTrial: 临时试看 — 发光呼吸/出场关键帧改为无发光(黑字) */
.title-char:nth-child(1) { animation-delay: 0.05s, 0.75s !important; }
.title-char:nth-child(2) { animation-delay: 0.20s, 0.90s !important; }
.title-char:nth-child(3) { animation-delay: 0.35s, 1.05s !important; }
.title-char:nth-child(4) { animation-delay: 0.50s, 1.20s !important; }

/* 出场动画 — 离开初始UI时四字缩小上移淡出, 280ms 与屏幕过渡同步 */
.title-wrap.transitioning-out .title-char {
  animation: titleCharGlowOut 0.28s ease-in forwards !important;
}

/* 逐字入场: 字符从下方浮入 */
@keyframes titleCharGlowIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 呼吸循环(黑字时无发光, 仅保留形变节奏) */
@keyframes titleGlowPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
/* 出场: 缩小上移淡出 */
@keyframes titleCharGlowOut {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.85); }
}

@keyframes titleRubber {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  25%      { transform: scaleX(1.15) scaleY(0.85); }
  50%      { transform: scaleX(0.9) scaleY(1.1); }
  75%      { transform: scaleX(1.05) scaleY(0.95); }
}

/* 标题入场弹跳(播一次) — 与永久 titleRubber 组合: 0.3s延时入场, 1.2s起接橡胶循环 */
@keyframes cartoonTitleBounce {
  0% { opacity: 0; transform: translateY(-40px) scale(0.8) rotate(-5deg); }
  60% { opacity: 1; transform: translateY(8px) scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* 副标题 */
.title-slogan {
  font-family: var(--cartoon-font-display) !important;
  font-size: clamp(16px, 3vw, 24px) !important;
  font-weight: 700 !important;
  color: var(--cartoon-stroke) !important;
  letter-spacing: 0.1em !important;
  margin-top: 20px !important;
}

.title-slogan::before,
.title-slogan::after {
  height: 3px !important;
  background: var(--cartoon-stroke) !important;
  opacity: 0.3;
  border-radius: 3px !important;
}

.title-slogan::before {
  background: linear-gradient(90deg, transparent, var(--cartoon-stroke)) !important;
}
.title-slogan::after {
  background: linear-gradient(90deg, var(--cartoon-stroke), transparent) !important;
}

/* 标语徽章外层 — 负责入场动画 */
.tagline-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: taglineWrapperBounceIn 0.6s cubic-bezier(.34,1.56,.64,1) 0.7s forwards;
}

@keyframes taglineWrapperBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(30px);
  }
  40% {
    opacity: 1;
    /* P148-0817taglineFont: 过冲 1.08→1.02, 避免入场期间文字被放大渲染,
       播完后回落造成"字体变细"的观感落差(弹跳感由 translateY 保留) */
    transform: scale(1.02) translateY(-8px);
  }
  70% {
    transform: scale(0.99) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0); /* 旋转交给内部.tagline自己处理, 避免叠加 */
  }
}

/* 标语徽章 */
.title-tagline {
  display: inline-block !important;
  margin-top: 16px !important;
  padding: 6px 20px !important;
  background: #FFFFFF !important;
  border: 3px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-full) !important;
  /* 用系统圆润中文字体栈, 避免不存在的ZCOOL KuaiLe造成FOUT/样式跳跃 */
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif !important;
  font-size: clamp(13px, 2.2vw, 16px) !important;
  font-weight: 700 !important;
  color: var(--cartoon-stroke) !important;
  letter-spacing: 0.08em !important;
  box-shadow: var(--cartoon-shadow-sm) !important;
  transform: rotate(-2deg) !important;
  opacity: 1 !important;
  /* 摇摆动画延迟与人场动画结束对齐(0.7+0.6=1.3s), 无缝衔接 */
  animation: taglineSway 4s ease-in-out infinite 1.3s !important;
  transform-origin: center center !important;
  position: relative !important;
}

/* 标签左右大星星装饰（游戏卡片同款） */
.title-tagline::before {
  content: '★';
  position: absolute;
  top: -12px;
  right: -8px;
  font-size: 28px;
  color: var(--cartoon-yellow);
  -webkit-text-stroke: 2px var(--cartoon-stroke);
  text-shadow: 2px 2px 0 var(--cartoon-stroke);
  animation: starTwinkle 2s ease-in-out infinite;
  transform: none !important;
  z-index: 5;
}

.title-tagline::after {
  content: '✦';
  position: absolute;
  bottom: -6px;
  left: -6px;
  font-size: 20px;
  color: var(--cartoon-pink);
  -webkit-text-stroke: 1.5px var(--cartoon-stroke);
  text-shadow: 1.5px 1.5px 0 var(--cartoon-stroke);
  animation: starTwinkle 2.5s ease-in-out infinite 0.5s;
  transform: none !important;
  z-index: 5;
}

/* ================================================================
   P148 投喂按钮 + 弹窗（美术参考 UI/微信.html，命名前缀 tn-）
   ================================================================ */
/* 投喂按钮固定左侧，独立于标语，不影响"给脖子，放个短假"居中 */
.tagline-feed-anchor {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* 徽章右侧投喂按钮 */
.tagline-feed-btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  border: 3px solid #b83a5a !important;
  background: linear-gradient(145deg, #ff9a56 0%, #ff6b6b 50%, #ee5a8a 100%) !important;
  padding: 5px 15px 8px !important;
  border-radius: 20px !important;
  margin-left: 0 !important;
  box-shadow: 0 5px 0 #b83a5a, 0 8px 18px rgba(238, 90, 138, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif !important;
  transition: transform 0.15s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.15s !important;
  animation: tnFeedFloat 3s ease-in-out infinite !important;
}
.tagline-feed-btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 0 #b83a5a, 0 13px 24px rgba(238, 90, 138, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
  animation-play-state: paused;
}
.tagline-feed-btn:active {
  transform: translateY(3px) scale(0.97) !important;
  box-shadow: 0 2px 0 #b83a5a, 0 4px 10px rgba(238, 90, 138, 0.3) !important;
}
@keyframes tnFeedFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* 顶部闪光 */
.tagline-feed-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: tnFeedShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tnFeedShine { 0%, 70% { left: -100%; } 100% { left: 150%; } }
.tagline-feed-btn > * { position: relative; z-index: 2; }
.tnf-notify {
  position: absolute; top: -7px; right: -7px; z-index: 5;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ff4d6d; border: 2px solid #fff;
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: tnPulseDot 2s ease-in-out infinite;
}
@keyframes tnPulseDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.tnf-emoji { font-size: 18px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); }
.tnf-title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); line-height: 1.1; }
.tnf-sub { font-size: 9.5px; color: rgba(255, 255, 255, 0.95); font-weight: 500; letter-spacing: 1px; line-height: 1.1; }

/* ---- 投喂弹窗 ---- */
.tn-modal-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(22, 12, 32, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease;
}
.tn-modal-overlay.tn-active { opacity: 1; visibility: visible; }
.tn-modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: linear-gradient(160deg, #fff 0%, #fbf1ff 100%);
  border: 3px solid #e8d3f5;
  border-radius: 28px;
  padding: 36px 26px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(184, 146, 255, 0.25);
  transform: translateY(30px) scale(0.92);
  opacity: 0;
  transition: all 0.4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  color: #3d3550;
}
.tn-modal-overlay.tn-active .tn-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.tn-modal-card::before {
  content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 5px; border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #ffd36b, #ff7a7a);
}
.tn-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: none; background: #f1e8fb; border-radius: 50%;
  cursor: pointer; color: #8a7aa6; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.tn-close:hover { background: #ffe1e1; color: #ff4d6d; transform: rotate(90deg); }
.tn-modal-header { text-align: center; margin-bottom: 22px; }
.tn-modal-emoji { font-size: 42px; margin-bottom: 6px; display: inline-block; animation: tnWave 2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes tnWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.tn-modal-title {
  font-size: 24px; font-weight: 800; letter-spacing: 2px; margin-bottom: 2px;
  background: linear-gradient(135deg, #ffb03b 0%, #ff7a7a 55%, #ee5a8a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tn-modal-subtitle { font-size: 12.5px; color: #9a8ab5; letter-spacing: 1px; }
.tn-modal-section {
  background: #f7f1fd; border: 1px solid #eee1fb; border-radius: 16px;
  padding: 14px 16px; margin-bottom: 12px; transition: all 0.25s;
}
.tn-modal-section:hover { background: #f6ecff; border-color: #e6cff8; transform: translateX(4px); }
.tn-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #9a8ab5;
  margin-bottom: 7px; display: flex; align-items: center; gap: 6px; font-weight: 600;
}
.tn-dot { width: 6px; height: 6px; border-radius: 50%; }
.tn-dot.mint { background: #4fd6b0; }
.tn-dot.gold { background: #ffb03b; }
.tn-dot.lavender { background: #b892ff; }
.tn-section-content { font-size: 14px; color: #4a425c; font-weight: 500; line-height: 1.6; }
.tn-hl { color: #ff6b6b; font-weight: 800; }
.tn-wechat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tn-wechat-id { font-size: 20px; font-weight: 800; color: #2fbf9e; letter-spacing: 1px; }
.tn-copy {
  background: rgba(79, 214, 176, 0.15); border: 1px solid rgba(79, 214, 176, 0.35);
  color: #1fa37f; padding: 6px 14px; border-radius: 20px; font-size: 12px;
  cursor: pointer; transition: all 0.2s; font-weight: 600;
}
.tn-copy:hover { background: rgba(79, 214, 176, 0.28); transform: scale(1.05); }
.tn-copy.tn-copied { background: #4fd6b0; color: #fff; }
.tn-progress-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.tn-progress-icon { font-size: 15px; width: 22px; text-align: center; }
.tn-progress-text { flex: 1; font-size: 13.5px; color: #4a425c; }
.tn-progress-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700; letter-spacing: 0.5px; }
.tn-progress-badge.doing { background: rgba(255, 176, 59, 0.2); color: #c97f14; }
.tn-progress-badge.planned { background: rgba(184, 146, 255, 0.2); color: #8b6cd8; }
.tn-feed-footer { text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px dashed #e6d9f2; }
.tn-feed-tip { font-size: 13px; color: #9a8ab5; margin-bottom: 12px; line-height: 1.6; }
.tn-feed-actions { display: flex; gap: 10px; justify-content: center; }
.tn-chip {
  background: linear-gradient(135deg, rgba(255, 176, 59, 0.2), rgba(255, 122, 122, 0.2));
  border: 1px solid rgba(255, 176, 59, 0.35); color: #d8890f;
  padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: default;
  transition: all 0.2s;
}
.tn-chip:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255, 176, 59, 0.2); }

/* 彩带粒子 */
.tn-confetti { position: fixed; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; opacity: 0; z-index: 4000; }

@media (max-width: 480px) {
  .tagline-feed-btn { padding: 4px 11px 6px !important; }
  .tnf-title { font-size: 12.5px; }
  .tnf-emoji { font-size: 15px; }
  .tn-modal-card { padding: 28px 18px 20px; }
  .tn-modal-title { font-size: 20px; }
}

@keyframes taglineBounceIn {
  0% {
    opacity: 0;
    transform: rotate(-20deg) scale(0.2) translateY(60px);
  }
  30% {
    opacity: 1;
    transform: rotate(8deg) scale(1.3) translateY(-15px);
  }
  55% {
    transform: rotate(-6deg) scale(0.92) translateY(8px);
  }
  75% {
    transform: rotate(3deg) scale(1.08) translateY(-5px);
  }
  90% {
    transform: rotate(-1deg) scale(0.98) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: rotate(-2deg) scale(1) translateY(0);
  }
}

@keyframes taglineSway {
  /* P148-0817taglineFont: 去掉 scale(1.04) 缩放脉动(入场结束后文字周期性放大/缩小,
     被感知为"字体变细"), 摇摆仅保留 rotate, 文字笔画粗细全程稳定 */
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

/* ---- 主按钮 ---- */
.main-buttons {
  gap: 24px !important;
  max-width: 480px !important;
  padding: 0 24px !important;
}

.main-btn {
  position: relative !important;
  height: clamp(72px, 9vh, 96px) !important;
  border: 4px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-xl) !important;
  font-family: var(--cartoon-font-display) !important;
  font-size: clamp(22px, 4vw, 32px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  color: #FFFFFF !important;
  text-shadow: 2.5px 2.5px 0 var(--cartoon-stroke) !important;
  box-shadow: var(--cartoon-shadow-md) !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  overflow: visible !important;
}

/* 移除原有的微光扫过 */
.main-btn-primary::after { display: none !important; }

.main-btn-primary {
  background: var(--cartoon-home-primary) !important;
  animation: cartoonBtnIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.3s backwards !important;
}

.main-btn-secondary {
  background: var(--cartoon-blue) !important;
  animation: cartoonBtnIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.45s backwards !important;
}

@keyframes cartoonBtnIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.main-btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--cartoon-shadow-lg) !important;
}

.main-btn:active {
  transform: translateY(3px) scale(0.98) !important;
  box-shadow: var(--cartoon-shadow-sm) !important;
}

/* 按钮上的小装饰点 */
.main-btn::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
}

/* ---- 底部说明 ---- */
.footer-tip {
  font-family: var(--cartoon-font-body) !important;
  font-size: clamp(11px, 1.8vw, 13px) !important;
  color: var(--cartoon-stroke) !important;
  opacity: 0.65 !important;
  letter-spacing: 0.05em !important;
  margin-top: 20px !important;
}

.privacy-link {
  font-family: var(--cartoon-font-display) !important;
  font-size: clamp(12px, 2vw, 14px) !important;
  color: var(--cartoon-stroke) !important;
  opacity: 0.6 !important;
  letter-spacing: 0.08em !important;
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: var(--cartoon-yellow) !important;
  text-underline-offset: 4px !important;
}

.privacy-link:hover {
  opacity: 1 !important;
  color: var(--cartoon-home-primary-dark) !important;
}

/* ============================================================
   电脑端适配：手机端布局居中，两边留白
   ============================================================ */

@media (min-width: 768px) {
  body {
    padding: 40px 20px !important;
    justify-content: center !important;
  }

  /* 用一个"手机框"外框把内容包起来居中 */
  #menuScreen,
  .main-buttons,
  .footer-tip,
  .privacy-link {
    /* 首页内容整体最大宽度限制，模拟手机端比例 */
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .main-buttons {
    padding: 0 !important;
  }

  .title-wrap {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
  }

  /* 左右两侧加卡通云朵装饰 */
  body::before {
    display: block !important;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-image: none;
    opacity: 1;
  }

  /* 用首页容器的装饰代替 */
  .home-ambient::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 8%;
    width: 120px;
    height: 50px;
    background: rgba(255,255,255,0.6);
    border: 3px solid var(--cartoon-stroke);
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(45,45,45,0.15);
    animation: cartoonCloudFloat 6s ease-in-out infinite;
  }

  .home-ambient::after {
    content: '';
    position: absolute;
    top: 25%;
    right: 10%;
    width: 100px;
    height: 42px;
    background: rgba(255,255,255,0.5);
    border: 3px solid var(--cartoon-stroke);
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(45,45,45,0.12);
    animation: cartoonCloudFloat 7s ease-in-out infinite 1s;
  }

  @keyframes cartoonCloudFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }
}

/* 大屏进一步限制宽度 */
/* P148-0816noScroll: 底部提示文案排除在外 — 其一行为长文案, 若被 max-width:460px 限制会向右溢出偏离居中;
   移除 footer-tip 的限制使其按自然宽度居中一行展示 */
@media (min-width: 1200px) {
  #menuScreen,
  .main-buttons,
  .privacy-link {
    max-width: 460px !important;
  }
}



/* ============================================================
   BOLD CARTOON OVERRIDE — 粗黑描边卡通风格 (单人模式选择页)
   设计语言: 4px黑描边 + 底部硬阴影 + 大圆角 + 弹跳
   ============================================================ */

/* ---- 单人模式页面背景 ---- */
.single-mode-screen {
  position: relative !important;
  background: transparent !important;
}

/* 单人模式页面星星装饰 */
.single-mode-screen::before,
.single-mode-screen::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

/* 用多个星星元素（通过body伪元素+页面内装饰实现） */
.single-mode-screen {
  --star-color: #FFD93D;
}

/* 在 game-card 上加星星装饰 */
.game-card {
  position: relative !important;
}

.game-card::before {
  content: '★';
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 24px;
  color: var(--cartoon-yellow);
  -webkit-text-stroke: 2px var(--cartoon-stroke);
  text-shadow: 2px 2px 0 var(--cartoon-stroke);
  z-index: 10;
  animation: starTwinkle 2s ease-in-out infinite;
  pointer-events: none;
}

.game-card::after {
  content: '✦';
  position: absolute;
  top: 20px;
  left: 12px;
  font-size: 18px;
  color: var(--cartoon-pink);
  -webkit-text-stroke: 1.5px var(--cartoon-stroke);
  text-shadow: 1.5px 1.5px 0 var(--cartoon-stroke);
  z-index: 10;
  animation: starTwinkle 2.5s ease-in-out infinite 0.5s;
  pointer-events: none;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(0.8) rotate(20deg); }
}

/* ---- 返回按钮: 粗黑描边胶囊 ---- */
.single-mode-back-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-full) !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}

.single-mode-back-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  background: var(--cartoon-home-primary-light) !important;
}

.single-mode-back-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

.single-mode-back-btn .back-icon {
  width: 18px !important;
  height: 18px !important;
}

/* ---- 菜单操作按钮(皮肤/打卡): 粗黑描边 ---- */
.menu-action-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  border: 3px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-md) !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.05em !important;
  font-size: 0.875rem !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}

.menu-action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 var(--cartoon-stroke) !important;
  background: var(--cartoon-yellow) !important;
}

.menu-action-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

.menu-action-btn .action-icon {
  width: 16px !important;
  height: 16px !important;
}

/* 打卡按钮特殊色 */
.menu-action-btn-ck {
  background: var(--cartoon-yellow) !important;
}

.menu-action-btn-ck:hover {
  background: #FFE66D !important;
}

/* ---- 游戏选择箭头: 粗黑描边圆形 ---- */
.game-select-arrow {
  background: #FFFFFF !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  color: var(--cartoon-stroke) !important;
  font-weight: 900 !important;
  font-family: var(--cartoon-font-display) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}

.game-select-arrow:hover {
  background: var(--cartoon-home-primary-light) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
}

.game-select-arrow:active {
  transform: scale(0.92) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

/* ---- 游戏图标框: 粗黑描边大卡片 ---- */
.game-icon-box {
  border: 4px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-lg) !important;
  background: linear-gradient(180deg, #FFFFFF, #F0FFF0) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke), 0 10px 20px rgba(0,0,0,0.1) !important;
  transition: all 0.2s cubic-bezier(.34,1.56,.64,1) !important;
  overflow: hidden !important;
}

.game-icon-box:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 9px 0 var(--cartoon-stroke), 0 14px 28px rgba(0,0,0,0.15) !important;
}

/* 双人模式图标框蓝色 */
.multiplayer-screen .game-icon-box {
  background: linear-gradient(180deg, #FFFFFF, #EBF5FF) !important;
}

/* ---- 游戏标题: 粗黑描边立体字 ---- */
.game-title {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  -webkit-text-stroke: 3px var(--cartoon-stroke) !important;
  text-shadow: 3px 3px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.08em !important;
}

.multiplayer-screen .game-title {
  color: #FFFFFF !important;
}

/* ---- 游戏描述 ---- */
.game-desc {
  font-family: var(--cartoon-font-body) !important;
  font-weight: 500 !important;
  color: var(--cartoon-stroke) !important;
  opacity: 0.7 !important;
  font-size: clamp(14px, 2.2vw, 18px) !important;
}

/* ---- 游戏标签行 ---- */
.game-tag-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.game-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--cartoon-radius-full);
  font-family: var(--cartoon-font-body);
  border: 2px solid var(--cartoon-stroke);
  box-shadow: 0 2px 0 var(--cartoon-stroke);
  letter-spacing: 0.05em;
}

.game-tag-green {
  background: #A8E6CF;
  color: #2d5a4a;
}

.game-tag-orange {
  background: #FFD93D;
  color: #6b4a00;
}

.game-tag-purple {
  background: #D4B5FF;
  color: #5a3d8a;
}

/* ---- 游戏指示器(小圆点) ---- */
.game-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.game-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D0D0D0;
  border: 2px solid var(--cartoon-stroke);
  transition: all 0.3s ease;
  cursor: pointer;
}

.game-dot.active {
  width: 24px;
  border-radius: var(--cartoon-radius-full);
  background: var(--cartoon-home-primary);
}

/* ---- game-icon-row grid 布局修正 (粗黑描边版) ---- */
/* 桌面端: 箭头+图标框在第一行, 标题/描述/标签/指示器跨列居中 */
@media (min-width: 481px) {
  .game-icon-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    width: 100% !important;
  }
  .game-icon-row .game-select-arrow.prev { grid-column: 1 !important; grid-row: 1 !important; }
  .game-icon-row .game-icon-column { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; }
  .game-icon-row .game-select-arrow.next { grid-column: 3 !important; grid-row: 1 !important; }
  .game-icon-row .game-title { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .game-icon-row .game-desc { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  .game-icon-row .game-tag-row { grid-column: 1 / -1 !important; grid-row: 4 !important; }
  .game-icon-row .game-dots { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 4px !important; }
}

/* 手机端: 图标框占满第一行, 箭头+标题在第二行, 描述第三行, 标签第四行, 指示器第五行 */
@media (max-width: 480px) {
  .game-icon-row {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    width: 100% !important;
  }
  .game-icon-row .game-icon-column {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  .game-icon-row .game-select-arrow.prev { grid-column: 1 !important; grid-row: 2 !important; }
  .game-icon-row .game-select-arrow.next { grid-column: 3 !important; grid-row: 2 !important; }
  .game-icon-row .game-title { grid-column: 2 !important; grid-row: 2 !important; }
  .game-icon-row .game-desc { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  .game-icon-row .game-tag-row { grid-column: 1 / -1 !important; grid-row: 4 !important; }
  .game-icon-row .game-dots { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 4px !important; }
}

/* ---- 难度选择小节标题 ---- */
.diff-section-title {
  font-family: var(--cartoon-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--cartoon-stroke);
  margin-bottom: 10px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
}

.diff-section-title::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--cartoon-home-primary);
  border: 1.5px solid var(--cartoon-stroke);
}

.diff-buttons-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* ---- 难度按钮: 粗黑描边 + emoji + 副文字 ---- */
.difficulty-section {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.diff-btn {
  flex: 1;
  font-family: var(--cartoon-font-body) !important;
  font-weight: 700 !important;
  border-radius: var(--cartoon-radius-lg) !important;
  padding: 12px 8px !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.diff-btn .diff-emoji {
  font-size: 28px;
  line-height: 1;
}

.diff-btn .diff-label {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--cartoon-font-display);
}

.diff-btn .diff-sub {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 500;
}

.diff-btn.active {
  background: var(--cartoon-home-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--cartoon-stroke) !important;
  text-shadow: 1.5px 1.5px 0 var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  transform: translateY(2px) !important;
}

.diff-btn.active .diff-sub {
  opacity: 0.9;
}

.diff-btn:hover:not(.active) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  background: var(--cartoon-home-primary-light) !important;
}

.diff-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

/* 双人模式难度按钮蓝色 */
.multiplayer-screen .diff-btn.active,
#diffScreen .diff-btn.active {
  background: var(--cartoon-blue) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
}

.multiplayer-screen .diff-btn:hover:not(.active),
#diffScreen .diff-btn:hover:not(.active) {
  background: #B3E0FF !important;
}

/* ---- 开始游戏按钮: 超大粗黑描边 ---- */
.single-mode-start-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 900 !important;
  border-radius: var(--cartoon-radius-xl) !important;
  background: var(--cartoon-home-primary) !important;
  color: #FFFFFF !important;
  text-shadow: 2.5px 2.5px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.15em !important;
  border: 4px solid var(--cartoon-stroke) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: visible !important;
}

/* 按钮上的高光小装饰 */
.single-mode-start-btn::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 24px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
}

/* 开始游戏按钮旁边的星星装饰 */
.single-mode-start-btn .btn-star-left,
.single-mode-start-btn .btn-star-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--cartoon-yellow);
  -webkit-text-stroke: 2px var(--cartoon-stroke);
  text-shadow: 2px 2px 0 var(--cartoon-stroke);
  pointer-events: none;
  animation: btnStarSpin 2s ease-in-out infinite;
}

.single-mode-start-btn .btn-star-left {
  left: -14px;
  animation-delay: 0s;
}

.single-mode-start-btn .btn-star-right {
  right: -14px;
  animation-delay: 1s;
  font-size: 20px;
  color: var(--cartoon-pink);
}

@keyframes btnStarSpin {
  0%, 100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(0.6) rotate(180deg);
    opacity: 0.6;
  }
}

.single-mode-start-btn::after {
  display: none !important;
}

.single-mode-start-btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 10px 0 var(--cartoon-stroke) !important;
  background: var(--cartoon-home-primary) !important;
}

.single-mode-start-btn:active {
  transform: translateY(4px) scale(0.98) !important;
  box-shadow: 0 2px 0 var(--cartoon-stroke) !important;
}

/* 开始游戏按钮图标 */
.single-mode-start-btn .btn-icon {
  font-size: 28px;
  filter: drop-shadow(2px 2px 0 var(--cartoon-stroke));
  margin-right: 8px;
}

/* 底部提示 */
.start-hint {
  text-align: center;
  font-size: 12px;
  color: var(--cartoon-stroke);
  opacity: 0.6;
  margin-top: 12px;
  font-family: var(--cartoon-font-body);
  font-weight: 500;
}

/* ---- 难度按钮星星装饰 ---- */
.difficulty-section {
  position: relative !important;
}

.diff-btn {
  position: relative !important;
  overflow: visible !important;
}

.diff-btn .diff-star {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 16px;
  color: var(--cartoon-yellow);
  -webkit-text-stroke: 1.5px var(--cartoon-stroke);
  text-shadow: 1.5px 1.5px 0 var(--cartoon-stroke);
  pointer-events: none;
  animation: diffStarTwinkle 1.8s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.diff-btn.active .diff-star {
  opacity: 1;
}

@keyframes diffStarTwinkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(0.7) rotate(25deg);
  }
}

/* ============================================================
   单人模式页面: 电脑端左右分栏布局
   左列: 游戏卡片(大图+标题+描述)  右列: 难度选择+开始按钮
   ============================================================ */

@media (min-width: 900px) {
  .single-mode-screen {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 40px !important;
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 24px 32px !important;
    align-items: start !important;
  }

  .single-mode-screen.show {
    display: grid !important;
  }

  /* 左边: 游戏卡片(占满左列所有行) */
  .single-mode-screen > .game-select-container {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    margin-bottom: 0 !important;
  }

  .single-mode-screen .game-card {
    padding: 24px !important;
  }

  /* 右边: 难度选择 */
  .single-mode-screen > .difficulty-section {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
    align-self: end !important;
  }

  /* 右边: 开始按钮 */
  .single-mode-screen > .single-mode-start-btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    height: clamp(68px, 7vh, 84px) !important;
    font-size: clamp(20px, 2.5vw, 26px) !important;
  }

  /* 右边: 底部提示 */
  .single-mode-screen > .start-hint {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: -8px !important;
    font-size: 13px !important;
  }

  /* 游戏卡片内部保持垂直布局 */
  .single-mode-screen .game-icon-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    width: 100% !important;
  }

  .single-mode-screen .game-select-arrow.prev { grid-column: 1 !important; grid-row: 1 !important; }
  .single-mode-screen .game-icon-column { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; }
  .single-mode-screen .game-select-arrow.next { grid-column: 3 !important; grid-row: 1 !important; }
  .single-mode-screen .game-title { grid-column: 1 / -1 !important; grid-row: 2 !important; text-align: center !important; font-size: clamp(32px, 4vw, 44px) !important; }
  .single-mode-screen .game-desc { grid-column: 1 / -1 !important; grid-row: 3 !important; text-align: center !important; padding: 0 20px !important; }
  .single-mode-screen .game-tag-row { grid-column: 1 / -1 !important; grid-row: 4 !important; justify-content: center !important; }
  .single-mode-screen .game-dots { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 4px !important; }

  /* 游戏图标框 */
  .single-mode-screen .game-icon-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .single-mode-screen .game-select-arrow {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
  }

  /* 难度按钮 */
  .single-mode-screen .diff-section-title {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  .single-mode-screen .diff-buttons-row {
    gap: 12px !important;
  }

  .single-mode-screen .diff-btn {
    padding: 16px 8px !important;
  }

  .single-mode-screen .diff-btn .diff-emoji {
    font-size: 32px !important;
  }

  .single-mode-screen .diff-btn .diff-label {
    font-size: 15px !important;
  }

  .single-mode-screen .diff-btn .diff-sub {
    font-size: 11px !important;
  }

  .single-mode-start-btn .btn-icon {
    font-size: 30px !important;
  }

  /* 游戏标签 */
  .game-tag {
    font-size: 12px !important;
    padding: 5px 14px !important;
  }
}

/* 极宽屏优化 */
@media (min-width: 1200px) {
  .single-mode-screen {
    max-width: 1150px !important;
    gap: 28px 40px !important;
  }
}


/* ============================================================
   BOLD CARTOON — 双人模式选择页 (雾霾蓝主题)
   设计语言: 4px黑描边 + 底部硬阴影 + 大圆角 + 弹跳
   ============================================================ */

/* ---- 双人模式页面容器 ---- */
.multiplayer-screen {
  position: relative !important;
  background: transparent !important;
}

/* 双人模式游戏卡片星星装饰 */
.multiplayer-screen .game-card::before {
  content: '★';
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 24px;
  color: var(--cartoon-yellow);
  -webkit-text-stroke: 2px var(--cartoon-stroke);
  text-shadow: 2px 2px 0 var(--cartoon-stroke);
  z-index: 10;
  animation: starTwinkle 2s ease-in-out infinite;
  pointer-events: none;
}

.multiplayer-screen .game-card::after {
  content: '✦';
  position: absolute;
  top: 20px;
  left: 12px;
  font-size: 18px;
  color: var(--cartoon-pink);
  -webkit-text-stroke: 1.5px var(--cartoon-stroke);
  text-shadow: 1.5px 1.5px 0 var(--cartoon-stroke);
  z-index: 10;
  animation: starTwinkle 2.5s ease-in-out infinite 0.5s;
  pointer-events: none;
}

/* ---- 双人模式返回按钮: 粗黑描边胶囊 ---- */
.multiplayer-screen .single-mode-back-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-full) !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}

.multiplayer-screen .single-mode-back-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  background: #B3E0FF !important;
}

.multiplayer-screen .single-mode-back-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

/* ---- 双人模式菜单操作按钮: 粗黑描边 ---- */
.multiplayer-screen .menu-action-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  border: 3px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-md) !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.05em !important;
  font-size: 0.875rem !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}

.multiplayer-screen .menu-action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 var(--cartoon-stroke) !important;
  background: var(--cartoon-yellow) !important;
}

.multiplayer-screen .menu-action-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

.multiplayer-screen .menu-action-btn-ck {
  background: var(--cartoon-yellow) !important;
}

.multiplayer-screen .menu-action-btn-ck:hover {
  background: #FFE66D !important;
}

/* ---- 双人模式游戏选择箭头: 粗黑描边圆形 ---- */
.multiplayer-screen .game-select-arrow {
  background: #FFFFFF !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  color: var(--cartoon-stroke) !important;
  font-weight: 900 !important;
  font-family: var(--cartoon-font-display) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
}

.multiplayer-screen .game-select-arrow:hover {
  background: #B3E0FF !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
}

.multiplayer-screen .game-select-arrow:active {
  transform: scale(0.92) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

/* ---- 双人模式游戏图标框: 粗黑描边大卡片 ---- */
.multiplayer-screen .game-icon-box {
  border: 4px solid var(--cartoon-stroke) !important;
  border-radius: var(--cartoon-radius-lg) !important;
  background: linear-gradient(180deg, #FFFFFF, #EBF5FF) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke), 0 10px 20px rgba(0,0,0,0.1) !important;
  transition: all 0.2s cubic-bezier(.34,1.56,.64,1) !important;
  overflow: hidden !important;
}

.multiplayer-screen .game-icon-box:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 9px 0 var(--cartoon-stroke), 0 14px 28px rgba(0,0,0,0.15) !important;
}

/* ---- 双人模式游戏标题: 隐藏（腾出空间放大卡片） ---- */
.multiplayer-screen .game-title {
  display: none !important;
}

/* ---- 双人模式游戏描述: 隐藏 ---- */
.multiplayer-screen .game-desc {
  display: none !important;
}

/* ---- 双人模式游戏卡片: 更紧凑, 更大的预览区 ---- */
.multiplayer-screen .game-card {
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.multiplayer-screen .menu-action-row {
  margin-bottom: 12px !important;
}

.multiplayer-screen .game-icon-box {
  margin-bottom: 0 !important;
}

/* ---- 双人模式 game-icon-row 布局: 移除标题描述后重新排列 ---- */
/* 桌面端: 箭头+图标框在第一行, 标签第二行, 指示器第三行 */
@media (min-width: 481px) {
  .multiplayer-screen .game-icon-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    width: 100% !important;
  }
  .multiplayer-screen .game-icon-row .game-select-arrow.prev { grid-column: 1 !important; grid-row: 1 !important; }
  .multiplayer-screen .game-icon-row .game-icon-column { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; }
  .multiplayer-screen .game-icon-row .game-select-arrow.next { grid-column: 3 !important; grid-row: 1 !important; }
  .multiplayer-screen .game-icon-row .game-tag-row { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .multiplayer-screen .game-icon-row .game-dots { grid-column: 1 / -1 !important; grid-row: 3 !important; margin-top: 2px !important; }
}

/* 手机端: 图标框占满第一行, 箭头+标题在第二行, 标签第三行, 指示器第四行 */
@media (max-width: 480px) {
  .multiplayer-screen .game-icon-row {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    width: 100% !important;
  }
  .multiplayer-screen .game-icon-row .game-icon-column {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  .multiplayer-screen .game-icon-row .game-select-arrow.prev { grid-column: 1 !important; grid-row: 2 !important; }
  .multiplayer-screen .game-icon-row .game-select-arrow.next { grid-column: 3 !important; grid-row: 2 !important; }
  .multiplayer-screen .game-icon-row .game-tag-row { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  .multiplayer-screen .game-icon-row .game-dots { grid-column: 1 / -1 !important; grid-row: 4 !important; margin-top: 2px !important; }
}

/* ---- 开始匹配按钮: 超大粗黑描边蓝色糖果 ---- */
.multiplayer-start-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 900 !important;
  border-radius: var(--cartoon-radius-xl) !important;
  background: var(--cartoon-blue) !important;
  color: #FFFFFF !important;
  text-shadow: 2.5px 2.5px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.15em !important;
  border: 4px solid var(--cartoon-stroke) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  overflow: visible !important;
  height: clamp(60px, 8vh, 80px) !important;
  font-size: clamp(18px, 3vw, 26px) !important;
}

/* 按钮上的高光小装饰 */
.multiplayer-start-btn::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 24px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
}

.multiplayer-start-btn::after {
  display: none !important;
}

.multiplayer-start-btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 10px 0 var(--cartoon-stroke) !important;
  background: var(--cartoon-blue) !important;
}

.multiplayer-start-btn:active {
  transform: translateY(4px) scale(0.98) !important;
  box-shadow: 0 2px 0 var(--cartoon-stroke) !important;
}

/* ---- 房间按钮(创建/加入): 粗黑描边 ---- */
.multiplayer-room-section {
  margin-top: 12px !important;
}

.multiplayer-room-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.multiplayer-room-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  border-radius: var(--cartoon-radius-lg) !important;
  padding: 12px 28px !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.08em !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  font-size: clamp(14px, 2vw, 18px) !important;
  position: relative !important;
  overflow: visible !important;
}

.multiplayer-room-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  background: #B3E0FF !important;
}

.multiplayer-room-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

.multiplayer-room-btn.active {
  background: var(--cartoon-blue) !important;
  color: #FFFFFF !important;
  text-shadow: 2px 2px 0 var(--cartoon-stroke) !important;
  transform: translateY(2px) !important;
}

/* ---- 邀请码框: 粗黑描边卡片 ---- */
.room-code-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-radius: var(--cartoon-radius-lg) !important;
  background: linear-gradient(180deg, #FFFFFF, #EBF5FF) !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  box-shadow: 0 5px 0 var(--cartoon-stroke) !important;
  margin: 0 auto 16px !important;
  max-width: 360px !important;
}

.room-code-label {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 700 !important;
  color: var(--cartoon-stroke) !important;
  font-size: clamp(14px, 2vw, 16px) !important;
  letter-spacing: 0.05em !important;
}

.room-code-value {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  color: var(--cartoon-blue) !important;
  font-size: clamp(20px, 3.5vw, 28px) !important;
  -webkit-text-stroke: 1.5px var(--cartoon-stroke) !important;
  text-shadow: 2px 2px 0 var(--cartoon-stroke) !important;
  flex: 1 !important;
  text-align: center !important;
}

/* 复制按钮: 粗黑描边 */
.btn-copy {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  border-radius: var(--cartoon-radius-full) !important;
  padding: 8px 20px !important;
  background: var(--cartoon-yellow) !important;
  color: var(--cartoon-stroke) !important;
  border: 3px solid var(--cartoon-stroke) !important;
  box-shadow: 0 3px 0 var(--cartoon-stroke) !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  letter-spacing: 0.05em !important;
  font-size: clamp(12px, 1.8vw, 14px) !important;
}

.btn-copy:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 var(--cartoon-stroke) !important;
  background: #FFE66D !important;
}

.btn-copy:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

/* ---- 加入房间输入框: 粗黑描边 ---- */
.room-join-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 auto 16px !important;
  max-width: 360px !important;
}

.room-input {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  font-size: clamp(16px, 2.5vw, 20px) !important;
  padding: 12px 20px !important;
  border-radius: var(--cartoon-radius-md) !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  text-align: center !important;
  flex: 1 !important;
  transition: all 0.15s ease !important;
}

.room-input:focus {
  outline: none !important;
  border-color: var(--cartoon-blue) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke), 0 0 0 4px rgba(116, 192, 252, 0.3) !important;
}

.room-input::placeholder {
  color: rgba(45, 45, 45, 0.4) !important;
  letter-spacing: 0.05em !important;
}

.room-join-box .multiplayer-room-btn {
  padding: 12px 24px !important;
  font-size: clamp(14px, 2vw, 16px) !important;
}

/* ---- 房间状态文字 ---- */
.room-status {
  font-family: var(--cartoon-font-body) !important;
  font-weight: 500 !important;
  color: var(--cartoon-stroke) !important;
  opacity: 0.7 !important;
  text-align: center !important;
  font-size: clamp(13px, 2vw, 15px) !important;
  letter-spacing: 0.05em !important;
}

/* ---- 双人模式难度选择页 ---- */
#diffScreen {
  position: relative !important;
}

#diffScreen .diff-btn {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  border-radius: var(--cartoon-radius-full) !important;
  padding: 14px 32px !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.08em !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  font-size: clamp(16px, 2.5vw, 20px) !important;
}

#diffScreen .diff-btn.active {
  background: var(--cartoon-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--cartoon-stroke) !important;
  text-shadow: 2px 2px 0 var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  transform: translateY(2px) !important;
}

#diffScreen .diff-btn:hover:not(.active) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  background: #B3E0FF !important;
}

#diffScreen .diff-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

#diffBtnBack {
  font-family: var(--cartoon-font-display) !important;
  font-weight: 800 !important;
  border-radius: var(--cartoon-radius-full) !important;
  background: #FFFFFF !important;
  color: var(--cartoon-stroke) !important;
  border: 3.5px solid var(--cartoon-stroke) !important;
  box-shadow: 0 4px 0 var(--cartoon-stroke) !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  padding: 10px 24px !important;
}

#diffBtnBack:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke) !important;
  background: #B3E0FF !important;
}

#diffBtnBack:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--cartoon-stroke) !important;
}

/* ============================================================
   双人模式页面: 电脑端居中适配(大卡片+紧凑布局)
   ============================================================ */

@media (min-width: 768px) {
  .multiplayer-screen {
    max-width: 580px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 24px !important;
  }

  .multiplayer-screen .game-select-container {
    margin-bottom: 16px !important;
  }

  .multiplayer-screen .game-card {
    padding: 20px !important;
  }

  .multiplayer-screen .game-icon-box {
    margin-bottom: 0 !important;
  }

  .multiplayer-screen .game-title {
    display: none !important;
  }

  .multiplayer-screen .game-desc {
    display: none !important;
  }

  .multiplayer-start-btn {
    height: clamp(60px, 7vh, 76px) !important;
    font-size: clamp(18px, 2.5vw, 24px) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .multiplayer-room-section {
    margin-top: 10px !important;
  }

  .multiplayer-room-buttons {
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  .multiplayer-room-btn {
    padding: 12px 32px !important;
    font-size: clamp(15px, 1.8vw, 18px) !important;
  }

  .room-code-box {
    max-width: 420px !important;
    padding: 16px 24px !important;
    margin-bottom: 14px !important;
  }

  .room-join-box {
    max-width: 420px !important;
    margin-bottom: 14px !important;
  }
}

/* ============================================================
   单人模式 · 按 cartoon-v2 设计文档重构 (版本 20260816singleUI)
   结构: 顶部操作栏(返回左 + 皮肤/打卡右) → 游戏卡片(滑块+预览框+信息+指示器)
   关键: 预览框 .game-preview 内放真实游戏演示动画 canvas(#gameIcon)
   ============================================================ */
.single-mode-screen {
  align-items: center !important;
}

/* ---- 顶部操作栏 ---- */
.top-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 680px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 2 !important;
}
.action-left,
.action-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.single-mode-screen .single-mode-back-btn {
  align-self: auto !important;
  margin-bottom: 0 !important;
}

/* ---- 游戏卡片区 ---- */
.game-card-section {
  width: 100% !important;
  max-width: 680px !important;
}

/* ---- 滑块: 箭头 + 预览列 ---- */
.game-slider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}
.game-preview-wrap {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ---- 预览框: 放真实演示动画 canvas ---- */
.game-preview {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: var(--cartoon-radius-lg) !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(160deg, #ddeadd, #c2d8c9) !important;
  border: 4px solid var(--cartoon-stroke) !important;
  box-shadow: 0 6px 0 var(--cartoon-stroke), 0 10px 20px rgba(0,0,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(.34,1.56,.64,1) !important;
}
.game-preview:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 9px 0 var(--cartoon-stroke), 0 14px 28px rgba(0,0,0,0.15) !important;
}
.game-preview .game-icon-canvas,
.game-preview #gameIcon,
.game-preview .game-icon {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* ---- 游戏信息(标题/描述/标签) ---- */
.game-info {
  text-align: center !important;
  width: 100% !important;
}

/* ---- 手机端: 预览框占满, 箭头贴预览两侧 ---- */
@media (max-width: 480px) {
  .top-action-bar {
    max-width: 100% !important;
  }
  .game-card-section {
    max-width: 100% !important;
  }
  .game-slider {
    gap: 6px !important;
  }
  .game-preview-wrap {
    gap: 8px !important;
  }
}

/* ============================================================
   双人模式 · 紧凑布局 + 放大游戏预览区 (v17)
   ============================================================ */

/* ---- 游戏标题和描述: 完全隐藏 ---- */
.multiplayer-screen .game-title,
.multiplayer-screen .game-desc {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* ---- 游戏卡片: 更紧凑 ---- */
.multiplayer-screen .game-card {
  padding: 12px !important;
  margin-bottom: 12px !important;
}

/* ---- 操作按钮行: 更紧凑 ---- */
.multiplayer-screen .menu-action-row {
  margin-bottom: 8px !important;
}

/* ---- 游戏图标框: 放大 ---- */
.multiplayer-screen .game-icon-box {
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.multiplayer-screen .game-icon-canvas {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ---- 游戏选择容器: 更紧凑 ---- */
.multiplayer-screen .game-select-container {
  margin-bottom: 10px !important;
}

/* ---- 开始匹配按钮: 更紧凑 ---- */
.multiplayer-start-btn {
  height: clamp(52px, 7vh, 68px) !important;
  font-size: clamp(16px, 2.5vw, 22px) !important;
  margin-bottom: 8px !important;
}

/* ---- 房间区域: 更紧凑 ---- */
.multiplayer-room-section {
  margin-top: 8px !important;
}

.multiplayer-room-buttons {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.multiplayer-room-btn {
  padding: 10px 24px !important;
  font-size: clamp(13px, 1.8vw, 16px) !important;
}

/* ---- 桌面端: 进一步放大预览区 + 居中 ---- */
@media (min-width: 768px) {
  .multiplayer-screen {
    max-width: 640px !important;
    padding: 20px 24px !important;
  }

  .multiplayer-screen .game-card {
    padding: 16px !important;
  }

  .multiplayer-screen .menu-action-row {
    margin-bottom: 10px !important;
  }

  .multiplayer-screen .game-icon-box {
    margin-bottom: 0 !important;
  }

  .multiplayer-start-btn {
    max-width: 460px !important;
    height: clamp(56px, 7vh, 72px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    margin-bottom: 10px !important;
  }

  .multiplayer-room-section {
    margin-top: 8px !important;
  }

  .multiplayer-room-buttons {
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .multiplayer-room-btn {
    padding: 11px 28px !important;
    font-size: clamp(14px, 1.8vw, 17px) !important;
  }

  .room-code-box {
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px 20px !important;
    margin-bottom: 12px !important;
  }

  .room-join-box {
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
  }
}

/* ---- 手机端: 紧凑适配 ---- */
@media (max-width: 480px) {
  .multiplayer-screen .game-card {
    padding: 10px !important;
    margin-bottom: 10px !important;
  }

  .multiplayer-screen .menu-action-row {
    margin-bottom: 6px !important;
  }

  .multiplayer-start-btn {
    height: clamp(48px, 8vh, 60px) !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    margin-bottom: 6px !important;
  }

  .multiplayer-room-section {
    margin-top: 6px !important;
  }

  .multiplayer-room-buttons {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .multiplayer-room-btn {
    padding: 9px 18px !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }
}

/* ============================================================
   P148-0817hudBtn2: 游戏内HUD功能按钮重设计 · 简约统一版
   参考 UI/游戏内HUD功能按钮-简约统一版新.html — 完全对齐已定型的返回按钮(#btnBack)风格:
   白底圆形 + 3px黑描边(#2D2D2D) + 黑色硬阴影(0 4px 0) + Q弹按压(cubic-bezier(0.34,1.56,0.64,1))。
   一、单人功能按钮(模型🎭/画鱼🐟/排行🏆/管理⚙️): 纯emoji图标, 无文字标签/无彩色描边。
       模型钮状态(guard 脚本驱动): is-on=浅绿底(模型已开) / is-loading=脉动(加载中/重试)。
   二、双人媒体按钮(摄像机📷/音量🔊/麦克风🎤): 同款白底黑边圆钮 + 右下黑边状态点(绿#7ED957=开/红#ff7a7a=关)。
   尺寸: 桌面64px/emoji28px, 手机(≤767px)46px/emoji20px — 与 #btnBack 等大对称。
   覆盖策略: 本层加载在 main.css 之后, ID 选择器+!important 压掉旧规则:
   #btnEmojiAdmin 蓝渐变(1,0,0) / body[data-game="fish"] #btnXxx 配色(1,2,1) /
   body[data-game] .top-bar-left > button 文字按钮通配(0,2,2) / .media-btn 38px方角(0,1,0)
   / .media-btn.active-* 绿底(0,2,0)。皮套按钮(#btnToggleAvatar)不在改版范围, 不选它。
   ============================================================ */

/* ---------- 一、单人功能按钮(返回按钮同款白底黑边圆钮+纯emoji) ---------- */
/* 选择器三组叠加(同声明): 类级(0,1,0)兜底 + body[class] #id(1,1,1)压 main.css ID 级旧规则
   + body[data-game] .top-bar-left > #id.hud-fn-btn(1,3,1)压 body[data-game="fish"]:not() #id(1,2,1)
   与 ~20 处 > button 通配规则。同 !important 时特异性高者胜。 */
.hud-fn-btn,
body[class] #btnVrmToggle,
body[class] #btnDrawFish,
body[class] #btnFishRanking,
body[class] #btnEmojiAdmin,
body[class] #btnImitateAdmin,
body[class] #btnVuiVol,
body[data-game] .top-bar-left > #btnVrmToggle.hud-fn-btn,
body[data-game] .top-bar-left > #btnDrawFish.hud-fn-btn,
body[data-game] .top-bar-left > #btnFishRanking.hud-fn-btn,
body[data-game] .top-bar-left > #btnEmojiAdmin.hud-fn-btn,
body[data-game] .top-bar-left > #btnImitateAdmin.hud-fn-btn,
body[data-game] .top-bar-left > #btnVuiVol.hud-fn-btn {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 3px solid #2D2D2D !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 0 #2D2D2D !important;
  color: #2D2D2D !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background 0.15s ease !important;
}

/* 按下: 下沉+缩小+阴影收回(Q弹, 与返回按钮一致)。
   选择器补 body #id 组(1,3,1): 与基础组同特异性+源序在后 → 稳赢基础组 box-shadow;
   基础组不写 transform(旧规则基础态无 transform), 动效/脉动动画不被压 */
.hud-fn-btn:active,
body[class] #btnVrmToggle:active,
body[class] #btnDrawFish:active,
body[class] #btnFishRanking:active,
body[class] #btnEmojiAdmin:active,
body[class] #btnImitateAdmin:active,
body[class] #btnVuiVol:active,
body #btnVrmToggle.hud-fn-btn:active,
body #btnDrawFish.hud-fn-btn:active,
body #btnFishRanking.hud-fn-btn:active,
body #btnEmojiAdmin.hud-fn-btn:active,
body #btnImitateAdmin.hud-fn-btn:active,
body #btnVuiVol.hud-fn-btn:active {
  transform: translateY(2px) scale(0.95) !important;
  box-shadow: 0 2px 0 #2D2D2D !important;
}

/* 悬停(仅精确指针设备): 放大+阴影加深 */
@media (hover: hover) and (pointer: fine) {
  .hud-fn-btn:hover,
  body[class] #btnVrmToggle:hover,
  body[class] #btnDrawFish:hover,
  body[class] #btnFishRanking:hover,
  body[class] #btnEmojiAdmin:hover,
  body[class] #btnImitateAdmin:hover,
  body[class] #btnVuiVol:hover,
  body #btnVrmToggle.hud-fn-btn:hover,
  body #btnDrawFish.hud-fn-btn:hover,
  body #btnFishRanking.hud-fn-btn:hover,
  body #btnEmojiAdmin.hud-fn-btn:hover,
  body #btnImitateAdmin.hud-fn-btn:hover,
  body #btnVuiVol.hud-fn-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 0 #2D2D2D !important;
  }
}

/* 模型钮状态变体(guard 脚本驱动): is-on=浅绿底(模型已开, 参考UI active 变体)。
   游戏内 body 常无 class(只有 data-game 属性), body[class] 会落空 —
   多组叠加: body 后代组(1,3,1)总匹配且源序在基础组之后, 稳赢基础白底 */
.hud-fn-btn.is-on,
#btnVrmToggle.hud-fn-btn.is-on,
body[class] #btnVrmToggle.hud-fn-btn.is-on,
body[data-game] #btnVrmToggle.hud-fn-btn.is-on,
body #btnVrmToggle.hud-fn-btn.is-on {
  background: linear-gradient(180deg, #F0FDF4 0%, #E8F5E9 100%) !important;
}

/* is-loading=脉动(加载中.../重试.../超时) */
.hud-fn-btn.is-loading {
  animation: hudBtn2Pulse 1s ease-in-out infinite;
}
@keyframes hudBtn2Pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* ---------- 二、双人媒体按钮(同款白底黑边圆钮+状态点) ---------- */
/* P148-0817avatarBtnFix: 皮套按钮(#btnToggleAvatar)一并纳入同款样式 —
   原保持旧 .media-btn(2px 白描边/方角)致其与相邻三钮(3px 黑描边圆钮)描边不一致,
   现统一为同款白底 3px 黑描边圆钮。其 active-avatar 绿色开启状态保留不变(见下)。 */
#btnToggleVideo.media-btn,
#btnToggleSpeaker.media-btn,
#btnToggleMic.media-btn,
#btnToggleAvatar.media-btn {
  position: relative;
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  background: #FFFFFF !important;
  border: 3px solid #2D2D2D !important;
  box-shadow: 0 4px 0 #2D2D2D !important;
  color: #2D2D2D !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background 0.15s ease !important;
  overflow: visible;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 皮套钮 active-avatar(开启=绿底)在统一白底/黑描边之上仍保留绿色开启态 */
#btnToggleAvatar.media-btn.active-avatar {
  background: linear-gradient(180deg, #95b8a6, #6b9a7e) !important;
  box-shadow: 0 4px 0 #2D2D2D !important;
}

/* active-* 开关类不改主体(状态由状态点表达), 压掉 main.css/cartoon-cute 旧绿色底规则(含 backdrop) */
#btnToggleVideo.media-btn.active-video,
#btnToggleMic.media-btn.active-mic,
#btnToggleSpeaker.media-btn.active-speaker {
  background: #FFFFFF !important;
}

#btnToggleVideo.media-btn:active,
#btnToggleSpeaker.media-btn:active,
#btnToggleMic.media-btn:active,
#btnToggleAvatar.media-btn:active {
  transform: translateY(2px) scale(0.95) !important;
  box-shadow: 0 2px 0 #2D2D2D !important;
}

@media (hover: hover) and (pointer: fine) {
  #btnToggleVideo.media-btn:hover,
  #btnToggleSpeaker.media-btn:hover,
  #btnToggleMic.media-btn:hover,
  #btnToggleAvatar.media-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 0 #2D2D2D !important;
  }
}

/* 状态点: 默认红(关); 按钮 active-* 类时绿(开)。黑描边圆点, 由 game-*-duo.js 类驱动, 纯CSS */
.hud-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid #2D2D2D;
  box-sizing: border-box;
  background: #ff7a7a;
  pointer-events: none;
}

#btnToggleVideo.active-video .hud-dot,
#btnToggleSpeaker.active-speaker .hud-dot,
#btnToggleMic.active-mic .hud-dot {
  background: #7ED957;
}

/* 麦克风说话声波动画边界改为圆形, 匹配新圆钮 */
#btnToggleMic.mic-btn.speaking::after,
#btnToggleMic.mic-btn.speaking::before {
  border-radius: 50% !important;
}

/* 重要: 媒体按钮(视频/音量/麦克风)仅双人模式才显示。
   单人模式它们带 .hidden 应保持隐藏 — 上方 #id.media-btn 基础规则(ID特异性)会覆盖
   .media-btn.hidden(类特异性)的 display:none, 此处用 (ID+类).hidden 更高特异性强制隐藏。
   P148-0818avatarHide: 皮套按钮(#btnToggleAvatar)一并纳入 — 单人模式已有
   btnVrmToggle(返回旁🎭)切换模型, 最右 media-btn-group 里的旧皮套按钮冗余,
   且 duo 各游戏 _showMediaButtons 也已始终为其加 hidden(弃用), 故同规则强制隐藏。 */
#btnToggleVideo.media-btn.hidden,
#btnToggleSpeaker.media-btn.hidden,
#btnToggleMic.media-btn.hidden,
#btnToggleAvatar.media-btn.hidden {
  display: none !important;
}

/* ---------- 手机端(≤767px): 46px 与 #btnBack 等大对称 ---------- */
@media (max-width: 767px) {
  .hud-fn-btn,
  body[class] #btnVrmToggle,
  body[class] #btnDrawFish,
  body[class] #btnFishRanking,
  body[class] #btnEmojiAdmin,
  body[class] #btnImitateAdmin,
  body[class] #btnVuiVol,
  body[data-game] .top-bar-left > #btnVrmToggle.hud-fn-btn,
  body[data-game] .top-bar-left > #btnDrawFish.hud-fn-btn,
  body[data-game] .top-bar-left > #btnFishRanking.hud-fn-btn,
  body[data-game] .top-bar-left > #btnEmojiAdmin.hud-fn-btn,
  body[data-game] .top-bar-left > #btnImitateAdmin.hud-fn-btn,
  body[data-game] .top-bar-left > #btnVuiVol.hud-fn-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
    border-width: 3px !important;
  }
  #btnToggleVideo.media-btn,
  #btnToggleSpeaker.media-btn,
  #btnToggleMic.media-btn,
  #btnToggleAvatar.media-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }
  .hud-dot {
    width: 12px;
    height: 12px;
    border-width: 2px;
    bottom: 1px;
    right: 1px;
  }

  /* P148-20260819vuiFix2: 手机端双人模仿大师隐藏"管理(设置)"按钮 — 只影响双人模仿大师。
     双人模仿大师手机端 .top-bar-left 共 返回/切换游戏/模型/管理/音量 5 个圆钮,
     46px×5+间距在 320~375px 屏放不下 → 挤成两行。手机端单独隐藏 #btnImitateAdmin
     (单人与桌面不受影响), 并强制该行不换行, 保证剩余按钮一排铺开。 */
  body.duo-imitate-active #btnImitateAdmin {
    display: none !important;
  }
  body.duo-imitate-active .top-bar-left {
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   手机端(≤767px)首页 UI 紧凑 + 底部说明压缩 (20260817homeMobileFix2)
   必须追加在文件末尾: 基础 .main-buttons(1638)/.footer-tip(1703)/.privacy-link(1712)
   在更靠后处声明, 同优先级同 !important 靠后获胜; 并用 #homePanel 前缀再提优先级, 双保险。
   作用: ①首页两按钮居中+收敛宽度(不撑满成细长条)+紧凑; ②最下方"隐私与产品说明"及底部提示上移;
        ③底部"轻量游戏·打开即玩..."提示自然两行换行(非单行)。
   ============================================================ */
@media (max-width: 767px) {
  /* 首页两按钮: 不撑满全宽(stretch 会变成细长条), 居中 + 收敛宽度;
     align-items:center 让按钮按自身宽居中不拉伸; 高度已在上方 #homePanel .main-btn 压扁(41px) */
  #homePanel .main-buttons {
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }
  #homePanel .main-btn {
    width: clamp(230px, 66vw, 320px) !important;
  }

  #homePanel .privacy-link {
    margin-top: 10px !important;
    margin-bottom: 2px !important;
    padding: 4px 6px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  /* 底部"轻量游戏..."提示: 两行自然换行(非强制单行), 字号调到恰好两行 */
  #homePanel .footer-tip {
    white-space: normal !important;
    overflow: visible !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    padding: 0 12px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.7 !important;
    font-size: clamp(9px, 1.4vw, 11px) !important;
  }
}

/* ============================================================
   手机端(≤767px)首页「铺满视口·禁滑动·按钮放大」 (20260817homeMobileFill)
   用户要求: 玩家上下不能滑动, 屏幕内恰好铺满所有功能/信息, 底部文字贴到屏幕底部不浪费空隙;
             单人放松/双人对战按钮放大。
   实现: ①首页可见时 html/body 禁滚动(overflow:hidden), 面板高度 = 100dvh 恰好铺满整屏;
         ②justify-content:space-between 使标题上、按钮中、隐私/底部提示下, 底部文字贴底不留空白;
         ③把 .main-btn 放大(加宽/加高/加大字号), 保持居中胶囊状, 不撑满全宽细长条。
   说明: 仅作用于首页可见(body:has #menuScreen 非隐藏)时, 进单人/双人等其它页面自动失效,
         不影响其它页面自身滚动。必须追加在文件末尾(覆盖位置在 3322/1135 两个手机端块之后)。
   ============================================================ */
@media (max-width: 767px) {
  /* 彻底禁滚动: 同时禁 html 与 body (移动端真实滚动容器是 html, 仅 body overflow:hidden 挡不住) */
  html:has(body #menuScreen:not([style*="display: none"])),
  body:has(#menuScreen:not([style*="display: none"])) {
    height: 100% !important;
    overflow: hidden !important;
  }

  body:has(#menuScreen:not([style*="display: none"])) #homePanel {
    height: 100dvh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: hidden !important;
    width: 100% !important;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px) !important;
  }

  /* 放大 单人放松/双人对战 按钮 (width/height/font-size 同步放大, 保持居中胶囊, 不成细长条) */
  body:has(#menuScreen:not([style*="display: none"])) #homePanel .main-btn {
    width: clamp(280px, 80vw, 400px) !important;
    height: clamp(54px, 7vh, 62px) !important;
    font-size: clamp(18px, 4.6vw, 23px) !important;
  }

  /* 底部文字贴紧屏幕底部 padding, 不留底部空白 */
  body:has(#menuScreen:not([style*="display: none"])) #homePanel .footer-tip {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body:has(#menuScreen:not([style*="display: none"])) #homePanel .privacy-link {
    margin-top: 12px !important;
    margin-bottom: 4px !important;
  }
}

/* P148-20260827mint2: 移除 20260817homeMobileBlack 手机端纯黑标题覆盖 —
   动动脖子标题全端统一为可爱字体+薄荷描边(Mint Stroke)卡通描边字,
   新需求(可爱的文字+薄荷描边特效)覆盖旧的"纯黑先凑合"方案。手机字号仍走上方媒体查询。 */

/* ============================================================
   P148-0817ppHud: 乒乓球 HUD 计分板 — 🌿 新设计 · 护眼柔和
   参考: UI/pingpong-ui-redesign.html「HUD 计分板」
   雾霾蓝(对手)+豆绿(玩家)低饱和双色阵营 · 深灰软描边(不用纯黑)
   暖奶油VS分隔 · 小水滴/小叶子装饰 · 柔和弹跳动画
   HTML 结构在 index.html #ppScoreboard, 由 main-app.js updateHud
   解析乒乓球 "X : Y" 比分后驱动显示, 其余游戏不受影响。
   ============================================================ */
/* P148-0817ppHud2: 用户反馈计分板太大挡视野 → 整体紧凑化(约缩小45%), 保持右上角 */
.hud .pp-scoreboard {
  position: absolute;
  top: 0;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: none; /* 抵消 .hud 继承的深色投影 */
}

/* 得分徽章 — 胶囊底 + 深灰软描边 */
.hud .pp-scoreboard .pp-score-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border: 2px solid #4a4a4a;
  border-radius: 50px;
  box-shadow: 2px 2px 0 #4a4a4a;
  animation: ppSbBadgePop 0.5s ease-out;
}

/* 对手 — 雾霾蓝 */
.hud .pp-scoreboard .pp-score-badge.opponent {
  background: linear-gradient(145deg, #c5d9ea, #8dafd0);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 玩家 — 豆绿(镜像布局) */
.hud .pp-scoreboard .pp-score-badge.player {
  background: linear-gradient(145deg, #b8d4c5, #8db09e);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  flex-direction: row-reverse;
  padding: 4px 7px 4px 9px;
}

/* 头像圆片 — 暖奶油底 */
.hud .pp-scoreboard .pp-score-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fbf8f1;
  border: 1.5px solid #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  flex-shrink: 0;
}

/* 比分数字 */
.hud .pp-scoreboard .pp-score-number {
  font-family: "Quicksand", "Rubik", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fbf8f1;
  text-shadow: 1px 1px 0 #4a4a4a;
  line-height: 1;
  min-width: 16px;
  text-align: center;
}

/* 小水滴/小叶子装饰 — 轻柔漂浮 */
.hud .pp-scoreboard .pp-badge-deco {
  position: absolute;
  top: -5px;
  font-size: 0.5rem;
  line-height: 1;
  animation: ppSbGentleFloat 3s ease-in-out infinite;
}
.hud .pp-scoreboard .pp-score-badge.opponent .pp-badge-deco { right: 9px; }
.hud .pp-scoreboard .pp-score-badge.player .pp-badge-deco { left: 9px; animation-delay: 0.6s; }

/* VS 分隔符 — 暖奶油圆徽 */
.hud .pp-scoreboard .pp-vs-divider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hud .pp-scoreboard .pp-vs-text {
  font-family: "Quicksand", "Rubik", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  color: #6b5a3a;
  background: #f5efe3;
  border: 2px solid #4a4a4a;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 2px 2px 0 #4a4a4a;
  animation: ppSbVsSway 4s ease-in-out infinite;
  z-index: 2;
}
.hud .pp-scoreboard .pp-vs-sparkles {
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  pointer-events: none;
}
.hud .pp-scoreboard .pp-sparkle {
  position: absolute;
  font-size: 0.45rem;
  line-height: 1;
  opacity: 0.7;
  animation: ppSbSparkleTwinkle 2.5s ease-in-out infinite;
}
.hud .pp-scoreboard .pp-sparkle:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
.hud .pp-scoreboard .pp-sparkle:nth-child(2) { top: 0; right: 0; animation-delay: 0.5s; }

/* 得分变化时徽章弹跳重放(由 main-app.js _ppSbSetScore 触发) */
.hud .pp-scoreboard .pp-score-badge.pp-pop { animation: ppSbBadgePop 0.5s ease-out; }

/* 手机端：轻微缩小并保持右上对齐，避免与左侧计时器重叠 */
@media (max-width: 480px) {
  .hud .pp-scoreboard {
    right: 6px;
    transform: scale(0.9);
    transform-origin: right top;
  }
}

/* ---- 计分板关键帧(前缀 ppSb 避免与现有动画冲突) ---- */
@keyframes ppSbBadgePop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ppSbGentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(5deg); }
}
@keyframes ppSbVsSway {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.03); }
}
@keyframes ppSbSparkleTwinkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

/* ============================================================
   P148-0817ppTimer: 乒乓球 HUD 计时器 — 🌿 新设计 · 温和提醒
   参考: UI/pingpong-ui-redesign.html「HUD 计时器」
   豆绿正常态 + 暖金警告态(≤10s, 不用红色) · 时钟指针旋转
   轻柔浮动 · 与右上角计分板同款护眼风格(左上角)
   HTML 结构在 index.html #ppTimer, 由 main-app.js updateHud
   解析 "时间 Xs" 后驱动显示, 非时间文本走 hudRight 纯文本。
   ============================================================ */
.hud .pp-timer {
  position: absolute;
  top: 0;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 6px;
  background: linear-gradient(145deg, #e8f2ec, #b8d4c5);
  border: 2px solid #4a4a4a;
  border-radius: 50px;
  box-shadow: 2px 2px 0 #4a4a4a;
  text-shadow: none; /* 抵消 .hud 继承的深色投影 */
  animation: ppTmFloat 4s ease-in-out infinite;
}

/* 时钟圆片 — 暖奶油底 + 指针旋转 */
.hud .pp-timer .pp-timer-icon {
  position: relative;
  width: 26px;
  height: 26px;
  background: #fbf8f1;
  border: 1.5px solid #4a4a4a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  flex-shrink: 0;
}
.hud .pp-timer .pp-timer-icon::after {
  content: '';
  position: absolute;
  top: 3.5px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 9px;
  background: #4a4a4a;
  border-radius: 2px;
  transform-origin: bottom center;
  animation: ppTmClockHand 3s linear infinite;
  opacity: 0.7;
}

/* 标签 + 数值 */
.hud .pp-timer .pp-timer-content {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.hud .pp-timer .pp-timer-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: #5a7a6a;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hud .pp-timer .pp-timer-value {
  font-family: "Quicksand", "Rubik", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #2e4a3a;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  line-height: 1;
}

/* 小云朵/小叶子装饰 — 轻柔漂浮 */
.hud .pp-timer .pp-timer-deco {
  position: absolute;
  font-size: 0.5rem;
  line-height: 1;
  opacity: 0.7;
  animation: ppSbGentleFloat 3s ease-in-out infinite;
}
.hud .pp-timer .pp-timer-deco.top { top: -5px; right: 16px; }
.hud .pp-timer .pp-timer-deco.bottom { bottom: -5px; left: 20px; animation-delay: 0.6s; }

/* 警告状态 — 暖金色温和提醒(不用红色), 温和脉冲呼吸感 */
.hud .pp-timer.warning {
  background: linear-gradient(145deg, #f5e6c8, #e8d4a8);
  animation: ppTmGentlePulse 1.5s ease-in-out infinite;
}
.hud .pp-timer.warning .pp-timer-label {
  color: #6b5a3a;
  opacity: 0.8;
}
.hud .pp-timer.warning .pp-timer-value {
  color: #6b5a3a;
  animation: ppTmPulse 1.2s ease-in-out infinite;
}

/* 手机端：轻微缩小并保持左上对齐(与计分板对称)
   animation:none 避免浮动 transform 覆盖 scale 缩小, 兼顾移动端性能 */
@media (max-width: 480px) {
  .hud .pp-timer {
    left: 6px;
    transform: scale(0.9);
    transform-origin: left top;
    animation: none;
  }
}

/* ---- 计时器关键帧(前缀 ppTm 避免与现有动画冲突) ---- */
@keyframes ppTmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes ppTmClockHand {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ppTmPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes ppTmGentlePulse {
  0%, 100% { transform: scale(1); box-shadow: 2px 2px 0 #4a4a4a, 0 0 0 0 rgba(212, 188, 130, 0.4); }
  50% { transform: scale(1.02); box-shadow: 2px 2px 0 #4a4a4a, 0 0 0 6px rgba(212, 188, 130, 0); }
}

/* ============ P148-20260827fishTutorial: 摸鱼大师新手引导UI（复刻 UI/摸鱼大师倒计时UI.html） ============ */
#ftt{
  --ft-peach:#FFBBA8; --ft-peach-light:#FFD4C7; --ft-peach-dark:#FFA088;
  --ft-mint:#A8DCC2; --ft-mint-light:#C4E8D6; --ft-mint-dark:#8BCFAD;
  --ft-lavender:#C9B8E8; --ft-lavender-light:#DED1F2; --ft-lavender-dark:#B29DDA;
  --ft-sunshine:#FFE394; --ft-sunshine-light:#FFEFB5; --ft-sunshine-dark:#FFD56B;
  --ft-pink:#FFB8D0; --ft-pink-light:#FFD4E3; --ft-sky:#A8D8F0; --ft-sky-light:#C8E8F8;
  --ft-bg-deep:#1A1530; --ft-bg-darker:#120E22;
  --ft-bg-card:rgba(40,32,65,0.8); --ft-bg-card-inner:rgba(55,45,85,0.5);
  --ft-border-glass:rgba(255,255,255,0.18); --ft-border-glass-strong:rgba(255,255,255,0.28);
  --ft-text-primary:#FFFFFF; --ft-text-secondary:rgba(255,255,255,0.75); --ft-text-tertiary:rgba(255,255,255,0.55);
  --ft-gradient-peach:linear-gradient(135deg,#FFBBA8 0%,#FFD4C7 100%);
  --ft-gradient-mint:linear-gradient(135deg,#A8DCC2 0%,#C4E8D6 100%);
  --ft-gradient-lavender:linear-gradient(135deg,#C9B8E8 0%,#DED1F2 100%);
  --ft-gradient-sunshine:linear-gradient(135deg,#FFE394 0%,#FFEFB5 100%);
  --ft-gradient-pink:linear-gradient(135deg,#FFB8D0 0%,#FFD4E3 100%);
  --ft-gradient-rainbow:linear-gradient(135deg,#FFBBA8 0%,#FFE394 20%,#A8DCC2 45%,#A8D8F0 70%,#C9B8E8 100%);
  --ft-gradient-glass:linear-gradient(160deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.03) 60%,rgba(255,255,255,0.06) 100%);
  --ft-shadow-card:0 12px 48px rgba(0,0,0,0.5);
  --ft-shadow-cute:0 5px 0 rgba(0,0,0,0.2),0 10px 24px rgba(0,0,0,0.35);
  --ft-shadow-button:0 6px 0 rgba(0,0,0,0.25),0 12px 32px rgba(0,0,0,0.4);
  --ft-shadow-button-hover:0 8px 0 rgba(0,0,0,0.25),0 16px 40px rgba(0,0,0,0.45);
  --ft-shadow-button-active:0 3px 0 rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.35);
  --ft-glow-peach:0 0 28px rgba(255,187,168,0.5);
  --ft-glow-mint:0 0 28px rgba(168,220,194,0.5);
  --ft-glow-lavender:0 0 28px rgba(201,184,232,0.5);
  --ft-glow-sunshine:0 0 32px rgba(255,227,148,0.6);
  --ft-glow-pink:0 0 28px rgba(255,184,208,0.5);
  --ft-radius-sm:12px; --ft-radius-md:20px; --ft-radius-lg:32px; --ft-radius-xl:44px; --ft-radius-2xl:56px; --ft-radius-full:9999px;
  --ft-font-display:'ZCOOL KuaiLe','Baloo 2',cursive,sans-serif;
  --ft-font-body:'Baloo 2','ZCOOL KuaiLe','PingFang SC','Microsoft YaHei',sans-serif;
  --ft-font-xs:12px; --ft-font-sm:14px; --ft-font-base:16px; --ft-font-lg:18px; --ft-font-xl:22px;
  --ft-font-2xl:28px; --ft-font-3xl:40px; --ft-font-4xl:56px; --ft-font-5xl:76px;
  --ft-text-shadow-pop:0 4px 0 rgba(0,0,0,0.25),0 8px 20px rgba(0,0,0,0.4);
  --ft-text-shadow-soft:0 2px 10px rgba(0,0,0,0.35);
  --ft-blur-glass:28px; --ft-blur-soft:14px;
  --ft-ease-bounce:cubic-bezier(0.68,-0.55,0.265,1.55);
  --ft-ease-elastic:cubic-bezier(0.34,1.56,0.64,1);
  --ft-transition-fast:0.18s var(--ft-ease-elastic);
  --ft-transition-normal:0.35s var(--ft-ease-elastic);
  --ft-transition-bounce:0.45s var(--ft-ease-bounce);
}
#ftt.ft-viewport{
  position:fixed; inset:0; width:100%; height:100%; overflow:hidden; margin:0;
  font-family:var(--ft-font-body); font-size:16px; line-height:1.6; color:var(--ft-text-primary);
  background:#1A1530; z-index:9999; -webkit-font-smoothing:antialiased;
}
.ft-font-display{font-family:var(--ft-font-display);letter-spacing:2px}
.ft-font-body{font-family:var(--ft-font-body)}
.ft-text-gradient-rainbow{background:var(--ft-gradient-rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ft-text-shadow-pop{text-shadow:var(--ft-text-shadow-pop)}
.ft-glass-card{background:var(--ft-gradient-glass),var(--ft-bg-card);backdrop-filter:blur(var(--ft-blur-glass));-webkit-backdrop-filter:blur(var(--ft-blur-glass));border:3px solid var(--ft-border-glass-strong);box-shadow:var(--ft-shadow-card)}
.ft-bg-deep{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1A1530 0%,#120E22 100%)}
.ft-bg-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px)}
.ft-bg-orb-peach{top:-10%;left:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(255,187,168,0.25) 0%,rgba(255,187,168,0.08) 40%,transparent 70%)}
.ft-bg-orb-mint{bottom:8%;right:5%;width:460px;height:460px;background:radial-gradient(circle,rgba(168,220,194,0.2) 0%,rgba(168,220,194,0.06) 40%,transparent 70%)}
.ft-bg-orb-lavender{top:40%;left:35%;width:400px;height:400px;background:radial-gradient(circle,rgba(201,184,232,0.18) 0%,rgba(201,184,232,0.05) 40%,transparent 70%)}
.ft-bg-orb-sunshine{top:8%;right:15%;width:340px;height:340px;background:radial-gradient(circle,rgba(255,227,148,0.15) 0%,rgba(255,227,148,0.04) 40%,transparent 70%)}
.ft-bg-orb-pink{bottom:12%;left:8%;width:320px;height:320px;background:radial-gradient(circle,rgba(255,184,208,0.16) 0%,rgba(255,184,208,0.04) 40%,transparent 70%)}
.ft-mask-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:5;pointer-events:none;opacity:0}
@keyframes ft-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ft-fade-out{from{opacity:1}to{opacity:0}}
.ft-animate-fade-in{animation:ft-fade-in 0.8s ease-out forwards}
.ft-animate-fade-out{animation:ft-fade-out 0.6s ease-in forwards}
.ft-underwater-decor{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.ft-bubble{position:absolute;font-size:24px;opacity:0.5;filter:drop-shadow(0 2px 6px rgba(168,216,240,0.4))}
.ft-bubble-1{bottom:-50px;left:15%;font-size:28px;animation-delay:0s}
.ft-bubble-2{bottom:-50px;left:30%;font-size:20px;animation-delay:2s}
.ft-bubble-3{bottom:-50px;left:50%;font-size:24px;animation-delay:4s}
.ft-bubble-4{bottom:-50px;left:68%;font-size:32px;animation-delay:1s}
.ft-bubble-5{bottom:-50px;left:82%;font-size:22px;animation-delay:3s}
.ft-bubble-6{bottom:-50px;left:90%;font-size:26px;animation-delay:5s}
@keyframes ft-bubble-rise{0%{transform:translateY(0) translateX(0) scale(0.6);opacity:0}10%{opacity:0.6}50%{transform:translateY(-450px) translateX(20px) scale(1)}90%{opacity:0.4}100%{transform:translateY(-900px) translateX(-10px) scale(0.8);opacity:0}}
.ft-animate-bubble-rise{animation:ft-bubble-rise 8s ease-in-out infinite}
.ft-ripple{position:absolute;border-radius:50%;border:2px solid rgba(168,216,240,0.15);pointer-events:none}
.ft-ripple-1{top:20%;left:20%;width:200px;height:100px;animation-delay:0s}
.ft-ripple-2{top:60%;right:15%;width:300px;height:140px;animation-delay:3s}
@keyframes ft-ripple-expand{0%{transform:scale(0.3);opacity:0}30%{opacity:1}100%{transform:scale(2);opacity:0}}
.ft-animate-ripple{animation:ft-ripple-expand 6s ease-out infinite}
@keyframes ft-float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes ft-float-alt{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes ft-wiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes ft-fish-wiggle{0%,100%{transform:translateY(0px) rotate(-8deg) scaleX(-1)}25%{transform:translateY(-6px) rotate(-3deg) scaleX(-1)}50%{transform:translateY(0px) rotate(8deg) scaleX(-1)}75%{transform:translateY(-4px) rotate(3deg) scaleX(-1)}}
.ft-animate-fish-wiggle{animation:ft-fish-wiggle 2.5s ease-in-out infinite}
@keyframes ft-bounce-in{0%{transform:scale(0.3) translateY(20px);opacity:0}50%{transform:scale(1.06) translateY(-4px)}70%{transform:scale(0.97) translateY(2px)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes ft-bounce-out{0%{transform:scale(1) translateY(0);opacity:1}20%{transform:scale(1.05) translateY(-10px);opacity:1}100%{transform:scale(0.3) translateY(-200px);opacity:0}}
.ft-animate-bounce-out{animation:ft-bounce-out 0.8s var(--ft-ease-bounce) forwards}
@keyframes ft-sparkle{0%,100%{opacity:0.3;transform:scale(0.7) rotate(0deg)}50%{opacity:1;transform:scale(1.3) rotate(180deg)}}
@keyframes ft-bg-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-20px) scale(1.08)}66%{transform:translate(-20px,15px) scale(0.95)}}
@keyframes ft-tip-float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-6px)}}
.ft-animate-float{animation:ft-float 4s ease-in-out infinite}
.ft-animate-float-alt{animation:ft-float-alt 4.5s ease-in-out infinite}
.ft-animate-wiggle{animation:ft-wiggle 2.5s ease-in-out infinite}
.ft-animate-bounce-in{animation:ft-bounce-in 0.7s var(--ft-ease-bounce) forwards}
.ft-animate-sparkle{animation:ft-sparkle 2.2s ease-in-out infinite}
.ft-animate-bg-drift-1{animation:ft-bg-drift 20s ease-in-out infinite}
.ft-animate-bg-drift-2{animation:ft-bg-drift 24s ease-in-out infinite reverse}
.ft-animate-bg-drift-3{animation:ft-bg-drift 28s ease-in-out infinite}
.ft-animate-bg-drift-4{animation:ft-bg-drift 22s ease-in-out infinite reverse}
.ft-animate-bg-drift-5{animation:ft-bg-drift 26s ease-in-out infinite}
.ft-animate-tip-float{animation:ft-tip-float 3.5s ease-in-out infinite}
@keyframes ft-countdown-pop{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.3)}70%{transform:scale(0.9)}100%{transform:scale(1);opacity:1}}
.ft-animate-countdown-pop{animation:ft-countdown-pop 0.5s var(--ft-ease-bounce) forwards}
@keyframes ft-fish-bubble{0%{transform:translateY(0) scale(0.5);opacity:0}20%{opacity:0.8}100%{transform:translateY(-80px) scale(1);opacity:0}}
.ft-animate-fish-bubble{animation:ft-fish-bubble 2.5s ease-out infinite}
.ft-tutorial-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.ft-tutorial-card{width:560px;border-radius:var(--ft-radius-2xl);padding:40px 44px 36px;position:relative;opacity:0}
.ft-mascots{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:16px;height:160px}
.ft-mascot-fish{font-size:140px;line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(168,216,240,0.3));transform-origin:center center;position:relative;z-index:2}
.ft-fish-bubble{position:absolute;font-size:22px;z-index:1;pointer-events:none}
.ft-fish-bubble-1{top:30px;left:calc(50% - 90px);animation-delay:0s;font-size:20px}
.ft-fish-bubble-2{top:60px;left:calc(50% - 110px);animation-delay:0.8s;font-size:16px}
.ft-fish-bubble-3{top:20px;right:calc(50% - 100px);animation-delay:1.5s;font-size:18px}
.ft-fish-bubble-4{bottom:40px;left:calc(50% - 80px);animation-delay:0.5s;font-size:24px}
.ft-fish-bubble-5{top:10px;right:calc(50% - 80px);animation-delay:1.2s;font-size:14px}
.ft-sparkle{position:absolute;pointer-events:none;font-size:22px;opacity:0.8}
.ft-title-section{text-align:center;margin-bottom:28px;position:relative}
.ft-main-title{font-family:var(--ft-font-display);font-size:var(--ft-font-5xl);letter-spacing:8px;background:var(--ft-gradient-rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(255,187,168,0.2);filter:drop-shadow(0 4px 0 rgba(0,0,0,0.25));margin-bottom:6px;line-height:1.1;position:relative;display:inline-block}
.ft-subtitle{font-family:var(--ft-font-display);font-size:var(--ft-font-lg);color:var(--ft-text-secondary);letter-spacing:3px}
.ft-tips-section{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.ft-tip-item{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:var(--ft-radius-xl);border:2px solid rgba(255,255,255,0.2);box-shadow:0 3px 0 rgba(0,0,0,0.15),0 6px 16px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2);transition:transform var(--ft-transition-bounce);position:relative}
.ft-tip-item:hover{transform:translateX(4px) scale(1.02)}
.ft-tip-number{width:32px;height:32px;border-radius:var(--ft-radius-full);display:flex;align-items:center;justify-content:center;font-family:var(--ft-font-display);font-size:var(--ft-font-lg);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.3);flex-shrink:0;font-weight:bold;box-shadow:0 2px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.3)}
.ft-tip-item-peach .ft-tip-number{background:linear-gradient(135deg,#FFBBA8 0%,#FFA088 100%)}
.ft-tip-item-mint .ft-tip-number{background:linear-gradient(135deg,#A8DCC2 0%,#8BCFAD 100%)}
.ft-tip-item-lavender .ft-tip-number{background:linear-gradient(135deg,#C9B8E8 0%,#B29DDA 100%)}
.ft-tip-item-peach{background:linear-gradient(135deg,rgba(255,187,168,0.25) 0%,rgba(255,187,168,0.1) 100%);border-color:rgba(255,187,168,0.35)}
.ft-tip-item-mint{background:linear-gradient(135deg,rgba(168,220,194,0.25) 0%,rgba(168,220,194,0.1) 100%);border-color:rgba(168,220,194,0.35)}
.ft-tip-item-lavender{background:linear-gradient(135deg,rgba(201,184,232,0.25) 0%,rgba(201,184,232,0.1) 100%);border-color:rgba(201,184,232,0.35)}
.ft-tip-icon{font-size:30px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);border-radius:var(--ft-radius-md);border:2px solid rgba(255,255,255,0.15);box-shadow:inset 0 1px 2px rgba(255,255,255,0.2)}
.ft-tip-text{font-family:var(--ft-font-display);font-size:var(--ft-font-xl);color:var(--ft-text-primary);letter-spacing:1.5px;line-height:1.4;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.ft-countdown-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:8px}
.ft-countdown-number{font-family:var(--ft-font-display);font-size:96px;line-height:1;letter-spacing:4px;background:linear-gradient(180deg,#FFEFB5 0%,#FFE394 40%,#FFD56B 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 4px 0 rgba(180,130,30,0.4)) drop-shadow(0 8px 20px rgba(255,227,148,0.5));margin-bottom:4px;position:relative}
.ft-countdown-text{font-family:var(--ft-font-display);font-size:var(--ft-font-lg);color:var(--ft-text-secondary);letter-spacing:3px;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.ft-game-start-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;opacity:0;visibility:hidden}
.ft-game-start-text{font-family:var(--ft-font-display);font-size:120px;letter-spacing:12px;color:#000000;-webkit-text-fill-color:#000000;background:none;background-clip:border-box;filter:drop-shadow(0 6px 0 rgba(0,0,0,0.25));transform:scale(0.5);opacity:0}
@keyframes ft-game-start-flash{0%{transform:scale(0.3);opacity:0}30%{transform:scale(1.2);opacity:1}60%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
.ft-game-start-flash.ft-show-flash{visibility:visible;opacity:1}
.ft-game-start-flash.ft-show-flash .ft-game-start-text{animation:ft-game-start-flash 1.4s var(--ft-ease-bounce) forwards}
.ft-delay-1{animation-delay:0.1s}
.ft-tutorial-card.ft-animate-bounce-in .ft-mascots{animation:ft-bounce-in 0.7s var(--ft-ease-bounce) 0.15s both}
.ft-tutorial-card.ft-animate-bounce-in .ft-title-section{animation:ft-bounce-in 0.6s var(--ft-ease-bounce) 0.35s both}
.ft-tutorial-card.ft-animate-bounce-in .ft-tips-section .ft-tip-item:nth-child(1){animation:ft-bounce-in 0.5s var(--ft-ease-bounce) 0.5s both}
.ft-tutorial-card.ft-animate-bounce-in .ft-tips-section .ft-tip-item:nth-child(2){animation:ft-bounce-in 0.5s var(--ft-ease-bounce) 0.62s both}
.ft-tutorial-card.ft-animate-bounce-in .ft-tips-section .ft-tip-item:nth-child(3){animation:ft-bounce-in 0.5s var(--ft-ease-bounce) 0.74s both}
.ft-tutorial-card.ft-animate-bounce-in .ft-countdown-section{animation:ft-bounce-in 0.6s var(--ft-ease-bounce) 0.9s both}
/* 小屏适配（桌面端保持参考一致，仅窄屏缩小避免溢出） */
@media (max-width: 620px){
  #ftt .ft-tutorial-card{width:min(560px,96vw);padding:28px 22px 24px;max-height:96vh;overflow-y:auto}
  #ftt .ft-mascots{height:110px;margin-bottom:10px}
  #ftt .ft-mascot-fish{font-size:100px}
  #ftt .ft-main-title{font-size:44px;letter-spacing:5px}
  #ftt .ft-subtitle{font-size:16px}
  #ftt .ft-countdown-number{font-size:72px}
  #ftt .ft-tip-text{font-size:19px}
  #ftt .ft-tip-icon{width:38px;height:38px;font-size:24px}
  #ftt .ft-game-start-text{font-size:64px;letter-spacing:6px}
}

/* ============ P148-20260827fishTutorialOverlay: 引导UI改为游戏内小浮层（不遮挡背景） ============ */
#ftt.ft-viewport{
  position:fixed; inset:0; background:transparent !important; pointer-events:none;
}
#ftt .ft-bg-deep, #ftt .ft-underwater-decor, #ftt .ft-bg-orb,
#ftt .ft-mask-overlay{ display:none !important; }
#ftt .ft-tutorial-wrap{ pointer-events:none; }
#ftt .ft-tutorial-card{
  pointer-events:auto;
  width:min(360px,80vw);
  padding:22px 24px 20px;
  border-radius:40px;
  background:rgba(40,32,65,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:2px solid rgba(255,255,255,0.28);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
}
#ftt .ft-tutorial-card.ft-animate-bounce-in{ opacity:1; }
#ftt .ft-mascots{ height:86px; margin-bottom:10px; }
#ftt .ft-mascot-fish{ font-size:72px; }
#ftt .ft-fish-bubble, #ftt .ft-sparkle{ display:none; }
#ftt .ft-title-section{ margin-bottom:16px; }
#ftt .ft-main-title{ font-size:34px; letter-spacing:4px; margin-bottom:2px; }
#ftt .ft-subtitle{ font-size:15px; letter-spacing:2px; }
#ftt .ft-tips-section{ gap:10px; margin-bottom:18px; }
#ftt .ft-tip-item{ padding:10px 14px; gap:10px; border-radius:28px; }
#ftt .ft-tip-icon{ width:32px; height:32px; font-size:20px; }
#ftt .ft-tip-number{ width:26px; height:26px; font-size:15px; }
#ftt .ft-tip-text{ font-size:16px; }
#ftt .ft-countdown-section{ padding-top:4px; }
#ftt .ft-countdown-number{ font-size:56px; margin-bottom:0; }
#ftt .ft-countdown-text{ font-size:15px; }
#ftt .ft-game-start-text{ font-size:64px; letter-spacing:8px; }
@media (max-width:620px){
  #ftt .ft-tutorial-card{ width:min(360px,86vw); padding:18px 18px 16px; max-height:85vh; overflow-y:auto; }
  #ftt .ft-mascots{ height:68px; }
  #ftt .ft-mascot-fish{ font-size:56px; }
  #ftt .ft-main-title{ font-size:28px; }
  #ftt .ft-tip-text{ font-size:15px; }
  #ftt .ft-countdown-number{ font-size:46px; }
}
/* P148-20260827fishTutorialFix: 隐藏"秒后自动开始..." */
#ftt .ft-countdown-text{ display:none !important; }

/* ============ P148-20260827fishTutorialCompact: 引导UI缩为游戏区小浮层——更小、更透明、不遮挡背景 ============ */
#ftt.ft-viewport{ background:transparent !important; pointer-events:none; }
#ftt .ft-bg-deep, #ftt .ft-underwater-decor, #ftt .ft-bg-orb, #ftt .ft-mask-overlay{ display:none !important; }
#ftt .ft-tutorial-wrap{ pointer-events:none; }
#ftt .ft-tutorial-card{
  pointer-events:auto;
  width:min(240px,74vw) !important;
  padding:12px 15px 11px !important;
  border-radius:26px !important;
  background:rgba(24,20,44,0.42) !important;
  backdrop-filter:blur(9px) !important;
  -webkit-backdrop-filter:blur(9px) !important;
  border:1.5px solid rgba(255,255,255,0.26) !important;
  box-shadow:0 6px 22px rgba(0,0,0,0.22) !important;
}
#ftt .ft-mascots{ height:40px !important; margin-bottom:5px !important; }
#ftt .ft-mascot-fish{ font-size:30px !important; }
#ftt .ft-fish-bubble, #ftt .ft-sparkle{ display:none !important; }
#ftt .ft-title-section{ margin-bottom:8px !important; }
#ftt .ft-main-title{ font-size:20px !important; letter-spacing:2px !important; margin-bottom:0 !important; }
#ftt .ft-subtitle{ font-size:12px !important; letter-spacing:1px !important; }
#ftt .ft-tips-section{ gap:5px !important; margin-bottom:8px !important; }
#ftt .ft-tip-item{ padding:5px 9px !important; gap:7px !important; border-radius:18px !important; }
#ftt .ft-tip-icon{ width:20px !important; height:20px !important; font-size:14px !important; }
#ftt .ft-tip-number{ width:17px !important; height:17px !important; font-size:12px !important; }
#ftt .ft-tip-text{ font-size:13px !important; letter-spacing:0 !important; }
#ftt .ft-countdown-section{ padding-top:2px !important; }
#ftt .ft-countdown-number{ font-size:40px !important; }
#ftt .ft-game-start-text{ font-size:38px !important; letter-spacing:6px !important; }
@media (max-width:560px){
  #ftt .ft-mascots{ display:none !important; }
  #ftt .ft-tutorial-card{ width:min(230px,72vw) !important; }
}
#ftt .ft-countdown-text{ display:none !important; }

/* ============ P148-20260827fishTutorialMedium: 引导UI放大(保持透明, 不遮背景, 手机适配) ============ */
#ftt.ft-viewport{ background:transparent !important; pointer-events:none; }
#ftt .ft-tutorial-card{
  pointer-events:auto;
  width:min(340px,84vw) !important;
  padding:20px 24px 18px !important;
  border-radius:34px !important;
  background:rgba(24,20,44,0.5) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  border:2px solid rgba(255,255,255,0.28) !important;
  box-shadow:0 8px 26px rgba(0,0,0,0.26) !important;
}
#ftt .ft-bg-deep, #ftt .ft-underwater-decor, #ftt .ft-bg-orb, #ftt .ft-mask-overlay{ display:none !important; }
#ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:flex !important; height:64px !important; margin-bottom:8px !important; }
#ftt .ft-mascot-fish{ font-size:48px !important; }
#ftt .ft-fish-bubble, #ftt .ft-sparkle{ display:none !important; }
#ftt .ft-title-section{ margin-bottom:12px !important; }
#ftt .ft-main-title{ font-size:28px !important; letter-spacing:3px !important; margin-bottom:2px !important; }
#ftt .ft-subtitle{ font-size:14px !important; letter-spacing:2px !important; }
#ftt .ft-tips-section{ gap:8px !important; margin-bottom:12px !important; }
#ftt .ft-tip-item{ padding:8px 14px !important; gap:10px !important; border-radius:22px !important; }
#ftt .ft-tip-icon{ width:26px !important; height:26px !important; font-size:17px !important; }
#ftt .ft-tip-number{ width:21px !important; height:21px !important; font-size:14px !important; }
#ftt .ft-tip-text{ font-size:15px !important; letter-spacing:0 !important; }
#ftt .ft-countdown-section{ padding-top:4px !important; }
#ftt .ft-countdown-number{ font-size:58px !important; }
#ftt .ft-game-start-text{ font-size:46px !important; letter-spacing:8px !important; }
#ftt .ft-countdown-text{ display:none !important; }
@media (max-width:420px){
  #ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:none !important; }
  #ftt .ft-tutorial-card{ width:min(300px,86vw) !important; padding:16px 18px 14px !important; }
  #ftt .ft-main-title{ font-size:24px !important; }
  #ftt .ft-tip-text{ font-size:14px !important; }
  #ftt .ft-countdown-number{ font-size:50px !important; }
}

/* ============ P148-20260827fishTutorialLarge: 引导UI再放大(卡片390px, 保持透明不遮背景) ============ */
#ftt.ft-viewport{ background:transparent !important; pointer-events:none; }
#ftt .ft-tutorial-card{
  pointer-events:auto;
  width:min(390px,88vw) !important;
  padding:24px 28px 22px !important;
  border-radius:38px !important;
  background:rgba(24,20,44,0.52) !important;
  backdrop-filter:blur(11px) !important;
  -webkit-backdrop-filter:blur(11px) !important;
  border:2px solid rgba(255,255,255,0.3) !important;
  box-shadow:0 9px 28px rgba(0,0,0,0.28) !important;
}
#ftt .ft-bg-deep, #ftt .ft-underwater-decor, #ftt .ft-bg-orb, #ftt .ft-mask-overlay{ display:none !important; }
#ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:flex !important; height:78px !important; margin-bottom:10px !important; }
#ftt .ft-mascot-fish{ font-size:58px !important; }
#ftt .ft-fish-bubble, #ftt .ft-sparkle{ display:none !important; }
#ftt .ft-title-section{ margin-bottom:14px !important; }
#ftt .ft-main-title{ font-size:32px !important; letter-spacing:3px !important; margin-bottom:2px !important; }
#ftt .ft-subtitle{ font-size:16px !important; letter-spacing:2px !important; }
#ftt .ft-tips-section{ gap:10px !important; margin-bottom:14px !important; }
#ftt .ft-tip-item{ padding:10px 16px !important; gap:12px !important; border-radius:26px !important; }
#ftt .ft-tip-icon{ width:30px !important; height:30px !important; font-size:19px !important; }
#ftt .ft-tip-number{ width:24px !important; height:24px !important; font-size:16px !important; }
#ftt .ft-tip-text{ font-size:17px !important; letter-spacing:0 !important; }
#ftt .ft-countdown-section{ padding-top:6px !important; }
#ftt .ft-countdown-number{ font-size:72px !important; }
#ftt .ft-game-start-text{ font-size:52px !important; letter-spacing:9px !important; }
#ftt .ft-countdown-text{ display:none !important; }
@media (max-width:460px){
  #ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:none !important; }
  #ftt .ft-tutorial-card{ width:min(330px,90vw) !important; padding:18px 20px 16px !important; }
  #ftt .ft-main-title{ font-size:27px !important; }
  #ftt .ft-tip-text{ font-size:15px !important; }
  #ftt .ft-countdown-number{ font-size:58px !important; }
}

/* ============ P148-20260827fishTutorialXLarge: 引导UI再放大(卡片440px, 保持透明不遮背景) ============ */
#ftt.ft-viewport{ background:transparent !important; pointer-events:none; }
#ftt .ft-tutorial-card{
  pointer-events:auto;
  width:min(440px,92vw) !important;
  padding:28px 32px 26px !important;
  border-radius:44px !important;
  background:rgba(24,20,44,0.55) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border:2.5px solid rgba(255,255,255,0.32) !important;
  box-shadow:0 10px 32px rgba(0,0,0,0.3) !important;
}
#ftt .ft-bg-deep, #ftt .ft-underwater-decor, #ftt .ft-bg-orb, #ftt .ft-mask-overlay{ display:none !important; }
#ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:flex !important; height:92px !important; margin-bottom:12px !important; }
#ftt .ft-mascot-fish{ font-size:70px !important; }
#ftt .ft-fish-bubble, #ftt .ft-sparkle{ display:none !important; }
#ftt .ft-title-section{ margin-bottom:16px !important; }
#ftt .ft-main-title{ font-size:38px !important; letter-spacing:4px !important; margin-bottom:2px !important; }
#ftt .ft-subtitle{ font-size:18px !important; letter-spacing:2px !important; }
#ftt .ft-tips-section{ gap:12px !important; margin-bottom:16px !important; }
#ftt .ft-tip-item{ padding:12px 18px !important; gap:14px !important; border-radius:30px !important; }
#ftt .ft-tip-icon{ width:36px !important; height:36px !important; font-size:23px !important; }
#ftt .ft-tip-number{ width:28px !important; height:28px !important; font-size:18px !important; }
#ftt .ft-tip-text{ font-size:19px !important; letter-spacing:0 !important; }
#ftt .ft-countdown-section{ padding-top:8px !important; }
#ftt .ft-countdown-number{ font-size:86px !important; }
#ftt .ft-game-start-text{ font-size:58px !important; letter-spacing:10px !important; }
#ftt .ft-countdown-text{ display:none !important; }
@media (max-width:500px){
  #ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:none !important; }
  #ftt .ft-tutorial-card{ width:min(360px,92vw) !important; padding:20px 22px 18px !important; }
  #ftt .ft-main-title{ font-size:30px !important; }
  #ftt .ft-tip-text{ font-size:17px !important; }
  #ftt .ft-countdown-number{ font-size:66px !important; }
}

/* ============ P148-20260827fishTutorialAnim: 恢复鱼周围的动画(气泡+星星, 与参考UI一致) ============ */
/* 取消之前 .ft-fish-bubble/.ft-sparkle 的隐藏 */
#ftt .ft-fish-bubble, #ftt .ft-sparkle{ display:block !important; }
/* mascots 始终显示(含小屏), 保证鱼周围动画可见 */
#ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:flex !important; height:88px !important; margin-bottom:10px !important; }
#ftt .ft-mascot-fish{ font-size:62px !important; }
#ftt .ft-mascots .ft-fish-bubble{ font-size:18px !important; z-index:1 !important; }
#ftt .ft-mascots .ft-fish-bubble-1{ top:22px !important; left:calc(50% - 96px) !important; }
#ftt .ft-mascots .ft-fish-bubble-2{ top:48px !important; left:calc(50% - 118px) !important; }
#ftt .ft-mascots .ft-fish-bubble-3{ top:18px !important; right:calc(50% - 108px) !important; }
#ftt .ft-mascots .ft-fish-bubble-4{ bottom:30px !important; left:calc(50% - 86px) !important; }
#ftt .ft-mascots .ft-fish-bubble-5{ top:12px !important; right:calc(50% - 88px) !important; }
#ftt .ft-sparkle{ font-size:18px !important; }
#ftt .ft-mascots .ft-animate-fish-wiggle{ animation:ft-fish-wiggle 2.5s ease-in-out infinite; }
@media (max-width:500px){
  #ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ display:flex !important; height:60px !important; }
  #ftt .ft-mascot-fish{ font-size:46px !important; }
  #ftt .ft-mascots .ft-fish-bubble{ font-size:16px !important; }
  #ftt .ft-mascots .ft-fish-bubble-1{ top:18px !important; left:calc(50% - 80px) !important; }
  #ftt .ft-mascots .ft-fish-bubble-3{ top:14px !important; right:calc(50% - 90px) !important; }
}

/* ============ P148-20260827fontCute: 倒计时 Timer / 数字 Fredoka ============ */
#ftt .ft-countdown-number, #ftt .ft-countdown-text, #ftt .ft-tip-number{
  font-family:'Fredoka','ZCOOL KuaiLe',sans-serif;
}

/* ============ P148-20260828fishTutorialMobile: 手机端进入"摸鱼大师"引导卡片适配（PC 保持原样、手机缩小到舒适尺寸） ============ */
@media (max-width: 700px){
  #ftt .ft-tutorial-card{
    width:min(300px,84vw) !important;
    padding:16px 18px 15px !important;
    border-radius:28px !important;
    background:rgba(24,20,44,0.5) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    border:1.5px solid rgba(255,255,255,0.28) !important;
    box-shadow:0 8px 24px rgba(0,0,0,0.26) !important;
    max-height:82vh; overflow-y:auto;
  }
  #ftt .ft-mascots, #ftt .ft-mascots.ft-mascots{ height:56px !important; margin-bottom:8px !important; }
  #ftt .ft-mascot-fish{ font-size:42px !important; }
  #ftt .ft-title-section{ margin-bottom:10px !important; }
  #ftt .ft-main-title{ font-size:26px !important; letter-spacing:3px !important; margin-bottom:2px !important; }
  #ftt .ft-subtitle{ font-size:14px !important; letter-spacing:1px !important; }
  #ftt .ft-tips-section{ gap:7px !important; margin-bottom:10px !important; }
  #ftt .ft-tip-item{ padding:7px 12px !important; gap:9px !important; border-radius:20px !important; }
  #ftt .ft-tip-icon{ width:24px !important; height:24px !important; font-size:15px !important; }
  #ftt .ft-tip-number{ width:19px !important; height:19px !important; font-size:13px !important; }
  #ftt .ft-tip-text{ font-size:14px !important; letter-spacing:0 !important; }
  #ftt .ft-countdown-section{ padding-top:3px !important; }
  #ftt .ft-countdown-number{ font-size:52px !important; }
  #ftt .ft-game-start-text{ font-size:42px !important; letter-spacing:6px !important; }
}