/* =====================================================================
   分级单词测试（test/spell/spell.html）· 童话主题适配层
   ---------------------------------------------------------------------
   底座：comm/disney-kit.css（令牌 + 材质配方 + dk-* 组件）
   本文件负责：① 压掉 spell.css 的旧青绿糖果风；② 调本页尺寸与断点。
   回滚：删掉 spell.html 里指向本文件与 disney-kit.css 的两行 <link>。
   ---------------------------------------------------------------------
   ⚠️ spell.css 的层叠比较乱：同一个选择器在文件里出现 5~6 次（.letter 有
   6 份、.letter-pool 有 4 份），而且带 `!important` 的 `.letter-pool{display:flex}`。
   所以本文件的策略是**先跑 style_probe 看谁赢**，再决定哪些声明需要 !important，
   而不是靠猜层叠顺序。
   ---------------------------------------------------------------------
   顺手修掉的 3 处真实对比度缺陷（都是白字压亮彩，改前实测）：
     白 / #FFC107（重写按钮）...... 1.63:1  FAIL
     白 / #FF6B6B（提交按钮）...... 2.78:1  FAIL
     白 / #4ECDC4（字母砖 / 进度高亮）1.93:1  FAIL
     另 #selectedLetters 空态提示用 #ff9a9a 压白底，约 1.9:1，同样读不出来。
   现在彩色件一律走底座里那套**已压过 AA 的塑料色阶**（白字底 ≥4.5:1）。
   ===================================================================== */

/* ============ 1. 盒模型 ============ */
/* spell.css 没有全局 box-sizing（默认 content-box）。本页 body 有 padding，
   容器有 width:90% —— 不显式声明就会横向顶出视口（且左右对称溢出不会让
   scrollWidth 变大，探针只看 scrollWidth 会漏判）。 */
html, body,
.dk-sky, .dk-page, .dk-seg, .dk-seg-item, .dk-btn, .dk-chip, .dk-badge,
.dk-question, .dk-slot, .dk-pool, .dk-tile, .dk-feedback, .dk-table, .dk-iconbtn,
.container, .selected-letters, .letter-pool, .letter, .letter-option,
.chinese, .controls, .feedback, .progress, .custom-alert, .error-report,
.letter-selected, .delete-btn{
  box-sizing:border-box;
}

/* ============ 2. 外壳 ============ */
body{
  background-color:var(--dk-sky-2) !important;
  background-image:
    radial-gradient(56% 38% at 88% -6%, rgba(185,164,255,.40), rgba(185,164,255,0) 72%),
    radial-gradient(46% 34% at -10% 20%, rgba(127,230,207,.34), rgba(127,230,207,0) 72%),
    radial-gradient(44% 30% at 108% 66%, rgba(255,194,166,.34), rgba(255,194,166,0) 74%),
    radial-gradient(48% 34% at 2% 104%, rgba(255,223,142,.36), rgba(255,223,142,0) 74%),
    linear-gradient(180deg,var(--dk-sky-1) 0%,var(--dk-sky-2) 32%,var(--dk-sky-3) 66%,var(--dk-sky-4) 100%) !important;
  background-attachment:fixed;
  color:var(--dk-ink) !important;
  font-family:var(--dk-font-cn) !important;
  /* ⚠️ 这里**故意不写 padding-top**：
     站点顶栏 .topbar 是 position:fixed、高 52px（comm/nav.css），
     nav.js 会给 body 加 .has-topbar，靠 `body.has-topbar{padding-top:52px}` 让位。
     一旦用 !important 去压 padding-top，就会把这条让位规则一起压掉 ——
     首屏内容直接钻到顶栏底下（本轮真踩过：模式切换控件被顶栏盖住）。
     只调左右与底部，上边距交给 nav.css（有顶栏 52px / 小程序无顶栏 20px）。 */
  padding-left:14px !important;
  padding-right:14px !important;
  padding-bottom:calc(30px + env(safe-area-inset-bottom)) !important;
  min-height:100vh;
}

/* ============ 3. 主容器（故事书页） ============ */
.container{
  width:100% !important;
  max-width:720px !important;
  margin:16px auto 0 !important;
  padding:clamp(18px,4.8vw,28px) clamp(14px,4vw,26px) !important;
  border-radius:var(--dk-r-page) !important;
  background:var(--dk-page-bg) !important;
  box-shadow:var(--dk-page-shadow) !important;
  transition:none !important;
}

