/* ================================================================
   single-ref.css — 单人模式选择页「参考UI」全覆盖层 (版本 20260817skinCandy / 手机端 20260817singleMobile14)
   skinCandy: 皮肤弹窗(skinModal)重做为参考UI糖果绿3D风 — 对齐 UI/皮肤选择.html + UI/皮肤选择(电脑端).html
            电脑端(≥768px)弹窗从右侧滑出成为侧面板(width 420px, 网格4列); 手机端保持底部上滑抽屉(网格3列)
            样式: 糖果绿渐变 #55EDB0→#1BC480 + #15A86C 立体厚边 + 白卡 + 绿色描边, 新增"当前使用"大卡+列表标题
   refUI21: 文字行(体感乒乓球/描述)入场景换成 Q弹过冲回弹(srTextPop): 从 scale(0) 弹出→1.12(稍驻留)→0.95→1.03→1, 结束保持可见
   refUI20: 修复"体感乒乓球"标题在入场动画播放完后消失 — 根因 main.css .game-title 基态 opacity:0(靠 gameTitleIn forwards 揭示),
           本层动画改 srPop...backwards 后结束回落基态 opacity:0 → game-title 强制 opacity:1 保持可见(refUI19 只修了 game-desc)
   refUI19: 修复"体感乒乓球"/"慢慢转动脖子"文字消失 — refUI13 清描边后面临全局白字(#FFFFFF)白底不可见,
           game-title 恢复深色字 var(--sr-fg)、game-desc 固定深灰; 两行文字加入场缩放入场动画(srPop)
   refUI18: 修复演示UI入场闪帧 — 同元素两动画争用transform(srCardIn缩放+srCardBounce浮动)在空窗期
            transform回落scale1闪现; 演示卡入场缩放交由外层.game-preview承担, 自身仅保留常驻srCardBounce
   refUI17: 入场动画峰值严格≤100%(scale到1.0即止,不再放大), 去除弹性曲线overshoot与向上位移,
           彻底消除贴边区块放大超出容器被裁切; 演示UI(preview-card)新增缩放淡入入场与常驻悬浮叠加
   refUI16: 入场动画重做为休闲游戏标准 — 中心缩放淡入+轻弹性, 去除向上回弹位移避免越出容器被裁切
   refUI15: 单人模式所有区块/按钮/标题/圆点/难度 Q弹入场动画 — 参考首页 cartoonTitleBounce 弹性曲线,
           各区块错峰下落过冲回弹 + 内部元素依次弹跳; 兼容 prefers-reduced-motion
   refUI14: 单人选择页恢复显示首页背景元素(光晕/粒子/有机色块), 不再隐藏 ambient / 铺绿 / 隐藏噪点暗角, 切换单人模式背景延续首页
   refUI13: 清除"体感乒乓球"标题卡通描边重影(text-shadow/stroke); 首页点击单人模式后各区块错峰入场动画
   refUI12: 压缩各区块垂直间距 + 顶部内边距降至2px, 让全部功能在首屏内可见无需滚动, 整体布局上移
   refUI11: 移除"选择难度"文字; 放大演示区域; 箭头与上下按钮下移; 整体布局上移(padding-top 12); 箭头放大两倍后微调至76px
   对齐 UI/单人模式选择.html 的卡通风格: 明亮绿底、粗黑描边、圆润造型、卡通投影
   作用于 .single-ref-screen(单人模式页) + 皮肤抽屉(skinModal) + 打卡卡片(checkinPop)
   refUI5: 单人页显示时隐藏 body 首页氛围装饰层(home-ambient 光圈/粒子/结构层)
           并把 body 背景换成同款绿渐变 — 移除按钮背后露出的白/绿渐变框;
           容器背景改 transparent 消除 max-width 边界色差线; 间距再压榨给画布
   ================================================================ */

/* ---- 参考UI设计token(复用项目已有卡通变量, 补充鲜绿系) ---- */
.single-ref-screen {
  --sr-primary: #7ED957;
  --sr-primary-dark: #5CB83A;
  --sr-primary-light: #A8E68A;
  --sr-primary-fg: #FFFFFF;
  --sr-bg: #B8F08E;
  --sr-bg2: #D4F5B8;
  --sr-card: #FFFFFF;
  --sr-fg: #2D2D2D;
  --sr-fg-light: #4A4A4A;
  --sr-muted: #F0F7E8;
  --sr-muted-fg: #6B7280;
  --sr-yellow: #FFD93D;
  --sr-yellow-dark: #E6B800;
  --sr-pink: #FF8BA7;
  --sr-blue: #74C0FC;
  --sr-orange: #FF9F43;
  --sr-stroke: #2D2D2D;
  --sr-radius-sm: 8px;
  --sr-radius-md: 16px;
  --sr-radius-lg: 24px;
  --sr-radius-xl: 32px;
  --sr-radius-full: 9999px;
  --sr-shadow-card: 0 4px 0 #2D2D2D;
  --sr-shadow-lg: 0 6px 0 #2D2D2D;
  --sr-shadow-xl: 0 8px 0 #2D2D2D;
  --sr-font: var(--cartoon-font-display, "ZCOOL KuaiLe", "Comic Sans MS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}

/* ============================================================
   页面容器 — 背景由 body:has 层统一铺绿(refUI5), 容器透明防边界色差线
   ============================================================ */
.single-ref-screen {
  max-width: 970px !important;
  margin: 0 auto !important;
  background: transparent !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}
.single-ref-screen::-webkit-scrollbar { display: none; }

.single-ref-screen .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
}
.single-ref-screen .top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   顶部栏图标按钮
   ============================================================ */
.single-ref-screen .icon-btn {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--sr-card);
  border: 3px solid var(--sr-stroke);
  border-radius: var(--sr-radius-full);
  box-shadow: var(--sr-shadow-card);
  color: var(--sr-stroke);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.single-ref-screen .icon-btn:hover {
  /* 20260817srHoverClip: 去 translateY(-2px) 上浮 — 容器(overflow-y:auto 两轴裁切)顶部
     内边距仅2px, 上浮2px+放大1.6px=3.6px 越界 → 圆钮顶部被切平;
     只保留放大反馈(顶部仅占1.6px<2px), 静止像素级不变 */
  transform: scale(1.05);
  box-shadow: var(--sr-shadow-lg);
}
.single-ref-screen .icon-btn:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 0 2px 0 #2D2D2D;
}
.single-ref-screen .icon-btn svg { width: 32px; height: 32px; }
.single-ref-screen .icon-btn-small { width: 60px; height: 60px; }
.single-ref-screen .icon-btn-small svg { width: 30px; height: 30px; }

