/* monsters.css —— 妖怪的颜色、表情显隐与动画（DESIGN.md §6.1）
 * 依赖 tokens.css。SVG 由 monsters.js 生成，每只只带两个变量：--mon-hue（体色令牌）、--mon-mix（往纸色里揉多少）；
 * 部件颜色全在这里按 class 定，五种 mood 只切根节点 class：
 *   .mx-monster--idle 呼吸 + 眨眼 · --taunt 张嘴吐舌 + 左右晃 · --caught 网子落下 + 眼睛 > < · --tamed 闭眼大笑 + 腮红更红 + 小花 · --sleep 眼睛一条线 + 小 o 嘴 + Zzz
 *   （tamed 与 sleep 在 64px 以下要一眼分得开：一个咧嘴笑、一个张着小嘴打呼）
 * 结构：svg.mx-monster > .mx-monster__rig（一次性动作）> .mx-monster__breath（呼吸）> 角耳 / 脚 / 身体 / 花纹 / 肚皮 / 字 / 腮红 / 眼 / 嘴
 *                                     + 火苗 / 小花 / Zzz / 网（不随呼吸）
 * 只动 transform / opacity；眼睛的 <g> 带 transform 属性，所以眨眼动画落在里面的圆上，不碰 <g>。
 */

/* ---------- 宿主与根节点 ---------- */

