/* home.css —— 「小屋」场景样式（DESIGN.md §2.1，v2 §6.2 捉妖怪）
 * 只作用于 .mx-scene--home 之下；家长算术题弹窗由 ui.modal 挂到 body，用 .mx-home-gate 前缀限定。
 * 颜色、字体、缓动、噪点全部取 tokens.css 的变量；按钮 / HUD / 小红点复用 base.css；妖怪本体在 monsters.css。
 * 舞台上：草地（.mx-home__meadow，野生妖怪各占一个站位踱步）、存钱罐（左下）、妖怪笼（罐子右边）。
 */

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

/* ---------------------------------------------------------------- 顶部：HUD + 齿轮 */

.mx-home__top { display: flex; align-items: center; gap: 12px; }
.mx-home__top > .mx-hud { flex: 1 1 auto; min-width: 0; }

/* 齿轮：家长入口。外圈进度环随长按时间画满，图标同时慢慢转 */
.mx-home__gear {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: color-mix(in srgb, var(--paper) 88%, transparent);   /* 与 .mx-glass 同一浓度 */
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  color: var(--ink-soft);
  box-shadow: 0 6px 20px rgba(60, 50, 30, .10), inset 0 1px 0 rgba(255, 255, 255, .65);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out);
}
.mx-home__gear:active, .mx-home__gear.is-pressing {
  transform: scale(.96);
  box-shadow: 0 3px 8px rgba(60, 50, 30, .08), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.mx-home__gear:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 3px; }
