/* challenge.css — 7 天学习挑战（游戏面板视觉，见 PRD-7day-challenge.md「视觉规范」）
   组件由 PlayGround（playground/challenge.html）与实装（challenge.js）共用。
   设计定调：游戏面板，不是 App 弹窗——暖奶油羊皮纸底 + 钴蓝格子描边 +
   蜜金色金币，禁扁平白卡片。资产在 assets/challenge/。 */

:root {
  --ch-cream: #fdf6e6;
  --ch-ink: #6b4f2a;          /* 暖棕正文 */
  --ch-cobalt: #44609f;       /* 钴蓝描边/标题 */
  --ch-cobalt-deep: #35508c;
  --ch-gold: #e2a93b;
  --ch-gold-deep: #c98f1d;
  --ch-coral: #e8795a;
  /* 回本语义色：与全勤金标错开视觉权重，选偏暖的青瓷绿才压得住奶油底 */
  --ch-jade: #46a683;
  --ch-jade-deep: #2f8163;
  --ch-cell-bg: rgba(255, 250, 236, 0.92);
}

/* ────────────── 顶栏入口 ──────────────
   这里刻意不用面板那套游戏皮。顶栏是系统控件区，`learn.html` 给分享 / 主题 /
   交流群 / 语言 / 账号定了统一契约（--xa-ctl-h 36px、--xa-ctl-r 10px、1px 边），
   胶囊 + 2px 钴蓝描边 + 奶油渐变摆进去像另一个网站的按钮混了进来。
   改为对齐「交流群」那档「带语义色的按钮」：同骨架，只把绿换成琥珀金。
   游戏感留给点开后的面板，入口只负责在这排按钮里当一个体面的邻居。
   PlayGround 等页面没有这两个变量，故都带 fallback。 */

.ch-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--xa-ctl-h, 36px);
  padding: 0 13px;
  margin-right: 8px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: var(--xa-ctl-r, 10px);
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ch-entry:hover { background: rgba(245, 158, 11, 0.17); border-color: rgba(245, 158, 11, 0.55); }
.ch-entry img.ch-coin { width: 16px; height: 16px; display: block; flex: none; }

[data-theme="dark"] .ch-entry { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }
[data-theme="dark"] .ch-entry:hover { border-color: rgba(251, 191, 36, 0.5); }

/* CTA 态：顶栏里常驻一颗一直发光的按钮很吵，这里只留一层极淡的呼吸底色 */
.ch-entry--cta { animation: ch-breathe 2.8s ease-in-out infinite; }
@keyframes ch-breathe {
  0%, 100% { background: rgba(245, 158, 11, 0.1); }
  50% { background: rgba(245, 158, 11, 0.22); }
}

/* 顶栏文案：宽屏用完整版，窄屏换短版（见 challenge.js 的 entryTxt）。
   实测 390px 视口下，完整文案会把整个入口顶到视口外，直接点不到。 */
.ch-entry .ch-entry-txt-s { display: none; }
@media (max-width: 820px) {
  .ch-entry .ch-entry-txt { display: none; }
  .ch-entry .ch-entry-txt-s { display: inline; }
}