.mx-monster-host {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.mx-monster-host > .mx-monster { width: 100%; height: 100%; }

.mx-monster {
  --mon-body: color-mix(in oklab, var(--mon-hue, var(--sky-accent)) var(--mon-mix, 82%), var(--paper));
  --mon-dark: color-mix(in oklab, var(--mon-body) 68%, var(--ink));
  --mon-ink: 55%;              /* 肚子上字的墨色占比：凶度 1 → 55%，凶度 5 → 全墨 */
  --mon-t: 0s;                 /* 每只错开的动画相位（monsters.js 按 hash 给） */
  display: block;
  overflow: visible;
  fill: none;
  -webkit-user-select: none;
  user-select: none;
}
.mx-monster--f2 { --mon-ink: 66%; }
.mx-monster--f3 { --mon-ink: 77%; }
.mx-monster--f4 { --mon-ink: 88%; }
.mx-monster--f5 { --mon-ink: 100%; }

/* ---------- 部件颜色 ---------- */

.mx-monster__shadow { fill: var(--ink); opacity: .12; }
.mx-monster__horn, .mx-monster__feet, .mx-monster__pattern { fill: var(--mon-dark); }
.mx-monster__pattern { opacity: .32; }
.mx-monster__ear { fill: var(--mon-body); stroke: var(--mon-dark); stroke-width: 1.6; stroke-linejoin: round; }
.mx-monster__ear-in { fill: var(--coral); opacity: .45; }
.mx-monster__antenna path { fill: none; stroke: var(--mon-dark); stroke-width: 2.6; stroke-linecap: round; }
.mx-monster__antenna circle { fill: var(--gold-2); stroke: var(--gold); stroke-width: 1.4; }
.mx-monster__body { fill: var(--mon-body); stroke: var(--mon-dark); stroke-width: 2; stroke-linejoin: round; }
.mx-monster__shade { fill: var(--mon-dark); opacity: .28; mix-blend-mode: multiply; }
.mx-monster__light { fill: var(--paper); opacity: .55; }
.mx-monster__belly { fill: var(--paper); opacity: .82; }
.mx-monster__glyph {
  font-family: var(--font-kai);
  font-size: 27px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: color-mix(in oklab, var(--ink) var(--mon-ink), var(--paper));
  /* 描一圈纸色边（画在填充下面）：网格压上来时字仍然读得清 */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-linejoin: round;
}
/* 蒙住字形（默写页判定前）：淡一点的「？」，揭开时真字淡入 */
.mx-monster__glyph--masked { opacity: .55; font-size: 24px; }
.mx-monster__glyph { transition: opacity 260ms var(--ease-out, ease-out); }
.mx-monster__blush { fill: var(--coral); opacity: .35; }
/* 眼：三个圆 = 眼白 / 瞳孔 / 高光；两条 path = > <（被网住）、∩（闭眼） */
.mx-monster__eye circle:nth-of-type(1) { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.mx-monster__eye circle:nth-of-type(2) { fill: var(--ink); }
.mx-monster__eye circle:nth-of-type(3) { fill: var(--paper); }
.mx-monster__eye path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* 嘴 */
.mx-monster__mouth-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.mx-monster__calm { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }   /* 驯服：咧开的大笑 */
.mx-monster__mouth-fill, .mx-monster__open path { fill: var(--ink); }
.mx-monster__mouth-o { fill: var(--ink); stroke: var(--ink); stroke-width: 1.2; }   /* 呆：一个小小的 o */
.mx-monster__doze { fill: var(--ink); opacity: .85; }                                /* 睡着：张着小嘴打呼 */
.mx-monster__fang { fill: var(--paper); }
.mx-monster__open .mx-monster__tongue { fill: var(--coral); }
/* 头顶 / 身边的小东西 */
.mx-monster__flame path { fill: var(--coral); }
.mx-monster__flame circle { fill: var(--gold-2); }
.mx-monster__flower circle { fill: var(--coral); opacity: .75; stroke: var(--paper); stroke-width: 1.2; }
.mx-monster__flower circle:last-child { fill: var(--gold-2); opacity: 1; stroke: none; }
.mx-monster__zzz text { fill: var(--ink-soft); stroke: var(--paper); stroke-width: 2.5; paint-order: stroke; font-family: var(--font-display); font-size: 17px; }
.mx-monster__zzz text:first-child { font-size: 12px; }
/* 网：木色圈 + 网格。圈 3px：默写页被网住的妖怪最后缩到 26px 飞进 HUD 小笼子，圈太细就看不出是网；
   网格线比圈细、半透明——「捉住了」那一刻刚揭开的真字得读得清，网不能糊在字上 */
.mx-monster__net circle { fill: var(--paper); fill-opacity: .12; stroke: var(--wood-dark); stroke-width: 3; }
.mx-monster__net path { fill: none; stroke: var(--wood-dark); stroke-width: 1.8; stroke-linecap: round; opacity: .5; }

/* ---------- 表情部件的显隐（默认 idle 的样子） ---------- */

.mx-monster__eye path,
.mx-monster__open,
.mx-monster__calm,
.mx-monster__doze,
.mx-monster__flower,
.mx-monster__zzz,
.mx-monster__net {
  display: none;
}

/* taunt：张嘴吐舌 */
.mx-monster--taunt .mx-monster__mouth { display: none; }
.mx-monster--taunt .mx-monster__open { display: inline; }

/* caught：眼睛 > <，惊讶地张嘴（不吐舌），网子盖上 */
.mx-monster--caught .mx-monster__eye circle { display: none; }
.mx-monster--caught .mx-monster__eye path:nth-of-type(1) { display: inline; }
.mx-monster--caught .mx-monster__mouth { display: none; }
.mx-monster--caught .mx-monster__open { display: inline; }
.mx-monster--caught .mx-monster__tongue { display: none; }
.mx-monster--caught .mx-monster__net { display: inline; }
/* 被网住的那一刻真字刚揭开：不管凶度，字用全墨 */
.mx-monster--caught .mx-monster__glyph { fill: var(--ink); }

/* tamed：闭眼（∩）大笑 + 腮红更红 + 小花 */
.mx-monster--tamed .mx-monster__eye circle,
.mx-monster--sleep .mx-monster__eye circle { display: none; }
.mx-monster--tamed .mx-monster__eye path:nth-of-type(2),
.mx-monster--sleep .mx-monster__eye path:nth-of-type(2) { display: inline; }
.mx-monster--tamed .mx-monster__mouth,
.mx-monster--sleep .mx-monster__mouth { display: none; }
.mx-monster--tamed .mx-monster__calm { display: inline; }
.mx-monster--tamed .mx-monster__blush { opacity: .55; }
.mx-monster--tamed .mx-monster__flower { display: inline; }

/* sleep：眼睛压成一条线（— —）+ 小 o 嘴打呼 + Zzz；睡着了火苗也灭了 */
.mx-monster--sleep .mx-monster__doze { display: inline; }
.mx-monster--sleep .mx-monster__zzz { display: inline; }
.mx-monster--sleep .mx-monster__eye path:nth-of-type(2) { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.3); }
.mx-monster--sleep .mx-monster__flame { display: none; }

/* ---------- 常驻动画：呼吸、眨眼、火苗摇曳 ---------- */

.mx-monster__breath {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mx-monster-breathe 3.4s ease-in-out infinite;
  animation-delay: var(--mon-t);
}
.mx-monster--sleep .mx-monster__breath { animation-duration: 4.8s; }
/* 眨眼落在眼睛里的三个圆上（眼的 <g> 带 transform 属性，CSS transform 会把它覆盖掉） */
.mx-monster__eye circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mx-monster-blink 5.2s ease-in-out infinite;
  animation-delay: var(--mon-t);
}
.mx-monster__flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mx-monster-flicker 1.1s ease-in-out infinite;
  animation-delay: var(--mon-t);
}