.mx-home__gear-icon { position: absolute; inset: 0; display: grid; place-items: center; }
.mx-home__gear-icon svg { width: 26px; height: 26px; transition: transform 300ms var(--ease-out); }
.mx-home__gear.is-pressing .mx-home__gear-icon svg {
  transform: rotate(120deg);
  transition: transform 2s linear;
}
.mx-home__gear-ring {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.mx-home__gear-ring circle {
  fill: none;
  stroke: var(--sky-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 163.4;           /* 2π × 26 */
  stroke-dashoffset: 163.4;
  opacity: 0;
}
.mx-home__gear.is-pressing .mx-home__gear-ring circle {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s linear, opacity 150ms var(--ease-out);
}

/* ---------------------------------------------------------------- 中央舞台 */

.mx-home__stage {
  position: relative;
  overflow: visible;                 /* 舞台本身不滚动：墨墨在 body 的固定层里，锚点只占位 */
  min-height: 200px;
}

/* 墨墨的站位锚点：小屋前的草地。墨墨层通过 mascot.moveTo(anchor, {side:'right'}) 站到它右边 */
.mx-home__anchor {
  position: absolute;
  left: 34%;
  bottom: 3%;
  width: 40px;
  height: 120px;
  pointer-events: none;
}

/* 存钱罐：挂在左侧树上的小灯笼罐，左下角 */
.mx-home__bank {
  position: absolute;
  left: clamp(8px, 4vw, 56px);
  bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 132px;
  color: var(--ink);
  font-family: var(--font-display);
  transform-origin: 50% 0;
  transition: transform 100ms var(--ease-out);
  -webkit-touch-callout: none;
}
.mx-home__bank:active:not(:disabled) { transform: scale(.96); }
.mx-home__bank:disabled { cursor: default; }
.mx-home__bank:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 6px; border-radius: var(--radius-lg); }

.mx-home__bank-svg {
  width: 100px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(60, 50, 30, .18));
  transform-origin: 50% 0;
  animation: mx-home-sway 4s ease-in-out infinite;
}
@keyframes mx-home-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
.mx-home__bank-svg .string { stroke: var(--wood-dark); stroke-width: 3; stroke-linecap: round; fill: none; }
.mx-home__bank-svg .lid { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 2.5; stroke-linejoin: round; }
.mx-home__bank-svg .slot { fill: var(--wood-dark); }
.mx-home__bank-svg .jar {
  fill: color-mix(in srgb, var(--paper) 78%, transparent);
  stroke: var(--wood-dark);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.mx-home__bank-svg .jar-shine { stroke: rgba(255, 255, 255, .9); stroke-width: 4; stroke-linecap: round; fill: none; }
.mx-home__bank-svg .coin { fill: var(--gold-2); stroke: color-mix(in srgb, var(--gold), var(--wood-dark) 35%); stroke-width: 2; }
.mx-home__bank-svg .glow { fill: var(--gold-2); opacity: .45; mix-blend-mode: multiply; filter: blur(10px); }
.mx-home__bank-svg .coins, .mx-home__bank-svg .glow { transition: opacity 300ms var(--ease-out); }
.mx-home__bank.is-empty .mx-home__bank-svg .coins { opacity: .18; }
.mx-home__bank.is-empty .mx-home__bank-svg .glow { opacity: 0; }

.mx-home__bank-count {
  margin-top: 6px;
  padding: 2px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: 0 1px 0 var(--card-stroke);
  font-size: 22px;
  line-height: 1.3;
  color: var(--gold-text);                 /* 与 HUD 金币数同色（掺 40% 墨只有 3.5:1） */
}
.mx-home__bank-count { display: inline-flex; align-items: center; gap: 4px; }
.mx-home__bank-coin { display: inline-flex; width: 20px; height: 20px; color: var(--gold); }
.mx-home__bank-coin svg { width: 100%; height: 100%; }
.mx-home__bank.is-empty .mx-home__bank-count { color: var(--ink-soft); }
/* 说明药丸：直接写在山丘上白天勉强、夜晚看不见，垫一层纸 */
.mx-home__bank-hint {
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mx-home__bank-dot { top: 6px; right: 14px; width: 16px; height: 16px; }

/* 收取：罐子弹一下 */
.mx-home__bank.is-collecting .mx-home__bank-svg { animation: mx-home-jar-pop 500ms var(--ease-bounce); }
@keyframes mx-home-jar-pop {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.12) rotate(-5deg); }
  70% { transform: scale(.97) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------------------------------------------------------------- 妖怪笼：存钱罐右边的木笼子（§6.2） */

.mx-home__cage {
  position: absolute;
  left: calc(clamp(8px, 4vw, 56px) + 148px);
  bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 132px;
  color: var(--ink);
  font-family: var(--font-display);
  transition: transform 100ms var(--ease-out);
  -webkit-touch-callout: none;
}
.mx-home__cage:active { transform: scale(.96); }
.mx-home__cage:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 6px; border-radius: var(--radius-lg); }
.mx-home__cage-svg {
  position: relative;
  z-index: 1;
  width: 96px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(60, 50, 30, .18));
}
.mx-home__cage-svg .ring { fill: none; stroke: var(--wood-dark); stroke-width: 4; stroke-linecap: round; }
.mx-home__cage-svg .dome {
  fill: color-mix(in srgb, var(--paper) 10%, transparent);   /* 玻璃罩只留一点点：里面那只睡着的妖怪要看得见（它画在罩子后面） */
  stroke: var(--wood);
  stroke-width: 4;
  stroke-linejoin: round;
}
.mx-home__cage-svg .bar { fill: none; stroke: var(--wood); stroke-width: 4; stroke-linecap: round; }
.mx-home__cage-svg .beam { fill: none; stroke: var(--wood-dark); stroke-width: 5; stroke-linecap: round; }
.mx-home__cage-svg .base { fill: var(--wood-dark); }
/* 笼子里露出的那只：栏杆后面，睡着了（圆顶是四成纸色，压在妖怪上会把它洗淡：妖怪本身不再降透明度，尺寸也放大到 56px） */
.mx-home__cage-inner {
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.mx-home__cage-inner .mx-monster-host { display: block; filter: drop-shadow(0 2px 3px rgba(60, 50, 30, .3)); }
/* 笼子里面暗一点：浅色的妖怪压在浅绿山丘上没有轮廓，垫一团木色的阴影它才显出来 */
.mx-home__cage-inner::before {
  content: '';
  position: absolute;
  inset: 6px -8px -4px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wood-dark) 30%, transparent), transparent);
}
.mx-home__cage-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: 0 1px 0 var(--card-stroke);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
}
.mx-home__cage-part .mx-num { font-size: 18px; color: var(--ok-text); }
.mx-home__cage-part--wild .mx-num { color: var(--coral-text); }
.mx-home__cage-sep { color: var(--ink-soft); }
.mx-home__cage.is-empty .mx-home__cage-part:first-child .mx-num { color: var(--ink-soft); }

