/* =====================================================================
   单词连连看（test/test.html）· 童话主题适配层
   ---------------------------------------------------------------------
   底座：comm/disney-kit.css（令牌 + 材质配方 + dk-* 组件）
   本文件只干两件事：
     ① 把 games.css 的旧糖果玻璃拟态规则**压掉**；
     ② 按本页的结构调尺寸、间距、断点。
   回滚：删掉 test.html 里指向本文件与 disney-kit.css 的两行 <link>。
   ---------------------------------------------------------------------
   不动的东西
   · 不碰 comm/*.css（nav.css 等其它页面在用）；站点顶栏 .topbar 与侧栏
     .sidebar 保持全站原样。
   · 不碰 test/games.js（压缩混淆过的业务脚本）、不动任何类名与 id。
   · 卡片语言色块（.card::before）与角标（.card::after）是原设计里
     「区分中英文」的信息载体，保留语义、只换材质。
   ===================================================================== */

/* ============ 1. 盒模型 ============ */
/* games.css 自己有 *{box-sizing:border-box}，这里只补主题新增的元素。 */
.dk-sky, .dk-page, .dk-result, .dk-seg, .dk-seg-item,
.dk-hud, .dk-chip, .dk-rail, .dk-rail-fill, .dk-btn{ box-sizing:border-box; }

/* ⚠️ body 是 flex 列容器（games.css），列方向的 flex-shrink 默认 1：
   内容一超高，进度条这种"小东西"会被直接压成 0px，而 docH 恰好等于视口高，
   于是探针还会报"无需滚动"。**任何"看起来紧凑"的读数都要先确认不是被压扁的。**
   除站点导航外，本页所有直接子项都不参与收缩。 */
body > *:not(.sidebar):not(.sub-menu){ flex-shrink:0; }

/* ============ 2. 外壳 ============ */
/* games.css 用 body::before / body::after 做了两颗浮动光球（filter:blur(48px)
   + 固定 280/240px 尺寸）。底座改用独立元素 .dk-sky，但**伪元素本身还在**，
   残留的 width/height/filter 会渗进新样式，所以这里显式关掉。 */
body::before,
body::after{ display:none !important; }

body{
  /* 覆盖 games.css 的暖米底与四角色斑 */
  background-color:var(--dk-sky-2);
  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;
  padding:16px 14px calc(96px + env(safe-area-inset-bottom));
  color:var(--dk-ink);
}

/* ============ 3. 标题 ============ */
/* 原来是一条会流动的彩虹渐变字。浅底上彩虹的亮端（#feca57）几乎读不出来，
   改成「深紫 → 仙紫」的沉稳渐变（两端都过 AA），把"魔法感"交给金色书脊与
   光点背景，而不是靠字的亮度。 */
