/* 大宝端卡册样式。全部规则必须以 .child-theme.mode-big 开头。 */

@font-face {
  font-family: "Smiley Sans Oblique";
  src: url("/fonts/SmileySans-Oblique.woff2") format("woff2");
  font-weight: 400 900;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

/* ---------- 设计 token ----------
   换配色只改这一块。所有颜色都必须走变量，不要在下面的规则里写死色值——
   2026-09-14 从深色卡垫换成「樱花奶油」时，正是因为底下一批硬编码色值，
   换色才不是改几个变量的事。
   三档表面：--bg 卡册纸底 → --mat 面板 → --card 卡面。 */
.child-theme.mode-big {
  --bg: #fdeaf0;            /* 樱粉卡册纸底 */
  --mat: #ffffff;           /* 面板（资源条 / 图鉴条 / 日历列） */
  --card: #ffffff;          /* 卡面 */
  --card-ink: #4b2b36;      /* 卡面正文：暖深莓 */
  --card-muted: #9a7883;    /* 卡面次要文字 */
  --sunken: #f8e6ec;        /* 凹陷面：图鉴暗格、宠物进度槽 */

  /* 外壳（顶栏 / 导航）。与 --card 同为白，靠 --hairline 分隔。 */
  --chrome-bg: #ffffff;
  --chrome-ink: #4b2b36;
  --chrome-muted: #a9838f;
  --hairline: #f6d7e0;

  --accent: #d94f7c;                          /* 莓果粉 */
  --accent-soft: rgba(217, 79, 124, .12);
  --accent-ring: rgba(217, 79, 124, .30);

  --font-display: "Smiley Sans Oblique", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* 稀有度。浅底上要够深才立得住，比深底版本整体加了一档明度。 */
  --r-common:    #a9979e;
  --r-uncommon:  #3f9d6d;
  --r-rare:      #3f7fc4;
  --r-epic:      #8b5cc7;
  --r-legendary: #cf9a1c;

  /* 让 app.css 的按钮 / 表单聚焦等跟随本主题，而不是 :root 的橙。
     只作用于 mode-big，二宝端不受影响。 */
  --primary: #d94f7c;
  --primary-strong: #b93c66;
  --shadow: 0 2px 10px rgba(180, 90, 120, .12);
}

/* ---------- 卡垫底色 ----------
   只铺在本次重做的五个页面上。数学与游戏模块不在范围内、内容仍是浅色设计，
   若一并铺色，它们的区块底与文字会与本主题打架。
   必须画在 .app 自己身上：body 的底色取的是 :root 的 --bg，
   而变量覆写只向下继承，不会从 .app 反映射回 body。 */
.child-theme.mode-big.page-home,
.child-theme.mode-big.page-tasks,
.child-theme.mode-big.page-points,
.child-theme.mode-big.page-store,
.child-theme.mode-big.page-calendar {
  background: var(--bg);
  min-height: 100vh;
}

/* ---------- 卡框 ----------
   浅底上不用硬边投影（那是深色卡垫的做法），改用柔和的玫瑰调阴影。 */
.child-theme.mode-big .card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--r-common);
  box-shadow: 0 2px 8px rgba(180, 90, 120, .10);
}

.child-theme.mode-big .card .card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* 稀有度：只有高稀有度有强调，其余刻意安静。
   浅底上「一圈细环」比「一片模糊辉光」更立得住，也更容易和卡框分辨。 */
.child-theme.mode-big .card.rar-uncommon {
  border-color: var(--r-uncommon);
  box-shadow: inset 0 0 0 1px rgba(63, 157, 109, .35), 0 2px 8px rgba(180, 90, 120, .10);
}
.child-theme.mode-big .card.rar-rare {
  border-width: 2px; border-color: var(--r-rare);
  box-shadow: 0 0 0 3px rgba(63, 127, 196, .16), 0 2px 10px rgba(180, 90, 120, .12);
}
.child-theme.mode-big .card.rar-epic {
  border-width: 2px; border-color: var(--r-epic);
  box-shadow: 0 0 0 3px rgba(139, 92, 199, .18), 0 2px 10px rgba(180, 90, 120, .12);
  background-image: repeating-linear-gradient(45deg,
    rgba(139, 92, 199, .05) 0 6px, transparent 6px 12px);
}
.child-theme.mode-big .card.rar-legendary {
  border-width: 2px; border-color: var(--r-legendary);
  box-shadow: 0 0 0 3px rgba(207, 154, 28, .24), 0 2px 12px rgba(180, 90, 120, .16);
}

