/* cage.css —— 「妖怪笼」场景样式（DESIGN.md §6.3）
 * 只作用于 .mx-scene--cage 之下；字卡片弹窗复用 collection.css 的 .mx-col__modal，这里只加「来历」一行（.mx-cage__origin，挂在 body 的 modal 内）。
 * 三块：顶部玻璃条（标题 + 三个数字卡）· 「最凶的 5 只」纸面大卡 · 两栏可折叠（在外面 = 草地，笼子里 = 木笼子）。
 * 妖怪本体的颜色 / 动画在 monsters.css。
 */

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

/* ---------------------------------------------------------------- 顶栏：返回 · 标题 · 三个数字卡 */

.mx-cage__head { display: flex; align-items: stretch; gap: 12px; }
.mx-cage__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 18px 6px 8px;
  border-radius: 999px;
}
.mx-cage__title-icon { display: inline-flex; width: 30px; height: 30px; color: var(--wood-dark); }
.mx-cage__title-icon svg { width: 100%; height: 100%; }
.mx-cage__title { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--ink); }

.mx-cage__stats { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mx-cage__stat {
  --stat-color: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 6px 18px;
  border-radius: 999px;
  text-align: left;
  color: var(--ink);
}
.mx-cage__stat-num { grid-row: 1 / span 2; align-self: center; font-size: 34px; line-height: 1; color: var(--stat-color); }
.mx-cage__stat-label { font-family: var(--font-display); font-size: 18px; line-height: 1.15; color: var(--ink); }
.mx-cage__stat-sub { font-size: 14px; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; }
/* 34px 大数字：用 *-num 档（≥ 3:1），色块色本身在纸上只有 2.5–2.8 */
.mx-cage__stat--wild { --stat-color: var(--coral-num); }
.mx-cage__stat--caged { --stat-color: var(--ok-num); }
.mx-cage__stat--tamed { --stat-color: var(--wisteria-num); }
button.mx-cage__stat { transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out); -webkit-touch-callout: none; }
button.mx-cage__stat:active { transform: scale(.96); }
button.mx-cage__stat:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- 主体 */

.mx-cage__body { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
/* 主体是滚动容器：三个子块不许被压扁（.mx-cage__group 的 overflow:hidden 会把 min-height:auto 变成 0，
   默认 flex-shrink:1 时三块被压到正好填满视口、scrollHeight == clientHeight，笼子里的妖怪永远看不到） */
.mx-cage__body > * { flex: 0 0 auto; }
/* 墨墨的站位（挂在场景根上，不随主体滚动）：宽屏时右侧留一条空地给它，窄屏藏起来（cage.js 按此媒体查询决定） */
.mx-cage__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-cage__top, .mx-cage__group, .mx-cage__search, .mx-cage__results { margin-right: 176px; }
}

.mx-cage__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
.mx-cage__section-icon { display: inline-flex; width: 26px; height: 26px; }
.mx-cage__section-icon svg { width: 100%; height: 100%; }
.mx-cage__section-icon--fire { color: var(--coral); }
.mx-cage__section-icon--fire svg { fill: color-mix(in srgb, var(--gold-2) 70%, transparent); }

.mx-cage__empty {
  grid-column: 1 / -1;                  /* 大卡行与栏身都是 grid：空状态文案占满一行 */
  padding: 22px 12px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 最凶的 5 只 */

.mx-cage__top { padding: 14px 18px 16px; background-color: color-mix(in srgb, var(--paper) 90%, transparent); }
.mx-cage__top-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.mx-cage__top-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--card-stroke);
  background-color: var(--paper-2);
  background-image: var(--paper-noise);
  color: var(--ink);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--paper-2), var(--wood-dark) 22%), var(--shadow-soft);
  transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out);
  -webkit-touch-callout: none;
}
.mx-cage__top-card:active {
  transform: translateY(1px) scale(.96);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper-2), var(--wood-dark) 22%), 0 2px 6px rgba(60, 50, 30, .08);
}
.mx-cage__top-card:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 3px; }
.mx-cage__top-monster { margin-bottom: 2px; }
/* 大卡上独立的字：楷体大字，家长 / 娃扫一眼就知道是哪个字（肚子上的小字只是装饰） */
.mx-cage__top-char { font: 40px/1 var(--font-kai); color: var(--ink); margin: 2px 0 4px; }
.mx-cage__fero { display: inline-flex; gap: 0; height: 18px; }
.mx-cage__fero-flame { display: inline-flex; width: 18px; height: 18px; margin: 0 -2px; color: var(--coral); }
.mx-cage__fero-flame svg { width: 100%; height: 100%; fill: color-mix(in srgb, var(--gold-2) 75%, transparent); }
.mx-cage__top-line { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 1.3; color: var(--ink-soft); white-space: nowrap; }
.mx-cage__top-line--wrong { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.mx-cage__top-wrong { font-size: 20px; color: var(--bad-text); }
.mx-cage__top-clock { display: inline-flex; width: 16px; height: 16px; color: var(--sky-accent); }
.mx-cage__top-clock svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- 两栏：可折叠 */

.mx-cage__group {
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-stroke);
  background-color: color-mix(in srgb, var(--paper) 90%, transparent);
  background-image: var(--paper-noise);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mx-cage__group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 18px 10px 20px;
  text-align: left;
  color: var(--ink);
  border-left: 5px solid var(--wood);
  -webkit-touch-callout: none;
}
.mx-cage__group-head:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: -3px; }
.mx-cage__group--wild .mx-cage__group-head { border-left-color: var(--coral); }
.mx-cage__group--caged .mx-cage__group-head { border-left-color: var(--wood-dark); }
.mx-cage__group-name { font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.mx-cage__group-count { font-size: 22px; line-height: 1; color: var(--ink-soft); }
.mx-cage__group-count::before { content: '× '; font-family: var(--font-body); font-size: 15px; }
.mx-cage__group-hint { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-cage__group-chevron {
  display: inline-flex;
  align-self: center;
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  transform: rotate(-90deg);            /* ← 转成 ∨ */
  transition: transform 200ms var(--ease-out);
}
.mx-cage__group-chevron svg { width: 100%; height: 100%; }
.mx-cage__group.is-open .mx-cage__group-chevron { transform: rotate(90deg); }
.mx-cage__group-body { padding: 0 14px 14px; }

/* 栏身：一片地方，妖怪站在上面 */
.mx-cage__pen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: start;
  gap: 8px 6px;
  padding: 12px 10px;
  border-radius: var(--radius);
}
/* 在外面：草地 */
.mx-cage__pen--wild {
  background:
    radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--hill-mid) 40%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--hill-far) 45%, transparent), transparent 60%),
    color-mix(in srgb, var(--hill-mid) 22%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--hill-near) 35%, transparent);
}
/* 笼子里：木笼子 —— 竖栏在妖怪后面，上下两根横梁在前面 */
.mx-cage__pen--caged {
  padding: 22px 12px 20px;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, color-mix(in srgb, var(--wood) 55%, transparent) 44px 50px),
    color-mix(in srgb, var(--wood) 16%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--wood-dark) 35%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.mx-cage__pen--caged::before,