/* ============================================================
   皮肤按钮 — 糖果绿渐变底 + T恤图标 + 黄色闪光点
   呼应皮肤商店主题, 与白色返回/打卡按钮区分但保持卡通描边风格
   ============================================================ */
.single-ref-screen .icon-btn-skin {
  background: linear-gradient(145deg, #D4F5B8 0%, #A8E68A 60%, #7ED957 100%);
  color: #2E7D32;
  position: relative;
  overflow: visible;
  animation: srSkinBtnFloat 3s ease-in-out infinite;
}
.single-ref-screen .icon-btn-skin .skin-btn-icon {
  width: 30px;
  height: 30px;
}
.single-ref-screen .icon-btn-skin .skin-btn-spark {
  transform-origin: center;
  animation: srSkinSpark 1.8s ease-in-out infinite;
}
@keyframes srSkinBtnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes srSkinSpark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 0.85; }
}
.single-ref-screen .icon-btn-skin:hover {
  transform: scale(1.08);
  box-shadow: var(--sr-shadow-lg);
  /* 20260817skinHover: 原 animation:none 会把皮肤按钮生效的 srPop 入场动画移除,
     鼠标移出时动画名 none→srPop 会重新播放(backwards 填充 + 0.18s 延迟 → opacity:0),
     导致按钮消失约半秒再弹出。改用 animation-play-state:paused 只暂停不换动画名,
     移出时不会重启, 按钮保持可见(进入页面的入场弹出仍保留) */
  animation-play-state: paused;
}
.single-ref-screen .icon-btn-skin:hover .skin-btn-spark {
  animation: srSkinSparkFast 0.5s ease-in-out infinite;
}
@keyframes srSkinSparkFast {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.5) rotate(25deg); }
}
.single-ref-screen .icon-btn-skin:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 0 2px 0 #2D2D2D;
}

/* ============================================================
   游戏展示区 — 箭头 + 白框预览卡(内含游戏演示画布)
   ============================================================ */
.single-ref-screen .game-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin-bottom: 4px;
}
.single-ref-screen .arrow-btn {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  background: var(--sr-primary);
  border: 3px solid var(--sr-stroke);
  border-radius: var(--sr-radius-full);
  box-shadow: var(--sr-shadow-card);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.single-ref-screen .arrow-btn:hover { transform: scale(1.1); box-shadow: var(--sr-shadow-lg); }
.single-ref-screen .arrow-btn:active { transform: scale(0.9); box-shadow: 0 2px 0 #2D2D2D; }
.single-ref-screen .arrow-btn svg { width: 36px; height: 36px; }

/* 预览卡 */
.single-ref-screen .preview-card {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--sr-card);
  border: 3px solid var(--sr-stroke);
  border-radius: var(--sr-radius-lg);
  box-shadow: var(--sr-shadow-card);
  animation: srCardBounce 3s ease-in-out infinite;
}
@keyframes srCardBounce {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-6px) rotate(0.5deg); }
}

/* ============================================================
   演示UI切换动画 (refUI 20260817scale) — 普通缩放切换
   仅在玩家点击左右箭头时通过 .sr-switch-* 类触发;
   进入单人模式时不做缩放, 由外层 .game-preview 的入场动画负责。
   动画列表把常驻 srCardBounce 排在首位、切换动画在后 —
   同属性(transform)优先级采纳后者, 故切换时 bounce 不干扰缩放;
   切换类移除后回落本卡基态 srCardBounce, 常驻悬浮自动恢复。
   ============================================================ */
.single-ref-screen .game-card.sr-switch-out {
  animation: srCardBounce 3s ease-in-out infinite,
             srCardSwitchOut 0.2s ease-in forwards;
}
.single-ref-screen .game-card.sr-switch-in {
  animation: srCardBounce 3s ease-in-out infinite,
             srCardSwitchIn 0.3s ease-out backwards;
}
/* 退场: 收敛缩小, 干净淡出(无过冲) */
@keyframes srCardSwitchOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.82); }
}
/* 入场: 从小放大到正常尺寸, 普通缩放(无弹性过冲) */
@keyframes srCardSwitchIn {
  0%   { opacity: 0; transform: scale(0.82); }
  100% { opacity: 1; transform: scale(1); }
}
/* 演示画布区(替换参考UI的图片) — 16/9 对齐演示画布原始比例(480x270), 不拉伸变形
   (分隔线挪至 .preview-info 的 border-top, 避免 wrapper border 计入 aspect-ratio 导致画布 ~1.5% 变形) */
.single-ref-screen .preview-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sr-muted);
}
.single-ref-screen .preview-image-wrapper .game-icon-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* 锁定徽章 */
.single-ref-screen .game-lock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  padding: 3px 10px;
  background: var(--sr-orange);
  border: 2px solid var(--sr-stroke);
  border-radius: var(--sr-radius-full);
  font-family: var(--sr-font);
  font-size: 0.75rem;
  font-weight: 800;
  color: #FFF;
  text-shadow: 1px 1px 0 #2D2D2D;
  box-shadow: 0 2px 0 #2D2D2D;
}
/* 游戏标签行(轻量/经典/推荐) — refUI7 已移除(用户要求删除左侧三个标签) */
/* 标题/描述 */
.single-ref-screen .preview-info {
  position: relative;
  width: 100%;
  padding: 6px 12px 2px;
  text-align: center;
}
/* 「体感乒乓球」文字上方的分隔线 — 绝对定位横跨整个卡片宽度直达左右边缘(略卡片圆角) */
.single-ref-screen .preview-info::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--sr-stroke);
}
.single-ref-screen .game-title {
  font-family: var(--sr-font);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--sr-fg);
  letter-spacing: 0.08em;
  line-height: 1.15;
  margin: 0 0 2px;
}
.single-ref-screen .game-desc {
  font-size: 0.75rem;
  color: var(--sr-fg-light);
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
}
/* 轮播圆点 */
.single-ref-screen .game-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 6px;
}
.single-ref-screen .game-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9E8D0;
  border: 2px solid var(--sr-stroke);
  transition: all 0.2s ease;
}
.single-ref-screen .game-dot.active {
  background: var(--sr-primary);
  transform: scale(1.25);
}

