/* play.css —— 「默写 / 捉妖怪」场景样式（DESIGN.md §2.2，v2 §6.4）。只作用于 .mx-scene--play 之下；
   存疑面板由 ui.modal 挂到 body，用独立前缀 .mx-play-judge 限定；捉妖飞行体（.mx-play__monster-fly，装着句子卡旁的妖怪本尊）也挂在 body。
   颜色、圆角、阴影、字体一律取 tokens.css 的变量；动效只动 transform / opacity / filter；妖怪本体在 monsters.css。 */

.mx-scene--play {
  --mx-play-pad: 400px;                 /* 书写格边长，由 play.js 按视口写入 */
  --mx-play-mat: 12px;                  /* 书写格四周的纸边 */
  --mx-play-ink: var(--ink);            /* 当前墨色（装备），由 play.js 写入 */
  --mx-play-paper: var(--paper);        /* 当前纸色（装备） */
  font-family: var(--font-body);
  color: var(--ink);
}

/* HUD：默写场景不显示连续天数，中间放进度点 + 小笼子 */
.mx-scene--play .mx-hud__streak { display: none; }
.mx-scene--play .mx-hud__center { flex: 1 1 auto; gap: 10px; }

/* 小笼子：这轮捉住了几只；妖怪飞进来时抖一下 */
.mx-play__cage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
}
.mx-play__cage-icon { display: inline-flex; width: 26px; height: 26px; color: var(--wood-dark); }
.mx-play__cage-icon svg { width: 100%; height: 100%; }
.mx-play__cage .mx-num { color: var(--ok-text); }
.mx-play__cage.is-bump { animation: mx-play-cage-bump 460ms var(--ease-bounce) both; }
@keyframes mx-play-cage-bump {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.18) rotate(-6deg); }
  60%  { transform: scale(.96) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

.mx-play__progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.mx-play__dots { display: inline-flex; align-items: center; gap: 5px; }
.mx-play__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink-soft) 55%, transparent);
  background: transparent;
  transition: transform var(--dur-micro) var(--ease-bounce), background-color var(--dur-micro), border-color var(--dur-micro);
}
.mx-play__dot.is-done { background: var(--ok); border-color: var(--ok); }
.mx-play__dot.is-wrong { background: var(--bad); border-color: var(--bad); }
.mx-play__dot.is-skipped { background: color-mix(in srgb, var(--ink-soft) 40%, transparent); border-color: transparent; }
.mx-play__dot.is-current {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 45%, transparent);
  animation: mx-breathe 1.8s var(--ease-out) infinite;
}
.mx-play__count { font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--ink); }
.mx-play__count small { font-size: 15px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- 主体骨架 */

.mx-play__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px clamp(16px, 3vw, 40px) 12px;
  overflow: hidden;                     /* 默写页不滚动：书写格尺寸由 js 按视口算 */
}

/* ---------------------------------------------------------------- 句子卡 + 旁边的妖怪 */