/* ============ 4. 模式分段控件 ============ */
.mode-switch{
  gap:6px !important;
  margin:0 0 14px !important;
  padding:6px !important;
  justify-content:stretch !important;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(238,231,255,.8)) !important;
  border:1px solid rgba(122,94,226,.16) !important;
  border-radius:var(--dk-r-page) !important;
  box-shadow:inset 0 1px 0 #fff,
             inset 0 -2px 0 rgba(122,94,226,.12),
             0 10px 20px -14px rgba(78,54,155,.5) !important;
}
.mode-switch .mode-btn{
  flex:1 1 0;
  min-width:0;
  padding:9px 10px !important;
  border-radius:var(--dk-r-tab) !important;
  background:transparent !important;
  color:var(--dk-ink-soft) !important;
  font-family:var(--dk-font-cn) !important;
  font-size:clamp(13px,3.5vw,15px) !important;
  font-weight:700 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background .22s, color .22s, box-shadow .18s !important;
}
.mode-switch .mode-btn:hover{ background:rgba(122,94,226,.09) !important; color:var(--dk-ink-strong) !important; }
.mode-switch .mode-btn.active{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
}
/* 选中段的呼吸光环（挂在伪元素上，否则动画会整条覆盖 box-shadow） */
.mode-switch .mode-btn.active::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation:dkRing 2.6s ease-out infinite;
}
.mode-switch .mode-btn{ position:relative; overflow:hidden; }

/* ============ 5. 题面 ============ */
.chinese-container{ gap:12px; }
.chinese{
  margin:6px 0 4px !important;
  padding:16px 20px !important;
  border-radius:var(--dk-r-plate) !important;
  background:linear-gradient(180deg,#fff,#f6f1ff) !important;
  box-shadow:var(--dk-ring), inset 0 2px 0 #fff, inset 0 -3px 0 var(--dk-lip) !important;
  color:var(--dk-ink-strong) !important;
  font-weight:800 !important;
  font-size:clamp(22px,6vw,28px) !important;
}
/* 喇叭按钮：原来是 28px 的 emoji 🔊（平台位图，且 .sound-btn 只有 48px 的
   点击区还带 10px padding 撑大视觉）。改成 44px 挤塑圆钮 + SVG 喇叭。 */
.sound-btn{
  width:44px !important; height:44px !important; min-width:44px;
  margin-left:0 !important;
  padding:0 !important;
  font-size:0 !important;          /* 兜底：万一 emoji 没被替换掉也不显示 */
  color:transparent !important;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dk-vio-plastic) !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
  transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s, filter .2s !important;
}
.sound-btn .dk-i{ font-size:22px; width:22px; height:22px; }
.sound-btn:hover{ transform:none !important; filter:brightness(1.06); box-shadow:var(--dk-vio-plastic-shadow), var(--dk-halo) !important; }
.sound-btn:active{ transform:translateY(3px) !important; box-shadow:var(--dk-plastic-shadow-press) !important; }