/* ============================================================
   难度选择
   ============================================================ */
.single-ref-screen .difficulty-select {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 8px;
}
.single-ref-screen .difficulty-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.single-ref-screen .difficulty-icon { width: 20px; height: 20px; color: var(--sr-stroke); }
.single-ref-screen .difficulty-title {
  font-family: var(--sr-font);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sr-fg);
  letter-spacing: 0.08em;
}
.single-ref-screen .difficulty-buttons {
  display: flex;
  gap: 12px;
}
.single-ref-screen .diff-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  background: var(--sr-card);
  border: 3px solid var(--sr-stroke);
  border-radius: var(--sr-radius-lg);
  box-shadow: var(--sr-shadow-card);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--sr-font);
}
.single-ref-screen .diff-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--sr-shadow-lg);
}
.single-ref-screen .diff-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2D2D2D;
}
.single-ref-screen .diff-btn.active {
  /* 20260817diffLight: 按下态绿色 #7ED957(深) → #A8E88F(浅绿), 文字白+黑描边保持可读 */
  background: #A8E88F;
  border-color: var(--sr-stroke);
  transform: translateY(-2px);
  box-shadow: var(--sr-shadow-lg);
}
.single-ref-screen .diff-icon { width: 20px; height: 20px; color: var(--sr-stroke); }
.single-ref-screen .diff-btn.active .diff-icon {
  color: #FFF;
  filter: drop-shadow(2px 2px 0 #2D2D2D);
}
.single-ref-screen .diff-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sr-fg);
  letter-spacing: 0.05em;
}
.single-ref-screen .diff-btn.active .diff-text {
  color: #FFF;
  text-shadow: 2px 2px 0 #2D2D2D;
}
/* 点击难度按钮时的 Q弹缩放动效 (P148-0817diffPop) — 加临时类 .sr-diff-pop 触发, 播放后移除 */
.single-ref-screen .diff-btn.sr-diff-pop {
  animation: srDiffPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 覆盖下方 nth-child 的入场 animation-delay, 保证点击后立即弹出 */
  animation-delay: 0s !important;
}
@keyframes srDiffPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  60%  { transform: scale(0.93); }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================================
   入场动画 (refUI17) — 休闲游戏标准: 中心缩放淡入, 峰值严格 ≤100%
   用户实测定位: 旧版 scale(1.04)/(1.10) + 弹性曲线 overshoot 会把贴边区块放大
   超尺寸, 结合 .single-ref-screen(overflow-y:auto) 被裁切成"边缘裁切"观感。
   修复: 一切缩放峰值 = 1.0(≤100%), 无向上 translateY(避免顶出容器上边缘),
   "弹"感仅靠从 0.86→1.0 的缩放 + 轻微向下到位余韵呈现。
   ============================================================ */
.single-ref-screen .top-bar,
.single-ref-screen .game-preview,
.single-ref-screen .difficulty-select,
.single-ref-screen .daily-status,
.single-ref-screen .start-btn-section {
  animation: srEntrance 0.5s ease-out backwards;
}
.single-ref-screen .top-bar { animation-delay: 0.03s; }
.single-ref-screen .game-preview { animation-delay: 0.10s; }
.single-ref-screen .difficulty-select { animation-delay: 0.17s; }
.single-ref-screen .daily-status { animation-delay: 0.24s; }
.single-ref-screen .start-btn-section { animation-delay: 0.31s; }
/* 缩放峰值 = 1.0(不放大), 无向上位移 — 绝不越出容器边界 */
@keyframes srEntrance {
  0%   { opacity: 0; transform: scale(0.86); }
  72%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 1; transform: scale(1.0); }
}

/* 内部元素 — 温和缩放弹出, 峰值 ≤100% */
.single-ref-screen .icon-btn,
.single-ref-screen .arrow-btn,
.single-ref-screen .game-title,
.single-ref-screen .game-desc,
.single-ref-screen .game-dot,
.single-ref-screen .diff-btn,
.single-ref-screen .status-card {
  animation: srPop 0.4s ease-out backwards;
}
.single-ref-screen .top-bar .icon-btn { animation-delay: 0.18s; }
.single-ref-screen .game-preview .arrow-btn { animation-delay: 0.20s; }
.single-ref-screen .game-title { animation-delay: 0.26s; }
.single-ref-screen .game-desc { animation-delay: 0.32s; }
.single-ref-screen .game-dot:nth-child(2) { animation-delay: 0.22s; }
.single-ref-screen .game-dot:nth-child(3) { animation-delay: 0.27s; }
.single-ref-screen .game-dot:nth-child(4) { animation-delay: 0.32s; }
.single-ref-screen .game-dot:nth-child(5) { animation-delay: 0.37s; }
.single-ref-screen .game-dot:nth-child(6) { animation-delay: 0.42s; }
.single-ref-screen .diff-btn:nth-child(1) { animation-delay: 0.24s; }
.single-ref-screen .diff-btn:nth-child(2) { animation-delay: 0.30s; }
.single-ref-screen .diff-btn:nth-child(3) { animation-delay: 0.36s; }
.single-ref-screen .status-card { animation-delay: 0.30s; }
@keyframes srPop {
  0%   { opacity: 0; transform: scale(0.82); }
  78%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 1; transform: scale(1.0); }
}
/* 文字行(标题/描述) — Q弹缩放入场: 从 scale(0) 弹出, 过冲回弹到 1, 更具活力
   (refUI20 保证结束保持可见的基态 opacity:1 不变; 此处仅把缩放入场换成过冲回弹) */
