/* collection.css —— 「字库」场景样式（DESIGN.md §2.5）
 * 只作用于 .mx-scene--collection 之下；字卡弹窗由 ui.modal 挂到 body，用 .mx-col__modal / .mx-col__card 前缀限定。
 * 掌握度配色：新 = 纸色字灰；学习中 = 浅蓝（--sky-accent）；复习 = 绿（--ok，稳定度越高越深）；到期 = 小红点。
 */

.mx-scene--collection { font-family: var(--font-body); color: var(--ink); }

/* ---------------------------------------------------------------- 顶栏：返回 · 标题 · 进度 */

.mx-col__head { display: flex; align-items: stretch; gap: 12px; }
.mx-col__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 18px 6px 8px;
  border-radius: 999px;
}
.mx-col__title { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--ink); }

.mx-col__progress {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 16px;
  padding: 8px 18px;
  border-radius: 999px;
}
.mx-col__progress-text { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mx-col__progress-label { font-family: var(--font-display); font-size: 17px; color: var(--ink-soft); }
.mx-col__progress-num { font-size: 26px; line-height: 1; color: var(--ok-text); }
.mx-col__progress-total { font-family: var(--font-display); font-size: 18px; color: var(--ink-soft); }

.mx-col__bar {
  position: relative;
  height: 14px;
  min-width: 80px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: inset 0 1px 2px rgba(60, 50, 30, .12);
  overflow: hidden;
}
.mx-col__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 70%, var(--gold-2)), var(--ok));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 600ms var(--ease-out);
}
.mx-col__bar-fill::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 45%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
}

.mx-col__legend { display: inline-flex; gap: 12px; white-space: nowrap; }
.mx-col__legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--ink-soft); }
.mx-col__legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid var(--card-stroke);
  background: var(--paper);
}
.mx-col__legend-swatch.is-learning { background: color-mix(in srgb, var(--sky-accent) 38%, var(--paper)); }
.mx-col__legend-swatch.is-review-2 { background: color-mix(in srgb, var(--ok) 55%, var(--paper)); }
.mx-col__legend-swatch.is-tamed {
  background: color-mix(in srgb, var(--ok) 72%, var(--paper));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 6px color-mix(in srgb, var(--gold-2) 80%, transparent);
}
.mx-col__legend-swatch.is-due { position: relative; }
.mx-col__legend-swatch.is-due::after {
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
  border: 1.5px solid var(--paper);
}

/* ---------------------------------------------------------------- 主体：一张大纸面卡，按课分组 */

.mx-col__body { padding-top: 6px; }
.mx-col__sheet { padding: 18px 22px 26px; }
/* 墨墨的站位（挂在场景根上，不随主体滚动）：宽屏时纸面右侧留一条空地给它，窄屏没地方就藏起来（collection.js 按此媒体查询决定） */
.mx-col__mascot-anchor {
  position: absolute;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: 1px;
  height: 1px;
  pointer-events: none;
}
@media (min-width: 1000px) {
  .mx-col__sheet { margin-right: 176px; }
}
.mx-col__groups { display: flex; flex-direction: column; gap: 18px; }

.mx-col__lesson-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 4px solid var(--wood);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}
.mx-col__lesson-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-col__lesson-count { font-family: var(--font-display); font-size: 16px; color: var(--ink-soft); letter-spacing: .02em; }

.mx-col__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 66px);
  justify-content: start;
  gap: 10px;
}