/* 传说档：全息流光 + 轻微立体倾斜（签名元素）。
   浅底上不能用 mix-blend-mode: screen——滤色是把颜色提亮，白卡叠白等于消失。
   这里改用 multiply 让柔和的彩虹把白卡染色，并压到低透明度，
   保证正文仍清晰可读。 */
.child-theme.mode-big .card.rar-legendary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .5;
  background: conic-gradient(from var(--holo, 0deg),
    rgba(255, 138, 190, .55) 0deg,
    rgba(255, 214, 130, .50) 55deg,
    rgba(150, 226, 200, .45) 120deg,
    rgba(150, 198, 255, .50) 180deg,
    rgba(206, 165, 255, .50) 240deg,
    rgba(255, 170, 210, .55) 310deg,
    rgba(255, 138, 190, .55) 360deg);
  mix-blend-mode: multiply;
  animation: holo-spin 7s linear infinite;
}

@property --holo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes holo-spin {
  to { --holo: 360deg; }
}

@media (hover: hover) {
  .child-theme.mode-big .card.rar-epic,
  .child-theme.mode-big .card.rar-legendary {
    transition: transform .18s ease;
  }
  .child-theme.mode-big .card.rar-epic:hover,
  .child-theme.mode-big .card.rar-legendary:hover {
    transform: perspective(600px) rotateX(3deg) rotateY(-3deg);
  }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  .child-theme.mode-big .card.rar-legendary::after { animation: none; }
  .child-theme.mode-big .card { transition: none; }
}

/* ---------- 顶部资源条 ---------- */
.child-theme.mode-big .big-topbar {
  background: var(--chrome-bg);
  border-bottom-color: var(--hairline);
}
.child-theme.mode-big .big-topbar .child-greet b { color: var(--chrome-ink); }
.child-theme.mode-big .big-topbar .muted { color: var(--chrome-muted); }

.child-theme.mode-big .big-resource { display: flex; gap: 14px; margin-right: 4px; }
.child-theme.mode-big .big-resource .res { display: flex; flex-direction: column; align-items: flex-end; }
.child-theme.mode-big .big-resource .res-label { font-size: 10px; color: var(--chrome-muted); }
.child-theme.mode-big .big-resource .res-num {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
  color: var(--accent);
}

/* ---------- 导航栏（左侧栏 / 底部栏）---------- */
.child-theme.mode-big .child-nav {
  background: var(--chrome-bg);
  border-top-color: var(--hairline);
}
.child-theme.mode-big .child-nav .nav-item { color: var(--chrome-muted); }
.child-theme.mode-big .child-nav .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- 分区标题 ----------
   两种写法都要覆盖：首页用 `div.child-section-title > h2`（带右侧链接），
   积分/商店页把类名直接挂在 h2 上。只写后代选择器会让后者的标题
   保留默认色，在有色底上对比不足。 */
.child-theme.mode-big .child-section-title h2,
.child-theme.mode-big h2.child-section-title {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--chrome-ink);
}
.child-theme.mode-big .child-section-title a { color: var(--accent); }
.child-theme.mode-big .section > .muted { color: var(--chrome-muted); }
.child-theme.mode-big .child-group-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--chrome-muted);
}

/* ---------- 卡牌网格 ---------- */
.child-theme.mode-big .card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.child-theme.mode-big .card-grid .empty {
  grid-column: 1 / -1;
  color: var(--chrome-muted);
  font-size: 14px;
  padding: 10px 0;
}