.single-ref-screen .game-title,
.single-ref-screen .game-desc {
  animation: srTextPop 0.6s ease-out backwards;
}
.single-ref-screen .game-title { animation-delay: 0.26s; }
.single-ref-screen .game-desc { animation-delay: 0.32s; }
@keyframes srTextPop {
  0%   { opacity: 0; transform: scale(0); }
  42%  { opacity: 1; transform: scale(1.12); }
  58%  { opacity: 1; transform: scale(1.12); }
  76%  { opacity: 1; transform: scale(0.95); }
  88%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
/* 开始按钮: 先缩放归位, 再持续脉动(两者叠加) */
.single-ref-screen .start-btn {
  animation: srPop 0.44s ease-out backwards,
             srBtnPulse 2s ease-in-out 0.5s infinite;
}
.single-ref-screen .start-btn.start-btn-locked { animation: none; }

/* 演示UI(preview-card) — 入场缩放交由外层 .game-preview(srEntrance) 承担,
   本元素只保留常驻 srCardBounce。修复 refUI17 起同元素两动画争用 transform
   在 srCardIn 结束/srCardBounce 未启的空窗期 transform 回落 scale1 的闪帧。
   (同元素同一 transform 属性无法叠加, 多动画只会互相覆盖 → 拆到不同元素) */

/* 系统偏好减弱动效时, 退化为纯淡入, 无位移(参考 motion-design 无障碍规范) */
@media (prefers-reduced-motion: reduce) {
  .single-ref-screen .top-bar,
  .single-ref-screen .game-preview,
  .single-ref-screen .difficulty-select,
  .single-ref-screen .daily-status,
  .single-ref-screen .start-btn-section {
    animation: srFadeIn 0.3s ease-out backwards;
    animation-delay: 0s !important;
  }
  .single-ref-screen .icon-btn,
  .single-ref-screen .arrow-btn,
  .single-ref-screen .game-title,
  .single-ref-screen .game-desc,
  .single-ref-screen .game-dot,
  .single-ref-screen .diff-btn,
  .single-ref-screen .status-card { animation: none; }
  /* 演示UI降级为纯淡入(去掉缩放/位移), 常驻悬浮也关闭 */
  .single-ref-screen .preview-card { animation: srFadeIn 0.3s ease-out backwards; }
  /* 切换动画降级为纯淡入, 不做 Q弹缩放 */
  .single-ref-screen .game-card.sr-switch-out,
  .single-ref-screen .game-card.sr-switch-in { animation: srFadeIn 0.3s ease-out backwards; }
  /* start-btn 回退到常驻脉动(无 Q 弹位移) */
  .single-ref-screen .start-btn { animation: srBtnPulse 2s ease-in-out infinite; }
  .single-ref-screen .start-btn.start-btn-locked { animation: none; }
  /* 难度按钮点击 Q弹动效在减弱动效偏好下关闭 */
  .single-ref-screen .diff-btn.sr-diff-pop { animation: none; }
  /* 皮肤按钮: 关闭浮动和闪光点旋转缩放动画 */
  .single-ref-screen .icon-btn-skin { animation: none; }
  .single-ref-screen .icon-btn-skin .skin-btn-spark { animation: none; }
}
@keyframes srFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   今日状态卡
   ============================================================ */
.single-ref-screen .daily-status {
  width: 100%;
  margin-bottom: 6px;
}
.single-ref-screen .status-card {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--sr-card);
  border: 3px solid var(--sr-stroke);
  border-radius: var(--sr-radius-lg);
  box-shadow: var(--sr-shadow-card);
}
.single-ref-screen .checkin-block,
.single-ref-screen .coin-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: background 0.15s ease;
  text-align: left;
}
.single-ref-screen .checkin-block:hover,
.single-ref-screen .coin-block:hover { background: var(--sr-muted); }
.single-ref-screen .checkin-icon-wrap,
.single-ref-screen .coin-icon-wrap {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sr-primary-light);
  border: 2.5px solid var(--sr-stroke);
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 3px 0 #2D2D2D;
}
.single-ref-screen .coin-icon-wrap { background: var(--sr-yellow); }
.single-ref-screen .checkin-icon,
.single-ref-screen .coin-icon { width: 20px; height: 20px; color: var(--sr-stroke); }
.single-ref-screen .checkin-info,
.single-ref-screen .coin-info { display: flex; flex-direction: column; }
.single-ref-screen .checkin-title,
.single-ref-screen .coin-title {
  font-size: 0.75rem;
  color: var(--sr-fg-light);
  font-weight: 500;
  margin-bottom: 2px;
}
.single-ref-screen .checkin-days,
.single-ref-screen .coin-num {
  font-family: var(--sr-font);
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--sr-fg);
  line-height: 1;
}
.single-ref-screen .days-num {
  color: var(--sr-primary-dark);
  font-size: 1.375rem;
}
.single-ref-screen .checkin-badge { margin-left: auto; }
.single-ref-screen .badge-check {
  display: inline-block;
  padding: 3px 8px;
  background: var(--sr-primary);
  border: 2px solid var(--sr-stroke);
  border-radius: var(--sr-radius-full);
  font-size: 0.6875rem;
  font-weight: 800;
  color: #FFF;
  text-shadow: 1px 1px 0 #2D2D2D;
  box-shadow: 0 2px 0 #2D2D2D;
}
.single-ref-screen .coin-arrow {
  width: 15px;
  height: 15px;
  color: var(--sr-muted-fg);
  margin-left: auto;
  flex-shrink: 0;
}
.single-ref-screen .status-divider {
  width: 2px;
  height: 34px;
  background: var(--sr-stroke);
  opacity: 0.15;
  margin: 0 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   开始游戏按钮
   ============================================================ */
.single-ref-screen .start-btn-section { width: 100%; margin-top: 4px; margin-bottom: 8px; }
.single-ref-screen .start-btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--sr-primary);
  border: 4px solid var(--sr-stroke);
  border-radius: var(--sr-radius-xl);
  box-shadow: var(--sr-shadow-xl);
  cursor: pointer;
  font-family: var(--sr-font);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  animation: srBtnPulse 2s ease-in-out infinite;
}
@keyframes srBtnPulse {
  0%, 100% { box-shadow: var(--sr-shadow-xl); }
  50% { box-shadow: 0 10px 0 #2D2D2D, 0 0 20px rgba(126, 217, 87, 0.4); }
}
.single-ref-screen .start-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 0 #2D2D2D;
}
.single-ref-screen .start-btn:active {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 2px 0 #2D2D2D;
}
.single-ref-screen .start-btn.start-btn-locked {
  background: #B9B4AC;
  animation: none;
}
.single-ref-screen .start-btn-text {
  position: relative;
  z-index: 1;
  font-size: 1.375rem;
  font-weight: 900;
  color: #FFF;
  letter-spacing: 0.15em;
  text-shadow: 3px 3px 0 #2D2D2D;
}
.single-ref-screen .start-btn-icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  color: #FFF;
  filter: drop-shadow(2px 2px 0 #2D2D2D);
}
.single-ref-screen .start-hint {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: var(--sr-fg-light);
  padding-bottom: 8px;
}