/* ---------------------------------------------------------------- 草地上的野生妖怪（§6.2） */

/* 草地铺满舞台，本身不接事件；每只妖怪一个站位（--wx / --wy，按舞台宽高的百分比），慢慢左右踱步 */
.mx-home__meadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mx-home__wild {
  --wx: 50%;
  --wy: 4%;
  --pace: 7s;
  --pace-px: 18px;
  position: absolute;
  left: var(--wx);
  bottom: var(--wy);
  padding: 0;
  line-height: 0;
  pointer-events: auto;
  animation: mx-home-pace var(--pace) ease-in-out infinite alternate;
  -webkit-touch-callout: none;
}
.mx-home__wild:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 4px; border-radius: 50%; }
.mx-home__wild-monster { display: block; filter: drop-shadow(0 4px 6px rgba(60, 50, 30, .16)); }
@keyframes mx-home-pace {
  from { transform: translateX(calc(var(--pace-px) * -1)); }
  to   { transform: translateX(var(--pace-px)); }
}
/* 五个站位：横屏——树与墨墨之间一只、墨墨与小屋之间一只、小屋门前的草地上一只（x≈57% 不与屋体 65%–91% 相交，
   --wy 为负是踩在前景草地上，不贴墙）、小屋右边一只、前景草地左角一只 */
.mx-home__wild--1 { --wx: 27%; --wy: 15%; --pace: 7.5s; --pace-px: 14px; }
.mx-home__wild--2 { --wx: 55%; --wy: 13%; --pace: 8.5s; --pace-px: 20px; animation-delay: -3s; }
.mx-home__wild--3 { --wx: 57%; --wy: -4%; --pace: 6.5s; --pace-px: 16px; animation-delay: -1.5s; }
.mx-home__wild--4 { --wx: 89%; --wy: 7%; --pace: 9s; --pace-px: 18px; animation-delay: -5s; }
.mx-home__wild--5 { --wx: 3%; --wy: -14%; --pace: 7s; --pace-px: 12px; animation-delay: -2.2s; }   /* 前景草地，商店按钮左边 */
/* 拼音气泡：点一下冒出来，只给读音不给字形 */
.mx-home__wild-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translate(-50%, 6px) scale(.9);
  padding: 4px 12px;
  border-radius: 999px 999px 999px 6px;
  background: var(--paper);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-bounce);
}
.mx-home__wild-bubble.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------------------------------------------------------------- 底部三大按钮 */

.mx-home__dock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 5vw, 72px);
  padding-top: 6px;
}
.mx-home__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 132px;                 /* 固定宽度：说明药丸再长也不挤动旁边两颗 */
}
.mx-home__slot--start { flex-basis: 250px; margin-top: -14px; }   /* 主按钮更大，略微上提让三颗底部对齐 */
.mx-home__slot--math { flex-basis: 200px; margin-top: -6px; }
.mx-home__slot[hidden] { display: none; }