/* 卡面内部 */
.child-theme.mode-big .card .card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.child-theme.mode-big .card .rarity-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.child-theme.mode-big .card .rarity-tag.rar-common    { color: var(--r-common); }
.child-theme.mode-big .card .rarity-tag.rar-uncommon  { color: var(--r-uncommon); }
.child-theme.mode-big .card .rarity-tag.rar-rare      { color: var(--r-rare); }
.child-theme.mode-big .card .rarity-tag.rar-epic      { color: var(--r-epic); }
.child-theme.mode-big .card .rarity-tag.rar-legendary { color: var(--r-legendary); }

.child-theme.mode-big .card .desc { font-size: 12px; color: var(--card-muted); margin: 0; }
.child-theme.mode-big .card .card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 否则 .badge 会被拉伸成整行色块；按钮靠自身 width:100% 仍满宽 */
  gap: 6px;
  padding-top: 6px;
}
/* 战力随卡片稀有度着色。若统一用金色，金色就不再是「传说」的专属信号，
   每张普通卡都会显得像传说，稀有度暗示被稀释。 */
.child-theme.mode-big .card .card-power {
  font-family: var(--font-display); font-size: 13px; color: var(--r-common);
}
.child-theme.mode-big .card.rar-uncommon  .card-power { color: var(--r-uncommon); }
.child-theme.mode-big .card.rar-rare      .card-power { color: var(--r-rare); }
.child-theme.mode-big .card.rar-epic      .card-power { color: var(--r-epic); }
.child-theme.mode-big .card.rar-legendary .card-power { color: var(--r-legendary); }
.child-theme.mode-big .card .row-actions { display: flex; gap: 6px; width: 100%; }
.child-theme.mode-big .card .row-actions .btn { width: 100%; }

/* 已完成：降饱和但保留彩边 */
.child-theme.mode-big .card.is-done { filter: saturate(.45); opacity: .72; }
.child-theme.mode-big .card.is-done .card-title { color: var(--card-muted); }

/* ---------- 图鉴进度条 ---------- */
.child-theme.mode-big .binder-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--mat);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--chrome-ink);
  box-shadow: 0 2px 8px rgba(180, 90, 120, .08);
}
.child-theme.mode-big .binder-bar .binder-label { font-family: var(--font-display); font-size: 15px; }
.child-theme.mode-big .binder-bar .binder-count {
  font-family: var(--font-display); font-size: 18px; color: var(--r-legendary);
}
.child-theme.mode-big .binder-bar a { margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 700; }

/* ---------- 首页上的外模块入口 ----------
   数学入口（math.js 的 .char-entry）与宠物条（games/pet.js 的 .pet-home）
   属于本 spec 明确不动的模块，但它们渲染在大宝端首页上，会与本主题割裂。
   这里只做作用域覆写，既不碰模块自身的文件，也不碰 app.css。
   二宝端的认字入口同样用 .char-entry，但不会命中 .mode-big，故不受影响。 */
.child-theme.mode-big .char-entry {
  background: var(--mat);
  border: 1px solid var(--hairline);
  box-shadow: none;
  color: var(--chrome-ink);
}
.child-theme.mode-big .char-entry .muted { color: var(--chrome-muted); }

.child-theme.mode-big .pet-home {
  background: var(--mat);
  border-color: var(--hairline);
  color: var(--chrome-ink);
}
.child-theme.mode-big .pet-home .pet-home-level,
.child-theme.mode-big .pet-home .muted { color: var(--chrome-muted); }
.child-theme.mode-big .pet-home .pet-home-bar { background: var(--sunken); }

/* ---------- 资源面板 ---------- */
.child-theme.mode-big .res-panel {
  display: flex; align-items: center; gap: 22px;
  background: var(--mat); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(180, 90, 120, .08);
}
.child-theme.mode-big .res-panel .res-big { display: flex; flex-direction: column; gap: 2px; }
.child-theme.mode-big .res-panel .res-label { font-size: 11px; color: var(--chrome-muted); }
.child-theme.mode-big .res-panel .res-num {
  font-family: var(--font-display); font-size: 34px; line-height: 1.05; color: var(--accent);
}

