/* ============================================================
   巫师决斗 + 决斗俱乐部（ui/duel.js / ui/duelclub.js / ui/duel-deck.js）
   ------------------------------------------------------------
   决斗那一屏**直接复用神奇动物战斗的骨架**（main.css 的 .battle / .bt-* 那一套），
   所以这一份只加：两边的圆形"脸"、揭晓区、以及类别色卡牌的几处小补充。
   色板、字体、间距一律走 main.css 的 token。
   ============================================================ */

/* ═══════════ 一、大厅正中那块【决斗俱乐部】横匾（ui/screens-map.js） ═══════════ */

.map-row.center { justify-content: center; }

/* 它不是一张普通便签，是一块描金的横匾：左右两支交叉魔杖当徽记，中间名字 + 一行小字 */
.place.duel-club {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 12px;
  border: 1px solid rgba(226, 196, 128, 0.85);
  border-radius: 5px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(120, 92, 40, 0.5), transparent 62%),
    linear-gradient(178deg, #2b1f14, #17100b 92%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 196, 128, 0.28),
    inset 0 0 20px rgba(180, 130, 60, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(200, 156, 84, 0.22);
  transform: translateY(-2px);
  transition: transform 180ms ease, box-shadow 220ms ease;
}
.place.duel-club:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(240, 214, 150, 0.4),
    inset 0 0 22px rgba(200, 150, 70, 0.28),
    0 12px 26px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(224, 178, 100, 0.42);
}
.place.duel-club .place-name {
  color: #f6e6bf;
  letter-spacing: 0.1em;
  font-size: 17px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.place.duel-club .place-sub { color: rgba(232, 200, 140, 0.72); font-size: 11px; }

/*
 * 晚上那块匾：灯灭了。
 * 创作者 2026-10-14：「决斗俱乐部晚上不开门，散场了」——压暗、金光收掉、不再上浮，
 * 一眼看得出今晚别往这儿走；按下去有一张纸说为什么（见 screens-map.js 的 openClubShut）。
 */
.place.duel-club.is-shut {
  border-color: rgba(150, 132, 96, 0.5);
  background: linear-gradient(178deg, #1a1611, #0d0b08 92%);
  box-shadow: inset 0 0 0 1px rgba(150, 132, 96, 0.16), 0 8px 20px rgba(0, 0, 0, 0.55);
  transform: none;
  filter: saturate(0.5) brightness(0.84);
}
.place.duel-club.is-shut:hover {
  transform: none;
  border-color: rgba(160, 142, 104, 0.62);
  box-shadow: inset 0 0 0 1px rgba(160, 142, 104, 0.2), 0 8px 20px rgba(0, 0, 0, 0.55);
}
.place.duel-club.is-shut .place-name { color: #b6ab93; text-shadow: none; }
.place.duel-club.is-shut .place-sub { color: rgba(206, 176, 130, 0.6); }
.place.duel-club.is-shut .duc-wand { box-shadow: none; filter: saturate(0.45) brightness(0.78); }
.place.duel-club.is-shut .duc-spark { animation: none; opacity: 0.3; }

/* 徽记：两支交叉的魔杖（两条渐变线 + 一颗星火），形状全靠 CSS，不引图 */
.duc-emblem { position: relative; width: 34px; height: 34px; flex: none; }
.duc-wand {
  position: absolute; left: 3px; top: 16px; width: 28px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #6b4a24, #d9b06a 46%, #f2e0af 58%, #8a6228);
  box-shadow: 0 0 6px rgba(224, 178, 100, 0.6);
}
.duc-wand.a { transform: rotate(38deg); }
.duc-wand.b { transform: rotate(-38deg); }
.duc-spark {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4d4, rgba(226, 178, 96, 0.2) 70%);
  box-shadow: 0 0 12px rgba(240, 214, 150, 0.9);
  animation: ducSpark 2.4s ease-in-out infinite;
}
@keyframes ducSpark { 0%, 100% { transform: scale(0.86); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 1; } }
.duc-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }

/* ═══════════ 二、背包里那一行【卡包】（ui/duel-deck.js） ═══════════ */

.bag-deck-count { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-soft); }
.bag-deck-stack { position: relative; width: 46px; height: 34px; flex: none; }
.bag-deck-stack .bds {
  position: absolute; top: 0; width: 22px; height: 32px; border-radius: 3px;
  border: 1px solid rgba(224, 189, 120, 0.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  /*
   * 三张牌各自轻轻浮（创作者 2026-10-14 要的：背包里那根杖与这摞牌都"悬着"）。
   * 错开一点点 delay，三张才不是一块儿升降、看着像在呼吸。
   * 幅度比那根杖还小一档（±2px、歪 0.8°）——一摞牌晃得厉害就像要散了。
   */
  animation: bdsFloat 4.2s ease-in-out infinite;
}
@keyframes bdsFloat {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50%      { transform: translateY(-2px) rotate(0.8deg); }
}
.bag-deck-stack .bds.a { left: 0;  background: linear-gradient(180deg, #3a1c18, #1a0f0c); animation-delay: 0s; }
.bag-deck-stack .bds.b { left: 12px; background: linear-gradient(180deg, #1a2740, #0d1420); animation-delay: 0.4s; }
.bag-deck-stack .bds.c { left: 24px; background: linear-gradient(180deg, #2a1f3d, #15101f); animation-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  .bag-deck-stack .bds { animation: none; }
}

/* ═══════════ 三、卡包编辑纸：两排小牌 ═══════════ */

.dk-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 2px 10px; }
.dk-count { font-size: var(--fs-m); font-weight: 700; color: var(--ink); }
.dk-rule { font-size: var(--fs-xs); color: var(--ink-soft); }
.dk-cap { font-size: var(--fs-s); font-weight: 700; color: var(--red); letter-spacing: 0.06em; margin: 8px 2px 6px; }
.dk-empty { font-size: var(--fs-s); color: var(--ink-soft); margin: 4px 2px 12px; }

/* 一排能横滑的小牌 */
.dk-tiles {
  display: flex; gap: 8px; align-items: stretch;
  overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: thin;
}

/* 一张小牌：窄、竖、按类别上色（深底浅字，牌面读得清） */
.dk-tile {
  position: relative; flex: none;
  width: 64px; height: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px 6px;
  border: 1px solid rgba(150, 118, 74, 0.55);
  border-radius: 5px;
  background: linear-gradient(178deg, #2c2017, #16100b 92%);
  box-shadow: inset 0 0 0 1px rgba(224, 189, 120, 0.16), 0 4px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.dk-tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(224, 189, 120, 0.3), 0 8px 16px rgba(0, 0, 0, 0.5); }
.dk-tile.hue-atk  { border-color: rgba(198, 88, 66, 0.85); background: linear-gradient(178deg, rgba(112, 34, 28, 0.6), rgba(38, 13, 11, 0.78)), #1b1210; }
.dk-tile.hue-def  { border-color: rgba(96, 138, 198, 0.85); background: linear-gradient(178deg, rgba(31, 58, 102, 0.6), rgba(11, 20, 38, 0.78)), #101722; }
.dk-tile.hue-heal { border-color: rgba(104, 166, 116, 0.85); background: linear-gradient(178deg, rgba(40, 74, 48, 0.6), rgba(13, 27, 17, 0.78)), #12201a; }
.dk-tile.hue-util { border-color: rgba(158, 126, 208, 0.85); background: linear-gradient(178deg, rgba(74, 47, 99, 0.6), rgba(23, 15, 35, 0.78)), #191325; }

.dkt-cost {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #2a1c0e;
  background: radial-gradient(circle at 34% 30%, #f4e2b2, #b9873f);
}
.dkt-name {
  font-size: 11px; line-height: 1.25; color: #f4e9d0; font-weight: 700; text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dkt-meta { font-size: 9px; color: rgba(230, 214, 180, 0.72); }
.dkt-count {
  position: absolute; right: 3px; top: 3px;
  font-size: 10px; font-weight: 700; color: #2a1c0e;
  background: rgba(240, 214, 150, 0.92); border-radius: 8px; padding: 0 5px;
}
.dkt-drop {
  position: absolute; right: 3px; top: 3px;
  width: 15px; height: 15px; line-height: 15px; text-align: center;
  font-size: 10px; color: #f0d0c4; background: rgba(96, 28, 22, 0.86); border-radius: 50%;
}
.dk-tile.maxed { opacity: 0.42; cursor: default; }
.dk-tile.maxed:hover { transform: none; box-shadow: none; }
.dk-tile.slot-empty {
  cursor: default; border-style: dashed; border-color: rgba(150, 118, 74, 0.4);
  background: rgba(0, 0, 0, 0.22); box-shadow: none;
}
.dk-tile.slot-empty:hover { transform: none; box-shadow: none; }
.dkt-plus { margin: auto; font-size: 18px; color: rgba(200, 170, 120, 0.4); }

/* ═══════════ 四、决斗俱乐部那一屏（ui/duelclub.js） ═══════════ */

.dc-card {
  width: min(680px, 94%); margin: 4px auto 14px; padding: var(--sp-4);
  border: 1px solid var(--glass-line-2); border-radius: 6px;
  background: var(--glass-2); box-shadow: var(--sh-glass); color: var(--cine-text);
}
.dc-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dc-week { font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--cine-dim); }
.dc-name { font-family: var(--font-hand); font-size: var(--fs-l); color: var(--cine-gold); }
.dc-house { font-size: var(--fs-s); }
.dc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; }
.dc-tag {
  font-size: var(--fs-xs); color: var(--cine-text);
  padding: 2px 9px; border: 1px solid var(--glass-line); border-radius: 10px;
  background: rgba(224, 178, 100, 0.08);
}
.dc-style { font-size: var(--fs-s); color: var(--cine-dim); line-height: 1.6; margin-bottom: 10px; }
.dc-deck-cap { font-size: var(--fs-xs); color: var(--cine-dim); letter-spacing: 0.1em; margin-bottom: 6px; }
.dc-deck { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-deckline {
  display: flex; align-items: center; gap: 5px; font-size: var(--fs-s); color: var(--cine-text);
  padding: 3px 9px; border: 1px solid var(--glass-line); border-radius: var(--r); background: rgba(0, 0, 0, 0.28);
}
.dc-dl-tier { font-size: var(--fs-xs); color: var(--cine-gold); }
.dc-dl-n { font-size: var(--fs-xs); color: var(--cine-dim); }
.dc-state { width: min(680px, 94%); margin: 0 auto 10px; font-size: var(--fs-s); }
.dc-done { color: #b7d9a6; }
.dc-go { color: var(--cine-dim); }
.dc-warn {
  width: min(680px, 94%); margin: 0 auto 10px; padding: 8px 12px; font-size: var(--fs-s); color: #f0cfc6;
  border: 1px solid rgba(158, 66, 60, 0.6); border-radius: var(--r); background: rgba(74, 26, 26, 0.5);
}
.dc-acts { width: min(680px, 94%); margin: 0 auto 14px; display: flex; gap: 10px; justify-content: center; }
.dc-notes { width: min(680px, 94%); margin: 0 auto; padding-left: 20px; font-size: var(--fs-xs); color: var(--cine-dim); line-height: 1.8; }

/* ── 伦敦决斗场：四颗主按钮（窄屏两列、宽屏一排除） ── */
.arena-acts {
  width: min(680px, 94%);
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.arena-acts .btn {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .arena-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 伦敦决斗场：成就墙的方块（和商店同一身暗玻璃 + 描金） ── */
.arena-ach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 640px) {
  .arena-ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.arena-ach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 250px;
  padding: 10px 8px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
}
.arena-ach-card.is-ready {
  border-color: rgba(240, 214, 150, 0.62);
  box-shadow: 0 0 14px rgba(224, 178, 100, 0.12), inset 0 0 0 1px rgba(240, 214, 150, 0.16);
}
.arena-ach-card.is-claimed { opacity: 0.7; }
.arena-ach-art {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
}
.arena-ach-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.arena-ach-weeks { font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--cine-gold); }
.arena-ach-name { font-size: var(--fs-s); color: var(--cine-text); }
.arena-ach-fx { flex: 1 1 auto; font-size: var(--fs-xs); line-height: 1.55; color: var(--cine-dim); }
.arena-ach-card .btn.gold { width: 100%; margin-top: 2px; padding: 5px 8px; font-size: var(--fs-xs); }

/* ── 伦敦决斗场：商店里那一列（和俱乐部同一身暗玻璃 + 描金） ── */
.arena-list { display: flex; flex-direction: column; gap: 7px; }
.arena-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.28);
}
.arena-row-art {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
}
.arena-row-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.arena-row-main { flex: 1 1 auto; min-width: 0; }
.arena-row-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-s); color: var(--cine-text); }
.arena-row-weeks { font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--cine-gold); }
.arena-row-fx { margin-top: 3px; font-size: var(--fs-xs); line-height: 1.55; color: var(--cine-dim); }
.arena-row-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.arena-row-side .btn { width: auto; min-width: 68px; padding: 5px 12px; font-size: var(--fs-xs); }
.arena-price { font-size: var(--fs-xs); color: var(--cine-gold); white-space: nowrap; }
.arena-owned { font-size: 9px; color: #b7d9a6; }

/* ═══════════ 六、决斗这套界面统一的按钮皮 ═══════════
 *
 * 创作者定的口径：**不要又大又白的按钮**，这一套界面里一律用**深色半透明、描金边**的键
 * （压在照片上也好看，和「离开」那颗深棕磨砂是一族）。只有决斗/俱乐部/卡包用 `.btn.gold`，
 * 不动全游戏别的按钮。`.strong` 是这一屏的主按钮（挑战 / 保存 / 确认），只把金边提亮一档。
 */
.btn.gold {
  width: auto;
  text-align: center;
  padding: 9px 20px;
  font-size: var(--fs-m);
  letter-spacing: 0.06em;
  color: #efdfb6;
  background: linear-gradient(180deg, rgba(56, 39, 22, 0.82), rgba(28, 19, 12, 0.9));
  border: 1px solid rgba(224, 178, 100, 0.46);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(224, 178, 100, 0.12);
  backdrop-filter: blur(6px);
}
.btn.gold:hover {
  color: #fff6e4;
  border-color: rgba(240, 210, 150, 0.9);
  background: linear-gradient(180deg, rgba(76, 54, 30, 0.9), rgba(38, 26, 15, 0.94));
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(224, 178, 100, 0.2);
}
.btn.gold:active { transform: translateY(0) scale(0.99); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.btn.gold:disabled { opacity: 0.4; transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.btn.gold.strong {
  color: #f7ebc8;
  border-color: rgba(232, 190, 118, 0.78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(232, 190, 118, 0.22), 0 0 16px rgba(224, 178, 100, 0.18);
}

/* 面板（卡包那张纸 / 弹页）里那一条按钮栏：这几档按钮按内容宽排 */
.panel-acts .btn.gold, .sheet .acts .btn.gold { min-width: 92px; }

/* ═══════════ 七、决斗那一屏 ═══════════
 * 上：敌方一行（头像在血条前面 + 名字/士气/魔力/状态）
 * 中：本回合的结算（常驻）+ 一行战况
 * 下：我方一行（头像 + 名字/士气/状态）
 * 底：手牌栏（沿用 main.css 的 .bt-bar / .bt-hand / .bt-card / .bt-mana）
 */

/* 敌方那一行（居中摆），我方那一行在手牌栏下面（main.css 的 .bt-under 里） */
.duel-top { display: flex; justify-content: center; padding: 2px 0; }

/* 一侧那一行：**头像在血条前面**（左），右边是名字 / 士气 / 魔力 / 状态。
 * 不加底板——和战斗那一屏一样，信息直接浮在照片上。 */
.duel-side { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.duel-side.enemy { border-color: rgba(200, 96, 78, 0.34); }
.duel-side.hurt { animation: duelHurt 430ms ease; }
.duel-side.shielded-hit { animation: duelShieldHit 430ms ease; }
@keyframes duelHurt { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(8px); } 60% { transform: translateX(-6px); } }
@keyframes duelShieldHit { 0%, 100% { box-shadow: none; } 40% { box-shadow: inset 0 0 30px rgba(150, 190, 230, 0.5); } }

/* 预知（夺魂咒）：敌方那一行底下把对手接下来要出的牌列出来 */
.duel-foresee { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.duel-foresee[hidden] { display: none; }
.duel-foresee .df-label { font-size: var(--fs-xs); letter-spacing: 0.14em; color: #cbb7e6; }
.duel-foresee .df-chip {
  font-size: var(--fs-xs); padding: 1px 7px; border-radius: 9px;
  color: #e6dcf6; border: 1px solid rgba(158, 126, 208, 0.6);
  background: rgba(74, 47, 99, 0.34);
}
.duel-foresee .df-more { font-size: var(--fs-xs); color: var(--cine-dim); }

/* 头像：一圈描金圆框，里头是学院徽章（有真人立绘就换 img） */
.duel-avatar {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  border: 2px solid rgba(224, 189, 120, 0.5);
  background: radial-gradient(circle at 50% 38%, rgba(224, 189, 120, 0.16), rgba(0, 0, 0, 0.55) 72%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(224, 189, 120, 0.18);
}
.duel-avatar.enemy { border-color: rgba(200, 96, 78, 0.55); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(200, 96, 78, 0.24); }
/*
 * 那场「邂逅」的三位：头像本身**自带描金椭圆画框**（通讯里那一枚），
 * 所以外面这圈金环要让开——两个框套着看像个相框店（创作者 2026-10-14 指的）。
 */
.duel-avatar.lead { border: 0; background: none; box-shadow: none; overflow: visible; }
.duel-avatar.lead .duel-avatar-img { width: 100%; height: 100%; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.7)); }
.duel-avatar-img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.65)); }
.duel-avatar-sigil { font-size: 26px; color: var(--bt-gold-light); opacity: 0.85; }

/* 信息：名字 / 士气条 / 魔力 / 状态 */
.duel-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.duel-nm { font-family: var(--font-hand); font-size: var(--fs-m); letter-spacing: 0.12em; color: #f0dcb4; }
/*
 * 「邂逅」那三位的隐藏词条（创作者 2026-10-18）：人名底下那一排小标签。
 * 比状态 chip 更淡、更小一格——它是**常驻的词条**，不是这一回合的状态。
 */
.duel-traits { display: flex; flex-wrap: wrap; gap: 4px; }
.duel-trait {
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #e7d3a4;
  background: rgba(74, 55, 28, 0.55);
  border: 1px solid rgba(224, 189, 120, 0.38);
  white-space: nowrap;
}
.duel-hprow { display: flex; align-items: center; gap: 8px; }
.duel-hp { flex: 0 0 auto; width: min(30vw, 170px); height: 6px; border-radius: 2px; background: rgba(10, 7, 5, 0.6); overflow: hidden; }
.duel-hp i { display: block; height: 100%; background: linear-gradient(90deg, #8f2f2a, #c2453a); transition: width 360ms ease; }
.duel-side.player .duel-hp i { background: linear-gradient(90deg, #4f7a52, #7fbf82); }
.duel-hpnum { font-size: var(--fs-xs); color: var(--bt-text); }
.duel-mana { display: flex; align-items: center; gap: 6px; }
.duel-manalb { font-size: var(--fs-xs); color: var(--bt-gold); letter-spacing: 0.1em; }
.duel-mananum { font-size: var(--fs-xs); color: var(--cine-dim); }
.duel-sub { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.duel-shield { font-size: var(--fs-xs); color: var(--cine-dim); opacity: 0.5; }
.duel-shield.on { color: #c6dcea; opacity: 1; }
.duel-ready { font-size: var(--fs-xs); letter-spacing: 0.14em; color: #b7d9a6; }
.duel-status { display: flex; gap: 5px; flex-wrap: wrap; }
.duel-chip { font-size: var(--fs-xs); padding: 1px 7px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.2); }
.duel-chip.control { color: #e8b7ad; border-color: rgba(180, 80, 70, 0.6); }
.duel-chip.block { color: #c6dcea; border-color: rgba(120, 160, 200, 0.6); }
.duel-chip.slow { color: #cbb7e6; border-color: rgba(150, 120, 200, 0.6); }
.duel-chip.weaken { color: #e6c6a0; border-color: rgba(200, 150, 90, 0.6); }
.duel-chip.dot { color: #f0b7a4; border-color: rgba(190, 90, 60, 0.6); }
.duel-chip.hot { color: #b9e3bd; border-color: rgba(90, 160, 110, 0.6); }

/* 中段：本回合的结算（常驻，正中间）在上，战况文字在下。这块地方**腾出来**给结算。 */
.duel-mid {
  position: relative; flex: 1 1 auto; min-height: clamp(128px, 26vh, 240px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 6px;
}
.duel-reveal { display: none; align-items: center; gap: 14px; }
.duel-reveal.on { display: flex; animation: duelRevealIn 260ms ease both; }
@keyframes duelRevealIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.duel-vs { font-family: var(--font-hand); font-size: var(--fs-m); color: var(--bt-gold); opacity: 0.85; }

/* 揭晓用的那张小牌（.bt-card 缩小版） */
.duel-mini.bt-card {
  width: 104px; height: 66px; padding: 7px 7px 6px; cursor: default; justify-content: center; gap: 2px;
}
.duel-mini.bt-card:hover, .duel-mini.bt-card:has(+ .bt-card:hover) { transform: none; }
.duel-mini .bc-cost { position: static; margin: 0 0 1px; }
.duel-mini .bc-name { font-size: var(--fs-s); margin: 0; }
.duel-mini .bc-desc { font-size: 10px; line-height: 1.3; margin: 0; }
.duel-mini .bc-totem, .duel-mini .bc-rune, .duel-mini .bc-sheen, .duel-mini .bc-spark, .duel-mini .bc-in { display: none; }
.duel-mini.cardless {
  width: clamp(118px, 33vw, 150px); height: clamp(116px, 30vw, 134px);
  display: grid; place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 4px; color: rgba(255, 255, 255, 0.4); font-size: var(--fs-s);
}

/* 战况那一行：中段底部一行字（不是绝对定位，随中段排版） */
.duel .bt-log {
  position: static; left: auto; top: auto; transform: none; width: min(92%, 34rem);
  text-align: center; font-size: var(--fs-s); line-height: 1.6;
}
.duel .bt-log.say { animation: duelLogIn 240ms ease both; }
@keyframes duelLogIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.92; transform: none; } }

/* 飘字层：覆盖整个 board（数字落在头像上） */
.duel .bt-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

/* 手牌：选中那一张抬起来、发金光 */
.duel-card.picked {
  transform: translateY(-12px) scale(1.05);
  border-color: var(--bt-gold-light) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 22px rgba(224, 189, 120, 0.5) !important;
}
.duel-cardmeta { position: relative; z-index: 4; display: flex; gap: 3px; align-items: center; justify-content: center; font-size: 10px; color: var(--cine-dim); margin: 1px 0; }
.dcm-tier { color: var(--bt-gold-light); }
.duel-nohand { font-size: var(--fs-s); color: var(--cine-dim); align-self: center; }

/* 底下那条：【确认提交】占着战斗里【结束回合】那个位子。
 * ⚠️ 战斗里那条栏会往上压住我方立绘（负 margin-top）——本屏立绘已经挪到行里了，
 *    这一条负边距要抵掉，否则手牌栏会压到下面那一行。 */
.duel .bt-deck .btn.bt-go { min-width: 96px; }
/*
 * 【跳过回合】与【确认提交】装在同一个小框里（bt-actions）：
 * 那一长条本来会换行——四张牌加两颗按钮在窄屏放不下，分开摆就会一颗掉在牌行尾巴上、
 * 另一颗掉到下一行（一边高一边低，看着像没对齐）。装一起就整块换行，两颗永远并排。
 */
.duel .bt-actions { display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
/*
 * 【跳过回合】：木牌的**尺寸与基线**跟右边那颗【确认提交】对齐（同一排要等高、同一条底边，
 * 见 main.css 的 .bt-deck .btn.bt-go——那一条管的是形状，这里照它的盒子参数抄一份），
 * 但颜色压暗一档、不带金线：次要动作不能和"出手"那颗抢眼球。
 */
.duel .bt-deck .btn.bt-skip {
  flex: none; width: auto; min-width: 0; margin-bottom: 0;
  padding: 5px 12px 6px; text-align: center;
  font-size: var(--fs-xs); letter-spacing: 0.14em;
  color: rgba(214, 198, 168, 0.76);
  background: linear-gradient(180deg, rgba(44, 32, 24, 0.86), rgba(22, 16, 12, 0.92));
  border: 1px solid rgba(196, 154, 85, 0.26); border-radius: 2px;
  box-shadow: 0 2px 0 rgba(10, 7, 5, 0.5), 0 6px 14px rgba(0, 0, 0, 0.42);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.duel .bt-deck .btn.bt-skip:hover { color: #f0e2c4; border-color: rgba(224, 189, 120, 0.5); transform: none; }
.duel .bt-deck .btn.bt-skip:active { transform: translateY(1px); }
.duel .bt-deck .btn.bt-skip:disabled { opacity: 0.4; }
.duel .bt-deck .btn.bt-go { margin-bottom: 0; }
.duel .bt-bar { align-items: center; margin-top: 0; padding-top: 8px; }

/* 结算纸上的小行 */
.duel-result-rows { margin: 4px 2px 8px; }
.duel-row { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; border-bottom: 1px dashed rgba(120, 96, 62, 0.3); }
.duel-row .grow { flex: 1 1 auto; color: var(--ink-soft); font-size: var(--fs-s); }
.duel-row .val { font-weight: 700; color: var(--ink); }
.duel-reward { font-size: var(--fs-s); color: var(--red); }
.narr.lose { color: #6b3a34; }

/* ══════════════════════════════════════════════════════════════════
   八、决斗 UI 视觉重制（2026-10-14，纯 CSS）
   ----------------------------------------------------------------
   · 卡包弹窗：羊皮纸 → 深胡桃木 + 暗金（**只作用于卡包**，用 :has(.dk-head) 锁定，
     和工程里 .panel:has(.ledger-top) 是同一个做法，不碰背包 / 手抄本 / 日程那几张纸）；
   · 四类卡牌各自一套主题（色 / 纹理 / 边角 / 悬浮光），尺寸与结构仍是一套；
   · 战斗卡的文字一律夹在牌里（只改决斗的 .duel-card / .duel-mini，
     神奇动物战斗那一套 .bt-card 一个字都没动）；
   · 双方结算卡左右分区（对手在左、你在右，用 CSS 边条 + 角标，不动 DOM）。
   ⚠️ 「双方效果各自一个小框」做不到纯 CSS：效果文字是引擎拼好的**一个文本节点**
     （见 ui/duel.js 的 composeSummary → .bt-log），CSS 拆不开它。见文末说明。
   ══════════════════════════════════════════════════════════════════ */

/* ── 八.1 卡包弹窗：深胡桃木 + 暗金 ── */
.panel:has(.dk-head) {
  /* 换掉羊皮纸底：木纹极细、四角压暗、边缘一圈内描金 */
  background-image: none;
  background-color: #1c130c;
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(126, 92, 44, 0.22), transparent 62%),
    radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 240, 210, 0.016) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #241a12, #150e08 92%);
  border: 1px solid rgba(198, 158, 88, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(198, 158, 88, 0.14),
    inset 0 0 46px rgba(0, 0, 0, 0.62),
    0 26px 64px rgba(0, 0, 0, 0.72);
  color: #e6d6ae;
}
.panel:has(.dk-head) .panel-head {
  border-bottom: 1px solid rgba(198, 158, 88, 0.26);
  padding-bottom: var(--sp-2);
}
.panel:has(.dk-head) .panel-title .pt-zh {
  color: #f2e4c0;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* 关闭键：古铜金属牌（保留原来那颗图的点击行为与尺寸） */
.panel:has(.dk-head) .x-btn {
  border: 1px solid rgba(198, 158, 88, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(104, 76, 40, 0.9), rgba(44, 30, 16, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.18), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.panel:has(.dk-head) .x-btn:hover {
  border-color: rgba(232, 196, 122, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.3), 0 0 12px rgba(232, 196, 122, 0.34);
}
.panel:has(.dk-head) .x-btn .x-img { filter: brightness(1.04) saturate(0.85); }

/* 八.2 卡包里的字与分区标题 */
.panel:has(.dk-head) .dk-head {
  border-bottom: 1px dashed rgba(198, 158, 88, 0.22);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.panel:has(.dk-head) .dk-count { color: #f4e7c6; letter-spacing: 0.06em; }
.panel:has(.dk-head) .dk-rule { color: #b6a27c; }
.panel:has(.dk-head) .dk-cap {
  color: #e8cb8d;
  border-bottom: 1px solid rgba(198, 158, 88, 0.2);
  padding-bottom: 5px;
  margin: 10px 2px 10px;
}
.panel:has(.dk-head) .dk-cap::before { content: '◆'; margin-right: 7px; font-size: 9px; color: rgba(198, 158, 88, 0.75); }
.panel:has(.dk-head) .dk-empty { color: #b6a27c; }
.panel:has(.dk-head) .panel-body { color: #e6d6ae; }

/* 横向滚动条：暗金轨道 + 深色滑块（不隐藏，让玩家看得见还能滑） */
.panel:has(.dk-head) .dk-tiles {
  padding: 6px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 120, 56, 0.85) rgba(0, 0, 0, 0.4);
}
.panel:has(.dk-head) .dk-tiles::-webkit-scrollbar { height: 9px; }
.panel:has(.dk-head) .dk-tiles::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.42);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(198, 158, 88, 0.16);
}
.panel:has(.dk-head) .dk-tiles::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(206, 168, 96, 0.9), rgba(120, 86, 40, 0.92));
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.45);
}
.panel:has(.dk-head) .dk-tiles::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(232, 196, 122, 0.95), rgba(146, 106, 50, 0.95)); }

/* 八.3 四类卡牌主题：统一骨架 + 各自一身皮（纹理走 ::before，边角走 ::after） */
.dk-tile { overflow: hidden; }
.dk-tile:not(.slot-empty)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.dk-tile:not(.slot-empty)::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 240, 210, 0.07);
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
}
/* 文字/费用/说明压在纹理上面（.dkt-count / .dkt-drop 本来就是绝对定位，不在这儿动） */
.dk-tile > .dkt-cost,
.dk-tile > .dkt-name,
.dk-tile > .dkt-meta,
.dk-tile > .dkt-plus { position: relative; z-index: 1; }

/* 攻击：暗红 / 铜金，斜向能量纹 */
.dk-tile.hue-atk {
  --tile-glow: rgba(198, 78, 56, 0.5);
  border-color: rgba(198, 88, 66, 0.85);
  background: linear-gradient(178deg, rgba(120, 36, 28, 0.68), rgba(34, 12, 10, 0.85)), #1b1210;
}
.dk-tile.hue-atk::before { background: repeating-linear-gradient(58deg, rgba(255, 150, 90, 0.075) 0 2px, transparent 2px 9px); }
.dk-tile.hue-atk:hover { border-color: rgba(232, 120, 88, 0.95); box-shadow: inset 0 0 0 1px rgba(232, 180, 120, 0.22), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 16px var(--tile-glow); }

/* 防御：墨绿 / 深青，同心护盾线 */
.dk-tile.hue-def {
  --tile-glow: rgba(120, 200, 180, 0.42);
  border-color: rgba(96, 168, 152, 0.85);
  background: linear-gradient(178deg, rgba(24, 74, 66, 0.68), rgba(8, 24, 22, 0.86)), #0f1a18;
}
.dk-tile.hue-def::before {
  background:
    repeating-radial-gradient(circle at 50% 44%, rgba(160, 226, 206, 0.07) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}
.dk-tile.hue-def:hover { border-color: rgba(140, 220, 200, 0.95); box-shadow: inset 0 0 0 1px rgba(170, 230, 212, 0.24), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 16px var(--tile-glow); }

/* 辅助：紫黑 / 暗银，符文斜线 */
.dk-tile.hue-util {
  --tile-glow: rgba(158, 126, 208, 0.45);
  border-color: rgba(158, 126, 208, 0.85);
  background: linear-gradient(178deg, rgba(66, 42, 96, 0.68), rgba(18, 12, 28, 0.86)), #171123;
}
.dk-tile.hue-util::before {
  background:
    repeating-linear-gradient(-38deg, rgba(196, 168, 246, 0.06) 0 1px, transparent 1px 10px),
    radial-gradient(70% 50% at 50% 26%, rgba(178, 148, 236, 0.12), transparent 70%);
}
.dk-tile.hue-util:hover { border-color: rgba(198, 170, 246, 0.95); box-shadow: inset 0 0 0 1px rgba(210, 190, 250, 0.22), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 16px var(--tile-glow); }

/* 恢复：深林绿，柔和环形光 */
.dk-tile.hue-heal {
  --tile-glow: rgba(120, 200, 130, 0.42);
  border-color: rgba(104, 166, 116, 0.85);
  background: linear-gradient(178deg, rgba(34, 78, 46, 0.68), rgba(10, 24, 16, 0.86)), #11201a;
}
.dk-tile.hue-heal::before {
  background:
    radial-gradient(78% 58% at 50% 28%, rgba(150, 226, 160, 0.12), transparent 72%),
    repeating-linear-gradient(-24deg, rgba(180, 232, 180, 0.045) 0 1px, transparent 1px 12px);
}
.dk-tile.hue-heal:hover { border-color: rgba(140, 214, 150, 0.95); box-shadow: inset 0 0 0 1px rgba(178, 234, 186, 0.22), 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 16px var(--tile-glow); }

/* 通用：悬浮抬起、键盘聚焦、不可用（带满 2 张 / 卡组已满） */
.dk-tile { transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.dk-tile:focus-visible { outline: 2px solid rgba(232, 196, 122, 0.85); outline-offset: 2px; }
.dk-tile.maxed { opacity: 0.5; filter: saturate(0.75) brightness(0.9); }
.dk-tile.slot-empty::before, .dk-tile.slot-empty::after { content: none; }

/* 八.4 卡包底部两颗按钮：保存（暗金主）/ 取消（低一档） */
.panel:has(.dk-head) .panel-acts { gap: 12px; }
.panel:has(.dk-head) .panel-acts .btn { min-width: 104px; }

/* ── 八.5 战斗卡：文字一律夹在牌里（**只作用于决斗**，不动神奇动物战斗的 .bt-card） ── */
.duel .bt-hand .bt-card.duel-card {
  /* 牌高按内容给足（2 行牌名 + 3 行说明 + 费用 + 一分类行）；四张同高，不参差 */
  height: clamp(168px, 40vw, 192px);
  overflow: hidden;
}
.duel-card .bc-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
  min-width: 0; max-width: 100%;
}
/* 中心图腾在决斗卡上是**空的装饰格**（那六种画法挂在 .c-* 那一套上，这儿用不着）——
   压扁它，把高度让给牌名与说明 */
.duel-card .bc-totem { width: 26px; height: 16px; margin: 1px 0; opacity: 0.5; }
.duel-card .duel-cardmeta { max-width: 100%; white-space: nowrap; overflow: hidden; }
.duel-card .bc-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
  width: 100%; min-width: 0; margin-top: 4px;
}
.duel-card .bc-in { inset: 3px; }

/* 揭晓那两张小牌：同样给足高度，名字 2 行、说明 3 行，绝不越界 */
.duel-mini.bt-card {
  width: clamp(118px, 33vw, 150px);
  height: clamp(116px, 30vw, 134px);
  overflow: hidden;
}
.duel-mini .bc-cost { width: 18px; height: 18px; font-size: 11px; }
.duel-mini .bc-cost::before { inset: -2px; }
.duel-mini .bc-name {
  font-size: 12px; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; min-width: 0;
}
.duel-mini .bc-desc {
  font-size: 9.5px; line-height: 1.4; margin-top: 3px; padding: 2px 2px 1px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; width: 100%; min-width: 0;
}
.duel-mini .bc-in { display: none; }

/* ── 八.6 双方结算卡：左右分区（对手在左 / 你在右）＋ 侧边色条 ── */
.duel-reveal { position: relative; }
.duel-mini.bt-card.enemy::before,
.duel-mini.bt-card.player::before {
  position: absolute; top: 5px; z-index: 5;
  font-size: 9px; letter-spacing: 0.12em; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.duel-mini.bt-card.enemy::before { content: '对手'; left: 7px; color: #e8b3a4; }
.duel-mini.bt-card.player::before { content: '你'; right: 7px; color: #bfe0c2; }
.duel-mini.bt-card.enemy::after,
.duel-mini.bt-card.player::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 3px; z-index: 5;
}
.duel-mini.bt-card.enemy::after { left: 0; background: linear-gradient(180deg, rgba(206, 92, 74, 0.95), rgba(112, 34, 26, 0.55)); border-radius: 4px 0 0 4px; }
.duel-mini.bt-card.player::after { right: 0; background: linear-gradient(180deg, rgba(126, 196, 132, 0.95), rgba(30, 78, 44, 0.55)); border-radius: 0 4px 4px 0; }
/* 对手那一张压冷一档、你那张暖一档——只用来分区，不改卡面类别色 */
.duel-mini.bt-card.enemy { filter: saturate(0.92); }
.duel-mini.bt-card.player { filter: saturate(1.04); }

/* ── 八.7 战况那一行：做成一条克制的"战况札" ── */
.duel .bt-log {
  width: min(94%, 36rem);
  padding: 8px 14px;
  border: 1px solid rgba(198, 158, 88, 0.24);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(16, 11, 8, 0.62), rgba(10, 7, 5, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.05), 0 4px 14px rgba(0, 0, 0, 0.42);
  font-size: var(--fs-s);
  line-height: 1.7;
  color: rgba(242, 230, 202, 0.92);
}
/* 中段：给两张结算卡 + 战况札留足地方 */
.duel-mid { min-height: clamp(200px, 34vh, 320px); gap: 16px; }

/* ── 八.8 逐张咒语牌主题 ──
 * 战斗牌（.duel .bt-card.duel-card）与图鉴卡（.dk-codex-card）都带 data-card，
 * 于是 32 张咒语各有一份自己的色（--spell-tint 光晕 / --spell-edge 描边 / --spell-tier 档位），
 * 两边共用同一份定义——图鉴里看到的和手里摸到的是同一张牌。 */
[data-card] {
  --spell-tint: rgba(224, 189, 120, 0.2);
  --spell-edge: rgba(224, 189, 120, 0.62);
  --spell-tier: 0;
}

/* ── 进攻型 12 张 ── */
[data-card="flipendo"] { --spell-tint: rgba(150, 200, 238, 0.26); --spell-edge: rgba(178, 216, 246, 0.84); --spell-tier: 1; }
[data-card="expelliarmus"] { --spell-tint: rgba(214, 86, 72, 0.28); --spell-edge: rgba(234, 126, 106, 0.86); --spell-tier: 2; }
[data-card="stupefy"] { --spell-tint: rgba(230, 116, 62, 0.28); --spell-edge: rgba(244, 148, 96, 0.88); --spell-tier: 2; }
[data-card="reducto"] { --spell-tint: rgba(236, 108, 80, 0.34); --spell-edge: rgba(252, 168, 130, 0.96); --spell-tier: 4; }
[data-card="confringo"] { --spell-tint: rgba(244, 146, 58, 0.34); --spell-edge: rgba(252, 184, 98, 0.96); --spell-tier: 4; }
[data-card="incendio"] { --spell-tint: rgba(244, 132, 50, 0.32); --spell-edge: rgba(250, 170, 88, 0.94); --spell-tier: 3; }
[data-card="bombarda"] { --spell-tint: rgba(210, 112, 82, 0.3); --spell-edge: rgba(230, 148, 114, 0.92); --spell-tier: 3; }
[data-card="diffindo"] { --spell-tint: rgba(196, 216, 236, 0.26); --spell-edge: rgba(216, 232, 246, 0.86); --spell-tier: 2; }
[data-card="expulso"] { --spell-tint: rgba(232, 152, 70, 0.3); --spell-edge: rgba(246, 182, 106, 0.92); --spell-tier: 3; }
[data-card="sectumsempra"] { --spell-tint: rgba(184, 40, 50, 0.36); --spell-edge: rgba(216, 92, 92, 0.96); --spell-tier: 4; }
[data-card="avada"] { --spell-tint: rgba(92, 186, 122, 0.36); --spell-edge: rgba(138, 220, 156, 0.96); --spell-tier: 4; }
[data-card="crucio"] { --spell-tint: rgba(174, 32, 42, 0.38); --spell-edge: rgba(210, 70, 72, 0.96); --spell-tier: 4; }

/* ── 防御型 5 张 ── */
[data-card="protego"] { --spell-tint: rgba(112, 158, 214, 0.26); --spell-edge: rgba(148, 188, 234, 0.84); --spell-tier: 1; }
[data-card="finite"] { --spell-tint: rgba(160, 186, 210, 0.24); --spell-edge: rgba(192, 212, 230, 0.82); --spell-tier: 1; }
[data-card="salvio_hexia"] { --spell-tint: rgba(108, 178, 190, 0.28); --spell-edge: rgba(142, 202, 210, 0.88); --spell-tier: 2; }
[data-card="protego_totalum"] { --spell-tint: rgba(84, 132, 198, 0.32); --spell-edge: rgba(126, 170, 224, 0.92); --spell-tier: 3; }
[data-card="patronum"] { --spell-tint: rgba(188, 216, 248, 0.34); --spell-edge: rgba(208, 232, 254, 0.96); --spell-tier: 3; }

/* ── 恢复型 4 张 ── */
[data-card="episkey"] { --spell-tint: rgba(126, 196, 132, 0.26); --spell-edge: rgba(160, 216, 160, 0.84); --spell-tier: 1; }
[data-card="rennervate"] { --spell-tint: rgba(152, 212, 152, 0.26); --spell-edge: rgba(180, 226, 178, 0.86); --spell-tier: 1; }
[data-card="ferula"] { --spell-tint: rgba(224, 206, 152, 0.26); --spell-edge: rgba(236, 222, 178, 0.86); --spell-tier: 2; }
[data-card="vulnera"] { --spell-tint: rgba(100, 188, 132, 0.32); --spell-edge: rgba(140, 216, 162, 0.92); --spell-tier: 3; }

/* ── 辅助／效果型 11 张 ── */
[data-card="wingardium_leviosa"] { --spell-tint: rgba(164, 224, 246, 0.44); --spell-edge: rgba(182, 228, 248, 0.98); --spell-tier: 2; }
[data-card="locomotor"] { --spell-tint: rgba(150, 190, 190, 0.24); --spell-edge: rgba(182, 214, 212, 0.82); --spell-tier: 1; }
[data-card="aguamenti"] { --spell-tint: rgba(138, 196, 228, 0.26); --spell-edge: rgba(170, 216, 240, 0.86); --spell-tier: 1; }
[data-card="impedimenta"] { --spell-tint: rgba(150, 140, 214, 0.28); --spell-edge: rgba(180, 170, 234, 0.88); --spell-tier: 2; }
[data-card="silencio"] { --spell-tint: rgba(140, 118, 190, 0.28); --spell-edge: rgba(172, 154, 216, 0.88); --spell-tier: 2; }
[data-card="confundo"] { --spell-tint: rgba(178, 132, 196, 0.28); --spell-edge: rgba(202, 168, 220, 0.88); --spell-tier: 2; }
[data-card="arresto_momentum"] { --spell-tint: rgba(140, 170, 206, 0.26); --spell-edge: rgba(174, 200, 230, 0.86); --spell-tier: 2; }
[data-card="levicorpus"] { --spell-tint: rgba(198, 150, 198, 0.28); --spell-edge: rgba(218, 180, 220, 0.88); --spell-tier: 2; }
[data-card="petrificus_totalus"] { --spell-tint: rgba(178, 168, 214, 0.3); --spell-edge: rgba(200, 192, 232, 0.92); --spell-tier: 3; }
[data-card="incarcerous"] { --spell-tint: rgba(160, 132, 196, 0.3); --spell-edge: rgba(188, 164, 222, 0.92); --spell-tier: 3; }
[data-card="imperio"] { --spell-tint: rgba(152, 84, 172, 0.36); --spell-edge: rgba(198, 142, 210, 0.96); --spell-tier: 4; }

/* ── 战斗牌：把上面那三样套进 .bt-card 的皮 ── */
.duel .bt-card.duel-card[data-card] {
  border-color: var(--spell-edge);
  background-image:
    radial-gradient(92% 56% at 50% 10%, var(--spell-tint), transparent 72%),
    linear-gradient(160deg, var(--p1), var(--p2));
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.58),
    inset 0 0 22px var(--spell-tint),
    0 0 calc(3px + var(--spell-tier) * 3px) var(--spell-tint);
}
.duel .bt-card.duel-card[data-card]::before {
  background: linear-gradient(135deg, rgba(255, 244, 210, 0.12), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.22));
}
.duel .bt-card.duel-card[data-card] .bc-rune { opacity: 0.86; }
.duel .bt-card.duel-card[data-card] .bc-cost { box-shadow: 0 0 12px var(--spell-tint); }
/* 顶级那几张再加厚一档边：手里一眼看得出哪张是狠牌 */
.duel .bt-card.duel-card[data-card="reducto"],
.duel .bt-card.duel-card[data-card="confringo"],
.duel .bt-card.duel-card[data-card="sectumsempra"],
.duel .bt-card.duel-card[data-card="avada"],
.duel .bt-card.duel-card[data-card="crucio"],
.duel .bt-card.duel-card[data-card="imperio"] { border-width: 2px; }

/* 羽加迪姆：浅蓝、轻盈、飘着。 */
.duel .bt-card[data-card="wingardium_leviosa"] {
  background-image:
    radial-gradient(80% 55% at 50% 18%, rgba(202, 244, 255, 0.3), transparent 70%),
    repeating-linear-gradient(-14deg, rgba(190, 238, 255, 0.09) 0 1px, transparent 1px 13px),
    linear-gradient(160deg, #203b58, #101d32);
  animation: wingardiumFloat 4.6s ease-in-out infinite;
}
@keyframes wingardiumFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 不可饶恕咒：冷黑底 + 暗红脉动，和普通攻击牌分得开。 */
.duel .bt-card[data-card="avada"],
.duel .bt-card[data-card="crucio"],
.duel .bt-card[data-card="imperio"] {
  background-image:
    radial-gradient(58% 45% at 50% 18%, var(--spell-tint), transparent 70%),
    repeating-linear-gradient(125deg, rgba(220, 78, 64, 0.06) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, #1d1013, #090709 88%);
}
.duel .bt-card[data-card="avada"] {
  background-image:
    radial-gradient(55% 42% at 50% 18%, rgba(146, 226, 164, 0.22), transparent 66%),
    radial-gradient(65% 70% at 50% 100%, rgba(24, 74, 40, 0.3), transparent 70%),
    linear-gradient(160deg, #161c18, #070907 86%);
}
.duel .bt-card[data-card="avada"] .bc-name,
.duel .bt-card[data-card="crucio"] .bc-name,
.duel .bt-card[data-card="imperio"] .bc-name { color: #f2c8b8; text-shadow: 0 0 9px rgba(190, 50, 44, 0.55); }
.duel .bt-card[data-card="avada"] .bc-cost { background: radial-gradient(circle at 34% 30%, #d8f2d4, #2f6b44); }
.duel .bt-card[data-card="patronum"] .bc-cost { background: radial-gradient(circle at 34% 30%, #eaf4ff, #6d93c4); }

/* 边缘状态：不可用牌保留轮廓但压掉光效；选中的那张亮一档。 */
.duel .bt-card.duel-card.off[data-card] { filter: saturate(0.5) brightness(0.72); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); }
.duel .bt-card.duel-card.picked[data-card] { filter: saturate(1.16) brightness(1.1); }

/* ── 八.9 窄屏与动效降级 ── */
@media (max-width: 560px) {
  .duel-avatar { width: 48px; height: 48px; }
  .duel .bt-hand { gap: 7px; }
  .duel .bt-hand .bt-card.duel-card { height: clamp(162px, 46vw, 184px); }
  .duel-mini.bt-card { width: clamp(112px, 40vw, 140px); height: clamp(112px, 34vw, 128px); }
  .duel-mid { min-height: clamp(188px, 38vh, 280px); }
  .place.duel-club .place-name { font-size: 15px; }
  .panel:has(.dk-head) .panel-acts .btn { min-width: 88px; }
  .duel .bt-card[data-card="wingardium_leviosa"] { animation-duration: 5.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-tile, .duel-reveal.on, .duel-mini.bt-card { animation: none !important; transition: none !important; }
  .dk-tile:hover { transform: none; }
  .duel .bt-card[data-card="wingardium_leviosa"] { animation: none; }
}

/* ── 卡牌鉴：复用逐张主题，改成能读的图鉴墙 ── */
.sheet.duel-codex {
  width: min(96vw, 900px);
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(90, 66, 34, 0.28), transparent 70%),
    linear-gradient(180deg, #21170f, #0e0a08 92%);
  border-color: rgba(206, 168, 96, 0.52);
}
.dk-codex-intro { color: #b9a47c; font-size: var(--fs-xs); line-height: 1.7; }
.sheet.duel-codex .sheet-head { border-bottom: 1px solid rgba(198, 158, 88, 0.3); }
.sheet.duel-codex .sheet-head h2 { color: #f2e4c0; letter-spacing: 0.08em; }
.sheet.duel-codex .x-btn {
  border: 1px solid rgba(198, 158, 88, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(104, 76, 40, 0.9), rgba(44, 30, 16, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.18), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.sheet.duel-codex .x-btn:hover { border-color: rgba(232, 196, 122, 0.92); }
.sheet.duel-codex .acts { justify-content: center; }
.sheet.duel-codex .acts .btn { min-width: 92px; width: auto; }

/* 自适应列：窄屏两列、宽屏三到四列，不再把牌压成 64px 的细条 */
.dk-codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* 图鉴卡：盖掉 .dk-tile 那副 64×88 的小条身板，改成撑满格子的卡面 */
.dk-codex-card {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 152px;
  flex: initial;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 11px 11px 10px;
  text-align: left;
  border-radius: 7px;
  overflow: hidden;
  cursor: default;
}
.dk-codex-card:hover { transform: translateY(-3px); }
.dk-codex-card .dkt-cost { position: relative; z-index: 1; flex: none; }
.dk-codex-card .dkt-name {
  position: relative; z-index: 1;
  display: block; width: 100%; margin: 0;
  font-size: var(--fs-s); line-height: 1.35; text-align: left;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.dk-codex-card .dkt-meta {
  position: relative; z-index: 1;
  display: block; width: 100%;
  font-size: 9px; line-height: 1.5;
  color: rgba(231, 213, 173, 0.74);
  overflow-wrap: anywhere;
}
.dk-codex-desc {
  position: relative; z-index: 1;
  width: 100%;
  margin: 4px 0 0;
  font-size: 10px; line-height: 1.55;
  color: rgba(236, 223, 194, 0.92);
  overflow-wrap: anywhere;
}
/*
 * 获得条件那一行（创作者 2026-10-14 要的）：**非常小的字**，压在英文名上面。
 * 三档各有各的调子：要练出来的（route）是暖金——像注在卡片边上的一行小注；
 * 开局自带的（default）是中性灰——那是既成事实，不是要去追的目标；
 * 还没有获得条件的（none）最淡，照实写「该版本尚未实装」。
 */
.dk-codex-unlock {
  position: relative; z-index: 1;
  width: 100%;
  margin-top: 4px;
  font-size: 8px; line-height: 1.45;
  letter-spacing: 0.04em;
  color: rgba(232, 203, 141, 0.82);
  overflow-wrap: anywhere;
}
.dk-codex-unlock.default { color: rgba(206, 196, 176, 0.66); }
.dk-codex-unlock.none { color: rgba(184, 170, 146, 0.5); }

.dk-codex-en {
  position: relative; z-index: 1;
  margin-top: auto;
  padding-top: 5px;
  font-size: 8px; letter-spacing: 0.1em;
  color: rgba(218, 188, 122, 0.62);
  overflow-wrap: anywhere;
}

/* 已解锁咒语那一行熟练度：档位名 + 当前档位内进度的经验条 + 数字 */
.dk-codex-xp {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.dk-codex-xp .dkx-lb { flex: none; font-size: 8px; letter-spacing: 0.06em; color: #e8cb8d; }
.dk-codex-xp .dkx-bar {
  flex: 1 1 auto; min-width: 0; height: 5px;
  border-radius: 3px; overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(224, 189, 120, 0.28);
}
.dk-codex-xp .dkx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9c7a34, #ecc67d); }
.dk-codex-xp .dkx-bar.full i { background: linear-gradient(90deg, #b98d3c, #f7e0a4); }
.dk-codex-xp .dkx-tx { flex: none; font-size: 8px; color: rgba(226, 212, 176, 0.78); white-space: nowrap; }

/* 图鉴卡是大卡面，不要小牌那圈内框与小牌纹理（大卡上会糊成一块脏底）：
   样式全靠四类底色 + 逐张那道 1px 同色内描边 + 外发光。 */
.dk-codex-card.dk-tile::after { content: none; }
.dk-codex-card.dk-tile::before { content: none; }
/* 四类的底：用不透的纯色渐变，避免半透明叠底在大卡面上显脏 */
.dk-codex-card.hue-atk { background-image: linear-gradient(178deg, #3d1712, #140b09 92%); }
.dk-codex-card.hue-def { background-image: linear-gradient(178deg, #1c2c47, #0b1220 92%); }
.dk-codex-card.hue-heal { background-image: linear-gradient(178deg, #1f3a25, #0c1710 92%); }
.dk-codex-card.hue-util { background-image: linear-gradient(178deg, #2b2040, #131020 92%); }

/* 逐张主题套进图鉴卡（同一份 --spell-tint / --spell-edge / --spell-tier）
 * ⚠️ 不在牌面上叠大块径向渐变（试过：会在牌面中间留一团脏暗块），
 *    改成一圈 1px 同色内描边 + 外发光——干净，档位越高光越亮。 */
.dk-codex-card[data-card] {
  border-color: var(--spell-edge);
  box-shadow:
    inset 0 0 0 1px var(--spell-tint),
    0 6px 16px rgba(0, 0, 0, 0.42),
    0 0 calc(3px + var(--spell-tier) * 2px) var(--spell-tint);
}
.dk-codex-card[data-card] .dkt-cost { box-shadow: 0 0 10px var(--spell-tint); }
.dk-codex-card[data-card] .dkt-name { color: #f4e6c6; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86); }
.dk-codex-card[data-card]:hover { box-shadow: inset 0 0 0 1px var(--spell-tint), 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 calc(5px + var(--spell-tier) * 3px) var(--spell-tint); }
/* 高强度的几张在图鉴里也留一道内金线 */
.dk-codex-card[data-card="reducto"], .dk-codex-card[data-card="confringo"],
.dk-codex-card[data-card="sectumsempra"], .dk-codex-card[data-card="avada"],
.dk-codex-card[data-card="crucio"], .dk-codex-card[data-card="imperio"] { border-width: 2px; }
.dk-codex-card[data-card="wingardium_leviosa"] { animation: wingardiumFloat 4.6s ease-in-out infinite; }

/* 未解锁：整体压暗，但类别轮廓与主题色仍看得见；右上角挂一枚小标（不再压住文字） */
.dk-codex-card.locked { filter: saturate(0.42) brightness(0.7); opacity: 0.9; }
.dk-codex-card.locked::after {
  content: '未解锁';
  position: absolute; right: 7px; top: 7px; z-index: 2;
  padding: 1px 6px;
  font-size: 8px; letter-spacing: 0.1em;
  color: rgba(226, 212, 182, 0.86);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(190, 170, 130, 0.34);
  border-radius: 999px;
}

/*
 * 木人那边「刚才练的就是这一张」（创作者 2026-10-14 要的：木人界面用决斗/卡包这一身皮）。
 * 只加一圈金边与一层金光，牌面本身一点不动——练完还要能看清档位与那条经验条。
 * 那枚「熟练度 +N」的小标由界面挂上来（数字只有一份，在 data/spells.js 的 XP_PER_USE），
 * 不写在这张表里——写在 CSS 里就成了第二个来源。
 */
@keyframes dkTrainPulse {
  0%   { box-shadow: inset 0 0 0 1px var(--spell-tint), 0 6px 16px rgba(0, 0, 0, 0.42), 0 0 calc(3px + var(--spell-tier) * 2px) var(--spell-tint); }
  38%  { box-shadow: inset 0 0 0 2px rgba(247, 224, 164, 0.95), 0 0 28px rgba(236, 198, 125, 0.55), 0 0 calc(10px + var(--spell-tier) * 3px) var(--spell-tint); }
  100% { box-shadow: inset 0 0 0 2px rgba(244, 214, 140, 0.72), 0 0 14px rgba(236, 198, 125, 0.3), 0 0 calc(5px + var(--spell-tier) * 3px) var(--spell-tint); }
}
.dk-codex-card.is-trained {
  border-color: rgba(247, 224, 164, 0.9);
  animation: dkTrainPulse 900ms ease both;
}
.dk-codex-trained {
  position: absolute; right: 7px; top: 7px; z-index: 2;
  padding: 1px 6px;
  font-size: 8px; letter-spacing: 0.06em;
  color: #2a1c08;
  background: linear-gradient(180deg, #ffeec2, #e2b463);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .dk-codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dk-codex-card { min-height: 138px; padding: 9px 9px 8px; }
}
@media (max-width: 360px) { .dk-codex-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .dk-codex-card[data-card="wingardium_leviosa"] { animation: none; }
  /* 点亮那一下还是要有结果：留下终态那圈金边，只是不做那一下脉冲 */
  .dk-codex-card.is-trained {
    animation: none;
    box-shadow: inset 0 0 0 2px rgba(244, 214, 140, 0.72), 0 0 14px rgba(236, 198, 125, 0.3), 0 0 calc(5px + var(--spell-tier) * 3px) var(--spell-tint);
  }
}


.sheet:has(.btn.gold) {
  background-image: none;
  background-color: #1c130c;
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(126, 92, 44, 0.22), transparent 62%),
    radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 240, 210, 0.016) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #241a12, #150e08 92%);
  border: 1px solid rgba(198, 158, 88, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(198, 158, 88, 0.14),
    inset 0 0 46px rgba(0, 0, 0, 0.6),
    0 28px 70px rgba(0, 0, 0, 0.75);
  color: #e6d6ae;
}
/* 抬头：暗金细线，不再用纸上那道墨线与红套印 */
.sheet:has(.btn.gold) .sheet-head {
  border-bottom: 1px solid rgba(198, 158, 88, 0.3);
  box-shadow: none;
}
.sheet:has(.btn.gold) .sheet-head h2 {
  color: #f2e4c0;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.sheet:has(.btn.gold) .x-btn {
  border: 1px solid rgba(198, 158, 88, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(104, 76, 40, 0.9), rgba(44, 30, 16, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.18), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.sheet:has(.btn.gold) .x-btn:hover {
  border-color: rgba(232, 196, 122, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.3), 0 0 12px rgba(232, 196, 122, 0.34);
}
.sheet:has(.btn.gold) .x-btn .x-img { filter: brightness(1.04) saturate(0.85); }

/* 纸上那几档字，翻成暖色 */
.sheet:has(.btn.gold) .narr { color: #e6d6ae; }
.sheet:has(.btn.gold) .narr.lose { color: #e3a79b; }
.sheet:has(.btn.gold) .muted { color: #b6a27c; }
.sheet:has(.btn.gold) .duel-row { border-bottom-color: rgba(198, 158, 88, 0.22); }
.sheet:has(.btn.gold) .duel-row .grow { color: #b9a67f; }
.sheet:has(.btn.gold) .duel-row .val { color: #f0e2bd; }
.sheet:has(.btn.gold) .duel-reward { color: #e8cb8d; }

/* ═══════════ 四之二、本周对手下面那一块：不期而遇（ui/duelclub.js 的 encBox） ═══════════
 *
 * 创作者 2026-10-14 定的：「在本周对手的下面专门做一个框，要有邂逅的感觉，css 美化要显眼」。
 * 所以它比那一屏别的方块**多两样东西**：一圈会呼吸的暖金光（比 .dc-card 那层玻璃亮一档），
 * 和一枚圆形的真人立绘。底色仍走那一屏的暗玻璃，不另起一套配色。
 */

.dc-enc {
  position: relative;
  width: min(680px, 94%);
  /* 上下都给一档空：它下面是这一屏最后一截，上面顶着规则说明（规则说明自己没有下边距） */
  margin: 16px auto 16px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(240, 214, 150, 0.6);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(56, 42, 22, 0.9), rgba(24, 18, 11, 0.92));
  color: var(--cine-text);
  animation: dcEncGlow 4.6s ease-in-out infinite;
}
@keyframes dcEncGlow {
  0%, 100% { box-shadow: 0 0 13px rgba(224, 178, 100, 0.2), inset 0 1px 0 rgba(255, 238, 198, 0.14); }
  50%      { box-shadow: 0 0 28px rgba(255, 214, 140, 0.44), inset 0 1px 0 rgba(255, 238, 198, 0.2); }
}

.dc-enc-cap { display: flex; align-items: baseline; gap: 8px; }
.dc-enc-capzh { font-size: var(--fs-m); letter-spacing: 0.22em; color: var(--cine-gold); }
.dc-enc-capen {
  font-family: var(--font-hand); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(224, 178, 100, 0.62);
}

.dc-enc-body { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

/* 那一枚小像：**通讯里那一枚**（描金椭圆画框里的小像，图里自带框）——
 * 所以这儿只给它一圈柔光，不再套第二层圆框（创作者 2026-10-14 指的：要头像，不要立绘） */
.dc-enc-face {
  flex: none; width: 60px; height: 71px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 10px rgba(224, 178, 100, 0.5));
}
.dc-enc-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dc-enc-sigil { font-size: 22px; color: rgba(224, 178, 100, 0.75); }

.dc-enc-tx { flex: 1 1 auto; min-width: 0; }
.dc-enc-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dc-enc-zh { font-family: var(--font-hand); font-size: var(--fs-l); color: var(--cine-gold); }
.dc-enc-house { font-size: var(--fs-xs); }
.dc-enc-line { margin-top: 4px; font-size: var(--fs-s); color: var(--cine-dim); line-height: 1.6; }

.dc-enc-acts { display: flex; justify-content: flex-end; margin-top: 12px; }

/* 今天已经交过手：留一行字（那个框没了总要有个交代） */
.dc-enc-after {
  width: min(680px, 94%); margin: 16px auto 16px;
  font-size: var(--fs-xs); color: var(--cine-dim); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .dc-enc { animation: none; box-shadow: 0 0 16px rgba(224, 178, 100, 0.28), inset 0 1px 0 rgba(255, 238, 198, 0.18); }
}

/* ═══════════ 四之三、「邂逅」那一场的说话气泡（ui/duel.js 的 sayBubble） ═══════════
 *
 * 创作者 2026-10-14 定的：那一场里，他每隔一回合会在敌方那一行**底下**冒一句话，
 * 三秒后自己消失（下一句来了就顶掉）。四类（挨打 / 他打中你 / 看到你回血 / 被你挡下）
 * 的台词在 data/duel-lines.js。
 *
 * ⚠️ 它是**浮在上面的一层**，不占位置（创作者 2026-10-14 追的：第一版走 flex-basis:100%
 *    去占一整行，一弹出来就把下面整块界面往下挤、谁都被挤变形）。
 *    所以：`position: absolute` 挂在**敌方那一行**上（那一行自己 position: relative），
 *    从它的下沿往外冒，`z-index` 压在中间那一块上面——**一个像素都不动别人的布局**。
 */

.duel-side.enemy { position: relative; }

.duel-say {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 40;
  margin-top: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(224, 189, 120, 0.5);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(46, 34, 20, 0.96), rgba(22, 16, 10, 0.96));
  color: #f2e2bd;
  font-family: var(--font-hand);
  font-size: var(--fs-s);
  letter-spacing: 0.04em;
  line-height: 1.6;
  pointer-events: none;                 /* 浮层不该抢下面那些牌与钮的点击 */
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 16px rgba(224, 178, 100, 0.26);
}
.duel-say[hidden] { display: none; }

/* 小尾巴：朝着左上方那颗头像 */
.duel-say::before {
  content: '';
  position: absolute;
  left: 22px; top: -6px;
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: rgba(46, 34, 20, 0.94);
  border-left: 1px solid rgba(224, 189, 120, 0.5);
  border-top: 1px solid rgba(224, 189, 120, 0.5);
}

.duel-say.on { animation: duelSayIn 260ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes duelSayIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .duel-say.on { animation: none; }
}