/* ============================================================
   皮肤商店 — 参考UI糖果绿3D风 (P148-0817skinCandy)
   对齐 UI/皮肤选择.html(手机端底部抽屉) + UI/皮肤选择(电脑端).html(电脑端右侧面板)
   糖果绿: 渐变 #55EDB0→#1BC480 + 厚边 #15A86C + 描边 #A5D6A7/#C8E6C9
   ============================================================ */
#skinModal.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: auto;
}
#skinModal.sheet-overlay:not(.show) { display: none; }
#skinModal.sheet-overlay.show { display: block; }

/* ===== P148-0817skinCloseAnim: 退出动画(与入场对称) =====
   JS closeSkinModal() 加 .closing 后等 300ms 再移除 .show,
   此前 CSS 无 .closing 规则 → 关闭时无动画直接消失。
   手机端: 抽屉下滑出场(对称入场 srSheetSlideUp); 电脑端: 侧板右滑出场(对称 srSheetSlideRight)。
   时长 0.28s < JS 的 300ms, 保证动画完整播完才 display:none。 */
#skinModal.closing .sheet-backdrop {
  animation: srBackdropFadeOut 0.28s ease forwards;
}
@keyframes srBackdropFadeOut {
  to { opacity: 0; }
}
#skinModal.closing .sheet-drawer {
  animation: srSheetSlideDown 0.28s ease-in forwards;
}
@keyframes srSheetSlideDown {
  to { transform: translateY(100%); }
}
@media (min-width: 768px) {
  #skinModal.closing .sheet-drawer { animation: srSheetSlideOutRight 0.28s ease-in forwards; }
  @keyframes srSheetSlideOutRight {
    to { transform: translateX(100%); }
  }
}
#skinModal .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 58, 42, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ===== 抽屉容器: 手机端底部上滑 / 电脑端右侧滑出 ===== */
#skinModal .sheet-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #F0FDF4 0%, #E8F5E9 40%, #DFFBE7 100%);
  border: 3px solid #C8E6C9;
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 32px rgba(27, 196, 128, 0.15);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: srSheetSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes srSheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/* ===== 电脑端(≥768px): 从右侧滑出成为侧面板 ===== */
@media (min-width: 768px) {
  #skinModal .sheet-drawer {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 420px;
    border-right: none;
    border-radius: 28px 0 0 28px;
    box-shadow: -8px 0 32px rgba(27, 196, 128, 0.15);
    max-height: 100vh;
    animation: srSheetSlideRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes srSheetSlideRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  #skinModal .sheet-handle { display: none; }
  #skinModal .skin-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* P148-0817skinGridAlign: grid 默认 align-content:stretch 会把仅有的 1 行卡片
       拉伸填满侧板高度, 绿框底部远超"默认"文字; 改为顶部对齐, 行高回归内容高度 */
    align-content: start;
  }
}
#skinModal .sheet-handle {
  width: 44px;
  height: 5px;
  background: #A5D6A7;
  opacity: 0.7;
  border-radius: 999px;
  margin: 10px auto 4px;
}

/* ===== 头部 ===== */
#skinModal .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
}
#skinModal .sheet-title {
  font-family: var(--sr-font);
  font-size: 1.35rem;
  font-weight: 900;
  color: #1B5E20;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
#skinModal .sheet-title-icon {
  font-size: 1.3rem;
  display: inline-block;
  animation: srSkinWiggle 2.5s ease-in-out infinite;
}
@keyframes srSkinWiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
#skinModal .sheet-close-btn {
  width: 36px;
  height: 36px;
  background: #fff;
  border: 2px solid #A5D6A7;
  border-radius: 50%;
  box-shadow: 0 3px 0 #81C784;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2E7D32;
  transition: all 0.15s ease;
}
#skinModal .sheet-close-btn:hover { transform: scale(1.1); }
#skinModal .sheet-close-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #81C784; }
#skinModal .sheet-close-btn svg { width: 18px; height: 18px; }

/* ===== 分类标签(含emoji) ===== */
#skinModal .sheet-tabs {
  display: flex;
  gap: 12px;
  padding: 0 20px 14px;
  border-bottom: 2px solid #C8E6C9;
}
#skinModal .sheet-tab {
  flex: 1;
  padding: 11px 4px;
  background: #fff;
  border: none;
  border-radius: 24px;
  font-family: var(--sr-font);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #5D8A60;
  cursor: pointer;
  box-shadow: 0 4px 0 #A5D6A7;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#skinModal .sheet-tab[data-skin-tab="puppet"]::before { content: '🦒'; font-size: 1.15rem; }
#skinModal .sheet-tab[data-skin-tab="paddle"]::before { content: '🏓'; font-size: 1.15rem; }
#skinModal .sheet-tab:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #A5D6A7; }
#skinModal .sheet-tab.on {
  background: linear-gradient(180deg, #55EDB0 0%, #1BC480 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #15A86C, 0 8px 20px rgba(27, 196, 128, 0.3);
}
#skinModal .sheet-tab:active { transform: translateY(1px); box-shadow: 0 2px 0 #15A86C; }

/* ===== 当前使用大卡 ===== */
#skinModal .skin-featured {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #E8F5E9 100%);
  border: 2px solid #B9F6CA;
  border-radius: 32px;
  padding: 18px;
  margin: 14px 20px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 0 #81C784, inset 0 2px 0 rgba(255, 255, 255, 0.8);
}
#skinModal .skin-featured-badge {
  position: absolute;
  top: -11px;
  left: 18px;
  background: linear-gradient(180deg, #55EDB0 0%, #1BC480 100%);
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: var(--sr-font);
  letter-spacing: 0.05em;
  box-shadow: 0 3px 0 #15A86C;
  white-space: nowrap;
}
#skinModal .skin-featured-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  border: 2px solid #A5D6A7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sr-font);
  font-size: 1rem;
  font-weight: 900;
  color: #1B5E20;
}
#skinModal .skin-featured-thumb.paddle {
  background: linear-gradient(135deg, #E0F7FF 0%, #B2EBF2 100%);
  border-color: #80DEEA;
  color: #00695C;
}
/* P148-0817panSkin: 图片素材皮肤(平底锅)当前使用大卡缩略图 */
#skinModal .skin-featured-thumb img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 10px;
}
#skinModal .skin-featured-info { flex: 1; min-width: 0; }
#skinModal .skin-featured-name {
  font-family: var(--sr-font);
  font-size: 1.05rem;
  font-weight: 800;
  color: #1B5E20;
  letter-spacing: 0.04em;
  margin: 4px 0 2px;
}
#skinModal .skin-featured-desc {
  font-size: 0.75rem;
  color: #66BB6A;
  font-weight: 500;
  margin-bottom: 4px;
}
#skinModal .skin-featured-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--sr-font);
  background: #E8F5E9;
  color: #2E7D32;
  border: 1.5px solid #A5D6A7;
}