/* 一格：楷体字 + 底色。按下 scale(.96)。凡显示目标汉字本身的选择器都必须 --font-kai（DESIGN.md §10），不依赖 JS 加的 .mx-kai */
.mx-col__tile {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 16px;
  border: 1px solid var(--card-stroke);
  background-color: var(--paper);
  background-image: var(--paper-noise);
  color: var(--ink);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--paper), var(--wood-dark) 22%), var(--shadow-soft);
  transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out);
  -webkit-touch-callout: none;
}
.mx-col__tile:active {
  transform: translateY(1px) scale(.96);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper), var(--wood-dark) 22%), 0 2px 6px rgba(60, 50, 30, .08);
}
.mx-col__tile:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 3px; }
.mx-col__glyph {
  display: block;
  font-family: var(--font-kai);
  font-size: 36px;
  line-height: 1;
}
.mx-col__tile.is-new .mx-col__glyph { color: var(--ink-soft); opacity: .8; }   /* 「新」字仍是灰的，但 36px 大字也得 ≥3:1（.55 只有 2.4:1） */
.mx-col__tile.is-learning {
  background-color: color-mix(in srgb, var(--sky-accent) 38%, var(--paper));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--sky-accent) 60%, var(--ink-soft)), var(--shadow-soft);
}
.mx-col__tile.is-review-1 { background-color: color-mix(in srgb, var(--ok) 30%, var(--paper)); }
.mx-col__tile.is-review-2 { background-color: color-mix(in srgb, var(--ok) 50%, var(--paper)); }
.mx-col__tile.is-review-3 { background-color: color-mix(in srgb, var(--ok) 72%, var(--paper)); }
.mx-col__tile.is-review-4 { background-color: color-mix(in srgb, var(--ok) 92%, var(--paper)); }
.mx-col__tile.is-review {
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ok) 65%, var(--ink-soft)), var(--shadow-soft);
}
.mx-col__tile.is-review-3 .mx-col__glyph,
.mx-col__tile.is-review-4 .mx-col__glyph { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
/* 已驯服的妖怪（§6：Review 且稳定 ≥ 30 天）在图鉴里发光：金边 + 一层光晕伪元素只动 opacity 做呼吸（§1.4）；减少动态时光晕静止 */
.mx-col__tile.is-tamed {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, var(--paper)), var(--shadow-soft);
}
.mx-col__tile.is-tamed::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--gold-2) 90%, transparent);
  opacity: .55;
  pointer-events: none;
  animation: mx-col-tamed-glow 3.2s ease-in-out infinite;
}
@keyframes mx-col-tamed-glow {
  0%, 100% { opacity: .35; }
  50% { opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-col__tile.is-tamed::after { animation: none; }
}
.mx-col__dot { top: -4px; right: -4px; width: 14px; height: 14px; }

/* 图鉴还是空的（没有投放过妖怪） */
.mx-col__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  text-align: center;
  color: var(--ink-soft);
}
.mx-col__empty-icon { width: 56px; height: 56px; color: var(--wood); }
.mx-col__empty-icon svg { width: 100%; height: 100%; }
.mx-col__empty-text { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.mx-col__empty-sub { font-size: 16px; }

/* ---------------------------------------------------------------- 字卡弹窗（挂在 body 的 modal 内） */

.mx-col__modal { width: min(100%, 600px); padding: 22px 26px 22px; }
.mx-col__modal .mx-modal__title { display: none; }
.mx-col__card { display: flex; flex-direction: column; gap: 16px; }
.mx-col__card-top { display: flex; gap: 20px; align-items: flex-start; }
.mx-col__card-bottom { display: flex; gap: 16px; align-items: stretch; }

/* 笔顺动画容器：田字格底纹 */
.mx-col__anim {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 2px solid color-mix(in srgb, var(--wood) 55%, var(--paper));
  background-color: #fff;
  background-image:
    linear-gradient(color-mix(in srgb, var(--coral) 35%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--coral) 35%, transparent) 1px, transparent 1px);
  background-size: 50% 50%;
  background-position: -1px -1px;
  overflow: hidden;
}
.mx-col__anim > svg, .mx-col__anim > div { position: relative; }
.mx-col__anim-static { font-family: var(--font-kai); font-size: 120px; line-height: 1; color: var(--ink); }

.mx-col__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mx-col__info-head { display: flex; align-items: baseline; gap: 12px; }
.mx-col__info-char { font-family: var(--font-kai); font-size: 44px; line-height: 1; color: var(--ink); }
.mx-col__info-pinyin { font-size: 22px; }
.mx-col__word-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mx-col__word { display: inline-flex; gap: 2px; }
.mx-col__word-char { font-family: var(--font-kai); font-size: 30px; line-height: 1.2; padding: 0 2px; border-radius: 6px; }
.mx-col__word-char.is-target { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.mx-col__word-pinyin { font-size: 17px; }
.mx-col__sentence { font-family: var(--font-kai); font-size: 20px; line-height: 1.6; color: var(--ink); }   /* 例句里也有目标字，同样楷体 */

/* 手写缩略图 */
.mx-col__thumb {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mx-col__thumb-canvas {
  border-radius: 12px;
  border: 1px solid var(--card-stroke);
  background: var(--paper);
}
.mx-col__thumb.is-empty {
  justify-content: center;
  width: 112px;
  min-height: 112px;
  border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--ink-soft) 40%, transparent);
  color: var(--ink-soft);
}
.mx-col__thumb-icon { width: 30px; height: 30px; opacity: .6; }
.mx-col__thumb-icon svg { width: 100%; height: 100%; }
.mx-col__thumb-label { font-size: 15px; color: var(--ink-soft); }

/* 统计三格 */
.mx-col__stats { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: center; }
.mx-col__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--card-stroke);
  text-align: center;
}
.mx-col__stat-icon { width: 22px; height: 22px; }
.mx-col__stat-icon svg { width: 100%; height: 100%; }
.mx-col__stat-label { font-size: 15px; color: var(--ink-soft); }
.mx-col__stat-value { font-size: 22px; line-height: 1.1; color: var(--ink); }
.mx-col__stat--ok .mx-col__stat-icon, .mx-col__stat--ok .mx-col__stat-value { color: var(--ok-text); }
.mx-col__stat--bad .mx-col__stat-icon, .mx-col__stat--bad .mx-col__stat-value { color: var(--bad-text); }
.mx-col__stat--next .mx-col__stat-icon { color: var(--sky-accent); }
.mx-col__stat--next .mx-col__stat-value { font-size: 18px; }

/* ---------------------------------------------------------------- 竖屏 / 窄屏 */

@media (max-width: 900px) {
  .mx-col__head { flex-wrap: wrap; }
  .mx-col__progress { grid-template-columns: auto 1fr; border-radius: var(--radius-lg); }
  .mx-col__legend { grid-column: 1 / -1; }
  .mx-col__grid { grid-template-columns: repeat(auto-fill, 58px); gap: 8px; }
  .mx-col__tile { width: 58px; height: 58px; border-radius: 14px; }
  .mx-col__glyph { font-size: 32px; }
  .mx-col__card-top { flex-direction: column; align-items: center; }
  .mx-col__info { width: 100%; }
  .mx-col__card-bottom { flex-direction: column; align-items: center; }
  .mx-col__stats { width: 100%; }
}
.mx-col__badges { margin-left: 8px; }