@keyframes mx-monster-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.025, .975); }
}
@keyframes mx-monster-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(.08); }
}
@keyframes mx-monster-flicker {
  0%, 100% { scale: 1; opacity: 1; }
  50%      { scale: 1.08 .94; opacity: .85; }
}

/* ---------- 各表情的动作 ---------- */

.mx-monster__rig { transform-box: fill-box; transform-origin: 50% 100%; }

/* taunt：左右晃 */
.mx-monster--taunt .mx-monster__rig { animation: mx-monster-taunt .8s ease-in-out infinite; }
.mx-monster--taunt .mx-monster__tongue {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: mx-monster-tongue .8s ease-in-out infinite;
}
@keyframes mx-monster-taunt {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes mx-monster-tongue {
  0%, 100% { transform: scaleY(.85); }
  50%      { transform: scaleY(1.15); }
}

/* caught：网子从上落下，身体被压得一扁 */
.mx-monster--caught .mx-monster__rig { animation: mx-monster-caught .7s var(--ease-bounce) both; }
.mx-monster--caught .mx-monster__net { animation: mx-monster-net-drop .5s var(--ease-out) both; }
@keyframes mx-monster-caught {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.08, .88); }
  65%  { transform: scale(.96, 1.04); }
  100% { transform: scale(1, 1); }
}
@keyframes mx-monster-net-drop {
  from { transform: translateY(-64px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* tamed：慢慢左右摇，小花弹出来 */
.mx-monster--tamed .mx-monster__rig { animation: mx-monster-sway 3.2s ease-in-out infinite; animation-delay: var(--mon-t); }
.mx-monster--tamed .mx-monster__flower {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: mx-monster-bloom .5s var(--ease-bounce) both;
}
@keyframes mx-monster-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes mx-monster-bloom {
  from { scale: 0; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}

/* sleep：Zzz 往上飘 */
.mx-monster--sleep .mx-monster__zzz text { animation: mx-monster-zzz 2.6s ease-in-out infinite; }
.mx-monster--sleep .mx-monster__zzz text:last-child { animation-delay: .6s; }
@keyframes mx-monster-zzz {
  0%   { transform: translateY(3px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0; }
}

/* ---------- 减少动态：循环动画全停，状态切换保留 ---------- */

@media (prefers-reduced-motion: reduce) {
  .mx-monster__breath,
  .mx-monster__eye circle,
  .mx-monster__flame,
  .mx-monster--taunt .mx-monster__rig,
  .mx-monster--taunt .mx-monster__tongue,
  .mx-monster--tamed .mx-monster__rig,
  .mx-monster--sleep .mx-monster__zzz text {
    animation: none;
  }
}