/* ===== 皮肤列表标题 ===== */
#skinModal .skin-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 8px;
}
#skinModal .skin-list-title {
  font-family: var(--sr-font);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #2E7D32;
  display: flex;
  align-items: center;
  gap: 6px;
}
#skinModal .skin-list-title::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #55EDB0, #1BC480);
}
#skinModal .skin-owned-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #81C784;
  background: #E8F5E9;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ===== 皮肤网格 ===== */
#skinModal .skin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 4px 20px 12px;
  overflow-y: auto;
  flex: 1;
}
#skinModal .skin-grid::-webkit-scrollbar { width: 6px; }
#skinModal .skin-grid::-webkit-scrollbar-track { background: transparent; }
#skinModal .skin-grid::-webkit-scrollbar-thumb { background: #A5D6A7; border-radius: 6px; }

/* ===== 皮肤卡片(糖果白卡) ===== */
#skinModal .skin-item {
  position: relative;
  background: #fff;
  border: 2.5px solid transparent;
  border-radius: 20px;
  padding: 10px 6px 8px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#skinModal .skin-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(27, 196, 128, 0.15);
}
#skinModal .skin-item.on {
  border-color: #1BC480;
  background: linear-gradient(180deg, #F0FDF4 0%, #DFFBE7 100%);
  box-shadow: 0 4px 0 #15A86C, 0 6px 16px rgba(27, 196, 128, 0.2);
  transform: translateY(-2px);
}
#skinModal .skin-check {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: linear-gradient(180deg, #55EDB0 0%, #1BC480 100%);
  border: 2.5px solid #fff;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #15A86C;
  animation: srCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes srCheckPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
#skinModal .skin-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sr-font);
  font-size: 1.25rem;
  font-weight: 900;
  color: #1B5E20;
  background: linear-gradient(135deg, #F1F8E9 0%, #DCEDC8 100%);
  position: relative;
}
#skinModal .skin-thumb.paddle { background: linear-gradient(135deg, #E0F7FF 0%, #B2EBF2 100%); color: #00695C; }
#skinModal .skin-thumb.locked {
  background: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 100%);
  color: #78909C;
  filter: grayscale(1);
}
#skinModal .skin-thumb.locked::before {
  content: '🔒';
  font-size: 1.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#skinModal .skin-name {
  font-family: var(--sr-font);
  font-size: 0.75rem;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 4px;
  line-height: 1.3;
}
#skinModal .skin-item.on .skin-name { color: #1B5E20; }
#skinModal .skin-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--sr-font);
  font-size: 0.6875rem;
  font-weight: 800;
  color: #2E7D32;
}
#skinModal .skin-price.default { color: #81C784; }
#skinModal .skin-price.own { color: #1BC480; }
#skinModal .skin-price.buy { color: #FF8F00; }

/* ===== 底部操作栏 ===== */
#skinModal .sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px 20px;
  border-top: 2px solid #C8E6C9;
  background: #fff;
}
#skinModal .footer-coin-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sr-font);
  font-size: 0.875rem;
  font-weight: 700;
  color: #2E7D32;
}
#skinModal .footer-coin-info svg { width: 20px; height: 20px; color: #E6A800; }
#skinModal .footer-topup-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 18px;
  background: #fff;
  border: 2px solid #A5D6A7;
  border-radius: 999px;
  box-shadow: 0 3px 0 #81C784;
  font-family: var(--sr-font);
  font-size: 0.8125rem;
  font-weight: 800;
  color: #2E7D32;
  cursor: pointer;
  transition: all 0.15s ease;
}
#skinModal .footer-topup-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #81C784; }
#skinModal .footer-topup-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #81C784; }
#skinModal .footer-equip-btn {
  background: linear-gradient(180deg, #55EDB0 0%, #1BC480 100%);
  color: #fff;
  border: none;
  box-shadow: 0 5px 0 #15A86C, 0 8px 20px rgba(27, 196, 128, 0.3);
  letter-spacing: 0.1em;
}
#skinModal .footer-equip-btn:hover { box-shadow: 0 7px 0 #15A86C, 0 12px 28px rgba(27, 196, 128, 0.35); }
#skinModal .footer-equip-btn:active { box-shadow: 0 2px 0 #15A86C; }
#skinModal .skin-modal-hint {
  text-align: center;
  font-size: 0.75rem;
  color: #FF8F00;
  padding: 0 20px 12px;
  background: #fff;
  min-height: 18px;
}

/* ============================================================
   打卡卡片 — 糖果薄荷绿3D风 (P148-0817ckCandy, 主体样式在 main.css)
   此处仅做单人页字体协调: 标题/数字沿用单人页卡通字体
   ============================================================ */
#checkinPop .ck-title,
#checkinPop .ck-card-name,
#checkinPop .ck-cal-title,
#checkinPop .ck-streak-num,
#checkinPop .ck-close {
  font-family: var(--sr-font);
}

