/* =====================================================================
   单元单词拼写（units/36spell.html）· 童话主题适配层
   ---------------------------------------------------------------------
   底座：comm/disney-kit.css（令牌 + 材质配方 + dk-* 组件）
   回滚：删掉 36spell.html 里指向本文件与 disney-kit.css 的两行 <link>。
   ---------------------------------------------------------------------
   ⚠️ 本页与 test/spell/spell.html **类名撞车但语义不同**，千万别照抄：
     · 这里 `.letter` 是"答案位"（一条下划线的空位），不是字母砖；
     · 这里 `.key` 才是可敲的键。
   真正可点的是 `.key`，`.letter` 只是显示位。
   ---------------------------------------------------------------------
   本文件负责：
     ① 把 36spell.css 的"白底 + 彩虹键盘 + 蓝紫按钮"压成童话主题；
     ② 修掉移动端键盘键被压到 26~30px 的问题；
     ③ 不动 comm/36spell.js（含 canvas 粒子绘制）与任何 id/类名。
   ===================================================================== */

/* ============ 1. 盒模型 ============ */
/* 36spell.css 没有全局 box-sizing；本页有 width:100% + padding 的容器，
   不显式声明会横向顶出视口（左右对称溢出不会让 scrollWidth 变大，探针会漏判）。 */
html, body,
.dk-sky, .dk-page, .dk-hud, .dk-chip, .dk-btn, .dk-keyboard, .dk-key, .dk-word,
.container, .stats-container, .stat-item, .word-header, .word-display,
.word-image, .mode-toggle, .mode-options, .mode-option,
.key, .keyboard, .keyboard-row, .keyboard-bottom-row,
.restart-btn, .completion-container, .message, .word-info{
  box-sizing:border-box;
}

/* ============ 2. 外壳 ============ */
/* 同 test 页：36spell.css 的 body 也是 flex 列容器，列方向 flex-shrink 默认 1，
   内容一超高子项就会被压扁（进度条/统计条最容易中招），所以除站点导航外
   一律不参与收缩。 */
body > *:not(.sidebar):not(.sub-menu){ flex-shrink:0; }

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：nav.css 用 body.has-topbar{padding-top:52px}
     给固定顶栏让位，用 !important 压它会出事（spell 页踩过一次）。 */
  padding-left:8px !important;
  padding-right:8px !important;
  padding-bottom:24px !important;
  overflow-x:hidden;
}

/* canvas 粒子：原设计在白底上是"蓝色点阵"。换成浅紫天空后仍在，但要更淡，
   免得跟星尘抢戏。z-index:-1 与 .dk-sky 同层，DOM 顺序决定谁在上（canvas 在后 → 在上）。 */
.particles{ opacity:.4; }

/* ============ 3. 主容器（故事书页） ============ */
.container{
  max-width:800px !important;
  padding:clamp(14px,4vw,26px) clamp(10px,3.4vw,22px) !important;
  margin:0 auto !important;
  border-radius:var(--dk-r-page) !important;
  background:var(--dk-page-bg) !important;
  box-shadow:var(--dk-page-shadow) !important;
}
/* 泛光层会盖在键盘上，本页只要顶部烫金书脊 */
.container::after{ content:none !important; }

/* h1#main-title 只是个包着统计条的壳（原标记如此），抹掉它的排版影响 */
#main-title{
  margin:0 0 12px !important;
  padding:0 !important;
  font-size:inherit !important;
  line-height:normal !important;
  color:inherit !important;
}

