/* ===== 全局主题（按需微调） ===== */
:root{
  --bg:#ffffff;          /* 页面整体浅绿底 */
  --card:#ffffff;        /* 卡片基底（与渐变叠加） */
  --text:#111827;
  --muted:#6b7280;

  /* 品牌绿 */
  --brand:#82e14a;
  --brand-weak:#dff8c7;

  /* 卡片底色渐变（品牌绿同色系） */
  --card-grad-1:#ffffff; /* 顶部更白 */
  --card-grad-2:#effbe5; /* 底部浅绿，可调亮/暗 */

  /* 透明PNG叠图强度/混合模式（bg1..10.png） */
  --overlay-opacity:0.22;     /* 0.15~0.30 建议区间 */
  --overlay-blend:multiply;   /* multiply | overlay | screen */

  --shadow:0 8px 22px rgba(0,0,0,.08);
  --radius:16px;

  --task-done-green: #73d340;  /* 已完成行背景 */
  --stamp-red:       #ff4d4f;  /* 印章红色（字与虚线） */
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Microsoft YaHei,sans-serif
}
.wrap{max-width:1024px;margin:22px auto;padding:0 12px}
h1{font-size:20px;margin:0 0 10px}
.muted{color:var(--muted);font-size:13px}
.mt-22{margin-top:22px}

/* ===== 轮播：隐藏滚动条 & 露出下一张约16% ===== */
.carousel{position:relative;margin-top:8px;}
.track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:84%;           /* 可见下一张 ~16% */
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-snap-stop:always;
  padding:6px 18px 6px 10px;       /* 右侧多留空显示下一张边缘 */
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}

/* ===== 外层frame：承载发光/呼吸，不被裁剪 ===== */
.card-frame{
  position:relative;
  scroll-snap-align:start;
  border-radius:var(--radius);
}

/* ===== 完成卡片：主题色（#82e14a）贴边且更亮的微弱呼吸 ===== */
/* 仅完成卡片外层 frame 才加 .glow-breath（JS 已控制 completed 才加类） */
.card-frame.glow-breath{
  /* 可快速调参：越大越亮 */
  --breathA: rgba(130,225,74,.22);  /* 起/落阴影 */
  --breathB: rgba(129, 225, 74, 0.773);  /* 顶峰阴影（更亮） */

  --ringA:   rgba(130,225,74,0.00); /* 外环起/落 */
  --ringB:   rgba(130,225,74,.26);  /* 外环顶峰（更亮） */
  --ringSize: 6px;                  /* 外环半径（越小越“贴边”） */

  --edgeA:   rgba(130,225,74,.14);  /* 内沿光晕起/落 */
  --edgeB:   rgba(129, 225, 74, 0.773);  /* 内沿光晕顶峰（更亮） */

  position: relative;
  animation: breathShadow 2.6s ease-in-out infinite;
  will-change: filter;
}

/* 贴边“内沿”柔光（紧贴卡片边缘），更显“靠近”的感觉 */
.card-frame.glow-breath::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  mix-blend-mode: screen;                 /* 增强亮感但不突兀 */
  animation: breathEdge 2.6s ease-in-out infinite;
}

/* 外侧柔和“光环”，半径较小，贴得更近 */
.card-frame.glow-breath::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation: breathRing 2.6s ease-in-out infinite;
}

/* 投影呼吸：更亮一些，但仍克制；避免出现“方块阴影” */
@keyframes breathShadow{
  0%,100%{
    filter:
      drop-shadow(0 6px 14px var(--breathA))
      drop-shadow(0 0 0 0 var(--breathA));
  }
  50%{
    filter:
      drop-shadow(0 12px 24px var(--breathB))
      drop-shadow(0 0 0 3px var(--breathA));
  }
}

/* 外环：小半径贴边（--ringSize），峰值更亮 */
@keyframes breathRing{
  0%,100%{ box-shadow: 0 0 0 0 var(--ringA); }
  50%    { box-shadow: 0 0 0 var(--ringSize) var(--ringB); }
}

/* 内沿：inset 贴边高光，峰值更亮更“近身” */
@keyframes breathEdge{
  0%,100%{ box-shadow: inset 0 0 0 1px var(--edgeA); }
  50%    { box-shadow: inset 0 0 0 2px var(--edgeB); }
}

