/* ============================================================
   课堂练习（按课学习里的五个小游戏）· drill.css

   五个玩法共用一套外壳（顶栏 → 听音条 → 舞台 → 反馈条）：
     🐹 打地鼠   —— 本课声母：听读音，打中举着它的那只小地鼠
     🧱 拼音方块 —— 本课韵母四个声调：听读音，点掉下来的那个方块
     🐍 贪吃蛇   —— 本课整体认读音节：点对后小蛇游过去吃掉，身子长一截
     🍉 切水果   —— 本课音节词：听读音，在水果掉下去之前把那个音节切开
     🎣 钓鱼     —— 本课拼读：听读音，钓到写得对的那条小鱼
   只有「出场方式」和「打中反馈」不同，其余全一样 —— 一年级不用重新学一遍界面。

   规则（孩子一眼能懂的那种）：连对 5 题就过关；速度一题比一题快（由慢到快）；
   答错或时间到就结束这一轮；只要不倒，就一直玩下去。
   ============================================================ */

/* ---------- 入口：挂在四个小节标题右边的一颗键 ---------- */
.ls-h3row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; margin-bottom: 10px;
}
.ls-h3row .ls-h3 { margin-bottom: 0; }
.ls-drill {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font); font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #5eb6ff, #7c6bff);
  border: none; border-radius: 999px; padding: 7px 13px; min-height: 34px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 0 #3f6ee0, 0 6px 14px rgba(74, 120, 255, .26);
}
.ls-drill:hover { filter: brightness(1.05); }
.ls-drill:active { transform: translateY(2px); box-shadow: 0 1px 0 #3f6ee0; }
.ls-drill-sub { font-weight: 700; opacity: .92; }
/* 手机：标题自己占一行，按钮靠右最多到第二行；「· 打地鼠」这半句收起来，
   只留「🐹 课堂练习」——屏幕窄，四个字够了 */
@media (max-width: 639px) {
  .ls-drill-sub { display: none; }
  .ls-drill { margin-left: auto; }
}

/* ---------- 外壳 ---------- */
body.dr-lock { overflow: hidden; }
.dr-mask {
  position: fixed; inset: 0; z-index: 250;         /* 压住手机底部 Tab，但低于护眼提示(260) */
  background: rgba(18, 42, 70, .52);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.dr-wrap {
  width: min(760px, 100%); height: min(78vh, 640px);
  /* 不透明：这一层要是半透明，底下的课文和全屏 ✓ 会透上来，游戏就成糊的了 */
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
  display: flex; flex-direction: column;
  animation: drPop .3s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes drPop {
  0% { transform: scale(.92) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
/* 单机窗口顶栏：两列网格。
   第一行 = 左组（标题 + 连对）| 结束 ✕ 贴最右；第二行 = 「⚔️ PK 模式」跨两列居中。
   老师点名要这个摆法：PK 入口在中间、一眼看到；✕ 缩在边上，不容易误点。
   （历史教训：早先用绝对定位把 PK 按钮钉在正中，会压住「🔥 连对」，
     所以现在全靠网格的自然流排布，谁都挡不住谁。） */
.dr-bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px 8px; padding: 9px 12px; border-bottom: 2px solid var(--line);
}
.dr-bar-l {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
.dr-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.dr-streak {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 800; color: #7a3f00;
  background: #fff4e2; border: 1.5px solid #ffd9a8;
  border-radius: 999px; padding: 3px 10px;
}
.dr-streak b { color: #d2691e; font-size: 15px; }
.dr-quit {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: var(--ink-2); background: #f2f6fb; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; min-height: 30px;
}
.dr-quit:hover { background: #e8f2fd; }
.dr-cue {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px 4px;
}
.dr-listen {
  font-family: var(--font); font-size: 13.5px; font-weight: 800; color: #1b4f86;
  background: #eaf4ff; border: 2px solid #cfe3fa; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; min-height: 36px;
}
.dr-listen:hover { background: #dcecfd; }
.dr-pace { font-size: 12.5px; font-weight: 800; color: var(--ink-2); font-style: normal; margin-left: auto; }

/* ---------- 舞台 ---------- */
.dr-stage { position: relative; flex: 1; overflow: hidden; }
.dr-field { position: absolute; inset: 0; }
/* 每个选项占一个「位子」（.dr-slot 管左右落点），出场动画只动里头的按钮，
   两者不抢 transform —— 手机换宽度时也不会歪。 */
.dr-slot { position: absolute; transform: translateX(-50%); }
.dr-opt {
  position: relative; z-index: 3;
  font-family: var(--pinyin); font-size: 30px; font-weight: 800; color: #fff;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.dr-opt .dr-lab { pointer-events: none; }
/* 长短不一的拼音（ɑ / zh / ɑng / zhuang / bā）自动缩一档，别撑出格子 */
.dr-l5 .dr-lab { font-size: 22px; }
.dr-l6 .dr-lab { font-size: 19px; }
.dr-fb {
  min-height: 30px; padding: 4px 12px 10px; text-align: center;
  font-size: 14px; font-weight: 800; color: var(--ink-2);
}
.dr-fb.on-right { color: #16694d; }
.dr-fb.on-wrong { color: #b23b3b; }
.dr-fb.on-flaw { color: #1b4f86; }   /* 答对但本题不算分：中性蓝，不误导成「得分」 */

/* 打中 / 打错：所有玩法共用同一套反馈动作，孩子一眼就懂 */
.dr-opt.on-right { animation: drRight .5s ease-out; }
@keyframes drRight {
  0% { transform: scale(1); }
  40% { transform: scale(1.22) rotate(-4deg); }
  100% { transform: scale(1); }
}
.dr-opt.on-right::after {
  content: '✓'; position: absolute; top: -10px; right: -8px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%;
  background: #3fc97b; color: #fff; font-size: 17px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dr-opt.on-wrong { animation: drWrong .38s linear 2; }
@keyframes drWrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
/* 亮出正确答案（答错 / 时间到）：绿圈慢慢呼吸，让孩子看清是哪一个 */
.dr-opt.reveal { animation: drReveal 1s ease-in-out infinite; }
@keyframes drReveal {
  0%, 100% { box-shadow: 0 0 0 3px #3fc97b, 0 6px 14px rgba(0, 0, 0, .18); }
  50% { box-shadow: 0 0 0 9px rgba(63, 201, 123, .45), 0 6px 14px rgba(0, 0, 0, .18); }
}

/* ---------- 过关横幅（连对 5 题） ---------- */
.dr-pass {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  z-index: 8; pointer-events: none; text-align: center;
  background: rgba(255, 255, 255, .96); border: 3px solid #ffd166;
  border-radius: 20px; padding: 12px 22px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
  animation: drPassIn .45s cubic-bezier(.34, 1.5, .64, 1) forwards;
}
@keyframes drPassIn {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.dr-pass-ico { font-size: 34px; line-height: 1; }
.dr-pass-t { font-size: 18px; font-weight: 800; color: #d2691e; margin-top: 2px; }
.dr-pass-s { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }

/* ---------- 结算页 ---------- */
.dr-res {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(255, 255, 255, .97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
}
.dr-res-ico { font-size: 46px; line-height: 1; }
.dr-res-t { font-size: 19px; font-weight: 800; color: var(--ink); }
.dr-res-s { font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.7; }
.dr-res-s b { color: #d2691e; font-size: 17px; }
.dr-res-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ============================================================
   玩法一 · 🐹 打地鼠（本课声母）
   三个土堆里冒出地鼠，每只举着一个声母；听读音，打中举对的那只。
   ============================================================ */
/* 注意：玩法前缀用的是 mask 上的类名 —— sm / ym / zt / word / pd，
   和 window.PinyinDrill 的 kind 一致；别写成玩法中文名。 */
.dr-sm .dr-field { background: linear-gradient(#d6ecfd 0%, #eaf7d8 62%, #cdeab0 100%); }
.dr-sun { position: absolute; right: 7%; top: 6%; font-size: 34px; z-index: 1; opacity: .95; }
.dr-hole { position: absolute; bottom: 16%; }
.dr-hole-in {
  position: relative; height: 140px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
/* 洞口：后面一层黑洞 + 前面一层土沿，地鼠从中间钻出来 */
.dr-hole-in::before {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 4px; height: 30px;
  background: #6f4a22; border-radius: 50%; z-index: 1;
}
.dr-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 3;
  background: radial-gradient(ellipse at 50% 0%, #b07f45 0%, #8a5f2e 70%, #754f24 100%);
  border-radius: 50% 50% 12px 12px / 70% 70% 12px 12px;
}
.dr-mole {
  position: relative; z-index: 2;
  width: 74px; height: 80px; margin-bottom: 14px;
  background: radial-gradient(circle at 50% 34%, #ffd08a 0%, #f0a94f 70%, #dd8f36 100%);
  border-radius: 50% 50% 44% 44%;
  border: 3px solid #c07a2c;
  transform: translateY(130%);
  transition: transform .26s cubic-bezier(.34, 1.5, .64, 1);
  display: flex; align-items: center; justify-content: center;
}
.dr-mole::before, .dr-mole::after {      /* 两只耳朵 */
  content: ''; position: absolute; top: -9px; width: 22px; height: 22px;
  background: #e79a44; border: 3px solid #c07a2c; border-radius: 50%;
}
.dr-mole::before { left: 4px; }
.dr-mole::after { right: 4px; }
.dr-field.up .dr-mole { transform: translateY(0); }
/* ⚠️ 打地鼠的场子里，洞槽前面还塞了 1 个太阳 + 2 朵云（js/drill.js 的 f.innerHTML），
   所以第 1 个洞槽是第 4 个子元素、第 2 个是第 5 个……
   以前照着「洞槽从 1 开始」写 2/3/4，结果 2、3 落在两朵云上（云里没有地鼠，白写），
   真正生效的只有 nth-child(4) —— 变成「第 1 只地鼠延迟 .21s，后面几只都不延迟」，
   跟「依次 0.07 / 0.14 / 0.21 错峰钻出来」正好相反。 */
.dr-field.up .dr-slot:nth-child(4) .dr-mole { transition-delay: .00s; }   /* 第 1 只洞 */
.dr-field.up .dr-slot:nth-child(5) .dr-mole { transition-delay: .07s; }
.dr-field.up .dr-slot:nth-child(6) .dr-mole { transition-delay: .14s; }
.dr-field.up .dr-slot:nth-child(7) .dr-mole { transition-delay: .21s; }
.dr-field.up .dr-slot:nth-child(8) .dr-mole { transition-delay: .28s; }   /* 第 5 只洞（第 3 题起就 5 只了） */
.dr-mole .dr-lab {
  position: relative; z-index: 3; font-size: 26px; color: #6b3f14;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.dr-hole .dr-opt { width: 100%; height: 140px; background: none; }
.dr-hole .dr-opt.on-right { animation: none; }
.dr-hole .dr-opt.on-right .dr-mole { animation: drBop .45s ease-out; }
@keyframes drBop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-16px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}
/* 打地鼠那颗✓别按整个按钮定位：按钮有一格那么宽，勾会飘到离地鼠老远。
   改成贴着地鼠（居中 50%）的右耳朵外侧。 */
.dr-hole .dr-opt.on-right::after { top: 14px; left: calc(50% + 40px); right: auto; }
.dr-hole .dr-opt.on-wrong { animation: none; }
.dr-hole .dr-opt.on-wrong .dr-mole { animation: drWrong .38s linear 2; }
.dr-hole .dr-opt.reveal .dr-mole { box-shadow: 0 0 0 5px #3fc97b; }
.dr-hole .dr-opt.reveal { animation: none; }

/* ============================================================
   玩法二 · 🧱 拼音方块（本课韵母 · 四个声调）
   方块从天上落下来，听读音，点中对的那个。
   ============================================================ */
.dr-ym .dr-field {
  background: linear-gradient(#e6f4ff 0%, #f7fbff 70%, #eaf7d8 100%);
}
.dr-cloud {
  position: absolute; font-size: 26px; opacity: .55; z-index: 1;
  animation: drDrift 9s linear infinite;
}
@keyframes drDrift {
  0% { transform: translateX(-14%); }
  100% { transform: translateX(14%); }
}
.dr-ym .dr-slot { top: 0; }
/* 落下来的匣子：位置由 .dr-slot 定（宽也是），落下由它自己的 transform 管，
   时长由 JS 按本题速度写进 transition-duration —— 越快落得越急。 */
.dr-fallbox {
  position: relative; width: 100%;
  transform: translateY(-96px);                 /* 一上来在舞台上方，看不见 */
  transition-property: transform; transition-timing-function: linear;
  transition-duration: 6000ms;                 /* 默认 6 秒（JS 按本题速度覆盖），由慢到快 */
  will-change: transform;
}
.dr-ym .dr-opt {
  width: 100%; height: 58px; border-radius: 14px;
  background: linear-gradient(#7c6bff, #5e8bff);
  box-shadow: 0 5px 0 #4a58c8, 0 8px 18px rgba(60, 70, 180, .26);
}
.dr-ym .dr-opt.g2 { background: linear-gradient(#ffb347, #ff8c42); box-shadow: 0 5px 0 #cc6a26, 0 8px 18px rgba(200, 110, 40, .26); }
.dr-ym .dr-opt.g3 { background: linear-gradient(#42c9a8, #2cc0b0); box-shadow: 0 5px 0 #1f8f83, 0 8px 18px rgba(30, 150, 130, .26); }
.dr-ground-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: repeating-linear-gradient(90deg, #b6dfa0 0 14px, #a9d892 14px 28px);
  border-top: 3px solid #8fc47a;
}

/* ============================================================
   玩法三 · 🐍 贪吃蛇（本课整体认读音节）
   草地上散落着各种吃的，小蛇在场里慢慢游来游去；
   听到哪个音节，点对后小蛇游过去把那个吃的吞掉，身子长一截。
   ============================================================ */
.dr-zt .dr-field { background: linear-gradient(#f2fce8 0%, #e4f7d6 58%, #d3eec0 100%); overflow: hidden; }
.dr-grass {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
  background: repeating-linear-gradient(90deg, #bce49f 0 16px, #aeda90 16px 32px);
  border-top: 3px solid #8ec96d;
}
/* 背景里各种吃的（装饰）：不参与答题，就是"蛇在食物堆里逛"，轻轻浮动 */
.dr-bite {
  position: absolute; z-index: 0; opacity: .3; pointer-events: none;
  animation: drBiteBob 3.4s ease-in-out infinite alternate;
  filter: saturate(.9);
}
@keyframes drBiteBob {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}
/* 小蛇：绝对定位，靠 left/top 的过渡在场里慢慢滑行；拐弯时整体偏一点角度
   （transform-origin 放在蛇头那头，身子像跟着脑袋拐）。
   ⚠ transform 要留给「拐弯」用 —— 上下浮动走独立的 translate 属性，别抢。 */
.dr-zt .dr-snake {
  position: absolute; left: 26%; top: 62%; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end;
  translate: -50% -50%;
  transform-origin: 88% 62%;
  transition: left .95s cubic-bezier(.34, .06, .3, 1), top .95s cubic-bezier(.34, .06, .3, 1),
    transform .95s ease-in-out;
  animation: drSlither 2.8s ease-in-out infinite alternate;
}
/* 换题重画的那一帧：先别过渡，让蛇「就在原地」出现，别从老地方滑过来 */
.dr-zt .dr-snake.dr-snake-init { transition: none; }
@keyframes drSlither {
  from { translate: -50% -52%; }
  to { translate: -50% -48%; }
}
.dr-zt .dr-snake::after {          /* 身下一点影子，别让蛇像飘着 */
  content: ''; position: absolute; right: 0; bottom: -6px; width: 130px; height: 10px;
  background: rgba(60, 110, 40, .16); border-radius: 50%;
}
.dr-seg {
  position: relative; z-index: 1; flex: 0 0 auto; margin-left: -5px;
  height: 26px; display: flex; align-items: center; justify-content: center;
  font-family: var(--pinyin); font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(#93dd6e, #5cb83f);
  border: 2px solid #3f9a2c; border-radius: 999px;
  box-shadow: inset -2px -3px 7px rgba(0, 0, 0, .16);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  /* 每节上下错开一点点起伏（--i 由 JS 按节序写），身子像一波一波地游。
     走 translate、不碰 transform，新节长出来的缩放动画才不打架。 */
  animation: drSegWave 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .13s);
}
@keyframes drSegWave {
  0%, 100% { translate: 0 -3px; }
  50% { translate: 0 3px; }
}
.dr-seg-new {
  animation: drSegNew .45s cubic-bezier(.34, 1.5, .64, 1),
    drSegWave 1.3s ease-in-out .45s infinite;
}
@keyframes drSegNew {
  0% { transform: scale(.25); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.dr-head {
  position: relative; z-index: 3; flex: 0 0 auto; margin-left: -4px;
  width: 40px; height: 34px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 42% 34%, #b0ea86 0%, #63c247 70%, #45a430 100%);
  border: 2.5px solid #3f9a2c;
  display: flex; align-items: center; justify-content: center;
}
.dr-head .dr-eye {
  width: 8px; height: 8px; border-radius: 50%; background: #23331a;
  margin: -8px 3px 0;
}
.dr-tongue {
  position: absolute; right: -13px; top: 42%; width: 16px; height: 4px;
  background: #ff4f74; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(180, 40, 70, .35);
  animation: drTongue 1.5s ease-in-out infinite;
}
/* 吐信子：只缩放、不调透明度 —— 调了就会和绿色蛇头糊成一团棕色 */
@keyframes drTongue {
  0%, 60% { transform: translateX(-4px) scaleX(.85); }
  82% { transform: translateX(4px) scaleX(1.18); }
  100% { transform: translateX(-4px) scaleX(.85); }
}
/* 口粮（本题的选项）：各种吃的随机散落在草地上（位置由 JS 写），离蛇不远。
   压扁成扁圆的小食（aspect-ratio 1/0.72），和蛇头差不多大，看着就是一口一个；
   z-index 5 > 蛇(4)：蛇身游过食物上方时食物永远在最上面，答案不会被挡住 */
.dr-food .dr-opt {
  position: relative; z-index: 5;
  width: 100%; max-width: 100px; aspect-ratio: 1 / 0.72; height: auto; margin: 0 auto;
  border-radius: 46%;
  background: radial-gradient(circle at 36% 30%, #ffd08a 0%, #ff9f43 72%, #ec7d16 100%);
  box-shadow: inset -5px -5px 12px rgba(0, 0, 0, .15), 0 6px 14px rgba(180, 100, 20, .24);
  animation: drFoodIn .5s cubic-bezier(.34, 1.4, .64, 1) both;
}
.dr-food .dr-opt.z2 { background: radial-gradient(circle at 36% 30%, #a9d7ff 0%, #4a9eff 74%, #2d7ade 100%); box-shadow: inset -5px -5px 12px rgba(0, 0, 0, .15), 0 6px 14px rgba(40, 90, 160, .24); }
.dr-food .dr-opt.z3 { background: radial-gradient(circle at 36% 30%, #e2b8ff 0%, #a06bff 74%, #7c46e0 100%); box-shadow: inset -5px -5px 12px rgba(0, 0, 0, .15), 0 6px 14px rgba(90, 60, 160, .24); }
.dr-food .dr-opt.z4 { background: radial-gradient(circle at 36% 30%, #ffc2d1 0%, #ff7fa5 74%, #e5507e 100%); box-shadow: inset -5px -5px 12px rgba(0, 0, 0, .15), 0 6px 14px rgba(190, 70, 110, .24); }
.dr-food .dr-opt .dr-lab { font-size: 21px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
@keyframes drFoodIn {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* 被蛇吃掉：缩着往草地上掉下去，跟着一节新身子长出来 */
.dr-food .dr-opt.eaten { animation: drEaten .44s ease-in forwards; }
@keyframes drEaten {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(.25) translateY(70px); opacity: 0; }
}

/* ============================================================
   玩法四 · 🍉 切水果（本课音节词）
   水果带着「汉字词 + 拼音」从底下抛上来 → 到顶 → 自由落回底下消失。
   落到底 = 这一题时间到，没点对就失败 —— 所以要赶在掉下去之前切开它。
   六种水果轮着出现（苹果 / 橘子 / 西瓜 / 草莓 / 柠檬 / 桃子）—— 造型、颜色都不一样。
   ============================================================ */
.dr-word .dr-field { background: linear-gradient(#fff6de 0%, #ffe9d6 55%, #ffe0ea 100%); }
.dr-word .dr-slot { bottom: 0; }          /* 水果从场地底部冒出来，落回去自然消失 */
.dr-word .dr-opt {
  width: 100%; max-width: 106px; aspect-ratio: 1 / 1; height: auto; margin: 0 auto;
  flex-direction: column;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 34% 30%, #ff8b6b 0%, #ef4b52 70%, #d13a44 100%);
  box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .16), 0 8px 16px rgba(190, 60, 60, .24);
  animation-name: drFruitArc; animation-timing-function: linear; animation-fill-mode: both;
  display: flex; align-items: center; justify-content: center;
}
/* 橘子：圆 · 橙，顶上一点小窝 */
.dr-word .dr-opt.w2 {
  background:
    radial-gradient(circle at 50% 12%, rgba(180, 100, 10, .45) 0 5px, rgba(0, 0, 0, 0) 6px),
    radial-gradient(circle at 34% 32%, #ffd97a 0%, #f9a825 72%, #dd8a06 100%);
  box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .14), 0 8px 16px rgba(190, 130, 30, .24);
}
/* 西瓜：压扁的椭圆 · 绿底深色条纹 */
.dr-word .dr-opt.w3 {
  border-radius: 50% / 42%;
  background:
    repeating-linear-gradient(96deg, rgba(0, 0, 0, 0) 0 9px, rgba(20, 90, 45, .42) 9px 17px),
    radial-gradient(circle at 34% 30%, #b7f0a5 0%, #57c785 66%, #2f9c5e 100%);
  box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .16), 0 8px 16px rgba(40, 140, 90, .24);
}
/* 草莓：上圆下尖 · 红底小籽 */
.dr-word .dr-opt.w4 {
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 30% 40%, #ffe9a8 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 64% 54%, #ffe9a8 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 44% 72%, #ffe9a8 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 36% 26%, #ff8b6b 0%, #e8394a 74%, #c62b3c 100%);
}
/* 柠檬：两头尖 · 黄（字要用深色，浅底上白字看不清） */
.dr-word .dr-opt.w5 {
  border-radius: 50% 18% 50% 18%;
  background: radial-gradient(circle at 34% 30%, #fff3a8 0%, #f7d54a 70%, #dcae16 100%);
  box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .12), 0 8px 16px rgba(180, 150, 20, .24);
}
/* 桃子：上圆下收 · 粉，中间一道缝 */
.dr-word .dr-opt.w6 {
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 47%, rgba(200, 80, 110, .35) 50%, rgba(255, 255, 255, 0) 53%),
    radial-gradient(circle at 34% 30%, #ffd7e0 0%, #ff9bb5 70%, #f2708f 100%);
}
.dr-word .dr-opt .dr-lab { color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); font-size: 28px; }
/* 音节词卡：上面拼音、下面汉字 */
.dr-word .dr-opt .dr-py {
  font-family: var(--pinyin); font-size: 15px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .34); line-height: 1.1;
}
.dr-word .dr-opt .dr-hz {
  font-size: 25px; font-weight: 900; color: #fff; line-height: 1.1;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .38);
}
.dr-word .dr-opt.w5 .dr-lab, .dr-word .dr-opt.w5 .dr-py, .dr-word .dr-opt.w5 .dr-hz {
  color: #7a5200; text-shadow: 0 1px 3px rgba(255, 255, 255, .7);
}
/* 抛一整趟：0% 从底下冒出 → 40% 到顶 → 100% 自由落回底下消失（被舞台裁掉）。
   时长和延迟由 JS 按答题时限写 —— 水果掉到底那一刻，正好时间到。 */
@keyframes drFruitArc {
  0% { transform: translateY(125%) rotate(-16deg); }
  40% { transform: translateY(-100%) rotate(9deg); }
  100% { transform: translateY(125%) rotate(22deg); }
}
/* 切开：先咔嚓一下定在顶部（不半路僵住、也不跟着掉下去），再两半朝两边分开 + 汁水 */
.dr-word .dr-opt.on-right { animation: none; transform: translateY(-100%) rotate(9deg); background: radial-gradient(circle at 50% 50%, #ffe6ea 0%, #ffc9d4 100%); }
.dr-word .dr-opt.on-right .dr-lab,
.dr-word .dr-opt.on-right .dr-py,
.dr-word .dr-opt.on-right .dr-hz { color: #b23b3b; text-shadow: none; }
/* 答错 / 时间到：正确答案停在顶部，绿圈呼吸，让孩子看清是哪一个 */
.dr-word .dr-opt.reveal { animation: drReveal 1s ease-in-out infinite; transform: translateY(-100%) rotate(9deg); }
.dr-word .dr-opt::before, .dr-word .dr-opt::after {
  content: ''; position: absolute; top: 46%; width: 0; height: 4px;
  background: #ff5f7e; border-radius: 3px; opacity: 0;
}
.dr-word .dr-opt.on-right::before { opacity: 1; animation: drJuiceL .5s ease-out forwards; }
.dr-word .dr-opt.on-right::after { opacity: 1; animation: drJuiceR .5s ease-out forwards; }
@keyframes drJuiceL { 0% { width: 0; left: 50%; } 100% { width: 42%; left: 2%; } }
@keyframes drJuiceR { 0% { width: 0; left: 50%; } 100% { width: 42%; left: 56%; } }

/* ============================================================
   玩法五 · 🎣 钓鱼（本课拼读）
   左岸站着个小朋友，举着竹竿把线垂进池塘；
   小鱼带着音节游来游去（左右游 + 上下浮沉），听读音，点中写得对的那条，
   钓线会伸过去把它拉上来。
   ============================================================ */
.dr-pd .dr-field { background: linear-gradient(#bfe9ff 0%, #8fd6f7 60%, #5fbdea 100%); overflow: hidden; }
/* 岸：场地上沿一条草地，小朋友站在上面钓鱼，鱼在水里游 */
/* 岸：左上角一块圆圆的草坡小岛，小朋友站在上面钓鱼。
   只占左上一小块，鱼被钓起来可以升到水面，不会被一整条草岸挡住 */
.dr-pd .dr-field::before {
  content: ''; position: absolute; top: 0; left: 0; width: 38%; height: 20%;
  background: linear-gradient(#a9e27e, #63b34a);
  border-radius: 0 0 60% 12px; z-index: 1; pointer-events: none;
  box-shadow: inset 0 -3px 6px rgba(60, 110, 40, .18);
}
/* 草坡和水相接处一道浅色水线，草地和池塘分得清清楚楚 */
.dr-pd .dr-field .dr-bank-edge {
  content: ''; position: absolute; top: 20%; left: 0; width: 38%; height: 3px;
  background: rgba(255, 255, 255, .45); z-index: 1; pointer-events: none;
}
.dr-bubble {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); animation: drBubble 3.6s linear infinite;
}
@keyframes drBubble {
  0% { bottom: 4%; opacity: 0; }
  30% { opacity: .8; }
  100% { bottom: 92%; opacity: 0; }
}
/* 卡通小朋友：站在岸上（场地顶部），双手握着竹竿钓鱼 —— 人、竿、线一条链 */
.dr-rig {
  position: absolute; left: 8%; top: 0; width: 13%;
  z-index: 7; pointer-events: none;
  transform-origin: 24% 95%;       /* 甩竿时以脚底为轴，整个人带着竿摆一下 */
}
.dr-rig svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 答对甩竿：竿快速一摆再回正，像把线甩向那条鱼（和 .dr-line 的伸线同时发生） */
.dr-rig.dr-cast { animation: drCast .5s ease-out; }
@keyframes drCast {
  0% { transform: rotate(0); }
  28% { transform: rotate(-13deg); }
  60% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}
/* 钓线：从竿尖伸到目标鱼（一条会转的细线，位置和角度由 JS 算；末端带着小钩子） */
.dr-line {
  position: absolute; z-index: 6; height: 2.5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 6px, rgba(255, 255, 255, .45) 6px 11px);
  border-radius: 2px; transform-origin: left center;
  transition: width .34s ease-out, left .34s ease-out, top .34s ease-out, transform .34s ease-out;
}
/* 鱼钩：挂在线的末端（left:100%），线旋转时钩子跟着一起动 */
.dr-hook {
  position: absolute; left: 100%; top: 50%; width: 12px; height: 12px;
  margin: -5px 0 0 -3px; pointer-events: none;
  border-right: 2.5px solid rgba(255, 255, 255, .95);
  border-bottom: 2.5px solid rgba(255, 255, 255, .95);
  border-radius: 0 0 11px 0; transform: rotate(-45deg);
}
/* 钩住之后：钩子挪进鱼嘴里（含在嘴巴上，跟着鱼一起被拉起来、转角度也不脱钩） */
.dr-pd .dr-opt .dr-hook {
  position: absolute; left: auto; right: 1%; top: 36%;
  margin: 0; width: 12px; height: 12px; z-index: 3;
  transform: rotate(40deg);
}
/* 岸边小桶：答对的鱼一条条丢进来，越攒越多 */
.dr-bucket {
  position: absolute; left: 30%; top: 4%; width: 10%; min-width: 56px;
  z-index: 8; pointer-events: none;
}
.dr-bucket svg { display: block; width: 100%; height: auto; overflow: visible; }
.dr-bucket-fish { position: absolute; left: 12%; right: 12%; top: 14%; bottom: 18%; overflow: hidden; }
.dr-bfish {
  position: absolute; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(60, 30, 0, .35));
  animation: drBpop .4s ease-out;
}
.dr-bfish svg { width: 21px; height: auto; display: block; }
@keyframes drBpop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
/* 小鱼：横着的椭圆身子 + 鳞纹 + 背鳍 + 双叉尾巴 + 眼睛 —— 比圆球更像鱼 */
.dr-pd .dr-opt {
  width: 100%; max-width: 118px; aspect-ratio: 1.8 / 1; height: auto; margin: 0 auto;
  border-radius: 50% / 44%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .30) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 64% 60%, rgba(255, 255, 255, .24) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 42% 74%, rgba(255, 255, 255, .20) 0 3px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(#ffb06b, #f5803c);
  box-shadow: 0 6px 14px rgba(150, 80, 20, .26);
  display: flex; align-items: center; justify-content: center;
}
/* 横穿时上下浮沉：用 translate 属性单独走，不抢 transform（给镜像和钓起留位置） */
.dr-pd .dr-opt { animation: drBob 2.3s ease-in-out infinite alternate; }
@keyframes drBob {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}
/* 鱼从场地外的一边游到另一边 = 这一题的答题时间。
   固定从左往右游（右→左时音节会镜像成反的，一年级看着乱）；
   时长、延迟由 JS 内联给 */
/* ⚠️ 保留 !important：曾修过「宽屏 :active 顶掉居中 translate 导致按钮跳位、点不动」，
   去掉后鱼槽会偏离中线，别删。 */
.dr-pd .dr-slot {
  left: 50% !important;
  animation-name: drCrossL; animation-timing-function: linear;
  animation-fill-mode: both; animation-iteration-count: 1;
}
.dr-pd .dr-slot.dr-hooked { animation: none; }
@keyframes drCrossL {
  from { transform: translate(-50%, 0) translateX(calc(var(--dx, 400%) * -1)); }
  to   { transform: translate(-50%, 0) translateX(var(--dx, 400%)); }
}
.dr-pd .dr-opt.f2 {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .32) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 64% 60%, rgba(255, 255, 255, .26) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 42% 74%, rgba(255, 255, 255, .22) 0 3px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(#8fd3ff, #4a9eff);
  box-shadow: 0 6px 14px rgba(40, 90, 160, .26);
}
.dr-pd .dr-opt.f3 {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .32) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 64% 60%, rgba(255, 255, 255, .26) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 42% 74%, rgba(255, 255, 255, .22) 0 3px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(#c9a6ff, #a06bff);
  box-shadow: 0 6px 14px rgba(90, 60, 160, .26);
}
.dr-pd .dr-opt .dr-lab { font-size: 24px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .26); }
/* 背鳍：立在鱼背上的小三角（颜色随鱼身走） */
.dr-pd .dr-opt .dr-fin {
  position: absolute; left: 34%; top: -20%; width: 26%; height: 40%;
  background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 4px; opacity: .92;
}
/* 尾巴：双叉鱼尾，比原来那块三角更像会划水的 */
.dr-pd .dr-opt::before {
  content: ''; position: absolute; left: -22%; top: 18%;
  width: 30%; height: 68%; background: inherit;
  clip-path: polygon(100% 0, 100% 100%, 50% 70%, 28% 100%, 0 76%, 24% 50%, 0 24%, 28% 0, 50% 30%);
  border-radius: 5px;
}
/* 嘴巴：画在鱼头端（右缘）一个小半圆，钩子就是钩在这儿的 */
.dr-pd .dr-opt .dr-mouth {
  position: absolute; right: 1.5%; top: 38%; width: 13%; height: 12%;
  background: #26303c; border-radius: 0 60% 60% 60%;
  transform: rotate(8deg);
  z-index: 2;
}
/* 眼睛：小一点、挪到右上角，别挡住中间的音节（音节长了也看得全） */
.dr-pd .dr-opt::after {
  content: ''; position: absolute; right: 6%; top: 7%;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 3px, #26303c 4px 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
}
/* 左右游来游去：幅度大一点，一眼看得出鱼在水里来回游 */
/* （原 drSwim 已被「鱼横穿水面」取代：见 .dr-pd .dr-slot 的 drCrossL） */
/* 钓到：鱼不游了，被钩子拉出水面 —— 往上一提、侧一下身，像被钩住拉起来 */
.dr-pd .dr-opt.on-right {
  animation: none; transform: translateY(-110px) rotate(-12deg);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
/* 没有真实布局时（测试环境）的入桶兜底：原地收进桶里的样子 */
.dr-pd .dr-opt.on-right.dr-into-bucket {
  transform: translateY(-90px) scale(.2) rotate(-6deg); opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}

/* ---------- 夜间 / 大字等既有模式的兼容 ---------- */
html.night .dr-wrap { background: #202d49; }          /* 夜间也要不透明 */
html.night .dr-streak { background: #3a3220; border-color: #5c4a24; color: #ffd9a8; }
html.night .dr-quit { background: #263652; border-color: #33435f; color: var(--ink-2); }
html.night .dr-res { background: rgba(32, 45, 73, .97); }
html.night .dr-pass { background: rgba(32, 45, 73, .97); }
html.night .dr-listen { background: #263652; border-color: #33435f; color: var(--ink); }

@media (max-width: 639px) {
  .dr-mask { padding: 8px; }
  .dr-wrap { height: min(84vh, 560px); border-radius: 18px; }
  .dr-title { font-size: 14px; }
  .dr-opt .dr-lab { font-size: 26px; }
  .dr-mole .dr-lab { font-size: 22px; }
  .dr-hole-in { height: 108px; }
  /* 地鼠按钮必须和洞口一样高：不然它比洞口高、被 overflow 裁掉顶上一截，
     答对那个绿✓正好长在顶上，跟着一起没了。 */
  .dr-hole .dr-opt { height: 108px; }
  /* 手机上一格只有几十像素：水果 / 鱼 / 口粮按格子宽度缩，字号跟着收一档 */
  .dr-word .dr-opt .dr-hz { font-size: 21px; }
  .dr-word .dr-opt .dr-py { font-size: 12.5px; }
  .dr-food .dr-opt .dr-lab { font-size: 20px; }
  .dr-pd .dr-opt { max-width: 96px; }
  .dr-pd .dr-opt::after { width: 11px; height: 11px; }
  /* 手机屏窄：小朋友画大一点（30% 宽），站在岸左，竿尖仍够得着右边的鱼 */
  .dr-rig { left: 6%; width: 30%; }
  /* 手机上的小桶跟着小朋友走：放在他右手边，别盖住水面 */
  .dr-bucket { left: 36%; top: 5%; width: 12%; min-width: 46px; }
  .dr-bfish svg { width: 15px; }
  .dr-head { width: 34px; height: 28px; }
  .dr-seg { height: 22px; font-size: 12px; }
  .dr-zt .dr-snake { animation-duration: 2.2s; }
}

/* ---------- 选项多起来（第 5 题起 5~6 个）时：字号自动收一档，别把格子撑破 ---------- */
.dr-field.dr-many .dr-opt .dr-lab { font-size: 22px; }
.dr-field.dr-many .dr-l5 .dr-lab { font-size: 17px; }
.dr-field.dr-many .dr-l6 .dr-lab { font-size: 15px; }
.dr-field.dr-many .dr-food .dr-opt .dr-lab { font-size: 18px; }
/* ⚠️ 玩法类（dr-pd / dr-word / dr-ym）挂在 mask 上，是 .dr-field 的【祖先】不是后代
   （js/drill.js：mask.className = 'dr-mask dr-' + kind）。
   以前把玩法类写成了 .dr-field 的后代位置，永远匹配不到，等于这四条白写。 */
.dr-pd .dr-field.dr-many .dr-opt .dr-lab { font-size: 15px; }
.dr-word .dr-field.dr-many .dr-opt .dr-hz { font-size: 20px; }
.dr-word .dr-field.dr-many .dr-opt .dr-py { font-size: 12px; }
.dr-ym .dr-field.dr-many .dr-opt { height: 52px; }

/* ============================================================
   ⚔️ 切水果双人 PK（drillpk.js）：
   设置层 → 左右两个切水果场地（同题异位、同步回合）→ 结算页。
   场地视觉完全复用上面 .dr-word 一套，这里只补 PK 自己的外壳。
   ============================================================ */
.dr-pk .dr-pk-wrap {
  position: absolute; inset: 4px 6px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fef9ec 0%, #fdf3dc 100%);
  border-radius: 18px; box-shadow: 0 6px 24px rgba(120, 90, 30, .25);
  overflow: hidden;
}
/* —— 设置层 —— */
.dr-pk-setup {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 18px; overflow: auto;
}
.dr-pk-stitle { font-size: 30px; font-weight: 900; color: #7a4a12; }
.dr-pk-stitle2 { font-size: 20px; font-weight: 800; color: #7a4a12; margin-top: 6px; }
.dr-pk-srow { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; }
.dr-pk-srow label { font-size: 17px; font-weight: 800; color: #8a5b22; white-space: nowrap; }
.dr-pk-name {
  flex: 1; min-width: 0; padding: 9px 12px; border: 2px solid #e8cf9a; border-radius: 12px;
  font-size: 18px; font-family: inherit; outline: none; background: #fffdf6;
}
.dr-pk-name:focus { border-color: #c89a4a; }
.dr-pk-dice {
  border: none; background: #ffe9b8; border-radius: 12px; padding: 9px 14px;
  font-size: 17px; font-weight: 800; cursor: pointer;
}
.dr-pk-dice:active { transform: scale(.95); }
.dr-pk-totals { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dr-pk-total, .dr-pk-sec {
  border: 2px solid #e8cf9a; background: #fffdf6; border-radius: 14px;
  padding: 10px 22px; font-size: 18px; font-weight: 800; color: #8a5b22; cursor: pointer;
}
.dr-pk-secs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dr-pk-total.on, .dr-pk-sec.on { background: #ff9f43; border-color: #ff9f43; color: #fff; }
/* 「自定义」：小胶囊 + 数字框 */
.dr-pk-cust {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 14px;
  border: 2px dashed #e0c48c; background: #fffdf6; padding: 6px 12px;
  font-size: 15px; font-weight: 800; color: #8a5b22; cursor: text;
}
.dr-pk-custn {
  width: 62px; border: none; outline: none; background: transparent;
  font-size: 18px; font-weight: 900; color: #d2691e; text-align: center;
  font-family: inherit; -moz-appearance: textfield;
}
.dr-pk-custn::-webkit-outer-spin-button, .dr-pk-custn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dr-pk-custn::placeholder { color: #c9ab7c; font-weight: 700; }
.dr-pk-cust:has(.dr-pk-custn.on) { border-style: solid; border-color: #ff9f43; background: #fff3dc; }
.dr-pk-go {
  border: none; background: linear-gradient(180deg, #ffb25e, #ff8f2e); color: #fff;
  font-size: 24px; font-weight: 900; padding: 14px 46px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(255, 140, 40, .35); cursor: pointer; margin-top: 6px;
}
.dr-pk-go:active { transform: scale(.97); }
.dr-pk-cancel {
  border: none; background: transparent; color: #a06a28; font-size: 15px;
  font-weight: 700; cursor: pointer; text-decoration: underline;
}
/* —— 对战层 —— */
.dr-pk-play { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dr-pk-qno {
  text-align: center; font-size: 18px; font-weight: 900; color: #7a4a12;
  padding: 8px 0 2px;
}
.dr-pk-arena { flex: 1; display: flex; min-height: 0; position: relative; }
.dr-pk-side { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 4px 6px; }
.dr-pk-head {
  display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800;
  color: #7a4a12; padding: 2px 4px; flex-wrap: wrap;
}
.dr-pk-head b { font-size: 16px; }
.dr-pk-stats { color: #a06a28; font-size: 13px; white-space: nowrap; }
.dr-pk-wait { color: #e0572f; font-size: 13px; font-weight: 800; }
.dr-pk-side .dr-field {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  border-radius: 12px; background: linear-gradient(180deg, #eaf7ff 0%, #d8f0e8 60%, #cfe9c0 100%);
}
.dr-pk-side .dr-field .dr-slot { bottom: 6%; }
.dr-pk-fb {
  height: 22px; text-align: center; font-size: 14px; font-weight: 800; color: #a06a28;
}
.dr-pk-vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 9; width: 44px; height: 44px; border-radius: 50%;
  background: #ff9f43; color: #fff; font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 140, 40, .4); pointer-events: none;
}
.dr-pk-quit {
  align-self: center; margin: 4px auto 8px; border: 2px solid #e8cf9a;
  background: #fffdf6; color: #a06a28; font-size: 14px; font-weight: 800;
  border-radius: 999px; padding: 6px 18px; cursor: pointer;
}
/* —— 结算层（已并入两块场地：成绩卡落在各自场地中央；这里只放底部「再来一局」）—— */
.dr-pk-again-big {
  align-self: center; margin: 6px auto 10px; border: none; border-radius: 999px;
  padding: 12px 40px; font-size: 20px; font-weight: 900;
  background: linear-gradient(180deg, #ffb25e, #ff8f2e); color: #fff; cursor: pointer;
  box-shadow: 0 6px 14px rgba(255, 140, 40, .35);
}
.dr-pk-again-big:active { transform: scale(.97); }
/* 结算后的场地：中间摆一张成绩卡 */
.dr-pk-side .dr-field.dr-pk-done {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff9ea 0%, #fff3d8 100%);
}
.dr-pk-rcard {
  text-align: center; background: #fffdf6; border: 3px solid #e8cf9a;
  border-radius: 18px; padding: 14px 18px; max-width: 92%;
  box-shadow: 0 6px 16px rgba(150, 110, 40, .14);
  animation: drPop .28s cubic-bezier(.34, 1.4, .64, 1);
}
.dr-pk-rcard.win {
  border-color: #ff9f43; background: #fff3dc;
  box-shadow: 0 8px 20px rgba(255, 150, 40, .3);
}
.dr-pk-rwin { font-size: 26px; font-weight: 900; color: #e0572f; margin-bottom: 4px; }
.dr-pk-rwin.dim { font-size: 20px; color: #b08a54; }
.dr-pk-rname { font-size: 20px; font-weight: 900; color: #7a4a12; margin-bottom: 6px; }
.dr-pk-rline { font-size: 16px; color: #5b431f; line-height: 1.8; }
.dr-pk-rline b { color: #d2691e; font-size: 19px; }
/* —— 单机游戏窗口里的「⚔️ PK 模式」：跨两列、独占第二行居中 —— */
.dr-bar .dr-pk-btn {
  grid-column: 1 / -1; grid-row: 2; justify-self: center;
  border: none; background: linear-gradient(180deg, #ffb25e, #ff8f2e);
  color: #fff; font-size: 15px; font-weight: 900; padding: 6px 14px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.dr-bar .dr-pk-btn:hover { filter: brightness(1.06); }
/* 按下不用 transform（历史上 transform 定位留下过「按下瞬间丢点击」的坑），
   改亮度反馈，任何摆法下都稳 */
.dr-bar .dr-pk-btn:active { transform: none; filter: brightness(.92); }

/* —— PK 窗口层级：显式高于切水果单机窗口(.dr-mask 250)，低于护眼提示(260) —— */
.dr-mask.dr-pk, #drPkMask { z-index: 255; }
/* 触屏（教室白板/平板）：去掉 300ms 双击缩放延迟，点了就有反应 */
.dr-pk-btn, .dr-pk-x, .dr-pk-sec, .dr-pk-total, .dr-pk-go, .dr-pk-again-big,
.dr-pk-dice, .dr-pk-cancel, .dr-pk-quit, .dr-pk-custn { touch-action: manipulation; }
/* —— PK 窗口右上角 ✕（任何阶段都能直接关，回到切水果；结算后也用它退出）—— */
.dr-pk-x {
  position: absolute; top: 8px; right: 10px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid #ff8f2e; background: linear-gradient(180deg, #ffb25e, #ff8f2e);
  color: #fff; font-size: 17px; font-weight: 900; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 140, 40, .35);
}
.dr-pk-x:hover { filter: brightness(1.06); }
.dr-pk-x:active { transform: scale(.94); }
/* 右上角「⚙️ 返回设置」，摆在 ✕ 左边：中途想改限时/题量/游速时用。
   绝对定位相对的是 .dr-pk-wrap（✕ 也在同一参照系里），所以两者能对齐。 */
.dr-pk-play .dr-pk-setback {
  position: absolute; top: 10px; right: 56px; z-index: 30;
  height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid #d4dde8; background: rgba(255, 255, 255, .94); color: #46586b;
  font-size: 14px; white-space: nowrap;
}
.dr-pk-play .dr-pk-setback:hover { background: #fff; border-color: #b9c9da; }
.dr-pk-play .dr-pk-setback:active { transform: scale(.96); }
@media (max-width: 560px) {
  /* 窄屏放不下「⚙️ 返回设置」整串字，而且题号是居中的，右上角挤一起会撞上
     —— 干脆把它挪到左下角，只留齿轮图标（文字进 title，长按也能看到） */
  .dr-pk-play .dr-pk-setback {
    top: auto; bottom: 10px; right: auto; left: 12px;
    width: 38px; height: 38px; padding: 0; font-size: 17px;
  }
  .dr-pk-play .dr-pk-setback .dr-t { display: none; }
}
/* —— 窄屏：同样的网格摆法就够用——
   第一行「标题 + 连对」自己折行、结束 ✕ 贴右边；PK 按钮照样第二行居中。
   不必再单独写一套（原来这里有一块宽屏专用覆写，摆法统一后就不需要了）。 */
@media (max-width: 560px) {
  .dr-bar { gap: 5px 6px; padding: 8px 10px; }
  .dr-bar-l { gap: 6px; }
  .dr-title { font-size: 14px; }
  .dr-bar .dr-pk-btn { padding: 6px 16px; }
}
/* —— 档案下拉选人 —— */
.dr-pk-pick {
  padding: 8px 10px; border: 2px solid #e8cf9a; border-radius: 12px;
  font-size: 16px; font-weight: 700; color: #8a5b22; background: #fffdf6;
  max-width: 148px; font-family: inherit; outline: none; cursor: pointer;
}
.dr-pk-pick:focus { border-color: #c89a4a; }

/* —— 手机窄屏：PK 场地更紧凑 —— */
@media (max-width: 560px) {
  .dr-pk-stitle { font-size: 24px; }
  .dr-pk-srow { flex-wrap: wrap; gap: 6px; }
  .dr-pk-name { padding: 7px 10px; font-size: 16px; }
  .dr-pk-go { font-size: 20px; padding: 12px 32px; }
  .dr-pk-head { font-size: 12px; }
  .dr-pk-head b { font-size: 13px; }
  .dr-pk-stats { font-size: 11px; }
  .dr-pk-wait { font-size: 11px; }
  .dr-pk-vs { width: 32px; height: 32px; font-size: 12px; }
  .dr-pk-rcard { padding: 10px 12px; }
  .dr-pk-rwin { font-size: 20px; }
  .dr-pk-rname { font-size: 16px; }
  .dr-pk-rline { font-size: 13px; }
  .dr-pk-rline b { font-size: 16px; }
  .dr-pk-again-big { font-size: 17px; padding: 10px 28px; }
  .dr-pk-pick { max-width: 108px; font-size: 14px; padding: 6px 8px; }
  .dr-pk-srow label { min-width: 60px; }
  .dr-pk-total, .dr-pk-sec { padding: 8px 13px; font-size: 16px; }
  .dr-pk-cust { padding: 5px 9px; font-size: 13px; gap: 4px; }
  .dr-pk-custn { width: 46px; font-size: 16px; }
  .dr-pk-go { font-size: 20px; padding: 12px 34px; }
}

/* ============================================================
   PK · 🎣 钓鱼场地（和切水果 PK 同一套回合，只是画成池塘）
   PK 窗口的 mask 上带 dr-pd，池塘、小鱼外形、竹竿、鱼桶全复用按课学习那一套；
   这里只补两处差异：① 半屏场地里的尺寸；② 鱼在画面内来回游（不是游出去就没）。
   ============================================================ */
/* 来回游：按课学习里鱼是"从左游到右就没了"，那一趟就是答题时间；
   PK 的每題限时是独立算的，鱼不必赶场 —— 来回游更好看，也更容易点中 */
.dr-pk-pd .dr-slot {
  animation-direction: alternate; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-fill-mode: both;
}
/* ⚠️ 钓鱼的鱼用内联 top 定位（每条一条泳道），必须把切水果给 slot 的 bottom 撤掉，
   否则同时有 top 和 bottom，格子会被拉成整列高。 */
.dr-pk-pd .dr-pk-side .dr-field .dr-slot { bottom: auto; }
/* 钓中的那条停在原地：用暂停而不是 animation:none ——
   none 会把 transform 一起撤掉，鱼会"啪"地跳回场地中线。 */
.dr-pk-pd .dr-slot.dr-hooked { animation-play-state: paused; }
/* 半屏场地里小朋友画大一点，竿尖照样够得着右边的鱼 */
.dr-pk-pd .dr-rig { left: 5%; top: 0; width: 20%; }
.dr-pk-pd .dr-bucket { left: 26%; top: 3%; width: 13%; min-width: 44px; }
/* 桶里攒的鱼：够大才看得出「钓得越多、桶里越满」 */
.dr-pk-pd .dr-bfish svg { width: 20px; }
/* 鱼身跟着格子宽走（4 条鱼时每格约两成宽），不设 118px 上限，窄屏也放得下音节 */
.dr-pk-pd .dr-opt { max-width: 100%; }
.dr-pk-pd .dr-opt .dr-lab { font-size: 19px; }
.dr-pk-pd .dr-field.dr-many .dr-opt .dr-lab { font-size: 15px; }
@media (max-width: 560px) {
  /* 手机每侧只有约 190px：鱼再收一档，音节字号跟着收，眼睛和嘴也小一点别盖住字 */
  .dr-pk-pd .dr-rig { left: 3%; width: 30%; }
  .dr-pk-pd .dr-bucket { left: 34%; top: 4%; width: 15%; min-width: 34px; }
  .dr-pk-pd .dr-bfish svg { width: 16px; }
  .dr-pk-pd .dr-opt .dr-lab { font-size: 13px; }
  .dr-pk-pd .dr-opt::after { width: 7px; height: 7px; }
  .dr-pk-pd .dr-opt .dr-mouth { width: 9%; height: 8%; }
}

/* ---- 🐟 小鱼游速滑块（只有钓鱼 PK 的设置层有）----
   老师上课自己按情况调：往左更慢、往右更快，选完记住。
   滑块本体做到 30px 高、拇指 30px，手指/触控笔都好按。 */
.dr-pk-spd { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.dr-pk-spd-e { flex: 0 0 auto; font-size: 15px; color: #6b7683; }
.dr-pk-spd input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 110px; height: 30px; margin: 0;
  border-radius: 999px; cursor: pointer; outline: none; background: transparent;
  /* 细条视觉 + 大点击区：渐变只铺中间 10px 高的一条 */
  background-image: linear-gradient(90deg, #9ec7ea, #ffb45c);
  background-size: 100% 10px; background-position: center; background-repeat: no-repeat;
}
.dr-pk-spd input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%; background: #ff9f43;
  border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .28); cursor: pointer;
}
.dr-pk-spd input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #ff9f43;
  border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .28); cursor: pointer;
}
.dr-pk-spd input[type="range"]::-moz-range-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #9ec7ea, #ffb45c);
}
.dr-pk-spd input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(255, 159, 67, .45); }
.dr-pk-spd-v {
  flex: 0 0 48px; text-align: right; font-size: 17px; font-weight: 800;
  color: #e07a10; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .dr-pk-spd { gap: 7px; padding: 2px 0 10px; }
  .dr-pk-spd-e { font-size: 14px; }
  .dr-pk-spd-v { flex: 0 0 42px; font-size: 16px; }
}
/* —— 贪吃蛇 PK（左一条蛇、右一条蛇，各自草地）——
   mask 上带 dr-zt，草地/小蛇/吃的这一整套样式直接复用按课学习里那套，
   这里只做「半屏」与「两条蛇同场」需要的尺寸收敛。 */
.dr-pk-zt .dr-field { border-radius: 12px; }
.dr-pk-zt .dr-snake { animation-duration: 2.5s; }
.dr-pk-zt .dr-snake::after { width: 74px; height: 7px; bottom: -5px; }
.dr-pk-zt .dr-head { width: 27px; height: 22px; }
.dr-pk-zt .dr-seg { height: 18px; font-size: 11px; }
.dr-pk-zt .dr-grass { height: 16%; border-top-width: 2px; }
.dr-pk-zt .dr-bite { opacity: .26; }
/* 吃的按钮跟着半屏收：原来 max-width 100px，两条蛇的场地里会显得挤 */
.dr-pk-zt .dr-food .dr-opt { max-width: 76px; }
.dr-pk-zt .dr-food .dr-opt .dr-lab { font-size: 17px; }
@media (max-width: 560px) {
  .dr-pk-zt .dr-snake::after { width: 52px; height: 5px; }
  .dr-pk-zt .dr-head { width: 21px; height: 17px; }
  .dr-pk-zt .dr-seg { height: 14px; font-size: 9px; }
  .dr-pk-zt .dr-food .dr-opt { max-width: 54px; }
  .dr-pk-zt .dr-food .dr-opt .dr-lab { font-size: 13px; }
}

/* —— 左右场地各自的「🔁 再听一遍」——
   叠在各自场地右上角的天空区；点它重播本侧当前题的标准音（和单机的「再听一遍」一个意思）。
   打地鼠的太阳在右上角，那块的按钮挪到顶部中央，免得压住太阳。 */
.dr-pk-replay {
  position: absolute; top: 6px; right: 6px; z-index: 12;
  font-family: var(--font); font-size: 13px; font-weight: 800;
  color: #1b4f86; background: rgba(234, 244, 255, .92);
  border: 2px solid #cfe3fa; border-radius: 999px;
  padding: 6px 11px; cursor: pointer; min-height: 30px;
  box-shadow: 0 1px 4px rgba(40, 80, 130, .18);
}
.dr-pk-replay:hover { background: #dcecfd; }
.dr-pk-replay:active { filter: brightness(.88); }
.dr-pk-sm .dr-pk-replay { right: auto; left: 50%; transform: translateX(-50%); }
@media (max-width: 560px) {
  .dr-pk-replay { top: 4px; right: 4px; font-size: 11px; padding: 4px 8px; min-height: 26px; }
}
/* —— 打地鼠 PK（左一块草地、右一块草地，各敲各的）——
   mask 上带 dr-sm，土堆/地鼠/钻出来这一整套直接复用按课学习里那套，
   这里只做「半屏」需要的尺寸收敛：洞矮一点、地鼠小一点、土沿薄一点。
   土堆的 2~3 列 × 2 行位置和地鼠宽高由 js/drillpk.js 的 smSpot/renderSmSide 内联给。 */
.dr-pk-sm .dr-field { border-radius: 12px; }
.dr-pk-sm .dr-sun { font-size: 24px; right: 6%; top: 5%; }
.dr-pk-sm .dr-cloud { font-size: 18px; }
.dr-pk-sm .dr-hole-in { height: 84px; }
.dr-pk-sm .dr-hole-in::before { height: 20px; bottom: 3px; }
.dr-pk-sm .dr-ground { height: 18px; }
.dr-pk-sm .dr-mole { border-width: 2px; margin-bottom: 10px; }
.dr-pk-sm .dr-mole::before, .dr-pk-sm .dr-mole::after { width: 15px; height: 15px; top: -7px; border-width: 2px; }
.dr-pk-sm .dr-mole::before { left: 3px; }
.dr-pk-sm .dr-mole::after { right: 3px; }
.dr-pk-sm .dr-hole .dr-opt { height: 84px; }
/* 打地鼠那颗✓贴着地鼠右耳，别飘到格子另一头 */
.dr-pk-sm .dr-hole .dr-opt.on-right::after { top: 8px; left: calc(50% + 28px); }
/* 被敲中的那只：蹦一下之后缩回洞里（等对方那只） */
.dr-pk-sm .dr-hole .dr-opt.eaten .dr-mole { transform: translateY(125%); transition: transform .3s ease-in; }
@media (max-width: 560px) {
  .dr-pk-sm .dr-hole-in { height: 72px; }
  .dr-pk-sm .dr-hole .dr-opt { height: 72px; }
  .dr-pk-sm .dr-mole::before, .dr-pk-sm .dr-mole::after { width: 12px; height: 12px; top: -6px; }
  .dr-pk-sm .dr-hole .dr-opt.on-right::after { left: calc(50% + 20px); }
}

/* ============================================================
   🧱 拼音方块 PK（第 132 条）：
   方块从天上落到地面，落到底正好本题到点；点对了那块停在原地变绿。
   云、地面线、方块渐变整条复用按课学习里 `.dr-ym` 的定义，
   这里只补半屏需要的收敛。位置/宽度/字号由 js/drillpk.js 的 renderYmSide 内联给。
   ⚠️ 场地里那条 `.dr-pk-side .dr-field .dr-slot { bottom: 6% }` 是给
      「贴着地面站」的玩法用的（土堆、鱼），方块是**从顶上开始掉**的，
      必须把 bottom 撤掉，否则方块会被拉成一整列。
   ============================================================ */
.dr-pk-ym .dr-field .dr-slot { top: 0; bottom: auto; }
.dr-pk-ym .dr-cloud { font-size: 20px; }
.dr-pk-ym .dr-opt {
  width: 100%; height: 46px; border-radius: 12px;
  background: linear-gradient(#7c6bff, #5e8bff);
  box-shadow: 0 4px 0 #4a58c8, 0 6px 14px rgba(60, 70, 180, .24);
}
.dr-pk-ym .dr-opt.g2 {
  background: linear-gradient(#ffb347, #ff8c42);
  box-shadow: 0 4px 0 #cc6a26, 0 6px 14px rgba(200, 110, 40, .24);
}
.dr-pk-ym .dr-opt.g3 {
  background: linear-gradient(#42c9a8, #2cc0b0);
  box-shadow: 0 4px 0 #1f8f83, 0 6px 14px rgba(30, 150, 130, .24);
}
/* 停住那块：JS 已把过渡关掉，这里让它在原地亮着、别再做其它动画 */
.dr-pk-ym .dr-fallbox .dr-opt.on-right { animation: none; }
.dr-pk-ym .dr-ground-line { height: 18px; }
@media (max-width: 560px) {
  /* 手机每侧只有约 190px：方块矮一点、云和地面线都收一档，别抢方块的位 */
  .dr-pk-ym .dr-opt { height: 36px; border-radius: 10px; box-shadow: 0 3px 0 #4a58c8; }
  .dr-pk-ym .dr-opt.g2 { box-shadow: 0 3px 0 #cc6a26; }
  .dr-pk-ym .dr-opt.g3 { box-shadow: 0 3px 0 #1f8f83; }
  .dr-pk-ym .dr-cloud { font-size: 15px; opacity: .45; }
  .dr-pk-ym .dr-ground-line { height: 14px; border-top-width: 2px; }
}