/* M06 · 甜甜消消乐 —— 模块私有样式（类名统一 .m06- 前缀，颜色只用令牌） */

.m06-stage {
  --module-color: var(--c-lemon);
  --module-color-soft: color-mix(in srgb, var(--c-lemon) 18%, var(--c-cream-50));
  background: var(--module-color-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--c-ink-900);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- HUD ---------- */
.m06-hud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-14);
  color: var(--c-ink-700);
}

.m06-score-num,
.m06-clock-num {
  font-family: var(--font-num);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  color: var(--c-rose-700);
  display: inline-block;
}

.m06-clock-num { color: var(--c-ink-900); }

.m06-score-num.is-bump { animation: m06-bump var(--dur-base) var(--ease-spring); }

@keyframes m06-bump {
  50% { transform: scale(1.12); }
}

.m06-stage.is-urgent .m06-clock-num {
  color: var(--c-danger);
  animation: m06-pulse 1s var(--ease-in-out) infinite;
}

@keyframes m06-pulse {
  50% { opacity: 0.45; }
}

/* ---------- 计时条 ---------- */
.m06-timer {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--c-rose-100);
  overflow: hidden;
}

.m06-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-rose-300), var(--c-rose-500));
  transition: width var(--dur-slow) var(--ease-out);
  will-change: width;
}

/* ---------- 棋盘 ---------- */
.m06-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: var(--sp-2);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  touch-action: none;
}

.m06-tile {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-family: var(--font-emoji);
  font-size: clamp(14px, 4.4vw, 26px);
  line-height: 1;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.m06-tile.is-selected {
  transform: scale(0.86);
  background: color-mix(in srgb, var(--module-color) 46%, var(--surface-1));
  box-shadow: var(--glow-rose);
}

.m06-tile.is-match { animation: m06-pop var(--dur-base) var(--ease-out) forwards; }

@keyframes m06-pop {
  60% { transform: scale(1.2); }
  to { transform: scale(0.2); opacity: 0; }
}

.m06-tile.is-bad { animation: m06-bad var(--dur-fast) var(--ease-in-out); }

@keyframes m06-bad {
  25% { transform: scale(0.9) rotate(-4deg); }
  75% { transform: scale(0.9) rotate(4deg); }
}

/* ---------- 连锁提示 ---------- */
.m06-chain {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-rose-600);
  text-align: center;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 360px) {
  .m06-stage { padding: var(--sp-3); }
  .m06-board { gap: 3px; }
}

[data-reduce-motion="1"] .m06-tile.is-match {
  animation-duration: var(--dur-fast) !important;
}