.mx-play__top {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.mx-play__sentence {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 12px 24px;
  border-radius: var(--radius-lg);
}

/* 这个字的妖怪：站在句子卡外侧右边，不遮句子；出场弹一下，被捉后隐去，写错后逃跑 */
.mx-play__monster {
  flex: 0 0 auto;
  position: relative;
  width: 104px;
  height: 104px;
  margin-bottom: -4px;
  transition: opacity 200ms var(--ease-out);
}
.mx-play__monster-el { display: block; filter: drop-shadow(0 6px 10px rgba(60, 50, 30, .18)); }
.mx-play__monster.is-arrive { animation: mx-play-monster-in 420ms var(--ease-bounce) both; }
@keyframes mx-play-monster-in {
  from { transform: translateY(14px) scale(.6); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
/* 被网住飞走后原地的那只要真的消失：.is-arrive 的动画用了 both（fill 值 opacity:1 在层叠上压过普通声明），
   这里把动画一并关掉，否则克隆在飞、原地还站着一只 */
.mx-play__monster.is-gone { opacity: 0; animation: none; }
.mx-play__monster.is-escape { animation: mx-play-monster-escape 520ms ease-in both; }
@keyframes mx-play-monster-escape {
  0%   { transform: translateX(0) rotate(0); opacity: 1; }
  25%  { transform: translateX(-10px) rotate(-8deg); opacity: 1; }
  100% { transform: translateX(160px) rotate(14deg); opacity: 0; }
}
/* 捉妖飞行体：固定定位，句子卡旁的妖怪本尊被挪进来（带着自己的 drop-shadow），跳到书写格右上角被网住、再飞进 HUD 小笼子；
   位移 / 缩放由 play.js 的 Web Animations 驱动（只动 transform / opacity） */
.mx-play__monster-fly {
  position: fixed;
  z-index: var(--z-fx);
  transform-origin: 50% 50%;
  pointer-events: none;
  line-height: 0;
}
.mx-play__monster-fly svg { width: 100%; height: 100%; }
.mx-play__sentence.is-entering { animation: mx-play-card-in var(--dur-card) var(--ease-out) both; }
.mx-play__sentence.is-leaving { animation: mx-play-card-out var(--dur-exit) var(--ease-in) both; }
@keyframes mx-play-card-in {
  from { transform: translateY(-28px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes mx-play-card-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-10px); opacity: 0; }
}

.mx-play__sentence-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 6px;
  font-family: var(--font-kai);
  font-size: 30px;
  line-height: 1.35;
  color: var(--ink);
}
.mx-play__txt { padding-bottom: 6px; }
/* 池子还没到、词条也没静态句时的兜底文案：「词——请听读音」，说明部分淡一点 */
.mx-play__sentence-text.is-fallback .mx-play__txt { color: var(--ink-soft); font-size: .8em; }
.mx-play__cells { display: inline-flex; align-items: flex-end; gap: 6px; margin: 0 6px; }

.mx-play__cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  --mx-play-cell: 58px;
}
.mx-play__py {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mx-play__box {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--mx-play-cell);
  height: var(--mx-play-cell);
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--wood) 55%, transparent);
  background: rgba(255, 255, 255, .35);
  font-family: var(--font-kai);
  font-size: 40px;                      /* 题目汉字 ≥ 40px */
  line-height: 1;
  color: var(--ink);
  transition: transform var(--dur-micro) var(--ease-bounce), background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);
}
.mx-play__cell.is-shown .mx-play__box {
  border-style: solid;
  border-color: transparent;
  background: transparent;
}
.mx-play__cell.is-current .mx-play__box {
  border-style: solid;
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 12%, white 40%);
  animation: mx-play-cell-breathe 1.8s var(--ease-out) infinite;
}
@keyframes mx-play-cell-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.mx-play__cell.is-ok .mx-play__box {
  border-style: solid;
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, white 40%);
  color: color-mix(in srgb, var(--ok), var(--ink) 40%);
}
/* 写错：反馈期间小格留空只挂一个珊瑚色小点；笔顺演示完再淡淡地填上正确字（不是娃写的，颜色浅）——
   不把识别器猜的错字填进句子里，娃在语境里反复看的只能是对的字 */
.mx-play__cell.is-wrong .mx-play__box {
  border-style: solid;
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 14%, white 40%);
  color: color-mix(in srgb, var(--bad) 55%, transparent);
}
.mx-play__cell.is-wrong .mx-play__box-dot { background: var(--bad); }
.mx-play__cell.is-skipped .mx-play__box {
  border-style: dotted;
  border-color: color-mix(in srgb, var(--ink-soft) 45%, transparent);
  color: var(--ink-soft);
}
.mx-play__cell.is-pop .mx-play__box { animation: mx-pop 320ms var(--ease-bounce) both; }

/* 笔画数不符：小格右上角一个小橙点 */
.mx-play__box-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--warn);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(60, 50, 30, .25);
}

.mx-play__speak { flex: 0 0 auto; color: var(--sky-accent); }

/* ---------------------------------------------------------------- 三栏主区 */

.mx-play__main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  grid-template-areas: "combo center actions";
  align-items: start;
  align-content: start;
  column-gap: clamp(12px, 2.5vw, 36px);
}

.mx-play__center {
  grid-area: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
}

/* ---------------------------------------------------------------- 阳光计时 */