/* 战绩三栏：数字比资源面板小一档 */
.child-theme.mode-big .res-panel.stats { gap: 30px; }
.child-theme.mode-big .res-panel.stats .stat { display: flex; flex-direction: column; gap: 2px; }
.child-theme.mode-big .res-panel.stats .res-num { font-size: 24px; color: var(--chrome-ink); }
.child-theme.mode-big .res-panel.stats .res-label { font-size: 11px; color: var(--chrome-muted); }

/* ---------- 成就卡 ---------- */
.child-theme.mode-big .card.ach {
  flex-direction: row; align-items: center; gap: 8px;
  border-color: var(--r-legendary);
  background-image: linear-gradient(160deg, rgba(207, 154, 28, .10), transparent 60%);
}
.child-theme.mode-big .card.ach .ach-gem { font-size: 20px; color: var(--r-legendary); }
.child-theme.mode-big .card.ach .card-title { font-size: 13px; }
/* 未达成：暗格剪影——保留轮廓，抹掉内容感。
   浅底上用「凹陷的粉灰面 + 低对比文字」，而不是深色块。 */
.child-theme.mode-big .card.ach-locked {
  border-color: var(--hairline);
  background: var(--sunken);
  background-image: none;
  box-shadow: none;
}
.child-theme.mode-big .card.ach-locked .ach-gem { color: #d8bcc6; }
/* 暗格要「暗」，但成就标题是孩子要去够的目标，必须读得清。 */
.child-theme.mode-big .card.ach-locked .card-title { color: #9a7883; }

/* ---------- 明细：浅色卡面保证可读 ---------- */
.child-theme.mode-big .ledger {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.child-theme.mode-big .ledger .tx-row {
  background: var(--card); border-color: var(--hairline);
  box-shadow: 0 1px 5px rgba(180, 90, 120, .07);
}
.child-theme.mode-big .ledger .tx-main b { color: var(--card-ink); }
.child-theme.mode-big .ledger .tx-main .muted { color: var(--card-muted); }
.child-theme.mode-big .ledger .empty { color: var(--chrome-muted); font-size: 14px; }

/* ---------- 奖励卡 ----------
   不套稀有度：稀有度是任务卡（孩子自己完成的事）的语言，
   奖励是家长设的价目，套上会混淆两套语义。 */
.child-theme.mode-big .card.reward-card { border-color: var(--r-rare); }
.child-theme.mode-big .card.reward-card .card-head { color: var(--r-rare); }
.child-theme.mode-big .card.reward-card .card-power { color: var(--r-rare); }
/* 积分不够时保持安静，不做红色警告——避免对孩子形成压力 */
.child-theme.mode-big .card.reward-short { filter: saturate(.5); opacity: .8; }

/* ---------- 日历（仅大宝端可达，二宝端导航已过滤 calendar）---------- */
.child-theme.mode-big .week-grid { gap: 8px; }
.child-theme.mode-big .day-col {
  background: var(--mat);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(180, 90, 120, .08);
}
.child-theme.mode-big .day-col.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), 0 2px 8px rgba(180, 90, 120, .10);
}
/* app.css 的 .day-head 自带冷灰底（--surface-2: #eef1f4），与本主题的暖粉不搭。
   让表头透出面板底色，分隔线换成主题的暖色细线。 */
.child-theme.mode-big .day-col .day-head {
  background: transparent;
  border-bottom-color: var(--hairline);
}
.child-theme.mode-big .day-col .day-head b { color: var(--chrome-ink); }
.child-theme.mode-big .day-col .day-head .dow { color: var(--chrome-muted); }
.child-theme.mode-big .day-col .empty { color: var(--chrome-muted); font-size: 12px; }

.child-theme.mode-big .day-slot {
  color: var(--chrome-muted); font-size: 11px; margin: 6px 0 3px;
}
.child-theme.mode-big .event-row.child-event {
  background: var(--card);
  border: 1px solid var(--r-rare);
  border-radius: 8px;
  padding: 7px 9px;
  margin-bottom: 5px;
  color: var(--card-ink);
}
.child-theme.mode-big .event-row.child-event .event-time { color: var(--card-muted); font-size: 11px; }