/* ============ 6. 进度 / 强化复习徽章 ============ */
.progress{
  /* 原来只给 `margin:... auto` 但元素是 inline-flex —— 行内级盒子的 auto 外边距
     不会水平居中，实测被顶到左边贴着页边。改成块级 flex + width:max-content。 */
  display:flex !important;
  width:max-content;
  max-width:100%;
  align-items:center; gap:6px;
  margin:12px auto 6px !important;
  padding:8px 14px !important;
  border-radius:var(--dk-r-chip) !important;
  background:linear-gradient(180deg,#fff,#f6f1ff) !important;
  box-shadow:inset 0 2px 0 #fff, inset 0 -2px 0 rgba(122,94,226,.13),
             0 0 0 1px rgba(122,94,226,.15),
             0 8px 14px -10px rgba(78,54,155,.4) !important;
  color:var(--dk-ink-soft) !important;
  font-size:14px !important;
  font-weight:700 !important;
}
/* ⚠️ 原来是白字压 #4ECDC4（1.93:1）。 */
.progress-highlight{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:2px 9px !important;
  font-weight:800 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 var(--dk-vio-lip) !important;
}
.mode-indicator{
  margin:6px 0 0 !important;
  font-size:13.5px !important;
}
/* review-mode 的旧配色是浅红底深红字，浅主题下改用琥珀塑料（白字 AA 已核） */
.mode-indicator.review-mode{ background:var(--dk-warn-plastic) !important; color:#fff !important; box-shadow:var(--dk-warn-plastic-shadow) !important; }

/* ============ 7. 答案槽 ============ */
/* ⚠️ spell.css 里有一条 **id 选择器** `#selectedLetters{min-height:50px}`（656 行），
   比 .selected-letters(0-1-0) 高一档；只用类名写 min-height 会静默失效
   （实测：padding 生效了、min-height 没有，看上去"规则写了却不全生效"）。
   所以这里也用 id 提权。 */
#selectedLetters{
  min-height:74px !important;
  margin:14px 0 6px !important;
  padding:12px 14px !important;
  gap:2px !important;
  border:2px dashed rgba(122,94,226,.34) !important;
  border-radius:var(--dk-r-plate) !important;
  background:linear-gradient(180deg,#fdfbff,#f4efff) !important;
  box-shadow:inset 0 3px 8px rgba(78,54,155,.14), 0 0 0 1px rgba(122,94,226,.1) !important;
  justify-content:center;
  align-items:center;
  overflow-x:auto;
}
/* ⚠️ 空态提示原来是 #ff9a9a 压白底（约 1.9:1，基本读不出来）。 */
#selectedLetters:empty::after{
  content:"从下面挑字母，拼出这个单词";
  color:var(--dk-ink-mute) !important;
  font-size:14px !important;
  font-weight:700;
  letter-spacing:.3px;
  animation:none !important;
}
/* 槽里已选的字母：做成凹陷的凹槽 + 深墨字（原来是 30px 无底裸字） */
.letter-selected{
  color:var(--dk-ink-strong) !important;
  font-family:var(--dk-font-en) !important;
  font-size:clamp(24px,6vw,30px) !important;
  font-weight:800;
  padding-bottom:0 !important;
}
.letter-selected::after{ background:rgba(122,94,226,.35) !important; }
/* 退格键（JS 动态插入 .delete-btn，内容是一个 ⌫ 字符） */
.delete-btn{
  position:sticky; right:0;
  background:transparent !important;
  color:var(--dk-no) !important;
  font-size:26px !important;
  padding-left:12px !important;
  cursor:pointer;
}

/* ============ 8. 字母池 ============ */
/* ⚠️ spell.css 在 .letter-pool 上写了 `display:flex !important`，所以这里
   只覆盖它没写 !important 的那些属性（gap / padding）。 */
.letter-pool{
  gap:9px !important;
  padding:6px 0 4px !important;
  margin:6px auto 0 !important;
  max-width:100% !important;
}
/* 字母砖：青绿糖果块（白字 1.93:1）→ 象牙挤塑积木（深墨字，AA 富余） */
.letter,
.letter-option{
  width:auto; min-width:44px; height:50px;
  padding:0 12px !important;
  border:none !important;
  border-radius:var(--dk-r-tile) !important;
  background:var(--dk-plastic-bg) !important;
  box-shadow:var(--dk-plastic-shadow) !important;
  color:var(--dk-ink-strong) !important;
  font-family:var(--dk-font-en) !important;
  font-size:clamp(20px,5.6vw,26px) !important;
  font-weight:800 !important;
  text-transform:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s, background .2s, color .2s !important;
}
.letter:hover, .letter-option:hover{
  background:var(--dk-plastic-bg-hover) !important;
  transform:translateY(-3px) !important;
  box-shadow:var(--dk-plastic-shadow), var(--dk-halo) !important;
}
.letter:active, .letter-option:active{
  transform:translateY(3px) !important;
  box-shadow:var(--dk-plastic-shadow-press) !important;
}
/* 元音/辅音：原来靠 #d35400 染色区分。砖底换成象牙后，
   元音改用「琥珀字 + 金顶饰」——依然是"一眼看出是元音"，但字色过 AA。 */
.letter-option.vowel,
.letter.vowel{
  color:var(--dk-warn) !important;
  background:linear-gradient(180deg,#fffdf4,#fff4d8) !important;
}
/* 空格砖：原来白字压 #ff6b6b（2.78:1） → 改用玫瑰塑料（白字 5.90:1） */
.letter-option[data-char=" "],
.letter[data-char=" "],
.space-char{
  background:var(--dk-no-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-no-plastic-shadow) !important;
  min-width:56px;
}
/* 已用掉的字母：spell.css 用 [hidden]{opacity:0} 保留占位。
   保留占位是对的（字母不会跳位），但"完全看不见"会让小孩以为砖掉了——
   改成**凹陷的空槽**，位置还在、一眼知道"这个用过了"。 */
.letter-option[hidden],
.letter[hidden]{
  opacity:1 !important;
  visibility:hidden !important;
}
.letter-option[hidden]::after,
.letter[hidden]::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(122,94,226,.07);
  box-shadow:inset 0 2px 5px rgba(78,54,155,.18), 0 0 0 1px rgba(122,94,226,.12);
  visibility:visible;
}
.letter-option, .letter{ position:relative; }

/* ============ 9. 反馈条 ============ */
/* 浮层胶囊（2026-09-14 用户要求，与 choice.html 同款）：不再占文档流，
   屏幕正中弹出。JS（init_spell.js）自己写 opacity=1/0（正确 1.5s / 错误
   2.5s 后淡出、下一题清空内容），所以这里**不接管 opacity**——尤其不能
   再写 opacity:1 !important，否则 JS 的淡出会被样式表压死。
   pointer-events:none：胶囊悬在字母砖上方时绝不挡点击。 */
.feedback{
  position:fixed;
  left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1200;
  pointer-events:none;
  max-width:min(88vw,430px);
  margin:0 !important;
  padding:12px 20px !important;
  border-radius:22px !important;
  border:none !important;
  font-size:clamp(16px,4.3vw,19px) !important;
  font-weight:800;
  line-height:1.4;
  text-align:center;
}
.feedback:empty{ display:none; }
.feedback.correct{
  background:var(--dk-ok-plastic) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34), inset 0 -3px 0 var(--dk-ok-lip),
             0 12px 24px -14px rgba(7,107,78,.6) !important;
}
.feedback.wrong{
  background:var(--dk-no-plastic) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34), inset 0 -3px 0 var(--dk-no-lip),
             0 12px 24px -14px rgba(163,21,47,.55) !important;
}
/* 反馈条里的图标必须反白。
   本页的状态类叫 `.feedback.correct` / `.feedback.wrong`（spell.css 的旧命名），
   **不是** kit 的 `dk-feedback--ok/no` → kit 第 13 节那组反白选择器够不到这里。
   实测漏掉这条时：`.dk-i-x`(#b3203a) 压深红反馈条 = **1.12:1**，❌ 肉眼看不见；
   正确态的 `.dk-i-check`(#0a7f5f) 压深绿反馈条同样是同色压同色。
   文字侧早已是 `color:#fff`（≥4.5:1），图标跟着文字走即可。 */