.mx-play__sun {
  position: relative;
  width: calc(var(--mx-play-pad) + var(--mx-play-mat) * 2 + 24px);
  aspect-ratio: 100 / 16;
  margin-bottom: -8px;
  pointer-events: none;
}
.mx-play__sun svg { width: 100%; height: 100%; overflow: visible; }
.mx-play__sun-track {
  fill: none;
  stroke: color-mix(in srgb, var(--wood) 45%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 2.4 2.6;
  stroke-linecap: round;
}
.mx-play__sun-trail {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .85;
}
.mx-play__sun-body { transition: opacity 600ms var(--ease-out); }
.mx-play__sun-core { fill: var(--gold-2); stroke: var(--gold); stroke-width: .9; }
.mx-play__sun-halo { fill: color-mix(in srgb, var(--gold-2) 45%, transparent); }
.mx-play__sun-rays { stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.mx-play__sun.is-running .mx-play__sun-rays { animation: mx-play-sun-spin 14s linear infinite; }
@keyframes mx-play-sun-spin { to { transform: rotate(360deg); } }
.mx-play__sun.is-idle .mx-play__sun-body { opacity: .55; }
/* 反馈期间（捉住了 / 写的像）浮字正落在弧线顶点，太阳与弧线退到后面去 */
.mx-play__sun { transition: opacity 200ms var(--ease-out); }
.mx-play__sun.is-feedback { opacity: .35; }
.mx-play__sun.is-expired .mx-play__sun-body { opacity: .35; }
.mx-play__sun.is-expired .mx-play__sun-trail { opacity: .4; }
.mx-play__sun-label {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 300ms;
}
.mx-play__sun.is-expired .mx-play__sun-label { opacity: 1; }

/* ---------------------------------------------------------------- 书写格 */

.mx-play__padwrap {
  position: relative;
  width: calc(var(--mx-play-pad) + var(--mx-play-mat) * 2);
  max-width: 100%;
}
.mx-play__mat {
  position: relative;
  padding: var(--mx-play-mat);
  border-radius: var(--radius);
  background-color: var(--mx-play-paper);
  background-image: var(--paper-noise);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow);
  transition: box-shadow 200ms;
}
.mx-play__mat.is-dark { background-image: none; }

/* 识别中：一圈柔光沿边流转。转的是渐变的起始角（@property 让它可动画），元素本身不转，
   四角不会甩出格子；再用遮罩只留 4px 的环，格子内部不被染色。 */
@property --mx-glow-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.mx-play__mat::before {
  content: '';
  position: absolute;
  inset: -5px;
  padding: 5px;
  border-radius: calc(var(--radius) + 5px);
  background: conic-gradient(from var(--mx-glow-a), transparent 0 52%, color-mix(in srgb, var(--sky-accent) 85%, white) 78%, transparent 100%);
  filter: blur(.6px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.mx-play__padwrap.is-thinking .mx-play__mat::before {
  opacity: 1;
  animation: mx-play-glow-spin 1.4s linear infinite;
}
@keyframes mx-play-glow-spin { to { --mx-glow-a: 360deg; } }

.mx-play__canvas {
  border-radius: 6px;
  transition: opacity 260ms var(--ease-out);
}
.mx-play__padwrap.is-locked .mx-play__canvas { pointer-events: none; }
.mx-play__padwrap.is-faded .mx-play__canvas { opacity: .14; }
.mx-play__padwrap.is-out .mx-play__canvas,
.mx-play__padwrap.is-out .mx-play__ghost { opacity: 0; transition: opacity 240ms var(--ease-in); }
.mx-play__canvas.is-pop { animation: mx-pop 360ms var(--ease-bounce) both; }

/* 写对：楷体目标字淡入叠在字迹上方 */
.mx-play__ghost {
  position: absolute;
  inset: var(--mx-play-mat);
  display: grid;
  place-items: center;
  font-family: var(--font-kai);
  font-size: calc(var(--mx-play-pad) * .62);   /* ≥ 书写格边长 × 0.6 */
  line-height: 1;
  color: var(--ok);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.mx-play__ghost.is-on { opacity: .62; }
.mx-play__mat.is-dark .mx-play__ghost { color: color-mix(in srgb, var(--ok) 70%, white); }

/* 写错：笔顺演示层盖在书写格上（hanzi.animate 放进来） */
.mx-play__demo {
  position: absolute;
  inset: var(--mx-play-mat);
  display: none;
  place-items: center;
  cursor: pointer;
}
.mx-play__demo.is-on { display: grid; }
.mx-play__demo svg { overflow: visible; }
/* 没有笔顺数据时的兜底：楷体大字自左向右「写」出来 */
.mx-play__demo-fallback {
  font-family: var(--font-kai);
  font-size: calc(var(--mx-play-pad) * .62);
  line-height: 1;
  color: var(--ink);
  animation: mx-play-write-in 1400ms var(--ease-out) both;
}
@keyframes mx-play-write-in {
  from { clip-path: inset(0 100% 0 0); opacity: .4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* 书写格上方的浮字：「你写的像「X」」 */
.mx-play__caption {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translate(-50%, 0);
  max-width: 120%;
  padding: 8px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
  z-index: 2;
}
.mx-play__caption b { font-family: var(--font-kai); font-weight: 400; font-size: 26px; color: var(--bad-text); }
.mx-play__caption.is-on { opacity: 1; transform: translate(-50%, -100%); }
/* 「捉住了！」要比「写的像「X」」更有庆祝感：更大、绿字、淡绿底 */
.mx-play__caption.is-ok {
  font-size: 26px;
  color: var(--ok-text);
  background: color-mix(in srgb, var(--ok) 14%, var(--paper));
  border-color: color-mix(in srgb, var(--ok) 40%, var(--card-stroke));
}
.mx-play__caption.is-ok b { color: var(--ok-text); }

/* 写对时书写格上的「+15」等浮字：fx 版本从这里读 color（play.js floatColor），DOM 版本用于 fx 不可用 / reduced-motion。
   纯金色 / 琥珀色落在浅色天空与纸卡交界处读不出来，掺墨后与 HUD 金币数同色 */
.mx-play__float {
  position: absolute;
  left: 50%;
  top: 22%;
  translate: -50% 0;               /* 用独立的 translate 居中：mx-float-up 关键帧只写 transform，不会把它冲掉 */
  font-family: var(--font-display);
  font-size: 36px;
  color: color-mix(in srgb, var(--gold), var(--ink) 35%);
  text-shadow: 0 1px 0 var(--paper), 0 2px 8px rgba(60, 50, 30, .2);
  pointer-events: none;
  animation: mx-float-up 1100ms var(--ease-out) both;
}
.mx-play__float--sun {
  color: color-mix(in srgb, var(--warn), var(--ink) 30%);
  font-size: 26px;
  top: calc(22% + 36px + var(--mx-float-row, 0) * 30px);   /* 第二条副浮字再低一行（play.js 写 --mx-float-row） */
}

/* ---------------------------------------------------------------- 连击栏 */

.mx-play__combo {
  grid-area: combo;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 132px;
  padding: 14px 12px 10px;
  border-radius: var(--radius);
}
.mx-play__combo-label { font-family: var(--font-display); font-size: 18px; color: var(--ink-soft); line-height: 1; }
.mx-play__combo-num {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
  color: var(--ink);
  transition: transform var(--dur-micro) var(--ease-bounce), color var(--dur-micro);
}
.mx-play__combo.is-hot .mx-play__combo-num { color: var(--coral-num); }   /* 34px 大数字，num 档 */
.mx-play__combo-num.is-pop { animation: mx-pop 320ms var(--ease-bounce) both; }

/* 墨条：一根竖管，墨从底部涨上来（scaleY，transform-origin 底部） */
.mx-play__gauge {
  position: relative;
  width: 34px;
  height: 150px;
  margin: 6px 0 4px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--paper-2), var(--wood-dark) 10%);
  box-shadow: inset 0 2px 6px rgba(60, 50, 30, .18), inset 0 0 0 2px rgba(255, 255, 255, .5);
  overflow: hidden;
}
.mx-play__gauge-ink {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 500ms var(--ease-out);
}
.mx-play__combo.is-hot .mx-play__gauge-ink { background: linear-gradient(180deg, var(--coral), var(--ink) 85%); }
.mx-play__combo.is-dropping .mx-play__gauge-ink { transition-duration: 1200ms; transition-timing-function: ease-in-out; }
.mx-play__gauge-tick {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 0;
  border-top: 2px dotted rgba(255, 255, 255, .7);
  mix-blend-mode: multiply;
  opacity: .6;
}
.mx-play__gauge-ripple {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform-origin: 50% 50%;
  transition: transform 500ms var(--ease-out);
}

.mx-play__combo-fire {
  width: 30px;
  height: 30px;
  color: var(--ink-soft);
  opacity: .35;
  transition: opacity var(--dur-micro), transform var(--dur-micro) var(--ease-bounce), color var(--dur-micro);
}
.mx-play__combo-fire svg { width: 100%; height: 100%; }
.mx-play__combo.is-hot .mx-play__combo-fire {
  opacity: 1;
  color: var(--coral);
  animation: mx-play-flicker 1.1s ease-in-out infinite alternate;
}
@keyframes mx-play-flicker {
  from { transform: scale(1) rotate(-3deg); }
  to   { transform: scale(1.12) rotate(3deg); }
}

/* 墨墨站在连击栏下方（锚点，只占位；墨墨本体在 main 的固定层） */
.mx-play__mascot-anchor {
  width: 120px;
  height: 144px;
  margin-top: 10px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 操作栏 */

/* 2026-09-19：操作栏从右侧挪到书写格上方横排——写字时右手手掌搭在屏幕右侧会误触提交 */
.mx-play__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: 560px;
  margin-bottom: 16px;
}
.mx-play__actions .mx-btn { padding-left: 14px; padding-right: 14px; }
.mx-play__actions .mx-play__submit { order: 3; }
.mx-play__actions .mx-play__skip {
  order: 4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);   /* 底色由 base.css 的 ghost 按钮给：70% 纸色，夜晚屋顶上也读得出 */
}
.mx-play__spacer { grid-area: actions; }

/* ---------------------------------------------------------------- 存疑面板（挂在 body） */

.mx-play-judge__body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 22px;
  margin-top: 6px;
}
.mx-play-judge__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mx-play-judge__lbl { font-family: var(--font-display); font-size: 17px; color: var(--ink-soft); }
.mx-play-judge__thumb,
.mx-play-judge__target {
  width: 170px;
  height: 170px;
  border-radius: 14px;
  background: var(--paper-2);
  border: 1px solid var(--card-stroke);
  box-shadow: inset 0 1px 4px rgba(60, 50, 30, .08);
}
.mx-play-judge__thumb { padding: 10px; }
.mx-play-judge__thumb canvas { width: 100%; height: 100%; border-radius: 6px; }
.mx-play-judge__target {
  display: grid;
  place-items: center;
  font-family: var(--font-kai);
  font-size: 120px;
  line-height: 1;
  color: var(--ink);
}
.mx-play-judge__eq {
  align-self: center;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--ink-soft);
}

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

.mx-scene--play.is-reduced .mx-play__dot.is-current,
.mx-scene--play.is-reduced .mx-play__cell.is-current .mx-play__box,
.mx-scene--play.is-reduced .mx-play__sun-rays,
.mx-scene--play.is-reduced .mx-play__combo-fire,
.mx-scene--play.is-reduced .mx-play__mat::before { animation: none !important; }
.mx-scene--play.is-reduced .mx-play__padwrap.is-thinking .mx-play__mat::before { opacity: .6; }
.mx-scene--play.is-reduced .mx-play__monster.is-arrive,
.mx-scene--play.is-reduced .mx-play__cage.is-bump { animation: none !important; }
.mx-scene--play.is-reduced .mx-play__monster.is-escape { animation: none !important; opacity: 0; }

/* ---------------------------------------------------------------- 竖屏 / 窄屏：堆叠 */

@media (max-width: 900px) {
  .mx-play__top { gap: 10px; }
  .mx-play__monster { width: 84px; height: 84px; }   /* 妖怪本体尺寸由 play.js 按堆叠与否给 */
  .mx-play__main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "combo combo";
    row-gap: 18px;
    column-gap: 16px;
    justify-items: center;
  }
  .mx-play__combo { justify-self: end; flex-direction: row; align-items: center; width: auto; gap: 10px; padding: 8px 14px; }
  .mx-play__combo-label { order: 1; }
  .mx-play__combo-num { order: 2; margin-right: 6px; }
  .mx-play__gauge { order: 3; height: 88px; margin: 0; }
  .mx-play__combo-fire { order: 4; }
  /* 竖屏连击条里塞不下墨墨：锚点收起，play.js 让它站到画面左下的草地上 */
  .mx-play__mascot-anchor { display: none; }
  .mx-play__actions { max-width: 100%; }
  .mx-play__spacer { display: none; }
  .mx-play__sentence-text { font-size: 26px; }
  .mx-play__cell { --mx-play-cell: 50px; }
}

/* 纸的角落装饰：铺满书写格、在画布之下、不接收触摸 */
.mx-play__decor { position: absolute; inset: var(--mx-play-mat); border-radius: 8px; overflow: hidden; pointer-events: none; }
.mx-play__decor svg { position: absolute; inset: 0; width: 100%; height: 100%; }