/* 圆按钮：纸面 + 噪点 + 顶部高光 + 2px 更深的底边（软糖） */
.mx-home__big {
  --big-bg: var(--paper-2);
  --big-fg: var(--ink);
  --big-edge: color-mix(in srgb, var(--paper-2), var(--wood-dark) 26%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 118px;
  height: 118px;
  border: 1px solid var(--card-stroke);
  border-radius: 50%;
  background-color: var(--big-bg);
  background-image: var(--paper-noise);
  color: var(--big-fg);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 3px 0 var(--big-edge), var(--shadow);
  transition: transform 100ms var(--ease-out), box-shadow 100ms var(--ease-out), filter 200ms var(--ease-out);
  -webkit-touch-callout: none;
}
.mx-home__big::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 6%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.mx-home__big:active:not(.is-disabled) {
  transform: translateY(1px) scale(.96);
  box-shadow: 0 1px 0 var(--big-edge), 0 4px 12px rgba(60, 50, 30, .08);
}
.mx-home__big:focus-visible { outline: 3px solid var(--sky-accent); outline-offset: 4px; }
.mx-home__big-icon { display: block; width: 42px; height: 42px; position: relative; }
.mx-home__big-icon svg { width: 100%; height: 100%; }
.mx-home__big-label { position: relative; display: block; }
.mx-home__big-dot { top: 10px; right: 12px; width: 16px; height: 16px; }

.mx-home__big--primary {
  --big-bg: var(--coral-deep);              /* 白字压纯珊瑚只有 2.99:1 */
  --big-fg: #fff;
  --big-edge: color-mix(in srgb, var(--coral), var(--ink) 26%);
  width: 160px;
  height: 160px;
  gap: 8px;
  font-size: 27px;
  border-color: rgba(120, 40, 20, .18);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  box-shadow: 0 3px 0 var(--big-edge), 0 12px 30px color-mix(in srgb, var(--coral) 34%, transparent), var(--shadow);
}
.mx-home__big--primary::after { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); }
.mx-home__big--primary .mx-home__big-icon { width: 56px; height: 56px; }
/* 口算妖怪：比默写小一号的第二主按钮，木牌色 */
.mx-home__big--math {
  --big-bg: color-mix(in srgb, var(--gold-2) 55%, var(--paper-2));
  --big-edge: color-mix(in srgb, var(--gold) 70%, var(--wood-dark));
  width: 150px;
  height: 150px;
  font-size: 22px;
}
.mx-home__big--math .mx-home__big-icon { width: 50px; height: 50px; }
.mx-home__big-icon--math svg { width: 100%; height: 100%; }
.mx-home__big-icon--net svg { width: 100%; height: 100%; transform: rotate(-8deg); }

/* 体力 0：「睡着了」——珊瑚色褪成淡淡的暖粉纸，不是冷灰；不可点（用 aria-disabled，点一下还能让墨墨提醒） */
.mx-home__big.is-disabled {
  --big-bg: color-mix(in srgb, var(--coral) 28%, var(--paper-2));
  --big-fg: var(--ink-soft);
  --big-edge: color-mix(in srgb, var(--coral) 40%, var(--wood-dark));
  cursor: not-allowed;
  text-shadow: none;
  box-shadow: 0 3px 0 var(--big-edge), 0 6px 16px rgba(60, 50, 30, .08);
}
.mx-home__big.is-disabled::after { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }

/* 主按钮下方的说明药丸 */
.mx-home__sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: 0 1px 0 var(--card-stroke);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.mx-home__sub.is-muted { color: var(--ink-soft); }
.mx-home__sub.is-countdown { color: var(--coral-text); }
.mx-home__sub-icon { display: inline-flex; width: 18px; height: 18px; }
.mx-home__sub-icon svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- 首次引导：透明点击层 + 墨墨身旁的提示 */