/* 进行中：与基础态同款，进度数字弱一档 */
.ch-entry .ch-entry-sub { font-weight: 600; color: #a97b2f; font-size: 12px; }
[data-theme="dark"] .ch-entry .ch-entry-sub { color: #d9a441; }

/* 可领取：整排按钮里唯一的实底，这是活动最需要被点的一刻。
   骨架（高度 / 圆角 / 边宽）仍与邻居一致，只靠填色和红点拉权重。 */
.ch-entry--claimable {
  border-color: #d97706;
  background: linear-gradient(180deg, #f9b53d, #ef9d18);
  color: #fff;
  animation: ch-glow 2s ease-in-out infinite;
}
.ch-entry--claimable:hover { background: linear-gradient(180deg, #fbbf4f, #e8940f); }
[data-theme="dark"] .ch-entry--claimable { color: #fff; border-color: #b45309; }
@keyframes ch-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  50% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.22); }
}
.ch-entry--claimable::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ch-coral);
  border: 2px solid #fff;
}

/* 今日已领：静默态 */
.ch-entry--done { opacity: 0.72; animation: none; }

@media (max-width: 900px) { .ch-entry .ch-entry-sub { display: none; } }

/* 窄屏：入口右下角悬浮（节点由 challenge.js 迁到 body，见 PRD「窄屏入口」）。
   顶栏在 390px 视口下内容宽 685px，入口留在里面会被顶到屏幕外且滚不到。 */
.ch-entry--float {
  position: fixed;
  right: 12px;
  /* --ch-foot-gap 由 challenge.js 按底部导航栏的实测高度写入：learn 页是固定视口布局，
     那条「上一节 / 学会了 / 下一节」常驻屏幕最下方，不让位就会压住「下一节」。
     --ch-alice-gap 同理：页面右下角有 Alice 头像球（#alice-fab）时按实测位置
     把本胶囊抬到它上方，两个悬浮件都钉在右下角，不让位就叠在一起。 */
  bottom: calc(12px + var(--ch-foot-gap, 0px) + var(--ch-alice-gap, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  margin-right: 0;
  /* 悬浮球不在顶栏那排按钮里，不必守系统控件的骨架：这里要的是「浮在正文上的
     一颗球」，所以放回胶囊形、加大内距，底色也必须不透明——半透明会把正文透上来。 */
  height: auto;
  padding: 9px 15px 9px 11px;
  gap: 7px;
  font-size: 13px;
  border-radius: 999px;
  border-color: rgba(217, 119, 6, 0.5);
  background: linear-gradient(180deg, #fff5dd, #fde5b4);
  box-shadow: 0 4px 14px rgba(78, 58, 18, 0.28);
  transition: bottom 0.2s ease, box-shadow 0.15s ease;
}
.ch-entry--float img.ch-coin { width: 20px; height: 20px; }
.ch-entry--float:hover { transform: none; background: linear-gradient(180deg, #fff8e8, #fdeecb); }
/* 双类提权：可领取的实底金必须压过上面这层悬浮球底色 */
.ch-entry--float.ch-entry--claimable {
  background: linear-gradient(180deg, #f9b53d, #ef9d18);
  color: #fff;
}

/* ────────────── 遮罩与弹层容器 ────────────── */

.ch-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(46, 34, 14, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ch-fade-in 0.22s ease;
}
@keyframes ch-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 关闭键的定位参照。收缩包裹内容，宽度等于卡片/面板本身 */
.ch-modal {
  position: relative;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.ch-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ch-cobalt);
  background: var(--ch-cream);
  color: var(--ch-cobalt-deep);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(60, 42, 10, 0.3);
}
.ch-close:hover { transform: rotate(90deg); transition: transform 0.2s; }

/* ────────────── 游戏面板（底图 + CSS 还原七格） ────────────── */

.ch-board {
  position: relative;
  /* 格子/字号都按面板宽度算（cqw），而不是视口宽度：
     面板在 PlayGround 等容器里会比视口窄得多，用 vw 会让礼盒过大挤掉格内文字。 */
  container-type: inline-size;
  width: min(920px, 96vw);
  aspect-ratio: 1536 / 1024;
  background: url("assets/challenge/challenge-panel-bg.webp") center / cover no-repeat;
  border-radius: 26px;
  box-shadow: 0 18px 60px rgba(50, 34, 8, 0.45);
  font-family: inherit;
  color: var(--ch-ink);
  user-select: none;
}

/* 顶部缎带标题：底图那条缎带是「中间拱起、两端垂下」的绶带，平排文字压上去
   会明显不贴。这里让文字沿缎带弧线走——SVG 覆盖整块面板，viewBox 直接用底图
   的 1536×1024 像素坐标，面板 aspect-ratio 同为 1536/1024，所以路径坐标与底图
   1:1 对齐；路径参数由扫描底图缎带描边实测得出（带体 x 455→880，中轴两端
   y≈100.6、中点 y≈49.0，即拱高 29px），基线再下移约 0.36 字高。
   文字不烧进底图：三语共用一张底图，且矢量字放大不糊。 */
.ch-board .ch-title {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* 覆盖全panel，绝不能吃掉格子的点击 */
}
.ch-title-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.ch-title-arc text {
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 0.08em;
}
/* 描边分两层画：下层只描边、上层只填充。
   比单层 + paint-order 稳（后者在旧 Safari 无效，会让描边盖住字面）。 */
.ch-title-arc .ch-t-out {
  fill: none;
  stroke: #fffbee;
  stroke-width: 7;
  stroke-linejoin: round;
}
.ch-title-arc .ch-t-in { fill: var(--ch-cobalt-deep); }
/* 引导路径只作排版基准。<defs> 内本就不渲染，这里再显式关一道，
   杜绝任何浏览器把它画成一条线。 */
.ch-title-arc path { display: none; }
.ch-title-flat { display: none; }

/* 七格区：只能落在底图左侧的干净留白里。
   实测当前底图（逐行扫非背景像素）：狐狸抬起的手臂最左伸到 x=906（59.0%），
   左下角礼盒顶沿在 y=846（82.6%），缎带下沿约 y=165（16%）。
   于是可用净区是 x 5%~58%、y 21%~82%，格子区取 52.5% 宽给右侧留 23px 余量。 */
.ch-grid {
  position: absolute;
  left: 5%;
  /* 缎带下沿 16%、左下角礼盒顶沿 82.6%，中间这 66% 要塞下「七格 + 倒计时 + 进度条」。
     按 4% 的统一间隙切分：格子 20%~67%、间隔、meta 70.5%~78.6%、再留 4% 到礼盒。 */
  top: 20%;
  width: 51.5%;
  height: 47%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "d1 d2 d3 d4"
    "d5 d6 d7 d7";
  gap: 4.5% 4%;
}
.ch-cell--d1 { grid-area: d1; } .ch-cell--d2 { grid-area: d2; }
.ch-cell--d3 { grid-area: d3; } .ch-cell--d4 { grid-area: d4; }
.ch-cell--d5 { grid-area: d5; } .ch-cell--d6 { grid-area: d6; }
.ch-cell--d7 { grid-area: d7; }

.ch-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--ch-cell-bg);
  border: 3px solid var(--ch-cobalt);
  border-radius: 14px;
  box-shadow: inset 0 2px 6px rgba(146, 116, 60, 0.18);
  min-width: 0;
  overflow: hidden;
}
.ch-cell .ch-cell-day {
  font-size: clamp(9px, 1.3cqw, 12px);
  font-weight: 800;
  color: var(--ch-cobalt-deep);
  letter-spacing: 0.06em;
}
.ch-cell .ch-cell-amount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: clamp(12px, 1.95cqw, 18px);
  font-weight: 900;
  color: var(--ch-gold-deep);
}
.ch-cell .ch-cell-amount img { width: clamp(12px, 1.95cqw, 18px); height: auto; }
.ch-cell .ch-cell-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: clamp(9px, 1.3cqw, 12px);
  font-weight: 700;
  color: #93794d;
  line-height: 1.2;
  text-align: center;
}
/* 行内 lucide 图标必须锁尺寸：无 width/height 的内联 SVG 会按默认
   300×150 撑开，直接把格子挤爆（锁图标曾在真实页面渲染成 39px）。 */
.ch-cell .ch-cell-status svg,
.ch-cell .ch-cell-check svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  display: block;
}
/* 礼盒是每格的主视觉，要压得住整格，比行内图标大一档 */
.ch-cell .ch-cell-icon {
  width: clamp(26px, 5cqw, 46px);
  height: auto;
  display: block;
  transition: filter 0.2s, opacity 0.2s;
}
/* 未解锁的礼盒必须保持彩色：灰掉就看不出奖品是什么，也就没了继续学的诱惑。
   「还没到手」交给格子边框和状态文字表达，不靠去饱和。 */
.ch-cell.is-locked .ch-cell-icon { opacity: 0.96; }
.ch-cell.is-claimed .ch-cell-icon { opacity: 0.5; }
.ch-cell.is-active .ch-cell-icon { filter: drop-shadow(0 2px 5px rgba(226, 169, 59, 0.5)); }
.ch-cell.is-claimable .ch-cell-icon { filter: drop-shadow(0 3px 7px rgba(226, 169, 59, 0.75)); }

/* 第七格：金色压轴 + 全勤奖徽标。跨两列，礼盒放大一档撑住这块宽度 */
.ch-cell--final { border-color: var(--ch-gold); box-shadow: inset 0 2px 6px rgba(146, 116, 60, 0.18), 0 0 10px rgba(226, 169, 59, 0.45); }
.ch-cell--final .ch-cell-icon { width: clamp(34px, 6.3cqw, 58px); }
/* 角标要挂在格子外沿，得让这一格放开 .ch-cell 的 overflow:hidden */
.ch-cell--final { overflow: visible; }
/* 挂在格子右上角外沿：放在格内的话，面板一窄就会压住居中的「第 7 天」 */
.ch-cell--final .ch-cell-bonus {
  position: absolute;
  top: -8px;
  right: -5px;
  box-shadow: 0 2px 5px rgba(146, 116, 60, 0.35);
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd977, #f0b53f);
  color: #6b4a08;
  font-size: clamp(8px, 1.2cqw, 11px);
  font-weight: 900;
  box-shadow: 0 1px 3px rgba(107, 74, 8, 0.35);
}

/* 回本角标：与 Day7 金标同机制（挂在格外沿，故该格 overflow 必须放开） */
.ch-cell--payback { overflow: visible; }
.ch-cell .ch-cell-payback {
  position: absolute;
  top: -8px;
  right: -5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fc3a1, var(--ch-jade));
  color: #fff;
  font-size: clamp(8px, 1.2cqw, 11px);
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(47, 129, 99, 0.4);
}