.game-title{
  background:linear-gradient(96deg,#4a2a9e 0%,#6a44ec 46%,#4c2ad0 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:none !important;
  text-shadow:none !important;
  filter:drop-shadow(0 2px 6px rgba(122,94,226,.22));
  font-size:clamp(1.3rem,6vw,1.95rem);
  letter-spacing:2px;
}
/* 标题下的金线：从"彩虹条"改成烫金渐隐条，收窄一点更像一枚装饰而不是分隔线 */
.game-title::after{
  background:linear-gradient(90deg, rgba(197,144,32,0), #e6b64a 22%, #ffe9a8 50%, #e6b64a 78%, rgba(197,144,32,0)) !important;
  box-shadow:0 1px 6px rgba(255,190,80,.5);
  height:3px;
  width:52% !important;
}

/* ============ 4. 模式分段控件 ============ */
/* games.css 的 .mode-btn.active 是蓝紫渐变 + 高阴影，这里让底座的挤塑玩具
   （color:var(--ink-soft) + transparent 背景）接管；透明度为 0 的旧背景自然失效。 */
.mode-buttons{
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(238,231,255,.8)) !important;
  border:1px solid rgba(122,94,226,.16) !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;
  margin:22px 0 14px;
  padding:6px;
}
.mode-btn{
  color:var(--dk-ink-soft) !important;
  font-size:clamp(0.9rem,3.7vw,1rem) !important;
  padding:9px 16px !important;
  /* ⚠️ games.css 有一条全局 `button{... margin-top:20px}`（给底部"重新开始"用的），
     它同样命中分段控件里的按钮 —— 结果是胶囊里的两个按钮整体下沉 20px，
     看着像"没对齐"。实测 container 80px 高而按钮只有 46px，上方多出 27px。 */
  margin:0 !important;
}
.mode-btn:hover:not(.active){ color:var(--dk-ink-strong) !important; background:rgba(122,94,226,.09) !important; }
.mode-btn.active{
  color:#fff !important;
  background:var(--dk-vio-plastic) !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
  transform:none !important;
}

/* ============ 5. 状态槽（HUD） ============ */
#status > div{
  background:linear-gradient(180deg,#fff,#f6f1ff) !important;
  border:1px solid rgba(122,94,226,.15) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -2px 0 rgba(122,94,226,.13),
             0 8px 14px -10px rgba(78,54,155,.4) !important;
  color:var(--dk-ink-soft) !important;
}
#status > div:first-child,
#status > div:last-child{
  background:linear-gradient(180deg,#fff,#f6f1ff) !important;
  border-color:rgba(122,94,226,.15) !important;
}
#status span{ color:var(--dk-ink-strong) !important; }
#status > div:first-child span{ color:var(--dk-vio-deep) !important; }
#status > div:last-child span{ color:var(--dk-warn) !important; }

/* ============ 6. 进度星轨 ============ */
/* 底座的星轨末端有一颗金色星球，会被 games.css 的 overflow:hidden 切掉。 */
.progress-wrap{
  overflow:visible !important;
  background:linear-gradient(180deg, rgba(122,94,226,.14), rgba(122,94,226,.08)) !important;
  box-shadow:inset 0 2px 4px rgba(78,54,155,.16), 0 1px 0 #fff !important;
  height:10px !important;
  margin:2px auto 20px !important;
}
.progress-bar{
  background:linear-gradient(90deg,var(--dk-vio) 0%,#9a6bff 52%,var(--dk-gold) 100%) !important;
  box-shadow:0 0 12px rgba(150,110,255,.55) !important;
  animation:none !important;
}

/* ============ 7. 牌桌（故事书页） ============ */
#gameContainer{
  background:var(--dk-page-bg) !important;
  border-radius:var(--dk-r-page) !important;
  box-shadow:var(--dk-page-shadow) !important;
  padding:20px 14px !important;
  margin:0 auto;
  gap:12px !important;
}
/* 泛光层（::after）是给"顶在文字上的卡片"用的；牌桌本身要透出里面的积木，
   所以只留顶部烫金书脊，不要那层右上角高光。 */
#gameContainer::after{ content:none !important; }
#stats{ background:var(--dk-page-bg) !important; box-shadow:var(--dk-page-shadow) !important; }
#stats h2{
  background:linear-gradient(96deg,#4a2a9e,#6a44ec) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ============ 8. 卡片（挤塑字母积木） ============ */
/* ⚠️ 原设计是**固定高** clamp(60px,17vw,80px)，而词表里有像
   「pron. 我 名词或形容词后，使意思完整；向，到，朝」这种长释义 —— 文字直接
   溢出卡片（改前截图里就能看到）。这里改成 min-height + height:auto，
   让长卡片自己长高；同一行由 flex 的 align-items:stretch 拉齐。 */
#gameContainer .card{
  height:auto !important;
  min-height:clamp(62px,17vw,82px);
  padding:9px 12px 9px 20px !important;
  border:1px solid rgba(122,94,226,.16) !important;
  border-radius:var(--dk-r-tile) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8f4ff 100%) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 var(--dk-lip),
             0 3px 0 #ded4f8,
             0 8px 14px -8px rgba(78,54,155,.4) !important;
  color:var(--dk-ink) !important;
  font-size:clamp(12px,3.3vw,15px) !important;
  line-height:1.3;
  word-break:break-word;
  overflow:visible !important;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s, background .2s;
}
#gameContainer .card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(122,94,226,.4) !important;
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 var(--dk-lip),
             0 3px 0 #ded4f8,
             0 14px 22px -10px rgba(78,54,155,.5),
             var(--dk-halo) !important;
}
#gameContainer .card:active{ transform:translateY(2px) !important; }