.mx-home__onboard {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
/* 提示药丸挂在墨墨气泡的右下角外侧（位置由 home.js 按 mascot.bubbleRect() 算出，写进 --mx-hint-x / --mx-hint-y）；
   只做明暗呼吸，不上下晃——墨墨自己在呼吸起伏，两个东西各晃各的会显得不安分 */
.mx-home__onboard-hint {
  position: absolute;
  left: var(--mx-hint-x, 50%);
  top: var(--mx-hint-y, 50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-soft);
  animation: mx-home-pulse 2.2s ease-in-out infinite;
}
.mx-home__onboard-icon { display: inline-flex; width: 20px; height: 20px; color: var(--coral); }
.mx-home__onboard-icon svg { width: 100%; height: 100%; }
@keyframes mx-home-pulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

/* ---------------------------------------------------------------- 家长入口：算术题（挂在 body 的 modal 内） */

.mx-home-gate { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mx-home-gate__q {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--ink);
}
.mx-home-gate__input {
  width: 168px;
  height: 58px;
  padding: 0 16px;
  border: 2px solid var(--card-stroke);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px;
  text-align: center;
  outline: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.mx-home-gate__input:focus {
  border-color: var(--sky-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky-accent) 28%, transparent);
}
.mx-home-gate__input::-webkit-outer-spin-button,
.mx-home-gate__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-home-gate__hint { min-height: 24px; font-size: 16px; color: var(--warn-text); }
.mx-home-gate.is-wrong .mx-home-gate__input { border-color: var(--bad); animation: mx-shake 300ms ease-in-out both; }

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

@media (max-width: 900px), (orientation: portrait) {
  /* 竖屏：小屋退到右上方的山上（bg.css），墨墨站到它前方偏左的草地上（右边不碰墙，左边不碰树） */
  .mx-home__anchor { left: 30%; bottom: 14%; }
  .mx-home__bank { width: 116px; }
  .mx-home__bank-svg { width: 88px; }
  .mx-home__cage { left: calc(clamp(8px, 4vw, 56px) + 150px); width: 116px; }
  .mx-home__cage-svg { width: 84px; }
  .mx-home__cage-inner { top: 34px; }
  .mx-home__cage-count { font-size: 14px; padding: 2px 10px; }
  .mx-home__cage-part .mx-num { font-size: 16px; }
  /* 竖屏的站位：小屋占了右下角，妖怪散在远山、墨墨脚边和前景草地的两角；第 5 只没地方站，藏起来 */
  /* 竖屏：远山上的那只按透视缩小（再往下就踩到存钱罐了）；一只站在墨墨与小屋之间的草坡上、两只在小屋前后的前景草地，
     都离开按钮行，也不压存钱罐 / 笼子的标签 */
  .mx-home__wild--1 { --wx: 8%; --wy: 30%; }
  .mx-home__wild--1 .mx-home__wild-monster { transform: scale(.75); transform-origin: 50% 100%; }
  .mx-home__wild--2 { --wx: 54%; --wy: 14%; }
  .mx-home__wild--3 { --wx: 87%; --wy: 3%; }
  .mx-home__wild--4 { --wx: 62%; --wy: 5%; }
  .mx-home__wild--5 { display: none; }
  .mx-home__dock { gap: clamp(12px, 4vw, 40px); }
  .mx-home__big { width: 104px; height: 104px; font-size: 18px; }
  .mx-home__big--primary { width: 140px; height: 140px; font-size: 24px; }
  .mx-home__big--math { width: 120px; height: 120px; font-size: 19px; }
  .mx-home__slot--math { flex-basis: 150px; }
  .mx-home__sub { font-size: 16px; }
}

/* ---------------------------------------------------------------- 减少动效 */

@media (prefers-reduced-motion: reduce) {
  .mx-scene--home .mx-home__bank-svg,
  .mx-scene--home .mx-home__wild,
  .mx-scene--home .mx-home__onboard-hint { animation: none; }
  .mx-scene--home .mx-home__gear.is-pressing .mx-home__gear-icon svg { transition: none; }
}

/* 徽章：金色大圆钮（首页主元素之一），活动期间挂「限定」小旗 */
.mx-home__big--badges {
  --big-bg: #ffe39a;
  --big-fg: #6b4200;
  --big-edge: #c9941d;
  background-image: radial-gradient(circle at 35% 28%, #fff6cf, #ffd966 45%, #f0b93a), var(--paper-noise);
}
.mx-home__big-icon--medal svg { width: 40px; height: 40px; }
.mx-home__big-flag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px;
  background: #d8382c; color: #ffe7a0; font-size: 13px; letter-spacing: .05em; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(120, 30, 20, .35); animation: mx-home-flag 1.8s ease-in-out infinite;
}
@keyframes mx-home-flag { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg) translateY(-2px); } }
/* 竖屏 / 窄屏：五颗按钮挤一挤；说明药丸不许撑宽格子（否则两头的按钮被挤出屏幕），太长就折成两行 */
@media (max-width: 900px), (orientation: portrait) {
  .mx-home__dock { gap: clamp(8px, 2.4vw, 28px); }
  .mx-home__slot { flex-basis: 104px; min-width: 0; }
  .mx-home__slot--start { flex-basis: 150px; }
  .mx-home__slot--math { flex-basis: 124px; }
  .mx-home__sub { max-width: calc(100% + 28px); padding: 4px 10px; font-size: 15px; border-radius: 14px; white-space: normal; text-align: center; justify-content: center; }
}