/* —— 格子状态 —— */

/* 未解锁的格子：只压文字对比，不给整格降透明——整格 opacity 会把礼盒一起弄灰，
   奖品看不清就失去了往下学的动力。 */
.ch-cell.is-locked {
  border-color: #a8b6d2;
  background: rgba(255, 250, 236, 0.82);
}
.ch-cell.is-locked .ch-cell-day { color: #8a93a8; }
.ch-cell.is-locked .ch-cell-amount { color: #a8935f; }
.ch-cell.is-locked .ch-cell-status { color: #a29277; }

.ch-cell.is-active { animation: ch-cell-breathe 2.4s ease-in-out infinite; }
@keyframes ch-cell-breathe {
  0%, 100% { box-shadow: inset 0 2px 6px rgba(146, 116, 60, 0.18), 0 0 0 0 rgba(68, 96, 159, 0); }
  50% { box-shadow: inset 0 2px 6px rgba(146, 116, 60, 0.18), 0 0 10px 2px rgba(68, 96, 159, 0.5); }
}
.ch-cell.is-active .ch-cell-status { color: var(--ch-cobalt-deep); }

.ch-cell.is-claimable {
  cursor: pointer;
  border-color: var(--ch-gold);
  background: linear-gradient(180deg, #fffbe9, #fff0c4);
  animation: ch-glow 1.6s ease-in-out infinite;
}
.ch-cell.is-claimable:hover { transform: scale(1.04); transition: transform 0.15s; }
.ch-cell.is-claimable .ch-cell-icon { animation: ch-bounce 1s ease-in-out infinite; }
@keyframes ch-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.ch-cell.is-claimed {
  background: linear-gradient(180deg, #fdf3d4, #f7e6b2);
  border-color: #caa752;
}
.ch-cell.is-claimed .ch-cell-check {
  position: absolute;
  top: 4px;
  left: 6px;
  color: #4d8a3f;
  font-size: clamp(11px, 1.63cqw, 15px);
  font-weight: 900;
}

.ch-cell.is-missed { filter: grayscale(0.9); opacity: 0.6; }
.ch-cell.is-missed .ch-cell-status { color: #a05c4c; }

/* 领取成功：格子弹跳 */
.ch-cell.is-just-claimed { animation: ch-pop 0.5s ease; }
@keyframes ch-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ────────────── 面板底部：倒计时 + 累计对比条 ────────────── */

/* 倒计时 + 累计条：与格子区同宽同左，一起避开右侧角色（见 .ch-grid 注释） */
.ch-meta {
  position: absolute;
  left: 5%;
  /* 底边落在 78.6%，与左下角礼盒顶沿（82.6%）留出 41px；
     上方与格子区也留 3.5%，三段间隙才均匀 */
  top: 70.5%;
  width: 51.5%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ch-countdown {
  font-size: clamp(10px, 1.52cqw, 14px);
  font-weight: 800;
  color: var(--ch-cobalt-deep);
}
.ch-countdown strong { color: var(--ch-coral); }
/* 本金刻度的文字标签挂在条外（条内 overflow:hidden 会把它裁掉），
   靠 padding-bottom 给它留出行高，免得压到底图左下角的礼盒上。 */
.ch-total {
  position: relative;
  padding-bottom: clamp(13px, 2cqw, 18px);
}
.ch-total-bar {
  position: relative;
  height: clamp(14px, 2.17cqw, 20px);
  border-radius: 999px;
  border: 2px solid var(--ch-cobalt);
  background: rgba(255, 250, 236, 0.9);
  overflow: hidden;
}
.ch-total-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--ch-cobalt) 0 3px, transparent 3px 5px);
  opacity: 0.75;
}
/* 箭头必须单独一行叠在文字上方：跟文字并排的话，居中的是「箭头+文字」整体，
   箭头就偏到刻度线左边去了，指不准。 */
.ch-total-mark {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: clamp(8px, 1.15cqw, 10px);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  color: var(--ch-cobalt);
  white-space: nowrap;
}
.ch-total-mark::before {
  content: '';
  width: 0;
  height: 0;
  border: 3.5px solid transparent;
  border-bottom-color: currentColor;
  border-top-width: 0;
}
.ch-total.is-paid-back .ch-total-tick { opacity: 0.45; }
.ch-total.is-paid-back .ch-total-mark { color: var(--ch-jade-deep); }
.ch-total-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #f7cf6f, #eab545);
  transition: width 0.5s ease;
}
.ch-total-bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9px, 1.3cqw, 12px);
  font-weight: 900;
  color: #6b4a08;
}

/* ────────────── 领取飞币动效 ────────────── */

.ch-fx-coin {
  position: fixed;
  z-index: 12500;
  width: 26px;
  height: 26px;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ────────────── 活动说明卡（报名前）与结算卡：同一张暖色游戏卡 ────────────── */

.ch-card {
  position: relative;
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 22px;
  border: 3px solid var(--ch-cobalt);
  background: linear-gradient(180deg, #fffaf0, var(--ch-cream));
  box-shadow: 0 18px 60px rgba(50, 34, 8, 0.45);
  padding: 26px 26px 22px;
  color: var(--ch-ink);
}
.ch-card h3 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 900;
  color: var(--ch-cobalt-deep);
  letter-spacing: 0.08em;
  text-align: center;
}
.ch-card .ch-card-sub {
  text-align: center;
  font-size: 13px;
  color: #93794d;
  margin-bottom: 16px;
  font-weight: 600;
}

/* 奖励阶梯图（纯 CSS 柱状） */
.ch-ladder {
  /* 不要 align-items:flex-end——bar 必须 stretch 到 130px 的定高，
     柱体 <i> 的百分比高度才有解析基准 */
  display: flex;
  gap: 6px;
  height: 130px;
  margin: 8px 2px 4px;
}
.ch-ladder .ch-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.ch-ladder .ch-bar i {
  width: 100%;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #f7cf6f, #eab545);
  border: 2px solid var(--ch-gold-deep);
  border-bottom-width: 3px;
}
.ch-ladder .ch-bar.ch-bar--bonus i { background: linear-gradient(180deg, #ffd977, #f09f2f); box-shadow: 0 0 8px rgba(226, 169, 59, 0.6); }
.ch-ladder .ch-bar b { font-size: 11px; color: var(--ch-gold-deep); font-weight: 900; white-space: nowrap; }
.ch-ladder .ch-bar span { font-size: 10px; color: #93794d; font-weight: 700; white-space: nowrap; }

.ch-ladder .ch-bar.ch-bar--payback i { border-color: var(--ch-jade-deep); }
.ch-ladder .ch-bar.ch-bar--payback span { color: var(--ch-jade-deep); font-weight: 900; }

/* 说明卡上的回本注解：掏 800 之前用户最想知道的是「撑几天才不亏」 */
.ch-payback-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(70, 166, 131, 0.11);
  font-size: 12.5px;
  line-height: 1.5;
  color: #2c6a54;
}
.ch-payback-note svg { flex: none; width: 16px; height: 16px; color: var(--ch-jade-deep); }
.ch-payback-note strong { color: var(--ch-jade-deep); font-weight: 900; }

.ch-payback-hit { color: var(--ch-jade-deep); }

.ch-rules { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ch-rules li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.55; }
.ch-rules li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ch-cobalt); }
.ch-rules li strong { color: var(--ch-coral); }

/* 反作弊条：整条降到次级灰，不跟上面几条利好抢注意力。
   分隔线让它读起来像条款而不是第 6 个卖点 */
.ch-rules li.ch-rule--warn {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(60, 52, 40, .14);
  color: rgba(60, 52, 40, .58);
}
.ch-rules li.ch-rule--warn svg { color: rgba(60, 52, 40, .45); }
.ch-rules li.ch-rule--warn strong { color: rgba(60, 52, 40, .78); font-weight: 700; }

.ch-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 13px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #5a76b8, var(--ch-cobalt-deep));
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 4px 0 #263c6e, 0 8px 18px rgba(53, 80, 140, 0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ch-cta:hover { transform: translateY(-1px); }
.ch-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #263c6e; }
.ch-cta img { width: 20px; height: 20px; }
.ch-cta[disabled] { opacity: 0.6; cursor: default; }
.ch-cta--gold {
  background: linear-gradient(180deg, #f5c85c, #e0a52e);
  color: #5c3f06;
  box-shadow: 0 4px 0 #a97c14, 0 8px 18px rgba(201, 143, 29, 0.4);
}
/* 次级动作（申诉等）：白底描边，视觉让位给主按钮 */
.ch-cta--ghost {
  background: #fff;
  color: var(--ch-cobalt-deep);
  border: 2px solid rgba(53, 80, 140, 0.35);
  box-shadow: 0 4px 0 rgba(53, 80, 140, 0.18);
}
.ch-cta--ghost:active { box-shadow: 0 2px 0 rgba(53, 80, 140, 0.18); }
/* 主次按钮同排：次级在左收窄让位，主按钮占大头 */
.ch-btn-row { display: flex; gap: 10px; margin-top: 18px; }
.ch-btn-row .ch-cta { margin-top: 0; }
.ch-btn-row .ch-cta--ghost { flex: 0 0 34%; font-size: 14px; letter-spacing: 0; }
.ch-card .ch-note {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #a08c62;
  font-weight: 600;
}
.ch-card .ch-note strong { color: var(--ch-coral); }

/* ────────────── 结算卡专属 ────────────── */

.ch-settle-hero { display: flex; justify-content: center; margin: 6px 0 10px; }
.ch-settle-hero img { width: 120px; height: auto; }
.ch-settle-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-weight: 900;
  color: var(--ch-gold-deep);
}
.ch-settle-total b { font-size: 40px; }
.ch-settle-total span { font-size: 14px; color: #93794d; }
.ch-settle-days { display: flex; justify-content: center; gap: 5px; margin: 14px 0 4px; }
.ch-settle-days i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  border: 2px solid #caa752;
  background: #f7e6b2;
  color: #4d8a3f;
}
.ch-settle-days i.miss { border-color: #c2b49a; background: #efe8da; color: #a05c4c; filter: grayscale(0.4); }

/* 满勤礼花 */
.ch-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px; }
.ch-confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: ch-confetti-fall 2.8s linear infinite;
}
@keyframes ch-confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(560px) rotate(540deg); opacity: 0.15; }
}