.feedback.correct .dk-i,
.feedback.wrong .dk-i{ filter:brightness(0) invert(1); }

/* ============ 10. 三个操作按钮 ============ */
/* ⚠️ #rewriteBtn / #confirmBtn / #againBtn 都是 **id 选择器**(1-0-0)，
   比 .dk-btn--xxx(0-1-0) 高一档，所以必须逐个点名压掉，否则底座颜色不生效。 */
.controls{
  gap:10px !important;
  margin-top:22px !important;
  flex-wrap:wrap;
}
.controls .dk-btn{
  flex:1 1 0; min-width:88px;
  padding:0 14px !important;
  font-size:clamp(15px,4vw,17px) !important;
  border-radius:var(--dk-r-ctl) !important;
}
#rewriteBtn{
  background:var(--dk-gold-plastic) !important;
  color:var(--dk-gold-ink) !important;
  box-shadow:var(--dk-gold-plastic-shadow) !important;
}
#confirmBtn{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
}
/* 「重测」按钮：spell.css 原意是 #007acc 蓝，主题层曾用塑料白盖掉它
   （用户点名要蓝）→ 改成保留挤塑材质的蓝塑料。
   ⚠️ 渐变亮端不能比 #007acc 更亮：白字压 #007acc 只有 4.52:1（AA 贴线），
   亮端再抬一档就掉到 4.5 以下，所以渐变只往深处走 #007acc→#005f97。 */
#againBtn{
  background:linear-gradient(180deg,#007acc 0%,#005f97 100%) !important;
  color:#fff !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -3px 0 rgba(0,42,71,.45),
    0 3px 0 #004873 !important;
}
#rewriteBtn:active, #confirmBtn:active, #againBtn:active{
  transform:translateY(3px) !important;
  box-shadow:var(--dk-plastic-shadow-press) !important;
}

/* ============ 11. 错误总结 ============ */
.error-report{
  background:var(--dk-page-bg) !important;
  border:none !important;
  border-radius:var(--dk-r-page) !important;
  box-shadow:var(--dk-page-shadow) !important;
  padding:clamp(16px,4.4vw,24px) !important;
  margin:0 auto 16px !important;
  max-width:720px;
  text-align:center;
}
.error-report h4{
  margin:0 0 10px !important;
  font-size:clamp(17px,4.6vw,20px) !important;
  color:var(--dk-ink-strong) !important;
}
#errorStats{ color:var(--dk-ink-soft); font-weight:700; }
.error-report .dk-btn{ margin-top:14px; }