.mx-cage__pen--caged::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--wood), var(--wood-dark));
  box-shadow: 0 2px 4px rgba(60, 50, 30, .25);
  pointer-events: none;
}
.mx-cage__pen--caged::before { top: -3px; }
.mx-cage__pen--caged::after { bottom: -3px; }

/* 一格：妖怪 + 一行小字 */
.mx-cage__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100px;
  padding: 4px 2px 6px;
  border-radius: 16px;
  color: var(--ink);
  transition: transform 100ms var(--ease-out), background-color 100ms;
  -webkit-touch-callout: none;
}
.mx-cage__tile:active { transform: scale(.96); background: rgba(255, 255, 255, .35); }
.mx-cage__tile:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 2px; }
.mx-cage__tile-cap {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* 珊瑚色掺一半墨：压浅绿草地 ≈5:1（七成珊瑚只有 3.7:1） */
.mx-cage__tile--wild .mx-cage__tile-cap { color: color-mix(in srgb, var(--coral) 50%, var(--ink)); }
/* 格子里的妖怪 84px，肚子上的字按 27/120 只有 19px：放大到 34 视框单位（≈24px）、肚皮跟着放大，字色压到全墨——格子里要认字，不是看凶度 */
.mx-cage__tile .mx-monster__glyph { font-size: 34px; fill: var(--ink); }
.mx-cage__tile .mx-monster__belly { transform: scale(1.25); transform-box: fill-box; transform-origin: 50% 50%; }
/* 野生的在草地上各自一上一下地蹦（错开相位） */
.mx-cage__tile--wild .mx-cage__tile-monster {
  animation: mx-cage-bob 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.4s);
}
@keyframes mx-cage-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---------------------------------------------------------------- 字卡片里的「来历」一行（挂在 body 的 modal 内） */

.mx-cage__origin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--wisteria) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--wisteria) 30%, transparent);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.mx-cage__origin-monster { flex: 0 0 auto; margin: -6px 0; }
.mx-cage__origin-label { color: var(--ink-soft); }
.mx-cage__origin-text { font-family: var(--font-display); font-size: 17px; }

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

@media (max-width: 900px) {
  .mx-cage__head { flex-wrap: wrap; }
  .mx-cage__stats { flex: 1 1 100%; }
  .mx-cage__stat { padding: 6px 14px; }
  .mx-cage__stat-num { font-size: 28px; }
  .mx-cage__stat-sub { display: none; }
  .mx-cage__top-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .mx-cage__group-hint { display: none; }
  .mx-cage__pen { grid-template-columns: repeat(auto-fill, 88px); }
  .mx-cage__tile { width: 88px; }
}

/* ---------------------------------------------------------------- 减少动态 */

@media (prefers-reduced-motion: reduce) {
  .mx-cage__tile--wild .mx-cage__tile-monster { animation: none; }
}

/* ---------------------------------------------------------------- 搜索：找一只妖怪 */
.mx-cage__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  margin-bottom: 0;
}
.mx-cage__search-icon { display: inline-flex; width: 22px; height: 22px; color: var(--ink-soft); flex: 0 0 auto; }
.mx-cage__search-icon svg { width: 100%; height: 100%; }
.mx-cage__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  padding: 8px 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.mx-cage__search-input::placeholder { color: var(--ink-soft); opacity: .8; }
.mx-cage__search-input::-webkit-search-cancel-button { display: none; }
.mx-cage__search-clear { visibility: hidden; }
.mx-cage__search.is-active .mx-cage__search-clear { visibility: visible; }
.mx-cage__results { margin-bottom: 14px; }
.mx-cage__pen--results {
  background: color-mix(in srgb, var(--gold-2) 14%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.mx-cage__tile-state {
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--paper);
  background: var(--ink-soft);
}
.mx-cage__tile-state.is-wild { background: var(--coral-deep, #c9583f); }
.mx-cage__tile-state.is-caged { background: var(--wood-dark); }
.mx-cage__tile-state.is-tamed { background: var(--ok, #4e9a63); }