:root {
  --c-bg: #f4f6fb;
  --c-card: #ffffff;
  --c-primary: #5b6cff;
  --c-primary-2: #8a5bff;
  --c-accent: #ff8a3d;
  --c-text: #1f2440;
  --c-sub: #8a90a8;
  --c-line: #e8ebf5;
  --radius: 18px;
  --shadow: 0 6px 22px rgba(40, 50, 110, 0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 16px;
}
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--c-bg); position: relative; }

/* 顶部 */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(120deg, var(--c-primary), var(--c-primary-2));
  color: #fff; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; }
.topbar .avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* 内容区 */
.content { padding: 16px 16px 90px; position: relative; }

/* 卡片 */
.card {
  background: var(--c-card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0; color: var(--c-sub); font-size: 14px; line-height: 1.5; }

/* 底部导航 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: #fff; border-top: 1px solid var(--c-line);
  display: flex; z-index: 30;
}
.tabbar .tab {
  flex: 1; text-align: center; padding: 8px 2px 10px;
  color: var(--c-sub); font-size: 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  user-select: none;
}
.tabbar .tab .ico { font-size: 20px; line-height: 1; }
.tabbar .tab.active { color: var(--c-primary); font-weight: 700; }

/* 按钮 */
.btn {
  display: inline-block; border: none; border-radius: 999px;
  padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
  background: linear-gradient(120deg, var(--c-primary), var(--c-primary-2));
  color: #fff; box-shadow: var(--shadow);
}
.btn.ghost { background: #fff; color: var(--c-primary); border: 1px solid var(--c-primary); box-shadow: none; }
.btn.block { display: block; width: 100%; text-align: center; }

/* 聊天 */
.chat-box { display: flex; flex-direction: column; gap: 10px; min-height: 40vh; padding-bottom: 132px; } /* 底部留出 fixed 输入框高度，防「宠物商店」按钮被盖住 */
.chat-art { margin: 22px auto 6px; max-width: 320px; width: 92%; }
.chat-art svg { width: 100%; height: auto; display: block; }
/* 插画里的六个模块图标 = 可点击热区 */
.chat-art .art-mod { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, opacity 0.12s ease; transform-box: fill-box; transform-origin: center; }
.chat-art .art-mod:active { transform: scale(0.92); opacity: 0.75; }
.msg { max-width: 80%; padding: 10px 13px; border-radius: 16px; line-height: 1.5; font-size: 15px; }
.msg.ai { background: #eef0ff; color: var(--c-text); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: linear-gradient(120deg, var(--c-primary), var(--c-primary-2)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-input { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; padding: 8px 10px; display: flex; gap: 8px; border-top: 1px solid var(--c-line); z-index: 30; }
.chat-input input { flex: 1; border: 1px solid var(--c-line); border-radius: 999px; padding: 10px 14px; font-size: 15px; outline: none; }
.chat-input button { border: none; background: var(--c-primary); color: #fff; border-radius: 999px; padding: 0 16px; font-size: 15px; }

/* 占位模块 */
.placeholder { text-align: center; padding: 40px 16px; }
.placeholder .big { font-size: 54px; margin-bottom: 14px; }
.placeholder h2 { margin: 0 0 8px; }
.placeholder p { color: var(--c-sub); }

/* 看板图表 */
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.bar-row .label { width: 56px; color: var(--c-sub); }
.bar-row .track { flex: 1; height: 12px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.bar-row .fill { height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2)); }
.bar-row .val { width: 46px; text-align: right; color: var(--c-text); }

.stat-grid { display: flex; gap: 10px; }
.stat-grid .cell { flex: 1; background: var(--c-card); border-radius: 14px; padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat-grid .cell .num { font-size: 22px; font-weight: 800; color: var(--c-primary); }
.stat-grid .cell .cap { font-size: 12px; color: var(--c-sub); margin-top: 2px; }

.log-item { font-size: 13px; padding: 8px 0; border-bottom: 1px dashed var(--c-line); display: flex; justify-content: space-between; color: var(--c-sub); }
.log-item .m { color: var(--c-text); }

.warn { background: #fff4ec; border: 1px solid #ffd2b3; color: #c2560b; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin-bottom: 12px; }

/* 顶部积分芯片 */
.points-chip { background: #fff3c4; color: #b8860b; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid #ffe08a; }

/* 闯关模块 */
.quiz-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.qtab { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--c-line); background: #fff; font-size: 14px; font-weight: 700; color: var(--c-sub); cursor: pointer; }
.qtab.active { background: linear-gradient(120deg, var(--c-primary), var(--c-primary-2)); color: #fff; border-color: transparent; }
.quiz-tip { background: #eef0ff; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--c-text); margin-bottom: 12px; }
.quiz-tip b { color: var(--c-primary); }
.subj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.schip { background: #fff; border: 1px solid var(--c-line); color: var(--c-sub); padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.schip.on { background: var(--c-primary); color: #fff; border-color: transparent; }
.quiz-progress { font-size: 13px; color: var(--c-sub); margin-bottom: 6px; }
.quiz-q { font-size: 17px; font-weight: 700; line-height: 1.5; margin-bottom: 14px; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.qopt { text-align: left; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--c-line); background: #fff; font-size: 15px; cursor: pointer; transition: .12s; }
.qopt:active { transform: scale(.99); }
.qopt.correct { background: #e6f9ec; border-color: #19b36b; color: #0c7a44; font-weight: 700; }
.qopt.wrong { background: #fdeaea; border-color: #e06b6b; color: #b33030; }
.qopt:disabled { cursor: default; }
.quiz-exp { background: #f6f7fb; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--c-text); line-height: 1.5; margin-top: 12px; }
.quiz-result { text-align: center; padding: 18px 10px; }
.rtitle { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.rrow { font-size: 15px; margin: 6px 0; }
.rrow b { color: var(--c-primary); font-size: 18px; }

/* 积分商城 */
.mall-balance { background: linear-gradient(120deg, var(--c-primary), var(--c-primary-2)); color: #fff; border-radius: 14px; padding: 14px; font-size: 15px; text-align: center; }
.mall-balance b { font-size: 22px; }
.mall-h { font-size: 15px; margin: 16px 0 8px; }
.reward-list { display: flex; flex-direction: column; gap: 10px; }
.reward { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; }
.rinfo { flex: 1; }
.rname { font-size: 15px; font-weight: 700; }
.rcost { font-size: 13px; color: var(--c-primary); margin-top: 3px; }
.rnote { color: var(--c-sub); font-size: 12px; margin-left: 6px; }
.rbtn { background: var(--c-primary); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.rbtn.disabled { background: #d8d8e0; color: #fff; }
.rd-list { display: flex; flex-direction: column; gap: 8px; }
.rd-item { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-bottom: 1px dashed var(--c-line); }
.rd-st { color: var(--c-sub); }
.mall-empty { color: var(--c-sub); font-size: 13px; }

/* 家长端：积分 / 奖励管理 / 兑换审批 */
.pt-big { font-size: 26px; font-weight: 800; color: var(--c-primary); margin: 6px 0; }
.ra-item, .rd-admin { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--c-line); font-size: 14px; flex-wrap: wrap; }
.ra-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ra-cost { width: 64px; border: 1px solid var(--c-line); border-radius: 8px; padding: 5px 8px; font-size: 14px; text-align: center; }
.ra-note { color: var(--c-sub); font-size: 12px; }
.ra-acts { display: flex; gap: 6px; flex-shrink: 0; }
.ra-del { background: #ffeaea; color: #c0392b; border: 1px solid #f3c2bd; border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.ra-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ra-form input { flex: 1; min-width: 120px; border: 1px solid var(--c-line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.rd-acts { display: flex; gap: 6px; }
.btn.ok { background: #19b36b; color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.btn.no { background: #eee; color: #c0392b; border: 1px solid #f3c2bd; border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.rd-admin.done { color: var(--c-sub); }

/* 故事阅读模块 */
.story-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.story-card { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 14px; cursor: pointer; transition: .12s; }
.story-card:active { transform: scale(.99); border-color: var(--c-primary); }
.sc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sc-tag { background: #eef0ff; color: var(--c-primary); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.sc-read { color: #19b36b; font-size: 12px; font-weight: 700; }
.sc-title { font-size: 17px; font-weight: 800; color: var(--c-text); }
.sc-meta { font-size: 12px; color: var(--c-sub); margin-top: 4px; }
.reader { background: #fffef8; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px; }
.rd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rd-back { color: var(--c-sub); font-size: 13px; cursor: pointer; }
.rd-title { font-size: 20px; font-weight: 800; margin-bottom: 12px; color: var(--c-text); }
.rd-body { line-height: 1.95; font-size: 16px; color: #33333f; }
.story-para { margin: 0 0 14px; text-indent: 2em; }

/* 口语陪练模块 */
.speak { padding-top: 4px; }
.sc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.sc-card { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px 12px; text-align: center; cursor: pointer; transition: .12s; }
.sc-card:active { transform: scale(.98); border-color: var(--c-primary); }
.sc-card.done { background: #f3fbf6; border-color: #b6e6c8; }
.sc-emoji { font-size: 30px; }
.sc-name { font-size: 15px; font-weight: 800; color: var(--c-text); margin-top: 6px; }
.sc-ok { color: #19b36b; }
.sc-sub { font-size: 12px; color: var(--c-sub); margin-top: 2px; }
.speak-detail { padding-top: 4px; }
.sd-title { font-size: 20px; font-weight: 800; color: var(--c-text); margin: 12px 0 4px; }
.sd-tip { font-size: 13px; color: var(--c-sub); margin-bottom: 12px; }
.line-list { display: flex; flex-direction: column; gap: 12px; }
.line-card { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 14px; }
.l-en { font-size: 16px; font-weight: 700; color: var(--c-text); }
.l-zh { font-size: 13px; color: var(--c-sub); margin-top: 2px; }
.l-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.l-fb { margin-top: 8px; font-size: 13px; }
.ok-t { color: #19b36b; font-weight: 700; }
.nt-t { color: #c0392b; }
.rec-said { color: var(--c-text); }
.rec-score { color: var(--c-primary); font-size: 15px; margin: 3px 0; }
.rec-word { color: var(--c-sub); }
.btn.rec { background: #19b36b; color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }

/* 创造实验室模块 */
.create { padding-top: 4px; }
.c-tabs { display: flex; gap: 8px; margin: 10px 0; }
.ctab { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: 14px; color: var(--c-sub); cursor: pointer; }
.ctab.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.c-input { width: 100%; min-height: 140px; border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; font-size: 15px; line-height: 1.7; resize: vertical; box-sizing: border-box; font-family: inherit; }
.c-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.c-count { font-size: 13px; color: var(--c-sub); }
.c-result { margin-top: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px; }
.cr-title { font-size: 15px; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.cr-text p { margin: 0 0 8px; line-height: 1.8; font-size: 15px; color: #33333f; }
.cr-text mark.gw { background: #fff3b0; color: #936300; padding: 0 2px; border-radius: 4px; font-weight: 700; }
.cr-tips { margin-top: 12px; border-top: 1px dashed var(--c-line); padding-top: 10px; }
.crt-title { font-size: 14px; font-weight: 800; color: var(--c-text); margin-bottom: 6px; }
.crt { font-size: 13px; line-height: 1.6; color: var(--c-sub); margin-bottom: 6px; }

/* 口语：轻提示 toast（替代 alert，微信内置浏览器不弹「关闭网页」框） */
.spk-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: rgba(20, 20, 32, 0.88); color: #fff; font-size: 14px;
  padding: 10px 18px; border-radius: 22px; z-index: 9999;
  max-width: 80vw; text-align: center; line-height: 1.5;
  transition: opacity 0.4s ease; pointer-events: none;
}

/* 口语：每日一句 + 今日推荐 */
.daily-box { background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; color: #fff; cursor: pointer; }
.daily-tag { font-size: 12px; font-weight: 700; opacity: 0.85; margin-bottom: 6px; }
.daily-en { font-size: 17px; font-weight: 800; line-height: 1.5; }
.daily-zh { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.daily-play { background: rgba(255,255,255,0.22); border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.daily-tip { font-size: 12px; color: var(--c-sub); }
.sc-card { position: relative; }
.sc-star { position: absolute; top: 6px; right: 6px; font-size: 11px; background: #fff3b0; color: #936300; border-radius: 8px; padding: 1px 6px; font-weight: 700; }

/* 日记 & 愿望 */
.d-new { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; }
.d-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.d-date { font-size: 14px; font-weight: 800; color: var(--c-text); }
.d-mood-label { font-size: 13px; color: var(--c-sub); }
.d-moods { display: inline-flex; gap: 4px; }
.d-mood { font-size: 20px; padding: 2px 4px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.d-mood.on { border-color: #667eea; background: #f0f1ff; }
.d-earn { font-size: 13px; color: #936300; background: #fff3b0; border-radius: 10px; padding: 3px 10px; font-weight: 700; }
.d-list { margin-top: 12px; }
.d-item { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.d-head { font-size: 13px; font-weight: 700; color: var(--c-sub); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-text { white-space: pre-wrap; font-size: 14px; line-height: 1.75; color: var(--c-text); margin-top: 6px; word-break: break-word; }
.d-del { border: none; background: none; color: #e05656; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.d-del.ok { color: #2e9e5b; font-weight: 700; }
.d-empty { text-align: center; color: var(--c-sub); font-size: 14px; padding: 18px 0; }
.w-input { flex: 1 1 100%; border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.w-date { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; font-size: 14px; color: var(--c-text); }
.w-count { font-size: 12px; font-weight: 700; color: #667eea; }
.w-count.hot { color: #e05656; }
.w-count.over { color: #b0701c; }
.w-count.ok { color: #2e9e5b; }
.w-done { opacity: 0.6; }
.w-acts { display: inline-flex; gap: 6px; }

/* 闯关「本次回顾」（类交管12123 学法减分） */
.recap { margin-top: 16px; text-align: left; }

/* 护眼休息弹窗 */
.rest-mask { position: fixed; inset: 0; background: rgba(20,24,48,0.55); display: none; align-items: center; justify-content: center; z-index: 999; padding: 24px; }
.rest-card { background: #fff; border-radius: 18px; padding: 22px 20px; max-width: 320px; width: 100%; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25); animation: restPop 0.25s ease; }
@keyframes restPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rest-emoji { font-size: 44px; line-height: 1; }
.rest-card h3 { margin: 8px 0 6px; font-size: 19px; color: #2b2f55; }
.rest-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: #555; }
.rest-card .btn.block { width: 100%; }
.recap-title { font-size: 16px; font-weight: 800; color: var(--c-text); margin: 16px 0 8px; }
.recap-tip { font-size: 13px; color: var(--c-sub); margin-bottom: 8px; }
.recap-allok { background: #e6f9ec; color: #0c7a44; border-radius: 12px; padding: 12px; font-size: 14px; text-align: center; }
.recap-item { background: #f6f7fb; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ri-no { font-size: 12px; font-weight: 700; color: var(--c-sub); margin-bottom: 4px; }
.ri-q { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1.5; margin-bottom: 6px; }
.ri-my { font-size: 13px; color: #b33030; }
.ri-correct { font-size: 13px; color: #0c7a44; font-weight: 700; margin: 2px 0 6px; }
.ri-exp { font-size: 12px; color: var(--c-sub); line-height: 1.5; }

/* 每周周报 */
.wk-head { background: linear-gradient(120deg, var(--c-primary), var(--c-primary-2)); color: #fff; }
.wk-title { font-size: 18px; font-weight: 800; }
.wk-range { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.wk-sub { color: rgba(255,255,255,0.85); font-size: 12px; margin: 8px 0 0; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day { background: #f6f7fb; border-radius: 10px; padding: 8px 2px; text-align: center; }
.wk-day.today { background: #eef0ff; border: 1px solid var(--c-primary); }
.wd-name { font-size: 12px; font-weight: 700; color: var(--c-text); }
.wd-meta { font-size: 10px; color: var(--c-sub); margin-top: 3px; line-height: 1.3; }
.wk-wdate { font-size: 12px; font-weight: 700; color: var(--c-primary); margin: 12px 0 6px; }
.wk-more-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--c-line); font-size: 14px; }
.wk-more-row b { color: var(--c-primary); font-size: 15px; }
.wk-more-row:last-child { border-bottom: none; }
.wk-foot { font-size: 12px; color: var(--c-sub); text-align: center; margin: 6px 0 0; }

/* 课程表（孩子自己填的空框架） */
.sched-head { font-size: 16px; font-weight: 800; color: var(--c-text); text-align: center; margin: 4px 0 6px; }
.sched-tip { font-size: 12px; color: var(--c-sub); text-align: center; margin: 0 0 10px; }
.sched-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sched { width: 100%; min-width: 340px; border-collapse: collapse; table-layout: fixed; background: #fff; }
.sched th, .sched td { border: 1.5px solid #4a4a4a; padding: 0; text-align: center; }
.sched thead th { background: #d9d9d9; font-size: 12px; font-weight: 700; color: #222; padding: 9px 0; }
.sched .corner { position: relative; width: 52px; min-width: 52px; background: #fff; font-size: 10px; font-weight: 400; }
.sched .corner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 48.5%, #4a4a4a 48.5%, #4a4a4a 51.5%, transparent 51.5%); }
.cor-bl { position: absolute; left: 3px; bottom: 3px; }
.cor-tr { position: absolute; right: 3px; top: 3px; }
.sched .half { width: 40px; min-width: 40px; font-size: 13px; font-weight: 700; color: #222; background: #f4f4f4; }
.sched .sc-cell { width: 100%; border: none; outline: none; background: transparent; text-align: center; font-size: 13px; color: var(--c-text); padding: 13px 2px; font-family: inherit; }
.sched .sc-cell::placeholder { color: #c8c8c8; font-weight: 400; }
.sched .sc-cell:focus { background: #eef0ff; }

/* —— 宠物系统（首页宠物层 + 宠物商店）—— */
.pet-stage { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.home-pet {
  position: absolute; pointer-events: auto; touch-action: none;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -50%); cursor: grab; z-index: 5;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}
.home-pet:active { cursor: grabbing; }
.hp-emoji { font-size: 38px; line-height: 1; }
.home-pet.hop .hp-emoji { animation: petHop 0.55s ease; }
/* 向上爬时：贴边 + 略缩小 + 投影变淡，像往上攀 */
.home-pet.climbing, .home-pet.clinging { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)) brightness(1.02); z-index: 6; }
@keyframes petHop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-14px) scale(1.12); }
  70% { transform: translateY(0); }
  85% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.hp-name {
  margin-top: 3px; font-size: 10px; white-space: nowrap;
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 1px 8px; color: var(--c-sub); font-weight: 700;
}
.pet-bubble {
  position: absolute; bottom: 108%; left: 50%; transform: translateX(-50%);
  background: #5b6cff; color: #fff; font-size: 12px; padding: 6px 10px;
  border-radius: 12px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 10px rgba(91, 108, 255, 0.35); z-index: 9;
}
.pet-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #5b6cff;
}
.pet-entry {
  background: #fff; border: 1.5px dashed #5b6cff; color: #5b6cff;
  border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pet-entry:active { background: #eef0ff; }
/* 宠物商店卡片 */
.pet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pet-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 12px 10px; text-align: center;
}
.pc-emoji { font-size: 40px; line-height: 1.1; }
.pc-name { font-weight: 800; font-size: 14px; margin-top: 3px; }
.pc-desc { font-size: 11px; color: var(--c-sub); margin-top: 1px; }
.pc-price { font-size: 12px; color: #ff8a3d; font-weight: 700; margin: 5px 0 8px; }
.pc-btns { display: flex; flex-direction: column; gap: 6px; }
.pc-btn { border: none; border-radius: 999px; padding: 7px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pc-buy { background: #5b6cff; color: #fff; }
.pc-buy.disabled { background: #c9cdf5; cursor: not-allowed; }
.pc-goal { background: #eef0ff; color: #5b6cff; }
.pc-owned { font-size: 12px; color: #22a05a; font-weight: 700; padding: 6px 0; }
.pc-tip { font-size: 11px; color: var(--c-sub); margin-top: 10px; line-height: 1.6; }

/* ===== 宠物完整身体 SVG + 动画 ===== */
.petsvg { width: 100%; height: 100%; display: block; overflow: visible; }
.hp-svg { width: 88px; height: 88px; line-height: 0; transition: transform .25s ease; }
.pc-svg { width: 120px; height: 120px; margin: 0 auto; line-height: 0; }
.home-pet.hop .hp-svg { animation: petHop 0.55s ease; }

/* —— 奶油猫三造型：正面 / 侧面（两侧站立）/ 爬墙专用（身体立起贴墙）—— */
.hp-front, .hp-side, .hp-climb { display: block; width: 100%; height: 100%; transition: transform .25s ease; transform-origin: 50% 100%; }
.hp-side, .hp-climb { display: none; }
.home-pet.pose-side .hp-front { display: none; }
.home-pet.pose-side .hp-side { display: block; }
.home-pet.pose-climb .hp-front, .home-pet.pose-climb .hp-side { display: none; }
.home-pet.pose-climb .hp-climb { display: block; animation: climbBob 1.1s ease-in-out infinite; }
/* 爬墙时整个人往上够的动作：轻轻上探 → 落回 */
@keyframes climbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* 朝向：按行进方向水平翻转（三造型通用） */
.home-pet.face-left .hp-front, .home-pet.face-left .hp-side, .home-pet.face-left .hp-climb { transform: scaleX(-1); }
/* 空闲偶尔蹦一下：落地压缩 → 腾空拉伸 */
.home-pet.jumping .petsvg { animation: petBounce .6s ease; transform-origin: 50% 100%; }
@keyframes petBounce {
  0% { transform: translateY(0) scale(1, 1); }
  22% { transform: translateY(1px) scale(1.08, .9); }
  55% { transform: translateY(-22px) scale(.95, 1.08); }
  82% { transform: translateY(0) scale(1.06, .92); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* 全身：默认轻轻上下浮动 */
.p-all {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: petBob 3.2s ease-in-out infinite;
}
/* 企鹅：摇摇摆摆 */
.petsvg .peng-all { animation: petWaddle 1.9s ease-in-out infinite; }
/* 小熊：呼吸起伏 */
.petsvg .bear-all { animation: petBreath 2.8s ease-in-out infinite; }
/* 熊猫/考拉：慢悠悠晃 */
.petsvg .panda-all, .petsvg .koala-all { animation: petSway 3.8s ease-in-out infinite; }

@keyframes petBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes petWaddle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes petBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes petSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* 尾巴摆动（transform-origin 定在尾巴根部）；翘起幅度更大，像活猫竖尾 */
.p-tail {
  transform-box: fill-box; transform-origin: 0% 100%;
  animation: petWag 1.3s ease-in-out infinite;
}
@keyframes petWag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(22deg); } }
/* 行走 / 爬升时尾巴甩得更快更欢 */
.home-pet.walking .p-tail, .home-pet.climbing .p-tail, .home-pet.clinging .p-tail { animation: petWagFast .5s ease-in-out infinite; }
@keyframes petWagFast { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(26deg); } }
/* 侧面造型尾巴：根在右下、尾梢朝左上翘，摆动支点在尾巴根 */
.p-tail-side { transform-box: fill-box; transform-origin: 100% 100%; animation: petWag 1.3s ease-in-out infinite; }
.home-pet.walking .p-tail-side, .home-pet.climbing .p-tail-side, .home-pet.clinging .p-tail-side { animation: petWagFast .5s ease-in-out infinite; }
/* 爬墙造型尾巴：从臀部垂下来，轻轻晃 */
.p-tail-climb { transform-box: fill-box; transform-origin: 50% 0%; animation: petWag 1.6s ease-in-out infinite; }

/* 耳朵偶尔抖一抖 */
.p-ear { transform-box: fill-box; transform-origin: 50% 100%; }
.petsvg .ear-twitch { animation: petEar 4.5s ease-in-out infinite; }
@keyframes petEar {
  0%, 86%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(7deg); }
  95% { transform: rotate(-4deg); }
}

/* ===== 开机动画（手机开机式过场）===== */
.boot-mask{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#5b6cff 0%,#8a5bff 55%,#6a3df0 100%);transition:opacity .45s ease,visibility .45s ease;}
.boot-mask.boot-out{opacity:0;visibility:hidden;pointer-events:none;}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:14px;animation:bootIn .7s cubic-bezier(.2,.9,.3,1.2) both;}
@keyframes bootIn{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.boot-robot{font-size:64px;animation:bootBob 1.2s ease-in-out infinite;}
@keyframes bootBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.boot-title{color:#fff;font-size:22px;font-weight:800;letter-spacing:2px;text-shadow:0 3px 12px rgba(0,0,0,.25)}
.boot-sub{color:rgba(255,255,255,.85);font-size:13px;animation:bootBlink 1s ease-in-out infinite;}
@keyframes bootBlink{0%,100%{opacity:1}50%{opacity:.4}}
.boot-bar{width:180px;height:6px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden;}
.boot-fill{height:100%;width:0;border-radius:999px;background:#ffd84d;animation:bootFill 4.5s ease-out forwards;}
@keyframes bootFill{0%{width:0}70%{width:82%}100%{width:100%}}