/* ================================================================
   兼容修复层 (20260816refUI2) — 中和 cartoon-cute.css 旧版单人页残留规则
   根因(用户反馈: 桌面端单人UI布局错乱 + 开始游戏后单人页不消失 + 刷新仍异常):
   1) cartoon-cute.css @media(min-width:900px) 写死
      .single-mode-screen{display:grid!important} — 基础规则无 .show 也生效:
      ① JS 内联 style.display='none' 被 !important 压过 → 开始游戏后单人页
         永不隐藏, gameScreen(body flex-column)堆在其下方;
      ② 刷新后桌面端单人页也常显, 与首页叠放 → "刷新也没解除"。
   2) 同块 2 列 grid-template → 新结构子元素(top-bar/预览/难度/状态卡/开始按钮)
      被自动放置到乱序单元格 → "布局异常错乱"。
   3) 旧版同名类 .game-preview(上一版预览框) 强制 aspect-ratio:16/9!important、
      justify-content:center!important、旧描边阴影 → 预览行变形;
      .game-card::before/::after 星星装饰、桌面端 game-title clamp(32-44px)!important、
      game-tag/game-dot.active/diff-btn 旧 !important 尺寸 → 与参考UI不符。
   处理: 本文件在 cartoon-cute.css 之后加载, 用同级 !important + 同/更高优先级
   选择器反压; 不改 cartoon-cute.css(双人页共用其规则)。
   ================================================================ */

/* 1. 屏幕显隐规范: 基础隐藏 + .show 才显示(对齐 main.css 机制, 压过旧 grid!important)
      (refUI4: 上下16→10/左右20→16 压榨边距给演示画布)
      (refUI5: 上下10→8/左右16→14 再压榨; 背景改 transparent 由 body:has 层统一铺绿) */