/* ────────────── 移动端 ────────────── */

@media (max-width: 640px) {
  /* 底图是「左侧留白 + 右侧角色」的横版构图，竖屏整张铺满后角色必然跑到面板中间，
     七格就会压在人物脸上。所以竖屏拆成「顶部人物横幅 + 下方内容区」：
     面板本体退成同色系渐变，角色单独由 ::before 裁一条出来。 */
  .ch-board {
    /* 440px 上限：横幅高度锁死在面板宽度的 0.585 倍，面板再宽狐狸就会大到
       喧宾夺主（600px 屏上横幅要占 337px）。 */
    width: min(96vw, 440px);
    aspect-ratio: auto;
    height: auto;
    background: linear-gradient(180deg, #fffaef 0%, #fdf2dd 100%);
    border: 3px solid #ecca8b;
    padding-bottom: 18px;
    border-radius: 20px;
    overflow: hidden;     /* 让横幅顶角跟着面板圆角裁圆 */
  }
  /* 角色横幅：从底图裁出 x 830~1360、y 455~765 那一块——小狐狸举米粒的整个上半身。
     手机宽度装不下两张完整的脸（洛小山的脸在 y 95~290、狐狸在 525~700，全要就得
     615px 高的窗口，换算到 374px 屏是 300px 高的横幅，太占屏），所以取狐狸当主角、
     洛小山的身形作陪衬。换算成背景参数：size = 1536/530 = 290%，
     position = 82.5% 63.7%。高度用 aspect-ratio 锁成裁切窗口自身的比例——
     窗口一旦变矮，同一组 position 就会切掉狐狸的下半张脸。 */
  .ch-board::before {
    content: "";
    display: block;
    aspect-ratio: 530 / 310;
    background: url("assets/challenge/challenge-panel-bg.webp") 82.5% 63.7% / 290% auto no-repeat;
    /* 裁切下边界正好落在狐狸衣服中段，直接截断会是一条硬边；
       底部渐隐既柔化切口，也让横幅和下方渐变底色接上。 */
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  }
  /* 横幅之下用胶囊底还原绶带感：弧形标题依赖底图缎带做基准，这里没有缎带 */
  .ch-board .ch-title { position: static; padding: 14px 0 2px; }
  .ch-title-arc { display: none; }
  .ch-title-flat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 84%;
    margin: 0 auto;
    padding: 7px 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fdf0cd, #f6e0ad);
    border: 2px solid #e3bf7d;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--ch-cobalt-deep);
    text-shadow: 0 1px 0 rgba(255, 252, 240, 0.8);
  }
  /* 行高交给内容 + 格内 padding，而不是桌面端那套 1fr 等分：
     1fr 在 height:auto 的竖屏里会退化成「刚好包住内容」，四行文字挤成一团。 */
  .ch-grid {
    position: static;
    width: auto;
    height: auto;
    margin: 12px 4.5% 0;
    gap: 11px;
    grid-template-rows: repeat(2, auto);
  }
  /* 左右 padding 只留 4px：格子在 360px 屏上只有 64px 宽，
     再宽一点「已学 0/5 节」就会把「节」挤到第二行。 */
  .ch-cell { padding: 12px 4px; gap: 5px; }
  .ch-cell .ch-cell-icon { width: 32px; }
  .ch-cell--final .ch-cell-icon { width: 38px; }
  .ch-meta { position: static; width: auto; margin: 16px 4.5% 0; gap: 9px; }
  .ch-cell .ch-cell-day { font-size: 11px; }
  .ch-cell .ch-cell-amount { font-size: 16px; }
  .ch-cell .ch-cell-amount img { width: 15px; }
  /* 「已学 0/5 节」带空格，宽度不够就会在空格处断行，那一格随之变高、整行错位。
     字号跟着面板宽度走（.ch-board 是查询容器），比逐个屏宽堆断点稳。 */
  .ch-cell .ch-cell-status { font-size: clamp(8px, 2.6cqw, 10px); white-space: nowrap; }
  .ch-cell .ch-cell-bonus { font-size: 10px; }
  .ch-close { top: 6px; right: 6px; }
}