/* ---- 错误总结表的表头 ----
   spell.css 原样是 `.error-report th{background:#ff6b6b;color:white}`（白字压珊瑚 2.78:1）；
   底座 comm/disney-kit.css 又把 th 的文字色改成 --dk-ink-mute（它自己的 th 是「浅底小字
   说明行」，没声明 background），于是实际渲染成「浅紫字压饱和珊瑚底」= **1.98:1**，
   是全页最差的一格。
   ⚠️ 这处一度**没被测到**：审计脚本按手挑选择器采集，`#errorDetails td/tr` 都列了、
   唯独漏了 `th`，所以前几轮都报 0 未达标。现在采集面已放宽成 `#errorReport *`。
   改法：浅珊瑚底 + 深红字（保住"错误"语义、过 AA、也比原来的饱和块浅）；
   `#errorDetails th` 是 id 选择器，天然压过 `.error-report th`，不需要 !important。 */
#errorDetails th{
  background:rgba(255,107,107,.13);
  color:var(--dk-no);
  text-align:center;
  padding:7px 8px;
  font-size:12.5px; font-weight:800; letter-spacing:.3px;
}
/* border-collapse:separate + border-spacing:0 7px：单元格只在**纵向**拉开，
   横向是挨着的，所以只给首尾切圆角就能拼成一条完整的表头。 */
#errorDetails th:first-child{ border-radius:12px 0 0 12px; }
#errorDetails th:last-child{ border-radius:0 12px 12px 0; }

/* ============ 12. 弹窗 ============ */
/* ⚠️ 这里**故意不铺全屏遮罩**。
   一度写过 `box-shadow:0 0 0 100vmax rgba(58,44,120,.34)` 把弹窗当模态遮罩用，
   后果是：showAlert 是**成功提示**、却要挂 5 秒（spell.css 的 .custom-alert.show
   靠 5s 定时移除 class），这 5 秒里整页被压暗到约 2:1 —— 既挡阅读，又把
   对比度审计的背景色污染成「象牙 × 0.66 深紫」（实测把金钮的底色从
   #ffd76b 测成 (188,152,107)，凭空多出 3 个假 FAIL）。基础表的
   .custom-alert 本来就只有 `0 10px 30px rgba(0,0,0,.2)`，保持同量级即可。 */
.custom-alert{
  border-radius:var(--dk-r-page) !important;
  background:var(--dk-page-bg) !important;
  box-shadow:var(--dk-page-shadow),
             0 18px 40px -18px rgba(58,44,120,.5) !important;
  color:var(--dk-ink) !important;
  padding:26px 34px !important;
  border:none !important;
}
.alert-icon{ font-size:0 !important; margin-bottom:12px !important; }
.alert-icon .dk-i{ font-size:46px; width:46px; height:46px; }
#alertMessage{ font-size:17px !important; font-weight:800; color:var(--dk-ink-strong); }

/* 音标模式下的「点击看音标」提示：
   spell.css 给的是 `color:darkorange`（#ff8c00）—— 压象牙页 2.29:1，实测 FAIL。
   它是「可点」提示，改用主题操作紫（5.65:1），和全站「可点=仙紫」的语言一致。
   图标由 disney-icons.js 旁挂替换成 .dk-i-eye。 */
.toggle-phonetic{ color:var(--dk-vio) !important; font-weight:800; }
.toggle-phonetic .dk-i{ vertical-align:-.2em; margin-right:.25em; }

/* ============ 13. 响应式 ============ */
@media (max-width:480px){
  body{ padding-left:10px !important; padding-right:10px !important; }
  .container{ padding:18px 14px !important; }
  .letter-pool{ gap:7px !important; }
  /* 触摸目标不小于 44px：宁可多换一行，也不把字母砖压到点不准 */
  .letter, .letter-option{ min-width:44px; height:46px; padding:0 10px !important; font-size:20px !important; }
  #selectedLetters{ min-height:66px !important; }
  .controls{ gap:8px !important; }
}
@media (max-width:340px){
  .letter, .letter-option{ min-width:44px; height:44px; padding:0 8px !important; font-size:18px !important; }
  .letter-pool{ gap:6px !important; }
}

/* ============ 14. 无障碍 ============ */
.mode-switch .mode-btn:focus-visible, .letter:focus-visible, .letter-option:focus-visible,
.sound-btn:focus-visible{ outline:3px solid var(--dk-vio-deep); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .mode-switch .mode-btn.active::after, .letter, .letter-option, .sound-btn{ animation:none !important; transition:none !important; }
}