.single-ref-screen {
  display: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: normal !important;
  padding: max(2px, env(safe-area-inset-top)) 10px max(6px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}
.single-ref-screen.show {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* refUI5: 限高防矮视口裁剪 — body overflow:hidden+flex居中下, 内容高于视口时
     底部(开始按钮)会被裁且滚不到; 限高后容器自身 overflow-y:auto 内滚可达 */
  max-height: calc(100vh - 44px) !important;
}
/* 旧 .single-mode-screen::before/::after 星星装饰(空 content)一并清除 */
.single-ref-screen::before,
.single-ref-screen::after { content: none !important; }

/* 2. 预览行(section.game-preview): 中和旧预览框规则(16/9比例/居中/描边/阴影/悬停位移) */
.single-ref-screen .game-preview {
  aspect-ratio: auto !important;
  justify-content: space-between !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  overflow: visible !important;
}
.single-ref-screen .game-preview:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* 3. 预览卡: 去旧版星星装饰 + 去桌面端 24px 内边距(参考卡内边距由 preview-info 控制) */
.single-ref-screen .game-card { padding: 0 !important; }
.single-ref-screen .game-card::before,
.single-ref-screen .game-card::after { content: none !important; }

/* 4. 文字/标签/圆点/难度按钮: 压过旧桌面端 !important 尺寸, 回到参考UI规格
      (refUI13: 清除全局 .game-title 的 3px 实心卡通 text-shadow, 消除"体感乒乓球"文字被描边拖影成两层的错觉)
      (refUI19: 清除描边后, 全局 .game-title 的白字(#FFFFFF)在白卡片上不可见 → 文字"消失";
       恢复为参考UI深色字 var(--sr-fg), 白底黑字清晰可读; game-desc 同步固定深灰)
      (refUI20: 修复"体感乒乓球"文字在入场动画播放完后消失 — 根因 main.css 给 .game-title 基态 opacity:0,
       仅靠 gameTitleIn...forwards 揭示; 本层改动画为 srPop...backwards 后, 动画结束会回落基态 opacity:0 → 消失。
       与 game-desc 一致, 强制基态 opacity:1, 动画结束后保持可见; 同时覆盖 prefers-reduced-motion 下 animation:none 的场景) */
.single-ref-screen .game-title {
  font-size: 1.35rem !important;
  text-align: center !important;
  padding: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  color: var(--sr-fg) !important;
  opacity: 1 !important;
}
.single-ref-screen .game-desc {
  padding: 0 !important;
  text-align: center !important;
  color: var(--sr-fg-light) !important;
  opacity: 1 !important;
}
.single-ref-screen .game-dots { margin-top: 0 !important; }
.single-ref-screen .game-dot.active {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}
.single-ref-screen .diff-btn {
  padding: 10px 8px !important;
  border: 3px solid var(--sr-stroke) !important;
  border-radius: var(--sr-radius-lg) !important;
  box-shadow: var(--sr-shadow-card) !important;
  background: var(--sr-card) !important;
  font-family: var(--sr-font) !important;
}
.single-ref-screen .diff-btn.active {
  /* 20260817diffLight: 按下态浅绿(与上方桌面声明一致 #A8E88F) */
  background: #A8E88F !important;
  /* P148-0817diffPop: 移除 transform 的 !important — !important 作者样式优先级高于 CSS 动画,
     会让 .sr-diff-pop 的 Q弹缩放失效。active 的 translateY(-2px) 由上方普通声明(不!important)提供。 */
  box-shadow: var(--sr-shadow-lg) !important;
}

/* 5. 顶部栏: 中和游戏页全局 .top-bar/.top-bar-right 规则渗入
      (main.css .top-bar 的 padding 6/8/10/18 + .top-bar-right 的 column 竖排
       会把皮肤/打卡按钮竖着叠 96px 高, 参考UI为横排 48px 行) */
.single-ref-screen .top-bar {
  padding: 0 !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.single-ref-screen .top-bar-right {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ================================================================
   refUI5 修复层 — 移除开始按钮背后的白/绿渐变框 + 画布再放大
   用户反馈: 开始按钮背后有白色半透明框 + 白绿渐变框, 要求移除并把空间让给演示画布。
   根因: body 的首页氛围层(.home-ambient: 光圈/粒子/结构层, z-index:-1 fixed 全屏)
   + body 暖白渐变底(#fbf8f1→#eee7da) 在单人页 560px 容器之外露出 — 容器外的
   底部/两侧可见暖白底叠绿光圈, 视觉上像按钮背后衬了一个白绿渐变框。
   处理: 单人页显示时(body:has(.single-ref-screen.show), 项目已依赖 :has) —
   ① 隐藏 .home-ambient 全部装饰(与游戏内 body[data-game] 同策略, 零渲染开销);
   ② 隐藏 body::before/::after 噪点+暗角;
   ③ body 背景换成单人页同款绿渐变, 容器背景 transparent → 内外无缝、无边界色差线;
   ④ 页宽 560→620 + 各区间距再压榨(top-bar 12→8 / preview 14→10 / difficulty 16→10 /
      label 12→8 / diff-btn 14→12 / status 14→10 / status-card 14→10 / start 12→6 /
      start-btn 18→16 / preview-info 10→8) → 演示画布约 434x244 → 494x278。
   返回首页/进入游戏后 .show 移除, :has 失配自动恢复原状, 无需 JS 参与。
   (refUI14: 用户强烈喜爱首页背景元素(光晕/粒子/有机色块), 要求切换单人模式时不得换掉背景UI。
    故移除下方三条隐藏规则, 单人选择页(纯展示、无游戏渲染开销)背景完全延续首页暖白渐变+氛围层;
    body 平滑统一, 不再铺绿/隐藏 ambient/隐藏噪点暗角) */

/* ============================================================
   手机端(≤767px)单人模式 — 按钮缩小 + 移除每日状态卡 (20260817singleMobile)
   用户诉求: 手机端布局紧张, ①返回/皮肤/打卡/左右箭头全部缩小;
             ②移除"简单"按钮下方连在一起的"连续打卡+皮肤碎片"每日状态卡, 空间让给重要布局。
   做法: 仅手机端生效(≤767px), 限定 .single-ref-screen 不影响其它页面与桌面;
         箭头缩小后预览卡(flex:1)自动变大, 演示画布更大;
         .daily-status 用 display:none 隐藏(元素仍保留DOM, 皮肤打卡等JS引用不受影响)。
   ============================================================ */
@media (max-width: 767px) {
  .single-ref-screen .icon-btn { width: 46px !important; height: 46px !important; }
  .single-ref-screen .icon-btn svg { width: 22px !important; height: 22px !important; }
  .single-ref-screen .icon-btn-small { width: 40px !important; height: 40px !important; }
  .single-ref-screen .icon-btn-small svg { width: 20px !important; height: 20px !important; }
  .single-ref-screen .arrow-btn { width: 48px !important; height: 48px !important; }
  .single-ref-screen .arrow-btn svg { width: 24px !important; height: 24px !important; }
  .single-ref-screen .daily-status { display: none !important; }
}

/* ============================================================
   手机端(≤767px)单人模式 — 整体上移 + 箭头改长方形放难度上方 (20260817singleMobile3)
   用户诉求:
   ① 顶部(返回/皮肤/打卡)、演示UI(预览卡)、左右箭头 一起往上移;
   ② 左右箭头 改成长方形(横向胶囊), 不再占卡片两侧;
   ③ 箭头放在"简单"难度按钮的上方 —— 卡片独占全宽 X轴最大化, 玩家看清演示UI。
   做法: 预览卡 flex:1 1 100% 独占整行(宽贴合屏幕); game-preview 改 flex-wrap,
         箭头在预览卡下方的第二行, 用 flex:1 均分为两根横向长方形胶囊;
         顶部/预览/难度间距全部压到最小(整体上移)。仅手机端生效。
   ============================================================ */
@media (max-width: 767px) {
  /* 容器: X轴铺满; 解除 max-height/overflow, 不触发内部滚动。
     20260817singleMobile14: 居中高度基准 100vh→100dvh + 底部补 20px —
     「整体位置上移」: 用户反馈 13 版真机"位置太低, 下方没空间, 上方有空间"。
     根因: 移动端 100vh 含被地址栏遮挡的区域, 居中计算把内容中心压到真实可视区之下,
     视觉上底部空间被地址栏吃掉 → 内容偏下贴底。
     修复: ①min-height 用 100dvh(动态视口, 地址栏收展实时贴合可视区, 不支持时回落 100vh);
          ②padding-bottom 20px 让整体重心再略上移。 */
  .single-ref-screen.show { width: 100% !important; max-width: 100% !important; padding-left: 2px !important; padding-right: 2px !important; padding-top: max(0px, env(safe-area-inset-top)) !important; padding-bottom: 20px !important; max-height: none !important; overflow: visible !important; min-height: 100vh !important; min-height: 100dvh !important; box-sizing: border-box !important; justify-content: center !important; }

  /* 禁用手势/滚动条 + html/body 均不滚动 (20260817singleMobile8 起;
     singleMobile13: 容器内部居中排列, body 保持贴顶兜底由容器 min-height 撑满视口) */
  body:has(#singleModeScreen.show) { justify-content: flex-start !important; overflow: hidden !important; }
  html:has(body #singleModeScreen.show) body { overflow: hidden !important; }

  /* 根因补充: 视口滚动实际由 html 根元素控制, 只对 body 设 overflow:hidden 挡不住.
     必须对 html 根元素也禁滚 + 关闭 overscroll, 才能真正移除「上下滑动移动效果」 */
  html:has(#singleModeScreen.show) { overflow: hidden !important; }
  html:has(body #singleModeScreen.show) { overscroll-behavior: none !important; }

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

  /* 演示区改 wrap, 让预览卡独占第一行、箭头排第二行;
     singleMobile13: gap 8→14 预览卡与箭头行间距放宽 */
  .single-ref-screen .game-preview { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: space-between !important; gap: 14px !important; margin-top: 0 !important; margin-bottom: 0 !important; }

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

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

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

  /* 20260817srBtnClip: 开始游戏按钮手机端治触摸放大裁切 —
     触摸点击后 :hover 粘滞(scale(1.02)+translateY(-4px) 上浮变大)直到进游戏,
     按钮贴容器左右边缘放大越界观感如"被裁切"; 手机端点击即进游戏无需悬停效果,
     transform 置 none(同箭头套路非 important, 不压制动画)。电脑端 hover/active 不受影响 */
  .single-ref-screen .start-btn:hover,
  .single-ref-screen .start-btn:active { transform: none; }

  /* 顶部栏(返回/皮肤/打卡): 与下方演示UI保持间距 */
  .single-ref-screen .top-bar { margin-top: 0 !important; margin-bottom: 18px !important; }

  /* singleMobile13: 难度区与箭头/开始按钮间距放宽 — 箭头↔难度 mt 6→22, 难度↔开始 mb 4→22,
     解决"左右箭头和下方的按钮间隙太密集" */
  .single-ref-screen .difficulty-select { margin-top: 22px !important; margin-bottom: 22px !important; }

  /* 底部间距压缩, 尽量不超出视口(超出则由容器自身内滚兜底) */
  .single-ref-screen .start-btn-section { margin-bottom: 2px !important; }
}