/* ui-home — B01 首页对齐 10.29 最终设计（C-008~C-016 / C-045~C-048，UI-008~UI-073）
   尺寸按 1170×2532 设计稿（390×844 @3x）实测换算；
   只作用于首页组件（.product.view-home / .fragment-card / .topic-*），不动 practice.css。 */

/* 设计稿左右留白 20（实测卡片左缘 x=60@3x） */
.product.view-home main{padding:12px 20px 20px}

/* —— 碎片卡 C-008 ~ C-013 —— */
.fragment-card,
.fragment-card-unlocked{display:block;background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;margin:0;color:var(--ink)}
.fragment-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.fragment-card .fragment-head h2{font-size:19px;font-weight:900;line-height:1.35;margin:0;color:var(--ink)}
/* C-009：计数用主色 13/700，N 是真实已集齐数 */
.fragment-count{font-size:13px;font-weight:700;line-height:1;color:var(--accent);white-space:nowrap}
.fragment-strip{display:flex;align-items:stretch;gap:8px;margin:0 0 10px}
/* C-010：64px 深色圆 + 白问号，右下 22px 粉色锁徽章（实测 192×192 / 60×60 @3x） */
.fragment-avatar{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#24181E;display:grid;place-items:center}
.fragment-avatar-mark{font-size:30px;font-weight:900;line-height:1;color:#fff}
.fragment-badge{position:absolute;right:0;bottom:0;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.fragment-badge img{width:12px;height:12px;display:block}
/* C-012：整块是灰底容器（实测 53×64、圆角 12），图标在上、维度名在下 */
.fragment{flex:1;min-width:0;height:64px;padding:6px 2px;border-radius:12px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.fragment .fragment-lock{width:14px;height:14px;display:block;flex:0 0 auto}
/* 已集齐：整格淡粉底 + 主粉 ✓。practice.css 里还留着旧版 38×38 渐变方块（.fragment b），
   这里用更高特异度收回尺寸与背景，否则会出现一整块粉色方块、✓ 与底色同色看不见。 */
.fragment.earned{background:#FFF0F3}
.fragment.earned b.fragment-check{display:grid;place-items:center;width:14px;height:14px;margin:0;padding:0;border-radius:0;background:none;color:var(--accent);font-size:14px;font-weight:900;line-height:14px}
.fragment span{font-size:11px;font-weight:700;line-height:1;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* C-013：底部说明 12px，一行读完 */
.fragment-card .fragment-note{font-size:12px;line-height:1.4;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* —— 主题卡 C-014 / C-015 / C-016 / C-045 ~ C-048 —— */
/* 分区标题按设计稿墨迹高 66@3x 换算为 23px（首页专用，不动其它页的 .section-head） */
.product.view-home .section-head{margin:18px 0 26px}
.product.view-home .section-head h2{font-size:23px;line-height:1.3}
.topic-grid{align-items:stretch;gap:24px 16px;padding-right:10px}
/* C-016：卡片背后两层细灰框叠牌（白底、1px #EEECEE、圆角 20，逐层偏移 4 / 8px）。
   偏移方向按设计稿实测：叠牌在卡片右上方露出，卡片本体压在上面。 */
.topic-stack{position:relative;display:flex;min-width:0}
.topic-stack::before,
.topic-stack::after{content:"";position:absolute;inset:0;z-index:0;border:1px solid var(--line);border-radius:20px;background:#fff}
.topic-stack::before{transform:translate(4px,-4px)}
.topic-stack::after{transform:translate(8px,-8px)}
.topic-stack>.topic-card{position:relative;z-index:1;width:100%}
.topic-card{border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink)}
/* C-045：封面接近方形（实测 162×150，取 160×150） */
.topic-card .scene-art{aspect-ratio:1.067;border-radius:0;width:100%}
.topic-card .scene-art img{border-radius:0}
/* C-014：「主题包」角标叠在封面左上 */
.topic-badge{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;padding:5px 11px;border-radius:99px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;line-height:1;box-shadow:0 1px 4px rgba(36,24,30,.12)}
.coming-topic .topic-badge{background:#8A8186;color:#fff;box-shadow:none}
.topic-copy{display:flex;flex-direction:column;gap:7px;padding:12px 14px 14px;flex:1;min-width:0}
/* C-046：主题卡标题 20/900，行高 1.4 */
.topic-card .topic-copy h2{font-size:20px;font-weight:900;line-height:1.4;margin:0;color:var(--ink)}
/* C-015：进度行左右分布，左深右粉，12/700；下面 4px 进度条 */
.topic-card .topic-meta{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:4px;margin:0;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.topic-meta .topic-cleared{color:var(--ink)}
.topic-meta .topic-fresh{font-size:12px;line-height:1.4;color:var(--accent);font-weight:700}
.topic-card progress{height:4px;margin:0;border-radius:99px}
.topic-card progress::-webkit-progress-bar{background:#F1F0F1}
/* C-047：下一关行 13px，「下一关：」弱化、题名用墨色 */
.topic-card .topic-next{flex:0 0 auto;margin:0;font-size:13px;line-height:1.5;color:var(--ink);white-space:normal}
.topic-next>span:first-child{color:var(--muted)}
.topic-next-name{color:var(--ink)}
.topic-card .topic-intro{flex:0 0 auto;font-size:12px;line-height:1.6;color:var(--muted);margin:0}
/* 同屏明显差异：想看 +1 按设计为整卡宽粉色胶囊白字（保留 data-action / disabled） */
.topic-card .wish{width:100%;min-height:40px;margin-top:auto;padding:0 12px;border:0;border-radius:99px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.topic-card .wish:disabled{background:#F7B3C2;color:#fff;opacity:1}
/* 即将开放：白底卡、灰色封面与灰字 */
.coming-topic{background:#fff}
.coming-topic .scene-art{background:#F1F0F1;filter:none;opacity:1}
.coming-topic .topic-copy h2{color:#8A8186}
.coming-topic .topic-intro{color:#8A8186}

@media(max-width:360px){
 .product.view-home main{padding:18px}
 .fragment-card{padding:16px}
 .fragment-strip{gap:6px}
 .fragment-avatar{flex-basis:56px;width:56px;height:56px}
 .fragment-avatar-mark{font-size:26px}
 .fragment{height:56px}
 .fragment-card .fragment-note{font-size:11px}
 .topic-grid{gap:18px 10px}
 .topic-copy{padding:10px 12px 12px}
 .topic-card .topic-copy h2{font-size:18px}
}

/* C-022 UI-022：B01 桌面参考的三颗星星（珊瑚大 / 珊瑚小 / 明黄小）。
   只在 1440 桌面、且当前是首页时覆盖 body 的全局装饰，不影响其它页面。 */
@media(min-width:761px){
  body:has(.product.view-home):before{left:8%;top:19%;font-size:34px;color:#F73D6644;transform:rotate(15deg)}
  body:has(.product.view-home):after{right:auto;left:7%;bottom:13%;font-size:22px;color:#F0C75466;transform:rotate(-12deg)}
  html:has(.product.view-home):before{content:"✦";position:fixed;right:9%;top:42%;font-size:16px;color:#F73D6644;z-index:-1;pointer-events:none}
}

/* C-008 游客登录提示条 */
.guest-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:14px;line-height:1.5;color:var(--ink)}
.guest-banner b{flex:none;color:var(--accent);font-weight:700}
/* C-013 主题封面缺图时的「插图」占位（虚线框 + 灰字） */
.topic-art{display:grid;place-items:center}

/* Delivered transparent topic and scene illustrations. Keep the existing frames. */
.scene-art.has-illustration img{display:block;width:100%;height:100%;object-fit:contain;padding:7%;box-sizing:border-box}
.resume-art img{display:block;width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.coming-topic .scene-art.has-illustration img{filter:grayscale(.35);opacity:.7}
.topic-art .art-ph{display:grid;place-items:center;width:calc(100% - 28px);height:calc(100% - 32px);border:1.5px dashed rgba(36,24,30,.25);border-radius:12px;color:rgba(36,24,30,.45);font-size:13px;line-height:1}
.coming-topic .topic-art .art-ph{border-color:rgba(36,24,30,.18);color:rgba(36,24,30,.35)}
/* C-015 进度：左侧主粉圆点 + 细进度条 */
.topic-bar{display:flex;align-items:center;gap:6px;margin-top:2px}
.topic-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.topic-bar progress{flex:1;margin:0}
/* C-047 下一关整行墨色加粗（原来是标签弱化） */
.topic-card .topic-next{font-weight:600}
.topic-next>span:first-child{color:var(--ink)}
/* 下一关固定单行，超出省略，保证同排卡片等高 */
.topic-card .topic-next{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}