/* 小屏手机（iPhone SE 等）：格子只剩 65px 宽，「已学 0/5 节」会把「节」挤到第二行，
   那一格随之变高、整行跟着错位。收 gap 换宽度，再降一档字号。 */
@media (max-width: 380px) {
  .ch-grid { gap: 8px; margin: 12px 3.5% 0; }
  .ch-meta { margin: 14px 3.5% 0; }
  .ch-cell { padding: 11px 3px; }
  .ch-cell .ch-cell-day { font-size: 10px; }
  .ch-cell .ch-cell-amount { font-size: 15px; }
  .ch-cell .ch-cell-icon { width: 29px; }
  .ch-cell--final .ch-cell-icon { width: 34px; }
}

/* ────────────── 领取成功弹窗 ────────────── */

.ch-card--success {
  position: relative;
  text-align: center;
  animation: ch-scale-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* 礼花是 absolute 铺满整卡，不抬内容层级的话会飘在标题和金额上面，
   庆祝纸屑压住「+150」就本末倒置了 */
.ch-card--success > *:not(.ch-confetti) { position: relative; z-index: 1; }

@keyframes ch-scale-up {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.ch-success-sub {
  font-size: clamp(14px, 2cqw, 18px);
  color: #8c7145;
  margin-top: 8px;
  font-weight: 500;
}

.ch-success-hero-wrapper {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 6px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 旋转光芒背景 */
.ch-success-light-ray {
  position: absolute;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, rgba(251, 191, 36, 0) 70%);
  animation: ch-rotate 12s linear infinite;
  pointer-events: none;
}

@keyframes ch-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 巨型金币动效 */
.ch-success-hero-coin {
  width: 90px;
  height: 90px;
  z-index: 1;
  filter: drop-shadow(0 6px 12px rgba(217, 119, 6, 0.45));
  animation: ch-coin-pop-breathe 2.4s ease-in-out infinite alternate;
}

@keyframes ch-coin-pop-breathe {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1.05) rotate(-5deg); }
}

.ch-success-total {
  font-size: clamp(14px, 2cqw, 18px);
  color: #3c3428;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.ch-success-total b {
  font-size: clamp(28px, 4cqw, 42px);
  color: #d97706;
  font-weight: 900;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-shadow: 0 2px 4px rgba(217, 119, 6, 0.15);
}

.ch-success-total span {
  font-size: clamp(14px, 1.8cqw, 16px);
  color: #8c7145;
  font-weight: bold;
}

/* 回本/全勤徽章样式 */
.ch-success-bonus-badge,
.ch-success-payback-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: clamp(12px, 1.6cqw, 14px);
  font-weight: bold;
  margin: 4px auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  animation: ch-badge-bounce 1.2s ease-in-out infinite alternate;
}

.ch-success-bonus-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: 1px solid #b45309;
}

.ch-success-payback-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: 1px solid #047857;
  animation-delay: 0.3s;
}

@keyframes ch-badge-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* 按钮本体沿用 .ch-cta--gold 那套带 4px 硬底边的游戏按钮，这里只调间距 */
.ch-success-cta-btn { margin-top: 14px; }