/* 无障碍：系统减少动效时自动静止 */
@media (prefers-reduced-motion: reduce){
  .card-frame.glow-breath{ animation:none; filter:none; }
  .card-frame.glow-breath::before,
  .card-frame.glow-breath::after{ animation:none; box-shadow:none; }
}

/* ===== 卡片主体 ===== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

  /* ——保留你的调整—— */
  gap:12px 12px;
  padding:12px 12px 12px 12px;   /* 底部为按钮留空间 */

  display:grid;
  grid-template-columns:1.5fr .9fr;
  grid-template-rows:auto auto auto 1fr; /* 最后一行放 tier-note */
  min-height:170px;
  position:relative;
  overflow:hidden;
}

/* 底色渐变（不透明） */
.card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,var(--card-grad-1) 0%, var(--card-grad-2) 100%);
}

/* 透明PNG叠图（bg1..10.png），与底色融合 */
.card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: var(--bg-url) center/cover no-repeat;
  opacity: var(--overlay-opacity);
  mix-blend-mode: var(--overlay-blend);
}

/* 内容层级在最上 */
.card > *{ position:relative; z-index:1 }

/* 对角丝带角标（右上） */
.ribbon-diag{
  position:absolute;
  top:10px; right:-36px;
  transform:rotate(45deg);
  padding:5px 56px;
  font-size:11px; font-weight:600;
  color:#6b4b00;
  background:#fffbeb;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  pointer-events:none;
  z-index:2;
}
.ribbon-diag.done{ background:#ecfdf5; color:#73d340; }

/* ===== 左侧内容 ===== */
.left{
  grid-column:1/2; grid-row:1/4;
  display:grid; grid-template-rows:auto auto auto 1fr; gap:8px;
}
.head{display:flex;align-items:center;gap:8px;font-size:13px}
.icon{
  width:24px;height:24px;border-radius:7px;
  display:grid;place-items:center;overflow:hidden;
}
.icon img{width:100%;height:100%;object-fit:cover}
.task-title{font-weight:700}

/* 进度标题更小；数值放其下方 */
.progress-block{display:grid; gap:4px}
.progress-label{font-size:12px;color:#374151}
.progress-nums{font-size:12px;color:var(--muted)}

/* 进度条（整卡铺满，高16，左右间距14） */
.bar-wrap{
  grid-column:1/-1;
  height:16px; border-radius:999px; background:#f1f5f9; overflow:hidden; position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
  margin:0 14px;
}
.bar{
  position:absolute;inset:0 100% 0 0;
  background:linear-gradient(90deg,#fde68a,#f59e0b); /* 未完成：黄 */
  transition:inset .4s ease;
}
.bar.ok{ background:linear-gradient(90deg,#34d399,#10b981) } /* 完成：绿 */
.bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:charge 1.6s linear infinite;
}
@keyframes charge{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* 奖励金额（在数值下方，靠左） */
.reward-left{
  justify-self:start;
  font-size:12px;background:#ecfdf5;color:var(--ok);
  padding:5px 9px;border-radius:999px;
}

/* ===== 右侧图标（保留你的调整 + 去背景） ===== */
.right{
  grid-column:2/3; grid-row:1/2;
  display:grid;grid-template-rows:auto;gap:6px;
  align-items:start; justify-items:start;

  /* ——保留你的调整—— */
  padding:4px 16px 0 2px;
  margin-top:10px;
  margin-left:-8px;
  /* 无背景 */
}
.thumb{
  width:78px;height:78px;border-radius:14px;
  display:grid;place-items:center; overflow:hidden;
  /* 无背景 */
}
.thumb img{width:100%;height:100%;object-fit:cover}

/* 领取按钮（仅控制显隐，不做通用样式） */
.btn.claim{
  position:absolute;left:14px;right:14px;bottom:8px;
  display:none;
}
.card.can-claim .btn.claim{display:block}

/* 卡片内部底部说明 */
.tier-note{
  grid-column:1/-1;
  font-size:12px;color:var(--muted);
  margin-left: 10px;

}

/* ===== 引导任务 ===== */
.tasks{margin-top:18px;display:grid;gap:10px; }
.task{
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:10px;
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  min-height: 88px;
}
.task .left-line{display:flex;gap:8px;align-items:flex-start}
.task .ticon{width:48px;height:48px;border-radius:9px;display:grid;place-items:center;font-weight:700}
.task .ticon img{
  width:100%;height:100%;
  object-fit:contain;   /* 避免被裁切 */
  display:block;
}
.task h3{margin:0;font-size:15px}
.task p{margin:2px 0 0;color:var(--muted);font-size:12px}
.task .right-col{display:grid;gap:6px;justify-items:end}
.amount{font-size:12px;background:#ecfdf5;color:var(--ok);padding:5px 9px;border-radius:999px; margin-bottom: 10px;}
/* —— 去完成 按钮（缩放脉冲版） —— */
.go{
  border:0;
  background:#73d440;   /* 保持你现有配色；要跟品牌绿一致可改成 #82e14a */
  color:#fff;
  border-radius:9px;
  padding:7px 10px;
  cursor:pointer;
  margin-right: 8px;
  /* 为缩放动画做准备 */
  transform:translateZ(0) scale(1);
  will-change: transform, box-shadow, filter;
  box-shadow:0 6px 14px rgba(70, 229, 73, 0.25);
}

/* 仅未完成任务使用 .breathe 时生效的缩放动画 */
.go.breathe{
  animation:btnZoomPulse 1.4s ease-in-out infinite;
}

/* 缩放脉冲关键帧：更明显的“放大-回弹” */
@keyframes btnZoomPulse{
  0%{
    transform:translateZ(0) scale(1);
    box-shadow:0 6px 14px rgba(70, 229, 73, 0.25);
    filter:brightness(1);
  }
  50%{
    transform:translateZ(0) scale(1.06); /* 放大幅度 */
    box-shadow:0 10px 22px rgba(70, 229, 73, 0.25);
    filter:brightness(1.06);             /* 轻微提亮 */
  }
  100%{
    transform:translateZ(0) scale(1);
    box-shadow:0 6px 14px rgba(70, 229, 73, 0.25);
    filter:brightness(1);
  }
}

/* 交互细节（可留可删） */
.go:hover   { transform:translateZ(0) scale(1.02); }
.go:active  { transform:translateZ(0) scale(0.98); }

/* 无障碍：系统减少动效时关闭动画 */
@media (prefers-reduced-motion: reduce){
  .go.breathe{ animation:none; }
}

.done-flag{font-size:12px;color:var(--ok);display:flex;gap:6px;align-items:center}
.check{width:16px;height:16px;border-radius:50%;background:#ecfdf5;color:var(--ok);display:grid;place-items:center;font-weight:700}

/* ✅ 已完成盖章（绿色底 / 红色虚线边框 / 白字） */
/* 基础：任务行要相对定位，供盖章定位 */
.task{ position: relative; }

/* ✅ 已完成 = 整行绿色底 */
.task.is-done{
  background: var(--task-done-green);
  color:#fff;                         /* 兜底文字改白 */
}

/* 标题/说明在绿色底上的可读性 */
.task.is-done h3{ color:#fff; }
.task.is-done p { color: rgba(255,255,255,.92); }

/* 奖励金额胶囊在绿色底上改成白底深绿字，增强对比 */
.task.is-done .amount{
  background:#fff;
  color:#1f3d12;                      /* 深绿字（可按需微调） */
}

/* 未完成时才显示“去完成”按钮；已完成隐藏 */
.task.is-done .go{ display:none; }

/* 如之前还有整行虚线，请取消 */
.task.is-done::before{ content:none; }

/* ✅ 中间盖章：红色文字 + 红色虚线，透明底
   - 右移 60px
   - 不挡点击
*/
.task.is-done::after{
  content:"Completed";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%) translateX(50px) rotate(-6deg);
  display:inline-block;
  white-space:nowrap;
  line-height:1;

  padding:10px 16px;
  font-size:16px;                     /* 需要更醒目可改 18px */
  font-weight:900;
  letter-spacing:.1em;

  color: var(--stamp-red);            /* 红字 */
  background: transparent;            /* 透明底 */
  border:2px dashed var(--stamp-red); /* 红色虚线边框 */
  border-radius:8px;

  opacity:.90;                        /* 亮度；0.8~1 可按视觉调 */
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  mix-blend-mode: normal;             /* 不与底色混色，保持纯红 */
  pointer-events:none;                /* 不阻挡点击 */
  z-index:5;
}