/* ============ 4. 顶部统计（HUD） ============ */
.stats-container{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  gap:8px !important;
  justify-content:center !important;
  flex-wrap:wrap;
}
.stat-item{
  color:var(--dk-ink-soft) !important;
  gap:6px;
  font-size:13.5px !important;
}
.stat-item i{ margin-right:0 !important; font-size:13px !important; }
/* Font Awesome 图标是文字，会跟随 color；各自给语义色 */
.stat-item:nth-child(1) i{ color:var(--dk-vio); }
.stat-item:nth-child(2) i{ color:var(--dk-ok); }
.stat-item:nth-child(3) i{ color:var(--dk-no); }
#time-display{ color:var(--dk-vio-deep) !important; font-weight:900 !important; font-variant-numeric:tabular-nums; }
#accuracy-display{ color:var(--dk-ok) !important; font-weight:900 !important; font-variant-numeric:tabular-nums; }
#error-display{ color:var(--dk-no) !important; font-weight:900 !important; font-variant-numeric:tabular-nums; }

/* ---- 小屏统计条单行化（2026-09-14 二次修正） ----
   实测（伪小程序 UA）：三项 + 2×8px 间隙天然宽 ~351px → 390 能放下、360/320 放不下。
   ≤480px：强制 nowrap + 字号降到 12px（总宽 ~310px，360 起放得下）；
   ≤340px：确实放不下 → 按用户要求隐藏「错误次数」一项，保留用时/正确率两项目然单行。
   stat-item 内部也要 nowrap，否则"用时: 00:05"会先在项内折行。 */
@media (max-width:480px){
  .stats-container{ flex-wrap:nowrap !important; gap:6px !important; }
  .stat-item{ white-space:nowrap; font-size:12px !important; gap:4px; }
  .stat-item i{ font-size:11.5px !important; }
}
@media (max-width:340px){
  .stat-item:nth-child(3){ display:none; }
}

/* ============ 5. 听写模式开关 ============ */
/* 原设计是一个 180px 的紫药丸 + 一个左右滑动的小白点。保留"滑动开关"这个
   心智模型（孩子一看就懂），只换成挤塑玩具材质。 */