/* 左侧语言色条 → 书签飘带（语义不变：蓝=英文，橙=中文） */
#gameContainer .card::before{
  top:9px !important; bottom:9px !important; left:0 !important;
  width:7px !important; border-radius:0 5px 5px 0 !important;
  background:linear-gradient(180deg,var(--dk-vio-hi),var(--dk-vio-deep)) !important;
  box-shadow:0 0 8px rgba(122,94,226,.5) !important;
}
#gameContainer .card.card-zh::before{
  background:linear-gradient(180deg,#ffd08a,var(--dk-warn-hi)) !important;
  box-shadow:0 0 8px rgba(255,180,90,.55) !important;
}
/* 右上角小圆点 → 一颗小星（英）/ 一个小圆（中） */
#gameContainer .card::after{
  top:9px !important; right:9px !important;
  width:9px !important; height:9px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 34% 30%, #b9a4ff, var(--dk-vio) 70%) !important;
  opacity:.5 !important;
}
#gameContainer .card.card-zh::after{ background:radial-gradient(circle at 34% 30%, #ffe9a8, var(--dk-gold-2) 70%) !important; }
#gameContainer .card:hover::after{ opacity:1 !important; transform:scale(1.3) !important; }

/* 选中态：紫塑料按下去（原来是整块高饱和渐变 + 4px 外光圈，太吵） */
#gameContainer .card.active,
#gameContainer .card.card-zh.active{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.6) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),
             inset 0 -3px 0 var(--dk-vio-lip),
             0 3px 0 var(--dk-vio-lip),
             var(--dk-halo-strong) !important;
  transform:translateY(3px) scale(1) !important;
}
#gameContainer .card.active::before{ background:rgba(255,255,255,.62) !important; box-shadow:none !important; }
#gameContainer .card.active::after{ background:#fff !important; opacity:1 !important; transform:scale(1.2) !important; }

/* 配对成功：金 + 绿双环爆闪（保留原动画骨架，只换配色） */
@keyframes candy-burst{
  0%   { transform:scale(1) rotate(0); opacity:1; }
  35%  { transform:scale(1.16) rotate(3deg); opacity:1;
         box-shadow:0 0 0 6px rgba(10,128,96,.32), 0 0 40px rgba(10,128,96,.55), 0 0 70px rgba(255,215,107,.5); }
  100% { transform:scale(0) rotate(180deg); opacity:0; }
}

/* ============ 9. 反馈气泡 ============ */
.feedback{
  background:linear-gradient(180deg,#fff,#f7f3ff) !important;
  border:1px solid rgba(122,94,226,.18) !important;
  color:var(--dk-ink-strong) !important;
  box-shadow:inset 0 2px 0 #fff,
             inset 0 -3px 0 var(--dk-lip),
             0 16px 34px -16px rgba(78,54,155,.55) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-weight:800;
  letter-spacing:.3px;
}
/* 让反馈气泡里的图标跟文字同色系 */
.feedback .dk-i{ vertical-align:-.22em; }

/* ============ 10. 底部主按钮 ============ */
/* games.css 的 button 是彩虹渐变 + 流动动画 + 大投影。 */
body > button.dk-btn{
  background:var(--dk-vio-plastic) !important;
  color:#fff !important;
  animation:none !important;
  box-shadow:var(--dk-vio-plastic-shadow) !important;
  padding:0 26px !important;
  font-size:clamp(.95rem,4vw,1.05rem) !important;
  margin:22px auto 0 !important;
  letter-spacing:1px;
}
body > button.dk-btn:hover{ transform:translateY(-2px) !important; box-shadow:var(--dk-vio-plastic-shadow), var(--dk-halo) !important; }
body > button.dk-btn:active{ transform:translateY(3px) !important; box-shadow:var(--dk-plastic-shadow-press) !important; }

/* ============ 11. 响应式 ============ */
@media (max-width:480px){
  body{ padding:12px 10px calc(90px + env(safe-area-inset-bottom)); }
  #gameContainer{ gap:9px !important; padding:15px 10px !important; }
  .mode-buttons{ margin:16px 0 12px; }
  #gameContainer .card{ padding:8px 10px 8px 17px !important; }
}

/* ============ 12. 无障碍 ============ */
@media (prefers-reduced-motion: reduce){
  .mode-btn, #gameContainer .card, body > button.dk-btn{ transition:none !important; }
  .mode-btn.active::after, .progress-bar{ animation:none !important; }
}