/* ============================================================
   快读模式 · 字母流利度练习
   ------------------------------------------------------------
   两个子模式共用一张网格：
   - 齐读：按节拍自动逐个点亮，全班跟着读
   - 计时：一个孩子读，老师点一下推进一个，最后算「每分钟正确字母数」
   网格是乱序的，且洗牌时避开了 ABC 连号和 b/d 这类形近相邻，
   否则孩子会顺着背而不是逐个认。
   ============================================================ */

.drill { padding: var(--sp-3) var(--sp-5) var(--sp-4); gap: var(--sp-3); }

/* ---------- 控制条 ---------- */
.dbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 14px;
  background: var(--c-card); border-radius: var(--r-full);
  box-shadow: var(--sh-card);
}
.dbar__spacer { flex: 1 1 auto; }

.dstat { display: flex; align-items: baseline; gap: 5px; padding: 0 12px; }
.dstat__v {
  font-family: var(--font-en); font-size: 30px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dstat__k { font-size: 12px; color: var(--c-ink-soft); }

.speed { display: flex; align-items: center; gap: 4px; }
.speed__b {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-cream-2); font-size: 20px; font-weight: 900; color: var(--c-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.speed__b:active { transform: scale(.9); }
.speed__v { font-family: var(--font-en); font-size: 17px; font-weight: 800; min-width: 46px; text-align: center; }

/* ---------- 网格 ---------- */
.dgrid {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap;
  align-content: center; justify-content: center;
  gap: var(--dgap, 12px);
  min-height: 0;
}

.dcell {
  position: relative;
  width: var(--dw, 130px); height: var(--dh, 120px);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-bounce);
}
.dcell img {
  height: 84%; width: auto; max-width: 88%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(122, 92, 70, .14));
  transition: transform var(--t-mid) var(--ease-bounce), filter var(--t-mid);
}

/* 已经读过的：淡下去，让孩子一眼看到读到哪儿了 */
.dcell[data-s="done"] img { opacity: .26; filter: grayscale(.5); }
.dcell[data-s="miss"] img { opacity: .3; filter: grayscale(1); }
.dcell[data-s="miss"]::after {
  content: ""; position: absolute; inset: 22%;
  border-radius: 50%; border: 4px solid var(--c-wrong);
  opacity: .55;
}

/* 当前这一个：大、亮、带光圈 */
.dcell[data-s="now"] {
  background: var(--c-card);
  box-shadow: 0 0 0 5px var(--tone-base), 0 8px 0 var(--tone-line), 0 18px 34px rgba(122, 92, 70, .2);
  z-index: 3;
}
.dcell[data-s="now"] img { transform: scale(1.16); }
.dcell[data-s="now"]::before {
  content: ""; position: absolute; inset: -10px;
  border-radius: var(--r-lg);
  border: 3px solid var(--tone-base);
  opacity: .45;
  animation: dpulse 1.1s var(--ease-out) infinite;
}
@keyframes dpulse {
  0%, 100% { transform: scale(1); opacity: .45; }
  50%      { transform: scale(1.06); opacity: .1; }
}

/* ---------- 进度带 ---------- */
.dbarline { flex: 0 0 auto; height: 10px; border-radius: var(--r-full); background: var(--c-cream-2); overflow: hidden; }
.dbarline__f {
  height: 100%; width: 0%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-mint), var(--c-sky), var(--c-grape));
  transition: width .2s linear;
}

/* ---------- 结果 ---------- */
.dres { text-align: center; }
.dres__big {
  font-family: var(--font-en); font-size: 104px; font-weight: 900; line-height: 1;
  color: var(--c-sky-deep);
}
.dres__unit { font-size: 15px; color: var(--c-ink-soft); margin-top: 4px; }

/* 计时模式：这一轮是谁在读 */
.dwho { gap: 8px; }
.dwho[data-set="false"] { color: var(--c-ink-soft); }
.dwho[data-set="true"]  { background: var(--c-mint); color: #fff; box-shadow: 0 3px 0 var(--c-mint-deep); }
.dwho .ava { box-shadow: none; }