.mode-toggle{
  width:200px !important;
  min-height:44px;
  padding:0 42px !important;
  margin:0 auto 6px !important;
  border-radius:999px !important;
  background:var(--dk-plastic-bg) !important;
  color:var(--dk-ink-strong) !important;
  font-family:var(--dk-font-cn) !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-shadow:var(--dk-plastic-shadow) !important;
  transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s, background .2s, color .2s !important;
}
.mode-toggle:hover{ background:var(--dk-plastic-bg-hover) !important; color:var(--dk-vio-deep) !important; }
.mode-toggle:active{ transform:translateY(3px) !important; box-shadow:var(--dk-plastic-shadow-press) !important; }
.mode-toggle::before{
  left:9px !important; top:50% !important; transform:translateY(-50%);
  width:15px !important; height:15px !important;
  background:linear-gradient(180deg,#e6dcff,var(--dk-vio)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(78,54,155,.4) !important;
}
.mode-toggle.active::before{ left:calc(100% - 24px) !important; }
.mode-toggle.active{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
}
.mode-toggle.active::before{ background:linear-gradient(180deg,#fff,#ffe9a8) !important; }

/* 下拉菜单 */
.mode-options{
  border-radius:var(--dk-r-plate) !important;
  background:linear-gradient(180deg,#fffdf8,#f8f2ff) !important;
  box-shadow:0 0 0 1px rgba(122,94,226,.16),
             inset 0 2px 0 #fff,
             0 18px 34px -16px rgba(78,54,155,.6) !important;
  padding:6px !important;
  overflow:hidden;
}
.mode-option{
  border-radius:12px !important;
  color:var(--dk-ink-soft) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
}
.mode-option:hover{ background:rgba(122,94,226,.1) !important; }
.mode-option.active{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
}
/* 原设计用 content:"✓" 这个字形（不是 emoji，可以留），但白底上要换色 */
.mode-option.active::before{ color:#fff !important; }

/* ============ 6. 题面 ============ */
.word-image{
  border-radius:var(--dk-r-tile) !important;
  box-shadow:0 0 0 1px rgba(122,94,226,.16),
             inset 0 2px 0 #fff,
             0 10px 18px -12px rgba(78,54,155,.6) !important;
  background:#fff;
  padding:2px;
}
.word-display{
  font-size:clamp(28px,8vw,44px) !important;
  margin:6px 0 0 !important;
  color:var(--dk-ink-strong) !important;
  font-family:var(--dk-font-en) !important;
}
/* 答案位：原来是 3px 灰下划线。改成"书写线"——线更柔、字更实，
   current 用主色勾出来，correct/incorrect 走语义色（原来是硬编码的绿/红）。 */
.letter{
  height:40px !important;
  border-bottom:3px solid rgba(122,94,226,.26) !important;
  color:var(--dk-ink-strong);
  font-family:var(--dk-font-en) !important;
  font-weight:800 !important;
}
.letter.hidden-letter{ color:transparent !important; }
.letter.space{ border-bottom-style:dashed !important; border-bottom-color:rgba(122,94,226,.34) !important; }
.letter.current{
  border-bottom-color:var(--dk-vio) !important;
  box-shadow:0 3px 0 -1px rgba(122,94,226,.35);
  transform:none !important;
}
.letter.correct{ color:var(--dk-ok) !important; border-bottom-color:var(--dk-ok) !important; }
.letter.incorrect{ color:var(--dk-no) !important; border-bottom-color:var(--dk-no) !important; }

/* ---- 空格/符号自动补齐（2026-09-14） ----
   用户只需打字母；光标经过空格/'/()/-.!等符号时 JS 给符号格加 .correct+.auto-fill，
   这里负责「点亮 + 弹一下」的观感。
   注意 transform 只作用于符号格自身（无 JS 依据 getBoundingClientRect 定位的元素，
   与 36.html 的 .word-cursor 红线无关）。 */
.letter.auto-fill{
  animation:dkAutoPop .45s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes dkAutoPop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.45); }
  100%{ transform:scale(1); }
}
/* 符号格补齐后下划线用实线绿（虚线留给「还没走到」的空格） */
.letter.non-letter.correct{
  border-bottom-style:solid !important;
}

/* 发音喇叭 —— 尺寸取 44×44 是为了过触摸目标下限（实测 40×40 会被判偏小） */
.speaker{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  font-size:0 !important;          /* 藏掉 FA 字形，改用底色 + 背景图 */
  color:transparent !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.4 9.4h3.4L12.6 5v14l-4.8-4.4H4.4z'/><path d='M16.2 9.2a4 4 0 0 1 0 5.6M19 6.6a7.6 7.6 0 0 1 0 10.8'/></svg>");
  background-position:center; background-repeat:no-repeat; background-size:22px 22px;
  background-color:var(--dk-vio);
  box-shadow:var(--dk-vio-plastic-shadow) !important;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s, filter .2s !important;
}
.speaker:hover{ transform:none !important; filter:brightness(1.06); box-shadow:var(--dk-vio-plastic-shadow), var(--dk-halo) !important; }
.speaker:active{ transform:translateY(3px) !important; box-shadow:var(--dk-plastic-shadow-press) !important; }

/* 词义信息 */
.word-info{ margin:8px 0 0 !important; }
.phonetic{ font-size:16px !important; color:var(--dk-ink-mute) !important; font-family:'Lucida Sans Unicode','Arial Unicode MS',var(--dk-font-en),sans-serif; }
.translation{ font-size:14px !important; color:var(--dk-ink-soft) !important; font-weight:700; margin:4px 0 0 !important; }

/* 反馈浮层胶囊（2026-09-14 用户要求）：不再占文档流 —— 屏幕正中弹出的小胶囊，
   显示 1 秒自动消失（JS 清空后 :empty 整颗隐形），空槽完全 removed 出布局。
   ① pointer-events:none —— 悬在键盘上方时绝不能挡按键；
   ② z-index 高于 nav.css 底栏(999)/子菜单(1000)；
   ③ 动画只动 transform（无 fill），透明度交还 :empty 切换；
   ④ 错误提示固定红胶囊（与 choice/spell 反馈同材质同色系）。 */
.message{
  position:fixed;
  left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1200;
  pointer-events:none;
  max-width:min(88vw, 430px);
  min-height:0 !important;
  margin:0 !important;
  padding:10px 18px 11px;
  border-radius:22px;
  font-size:clamp(14px,3.7vw,16.5px) !important;
  font-weight:800 !important;
  line-height:1.4;
  text-align:center;
  letter-spacing:.2px;
  color:#7e0f28 !important;
  background:linear-gradient(180deg,#fff2f5,#ffe1e8) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(179,32,58,.32),
    inset 0 0 0 1.5px rgba(179,32,58,.32),
    0 10px 22px -10px rgba(120,10,35,.6);
  animation:dkMsgIn .34s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes dkMsgIn{
  from{ transform:translate(-50%,calc(-50% + 18px)) scale(.9); }
  to{ transform:translate(-50%,-50%) scale(1); }
}
/* 空态整颗隐形（固定定位后彻底不占任何布局空间） */
.message:empty{
  opacity:0;
  visibility:hidden;
  background:none !important;
  box-shadow:none !important;
}

/* ============ 7. 键盘（挤塑积木） ============ */
/* 原设计在 ≤480px 把键压到 min-width:10px / height:30px —— 实测键只有
   26~30px 宽、30px 高，孩子很容易点错。这里改成 flex 均分 + 固定高：
   一行 10 键在 390px 视口下最多只能分到 ~32px 宽（10×44+间隙 已经超过视口宽，
   物理上做不到 44px 宽），所以**宽度吃满、高度给足 48px**，纵向命中区够大，
   比例也接近手机自带键盘。 */
.keyboard{
  margin-top:14px !important;
  gap:6px !important;
}
.keyboard::before{
  background:linear-gradient(90deg, rgba(197,144,32,0), #e6b64a 22%, #ffe9a8 50%, #e6b64a 78%, rgba(197,144,32,0)) !important;
  height:2px !important;
  top:-8px !important;
  opacity:.85;
}
.keyboard-row{ gap:3px !important; justify-content:center !important; }
.keyboard-bottom-row{ gap:8px !important; margin-top:6px !important; }

.key{
  flex:1 1 0;
  min-width:0 !important;
  max-width:36px;
  height:48px !important;
  padding:0 !important;
  border-radius:12px !important;
  color:var(--dk-ink-strong) !important;
  font-family:var(--dk-font-en) !important;
  font-size:16px !important;
  font-weight:800 !important;
  background:var(--dk-plastic-bg) !important;
  box-shadow:var(--dk-plastic-shadow) !important;
  transition:transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s, background .2s !important;
}
.key:hover{ transform:translateY(-2px) !important; background:var(--dk-plastic-bg-hover) !important; box-shadow:var(--dk-plastic-shadow), var(--dk-halo) !important; }
.key:active,
.key.active{ transform:translateY(3px) !important; box-shadow:var(--dk-plastic-shadow-press) !important; }

/* 十组彩色键：原来的 10 条高饱和渐变（配深字勉强、配白字不够）压成
   10 组"糖果纸"浅色，仍然一眼分区、帮孩子快速找键，但深墨字对比度富余。 */
.key.q, .key.a, .key.z{ background:linear-gradient(180deg,#ffe6ea,#ffd2da) !important; }
.key.w, .key.s, .key.x{ background:linear-gradient(180deg,#e2efff,#cde2ff) !important; }
.key.e, .key.d, .key.c{ background:linear-gradient(180deg,#ddf8ea,#c6f0dc) !important; }
.key.r, .key.f, .key.v{ background:linear-gradient(180deg,#ffeedf,#ffdcc6) !important; }
.key.t, .key.g, .key.b{ background:linear-gradient(180deg,#ebe6ff,#dcd3ff) !important; }
.key.y, .key.h, .key.n{ background:linear-gradient(180deg,#fce6f6,#f7d3ef) !important; }
.key.u, .key.j, .key.m{ background:linear-gradient(180deg,#e4f5e5,#d2eed3) !important; }
.key.i, .key.k, .key.comma{ background:linear-gradient(180deg,#fff5d6,#ffe9b3) !important; }
.key.o, .key.l, .key.period{ background:linear-gradient(180deg,#ffe6e6,#ffd0d0) !important; }
.key.p{ background:linear-gradient(180deg,#ddf7f5,#c6efec) !important; }
.key.shift{ flex:0 0 auto; min-width:0 !important; max-width:none; padding:0 14px !important; font-size:14px !important; font-family:var(--dk-font-cn) !important; }
.key.space{ flex:1 1 auto; min-width:0 !important; max-width:none; padding:0 16px !important; font-size:14px !important; font-family:var(--dk-font-cn) !important; }

/* ============ 8. 结算 ============ */
.completion-container{
  height:auto !important;
  padding:16px 0 4px !important;
  gap:4px;
}
.completion{ color:var(--dk-ok) !important; font-size:17px !important; margin-bottom:10px !important; }
/* 行内样式写死的 #e74c3c（旧红），只能靠 !important 收回（样式表可以合法压内联） */
#total-time-display{
  color:var(--dk-vio-deep) !important;
  font-size:17px !important;
  margin-bottom:14px !important;
}
/* 全部答完时 completeWord() 会把「错误单词列表」用内联样式灌进 #completion：
   `<li style="…border-left:3px solid #e74c3c">` + `<span style="…color:#e74c3c">序号</span>`
   —— #e74c3c 压白底只有 3.4:1，14px 字号下不达标。按内联色存在与否统一收回。
   （同一段里 #333/#666/#555 分别约 12/5.7/7.4:1，可以留。） */
#completion [style*="#e74c3c"]{ color:var(--dk-no) !important; }
.restart-btn{
  width:auto !important;
  min-width:130px;
  margin:5px !important;
  border-radius:var(--dk-r-ctl) !important;
}
/* #back-to-study-btn 是 id（1-0-0），比 .dk-btn 高一档，逐个点名 */
#back-to-study-btn{
  background:var(--dk-plastic-bg) !important;
  color:var(--dk-ink-strong) !important;
  box-shadow:var(--dk-plastic-shadow) !important;
}
#restart-btn{ background:var(--dk-vio-plastic) !important; color:#fff !important; box-shadow:var(--dk-vio-plastic-shadow) !important; }
#restart-btn:active, #back-to-study-btn:active{ transform:translateY(3px) !important; box-shadow:var(--dk-plastic-shadow-press) !important; }

/* ============ 9. 响应式 ============ */
@media (max-width:480px){
  .container{ padding:14px 10px !important; }
  .stat-item{ font-size:12.5px !important; }
  .mode-toggle{ width:180px !important; }
  .letter{ height:36px !important; font-size:1.5rem !important; }
  .key{ height:46px !important; font-size:15px !important; border-radius:11px !important; }
  .word-image{ max-width:150px !important; max-height:104px !important; }
}
@media (max-width:340px){
  .container{ padding:12px 8px !important; }
  .key{ height:44px !important; font-size:14px !important; border-radius:10px !important; }
  .keyboard-row{ gap:2px !important; }
  .letter{ height:32px !important; font-size:1.35rem !important; }
}

/* ============ 10. 无障碍 ============ */
.key:focus-visible, .mode-toggle:focus-visible, .mode-option:focus-visible,
.speaker:focus-visible, .restart-btn:focus-visible{
  outline:3px solid var(--dk-vio-deep); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .key, .speaker, .mode-toggle, .restart-btn{ animation:none !important; transition:none !important; }
}